This commit is contained in:
Baobhan Sith
2025-04-22 01:34:18 +08:00
parent 5bb1f5bb5f
commit ce8c7f3775
5 changed files with 379 additions and 194 deletions
+109 -60
View File
@@ -35,7 +35,9 @@ const underlineRef = ref<HTMLElement | null>(null);
// +++ 新增:存储上一次由切换器聚焦的 ID +++
const lastFocusedIdBySwitcher = ref<string | null>(null);
const isAltPressed = ref(false); // +++ 新增:跟踪 Alt 键是否按下 +++
const isAltPressed = ref(false); // 跟踪 Alt 键是否按下
const altShortcutKey = ref<string | null>(null);
const shortcutTriggeredInKeyDown = ref(false); // +++ 新增:标记快捷键是否在 keydown 中触发 +++
const updateUnderline = async () => {
await nextTick(); // 等待 DOM 更新
@@ -93,83 +95,130 @@ const closeStyleCustomizer = () => {
appearanceStore.toggleStyleCustomizer(false);
};
// +++ 新增:处理 Alt 键按下的事件处理函数 +++
const handleAltKeyDown = (event: KeyboardEvent) => {
// 只在 Alt 键首次按下时设置状态,忽略重复事件
// +++ 修改:处理 Alt 键按下的事件处理函数,并记录快捷键 +++
const handleAltKeyDown = async (event: KeyboardEvent) => { // +++ 改为 async +++
// 只在 Alt 键首次按下时设置状态
if (event.key === 'Alt' && !event.repeat) {
isAltPressed.value = true;
altShortcutKey.value = null;
shortcutTriggeredInKeyDown.value = false; // +++ 重置标志位 +++
// console.log('[App] Alt key pressed down.');
} else if (isAltPressed.value && event.key !== 'Alt') {
// 如果 Alt 正被按住,但按下了其他非 Alt 键,则取消本次 Alt 触发
isAltPressed.value = false;
// console.log('[App] Alt sequence cancelled by other key press.');
} else if (isAltPressed.value && !shortcutTriggeredInKeyDown.value && !['Control', 'Shift', 'Alt', 'Meta'].includes(event.key)) {
// 如果 Alt 正被按住,快捷键尚未触发,且按下了非修饰键
let key = event.key;
if (key.length === 1) key = key.toUpperCase();
if (/^[a-zA-Z0-9]$/.test(key)) {
altShortcutKey.value = key; // 记录按键
const shortcutString = `Alt+${key}`;
console.log(`[App] KeyDown: Alt+${key} detected. Checking shortcut: ${shortcutString}`);
const targetId = focusSwitcherStore.getFocusTargetIdByShortcut(shortcutString);
if (targetId) {
console.log(`[App] KeyDown: Shortcut match found. Targeting ID: ${targetId}`);
event.preventDefault(); // 阻止默认行为 (如菜单)
const success = await focusSwitcherStore.focusTarget(targetId); // +++ 立即尝试聚焦 +++
if (success) {
console.log(`[App] KeyDown: Successfully focused ${targetId} via shortcut.`);
lastFocusedIdBySwitcher.value = targetId;
shortcutTriggeredInKeyDown.value = true; // +++ 设置标志位 +++
} else {
console.log(`[App] KeyDown: Failed to focus ${targetId} via shortcut action.`);
// 聚焦失败,可以选择是否取消 Alt 状态,暂时不处理,让 keyup 重置
}
} else {
console.log(`[App] KeyDown: No configured shortcut found for ${shortcutString}.`);
// 没有匹配的快捷键,可以选择取消 Alt 状态以允许默认行为,或保持状态等待 keyup
// isAltPressed.value = false;
// altShortcutKey.value = null;
}
} else {
// 按下无效键 (非字母数字),取消 Alt 状态
isAltPressed.value = false;
altShortcutKey.value = null;
shortcutTriggeredInKeyDown.value = false;
console.log('[App] KeyDown: Alt sequence cancelled by non-alphanumeric key press.');
}
} else if (isAltPressed.value && ['Control', 'Shift', 'Meta'].includes(event.key)) {
// 按下其他修饰键,取消 Alt 状态
isAltPressed.value = false;
altShortcutKey.value = null;
shortcutTriggeredInKeyDown.value = false;
console.log('[App] KeyDown: Alt sequence cancelled by other modifier key press.');
}
};
// +++ 修改:全局键盘事件处理函数,现在监听 keyup +++
// +++ 修改:全局键盘事件处理函数,监听 keyup,优先处理快捷键 +++
const handleGlobalKeyUp = async (event: KeyboardEvent) => {
// 仅当 Alt 键松开,并且之前是被独立按下的状态时触发
if (event.key === 'Alt' && isAltPressed.value) {
isAltPressed.value = false; // 重置状态
event.preventDefault(); // 阻止 Alt 键松开时的默认行为 (如果有的话)
console.log('[App] Alt key released, attempting focus switch.');
if (event.key === 'Alt') {
const altWasPressed = isAltPressed.value; // 记录松开前的状态
const shortcutHandled = shortcutTriggeredInKeyDown.value; // 记录是否在 keydown 处理
// +++ Log: 打印当前的配置序列 +++
console.log('[App] Current configured sequence in store:', JSON.stringify(focusSwitcherStore.configuredSequence));
// 总是重置状态
isAltPressed.value = false;
altShortcutKey.value = null;
shortcutTriggeredInKeyDown.value = false;
// --- 确定当前焦点位置 ---
// 优先使用上次切换器聚焦的 ID
let currentFocusId: string | null = lastFocusedIdBySwitcher.value;
console.log(`[App] Alt released. Last focused by switcher: ${currentFocusId}`);
if (altWasPressed && !shortcutHandled) {
// 如果 Alt 之前是按下的,并且没有在 keydown 中处理快捷键,则执行顺序切换
console.log('[App] KeyUp: Alt released without a handled shortcut. Attempting sequential focus switch.');
event.preventDefault(); // 仅在执行顺序切换时阻止默认行为
// 如果上次切换器聚焦的 ID 不存在,尝试从 document.activeElement 获取
if (!currentFocusId) {
const activeElement = document.activeElement as HTMLElement;
if (activeElement && activeElement.hasAttribute('data-focus-id')) {
currentFocusId = activeElement.getAttribute('data-focus-id');
console.log(`[App] Found focus ID from activeElement: ${currentFocusId}`);
} else {
console.log(`[App] Could not determine current focus ID from activeElement either.`);
// --- 顺序切换逻辑 (保持不变) ---
let currentFocusId: string | null = lastFocusedIdBySwitcher.value;
console.log(`[App] Sequential switch. Last focused by switcher: ${currentFocusId}`);
if (!currentFocusId) {
const activeElement = document.activeElement as HTMLElement;
if (activeElement && activeElement.hasAttribute('data-focus-id')) {
currentFocusId = activeElement.getAttribute('data-focus-id');
console.log(`[App] Sequential switch. Found focus ID from activeElement: ${currentFocusId}`);
} else {
console.log(`[App] Sequential switch. Could not determine current focus ID.`);
}
}
const configuredItems = focusSwitcherStore.configuredItems;
if (configuredItems.length === 0) {
console.log('[App] No focus sequence configured.');
return;
}
let focused = false;
for (let i = 0; i < configuredItems.length; i++) {
const nextFocusId = focusSwitcherStore.getNextFocusTargetId(currentFocusId);
if (!nextFocusId) {
console.warn('[App] Could not determine next focus target ID in sequence.');
break;
}
}
// --- 重构后的查找和聚焦逻辑 (保持不变) ---
const sequence = focusSwitcherStore.configuredSequence;
if (sequence.length === 0) {
console.log('[App] No focus sequence configured.');
return;
}
console.log(`[App] Sequential switch. Trying to focus target ID: ${nextFocusId}`);
const success = await focusSwitcherStore.focusTarget(nextFocusId);
// 尝试聚焦下一个目标,循环最多一次
let focused = false;
for (let i = 0; i < sequence.length; i++) {
const nextFocusId = focusSwitcherStore.getNextFocusTargetId(currentFocusId);
if (!nextFocusId) {
console.warn('[App] Could not determine next focus target ID.');
break;
if (success) {
console.log(`[App] Successfully focused ${nextFocusId} sequentially.`);
lastFocusedIdBySwitcher.value = nextFocusId;
focused = true;
break;
} else {
console.log(`[App] Failed to focus ${nextFocusId} sequentially. Trying next...`);
currentFocusId = nextFocusId;
}
}
console.log(`[App] Trying to focus target ID: ${nextFocusId}`);
const success = await focusSwitcherStore.focusTarget(nextFocusId);
if (success) {
console.log(`[App] Successfully focused ${nextFocusId}.`);
lastFocusedIdBySwitcher.value = nextFocusId;
focused = true;
break;
} else {
console.log(`[App] Failed to focus ${nextFocusId}. Trying next in sequence...`);
currentFocusId = nextFocusId;
if (!focused) {
console.log('[App] Cycled through sequence, no target could be focused.');
lastFocusedIdBySwitcher.value = null;
}
}
// --- 顺序切换逻辑结束 ---
if (!focused) {
console.log('[App] Cycled through sequence, no target could be focused.');
lastFocusedIdBySwitcher.value = null;
} else if (shortcutHandled) {
console.log('[App] KeyUp: Alt released, but shortcut was handled in keydown. No further action.');
// 如果需要在 keyup 时也阻止默认行为,可以在这里添加 event.preventDefault()
} else {
// Alt 松开,但 isAltPressed 已经是 false (例如被其他键取消了)
console.log('[App] KeyUp: Alt released, but sequence was already cancelled or not active.');
}
} else if (event.key === 'Alt') {
// 如果 Alt 松开,但 isAltPressed 是 false (例如被其他键取消了),确保状态被重置
isAltPressed.value = false;
}
};
@@ -1,9 +1,13 @@
<script setup lang="ts">
import { ref, computed, watch, reactive, type Ref } from 'vue'; // 添加 Ref
import { useI18n } from 'vue-i18n';
import draggable from 'vuedraggable'; // 导入 draggable
import { useFocusSwitcherStore, type FocusableInput } from '../stores/focusSwitcher.store'; // 导入 Store 和类型
import { storeToRefs } from 'pinia'; // 导入 storeToRefs
import draggable from 'vuedraggable';
import { useFocusSwitcherStore, type FocusableInput, type ConfiguredFocusableInput } from '../stores/focusSwitcher.store'; // +++ 导入新接口 +++
import { storeToRefs } from 'pinia';
// --- 移除本地类型定义 ---
// --- Props ---
const props = defineProps({
@@ -33,23 +37,26 @@ const dialogStyle = reactive({
});
const hasChanges = ref(false);
// 本地副本,用于在弹窗内编辑而不直接修改 store
const localSequence: Ref<FocusableInput[]> = ref([]);
// +++ 存储原始序列 ID,用于比较 +++
const originalSequenceIds: Ref<string[]> = ref([]);
const localSequence: Ref<ConfiguredFocusableInput[]> = ref([]); // +++ 使用导入的接口 +++
// +++ 存储原始序列(包含 ID 和快捷键),用于比较 +++
const originalSequence: Ref<ConfiguredFocusableInput[]> = ref([]); // +++ 使用导入的接口 +++
// --- Watchers ---
watch(() => props.isVisible, (newValue) => {
if (newValue) {
// 从 Store 加载当前配置到本地副本
// 使用深拷贝确保 localSequence 是独立的
const loadedSequence = focusSwitcherStore.getConfiguredInputs; // 直接获取 getter 的值
console.log('[FocusSwitcherConfigurator] Loading sequence from store getter...'); // +++ Log: Start loading +++
localSequence.value = JSON.parse(JSON.stringify(loadedSequence));
// +++ 存储原始 ID 序列 +++
originalSequenceIds.value = loadedSequence.map(item => item.id);
// 从 Store 加载当前配置到本地副本
// !!! 注意:Store 现在也需要支持快捷键,这里暂时假设它返回的数据包含 shortcut !!!
// 假设 getConfiguredInputs 返回的是 LocalFocusableInput[] 或能转换的类型
const loadedSequenceFromStore = focusSwitcherStore.getConfiguredInputs; // 这个 getter 可能需要修改
console.log('[FocusSwitcherConfigurator] Loading sequence from store getter...');
// 深拷贝,并确保每个项目都有 shortcut 属性(可能为 undefined
// Store getter 现在返回正确的类型,可以直接深拷贝
localSequence.value = JSON.parse(JSON.stringify(loadedSequenceFromStore));
originalSequence.value = JSON.parse(JSON.stringify(loadedSequenceFromStore)); // 同样直接拷贝
hasChanges.value = false;
console.log('[FocusSwitcherConfigurator] Dialog opened. Loaded sequence to local copy:', localSequence.value); // +++ Log: Loaded local +++
console.log('[FocusSwitcherConfigurator] Original sequence IDs stored:', originalSequenceIds.value); // +++ Log: Stored original +++
console.log('[FocusSwitcherConfigurator] Dialog opened. Loaded sequence to local copy:', localSequence.value);
console.log('[FocusSwitcherConfigurator] Original sequence stored:', originalSequence.value);
// 重置/计算初始位置和大小
requestAnimationFrame(() => {
if (dialogRef.value) {
@@ -68,14 +75,10 @@ watch(() => props.isVisible, (newValue) => {
}
});
// 监听本地序列变化,标记未保存更改
// 监听本地序列(包括快捷键)变化,标记未保存更改
watch(localSequence, (currentLocalSequence) => {
// 直接比较当前本地序列的 ID 和原始 ID 序列
const currentIds = currentLocalSequence.map(item => item.id);
const originalIds = originalSequenceIds.value;
// 比较 JSON 字符串看是否有变化
const hasChanged = JSON.stringify(currentIds) !== JSON.stringify(originalIds); // +++ Calculate change status +++
// 比较当前本地序列和原始序列的 JSON 字符串
const hasChanged = JSON.stringify(currentLocalSequence) !== JSON.stringify(originalSequence.value);
if (hasChanged) {
// console.log('[FocusSwitcherConfigurator] Local sequence changed.'); // +++ Log: Changed +++
hasChanges.value = true;
@@ -99,11 +102,15 @@ const closeDialog = () => {
};
const saveConfiguration = () => {
// 从本地副本提取 ID 序列
const newSequenceIds = localSequence.value.map(item => item.id);
console.log('[FocusSwitcherConfigurator] Saving configuration. Sequence IDs to save:', newSequenceIds); // +++ Log: Saving IDs +++
focusSwitcherStore.updateSequence(newSequenceIds); // 更新 Store 中的序列 (这会触发保存到后端)
console.log('[FocusSwitcherConfigurator] Configuration save process triggered via updateSequence.'); // +++ Log: Save triggered +++
// 提取仅包含 id 和 shortcut 的配置项数组
const configToSave = localSequence.value.map(item => ({
id: item.id,
shortcut: item.shortcut || undefined, // 空字符串视为未设置
}));
console.log('[FocusSwitcherConfigurator] Saving configuration. Config to save:', configToSave);
// 调用 Store 中正确的更新函数
focusSwitcherStore.updateConfiguration(configToSave);
console.log('[FocusSwitcherConfigurator] Configuration save process triggered via updateConfiguration.');
hasChanges.value = false;
emit('close'); // 保存后关闭
};
@@ -163,16 +170,26 @@ const localAvailableInputs = computed(() => {
tag="ul"
class="draggable-list configured-list"
item-key="id"
:group="{ name: 'focus-inputs', put: true }" <!-- 明确允许放入 -->
:group="{ name: 'focus-inputs', put: true }"
handle=".drag-handle"
>
<template #item="{ element, index }: { element: FocusableInput, index: number }">
<li class="draggable-item">
<i class="fas fa-grip-vertical drag-handle"></i>
<span class="item-label">{{ element.label }}</span>
<template #item="{ element, index }: { element: ConfiguredFocusableInput, index: number }">
<div> <!-- Wrap the content in a single div -->
<li class="draggable-item">
<i class="fas fa-grip-vertical drag-handle"></i>
<span class="item-label">{{ element.label }}</span>
<!-- +++ 添加快捷键输入框 +++ -->
<input
type="text"
v-model="element.shortcut"
class="shortcut-input"
:placeholder="t('focusSwitcher.shortcutPlaceholder')"
@keydown.prevent="captureShortcut($event, element)"
/>
<!-- 添加移除按钮 -->
<button @click="localSequence.splice(index, 1)" class="remove-button" :title="t('common.remove', '移除')">&times;</button>
</li>
</li>
</div>
</template>
<template #footer>
<li v-if="localSequence.length === 0" class="no-items-placeholder">
@@ -193,6 +210,42 @@ const localAvailableInputs = computed(() => {
</div>
</template>
<script lang="ts">
// +++ 在 <script setup> 之外定义辅助函数(如果需要更复杂的逻辑或重用)+++
// 或者直接在 setup 内部定义 captureShortcut
// 内部定义 captureShortcut
const captureShortcut = (event: KeyboardEvent, element: ConfiguredFocusableInput) => { // +++ 使用导入的接口 +++
if (event.key === 'Alt' || event.key === 'Control' || event.key === 'Shift' || event.key === 'Meta') {
// 忽略单独的修饰键按下
return;
}
if (event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey) {
// 必须是 Alt + 非修饰键
let key = event.key;
if (key.length === 1) { // 将小写字母转为大写
key = key.toUpperCase();
}
// 可以添加更多验证,例如只允许字母、数字等
if (/^[a-zA-Z0-9]$/.test(key)) { // 简化:只允许单个字母或数字
element.shortcut = `Alt+${key}`;
} else if (key === 'Backspace' || key === 'Delete') {
element.shortcut = ''; // 允许使用 Backspace 或 Delete 清空
} else {
// 可选:提示不支持的键
console.warn(`[FocusSwitcherConfigurator] Unsupported key for shortcut: ${key}`);
}
} else if (event.key === 'Backspace' || event.key === 'Delete') {
// 允许单独按 Backspace 或 Delete 清空 (即使没有 Alt)
element.shortcut = '';
} else {
// 可选:如果按下非 Alt 组合键,可以清空或提示
// console.log('[FocusSwitcherConfigurator] Invalid shortcut combination.');
}
};
</script>
<style scoped>
/* 样式很大程度上复用 LayoutConfigurator,但使用不同的类名以避免冲突 */
.focus-switcher-overlay {
@@ -277,13 +330,32 @@ h3 {
flex-grow: 1; /* 占据剩余空间 */
overflow: hidden; /* 隐藏溢出文本 */
text-overflow: ellipsis; /* 显示省略号 */
white-space: nowrap; /* 防止换行 */
white-space: nowrap;
margin-right: 0.5rem; /* 与快捷键输入框保持间距 */
}
/* +++ 新增快捷键输入框样式 +++ */
.shortcut-input {
width: 100px; /* 固定宽度 */
padding: 0.3rem 0.5rem;
border: 1px solid var(--border-color);
border-radius: 3px;
background-color: var(--input-bg-color);
color: var(--text-color);
font-size: 0.85rem;
text-align: center;
margin-left: auto; /* 将其推到标签和移除按钮之间 */
margin-right: 0.5rem; /* 与移除按钮保持间距 */
flex-shrink: 0; /* 防止被压缩 */
}
.shortcut-input::placeholder {
color: #888;
font-style: italic;
}
.remove-button {
background: none; border: none; color: var(--text-color-secondary);
font-size: 1.2rem; cursor: pointer; padding: 0 0.3rem; line-height: 1;
margin-left: auto; /* 推到最右边 */
flex-shrink: 0; /* 防止被压缩 */
/* margin-left: auto; 现在由 shortcut-input 推 */
}
.remove-button:hover { color: var(--danger-color, red); }
.no-items-placeholder {
+12 -8
View File
@@ -828,16 +828,20 @@
"focusSwitcher": {
"configTitle": "Configure Focus Switcher",
"availableInputs": "Available Inputs",
"configuredSequence": "Configured Sequence",
"dragHere": "Drag here to add",
"configuredSequence": "Configured Sequence (Drag to Sort)",
"dragHere": "Drag inputs from the left here",
"allInputsConfigured": "All available inputs are configured",
"input": {
"commandHistorySearch": "Search command history...",
"quickCommandsSearch": "Search quick commands...",
"fileManagerSearch": "Search files...",
"commandInput": "Enter command...",
"terminalSearch": "Search terminal..."
}
"commandHistorySearch": "Command History Search",
"quickCommandsSearch": "Quick Commands Search",
"fileManagerSearch": "File Manager Search",
"commandInput": "Command Input",
"terminalSearch": "Terminal Search",
"connectionListSearch": "Connection List Search",
"fileEditorActive": "File Editor"
},
"confirmClose": "You have unsaved changes. Are you sure you want to close?",
"shortcutPlaceholder": "e.g., Alt+K"
},
"dockerManager": {
"loading": "Loading Docker Containers...",
+12 -8
View File
@@ -833,16 +833,20 @@
"focusSwitcher": {
"configTitle": "配置焦点切换器",
"availableInputs": "可用输入源",
"configuredSequence": "已配置序列",
"dragHere": "拖拽到此处添加",
"configuredSequence": "已配置序列 (拖拽排序)",
"dragHere": "从左侧拖拽输入框到此处",
"allInputsConfigured": "所有可用输入源都已配置",
"input": {
"commandHistorySearch": "搜索命令历史...",
"quickCommandsSearch": "搜索快捷指令...",
"fileManagerSearch": "搜索文件...",
"commandInput": "输入命令...",
"terminalSearch": "搜索终端..."
}
"commandHistorySearch": "命令历史搜索",
"quickCommandsSearch": "快捷指令搜索",
"fileManagerSearch": "文件管理器搜索",
"commandInput": "命令输入",
"terminalSearch": "终端内搜索",
"connectionListSearch": "连接列表搜索",
"fileEditorActive": "文件编辑器"
},
"confirmClose": "有未保存的更改,确定要关闭吗?",
"shortcutPlaceholder": "例如 Alt+K"
},
"dockerManager": {
"loading": "正在加载 Docker 容器...",
@@ -9,13 +9,26 @@ export interface FocusableInput {
id: string; // 唯一标识符
label: string; // 用户友好的名称
// componentPath 和 selector 不再需要,聚焦完全依赖 focusAction
focusAction: () => boolean | Promise<boolean>; // 改为必需
focusAction: () => boolean | Promise<boolean>;
// shortcut?: string; // --- 从基础接口移除快捷键,因为它只在配置中相关 ---
}
// +++ 新增:定义包含快捷键的完整配置项接口 (用于 Store 内部和配置器) +++
export interface ConfiguredFocusableInput extends FocusableInput {
shortcut?: string; // 快捷键是可选的
}
// 定义存储在后端的配置项接口 (仅 ID 和 shortcut)
export interface ConfigurableFocusableItem {
id: string;
shortcut?: string; // 快捷键是可选的
}
// 定义 Store 的 State 接口 (可选但推荐)
interface FocusSwitcherState {
availableInputs: FocusableInput[];
configuredSequence: string[]; // 只存储 ID 序列
availableInputs: FocusableInput[]; // 保持不变,定义所有可用项及其基础信息
// configuredSequence: string[]; // --- 移除旧的状态 ---
configuredItems: ConfigurableFocusableItem[]; // +++ 新增:存储已配置项的 ID 和快捷键 +++
isConfiguratorVisible: boolean;
activateFileManagerSearchTrigger: number;
activateTerminalSearchTrigger: number;
@@ -38,7 +51,8 @@ export const useFocusSwitcherStore = defineStore('focusSwitcher', () => {
{ id: 'connectionListSearch', label: t('focusSwitcher.input.connectionListSearch', '连接列表搜索'), focusAction: () => false },
{ id: 'fileEditorActive', label: t('focusSwitcher.input.fileEditorActive', '文件编辑器'), focusAction: () => false },
]);
const configuredSequence = ref<string[]>([]);
// const configuredSequence = ref<string[]>([]); // --- 移除旧的状态 ref ---
const configuredItems = ref<ConfigurableFocusableItem[]>([]); // +++ 新增:存储配置项的状态 ref +++
const isConfiguratorVisible = ref(false);
const activateFileManagerSearchTrigger = ref(0);
const activateTerminalSearchTrigger = ref(0);
@@ -48,83 +62,95 @@ export const useFocusSwitcherStore = defineStore('focusSwitcher', () => {
// --- Actions ---
// +++ 新增:从后端加载配置 +++
async function loadSequenceFromBackend() {
const apiUrl = '/api/v1/settings/focus-switcher-sequence'; // +++ 定义 API URL +++
console.log(`[FocusSwitcherStore] Attempting to load sequence from backend via: ${apiUrl}`); // +++ 更新日志 +++
// +++ 修改:从后端加载配置(包括快捷键) +++
async function loadConfigurationFromBackend() { // 重命名以反映加载的是完整配置
const apiUrl = '/api/v1/settings/focus-switcher-sequence'; // 假设 API 端点不变
console.log(`[FocusSwitcherStore] Attempting to load configuration (sequence & shortcuts) from backend via: ${apiUrl}`);
try {
// 注意:需要根据实际项目配置调整 API 路径和认证处理
const response = await fetch(apiUrl); // +++ 使用变量 +++
console.log(`[FocusSwitcherStore] Received response from ${apiUrl}. Status: ${response.status}`); // +++ 添加日志:响应状态 +++
const response = await fetch(apiUrl);
console.log(`[FocusSwitcherStore] Received response from ${apiUrl}. Status: ${response.status}`);
if (!response.ok) {
// +++ 添加日志:记录非 OK 状态 +++
console.error(`[FocusSwitcherStore] HTTP error from ${apiUrl}. Status: ${response.status}`);
throw new Error(`HTTP error! status: ${response.status}`);
}
const sequence = await response.json();
// +++ 添加日志:记录原始 JSON 数据 +++
console.log(`[FocusSwitcherStore] Raw JSON received from backend for sequence:`, JSON.stringify(sequence));
// *** 假设后端返回 ConfigurableFocusableItem[] 结构 ***
const loadedConfig = await response.json();
console.log(`[FocusSwitcherStore] Raw JSON received from backend:`, JSON.stringify(loadedConfig));
if (Array.isArray(sequence) && sequence.every(item => typeof item === 'string')) {
console.log('[FocusSwitcherStore] Sequence format is valid (string array). Filtering against available inputs...'); // +++ 添加日志 +++
// 验证加载的 ID 是否仍然存在于 availableInputs
// --- 验证和过滤 ---
if (Array.isArray(loadedConfig) && loadedConfig.every(item => typeof item?.id === 'string')) {
console.log('[FocusSwitcherStore] Configuration format seems valid (array of objects with id). Filtering against available inputs...');
const availableIds = new Set(availableInputs.value.map(input => input.id));
const filteredSequence = sequence.filter((id: string) => {
const isValid = availableIds.has(id);
const filteredConfig: ConfigurableFocusableItem[] = loadedConfig
.filter((item: any) => {
const isValid = availableIds.has(item.id);
if (!isValid) {
console.warn(`[FocusSwitcherStore] Filtered out invalid ID during load from backend: ${id}`);
console.warn(`[FocusSwitcherStore] Filtered out invalid ID during load: ${item.id}`);
}
return isValid;
});
configuredSequence.value = filteredSequence;
// +++ 更新日志:显示最终设置的值 +++
console.log('[FocusSwitcherStore] Successfully loaded and set configuredSequence:', JSON.stringify(configuredSequence.value));
})
.map((item: any) => ({ // 确保只保留 id 和 shortcut
id: item.id,
shortcut: typeof item.shortcut === 'string' && item.shortcut.startsWith('Alt+') ? item.shortcut : undefined // 验证快捷键格式
}));
configuredItems.value = filteredConfig;
console.log('[FocusSwitcherStore] Successfully loaded and set configuredItems:', JSON.stringify(configuredItems.value));
} else {
console.error('[FocusSwitcherStore] Invalid sequence format received from backend:', sequence);
configuredSequence.value = []; // 使用空数组作为回退
console.log('[FocusSwitcherStore] Set configuredSequence to empty array due to invalid format.'); // +++ 添加日志 +++
// --- 处理旧格式 (仅 ID 数组) 或无效格式 ---
if (Array.isArray(loadedConfig) && loadedConfig.every(item => typeof item === 'string')) {
console.warn('[FocusSwitcherStore] Received old format (string array) from backend. Converting to new structure without shortcuts.');
const availableIds = new Set(availableInputs.value.map(input => input.id));
const filteredSequence = loadedConfig.filter((id: string) => availableIds.has(id));
configuredItems.value = filteredSequence.map(id => ({ id })); // 转换为新结构,无快捷键
console.log('[FocusSwitcherStore] Converted old format to configuredItems:', JSON.stringify(configuredItems.value));
// 可以考虑触发一次保存,将转换后的新格式存回后端
// saveSequenceToBackend();
} else {
console.error('[FocusSwitcherStore] Invalid configuration format received from backend:', loadedConfig);
configuredItems.value = []; // 使用空数组作为回退
console.log('[FocusSwitcherStore] Set configuredItems to empty array due to invalid format.');
}
}
} catch (error) {
// +++ 添加日志:记录 fetch 或 JSON 解析错误 +++
console.error(`[FocusSwitcherStore] Failed to load or parse sequence from backend (${apiUrl}):`, error);
// 加载失败时可以考虑使用默认值或保持为空
configuredSequence.value = [];
console.log('[FocusSwitcherStore] Set configuredSequence to empty array due to loading error.'); // +++ 添加日志 +++
console.error(`[FocusSwitcherStore] Failed to load or parse configuration from backend (${apiUrl}):`, error);
configuredItems.value = [];
console.log('[FocusSwitcherStore] Set configuredItems to empty array due to loading error.');
}
}
// +++ 新增:保存配置到后端 +++
async function saveSequenceToBackend() {
const apiUrl = '/api/v1/settings/focus-switcher-sequence'; // +++ 定义 API URL +++
console.log(`[FocusSwitcherStore] Attempting to save sequence to backend via PUT: ${apiUrl}`); // +++ 更新日志 +++
// +++ 修改:保存配置到后端(包括快捷键) +++
async function saveConfigurationToBackend() { // 重命名以反映保存的是完整配置
const apiUrl = '/api/v1/settings/focus-switcher-sequence'; // 假设 API 端点不变
console.log(`[FocusSwitcherStore] Attempting to save configuration (sequence & shortcuts) to backend via PUT: ${apiUrl}`);
try {
const sequenceToSave = configuredSequence.value;
console.log('[FocusSwitcherStore] Sequence data to save:', JSON.stringify(sequenceToSave)); // +++ 添加日志 +++
// 注意:需要根据实际项目配置调整 API 路径和认证处理
const response = await fetch(apiUrl, { // +++ 使用变量 +++
// *** 构造后端期望的请求体:{ sequence: string[] } ***
const sequenceIds = configuredItems.value.map(item => item.id);
const requestBody = { sequence: sequenceIds };
console.log('[FocusSwitcherStore] Configuration data to save (backend format):', JSON.stringify(requestBody));
const response = await fetch(apiUrl, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
// 如果需要认证,添加 Authorization header
// 'Authorization': `Bearer ${your_token}`
// Auth headers if needed
},
body: JSON.stringify({ sequence: sequenceToSave }),
body: JSON.stringify(requestBody), // *** 发送符合后端格式的请求体 ***
});
console.log(`[FocusSwitcherStore] Received response from PUT ${apiUrl}. Status: ${response.status}`); // +++ 添加日志 +++
console.log(`[FocusSwitcherStore] Received response from PUT ${apiUrl}. Status: ${response.status}`);
if (!response.ok) {
const errorData = await response.json().catch(() => ({})); // 尝试解析错误体
console.error(`[FocusSwitcherStore] Save failed. Status: ${response.status}, Error data:`, errorData); // +++ 添加日志 +++
const errorData = await response.json().catch(() => ({}));
console.error(`[FocusSwitcherStore] Save failed. Status: ${response.status}, Error data:`, errorData);
throw new Error(`HTTP error! status: ${response.status}, message: ${errorData.message || 'Unknown error'}`);
}
const result = await response.json();
console.log('[FocusSwitcherStore] Configuration successfully saved to backend. Response message:', result.message); // +++ 更新日志 +++
console.log('[FocusSwitcherStore] Configuration successfully saved to backend. Response message:', result.message);
} catch (error) {
console.error(`[FocusSwitcherStore] Failed to save sequence to backend (${apiUrl}):`, error); // +++ 更新日志 +++
// 可以在这里触发 UI 通知用户保存失败
console.error(`[FocusSwitcherStore] Failed to save configuration to backend (${apiUrl}):`, error);
// Notify user of failure
}
}
@@ -158,15 +184,23 @@ export const useFocusSwitcherStore = defineStore('focusSwitcher', () => {
}
*/
// 更新切换顺序 (现在也触发保存到后端)
function updateSequence(newSequence: string[]) {
console.log('[FocusSwitcherStore] updateSequence called with:', JSON.stringify(newSequence)); // +++ 更新日志 +++
// +++ 修改:更新配置(包括顺序和快捷键) +++
function updateConfiguration(newConfig: ConfigurableFocusableItem[]) { // 重命名并修改参数类型
console.log('[FocusSwitcherStore] updateConfiguration called with new configuration:', JSON.stringify(newConfig));
const availableIds = new Set(availableInputs.value.map(input => input.id));
const filteredSequence = newSequence.filter(id => availableIds.has(id));
configuredSequence.value = filteredSequence;
console.log('[FocusSwitcherStore] configuredSequence updated locally to:', JSON.stringify(configuredSequence.value)); // +++ 更新日志 +++
// 过滤掉无效的 ID,并验证/清理快捷键
const filteredConfig = newConfig
.filter(item => availableIds.has(item.id))
.map(item => ({
id: item.id,
shortcut: typeof item.shortcut === 'string' && item.shortcut.startsWith('Alt+') ? item.shortcut : undefined
}));
configuredItems.value = filteredConfig;
console.log('[FocusSwitcherStore] configuredItems updated locally to:', JSON.stringify(configuredItems.value));
// 更新后立即保存到后端
saveSequenceToBackend();
saveConfigurationToBackend(); // 调用重命名后的保存函数
}
// 注册聚焦动作 (现在更新 availableInputs 中的 focusAction)
@@ -220,46 +254,68 @@ export const useFocusSwitcherStore = defineStore('focusSwitcher', () => {
}
}
// --- Getters ---
const getConfiguredInputs = computed((): FocusableInput[] => {
return configuredSequence.value
.map(id => availableInputs.value.find(input => input.id === id))
.filter((input): input is FocusableInput => input !== undefined);
// --- 修改 Getters ---
// +++ 修改:获取完整的已配置输入框信息(合并快捷键)+++
// 返回类型现在包含 shortcut,所以需要调整或确认 FocusableInput 定义
const getConfiguredInputs = computed((): ConfiguredFocusableInput[] => { // +++ 更新返回类型 +++
const inputsMap = new Map(availableInputs.value.map(input => [input.id, input]));
return configuredItems.value
.map(item => {
const baseInput = inputsMap.get(item.id);
if (!baseInput) return undefined;
// 创建一个新对象,类型为 ConfiguredFocusableInput
const configuredInput: ConfiguredFocusableInput = { // +++ 使用新类型 +++
...baseInput,
shortcut: item.shortcut,
};
return configuredInput;
})
.filter((input): input is ConfiguredFocusableInput => input !== undefined); // +++ 更新类型断言 +++
});
// +++ 修改:获取配置器中“可用”的输入框列表 +++
const getAvailableInputsForConfigurator = computed((): FocusableInput[] => {
const configuredIds = new Set(configuredSequence.value);
const configuredIds = new Set(configuredItems.value.map(item => item.id));
// 返回尚未配置的基础输入框信息(不需要快捷键)
return availableInputs.value.filter(input => !configuredIds.has(input.id));
});
// +++ 修改:获取序列中的下一个聚焦目标 ID +++
function getNextFocusTargetId(currentFocusedId: string | null): string | null {
if (configuredSequence.value.length === 0) {
if (configuredItems.value.length === 0) {
return null;
}
if (currentFocusedId === null) {
return configuredSequence.value[0];
return configuredItems.value[0].id; // 返回第一个配置项的 ID
}
const currentIndex = configuredSequence.value.indexOf(currentFocusedId);
const currentIndex = configuredItems.value.findIndex(item => item.id === currentFocusedId);
if (currentIndex === -1) {
return configuredSequence.value[0];
return configuredItems.value[0].id; // 如果当前 ID 不在配置中,返回第一个
}
const nextIndex = (currentIndex + 1) % configuredSequence.value.length;
return configuredSequence.value[nextIndex];
const nextIndex = (currentIndex + 1) % configuredItems.value.length;
return configuredItems.value[nextIndex].id; // 返回下一个配置项的 ID
}
// +++ 新增:根据快捷键获取目标 ID +++
function getFocusTargetIdByShortcut(shortcut: string): string | null {
const foundItem = configuredItems.value.find(item => item.shortcut === shortcut);
return foundItem?.id ?? null;
}
// --- Initialization ---
// Store 创建时自动从后端加载配置
console.log('[FocusSwitcherStore] Initializing store and scheduling loadSequenceFromBackend...'); // +++ 添加日志 +++
console.log('[FocusSwitcherStore] Initializing store and scheduling loadConfigurationFromBackend...'); // 使用新名称
nextTick(() => {
console.log('[FocusSwitcherStore] nextTick triggered, calling loadSequenceFromBackend.'); // +++ 添加日志 +++
loadSequenceFromBackend(); // +++ 调用新的加载函数 +++
console.log('[FocusSwitcherStore] nextTick triggered, calling loadConfigurationFromBackend.'); // 使用新名称
loadConfigurationFromBackend(); // 调用重命名后的加载函数
});
return {
// State
availableInputs,
configuredSequence,
// configuredSequence, // --- 移除 ---
configuredItems, // +++ 暴露新状态 +++
isConfiguratorVisible,
activateFileManagerSearchTrigger,
activateTerminalSearchTrigger,
@@ -267,16 +323,16 @@ export const useFocusSwitcherStore = defineStore('focusSwitcher', () => {
toggleConfigurator,
triggerFileManagerSearchActivation,
triggerTerminalSearchActivation,
loadSequenceFromBackend, // +++ 导出新的加载函数 +++
saveSequenceToBackend, // +++ 导出新的保存函数 +++
updateSequence,
// Getters
getConfiguredInputs,
getAvailableInputsForConfigurator,
getNextFocusTargetId,
registerFocusAction, // 暴露注册方法
unregisterFocusAction, // 暴露注销方法
// focusActions 不再需要暴露
focusTarget, // 暴露新的统一聚焦方法
loadConfigurationFromBackend, // +++ 使用新名称 +++
saveConfigurationToBackend, // +++ 使用新名称 +++
updateConfiguration, // +++ 使用新名称 +++
// Getters / Methods
getConfiguredInputs, // 已修改
getAvailableInputsForConfigurator, // 已修改
getNextFocusTargetId, // 已修改
getFocusTargetIdByShortcut, // +++ 新增 +++
registerFocusAction,
unregisterFocusAction,
focusTarget,
};
});