save

src/pages/pc/dict2/DictListPanel2.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import {DictResource,} from "@/types.ts";
+import {DictResource, getDefaultDict, Sort,} from "@/types.ts";
 import {dictionaryResources} from "@/assets/dictionary.ts";
 import {groupBy} from "lodash-es";
 import {useBaseStore} from "@/stores/base.ts";
@@ -11,6 +11,7 @@ import deFlag from "@/assets/img/flags/de.png";
 import codeFlag from "@/assets/img/flags/code.png";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {useRouter} from "vue-router";
+import {useNav} from "@/utils";
 
 const emit = defineEmits<{
   add: [],
@@ -67,7 +68,14 @@ const languageCategoryOptions = [
   {id: 'code', name: 'Code', flag: codeFlag},
 ]
 
-const router = useRouter()
+const {nav, back} = useNav()
+
+function change(e) {
+  console.log('e', e.dict)
+  e.dict.sort = Sort.normal
+  store.changeWordDict(getDefaultDict(e.dict))
+  ElMessage.success('切换成功')
+}
 </script>
 
 <template>
@@ -75,7 +83,7 @@ const router = useRouter()
     <header class="flex justify-center pb-3">
       <div class="container2 flex justify-between items-center">
         <div class="flex items-center gap-5">
-          <BaseIcon icon="ion:chevron-back" @click="router.back"/>
+          <BaseIcon icon="ion:chevron-back" title="返回" @click="back"/>
           <div class="tabs">
             <div class="tab"
                  :class="currentLanguage === item.id && 'active'"
@@ -100,7 +108,7 @@ const router = useRouter()
         <DictGroup
             v-for="item in groupedByCategoryAndTag"
             :select-id="store.currentDict.id"
-            @selectDict="e => emit('selectDict',e)"
+            @selectDict="change"
             :groupByTag="item[1]"
             :category="item[0]"
         />
@@ -123,8 +131,10 @@ const router = useRouter()
   header {
     position: fixed;
     top: 0;
-    left: var(--aside-width);
-    width: calc(100vw - var(--aside-width));
+    //left: var(--aside-width);
+    //width: calc(100vw - var(--aside-width));
+    left: 0;
+    width: 100vw;
     z-index: 9;
     background: var(--color-main-bg);
 

src/pages/pc/word/WordHome.vue

@@ -7,6 +7,7 @@ import {useRouter} from "vue-router";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {useNav} from "@/utils";
 import BasePage from "@/pages/pc/components/BasePage.vue";
+import {watch} from "vue";
 
 const base = useBaseStore()
 const router = useRouter()
@@ -15,6 +16,11 @@ const {nav} = useNav()
 function clickEvent(e) {
   console.log('e', e)
 }
+
+watch(() => base.currentStudyWordProgress, n => {
+  console.log('n', n)
+}, {immediate: true})
+
 </script>
 
 <template>
@@ -44,16 +50,22 @@ function clickEvent(e) {
           <div class="flex justify-between items-center">
             <div class="bg-slate-200 p-3 rounded-md cursor-pointer flex items-center">
               <span class="text-lg font-bold">{{ base.currentStudyWordDict.name }}</span>
-              <Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
-              <Icon icon="uil:setting" class="text-2xl ml-2"/>
+              <BaseIcon
+                  title="切换词典"
+                  icon="gg:arrows-exchange"
+                  class="ml-2"
+                  @click="router.push('/dict')"/>
             </div>
             <div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
                  @click="router.push('study-word')">
               开始学习
             </div>
           </div>
-          <div class="mt-5 text-sm">已学习5555个单词的1%</div>
-          <el-progress class="mt-1" :percentage="80" :show-text="false"></el-progress>
+          <div class="mt-5 text-sm">已学习{{
+              base.currentStudyWordDict.words.length
+            }}个单词的{{ base.currentStudyWordProgress }}%
+          </div>
+          <el-progress class="mt-1" :percentage="base.currentStudyWordProgress" :show-text="false"></el-progress>
         </div>
         <div class="card flex gap-3">
           <div class="bg-slate-200 w-10 h-10 flex center text-2xl rounded">
@@ -80,7 +92,9 @@ function clickEvent(e) {
         <div class="title">
           其他学习词典
         </div>
-        <BaseIcon icon="ic:round-add" @click="router.push('/dict')"/>
+        <BaseIcon icon="ic:round-add"
+                  title="切换词典"
+                  @click="router.push('/dict')"/>
       </div>
       <div class="grid grid-cols-2 gap-6 mt-5 ">
         <div class=" p-4 rounded-md justify-between items-center bg-slate-200 " v-for="i in 3">