kongbai-84
/

soultide_lora

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SD人物提示词管理器 (Pro增强版)</title>
+    <style>
+        :root {
+            /* 默认浅色主题 */
+            --bg-color: #ffffff;
+            --sidebar-bg: #f8f9fa;
+            --text-color: #333333;
+            --border-color: #dee2e6;
+            --hover-color: #e9ecef;
+            --selected-bg: #cce5ff;
+            --selected-border: #b8daff;
+            --accent-color: #0d6efd;
+            --btn-text: #212529;
+            --btn-bg: #f8f9fa;
+            --tag-bg: #e2e3e5;
+            --tag-text: #383d41;
+            --tag-cn-text: #666;
+            --tag-placeholder: #adb5bd;
+            --input-bg: #ffffff;
+            --img-preview-bg: #e9ecef;
+        }
+        [data-theme="dark"] {
+            /* 深色主题 */
+            --bg-color: #212529;
+            --sidebar-bg: #2c3034;
+            --text-color: #f8f9fa;
+            --border-color: #495057;
+            --hover-color: #343a40;
+            --selected-bg: #375a7f;
+            --selected-border: #0d6efd;
+            --accent-color: #0d6efd;
+            --btn-text: #f8f9fa;
+            --btn-bg: #343a40;
+            --tag-bg: #495057;
+            --tag-text: #e9ecef;
+            --tag-cn-text: #adb5bd;
+            --tag-placeholder: #6c757d;
+            --input-bg: #212529;
+            --img-preview-bg: #343a40;
+        }
+        body {
+            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            transition: background-color 0.2s, color 0.2s;
+        }
+        /* --- Header --- */
+        header {
+            background-color: var(--sidebar-bg);
+            padding: 10px 20px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            user-select: none;
+            flex-shrink: 0;
+        }
+        h1 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
+        .toolbar { display: flex; gap: 8px; }
+        button {
+            background-color: var(--btn-bg);
+            color: var(--btn-text);
+            border: 1px solid var(--border-color);
+            padding: 6px 12px;
+            cursor: pointer;
+            border-radius: 4px;
+            font-size: 0.9rem;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.15s;
+        }
+        button:hover { background-color: var(--hover-color); }
+        button.primary { background-color: var(--accent-color); color: white; border: none; }
+        button.primary:hover { opacity: 0.9; }
+        button.danger { color: #dc3545; border-color: #dc3545; }
+        button.danger:hover { background-color: #dc3545; color: white; }
+        /* --- Layout --- */
+        .container { display: flex; flex: 1; overflow: hidden; }
+        /* --- Sidebar --- */
+        .sidebar-container {
+            width: 340px;
+            display: flex;
+            flex-direction: column;
+            background-color: var(--sidebar-bg);
+            border-right: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        /* Search Bar */
+        .search-box {
+            padding: 10px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        .search-box input {
+            width: 100%;
+            padding: 8px;
+            border-radius: 4px;
+            border: 1px solid var(--border-color);
+            background-color: var(--input-bg);
+            color: var(--text-color);
+            box-sizing: border-box;
+        }
+        .sidebar-tools {
+            padding: 8px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            gap: 5px;
+            flex-wrap: wrap;
+        }
+        .sidebar-tools button { flex: 1; justify-content: center; font-size: 0.8rem; padding: 4px; white-space: nowrap;}
+        .tree-view {
+            flex: 1;
+            overflow-y: auto;
+            padding: 5px 0;
+        }
+        .tree-node-container { margin-bottom: 2px; }
+        .tree-content {
+            padding: 6px 10px;
+            display: flex;
+            align-items: center;
+            border: 1px solid transparent;
+            margin: 1px 5px;
+            border-radius: 4px;
+            cursor: pointer;
+            white-space: nowrap;
+            user-select: none;
+        }
+        .tree-content:hover { background-color: var(--hover-color); }
+        .tree-content.selected { background-color: var(--selected-bg); border-color: var(--selected-border); }
+        .tree-content.hidden-node { display: none !important; }
+        /* Drag Visuals for Tree */
+        .tree-content.drag-over { background-color: var(--hover-color); outline: 2px dashed var(--accent-color); }
+        .icon { margin-right: 8px; display: inline-block; width: 20px; text-align: center;}
+        .collapsed > .children-container { display: none; }
+        /* --- Main Area --- */
+        .main-area {
+            flex: 1;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+            background-color: var(--bg-color);
+        }
+        .content-scroll { padding: 30px; flex: 1; }
+        .char-header {
+            border-bottom: 2px solid var(--border-color);
+            padding-bottom: 15px;
+            margin-bottom: 20px;
+        }
+        .char-title { font-size: 2rem; font-weight: bold; margin-bottom: 10px; }
+        /* Image Section */
+        .image-section {
+            background-color: var(--sidebar-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 20px;
+            display: flex;
+            gap: 20px;
+            align-items: flex-start;
+        }
+        .image-preview-box {
+            width: 150px;
+            height: 150px;
+            background-color: var(--img-preview-bg);
+            border-radius: 6px;
+            border: 1px dashed var(--border-color);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            flex-shrink: 0;
+            cursor: pointer;
+        }
+        .image-preview-box img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .image-preview-box span { color: #888; font-size: 0.8rem; text-align: center; padding: 5px;}
+        .image-controls { flex: 1; display: flex; flex-direction: column; gap: 10px; }
+        .image-path-input {
+            width: 100%;
+            padding: 8px;
+            background: var(--input-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-color);
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+        /* Editor Section */
+        .skin-tabs-container {
+            display: flex;
+            gap: 5px;
+            margin-bottom: 0;
+            flex-wrap: wrap;
+        }
+        .skin-tab {
+            padding: 8px 16px;
+            background-color: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-bottom: none;
+            cursor: pointer;
+            border-radius: 6px 6px 0 0;
+            position: relative;
+            top: 1px;
+            user-select: none;
+        }
+        .skin-tab.active {
+            background-color: var(--bg-color);
+            border-bottom: 1px solid var(--bg-color);
+            color: var(--accent-color);
+            font-weight: bold;
+            z-index: 2;
+        }
+        .skin-tab.drag-over-tab {
+            border-left: 3px solid var(--accent-color);
+            background-color: var(--hover-color);
+        }
+        .skin-tab .close-tab { margin-left: 8px; opacity: 0.5; font-size: 0.8em; }
+        .skin-tab .close-tab:hover { opacity: 1; color: red; }
+        .skin-tab:not(.add-btn):hover::after {
+            content: "双击重命名";
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0,0,0,0.7);
+            color: #fff;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.7rem;
+            white-space: nowrap;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+        .skin-tab:not(.add-btn):hover:hover::after { opacity: 1; }
+        .editor-box {
+            border: 1px solid var(--border-color);
+            border-radius: 0 4px 4px 4px;
+            padding: 20px;
+            background: var(--bg-color);
+            display: flex;
+            flex-direction: column;
+            min-height: 300px;
+        }
+        textarea {
+            width: 100%;
+            min-height: 150px;
+            background-color: var(--input-bg);
+            color: var(--text-color);
+            border: 1px solid var(--border-color);
+            padding: 15px;
+            font-family: 'Consolas', monospace;
+            resize: vertical;
+            border-radius: 4px;
+            box-sizing: border-box;
+            margin-bottom: 15px;
+        }
+        .preview-area {
+            padding: 15px;
+            background-color: var(--sidebar-bg);
+            border-radius: 4px;
+            min-height: 40px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            align-content: flex-start;
+        }
+        /* Tag Style */
+        .tag {
+            background-color: var(--tag-bg);
+            color: var(--tag-text);
+            padding: 4px 10px;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            border: 1px solid var(--border-color);
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            line-height: 1.2;
+            transition: transform 0.1s, background-color 0.2s, border-color 0.2s;
+            user-select: none;
+            max-width: 250px;
+            position: relative;
+            overflow: visible;
+        }
+        .tag:active { transform: scale(0.98); }
+        /* Highlight when hovered for shortcuts */
+        .tag.hovered-for-shortcut {
+            border-color: var(--accent-color);
+            background-color: var(--hover-color);
+            box-shadow: 0 0 5px rgba(13, 110, 253, 0.3);
+        }
+        .tag.drag-over-tag {
+            border-left: 3px solid var(--accent-color);
+            margin-left: 5px;
+        }
+        .tag.editing { cursor: default; background-color: var(--bg-color); border-color: var(--accent-color); }
+        .tag.copied {
+            background-color: #d1e7dd !important;
+            border-color: #badbcc !important;
+            color: #0f5132 !important;
+        }
+        .tag-en { font-weight: 500; text-align: center; border-bottom: 1px dotted transparent; }
+        .tag-en:hover { border-bottom-color: var(--text-color); }
+        .tag-cn {
+            font-size: 0.75rem;
+            color: var(--tag-cn-text);
+            margin-top: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 100%;
+            cursor: text;
+            border-bottom: 1px dotted transparent;
+            min-height: 14px;
+        }
+        .tag-cn.placeholder {
+            color: var(--tag-placeholder);
+            font-style: italic;
+        }
+        .tag-cn:hover { border-bottom-color: var(--tag-cn-text); }
+        .tag-input {
+            width: 80px;
+            font-size: 0.75rem;
+            padding: 1px;
+            margin-top: 2px;
+            text-align: center;
+            border: 1px solid var(--accent-color);
+            border-radius: 2px;
+            background: var(--input-bg);
+            color: var(--text-color);
+        }
+        .tag-close-btn {
+            position: absolute;
+            top: -6px;
+            right: -6px;
+            width: 16px;
+            height: 16px;
+            background-color: #dc3545;
+            color: white;
+            border-radius: 50%;
+            font-size: 12px;
+            line-height: 14px;
+            text-align: center;
+            cursor: pointer;
+            opacity: 0;
+            transition: opacity 0.2s;
+            z-index: 10;
+            display: none;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+        }
+        .tag:hover .tag-close-btn { display: block; opacity: 1; }
+        .empty-state {
+            display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #888;
+        }
+        .hidden { display: none !important; }
+        /* Modal */
+        .modal-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.5); z-index: 1000;
+            display: none; justify-content: center; align-items: center;
+        }
+        .modal {
+            background: var(--bg-color); padding: 25px; border-radius: 8px; width: 480px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            max-height: 90vh; overflow-y: auto;
+        }
+        .modal h3 { margin-top: 0; }
+        .modal input[type="text"], .modal input[type="password"], .modal input[type="number"] {
+            width: 100%; padding: 8px; margin: 5px 0;
+            background: var(--input-bg); color:var(--text-color);
+            border:1px solid var(--border-color); box-sizing: border-box;
+        }
+        .loading-spinner {
+            display: inline-block;
+            width: 12px; height: 12px;
+            border: 2px solid rgba(0,0,0,0.3);
+            border-radius: 50%;
+            border-top-color: var(--accent-color);
+            animation: spin 1s ease-in-out infinite;
+            margin-right: 5px;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .settings-group { margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
+        .settings-group:last-child { border: none; }
+        .shortcut-config-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            font-size: 0.9rem;
+        }
+        .shortcut-config-row input {
+            width: 60px !important;
+            text-align: center;
+            font-family: monospace;
+            text-transform: uppercase;
+        }
+        /* Backup List Style */
+        .backup-list {
+            max-height: 150px;
+            overflow-y: auto;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            margin-top: 5px;
+        }
+        .backup-item {
+            padding: 8px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.85rem;
+        }
+        .backup-item:last-child { border-bottom: none; }
+        .backup-item:hover { background-color: var(--hover-color); }
+        /* Shortcut Info */
+        .shortcut-info {
+            background: var(--hover-color);
+            padding: 8px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            color: var(--text-color);
+            margin-top: 10px;
+        }
+        .kbd {
+            background: var(--bg-color);
+            border: 1px solid var(--border-color);
+            border-radius: 3px;
+            padding: 0 4px;
+            font-family: monospace;
+            font-weight: bold;
+            display: inline-block;
+            min-width: 15px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+<header>
+    <h1>SD 提示词管理 <span style="font-size:0.8em; font-weight:normal; color:#888; margin-left:10px;" id="filePathDisplay"></span></h1>
+    <div class="toolbar">
+        <button id="themeToggleBtn" onclick="toggleTheme()">🌙</button>
+        <button onclick="openSettingsModal()" title="设置 API、备份和快捷键">⚙️ 设置</button>
+        <div style="width: 1px; background: var(--border-color); margin: 0 5px;"></div>
+        <button onclick="openFile()" title="选择本地 JSON 文件">📂 打开文件</button>
+        <button onclick="saveFile()" class="primary" id="saveBtn" title="保存修改到原文件">💾 保存 (覆盖)</button>
+        <button onclick="exportJson()" title="另存为新文件">📥 另存为</button>
+    </div>
+</header>
+<div class="container">
+    <div class="sidebar-container">
+        <div class="search-box">
+            <input type="text" id="searchInput" placeholder="🔍 搜索人物或文件夹..." oninput="handleSearch()">
+        </div>
+        <div class="sidebar-tools">
+            <button onclick="createNewFolder()" title="在当前位置新建文件夹">📁 新建文件夹</button>
+            <button onclick="createNewCharacter()" title="在当前位置新建人物">👤 新建人物</button>
+            <button onclick="deleteSelectedNodes()" class="danger" title="删除选中项">🗑️ 删除</button>
+            <button onclick="sortTreeNodes()" title="按名称排序 (文件夹优先)">🔤 排序</button>
+        </div>
+        <div class="tree-view" id="treeRoot" onclick="deselectAll(event)">
+            <div style="padding:30px 20px; text-align:center; color:#888; line-height:1.6;">
+                请点击上方<br><strong>“📂 打开文件”</strong><br>加载数据
+            </div>
+        </div>
+    </div>
+    <div class="main-area">
+        <div id="emptyState" class="empty-state">
+            <div style="font-size: 4rem; margin-bottom: 20px; opacity:0.3;">🖼️</div>
+            <p>请在左侧选择一个人物或文件夹查看详情</p>
+        </div>
+        <div id="contentPanel" class="content-scroll hidden">
+            <div class="char-header">
+                <div class="char-title" id="nodeTitleDisplay">名称</div>
+                <div style="font-size:0.9rem; color:#888;">类型: <span id="nodeTypeDisplay">人物</span></div>
+            </div>
+            <div class="image-section">
+                <div class="image-preview-box" id="imgPreviewContainer" onclick="triggerFileSelect()">
+                    <span id="imgPlaceholder">无图片<br>(点击选择)</span>
+                    <img id="imgPreview" class="hidden" src="" alt="预览">
+                </div>
+                <div class="image-controls">
+                    <label style="font-weight:bold;">🖼️ 封面图片</label>
+                    <div style="display:flex; gap:5px;">
+                        <input type="text" class="image-path-input" id="imgPathInput" placeholder="输入图片路径 或 点击右侧按钮选择..." oninput="updateImageFromInput()">
+                        <input type="file" id="hiddenFileInput" style="display:none;" accept="image/*" onchange="handleFileSelect(this)">
+                        <button onclick="triggerFileSelect()">📂 选择图片</button>
+                    </div>
+                </div>
+            </div>
+            <div id="promptSection" class="hidden">
+                <div class="skin-tabs-container" id="skinTabs">
+                    </div>
+                <div class="editor-box">
+                    <textarea id="promptEditor" placeholder="在此输入提示词..." oninput="handlePromptInput()"></textarea>
+                    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px;">
+                        <span style="font-size:0.85rem; color:#888; display:flex; align-items:center;">
+                            🏷️ 提示词预览 (单击复制 | 拖拽排序 | 双击中文可直接修改 | 鼠标悬停用快捷键):
+                        </span>
+                        <div style="display:flex; gap: 8px;">
+                            <button onclick="translateCurrentTags()" title="使用 DeepSeek 翻译当前页面缺失的 Tag" style="font-size:0.8rem;">
+                                <span id="transBtnIcon">🌏</span> AI翻译
+                            </button>
+                            <button onclick="copyPrompts()" style="font-size:0.8rem;">📋 复制全部</button>
+                        </div>
+                    </div>
+                    <div class="preview-area" id="tagsPreview"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="inputModal" class="modal-overlay">
+    <div class="modal" style="width: 350px;">
+        <h3 id="modalTitle">输入名称</h3>
+        <input type="text" id="modalInput">
+        <div style="display:flex; justify-content:flex-end; gap:10px; margin-top:10px;">
+            <button onclick="closeModal()">取消</button>
+            <button onclick="confirmModal()" class="primary">确定</button>
+        </div>
+    </div>
+</div>
+<div id="settingsModal" class="modal-overlay">
+    <div class="modal">
+        <h3>⚙️ 设置</h3>
+        <div class="settings-group">
+            <label style="font-weight:bold; display:block; margin-bottom:5px;">🔑 DeepSeek API Key (可选)</label>
+            <input type="password" id="apiKeyInput" placeholder="sk-...">
+            <div style="font-size:0.8rem; color:#888;">用于自动翻译英文提示词。</div>
+        </div>
+        <div class="settings-group">
+            <label style="font-weight:bold; display:block; margin-bottom:10px;">⌨️ 快捷键自定义 (鼠标悬停在 Tag 上时生效)</label>
+            <div class="shortcut-config-row">
+                <span>复制 (Copy)</span>
+                <input type="text" id="scInputCopy" maxlength="1">
+            </div>
+            <div class="shortcut-config-row">
+                <span>删除 (Delete)</span>
+                <input type="text" id="scInputDel" maxlength="1">
+            </div>
+            <div class="shortcut-config-row">
+                <span>编辑英文 (Edit En)</span>
+                <input type="text" id="scInputEn" maxlength="1">
+            </div>
+            <div class="shortcut-config-row">
+                <span>编辑中文 (Edit Cn)</span>
+                <input type="text" id="scInputCn" maxlength="1">
+            </div>
+        </div>
+        <div class="settings-group">
+            <label style="font-weight:bold; display:block; margin-bottom:5px;">🛡️ 备份管理 (浏览器本地存储)</label>
+            <div style="display:flex; align-items:center; gap:10px; margin-bottom:5px;">
+                <span style="font-size:0.9rem;">保留删除备份数量:</span>
+                <input type="number" id="backupCountInput" style="width:60px;" min="1" max="20" value="4">
+            </div>
+            <div id="backupListContainer" class="backup-list">
+                </div>
+            <div style="font-size:0.8rem; color:#888; margin-top:5px;">
+                自动备份：3小时一次 (保留1份)<br>删除备份：每次删除操作前自动触发
+            </div>
+        </div>
+        <div style="display:flex; justify-content:flex-end; gap:10px; margin-top:10px;">
+            <button onclick="closeSettingsModal()">关闭</button>
+            <button onclick="saveSettings()" class="primary">保存设置</button>
+        </div>
+    </div>
+</div>
+<script>
+    // --- Configuration: Defaults ---
+    let SHORTCUT_CONFIG = {
+        copy: 'c',
+        delete: 'd',
+        editEn: 'q',
+        editCn: 'w'
+    };
+    let AUTO_BACKUP_INTERVAL = 3 * 60 * 60 * 1000; // 3小时
+    let MAX_DELETE_BACKUPS = 4;
+    // --- Data & State ---
+    let appData = { tree: [], prompts: {}, translations: {} };
+    let fileHandle = null;
+    let apiKey = localStorage.getItem('sd_prompt_apikey') || '';
+    // Load Saved Shortcuts & Settings
+    const savedShortcuts = localStorage.getItem('sd_shortcuts');
+    if (savedShortcuts) {
+        try { SHORTCUT_CONFIG = JSON.parse(savedShortcuts); } catch(e) {}
+    }
+    const savedMaxBackups = localStorage.getItem('sd_max_backups');
+    if (savedMaxBackups) {
+        MAX_DELETE_BACKUPS = parseInt(savedMaxBackups, 10) || 4;
+    }
+    let selectedNodeId = null;
+    let selectedNodesSet = new Set();
+    let lastSelectedNodeUI = null;
+    let theme = 'light';
+    let dragSrcTab = null;
+    let dragSrcTag = null;
+    // Hover State for Shortcuts
+    let hoveredTagIndex = -1;
+    let isEditingTag = false;
+    // --- DOM Refs ---
+    const treeRoot = document.getElementById('treeRoot');
+    const contentPanel = document.getElementById('contentPanel');
+    const emptyState = document.getElementById('emptyState');
+    const nodeTitleDisplay = document.getElementById('nodeTitleDisplay');
+    const nodeTypeDisplay = document.getElementById('nodeTypeDisplay');
+    const imgPathInput = document.getElementById('imgPathInput');
+    const imgPreview = document.getElementById('imgPreview');
+    const imgPlaceholder = document.getElementById('imgPlaceholder');
+    const hiddenFileInput = document.getElementById('hiddenFileInput');
+    const promptSection = document.getElementById('promptSection');
+    const skinTabs = document.getElementById('skinTabs');
+    const promptEditor = document.getElementById('promptEditor');
+    const tagsPreview = document.getElementById('tagsPreview');
+    // --- Initialization ---
+    if(apiKey) console.log("DeepSeek Key Loaded.");
+    // Start Auto Backup Timer
+    setInterval(() => {
+        if (appData.tree.length > 0) performBackup('auto');
+    }, AUTO_BACKUP_INTERVAL);
+    // --- Backup System (LocalStorage) ---
+    function performBackup(type) {
+        if(!appData || !appData.tree || appData.tree.length === 0) return;
+        try {
+            // 重要：在任何修改发生前序列化数据
+            const dataStr = JSON.stringify(appData);
+            const timestamp = new Date().toLocaleString();
+            if (type === 'auto') {
+                const backupObj = { time: timestamp, data: dataStr, type: '自动' };
+                localStorage.setItem('sd_backup_auto', JSON.stringify(backupObj));
+                console.log("已执行自动备份");
+            } else if (type === 'delete') {
+                let list = JSON.parse(localStorage.getItem('sd_backup_del_list') || '[]');
+                list.unshift({ time: timestamp, data: dataStr, type: '删除前' });
+                // 使用用户配置的最大备份数量
+                if (list.length > MAX_DELETE_BACKUPS) list = list.slice(0, MAX_DELETE_BACKUPS);
+                localStorage.setItem('sd_backup_del_list', JSON.stringify(list));
+                console.log("已执行删除前备份");
+            }
+        } catch (e) {
+            console.error("备份失败 (可能是存储空间不足):", e);
+        }
+    }
+    function renderBackupList() {
+        const container = document.getElementById('backupListContainer');
+        container.innerHTML = '';
+        const backups = [];
+        // Load Auto Backup
+        const auto = localStorage.getItem('sd_backup_auto');
+        if(auto) backups.push(JSON.parse(auto));
+        // Load Delete Backups
+        const delList = JSON.parse(localStorage.getItem('sd_backup_del_list') || '[]');
+        backups.push(...delList);
+        if(backups.length === 0) {
+            container.innerHTML = '<div style="padding:10px; text-align:center; color:#888;">暂无备份</div>';
+            return;
+        }
+        // Sort by time roughly (though they are prepended)
+        backups.forEach((bk, idx) => {
+            const div = document.createElement('div');
+            div.className = 'backup-item';
+            div.innerHTML = `
+                <div>
+                    <strong>[${bk.type}]</strong> ${bk.time}
+                    <div style="font-size:0.75em; color:#888;">${(bk.data.length/1024).toFixed(1)} KB</div>
+                </div>
+                <div style="display:flex; gap:5px;">
+                    <button onclick="downloadBackupString(this)" data-json='${bk.data.replace(/'/g, "&#39;")}' style="font-size:0.75rem; padding:2px 6px;">📥 下载</button>
+                    <button onclick="restoreBackup(this)" data-json='${bk.data.replace(/'/g, "&#39;")}' class="danger" style="font-size:0.75rem; padding:2px 6px;">🔄 还原</button>
+                </div>
+            `;
+            container.appendChild(div);
+        });
+    }
+    function downloadBackupString(btn) {
+        const jsonStr = btn.getAttribute('data-json');
+        const blob = new Blob([jsonStr], {type: "application/json"});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a'); a.href = url; a.download = `backup_${Date.now()}.json`;
+        a.click();
+    }
+    function restoreBackup(btn) {
+        if(!confirm("⚠️ 确定要还原此备份吗？当前未保存的修改将丢失！")) return;
+        try {
+            const jsonStr = btn.getAttribute('data-json');
+            appData = JSON.parse(jsonStr);
+            addIdsToTree(appData.tree); // Ensure IDs
+            renderTree();
+            contentPanel.classList.add('hidden');
+            emptyState.classList.remove('hidden');
+            closeSettingsModal();
+            alert("✅ 备份已还原，请重新选择人物。");
+        } catch(e) {
+            alert("还原失败: " + e.message);
+        }
+    }
+    // --- Keyboard Shortcuts Listener ---
+    document.addEventListener('keydown', (e) => {
+        // Ignore if typing in an input
+        const tag = e.target.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+        if (isEditingTag) return; // Ignore if editing a tag inline
+        if (hoveredTagIndex === -1) return; // Only trigger if hovering a tag
+        const key = e.key.toLowerCase();
+        if (key === SHORTCUT_CONFIG.delete.toLowerCase()) {
+            e.preventDefault();
+            performBackup('delete'); // 备份
+            deleteTag(hoveredTagIndex);
+        } else if (key === SHORTCUT_CONFIG.copy.toLowerCase()) {
+            e.preventDefault();
+            copyTagByIndex(hoveredTagIndex);
+        } else if (key === SHORTCUT_CONFIG.editEn.toLowerCase()) {
+            e.preventDefault();
+            triggerTagEdit(hoveredTagIndex, 'en');
+        } else if (key === SHORTCUT_CONFIG.editCn.toLowerCase()) {
+            e.preventDefault();
+            triggerTagEdit(hoveredTagIndex, 'cn');
+        }
+    });
+    // --- Logic Helpers for Shortcuts ---
+    function copyTagByIndex(index) {
+        const charName = nodeTitleDisplay.innerText;
+        if (!charName || !currentSkin) return;
+        const text = appData.prompts[charName][currentSkin] || "";
+        const tags = text.split(',').map(t => t.trim()).filter(t => t);
+        if (tags[index]) {
+            navigator.clipboard.writeText(tags[index]);
+            // Find element to show effect
+            const el = tagsPreview.children[index];
+            if(el) {
+                el.classList.add('copied');
+                setTimeout(()=>el.classList.remove('copied'), 600);
+            }
+        }
+    }
+    function triggerTagEdit(index, type) {
+        const el = tagsPreview.children[index];
+        if(!el) return;
+        const charName = nodeTitleDisplay.innerText;
+        const text = appData.prompts[charName][currentSkin] || "";
+        const tags = text.split(',').map(t => t.trim()).filter(t => t);
+        const tagText = tags[index];
+        if(type === 'en') {
+            const span = el.querySelector('.tag-en');
+            editEnglishTag(el, tagText, span, index);
+        } else {
+            const span = el.querySelector('.tag-cn');
+            enableTagEditing(el, tagText, span);
+        }
+    }
+    // --- File IO ---
+    async function openFile() {
+        if (!window.showOpenFilePicker) { alert("浏览器不支持 File System API，请使用 Chrome/Edge。"); return; }
+        try {
+            [fileHandle] = await window.showOpenFilePicker({ types: [{ accept: { 'application/json': ['.json'] } }] });
+            const file = await fileHandle.getFile();
+            document.getElementById('filePathDisplay').innerText = file.name;
+            const text = await file.text();
+            appData = JSON.parse(text);
+            if (!appData.translations) appData.translations = {};
+            addIdsToTree(appData.tree);
+            renderTree();
+        } catch (e) { console.error(e); }
+    }
+    async function saveFile(silent = false) {
+        if (!fileHandle) {
+            if(!silent) alert("请先打开文件，无法保存。");
+            return;
+        }
+        try {
+            // Save Backup (Auto type) as well just in case
+            performBackup('auto');
+            const jsonStr = JSON.stringify(appData, (key, value) => {
+                if (key === '_isExpanded') return undefined;
+                return value;
+            }, 2);
+            const writable = await fileHandle.createWritable();
+            await writable.write(jsonStr);
+            await writable.close();
+            if (!silent) {
+                const btn = document.getElementById('saveBtn');
+                const oldText = btn.innerText; btn.innerText = "✅ 已保存";
+                setTimeout(()=>btn.innerText=oldText, 2000);
+            }
+        } catch (e) { if(!silent) alert("保存失败: " + e.message); }
+    }
+    function exportJson() {
+        const jsonStr = JSON.stringify(appData, (key, value) => {
+             if (key === '_isExpanded') return undefined;
+             return value;
+        }, 2);
+        const blob = new Blob([jsonStr], {type: "application/json"});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a'); a.href = url; a.download = "prompt_data.json";
+        a.click();
+    }
+    function addIdsToTree(nodes) {
+        nodes.forEach(node => {
+            if (!node._id) node._id = Math.random().toString(36).substr(2, 9);
+            if (node.children && node._isExpanded === undefined) node._isExpanded = false;
+            if (node.children) addIdsToTree(node.children);
+        });
+    }
+    // --- Search Logic ---
+    function handleSearch() {
+        const query = document.getElementById('searchInput').value.toLowerCase();
+        function checkNode(domNode) {
+            const content = domNode.querySelector('.tree-content');
+            if(!content) return false;
+            const name = content.innerText.toLowerCase();
+            const childrenContainer = domNode.querySelector('.children-container');
+            let selfMatch = name.includes(query);
+            let childMatch = false;
+            if (childrenContainer) {
+                const children = childrenContainer.children;
+                for (let child of children) { if (checkNode(child)) childMatch = true; }
+            }
+            if (query === "") {
+                content.classList.remove('hidden-node');
+                return true;
+            }
+            if (selfMatch || childMatch) {
+                content.classList.remove('hidden-node');
+                if (childMatch && childrenContainer) domNode.classList.remove('collapsed');
+                return true;
+            } else {
+                content.classList.add('hidden-node');
+                return false;
+            }
+        }
+        const topLevelNodes = treeRoot.firstElementChild ? treeRoot.firstElementChild.children : [];
+        for (let node of topLevelNodes) { checkNode(node); }
+    }
+    // --- Tree Render ---
+    function renderTree() {
+        const scrollTop = treeRoot.scrollTop;
+        treeRoot.innerHTML = '';
+        const container = document.createElement('div');
+        buildTree(appData.tree, container, 0);
+        treeRoot.appendChild(container);
+        if(document.getElementById('searchInput').value) handleSearch();
+        setTimeout(() => treeRoot.scrollTop = scrollTop, 0);
+    }
+    function buildTree(nodes, parentEl, depth) {
+        nodes.forEach(node => {
+            const isFolder = !!node.children;
+            const wrapper = document.createElement('div');
+            wrapper.className = 'tree-node-container';
+            const content = document.createElement('div');
+            content.className = 'tree-content';
+            content.dataset.id = node._id;
+            content.style.paddingLeft = (depth * 20 + 10) + 'px';
+            content.draggable = true;
+            const icon = document.createElement('span');
+            icon.className = 'icon';
+            icon.innerText = isFolder ? (node._isExpanded ? '📂' : '📁') : '👤';
+            const text = document.createElement('span');
+            text.innerText = node.name;
+            content.append(icon, text);
+            content.onclick = (e) => handleNodeClick(e, node, content);
+            if(isFolder) {
+                content.ondblclick = (e) => { e.stopPropagation(); toggleFolder(node, wrapper, icon); };
+                icon.onclick = (e) => { e.stopPropagation(); toggleFolder(node, wrapper, icon); }
+            }
+            content.ondragstart = (e) => handleDragStart(e, node);
+            content.ondragover = (e) => handleDragOver(e, node, content);
+            content.ondrop = (e) => handleDrop(e, node);
+            wrapper.appendChild(content);
+            if (isFolder) {
+                if (!node._isExpanded) wrapper.classList.add('collapsed');
+                const childBox = document.createElement('div');
+                childBox.className = 'children-container';
+                buildTree(node.children, childBox, depth + 1);
+                wrapper.appendChild(childBox);
+            }
+            parentEl.appendChild(wrapper);
+            if (selectedNodesSet.has(node._id)) content.classList.add('selected');
+        });
+    }
+    function toggleFolder(node, wrapper, icon) {
+        node._isExpanded = !node._isExpanded;
+        if (node._isExpanded) {
+            wrapper.classList.remove('collapsed');
+            icon.innerText = '📂';
+        } else {
+            wrapper.classList.add('collapsed');
+            icon.innerText = '📁';
+        }
+    }
+    function handleNodeClick(e, node, el) {
+        if (e.ctrlKey) {
+            if (selectedNodesSet.has(node._id)) { selectedNodesSet.delete(node._id); el.classList.remove('selected'); }
+            else { selectedNodesSet.add(node._id); el.classList.add('selected'); }
+        } else if (e.shiftKey && lastSelectedNodeUI) {
+            selectedNodesSet.add(node._id); el.classList.add('selected');
+        } else {
+            document.querySelectorAll('.tree-content.selected').forEach(x => x.classList.remove('selected'));
+            selectedNodesSet.clear();
+            selectedNodesSet.add(node._id);
+            el.classList.add('selected');
+            lastSelectedNodeUI = el;
+            loadNodeData(node);
+        }
+    }
+    function sortTreeNodes() {
+        if (!appData.tree || appData.tree.length === 0) return;
+        function sortRecursive(nodes) {
+            nodes.sort((a, b) => {
+                const aIsFolder = !!a.children;
+                const bIsFolder = !!b.children;
+                if (aIsFolder && !bIsFolder) return -1;
+                if (!aIsFolder && bIsFolder) return 1;
+                return a.name.localeCompare(b.name, 'zh-CN');
+            });
+            nodes.forEach(node => { if (node.children) sortRecursive(node.children); });
+        }
+        sortRecursive(appData.tree);
+        renderTree();
+        saveFile(true);
+    }
+    let draggedNodes = [];
+    function handleDragStart(e, node) {
+        if (!selectedNodesSet.has(node._id)) { selectedNodesSet.clear(); selectedNodesSet.add(node._id); }
+        draggedNodes = Array.from(selectedNodesSet);
+        e.dataTransfer.effectAllowed = 'move';
+    }
+    function handleDragOver(e, node, el) {
+        if (node.children) { e.preventDefault(); el.classList.add('drag-over'); }
+    }
+    document.addEventListener('dragend', () => document.querySelectorAll('.drag-over').forEach(x=>x.classList.remove('drag-over')));
+    function handleDrop(e, targetNode) {
+        e.preventDefault();
+        if (!targetNode.children) return;
+        targetNode._isExpanded = true;
+        const moveList = [];
+        const idSet = new Set(draggedNodes);
+        function removeRecursive(list) {
+            for(let i=list.length-1; i>=0; i--) {
+                if(idSet.has(list[i]._id)) {
+                    if(list[i] !== targetNode) moveList.push(list[i]);
+                    list.splice(i, 1);
+                } else if(list[i].children) removeRecursive(list[i].children);
+            }
+        }
+        removeRecursive(appData.tree);
+        targetNode.children.push(...moveList);
+        renderTree();
+        selectedNodesSet.clear();
+        saveFile(true);
+    }
+    function loadNodeData(node) {
+        selectedNodeId = node._id;
+        emptyState.classList.add('hidden');
+        contentPanel.classList.remove('hidden');
+        nodeTitleDisplay.innerText = node.name;
+        nodeTypeDisplay.innerText = node.children ? "文件夹" : "人物";
+        const imgPath = node.image || "";
+        imgPathInput.value = imgPath;
+        updatePreview(imgPath);
+        if (!node.children) {
+            promptSection.classList.remove('hidden');
+            loadCharacterPrompts(node.name);
+        } else {
+            promptSection.classList.add('hidden');
+        }
+    }
+    function triggerFileSelect() { hiddenFileInput.click(); }
+    function handleFileSelect(input) {
+        if (input.files && input.files[0]) {
+            const file = input.files[0];
+            const blobUrl = URL.createObjectURL(file);
+            updatePreview(blobUrl);
+            imgPathInput.value = file.name;
+            saveImageToNode(file.name);
+        }
+        input.value = '';
+    }
+    function updateImageFromInput() {
+        const val = imgPathInput.value;
+        updatePreview(val);
+        saveImageToNode(val);
+    }
+    function updatePreview(src) {
+        if (src) {
+            imgPreview.src = src;
+            imgPreview.classList.remove('hidden');
+            imgPlaceholder.classList.add('hidden');
+        } else {
+            imgPreview.src = '';
+            imgPreview.classList.add('hidden');
+            imgPlaceholder.classList.remove('hidden');
+        }
+    }
+    function saveImageToNode(path) {
+        const node = findNodeById(appData.tree, selectedNodeId);
+        if (node) { node.image = path; saveFile(true); }
+    }
+    function findNodeById(list, id) {
+        for(let node of list) {
+            if(node._id === id) return node;
+            if(node.children) { const res = findNodeById(node.children, id); if(res) return res; }
+        }
+        return null;
+    }
+    // --- Prompt & Tag Logic ---
+    let currentSkin = null;
+    function loadCharacterPrompts(charName) {
+        skinTabs.innerHTML = '';
+        if (!appData.prompts[charName]) appData.prompts[charName] = {"基础": ""};
+        const skins = Object.keys(appData.prompts[charName]);
+        if (!currentSkin || !skins.includes(currentSkin)) { currentSkin = skins.length > 0 ? skins[0] : null; }
+        skins.forEach((skin, index) => {
+            const tab = document.createElement('div');
+            tab.className = `skin-tab ${skin === currentSkin ? 'active' : ''}`;
+            tab.innerHTML = `${skin} <span class="close-tab" onclick="deleteSkin(event, '${skin}')">✖</span>`;
+            tab.onclick = () => { currentSkin = skin; loadCharacterPrompts(charName); };
+            tab.ondblclick = (e) => {
+                e.stopPropagation();
+                showInput(`重命名 "${skin}" 为:`, (newName) => renameSkin(charName, skin, newName));
+            };
+            tab.draggable = true;
+            tab.ondragstart = (e) => { dragSrcTab = { skin: skin, index: index }; e.dataTransfer.effectAllowed = 'move'; tab.style.opacity = '0.4'; };
+            tab.ondragend = () => { tab.style.opacity = '1'; document.querySelectorAll('.skin-tab').forEach(t => t.classList.remove('drag-over-tab')); };
+            tab.ondragover = (e) => { e.preventDefault(); tab.classList.add('drag-over-tab'); return false; };
+            tab.ondragleave = () => { tab.classList.remove('drag-over-tab'); };
+            tab.ondrop = (e) => { e.stopPropagation(); if (dragSrcTab.skin !== skin) { reorderSkins(charName, dragSrcTab.skin, index); } return false; };
+            skinTabs.appendChild(tab);
+        });
+        const addBtn = document.createElement('div');
+        addBtn.className = 'skin-tab add-btn';
+        addBtn.style.color = 'var(--accent-color)';
+        addBtn.innerText = '+';
+        addBtn.onclick = () => {
+            showInput('新建子内容名称', name => {
+                if(name && !appData.prompts[charName][name]) {
+                    appData.prompts[charName][name] = "";
+                    currentSkin = name;
+                    loadCharacterPrompts(charName);
+                    saveFile(true);
+                }
+            });
+        };
+        skinTabs.appendChild(addBtn);
+        if (currentSkin) {
+            const text = appData.prompts[charName][currentSkin] || "";
+            promptEditor.value = text;
+            promptEditor.disabled = false;
+            renderTags(text);
+        } else {
+            promptEditor.value = "";
+            promptEditor.disabled = true;
+            renderTags("");
+        }
+    }
+    function renameSkin(charName, oldName, newName) {
+        if (!newName || newName === oldName) return;
+        if (appData.prompts[charName][newName] !== undefined) { alert("该名称已存在！"); return; }
+        const keys = Object.keys(appData.prompts[charName]);
+        const newObj = {};
+        keys.forEach(key => {
+            if (key === oldName) newObj[newName] = appData.prompts[charName][oldName];
+            else newObj[key] = appData.prompts[charName][key];
+        });
+        appData.prompts[charName] = newObj;
+        if (currentSkin === oldName) currentSkin = newName;
+        loadCharacterPrompts(charName);
+        saveFile(true);
+    }
+    function reorderSkins(charName, draggedSkinName, targetIndex) {
+        const keys = Object.keys(appData.prompts[charName]);
+        const oldIndex = keys.indexOf(draggedSkinName);
+        if (oldIndex < 0) return;
+        keys.splice(oldIndex, 1);
+        keys.splice(targetIndex, 0, draggedSkinName);
+        const newObj = {};
+        keys.forEach(key => newObj[key] = appData.prompts[charName][key]);
+        appData.prompts[charName] = newObj;
+        loadCharacterPrompts(charName);
+        saveFile(true);
+    }
+    function handlePromptInput() {
+        const charName = nodeTitleDisplay.innerText;
+        if (charName && currentSkin) {
+            let val = promptEditor.value;
+            const cursor = promptEditor.selectionStart;
+            let newVal = val.replace(/，/g, ',').replace(/,{2,}/g, ',');
+            if (newVal !== val) {
+                promptEditor.value = newVal;
+                const diff = val.length - newVal.length;
+                const newCursor = Math.max(0, cursor - diff);
+                promptEditor.setSelectionRange(newCursor, newCursor);
+            }
+            appData.prompts[charName][currentSkin] = newVal;
+            renderTags(newVal);
+        }
+    }
+    function renderTags(text) {
+        tagsPreview.innerHTML = '';
+        hoveredTagIndex = -1; // reset on render
+        if (!text) return;
+        const tags = text.split(',').map(t => t.trim()).filter(t => t);
+        tags.forEach((t, index) => {
+            const tagEl = document.createElement('div');
+            tagEl.className = 'tag';
+            tagEl.draggable = true;
+            tagEl.dataset.value = t;
+            // Hover Event for Shortcuts
+            tagEl.onmouseenter = () => {
+                hoveredTagIndex = index;
+                tagEl.classList.add('hovered-for-shortcut');
+                tagEl.title = `双击编辑中文 | 快捷键: ${SHORTCUT_CONFIG.delete.toUpperCase()}(删) ${SHORTCUT_CONFIG.copy.toUpperCase()}(复) ${SHORTCUT_CONFIG.editEn.toUpperCase()}(英) ${SHORTCUT_CONFIG.editCn.toUpperCase()}(中)`;
+            };
+            tagEl.onmouseleave = () => {
+                hoveredTagIndex = -1;
+                tagEl.classList.remove('hovered-for-shortcut');
+            };
+            // Delete Button
+            const closeBtn = document.createElement('div');
+            closeBtn.className = 'tag-close-btn';
+            closeBtn.innerText = '×';
+            closeBtn.onclick = (e) => {
+                e.stopPropagation();
+                if(confirm(`确定删除提示词 "${t}" 吗？`)) {
+                    performBackup('delete'); // Backup trigger
+                    deleteTag(index);
+                }
+            };
+            tagEl.appendChild(closeBtn);
+            // English
+            const enSpan = document.createElement('span');
+            enSpan.className = 'tag-en';
+            enSpan.innerText = t;
+            enSpan.ondblclick = (e) => { e.stopPropagation(); editEnglishTag(tagEl, t, enSpan, index); };
+            // Chinese
+            const cnSpan = document.createElement('span');
+            cnSpan.className = 'tag-cn';
+            const trans = appData.translations && appData.translations[t.toLowerCase()];
+            if (trans) {
+                cnSpan.innerText = trans;
+            } else {
+                cnSpan.innerText = "双击添加";
+                cnSpan.classList.add('placeholder');
+            }
+            cnSpan.ondblclick = (e) => { e.stopPropagation(); enableTagEditing(tagEl, t, cnSpan); };
+            // Copy
+            tagEl.onclick = (e) => {
+                if(tagEl.classList.contains('editing')) return;
+                navigator.clipboard.writeText(t).then(() => {
+                    tagEl.classList.add('copied');
+                    setTimeout(() => tagEl.classList.remove('copied'), 600);
+                });
+            };
+            tagEl.appendChild(enSpan);
+            tagEl.appendChild(cnSpan);
+            // Drag
+            tagEl.ondragstart = (e) => {
+                if(tagEl.classList.contains('editing')) { e.preventDefault(); return; }
+                dragSrcTag = { el: tagEl, index: index, value: t };
+                e.dataTransfer.effectAllowed = 'move';
+                e.dataTransfer.setData('text/plain', t);
+                tagEl.style.opacity = '0.5';
+            };
+            tagEl.ondragend = () => { tagEl.style.opacity = '1'; document.querySelectorAll('.tag').forEach(el => el.classList.remove('drag-over-tag')); };
+            tagEl.ondragover = (e) => { e.preventDefault(); if(!tagEl.classList.contains('editing')) tagEl.classList.add('drag-over-tag'); };
+            tagEl.ondragleave = () => { tagEl.classList.remove('drag-over-tag'); };
+            tagEl.ondrop = (e) => { e.stopPropagation(); if (dragSrcTag && dragSrcTag.el !== tagEl && !tagEl.classList.contains('editing')) { handleTagDrop(dragSrcTag.index, index); } return false; };
+            tagsPreview.appendChild(tagEl);
+        });
+    }
+    function deleteTag(indexToRemove) {
+        const charName = nodeTitleDisplay.innerText;
+        if (!charName || !currentSkin) return;
+        let text = appData.prompts[charName][currentSkin] || "";
+        let tags = text.split(',').map(t => t.trim()).filter(t => t);
+        if (indexToRemove >= 0 && indexToRemove < tags.length) {
+            tags.splice(indexToRemove, 1);
+            const newText = tags.join(', ');
+            appData.prompts[charName][currentSkin] = newText;
+            promptEditor.value = newText;
+            renderTags(newText);
+            saveFile(true);
+        }
+    }
+    function editEnglishTag(tagEl, oldVal, spanEl, indexToEdit) {
+        tagEl.draggable = false;
+        tagEl.classList.add('editing');
+        isEditingTag = true; // Lock shortcuts
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'tag-input';
+        input.style.width = '120px';
+        input.value = oldVal;
+        spanEl.innerHTML = '';
+        spanEl.appendChild(input);
+        input.focus();
+        input.select(); // Auto Select All
+        const finishEdit = () => {
+            const newVal = input.value.trim().replace(/，/g, ',');
+            tagEl.classList.remove('editing');
+            tagEl.draggable = true;
+            isEditingTag = false; // Unlock shortcuts
+            if (!newVal || newVal === oldVal) {
+                 const charName = nodeTitleDisplay.innerText;
+                 renderTags(appData.prompts[charName][currentSkin]);
+                 return;
+            }
+            const charName = nodeTitleDisplay.innerText;
+            let text = appData.prompts[charName][currentSkin] || "";
+            let tags = text.split(',').map(t => t.trim()).filter(t => t);
+            if (indexToEdit >= 0 && indexToEdit < tags.length) {
+                tags[indexToEdit] = newVal;
+                const newText = tags.join(', ');
+                appData.prompts[charName][currentSkin] = newText;
+                promptEditor.value = newText;
+                renderTags(newText);
+                saveFile(true);
+            }
+        };
+        input.onblur = finishEdit;
+        input.onkeydown = (e) => { if(e.key === 'Enter') input.blur(); e.stopPropagation(); };
+        input.onclick = e => e.stopPropagation();
+    }
+    function enableTagEditing(tagEl, engTag, spanEl) {
+        tagEl.draggable = false;
+        tagEl.classList.add('editing');
+        isEditingTag = true;
+        // 如果是占位符文本，则清空，否则显示原值
+        const oldVal = spanEl.classList.contains('placeholder') ? '' : spanEl.innerText;
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'tag-input';
+        input.value = oldVal;
+        input.placeholder = "输入中文";
+        spanEl.innerHTML = '';
+        spanEl.appendChild(input);
+        input.focus();
+        // 结束编辑的回调
+        const finishEdit = () => {
+            const newVal = input.value.trim();
+            if (newVal) {
+                // 保存新翻译
+                appData.translations[engTag.toLowerCase()] = newVal;
+                saveFile(true);
+            } else if (newVal === '' && oldVal !== '') {
+                // 允许用户清空翻译（如果需要的话，也可以选择不保存）
+                // delete appData.translations[engTag.toLowerCase()];
+                // saveFile(true);
+            }
+            tagEl.classList.remove('editing');
+            tagEl.draggable = true;
+            isEditingTag = false;
+            // 重新渲染以更新显示
+            const charName = nodeTitleDisplay.innerText;
+            if(charName && currentSkin) renderTags(appData.prompts[charName][currentSkin]);
+        };
+        input.onblur = finishEdit;
+        input.onkeydown = (e) => {
+            if(e.key === 'Enter') input.blur();
+            e.stopPropagation();
+        };
+        input.onclick = e => e.stopPropagation();
+    }
+    function handleTagDrop(fromIndex, toIndex) {
+        const charName = nodeTitleDisplay.innerText;
+        const text = appData.prompts[charName][currentSkin];
+        let tags = text.split(',').map(t => t.trim()).filter(t => t);
+        const [moved] = tags.splice(fromIndex, 1);
+        tags.splice(toIndex, 0, moved);
+        const newText = tags.join(', ');
+        appData.prompts[charName][currentSkin] = newText;
+        promptEditor.value = newText;
+        renderTags(newText);
+        saveFile(true);
+    }
+    function deleteSkin(e, skin) {
+        e.stopPropagation();
+        const charName = nodeTitleDisplay.innerText;
+        if(confirm(`删除 ${skin}?`)) {
+            delete appData.prompts[charName][skin];
+            currentSkin = null;
+            loadCharacterPrompts(charName);
+            saveFile(true);
+        }
+    }
+    // --- Settings & Translation ---
+    function openSettingsModal() {
+        document.getElementById('apiKeyInput').value = apiKey;
+        // Populate Shortcut Inputs
+        document.getElementById('scInputCopy').value = SHORTCUT_CONFIG.copy;
+        document.getElementById('scInputDel').value = SHORTCUT_CONFIG.delete;
+        document.getElementById('scInputEn').value = SHORTCUT_CONFIG.editEn;
+        document.getElementById('scInputCn').value = SHORTCUT_CONFIG.editCn;
+        document.getElementById('backupCountInput').value = MAX_DELETE_BACKUPS;
+        document.getElementById('settingsModal').style.display = 'flex';
+        renderBackupList(); // Load backups
+    }
+    function closeSettingsModal() { document.getElementById('settingsModal').style.display = 'none'; }
+    function saveSettings() {
+        apiKey = document.getElementById('apiKeyInput').value.trim();
+        localStorage.setItem('sd_prompt_apikey', apiKey);
+        // Save Shortcuts
+        SHORTCUT_CONFIG.copy = (document.getElementById('scInputCopy').value || 'c').toLowerCase();
+        SHORTCUT_CONFIG.delete = (document.getElementById('scInputDel').value || 'd').toLowerCase();
+        SHORTCUT_CONFIG.editEn = (document.getElementById('scInputEn').value || 'q').toLowerCase();
+        SHORTCUT_CONFIG.editCn = (document.getElementById('scInputCn').value || 'w').toLowerCase();
+        localStorage.setItem('sd_shortcuts', JSON.stringify(SHORTCUT_CONFIG));
+        // Save Backup Count
+        const count = parseInt(document.getElementById('backupCountInput').value);
+        if (count > 0) {
+            MAX_DELETE_BACKUPS = count;
+            localStorage.setItem('sd_max_backups', MAX_DELETE_BACKUPS);
+        }
+        closeSettingsModal();
+        alert("设置已保存");
+        // Refresh UI to show new shortcuts tooltip
+        const charName = nodeTitleDisplay.innerText;
+        if(currentSkin && appData.prompts[charName]) renderTags(appData.prompts[charName][currentSkin]);
+    }
+    async function translateCurrentTags() {
+        if (!apiKey) { alert("请先在设置中配置 API Key"); return; }
+        const charName = nodeTitleDisplay.innerText;
+        const text = appData.prompts[charName][currentSkin];
+        if(!text) return;
+        const tags = text.split(',').map(t => t.trim()).filter(t => t);
+        const missingTags = tags.filter(t => !appData.translations[t.toLowerCase()]);
+        if (missingTags.length === 0) return alert("当前页面没有需要翻译的标签");
+        const icon = document.getElementById('transBtnIcon');
+        const originalIcon = icon.innerText;
+        icon.className = 'loading-spinner'; icon.innerText = '';
+        try {
+            const systemPrompt = "You are a translator for Stable Diffusion prompts. Translate the provided English tags into concise Chinese. Return strictly a JSON object where keys are the English tags and values are the Chinese translations.";
+            const userContent = JSON.stringify(missingTags);
+            const response = await fetch("https://api.deepseek.com/chat/completions", {
+                method: "POST",
+                headers: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKey}` },
+                body: JSON.stringify({ model: "deepseek-chat", messages: [{ role: "system", content: systemPrompt }, { role: "user", content: `Tags: ${userContent}` }], response_format: { type: "json_object" } })
+            });
+            const data = await response.json();
+            const resultObj = JSON.parse(data.choices[0].message.content);
+            for (const [en, cn] of Object.entries(resultObj)) { if (cn) appData.translations[en.toLowerCase()] = cn; }
+            renderTags(appData.prompts[charName][currentSkin]);
+            saveFile(true);
+        } catch (e) { console.error(e); alert("翻译出错: " + e.message); }
+        finally { icon.className = ''; icon.innerText = originalIcon; }
+    }
+    // --- Misc ---
+    function createNewFolder() { showInput('文件夹名称', name => addItem(name, true)); }
+    function createNewCharacter() { showInput('人物名称', name => addItem(name, false)); }
+    function addItem(name, isFolder) {
+        let list = appData.tree;
+        let parentNode = null;
+        if(selectedNodesSet.size === 1) {
+            const id = Array.from(selectedNodesSet)[0];
+            const node = findNodeById(appData.tree, id);
+            if(node && node.children) { list = node.children; parentNode = node; }
+        }
+        const newNode = { name, _id: Math.random().toString(36).substr(2,9), _isExpanded: false };
+        if(isFolder) newNode.children = [];
+        else if(!appData.prompts[name]) appData.prompts[name] = {"基础": ""};
+        list.push(newNode);
+        if (parentNode) parentNode._isExpanded = true;
+        selectedNodesSet.clear(); selectedNodesSet.add(newNode._id);
+        renderTree();
+        if (!isFolder) loadNodeData(newNode);
+        saveFile(true);
+    }
+    function deleteSelectedNodes() {
+        if(!selectedNodesSet.size || !confirm("确认删除选中项？")) return;
+        // 关键：在删除逻辑执行前调用备份
+        performBackup('delete');
+        const ids = new Set(selectedNodesSet);
+        function clean(list) {
+            for(let i=list.length-1; i>=0; i--) {
+                if(ids.has(list[i]._id)) {
+                    if(!list[i].children) delete appData.prompts[list[i].name];
+                    list.splice(i, 1);
+                } else if(list[i].children) clean(list[i].children);
+            }
+        }
+        clean(appData.tree);
+        selectedNodesSet.clear();
+        emptyState.classList.remove('hidden'); contentPanel.classList.add('hidden');
+        renderTree(); saveFile(true);
+    }
+    let modalCb = null;
+    function showInput(title, cb) { document.getElementById('modalTitle').innerText = title; document.getElementById('modalInput').value = ''; document.getElementById('inputModal').style.display = 'flex'; document.getElementById('modalInput').focus(); modalCb = cb; }
+    function confirmModal() { if(modalCb && document.getElementById('modalInput').value) modalCb(document.getElementById('modalInput').value); closeModal(); }
+    function closeModal() { document.getElementById('inputModal').style.display = 'none'; }
+    document.getElementById('modalInput').onkeyup = e => e.key === 'Enter' && confirmModal();
+    function toggleTheme() { theme = theme === 'light' ? 'dark' : 'light'; document.documentElement.setAttribute('data-theme', theme); document.getElementById('themeToggleBtn').innerText = theme==='light' ? '🌙' : '☀️'; }
+    function deselectAll(e) { if(e.target === treeRoot) { selectedNodesSet.clear(); document.querySelectorAll('.selected').forEach(x=>x.classList.remove('selected')); contentPanel.classList.add('hidden'); emptyState.classList.remove('hidden'); } }
+    function copyPrompts() { promptEditor.select(); document.execCommand('copy'); }
+</script>
+</body>
+</html>