From 54028ed25abc2db444376877b1596a59a0be3245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BF=B5=E8=B6=85?= <王念超@163.com>
Date: Sun, 16 Jun 2024 18:56:39 +0800
Subject: [PATCH] feat: update dict

---
 src/pages/pc/components/list/DictGroup.vue | 44 ++++++++----------
 src/pages/pc/components/list/DictItem.vue  | 22 ++-------
 src/pages/pc/dict2/DictListPanel2.vue      | 54 +++++++++++++++++-----
 3 files changed, 64 insertions(+), 56 deletions(-)

diff --git a/src/pages/pc/components/list/DictGroup.vue b/src/pages/pc/components/list/DictGroup.vue
index 2497a8f5..16b3e530 100644
--- a/src/pages/pc/components/list/DictGroup.vue
+++ b/src/pages/pc/components/list/DictGroup.vue
@@ -1,45 +1,45 @@
 <script setup lang="ts">
-import {watch} from "vue";
 import {DictResource} from "@/types.ts";
-import DictList from "@/pages/pc/components/list/DictList.vue";
+import DictItem from "@/pages/pc/components/list/DictItem.vue";
 
 const props = defineProps<{
-  category: string,
-  groupByTag: any,
+  item: {
+    list: any[],
+    tags: string[],
+    name: string,
+  },
   selectId: string
 }>()
 const emit = defineEmits<{
   selectDict: [val: { dict: DictResource, index: number }]
   detail: [],
 }>()
-const tagList = $computed(() => Object.keys(props.groupByTag))
-let currentTag = $ref(tagList[0])
-let list = $computed(() => {
-  return props.groupByTag[currentTag]
+let currentTag = $ref(props.item.tags[0])
+let localList = $computed(() => {
+  return props.item.list.filter(v => v.tags.includes(currentTag))
 })
 
-watch(() => props.groupByTag, () => {
-  currentTag = tagList[0]
-})
 
 </script>
 
 <template>
   <div class="dict-group">
-    <div class="flex items-center border">
-      <div class="category">{{ category }}：</div>
+    <div class="flex items-start border py-4">
+      <div class="text-xl break-keep mt-1">{{ item.name }}：</div>
       <div class="tags">
         <div class="tag" :class="i === currentTag &&'active'"
              @click="currentTag = i"
-             v-for="i in Object.keys(groupByTag)">{{ i }}
+             v-for="i in item.tags">{{ i }}
         </div>
       </div>
     </div>
 
-    <DictList
-        @selectDict="e => emit('selectDict',e)"
-        :list="list"
-        :select-id="selectId"/>
+    <div class="dict-list1 grid grid-cols-4 gap-4">
+      <DictItem v-for="(dict,index) in localList"
+                :active="selectId === dict.id"
+                @click="emit('selectDict',{dict,index})"
+                :dict="dict"/>
+    </div>
   </div>
 </template>
 
@@ -47,13 +47,8 @@ watch(() => props.groupByTag, () => {
 .dict-group {
   color: var(--color-font-1);
   margin-bottom: 1.5rem;
-  //border-bottom: 1px dashed gray;
 
-  .category {
-    font-size: 1.2rem;
-    //padding-bottom: 1rem;
-  }
-  .border{
+  .border {
     border-top: 1px dashed gray;
   }
 }
@@ -61,7 +56,6 @@ watch(() => props.groupByTag, () => {
 .tags {
   display: flex;
   flex-wrap: wrap;
-  margin: 1rem 0;
 
   .tag {
     color: var(--color-font-1);
diff --git a/src/pages/pc/components/list/DictItem.vue b/src/pages/pc/components/list/DictItem.vue
index e478dd49..f384792e 100644
--- a/src/pages/pc/components/list/DictItem.vue
+++ b/src/pages/pc/components/list/DictItem.vue
@@ -15,21 +15,6 @@ const emit = defineEmits<{
   del: []
 }>()
 
-let length = $computed(() => {
-  let isWord = [DictType.word, DictType.collect, DictType.simple, DictType.wrong].includes(props.dict.type)
-  let len: any = ''
-  if (props.dict.length) {
-    len = props.dict.length
-    len += (isWord ? '词' : '篇')
-  } else {
-    if (isWord) {
-      len = props.dict.originWords.length + '词'
-    } else {
-      len = props.dict.articles.length + '篇'
-    }
-  }
-  return len
-})
 </script>
 
 <template>
@@ -40,13 +25,12 @@ let length = $computed(() => {
     <template v-if="dict.id">
       <div class="top">
         <div class="name">{{ dict.name }}</div>
-        <div class="desc">{{ dict.description }}</div>
+        <div class="desc" :style="{opacity:dict.name !== dict.description?1:0}">{{ dict.description }}</div>
       </div>
       <div class="bottom">
-        <div class="num">{{ length }}</div>
+        <div class="num">{{ dict.length + '词' }}</div>
       </div>
-      <div class="pin" v-if="dict.type === DictType.article">文章</div>
-      <div class="del" v-if="dict.showDel && !active" >
+      <div class="del" v-if="dict.showDel && !active">
         <BaseIcon icon="solar:trash-bin-minimalistic-linear" @click="emit('del')"/>
       </div>
     </template>
diff --git a/src/pages/pc/dict2/DictListPanel2.vue b/src/pages/pc/dict2/DictListPanel2.vue
index b18c591c..2a0f8e21 100644
--- a/src/pages/pc/dict2/DictListPanel2.vue
+++ b/src/pages/pc/dict2/DictListPanel2.vue
@@ -2,7 +2,7 @@
 
 import {DictResource, getDefaultDict, Sort,} from "@/types.ts";
 import {dictionaryResources} from "@/assets/dictionary.ts";
-import {groupBy} from "lodash-es";
+import {groupBy, uniq} from "lodash-es";
 import {useBaseStore} from "@/stores/base.ts";
 import DictGroup from "@/pages/pc/components/list/DictGroup.vue";
 import enFlag from "@/assets/img/flags/en.png";
@@ -54,7 +54,7 @@ const groupedByCategoryAndTag = $computed(() => {
   for (const [key, value] of Object.entries(groupByCategory)) {
     data.push([key, groupByDictTags(value)])
   }
-  // console.log('groupedByCategoryAndTag', data)
+  console.log('groupedByCategoryAndTag', data)
   return data
 })
 
@@ -79,16 +79,44 @@ function change(e) {
   back()
 }
 
+let dictData = $ref({})
+let currentTabIndex = $ref('0')
+let currentTranslateLanguage2 = $ref(1)
+const currentLangDictList = $computed(() => {
+  return dictData[currentTabIndex] ?? {}
+})
+
+const currentTranDictList = $computed(() => {
+  return currentLangDictList[currentTranslateLanguage2] ?? {}
+})
+
 onMounted(() => {
   let d: any = groupBy(dict, 'langType')
   for (let dKey in d) {
     d[dKey] = groupBy(d[dKey], 'tranType')
     for (const dKey2 in d[dKey]) {
       d[dKey][dKey2] = groupBy(d[dKey][dKey2], 'category')
+      for (const dKey3 in d[dKey][dKey2]) {
+        d[dKey][dKey2][dKey3] = {
+          tags: uniq(d[dKey][dKey2][dKey3].map(v => v.tags).flat()),
+          list: d[dKey][dKey2][dKey3],
+          name: dKey3
+        }
+      }
     }
   }
+  dictData = d
   console.log('dict', d)
 })
+
+function formatLangType(val) {
+  switch (Number(val)) {
+    case 0:
+      return '英语'
+    case 1:
+      return '汉语'
+  }
+}
 </script>
 
 <template>
@@ -99,11 +127,10 @@ onMounted(() => {
           <BaseIcon icon="ion:chevron-back" title="返回" @click="back"/>
           <div class="tabs">
             <div class="tab"
-                 :class="currentLanguage === item.id && 'active'"
-                 @click="currentLanguage = item.id"
-                 v-for="item in languageCategoryOptions">
-              <img :src='item.flag' alt=""/>
-              <span>{{ item.name }}</span>
+                 :class="currentTabIndex === item && 'active'"
+                 @click="currentTabIndex = item"
+                 v-for="item in Object.keys(dictData)">
+              <span>{{ formatLangType(item) }}</span>
             </div>
           </div>
         </div>
@@ -114,16 +141,19 @@ onMounted(() => {
       <div class="dict-list-wrapper">
         <div class="translate ">
           <span>释义：</span>
-          <el-radio-group v-model="currentTranslateLanguage">
-            <el-radio-button border v-for="i in translateLanguageList" :value="i">{{ $t(i) }}</el-radio-button>
+          <el-radio-group v-model="currentTranslateLanguage2">
+            <el-radio-button border v-for="i in Object.keys(currentLangDictList)" :value="i">{{
+                formatLangType(i)
+              }}
+            </el-radio-button>
           </el-radio-group>
         </div>
+
         <DictGroup
-            v-for="item in groupedByCategoryAndTag"
+            v-for="item in currentTranDictList"
             :select-id="store.currentDict.id"
             @selectDict="change"
-            :groupByTag="item[1]"
-            :category="item[0]"
+            :item="item"
         />
       </div>
     </div>