save

src/components/Backgorund.vue

@@ -102,6 +102,7 @@ onMounted(() => {
   canvas {
     width: 100vw;
     height: 100vh;
+    opacity: 0;
   }
 }
 

src/components/DictListPanel.vue

@@ -5,8 +5,6 @@ import {$computed, $ref} from "vue/macros";
 import {dictionaryResources} from "@/assets/dictionary.ts";
 import {groupBy} from "lodash-es";
 import {useBaseStore} from "@/stores/base.ts";
-import {useSettingStore} from "@/stores/setting.ts";
-import {useRuntimeStore} from "@/stores/runtime.ts";
 import DictList from "@/components/list/DictList.vue";
 import DictGroup from "@/components/list/DictGroup.vue";
 
@@ -15,8 +13,6 @@ const emit = defineEmits<{
   selectDict: [val: { dict: any, index: number }]
 }>()
 const store = useBaseStore()
-const settingStore = useSettingStore()
-const runtimeStore = useRuntimeStore()
 
 let currentLanguage = $ref('my')
 let currentTranslateLanguage = $ref('common')
@@ -143,7 +139,7 @@ const groupedByCategoryAndTag = $computed(() => {
         gap: 6rem;
 
         &.active {
-          $main: rgb(64,158,255);
+          $main: rgb(64, 158, 255);
           border-bottom: 2px solid $main;
         }
 

src/components/slide/SlideHorizontal.vue

@@ -27,7 +27,7 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
-  anim: {
+  slide: {
     type: Boolean,
     default: true
   }
@@ -65,17 +65,17 @@ onMounted(() => {
 })
 
 function touchStart(e) {
-  if (!props.anim) return
+  if (!props.slide) return
   slideTouchStart(e, wrapperEl.value, state)
 }
 
 function touchMove(e) {
-  if (!props.anim) return
+  if (!props.slide) return
   slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.HORIZONTAL)
 }
 
 function touchEnd(e) {
-  if (!props.anim) return
+  if (!props.slide) return
   slideTouchEnd(e, state, canNext, () => {
 
   })

src/pages/mobile/DictManage.vue

@@ -1,15 +1,107 @@
 <script setup lang="ts">
 
+import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
+import SlideItem from "@/components/slide/SlideItem.vue";
+import {useBaseStore} from "@/stores/base.ts";
+import {$computed, $ref} from "vue/macros";
+import {groupBy} from "lodash-es";
+import {dictionaryResources} from "@/assets/dictionary.ts";
+import {DictResource, languageCategoryOptions} from "@/types.ts";
+
+let index = $ref(0)
+
+const store = useBaseStore()
+
+let currentLanguage = $ref('my')
+let currentTranslateLanguage = $ref('common')
+let groupByLanguage = groupBy(dictionaryResources, 'language')
+let translateLanguageList = $ref([])
+
+function groupByDictTags(dictList: DictResource[]) {
+  return dictList.reduce<Record<string, DictResource[]>>((result, dict) => {
+    dict.tags.forEach((tag) => {
+      if (Object.prototype.hasOwnProperty.call(result, tag)) {
+        result[tag].push(dict)
+      } else {
+        result[tag] = [dict]
+      }
+    })
+    return result
+  }, {})
+}
+
+const groupByTranslateLanguage = $computed(() => {
+  let data: any
+  if (currentLanguage === 'article') {
+    let articleList = dictionaryResources.filter(v => v.type === 'article')
+    data = groupBy(articleList, 'translateLanguage')
+  } else if (currentLanguage === 'my') {
+    data = {
+      common: store.myDictList.concat([{id: '',} as any])
+    }
+  } else {
+    data = groupBy(groupByLanguage[currentLanguage], 'translateLanguage')
+  }
+  // console.log('groupByTranslateLanguage', data)
+  translateLanguageList = Object.keys(data)
+  currentTranslateLanguage = translateLanguageList[0]
+  return data
+})
+
+const groupedByCategoryAndTag = $computed(() => {
+  const currentTranslateLanguageDictList = groupByTranslateLanguage[currentTranslateLanguage]
+  const groupByCategory = groupBy(currentTranslateLanguageDictList, 'category')
+
+  let data = []
+  for (const [key, value] of Object.entries(groupByCategory)) {
+    data.push([key, groupByDictTags(value)])
+  }
+  // console.log('groupedByCategoryAndTag', data)
+  return data
+})
+
 </script>
 
 <template>
   <div class="page dict-manage">
-    DictManage.vue
+    <div class="tabs">
+      <div class="tab"
+           :class="currentLanguage === item.id && 'active'"
+           @click="currentLanguage = item.id,index=i"
+           v-for="(item,i) in languageCategoryOptions">
+        <img :src='item.flag' alt=""/>
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+    <SlideHorizontal v-model:index="index">
+      <SlideItem>
+        1
+      </SlideItem>
+      <SlideItem>
+        2
+      </SlideItem>
+      <SlideItem>3</SlideItem>
+      <SlideItem>4</SlideItem>
+    </SlideHorizontal>
   </div>
 </template>
 
 <style scoped lang="scss">
 .dict-manage {
   font-size: 18rem;
+
+  .tabs {
+    height: 60rem;
+    display: flex;
+    width: 100%;
+    border-bottom: 1px solid gray;
+
+    .tab {
+      width: 80rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
 }
 </style>

src/pages/mobile/Setting.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+
+import {Icon} from "@iconify/vue";
+import IconWrapper from "@/components/IconWrapper.vue";
+import useTheme from "@/hooks/theme.ts";
+import {useSettingStore} from "@/stores/setting.ts";
+
+const {toggleTheme} = useTheme()
+const settingStore = useSettingStore()
+
+</script>
+
+<template>
+  <div class="page setting">
+
+    <div class="setting-list">
+      <div class="item">
+        <div class="left">
+          <Icon icon="uil:setting" width="22"/>
+          <span>设置</span>
+        </div>
+        <Icon class="arrow" icon="mingcute:right-line" width="20"/>
+      </div>
+      <div class="item">
+        <div class="left">
+          <Icon icon="mdi:about-circle-outline" width="22"/>
+          <span>关于</span>
+        </div>
+        <Icon class="arrow" icon="mingcute:right-line" width="20"/>
+      </div>
+      <div class="item">
+        <IconWrapper>
+          <Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
+                @click="toggleTheme"/>
+          <Icon icon="tabler:sun" v-else @click="toggleTheme"/>
+        </IconWrapper>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped lang="scss">
+.setting {
+  font-size: 18rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .setting-list {
+    margin-top: 100rem;
+    background: var(--color-third-bg);
+    border-radius: 8rem;
+    width: 80%;
+
+    .item {
+      height: 60rem;
+      padding: 0 20rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        align-items: center;
+        gap: 10rem;
+      }
+    }
+  }
+}
+</style>

src/pages/mobile/index.vue

@@ -4,6 +4,7 @@ import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import SlideItem from "@/components/slide/SlideItem.vue";
 import Home from "@/pages/mobile/Home.vue";
 import DictManage from "@/pages/mobile/DictManage.vue";
+import Setting from "@/pages/mobile/Setting.vue";
 
 let state = $ref({
   baseIndex: 0
@@ -13,7 +14,7 @@ let state = $ref({
   <div class="page mobile">
     <div class="content">
       <SlideHorizontal
-          :anim="false"
+          :slide="false"
           v-model:index="state.baseIndex">
         <SlideItem>
           <Home/>
@@ -21,7 +22,9 @@ let state = $ref({
         <SlideItem>
           <DictManage/>
         </SlideItem>
-        <SlideItem>3</SlideItem>
+        <SlideItem>
+          <Setting/>
+        </SlideItem>
       </SlideHorizontal>
     </div>
     <div class="tabs">

src/pages/mobile/practice/practice-word/TypingWord.vue

@@ -283,12 +283,6 @@ onMounted(() => {
               />
             </div>
             <div class="right">
-              <IconWrapper>
-                <Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
-                      @click="toggleTheme"/>
-                <Icon icon="tabler:sun" v-else @click="toggleTheme"/>
-              </IconWrapper>
-
               <BaseIcon
                   v-if="!isWordCollect(word)"
                   class="collect"
@@ -439,7 +433,11 @@ onMounted(() => {
       padding: 0 10rem;
       align-items: center;
       justify-content: space-between;
-      gap: 10rem;
+
+      .right {
+        display: flex;
+        gap: 10rem;
+      }
     }
 
     :deep(.word) {