feat:hotKey

src/locales/en_GB.json

@@ -138,13 +138,21 @@
     "title": "Config",
     "tabGroup": {
       "general": "General",
+      "hotKey": "HotKey",
       "about": "About"
     },
     "theme": {
       "label": "Theme",
       "light": "Light",
       "dark": "Dark",
       "auto": "Auto"
+    },
+    "hotKey": {
+      "click": "left mouse click",
+      "RightClick": "right mouse click",
+      "copyLabel": "Copy",
+      "viewLabel": "Data zoom editing",
+      "copyTip": "Use the command key (⌘) on Mac system keyboards and the Windows logo key (⊞) on Windows system keyboards"
     }
   },
   "contentDetail": {

src/locales/zh_CN.json

@@ -138,13 +138,21 @@
     "title": "设置",
     "tabGroup": {
       "general": "常规",
+      "hotKey": "快捷键",
       "about": "关于"
     },
     "theme": {
       "label": "主题",
       "light": "浅色",
       "dark": "深色",
       "auto": "自动"
+    },
+    "hotKey": {
+      "click": "鼠标左击",
+      "rightClick": "鼠标右击",
+      "copyLabel": "复制",
+      "viewLabel": "数据放大编辑",
+      "copyTip": "在 Mac 系统键盘上使用command 键 (⌘), 在 Windows 系统键盘上使用Windows 徽标键 (⊞)"
     }
   },
   "contentDetail": {

src/views/config/about.vue

@@ -2,6 +2,15 @@
   <div class="about-container flex flex-col justify-center items-center py-4">
     <img src="@/assets/icon.png" alt="logo" width="120" height="120" class="rounded-full shadow hover:shadow-xl" />
     <div class="mt-4 text-2xl">RedFish</div>
-    <div class="mt-2 text-gray-400">0.1.1</div>
+    <div class="mt-2 text-gray-400">v 0.1.1</div>
+    <div class="mt-6"><el-link @click="jump">Github.com/Kuari/RedFish</el-link></div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { shell } from 'electron'
+
+const jump = () => {
+  shell.openExternal('https://github.com/Kuari/RedFish')
+}
+</script>

src/views/config/content.vue

@@ -2,6 +2,7 @@
   <div class="content-container">
     <el-tabs v-model="activeName" class="demo-tabs">
       <el-tab-pane :label="t('config.tabGroup.general')" name="general"><general-com /></el-tab-pane>
+      <el-tab-pane :label="t('config.tabGroup.hotKey')" name="hotKey"><hot-key /></el-tab-pane>
       <el-tab-pane :label="t('config.tabGroup.about')" name="about"><about /></el-tab-pane>
     </el-tabs>
   </div>
@@ -11,6 +12,7 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import GeneralCom from './theme.vue'
+import HotKey from './hotKey.vue'
 import About from './about.vue'
 
 const { t } = useI18n()
@@ -19,6 +21,6 @@ const activeName = ref('general')
 
 <style scoped>
 .content-container {
-  min-height: 600px;
+  min-height: 400px;
 }
 </style>

src/views/config/hotKey.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="hot-key-container w-full flex flex-col p-4">
+    <div class="flex flex-row items-center w-full">
+      <div class="w-28 font-bold">{{ t('config.hotKey.copyLabel') }}:</div>
+      <div><span class="btn">command / windows</span><span class="px-2">+</span><span class="btn">{{ t('config.hotKey.click') }}</span></div>
+    </div>
+    <div class="flex flex-row items-center w-full mt-1 mb-4">
+      <div class="w-32"></div>
+      <div class="text-gray-400">{{ t('config.hotKey.copyTip') }}</div>
+    </div>
+    <div class="flex flex-row items-center w-full">
+      <div class="w-28 font-bold">{{ t('config.hotKey.viewLabel') }}:</div>
+      <div><span class="btn">{{ t('config.hotKey.rightClick') }}</span></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+</script>
+
+<style scoped>
+.hot-key-container span.btn {
+  padding: 2px 4px;
+  border-radius: 4px;
+  background-color: rgba(252, 211, 211, 0.92);
+  font-weight: bold;
+  color: #F56C6C;
+}
+</style>

src/views/config/index.vue

@@ -24,6 +24,3 @@ const dialogState: { isShow: boolean } = reactive({
   isShow: false
 })
 </script>
-
-<style scoped>
-</style>

src/views/config/theme.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-4 flex flex-row items-center">
-    <div class="w-20 font-bold">{{ t('config.theme.label') }}:</div>
+    <div class="w-28 font-bold">{{ t('config.theme.label') }}:</div>
     <el-radio-group v-model="radio" @change="handleChange">
       <el-radio :label="1">{{ t('config.theme.light') }}</el-radio>
       <el-radio :label="2">{{ t('config.theme.dark') }}</el-radio>