fix:remove ElRadio

src/pages/pc/Setting.vue

@@ -14,11 +14,13 @@ import {saveAs} from "file-saver";
 import {GITHUB} from "@/config/ENV.ts";
 import dayjs from "dayjs";
 import BasePage from "@/pages/pc/components/BasePage.vue";
-import {ElInputNumber, ElRadio, ElRadioGroup} from 'element-plus'
+import {ElInputNumber} from 'element-plus'
 import Toast from '@/pages/pc/components/base/toast/Toast.ts'
 import {Option, Select} from "@/pages/pc/components/base/select";
 import Switch from "@/pages/pc/components/base/Switch.vue";
 import Slider from "@/pages/pc/components/base/Slider.vue";
+import RadioGroup from "@/pages/pc/components/base/radio/RadioGroup.vue";
+import Radio from "@/pages/pc/components/base/radio/Radio.vue";
 
 const emit = defineEmits<{
   toggleDisabledDialogEscKey: [val: boolean]
@@ -166,9 +168,9 @@ function importData(e) {
             <label class="main-title">所有音效</label>
             <div class="wrapper">
               <Switch v-model="settingStore.allSound"
-                        @change="useChangeAllSound"
-                        active-text="开"
-                        inactive-text="关"
+                      @change="useChangeAllSound"
+                      active-text="开"
+                      inactive-text="关"
               />
             </div>
           </div>
@@ -177,9 +179,9 @@ function importData(e) {
             <label class="item-title">单词/句子自动发音</label>
             <div class="wrapper">
               <Switch v-model="settingStore.wordSound"
-                        inline-prompt
-                        active-text="开"
-                        inactive-text="关"
+                      inline-prompt
+                      active-text="开"
+                      inactive-text="关"
               />
             </div>
           </div>
@@ -214,9 +216,9 @@ function importData(e) {
             <label class="item-title">按键音</label>
             <div class="wrapper">
               <Switch v-model="settingStore.keyboardSound"
-                        inline-prompt
-                        active-text="开"
-                        inactive-text="关"
+                      inline-prompt
+                      active-text="开"
+                      inactive-text="关"
               />
             </div>
           </div>
@@ -255,9 +257,9 @@ function importData(e) {
             <label class="item-title">效果音（输入错误、完成时的音效）</label>
             <div class="wrapper">
               <Switch v-model="settingStore.effectSound"
-                        inline-prompt
-                        active-text="开"
-                        inactive-text="关"
+                      inline-prompt
+                      active-text="开"
+                      inactive-text="关"
               />
             </div>
           </div>
@@ -273,13 +275,13 @@ function importData(e) {
           <div class="row">
             <label class="item-title">单词循环设置</label>
             <div class="wrapper">
-              <ElRadioGroup v-model="settingStore.repeatCount">
-                <ElRadio :value="1" size="default">1</ElRadio>
-                <ElRadio :value="2" size="default">2</ElRadio>
-                <ElRadio :value="3" size="default">3</ElRadio>
-                <ElRadio :value="5" size="default">5</ElRadio>
-                <ElRadio :value="100" size="default">自定义</ElRadio>
-              </ElRadioGroup>
+              <RadioGroup v-model="settingStore.repeatCount">
+                <Radio :value="1" size="default">1</Radio>
+                <Radio :value="2" size="default">2</Radio>
+                <Radio :value="3" size="default">3</Radio>
+                <Radio :value="5" size="default">5</Radio>
+                <Radio :value="100" size="default">自定义</Radio>
+              </RadioGroup>
               <div class="mini-row" v-if="settingStore.repeatCount === 100">
                 <label class="item-title">循环次数</label>
                 <ElInputNumber v-model="settingStore.repeatCustomCount"
@@ -294,9 +296,9 @@ function importData(e) {
             <label class="item-title">显示上一个/下一个单词</label>
             <div class="wrapper">
               <Switch v-model="settingStore.showNearWord"
-                        inline-prompt
-                        active-text="开"
-                        inactive-text="关"
+                      inline-prompt
+                      active-text="开"
+                      inactive-text="关"
               />
             </div>
           </div>
@@ -308,9 +310,9 @@ function importData(e) {
             <label class="item-title">忽略大小写</label>
             <div class="wrapper">
               <Switch v-model="settingStore.ignoreCase"
-                        inline-prompt
-                        active-text="开"
-                        inactive-text="关"
+                      inline-prompt
+                      active-text="开"
+                      inactive-text="关"
               />
             </div>
           </div>
@@ -322,9 +324,9 @@ function importData(e) {
             <label class="item-title">允许默写模式下显示提示</label>
             <div class="wrapper">
               <Switch v-model="settingStore.allowWordTip"
-                        inline-prompt
-                        active-text="开"
-                        inactive-text="关"
+                      inline-prompt
+                      active-text="开"
+                      inactive-text="关"
               />
             </div>
           </div>
@@ -437,25 +439,9 @@ function importData(e) {
             给我发Email：<a href="mailto:zyronon@163.com">zyronon@163.com</a>
           </div>
           <p>or</p>
-          <div class="github">
-        <span>在<a :href="GITHUB" target="_blank">Github</a>上给我提一个
-        <a :href="`${GITHUB}/issues`" target="_blank">Issue</a>
-        </span>
-            <div class="options">
-              <BaseButton>
-                <a :href="`${GITHUB}/issues/new?assignees=&labels=&projects=&template=%E5%8D%95%E8%AF%8D%E9%94%99%E8%AF%AF---word-error.md&title=%E5%8D%95%E8%AF%8D%E9%94%99%E8%AF%AF+%7C+Word+error`"
-                   target="_blank">词典错误？</a>
-              </BaseButton>
-              <BaseButton>
-                <a :href="`${GITHUB}/issues/new?assignees=&labels=&projects=&template=问题报告---bug-report-.md&title=问题报告+%7C+Bug+report+`"
-                   target="_blank">反馈BUG？</a>
-              </BaseButton>
-              <BaseButton>
-                <a :href="`${GITHUB}/issues/new?assignees=&labels=&projects=&template=功能请求---feature-request.md&title=功能请求+%7C+Feature+request`"
-                   target="_blank">功能请求？</a>
-              </BaseButton>
-            </div>
-          </div>
+          <span>在<a :href="GITHUB" target="_blank"> Github </a>上给作者提一个
+            <a :href="`${GITHUB}/issues`" target="_blank"> Issue </a>
+            </span>
         </div>
         <div v-if="tabIndex === 5" class="center flex-col">
           <h1>Type Words</h1>
@@ -634,18 +620,6 @@ function importData(e) {
   p {
     font-size: 2.4rem;
   }
-
-  .github {
-    display: flex;
-    align-items: center;
-    gap: var(--space);
-
-    .options {
-      display: flex;
-      flex-direction: column;
-      gap: .6rem;
-    }
-  }
 }
 
 .about {

src/pages/pc/components/base/radio/Radio.vue

@@ -0,0 +1,120 @@
+<template>
+  <label
+      :class="['radio', sizeClass, { 'is-disabled': isDisabled, 'is-checked': isChecked }]"
+      @click.prevent="onClick"
+  >
+    <input
+        type="radio"
+        class="hidden"
+        :value="value"
+        :disabled="isDisabled"
+    />
+    <span class="radio__inner"></span>
+    <span class="radio__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import {inject, computed, defineProps} from 'vue'
+
+const props = defineProps({
+  value: [String, Number, Boolean],
+  label: [String, Number, Boolean],
+  disabled: {type: Boolean, default: false}
+})
+
+// 注入父组状态
+const radioGroupValue = inject<any>('radioGroupValue', null)
+const radioGroupSize = inject('radioGroupSize', 'default')
+const radioGroupDisabled = inject<boolean>('radioGroupDisabled', false)
+const updateRadioGroupValue = inject<Function>('updateRadioGroupValue', null)
+
+const sizeClass = computed(() => `radio--${radioGroupSize}`)
+
+// 是否禁用
+const isDisabled = computed(() => props.disabled || radioGroupDisabled)
+
+// 是否选中
+const isChecked = computed(() => radioGroupValue?.value === props.value)
+
+// 选中时通知父组件
+function onClick() {
+  if (isDisabled.value) return
+  updateRadioGroupValue?.(props.value)
+}
+</script>
+
+<style scoped>
+.radio {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .radio__inner {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 6px;
+    position: relative;
+    box-sizing: border-box;
+    background: white;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 5px;
+      height: 5px;
+      background-color: #409eff;
+      border-radius: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      transition: transform 0.2s ease-in-out;
+    }
+  }
+
+  .radio__label {
+    font-size: 14px;
+    color: #606266;
+  }
+
+  &.is-checked {
+    .radio__inner {
+      background-color: #409eff;
+    }
+
+    .radio__label{
+      color: #409eff;
+    }
+
+    .radio__inner::after {
+      background-color: white;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+}
+
+.radio--small {
+  .radio__inner {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.radio--large {
+  .radio__inner {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+</style>

src/pages/pc/components/base/radio/RadioGroup.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex gap-5">
+    <slot/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {defineEmits, defineProps, provide, ref, watch} from 'vue'
+
+const props = defineProps({
+  modelValue: [String, Number, Boolean],
+  disabled: {type: Boolean, default: false},
+  size: {type: String, default: 'default'} // small / default / large
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const groupValue = ref(props.modelValue)
+
+// 提供给子组件
+provide('radioGroupSize', props.size)
+provide('radioGroupValue', groupValue)
+provide('radioGroupDisabled', props.disabled)
+provide('updateRadioGroupValue', (val: string | number | boolean) => {
+  if (props.disabled) return
+  groupValue.value = val
+  emit('update:modelValue', val)
+})
+
+// 外部 v-model 更新同步
+watch(() => props.modelValue, (val) => {
+  groupValue.value = val
+})
+
+</script>