Merge branch 'dev'

public/dicts/en/article/common/NCE_2.json

@@ -104,7 +104,7 @@
     "text": "On Wednesday evening, we went to the Town Hall. It was the last day of the year and a large crowd of people had gathered under the Town Hall clock. It would strike twelve in twenty minutes' time. Fifteen minutes passed and then, at five to twelve, the clock stopped. The big minute hand did not move. We waited and waited, but nothing happened. Suddenly someone shouted. 'It's two minutes past twelve! The clock has stopped!' I looked at my watch. It was true. The big clock refused to welcome the New Year. At that moment, everybody began to laugh and sing.\n",
     "textCustomTranslate": "星期三的晚上，我们去了市政厅。\n 那是一年的最后一天，一大群人聚集在市政厅的大钟下面。\n再过20分钟，大钟将敲响12下。\n15分钟过去了，而就在11点55分时，大钟停了。\n那根巨大的分针不动了。\n 我们等啊等啊，可情况没有变化。\n突然有人喊道：“已经12点零2分了！\n那钟已经停了！”\n我看了一下我的手表，\n果真如此。\n那座大钟不愿意迎接新年。\n此时，大家已经笑了起来，同时唱起了歌。",
     "textNetworkTranslate": "",
-    "textCustomTranslateIsFormat": false,
+    "textCustomTranslateIsFormat": true,
     "useTranslateType": "custom",
     "newWords": [],
     "id": "UydP2M"

src/App.vue

@@ -44,16 +44,31 @@ watch(settingStore.$state, (n) => {
 
 //检测几个特定词典
 watch(store.collect.originWords, (n) => {
-  store.collect.words = cloneDeep(n)
-  store.collect.chapterWords = [store.collect.words]
+  if (n.length === 0) {
+    store.collect.words = []
+    store.collect.chapterWords = []
+  } else {
+    store.collect.words = cloneDeep(n)
+    store.collect.chapterWords = [store.collect.words]
+  }
 })
 watch(store.simple.originWords, (n) => {
-  store.simple.words = cloneDeep(n)
-  store.simple.chapterWords = [store.simple.words]
+  if (n.length === 0) {
+    store.simple.words = []
+    store.simple.chapterWords = []
+  } else {
+    store.simple.words = cloneDeep(n)
+    store.simple.chapterWords = [store.simple.words]
+  }
 })
 watch(store.wrong.originWords, (n) => {
-  store.wrong.words = cloneDeep(n)
-  store.wrong.chapterWords = [store.wrong.words]
+  if (n.length === 0) {
+    store.wrong.words = []
+    store.wrong.chapterWords = []
+  } else {
+    store.wrong.words = cloneDeep(n)
+    store.wrong.chapterWords = [store.wrong.words]
+  }
 })
 
 async function init() {

src/assets/css/style.scss

@@ -19,26 +19,32 @@
   --color-header-bg: white;
   --color-tooltip-bg: white;
   --color-tooltip-shadow: #bbbbbb;
-  --color-font-1: black;
+  --color-font-1: rgb(91, 91, 91);
   --color-font-2: rgb(46, 46, 46);
   --color-font-3: rgb(75, 85, 99);
   --color-font-active-1: white;
   --color-font-active-2: whitesmoke;
   --color-main-active: rgb(12, 140, 233);
   --color-scrollbar: rgb(147, 173, 227);
   --color-gray: gray;
+  --color-sub-gray: #c0bfbf;
 
-  --practice-wrapper-padding-right: 1px;
+  --practice-wrapper-translateX: 1px;
+  --article-width: 50vw;
   --toolbar-width: 700rem;
   --toolbar-height: 54rem;
   --panel-width: 400rem;
   --space: 20rem;
-  --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 24rem);
+  --panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--toolbar-width) / 2 + 24rem);
+  --article-panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--article-width) / 2 + 24rem);
   --anim-time: 0.5s;
 
   --color-input-bg: white;
   --color-input-icon: #d3d4d7;
 
+  --color-textarea-bg: white;
+
+
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   --word-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
@@ -65,22 +71,27 @@ html.dark {
   --color-font-3: rgba(255, 255, 255, 0.3);
 
   --color-gray: #bebebe;
+  --color-sub-gray: #383737;
 
-  --color-scrollbar: rgb(59, 87, 138);
-  --color-scrollbar: rgb(77, 78, 81);
+  --color-main-active: rgb(147, 173, 227);
   --color-scrollbar: rgb(92, 93, 94);
 
   --color-input-bg: rgba(14, 18, 23, 1);
   --color-input-icon: #383737;
+
+  --color-textarea-bg: rgb(43, 45, 48);
+
 }
 
 @media (max-width: 1680px) {
   :root {
-    --practice-wrapper-padding-right: 25vw;
+    --practice-wrapper-translateX: -12vw;
     --toolbar-width: 40vw;
+    --article-width: 60vw;
     --panel-width: 380rem;
     --toolbar-height: 48rem;
-    --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw);
+    --panel-margin-left: calc(50vw + var(--practice-wrapper-translateX) + var(--toolbar-width) / 2 + 5vw);
+    --article-panel-margin-left: calc(50% + var(--practice-wrapper-translateX) + var(--article-width) / 2 + 48rem);
   }
   .footer {
     .bottom {
@@ -100,11 +111,13 @@ html.dark {
 @media (max-width: 1366px) {
   :root {
     --space: 10rem;
-    --practice-wrapper-padding-right: 30vw;
+    --practice-wrapper-translateX: -22vw;
+    --article-width: 53vw;
     --panel-width: 30vw;
     --toolbar-width: 50vw;
     --toolbar-height: 40rem;
-    --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw);
+    --panel-margin-left: calc(50vw + var(--practice-wrapper-translateX) + var(--toolbar-width) / 2 + 14vw);
+    --article-panel-margin-left: calc(50% + var(--practice-wrapper-translateX) + var(--article-width) / 2 + 12vw);
   }
 
   .footer {
@@ -174,7 +187,7 @@ a {
   min-height: 20rem;
   width: 100%;
   box-sizing: border-box;
-  background: var(--color-item-bg);
+  background: var(--color-textarea-bg);
 
   &:focus {
     border: 1px solid var(--color-main-active);
@@ -429,5 +442,4 @@ footer {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 10rem;
 }

src/components/DictListPanel.vue

@@ -43,7 +43,7 @@ const groupByTranslateLanguage = $computed(() => {
     data = groupBy(articleList, 'translateLanguage')
   } else if (currentLanguage === 'my') {
     data = {
-      common: store.myDictList.concat([{name: '',} as any])
+      common: store.myDictList.concat([{id: '',} as any])
     }
   } else {
     data = groupBy(groupByLanguage[currentLanguage], 'translateLanguage')
@@ -87,6 +87,7 @@ const groupedByCategoryAndTag = $computed(() => {
           <DictList
               @add="emit('add')"
               @selectDict="e => emit('selectDict',e)"
+              :select-id="store.currentDict.id"
               :list="groupByTranslateLanguage['common']"/>
         </template>
         <template v-else>
@@ -98,7 +99,7 @@ const groupedByCategoryAndTag = $computed(() => {
           </div>
           <DictGroup
               v-for="item in groupedByCategoryAndTag"
-              :select-dict-name="runtimeStore.editDict.resourceId"
+              :select-id="store.currentDict.id"
               @selectDict="e => emit('selectDict',e)"
               :groupByTag="item[1]"
               :category="item[0]"

src/components/IconWrapper.vue

@@ -5,7 +5,6 @@
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/variable.scss";
 
 $w: 22rem;
 .icon-wrapper {
@@ -18,10 +17,10 @@ $w: 22rem;
   border-radius: 3rem;
   background: transparent;
   transition: all .3s;
-  color: $main;
+  color: var(--color-main-active);
 
   &:hover {
-    background: $main;
+    background: var(--color-main-active);
     color: white;
   }
 

src/components/Input.vue

@@ -2,7 +2,8 @@
 import {$ref} from "vue/macros";
 import {Icon} from "@iconify/vue";
 import Close from "@/components/icon/Close.vue";
-import {useWindowClick} from "@/hooks/event.ts";
+import {useDisableEventListener, useWindowClick} from "@/hooks/event.ts";
+import {watch} from "vue";
 
 defineProps<{
   modelValue: string
@@ -17,6 +18,8 @@ useWindowClick((e: PointerEvent) => {
   focus = inputEl.contains(e.target as any);
 })
 
+useDisableEventListener(() => focus)
+
 </script>
 
 <template>
@@ -30,7 +33,9 @@ useWindowClick((e: PointerEvent) => {
            :value="modelValue"
            @input="e=>$emit('update:modelValue',e.target.value)"
     >
-    <Close @click="$emit('update:modelValue','')"/>
+    <transition name="fade">
+      <Close v-if="modelValue" @click="$emit('update:modelValue','')"/>
+    </transition>
   </div>
 </template>
 

src/components/Ring.vue

@@ -70,7 +70,7 @@ $w2: calc($w / 2);
     .circle-detail {
       transform-origin: $w2 $w2;
       transform: rotate(-90deg);
-      stroke: $main;
+      stroke: var(--color-main-active);
     }
   }
 

src/components/article/EditArticle.vue

@@ -448,7 +448,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
     border-radius: 8rem;
 
     .section {
-      background: var(--color-item-bg);
+      background: var(--color-textarea-bg);
       margin-bottom: 20rem;
       padding: var(--space);
       border-radius: 8rem;

src/components/article/EditBatchArticleModal.vue

@@ -78,7 +78,7 @@ function checkDataChange() {
               let r = await editArticleRef.save('save')
               if (r) resolve(true)
             },
-            () => void 0,
+            () => resolve(true),
         )
       }
     } else {
@@ -90,7 +90,7 @@ function checkDataChange() {
               let r = await editArticleRef.save('save')
               if (r) resolve(true)
             },
-            () => void 0,
+            () => resolve(true),
         )
       }
     }

src/components/article/EditSingleArticleModal.vue

@@ -4,6 +4,7 @@ import {Article, DefaultArticle} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
 import Dialog from "@/components/dialog/Dialog.vue";
 import EditArticle from "@/components/article/EditArticle.vue";
+import {useDisableEventListener} from "@/hooks/event.ts";
 
 interface IProps {
   article?: Article
@@ -16,14 +17,18 @@ const props = withDefaults(defineProps<IProps>(), {
 })
 const emit = defineEmits<{
   save: [val: Article]
+  'update:modelValue': [val: boolean]
 }>()
 
+useDisableEventListener(() => props.modelValue)
+
 </script>
 
 <template>
   <Dialog
       :header="false"
       :model-value="props.modelValue"
+      @close="emit('update:modelValue',false)"
       :full-screen="true"
   >
     <div class="wrapper">

src/components/dialog/ArticleContentDialog.vue

@@ -65,7 +65,7 @@ onUnmounted(() => {
   display: flex;
   gap: var(--space);
   padding: var(--space);
-
+  color: var(--color-font-1);
 
   .article-content {
     flex: 1;