update ui

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;