|
@@ -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();
|