From 05bf1ac5b40fd702b320b92be56b64cd7439fe8b Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 3 Aug 2025 03:39:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=B0=86=E4=B8=80=E4=BA=9B=E5=BF=AB?=
 =?UTF-8?q?=E6=8D=B7=E8=AE=BE=E7=BD=AE=E7=A7=BB=E5=88=B0=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/pc/Setting.vue                      | 46 +++++++---
 .../pc/components/toolbar/RepeatSetting.vue   | 89 -------------------
 src/pages/pc/index.vue                        |  2 -
 src/pages/pc/word/components/Footer.vue       |  3 -
 src/stores/setting.ts                         |  2 +-
 5 files changed, 34 insertions(+), 108 deletions(-)
 delete mode 100644 src/pages/pc/components/toolbar/RepeatSetting.vue

diff --git a/src/pages/pc/Setting.vue b/src/pages/pc/Setting.vue
index 8bb68a38..a3635056 100644
--- a/src/pages/pc/Setting.vue
+++ b/src/pages/pc/Setting.vue
@@ -127,31 +127,31 @@ function importData(e) {
 
 <template>
   <BasePage>
-    <div class="setting">
+    <div class="setting text-md">
       <div class="left mt-10">
         <div class="tabs">
           <div class="tab" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">
-            <Icon icon="bx:headphone" width="20" color="#0C8CE9"/>
+            <Icon icon="bx:headphone" width="20"/>
             <span>音效设置</span>
           </div>
+          <div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">
+            <Icon icon="icon-park-outline:setting-config" width="20"/>
+            <span>练习设置</span>
+          </div>
           <div class="tab" :class="tabIndex === 2 && 'active'" @click="tabIndex = 2">
-            <Icon icon="material-symbols:keyboard-outline" width="20" color="#0C8CE9"/>
+            <Icon icon="material-symbols:keyboard-outline" width="20"/>
             <span>快捷键设置</span>
           </div>
-          <div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">
-            <Icon icon="icon-park-outline:setting-config" width="20" color="#0C8CE9"/>
-            <span>其他设置</span>
-          </div>
           <div class="tab" :class="tabIndex === 3 && 'active'" @click="tabIndex = 3">
-            <Icon icon="mdi:database-cog-outline" width="20" color="#0C8CE9"/>
+            <Icon icon="mdi:database-cog-outline" width="20"/>
             <span>数据管理</span>
           </div>
           <div class="tab" :class="tabIndex === 4 && 'active'" @click="tabIndex = 4">
-            <Icon icon="mingcute:service-fill" width="20" color="#0C8CE9"/>
+            <Icon icon="mingcute:service-fill" width="20"/>
             <span>反馈</span>
           </div>
           <div class="tab" :class="tabIndex === 5 && 'active'" @click="tabIndex = 5">
-            <Icon icon="mdi:about-circle-outline" width="20" color="#0C8CE9"/>
+            <Icon icon="mdi:about-circle-outline" width="20"/>
             <span>关于</span>
           </div>
         </div>
@@ -266,6 +266,26 @@ function importData(e) {
           </div>
         </div>
         <div v-if="tabIndex === 1">
+          <div class="row">
+            <label class="item-title">单词循环设置</label>
+            <div class="wrapper">
+              <el-radio-group v-model="settingStore.repeatCount">
+                <el-radio :value="1" size="default">1</el-radio>
+                <el-radio :value="2" size="default">2</el-radio>
+                <el-radio :value="3" size="default">3</el-radio>
+                <el-radio :value="5" size="default">5</el-radio>
+                <el-radio :value="100" size="default">自定义</el-radio>
+              </el-radio-group>
+              <div class="mini-row" v-if="settingStore.repeatCount === 100">
+                <label class="item-title">循环次数</label>
+                <el-input-number v-model="settingStore.repeatCustomCount"
+                                 :min="6"
+                                 :max="15"
+                                 type="number"
+                />
+              </div>
+            </div>
+          </div>
           <div class="row">
             <label class="item-title">显示上一个/下一个单词</label>
             <div class="wrapper">
@@ -472,6 +492,7 @@ function importData(e) {
       display: flex;
       flex-direction: column;
       gap: .6rem;
+      //color: #0C8CE9;
 
       .tab {
         cursor: pointer;
@@ -482,7 +503,8 @@ function importData(e) {
         gap: .6rem;
 
         &.active {
-          background: var(--color-item-bg);
+          background: var(--color-main-active);
+          color: var(--color-input-bg);
         }
       }
     }
@@ -533,8 +555,6 @@ function importData(e) {
             color: var(--color-font-1);
           }
         }
-
-
       }
 
       .main-title {
diff --git a/src/pages/pc/components/toolbar/RepeatSetting.vue b/src/pages/pc/components/toolbar/RepeatSetting.vue
deleted file mode 100644
index 99bcf596..00000000
--- a/src/pages/pc/components/toolbar/RepeatSetting.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup lang="ts">
-
-import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
-import {Icon} from "@iconify/vue";
-import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
-import Tooltip from "@/pages/pc/components/Tooltip.vue";
-import {useBaseStore} from "@/stores/base.ts";
-import {useWindowClick} from "@/hooks/event.ts";
-import {emitter, EventKey} from "@/utils/eventBus.ts";
-import {onMounted} from "vue";
-import {useSettingStore} from "@/stores/setting.ts";
-
-const store = useBaseStore()
-const settingStore = useSettingStore()
-
-let show = $ref(false)
-useWindowClick(() => show = false)
-
-let timer = 0
-
-function toggle(val) {
-  clearTimeout(timer)
-  if (val) {
-    emitter.emit(EventKey.closeOther)
-    show = val
-  } else {
-    timer = setTimeout(() => {
-      show = val
-    }, 100)
-  }
-}
-
-onMounted(() => {
-})
-</script>
-
-<template>
-  <div class="setting" @click.stop="null">
-    <IconWrapper>
-      <Icon icon="tabler:repeat"
-            @mouseenter="toggle(true)"
-            @mouseleave="toggle(false)"
-      />
-    </IconWrapper>
-    <MiniDialog
-        v-model="show"
-        @mouseenter="toggle(true)"
-        @mouseleave="toggle(false)"
-        style="width: 15rem;"
-    >
-      <div class="mini-row-title">
-        单词循环设置
-      </div>
-      <el-radio-group v-model="settingStore.repeatCount">
-        <el-radio :value="1" size="default">1</el-radio>
-        <el-radio :value="2" size="default">2</el-radio>
-        <el-radio :value="3" size="default">3</el-radio>
-        <el-radio :value="5" size="default">5</el-radio>
-        <el-radio :value="100" size="default">自定义</el-radio>
-      </el-radio-group>
-      <div class="mini-row" v-if="settingStore.repeatCount === 100">
-        <label class="item-title">自定义循环次数</label>
-        <el-input-number v-model="settingStore.repeatCustomCount"
-                         :min="6"
-                         :max="15"
-                         type="number"
-        />
-      </div>
-    </MiniDialog>
-  </div>
-</template>
-
-<style scoped lang="scss">
-
-
-.setting {
-  position: relative;
-
-  .title {
-    color: black;
-  }
-
-  .el-radio-group {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-</style>
diff --git a/src/pages/pc/index.vue b/src/pages/pc/index.vue
index f0b850f4..ff22c8b1 100644
--- a/src/pages/pc/index.vue
+++ b/src/pages/pc/index.vue
@@ -4,7 +4,6 @@ import {ShortcutKey} from "@/types.ts";
 import Logo from "@/pages/pc/components/Logo.vue";
 import {Icon} from "@iconify/vue";
 import {useSettingStore} from "@/stores/setting.ts";
-import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useRouter} from "vue-router";
 import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import Tooltip from "@/pages/pc/components/Tooltip.vue";
@@ -13,7 +12,6 @@ import BaseIcon from "@/components/BaseIcon.vue";
 
 
 const settingStore = useSettingStore()
-const runtimeStore = useRuntimeStore()
 const router = useRouter()
 const {toggleTheme} = useTheme()
 
diff --git a/src/pages/pc/word/components/Footer.vue b/src/pages/pc/word/components/Footer.vue
index 6d76c11f..bd768991 100644
--- a/src/pages/pc/word/components/Footer.vue
+++ b/src/pages/pc/word/components/Footer.vue
@@ -9,7 +9,6 @@ import {Icon} from "@iconify/vue";
 import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import TranslateSetting from "@/pages/pc/components/toolbar/TranslateSetting.vue";
-import RepeatSetting from "@/pages/pc/components/toolbar/RepeatSetting.vue";
 
 const statisticsStore = usePracticeStore()
 const settingStore = useSettingStore()
@@ -164,8 +163,6 @@ const progress = $computed(() => {
 
           <TranslateSetting/>
 
-          <RepeatSetting/>
-
           <BaseIcon
               @click="settingStore.showPanel = !settingStore.showPanel"
               :title="`单词本(${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`"
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
index 3fec6e30..c1af8a0d 100644
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -50,7 +50,7 @@ export const getDefaultSettingState = (): SettingState => ({
   showToolbar: true,
   show: false,
   showPanel: true,
-  sideExpand: true,
+  sideExpand: false,
 
   allSound: true,
   wordSound: true,