replace list

2023-11-30 18:51:16 +08:00
parent c0eef7768d
commit 35dbd85618
10 changed files with 142 additions and 41 deletions
--- a/components.d.ts
+++ b/components.d.ts
@@ -66,6 +66,8 @@ declare module 'vue' {
    VolumeIcon: typeof import('./src/components/icon/VolumeIcon.vue')['default']
    VolumeSetting: typeof import('./src/components/toolbar/VolumeSetting.vue')['default']
    WordItem: typeof import('./src/components/list/WordItem.vue')['default']
+    WordList: typeof import('./src/components/list2/WordList.vue')['default']
+    WordList4: typeof import('./src/components/list2/WordList4.vue')['default']
    WordListDialog: typeof import('./src/components/dialog/WordListDialog.vue')['default']
  }
  export interface ComponentCustomProperties {
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -372,6 +372,12 @@ footer {
  }

  &.border {
+    &.active {
+      .item-title {
+        border-bottom: 2px solid gray !important;
+      }
+    }
+
    .item-title {
      transition: all .3s;
      cursor: pointer;
--- a/src/components/dialog/DictDiglog.vue
+++ b/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">
--- a/src/components/list2/ArticleList4.vue
+++ b/src/components/list2/ArticleList4.vue
@@ -19,6 +19,7 @@ const props = withDefaults(defineProps<{

 const emit = defineEmits<{
  click: [val: { item: Article, index: number }],
+  title: [val: { item: Article, index: number }],
 }>()

 let searchKey = $ref('')
@@ -63,7 +64,7 @@ defineExpose({scrollToBottom, scrollToItem})
        <slot name="prefix" :item="item" :index="index"></slot>
      </template>
      <template v-slot="{ item, index }">
-        <div class="item-title">
+        <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">
--- a/src/components/list2/BaseList.vue
+++ b/src/components/list2/BaseList.vue
@@ -102,7 +102,10 @@ defineExpose({scrollToBottom, scrollToItem})
      >
        <div class="list-item-wrapper">
          <div class="common-list-item"
-               :class="{active:itemIsActive(item,index)}"
+               :class="{
+            active:itemIsActive(item,index),
+            border:showBorder
+          }"
               @click="emit('click',{item,index})"
          >
            <div class="left">
--- a/src/components/list2/WordList.vue
+++ b/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>
--- a/src/pages/dict/components/ArticleDictDetail.vue
+++ b/src/pages/dict/components/ArticleDictDetail.vue
@@ -21,6 +21,7 @@ import * as XLSX from "xlsx";
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import {syncMyDictList} from "@/hooks/dict.ts";
 import {useWindowClick} from "@/hooks/event.ts";
+import ArticleList4 from "@/components/list2/ArticleList4.vue";

 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -39,7 +40,7 @@ const isPinDict = $computed(() => {

 function handleCheckedChange(val) {
  chapterIndex = val.index
-  article = val.data
+  article = val.item
 }

 function delArticle(index: number) {
@@ -297,20 +298,21 @@ defineExpose({getDictDetail, add, editDict})
          </div>
        </div>
        <div class="wrapper">
-          <ArticleList3
+          <ArticleList4
              ref="listRef"
+              :isActive="false"
              v-if="runtimeStore.editDict.articles.length"
              :list="runtimeStore.editDict.articles"
+              @title="handleCheckedChange"
              @click="handleCheckedChange"
-              :active-index="chapterIndex"
-          >
-            <template v-slot:prefix="{data,index}">
+              :active-index="chapterIndex">
+            <template v-slot:prefix="{item,index}">
              <input type="radio" :checked="chapterIndex === index">
            </template>
-            <template v-slot="{data,index}">
+            <template v-slot="{item,index}">
              <BaseIcon
                  class-name="del"
-                  @click="emitter.emit(EventKey.openArticleListModal,data)"
+                  @click="emitter.emit(EventKey.openArticleListModal,item)"
                  title="编辑"
                  icon="tabler:edit"/>
              <BaseIcon
@@ -319,7 +321,7 @@ defineExpose({getDictDetail, add, editDict})
                  title="删除"
                  icon="solar:trash-bin-minimalistic-linear"/>
            </template>
-          </ArticleList3>
+          </ArticleList4>
          <Empty v-else/>
        </div>
      </div>
@@ -454,6 +456,7 @@ defineExpose({getDictDetail, add, editDict})

    .wrapper {
      flex: 1;
+      display: flex;
      padding-bottom: var(--space);
      overflow: hidden;
    }
--- a/src/pages/practice/Panel.vue
+++ b/src/pages/practice/Panel.vue
@@ -20,6 +20,7 @@ import ArticleList2 from "@/components/list/ArticleList2.vue";
 import {useRouter} from "vue-router";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {cloneDeep} from "lodash-es";
+import WordList from "@/components/list2/WordList.vue";

 const router = useRouter()
 const store = useBaseStore()
@@ -126,18 +127,18 @@ function addSimple() {
                </template>
              </div>
              <template v-if="practiceType === DictType.word">
-                <CommonWordList
+                <WordList
                    v-if="store.collect.words.length"
                    class="word-list"
                    :list="store.collect.words">
-                  <template v-slot="{word,index}">
+                  <template v-slot:suffix="{item,index}">
                    <BaseIcon
                        class-name="del"
-                        @click="toggleWordCollect(word)"
+                        @click="toggleWordCollect(item)"
                        title="移除"
                        icon="solar:trash-bin-minimalistic-linear"/>
                  </template>
-                </CommonWordList>
+                </WordList>
                <Empty v-else/>
              </template>
              <template v-else>
@@ -178,18 +179,18 @@ function addSimple() {
                  </PopConfirm>
                </template>
              </div>
-              <CommonWordList
+              <WordList
                  v-if="store.simple.words.length"
                  class="word-list"
                  :list="store.simple.words">
-                <template v-slot="{word,index}">
+                <template v-slot:suffix="{item,index}">
                  <BaseIcon
                      class-name="del"
-                      @click="delSimpleWord(word)"
+                      @click="delSimpleWord(item)"
                      title="移除"
                      icon="solar:trash-bin-minimalistic-linear"/>
                </template>
-              </CommonWordList>
+              </WordList>
              <Empty v-else/>
            </div>
          </div>
@@ -207,17 +208,17 @@ function addSimple() {
                  </PopConfirm>
                </template>
              </div>
-              <CommonWordList
+              <WordList
                  class="word-list"
                  :list="store.wrong.words">
-                <template v-slot="{word,index}">
+                <template v-slot="{item,index}">
                  <BaseIcon
                      class-name="del"
-                      @click="delWrongWord(word)"
+                      @click="delWrongWord(item)"
                      title="移除"
                      icon="solar:trash-bin-minimalistic-linear"/>
                </template>
-              </CommonWordList>
+              </WordList>
            </div>
            <Empty v-else/>
          </div>
--- a/src/pages/practice/practice-word/TypingWord.vue
+++ b/src/pages/practice/practice-word/TypingWord.vue
@@ -18,6 +18,8 @@ import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useWordOptions} from "@/hooks/dict.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import CommonWordList from "@/components/list/CommonWordList.vue";
+import WordList from "@/components/list2/WordList.vue";
+import Empty from "@/components/Empty.vue";

 interface IProps {
  words: Word[],
@@ -286,39 +288,41 @@ onUnmounted(() => {
                  {{ data.words.length }}个单词
                </div>
              </div>
-              <CommonWordList
-                  class="word-list"
+              <WordList
+                  v-if="data.words.length"
                  :is-active="active"
-                  @change="(val:any) => data.index = val.index"
                  :show-word="!settingStore.dictation"
                  :show-translate="settingStore.translate"
                  :list="data.words"
-                  :activeIndex="data.index">
-                <template v-slot="{word,index}">
+                  :activeIndex="data.index"
+                  @click="(val:any) => data.index = val.index"
+              >
+                <template v-slot:suffix="{item,index}">
                  <BaseIcon
-                      v-if="!isWordCollect(word)"
+                      v-if="!isWordCollect(item)"
                      class-name="collect"
-                      @click="toggleWordCollect(word)"
+                      @click="toggleWordCollect(item)"
                      title="收藏" icon="ph:star"/>
                  <BaseIcon
                      v-else
                      class-name="fill"
-                      @click="toggleWordCollect(word)"
+                      @click="toggleWordCollect(item)"
                      title="取消收藏" icon="ph:star-fill"/>
                  <BaseIcon
-                      v-if="!isWordSimple(word)"
+                      v-if="!isWordSimple(item)"
                      class-name="easy"
-                      @click="toggleWordSimple(word)"
+                      @click="toggleWordSimple(item)"
                      title="标记为简单词"
                      icon="material-symbols:check-circle-outline-rounded"/>
                  <BaseIcon
                      v-else
                      class-name="fill"
-                      @click="toggleWordSimple(word)"
+                      @click="toggleWordSimple(item)"
                      title="取消标记简单词"
                      icon="material-symbols:check-circle-rounded"/>
                </template>
-              </CommonWordList>
+              </WordList>
+              <Empty v-else/>
            </div>
          </template>
        </Panel>
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -115,7 +115,7 @@ export const useBaseStore = defineStore('base', {
                },
            ],
            current: {
-                index: 3,
+                index: 4,
                // dictType: DictType.article,
                // index: 0,
                practiceType: DictType.word,