Baobhan Sith
547 lines
22 KiB
Vue
547 lines
22 KiB
Vue
<script setup lang="ts">
|
||
import { ref, computed, watch, reactive, type Ref } from 'vue'; // 添加 Ref
|
||
import { useI18n } from 'vue-i18n';
|
||
import draggable from 'vuedraggable';
|
||
import { useFocusSwitcherStore, type FocusableInput, type FocusItemConfig, type FocusSwitcherFullConfig } from '../stores/focusSwitcher.store'; // ++ 导入新接口 ++
|
||
import { storeToRefs } from 'pinia';
|
||
|
||
// 本地接口，仅用于右侧列表显示
|
||
interface SequenceDisplayItem extends FocusableInput {}
|
||
|
||
|
||
// --- Props ---
|
||
const props = defineProps({
|
||
isVisible: {
|
||
type: Boolean,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
// --- Emits ---
|
||
const emit = defineEmits(['close']);
|
||
|
||
// --- Setup ---
|
||
const { t } = useI18n();
|
||
const focusSwitcherStore = useFocusSwitcherStore(); // 实例化 Store
|
||
|
||
// --- State ---
|
||
const dialogRef = ref<HTMLElement | null>(null);
|
||
const initialDialogState = { width: 900, height: 600 }; // *** 增加初始尺寸 ***
|
||
const dialogStyle = reactive({
|
||
width: `${initialDialogState.width}px`,
|
||
height: `${initialDialogState.height}px`,
|
||
top: '50%',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -50%)',
|
||
position: 'absolute' as 'absolute',
|
||
});
|
||
const hasChanges = ref(false);
|
||
// 本地副本，用于在弹窗内编辑
|
||
const localSequence = ref<SequenceDisplayItem[]>([]); // 右侧列表，只关心顺序和基础信息
|
||
const localItemConfigs = ref<Record<string, FocusItemConfig>>({}); // 所有项目的配置 (快捷键)
|
||
const originalConfig = ref<FocusSwitcherFullConfig | null>(null); // 存储原始完整配置用于比较
|
||
|
||
// --- Watchers ---
|
||
watch(() => props.isVisible, async (newValue) => { // ++ Make async for potential backend load ++
|
||
if (newValue) {
|
||
// --- 加载完整配置 ---
|
||
// 确保 Store 已初始化 (如果 Store 还没有加载完)
|
||
// await focusSwitcherStore.loadConfigurationFromBackend(); // 如果 Store 初始化时未加载，则在此加载
|
||
|
||
const currentSequenceOrder = focusSwitcherStore.sequenceOrder;
|
||
const currentItemConfigs = focusSwitcherStore.itemConfigs;
|
||
const allAvailableInputs = focusSwitcherStore.availableInputs; // 获取所有可用输入的基础信息
|
||
const inputsMap = new Map(allAvailableInputs.map(input => [input.id, input]));
|
||
|
||
console.log('[FocusSwitcherConfigurator] Loading full config from store...');
|
||
console.log('[FocusSwitcherConfigurator] Store sequenceOrder:', JSON.stringify(currentSequenceOrder));
|
||
console.log('[FocusSwitcherConfigurator] Store itemConfigs:', JSON.stringify(currentItemConfigs));
|
||
|
||
// 构建本地右侧列表 (localSequence)
|
||
localSequence.value = currentSequenceOrder
|
||
.map(id => inputsMap.get(id)) // 获取基础信息
|
||
.filter((input): input is SequenceDisplayItem => input !== undefined); // 过滤掉无效 ID 并断言类型
|
||
|
||
// 构建本地所有项目配置 (localItemConfigs) - 深拷贝
|
||
// 确保所有 availableInputs 都有一个条目，即使没有快捷键
|
||
const initialConfigs: Record<string, FocusItemConfig> = {};
|
||
allAvailableInputs.forEach(input => {
|
||
initialConfigs[input.id] = { ... (currentItemConfigs[input.id] || {}) }; // 复制 store 中的配置，或创建空对象
|
||
});
|
||
localItemConfigs.value = JSON.parse(JSON.stringify(initialConfigs));
|
||
|
||
// 存储原始完整配置用于比较
|
||
originalConfig.value = JSON.parse(JSON.stringify({
|
||
sequence: currentSequenceOrder,
|
||
shortcuts: currentItemConfigs
|
||
}));
|
||
|
||
hasChanges.value = false;
|
||
console.log('[FocusSwitcherConfigurator] Dialog opened. Loaded localSequence:', JSON.stringify(localSequence.value));
|
||
console.log('[FocusSwitcherConfigurator] Loaded localItemConfigs:', JSON.stringify(localItemConfigs.value));
|
||
console.log('[FocusSwitcherConfigurator] Original full config stored:', JSON.stringify(originalConfig.value));
|
||
// 重置/计算初始位置和大小
|
||
requestAnimationFrame(() => {
|
||
if (dialogRef.value) {
|
||
const initialWidth = initialDialogState.width;
|
||
const initialHeight = initialDialogState.height;
|
||
dialogStyle.width = `${initialWidth}px`;
|
||
dialogStyle.height = `${initialHeight}px`;
|
||
dialogStyle.left = `${(window.innerWidth - initialWidth) / 2}px`;
|
||
dialogStyle.top = `${(window.innerHeight - initialHeight) / 2}px`;
|
||
dialogStyle.transform = 'none';
|
||
dialogStyle.position = 'absolute';
|
||
}
|
||
});
|
||
} else {
|
||
// 清理工作（如果需要）
|
||
}
|
||
});
|
||
|
||
// 监听本地序列（包括快捷键）变化，标记未保存更改
|
||
// --- 修改：监听 localSequence 和 localItemConfigs 的变化 ---
|
||
watch([localSequence, localItemConfigs], () => {
|
||
if (!originalConfig.value) return; // Not initialized yet
|
||
|
||
// 1. Construct the current configuration based on local state
|
||
const currentFullConfig: FocusSwitcherFullConfig = {
|
||
sequence: localSequence.value.map(item => item.id),
|
||
shortcuts: {},
|
||
};
|
||
// Populate shortcuts, only including those with a defined and non-empty string value
|
||
focusSwitcherStore.availableInputs.forEach(input => {
|
||
const localConfig = localItemConfigs.value[input.id];
|
||
// Only include if shortcut is defined, is a string, and is not empty
|
||
if (localConfig?.shortcut && typeof localConfig.shortcut === 'string' && localConfig.shortcut.trim() !== '') {
|
||
currentFullConfig.shortcuts[input.id] = { shortcut: localConfig.shortcut };
|
||
}
|
||
});
|
||
|
||
// 2. Construct a comparable version of the original config
|
||
// Ensure original shortcuts only contain defined and non-empty string values for fair comparison
|
||
const comparableOriginalConfig: FocusSwitcherFullConfig = {
|
||
sequence: originalConfig.value.sequence,
|
||
shortcuts: {},
|
||
};
|
||
for (const id in originalConfig.value.shortcuts) {
|
||
const originalShortcut = originalConfig.value.shortcuts[id]?.shortcut;
|
||
// Only include if shortcut was defined, is a string, and is not empty
|
||
if (originalShortcut && typeof originalShortcut === 'string' && originalShortcut.trim() !== '') {
|
||
comparableOriginalConfig.shortcuts[id] = { shortcut: originalShortcut };
|
||
}
|
||
}
|
||
|
||
// 3. Compare the stringified versions
|
||
const changed = JSON.stringify(currentFullConfig) !== JSON.stringify(comparableOriginalConfig);
|
||
|
||
hasChanges.value = changed;
|
||
// console.log(`[FocusSwitcherConfigurator] Comparing:`);
|
||
// console.log("Current:", JSON.stringify(currentFullConfig));
|
||
// console.log("Original:", JSON.stringify(comparableOriginalConfig));
|
||
// console.log(`[FocusSwitcherConfigurator] Changes detected: ${changed}`);
|
||
|
||
}, { deep: true });
|
||
|
||
|
||
// --- Methods ---
|
||
const closeDialog = () => {
|
||
if (hasChanges.value) {
|
||
if (confirm(t('focusSwitcher.confirmClose', '有未保存的更改，确定要关闭吗？'))) {
|
||
emit('close');
|
||
}
|
||
} else {
|
||
emit('close');
|
||
}
|
||
};
|
||
|
||
const saveConfiguration = () => {
|
||
// 构造 FocusSwitcherFullConfig 对象
|
||
const newSequence = localSequence.value.map(item => item.id);
|
||
// 清理 shortcuts，移除没有快捷键的条目 (可选，取决于后端是否需要)
|
||
const newShortcuts: Record<string, FocusItemConfig> = {};
|
||
for (const id in localItemConfigs.value) {
|
||
if (localItemConfigs.value[id]?.shortcut) {
|
||
newShortcuts[id] = { shortcut: localItemConfigs.value[id].shortcut };
|
||
}
|
||
// 如果需要保存空快捷键的记录，则取消 if 条件
|
||
// newShortcuts[id] = { shortcut: localItemConfigs.value[id]?.shortcut };
|
||
}
|
||
|
||
const fullConfigToSave: FocusSwitcherFullConfig = {
|
||
sequence: newSequence,
|
||
shortcuts: newShortcuts,
|
||
};
|
||
|
||
console.log('[FocusSwitcherConfigurator] Saving full configuration:', JSON.stringify(fullConfigToSave));
|
||
focusSwitcherStore.updateConfiguration(fullConfigToSave); // 调用 Store 更新函数
|
||
console.log('[FocusSwitcherConfigurator] Configuration save process triggered.');
|
||
hasChanges.value = false;
|
||
emit('close'); // 保存后关闭
|
||
};
|
||
|
||
const removeFromSequence = (index: number) => {
|
||
if (index >= 0 && index < localSequence.value.length) {
|
||
localSequence.value.splice(index, 1);
|
||
// hasChanges 会在 watch 中自动更新
|
||
}
|
||
};
|
||
|
||
// --- Computed ---
|
||
// ++ 修改：计算属性，获取不在右侧序列中的项目 (用于左侧列表) ++
|
||
const localAvailableInputs = computed(() => {
|
||
const sequenceIds = new Set(localSequence.value.map(item => item.id));
|
||
// 从所有可用输入中过滤掉已在序列中的，并合并本地快捷键配置
|
||
return focusSwitcherStore.availableInputs
|
||
.filter(input => !sequenceIds.has(input.id))
|
||
.map(input => ({
|
||
...input,
|
||
// shortcut: localItemConfigs.value[input.id]?.shortcut // 快捷键在下方单独配置
|
||
}));
|
||
});
|
||
|
||
// 注意：已配置的列表直接使用 localSequence ref
|
||
// 原先的 availableInputsForConfigurator getter 在 store 中仍然存在，但我们现在使用本地计算的版本以实现实时更新
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div v-if="isVisible" class="focus-switcher-overlay" @click.self="closeDialog">
|
||
<div ref="dialogRef" class="focus-switcher-dialog" :style="dialogStyle">
|
||
<header class="dialog-header">
|
||
<h2>{{ t('focusSwitcher.configTitle', '配置 Alt 焦点切换') }}</h2>
|
||
<button class="close-button" @click="closeDialog" :title="t('common.close', '关闭')">×</button>
|
||
</header>
|
||
|
||
<!-- 将原 main 内容包裹，并改用新 class -->
|
||
<div class="dialog-main-content">
|
||
<!-- +++ 创建第一行容器 +++ -->
|
||
<div class="top-row">
|
||
<section class="available-inputs-section">
|
||
<h3>{{ t('focusSwitcher.availableInputs', '可用输入框') }}</h3>
|
||
<draggable
|
||
:list="localAvailableInputs"
|
||
tag="ul"
|
||
class="draggable-list available-list"
|
||
item-key="id"
|
||
:group="{ name: 'focus-inputs', pull: true, put: false }"
|
||
:sort="false"
|
||
>
|
||
<template #item="{ element }: { element: FocusableInput & FocusItemConfig }">
|
||
<li class="draggable-item">
|
||
<i class="fas fa-grip-vertical drag-handle"></i>
|
||
<span class="item-label">{{ element.label }}</span>
|
||
<!-- 快捷键设置在下方 -->
|
||
</li>
|
||
</template>
|
||
<template #footer>
|
||
<li v-if="localAvailableInputs.length === 0" class="no-items-placeholder">
|
||
<span>{{ t('focusSwitcher.allInputsConfigured', '所有输入框都已配置') }}</span>
|
||
</li>
|
||
</template>
|
||
</draggable>
|
||
</section>
|
||
|
||
<section class="configured-sequence-section">
|
||
<h3>{{ t('focusSwitcher.configuredSequence', '切换顺序 (拖拽排序)') }}</h3>
|
||
<draggable
|
||
:list="localSequence"
|
||
tag="ul"
|
||
class="draggable-list configured-list"
|
||
item-key="id"
|
||
:group="{ name: 'focus-inputs', put: true }"
|
||
handle=".drag-handle"
|
||
>
|
||
<template #item="{ element, index }: { element: SequenceDisplayItem, index: number }">
|
||
<li class="draggable-item">
|
||
<i class="fas fa-grip-vertical drag-handle"></i>
|
||
<span class="item-label">{{ element.label }}</span>
|
||
<!-- 快捷键设置在下方 -->
|
||
<button
|
||
class="remove-button"
|
||
@click="removeFromSequence(index)"
|
||
:title="t('common.remove', '移除')"
|
||
>×</button>
|
||
</li>
|
||
</template>
|
||
<template #footer>
|
||
<li v-if="localSequence.length === 0" class="no-items-placeholder">
|
||
{{ t('focusSwitcher.dragHere', '从左侧拖拽输入框到此处') }}
|
||
</li>
|
||
</template>
|
||
</draggable>
|
||
</section>
|
||
</div>
|
||
<!-- +++ 第一行容器结束 +++ -->
|
||
|
||
<!-- +++ 第二行：快捷键配置区域 +++ -->
|
||
<section class="shortcut-config-section">
|
||
<h3>{{ t('focusSwitcher.shortcutSettings', '快捷键设置') }}</h3>
|
||
<div class="shortcut-list">
|
||
<!-- 遍历所有可用输入项来设置快捷键 -->
|
||
<div v-for="input in focusSwitcherStore.availableInputs" :key="input.id" class="shortcut-item">
|
||
<span class="item-label">{{ input.label }}</span>
|
||
<input
|
||
type="text"
|
||
v-model="localItemConfigs[input.id].shortcut"
|
||
class="shortcut-input"
|
||
:placeholder="t('focusSwitcher.shortcutPlaceholder')"
|
||
@keydown.prevent="captureShortcut($event, localItemConfigs[input.id])"
|
||
/>
|
||
</div>
|
||
<div v-if="!focusSwitcherStore.availableInputs || focusSwitcherStore.availableInputs.length === 0" class="no-items-placeholder">
|
||
{{ t('focusSwitcher.noInputsAvailable', '没有可配置的输入项') }}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- +++ 快捷键配置区域结束 +++ -->
|
||
</div>
|
||
|
||
<footer class="dialog-footer">
|
||
<button @click="closeDialog" class="button-secondary">{{ t('common.cancel', '取消') }}</button>
|
||
<button @click="saveConfiguration" class="button-primary" :disabled="!hasChanges">
|
||
{{ t('common.save', '保存') }} {{ hasChanges ? '*' : '' }}
|
||
</button>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
// +++ 在 <script setup> 之外定义辅助函数（如果需要更复杂的逻辑或重用）+++
|
||
// 或者直接在 setup 内部定义 captureShortcut
|
||
|
||
// ++ 修改：captureShortcut 现在接收 FocusItemConfig 并更新它 ++
|
||
const captureShortcut = (event: KeyboardEvent, itemConfig: FocusItemConfig) => {
|
||
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)) { // 简化：只允许单个字母或数字
|
||
itemConfig.shortcut = `Alt+${key}`; // 直接修改传入的配置对象
|
||
} else if (key === 'Backspace' || key === 'Delete') {
|
||
itemConfig.shortcut = undefined; // 使用 undefined 清空
|
||
} else {
|
||
// 可选：提示不支持的键
|
||
console.warn(`[FocusSwitcherConfigurator] Unsupported key for shortcut: ${key}`);
|
||
}
|
||
} else if (event.key === 'Backspace' || event.key === 'Delete') {
|
||
// 允许单独按 Backspace 或 Delete 清空 (即使没有 Alt)
|
||
itemConfig.shortcut = undefined; // 使用 undefined 清空
|
||
} else {
|
||
// 可选：如果按下非 Alt 组合键，可以清空或提示
|
||
// console.log('[FocusSwitcherConfigurator] Invalid shortcut combination.');
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 样式很大程度上复用 LayoutConfigurator，但使用不同的类名以避免冲突 */
|
||
.focus-switcher-overlay {
|
||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.6); display: flex;
|
||
justify-content: center; align-items: flex-start; /* 改为 flex-start */
|
||
z-index: 1000; pointer-events: none;
|
||
}
|
||
.focus-switcher-dialog {
|
||
background-color: var(--dialog-bg-color, #fff); border-radius: 8px;
|
||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
|
||
display: flex; flex-direction: column; overflow: hidden;
|
||
position: absolute; pointer-events: auto; cursor: default;
|
||
color: var(--text-color);
|
||
}
|
||
.dialog-header {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color);
|
||
background-color: var(--header-bg-color);
|
||
}
|
||
.dialog-header h2 { margin: 0; font-size: 1.2rem; font-weight: 600; }
|
||
.close-button {
|
||
background: none; border: none; font-size: 1.8rem; cursor: pointer;
|
||
color: var(--text-color-secondary); line-height: 1; padding: 0;
|
||
}
|
||
.close-button:hover { color: var(--text-color); }
|
||
|
||
/* 修改：原 dialog-content 现在是 dialog-main-content */
|
||
.dialog-main-content {
|
||
flex-grow: 1; /* 占据主要垂直空间 */
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
flex-direction: column; /* 改为上下两行布局 */
|
||
align-items: stretch; /* 默认拉伸，让快捷键区域横跨 */
|
||
gap: 1.5rem;
|
||
background-color: var(--app-bg-color); /* 内容区背景 */
|
||
overflow-y: auto; /* 如果内容过多允许滚动 */
|
||
}
|
||
/* +++ 第一行容器样式 +++ */
|
||
.top-row {
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
flex-shrink: 0; /* 防止第一行被压缩 */
|
||
min-height: 300px; /* 给第一行一个最小高度 */
|
||
}
|
||
/* +++ 第一行内部左右列样式 +++ */
|
||
.available-inputs-section, .configured-sequence-section {
|
||
flex: 1; /* 平分第一行的宽度 */
|
||
padding: 1rem; border: 1px solid var(--border-color);
|
||
border-radius: 4px; background-color: var(--input-bg-color); /* 区域背景 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto; /* 允许内部列表滚动 */
|
||
}
|
||
/* +++ 第二行（快捷键配置区域）样式 +++ */
|
||
.shortcut-config-section {
|
||
padding: 1rem; border: 1px solid var(--border-color);
|
||
border-radius: 4px; background-color: var(--input-bg-color); /* 区域背景 */
|
||
display: flex; /* 确保内部元素正确布局 */
|
||
flex-direction: column;
|
||
overflow-y: auto; /* 允许滚动 */
|
||
max-height: 250px; /* 限制最大高度 */
|
||
flex-shrink: 0; /* 防止被压缩 */
|
||
}
|
||
.shortcut-config-section h3 {
|
||
margin-top: 0;
|
||
margin-bottom: 1rem;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: var(--text-color-secondary);
|
||
border-bottom: 1px solid var(--border-color-light);
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
.shortcut-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 自动填充列 */
|
||
gap: 0.8rem; /* 项目间距 */
|
||
}
|
||
.shortcut-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: var(--input-bg-color); /* 使用输入框背景色 */
|
||
padding: 0.5rem 0.8rem;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--border-color-light);
|
||
}
|
||
.shortcut-item .item-label {
|
||
flex-grow: 1;
|
||
margin-right: 0.8rem; /* 增加与输入框间距 */
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-size: 0.9rem;
|
||
}
|
||
.shortcut-item .shortcut-input {
|
||
/* 样式继承自全局 .shortcut-input */
|
||
margin-left: 0.5rem; /* 确保左边有间距 */
|
||
margin-right: 0; /* 右侧不需要额外间距 */
|
||
}
|
||
/* --- 原有样式继续 --- */
|
||
h3 {
|
||
margin-top: 0; margin-bottom: 1rem; font-size: 1rem;
|
||
font-weight: 600; color: var(--text-color-secondary);
|
||
border-bottom: 1px solid var(--border-color-light); padding-bottom: 0.5rem;
|
||
}
|
||
.draggable-list {
|
||
list-style: none; padding: 0; margin: 0;
|
||
min-height: 100px; /* 给拖放区域一个最小高度 */
|
||
border: 1px dashed var(--border-color-light); /* 虚线边框 */
|
||
border-radius: 4px;
|
||
padding: 0.5rem;
|
||
background-color: rgba(0,0,0,0.02); /* 轻微背景 */
|
||
flex-grow: 1; /* +++ 让列表占据剩余空间 +++ */
|
||
overflow-y: auto; /* +++ 列表本身也允许滚动 (双保险) +++ */
|
||
}
|
||
.draggable-item {
|
||
padding: 0.6rem 0.8rem; margin-bottom: 0.5rem;
|
||
background-color: var(--app-bg-color); border: 1px solid var(--border-color);
|
||
border-radius: 4px; cursor: grab;
|
||
display: flex; /* 使用 flex 布局 */
|
||
align-items: center; /* 垂直居中 */
|
||
justify-content: space-between; /* 两端对齐 */
|
||
transition: background-color 0.2s ease;
|
||
overflow: hidden; /* +++ 防止内部元素溢出容器 +++ */
|
||
}
|
||
.draggable-item:hover {
|
||
background-color: var(--header-bg-color); /* 悬停效果 */
|
||
}
|
||
.draggable-item.sortable-ghost { /* 拖拽时的占位符样式 */
|
||
opacity: 0.4;
|
||
background: #c8ebfb;
|
||
}
|
||
.drag-handle {
|
||
margin-right: 0.5rem;
|
||
color: var(--text-color-secondary);
|
||
cursor: grab;
|
||
}
|
||
.draggable-item:active .drag-handle {
|
||
cursor: grabbing;
|
||
}
|
||
/* +++ 新增 item-label 样式 +++ */
|
||
.item-label {
|
||
flex-grow: 1; /* 占据剩余空间 */
|
||
overflow: hidden; /* 隐藏溢出文本 */
|
||
text-overflow: ellipsis; /* 显示省略号 */
|
||
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; */ /* 间距由父元素 gap 或 .shortcut-item .item-label 控制 */
|
||
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;
|
||
flex-shrink: 0; /* 防止被压缩 */
|
||
margin-left: auto; /* 将移除按钮推到最右侧 */
|
||
}
|
||
.remove-button:hover { color: var(--danger-color, red); }
|
||
.no-items-placeholder {
|
||
text-align: center; color: var(--text-color-secondary); font-style: italic;
|
||
padding: 1rem; border: none; background: none; cursor: default;
|
||
}
|
||
|
||
.dialog-footer {
|
||
padding: 1rem 1.5rem; border-top: 1px solid var(--border-color);
|
||
display: flex; justify-content: flex-end; gap: 0.8rem;
|
||
background-color: var(--header-bg-color);
|
||
}
|
||
/* 通用按钮样式 (复用 LayoutConfigurator 或全局样式) */
|
||
.button-primary, .button-secondary {
|
||
padding: 0.5rem 1rem; border: none; border-radius: 4px;
|
||
cursor: pointer; font-size: 0.9rem;
|
||
transition: background-color 0.2s ease, opacity 0.2s ease;
|
||
}
|
||
.button-primary {
|
||
background-color: var(--button-bg-color); color: var(--button-text-color);
|
||
}
|
||
.button-primary:hover:not(:disabled) { background-color: var(--button-hover-bg-color); }
|
||
.button-primary:disabled { background-color: #6c757d; opacity: 0.7; cursor: not-allowed; }
|
||
.button-secondary {
|
||
background-color: var(--secondary-button-bg-color, #e9ecef);
|
||
color: var(--secondary-button-text-color, #343a40);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
.button-secondary:hover { background-color: var(--secondary-button-hover-bg-color, #dee2e6); }
|
||
</style>
|