update ui

components.d.ts

@@ -7,14 +7,15 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    Add: typeof import('./src/components/toolbar/Add.vue')['default']
+    Add: typeof import('./src/components/Toolbar/Add.vue')['default']
     ArticleContentDialog: typeof import('./src/components/dialog/ArticleContentDialog.vue')['default']
     ArticleList: typeof import('./src/components/list/ArticleList.vue')['default']
     Backgorund: typeof import('./src/components/Backgorund.vue')['default']
     BaseButton: typeof import('./src/components/BaseButton.vue')['default']
     BaseIcon: typeof import('./src/components/BaseIcon.vue')['default']
     BaseList: typeof import('./src/components/list/BaseList.vue')['default']
-    ChapterName: typeof import('./src/components/toolbar/ChapterName.vue')['default']
+    ChapterDetail: typeof import('./src/components/ChapterDetail.vue')['default']
+    ChapterName: typeof import('./src/components/Toolbar/ChapterName.vue')['default']
     Close: typeof import('./src/components/icon/Close.vue')['default']
     Dialog: typeof import('./src/components/dialog/Dialog.vue')['default']
     DictDiglog: typeof import('./src/components/dialog/DictDiglog.vue')['default']
@@ -23,9 +24,9 @@ declare module 'vue' {
     DictList: typeof import('./src/components/list/DictList.vue')['default']
     DictListPanel: typeof import('./src/components/DictListPanel.vue')['default']
     EditAbleText: typeof import('./src/components/EditAbleText.vue')['default']
-    EditArticle: typeof import('./src/components/article/EditArticle.vue')['default']
-    EditBatchArticleModal: typeof import('./src/components/article/EditBatchArticleModal.vue')['default']
-    EditSingleArticleModal: typeof import('./src/components/article/EditSingleArticleModal.vue')['default']
+    EditArticle: typeof import('./src/components/Article/EditArticle.vue')['default']
+    EditBatchArticleModal: typeof import('./src/components/Article/EditBatchArticleModal.vue')['default']
+    EditSingleArticleModal: typeof import('./src/components/Article/EditSingleArticleModal.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElForm: typeof import('element-plus/es')['ElForm']
@@ -41,25 +42,28 @@ declare module 'vue' {
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     Empty: typeof import('./src/components/Empty.vue')['default']
-    FeedbackModal: typeof import('./src/components/toolbar/FeedbackModal.vue')['default']
+    FeedbackModal: typeof import('./src/components/Toolbar/FeedbackModal.vue')['default']
     Fireworks: typeof import('./src/components/Fireworks.vue')['default']
     IconWrapper: typeof import('./src/components/IconWrapper.vue')['default']
     Input: typeof import('./src/components/Input.vue')['default']
     List: typeof import('./src/components/list/List.vue')['default']
+    ListItem: typeof import('./src/components/list/ListItem.vue')['default']
     MiniDialog: typeof import('./src/components/dialog/MiniDialog.vue')['default']
     PopConfirm: typeof import('./src/components/PopConfirm.vue')['default']
-    RepeatSetting: typeof import('./src/components/toolbar/RepeatSetting.vue')['default']
+    RepeatSetting: typeof import('./src/components/Toolbar/RepeatSetting.vue')['default']
     Ring: typeof import('./src/components/Ring.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SettingDialog: typeof import('./src/components/dialog/SettingDialog.vue')['default']
     Slide: typeof import('./src/components/Slide.vue')['default']
-    Toolbar: typeof import('./src/components/toolbar/index.vue')['default']
+    Toolbar: typeof import('./src/components/Toolbar/index.vue')['default']
     Tooltip: typeof import('./src/components/Tooltip.vue')['default']
-    TranslateSetting: typeof import('./src/components/toolbar/TranslateSetting.vue')['default']
+    TranslateSetting: typeof import('./src/components/Toolbar/TranslateSetting.vue')['default']
     VolumeIcon: typeof import('./src/components/icon/VolumeIcon.vue')['default']
-    VolumeSetting: typeof import('./src/components/toolbar/VolumeSetting.vue')['default']
+    VolumeSetting: typeof import('./src/components/Toolbar/VolumeSetting.vue')['default']
+    WordItem: typeof import('./src/components/list/WordItem.vue')['default']
     WordList: typeof import('./src/components/list/WordList.vue')['default']
+    WordList2: typeof import('./src/components/list/WordList2.vue')['default']
     WordListDialog: typeof import('./src/components/dialog/WordListDialog.vue')['default']
   }
   export interface ComponentCustomProperties {

src/components/toolbar/index.vue

@@ -114,21 +114,9 @@ watch(() => store.load, n => {
           </Tooltip>
 
 
-          <Tooltip title="反馈">
-            <IconWrapper>
-              <Icon icon="octicon:bug-24" @click="showFeedbackModal = true"/>
-            </IconWrapper>
-          </Tooltip>
 
-          <Tooltip
-              :title="`切换主题(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
-          >
-            <IconWrapper>
-              <Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
-                    @click="toggleTheme"/>
-              <Icon icon="tabler:sun" v-else @click="toggleTheme"/>
-            </IconWrapper>
-          </Tooltip>
+
+
         </div>
 
         <div class="with-bg anim">
@@ -161,7 +149,6 @@ watch(() => store.load, n => {
             color="#999"/>
     </Tooltip>
   </header>
-  <FeedbackModal v-if="showFeedbackModal" @close="showFeedbackModal = false"/>
 </template>
 
 <style lang="scss">

src/pages/practice/index.vue

@@ -18,6 +18,11 @@ import useTheme from "@/hooks/theme.ts";
 import SettingDialog from "@/components/dialog/SettingDialog.vue";
 import DictModal from "@/components/dialog/DictDiglog.vue";
 import {useStartKeyboardEventListener} from "@/hooks/event.ts";
+import BaseIcon from "@/components/BaseIcon.vue";
+import IconWrapper from "@/components/IconWrapper.vue";
+import {Icon} from "@iconify/vue";
+import Tooltip from "@/components/Tooltip.vue";
+import FeedbackModal from "@/components/toolbar/FeedbackModal.vue";
 
 const practiceStore = usePracticeStore()
 const store = useBaseStore()
@@ -25,6 +30,7 @@ const settingStore = useSettingStore()
 const runtimeStore = useRuntimeStore()
 const practiceRef: any = $ref()
 const {toggleTheme} = useTheme()
+let showFeedbackModal = $ref(false)
 
 watch(practiceStore, () => {
   if (practiceStore.inputWordNumber < 1) {
@@ -147,8 +153,32 @@ useStartKeyboardEventListener()
     <PracticeWord ref="practiceRef" v-else/>
     <Footer/>
   </div>
+  <div class="right-bar">
+    <BaseIcon
+        @click="showFeedbackModal = true"
+        title="反馈"
+        icon="ph:bug-beetle"/>
+
+    <Tooltip
+        :title="`切换主题(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
+    >
+      <IconWrapper>
+        <Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
+              @click="toggleTheme"/>
+        <Icon icon="tabler:sun" v-else @click="toggleTheme"/>
+      </IconWrapper>
+    </Tooltip>
+
+    <a href="https://github.com/zyronon/typing-word" target="_blank">
+      <BaseIcon
+          title="Github地址"
+          icon="mdi:github"/>
+    </a>
+  </div>
   <DictModal/>
   <Statistics/>
+  <FeedbackModal v-if="showFeedbackModal" @close="showFeedbackModal = false"/>
+
 </template>
 
 <style scoped lang="scss">
@@ -164,4 +194,13 @@ useStartKeyboardEventListener()
   transform: translateX(var(--practice-wrapper-translateX));
 }
 
+.right-bar {
+  position: fixed;
+  right: 30rem;
+  top: var(--space);
+  z-index: 1;
+  display: flex;
+  gap: 10rem;
+}
+
 </style>