From 7ac9851fde46a1376c6d7141c5bf49d7bfa6fba3 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Mon, 9 Oct 2023 01:38:47 +0800
Subject: [PATCH] save

---
 components.d.ts                               |   1 +
 src/App.vue                                   |   2 +-
 src/Mobile.vue                                |   2 +-
 src/assets/css/style.scss                     |   2 +-
 src/assets/css/{colors.scss => variable.scss} |   0
 src/components/Add/BatchAddArticle.vue        |   2 +-
 src/components/ChapterList.vue                |  62 +++++--
 src/components/IconWrapper.vue                |   2 +-
 src/components/Modal/Modal.vue                |   2 +-
 src/components/Practice/Footer.vue            |   2 +-
 src/components/Practice/Panel.vue             |   2 +-
 src/components/Practice/TypeWord.vue          |   5 +-
 src/components/Ring.vue                       |   2 +-
 src/components/Toolbar/DictModal.vue          | 151 ++++++------------
 src/components/Toolbar/FeedbackModal.vue      |   2 +-
 src/components/Toolbar/SettingModal.vue       |   2 +-
 src/components/Toolbar/Toolbar.vue            |   2 +-
 src/components/WordItem.vue                   |   2 +-
 src/components/WordList.vue                   |   2 +-
 src/components/WordListModal.vue              | 130 +++++++++++++++
 src/utils/eventBus.ts                         |   1 +
 21 files changed, 241 insertions(+), 137 deletions(-)
 rename src/assets/css/{colors.scss => variable.scss} (100%)
 create mode 100644 src/components/WordListModal.vue

diff --git a/components.d.ts b/components.d.ts
index 13211ff4..0d286572 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -57,5 +57,6 @@ declare module 'vue' {
     Word: typeof import('./src/components/Word.vue')['default']
     WordItem: typeof import('./src/components/WordItem.vue')['default']
     WordList: typeof import('./src/components/WordList.vue')['default']
+    WordListModal: typeof import('./src/components/WordListModal.vue')['default']
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 341dd539..82111a1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -59,7 +59,7 @@ useEventListener('keyup', (e: KeyboardEvent) => {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors.scss";
+@import "@/assets/css/variable";
 
 .main-page {
   position: absolute;
diff --git a/src/Mobile.vue b/src/Mobile.vue
index 449ccc66..1b438c68 100644
--- a/src/Mobile.vue
+++ b/src/Mobile.vue
@@ -444,7 +444,7 @@ html, body {
 }
 </style>
 <style scoped lang="scss">
-@import "assets/css/colors";
+@import "assets/css/variable";
 
 .mobile {
   width: 100vw;
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 7317a8b2..bb4c46ad 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -1,6 +1,6 @@
 //@import '/node_modules/element-plus/dist/index.css';
 @import "/node_modules/hover.css";
-@import "colors";
+@import "variable.scss";
 @import "anim";
 
 :root {
diff --git a/src/assets/css/colors.scss b/src/assets/css/variable.scss
similarity index 100%
rename from src/assets/css/colors.scss
rename to src/assets/css/variable.scss
diff --git a/src/components/Add/BatchAddArticle.vue b/src/components/Add/BatchAddArticle.vue
index e4072e1b..6a3464cf 100644
--- a/src/components/Add/BatchAddArticle.vue
+++ b/src/components/Add/BatchAddArticle.vue
@@ -30,7 +30,7 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors.scss";
+@import "@/assets/css/variable";
 
 #BatchAddArticle {
   width: 100vw;
diff --git a/src/components/ChapterList.vue b/src/components/ChapterList.vue
index 81e45ccc..3d72b683 100644
--- a/src/components/ChapterList.vue
+++ b/src/components/ChapterList.vue
@@ -1,53 +1,81 @@
 <script setup lang="ts">
 
 import {Word} from "@/types.ts"
+import {emitter, EventKey} from "@/utils/eventBus.ts";
 
 defineProps<{
   list: Word[][],
-  activeIndex: number
+  activeIndex?: number
 }>()
 
-const emit = defineEmits(['update:activeIndex'])
-
-function next() {
-}
+const emit = defineEmits<{
+  'update:activeIndex': [index: number]
+  showWord: [list: any[]]
+}>()
 
 </script>
 
 <template>
   <div class="list">
-    <div class="item" :class="activeIndex === index && 'active'"
-         v-for="(item,index) in list" @click="$emit('update:activeIndex', index)">
-      <div class="title">第{{ index + 1 }}章 {{ item.length }}词</div>
+    <div class="item"
+         :class="activeIndex === index && 'active'"
+         v-for="(item,index) in list"
+         @click="emit('update:activeIndex', index)">
+      <input type="radio" :checked="activeIndex === index">
+      <div class="title">
+        <div>第{{ index + 1 }}章</div>
+        <div class="count"
+             @click.stop="emitter.emit(EventKey.openWordListModal,{title:`第${index + 1}章`,list:item})"
+        >{{ item.length }}词
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors";
+@import "@/assets/css/variable.scss";
 
 .list {
   display: flex;
   flex-direction: column;
-  gap: 15rem;
   width: 100%;
-  height: 100%;
-  padding: 0 $space;
+  flex: 1;
   overflow: auto;
   box-sizing: border-box;
+  gap: 10rem;
+  //padding-right: 10rem;
 
   .item {
-    cursor: pointer;
-    margin-bottom: 10rem;
-    padding: 10rem;
-    border-radius: 10rem;
+    padding: 15rem;
     background: var(--color-item-bg);
     color: var(--color-font-1);
-
+    display: flex;
+    gap: 10rem;
+    border-radius: 8rem;
+    border-bottom: 1px solid #e1e1e1;
 
     &.active {
       background: var(--color-item-active);
       color: var(--color-font-active-1);
+
+      .count {
+        border-bottom: 2px solid white !important;
+      }
+    }
+
+    input {
+      cursor: pointer;
+    }
+
+    .title {
+      display: flex;
+      gap: 10rem;
+
+      .count {
+        cursor: pointer;
+        border-bottom: 2px solid var(--color-item-active);
+      }
     }
   }
 }
diff --git a/src/components/IconWrapper.vue b/src/components/IconWrapper.vue
index 5c846bf1..2f75da11 100644
--- a/src/components/IconWrapper.vue
+++ b/src/components/IconWrapper.vue
@@ -13,7 +13,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors";
+@import "@/assets/css/variable.scss";
 
 $w: 22rem;
 .icon-wrapper {
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 2b9da8a9..1392004e 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -138,7 +138,7 @@ async function cancel() {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors";
+@import "@/assets/css/variable.scss";
 
 $modal-mask-bg: rgba(#000, .45);
 $radius: 24rem;
diff --git a/src/components/Practice/Footer.vue b/src/components/Practice/Footer.vue
index 2ab1cc64..2852310e 100644
--- a/src/components/Practice/Footer.vue
+++ b/src/components/Practice/Footer.vue
@@ -79,7 +79,7 @@ onUnmounted(() => {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors.scss";
+@import "@/assets/css/variable";
 
 .footer {
   width: var(--toolbar-width);
diff --git a/src/components/Practice/Panel.vue b/src/components/Practice/Panel.vue
index 10f835ea..eddebae3 100644
--- a/src/components/Practice/Panel.vue
+++ b/src/components/Practice/Panel.vue
@@ -182,7 +182,7 @@ function changeIndex(i: number, dict: Dict) {
   </Transition>
 </template>
 <style scoped lang="scss">
-@import "@/assets/css/colors";
+@import "@/assets/css/variable.scss";
 
 $width: 20vw;
 $header-height: 50rem;
diff --git a/src/components/Practice/TypeWord.vue b/src/components/Practice/TypeWord.vue
index 4ad41907..edd852ee 100644
--- a/src/components/Practice/TypeWord.vue
+++ b/src/components/Practice/TypeWord.vue
@@ -49,6 +49,8 @@ const volumeIconRef: any = $ref()
 watch(() => props.words, () => {
   data.words = props.words
   data.index = props.index
+  data.originWrongWords = []
+  data.wrongWords = []
 
   practiceStore.wrongWords = []
   practiceStore.repeatNumber = 0
@@ -320,7 +322,7 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors.scss";
+@import "@/assets/css/variable";
 
 .type-word {
   flex: 1;
@@ -343,6 +345,7 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
     .word {
       div {
         font-size: 24rem;
+        margin-bottom: 4rem;
       }
 
       div:last-child {
diff --git a/src/components/Ring.vue b/src/components/Ring.vue
index 7d1289b6..7e6749e6 100644
--- a/src/components/Ring.vue
+++ b/src/components/Ring.vue
@@ -44,7 +44,7 @@ onMounted(() => {
 })
 </script>
 <style scoped lang="scss">
-@import "@/assets/css/colors";
+@import "@/assets/css/variable.scss";
 
 $w: 100rem;
 $w2: calc($w / 2);
diff --git a/src/components/Toolbar/DictModal.vue b/src/components/Toolbar/DictModal.vue
index 9bc26584..8496a6aa 100644
--- a/src/components/Toolbar/DictModal.vue
+++ b/src/components/Toolbar/DictModal.vue
@@ -19,6 +19,9 @@ import VolumeIcon from "@/components/VolumeIcon.vue";
 import {ActivityCalendar} from "vue-activity-calendar";
 import "vue-activity-calendar/style.css";
 import {usePlayWordAudio} from "@/hooks/sound.ts";
+import ChapterList from "@/components/ChapterList.vue";
+import WordListModal from "@/components/WordListModal.vue";
+import {emitter, EventKey} from "@/utils/eventBus.ts";
 
 const store = useBaseStore()
 
@@ -42,7 +45,6 @@ const options = [
   {id: 'code', name: 'Code', flag: codeFlag},
 ]
 
-const playWordAudio = usePlayWordAudio()
 let currentLanguage = $ref('en')
 let currentSelectDict: Dict = $ref(cloneDeep(store.currentDict))
 let step = $ref(1)
@@ -144,6 +146,13 @@ let radio1 = $ref('')
 function clickEvent(e) {
   console.log('e', e)
 }
+
+let showModal = $ref(false)
+
+function showWord(list: Word[]) {
+  console.log('list', list)
+}
+
 </script>
 
 <template>
@@ -197,11 +206,11 @@ function clickEvent(e) {
             <div class="detail">
               <div class="name">{{ currentSelectDict.name }}</div>
               <div class="desc">{{ currentSelectDict.description }}</div>
-              <div class="num">总词汇：{{ currentSelectDict.length }}词</div>
-              <div class="num">{{
-                  currentSelectDict.chapterWords.length
-                }}章(每章{{ currentSelectDict.chapterWordNumber }}词)
+              <div class="num"
+                   @click="emitter.emit(EventKey.openWordListModal,{title:'所有单词',list:currentSelectDict.words})">
+                总词汇：<span class="count">{{ currentSelectDict.length }}词</span>
               </div>
+
               <div class="num">开始日期：-</div>
               <div class="num">花费时间：-</div>
               <div class="num">累积错误：-</div>
@@ -212,7 +221,7 @@ function clickEvent(e) {
               </div>
             </div>
             <div class="setting">
-              <div class="title">学习设置</div>
+              <div class="common-title">学习设置</div>
               <div class="row">
                 <div class="label">每章单词数</div>
                 <el-slider :min="10"
@@ -284,30 +293,18 @@ function clickEvent(e) {
               </div>
             </div>
             <div class="other">
-              <virtual-list class="virtual-list"
-                            :keeps="20"
-                            data-key="name"
-                            :data-sources="currentSelectDict.words"
-                            :estimate-size="85"
-                            item-class="dict-virtual-item"
-              >
-                <template #={source}>
-                  <div class="left">
-                    <div class="title">
-                      <span class="word">{{ source.name }}</span>
-                      <span class="phonetic">{{ source.usphone }}</span>
-                    </div>
-                    <div class="translate">{{ source.trans.join('；') }}</div>
-                  </div>
-                  <div class="right">
-                    <VolumeIcon @click="playWordAudio(source.name)"></VolumeIcon>
-                    <Icon icon="fluent:delete-28-regular" width="20" color="#929596"/>
-                  </div>
-                </template>
-              </virtual-list>
+              <div class="common-title">
+                章节列表：共{{
+                  currentSelectDict.chapterWords.length
+                }}章(每章{{ currentSelectDict.chapterWordNumber }}词)
+              </div>
+              <ChapterList
+                  @showWord="showWord"
+                  v-model:active-index="currentSelectDict.chapterIndex"
+                  :list="currentSelectDict.chapterWords"/>
             </div>
           </div>
-          <div class="activity">
+          <div v-if="false" class="activity">
             <ActivityCalendar
                 :data="[{ date: '2023-05-22', count: 5 }]"
                 :width="40"
@@ -329,16 +326,16 @@ function clickEvent(e) {
       </div>
     </div>
   </Modal>
+  <WordListModal/>
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors";
+@import "@/assets/css/variable.scss";
 
 $modal-mask-bg: rgba(#000, .15);
 $radius: 16rem;
 $time: 0.3s;
 $header-height: 60rem;
-$footer-height: 40rem;
 
 .slide {
   width: 1100rem;
@@ -405,7 +402,6 @@ $footer-height: 40rem;
       overflow: auto;
       height: 100%;
       padding-right: $space;
-
     }
   }
 }
@@ -443,17 +439,24 @@ $footer-height: 40rem;
     position: relative;
     gap: $space;
 
+    .common-title {
+      font-size: 20rem;
+      color: gray;
+      text-align: center;
+      margin-bottom: 10rem;
+    }
+
     .detail {
+      overflow: auto;
       flex: 3;
       display: flex;
       flex-direction: column;
       gap: 10rem;
-      cursor: pointer;
       padding: 15rem;
       min-height: 100rem;
       position: relative;
       border-radius: 10rem;
-      background: var(--color-item-bg);
+      background: var(--color-second-bg);
       color: var(--color-font-1);
       font-size: 14rem;
 
@@ -466,22 +469,22 @@ $footer-height: 40rem;
         font-size: 18rem;
         margin-bottom: 30rem;
       }
+
+      .count {
+        cursor: pointer;
+        border-bottom: 2px solid var(--color-item-active);
+      }
     }
 
     .setting {
+      overflow: auto;
       flex: 5;
       background: white;
       border-radius: 10rem;
-      background: var(--color-item-bg);
+      background: var(--color-second-bg);
       color: var(--color-font-1);
       padding: 15rem;
 
-      .title {
-        font-size: 20rem;
-        color: gray;
-        text-align: center;
-      }
-
       .row {
         display: flex;
         align-items: center;
@@ -494,15 +497,12 @@ $footer-height: 40rem;
 
     .other {
       flex: 5;
-      background: white;
       border-radius: 10rem;
-      background: var(--color-item-bg);
+      background: var(--color-second-bg);
       color: var(--color-font-1);
       padding: 10rem;
-
-      .word-list {
-        height: calc(100% - $footer-height);
-      }
+      display: flex;
+      flex-direction: column;
     }
   }
 
@@ -512,71 +512,12 @@ $footer-height: 40rem;
   }
 
   .footer {
-    margin-top: 10rem;
     box-sizing: content-box;
-    height: $footer-height;
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
     gap: $space;
   }
 }
-
 </style>
 
-<style lang="scss">
-@import "@/assets/css/colors";
-
-.virtual-list {
-  overflow: auto;
-  height: 100%;
-}
-
-.dict-virtual-item {
-  background: var(--color-header-bg);
-  border-radius: 6rem;
-  padding: 8rem 12rem;
-  display: flex;
-  justify-content: space-between;
-  transition: all .3s;
-  color: var(--color-font-1);
-
-  &.active {
-    background: $second;
-    color: white;
-  }
-
-  &:hover {
-    //background: $dark-main-bg;
-    //background: $item-hover;
-    background: rgb(226, 226, 226);
-  }
-
-  .left {
-    .title {
-      display: flex;
-      align-items: center;
-      gap: 10rem;
-
-      .word {
-        font-size: 24rem;
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
-        display: flex;
-      }
-
-      .phonetic {
-        font-size: 14rem;
-        color: gray;
-      }
-    }
-  }
-
-  .right {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    gap: 5rem;
-  }
-}
-
-</style>
\ No newline at end of file
diff --git a/src/components/Toolbar/FeedbackModal.vue b/src/components/Toolbar/FeedbackModal.vue
index aea9ef3d..08a6828a 100644
--- a/src/components/Toolbar/FeedbackModal.vue
+++ b/src/components/Toolbar/FeedbackModal.vue
@@ -42,7 +42,7 @@ const emit = defineEmits([
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors.scss";
+@import "@/assets/css/variable";
 
 .feedback-modal {
   width: 500rem;
diff --git a/src/components/Toolbar/SettingModal.vue b/src/components/Toolbar/SettingModal.vue
index 7ed77246..dee50b9e 100644
--- a/src/components/Toolbar/SettingModal.vue
+++ b/src/components/Toolbar/SettingModal.vue
@@ -230,7 +230,7 @@ useWatchAllSound()
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors.scss";
+@import "@/assets/css/variable";
 
 .setting-modal {
   width: 40vw;
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
index 572b7d84..78008b83 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -108,7 +108,7 @@ watch(() => settingStore.showToolbar, n => {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors.scss";
+@import "@/assets/css/variable";
 
 header {
   width: var(--toolbar-width);
diff --git a/src/components/WordItem.vue b/src/components/WordItem.vue
index 2dff613b..2de07d03 100644
--- a/src/components/WordItem.vue
+++ b/src/components/WordItem.vue
@@ -41,7 +41,7 @@ const emit = defineEmits<{
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors";
+@import "@/assets/css/variable.scss";
 
 .word-item {
   background: var(--color-header-bg);
diff --git a/src/components/WordList.vue b/src/components/WordList.vue
index d210a02d..ea73a465 100644
--- a/src/components/WordList.vue
+++ b/src/components/WordList.vue
@@ -56,7 +56,7 @@ watch(() => props.list, () => {
 
 
 <style scoped lang="scss">
-@import "@/assets/css/colors";
+@import "@/assets/css/variable.scss";
 
 .list {
   display: flex;
diff --git a/src/components/WordListModal.vue b/src/components/WordListModal.vue
new file mode 100644
index 00000000..e443e8e2
--- /dev/null
+++ b/src/components/WordListModal.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+
+import VolumeIcon from "@/components/VolumeIcon.vue";
+import {Icon} from "@iconify/vue";
+import Modal from "@/components/Modal/Modal.vue";
+import {$ref} from "vue/macros";
+import {onMounted, onUnmounted} from "vue";
+import {usePlayWordAudio} from "@/hooks/sound.ts";
+import {emitter, EventKey} from "@/utils/eventBus.ts";
+
+let show = $ref(false)
+let list = $ref([])
+let title = $ref('')
+const playWordAudio = usePlayWordAudio()
+
+onMounted(() => {
+  emitter.on(EventKey.openWordListModal, (val) => {
+    list = val.list
+    title = val.title
+    show = true
+  })
+})
+
+onUnmounted(() => {
+  emitter.off(EventKey.openWordListModal)
+})
+</script>
+
+<template>
+  <Modal
+      :title="title"
+      v-model="show">
+    <div class="all-word">
+      <virtual-list class="virtual-list"
+                    :keeps="20"
+                    data-key="name"
+                    :data-sources="list"
+                    :estimate-size="85"
+                    item-class="dict-virtual-item"
+      >
+        <template #={source}>
+          <div class="left">
+            <div class="title">
+              <span class="word">{{ source.name }}</span>
+              <span class="phonetic">{{ source.usphone }}</span>
+            </div>
+            <div class="translate">{{ source.trans.join('；') }}</div>
+          </div>
+          <div class="right">
+            <VolumeIcon @click="playWordAudio(source.name)"></VolumeIcon>
+            <Icon icon="fluent:delete-28-regular" width="20" color="#929596"/>
+          </div>
+        </template>
+      </virtual-list>
+    </div>
+  </Modal>
+</template>
+
+<style lang="scss" scoped>
+@import "@/assets/css/style";
+
+.all-word {
+  padding: $space;
+  padding-top: 0;
+  width: 400rem;
+  height: 75vh;
+}
+</style>
+
+<style lang="scss">
+@import "@/assets/css/variable.scss";
+
+.virtual-list {
+  overflow: auto;
+  height: 100%;
+}
+
+.dict-virtual-item {
+  background: var(--color-header-bg);
+  border-radius: 6rem;
+  padding: 8rem 12rem;
+  display: flex;
+  justify-content: space-between;
+  transition: all .3s;
+  color: var(--color-font-1);
+  margin-bottom: 10rem;
+
+  &.active {
+    background: $second;
+    color: white;
+  }
+
+  &:hover {
+    //background: $dark-main-bg;
+    //background: $item-hover;
+    background: rgb(226, 226, 226);
+  }
+
+  .left {
+    .title {
+      display: flex;
+      align-items: center;
+      gap: 10rem;
+
+      .word {
+        font-size: 24rem;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+        display: flex;
+      }
+
+      .phonetic {
+        font-size: 14rem;
+        color: gray;
+      }
+    }
+
+    .translate {
+      font-size: 14rem;
+    }
+  }
+
+  .right {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 5rem;
+  }
+}
+
+</style>
diff --git a/src/utils/eventBus.ts b/src/utils/eventBus.ts
index fc3b7486..f63213c0 100644
--- a/src/utils/eventBus.ts
+++ b/src/utils/eventBus.ts
@@ -4,6 +4,7 @@ export const emitter = mitt()
 export const EventKey = {
   resetWord: 'resetWord',
   openStatModal: 'openStatModal',
+  openWordListModal: 'openWordListModal',
   closeOther: 'closeOther',
   keydown: 'keydown',
   keyup: 'keyup',