save

src/components/list/ArticleList3.vue

@@ -0,0 +1,148 @@
+<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 {watch} from "vue";
+import VolumeIcon from "@/components/icon/VolumeIcon.vue";
+
+const props = withDefaults(defineProps<{
+  list: Article[],
+  activeIndex?: number,
+  isActive?: boolean
+  showTranslate?: boolean
+}>(), {
+  list: [],
+  activeIndex: -1,
+  isActive: false,
+  showTranslate:true
+})
+
+const emit = defineEmits<{
+  click: [val: { data: Article, index: number }],
+  delSelectItem: [],
+  'update:searchKey': [val: string],
+  'update:list': [list: Article[]],
+}>()
+
+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)
+        })
+      })
+    } else {
+      return props.list
+    }
+  },
+  set(newValue) {
+    emit('update:list', newValue)
+  }
+})
+
+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)
+})
+
+</script>
+
+<template>
+  <div class="list">
+    <div class="search">
+      <Input v-model="searchKey"/>
+    </div>
+    <DynamicScroller
+        :items="list"
+        ref="listRef"
+        :min-item-size="90"
+        class="scroller"
+    >
+      <template v-slot="{ item, index, active }">
+        <DynamicScrollerItem
+            :item="item"
+            :active="active"
+            :size-dependencies="[
+          item.id,
+        ]"
+            :data-index="index"
+        >
+          <div class="list-item-wrapper">
+            <div class="common-list-item"
+                 :class="{active:activeIndex === index}"
+                 @click="emit('click',{data:item,index})"
+            >
+              <div class="left">
+                <slot name="prefix" :data="item" :index="index"></slot>
+                <div class="title-wrapper">
+                  <div class="item-title">
+                    <div class="name"> {{ `${index + 1}. ${item.title}` }}</div>
+                  </div>
+                  <div class="item-sub-title" v-if="item.titleTranslate && showTranslate">
+                    <div class="item-translate"> {{ `   ${item.titleTranslate}` }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="right">
+                <slot :data="item" :index="index"></slot>
+              </div>
+            </div>
+          </div>
+        </DynamicScrollerItem>
+      </template>
+    </DynamicScroller>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/assets/css/variable.scss";
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 15rem;
+  flex: 1;
+  height: 100%;
+
+  .search {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 var(--space);
+  }
+
+  .translate {
+    font-size: 16rem;
+  }
+
+  .scroller {
+    flex: 1;
+    padding: 0 var(--space);
+  }
+}
+</style>

src/pages/dict/DictManage.vue

@@ -24,9 +24,10 @@ import BaseButton from "@/components/BaseButton.vue";
 import Dialog from "@/components/dialog/Dialog.vue";
 import {nanoid} from "nanoid";
 import {no} from "@/utils";
-import ChapterWordList from "@/pages/dict/ChapterWordList.vue";
+import ChapterWordList from "@/pages/dict/components/ChapterWordList.vue";
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import * as  XLSX from 'xlsx'
+import ArticleDetail from "@/pages/dict/components/ArticleDetail.vue";
 
 
 const store = useBaseStore()
@@ -86,6 +87,7 @@ async function selectDict(val: {
           changeSort(runtimeStore.editDict.sort)
         }
       }
+
       if (runtimeStore.editDict.type === DictType.article) {
         if (!runtimeStore.editDict.articles.length) {
           let r = await fetch(url)
@@ -777,7 +779,8 @@ async function resetDict() {
           </div>
         </header>
         <div class="detail" v-if="!isAddDict">
-          <div class="page-content">
+          <ArticleDetail v-if="dictIsArticle"/>
+          <div class="page-content" v-else>
             <div class="left-column">
               <div class="header">
                 <div class="common-title">

src/pages/dict/components/ArticleDetail.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+
+import BaseIcon from "@/components/BaseIcon.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import Empty from "@/components/Empty.vue";
+import {useRuntimeStore} from "@/stores/runtime.ts";
+import ArticleList3 from "@/components/list/ArticleList3.vue";
+import {$ref} from "vue/macros";
+import VirtualWordList2 from "@/components/list/VirtualWordList2.vue";
+
+const runtimeStore = useRuntimeStore()
+let chapterIndex = $ref(0)
+
+function handleCheckedChange(val) {
+  chapterIndex = val.index
+}
+</script>
+
+<template>
+  <div class="article-detail">
+    <div class="chapter-list">
+      <div class="header">
+        <div class="common-title">
+          <span>章节管理</span>
+          <div class="options">
+            <BaseIcon
+                icon="fluent:add-20-filled"
+                title="新增章节"/>
+          </div>
+        </div>
+        <div class="select">
+          <BaseButton size="small" @click="showAllocationChapterDialog = true">智能分配</BaseButton>
+          <span>{{ runtimeStore.editDict.articles.length }}章</span>
+        </div>
+      </div>
+      <div class="wrapper">
+        <ArticleList3
+            v-if="runtimeStore.editDict.articles.length"
+            :list="runtimeStore.editDict.articles"
+            @click="handleCheckedChange"
+            :active-index="chapterIndex"
+        >
+          <template v-slot:prefix="{data,index}">
+            <input type="radio" :checked="chapterIndex === index">
+          </template>
+          <template v-slot="{data,index}">
+            <BaseIcon
+                class-name="del"
+                @click="emit('edit',{data,index})"
+                title="编辑"
+                icon="tabler:edit"/>
+            <BaseIcon
+                class-name="del"
+                @click="del({data,index})"
+                title="删除"
+                icon="solar:trash-bin-minimalistic-linear"/>
+          </template>
+        </ArticleList3>
+        <template v-if="false">
+          <RecycleScroller
+              v-if="runtimeStore.editDict.articles.length"
+              ref="chapterListRef"
+              style="height: 100%;"
+              :items="runtimeStore.editDict.articles"
+              :item-size="63"
+              key-field="id"
+              v-slot="{ item,index }"
+          >
+            <div style="padding: 0 15rem;">
+              <div class="common-list-item"
+                   :class="chapterIndex === item.id && 'active'"
+                   @click="handleChangeCurrentChapter(item.id)">
+                <div class="flex gap10 flex1 ">
+                  <input type="radio" :checked="chapterIndex === item.id">
+                  <div class="item-title flex flex1 space-between">
+                    <span>{{ index + 1 }}.</span>
+                    <span>{{ item.title }}</span>
+                  </div>
+                </div>
+                <div class="right">
+                  <BaseIcon
+                      class-name="del"
+                      @click="delWordChapter(item.id)"
+                      title="移除"
+                      icon="solar:trash-bin-minimalistic-linear"/>
+                </div>
+              </div>
+            </div>
+          </RecycleScroller>
+          <Empty v-else/>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+.article-detail {
+  width: 100%;
+  height: 100%;
+
+  .chapter-list {
+    width: 400rem;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    background: white;
+    border-radius: 10rem;
+    background: var(--color-second-bg);
+    color: var(--color-font-1);
+    padding-bottom: var(--space);
+
+    .header {
+      padding: 0 var(--space);
+
+      .common-title {
+        margin-bottom: 0;
+        position: relative;
+
+        .options {
+          position: absolute;
+          right: 0;
+          display: flex;
+          gap: 10rem;
+        }
+      }
+
+      .select {
+        height: 45rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .left {
+          display: flex;
+          gap: 5rem;
+          align-items: center;
+        }
+      }
+    }
+
+    .wrapper {
+      flex: 1;
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/stores/base.ts

@@ -88,19 +88,19 @@ export const useBaseStore = defineStore('base', {
                     type: DictType.wrong,
                     category: '自带字典'
                 },
-                // {
-                //   ...cloneDeep(DefaultDict),
-                //   id: 'article_nce2',
-                //   name: "新概念英语2-课文",
-                //   description: '新概念英语2-课文',
-                //   category: '英语学习',
-                //   tags: ['新概念英语'],
-                //   url: 'NCE_2.json',
-                //   translateLanguage: 'common',
-                //   language: 'en',
-                //   type: DictType.article
-                // resourceId: 'article_nce2',
-                // },
+                {
+                    ...cloneDeep(DefaultDict),
+                    id: 'article_nce2',
+                    name: "新概念英语2-课文",
+                    description: '新概念英语2-课文',
+                    category: '英语学习',
+                    tags: ['新概念英语'],
+                    url: 'NCE_2.json',
+                    translateLanguage: 'common',
+                    language: 'en',
+                    type: DictType.article,
+                    resourceId: 'article_nce2',
+                },
                 {
                     ...cloneDeep(DefaultDict),
                     id: 'nce-new-2',