save

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)

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 {

src/components/dialog/Dialog.vue

@@ -20,6 +20,7 @@ export interface ModalProps {
   cancelButtonText?: string,
   keyboard?: boolean,
   confirm?: any
+  beforeClose?: any
 }
 
 const props = withDefaults(defineProps<ModalProps>(), {
@@ -49,10 +50,15 @@ let modalRef = $ref<HTMLDivElement>(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()
 }
 
 </script>

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})
 
 </script>
@@ -92,20 +54,23 @@ defineExpose({scrollToBottom, scrollToItem})
     <div class="search">
       <Input v-model="searchKey"/>
     </div>
-    <BaseList :list="localList"
-              v-bind="$attrs">
-      <template v-slot:prefix="{ item, index, active }">
+    <BaseList
+        ref="listRef"
+        @click="(e:any) => emit('click',e)"
+        :list="localList"
+        v-bind="$attrs">
+      <template v-slot:prefix="{ item, index }">
         <slot name="prefix" :item="item" :index="index"></slot>
       </template>
-      <template v-slot="{ item, index, active }">
+      <template v-slot="{ item, index }">
         <div class="item-title">
-          <div class="name"> {{ `${index + 1}. ${item.title}` }}</div>
+          <div class="name"> {{ `${searchKey ? '' : (index + 1) + '. '}${item.title}` }}</div>
         </div>
         <div class="item-sub-title" v-if="item.titleTranslate && showTranslate">
           <div class="item-translate"> {{ `   ${item.titleTranslate}` }}</div>
         </div>
       </template>
-      <template v-slot:suffix="{ item, index, active }">
+      <template v-slot:suffix="{ item, index }">
         <slot name="suffix" :item="item" :index="index"></slot>
       </template>
     </BaseList>

src/components/list2/BaseList.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
-import {Word} from "../../types.ts";
 import {useSettingStore} from "@/stores/setting.ts";
-import VolumeIcon from "@/components/icon/VolumeIcon.vue";
-import {usePlayWordAudio} from "@/hooks/sound.ts";
 import {watch} from 'vue'
+import {$computed} from "vue/macros";
 
 const props = withDefaults(defineProps<{
   list?: any[],
   activeIndex?: number,
   activeId?: string,
   isActive?: boolean
-  showTranslate?: boolean
-  showWord?: boolean
+  showBorder?: boolean
 }>(), {
   list: [],
   activeIndex: -1,
   activeId: '',
   isActive: false,
-  showTranslate: true,
-  showWord: true
+  showBorder: false
 })
 
 const emit = defineEmits<{
@@ -28,36 +24,47 @@ const emit = defineEmits<{
   }],
 }>()
 
+//虚拟列表长度限制
+const limit = 1
+
 const settingStore = useSettingStore()
 const listRef: any = $ref()
 
+const localActiveIndex = $computed(() => {
+  if (props.activeId) {
+    return props.list.findIndex(v => v.id === props.activeId)
+  }
+  return props.activeIndex
+})
+
 function scrollViewToCenter(index: number) {
   if (index === -1) return
-  listRef.scrollToIndex(index)
-  // listRef.children[index]?.scrollIntoView({block: 'center', behavior: 'smooth'})
+  if (props.list.length > limit) {
+    listRef?.scrollToItem(index)
+  } else {
+    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.list, () => {
-//   listRef.scrollTo(0, 0)
-// })
+watch(() => localActiveIndex, (n: any) => {
+  if (settingStore.showPanel) {
+    scrollViewToCenter(n)
+  }
+})
 
-const playWordAudio = usePlayWordAudio()
+watch(() => props.isActive, (n: boolean) => {
+  setTimeout(() => {
+    if (n) scrollViewToCenter(localActiveIndex)
+  }, 300)
+})
 
-function reset() {
-  listRef.reset()
-}
+watch(() => props.list, () => {
+  if (props.list.length > limit) {
+    listRef?.scrollToItem(0)
+  } else {
+    listRef?.scrollTo(0, 0)
+  }
+})
 
 function scrollToBottom() {
   listRef.scrollToBottom()

src/pages/dict/DictManage.vue

@@ -62,7 +62,7 @@ function cancelAddDict() {
 
 onMounted(() => {
   // selectDict({dict: store.currentDict, index: 0})
-  console.log('router.params', route)
+  // console.log('router.params', route)
   switch (route.query.type) {
     case 'addDict':
       setTimeout(() => {

src/pages/practice/practice-article/index.vue

@@ -42,10 +42,8 @@ let showEditArticle = $ref(false)
 let editArticle = $ref<Article>(cloneDeep(DefaultArticle))
 
 watch([
-  () => store.current.index,
-  () => store.load,
-  () => store.currentDict.type,
-  () => store.currentDict.chapterIndex,
+  // () => store.load,
+  () => store.currentDict.articles,
 ], n => {
   console.log('n', n)
   getCurrentPractice()
@@ -84,7 +82,7 @@ function getCurrentPractice() {
 
   let currentArticle = store.currentDict.articles[store.currentDict.chapterIndex]
   let tempArticle = {...DefaultArticle, ...currentArticle}
-  console.log('article', tempArticle)
+  // console.log('article', tempArticle)
   if (tempArticle.sections.length) {
     setArticle(tempArticle)
   } else {
@@ -125,6 +123,7 @@ function getCurrentPractice() {
                 editArticle = tempArticle
                 showEditArticle = true
               },
+
               () => {
                 renewSectionTexts(tempArticle)
                 tempArticle.useTranslateType = TranslateType.none
@@ -209,10 +208,11 @@ function nextWord(word: ArticleWord) {
   }
 }
 
-function changePracticeArticle(val: Article) {
-  let rIndex = store.currentDict.articles.findIndex(v => v.id === val.id)
+function changePracticeArticle(val: { item: Article, index: number }) {
+  let rIndex = store.currentDict.articles.findIndex(v => v.id === val.item.id)
   if (rIndex > -1) {
     store.currentDict.chapterIndex = rIndex
+    getCurrentPractice()
   }
 }
 
@@ -277,9 +277,9 @@ const {
             </div>
 
             <ArticleList4
-                v-if="true"
                 :isActive="active"
                 :show-translate="settingStore.translate"
+                @click="changePracticeArticle"
                 :active-id="articleData.article.id"
                 :list="store.currentDict.articles">
               <template v-slot:suffix="{item,index}">
@@ -295,27 +295,6 @@ const {
                     title="取消收藏" icon="ph:star-fill"/>
               </template>
             </ArticleList4>
-
-            <ArticleList2
-                v-else
-                :isActive="active"
-                :show-translate="settingStore.translate"
-                @select-item="changePracticeArticle"
-                :active-index="store.currentDict.chapterIndex"
-                v-model:list="store.currentDict.articles">
-              <template v-slot="{source,index}">
-                <BaseIcon
-                    v-if="!isArticleCollect(source)"
-                    class-name="collect"
-                    @click="toggleArticleCollect(source)"
-                    title="收藏" icon="ph:star"/>
-                <BaseIcon
-                    v-else
-                    class-name="fill"
-                    @click="toggleArticleCollect(source)"
-                    title="取消收藏" icon="ph:star-fill"/>
-              </template>
-            </ArticleList2>
           </div>
         </template>
       </Panel>

src/utils/MessageBox.tsx

@@ -1,65 +1,64 @@
-import {createApp} from 'vue'
+import {createVNode, render} from 'vue'
 import Dialog, {ModalProps} from "@/components/dialog/Dialog.vue";
-import {AppContext, Component, ComponentPublicInstance, createVNode, getCurrentInstance, render, VNode} from 'vue';
 
 export class MessageBox {
-    static confirm(
-        content: string,
-        title: string,
-        onOk: () => any = () => void 0,
-        onCancel: () => any = () => void 0,
-        onClose: () => any = () => void 0,
-        config: ModalProps = {}
-    ) {
-        let container = document.createElement('div')
-        const close = () => {
-            render(null, container);
-            container.remove()
-            onClose?.()
-        }
-
-        const vNode = createVNode(Dialog, {
-            title,
-            content,
-            onCancel: onCancel,
-            confirm: onOk,
-            onClose: close,
-            footer: true,
-            ...config
-        });
-        // const appContext = getCurrentInstance()?.appContext;
-        // // 补丁：Component中获取当前组件树的provides
-        // if (appContext) {
-        //     const currentProvides = (getCurrentInstance() as any)?.provides;
-        //     Reflect.set(appContext, 'provides', {...appContext.provides, ...currentProvides});
-        // }
-        // vNode.appContext = appContext;
-        render(vNode, container);
-        document.body.append(container)
+  static confirm(
+    content: string,
+    title: string,
+    onOk: () => any = () => void 0,
+    onCancel: () => any = () => void 0,
+    onClose: () => any = () => void 0,
+    config: ModalProps = {}
+  ) {
+    let container = document.createElement('div')
+    const close = () => {
+      render(null, container);
+      container.remove()
+      onClose?.()
     }
 
-    static notice(
-        content: string,
-        title: string,
-    ) {
-        let container = document.createElement('div')
-        let tempOnCancel = () => {
-            render(null, container);
-            container.remove()
-        }
-        const vNode = createVNode(Dialog, {
-            title,
-            content,
-            onCancel: tempOnCancel,
-        });
-        // const appContext = getCurrentInstance()?.appContext;
-        // // 补丁：Component中获取当前组件树的provides
-        // if (appContext) {
-        //     const currentProvides = (getCurrentInstance() as any)?.provides;
-        //     Reflect.set(appContext, 'provides', {...appContext.provides, ...currentProvides});
-        // }
-        // vNode.appContext = appContext;
-        render(vNode, container);
-        document.body.append(container)
+    const vNode = createVNode(Dialog, {
+      title,
+      content,
+      onCancel: onCancel,
+      confirm: onOk,
+      onClose: close,
+      footer: true,
+      ...config
+    });
+    // const appContext = getCurrentInstance()?.appContext;
+    // // 补丁：Component中获取当前组件树的provides
+    // if (appContext) {
+    //     const currentProvides = (getCurrentInstance() as any)?.provides;
+    //     Reflect.set(appContext, 'provides', {...appContext.provides, ...currentProvides});
+    // }
+    // vNode.appContext = appContext;
+    render(vNode, container);
+    document.body.append(container)
+  }
+
+  static notice(
+    content: string,
+    title: string,
+  ) {
+    let container = document.createElement('div')
+    let tempOnCancel = () => {
+      render(null, container);
+      container.remove()
     }
+    const vNode = createVNode(Dialog, {
+      title,
+      content,
+      onCancel: tempOnCancel,
+    });
+    // const appContext = getCurrentInstance()?.appContext;
+    // // 补丁：Component中获取当前组件树的provides
+    // if (appContext) {
+    //     const currentProvides = (getCurrentInstance() as any)?.provides;
+    //     Reflect.set(appContext, 'provides', {...appContext.provides, ...currentProvides});
+    // }
+    // vNode.appContext = appContext;
+    render(vNode, container);
+    document.body.append(container)
+  }
 }