refactor: Optimize display

WenJing95 · Oct 28, 2024 · f0f8712 · f0f8712
1 parent be6e993
commit f0f8712
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 24 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "SayKey",
   "productName": "SayKey",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "SayKey",
   "main": "dist/main.js",
   "icon": "src/icon-light.ico",

diff --git a/frontend/src/VoiceRecognitionIcon.tsx b/frontend/src/VoiceRecognitionIcon.tsx
@@ -56,17 +56,45 @@ const VoiceRecognitionIcon: React.FC<VoiceRecognitionIconProps> = ({
     const [hintText, setHintText] = useState('');
 
     const getShortcutText = useCallback(() => {
-        const t = translations[language];
+        const kbdClass = "inline-flex items-center justify-center h-4 min-w-[16px] px-1 text-[9px] font-medium rounded border border-gray-200/60 bg-gray-50/90 text-gray-600 shadow-[0_1px_1px_rgba(0,0,0,0.1)] backdrop-blur-sm";
+        const plusClass = "mx-0.5 text-[8px] text-gray-400 font-medium";
+
         if (currentShortcut === 'CommandOrControl+Q') {
-            return t['holdCtrlQHint'];
+            return (
+                <div className="flex items-center">
+                    <kbd className={kbdClass}>Ctrl</kbd>
+                    <span className={plusClass}>+</span>
+                    <kbd className={kbdClass}>Q</kbd>
+                </div>
+            );
         } else if (currentShortcut === 'CommandOrControl+CapsLock') {
-            return t['holdCtrlCapsLockHint'];
+            return (
+                <div className="flex items-center">
+                    <kbd className={kbdClass}>Ctrl</kbd>
+                    <span className={plusClass}>+</span>
+                    <kbd className={`${kbdClass} text-[8px]`}>Caps</kbd>
+                </div>
+            );
         } else if (currentShortcut === 'CapsLock') {
-            return t['holdCapsLockHint'];
+            return (
+                <div className="flex items-center">
+                    <kbd className={`${kbdClass} text-[8px]`}>Caps</kbd>
+                </div>
+            );
         } else {
-            return `${t['holdKey']} ${currentShortcut}`;
+            const keys = currentShortcut.split('+');
+            return (
+                <div className="flex items-center">
+                    {keys.map((key, index) => (
+                        <React.Fragment key={key}>
+                            <kbd className={kbdClass}>{key}</kbd>
+                            {index < keys.length - 1 && <span className={plusClass}>+</span>}
+                        </React.Fragment>
+                    ))}
+                </div>
+            );
         }
-    }, [language, currentShortcut]);
+    }, [currentShortcut]);
 
     useEffect(() => {
         if (serverStatus === 'starting') {

diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts
@@ -14,8 +14,8 @@ const translations: Record<Language, Record<string, string>> = {
         'show': 'Show',
         'currentShortcut': 'Current Shortcut',
         'restartBackend': 'Restart',
-        'holdCtrlQ': 'Hold ⌘Ctrl + Q',
-        'holdCtrlCapsLock': 'Hold ⌘Ctrl + Caps',
+        'holdCtrlQ': 'Hold Ctrl + Q',
+        'holdCtrlCapsLock': 'Hold Ctrl + Caps',
         'holdCapsLock': 'Hold Caps',
         'viewLogs': 'View Logs',
         'sayKeyLogs': 'SayKey Logs',
@@ -24,8 +24,8 @@ const translations: Record<Language, Record<string, string>> = {
         'searchLogs': 'Search logs...',
         'hold': 'Hold',
         'holdKey': 'Hold',
-        'holdCtrlQHint': '⌘Ctrl+Q',
-        'holdCtrlCapsLockHint': '⌘Ctrl+Caps',
+        'holdCtrlQHint': 'Hold Ctrl+Q',
+        'holdCtrlCapsLockHint': 'Hold Ctrl+Caps',
         'holdCapsLockHint': 'Hold Caps',
     },
     '日本語': {
@@ -41,19 +41,19 @@ const translations: Record<Language, Record<string, string>> = {
         'show': '表示',
         'currentShortcut': '現在のショートカット',
         'restartBackend': '再起動',
-        'holdCtrlQ': '⌘Ctrl+Q長押し',
-        'holdCtrlCapsLock': '⌘Ctrl+Caps長押し',
-        'holdCapsLock': 'Caps長押し',
+        'holdCtrlQ': 'Ctrl+Q 長押し',
+        'holdCtrlCapsLock': 'Ctrl+Caps 長押し',
+        'holdCapsLock': 'Caps 長押し',
         'viewLogs': 'ログを表示',
         'sayKeyLogs': 'SayKeyログ',
         'download': 'ダウンロード',
         'clear': 'クリア',
         'searchLogs': 'ログを検索...',
         'hold': '長押し',
         'holdKey': '押し続ける',
-        'holdCtrlQHint': '⌘Ctrl+Q',
-        'holdCtrlCapsLockHint': '⌘Ctrl+Caps',
-        'holdCapsLockHint': 'Caps長押し',
+        'holdCtrlQHint': 'Ctrl+Q 長押し',
+        'holdCtrlCapsLockHint': 'Ctrl+Caps 長押し',
+        'holdCapsLockHint': 'Caps 長押し',
     },
     '简体中文': {
         'interfaceLanguage': '界面语言',
@@ -68,18 +68,18 @@ const translations: Record<Language, Record<string, string>> = {
         'show': '显示',
         'currentShortcut': '当前快捷键',
         'restartBackend': '重新启动',
-        'holdCtrlQ': '按住⌘Ctrl+Q',
-        'holdCtrlCapsLock': '按住⌘Ctrl+Caps',
-        'holdCapsLock': '按住Caps',
+        'holdCtrlQ': '按住 Ctrl+Q',
+        'holdCtrlCapsLock': '按住 Ctrl+Caps',
+        'holdCapsLock': '按住 Caps',
         'viewLogs': '查看日志',
         'sayKeyLogs': 'SayKey运行日志',
         'download': '下载',
         'clear': '清空',
         'searchLogs': '搜索日志...',
         'hold': '按住',
         'holdKey': '按住',
-        'holdCtrlQHint': '按住⌘Ctrl+Q',
-        'holdCtrlCapsLockHint': '按住⌘Ctrl+Caps',
+        'holdCtrlQHint': '按住 Ctrl+Q',
+        'holdCtrlCapsLockHint': '按住 Ctrl+Caps',
         'holdCapsLockHint': '按住Caps说话',
     }
 };