save

components.d.ts

@@ -10,9 +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']
     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']
     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']
@@ -26,6 +28,7 @@ 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']

src/App.vue

@@ -10,6 +10,7 @@ import {cloneDeep} from "lodash-es";
 import Backgorund from "@/components/Backgorund.vue";
 import useTheme from "@/hooks/useTheme.ts";
 import * as localforage from "localforage";
+import SettingDialog from "@/components/dialog/SettingDialog.vue";
 
 const store = useBaseStore()
 const runtimeStore = useRuntimeStore()
@@ -64,8 +65,9 @@ onMounted(() => {
 </script>
 
 <template>
-<!--  <Backgorund/>-->
+  <Backgorund/>
   <router-view/>
+  <SettingDialog v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
 </template>
 
 <style scoped lang="scss">

src/components/list/BaseList.vue

@@ -0,0 +1,121 @@
+<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'
+
+const props = withDefaults(defineProps<{
+  list: Word[],
+  activeIndex?: number,
+  isActive?: boolean
+  showTranslate?: boolean
+  showWord?: boolean
+}>(), {
+  activeIndex: -1,
+  isActive: false,
+  showTranslate: true,
+  showWord: true
+})
+
+const emit = defineEmits<{
+  click: [val: { word: Word, index: number }],
+}>()
+
+const settingStore = useSettingStore()
+const listRef: any = $ref()
+
+function scrollViewToCenter(index: number) {
+  if (index === -1) return
+  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.list, () => {
+//   listRef.scrollTo(0, 0)
+// })
+
+const playWordAudio = usePlayWordAudio()
+
+function reset() {
+  listRef.reset()
+}
+
+function scrollToBottom() {
+  listRef.scrollToBottom()
+}
+
+function scrollToItem(index: number) {
+  listRef.scrollToItem(index)
+}
+
+defineExpose({scrollToBottom, scrollToItem})
+
+</script>
+
+<template>
+  <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" :word="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>
+              </div>
+            </div>
+            <div class="right">
+              <slot :word="item" :index="index"></slot>
+            </div>
+          </div>
+        </div>
+      </DynamicScrollerItem>
+    </template>
+  </DynamicScroller>
+</template>
+
+<style lang="scss" scoped>
+@import "@/assets/css/variable";
+
+.scroller {
+  height: 100%;
+  padding: 0 var(--space);
+}
+
+
+</style>

src/pages/dict/DictManage.vue

@@ -143,7 +143,7 @@ onMounted(() => {
 
 #DictDialog {
   font-size: 14rem;
-  position: fixed;
+  position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

src/pages/dict/index.vue

@@ -3,25 +3,74 @@
 import DictManage from "@/pages/dict/DictManage.vue";
 import {onMounted} from "vue";
 import {useRoute} from "vue-router";
+import {useRuntimeStore} from "@/stores/runtime.ts";
 
 const router = useRoute()
-
-onMounted(()=>{
+const runtimeStore = useRuntimeStore()
+onMounted(() => {
 
 })
 </script>
 
 <template>
   <div id="page">
-    <DictManage/>
+    <header>
+      <div class="nav-list">
+        <nav>
+          <router-link to="/practice">练习</router-link>
+        </nav>
+        <nav class="active">
+          <router-link to="/dict">词典</router-link>
+        </nav>
+        <nav @click="runtimeStore.showSettingModal = true"><a href="#">设置</a></nav>
+      </div>
+    </header>
+    <div class="content">
+      <DictManage/>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 #page {
+  position: relative;
+  z-index: 9;
   background: var(--color-main-bg);
   height: 100%;
   width: 100%;
+  font-size: 14rem;
+
+  header {
+    height: 60rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 1px solid #d2d2d2;
+
+    .nav-list {
+      display: flex;
+      gap: 10rem;
+
+      nav {
+        padding: 7rem 20rem;
+        cursor: pointer;
+        font-size: 16rem;
+        transition: all .3s;
+
+        &:hover {
+        }
+
+        &.active {
+          border-bottom: 2px solid var(--color-main-active);
+        }
+
+        a {
+          color: var(--color-font-1);
+        }
+      }
+    }
+  }
 }
 
 </style>

src/pages/practice/index.vue

@@ -165,7 +165,6 @@ onUnmounted(() => {
     <Footer/>
   </div>
   <DictModal/>
-  <SettingDialog v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
   <Statistics/>
 </template>