Merge pull request #3 from rust17/feat_todo

feat(client): implement i18n, haptics, and UI optimizations

Author: rust17

requirement/todo.md

@@ -0,0 +1,28 @@
+edit:
+    - status-bar.ts
+        - [x] 将 StatusBar 中的 status 封装成枚举，remove 从枚举里通过 all 方法获取
+
+---
+
+add:
+    - 配置
+        - [x] 添加 i18n 设置，可以设置中文或英文，默认使用中文
+        - [x] 使用 i18n key 替换项目中的文案，把 value 放到 lang 目录下
+
+---
+
+add:
+    - ui
+        - [ ] 在 Modifiers 区域上方添加一个横向滚动指示器：UI 为垂直滚动条的横向变体（仅保留滑块，隐藏轨道），支持手指拖拽左右滑动触发横向滚动，与 Modifiers 区域保持小间距
+
+---
+
+add:
+    - 交互
+        - [x] 增加震动反馈
+
+---
+
+edit:
+    - [x] 除了：ctrl、shift、alt、win，Modifiers 键盘增加点击效果，点击时，触发 active 效果，离开后消失
+    - [x] 当系统键盘呼出时，改成把 Modifiers 区域顶上去，使得可以同时操作 Modifiers 和键盘，同时取消掉图里有☑️这一行

web-client/index.html

@@ -14,7 +14,7 @@
       <div id="status-bar">
         <div id="status-indicator">
           <div class="status-dot"></div>
-          <span class="status-text">Connecting...</span>
+          <span class="status-text" data-i18n="status.connecting">Connecting...</span>
         </div>
       </div>
 
@@ -25,6 +25,18 @@
 
       <!-- Function Keys Panel -->
       <div id="fn-panel">
+        <!-- Floating Toolbar (Inside panel for relative positioning but absolutely floating above) -->
+        <div id="toolbar-fab">
+          <div class="fab-capsule">
+            <button id="btn-settings" class="capsule-btn sub-action">
+               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33-1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+            </button>
+            <div class="capsule-divider"></div>
+            <button id="btn-keyboard" class="capsule-btn main-action">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect><line x1="6" y1="8" x2="6" y2="8"></line><line x1="10" y1="8" x2="10" y2="8"></line><line x1="14" y1="8" x2="14" y2="8"></line><line x1="18" y1="8" x2="18" y2="8"></line><line x1="6" y1="12" x2="6" y2="12"></line><line x1="10" y1="12" x2="10" y2="12"></line><line x1="14" y1="12" x2="14" y2="12"></line><line x1="18" y1="12" x2="18" y2="12"></line><line x1="6" y1="16" x2="6" y2="16"></line><line x1="10" y1="16" x2="10" y2="16"></line><line x1="14" y1="16" x2="14" y2="16"></line></svg>
+            </button>
+          </div>
+        </div>
         <!-- Row 1: System & Modifiers -->
         <button class="fn-btn" data-key="esc">Esc</button>
         <button class="fn-btn" data-key="tab">⇥</button>
@@ -44,48 +56,35 @@
         <button class="fn-btn nav-key" data-key="right">→</button>
       </div>
 
-      <!-- Floating Toolbar -->
-      <div id="toolbar-fab">
-        <div class="fab-capsule">
-          <button id="btn-settings" class="capsule-btn sub-action">
-             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-          </button>
-          <div class="capsule-divider"></div>
-          <button id="btn-keyboard" class="capsule-btn main-action">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect><line x1="6" y1="8" x2="6" y2="8"></line><line x1="10" y1="8" x2="10" y2="8"></line><line x1="14" y1="8" x2="14" y2="8"></line><line x1="18" y1="8" x2="18" y2="8"></line><line x1="6" y1="12" x2="6" y2="12"></line><line x1="10" y1="12" x2="10" y2="12"></line><line x1="14" y1="12" x2="14" y2="12"></line><line x1="18" y1="12" x2="18" y2="12"></line><line x1="6" y1="16" x2="6" y2="16"></line><line x1="10" y1="16" x2="10" y2="16"></line><line x1="14" y1="16" x2="14" y2="16"></line></svg>
-          </button>
-        </div>
-      </div>
-
       <!-- Settings Modal -->
       <div id="settings-modal" class="modal hidden">
         <div class="modal-content">
           <div class="modal-header">
-            <h3>Settings</h3>
+            <h3 data-i18n="settings.title">Settings</h3>
             <button id="btn-close-settings" class="icon-btn">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
             </button>
           </div>
           <div class="modal-body">
             <div class="setting-item">
               <div class="setting-label">
-                <span>Mouse Sensitivity</span>
+                <span data-i18n="settings.mouse_sensitivity">Mouse Sensitivity</span>
                 <span id="sensitivity-value">2.0</span>
               </div>
               <input type="range" id="sensitivity-slider" min="0.5" max="10.0" step="0.1" value="2.0">
             </div>
 
             <div class="setting-item">
               <div class="setting-label">
-                <span>Scroll Sensitivity</span>
+                <span data-i18n="settings.scroll_sensitivity">Scroll Sensitivity</span>
                 <span id="scroll-sensitivity-value">1.0</span>
               </div>
               <input type="range" id="scroll-sensitivity-slider" min="0.1" max="10.0" step="0.1" value="1.0">
             </div>
 
             <div class="setting-item">
               <div class="setting-label" style="align-items: center;">
-                <span>Light Mode</span>
+                <span data-i18n="settings.light_mode">Light Mode</span>
                 <label class="switch">
                     <input type="checkbox" id="theme-toggle">
                     <span class="slider"></span>
@@ -95,7 +94,7 @@ <h3>Settings</h3>
 
             <div class="setting-item">
               <div class="setting-label" style="align-items: center;">
-                <span>Scroll Bar Right</span>
+                <span data-i18n="settings.scroll_bar_right">Scroll Bar Right</span>
                 <label class="switch">
                     <input type="checkbox" id="scroll-pos-toggle">
                     <span class="slider"></span>
@@ -105,13 +104,23 @@ <h3>Settings</h3>
 
             <div class="setting-item">
               <div class="setting-label" style="align-items: center;">
-                <span>Rate Monitor</span>
+                <span data-i18n="settings.rate_monitor">Rate Monitor</span>
                 <label class="switch">
                     <input type="checkbox" id="rate-monitor-toggle">
                     <span class="slider"></span>
                 </label>
               </div>
             </div>
+
+            <div class="setting-item">
+              <div class="setting-label" style="align-items: center;">
+                <span data-i18n="settings.language">Language</span>
+                <select id="lang-select">
+                  <option value="zh">中文</option>
+                  <option value="en">English</option>
+                </select>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -121,7 +130,13 @@ <h3>Settings</h3>
         <div>BPS: <span id="rate-bps">0</span></div>
       </div>
 
-      <textarea id="keyboard-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
+      <input type="text" id="keyboard-input" 
+             inputmode="text" 
+             enterkeyhint="done" 
+             autocomplete="one-time-code" 
+             autocorrect="off" 
+             autocapitalize="off" 
+             spellcheck="false">
     </div>
     <script type="module" src="/src/main.ts"></script>
   </body>

web-client/package-lock.json

@@ -15,5 +15,8 @@
     "vite": "^7.2.4",
     "vite-plugin-pwa": "^1.2.0",
     "vitest": "^4.0.16"
+  },
+  "dependencies": {
+    "web-haptics": "^0.0.6"
   }
 }

web-client/package.json

@@ -0,0 +1,59 @@
+import { zh } from '../lang/zh';
+import type { TranslationKeys } from '../lang/zh';
+import { en } from '../lang/en';
+
+type Language = 'zh' | 'en';
+
+class I18nManager {
+    private currentLang: Language = 'zh';
+    private translations: Record<Language, TranslationKeys> = { zh, en };
+
+    constructor() {
+        const savedLang = localStorage.getItem('remote-mouse-lang') as Language;
+        if (savedLang && (savedLang === 'zh' || savedLang === 'en')) {
+            this.currentLang = savedLang;
+        }
+    }
+
+    public setLanguage(lang: Language) {
+        this.currentLang = lang;
+        localStorage.setItem('remote-mouse-lang', lang);
+        this.updateDOM();
+    }
+
+    public getLanguage(): Language {
+        return this.currentLang;
+    }
+
+    public t<K1 extends keyof TranslationKeys, K2 extends keyof TranslationKeys[K1]>(
+        key: `${K1}.${K2 & string}`
+    ): string {
+        const [k1, k2] = key.split('.') as [K1, K2 & string];
+        return this.translations[this.currentLang][k1][k2] as unknown as string;
+    }
+
+    public updateDOM() {
+        const elements = document.querySelectorAll('[data-i18n]');
+        elements.forEach(el => {
+            const key = el.getAttribute('data-i18n');
+            if (key) {
+                // @ts-ignore - simplified access
+                const text = this.t(key as any);
+                if (text) el.textContent = text;
+            }
+        });
+
+        // Update titles if necessary
+        const titles = document.querySelectorAll('[data-i18n-title]');
+        titles.forEach(el => {
+            const key = el.getAttribute('data-i18n-title');
+            if (key) {
+                // @ts-ignore
+                const text = this.t(key as any);
+                if (text) (el as HTMLElement).title = text;
+            }
+        });
+    }
+}
+
+export const i18n = new I18nManager();

web-client/src/core/i18n.ts

@@ -4,3 +4,15 @@ export const OP_SCROLL = 0x03;
 export const OP_DRAG = 0x04;
 export const OP_TEXT = 0x05;
 export const OP_KEY_ACTION = 0x06;
+
+export const ConnectionStatus = {
+    Connected: 'connected',
+    Disconnected: 'disconnected',
+    Connecting: 'connecting',
+} as const;
+
+export type ConnectionStatus = (typeof ConnectionStatus)[keyof typeof ConnectionStatus];
+
+export const allConnectionStatuses = Object.values(ConnectionStatus);
+
+

web-client/src/core/protocol.ts

@@ -1,7 +1,7 @@
-type ConnectionState = 'connected' | 'disconnected' | 'connecting';
+import { ConnectionStatus } from './protocol';
 
 interface TransportOptions {
-    onStateChange?: (state: ConnectionState, statusText: string) => void;
+    onStateChange?: (state: ConnectionStatus, statusText: string) => void;
 }
 
 export class Transport {
@@ -28,31 +28,31 @@ export class Transport {
 
     public connect(url: string) {
         this.isExplicitlyClosed = false;
-        this.updateState('connecting', '正在连接...');
+        this.updateState(ConnectionStatus.Connecting, 'status.connecting');
 
         try {
             this.ws = new WebSocket(url);
             this.ws.binaryType = 'arraybuffer';
 
             this.ws.onopen = () => {
-                this.updateState('connected', '已连接');
+                this.updateState(ConnectionStatus.Connected, 'status.connected');
                 console.log('WebSocket opened');
             };
 
             this.ws.onclose = () => {
-                this.updateState('disconnected', '连接断开');
+                this.updateState(ConnectionStatus.Disconnected, 'status.disconnected');
                 this.scheduleReconnect(url);
             };
 
             this.ws.onerror = (error) => {
                 console.error('WebSocket error:', error);
-                this.updateState('disconnected', '连接错误');
+                this.updateState(ConnectionStatus.Disconnected, 'status.error');
                 // onerror usually is followed by onclose, so we let onclose handle reconnect
             };
 
         } catch (e) {
             console.error('Connection failed synchronously', e);
-            this.updateState('disconnected', '连接失败');
+            this.updateState(ConnectionStatus.Disconnected, 'status.failed');
             this.scheduleReconnect(url);
         }
     }
@@ -88,9 +88,10 @@ export class Transport {
         }
     }
 
-    private updateState(state: ConnectionState, text: string) {
+    private updateState(state: ConnectionStatus, text: string) {
         if (this.options.onStateChange) {
             this.options.onStateChange(state, text);
         }
     }
 }
+