update ui and add notice collect dialog

src/components/BaseButton.vue

@@ -85,7 +85,10 @@ defineEmits(['click'])
   &.large {
     height: 50rem;
     font-size: 18rem;
-    padding: 0 18rem;
+    padding: 0 22rem;
+    & > span {
+      font-size: 18rem;
+    }
   }
 
 

src/components/CollectNotice.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+
+import {Icon} from "@iconify/vue";
+import Close from "@/components/icon/Close.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import {watch} from "vue";
+import {useSettingStore} from "@/stores/setting.ts";
+
+let settingStore = useSettingStore()
+let showNotice = $ref(false)
+let show = $ref(false)
+let num = $ref(5)
+let timer = -1
+
+function toggleNotice() {
+  showNotice = true
+  timer = setInterval(() => {
+    num--
+    if (num <= 0) {
+      show = settingStore.first = false
+      clearInterval(timer)
+    }
+  }, 1000)
+}
+
+function close() {
+  clearInterval(timer)
+  show = settingStore.first = false
+}
+
+watch(() => settingStore.load, (n) => {
+  if (n && settingStore.first) {
+    show = true
+  }
+})
+
+</script>
+
+<template>
+  <transition name="right">
+    <div class="CollectNotice" v-if="show">
+      <div class="notice">
+        坚持练习，提高外语能力。将
+        <span class="active">「Typing Word」</span>
+        保存到收藏夹，永不迷失！
+      </div>
+      <div class="wrapper">
+        <transition name="fade">
+          <div class="collect" v-if="showNotice">
+            <div class="href-wrapper">
+              <div class="round">
+                <div class="href">typing-word.ttentau.top</div>
+                <Icon
+                    width="22"
+                    icon="mdi:star-outline"/>
+              </div>
+              <div class="right">
+                👈
+                <Icon
+                    class="star"
+                    width="22"
+                    icon="mdi:star"/>
+                点亮它!
+              </div>
+            </div>
+            <div class="collect-keyboard">或使用收藏快捷键<span class="active">Ctrl + D</span></div>
+          </div>
+          <BaseButton v-else size="large" @click="toggleNotice">我想收藏</BaseButton>
+        </transition>
+      </div>
+      <div class="close-wrapper">
+        <span v-show="showNotice"><span class="active">{{ num }}s</span> 后自动关闭</span>
+        <Close @click="close" title="关闭"/>
+      </div>
+    </div>
+  </transition>
+
+</template>
+
+<style scoped lang="scss">
+
+.right-enter-active,
+.right-leave-active {
+  transition: all .5s ease;
+}
+
+.right-enter-from,
+.right-leave-to {
+  transform: translateX(110%);
+}
+
+.CollectNotice {
+  position: fixed;
+  right: var(--space);
+  top: var(--space);
+  z-index: 2;
+  font-size: 20rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--color-second-bg);
+  padding: 30rem;
+  border-radius: 12rem;
+  width: 500rem;
+  gap: 40rem;
+  color: var(--color-font-1);
+  line-height: 1.5;
+  border: 1px solid var(--color-item-border);
+  box-shadow: var(--shadow);
+
+  .notice {
+    margin-top: 30rem;
+  }
+
+  .active {
+    color: var(--color-main-active);
+  }
+
+  .wrapper {
+    .collect {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .href-wrapper {
+        display: flex;
+        font-size: 16rem;
+        align-items: center;
+        gap: 10rem;
+
+        .round {
+          color: var(--color-font-1);
+          border-radius: 50rem;
+          padding: 10rem 10rem;
+          padding-left: 20rem;
+          gap: 30rem;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          background: var(--color-main-bg);
+
+          .href {
+            font-size: 14rem;
+          }
+        }
+
+        .star {
+          color: var(--color-main-active);
+        }
+
+        .right {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      .collect-keyboard {
+        margin-top: 20rem;
+        font-size: 16rem;
+
+        span {
+          margin-left: 10rem;
+        }
+      }
+    }
+  }
+
+  .close-wrapper {
+    right: var(--space);
+    top: var(--space);
+    position: absolute;
+    font-size: 14rem;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    color: var(--color-font-1);
+    gap: 10rem;
+  }
+}
+
+</style>

src/components/RightTopBar.vue

@@ -18,10 +18,7 @@ const settingStore = useSettingStore()
 
 <template>
   <div class="right-bar">
-    <BaseIcon
-        @click="showFeedbackModal = true"
-        title="反馈"
-        icon="ph:bug-beetle"/>
+
 
     <Tooltip
         :title="`切换主题(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
@@ -39,7 +36,6 @@ const settingStore = useSettingStore()
           icon="mdi:github"/>
     </a>
   </div>
-  <FeedbackModal v-if="showFeedbackModal" @close="showFeedbackModal = false"/>
 </template>
 
 <style scoped lang="scss">

src/components/dialog/Dialog.vue

@@ -257,7 +257,7 @@ $header-height: 60rem;
   .window {
     //width: 75vw;
     //height: 70vh;
-    box-shadow: var(--color-main-bg) 0 0 6rem 0;
+    box-shadow: var(--shadow);
     border-radius: $radius;
     animation: bounce-in $time ease-out;
 

src/components/icon/Close.vue

@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import {Icon} from "@iconify/vue";
+import Tooltip from "@/components/Tooltip.vue";
 
 defineEmits(['click'])
+defineProps<{
+  title?: string
+}>()
 </script>
 
 <template>
   <div class="close"
        @click="$emit('click')"
   >
-    <Icon icon="ic:round-close"
-          width="20"
-    />
+    <Tooltip :title="title">
+      <Icon icon="carbon:close-outline"
+      />
+    </Tooltip>
   </div>
 </template>
 
@@ -20,5 +25,6 @@ defineEmits(['click'])
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 18rem;
 }
 </style>

src/components/toolbar/index.vue

@@ -18,6 +18,7 @@ import {$ref} from "vue/macros";
 import {DictType, ShortcutKey} from "@/types.ts";
 import ChapterName from "@/components/toolbar/ChapterName.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
+import BaseIcon from "@/components/BaseIcon.vue";
 
 const {toggleTheme} = useTheme()
 const store = useBaseStore()
@@ -113,7 +114,10 @@ watch(() => store.load, n => {
             </IconWrapper>
           </Tooltip>
 
-
+          <BaseIcon
+              @click="showFeedbackModal = true"
+              title="反馈"
+              icon="ph:bug-beetle"/>
 
 
 
@@ -149,6 +153,8 @@ watch(() => store.load, n => {
             color="#999"/>
     </Tooltip>
   </header>
+  <FeedbackModal v-if="showFeedbackModal" @close="showFeedbackModal = false"/>
+
 </template>
 
 <style lang="scss">
@@ -203,6 +209,7 @@ header {
   gap: 10rem;
   border: 1px solid var(--color-item-border);
   transition: all var(--anim-time);
+  box-shadow: var(--shadow);
 
   .content {
     min-height: var(--toolbar-height);