feat: dev add article

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Add: typeof import('./src/components/Toolbar/Add.vue')['default']
     AddArticle: typeof import('./src/components/Practice/AddArticle.vue')['default']
     Backgorund: typeof import('./src/components/Backgorund.vue')['default']
     BaseButton: typeof import('./src/components/BaseButton.vue')['default']
@@ -16,11 +17,15 @@ declare module 'vue' {
     DictModal: typeof import('./src/components/Toolbar/DictModal.vue')['default']
     EditAbleText: typeof import('./src/components/EditAbleText.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']
     Fireworks: typeof import('./src/components/Fireworks.vue')['default']
     Footer: typeof import('./src/components/Practice/Footer.vue')['default']
@@ -37,6 +42,7 @@ declare module 'vue' {
     Toolbar: typeof import('./src/components/Toolbar/Toolbar.vue')['default']
     Tooltip: typeof import('./src/components/Tooltip.vue')['default']
     TrabslateSetting: typeof import('./src/components/Toolbar/TrabslateSetting.vue')['default']
+    TranslateSetting: typeof import('./src/components/Toolbar/TranslateSetting.vue')['default']
     TypeArticle: typeof import('./src/components/Practice/TypeArticle.vue')['default']
     TypeWord: typeof import('./src/components/Practice/TypeWord.vue')['default']
     VolumeSetting: typeof import('./src/components/Toolbar/VolumeSetting.vue')['default']

src/App.vue

@@ -34,8 +34,8 @@ onMounted(() => {
 <template>
   <!--    <Backgorund/>-->
   <div class="main-page">
-    <!--    <Practice/>-->
-    <AddArticle/>
+    <Practice/>
+    <!--    <AddArticle/>-->
     <!--      <Side/>-->
     <Statistics></Statistics>
   </div>

src/components/Practice/AddArticle.vue

@@ -14,6 +14,8 @@ import {CnKeyboardMap, getSplitTranslateText, splitArticle, splitCNArticle} from
 import {Action,} from "element-plus";
 import useSleep from "@/hooks/useSleep.ts";
 import EditAbleText from "@/components/EditAbleText.vue";
+import {Icon} from "@iconify/vue";
+import Backgorund from "@/components/Backgorund.vue";
 
 let article1 = `How does the older investor differ in his approach to investment from the younger investor?
 There is no shortage of tipsters around offering 'get-rich-quick' opportunities. But if you are a serious private investor, leave the Las Vegas mentality to those with money to fritter. The serious investor needs a proper 'portfolio' -- a well-planned selection of investments, with a definite structure and a clear aim. But exactly how does a newcomer to the stock market go about achieving that?
@@ -1151,6 +1153,7 @@ const TranslateEngineOptions = [
   {value: 'baidu', label: '百度'},
   {value: 'youdao', label: '有道'},
 ]
+defineEmits(['close'])
 
 onMounted(() => {
   updateSentenceTranslate()
@@ -1262,126 +1265,144 @@ watch(() => article.translateType, () => {
 </script>
 
 <template>
-  <div class="add-article">
-    <div class="content">
-      <div class="row">
-        <div class="title">原文</div>
-        <div class="item">
-          <div class="label">标题：</div>
-          <el-input
-              v-model="article.title"
-              :rows="2"
-              type="textarea"
-              placeholder="请填写原文标题"
-              input-style="color:black;font-size:18rem;"
-          />
-        </div>
-        <div class="item">
-          <div class="label">正文：</div>
-          <el-input
-              v-model="article.article"
-              @input="updateSentenceTranslate"
-              :disabled="![100,0].includes(progress)"
-              :rows="23"
-              type="textarea"
-              placeholder="请填写原文正文"
-              input-style="color:black;font-size:18rem;"
-          />
-        </div>
-      </div>
-      <div class="row">
-        <div class="title">译文</div>
-        <div class="item">
-          <div class="label">翻译类型：</div>
-          <el-radio-group v-model="article.translateType">
-            <el-radio-button :label="1">本地翻译</el-radio-button>
-            <el-radio-button :label="0">网络翻译</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div class="translate" v-if="!article.translateType">
-          <BaseButton @click="startNetworkTranslate" :disabled="!article.article.trim()">开始翻译</BaseButton>
-          <el-select v-model="networkTranslateEngine"
-                     style="width: 80rem;"
-          >
-            <el-option
-                v-for="item in TranslateEngineOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+  <Teleport to="body">
+    <div class="add-article">
+      <div class="content">
+        <div class="row">
+          <div class="title">原文</div>
+          <div class="item">
+            <div class="label">标题：</div>
+            <el-input
+                v-model="article.title"
+                :rows="2"
+                type="textarea"
+                placeholder="请填写原文标题"
+                input-style="color:black;font-size:18rem;"
             />
-          </el-select>
-          <el-progress :percentage="progress"
-                       :duration="30"
-                       :striped="progress !== 100"
-                       :striped-flow="progress !== 100"
-                       :stroke-width="8"
-                       :show-text="true"/>
+          </div>
+          <div class="item">
+            <div class="label">正文：</div>
+            <el-input
+                v-model="article.article"
+                @input="updateSentenceTranslate"
+                :disabled="![100,0].includes(progress)"
+                :rows="23"
+                type="textarea"
+                placeholder="请填写原文正文"
+                input-style="color:black;font-size:18rem;"
+            />
+          </div>
         </div>
-        <div class="item">
-          <div class="label">标题：</div>
-          <el-input
-              v-model="article.titleTranslate"
-              :rows="2"
-              type="textarea"
-              placeholder="请填写翻译标题"
-              input-style="color:black;font-size:16rem;"
-          />
-        </div>
-        <div class="item">
-          <div class="label">正文：</div>
-          <el-input
-              v-if="article.translateType"
-              v-model="article.customTranslate"
-              :disabled="![100,0].includes(progress)"
-              @blur="onBlur"
-              @focus="onFocus"
-              :rows="20"
-              type="textarea"
-              placeholder="请填写翻译正文"
-              input-style="color:black;font-size:16rem;"
-          />
-          <el-input
-              v-else
-              v-model="article.networkTranslate"
-              @blur="onBlur"
-              @focus="onFocus"
-              :rows="20"
-              type="textarea"
-              placeholder="等待网络翻译中..."
-              input-style="color:black;font-size:16rem;"
-          />
-        </div>
-      </div>
-      <div class="row">
-        <div class="title">译文对照</div>
-        <div class="article-translate">
-          <div class="section" v-for="(item,indexI) in article.sections">
-            <div class="sentence" v-for="(sentence,indexJ) in item">
-              <EditAbleText
-                  :value="sentence.text"
-                  @save="(e:string) => saveSentenceText(sentence,e)"
-              />
-              <EditAbleText
-                  :value="sentence.translate"
-                  @save="(e:string) => saveSentenceTranslate(sentence,e)"
+        <div class="row">
+          <div class="title">译文</div>
+          <div class="item">
+            <div class="label">翻译类型：</div>
+            <el-radio-group v-model="article.translateType">
+              <el-radio-button :label="1">本地翻译</el-radio-button>
+              <el-radio-button :label="0">网络翻译</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="translate" v-if="!article.translateType">
+            <BaseButton @click="startNetworkTranslate" :disabled="!article.article.trim()">开始翻译</BaseButton>
+            <el-select v-model="networkTranslateEngine"
+                       style="width: 80rem;"
+            >
+              <el-option
+                  v-for="item in TranslateEngineOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
               />
+            </el-select>
+            <el-progress :percentage="progress"
+                         :duration="30"
+                         :striped="progress !== 100"
+                         :striped-flow="progress !== 100"
+                         :stroke-width="8"
+                         :show-text="true"/>
+          </div>
+          <div class="item">
+            <div class="label">标题：</div>
+            <el-input
+                v-model="article.titleTranslate"
+                :rows="2"
+                type="textarea"
+                placeholder="请填写翻译标题"
+                input-style="color:black;font-size:16rem;"
+            />
+          </div>
+          <div class="item">
+            <div class="label">正文：</div>
+            <el-input
+                v-if="article.translateType"
+                v-model="article.customTranslate"
+                :disabled="![100,0].includes(progress)"
+                @blur="onBlur"
+                @focus="onFocus"
+                :rows="20"
+                type="textarea"
+                placeholder="请填写翻译正文"
+                input-style="color:black;font-size:16rem;"
+            />
+            <el-input
+                v-else
+                v-model="article.networkTranslate"
+                @blur="onBlur"
+                @focus="onFocus"
+                :rows="20"
+                type="textarea"
+                placeholder="等待网络翻译中..."
+                input-style="color:black;font-size:16rem;"
+            />
+          </div>
+        </div>
+        <div class="row">
+          <div class="title">译文对照</div>
+          <div class="article-translate">
+            <div class="section" v-for="(item,indexI) in article.sections">
+              <div class="sentence" v-for="(sentence,indexJ) in item">
+                <EditAbleText
+                    :value="sentence.text"
+                    @save="(e:string) => saveSentenceText(sentence,e)"
+                />
+                <EditAbleText
+                    :value="sentence.translate"
+                    @save="(e:string) => saveSentenceTranslate(sentence,e)"
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <Icon @click="$emit('close')"
+            class="close hvr-grow pointer"
+            width="20" color="#929596"
+            icon="ion:close-outline"/>
     </div>
-  </div>
+  </Teleport>
+
 </template>
 
 <style scoped lang="scss">
 @import "@/assets/css/style.scss";
 
 .add-article {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 9;
   width: 100vw;
   height: 100vh;
   padding: $space;
   box-sizing: border-box;
   color: black;
+  background: var(--color-main-bg);
+
+  .close {
+    position: absolute;
+    right: 20rem;
+    top: 20rem;
+  }
 
   .content {
     width: 100%;

src/components/Toolbar/Add.vue

@@ -0,0 +1,47 @@
+<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 AddArticle from "@/components/Practice/AddArticle.vue";
+
+const store = useBaseStore()
+let show = $ref(false)
+
+useWindowClick(() => show = false)
+
+function toggle() {
+  if (!show) emitter.emit(EventKey.closeOther)
+  show = !show
+}
+</script>
+
+<template>
+  <div class="setting" @click.stop="null">
+    <Tooltip title="添加">
+      <IconWrapper>
+        <Icon icon="ic:outline-cloud-upload"
+              @click="toggle"
+        />
+      </IconWrapper>
+    </Tooltip>
+    <AddArticle v-if="show" @close="show = false"/>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/assets/css/style";
+
+.wrapper {
+  position: relative;
+}
+
+.setting {
+  position: relative;
+
+}
+</style>

src/components/Toolbar/Toolbar.vue

@@ -13,6 +13,8 @@ import {emitter, EventKey} from "@/utils/eventBus.ts"
 import {watch} from "vue"
 import VolumeSetting from "@/components/Toolbar/VolumeSetting.vue";
 import RepeatSetting from "@/components/Toolbar/RepeatSetting.vue";
+import TranslateSetting from "@/components/Toolbar/TranslateSetting.vue";
+import Add from "@/components/Toolbar/Add.vue";
 
 const {toggle} = useTheme()
 const store = useBaseStore()
@@ -63,13 +65,10 @@ watch(() => store.setting.showToolbar, n => {
           </IconWrapper>
         </Tooltip>
 
-        <TrabslateSetting/>
+        <TranslateSetting/>
+
+        <Add/>
 
-        <Tooltip title="反馈">
-          <IconWrapper>
-            <Icon icon="ic:outline-cloud-upload"/>
-          </IconWrapper>
-        </Tooltip>
         <Tooltip title="反馈">
           <IconWrapper>
             <Icon icon="octicon:bug-24" @click="showFeedbackModal = true"/>
@@ -89,15 +88,6 @@ watch(() => store.setting.showToolbar, n => {
         </Tooltip>
       </div>
     </div>
-    <div class="translate-progress">
-      <div>翻译进度:</div>
-      <el-progress :percentage="80"
-                   striped
-                   :duration="30"
-                   striped-flow
-                   :stroke-width="8"
-                   :show-text="true"/>
-    </div>
     <Tooltip :title="store.setting.showToolbar?'收起':'展开'">
       <Icon icon="icon-park-outline:down"
             @click="store.setting.showToolbar = !store.setting.showToolbar"
@@ -152,16 +142,6 @@ header {
     }
   }
 
-  .translate-progress {
-    display: flex;
-    gap: $space;
-
-    .el-progress {
-      flex: 1;
-    }
-  }
-
-
   .arrow {
     position: absolute;
     bottom: 0;