From b94e979689dd82f948f74098d48908cc4dec3796 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 2 Jan 2024 23:08:41 +0800
Subject: [PATCH] Develop mobile pages

---
 src/components/icon/DeleteIcon.vue        |  2 +-
 src/pages/pc/components/DictListPanel.vue | 12 +++++++++++-
 src/pages/pc/components/list/DictItem.vue | 22 ++++++++++++++++++++--
 src/pages/pc/components/list/DictList.vue |  2 ++
 src/stores/base.ts                        |  2 +-
 5 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/icon/DeleteIcon.vue b/src/components/icon/DeleteIcon.vue
index edf1622a..40e3f1b4 100644
--- a/src/components/icon/DeleteIcon.vue
+++ b/src/components/icon/DeleteIcon.vue
@@ -4,7 +4,7 @@ import {Icon} from "@iconify/vue";
 </script>
 
 <template>
-  <Icon icon="solar:trash-bin-minimalistic-linear"/>
+  <Icon icon="solar:trash-bin-minimalistic-linear" width="20"/>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/pages/pc/components/DictListPanel.vue b/src/pages/pc/components/DictListPanel.vue
index e1fcd91d..2df972ef 100644
--- a/src/pages/pc/components/DictListPanel.vue
+++ b/src/pages/pc/components/DictListPanel.vue
@@ -39,7 +39,12 @@ const groupByTranslateLanguage = $computed(() => {
     data = groupBy(articleList, 'translateLanguage')
   } else if (currentLanguage === 'my') {
     data = {
-      common: store.myDictList.concat([{id: '',} as any])
+      common: store.myDictList.map((v, i) => {
+        if (i >= 3) {
+          // v.showDel = true
+        }
+        return v
+      }).concat([{id: '',} as any])
     }
   } else {
     data = groupBy(groupByLanguage[currentLanguage], 'translateLanguage')
@@ -62,6 +67,10 @@ const groupedByCategoryAndTag = $computed(() => {
   return data
 })
 
+function del(e) {
+  store.myDictList.splice(e.index, 1)
+}
+
 </script>
 
 <template>
@@ -83,6 +92,7 @@ const groupedByCategoryAndTag = $computed(() => {
           <DictList
               @add="emit('add')"
               @selectDict="e => emit('selectDict',e)"
+              @del="del"
               :select-id="store.currentDict.id"
               :list="groupByTranslateLanguage['common']"/>
         </template>
diff --git a/src/pages/pc/components/list/DictItem.vue b/src/pages/pc/components/list/DictItem.vue
index 34d24b07..2eaf6570 100644
--- a/src/pages/pc/components/list/DictItem.vue
+++ b/src/pages/pc/components/list/DictItem.vue
@@ -3,19 +3,22 @@
 import {Dict, DictType} from "@/types.ts";
 import {Icon} from "@iconify/vue";
 import {$computed} from "vue/macros";
+import DeleteIcon from "@/components/icon/DeleteIcon.vue";
+import BaseIcon from "@/components/BaseIcon.vue";
 
 const props = defineProps<{
   dict?: Dict,
   active?: boolean
+  showDel?: boolean
 }>()
 
 const emit = defineEmits<{
-  selectDict: [val: { dict: Dict, index: number }]
   add: []
+  del: []
 }>()
 
 let length = $computed(() => {
-  let isWord = [DictType.word,DictType.collect,DictType.simple,DictType.wrong].includes(props.dict.type)
+  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
@@ -45,6 +48,9 @@ let length = $computed(() => {
         <div class="num">{{ length }}</div>
       </div>
       <div class="pin" v-if="dict.type === DictType.article">文章</div>
+      <div class="del" v-if="dict.showDel && !active" >
+        <BaseIcon icon="solar:trash-bin-minimalistic-linear" @click="emit('del')"/>
+      </div>
     </template>
     <div v-else class="add" @click.stop="emit('add')">
       <Icon icon="fluent:add-20-filled" width="38" color="#929596"/>
@@ -101,12 +107,24 @@ let length = $computed(() => {
     bottom: 15rem;
   }
 
+  .del {
+    position: absolute;
+    top: 10rem;
+    right: 10rem;
+    opacity: 0;
+    transition: opacity .3s;
+  }
+
   &.active {
     background: var(--color-item-active);
   }
 
   &:hover {
     background: var(--color-item-active);
+
+    .del {
+      opacity: 1;
+    }
   }
 
   .add {
diff --git a/src/pages/pc/components/list/DictList.vue b/src/pages/pc/components/list/DictList.vue
index 87a8119d..a4b2f245 100644
--- a/src/pages/pc/components/list/DictList.vue
+++ b/src/pages/pc/components/list/DictList.vue
@@ -10,6 +10,7 @@ defineProps<{
 
 const emit = defineEmits<{
   selectDict: [val: { dict: any, index: number }]
+  del: [val: { dict: any, index: number }]
   detail: [],
   add: []
 }>()
@@ -22,6 +23,7 @@ const emit = defineEmits<{
               :active="selectId === dict.id"
               @click="emit('selectDict',{dict,index})"
               @add="emit('add')"
+              @del="emit('del',{dict,index})"
               :dict="dict"/>
   </div>
 </template>
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 856a1123..eaaf53e2 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -216,7 +216,7 @@ export const useBaseStore = defineStore('base', {
             if ([DictType.word].includes(this.currentDict.type)) {
               if (!this.currentDict.originWords.length) {
                 let v = await getDictFile(dictResourceUrl)
-                v = v.slice(0, 50)
+                // v = v.slice(0, 50)
                 v.map(s => {
                   s.id = nanoid(6)
                 })