1443 lines
40 KiB
Vue
1443 lines
40 KiB
Vue
<script setup lang="ts">
|
||
import { ref, computed, onMounted } from 'vue';
|
||
import { usePromptStore } from '../stores/promptStore';
|
||
import type { ExtendedPreset, PresetFolder, PresetType } from '../types';
|
||
import NotificationToast from './NotificationToast.vue';
|
||
import PresetSidebar from './preset/PresetSidebar.vue';
|
||
import PresetList from './preset/PresetList.vue';
|
||
import FolderSelector from './preset/FolderSelector.vue';
|
||
|
||
const store = usePromptStore();
|
||
|
||
// State
|
||
const activeTab = ref<'presets' | 'folders'>('presets'); // Kept for compatibility if needed, but UI will be unified
|
||
const selectedType = ref<PresetType | 'all'>('all');
|
||
const searchQuery = ref('');
|
||
const selectedFolderId = ref<string | null>(null);
|
||
const expandedFolderIds = ref<Set<string>>(new Set());
|
||
|
||
// Dialog State
|
||
const showCreateDialog = ref(false);
|
||
const showFolderDialog = ref(false);
|
||
const editingPreset = ref<ExtendedPreset | null>(null);
|
||
const editingFolder = ref<PresetFolder | null>(null);
|
||
|
||
// Forms
|
||
const presetForm = ref({
|
||
name: '',
|
||
type: 'positive' as PresetType,
|
||
content: '',
|
||
description: '',
|
||
tags: '',
|
||
folderId: ''
|
||
});
|
||
|
||
const folderForm = ref({
|
||
name: '',
|
||
description: '',
|
||
color: '#6366f1',
|
||
parentId: ''
|
||
});
|
||
|
||
// Notification
|
||
const notification = ref<{ message: string; type: 'success' | 'error' | 'info'; show: boolean }>({
|
||
message: '',
|
||
type: 'info',
|
||
show: false
|
||
});
|
||
|
||
function showNotification(message: string, type: 'success' | 'error' | 'info' = 'info') {
|
||
notification.value = { message, type, show: true };
|
||
setTimeout(() => {
|
||
notification.value.show = false;
|
||
}, 3000);
|
||
}
|
||
|
||
// Preset Types
|
||
const presetTypes: { value: PresetType; label: string; icon: string }[] = [
|
||
{ value: 'positive', label: '正面提示词', icon: '🪄' },
|
||
{ value: 'negative', label: '负面提示词', icon: '⛔' },
|
||
{ value: 'setting', label: '设定标签', icon: '⚙️' },
|
||
{ value: 'style', label: '风格样式', icon: '🖌️' },
|
||
{ value: 'character', label: '角色人物', icon: '🧙' },
|
||
{ value: 'scene', label: '场景环境', icon: '🏞️' },
|
||
{ value: 'custom', label: '自定义', icon: '🧩' }
|
||
];
|
||
|
||
// Computed
|
||
const folderTree = computed(() => {
|
||
const folders = store.presetFolders || [];
|
||
const rootFolders = folders.filter(f => !f.parentId);
|
||
|
||
function buildTree(parentFolders: PresetFolder[]): any[] {
|
||
return parentFolders.map(folder => ({
|
||
...folder,
|
||
children: buildTree(folders.filter(f => f.parentId === folder.id)),
|
||
presetCount: (store.extendedPresets || []).filter(p => p.folderId === folder.id).length
|
||
}));
|
||
}
|
||
|
||
return buildTree(rootFolders);
|
||
});
|
||
|
||
const filteredPresets = computed(() => {
|
||
let presets = store.extendedPresets || [];
|
||
|
||
// Filter by Type
|
||
if (selectedType.value !== 'all') {
|
||
presets = presets.filter(p => p.type === selectedType.value);
|
||
}
|
||
|
||
// Filter by Folder
|
||
if (selectedFolderId.value) {
|
||
presets = presets.filter(p => p.folderId === selectedFolderId.value);
|
||
} else if (selectedFolderId.value === '') {
|
||
// Uncategorized
|
||
presets = presets.filter(p => !p.folderId);
|
||
}
|
||
// if null, show all
|
||
|
||
// Filter by Search
|
||
if (searchQuery.value.trim()) {
|
||
const query = searchQuery.value.toLowerCase();
|
||
presets = presets.filter(p =>
|
||
p.name.toLowerCase().includes(query) ||
|
||
p.content.toLowerCase().includes(query) ||
|
||
p.description?.toLowerCase().includes(query) ||
|
||
p.tags?.some(tag => tag.toLowerCase().includes(query))
|
||
);
|
||
}
|
||
|
||
return presets.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
|
||
});
|
||
|
||
const flattenedFolders = computed(() => {
|
||
type FlatItem = { id: string; name: string; label: string; level: number; presetCount: number; hasChildren: boolean };
|
||
const res: FlatItem[] = [];
|
||
function walk(nodes: any[], level: number, parentPath: string) {
|
||
nodes.forEach((node: any) => {
|
||
const label = parentPath ? `${parentPath} / ${node.name}` : node.name;
|
||
res.push({
|
||
id: node.id,
|
||
name: node.name,
|
||
label,
|
||
level,
|
||
presetCount: node.presetCount,
|
||
hasChildren: !!(node.children && node.children.length)
|
||
});
|
||
if (node.children && node.children.length) {
|
||
walk(node.children, level + 1, label);
|
||
}
|
||
});
|
||
}
|
||
walk(folderTree.value, 0, '');
|
||
return res;
|
||
});
|
||
|
||
const allPresetsCount = computed(() => (store.extendedPresets || []).length);
|
||
const uncategorizedCount = computed(() => (store.extendedPresets || []).filter(p => !p.folderId).length);
|
||
|
||
// Actions
|
||
function handleFolderSelect(id: string | null) {
|
||
selectedFolderId.value = id;
|
||
}
|
||
|
||
function handleToggleExpand(id: string) {
|
||
const set = new Set(expandedFolderIds.value);
|
||
if (set.has(id)) set.delete(id); else set.add(id);
|
||
expandedFolderIds.value = set;
|
||
}
|
||
|
||
function createFolder(parentId?: string) {
|
||
resetFolderForm();
|
||
if (parentId) {
|
||
folderForm.value.parentId = parentId;
|
||
}
|
||
showFolderDialog.value = true;
|
||
}
|
||
|
||
function editFolder(folder: PresetFolder) {
|
||
editingFolder.value = folder;
|
||
folderForm.value = {
|
||
name: folder.name,
|
||
description: folder.description || '',
|
||
color: folder.color || '#6366f1',
|
||
parentId: folder.parentId || ''
|
||
};
|
||
showFolderDialog.value = true;
|
||
}
|
||
|
||
function saveFolder() {
|
||
if (!folderForm.value.name.trim()) {
|
||
showNotification('请填写文件夹名称', 'error');
|
||
return;
|
||
}
|
||
|
||
const folderData = {
|
||
name: folderForm.value.name.trim(),
|
||
description: folderForm.value.description.trim() || undefined,
|
||
color: folderForm.value.color,
|
||
parentId: folderForm.value.parentId || undefined
|
||
};
|
||
|
||
if (editingFolder.value) {
|
||
store.updatePresetFolder(editingFolder.value.id, folderData);
|
||
showNotification(`文件夹「${folderData.name}」已更新`, 'success');
|
||
} else {
|
||
store.createPresetFolder(folderData);
|
||
showNotification(`文件夹「${folderData.name}」已创建`, 'success');
|
||
}
|
||
|
||
closeFolderDialog();
|
||
}
|
||
|
||
function deleteFolder(folder: PresetFolder) {
|
||
const presetCount = (store.extendedPresets || []).filter(p => p.folderId === folder.id).length;
|
||
if (presetCount > 0) {
|
||
if (!confirm(`文件夹「${folder.name}」中有 ${presetCount} 个预设，删除后这些预设将移动到未分类。确定删除吗？`)) {
|
||
return;
|
||
}
|
||
} else {
|
||
if (!confirm(`确定删除文件夹「${folder.name}」吗？`)) {
|
||
return;
|
||
}
|
||
}
|
||
|
||
store.deletePresetFolder(folder.id);
|
||
if (selectedFolderId.value === folder.id) {
|
||
selectedFolderId.value = null;
|
||
}
|
||
showNotification(`文件夹「${folder.name}」已删除`, 'info');
|
||
}
|
||
|
||
function createPreset() {
|
||
resetPresetForm();
|
||
showCreateDialog.value = true;
|
||
}
|
||
|
||
function editPreset(preset: ExtendedPreset) {
|
||
editingPreset.value = preset;
|
||
presetForm.value = {
|
||
name: preset.name,
|
||
type: preset.type,
|
||
content: preset.content,
|
||
description: preset.description || '',
|
||
tags: preset.tags?.join(', ') || '',
|
||
folderId: preset.folderId || ''
|
||
};
|
||
showCreateDialog.value = true;
|
||
}
|
||
|
||
function savePreset() {
|
||
if (!presetForm.value.name.trim() || !presetForm.value.content.trim()) {
|
||
showNotification('请填写预设名称和内容', 'error');
|
||
return;
|
||
}
|
||
|
||
const presetData = {
|
||
name: presetForm.value.name.trim(),
|
||
type: presetForm.value.type,
|
||
content: presetForm.value.content.trim(),
|
||
description: presetForm.value.description.trim() || undefined,
|
||
tags: presetForm.value.tags.trim() ? presetForm.value.tags.split(',').map(t => t.trim()) : undefined,
|
||
folderId: presetForm.value.folderId || undefined
|
||
};
|
||
|
||
if (editingPreset.value) {
|
||
store.updateExtendedPreset(editingPreset.value.id, presetData);
|
||
showNotification(`预设「${presetData.name}」已更新`, 'success');
|
||
} else {
|
||
store.createExtendedPreset(presetData);
|
||
showNotification(`预设「${presetData.name}」已创建`, 'success');
|
||
}
|
||
|
||
closePresetDialog();
|
||
}
|
||
|
||
function deletePreset(preset: ExtendedPreset) {
|
||
if (confirm(`确定删除预设「${preset.name}」吗？`)) {
|
||
store.deleteExtendedPreset(preset.id);
|
||
showNotification(`预设「${preset.name}」已删除`, 'info');
|
||
}
|
||
}
|
||
|
||
async function copyPresetContent(preset: ExtendedPreset) {
|
||
try {
|
||
await navigator.clipboard.writeText(preset.content);
|
||
showNotification(`预设「${preset.name}」内容已复制到剪贴板`, 'success');
|
||
} catch (error) {
|
||
showNotification('复制失败，请手动复制', 'error');
|
||
}
|
||
}
|
||
|
||
function applyPreset(preset: ExtendedPreset) {
|
||
store.setPromptTextRaw(preset.content);
|
||
showNotification(`已应用预设「${preset.name}」`, 'success');
|
||
}
|
||
|
||
// Import/Export
|
||
function exportPresets() {
|
||
try {
|
||
const jsonData = store.exportPresetsToJson();
|
||
const blob = new Blob([jsonData], { type: 'application/json' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `presets-${new Date().toISOString().split('T')[0]}.json`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
|
||
showNotification('预设已导出', 'success');
|
||
} catch (error) {
|
||
showNotification('导出失败', 'error');
|
||
}
|
||
}
|
||
|
||
function importPresets(event: Event) {
|
||
const file = (event.target as HTMLInputElement).files?.[0];
|
||
if (!file) return;
|
||
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => {
|
||
try {
|
||
const jsonData = e.target?.result as string;
|
||
const success = store.importPresetsFromJson(jsonData);
|
||
|
||
if (success) {
|
||
showNotification('预设导入成功', 'success');
|
||
} else {
|
||
showNotification('导入文件格式不正确或不是预设文件', 'error');
|
||
}
|
||
} catch (error) {
|
||
showNotification('导入失败：文件格式错误', 'error');
|
||
}
|
||
};
|
||
reader.readAsText(file);
|
||
|
||
(event.target as HTMLInputElement).value = '';
|
||
}
|
||
|
||
// Share & Cloud
|
||
const showShareDialog = ref(false);
|
||
const shareTab = ref<'create' | 'import'>('create');
|
||
const shareLoading = ref(false);
|
||
const shareResultCode = ref('');
|
||
const shareImportCode = ref('');
|
||
const shareSinglePreset = ref<ExtendedPreset | null>(null);
|
||
|
||
function openShareDialog(preset?: ExtendedPreset) {
|
||
shareSinglePreset.value = preset || null;
|
||
shareTab.value = 'create';
|
||
shareResultCode.value = '';
|
||
shareImportCode.value = '';
|
||
showShareDialog.value = true;
|
||
}
|
||
|
||
function handleShare(preset: ExtendedPreset) {
|
||
openShareDialog(preset);
|
||
}
|
||
|
||
async function generateShareCode() {
|
||
shareLoading.value = true;
|
||
try {
|
||
let data;
|
||
let type = 'all';
|
||
|
||
if (shareSinglePreset.value) {
|
||
data = shareSinglePreset.value;
|
||
type = 'single';
|
||
} else {
|
||
const jsonString = store.exportPresetsToJson();
|
||
try {
|
||
data = JSON.parse(jsonString);
|
||
} catch (e) {
|
||
data = {};
|
||
}
|
||
}
|
||
|
||
const response = await fetch('https://sywb.top/api/share/create', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({ data, type })
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
shareResultCode.value = result.code;
|
||
showNotification('分享码生成成功', 'success');
|
||
} else {
|
||
showNotification(result.error || '生成失败', 'error');
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
showNotification('网络错误，无法生成分享码', 'error');
|
||
} finally {
|
||
shareLoading.value = false;
|
||
}
|
||
}
|
||
|
||
// Import Analysis State
|
||
const showImportPreview = ref(false);
|
||
const importPreview = ref<{
|
||
totalPresets: number;
|
||
totalFolders: number;
|
||
newPresets: any[];
|
||
duplicatePresets: any[]; // Same content
|
||
conflictingPresets: any[]; // Same name, diff content
|
||
foldersToCreate: any[];
|
||
foldersToMerge: any[];
|
||
data: any;
|
||
}>({
|
||
totalPresets: 0,
|
||
totalFolders: 0,
|
||
newPresets: [],
|
||
duplicatePresets: [],
|
||
conflictingPresets: [],
|
||
foldersToCreate: [],
|
||
foldersToMerge: [],
|
||
data: null
|
||
});
|
||
|
||
const importOptions = ref({
|
||
skipDuplicates: true,
|
||
renameConflicts: true // if false, overwrite
|
||
});
|
||
|
||
async function importFromShareCode() {
|
||
if (!shareImportCode.value || shareImportCode.value.length !== 6) {
|
||
showNotification('请输入有效的6位分享码', 'error');
|
||
return;
|
||
}
|
||
|
||
shareLoading.value = true;
|
||
try {
|
||
const response = await fetch(`https://sywb.top/api/share/${shareImportCode.value}`);
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
const data = result.data;
|
||
|
||
// Analyze Import
|
||
analyzeImport(data);
|
||
showImportPreview.value = true;
|
||
closeShareDialog();
|
||
} else {
|
||
showNotification(result.error || '分享码无效或已过期', 'error');
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
showNotification('网络错误，无法导入', 'error');
|
||
} finally {
|
||
shareLoading.value = false;
|
||
}
|
||
}
|
||
|
||
function analyzeImport(data: any) {
|
||
const incomingPresets = Array.isArray(data.extendedPresets) ? data.extendedPresets : (Array.isArray(data.presets) ? data.presets.map((p: any) => ({
|
||
...p,
|
||
type: 'positive',
|
||
content: p.text,
|
||
description: '从旧格式导入'
|
||
})) : []);
|
||
|
||
const incomingFolders = Array.isArray(data.presetFolders) ? data.presetFolders : [];
|
||
|
||
const existingContentSet = new Set(store.extendedPresets.map(p => p.content));
|
||
const existingNameTypeSet = new Set(store.extendedPresets.map(p => `${p.name}:${p.type}`));
|
||
const existingFolderMap = new Map(store.presetFolders.map(f => [f.name, f]));
|
||
|
||
const preview = {
|
||
totalPresets: incomingPresets.length,
|
||
totalFolders: incomingFolders.length,
|
||
newPresets: [] as any[],
|
||
duplicatePresets: [] as any[],
|
||
conflictingPresets: [] as any[],
|
||
foldersToCreate: [] as any[],
|
||
foldersToMerge: [] as any[],
|
||
data
|
||
};
|
||
|
||
// Analyze Folders
|
||
for (const folder of incomingFolders) {
|
||
if (existingFolderMap.has(folder.name)) {
|
||
preview.foldersToMerge.push(folder);
|
||
} else {
|
||
preview.foldersToCreate.push(folder);
|
||
}
|
||
}
|
||
|
||
// Analyze Presets
|
||
for (const preset of incomingPresets) {
|
||
const isContentDuplicate = existingContentSet.has(preset.content);
|
||
const isNameConflict = existingNameTypeSet.has(`${preset.name}:${preset.type}`);
|
||
|
||
if (isContentDuplicate) {
|
||
preview.duplicatePresets.push(preset);
|
||
} else if (isNameConflict) {
|
||
preview.conflictingPresets.push(preset);
|
||
} else {
|
||
preview.newPresets.push(preset);
|
||
}
|
||
}
|
||
|
||
importPreview.value = preview;
|
||
}
|
||
|
||
function executeSmartImport() {
|
||
const { data, foldersToCreate, foldersToMerge } = importPreview.value;
|
||
const { skipDuplicates, renameConflicts } = importOptions.value;
|
||
|
||
// 1. Handle Folders
|
||
const idMap = new Map<string, string>();
|
||
|
||
// Map merged folders
|
||
for (const folder of foldersToMerge) {
|
||
const existing = store.presetFolders.find(f => f.name === folder.name);
|
||
if (existing) {
|
||
idMap.set(folder.id, existing.id);
|
||
}
|
||
}
|
||
|
||
// Create new folders
|
||
for (const folder of foldersToCreate) {
|
||
const newId = `folder_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
|
||
idMap.set(folder.id, newId);
|
||
|
||
const parentId = folder.parentId ? idMap.get(folder.parentId) : undefined;
|
||
|
||
store.presetFolders.push({
|
||
...folder,
|
||
id: newId,
|
||
parentId,
|
||
createdAt: new Date().toISOString(),
|
||
updatedAt: new Date().toISOString()
|
||
});
|
||
}
|
||
|
||
// 2. Handle Presets
|
||
const presetsToImport = [
|
||
...importPreview.value.newPresets,
|
||
...(skipDuplicates ? [] : importPreview.value.duplicatePresets),
|
||
...importPreview.value.conflictingPresets
|
||
];
|
||
|
||
let importedCount = 0;
|
||
|
||
for (const preset of presetsToImport) {
|
||
const isConflict = importPreview.value.conflictingPresets.includes(preset);
|
||
let finalName = preset.name;
|
||
|
||
if (isConflict && renameConflicts) {
|
||
finalName = `${preset.name} (Imported)`;
|
||
// Ensure unique name if (Imported) also exists
|
||
let counter = 1;
|
||
while (store.extendedPresets.some(p => p.name === finalName && p.type === preset.type)) {
|
||
counter++;
|
||
finalName = `${preset.name} (Imported ${counter})`;
|
||
}
|
||
} else if (isConflict && !renameConflicts) {
|
||
// Overwrite: Find and update
|
||
const existing = store.extendedPresets.find(p => p.name === preset.name && p.type === preset.type);
|
||
if (existing) {
|
||
Object.assign(existing, {
|
||
content: preset.content,
|
||
description: preset.description ?? existing.description,
|
||
tags: preset.tags ?? existing.tags,
|
||
updatedAt: new Date().toISOString()
|
||
});
|
||
importedCount++;
|
||
continue; // Skip creation
|
||
}
|
||
}
|
||
|
||
// Map folder ID
|
||
const mappedFolderId = preset.folderId ? idMap.get(preset.folderId) : undefined;
|
||
|
||
store.extendedPresets.push({
|
||
id: `preset_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`,
|
||
name: finalName,
|
||
type: preset.type,
|
||
content: preset.content,
|
||
description: preset.description,
|
||
tags: preset.tags,
|
||
folderId: mappedFolderId,
|
||
createdAt: preset.createdAt || new Date().toISOString(),
|
||
updatedAt: new Date().toISOString(),
|
||
author: preset.author
|
||
});
|
||
importedCount++;
|
||
}
|
||
|
||
store.save();
|
||
showNotification(`成功导入 ${importedCount} 个预设`, 'success');
|
||
showImportPreview.value = false;
|
||
}
|
||
|
||
function closeImportPreview() {
|
||
showImportPreview.value = false;
|
||
importPreview.value.data = null;
|
||
}
|
||
|
||
function copyShareCode() {
|
||
navigator.clipboard.writeText(shareResultCode.value);
|
||
showNotification('分享码已复制', 'success');
|
||
}
|
||
|
||
function closeShareDialog() {
|
||
showShareDialog.value = false;
|
||
shareResultCode.value = '';
|
||
shareImportCode.value = '';
|
||
shareSinglePreset.value = null;
|
||
}
|
||
|
||
// Helpers
|
||
function resetPresetForm() {
|
||
presetForm.value = {
|
||
name: '',
|
||
type: 'positive',
|
||
content: '',
|
||
description: '',
|
||
tags: '',
|
||
folderId: selectedFolderId.value && selectedFolderId.value !== '' ? selectedFolderId.value : ''
|
||
};
|
||
editingPreset.value = null;
|
||
}
|
||
|
||
function resetFolderForm() {
|
||
folderForm.value = {
|
||
name: '',
|
||
description: '',
|
||
color: '#6366f1',
|
||
parentId: ''
|
||
};
|
||
editingFolder.value = null;
|
||
}
|
||
|
||
function closePresetDialog() {
|
||
showCreateDialog.value = false;
|
||
resetPresetForm();
|
||
}
|
||
|
||
function closeFolderDialog() {
|
||
showFolderDialog.value = false;
|
||
resetFolderForm();
|
||
}
|
||
|
||
onMounted(() => {
|
||
store.initializeExtendedPresets();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="preset-manager">
|
||
<!-- Left Sidebar -->
|
||
<div class="pm-sidebar">
|
||
<PresetSidebar
|
||
:folder-tree="folderTree"
|
||
:selected-folder-id="selectedFolderId"
|
||
:expanded-ids="expandedFolderIds"
|
||
:all-count="allPresetsCount"
|
||
:uncategorized-count="uncategorizedCount"
|
||
@update:selected-folder-id="handleFolderSelect"
|
||
@toggle-expand="handleToggleExpand"
|
||
@create-folder="createFolder()"
|
||
@create-sub-folder="createFolder"
|
||
@edit-folder="editFolder"
|
||
@delete-folder="deleteFolder"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Right Content -->
|
||
<div class="pm-main">
|
||
<div class="pm-toolbar">
|
||
<div class="search-box">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
|
||
<path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
|
||
</svg>
|
||
<input v-model="searchQuery" placeholder="搜索预设..." />
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<select v-model="selectedType" class="type-select">
|
||
<option value="all">所有类型</option>
|
||
<option v-for="type in presetTypes" :key="type.value" :value="type.value">
|
||
{{ type.icon }} {{ type.label }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="action-group">
|
||
<button @click="createPreset" class="btn-primary">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2"/>
|
||
<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/>
|
||
</svg>
|
||
新建预设
|
||
</button>
|
||
|
||
<div class="import-export">
|
||
<button @click="openShareDialog()" class="btn-icon" title="云端分享/导入">
|
||
<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="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
|
||
</svg>
|
||
</button>
|
||
<button @click="exportPresets" class="btn-icon" title="导出预设">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
|
||
<polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/>
|
||
<line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2"/>
|
||
</svg>
|
||
</button>
|
||
<label class="btn-icon" title="导入预设">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
|
||
<polyline points="17,8 12,3 7,8" stroke="currentColor" stroke-width="2"/>
|
||
<line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="2"/>
|
||
</svg>
|
||
<input type="file" accept=".json" @change="importPresets" style="display: none;">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pm-content-area">
|
||
<PresetList
|
||
:presets="filteredPresets"
|
||
:search-query="searchQuery"
|
||
@apply="applyPreset"
|
||
@edit="editPreset"
|
||
@delete="deletePreset"
|
||
@copy="copyPresetContent"
|
||
@share="handleShare"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Create/Edit Preset Modal -->
|
||
<div v-if="showCreateDialog" class="modal-overlay" @click.self="closePresetDialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>{{ editingPreset ? '编辑预设' : '新建预设' }}</h3>
|
||
<button @click="closePresetDialog" class="close-btn">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label>名称</label>
|
||
<input v-model="presetForm.name" placeholder="给预设起个名字" />
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>类型</label>
|
||
<select v-model="presetForm.type">
|
||
<option v-for="t in presetTypes" :key="t.value" :value="t.value">
|
||
{{ t.icon }} {{ t.label }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>文件夹</label>
|
||
<FolderSelector
|
||
v-model="presetForm.folderId"
|
||
:tree="folderTree"
|
||
:flattened="flattenedFolders"
|
||
root-label="(无 - 未分类)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>内容</label>
|
||
<textarea v-model="presetForm.content" rows="10" placeholder="预设的提示词内容..."></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>描述 (选填)</label>
|
||
<input v-model="presetForm.description" placeholder="简短描述" />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>标签 (选填，逗号分隔)</label>
|
||
<input v-model="presetForm.tags" placeholder="tag1, tag2, tag3" />
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button @click="closePresetDialog" class="btn-secondary">取消</button>
|
||
<button @click="savePreset" class="btn-primary">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Create/Edit Folder Modal -->
|
||
<div v-if="showFolderDialog" class="modal-overlay" @click.self="closeFolderDialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>{{ editingFolder ? '编辑文件夹' : '新建文件夹' }}</h3>
|
||
<button @click="closeFolderDialog" class="close-btn">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label>名称</label>
|
||
<input v-model="folderForm.name" placeholder="文件夹名称" />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>父文件夹</label>
|
||
<FolderSelector
|
||
v-model="folderForm.parentId"
|
||
:tree="folderTree"
|
||
:flattened="flattenedFolders"
|
||
:exclude-id="editingFolder?.id"
|
||
root-label="(无 - 根文件夹)"
|
||
/>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>描述 (选填)</label>
|
||
<input v-model="folderForm.description" placeholder="简短描述" />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>颜色标记</label>
|
||
<div class="color-picker">
|
||
<div
|
||
v-for="color in ['#6366f1', '#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ec4899', '#64748b']"
|
||
:key="color"
|
||
class="color-option"
|
||
:style="{ backgroundColor: color }"
|
||
:class="{ active: folderForm.color === color }"
|
||
@click="folderForm.color = color"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button @click="closeFolderDialog" class="btn-secondary">取消</button>
|
||
<button @click="saveFolder" class="btn-primary">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Share/Import Modal -->
|
||
<div v-if="showShareDialog" class="modal-overlay" @click.self="closeShareDialog">
|
||
<div class="modal-content share-modal">
|
||
<div class="modal-header">
|
||
<h3>云端分享与导入</h3>
|
||
<button @click="closeShareDialog" class="close-btn">×</button>
|
||
</div>
|
||
|
||
<div class="share-tabs">
|
||
<button
|
||
:class="{ active: shareTab === 'create' }"
|
||
@click="shareTab = 'create'"
|
||
>
|
||
创建分享
|
||
</button>
|
||
<button
|
||
:class="{ active: shareTab === 'import' }"
|
||
@click="shareTab = 'import'"
|
||
>
|
||
导入预设
|
||
</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<!-- Create Share -->
|
||
<div v-if="shareTab === 'create'" class="share-panel">
|
||
<div class="share-info">
|
||
<p v-if="shareSinglePreset">
|
||
正在分享预设: <strong>{{ shareSinglePreset.name }}</strong>
|
||
</p>
|
||
<p v-else>
|
||
正在分享: <strong>所有预设数据</strong>
|
||
</p>
|
||
<p class="text-muted">生成一个6位数的分享码，有效期24小时。</p>
|
||
</div>
|
||
|
||
<div v-if="shareResultCode" class="share-result">
|
||
<div class="code-display">{{ shareResultCode }}</div>
|
||
<button @click="copyShareCode" class="btn-secondary">复制分享码</button>
|
||
</div>
|
||
|
||
<div v-else class="share-action">
|
||
<button
|
||
@click="generateShareCode"
|
||
class="btn-primary full-width"
|
||
:disabled="shareLoading"
|
||
>
|
||
{{ shareLoading ? '生成中...' : '生成分享码' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Import Share -->
|
||
<div v-if="shareTab === 'import'" class="share-panel">
|
||
<div class="form-group">
|
||
<label>输入6位分享码</label>
|
||
<input
|
||
v-model="shareImportCode"
|
||
placeholder="例如: 123456"
|
||
maxlength="6"
|
||
class="code-input"
|
||
/>
|
||
</div>
|
||
<div class="share-action">
|
||
<button
|
||
@click="importFromShareCode"
|
||
class="btn-primary full-width"
|
||
:disabled="shareLoading || shareImportCode.length !== 6"
|
||
>
|
||
{{ shareLoading ? '导入中...' : '导入' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Import Preview Dialog -->
|
||
<div v-if="showImportPreview" class="modal-overlay" @click.self="closeImportPreview">
|
||
<div class="modal-content import-preview-modal">
|
||
<div class="modal-header">
|
||
<h3>导入预览</h3>
|
||
<button @click="closeImportPreview" class="close-btn">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div class="preview-summary">
|
||
<div class="summary-item">
|
||
<div class="label">找到预设</div>
|
||
<div class="value">{{ importPreview.totalPresets }}</div>
|
||
</div>
|
||
<div class="summary-item">
|
||
<div class="label">找到文件夹</div>
|
||
<div class="value">{{ importPreview.totalFolders }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="preview-details">
|
||
<div class="detail-group success">
|
||
<h4>✅ 新增 ({{ importPreview.newPresets.length }})</h4>
|
||
<div class="detail-list" v-if="importPreview.newPresets.length > 0">
|
||
<span v-for="p in importPreview.newPresets.slice(0, 3)" :key="p.id || p.name">{{ p.name }}</span>
|
||
<span v-if="importPreview.newPresets.length > 3">...等 {{ importPreview.newPresets.length }} 个</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-group warning" v-if="importPreview.conflictingPresets.length > 0">
|
||
<h4>⚠️ 命名冲突 ({{ importPreview.conflictingPresets.length }})</h4>
|
||
<p class="help-text">名称相同但内容不同</p>
|
||
<div class="detail-list">
|
||
<span v-for="p in importPreview.conflictingPresets.slice(0, 3)" :key="p.id || p.name">{{ p.name }}</span>
|
||
<span v-if="importPreview.conflictingPresets.length > 3">...等</span>
|
||
</div>
|
||
<div class="option-check">
|
||
<label>
|
||
<input type="checkbox" v-model="importOptions.renameConflicts">
|
||
自动重命名 (添加 Imported 后缀)
|
||
</label>
|
||
<div class="sub-text" v-if="!importOptions.renameConflicts">将覆盖现有同名预设的内容</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-group info" v-if="importPreview.duplicatePresets.length > 0">
|
||
<h4>♻️ 完全重复 ({{ importPreview.duplicatePresets.length }})</h4>
|
||
<p class="help-text">内容完全一致</p>
|
||
<div class="option-check">
|
||
<label>
|
||
<input type="checkbox" v-model="importOptions.skipDuplicates">
|
||
跳过导入 (推荐)
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-group info" v-if="importPreview.foldersToCreate.length > 0">
|
||
<h4>📁 文件夹结构</h4>
|
||
<p>将创建 {{ importPreview.foldersToCreate.length }} 个新文件夹，合并 {{ importPreview.foldersToMerge.length }} 个现有文件夹。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button @click="closeImportPreview" class="btn-secondary">取消</button>
|
||
<button @click="executeSmartImport" class="btn-primary">确认导入</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast Notification -->
|
||
<NotificationToast
|
||
:message="notification.message"
|
||
:type="notification.type"
|
||
:show="notification.show"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.preset-manager {
|
||
display: flex;
|
||
width: 100%;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
background-color: var(--color-bg-primary);
|
||
color: var(--color-text-primary);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.pm-sidebar {
|
||
width: 280px;
|
||
flex-shrink: 0;
|
||
border-right: 1px solid var(--color-border);
|
||
height: 100%;
|
||
}
|
||
|
||
.pm-main {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
height: 100%;
|
||
}
|
||
|
||
.pm-toolbar {
|
||
padding: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
border-bottom: 1px solid var(--color-border);
|
||
background-color: var(--color-bg-secondary);
|
||
}
|
||
|
||
.search-box {
|
||
position: relative;
|
||
flex: 1;
|
||
max-width: 400px;
|
||
}
|
||
|
||
.search-box svg {
|
||
position: absolute;
|
||
left: 0.75rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--color-text-tertiary);
|
||
}
|
||
|
||
.search-box input {
|
||
width: 100%;
|
||
padding: 0.5rem 0.75rem 0.5rem 2.25rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
background-color: var(--color-bg-primary);
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.filter-group {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.type-select {
|
||
padding: 0.5rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
background-color: var(--color-bg-primary);
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.action-group {
|
||
margin-left: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.import-export {
|
||
display: flex;
|
||
gap: 0.25rem;
|
||
border-left: 1px solid var(--color-border);
|
||
padding-left: 0.75rem;
|
||
}
|
||
|
||
.pm-content-area {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
/* Buttons */
|
||
.btn-primary {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 1rem;
|
||
background-color: var(--color-accent);
|
||
color: white;
|
||
border: none;
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.btn-secondary {
|
||
padding: 0.5rem 1rem;
|
||
background-color: var(--color-bg-tertiary);
|
||
color: var(--color-text-primary);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background-color: var(--color-bg-secondary);
|
||
}
|
||
|
||
.btn-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--color-text-secondary);
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-icon:hover {
|
||
background-color: var(--color-bg-tertiary);
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
/* Modal */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 100;
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: var(--color-bg-primary);
|
||
border-radius: 16px;
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
width: 90%;
|
||
max-width: 800px;
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
animation: modal-in 0.2s ease-out;
|
||
}
|
||
|
||
@keyframes modal-in {
|
||
from { opacity: 0; transform: scale(0.95); }
|
||
to { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 1.25rem 1.75rem;
|
||
border-bottom: 1px solid var(--color-border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.modal-header h3 {
|
||
margin: 0;
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.close-btn {
|
||
background: transparent;
|
||
border: none;
|
||
font-size: 1.75rem;
|
||
color: var(--color-text-tertiary);
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
padding: 0.25rem;
|
||
border-radius: var(--radius-sm);
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
color: var(--color-text-primary);
|
||
background-color: var(--color-bg-secondary);
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 1.75rem;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
background-color: var(--color-bg-secondary);
|
||
color: var(--color-text-primary);
|
||
font-family: inherit;
|
||
font-size: 0.95rem;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group select:focus,
|
||
.form-group textarea:focus {
|
||
outline: none;
|
||
border-color: var(--color-accent);
|
||
box-shadow: 0 0 0 3px var(--color-accent-light);
|
||
background-color: var(--color-bg-primary);
|
||
}
|
||
|
||
.form-group textarea {
|
||
resize: vertical;
|
||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||
font-size: 0.9rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.form-row .form-group {
|
||
flex: 1;
|
||
}
|
||
|
||
.modal-footer {
|
||
padding: 1rem 1.5rem;
|
||
border-top: 1px solid var(--color-border);
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.color-picker {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.color-option {
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
border: 2px solid transparent;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.color-option:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.color-option.active {
|
||
border-color: var(--color-text-primary);
|
||
box-shadow: 0 0 0 2px var(--color-bg-primary);
|
||
}
|
||
|
||
.share-modal {
|
||
max-width: 400px;
|
||
}
|
||
|
||
.share-tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--color-border);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.share-tabs button {
|
||
flex: 1;
|
||
padding: 0.75rem;
|
||
background: none;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.share-tabs button.active {
|
||
color: var(--color-accent);
|
||
border-bottom-color: var(--color-accent);
|
||
}
|
||
|
||
.share-info {
|
||
text-align: center;
|
||
margin-bottom: 1.5rem;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.share-info p {
|
||
margin: 0.5rem 0;
|
||
}
|
||
|
||
.text-muted {
|
||
color: var(--color-text-tertiary);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.share-result {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.code-display {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.25rem;
|
||
color: var(--color-accent);
|
||
padding: 1rem;
|
||
background-color: var(--color-bg-secondary);
|
||
border-radius: var(--radius-md);
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.code-input {
|
||
font-size: 1.5rem;
|
||
text-align: center;
|
||
letter-spacing: 0.25rem;
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.full-width {
|
||
width: 100%;
|
||
justify-content: center;
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
/* Import Preview Styles */
|
||
.import-preview-modal {
|
||
max-width: 600px;
|
||
}
|
||
|
||
.preview-summary {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
padding: 1rem;
|
||
background-color: var(--color-bg-secondary);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.summary-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.summary-item .label {
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.summary-item .value {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.preview-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.detail-group {
|
||
padding: 1rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
background-color: var(--color-bg-primary);
|
||
}
|
||
|
||
.detail-group.success { border-left: 4px solid #10b981; }
|
||
.detail-group.warning { border-left: 4px solid #f59e0b; }
|
||
.detail-group.info { border-left: 4px solid #3b82f6; }
|
||
|
||
.detail-group h4 {
|
||
margin: 0 0 0.5rem 0;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.detail-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.detail-list span {
|
||
background-color: var(--color-bg-secondary);
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: 4px;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.help-text {
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-secondary);
|
||
margin: 0 0 0.5rem 0;
|
||
}
|
||
|
||
.option-check {
|
||
margin-top: 0.75rem;
|
||
padding-top: 0.75rem;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.option-check label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.sub-text {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-tertiary);
|
||
margin-left: 1.5rem;
|
||
margin-top: 0.25rem;
|
||
}
|
||
</style>
|