💄 Updated extended management interface style and keybinding management interface style
This commit is contained in:
@@ -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