feat(toolbar): add translate setiing mini modal

components.d.ts

@@ -13,11 +13,13 @@ declare module 'vue' {
     ChapterList: typeof import('./src/components/ChapterList.vue')['default']
     DictList: typeof import('./src/components/DictList.vue')['default']
     DictModal: typeof import('./src/components/Toolbar/DictModal.vue')['default']
-    ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     FeedbackModal: typeof import('./src/components/Toolbar/FeedbackModal.vue')['default']

src/components/MiniModal.vue

@@ -18,9 +18,10 @@ withDefaults(defineProps<IProps>(), {
 </template>
 
 <style lang="scss">
-@import "@/assets/css/style";
+@import "@/assets/css/style.scss";
 
 .mini-row {
+  min-height: 35rem;
   display: flex;
   justify-content: space-between;
   align-items: center;

src/components/Practice/TypeArticle.vue

@@ -494,13 +494,13 @@ function otherWord(word: ArticleWord, i: number, i2: number, i3: number) {
         font-size: 36rem;
         font-weight: 500;
         word-spacing: 3rem;
-        opacity: 0;
+        //opacity: 0;
       }
     }
 
     .article-content {
       position: relative;
-      opacity: 0;
+      //opacity: 0;
     }
 
     article {

src/components/Toolbar/Toolbar.vue

@@ -63,11 +63,7 @@ watch(() => store.setting.showToolbar, n => {
           </IconWrapper>
         </Tooltip>
 
-        <Tooltip title="开关释义显示">
-          <IconWrapper>
-            <Icon icon="heroicons-outline:translate"/>
-          </IconWrapper>
-        </Tooltip>
+        <TrabslateSetting/>
 
         <Tooltip title="反馈">
           <IconWrapper>
@@ -96,8 +92,11 @@ watch(() => store.setting.showToolbar, n => {
     <div class="translate-progress">
       <div>翻译进度:</div>
       <el-progress :percentage="80"
+                   striped
+                   :duration="30"
+                   striped-flow
                    :stroke-width="8"
-                   :show-text="false"/>
+                   :show-text="true"/>
     </div>
     <Tooltip :title="store.setting.showToolbar?'收起':'展开'">
       <Icon icon="icon-park-outline:down"

src/components/Toolbar/TrabslateSetting.vue

@@ -1,11 +1,103 @@
 <script setup lang="ts">
 
+import MiniModal from "@/components/MiniModal.vue";
+import {Icon} from "@iconify/vue";
+import IconWrapper from "@/components/IconWrapper.vue";
+import Tooltip from "@/components/Tooltip.vue";
+import {useBaseStore} from "@/stores/base.ts";
+import {useWindowClick} from "@/hooks/event.ts";
+import {emitter, EventKey} from "@/utils/eventBus.ts";
+import BaseButton from "@/components/BaseButton.vue";
+
+const store = useBaseStore()
+let show = $ref(false)
+
+useWindowClick(() => show = false)
+
+function toggle() {
+  if (!show) emitter.emit(EventKey.closeOther)
+  show = !show
+}
+
+let translateType = $ref(0)
+let networkTranslateEngine = $ref('baidu')
+const TranslateEngine = [
+  {value: 'baidu', label: '百度'},
+  {value: 'youdao', label: '有道'},
+]
 </script>
 
 <template>
-
+  <div class="setting" @click.stop="null">
+    <Tooltip title="开关释义显示">
+      <IconWrapper>
+        <Icon v-if="store.setting.translate" icon="mdi:translate"
+              @click="toggle"
+        />
+        <Icon v-else icon="mdi:translate-off"
+              @click="toggle"
+        />
+      </IconWrapper>
+    </Tooltip>
+    <MiniModal v-model="show"
+               style="width: 230rem;"
+    >
+      <div class="mini-row">
+        <label class="item-title">显示翻译</label>
+        <div class="wrapper">
+          <el-switch v-model="store.setting.translate"
+                     inline-prompt
+                     active-text="开"
+                     inactive-text="关"
+          />
+        </div>
+      </div>
+      <div class="mini-row">
+        <label class="item-title">翻译类型</label>
+        <el-radio-group v-model="translateType" size="small">
+          <el-radio-button :label="0">本地翻译</el-radio-button>
+          <el-radio-button :label="1">网络翻译</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="mini-row">
+        <label class="item-title">本地翻译</label>
+        <div class="wrapper">
+          <Icon icon="mingcute:edit-line"
+                @click="toggle"
+          />
+        </div>
+      </div>
+      <div class="mini-row">
+        <label class="item-title">网络翻译</label>
+        <div class="wrapper">
+          <el-select v-model="networkTranslateEngine" class="m-2" placeholder="Select" size="small">
+            <el-option
+                v-for="item in TranslateEngine"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </div>
+      </div>
+      <div class="footer">
+        <BaseButton>取消</BaseButton>
+        <BaseButton>确定</BaseButton>
+      </div>
+    </MiniModal>
+  </div>
 </template>
 
 <style scoped lang="scss">
+@import "@/assets/css/style.scss";
 
+.setting {
+  position: relative;
+}
+
+.footer {
+  margin-top: 10rem;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>

src/stores/base.ts

@@ -86,7 +86,7 @@ export const useBaseStore = defineStore('base', {
         repeatCount: 1,
         repeatCustomCount: null,
         dictation: true,
-        showTranslate: true,
+        translate: true,
 
         value1: false,
         value2: 50,

src/types.ts

@@ -189,6 +189,7 @@ export interface State {
     repeatCount: number,
     repeatCustomCount?: number,
     dictation: boolean,
+    translate: boolean,
 
     value1: boolean,
     value2: number,