fix: the leader key cannot be disabled

Author: wj-xiao

web/src/i18n/locales/en.ts

@@ -136,6 +136,7 @@ const en = {
           desc2: 'Requires more steps, but completely avoids system conflicts.'
         },
         enable: 'Enable Leader Key',
+        tip: 'When assigned as a Leader Key, this key functions exclusively as a shortcut trigger and loses its default behavior.',
         placeholder: 'Please press the Leader Key',
         shiftRight: 'Right Shift',
         ctrlRight: 'Right Ctrl',

web/src/i18n/locales/zh.ts

@@ -120,6 +120,7 @@ const zh = {
           desc2: '步骤较多，但能完美避开系统键位冲突。'
         },
         enable: '启用引导键',
+        tip: '设为引导键后，该按键将仅用于触发快捷键，不再作为普通按键使用。',
         placeholder: '请按下引导键',
         shiftRight: '右 Shift',
         ctrlRight: '右 Ctrl',

web/src/pages/desktop/menu/keyboard/leader-key.tsx

@@ -79,13 +79,12 @@ export const LeaderKey = () => {
   function submit() {
     if (isLoading) return;
 
-    if (tempLeaderKey === leaderKey || (!isLeaderKeyEnable && !leaderKey)) {
+    const key = isLeaderKeyEnable ? tempLeaderKey : '';
+    if (key === leaderKey) {
       closeModal();
       return;
     }
 
-    const key = isLeaderKeyEnable ? tempLeaderKey : '';
-
     setIsLoading(true);
 
     api
@@ -111,7 +110,7 @@ export const LeaderKey = () => {
         <span>{t('keyboard.leaderKey.title')}</span>
       </div>
 
-      <Modal width={500} keyboard={false} footer={null} open={isModalOpen} onCancel={closeModal}>
+      <Modal width={510} keyboard={false} footer={null} open={isModalOpen} onCancel={closeModal}>
         <div className="my-3 flex flex-col space-y-3">
           {/* title */}
           <div className="flex flex-col space-y-1">
@@ -163,7 +162,8 @@ export const LeaderKey = () => {
 
           {/* Keyboard recorder */}
           {isLeaderKeyEnable && (
-            <div className="mt-5 flex flex-col space-y-5 rounded-lg bg-neutral-800 px-5 py-10">
+            <div className="flex flex-col space-y-5 rounded-lg bg-neutral-800 px-5 py-5">
+              <span className="text-sm text-neutral-400">{t('keyboard.leaderKey.tip')}</span>
               <Input
                 value={tempLeaderKey}
                 className="flex-1"
@@ -178,8 +178,10 @@ export const LeaderKey = () => {
                   <div
                     key={key.value}
                     className={clsx(
-                      'flex w-28 cursor-pointer items-center justify-center space-x-1 rounded py-1 shadow-lg shadow-neutral-800 outline hover:shadow-xl',
-                      key.value === tempLeaderKey ? 'outline-blue-500' : 'outline-neutral-700'
+                      'flex w-28 cursor-pointer items-center justify-center space-x-1 rounded py-1 shadow-lg shadow-neutral-800 outline',
+                      key.value === tempLeaderKey
+                        ? 'text-neutral-300 outline-blue-500'
+                        : 'text-neutral-500 outline-neutral-700 hover:shadow-xl hover:outline-neutral-600'
                     )}
                     onClick={() => setTempLeaderKey((k) => (k === key.value ? '' : key.value))}
                   >
@@ -193,9 +195,8 @@ export const LeaderKey = () => {
 
           <div className="flex w-full justify-center pt-5">
             <Button
-              className="w-28"
+              className="w-24"
               type="primary"
-              size="large"
               loading={isLoading}
               onClick={submit}
             >