chenlei 10 ماه پیش
والد
کامیت
3f8ceba106

+ 1 - 0
src/api/collections.ts

@@ -29,6 +29,7 @@ export interface CollectionDetail extends CollectionListItem {
   rtf: string;
   size: string;
   author: string;
+  filePath: string;
   files: FileItem[];
 }
 

+ 1 - 0
src/api/events.ts

@@ -15,6 +15,7 @@ export interface EventListItem {
   thumb: string;
   dateStart: string;
   dateEnd: string;
+  filePath: string;
 }
 
 export interface EventDetail extends EventListItem {

+ 1 - 0
src/api/exhibition.ts

@@ -27,6 +27,7 @@ export interface ExhibitionsListItem {
   name: string;
   thumb: string;
   digest: string;
+  filePath: string;
 }
 
 export interface ExhibitionDetail extends ExhibitionsListItem {

+ 4 - 0
src/api/index.ts

@@ -10,6 +10,10 @@ export interface TxtArrItem {
   id: number;
   name: string;
   txt: string;
+  fileInfo: {
+    fileName: string;
+    filePath: string;
+  };
 }
 
 export const getHomeListApi = () => {

+ 2 - 0
src/components/Layout/index.vue

@@ -33,6 +33,7 @@
               <li
                 v-for="item in topData.filter((i) => !i.hideNav)"
                 :key="item.id"
+                tabindex="0"
                 aria-label="Link"
                 :aria-description="item.name"
                 :class="{
@@ -49,6 +50,7 @@
                   <li
                     v-for="(val, index) in item.children"
                     :key="index"
+                    tabindex="0"
                     :class="{ active2: $route.path === val.routeParams }"
                     aria-label="Link"
                     :aria-description="val.name"

+ 26 - 8
src/views/Collections/components/DetailDialog/index.vue

@@ -1,7 +1,10 @@
 <template>
   <ElDialog v-model="show" class="collection-detail" :width="1010 + 32">
     <div v-loading="loading" class="collection-detail-preview">
-      <h3 tabindex="0" :aria-description="detail?.name">
+      <h3
+        tabindex="0"
+        :aria-audio-url="detail?.filePath ? baseUrl + detail.filePath : ''"
+      >
         {{ detail?.name }}
       </h3>
 
@@ -49,13 +52,21 @@
         {{ detail.author }}
       </p>
 
-      <p v-if="detail.dictAge">{{ detail.dictAge }}</p>
+      <p v-if="detail.dictAge" tabindex="0">{{ detail.dictAge }}</p>
 
-      <p v-if="detail.size">{{ detail.size }}</p>
+      <p v-if="detail.size" tabindex="0">{{ detail.size }}</p>
 
-      <p v-if="detail.digest">{{ detail.digest }}</p>
+      <p v-if="detail.digest" tabindex="0">{{ detail.digest }}</p>
 
-      <div v-for="item in rtf" :key="item.id" v-html="item.txt" />
+      <div
+        v-for="item in rtf"
+        :key="item.id"
+        v-html="item.txt"
+        tabindex="0"
+        :aria-audio-url="
+          item.fileInfo.filePath ? baseUrl + item.fileInfo.filePath : ''
+        "
+      />
     </div>
   </ElDialog>
 
@@ -69,7 +80,11 @@
 </template>
 
 <script lang="ts" setup>
-import { getCollectionDetailApi, type CollectionDetail } from "@/api";
+import {
+  getCollectionDetailApi,
+  type CollectionDetail,
+  type TxtArrItem,
+} from "@/api";
 import { getBaseURL } from "@dage/service";
 import { ref, watch, reactive, computed, nextTick, onBeforeUnmount } from "vue";
 
@@ -98,7 +113,7 @@ let timer: NodeJS.Timeout;
 const maskRef = ref();
 const loading = ref(false);
 const curImgIndex = ref(0);
-const rtf = ref<{ id: number; txt: string }[]>([]);
+const rtf = ref<TxtArrItem[]>([]);
 const detail = ref<CollectionDetail | null>(null);
 const firstSliderHeight = ref(0);
 
@@ -123,7 +138,10 @@ const getDetail = async () => {
     firstSliderHeight.value = 0;
     const data = await getCollectionDetailApi(props.id);
     detail.value = data;
-    rtf.value = JSON.parse(data.rtf).txtArr;
+    rtf.value = JSON.parse(data.rtf).txtArr.map((item: TxtArrItem) => ({
+      ...item,
+      txt: item.txt.replace(/tabindex="0"/g, ""),
+    }));
 
     if (data.files.length) {
       const img = new Image();

+ 17 - 2
src/views/Collections/index.vue

@@ -33,7 +33,10 @@
             <template #item="{ item, url }">
               <div
                 class="collections-item"
+                tabindex="0"
                 aria-label="Link"
+                :aria-description="item.name"
+                :aria-audio-url="item.filePath ? baseUrl + item.filePath : ''"
                 @click="handleItemClick(item)"
               >
                 <img
@@ -43,10 +46,22 @@
                   :style="{ height: item.imgHeight + 'px' }"
                 />
                 <div class="collections-item__inner">
-                  <p tabindex="0" :aria-description="item.name">
+                  <p
+                    tabindex="0"
+                    aria-label="Link"
+                    :aria-audio-url="
+                      item.filePath ? baseUrl + item.filePath : ''
+                    "
+                  >
                     {{ item.name }}
                   </p>
-                  <p tabindex="0" :aria-description="item.digest">
+                  <p
+                    tabindex="0"
+                    aria-label="Link"
+                    :aria-audio-url="
+                      item.filePath ? baseUrl + item.filePath : ''
+                    "
+                  >
                     {{ item.digest }}
                   </p>
                 </div>

+ 18 - 3
src/views/Events/detail.vue

@@ -12,7 +12,10 @@
 
       <div class="events-detail-hd">
         <div class="events-detail-hd__info">
-          <h3 tabindex="0">
+          <h3
+            tabindex="0"
+            :aria-audio-url="detail?.filePath ? baseUrl + detail.filePath : ''"
+          >
             {{ detail?.name }}
           </h3>
           <!-- <p tabindex="0">International Symposium</p> -->
@@ -48,8 +51,15 @@
       </div>
 
       <div
+        v-if="detail"
         class="events-detail-container"
-        v-html="detail?.txtArr[tabIndex].txt"
+        v-html="detail.txtArr[tabIndex].txt"
+        tabindex="0"
+        :aria-audio-url="
+          detail.txtArr[tabIndex].fileInfo.filePath
+            ? baseUrl + detail.txtArr[tabIndex].fileInfo.filePath
+            : ''
+        "
       />
 
       <div v-if="recommendList.length" class="events-detail-other">
@@ -115,7 +125,12 @@ const getDetail = async () => {
     detail.value = {
       ...data,
       titleArr: JSON.parse(data.rtfTitle).filter((i: string) => Boolean(i)),
-      txtArr: data.rtf ? JSON.parse(data.rtf).txtArr : [],
+      txtArr: data.rtf
+        ? JSON.parse(data.rtf).txtArr.map((item: TxtArrItem) => ({
+            ...item,
+            txt: item.txt.replace(/tabindex="0"/g, ""),
+          }))
+        : [],
     };
 
     if (routeId.length > 1) tabIndex.value = Number(routeId[1]);

+ 5 - 2
src/views/Events/index.vue

@@ -24,6 +24,7 @@
               class="events-page-item"
               tabindex="0"
               aria-label="Link"
+              :aria-audio-url="item.filePath ? baseUrl + item.filePath : ''"
               :style="{
                 backgroundImage: `url(${baseUrl}${item.thumb})`,
               }"
@@ -38,12 +39,14 @@
                 </div>
 
                 <div class="events-page-item__container">
-                  <p v-for="title in item._rtfTitle" :key="title">
+                  <p v-for="title in item._rtfTitle" :key="title" tabindex="0">
                     ■ {{ title }}
                   </p>
                 </div>
 
-                <i class="events-page-item__date">Date: {{ item.date }}</i>
+                <i class="events-page-item__date" tabindex="0"
+                  >Date: {{ item.date }}</i
+                >
               </div>
             </li>
           </template>

+ 7 - 1
src/views/Exhibitions/Detail/components/Overview.vue

@@ -5,7 +5,13 @@
     :style="{ height: hasMore ? `${height}px` : 'auto' }"
   >
     <div class="exh-detail-overview-hd">
-      <p class="title" tabindex="0">{{ detail?.name }}</p>
+      <p
+        class="title"
+        tabindex="0"
+        :aria-audio-url="detail?.filePath ? baseUrl + detail.filePath : ''"
+      >
+        {{ detail?.name }}
+      </p>
       <div>
         <div v-if="detail?.dateStart">
           <img :src="DateIcon" style="width: 18px; height: 20px" />

+ 6 - 2
src/views/Exhibitions/components/ImgItem/index.vue

@@ -3,6 +3,10 @@
     v-for="item in list"
     :key="item.id"
     class="img-list"
+    tabindex="0"
+    aria-label="Image link"
+    :aria-audio-url="item.filePath ? baseUrl + item.filePath : ''"
+    :aria-description="item.name"
     @click="
       $router.push({
         name: 'ExhibitionsDetail',
@@ -12,8 +16,8 @@
   >
     <ElImage
       :src="baseUrl + item.thumb"
-      aria-label="Image link"
-      :aria-description="item.name"
+      style="width: 100%; height: 100%"
+      fit="cover"
     />
     <p>{{ item.name }}</p>
   </div>

+ 17 - 8
src/views/Exhibitions/components/ListItem/index.vue

@@ -3,6 +3,10 @@
     v-for="item in list"
     :key="item.id"
     class="list-item"
+    tabindex="0"
+    aria-label="link"
+    :aria-audio-url="item.filePath ? baseUrl + item.filePath : ''"
+    :aria-description="item.name"
     @click="
       $router.push({
         name: 'ExhibitionsDetail',
@@ -10,16 +14,21 @@
       })
     "
   >
-    <ElImage
-      fit="cover"
-      :src="baseUrl + item.thumb"
-      aria-label="Image link"
-      :aria-description="item.name"
-    />
+    <ElImage fit="cover" :src="baseUrl + item.thumb" />
 
     <div class="list-item__inner" aria-label="Link">
-      <p class="list-item__title">{{ item.name }}</p>
-      <p class="list-item__content limit-line line-4">
+      <p
+        class="list-item__title"
+        tabindex="0"
+        :aria-audio-url="item.filePath ? baseUrl + item.filePath : ''"
+      >
+        {{ item.name }}
+      </p>
+      <p
+        class="list-item__content limit-line line-4"
+        tabindex="0"
+        :aria-audio-url="item.filePath ? baseUrl + item.filePath : ''"
+      >
         {{ item.digest }}
       </p>
     </div>