feat(desktop): complete keybinding customization rollout

apps/desktop/src-tauri/src/core/system/shortcut.rs

@@ -49,20 +49,28 @@ pub fn register_global_shortcut<R: Runtime>(
 ) -> Result<(), String> {
     let new_shortcut = parse_shortcut(&shortcut)?;
 
-    // 注销旧快捷键
-    if let Ok(current) = CURRENT_SHORTCUT.lock() {
-        if let Some(old_shortcut) = *current {
-            let _ = app.global_shortcut().unregister(old_shortcut);
+    let old_shortcut = CURRENT_SHORTCUT.lock().ok().and_then(|current| *current);
+    if let Some(old_shortcut) = old_shortcut {
+        if let Err(error) = app.global_shortcut().unregister(old_shortcut) {
+            let message = format!("Failed to unregister previous shortcut: {}", error);
+            if let Ok(mut status) = REGISTRATION_STATUS.lock() {
+                *status = (true, Some(message.clone()));
+            }
+            return Err(message);
         }
     }
 
-    // 尝试注册新快捷键
     let result = app
         .global_shortcut()
         .register(new_shortcut)
         .map_err(|e| format!("Failed to register shortcut: {}", e));
 
-    // 更新状态
+    if result.is_err() {
+        if let Some(old_shortcut) = old_shortcut {
+            let _ = app.global_shortcut().register(old_shortcut);
+        }
+    }
+
     match result {
         Ok(_) => {
             if let Ok(mut current) = CURRENT_SHORTCUT.lock() {

apps/desktop/src/components/CustomSelect.vue

@@ -8,7 +8,7 @@
         SelectTrigger,
         SelectValue,
     } from '@components/ui/select';
-    import type { AcceptableValue } from 'reka-ui';
+    import type { AcceptableValue, SelectTriggerProps } from 'reka-ui';
     import { computed, ref, useAttrs } from 'vue';
 
     import { type MessageKey, t, tt } from '@/i18n';
@@ -29,22 +29,48 @@
         placeholderKey?: MessageKey;
         disabled?: boolean;
         protectOptionText?: boolean;
+        open?: boolean;
+        displayLabel?: string;
+        triggerTestId?: string;
+        contentTestId?: string;
+        optionTestIdPrefix?: string;
+        disablePortal?: boolean;
+        triggerAs?: SelectTriggerProps['as'];
     }
 
     interface Emits {
         (e: 'update:modelValue', value: T): void;
+        (e: 'update:open', value: boolean): void;
+        (e: 'focus', event: FocusEvent): void;
+        (e: 'blur', event: FocusEvent): void;
     }
 
     const props = withDefaults(defineProps<Props>(), {
         placeholder: '',
         disabled: false,
         protectOptionText: false,
+        open: undefined,
+        displayLabel: '',
+        triggerTestId: '',
+        contentTestId: '',
+        optionTestIdPrefix: '',
+        disablePortal: false,
+        triggerAs: 'button',
     });
 
     const emit = defineEmits<Emits>();
+    defineSlots<{
+        trigger?(props: {
+            option: Option | undefined;
+            open: boolean;
+            displayLabel: string;
+        }): unknown;
+    }>();
     const attrs = useAttrs();
 
-    const isOpen = ref(false);
+    const localOpen = ref(false);
+
+    const isOpen = computed(() => props.open ?? localOpen.value);
 
     const selectedOption = computed(() => {
         return props.options.find((opt) => opt.value === props.modelValue);
@@ -66,6 +92,11 @@
             selectOption(value as T);
         }
     };
+
+    const updateOpen = (open: boolean) => {
+        localOpen.value = open;
+        emit('update:open', open);
+    };
 </script>
 
 <template>
@@ -74,7 +105,7 @@
         :disabled="disabled"
         :open="isOpen"
         @update:model-value="handleSelectValue"
-        @update:open="isOpen = $event"
+        @update:open="updateOpen"
     >
         <SelectTrigger
             v-bind="attrs"
@@ -86,36 +117,55 @@
             }"
             :icon-class="isOpen ? 'rotate-180' : ''"
             :disabled="disabled"
+            :as="triggerAs"
+            :data-testid="triggerTestId || undefined"
+            @focus="emit('focus', $event)"
+            @blur="emit('blur', $event)"
         >
-            <template v-if="selectedOption">
-                <div class="flex min-w-0 items-center gap-2">
-                    <img
-                        v-if="selectedOption.iconSrc"
-                        :src="selectedOption.iconSrc"
-                        :alt="selectedOption.label"
-                        class="h-4 w-4 shrink-0 rounded-sm object-contain"
-                        :data-no-i18n="protectOptionText ? 'true' : undefined"
-                        :translate="protectOptionText ? 'no' : undefined"
-                    />
-                    <span
-                        class="line-clamp-1"
-                        :data-no-i18n="protectOptionText ? 'true' : undefined"
-                        :translate="protectOptionText ? 'no' : undefined"
-                    >
-                        {{ selectedOption.label }}
-                    </span>
-                </div>
-            </template>
-            <SelectValue v-else :placeholder="resolvedPlaceholder" />
+            <slot
+                name="trigger"
+                :option="selectedOption"
+                :open="isOpen"
+                :display-label="displayLabel"
+            >
+                <template v-if="displayLabel">
+                    <span class="line-clamp-1">{{ displayLabel }}</span>
+                </template>
+                <template v-else-if="selectedOption">
+                    <div class="flex min-w-0 items-center gap-2">
+                        <img
+                            v-if="selectedOption.iconSrc"
+                            :src="selectedOption.iconSrc"
+                            :alt="selectedOption.label"
+                            class="h-4 w-4 shrink-0 rounded-sm object-contain"
+                            :data-no-i18n="protectOptionText ? 'true' : undefined"
+                            :translate="protectOptionText ? 'no' : undefined"
+                        />
+                        <span
+                            class="line-clamp-1"
+                            :data-no-i18n="protectOptionText ? 'true' : undefined"
+                            :translate="protectOptionText ? 'no' : undefined"
+                        >
+                            {{ selectedOption.label }}
+                        </span>
+                    </div>
+                </template>
+                <SelectValue v-else :placeholder="resolvedPlaceholder" />
+            </slot>
         </SelectTrigger>
 
         <SelectContent
+            :data-testid="contentTestId || undefined"
+            :disable-portal="disablePortal"
             class="w-[var(--reka-select-trigger-width)] rounded-[10px] border border-gray-200 bg-white py-1 shadow-lg"
         >
             <SelectItem
                 v-for="option in options"
                 :key="option.value"
                 :value="option.value"
+                :data-testid="
+                    optionTestIdPrefix ? `${optionTestIdPrefix}${option.value}` : undefined
+                "
                 class="flex w-full px-3 py-2 text-left text-sm transition-colors hover:bg-gray-100"
                 :class="{
                     'bg-primary-50 text-primary-600': option.value === modelValue,

apps/desktop/src/components/appIconMap.ts

@@ -40,6 +40,7 @@ import IconShow from '~icons/bx/show';
 import IconStop from '~icons/bx/stop';
 import IconTrash from '~icons/bx/trash';
 import IconTrashAlt from '~icons/bx/trash-alt';
+import IconUndo from '~icons/bx/undo';
 import IconWrench from '~icons/bx/wrench';
 import IconX from '~icons/bx/x';
 import IconXCircle from '~icons/bx/x-circle';
@@ -85,6 +86,7 @@ export const appIconMap = {
     stop: IconStop,
     tool: IconBriefcase,
     trash: IconTrash,
+    undo: IconUndo,
     bug: IconBug,
     wrench: IconWrench,
     x: IconX,

apps/desktop/src/components/ui/select/SelectContent.vue

@@ -8,12 +8,17 @@
         useForwardPropsEmits,
     } from 'reka-ui';
     import type { HTMLAttributes } from 'vue';
-    import { computed } from 'vue';
+    import { computed, useAttrs } from 'vue';
 
     import { cn } from '@/lib/utils';
 
+    defineOptions({
+        inheritAttrs: false,
+    });
+
     interface Props extends SelectContentProps {
         class?: HTMLAttributes['class'];
+        disablePortal?: boolean;
     }
 
     const props = withDefaults(defineProps<Props>(), {
@@ -23,23 +28,30 @@
         align: 'start',
         sideOffset: 4,
         avoidCollisions: true,
+        disablePortal: false,
     });
 
     const emits = defineEmits<SelectContentEmits>();
+    const attrs = useAttrs();
 
     const delegatedProps = computed(() => {
         const delegated = { ...props };
         Reflect.deleteProperty(delegated, 'class');
+        Reflect.deleteProperty(delegated, 'disablePortal');
         return delegated;
     });
 
     const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const contentProps = computed(() => ({
+        ...forwarded.value,
+        ...attrs,
+    }));
 </script>
 
 <template>
-    <SelectPortal>
+    <SelectPortal :disabled="disablePortal">
         <SelectContent
-            v-bind="forwarded"
+            v-bind="contentProps"
             :class="
                 cn(
                     'relative z-50 min-w-[8rem] overflow-hidden rounded-lg border border-gray-200 bg-white py-1 text-gray-900 shadow-lg',