💄 Updated extended management interface style and keybinding management interface style
This commit is contained in:
1
frontend/src/assets/images/translator.svg
Normal file
1
frontend/src/assets/images/translator.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -24,6 +24,7 @@ export const CONFIG_KEY_MAP = {
|
||||
enableWindowSnap: 'general.enableWindowSnap',
|
||||
enableLoadingAnimation: 'general.enableLoadingAnimation',
|
||||
enableTabs: 'general.enableTabs',
|
||||
enableMemoryMonitor: 'general.enableMemoryMonitor',
|
||||
// editing
|
||||
fontSize: 'editing.fontSize',
|
||||
fontFamily: 'editing.fontFamily',
|
||||
@@ -88,6 +89,7 @@ export const DEFAULT_CONFIG: AppConfig = {
|
||||
enableWindowSnap: true,
|
||||
enableLoadingAnimation: true,
|
||||
enableTabs: false,
|
||||
enableMemoryMonitor: true,
|
||||
},
|
||||
editing: {
|
||||
fontSize: CONFIG_LIMITS.fontSize.default,
|
||||
|
||||
105
frontend/src/components/accordion/AccordionContainer.vue
Normal file
105
frontend/src/components/accordion/AccordionContainer.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<script setup lang="ts">
|
||||
import { provide, ref } from 'vue';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* 是否允许多个面板同时展开
|
||||
* @default false - 单选模式（手风琴效果）
|
||||
*/
|
||||
multiple?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
multiple: false,
|
||||
});
|
||||
|
||||
// 当前展开的项（单选模式）或展开项列表（多选模式）
|
||||
const expandedItems = ref<Set<string | number>>(new Set());
|
||||
|
||||
/**
|
||||
* 切换展开状态
|
||||
*/
|
||||
const toggleItem = (id: string | number) => {
|
||||
if (props.multiple) {
|
||||
// 多选模式：切换单个项
|
||||
if (expandedItems.value.has(id)) {
|
||||
expandedItems.value.delete(id);
|
||||
} else {
|
||||
expandedItems.value.add(id);
|
||||
}
|
||||
} else {
|
||||
// 单选模式：只能展开一个
|
||||
if (expandedItems.value.has(id)) {
|
||||
expandedItems.value.clear();
|
||||
} else {
|
||||
expandedItems.value.clear();
|
||||
expandedItems.value.add(id);
|
||||
}
|
||||
}
|
||||
// 触发响应式更新
|
||||
expandedItems.value = new Set(expandedItems.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 检查项是否展开
|
||||
*/
|
||||
const isExpanded = (id: string | number): boolean => {
|
||||
return expandedItems.value.has(id);
|
||||
};
|
||||
|
||||
/**
|
||||
* 展开指定项
|
||||
*/
|
||||
const expand = (id: string | number) => {
|
||||
if (!props.multiple) {
|
||||
expandedItems.value.clear();
|
||||
}
|
||||
expandedItems.value.add(id);
|
||||
expandedItems.value = new Set(expandedItems.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 收起指定项
|
||||
*/
|
||||
const collapse = (id: string | number) => {
|
||||
expandedItems.value.delete(id);
|
||||
expandedItems.value = new Set(expandedItems.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 收起所有项
|
||||
*/
|
||||
const collapseAll = () => {
|
||||
expandedItems.value.clear();
|
||||
expandedItems.value = new Set(expandedItems.value);
|
||||
};
|
||||
|
||||
// 通过 provide 向子组件提供状态和方法
|
||||
provide('accordion', {
|
||||
toggleItem,
|
||||
isExpanded,
|
||||
expand,
|
||||
collapse,
|
||||
});
|
||||
|
||||
// 暴露方法供父组件使用
|
||||
defineExpose({
|
||||
expand,
|
||||
collapse,
|
||||
collapseAll,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="accordion-container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.accordion-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
187
frontend/src/components/accordion/AccordionItem.vue
Normal file
187
frontend/src/components/accordion/AccordionItem.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<script setup lang="ts">
|
||||
import { inject, computed, ref } from 'vue';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* 唯一标识符
|
||||
*/
|
||||
id: string | number;
|
||||
/**
|
||||
* 标题
|
||||
*/
|
||||
title?: string;
|
||||
/**
|
||||
* 是否禁用
|
||||
*/
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const accordion = inject<{
|
||||
toggleItem: (id: string | number) => void;
|
||||
isExpanded: (id: string | number) => boolean;
|
||||
}>('accordion');
|
||||
|
||||
if (!accordion) {
|
||||
throw new Error('AccordionItem must be used within AccordionContainer');
|
||||
}
|
||||
|
||||
const isExpanded = computed(() => accordion.isExpanded(props.id));
|
||||
|
||||
const toggle = () => {
|
||||
if (!props.disabled) {
|
||||
accordion.toggleItem(props.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 内容容器的引用，用于计算高度
|
||||
const contentRef = ref<HTMLElement>();
|
||||
const contentHeight = computed(() => {
|
||||
if (!contentRef.value) return '0px';
|
||||
return isExpanded.value ? `${contentRef.value.scrollHeight}px` : '0px';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="accordion-item"
|
||||
:class="{
|
||||
'is-expanded': isExpanded,
|
||||
'is-disabled': disabled
|
||||
}"
|
||||
>
|
||||
<!-- 标题栏 -->
|
||||
<div
|
||||
class="accordion-header"
|
||||
@click="toggle"
|
||||
:aria-expanded="isExpanded"
|
||||
:aria-disabled="disabled"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@keydown.enter="toggle"
|
||||
@keydown.space.prevent="toggle"
|
||||
>
|
||||
<div class="accordion-title">
|
||||
<slot name="title">
|
||||
{{ title }}
|
||||
</slot>
|
||||
</div>
|
||||
<div class="accordion-icon">
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3 4.5L6 7.5L9 4.5"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div
|
||||
class="accordion-content-wrapper"
|
||||
:style="{ height: contentHeight }"
|
||||
>
|
||||
<div
|
||||
ref="contentRef"
|
||||
class="accordion-content"
|
||||
>
|
||||
<div class="accordion-content-inner">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.accordion-item {
|
||||
border-bottom: 1px solid var(--settings-border);
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.is-expanded {
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
|
||||
.accordion-header {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover:not([aria-disabled="true"]) {
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid #4a9eff;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-title {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--settings-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.accordion-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--text-muted);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
.is-expanded & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-content-wrapper {
|
||||
overflow: hidden;
|
||||
transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
// 用于测量实际内容高度
|
||||
}
|
||||
|
||||
.accordion-content-inner {
|
||||
padding: 0 16px 12px 16px;
|
||||
color: var(--settings-text);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
3
frontend/src/components/accordion/index.ts
Normal file
3
frontend/src/components/accordion/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { default as AccordionContainer } from './AccordionContainer.vue';
|
||||
export { default as AccordionItem } from './AccordionItem.vue';
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
export default {
|
||||
locale: 'en-US',
|
||||
common: {
|
||||
ok: 'OK',
|
||||
cancel: 'Cancel',
|
||||
edit: 'Edit',
|
||||
delete: 'Delete',
|
||||
confirm: 'Confirm',
|
||||
save: 'Save',
|
||||
reset: 'Reset'
|
||||
},
|
||||
titlebar: {
|
||||
minimize: 'Minimize',
|
||||
maximize: 'Maximize',
|
||||
@@ -56,6 +65,19 @@ export default {
|
||||
},
|
||||
resetToDefault: 'Reset to Default',
|
||||
confirmReset: 'Confirm Reset?',
|
||||
noKeybinding: 'Not Set',
|
||||
waitingForKey: 'Waiting...',
|
||||
clickToSet: 'Click to set keybinding',
|
||||
editKeybinding: 'Edit keybinding',
|
||||
config: {
|
||||
enabled: 'Enabled',
|
||||
preventDefault: 'Prevent Default',
|
||||
keybinding: 'Keybinding'
|
||||
},
|
||||
keyPlaceholder: 'Enter key, press Enter to add',
|
||||
invalidFormat: 'Invalid format',
|
||||
conflict: 'Conflict: {command}',
|
||||
maxKeysReached: 'Maximum 4 keys allowed',
|
||||
commands: {
|
||||
showSearch: 'Show search panel',
|
||||
hideSearch: 'Hide search panel',
|
||||
@@ -178,6 +200,7 @@ export default {
|
||||
enableWindowSnap: 'Enable Window Snapping',
|
||||
enableLoadingAnimation: 'Enable Loading Animation',
|
||||
enableTabs: 'Enable Tabs',
|
||||
enableMemoryMonitor: 'Enable Memory Monitor',
|
||||
startup: 'Startup Settings',
|
||||
startAtLogin: 'Start at Login',
|
||||
dataStorage: 'Data Storage',
|
||||
@@ -223,6 +246,7 @@ export default {
|
||||
categoryEditing: 'Editing Enhancement',
|
||||
categoryUI: 'UI Enhancement',
|
||||
categoryTools: 'Tools',
|
||||
enabled: 'Enabled',
|
||||
configuration: 'Configuration',
|
||||
resetToDefault: 'Reset to Default Configuration',
|
||||
},
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
export default {
|
||||
locale: 'zh-CN',
|
||||
common: {
|
||||
ok: '确定',
|
||||
cancel: '取消',
|
||||
edit: '编辑',
|
||||
delete: '删除',
|
||||
confirm: '确认',
|
||||
save: '保存',
|
||||
reset: '重置'
|
||||
},
|
||||
titlebar: {
|
||||
minimize: '最小化',
|
||||
maximize: '最大化',
|
||||
@@ -56,6 +65,19 @@ export default {
|
||||
},
|
||||
resetToDefault: '重置为默认',
|
||||
confirmReset: '确认重置？',
|
||||
noKeybinding: '未设置',
|
||||
waitingForKey: '等待输入...',
|
||||
clickToSet: '点击设置快捷键',
|
||||
editKeybinding: '编辑快捷键',
|
||||
config: {
|
||||
enabled: '启用',
|
||||
preventDefault: '阻止默认',
|
||||
keybinding: '快捷键'
|
||||
},
|
||||
keyPlaceholder: '输入键名, 回车添加',
|
||||
invalidFormat: '格式错误',
|
||||
conflict: '冲突: {command}',
|
||||
maxKeysReached: '最多只能添加4个键',
|
||||
commands: {
|
||||
showSearch: '显示搜索面板',
|
||||
hideSearch: '隐藏搜索面板',
|
||||
@@ -179,6 +201,7 @@ export default {
|
||||
enableWindowSnap: '启用窗口吸附',
|
||||
enableLoadingAnimation: '启用加载动画',
|
||||
enableTabs: '启用标签页',
|
||||
enableMemoryMonitor: '启用内存监视器',
|
||||
startup: '启动设置',
|
||||
startAtLogin: '开机自启动',
|
||||
dataStorage: '数据存储',
|
||||
@@ -226,6 +249,7 @@ export default {
|
||||
categoryEditing: '编辑增强',
|
||||
categoryUI: '界面增强',
|
||||
categoryTools: '工具扩展',
|
||||
enabled: '启用',
|
||||
configuration: '配置',
|
||||
resetToDefault: '重置为默认配置',
|
||||
},
|
||||
|
||||
@@ -233,6 +233,9 @@ export const useConfigStore = defineStore('config', () => {
|
||||
// 标签页配置相关方法
|
||||
setEnableTabs: (value: boolean) => updateConfig('enableTabs', value),
|
||||
|
||||
// 内存监视器配置相关方法
|
||||
setEnableMemoryMonitor: (value: boolean) => updateConfig('enableMemoryMonitor', value),
|
||||
|
||||
// 快捷键模式配置相关方法
|
||||
setKeymapMode: (value: any) => updateConfig('keymapMode', value),
|
||||
|
||||
|
||||
@@ -39,6 +39,9 @@ export interface CodeBlockOptions {
|
||||
|
||||
/** 新建块时的默认语言 */
|
||||
defaultLanguage?: SupportedLanguage;
|
||||
|
||||
/** 分隔符高度（像素） */
|
||||
separatorHeight?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -86,6 +89,7 @@ export function createCodeBlockExtension(options: CodeBlockOptions = {}): Extens
|
||||
showBackground = true,
|
||||
enableAutoDetection = true,
|
||||
defaultLanguage = 'text',
|
||||
separatorHeight = 12,
|
||||
} = options;
|
||||
|
||||
return [
|
||||
@@ -104,7 +108,8 @@ export function createCodeBlockExtension(options: CodeBlockOptions = {}): Extens
|
||||
|
||||
// 视觉装饰系统
|
||||
...getBlockDecorationExtensions({
|
||||
showBackground
|
||||
showBackground,
|
||||
separatorHeight
|
||||
}),
|
||||
|
||||
// 光标保护（防止方向键移动到分隔符上）
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useConfigStore } from '@/stores/configStore';
|
||||
import MemoryMonitor from '@/components/monitor/MemoryMonitor.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const configStore = useConfigStore();
|
||||
|
||||
// 计算属性
|
||||
const enableMemoryMonitor = computed(() => configStore.config.general.enableMemoryMonitor);
|
||||
|
||||
// 导航配置
|
||||
const navItems = [
|
||||
@@ -64,7 +69,7 @@ const goBackToEditor = async () => {
|
||||
<span class="nav-text">{{ item.id === 'test' ? 'Test' : t(`settings.${item.id}`) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-footer">
|
||||
<div class="settings-footer" v-if="enableMemoryMonitor">
|
||||
<div class="memory-info-section">
|
||||
<div class="section-title">{{ t('settings.systemInfo') }}</div>
|
||||
<MemoryMonitor />
|
||||
|
||||
@@ -13,7 +13,8 @@ import {
|
||||
} from '@/views/editor/manager/extensions';
|
||||
import {getExtensionManager} from '@/views/editor/manager';
|
||||
import SettingSection from '../components/SettingSection.vue';
|
||||
import SettingItem from '../components/SettingItem.vue';
|
||||
import AccordionContainer from '@/components/accordion/AccordionContainer.vue';
|
||||
import AccordionItem from '@/components/accordion/AccordionItem.vue';
|
||||
import ToggleSwitch from '../components/ToggleSwitch.vue';
|
||||
|
||||
const {t} = useI18n();
|
||||
@@ -27,11 +28,11 @@ onMounted(async () => {
|
||||
});
|
||||
|
||||
// 展开状态管理
|
||||
const expandedExtensions = ref<Set<number>>(new Set());
|
||||
const expandedExtensions = ref<number[]>([]);
|
||||
|
||||
// 获取所有可用的扩展
|
||||
const availableExtensions = computed(() => {
|
||||
return getExtensionsMap().map(name => {
|
||||
const extensions = getExtensionsMap().map(name => {
|
||||
const extension = extensionStore.extensions.find(ext => ext.name === name);
|
||||
return {
|
||||
id: extension?.id ?? 0,
|
||||
@@ -44,15 +45,13 @@ const availableExtensions = computed(() => {
|
||||
defaultConfig: getExtensionDefaultConfig(name)
|
||||
};
|
||||
});
|
||||
console.log('Available Extensions:', extensions);
|
||||
return extensions;
|
||||
});
|
||||
|
||||
// 切换展开状态
|
||||
const toggleExpanded = (extensionId: number) => {
|
||||
if (expandedExtensions.value.has(extensionId)) {
|
||||
expandedExtensions.value.delete(extensionId);
|
||||
} else {
|
||||
expandedExtensions.value.add(extensionId);
|
||||
}
|
||||
// 获取扩展图标路径（直接使用扩展名称作为文件名）
|
||||
const getExtensionIcon = (name: string): string => {
|
||||
return `/images/${name}.svg`;
|
||||
};
|
||||
|
||||
// 更新扩展状态
|
||||
@@ -193,152 +192,227 @@ const handleConfigInput = async (
|
||||
<template>
|
||||
<div class="settings-page">
|
||||
<SettingSection :title="t('settings.extensions')">
|
||||
<div
|
||||
v-for="extension in availableExtensions"
|
||||
:key="extension.name"
|
||||
class="extension-item"
|
||||
>
|
||||
<!-- 扩展主项 -->
|
||||
<SettingItem
|
||||
:title="extension.displayName"
|
||||
:description="extension.description"
|
||||
>
|
||||
<div class="extension-controls">
|
||||
<button
|
||||
v-if="extension.hasConfig"
|
||||
class="config-button"
|
||||
@click="toggleExpanded(extension.id)"
|
||||
:class="{ expanded: expandedExtensions.has(extension.id) }"
|
||||
:title="t('settings.extensionsPage.configuration')"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path
|
||||
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div v-else class="config-placeholder"></div>
|
||||
<ToggleSwitch
|
||||
:model-value="extension.enabled"
|
||||
@update:model-value="updateExtension(extension.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
</SettingItem>
|
||||
|
||||
<!-- 可展开的配置区域 -->
|
||||
<div
|
||||
v-if="extension.hasConfig && expandedExtensions.has(extension.id)"
|
||||
class="extension-config"
|
||||
>
|
||||
<!-- 配置项标题和重置按钮 -->
|
||||
<div class="config-header">
|
||||
<h4 class="config-title">{{ t('settings.extensionsPage.configuration') }}</h4>
|
||||
<button
|
||||
class="reset-button"
|
||||
@click="resetExtension(extension.id)"
|
||||
:title="t('settings.extensionsPage.resetToDefault')"
|
||||
>
|
||||
{{ t('settings.reset') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="config-table-wrapper">
|
||||
<table class="config-table">
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="[configKey, configValue] in Object.entries(extension.defaultConfig)"
|
||||
:key="configKey"
|
||||
>
|
||||
<th scope="row" class="config-table-key">
|
||||
{{ configKey }}
|
||||
</th>
|
||||
<td class="config-table-value">
|
||||
<input
|
||||
class="config-value-input"
|
||||
type="text"
|
||||
:value="formatConfigValue(getConfigValue(extension.config, configKey, configValue))"
|
||||
@change="handleConfigInput(extension.id, configKey, configValue, $event)"
|
||||
@keyup.enter.prevent="handleConfigInput(extension.id, configKey, configValue, $event)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 空状态提示 -->
|
||||
<div v-if="availableExtensions.length === 0" class="empty-state">
|
||||
<p>{{ t('settings.extensionsPage.loading') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 扩展列表 -->
|
||||
<AccordionContainer v-else v-model="expandedExtensions" :multiple="false">
|
||||
<AccordionItem
|
||||
v-for="extension in availableExtensions"
|
||||
:key="extension.id"
|
||||
:id="extension.id"
|
||||
:class="{ 'extension-disabled': !extension.enabled }"
|
||||
>
|
||||
<!-- 标题插槽：显示图标和扩展名称 -->
|
||||
<template #title>
|
||||
<div class="extension-header">
|
||||
<div class="extension-icon-wrapper">
|
||||
<div class="extension-icon-placeholder" :class="{ 'disabled': !extension.enabled }">
|
||||
<!-- 直接使用扩展名称作为图标文件名 -->
|
||||
<img
|
||||
:src="getExtensionIcon(extension.name)"
|
||||
:alt="extension.displayName"
|
||||
class="extension-icon-img"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extension-info">
|
||||
<div class="extension-name">{{ extension.displayName }}</div>
|
||||
<div class="extension-description">{{ extension.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 默认插槽：显示开关和配置项 -->
|
||||
<div class="extension-content">
|
||||
<!-- 启用开关 -->
|
||||
<div class="extension-toggle-section">
|
||||
<label class="toggle-label">{{ t('settings.extensionsPage.enabled') }}</label>
|
||||
<ToggleSwitch
|
||||
:model-value="extension.enabled"
|
||||
@update:model-value="updateExtension(extension.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 配置项 -->
|
||||
<div v-if="extension.hasConfig" class="extension-config-section">
|
||||
<div class="config-header">
|
||||
<h4 class="config-title">{{ t('settings.extensionsPage.configuration') }}</h4>
|
||||
<button
|
||||
class="reset-button"
|
||||
@click="resetExtension(extension.id)"
|
||||
:title="t('settings.extensionsPage.resetToDefault')"
|
||||
>
|
||||
{{ t('settings.reset') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="config-table-wrapper">
|
||||
<table class="config-table">
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="[configKey, configValue] in Object.entries(extension.defaultConfig)"
|
||||
:key="configKey"
|
||||
>
|
||||
<th scope="row" class="config-table-key">
|
||||
{{ configKey }}
|
||||
</th>
|
||||
<td class="config-table-value">
|
||||
<input
|
||||
class="config-value-input"
|
||||
type="text"
|
||||
:value="formatConfigValue(getConfigValue(extension.config, configKey, configValue))"
|
||||
@change="handleConfigInput(extension.id, configKey, configValue, $event)"
|
||||
@keyup.enter.prevent="handleConfigInput(extension.id, configKey, configValue, $event)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionItem>
|
||||
</AccordionContainer>
|
||||
</SettingSection>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.extension-item {
|
||||
border-bottom: 1px solid var(--settings-input-border);
|
||||
.empty-state {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
color: var(--settings-text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
// 禁用状态的扩展项
|
||||
:deep(.extension-disabled) {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
|
||||
.accordion-header {
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-expanded {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
|
||||
.accordion-header {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.extension-description {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.extension-controls {
|
||||
.extension-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 140px;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.config-button {
|
||||
padding: 4px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--settings-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 4px;
|
||||
.extension-icon-wrapper {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.extension-icon-placeholder {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--settings-hover);
|
||||
color: var(--settings-text);
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
color: var(--settings-accent);
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
|
||||
svg {
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, rgba(var(--settings-accent-rgb, 74, 158, 255), 0.12), rgba(var(--settings-accent-rgb, 74, 158, 255), 0.06));
|
||||
border: 1px solid rgba(var(--settings-accent-rgb, 74, 158, 255), 0.15);
|
||||
color: white;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&.disabled {
|
||||
background: linear-gradient(135deg, rgba(136, 136, 136, 0.08), rgba(136, 136, 136, 0.04));
|
||||
border-color: rgba(136, 136, 136, 0.1);
|
||||
box-shadow: none;
|
||||
|
||||
.extension-icon-img {
|
||||
opacity: 0.4;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-placeholder {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
.extension-icon-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.extension-config {
|
||||
background-color: var(--settings-input-bg);
|
||||
border-left: 2px solid var(--settings-accent);
|
||||
margin: 4px 0 12px 0;
|
||||
padding: 8px 10px;
|
||||
border-radius: 2px;
|
||||
.extension-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.extension-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--settings-text);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.extension-description {
|
||||
font-size: 12px;
|
||||
color: var(--settings-text-secondary);
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.extension-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.extension-toggle-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background-color: var(--settings-input-bg);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--settings-input-border);
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--settings-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.extension-config-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.config-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.config-title {
|
||||
@@ -351,10 +425,10 @@ const handleConfigInput = async (
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
padding: 3px 8px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 2px;
|
||||
border-radius: 3px;
|
||||
background-color: transparent;
|
||||
color: var(--settings-text-secondary);
|
||||
cursor: pointer;
|
||||
@@ -370,7 +444,7 @@ const handleConfigInput = async (
|
||||
|
||||
.config-table-wrapper {
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background-color: var(--settings-panel, var(--settings-input-bg));
|
||||
}
|
||||
@@ -378,7 +452,7 @@ const handleConfigInput = async (
|
||||
.config-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.config-table tr + tr {
|
||||
@@ -387,7 +461,7 @@ const handleConfigInput = async (
|
||||
|
||||
.config-table th,
|
||||
.config-table td {
|
||||
padding: 5px 8px;
|
||||
padding: 6px 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -399,36 +473,36 @@ const handleConfigInput = async (
|
||||
border-right: 1px solid var(--settings-input-border);
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.config-table-value {
|
||||
padding: 3px 4px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.config-value-input {
|
||||
width: 100%;
|
||||
padding: 4px 6px;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
color: var(--settings-text);
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
|
||||
line-height: 1.3;
|
||||
line-height: 1.4;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.config-value-input:hover {
|
||||
border-color: var(--settings-input-border);
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--settings-input-border);
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
|
||||
.config-value-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--settings-accent);
|
||||
background-color: var(--settings-input-bg);
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--settings-accent);
|
||||
background-color: var(--settings-input-bg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -19,6 +19,7 @@ const {
|
||||
setDataPath,
|
||||
setEnableGlobalHotkey,
|
||||
setEnableLoadingAnimation,
|
||||
setEnableMemoryMonitor,
|
||||
setEnableSystemTray,
|
||||
setEnableTabs,
|
||||
setEnableWindowSnap,
|
||||
@@ -137,6 +138,12 @@ const enableTabs = computed({
|
||||
}
|
||||
});
|
||||
|
||||
// 计算属性 - 启用内存监视器
|
||||
const enableMemoryMonitor = computed({
|
||||
get: () => general.enableMemoryMonitor,
|
||||
set: (value: boolean) => setEnableMemoryMonitor(value)
|
||||
});
|
||||
|
||||
// 计算属性 - 开机启动
|
||||
const startAtLogin = computed({
|
||||
get: () => general.startAtLogin,
|
||||
@@ -273,6 +280,9 @@ const selectDataDirectory = async () => {
|
||||
<SettingItem :title="t('settings.enableTabs')">
|
||||
<ToggleSwitch v-model="enableTabs"/>
|
||||
</SettingItem>
|
||||
<SettingItem :title="t('settings.enableMemoryMonitor')">
|
||||
<ToggleSwitch v-model="enableMemoryMonitor"/>
|
||||
</SettingItem>
|
||||
</SettingSection>
|
||||
|
||||
<SettingSection :title="t('settings.startup')">
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { onMounted, computed, ref, onUnmounted, watch } from 'vue';
|
||||
import { onMounted, computed, ref, nextTick } from 'vue';
|
||||
import SettingSection from '../components/SettingSection.vue';
|
||||
import SettingItem from '../components/SettingItem.vue';
|
||||
import { AccordionContainer, AccordionItem } from '@/components/accordion';
|
||||
import { useKeybindingStore } from '@/stores/keybindingStore';
|
||||
import { useSystemStore } from '@/stores/systemStore';
|
||||
import { useConfigStore } from '@/stores/configStore';
|
||||
@@ -11,6 +12,7 @@ import { getCommandDescription } from '@/views/editor/keymap/commands';
|
||||
import { KeyBindingType } from '@/../bindings/voidraft/internal/models/models';
|
||||
import { KeyBindingService } from '@/../bindings/voidraft/internal/services';
|
||||
import { useConfirm } from '@/composables/useConfirm';
|
||||
import toast from '@/components/toast';
|
||||
|
||||
const { t } = useI18n();
|
||||
const keybindingStore = useKeybindingStore();
|
||||
@@ -20,16 +22,26 @@ const editorStore = useEditorStore();
|
||||
|
||||
interface EditingState {
|
||||
id: number;
|
||||
name: string;
|
||||
originalKey: string;
|
||||
}
|
||||
|
||||
const editingBinding = ref<EditingState | null>(null);
|
||||
const capturedKey = ref('');
|
||||
const capturedKeyDisplay = ref<string[]>([]);
|
||||
const isConflict = ref(false);
|
||||
const inputKey = ref('');
|
||||
|
||||
const isEditing = computed(() => !!editingBinding.value);
|
||||
// 将快捷键字符串拆分为独立的键
|
||||
const splitKeys = (keyStr: string): string[] => {
|
||||
if (!keyStr) return [];
|
||||
return keyStr.split(/[-+]/).filter(Boolean);
|
||||
};
|
||||
|
||||
// 动态设置 ref 并自动聚焦
|
||||
const setInputRef = (el: any) => {
|
||||
if (el && el instanceof HTMLInputElement) {
|
||||
// 使用 nextTick 确保 DOM 完全渲染后再聚焦
|
||||
nextTick(() => {
|
||||
el.focus();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await keybindingStore.loadKeyBindings();
|
||||
@@ -63,7 +75,10 @@ const keyBindings = computed(() =>
|
||||
command: getDisplayKeybinding(kb),
|
||||
rawKey: getRawKey(kb),
|
||||
extension: kb.extension || '',
|
||||
description: getCommandDescription(kb.name) || kb.name || ''
|
||||
description: getCommandDescription(kb.name) || kb.name || '',
|
||||
enabled: kb.enabled,
|
||||
preventDefault: kb.preventDefault,
|
||||
originalData: kb
|
||||
}))
|
||||
);
|
||||
|
||||
@@ -82,6 +97,8 @@ const getDisplayKeybinding = (kb: any): string[] => {
|
||||
};
|
||||
|
||||
const parseKeyString = (keyStr: string): string[] => {
|
||||
if (!keyStr) return [];
|
||||
|
||||
const symbolMap: Record<string, string> = {
|
||||
'Mod': systemStore.isMacOS ? '⌘' : 'Ctrl',
|
||||
'Cmd': '⌘',
|
||||
@@ -102,128 +119,141 @@ const parseKeyString = (keyStr: string): string[] => {
|
||||
.filter(Boolean);
|
||||
};
|
||||
|
||||
|
||||
// 键盘事件捕获
|
||||
const SPECIAL_KEYS: Record<string, string> = {
|
||||
' ': 'Space',
|
||||
'ArrowUp': 'ArrowUp',
|
||||
'ArrowDown': 'ArrowDown',
|
||||
'ArrowLeft': 'ArrowLeft',
|
||||
'ArrowRight': 'ArrowRight',
|
||||
'Enter': 'Enter',
|
||||
'Tab': 'Tab',
|
||||
'Backspace': 'Backspace',
|
||||
'Delete': 'Delete',
|
||||
'Home': 'Home',
|
||||
'End': 'End',
|
||||
'PageUp': 'PageUp',
|
||||
'PageDown': 'PageDown',
|
||||
// 切换启用状态
|
||||
const toggleEnabled = async (binding: any) => {
|
||||
try {
|
||||
await KeyBindingService.UpdateKeyBindingEnabled(binding.id, !binding.enabled);
|
||||
await keybindingStore.loadKeyBindings();
|
||||
await editorStore.applyKeymapSettings();
|
||||
} catch (error) {
|
||||
console.error('Failed to update enabled status:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const MODIFIER_KEYS = ['Control', 'Alt', 'Shift', 'Meta'];
|
||||
const MAX_KEY_PARTS = 3; // 最多3个键
|
||||
|
||||
const captureKeyBinding = (event: KeyboardEvent): string | null => {
|
||||
// 忽略单独的修饰键
|
||||
if (MODIFIER_KEYS.includes(event.key)) return null;
|
||||
|
||||
const parts: string[] = [];
|
||||
|
||||
// 添加修饰键
|
||||
if (event.ctrlKey || event.metaKey) parts.push('Mod');
|
||||
if (event.altKey) parts.push('Alt');
|
||||
if (event.shiftKey) parts.push('Shift');
|
||||
|
||||
// 获取主键
|
||||
const mainKey = SPECIAL_KEYS[event.key] ??
|
||||
(event.key.length === 1 ? event.key.toLowerCase() : event.key);
|
||||
|
||||
if (mainKey) parts.push(mainKey);
|
||||
|
||||
// 限制最多3个键
|
||||
if (parts.length > MAX_KEY_PARTS) return null;
|
||||
|
||||
return parts.join('-');
|
||||
// 切换 PreventDefault
|
||||
const togglePreventDefault = async (binding: any) => {
|
||||
try {
|
||||
await KeyBindingService.UpdateKeyBindingPreventDefault(binding.id, !binding.preventDefault);
|
||||
await keybindingStore.loadKeyBindings();
|
||||
await editorStore.applyKeymapSettings();
|
||||
} catch (error) {
|
||||
console.error('Failed to update preventDefault:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 开始添加快捷键
|
||||
const startAddKey = (bindingId: number) => {
|
||||
editingBinding.value = {
|
||||
id: bindingId
|
||||
};
|
||||
inputKey.value = '';
|
||||
};
|
||||
|
||||
// 取消编辑
|
||||
const cancelEdit = () => {
|
||||
window.removeEventListener('keydown', handleKeyCapture, true);
|
||||
editingBinding.value = null;
|
||||
capturedKey.value = '';
|
||||
capturedKeyDisplay.value = [];
|
||||
isConflict.value = false;
|
||||
inputKey.value = '';
|
||||
};
|
||||
|
||||
const handleKeyCapture = (event: KeyboardEvent) => {
|
||||
if (!isEditing.value) return;
|
||||
// 验证快捷键格式
|
||||
const validateKeyFormat = (key: string): boolean => {
|
||||
if (!key || key.trim() === '') return false;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// 基本格式验证：允许 Mod/Ctrl/Alt/Shift + 其他键
|
||||
const validPattern = /^(Mod|Ctrl|Alt|Shift|Cmd)(-[A-Za-z0-9\[\]\\/;',.\-=`]|-(ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Tab|Backspace|Delete|Home|End|PageUp|PageDown|Space|Escape))+$/;
|
||||
const simpleKeyPattern = /^[A-Za-z0-9]$/;
|
||||
const specialKeyPattern = /^(ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Tab|Backspace|Delete|Home|End|PageUp|PageDown|Space|Escape)$/;
|
||||
|
||||
// ESC 取消编辑
|
||||
if (event.key === 'Escape') {
|
||||
cancelEdit();
|
||||
return validPattern.test(key) || simpleKeyPattern.test(key) || specialKeyPattern.test(key);
|
||||
};
|
||||
|
||||
// 检查快捷键冲突
|
||||
const checkConflict = (newKey: string, currentBindingId: number): { conflict: boolean; conflictWith?: string } => {
|
||||
const conflictBinding = keyBindings.value.find(kb =>
|
||||
kb.rawKey === newKey && kb.id !== currentBindingId
|
||||
);
|
||||
|
||||
if (conflictBinding) {
|
||||
return {
|
||||
conflict: true,
|
||||
conflictWith: conflictBinding.description
|
||||
};
|
||||
}
|
||||
|
||||
return { conflict: false };
|
||||
};
|
||||
|
||||
// 添加新键到快捷键
|
||||
const addKeyPart = async () => {
|
||||
if (!editingBinding.value || !inputKey.value.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const key = captureKeyBinding(event);
|
||||
if (key) {
|
||||
capturedKey.value = key;
|
||||
capturedKeyDisplay.value = parseKeyString(key);
|
||||
isConflict.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const startEditBinding = (binding: any) => {
|
||||
editingBinding.value = {
|
||||
id: binding.id,
|
||||
name: binding.name,
|
||||
originalKey: binding.rawKey
|
||||
};
|
||||
capturedKey.value = '';
|
||||
capturedKeyDisplay.value = [];
|
||||
isConflict.value = false;
|
||||
const newPart = inputKey.value.trim();
|
||||
const binding = keyBindings.value.find(kb => kb.id === editingBinding.value!.id);
|
||||
if (!binding) return;
|
||||
|
||||
// 手动添加键盘监听
|
||||
window.addEventListener('keydown', handleKeyCapture, true);
|
||||
};
|
||||
|
||||
const checkConflict = (newKey: string): boolean =>
|
||||
keyBindings.value.some(kb =>
|
||||
kb.rawKey === newKey && kb.name !== editingBinding.value?.name
|
||||
);
|
||||
|
||||
const confirmKeybinding = async () => {
|
||||
if (!editingBinding.value || !capturedKey.value) return;
|
||||
// 检查键数量限制（最多4个）
|
||||
const currentParts = splitKeys(binding.rawKey);
|
||||
if (currentParts.length >= 4) {
|
||||
toast.error(t('keybindings.maxKeysReached'));
|
||||
inputKey.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取现有的键
|
||||
const currentKey = binding.rawKey;
|
||||
const newKey = currentKey ? `${currentKey}-${newPart}` : newPart;
|
||||
|
||||
// 验证格式
|
||||
if (!validateKeyFormat(newKey)) {
|
||||
toast.error(t('keybindings.invalidFormat'));
|
||||
inputKey.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查冲突
|
||||
if (checkConflict(capturedKey.value)) {
|
||||
isConflict.value = true;
|
||||
setTimeout(cancelEdit, 600);
|
||||
const conflictCheck = checkConflict(newKey, editingBinding.value.id);
|
||||
if (conflictCheck.conflict) {
|
||||
toast.error(t('keybindings.conflict', { command: conflictCheck.conflictWith }));
|
||||
inputKey.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await keybindingStore.updateKeyBinding(
|
||||
editingBinding.value.id,
|
||||
capturedKey.value
|
||||
);
|
||||
await keybindingStore.updateKeyBinding(editingBinding.value.id, newKey);
|
||||
await editorStore.applyKeymapSettings();
|
||||
inputKey.value = '';
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
cancelEdit();
|
||||
console.error('Failed to add key part:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除快捷键的某个部分
|
||||
const removeKeyPart = async (bindingId: number, index: number) => {
|
||||
const binding = keyBindings.value.find(kb => kb.id === bindingId);
|
||||
if (!binding) return;
|
||||
|
||||
const parts = splitKeys(binding.rawKey);
|
||||
parts.splice(index, 1);
|
||||
|
||||
const newKey = parts.join('-');
|
||||
|
||||
try {
|
||||
await keybindingStore.updateKeyBinding(bindingId, newKey);
|
||||
await editorStore.applyKeymapSettings();
|
||||
} catch (error) {
|
||||
console.error('Failed to remove key part:', error);
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="settings-page">
|
||||
<!-- 快捷键模式设置 -->
|
||||
<SettingSection :title="t('keybindings.keymapMode')">
|
||||
<SettingItem
|
||||
:title="t('keybindings.keymapMode')">
|
||||
<SettingItem :title="t('keybindings.keymapMode')">
|
||||
<select
|
||||
:value="configStore.config.editing.keymapMode"
|
||||
@change="updateKeymapMode(($event.target as HTMLSelectElement).value as KeyBindingType)"
|
||||
@@ -251,68 +281,111 @@ const confirmKeybinding = async () => {
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<div class="key-bindings-container">
|
||||
<div class="key-bindings-header">
|
||||
<div class="keybinding-col">{{ t('keybindings.headers.shortcut') }}</div>
|
||||
<div class="extension-col">{{ t('keybindings.headers.extension') }}</div>
|
||||
<div class="description-col">{{ t('keybindings.headers.description') }}</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
<AccordionContainer :multiple="false">
|
||||
<AccordionItem
|
||||
v-for="binding in keyBindings"
|
||||
:key="binding.name"
|
||||
class="key-binding-row"
|
||||
:key="binding.id"
|
||||
:id="binding.id!"
|
||||
>
|
||||
<!-- 快捷键列 -->
|
||||
<div
|
||||
class="keybinding-col"
|
||||
:class="{ 'editing': editingBinding?.name === binding.name }"
|
||||
@click.stop="editingBinding?.name !== binding.name && startEditBinding(binding)"
|
||||
>
|
||||
<!-- 编辑模式 -->
|
||||
<template v-if="editingBinding?.name === binding.name">
|
||||
<template v-if="!capturedKey">
|
||||
<span class="key-badge waiting">waiting...</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 标题插槽 -->
|
||||
<template #title>
|
||||
<div class="binding-title" :class="{ 'disabled': !binding.enabled }">
|
||||
<div class="binding-name">
|
||||
<span class="binding-description">{{ binding.description }}</span>
|
||||
<span class="binding-extension">{{ binding.extension }}</span>
|
||||
</div>
|
||||
<div class="binding-keys">
|
||||
<span
|
||||
v-for="(key, index) in capturedKeyDisplay"
|
||||
v-for="(key, index) in binding.command"
|
||||
:key="index"
|
||||
class="key-badge captured"
|
||||
:class="{ 'conflict': isConflict }"
|
||||
class="key-badge"
|
||||
>
|
||||
{{ key }}
|
||||
</span>
|
||||
</template>
|
||||
<button
|
||||
@click.stop="confirmKeybinding"
|
||||
class="btn-mini btn-confirm"
|
||||
:disabled="!capturedKey"
|
||||
title="Ok"
|
||||
>✓</button>
|
||||
<button
|
||||
@click.stop="cancelEdit"
|
||||
class="btn-mini btn-cancel"
|
||||
title="Cancel"
|
||||
>✕</button>
|
||||
</template>
|
||||
|
||||
<!-- 显示模式 -->
|
||||
<template v-else>
|
||||
<span
|
||||
v-for="(key, index) in binding.command"
|
||||
:key="index"
|
||||
class="key-badge"
|
||||
>
|
||||
{{ key }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-if="!binding.command.length" class="key-badge-empty">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 展开内容 -->
|
||||
<div class="binding-config">
|
||||
<!-- Enabled 配置 -->
|
||||
<div class="config-row">
|
||||
<span class="config-label">{{ t('keybindings.config.enabled') }}</span>
|
||||
<label class="switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="binding.enabled"
|
||||
@change="toggleEnabled(binding)"
|
||||
>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- PreventDefault 配置 -->
|
||||
<div class="config-row">
|
||||
<span class="config-label">{{ t('keybindings.config.preventDefault') }}</span>
|
||||
<label class="switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="binding.preventDefault"
|
||||
@change="togglePreventDefault(binding)"
|
||||
>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Key 配置 -->
|
||||
<div class="config-row">
|
||||
<span class="config-label">{{ t('keybindings.config.keybinding') }}</span>
|
||||
<div class="key-input-wrapper">
|
||||
<div class="key-tags">
|
||||
<!-- 显示现有快捷键的每个部分 -->
|
||||
<template v-if="binding.rawKey">
|
||||
<span
|
||||
v-for="(keyPart, index) in splitKeys(binding.rawKey)"
|
||||
:key="index"
|
||||
class="key-tag"
|
||||
>
|
||||
<span class="key-tag-text">{{ keyPart }}</span>
|
||||
<button
|
||||
class="key-tag-remove"
|
||||
@click="removeKeyPart(binding.id!, index)"
|
||||
>×</button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- 添加输入框 -->
|
||||
<template v-if="editingBinding?.id === binding.id">
|
||||
<input
|
||||
:ref="setInputRef"
|
||||
v-model="inputKey"
|
||||
type="text"
|
||||
class="key-input"
|
||||
:placeholder="t('keybindings.keyPlaceholder')"
|
||||
@keydown.enter="addKeyPart"
|
||||
@keydown.escape="cancelEdit"
|
||||
@blur="cancelEdit"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 添加按钮 -->
|
||||
<template v-else>
|
||||
<button
|
||||
class="key-tag-add"
|
||||
@click="startAddKey(binding.id!)"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 1V11M1 6H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="extension-col">{{ binding.extension }}</div>
|
||||
<div class="description-col">{{ binding.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionItem>
|
||||
</AccordionContainer>
|
||||
</SettingSection>
|
||||
</div>
|
||||
</template>
|
||||
@@ -375,167 +448,275 @@ const confirmKeybinding = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
.key-bindings-container {
|
||||
.binding-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
|
||||
.key-bindings-header {
|
||||
display: flex;
|
||||
padding: 0 0 8px 0;
|
||||
border-bottom: 1px solid var(--settings-border);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.key-binding-row {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--settings-border);
|
||||
align-items: center;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.keybinding-col {
|
||||
width: 150px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 0 10px 0 0;
|
||||
color: var(--settings-text);
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(.editing) .key-badge {
|
||||
border-color: #4a9eff;
|
||||
}
|
||||
|
||||
&.editing {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.key-badge {
|
||||
background-color: var(--settings-input-bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
border: 1px solid var(--settings-input-border);
|
||||
color: var(--settings-text);
|
||||
transition: border-color 0.2s ease;
|
||||
white-space: nowrap;
|
||||
|
||||
&.waiting {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
color: #4a9eff;
|
||||
font-style: italic;
|
||||
animation: colorPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&.captured {
|
||||
background-color: #4a9eff;
|
||||
color: white;
|
||||
border-color: #4a9eff;
|
||||
|
||||
&.conflict {
|
||||
background-color: #dc3545;
|
||||
border-color: #dc3545;
|
||||
animation: shake 0.6s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
transition: opacity 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
margin-left: auto;
|
||||
|
||||
&.btn-confirm {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--settings-input-border);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-cancel {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
margin-left: 2px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extension-col {
|
||||
width: 80px;
|
||||
padding: 0 10px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--settings-text);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.description-col {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--settings-text);
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes colorPulse {
|
||||
0%, 100% {
|
||||
color: #4a9eff;
|
||||
.binding-name {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.binding-description {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--settings-text);
|
||||
}
|
||||
|
||||
.binding-extension {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.binding-keys {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.key-badge {
|
||||
background-color: var(--settings-input-bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
border: 1px solid var(--settings-input-border);
|
||||
color: var(--settings-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.key-badge-empty {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.binding-config {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.config-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.config-label {
|
||||
font-size: 13px;
|
||||
color: var(--settings-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Switch 开关样式
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
&:checked + .slider {
|
||||
background-color: #4a9eff;
|
||||
|
||||
&:before {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus + .slider {
|
||||
box-shadow: 0 0 1px #4a9eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--settings-input-border);
|
||||
transition: 0.3s;
|
||||
border-radius: 20px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: 0.3s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.key-input-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.key-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.key-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
height: 28px;
|
||||
background-color: var(--settings-input-bg);
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--settings-text);
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
border-color: #4a9eff;
|
||||
|
||||
.key-tag-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.key-tag-text {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.key-tag-remove {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
opacity: 0.6;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #e74c3c;
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
color: #2080ff;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.coming-soon-placeholder {
|
||||
padding: 20px;
|
||||
background-color: var(--settings-card-bg);
|
||||
border-radius: 6px;
|
||||
.key-tag-add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
border: 1px dashed var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
border-color: #4a9eff;
|
||||
background-color: var(--settings-input-bg);
|
||||
color: #4a9eff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.key-input {
|
||||
padding: 4px 8px;
|
||||
height: 28px;
|
||||
border: 1px solid #4a9eff;
|
||||
border-radius: 4px;
|
||||
background-color: var(--settings-input-bg);
|
||||
color: var(--settings-text);
|
||||
font-size: 12px;
|
||||
width: 60px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: opacity 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.btn-confirm {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--settings-input-border);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-cancel {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user