From e1555d7b4632cd94613eaa24be128f49369d2369 Mon Sep 17 00:00:00 2001 From: Zyronon Date: Tue, 6 Jan 2026 23:12:02 +0800 Subject: [PATCH] feat:Optimize the book detail page --- components.d.ts | 2 + src/components/dialog/Dialog.vue | 1 - src/hooks/dict.ts | 20 ++++----- src/pages/article/ArticlesPage.vue | 1 - src/pages/article/BookDetail.vue | 41 +++++++++---------- .../article/components/TypingArticle.vue | 2 +- src/pages/test/test.vue | 2 +- src/pages/word/DictList.vue | 2 +- src/stores/base.ts | 2 +- 9 files changed, 34 insertions(+), 39 deletions(-) diff --git a/components.d.ts b/components.d.ts index 3906ae69..4f7ce186 100644 --- a/components.d.ts +++ b/components.d.ts @@ -46,6 +46,7 @@ declare module 'vue' { IconFluentAdd16Regular: typeof import('~icons/fluent/add16-regular')['default'] IconFluentAdd20Regular: typeof import('~icons/fluent/add20-regular')['default'] IconFluentAddSquare20Regular: typeof import('~icons/fluent/add-square20-regular')['default'] + IconFluentAlignSpaceFitVertical20Regular: typeof import('~icons/fluent/align-space-fit-vertical20-regular')['default'] IconFluentArrowBounce20Regular: typeof import('~icons/fluent/arrow-bounce20-regular')['default'] IconFluentArrowCircleRight16Regular: typeof import('~icons/fluent/arrow-circle-right16-regular')['default'] IconFluentArrowClockwise20Regular: typeof import('~icons/fluent/arrow-clockwise20-regular')['default'] @@ -116,6 +117,7 @@ declare module 'vue' { IconFluentTextEditStyle20Regular: typeof import('~icons/fluent/text-edit-style20-regular')['default'] IconFluentTextListAbcUppercaseLtr20Regular: typeof import('~icons/fluent/text-list-abc-uppercase-ltr20-regular')['default'] IconFluentTextParagraph16Regular: typeof import('~icons/fluent/text-paragraph16-regular')['default'] + IconFluentTextPositionThrough20Regular: typeof import('~icons/fluent/text-position-through20-regular')['default'] IconFluentTextUnderlineDouble20Regular: typeof import('~icons/fluent/text-underline-double20-regular')['default'] IconFluentTranslate16Regular: typeof import('~icons/fluent/translate16-regular')['default'] IconFluentTranslateOff16Regular: typeof import('~icons/fluent/translate-off16-regular')['default'] diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue index 13a7105a..d8eb35e8 100644 --- a/src/components/dialog/Dialog.vue +++ b/src/components/dialog/Dialog.vue @@ -83,7 +83,6 @@ async function close() { watch( () => props.modelValue, n => { - // console.log('n', n) if (n) { id = Date.now() runtimeStore.modalList.push({ id, close }) diff --git a/src/hooks/dict.ts b/src/hooks/dict.ts index ffad27ea..c802ddba 100644 --- a/src/hooks/dict.ts +++ b/src/hooks/dict.ts @@ -2,8 +2,8 @@ import { Article, Dict, DictId, DictType, TaskWords, Word } from '@/types/types. import { useBaseStore } from '@/stores/base.ts' import { useSettingStore } from '@/stores/setting.ts' import { getDefaultDict, getDefaultWord } from '@/types/func.ts' -import { _getDictDataByUrl, cloneDeep, getRandomN, resourceWrap, shuffle, splitIntoN } from '@/utils' -import { onMounted, watch } from 'vue' +import { _getDictDataByUrl, cloneDeep, getRandomN, resourceWrap, shuffle, sleep, splitIntoN } from '@/utils' +import { onMounted, ref, watch } from 'vue' import { AppEnv, DICT_LIST } from '@/config/env.ts' import { detail } from '@/apis' import { useRuntimeStore } from '@/stores/runtime.ts' @@ -220,32 +220,31 @@ export function getCurrentStudyWord(): TaskWords { export function useGetDict() { const store = useBaseStore() const runtimeStore = useRuntimeStore() - let loading = $ref(false) + let loading = ref(false) const route = useRoute() const router = useRouter() watch( [() => store.load, () => loading], ([a, b]) => { - if (a && b) loadDict() + if (a && b.value) loadDict() }, { immediate: true } ) onMounted(() => { if (!runtimeStore.editDict?.id) { - let dictId = route.params?.id + let dictId = route.query?.id if (!dictId) { return router.push('/articles') } - loading = true + loading.value = true } else { loadDict(runtimeStore.editDict) } }) async function loadDict(dict?: Dict) { - // console.log('load好了开始加载') if (!dict) { dict = getDefaultDict() let dictId = route.query.id @@ -262,7 +261,7 @@ export function useGetDict() { ![DictId.articleCollect].includes(dict.en_name || dict.id) && !dict?.is_default ) { - loading = true + loading.value = true let r = await _getDictDataByUrl(dict, DictType.article) runtimeStore.editDict = r } @@ -277,14 +276,13 @@ export function useGetDict() { } } } - loading = false + loading.value = false } else { - // router.push('/articles') + router.push('/articles') } } return { - dict: runtimeStore.editDict, loading, } } diff --git a/src/pages/article/ArticlesPage.vue b/src/pages/article/ArticlesPage.vue index 90e1e515..4916b033 100644 --- a/src/pages/article/ArticlesPage.vue +++ b/src/pages/article/ArticlesPage.vue @@ -75,7 +75,6 @@ async function init() { watch( () => store?.sbook?.id, n => { - console.log('n', n) if (!n) { _nextTick(async () => { const Shepherd = await loadJsLib('Shepherd', LIB_JS_URL.SHEPHERD) diff --git a/src/pages/article/BookDetail.vue b/src/pages/article/BookDetail.vue index 7ea4dea1..2b1d145e 100644 --- a/src/pages/article/BookDetail.vue +++ b/src/pages/article/BookDetail.vue @@ -3,30 +3,20 @@ import BackIcon from '@/components/BackIcon.vue' import Empty from '@/components/Empty.vue' import ArticleList from '@/components/list/ArticleList.vue' import { useBaseStore } from '@/stores/base.ts' -import { Article, Dict, DictId, DictType } from '@/types/types.ts' +import { Article, Dict, DictType } from '@/types/types.ts' import { useRuntimeStore } from '@/stores/runtime.ts' import BaseButton from '@/components/BaseButton.vue' import { useRoute, useRouter } from 'vue-router' import EditBook from '@/pages/article/components/EditBook.vue' import { computed, onMounted, onUnmounted, watch } from 'vue' -import { - _dateFormat, - _getDictDataByUrl, - _nextTick, - cloneDeep, - msToHourMinute, - resourceWrap, - total, - useNav, -} from '@/utils' +import { _dateFormat, _getDictDataByUrl, _nextTick, msToHourMinute, resourceWrap, total, useNav } from '@/utils' import { getDefaultArticle, getDefaultDict } from '@/types/func.ts' import Toast from '@/components/base/toast/Toast.ts' import ArticleAudio from '@/pages/article/components/ArticleAudio.vue' import { MessageBox } from '@/utils/MessageBox.tsx' import { useSettingStore } from '@/stores/setting.ts' import { useFetch } from '@vueuse/core' -import { AppEnv, DICT_LIST } from '@/config/env.ts' -import { detail } from '@/apis' +import { DICT_LIST } from '@/config/env.ts' import BaseIcon from '@/components/BaseIcon.vue' import Switch from '@/components/base/Switch.vue' import { useGetDict } from '@/hooks/dict.ts' @@ -70,7 +60,7 @@ const showBookDetail = computed(() => { return !(isAdd || isEdit) }) -const { dict, loading } = useGetDict() +const { loading } = useGetDict() onMounted(() => { if (route.query?.isAdd) { @@ -157,6 +147,7 @@ const list = $computed(() => { }), ].concat(runtimeStore.editDict.articles) }) +console.log('list',list) let showTranslate = $ref(true) let startPlay = $ref(false) @@ -185,6 +176,7 @@ const shouldShowInlineTranslation = $computed(() => { // 定位翻译到原文下方 function positionTranslations() { + if (loading.value || selectArticle.id === -1) return _nextTick(() => { const articleRect = articleWrapperRef.getBoundingClientRect() selectArticle.textTranslate.split('\n\n').forEach((paragraph, paraIndex) => { @@ -219,8 +211,10 @@ watch([() => displayMode, () => selectArticle.id, () => showTranslate], () => { -
+
displayMode, () => selectArticle.id, () => showTranslate], () => {
-
+
diff --git a/src/pages/article/components/TypingArticle.vue b/src/pages/article/components/TypingArticle.vue index bb728f9f..4712ec1b 100644 --- a/src/pages/article/components/TypingArticle.vue +++ b/src/pages/article/components/TypingArticle.vue @@ -675,7 +675,7 @@ const currentPractice = inject('currentPractice', [])
{{ store.sbook.lastLearnIndex + 1 }}. - {{ props.article?.title??'' }} + {{ props.article?.title??'' }} {{ props.article?.titleTranslate }}
diff --git a/src/pages/test/test.vue b/src/pages/test/test.vue index 5a43eea6..d18e9e21 100644 --- a/src/pages/test/test.vue +++ b/src/pages/test/test.vue @@ -29,7 +29,7 @@ async function check() { console.parse(str) // console.log(str) let data = checkAndUpgradeSaveDict(str) - console.log('data', data) + // console.log('data', data) // this.setState(data) } diff --git a/src/pages/word/DictList.vue b/src/pages/word/DictList.vue index a4f27648..31821fbf 100644 --- a/src/pages/word/DictList.vue +++ b/src/pages/word/DictList.vue @@ -58,7 +58,7 @@ const groupedByCategoryAndTag = $computed(() => { data.push([key, groupByDictTags(value)]) } [data[2], data[3]] = [data[3], data[2]]; - console.log('data', data) + // console.log('data', data) return data }) diff --git a/src/stores/base.ts b/src/stores/base.ts index 7c23b61a..f13d5576 100644 --- a/src/stores/base.ts +++ b/src/stores/base.ts @@ -185,7 +185,7 @@ export const useBaseStore = defineStore('base', { Object.assign(data, res.data) } } - console.log('data', data) + // console.log('data', data) this.setState(data) } catch (e) { console.error('读取本地dict数据失败', e)