Merge remote-tracking branch 'origin/dev' into dev

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;

src/components/article/EditArticle.vue

@@ -107,7 +107,7 @@ function onPaste(event: ClipboardEvent) {
       () => {
         appendTranslate(paste)
         renewSections()
-      },
+      },null,
       {
         confirmButtonText: '需要',
         cancelButtonText: '关闭',

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/dialog/DictDiglog.vue

@@ -22,6 +22,7 @@ import EditBatchArticleModal from "@/components/article/EditBatchArticleModal.vu
 import {nanoid} from "nanoid";
 import DictListPanel from "@/components/DictListPanel.vue";
 import {useRouter} from "vue-router";
+import ArticleList4 from "@/components/list2/ArticleList4.vue";
 
 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -316,13 +317,26 @@ function addDict() {
               </div>
               <div class="right-column">
                 <div class="common-title">{{ dictIsArticle ? '文章' : '章节' }}列表</div>
-                <ChapterList
-                    v-if="chapterList"
+
+                <ArticleList4
+                    :isActive="false"
                     v-loading="loading"
-                    :is-article="dictIsArticle"
-                    v-model:active-index="runtimeStore.editDict.chapterIndex"
-                    :dict="runtimeStore.editDict"/>
-                <Empty v-else :show-add="true" @add="add"/>
+                    :show-border="true"
+                    @title="val => emitter.emit(EventKey.openArticleListModal,val.item)"
+                    @click="(val:any) => runtimeStore.editDict.chapterIndex = val.index"
+                    :active-index="runtimeStore.editDict.chapterIndex"
+                    :list="runtimeStore.editDict.articles">
+                </ArticleList4>
+                <template>
+                  <ChapterList
+                      v-if="chapterList"
+                      v-loading="loading"
+                      :is-article="dictIsArticle"
+                      v-model:active-index="runtimeStore.editDict.chapterIndex"
+                      :dict="runtimeStore.editDict"/>
+                  <Empty v-else :show-add="true" @add="add"/>
+                </template>
+
               </div>
             </div>
             <div v-if="false" class="activity">

src/components/list2/ArticleList4.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+
+import Input from "@/components/Input.vue";
+import {$computed, $ref} from "vue/macros";
+import {Article, Word} from "@/types.ts";
+import ListItem from "@/components/list/ListItem.vue";
+import {useSettingStore} from "@/stores/setting.ts";
+import {onMounted, useAttrs, watch} from "vue";
+import VolumeIcon from "@/components/icon/VolumeIcon.vue";
+import BaseList from "@/components/list2/BaseList.vue";
+
+const props = withDefaults(defineProps<{
+  list: Article[],
+  showTranslate?: boolean
+}>(), {
+  list: [],
+  showTranslate: true,
+})
+
+const emit = defineEmits<{
+  click: [val: { item: Article, index: number }],
+  title: [val: { item: Article, index: number }],
+}>()
+
+let searchKey = $ref('')
+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
+  }
+})
+
+const listRef: any = $ref(null as any)
+
+function scrollToBottom() {
+  listRef?.scrollToBottom()
+}
+
+function scrollToItem(index: number) {
+  listRef?.scrollToItem(index)
+}
+
+defineExpose({scrollToBottom, scrollToItem})
+
+</script>
+
+<template>
+  <div class="list">
+    <div class="search">
+      <Input v-model="searchKey"/>
+    </div>
+    <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 }">
+        <div class="item-title" @click.stop="emit('title',{item,index})">
+          <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 }">
+        <slot name="suffix" :item="item" :index="index"></slot>
+      </template>
+    </BaseList>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 15rem;
+  flex: 1;
+  overflow: hidden;
+
+  .search {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 var(--space);
+  }
+
+  .translate {
+    font-size: 16rem;
+  }
+}
+</style>

src/components/list2/BaseList.vue

@@ -1,37 +1,52 @@
 <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: Word[],
+  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<{
-  click: [val: { word: Word, index: number }],
+  click: [val: {
+    item: any,
+    index: number
+  }],
 }>()
 
+//虚拟列表长度限制
+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) => {
+watch(() => localActiveIndex, (n: any) => {
   if (settingStore.showPanel) {
     scrollViewToCenter(n)
   }
@@ -39,19 +54,17 @@ watch(() => props.activeIndex, (n: any) => {
 
 watch(() => props.isActive, (n: boolean) => {
   setTimeout(() => {
-    if (n) scrollViewToCenter(props.activeIndex)
+    if (n) scrollViewToCenter(localActiveIndex)
   }, 300)
 })
 
-// watch(() => props.list, () => {
-//   listRef.scrollTo(0, 0)
-// })
-
-const playWordAudio = usePlayWordAudio()
-
-function reset() {
-  listRef.reset()
-}
+watch(() => props.list, () => {
+  if (props.list.length > limit) {
+    listRef?.scrollToItem(0)
+  } else {
+    listRef?.scrollTo(0, 0)
+  }
+})
 
 function scrollToBottom() {
   listRef.scrollToBottom()
@@ -61,6 +74,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})
 
 </script>
@@ -83,24 +102,20 @@ defineExpose({scrollToBottom, scrollToItem})
       >
         <div class="list-item-wrapper">
           <div class="common-list-item"
-               :class="{active:activeIndex === index}"
-               @click="emit('click',{data:item,index})"
+               :class="{
+            active:itemIsActive(item,index),
+            border:showBorder
+          }"
+               @click="emit('click',{item,index})"
           >
             <div class="left">
-              <slot name="prefix" :word="item" :index="index"></slot>
+              <slot name="prefix" :item="item" :index="index"></slot>
               <div class="title-wrapper">
-                <div class="item-title">
-                  <span class="word" :class="!showWord && 'text-shadow'">{{ item.name }}</span>
-                  <span class="phonetic">{{ item.usphone }}</span>
-                  <VolumeIcon class="volume" @click="playWordAudio(item.name)"></VolumeIcon>
-                </div>
-                <div class="item-sub-title" v-if="item.trans.length && showTranslate">
-                  <div v-for="tran in item.trans">{{ tran }}</div>
-                </div>
+                <slot :item="item" :index="index"></slot>
               </div>
             </div>
             <div class="right">
-              <slot :word="item" :index="index"></slot>
+              <slot name="suffix" :item="item" :index="index"></slot>
             </div>
           </div>
         </div>
@@ -113,7 +128,7 @@ defineExpose({scrollToBottom, scrollToItem})
 @import "@/assets/css/variable";
 
 .scroller {
-  height: 100%;
+  flex: 1;
   padding: 0 var(--space);
 }
 </style>

src/components/list2/WordList.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+
+import {$ref} from "vue/macros";
+import {Word} from "@/types.ts";
+import VolumeIcon from "@/components/icon/VolumeIcon.vue";
+import BaseList from "@/components/list2/BaseList.vue";
+import {usePlayWordAudio} from "@/hooks/sound.ts";
+
+const props = withDefaults(defineProps<{
+  list: Word[],
+  showTranslate?: boolean
+  showWord?: boolean
+}>(), {
+  list: [],
+  showTranslate: true,
+  showWord: true
+})
+
+const emit = defineEmits<{
+  click: [val: { item: Word, index: number }],
+  title: [val: { item: Word, index: number }],
+}>()
+
+const listRef: any = $ref(null as any)
+
+function scrollToBottom() {
+  listRef?.scrollToBottom()
+}
+
+function scrollToItem(index: number) {
+  listRef?.scrollToItem(index)
+}
+
+const playWordAudio = usePlayWordAudio()
+
+defineExpose({scrollToBottom, scrollToItem})
+
+</script>
+
+<template>
+  <BaseList
+      ref="listRef"
+      @click="(e:any) => emit('click',e)"
+      :list="list"
+      v-bind="$attrs">
+    <template v-slot:prefix="{ item, index }">
+      <slot name="prefix" :item="item" :index="index"></slot>
+    </template>
+    <template v-slot="{ item, index }">
+      <div class="item-title">
+        <span class="word" :class="!showWord && 'text-shadow'">{{ item.name }}</span>
+        <span class="phonetic">{{ item.usphone }}</span>
+        <VolumeIcon class="volume" @click="playWordAudio(item.name)"></VolumeIcon>
+      </div>
+      <div class="item-sub-title" v-if="item.trans.length && showTranslate">
+        <div v-for="tran in item.trans">{{ tran }}</div>
+      </div>
+    </template>
+    <template v-slot:suffix="{ item, index }">
+      <slot name="suffix" :item="item" :index="index"></slot>
+    </template>
+  </BaseList>
+</template>
+
+<style scoped lang="scss">
+
+</style>