From 5a3f4445dcf84d82c3710f0d68a689ca5b7b9c98 Mon Sep 17 00:00:00 2001 From: zyronon Date: Thu, 30 Nov 2023 01:13:18 +0800 Subject: [PATCH 1/3] debug --- components.d.ts | 5 +- src/components/Input.vue | 3 +- src/components/article/EditArticle.vue | 2 +- src/components/list2/ArticleList4.vue | 133 ++++++++++++++++++ src/components/{list => list2}/BaseList.vue | 59 ++++---- src/pages/practice/practice-article/index.vue | 27 +++- src/stores/base.ts | 1 - 7 files changed, 195 insertions(+), 35 deletions(-) create mode 100644 src/components/list2/ArticleList4.vue rename src/components/{list => list2}/BaseList.vue (64%) diff --git a/components.d.ts b/components.d.ts index d2445a09..845f90ad 100644 --- a/components.d.ts +++ b/components.d.ts @@ -10,11 +10,11 @@ declare module 'vue' { Add: typeof import('./src/components/toolbar/Add.vue')['default'] ArticleList2: typeof import('./src/components/list/ArticleList2.vue')['default'] ArticleList3: typeof import('./src/components/list/ArticleList3.vue')['default'] - ArticleListFQ: typeof import('./src/components/article/ArticleList-FQ.vue')['default'] + ArticleList4: typeof import('./src/components/list2/ArticleList4.vue')['default'] Backgorund: typeof import('./src/components/Backgorund.vue')['default'] BaseButton: typeof import('./src/components/BaseButton.vue')['default'] BaseIcon: typeof import('./src/components/BaseIcon.vue')['default'] - BaseList: typeof import('./src/components/list/BaseList.vue')['default'] + BaseList: typeof import('./src/components/list2/BaseList.vue')['default'] ChapterList: typeof import('./src/components/list/ChapterList.vue')['default'] ChapterName: typeof import('./src/components/toolbar/ChapterName.vue')['default'] Close: typeof import('./src/components/icon/Close.vue')['default'] @@ -28,7 +28,6 @@ declare module 'vue' { EditAbleText: typeof import('./src/components/EditAbleText.vue')['default'] EditArticle: typeof import('./src/components/article/EditArticle.vue')['default'] EditBatchArticleModal: typeof import('./src/components/article/EditBatchArticleModal.vue')['default'] - EditBatchArticleModalFQ: typeof import('./src/components/article/EditBatchArticleModal-FQ.vue')['default'] EditSingleArticleModal: typeof import('./src/components/article/EditSingleArticleModal.vue')['default'] ElButton: typeof import('element-plus/es')['ElButton'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] diff --git a/src/components/Input.vue b/src/components/Input.vue index 701cdcfd..e10eb59e 100644 --- a/src/components/Input.vue +++ b/src/components/Input.vue @@ -39,7 +39,8 @@ useWindowClick((e: PointerEvent) => { .base-input { border: 1px solid var(--color-second-bg); - border-radius: 4rem; + border-radius: 6rem; + overflow: hidden; padding: 3rem 5rem; transition: all .3s; display: flex; diff --git a/src/components/article/EditArticle.vue b/src/components/article/EditArticle.vue index 08872d6a..96275485 100644 --- a/src/components/article/EditArticle.vue +++ b/src/components/article/EditArticle.vue @@ -107,7 +107,7 @@ function onPaste(event: ClipboardEvent) { () => { appendTranslate(paste) renewSections() - }, + },null, { confirmButtonText: '需要', cancelButtonText: '关闭', diff --git a/src/components/list2/ArticleList4.vue b/src/components/list2/ArticleList4.vue new file mode 100644 index 00000000..07032863 --- /dev/null +++ b/src/components/list2/ArticleList4.vue @@ -0,0 +1,133 @@ + + + + + \ No newline at end of file diff --git a/src/components/list/BaseList.vue b/src/components/list2/BaseList.vue similarity index 64% rename from src/components/list/BaseList.vue rename to src/components/list2/BaseList.vue index 62c0886a..29168f16 100644 --- a/src/components/list/BaseList.vue +++ b/src/components/list2/BaseList.vue @@ -6,20 +6,26 @@ import {usePlayWordAudio} from "@/hooks/sound.ts"; import {watch} from 'vue' const props = withDefaults(defineProps<{ - list: Word[], + list?: any[], activeIndex?: number, + activeId?: string, isActive?: boolean showTranslate?: boolean showWord?: boolean }>(), { + list: [], activeIndex: -1, + activeId: '', isActive: false, showTranslate: true, showWord: true }) const emit = defineEmits<{ - click: [val: { word: Word, index: number }], + click: [val: { + item: any, + index: number + }], }>() const settingStore = useSettingStore() @@ -30,18 +36,18 @@ function scrollViewToCenter(index: number) { listRef.scrollToIndex(index) // listRef.children[index]?.scrollIntoView({block: 'center', behavior: 'smooth'}) } - -watch(() => props.activeIndex, (n: any) => { - if (settingStore.showPanel) { - scrollViewToCenter(n) - } -}) - -watch(() => props.isActive, (n: boolean) => { - setTimeout(() => { - if (n) scrollViewToCenter(props.activeIndex) - }, 300) -}) +// +// watch(() => props.activeIndex, (n: any) => { +// if (settingStore.showPanel) { +// scrollViewToCenter(n) +// } +// }) +// +// watch(() => props.isActive, (n: boolean) => { +// setTimeout(() => { +// if (n) scrollViewToCenter(props.activeIndex) +// }, 300) +// }) // watch(() => props.list, () => { // listRef.scrollTo(0, 0) @@ -61,6 +67,12 @@ function scrollToItem(index: number) { listRef.scrollToItem(index) } +function itemIsActive(item: any, index: number) { + return props.activeId ? + props.activeId === item.id + : props.activeIndex === index +} + defineExpose({scrollToBottom, scrollToItem}) @@ -83,24 +95,17 @@ defineExpose({scrollToBottom, scrollToItem}) >
- +
-
- {{ item.name }} - {{ item.usphone }} - -
-
-
{{ tran }}
-
+
- +
@@ -113,7 +118,7 @@ defineExpose({scrollToBottom, scrollToItem}) @import "@/assets/css/variable"; .scroller { - height: 100%; + flex: 1; padding: 0 var(--space); } diff --git a/src/pages/practice/practice-article/index.vue b/src/pages/practice/practice-article/index.vue index ef36b0b7..fda5ab36 100644 --- a/src/pages/practice/practice-article/index.vue +++ b/src/pages/practice/practice-article/index.vue @@ -20,6 +20,7 @@ import {useSettingStore} from "@/stores/setting.ts"; import ArticleList2 from "@/components/list/ArticleList2.vue"; import BaseIcon from "@/components/BaseIcon.vue"; import {useArticleOptions} from "@/hooks/dict.ts"; +import ArticleList4 from "@/components/list2/ArticleList4.vue"; const store = useBaseStore() const practiceStore = usePracticeStore() @@ -109,7 +110,7 @@ function getCurrentPractice() { renewSectionTexts(tempArticle) tempArticle.useTranslateType = TranslateType.none setArticle(tempArticle) - }, + }, null, { confirmButtonText: '去编辑', cancelButtonText: '不需要翻译', @@ -128,7 +129,7 @@ function getCurrentPractice() { renewSectionTexts(tempArticle) tempArticle.useTranslateType = TranslateType.none setArticle(tempArticle) - }, + }, null, { confirmButtonText: '去编辑', cancelButtonText: '不需要翻译', @@ -274,7 +275,29 @@ const { {{ store.currentDict.articles.length }}篇文章 + + + + + Date: Thu, 30 Nov 2023 14:02:20 +0800 Subject: [PATCH 2/3] save --- src/App.vue | 2 +- src/assets/css/style.scss | 23 +++- src/components/dialog/Dialog.vue | 16 ++- src/components/list2/ArticleList4.vue | 77 ++++-------- src/components/list2/BaseList.vue | 63 +++++----- src/pages/dict/DictManage.vue | 2 +- src/pages/practice/practice-article/index.vue | 37 ++---- src/utils/MessageBox.tsx | 115 +++++++++--------- 8 files changed, 153 insertions(+), 182 deletions(-) diff --git a/src/App.vue b/src/App.vue index 3d140165..6ab140c4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -50,7 +50,7 @@ async function init() { console.time() store.init().then(() => { store.load = true - console.timeEnd() + // console.timeEnd() }) await settingStore.init() setTheme(settingStore.theme) diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss index 2fbf14dc..65b05c2d 100644 --- a/src/assets/css/style.scss +++ b/src/assets/css/style.scss @@ -371,6 +371,20 @@ footer { } } + &.border { + .item-title { + transition: all .3s; + cursor: pointer; + border-bottom: 2px solid transparent; + } + + &:hover { + .item-title { + border-bottom: 2px solid gray !important; + } + } + } + .item-title { display: flex; align-items: center; @@ -387,11 +401,12 @@ footer { color: gray; } } -} -.item-sub-title { - font-size: 16rem; - color: gray; + .item-sub-title { + font-size: 16rem; + color: gray; + } + } .text-shadow { diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue index 49ee3b4f..3cd6d372 100644 --- a/src/components/dialog/Dialog.vue +++ b/src/components/dialog/Dialog.vue @@ -20,6 +20,7 @@ export interface ModalProps { cancelButtonText?: string, keyboard?: boolean, confirm?: any + beforeClose?: any } const props = withDefaults(defineProps(), { @@ -49,10 +50,15 @@ let modalRef = $ref(null) const runtimeStore = useRuntimeStore() let id = Date.now() -function close() { +async function close() { if (!visible) { return } + if (props.beforeClose) { + if (!await props.beforeClose()) { + return + } + } //记录停留时间，避免时间太短，弹框闪烁 let stayTime = Date.now() - openTime; let closeTime = 300; @@ -110,11 +116,11 @@ onUnmounted(() => { } }) -useEventListener('keyup', (e: KeyboardEvent) => { +useEventListener('keyup', async (e: KeyboardEvent) => { if (e.key === 'Escape' && props.keyboard) { let lastItem = runtimeStore.modalList[runtimeStore.modalList.length - 1] if (lastItem?.id === id) { - close() + await cancel() } } }) @@ -125,13 +131,13 @@ async function ok() { await props.confirm() confirmButtonLoading = false } - await close() emit('ok') + await close() } async function cancel() { - await close() emit('cancel') + await close() } diff --git a/src/components/list2/ArticleList4.vue b/src/components/list2/ArticleList4.vue index 07032863..1250a08e 100644 --- a/src/components/list2/ArticleList4.vue +++ b/src/components/list2/ArticleList4.vue @@ -11,65 +11,31 @@ import BaseList from "@/components/list2/BaseList.vue"; const props = withDefaults(defineProps<{ list: Article[], - isActive?: boolean showTranslate?: boolean }>(), { list: [], - activeIndex: -1, - isActive: false, - showTranslate: true + showTranslate: true, }) const emit = defineEmits<{ - click: [val: { data: Article, index: number }], - delSelectItem: [], - 'update:searchKey': [val: string], - 'update:list': [list: Article[]], + click: [val: { item: Article, index: number }], }>() let searchKey = $ref('') -let localList = $computed({ - get() { - if (searchKey) { - return props.list.filter((item: Article) => { - //把搜索内容，分词之后，判断是否有这个词，比单纯遍历包含体验更好 - return searchKey.toLowerCase().split(' ').filter(v => v).some(value => { - return item.title.toLowerCase().includes(value) || item.titleTranslate.toLowerCase().includes(value) - }) +let localList = $computed(() => { + if (searchKey) { + return props.list.filter((item: Article) => { + //把搜索内容，分词之后，判断是否有这个词，比单纯遍历包含体验更好 + return searchKey.toLowerCase().split(' ').filter(v => v).some(value => { + return item.title.toLowerCase().includes(value) || item.titleTranslate.toLowerCase().includes(value) }) - } else { - return props.list - } - }, - set(newValue) { - emit('update:list', newValue) + }) + } else { + return props.list } }) -const settingStore = useSettingStore() - -const listRef: HTMLElement = $ref(null as any) - -// function scrollViewToCenter(index: number) { -// if (index === -1) return -// listRef.children[index + 1]?.scrollIntoView({block: 'center', behavior: 'smooth'}) -// } -// -// watch(() => props.activeIndex, (n: any) => { -// if (settingStore.showPanel) { -// scrollViewToCenter(n) -// } -// }) -// -// watch(() => props.isActive, (n: boolean) => { -// setTimeout(() => { -// if (n) scrollViewToCenter(props.activeIndex) -// }, 300) -// }) - -// watch(() => props.list, () => { -// // listRef.scrollTo(0, 0) -// }) +const listRef: any = $ref(null as any) function scrollToBottom() { listRef?.scrollToBottom() @@ -79,10 +45,6 @@ function scrollToItem(index: number) { listRef?.scrollToItem(index) } -let attr = useAttrs() -onMounted(() => { - console.log('atr', attr) -}) defineExpose({scrollToBottom, scrollToItem}) @@ -92,20 +54,23 @@ defineExpose({scrollToBottom, scrollToItem})
- -