rename dir and update anim

2023-11-20 00:10:14 +08:00
parent 979713d1a9
commit 481caa907e
22 changed files with 89 additions and 55 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,10 +66,8 @@ onMounted(() => {
 </script>

 <template>
-  <Transition name="fade">
-    <Backgorund v-if="settingStore.theme === 'dark'"/>
-  </Transition>
-  <div class="main-page">
+  <Backgorund/>
+  <div class="main-page anim">
    <Practice/>
    <!--    <AddArticle/>-->
    <!--      <Side/>-->
@@ -80,7 +78,7 @@ onMounted(() => {
@import "@/assets/css/variable";

 .main-page {
-  position: absolute;
+  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
@@ -88,6 +86,5 @@ onMounted(() => {
  font-size: 14rem;
  display: flex;
  justify-content: center;
-  background-color: var(--color-background);
 }
 </style>
--- a/src/assets/css/anim.scss
+++ b/src/assets/css/anim.scss
@@ -18,7 +18,7 @@

 .fade-enter-active,
 .fade-leave-active {
-  transition: all 0.3s ease;
+  transition: all .3s ease;
 }

 .fade-enter-from,
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -39,7 +39,7 @@
 html.dark {
  //--color-main-bg: rgba(0, 5, 24, 1);
  //--color-main-bg: rgba(17,24,39, 1);
-  --color-background: transparent;
+  //--color-background: transparent;
  --color-main-bg: rgba(14, 18, 23, 1);
  //--color-main-bg: rgba(30,31,34, 1);
  --color-second-bg: rgb(43, 45, 48);
@@ -112,9 +112,9 @@ html.dark {
  }
 }

-$anim-time: 0.3s;
+$anim-time: .3s;
 .anim {
-  transition: background $anim-time, color $anim-time;
+  transition: background $anim-time, color $anim-time, border $anim-time;
 }

 html, body {
--- a/src/components/Article/EditArticle.vue
+++ b/src/components/Article/EditArticle.vue
@@ -374,7 +374,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
@import "@/assets/css/style.scss";

 .content {
-  color: black;
+  color: var(--color-font-1);
  flex: 1;
  display: flex;
  gap: var(--space);
--- a/src/components/Backgorund.vue
+++ b/src/components/Backgorund.vue
@@ -1,15 +1,19 @@
 <template>
  <div id="background" class="anim">
    <img src="@/assets/img/moon.png" alt="" id="moon" style="display:none">
-    <canvas ref="canvas"/>
+    <Transition name="fade">
+      <canvas ref="canvas" v-show="settingStore.theme === 'dark'"/>
+    </Transition>
  </div>
 </template>

 <script setup lang="ts">

 import {onMounted} from "vue"
+import {useSettingStore} from "@/stores/setting.ts";

 const canvas = $ref<HTMLCanvasElement>()
+const settingStore = useSettingStore()

 onMounted(() => {
  // console.log('canvas;', canvas)
--- a/src/components/Practice/Footer.vue
+++ b/src/components/Practice/Footer.vue
@@ -34,8 +34,8 @@ onUnmounted(() => {
 </script>

 <template>
-  <div class="footer" :class="!settingStore.showToolbar && 'hide'">
-    <div class="bottom">
+  <div class="footer " :class="!settingStore.showToolbar && 'hide'">
+    <div class="bottom anim">
      <el-progress
          :percentage="progress"
          :stroke-width="8"
--- a/src/components/Practice/Options.vue
+++ b/src/components/Practice/Options.vue
@@ -27,13 +27,6 @@ const settingStore = useSettingStore()

 <template>
  <div class="options">
-    <Tooltip v-if="showEdit" :title="`编辑(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.EditArticle]})`">
-      <IconWrapper>
-        <Icon icon="tabler:edit" class="menu"
-              @click="emit('edit')"/>
-      </IconWrapper>
-    </Tooltip>
-
    <BaseIcon
        v-if="!isSimple"
        class-name="collect"
--- a/src/components/Practice/Panel.vue
+++ b/src/components/Practice/Panel.vue
@@ -52,7 +52,7 @@ const {
 </script>
 <template>
  <Transition name="fade">
-    <div class="panel" v-show="settingStore.showPanel">
+    <div class="panel anim" v-show="settingStore.showPanel">
      <header>
        <Transition name="fade">
          <Tooltip
--- a/src/components/Practice/Practice.vue
+++ b/src/components/Practice/Practice.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">

-import Toolbar from "@/components/Toolbar/Toolbar.vue"
+import Toolbar from "@/components/toolbar/Toolbar.vue"
 import {onMounted, onUnmounted, watch} from "vue";
 import {usePracticeStore} from "@/stores/practice.ts";
 import Footer from "@/components/Practice/Footer.vue";
@@ -164,7 +164,6 @@ onUnmounted(() => {
    <PracticeWord ref="practiceRef" v-else/>
    <Footer/>
  </div>
-  <!--  <AddWordDialog></AddWordDialog>-->
  <DictModal/>
  <SettingDialog v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
  <Statistics/>
--- a/src/components/Practice/PracticeArticle/PracticeArticle.vue
+++ b/src/components/Practice/PracticeArticle/PracticeArticle.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
 import {$ref} from "vue/macros";
 import TypingArticle from "./TypingArticle.vue";
-import {Article, ArticleWord, DefaultArticle, DefaultWord, DisplayStatistics, TranslateType, Word} from "@/types.ts";
+import {
+  Article,
+  ArticleWord,
+  DefaultArticle,
+  DefaultWord,
+  DisplayStatistics,
+  ShortcutKey,
+  TranslateType,
+  Word
+} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
 import TypingWord from "@/components/Practice/PracticeWord/TypingWord.vue";
 import Panel from "../Panel.vue";
@@ -17,6 +26,7 @@ import IconWrapper from "@/components/IconWrapper.vue";
 import {Icon} from "@iconify/vue";
 import Tooltip from "@/components/Tooltip.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
+import {useSettingStore} from "@/stores/setting.ts";

 const store = useBaseStore()
 const practiceStore = usePracticeStore()
@@ -150,15 +160,15 @@ function saveArticle(val: Article) {
 }

 function edit(val: Article) {
-  tabIndex = 1
-  wordData.words = [
-    {
-      ...cloneDeep(DefaultWord),
-      name: 'test'
-    }
-  ]
-  wordData.index = 0
-  return
+  // tabIndex = 1
+  // wordData.words = [
+  //   {
+  //     ...cloneDeep(DefaultWord),
+  //     name: 'test'
+  //   }
+  // ]
+  // wordData.index = 0
+  // return
  editArticle = val
  showEditArticle = true
 }
@@ -211,6 +221,10 @@ function changePracticeArticle(val: Article) {
    store.currentDict.chapterIndex = rIndex
  }
 }
+
+defineExpose({getCurrentPractice})
+const settingStore = useSettingStore()
+
 </script>

 <template>
@@ -243,7 +257,7 @@ function changePracticeArticle(val: Article) {
      <Panel v-if="tabIndex === 0">
        <template v-slot="{active}">
          <div class="panel-page-item">
-            <header>
+            <div class="list-header">
              <div class="left">
                <Tooltip title="切换词典">
                  <IconWrapper>
@@ -253,11 +267,18 @@ function changePracticeArticle(val: Article) {
                <div class="title">
                  {{ store.dictTitle }}
                </div>
+                <Tooltip
+                    :title="`下一章(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`"
+                    v-if="store.currentDict.chapterIndex < store.currentDict.articles.length - 1">
+                  <IconWrapper>
+                    <Icon @click="emitter.emit(EventKey.next)" icon="octicon:arrow-right-24"/>
+                  </IconWrapper>
+                </Tooltip>
              </div>
              <div class="right">
                {{ store.currentDict.articles.length }}篇文章
              </div>
-            </header>
+            </div>
            <ArticleList
                :isActive="active"
                @select-item="changePracticeArticle"
--- a/src/components/Practice/PracticeArticle/TypingArticle.vue
+++ b/src/components/Practice/PracticeArticle/TypingArticle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {computed, nextTick, onMounted, onUnmounted, watch} from "vue"
 import {$computed, $ref} from "vue/macros";
-import {Article, ArticleWord, DefaultArticle, ShortcutKeyMap, Word} from "@/types";
+import {Article, ArticleWord, DefaultArticle, ShortcutKey, ShortcutKeyMap, Word} from "@/types";
 import {useBaseStore} from "@/stores/base";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useSettingStore} from "@/stores/setting.ts";
@@ -10,6 +10,10 @@ import {useOnKeyboardEventListener} from "@/hooks/event.ts";
 import {cloneDeep} from "lodash-es";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import Options from "@/components/Practice/Options.vue";
+import {Icon} from "@iconify/vue";
+import IconWrapper from "@/components/IconWrapper.vue";
+import Tooltip from "@/components/Tooltip.vue";
+import BaseIcon from "@/components/BaseIcon.vue";

 interface IProps {
  article: Article,
@@ -375,12 +379,29 @@ function toggleCollect() {
      <div class="title">{{ props.article.title }}</div>
      <div class="titleTranslate" v-if="settingStore.translate">{{ props.article.titleTranslate }}</div>
      <div class="options-wrapper">
-        <Options
-            :show-edit="true"
-            @edit="emit('edit',props.article)"
-            @collect="toggleCollect"
-            @skip="emit('next')"
-        />
+        <div class="flex gap10">
+          <BaseIcon
+              :title="`编辑(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.EditArticle]})`"
+              icon="tabler:edit"
+              @click="emit('edit',props.article)"
+          />
+          <BaseIcon
+              v-if="!false"
+              class-name="collect"
+              @click="$emit('toggleCollect')"
+              :title="`收藏(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`"
+              icon="ph:star"/>
+          <BaseIcon
+              v-else
+              class-name="fill"
+              @click="toggleCollect"
+              :title="`取消收藏(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`"
+              icon="ph:star-fill"/>
+          <BaseIcon
+              :title="`跳过(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
+              icon="icon-park-outline:go-ahead"
+              @click="emit('over')"/>
+        </div>
      </div>
    </header>
    <div class="article-content" ref="articleWrapperRef">
--- a/src/components/Practice/PracticeWord/TypingWord.vue
+++ b/src/components/Practice/PracticeWord/TypingWord.vue
@@ -288,7 +288,7 @@ onUnmounted(() => {
                  </div>
                  <Tooltip
                      :title="`下一章(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`"
-                      v-if="store.currentDict.chapterIndex < store.currentDict.chapterWords.length - 1 && !store.isArticle">
+                      v-if="store.currentDict.chapterIndex < store.currentDict.chapterWords.length - 1">
                    <IconWrapper>
                      <Icon @click="emitter.emit(EventKey.next)" icon="octicon:arrow-right-24"/>
                    </IconWrapper>
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -310,7 +310,7 @@ $header-height: 60rem;

      .content {
        width: 350rem;
-        color: black;
+        color: var(--color-font-1);
        padding: 4rem 24rem 24rem;
      }
    }
--- a/src/components/dialog/DictDiglog.vue
+++ b/src/components/dialog/DictDiglog.vue
@@ -7,7 +7,7 @@ import {chunk, cloneDeep, groupBy, reverse, shuffle} from "lodash-es";
 import {$computed, $ref} from "vue/macros";
 import BaseButton from "@/components/BaseButton.vue";
 import {Icon} from '@iconify/vue';
-import DictGroup from "@/components/Toolbar/DictGroup.vue";
+import DictGroup from "@/components/toolbar/DictGroup.vue";
 import {v4 as uuidv4} from "uuid";
 import {ActivityCalendar} from "vue-activity-calendar";
 import "vue-activity-calendar/style.css";
@@ -24,6 +24,7 @@ import {FormInstance, FormRules} from "element-plus";
 import Empty from "@/components/Empty.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import Dialog from "@/components/dialog/Dialog.vue";
+import EditBatchArticleModal from "@/components/Article/EditBatchArticleModal.vue";

 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -822,6 +823,7 @@ onMounted(() => {
    </div>
  </Dialog>
  <WordListDialog/>
+  <EditBatchArticleModal/>
 </template>

 <style scoped lang="scss">
--- a/src/components/toolbar/Add.vue
+++ b/src/components/toolbar/Add.vue
@@ -3,7 +3,6 @@
 import {Icon} from "@iconify/vue";
 import IconWrapper from "@/components/IconWrapper.vue";
 import Tooltip from "@/components/Tooltip.vue";
-import EditBatchArticleModal from "@/components/Article/EditBatchArticleModal.vue";
 import {$ref} from "vue/macros";

 let show = $ref(false)
@@ -23,7 +22,6 @@ function toggle() {
        />
      </IconWrapper>
    </Tooltip>
-    <EditBatchArticleModal/>
  </div>
 </template>

--- a/src/components/toolbar/ChapterName.vue
+++ b/src/components/toolbar/ChapterName.vue
--- a/src/components/toolbar/DictGroup.vue
+++ b/src/components/toolbar/DictGroup.vue
--- a/src/components/toolbar/FeedbackModal.vue
+++ b/src/components/toolbar/FeedbackModal.vue
--- a/src/components/toolbar/RepeatSetting.vue
+++ b/src/components/toolbar/RepeatSetting.vue
--- a/src/components/toolbar/Toolbar.vue
+++ b/src/components/toolbar/Toolbar.vue
@@ -2,21 +2,21 @@
 import Tooltip from "@/components/Tooltip.vue"
 import useTheme from "@/hooks/useTheme.ts"
 import {useBaseStore} from "@/stores/base.ts"
-import FeedbackModal from "@/components/Toolbar/FeedbackModal.vue"
+import FeedbackModal from "@/components/toolbar/FeedbackModal.vue"

 import {Icon} from '@iconify/vue';

 import IconWrapper from "@/components/IconWrapper.vue";
 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 VolumeSetting from "@/components/toolbar/VolumeSetting.vue";
+import RepeatSetting from "@/components/toolbar/RepeatSetting.vue";
+import TranslateSetting from "@/components/toolbar/TranslateSetting.vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {$ref} from "vue/macros";
 import {ShortcutKey} from "@/types.ts";
-import ChapterName from "@/components/Toolbar/ChapterName.vue";
+import ChapterName from "@/components/toolbar/ChapterName.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";

 const {toggleTheme} = useTheme()
@@ -60,7 +60,7 @@ watch(() => store.load, n => {
 </script>

 <template>
-  <header ref="headerRef">
+  <header ref="headerRef" class="anim">
    <div class="content">
      <div class="dict-name">
        <Tooltip
@@ -213,7 +213,6 @@ header {
  z-index: 2;
  padding: 10rem var(--space);
  box-sizing: border-box;
-  transition: all .3s;
  gap: 10rem;
  border: 1px solid var(--color-item-border);

--- a/src/components/toolbar/TranslateSetting.vue
+++ b/src/components/toolbar/TranslateSetting.vue
--- a/src/components/toolbar/VolumeSetting.vue
+++ b/src/components/toolbar/VolumeSetting.vue