feat: 新增自定义模式 调整细节逻辑

README.md

@@ -4,12 +4,19 @@
 
 整个项目包含前端和后端，前端使用 Vue3 + Vite，后端使用 Nodejs + Koa2 + Leancloud。该项目是前端部分，后端也将在未来开源。
 
+### 2024.1.14
+- 新增自定义模式
+### 2024.1.13
+- 新增计时模式
+- 增加大写键开启提示
+### 2024.1.2
+- 新增右下角建议反馈功能
 ### 2023.12.27 更新
 - 实现输入回放功能
 ### 2023.12.20 更新
 - 新增限时模式
 ### 2023.12.10 更新
-- 新增 mac 键位适配
+- 键盘测试新增 mac 键位适配
 ### 2023.7.20 更新
 - 实现键盘测试功能
 ### 2023.7.17 更新

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { reactive, provide, onMounted, ref, nextTick } from 'vue';
+import { KEY_CODE_ENUM } from '@/config/key';
 
 // components
 import Message from '@/components/ui/Message.vue';
@@ -20,8 +21,8 @@ import { storeToRefs } from 'pinia';
 
 // svg
 import IcoMessage from '@/assets/svg/message.svg';
-import { KEY_CODE_ENUM } from '@/config/key';
 import IcoCapsLock from '@/assets/svg/caps-lock.svg';
+import IcoClose from '@/assets/svg/close.svg';
 
 const suggestModalRef = ref<InstanceType<typeof SuggestModal>>();
 const userStore = useUserStore();
@@ -160,9 +161,12 @@ async function suggestClick() {
   <div
     v-if="'showRemind' in config && config.showRemind && obj.showRemind"
     @click="obj.showRemind = false"
-    class="y-remind"
+    class="y-remind flex-center--y-center"
   >
-    {{ config.remind }}
+    <span>
+      {{ config.remind }}
+    </span>
+    <IcoClose></IcoClose>
   </div>
   <header>
     <div class="y-info" :class="[onlyShowMain ? 'y-info__disabled' : '']">
@@ -272,10 +276,15 @@ async function suggestClick() {
   height: 30px;
   line-height: 30px;
   text-align: center;
-  color: $main-orange;
+  color: $gray-08;
   font-weight: bold;
   background: $main-color-gradient;
   cursor: pointer;
+  svg {
+    fill: $gray-08;
+    width: 16px;
+    margin-left: 20px;
+  }
 }
 header {
   display: flex;

src/assets/main.scss

@@ -75,6 +75,11 @@ a {
   align-items: center;
   justify-content: space-between;
 }
+.flex-center--y-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .main-color {
   color: $main-color;
 }

src/components/ui/Button.vue

@@ -48,7 +48,7 @@ const handlerClick = () => {
   cursor: pointer;
   user-select: none;
   touch-action: manipulation;
-  padding: 6px 15px;
+  padding: 6px 12px;
   font-size: 14px;
   border-radius: 2px;
   color: #fff;