update ui

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>