添加更好的音調鍵

igncp · May 3, 2024 · 0e0e7c4 · 0e0e7c4
1 parent c37ff67
commit 0e0e7c4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/packages/react-ui/src/containers/Panel/Panel.tsx b/packages/react-ui/src/containers/Panel/Panel.tsx
@@ -348,6 +348,7 @@ const Panel = ({
   }
 
   const 處理寫鍵按下 = (事件: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // 允許瀏覽器快捷鍵
     if (事件.ctrlKey) return
 
     if (事件.key === 'Enter') {

diff --git a/packages/react-ui/src/languages/common/commonLanguageUtils.tsx b/packages/react-ui/src/languages/common/commonLanguageUtils.tsx
@@ -75,23 +75,36 @@ export const commonHandleWritingKeyDown: T_CommonHandleWritingKeyDown = (
 
   按鍵事件.preventDefault()
 
-  // including capital letters so it doesn't write when shortcut
-  if (!/[a-z0-9A-Z]/.test(按鍵事件.key)) {
-    setPractice(practiceValue + 按鍵事件.key)
+  const 解析按鍵 = (() => {
+    // 按鍵音調更舒適
+    switch (按鍵事件.key) {
+      case '!':
+        return '4'
+      case '@':
+        return '5'
+      case '#':
+        return '6'
+      default:
+        return 按鍵事件.key
+    }
+  })()
+
+  if (!/[a-z0-9]/.test(解析按鍵)) {
+    setPractice(practiceValue + 解析按鍵)
 
     return
   }
 
-  if (按鍵事件.key.length !== 1 && 按鍵事件.key !== 'Backspace') {
+  if (解析按鍵.length !== 1 && 解析按鍵 !== 'Backspace') {
     return
   }
 
   const { pronunciation: correctPronunciation } = currentCharObj
 
   const newWritingValue =
-    按鍵事件.key === 'Backspace'
+    解析按鍵 === 'Backspace'
       ? writingValue.slice(0, writingValue.length - 1)
-      : writingValue + 按鍵事件.key
+      : writingValue + 解析按鍵
 
   const correctPronunciationParsed = 解析發音(correctPronunciation, 語言選項)
 

diff --git a/packages/web-app/src/components/global.scss b/packages/web-app/src/components/global.scss
@@ -17,7 +17,7 @@ body {
     --color-error-blue: #b9d5f4;
     --color-error-green: #7ceb95;
     --color-error-orange: #ffb27a;
-    --color-error-pink: #faa5f3;
+    --color-error-pink: #fccff9;
     --color-error-purple: #b34df7;
     --color-error-red: #c78484;
     --color-error-silver: #c0c0c0;