update ui

components.d.ts

@@ -48,9 +48,11 @@ declare module 'vue' {
     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']
+    Logo: typeof import('./src/components/Logo.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']
+    RightTopBar: typeof import('./src/components/RightTopBar.vue')['default']
     Ring: typeof import('./src/components/Ring.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/assets/css/style.scss

@@ -9,6 +9,7 @@
   --color-background: #E6E8EB;
   --color-main-bg: #E6E8EB;
   --color-second-bg: rgb(240, 242, 244);
+  --color-third-bg: rgb(213, 215, 217);
 
   --color-item-bg: rgb(228, 230, 232);
   --color-item-hover: white;
@@ -44,19 +45,14 @@
 
   --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;
 }
 
 html.dark {
-  //--color-main-bg: rgba(0, 5, 24, 1);
-  //--color-main-bg: rgba(17,24,39, 1);
-  //--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);
   --color-second-bg: rgb(30, 31, 34);
+  --color-third-bg: rgb(43, 45, 48);
 
   --color-item-bg: rgb(43, 45, 48);
   --color-item-hover: rgb(67, 69, 74);

src/components/Logo.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {useSettingStore} from "@/stores/setting.ts";
+import router from "@/router.ts";
+
+const settingStore = useSettingStore()
+function goHome(){
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="logo" @click="goHome">
+    <img v-show="settingStore.theme === 'light'" src="/logo-text-black.png" alt="">
+    <img v-show="settingStore.theme !== 'light'" src="/logo-text-white.png" alt="">
+  </div>
+</template>
+
+<style scoped lang="scss">
+.logo {
+  position: fixed;
+  left: var(--space);
+  top: var(--space);
+  z-index: 1;
+
+  img {
+    cursor: pointer;
+    height: 35rem;
+  }
+}
+</style>

src/components/RightTopBar.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+
+import {ShortcutKey} from "@/types.ts";
+import {$ref} from "vue/macros";
+import FeedbackModal from "@/components/toolbar/FeedbackModal.vue";
+import BaseIcon from "@/components/BaseIcon.vue";
+import Tooltip from "@/components/Tooltip.vue";
+import IconWrapper from "@/components/IconWrapper.vue";
+import {Icon} from "@iconify/vue";
+import useTheme from "@/hooks/theme.ts";
+import {useSettingStore} from "@/stores/setting.ts";
+
+let showFeedbackModal = $ref(false)
+const {toggleTheme} = useTheme()
+const settingStore = useSettingStore()
+
+</script>
+
+<template>
+  <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>
+  <FeedbackModal v-if="showFeedbackModal" @close="showFeedbackModal = false"/>
+</template>
+
+<style scoped lang="scss">
+
+.right-bar {
+  position: fixed;
+  right: 30rem;
+  top: var(--space);
+  z-index: 1;
+  display: flex;
+  gap: 10rem;
+}
+
+</style>

src/components/list/DictItem.vue

@@ -46,7 +46,8 @@ const emit = defineEmits<{
   height: 165rem;
   border-radius: 10rem;
   position: relative;
-  background: var(--color-item-bg);
+  background: var(--color-third-bg);
+  border: 1px solid var(--color-item-border);
   color: var(--color-font-1);
   font-size: 14rem;
   display: flex;

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>

src/types.ts

@@ -205,8 +205,8 @@ export enum TranslateEngine {
 export const languageCategoryOptions = [
   {id: 'article', name: '文章', flag: bookFlag},
   {id: 'en', name: '英语', flag: enFlag},
-  {id: 'ja', name: '日语', flag: jpFlag},
-  {id: 'de', name: '德语', flag: deFlag},
+  // {id: 'ja', name: '日语', flag: jpFlag},
+  // {id: 'de', name: '德语', flag: deFlag},
   {id: 'code', name: 'Code', flag: codeFlag},
   {id: 'my', name: '我的', flag: myFlag},
 ]