update ui

src/pages/dict/index.vue

@@ -4,6 +4,8 @@ import DictManage from "@/pages/dict/DictManage.vue";
 import {onMounted} from "vue";
 import {useRoute} from "vue-router";
 import {useRuntimeStore} from "@/stores/runtime.ts";
+import RightTopBar from "@/components/RightTopBar.vue";
+import Logo from "@/components/Logo.vue";
 
 const router = useRoute()
 const runtimeStore = useRuntimeStore()
@@ -13,8 +15,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div id="page">
-    <header>
+  <div id="page" class="anim">
+    <header class="anim">
+      <Logo/>
       <div class="nav-list">
         <nav>
           <router-link to="/practice">练习</router-link>
@@ -22,8 +25,9 @@ onMounted(() => {
         <nav class="active">
           <router-link to="/dict">词典</router-link>
         </nav>
-        <nav @click="runtimeStore.showSettingModal = true"><a href="#">设置</a></nav>
+        <nav @click.stop="runtimeStore.showSettingModal = true"><a href="javascript;;">设置</a></nav>
       </div>
+      <RightTopBar/>
     </header>
     <div class="content">
       <DictManage/>
@@ -41,12 +45,13 @@ onMounted(() => {
   font-size: 14rem;
 
   header {
+    background: var(--color-second-bg);
     height: 60rem;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    border-bottom: 1px solid #d2d2d2;
+    border-bottom: 1px solid var(--color-item-border);
 
     .nav-list {
       display: flex;

src/pages/practice/index.vue

@@ -14,23 +14,18 @@ import {MessageBox} from "@/utils/MessageBox.tsx";
 import PracticeArticle from "@/pages/practice/practice-article/index.vue";
 import PracticeWord from "@/pages/practice/practice-word/index.vue";
 import {ShortcutKey} from "@/types.ts";
-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";
+import useTheme from "@/hooks/theme.ts";
+import RightTopBar from "@/components/RightTopBar.vue";
+import Logo from "@/components/Logo.vue";
 
 const practiceStore = usePracticeStore()
 const store = useBaseStore()
 const settingStore = useSettingStore()
 const runtimeStore = useRuntimeStore()
-const practiceRef: any = $ref()
 const {toggleTheme} = useTheme()
-let showFeedbackModal = $ref(false)
+const practiceRef: any = $ref()
 
 watch(practiceStore, () => {
   if (practiceStore.inputWordNumber < 1) {
@@ -147,38 +142,16 @@ useStartKeyboardEventListener()
 </script>
 <template>
   <div class="practice-wrapper">
+    <Logo/>
     <Toolbar/>
     <!--    <BaseButton @click="test">test</BaseButton>-->
     <PracticeArticle ref="practiceRef" v-if="store.isArticle"/>
     <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>
+  <RightTopBar/>
   <DictModal/>
   <Statistics/>
-  <FeedbackModal v-if="showFeedbackModal" @close="showFeedbackModal = false"/>
-
 </template>
 
 <style scoped lang="scss">
@@ -192,15 +165,8 @@ useStartKeyboardEventListener()
   align-items: center;
   //padding-right: var(--practice-wrapper-padding-right);
   transform: translateX(var(--practice-wrapper-translateX));
-}
 
-.right-bar {
-  position: fixed;
-  right: 30rem;
-  top: var(--space);
-  z-index: 1;
-  display: flex;
-  gap: 10rem;
+
 }
 
 </style>