// ==UserScript==
// @name         AI绘画Tag管理器（终极版-自定义分类）
// @namespace    http://tampermonkey.net/
// @version      4.0
// @description  储存AI绘画的tag组合，支持自定义分类、搜索和复制，抽屉式界面，黑暗/明亮模式，数据导入导出
// @author       salty
// @license      MIT
// @match       https://novelai.net/image*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @run-at       document-body
// @downloadURL none
// ==/UserScript==

/* 全局变量 */
let db;
const DB_NAME = 'AITagsDatabase';
const STORE_NAME = 'tagCollections';
const CATEGORY_STORE = 'tagCategories';
const DB_VERSION = 3; // 升级版本以支持新的存储对象

// 明亮模式主题颜色
const LIGHT_THEME = {
    primary: '#4f46e5',      // 靛蓝色
    secondary: '#6d28d9',    // 紫色
    success: '#10b981',      // 绿色
    danger: '#ef4444',       // 红色
    info: '#3b82f6',         // 蓝色
    warning: '#f59e0b',      // 橙色
    background: '#f8fafc',   // 浅灰背景
    surface: '#ffffff',      // 表面白色
    text: '#1e293b',         // 深蓝灰文字
    textSecondary: '#64748b', // 次要文字
    border: '#e2e8f0',       // 边框色
};

// 黑暗模式主题颜色
const DARK_THEME = {
    primary: '#6366f1',      // 靛蓝色
    secondary: '#a855f7',    // 紫色
    success: '#34d399',      // 绿色
    danger: '#f87171',       // 红色
    info: '#60a5fa',         // 蓝色
    warning: '#fbbf24',      // 橙色
    background: '#0f172a',   // 深蓝黑背景
    surface: '#1e293b',      // 表面深色
    text: '#f1f5f9',         // 浅色文字
    textSecondary: '#94a3b8', // 次要文字
    border: '#334155',       // 边框色
};

// 默认分类
const DEFAULT_CATEGORIES = [
    { id: 'character', name: '角色', color: '#8b5cf6', order: 1 },
    { id: 'scene', name: '场景', color: '#0ea5e9', order: 2 },
    { id: 'action', name: '动作', color: '#f43f5e', order: 3 },
    { id: 'singletag', name: '单tag', color: '#10b981', order: 4 },
    { id: 'artist', name: '画师', color: '#f59e0b', order: 5 }
];

/* 主函数 */
(function() {
    'use strict';
    
    console.log("======== AI绘画Tag管理器开始加载 ========");
    
    // 获取用户偏好
    const isDarkMode = GM_getValue('ai_tag_manager_darkmode', false);
    const userTheme = GM_getValue('ai_tag_manager_theme', isDarkMode ? DARK_THEME : LIGHT_THEME);
    
    // 合并主题和用户自定义颜色
    const theme = isDarkMode ? 
        {...DARK_THEME, ...userTheme} : 
        {...LIGHT_THEME, ...userTheme};
    
    /* 1. 添加CSS样式 */
    function addStyles(theme) {
        GM_addStyle(`
            /* 基本样式 */
            :root {
                --primary-color: ${theme.primary};
                --primary-hover: ${adjustColor(theme.primary, -20)};
                --secondary-color: ${theme.secondary};
                --secondary-hover: ${adjustColor(theme.secondary, -20)};
                --danger-color: ${theme.danger};
                --danger-hover: ${adjustColor(theme.danger, -20)};
                --success-color: ${theme.success};
                --success-hover: ${adjustColor(theme.success, -20)};
                --info-color: ${theme.info};
                --info-hover: ${adjustColor(theme.info, -20)};
                --warning-color: ${theme.warning};
                --warning-hover: ${adjustColor(theme.warning, -20)};
                --background-color: ${theme.background};
                --surface-color: ${theme.surface};
                --text-color: ${theme.text};
                --text-secondary: ${theme.textSecondary};
                --border-color: ${theme.border};
            }
            
            /* 动画定义 */
            @keyframes ai-tag-spin {
                to { transform: rotate(360deg); }
            }
            
            @keyframes ai-tag-fade-in {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            
            @keyframes ai-tag-slide-in {
                from { transform: translateX(20px); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
            
            @keyframes ai-tag-pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.05); }
                100% { transform: scale(1); }
            }
            
            /* 抽屉手柄 */
            #ai-tag-manager-handle {
                position: fixed;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                width: 44px;
                height: 110px;
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                border-radius: 12px 0 0 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.15);
                z-index: 9998;
                transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
                touch-action: none;
            }
            
            #ai-tag-manager-handle:hover {
                width: 48px;
                box-shadow: -3px 3px 15px rgba(0, 0, 0, 0.2);
            }
            
            #ai-tag-manager-handle:active {
                cursor: grabbing;
                background: linear-gradient(135deg, var(--primary-hover), var(--secondary-hover));
            }
            
            #ai-tag-manager-handle::before {
                content: "≡";
                color: white;
                font-size: 24px;
                font-weight: bold;
                text-shadow: 0 1px 2px rgba(0,0,0,0.2);
            }
            
            /* 抽屉容器 */
            #ai-tag-manager-drawer {
                position: fixed;
                top: 0;
                right: -350px;
                width: 320px;
                height: 100%;
                background-color: var(--surface-color);
                box-shadow: -3px 0 20px rgba(0, 0, 0, 0.15);
                z-index: 9999;
                transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
                display: flex;
                flex-direction: column;
                overflow: hidden;
                border-radius: 16px 0 0 16px;
            }
            
            #ai-tag-manager-drawer.open {
                right: 0;
            }
            
            /* 头部 */
            #ai-tag-manager-header {
                padding: 18px 20px;
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-radius: 16px 0 0 0;
            }
            
            #ai-tag-manager-title {
                font-size: 18px;
                font-weight: bold;
                margin: 0;
                text-shadow: 0 1px 2px rgba(0,0,0,0.2);
            }
            
            #ai-tag-manager-close {
                font-size: 24px;
                cursor: pointer;
                color: white;
                opacity: 0.8;
                transition: all 0.2s ease;
            }
            
            #ai-tag-manager-close:hover {
                opacity: 1;
                transform: scale(1.1);
            }
            
            #ai-tag-manager-settings {
                font-size: 18px;
                cursor: pointer;
                color: white;
                opacity: 0.8;
                margin-right: 15px;
                transition: all 0.2s ease;
            }
            
            #ai-tag-manager-settings:hover {
                opacity: 1;
                transform: rotate(30deg);
            }
            
            #ai-tag-manager-mode-toggle {
                font-size: 18px;
                cursor: pointer;
                color: white;
                opacity: 0.8;
                margin-right: 15px;
                transition: all 0.2s ease;
            }
            
            #ai-tag-manager-mode-toggle:hover {
                opacity: 1;
                transform: scale(1.1);
            }
            
            /* 搜索框 */
            #ai-tag-manager-search {
                padding: 15px 20px;
                background-color: var(--background-color);
                border-bottom: 1px solid var(--border-color);
            }
            
            #ai-tag-search-input {
                width: 100%;
                padding: 10px 15px;
                border: 1px solid var(--border-color);
                border-radius: 25px;
                font-size: 14px;
                transition: all 0.2s ease;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
                background-color: var(--surface-color);
                color: var(--text-color);
            }
            
            #ai-tag-search-input:focus {
                outline: none;
                border-color: var(--primary-color);
                box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
            }
            
            /* 标签页 */
            #ai-tag-manager-tabs {
                display: flex;
                flex-wrap: wrap;
                background-color: var(--background-color);
                border-bottom: 1px solid var(--border-color);
                padding: 0 5px;
                overflow-x: auto;
                scrollbar-width: thin;
                max-height: 120px;
            }
            
            #ai-tag-manager-tabs::-webkit-scrollbar {
                height: 4px;
                width: 4px;
            }
            
            #ai-tag-manager-tabs::-webkit-scrollbar-thumb {
                background-color: var(--border-color);
                border-radius: 2px;
            }
            
            .ai-tag-tab {
                flex: none;
                padding: 10px 12px;
                text-align: center;
                cursor: pointer;
                font-size: 14px;
                color: var(--text-secondary);
                border-bottom: 2px solid transparent;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
                margin: 0 2px;
                white-space: nowrap;
            }
            
            .ai-tag-tab.active {
                color: var(--primary-color);
                font-weight: bold;
            }
            
            .ai-tag-tab.active::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 40%;
                height: 3px;
                background-color: var(--primary-color);
                border-radius: 3px 3px 0 0;
                transition: all 0.3s ease;
            }
            
            .ai-tag-tab:hover::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 20%;
                height: 2px;
                background-color: var(--primary-color);
                border-radius: 3px 3px 0 0;
            }
            
            /* 内容区域 */
            #ai-tag-manager-content {
                flex: 1;
                overflow-y: auto;
                padding: 0;
                background-color: var(--surface-color);
            }
            
            /* 添加按钮 */
            #ai-tag-add-button {
                position: absolute;
                bottom: 25px;
                right: 25px;
                width: 56px;
                height: 56px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                color: white;
                font-size: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                z-index: 10000;
                transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            }
            
            #ai-tag-add-button:hover {
                transform: scale(1.05) rotate(90deg);
                box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
            }
            
            /* 标签项 */
            .ai-tag-collection-item {
                padding: 15px 20px;
                border-bottom: 1px solid var(--border-color);
                cursor: pointer;
                transition: all 0.2s ease;
                display: flex;
                justify-content: space-between;
                align-items: center;
                animation: ai-tag-slide-in 0.3s ease;
                background-color: var(--surface-color);
            }
            
            .ai-tag-collection-item:hover {
                background-color: var(--background-color);
                transform: translateX(-5px);
            }
            
            .ai-tag-collection-name {
                font-weight: 500;
                color: var(--text-color);
                position: relative;
                padding-left: 12px;
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .ai-tag-collection-name::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 4px;
                height: 70%;
                border-radius: 2px;
                transition: all 0.2s ease;
            }
            
            .ai-tag-collection-actions {
                display: flex;
                gap: 8px;
            }
            
            .ai-tag-action-btn {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                border: none;
                background-color: transparent;
                color: var(--text-secondary);
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s ease;
                font-size: 16px;
            }
            
            .ai-tag-action-btn:hover {
                background-color: rgba(0, 0, 0, 0.05);
                color: var(--primary-color);
                transform: scale(1.1);
            }
            
            /* 详情视图 */
            #ai-tag-detail-view {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: var(--surface-color);
                z-index: 10001;
                display: none;
                flex-direction: column;
                border-radius: 16px 0 0 16px;
                animation: ai-tag-fade-in 0.3s ease;
            }
            
            #ai-tag-detail-header {
                padding: 18px 20px;
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-radius: 16px 0 0 0;
            }
            
            #ai-tag-detail-title {
                font-size: 18px;
                font-weight: bold;
                margin: 0;
                text-shadow: 0 1px 2px rgba(0,0,0,0.2);
            }
            
            #ai-tag-detail-back {
                font-size: 24px;
                cursor: pointer;
                color: white;
                opacity: 0.8;
                transition: all 0.2s ease;
            }
            
            #ai-tag-detail-back:hover {
                opacity: 1;
                transform: scale(1.1);
            }
            
            #ai-tag-detail-content {
                flex: 1;
                padding: 20px;
                overflow-y: auto;
            }
            
            .ai-tag-detail-form-group {
                margin-bottom: 20px;
            }
            
            .ai-tag-detail-form-group label {
                display: block;
                margin-bottom: 8px;
                font-weight: 500;
                color: var(--text-color);
                font-size: 15px;
            }
            
            .ai-tag-detail-form-group input,
            .ai-tag-detail-form-group textarea,
            .ai-tag-detail-form-group select {
                width: 100%;
                padding: 12px 15px;
                border: 1px solid var(--border-color);
                border-radius: 10px;
                font-size: 15px;
                transition: all 0.2s ease;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
                background-color: var(--surface-color);
                color: var(--text-color);
            }
            
            .ai-tag-detail-form-group input:focus,
            .ai-tag-detail-form-group textarea:focus,
            .ai-tag-detail-form-group select:focus {
                outline: none;
                border-color: var(--primary-color);
                box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
            }
            
            .ai-tag-detail-form-group textarea {
                height: 150px;
                resize: vertical;
                line-height: 1.5;
            }
            
            .ai-tag-detail-actions {
                display: flex;
                gap: 12px;
                margin-top: 25px;
            }
            
            .ai-tag-btn {
                padding: 10px 20px;
                border: none;
                border-radius: 25px;
                cursor: pointer;
                font-size: 15px;
                font-weight: 500;
                transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }
            
            .ai-tag-btn-primary {
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                color: white;
            }
            
            .ai-tag-btn-primary:hover {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                transform: translateY(-2px);
            }
            
            .ai-tag-btn-secondary {
                background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
                color: white;
            }
            
            .ai-tag-btn-secondary:hover {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                transform: translateY(-2px);
            }
            
            .ai-tag-btn-danger {
                background: linear-gradient(135deg, var(--danger-color), ${adjustColor(theme.danger, -20)});
                color: white;
            }
            
            .ai-tag-btn-danger:hover {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                transform: translateY(-2px);
            }
            
            .ai-tag-btn-default {
                background-color: var(--background-color);
                color: var(--text-color);
                border: 1px solid var(--border-color);
            }
            
            .ai-tag-btn-default:hover {
                background-color: var(--surface-color);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            
            /* 空状态 */
            .ai-tag-empty-state {
                text-align: center;
                padding: 40px 20px;
                color: var(--text-secondary);
                animation: ai-tag-fade-in 0.3s ease;
                background-color: var(--surface-color);
            }
            
            .ai-tag-empty-state p {
                margin-bottom: 20px;
                font-size: 15px;
            }
            
            .ai-tag-empty-icon {
                font-size: 40px;
                color: var(--secondary-color);
                opacity: 0.5;
                margin-bottom: 15px;
            }
            
            /* 移动设备优化 */
            @media (max-width: 768px) {
                #ai-tag-manager-drawer {
                    width: 90%;
                    right: -90%;
                }
                
                #ai-tag-action-btn {
                    width: 32px;
                    height: 32px;
                    font-size: 14px;
                }
            }
            
            /* 搜索结果高亮 */
            .ai-tag-highlight {
                background-color: rgba(253, 224, 71, 0.3);
                padding: 0 2px;
                border-radius: 3px;
                color: var(--text-color);
            }
            
            /* 加载动画 */
            .ai-tag-loading {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 30px;
                flex-direction: column;
                background-color: var(--surface-color);
            }
            
            .ai-tag-loading-spinner {
                width: 40px;
                height: 40px;
                border: 3px solid rgba(0, 0, 0, 0.1);
                border-radius: 50%;
                border-top-color: var(--primary-color);
                animation: ai-tag-spin 1s ease-in-out infinite;
            }
            
            .ai-tag-loading-text {
                margin-top: 15px;
                color: var(--text-secondary);
                font-size: 14px;
            }
            
            /* 轻提示 */
            .ai-tag-toast {
                position: fixed;
                bottom: 30px;
                left: 50%;
                transform: translateX(-50%);
                background-color: rgba(0, 0, 0, 0.75);
                color: white;
                padding: 10px 20px;
                border-radius: 25px;
                z-index: 10002;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                font-size: 14px;
                animation: ai-tag-fade-in 0.2s ease;
            }
            
            /* 设置面板 */
            #ai-tag-settings-view {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: var(--surface-color);
                z-index: 10002;
                display: none;
                flex-direction: column;
                border-radius: 16px 0 0 16px;
                animation: ai-tag-fade-in 0.3s ease;
            }
            
            #ai-tag-settings-header {
                padding: 18px 20px;
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-radius: 16px 0 0 0;
            }
            
            #ai-tag-settings-title {
                font-size: 18px;
                font-weight: bold;
                margin: 0;
                text-shadow: 0 1px 2px rgba(0,0,0,0.2);
            }
            
            #ai-tag-settings-back {
                font-size: 24px;
                cursor: pointer;
                color: white;
                opacity: 0.8;
                transition: all 0.2s ease;
            }
            
            #ai-tag-settings-back:hover {
                opacity: 1;
                transform: scale(1.1);
            }
            
            #ai-tag-settings-content {
                flex: 1;
                padding: 20px;
                overflow-y: auto;
                color: var(--text-color);
            }
            
            .ai-tag-settings-section {
                margin-bottom: 25px;
                background-color: var(--background-color);
                border-radius: 12px;
                padding: 15px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            }
            
            .ai-tag-settings-section-title {
                font-size: 16px;
                font-weight: 600;
                color: var(--text-color);
                margin-bottom: 15px;
                padding-bottom: 5px;
                border-bottom: 1px solid var(--border-color);
            }
            
            .ai-tag-color-option {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
            }
            
            .ai-tag-color-option label {
                flex: 1;
                font-size: 14px;
                color: var(--text-color);
            }
            
            .ai-tag-color-picker {
                width: 30px;
                height: 30px;
                border: none;
                border-radius: 50%;
                overflow: hidden;
                cursor: pointer;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }
            
            .ai-tag-color-picker::-webkit-color-swatch-wrapper {
                padding: 0;
            }
            
            .ai-tag-color-picker::-webkit-color-swatch {
                border: none;
                border-radius: 50%;
            }
            
            .ai-tag-save-theme-btn {
                width: 100%;
                padding: 12px;
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                color: white;
                border: none;
                border-radius: 25px;
                font-size: 15px;
                font-weight: 500;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                transition: all 0.3s ease;
                margin-top: 10px;
            }
            
            .ai-tag-save-theme-btn:hover {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                transform: translateY(-2px);
            }
            
            .ai-tag-reset-theme-btn {
                width: 100%;
                padding: 12px;
                background: transparent;
                color: var(--text-secondary);
                border: 1px solid var(--border-color);
                border-radius: 25px;
                font-size: 15px;
                cursor: pointer;
                transition: all 0.3s ease;
                margin-top: 10px;
            }
            
            .ai-tag-reset-theme-btn:hover {
                background-color: var(--background-color);
                color: var(--text-color);
            }
            
            /* 数据导入导出部分 */
            .ai-tag-import-export {
                display: flex;
                gap: 10px;
                margin-top: 15px;
            }
            
            .ai-tag-import-export .ai-tag-btn {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
            }
            
            .ai-tag-file-input {
                display: none;
            }
            
            /* 暗黑模式开关 */
            .ai-tag-toggle-switch {
                position: relative;
                display: flex;
                align-items: center;
                cursor: pointer;
                margin: 15px 0;
            }
            
            .ai-tag-toggle-switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }
            
            .ai-tag-toggle-label {
                flex: 1;
                font-size: 14px;
                color: var(--text-color);
            }
            
            .ai-tag-slider {
                position: relative;
                display: inline-block;
                width: 50px;
                height: 26px;
                background-color: #ccc;
                border-radius: 34px;
                transition: .4s;
            }
            
            .ai-tag-slider:before {
                position: absolute;
                content: "";
                height: 18px;
                width: 18px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                border-radius: 50%;
                transition: .4s;
            }
            
            input:checked + .ai-tag-slider {
                background-color: var(--primary-color);
            }
            
            input:focus + .ai-tag-slider {
                box-shadow: 0 0 1px var(--primary-color);
            }
            
            input:checked + .ai-tag-slider:before {
                transform: translateX(24px);
            }
            
            .ai-tag-slider-icon {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                font-size: 12px;
                color: white;
                z-index: 1;
            }
            
            .ai-tag-slider-icon.sun {
                right: 6px;
            }
            
            .ai-tag-slider-icon.moon {
                left: 6px;
                display: none;
            }
            
            input:checked ~ .ai-tag-slider-icon.sun {
                display: none;
            }
            
            input:checked ~ .ai-tag-slider-icon.moon {
                display: block;
            }
            
            /* 分类管理视图 */
            #ai-tag-categories-view {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: var(--surface-color);
                z-index: 10003;
                display: none;
                flex-direction: column;
                border-radius: 16px 0 0 16px;
                animation: ai-tag-fade-in 0.3s ease;
            }
            
            #ai-tag-categories-header {
                padding: 18px 20px;
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-radius: 16px 0 0 0;
            }
            
            #ai-tag-categories-title {
                font-size: 18px;
                font-weight: bold;
                margin: 0;
                text-shadow: 0 1px 2px rgba(0,0,0,0.2);
            }
            
            #ai-tag-categories-back {
                font-size: 24px;
                cursor: pointer;
                color: white;
                opacity: 0.8;
                transition: all 0.2s ease;
            }
            
            #ai-tag-categories-back:hover {
                opacity: 1;
                transform: scale(1.1);
            }
            
            #ai-tag-categories-content {
                flex: 1;
                padding: 20px;
                overflow-y: auto;
            }
            
            #ai-tag-categories-list {
                margin-bottom: 20px;
            }
            
            .ai-tag-category-item {
                display: flex;
                align-items: center;
                padding: 12px 15px;
                margin-bottom: 10px;
                background-color: var(--background-color);
                border-radius: 10px;
                transition: all 0.2s ease;
            }
            
            .ai-tag-category-color {
                width: 25px;
                height: 25px;
                border-radius: 50%;
                margin-right: 15px;
                flex-shrink: 0;
            }
            
            .ai-tag-category-info {
                flex: 1;
            }
            
            .ai-tag-category-name {
                font-weight: 500;
                font-size: 15px;
                color: var(--text-color);
                margin: 0;
                margin-bottom: 3px;
            }
            
            .ai-tag-category-id {
                font-size: 12px;
                color: var(--text-secondary);
                margin: 0;
            }
            
            .ai-tag-category-actions {
                display: flex;
                gap: 8px;
            }
            
            .ai-tag-category-btn {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: none;
                background-color: transparent;
                color: var(--text-secondary);
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s ease;
                font-size: 14px;
            }
            
            .ai-tag-category-btn:hover {
                background-color: rgba(0, 0, 0, 0.05);
                color: var(--primary-color);
                transform: scale(1.1);
            }
            
            .ai-tag-add-category-form {
                background-color: var(--background-color);
                padding: 15px;
                border-radius: 10px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            }
            
            .ai-tag-add-category-form h3 {
                margin-top: 0;
                margin-bottom: 15px;
                color: var(--text-color);
                font-size: 16px;
                font-weight: 600;
            }
            
            .ai-tag-category-form-group {
                margin-bottom: 15px;
            }
            
            .ai-tag-category-form-group label {
                display: block;
                margin-bottom: 5px;
                font-weight: 500;
                color: var(--text-color);
                font-size: 14px;
            }
            
            .ai-tag-category-form-group input {
                width: 100%;
                padding: 10px;
                border: 1px solid var(--border-color);
                border-radius: 5px;
                font-size: 14px;
                background-color: var(--surface-color);
                color: var(--text-color);
            }
            
            .ai-tag-category-form-group input:focus {
                outline: none;
                border-color: var(--primary-color);
            }
            
            .ai-tag-category-form-color {
                display: flex;
                align-items: center;
            }
            
            .ai-tag-category-form-color label {
                flex: 1;
            }
            
            .ai-tag-category-form-actions {
                display: flex;
                gap: 10px;
                margin-top: 20px;
            }
            
            .ai-tag-edit-category-form {
                display: none;
            }
        `);
    }
    
    /* 2. 主程序入口 */
    function main() {
        console.log("开始初始化主程序");
        
        // 添加样式
        addStyles(theme);
        
        // 初始化数据库
        initDB().then(() => {
            console.log("数据库初始化成功，开始创建UI");
            // 创建UI
            createUI();
            showToast("AI绘画Tag管理器已加载");
        }).catch(error => {
            console.error("初始化失败:", error);
            alert("AI绘画Tag管理器初始化失败，请刷新页面重试");
        });
    }
    
    // 在文档准备好后运行
    if (document.readyState !== 'loading') {
        console.log("文档已加载，立即初始化");
        main();
    } else {
        console.log("文档加载中，等待DOMContentLoaded事件");
        document.addEventListener('DOMContentLoaded', main);
    }
    
    /* 3. 数据库操作 */
    
    // 初始化数据库
    function initDB() {
        return new Promise((resolve, reject) => {
            console.log("开始初始化数据库");
            const request = indexedDB.open(DB_NAME, DB_VERSION);
            
            request.onupgradeneeded = function(event) {
                console.log("数据库升级中");
                const db = event.target.result;
                
                // 标签集合存储
                if (!db.objectStoreNames.contains(STORE_NAME)) {
                    const tagStore = db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true });
                    tagStore.createIndex('category', 'category', { unique: false });
                    tagStore.createIndex('name', 'name', { unique: false });
                    console.log("创建标签集合存储");
                }
                
                // 分类存储
                if (!db.objectStoreNames.contains(CATEGORY_STORE)) {
                    const categoryStore = db.createObjectStore(CATEGORY_STORE, { keyPath: 'id' });
                    categoryStore.createIndex('name', 'name', { unique: true });
                    categoryStore.createIndex('order', 'order', { unique: false });
                    
                    // 添加默认分类
                    DEFAULT_CATEGORIES.forEach(category => {
                        categoryStore.add(category);
                    });
                    
                    console.log("创建分类存储并添加默认分类");
                }
                
                console.log("数据库结构已更新");
            };
            
            request.onsuccess = function(event) {
                db = event.target.result;
                console.log("数据库连接成功");
                resolve(db);
            };
            
            request.onerror = function(event) {
                console.error("数据库连接失败:", event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    // 获取所有分类
    function getAllCategories() {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([CATEGORY_STORE], 'readonly');
            const store = transaction.objectStore(CATEGORY_STORE);
            
            const request = store.getAll();
            
            request.onsuccess = function() {
                const categories = request.result;
                
                // 按顺序排序
                categories.sort((a, b) => a.order - b.order);
                
                console.log(`获取分类成功，共 ${categories.length} 个`);
                resolve(categories);
            };
            
            request.onerror = function(event) {
                console.error("获取分类失败:", event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    // 添加分类
    function addCategory(id, name, color, order) {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([CATEGORY_STORE], 'readwrite');
            const store = transaction.objectStore(CATEGORY_STORE);
            
            // 检查ID是否已存在
            const getRequest = store.get(id);
            
            getRequest.onsuccess = function() {
                if (getRequest.result) {
                    reject(new Error("分类ID已存在"));
                    return;
                }
                
                // 添加新分类
                const request = store.add({
                    id: id,
                    name: name,
                    color: color,
                    order: order || 999 // 默认排在最后
                });
                
                request.onsuccess = function() {
                    console.log("添加分类成功:", id);
                    resolve();
                };
                
                request.onerror = function(event) {
                    console.error("添加分类失败:", event.target.error);
                    reject(event.target.error);
                };
            };
            
            getRequest.onerror = function(event) {
                console.error("检查分类ID失败:", event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    // 更新分类
    function updateCategory(id, name, color, order) {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([CATEGORY_STORE], 'readwrite');
            const store = transaction.objectStore(CATEGORY_STORE);
            
            const request = store.get(id);
            
            request.onsuccess = function() {
                const category = request.result;
                
                if (!category) {
                    reject(new Error("分类不存在"));
                    return;
                }
                
                category.name = name;
                category.color = color;
                if (order !== undefined) {
                    category.order = order;
                }
                
                const updateRequest = store.put(category);
                
                updateRequest.onsuccess = function() {
                    console.log("更新分类成功:", id);
                    resolve();
                };
                
                updateRequest.onerror = function(event) {
                    console.error("更新分类失败:", event.target.error);
                    reject(event.target.error);
                };
            };
            
            request.onerror = function(event) {
                console.error("获取分类失败:", event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    // 删除分类
    function deleteCategory(id) {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            // 检查是否有标签使用该分类
            checkCategoryUsage(id).then(isUsed => {
                if (isUsed) {
                    reject(new Error("该分类下有标签，无法删除"));
                    return;
                }
                
                const transaction = db.transaction([CATEGORY_STORE], 'readwrite');
                const store = transaction.objectStore(CATEGORY_STORE);
                
                const request = store.delete(id);
                
                request.onsuccess = function() {
                    console.log("删除分类成功:", id);
                    resolve();
                };
                
                request.onerror = function(event) {
                    console.error("删除分类失败:", event.target.error);
                    reject(event.target.error);
                };
            }).catch(error => {
                reject(error);
            });
        });
    }
    
    // 检查分类是否被使用
    function checkCategoryUsage(categoryId) {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([STORE_NAME], 'readonly');
            const store = transaction.objectStore(STORE_NAME);
            const index = store.index('category');
            
            const request = index.getAll(categoryId);
            
            request.onsuccess = function() {
                const tags = request.result;
                resolve(tags.length > 0);
            };
            
            request.onerror = function(event) {
                console.error("检查分类使用失败:", event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    // 添加标签集合
    function addTagCollection(name, tags, category) {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([STORE_NAME], 'readwrite');
            const store = transaction.objectStore(STORE_NAME);
            
            const request = store.add({
                name: name,
                tags: tags,
                category: category,
                createdAt: new Date().toISOString()
            });
            
            request.onsuccess = function() {
                console.log("添加标签成功:", name);
                resolve(request.result);
            };
            
            request.onerror = function(event) {
                console.error("添加标签失败:", event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    // 批量添加标签集合
    function addTagCollections(collections) {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([STORE_NAME], 'readwrite');
            const store = transaction.objectStore(STORE_NAME);
            let successCount = 0;
            let errorCount = 0;
            
            collections.forEach(collection => {
                // 确保必要的字段存在
                if (!collection.name || !collection.tags || !collection.category) {
                    errorCount++;
                    return;
                }
                
                const request = store.add({
                    name: collection.name,
                    tags: collection.tags,
                    category: collection.category,
                    createdAt: collection.createdAt || new Date().toISOString()
                });
                
                request.onsuccess = function() {
                    successCount++;
                    if (successCount + errorCount === collections.length) {
                        resolve({ success: successCount, error: errorCount });
                    }
                };
                
                request.onerror = function() {
                    errorCount++;
                    if (successCount + errorCount === collections.length) {
                        resolve({ success: successCount, error: errorCount });
                    }
                };
            });
            
            // 如果没有集合要添加
            if (collections.length === 0) {
                resolve({ success: 0, error: 0 });
            }
        });
    }
    
    // 获取所有标签集合
    function getAllTagCollections() {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([STORE_NAME], 'readonly');
            const store = transaction.objectStore(STORE_NAME);
            
            const request = store.getAll();
            
            request.onsuccess = function() {
                console.log(`获取标签成功，共 ${request.result.length} 个`);
                resolve(request.result);
            };
            
            request.onerror = function(event) {
                console.error("获取标签失败:", event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    // 按分类获取标签集合
    function getTagCollectionsByCategory(category) {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([STORE_NAME], 'readonly');
            const store = transaction.objectStore(STORE_NAME);
            const index = store.index('category');
            
            const request = index.getAll(category);
            
            request.onsuccess = function() {
                console.log(`获取 ${category} 分类标签成功，共 ${request.result.length} 个`);
                resolve(request.result);
            };
            
            request.onerror = function(event) {
                console.error(`获取 ${category} 分类标签失败:`, event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    // 搜索标签集合
    function searchTagCollections(query) {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([STORE_NAME], 'readonly');
            const store = transaction.objectStore(STORE_NAME);
            
            const request = store.getAll();
            
            request.onsuccess = function() {
                const allCollections = request.result;
                const lowercaseQuery = query.toLowerCase();
                
                // 过滤匹配查询的集合
                const matchedCollections = allCollections.filter(collection => {
                    return collection.name.toLowerCase().includes(lowercaseQuery) || 
                           collection.tags.toLowerCase().includes(lowercaseQuery);
                });
                
                console.log(`搜索结果: ${matchedCollections.length} 个匹配`);
                resolve(matchedCollections);
            };
            
            request.onerror = function(event) {
                console.error("搜索失败:", event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    // 更新标签集合
    function updateTagCollection(id, name, tags, category) {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([STORE_NAME], 'readwrite');
            const store = transaction.objectStore(STORE_NAME);
            
            const request = store.get(id);
            
            request.onsuccess = function() {
                const data = request.result;
                if (!data) {
                    console.error("标签不存在:", id);
                    reject(new Error("标签不存在"));
                    return;
                }
                
                data.name = name;
                data.tags = tags;
                data.category = category;
                data.updatedAt = new Date().toISOString();
                
                const updateRequest = store.put(data);
                
                updateRequest.onsuccess = function() {
                    console.log("更新标签成功:", id);
                    resolve(updateRequest.result);
                };
                
                updateRequest.onerror = function(event) {
                    console.error("更新标签失败:", event.target.error);
                    reject(event.target.error);
                };
            };
            
            request.onerror = function(event) {
                console.error("获取要更新的标签失败:", event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    // 删除标签集合
    function deleteTagCollection(id) {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([STORE_NAME], 'readwrite');
            const store = transaction.objectStore(STORE_NAME);
            
            const request = store.delete(id);
            
            request.onsuccess = function() {
                console.log("删除标签成功:", id);
                resolve();
            };
            
            request.onerror = function(event) {
                console.error("删除标签失败:", event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    // 清空所有标签
    function clearAllTagCollections() {
        return new Promise((resolve, reject) => {
            if (!db) {
                console.error("数据库未初始化");
                reject(new Error("数据库未初始化"));
                return;
            }
            
            const transaction = db.transaction([STORE_NAME], 'readwrite');
            const store = transaction.objectStore(STORE_NAME);
            
            const request = store.clear();
            
            request.onsuccess = function() {
                console.log("清空所有标签成功");
                resolve();
            };
            
            request.onerror = function(event) {
                console.error("清空标签失败:", event.target.error);
                reject(event.target.error);
            };
        });
    }
    
    /* 4. UI创建与事件绑定 */
    
    // 创建UI元素并绑定事件
    function createUI() {
        console.log("开始创建UI");
        
        // 创建拖动手柄
        const handle = document.createElement('div');
        handle.id = 'ai-tag-manager-handle';
        document.body.appendChild(handle);
        console.log("拖动手柄已创建");
        
        // 创建抽屉容器
        const drawer = document.createElement('div');
        drawer.id = 'ai-tag-manager-drawer';
        
        drawer.innerHTML = `
            <div id="ai-tag-manager-header">
                <h2 id="ai-tag-manager-title">AI绘画Tag管理器</h2>
                <div style="display: flex; align-items: center;">
                    <span id="ai-tag-manager-mode-toggle">${isDarkMode ? '☀️' : '🌙'}</span>
                    <span id="ai-tag-manager-settings">⚙️</span>
                    <span id="ai-tag-manager-close">&times;</span>
                </div>
            </div>
            
            <div id="ai-tag-manager-search">
                <input type="text" id="ai-tag-search-input" placeholder="搜索标签组合...">
            </div>
            
            <div id="ai-tag-manager-tabs">
                <!-- 动态生成标签页 -->
            </div>
            
            <div id="ai-tag-manager-content"></div>
            
            <div id="ai-tag-add-button">+</div>
        `;
        
        document.body.appendChild(drawer);
        console.log("抽屉容器已创建");
        
        // 创建详情视图
        const detailView = document.createElement('div');
        detailView.id = 'ai-tag-detail-view';
        
        detailView.innerHTML = `
            <div id="ai-tag-detail-header">
                <span id="ai-tag-detail-back">←</span>
                <h2 id="ai-tag-detail-title">标签详情</h2>
                <span style="width:24px;"></span>
            </div>
            
            <div id="ai-tag-detail-content">
                <div class="ai-tag-detail-form-group">
                    <label for="ai-tag-detail-name">组合名称</label>
                    <input type="text" id="ai-tag-detail-name" placeholder="输入一个便于记忆的名称" required>
                </div>
                
                <div class="ai-tag-detail-form-group">
                    <label for="ai-tag-detail-category">分类</label>
                    <select id="ai-tag-detail-category" required>
                        <!-- 动态生成分类选项 -->
                    </select>
                </div>
                
                <div class="ai-tag-detail-form-group">
                    <label for="ai-tag-detail-tags">标签组合</label>
                    <textarea id="ai-tag-detail-tags" placeholder="输入或粘贴你的标签组合" required></textarea>
                </div>
                
                <div class="ai-tag-detail-actions">
                    <button id="ai-tag-detail-save" class="ai-tag-btn ai-tag-btn-primary">保存</button>
                    <button id="ai-tag-detail-cancel" class="ai-tag-btn ai-tag-btn-secondary">取消</button>
                    <button id="ai-tag-detail-delete" class="ai-tag-btn ai-tag-btn-danger" style="margin-left: auto;">删除</button>
                </div>
            </div>
        `;
        
        drawer.appendChild(detailView);
        console.log("详情视图已创建");
        
        // 创建设置面板
        const settingsView = document.createElement('div');
        settingsView.id = 'ai-tag-settings-view';
        
        settingsView.innerHTML = `
            <div id="ai-tag-settings-header">
                <span id="ai-tag-settings-back">←</span>
                <h2 id="ai-tag-settings-title">设置</h2>
                <span style="width:24px;"></span>
            </div>
            
            <div id="ai-tag-settings-content">
                <div class="ai-tag-settings-section">
                    <h3 class="ai-tag-settings-section-title">显示模式</h3>
                    
                    <label class="ai-tag-toggle-switch">
                        <span class="ai-tag-toggle-label">暗黑模式</span>
                        <input type="checkbox" id="ai-tag-darkmode-toggle" ${isDarkMode ? 'checked' : ''}>
                        <span class="ai-tag-slider"></span>
                        <span class="ai-tag-slider-icon sun">☀️</span>
                        <span class="ai-tag-slider-icon moon">🌙</span>
                    </label>
                </div>
                
                <div class="ai-tag-settings-section">
                    <h3 class="ai-tag-settings-section-title">分类管理</h3>
                    
                    <p>自定义和管理标签分类</p>
                    <button id="ai-tag-manage-categories-btn" class="ai-tag-btn ai-tag-btn-primary">
                        <span>管理分类</span>
                    </button>
                </div>
                
                <div class="ai-tag-settings-section">
                    <h3 class="ai-tag-settings-section-title">数据管理</h3>
                    
                    <div class="ai-tag-import-export">
                        <button id="ai-tag-export-btn" class="ai-tag-btn ai-tag-btn-primary">
                            <span>导出数据</span>
                            <span>📤</span>
                        </button>
                        
                        <button id="ai-tag-import-btn" class="ai-tag-btn ai-tag-btn-secondary">
                            <span>导入数据</span>
                            <span>📥</span>
                        </button>
                    </div>
                    
                    <input type="file" id="ai-tag-file-input" class="ai-tag-file-input" accept=".json">
                    
                    <div style="margin-top: 15px;">
                        <button id="ai-tag-clear-btn" class="ai-tag-btn ai-tag-btn-danger">
                            <span>清空所有数据</span>
                            <span>🗑️</span>
                        </button>
                    </div>
                </div>
                
                <div class="ai-tag-settings-section">
                    <h3 class="ai-tag-settings-section-title">主题颜色</h3>
                    
                    <div class="ai-tag-color-option">
                        <label>主题色</label>
                        <input type="color" class="ai-tag-color-picker" id="ai-tag-color-primary" value="${theme.primary}">
                    </div>
                    
                    <div class="ai-tag-color-option">
                        <label>次要颜色</label>
                        <input type="color" class="ai-tag-color-picker" id="ai-tag-color-secondary" value="${theme.secondary}">
                    </div>
                    
                    <div class="ai-tag-color-option">
                        <label>成功色</label>
                        <input type="color" class="ai-tag-color-picker" id="ai-tag-color-success" value="${theme.success}">
                    </div>
                    
                    <div class="ai-tag-color-option">
                        <label>危险色</label>
                        <input type="color" class="ai-tag-color-picker" id="ai-tag-color-danger" value="${theme.danger}">
                    </div>
                    
                    <div class="ai-tag-color-option">
                        <label>信息色</label>
                        <input type="color" class="ai-tag-color-picker" id="ai-tag-color-info" value="${theme.info}">
                    </div>
                    
                    <button id="ai-tag-save-theme" class="ai-tag-save-theme-btn">保存配色</button>
                    <button id="ai-tag-reset-theme" class="ai-tag-reset-theme-btn">恢复默认配色</button>
                </div>
            </div>
        `;
        
        drawer.appendChild(settingsView);
        console.log("设置面板已创建");
        
        // 创建分类管理视图
        const categoriesView = document.createElement('div');
        categoriesView.id = 'ai-tag-categories-view';
        
        categoriesView.innerHTML = `
            <div id="ai-tag-categories-header">
                <span id="ai-tag-categories-back">←</span>
                <h2 id="ai-tag-categories-title">分类管理</h2>
                <span style="width:24px;"></span>
            </div>
            
            <div id="ai-tag-categories-content">
                <div id="ai-tag-categories-list">
                    <!-- 动态生成分类列表 -->
                </div>
                
                <div class="ai-tag-add-category-form">
                    <h3>添加新分类</h3>
                    
                    <div class="ai-tag-category-form-group">
                        <label for="ai-tag-category-id">分类ID (英文字母和数字)</label>
                        <input type="text" id="ai-tag-category-id" placeholder="如: background" required>
                    </div>
                    
                    <div class="ai-tag-category-form-group">
                        <label for="ai-tag-category-name">分类名称</label>
                        <input type="text" id="ai-tag-category-name" placeholder="如: 背景" required>
                    </div>
                    
                    <div class="ai-tag-category-form-group ai-tag-category-form-color">
                        <label for="ai-tag-category-color">分类颜色</label>
                        <input type="color" id="ai-tag-category-color" class="ai-tag-color-picker" value="#3b82f6">
                    </div>
                    
                    <div class="ai-tag-category-form-actions">
                        <button id="ai-tag-add-category" class="ai-tag-btn ai-tag-btn-primary">添加</button>
                    </div>
                </div>
                
                <div class="ai-tag-edit-category-form">
                    <h3>编辑分类</h3>
                    
                    <div class="ai-tag-category-form-group">
                        <label for="ai-tag-edit-category-name">分类名称</label>
                        <input type="text" id="ai-tag-edit-category-name" required>
                    </div>
                    
                    <div class="ai-tag-category-form-group ai-tag-category-form-color">
                        <label for="ai-tag-edit-category-color">分类颜色</label>
                        <input type="color" id="ai-tag-edit-category-color" class="ai-tag-color-picker">
                    </div>
                    
                    <div class="ai-tag-category-form-actions">
                        <button id="ai-tag-update-category" class="ai-tag-btn ai-tag-btn-primary">保存</button>
                        <button id="ai-tag-cancel-edit-category" class="ai-tag-btn ai-tag-btn-secondary">取消</button>
                    </div>
                </div>
            </div>
        `;
        
        drawer.appendChild(categoriesView);
        console.log("分类管理视图已创建");
        
        // 加载分类并初始化UI
        loadCategoriesAndInitUI(drawer, detailView, settingsView, categoriesView);
    }
    
    // 加载分类并初始化UI
    function loadCategoriesAndInitUI(drawer, detailView, settingsView, categoriesView) {
        getAllCategories().then(categories => {
            // 动态生成标签页
            const tabsContainer = document.getElementById('ai-tag-manager-tabs');
            tabsContainer.innerHTML = `<div class="ai-tag-tab active" data-category="all">全部</div>`;
            
            categories.forEach(category => {
                tabsContainer.innerHTML += `<div class="ai-tag-tab" data-category="${category.id}">${category.name}</div>`;
            });
            
            // 动态生成分类选项
            const categorySelect = document.getElementById('ai-tag-detail-category');
            categorySelect.innerHTML = '';
            
            categories.forEach(category => {
                categorySelect.innerHTML += `<option value="${category.id}">${category.name}</option>`;
            });
            
            // 生成分类列表
            renderCategoriesList(categories);
            
            // 为每个分类添加标签样式
            let categoryStyles = '';
            categories.forEach(category => {
                categoryStyles += `
                    .ai-tag-collection-name.${category.id}::before {
                        background-color: ${category.color};
                    }
                `;
            });
            GM_addStyle(categoryStyles);
            
            // 绑定事件
            bindEvents(drawer, detailView, settingsView, categoriesView, categories);
        }).catch(error => {
            console.error("加载分类失败:", error);
            showToast("加载分类失败，请刷新页面重试");
        });
    }
    
    // 渲染分类列表
    function renderCategoriesList(categories) {
        const categoriesList = document.getElementById('ai-tag-categories-list');
        categoriesList.innerHTML = '';
        
        categories.forEach(category => {
            // 默认分类特殊处理
            const isDefaultCategory = DEFAULT_CATEGORIES.some(c => c.id === category.id);
            
            const categoryItem = document.createElement('div');
            categoryItem.className = 'ai-tag-category-item';
            categoryItem.dataset.id = category.id;
            
            categoryItem.innerHTML = `
                <div class="ai-tag-category-color" style="background-color: ${category.color};"></div>
                <div class="ai-tag-category-info">
                    <p class="ai-tag-category-name">${escapeHTML(category.name)}</p>
                    <p class="ai-tag-category-id">${category.id}</p>
                </div>
                <div class="ai-tag-category-actions">
                    <button class="ai-tag-category-btn ai-tag-category-edit-btn" title="编辑">✏️</button>
                    ${!isDefaultCategory ? `<button class="ai-tag-category-btn ai-tag-category-delete-btn" title="删除">🗑️</button>` : ''}
                </div>
            `;
            
            categoriesList.appendChild(categoryItem);
            
            // 编辑按钮点击事件
            const editBtn = categoryItem.querySelector('.ai-tag-category-edit-btn');
            editBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                // 显示编辑表单
                const editForm = document.querySelector('.ai-tag-edit-category-form');
                editForm.style.display = 'block';
                
                // 设置表单值
                document.getElementById('ai-tag-edit-category-name').value = category.name;
                document.getElementById('ai-tag-edit-category-color').value = category.color;
                
                // 设置编辑ID
                editForm.dataset.editId = category.id;
            });
            
            // 删除按钮点击事件
            if (!isDefaultCategory) {
                const deleteBtn = categoryItem.querySelector('.ai-tag-category-delete-btn');
                deleteBtn.addEventListener('click', async function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    if (confirm(`确定要删除 "${category.name}" 分类吗？`)) {
                        try {
                            await deleteCategory(category.id);
                            
                            // 重新加载分类
                            const updatedCategories = await getAllCategories();
                            renderCategoriesList(updatedCategories);
                            
                            // 更新标签页和分类选择器
                            updateCategoryUIElements(updatedCategories);
                            
                            showToast('分类删除成功');
                        } catch (error) {
                            if (error.message === "该分类下有标签，无法删除") {
                                showToast('该分类下存在标签，请先移除或修改这些标签');
                            } else {
                                console.error("删除分类失败:", error);
                                showToast('删除分类失败');
                            }
                        }
                    }
                });
            }
        });
    }
    
    // 更新分类相关的UI元素
    function updateCategoryUIElements(categories) {
        // 更新标签页
        const tabsContainer = document.getElementById('ai-tag-manager-tabs');
        tabsContainer.innerHTML = `<div class="ai-tag-tab active" data-category="all">全部</div>`;
        
        categories.forEach(category => {
            tabsContainer.innerHTML += `<div class="ai-tag-tab" data-category="${category.id}">${category.name}</div>`;
        });
        
        // 更新标签页点击事件
        const tabs = document.querySelectorAll('.ai-tag-tab');
        tabs.forEach(tab => {
            tab.addEventListener('click', function(e) {
                console.log("点击了标签页:", this.dataset.category);
                e.preventDefault();
                e.stopPropagation();
                
                // 更新活动标签
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 加载对应分类的标签
                const category = this.dataset.category;
                renderTagCollections(category);
            });
        });
        
        // 更新分类选择器
        const categorySelect = document.getElementById('ai-tag-detail-category');
        categorySelect.innerHTML = '';
        
        categories.forEach(category => {
            categorySelect.innerHTML += `<option value="${category.id}">${category.name}</option>`;
        });
        
        // 更新分类样式
        let categoryStyles = '';
        categories.forEach(category => {
            categoryStyles += `
                .ai-tag-collection-name.${category.id}::before {
                    background-color: ${category.color};
                }
            `;
        });
        GM_addStyle(categoryStyles);
    }
    
    // 绑定所有事件
    function bindEvents(drawer, detailView, settingsView, categoriesView, categories) {
        console.log("开始绑定事件");
        
        // 1. 拖动手柄点击事件
        document.getElementById('ai-tag-manager-handle').addEventListener('click', function(e) {
            console.log("点击了拖动手柄");
            e.preventDefault(); // 阻止默认行为
            e.stopPropagation(); // 阻止冒泡
            
            // 切换抽屉状态
            drawer.classList.toggle('open');
            
            // 如果抽屉被打开，加载标签
            if (drawer.classList.contains('open')) {
                console.log("抽屉被打开，加载标签");
                renderTagCollections('all');
            }
        });
        
        // 2. 关闭按钮点击事件
        document.getElementById('ai-tag-manager-close').addEventListener('click', function(e) {
            console.log("点击了关闭按钮");
            e.preventDefault();
            e.stopPropagation();
            drawer.classList.remove('open');
        });
        
        // 3. 标签页切换事件
        const tabs = document.querySelectorAll('.ai-tag-tab');
        tabs.forEach(tab => {
            tab.addEventListener('click', function(e) {
                console.log("点击了标签页:", this.dataset.category);
                e.preventDefault();
                e.stopPropagation();
                
                // 更新活动标签
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 加载对应分类的标签
                const category = this.dataset.category;
                renderTagCollections(category);
            });
        });
        
        // 4. 搜索输入事件
        const searchInput = document.getElementById('ai-tag-search-input');
        let searchTimeout;
        
        searchInput.addEventListener('input', function(e) {
            e.stopPropagation();
            
            clearTimeout(searchTimeout);
            
            searchTimeout = setTimeout(() => {
                const query = this.value.trim();
                console.log("搜索:", query);
                
                if (query) {
                    searchAndRenderResults(query);
                } else {
                    const activeTab = document.querySelector('.ai-tag-tab.active');
                    renderTagCollections(activeTab.dataset.category);
                }
            }, 300); // 添加防抖延迟
        });
        
        // 5. 添加按钮点击事件
        document.getElementById('ai-tag-add-button').addEventListener('click', function(e) {
            console.log("点击了添加按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 显示添加表单
            showAddForm();
        });
        
        // 6. 详情视图返回按钮点击事件
        document.getElementById('ai-tag-detail-back').addEventListener('click', function(e) {
            console.log("点击了返回按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 隐藏详情视图
            detailView.style.display = 'none';
        });
        
        // 7. 保存按钮点击事件
        document.getElementById('ai-tag-detail-save').addEventListener('click', async function(e) {
            console.log("点击了保存按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 获取表单值
            const nameInput = document.getElementById('ai-tag-detail-name');
            const categorySelect = document.getElementById('ai-tag-detail-category');
            const tagsInput = document.getElementById('ai-tag-detail-tags');
            
            const name = nameInput.value.trim();
            const category = categorySelect.value;
            const tags = tagsInput.value.trim();
            
            if (!name || !tags) {
                showToast('请填写完整信息');
                return;
            }
            
            try {
                const editId = detailView.dataset.editId;
                
                if (editId) {
                    // 更新现有组合
                    await updateTagCollection(parseInt(editId), name, tags, category);
                    showToast('更新成功');
                } else {
                    // 添加新组合
                    await addTagCollection(name, tags, category);
                    showToast('添加成功');
                }
                
                // 隐藏详情视图
                detailView.style.display = 'none';
                
                // 刷新列表
                const activeTab = document.querySelector('.ai-tag-tab.active');
                renderTagCollections(activeTab.dataset.category);
            } catch (error) {
                console.error("保存标签失败:", error);
                showToast('保存失败，请重试');
            }
        });
        
        // 8. 取消按钮点击事件
        document.getElementById('ai-tag-detail-cancel').addEventListener('click', function(e) {
            console.log("点击了取消按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 隐藏详情视图
            detailView.style.display = 'none';
        });
        
        // 9. 删除按钮点击事件
        document.getElementById('ai-tag-detail-delete').addEventListener('click', async function(e) {
            console.log("点击了删除按钮");
            e.preventDefault();
            e.stopPropagation();
            
            const editId = detailView.dataset.editId;
            
            if (!editId) return;
            
            if (confirm('确定要删除这个标签组合吗？')) {
                try {
                    await deleteTagCollection(parseInt(editId));
                    
                    // 隐藏详情视图
                    detailView.style.display = 'none';
                    
                    // 刷新列表
                    const activeTab = document.querySelector('.ai-tag-tab.active');
                    renderTagCollections(activeTab.dataset.category);
                    
                    showToast('删除成功');
                } catch (error) {
                    console.error("删除标签失败:", error);
                    showToast('删除失败，请重试');
                }
            }
        });
        
        // 10. 设置按钮点击事件
        document.getElementById('ai-tag-manager-settings').addEventListener('click', function(e) {
            console.log("点击了设置按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 显示设置面板
            settingsView.style.display = 'flex';
        });
        
        // 11. 设置返回按钮点击事件
        document.getElementById('ai-tag-settings-back').addEventListener('click', function(e) {
            console.log("点击了设置返回按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 隐藏设置面板
            settingsView.style.display = 'none';
        });
        
        // 12. 保存主题按钮点击事件
        document.getElementById('ai-tag-save-theme').addEventListener('click', function(e) {
            console.log("点击了保存主题按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 获取所有颜色值
            const newTheme = {
                primary: document.getElementById('ai-tag-color-primary').value,
                secondary: document.getElementById('ai-tag-color-secondary').value,
                success: document.getElementById('ai-tag-color-success').value,
                danger: document.getElementById('ai-tag-color-danger').value,
                info: document.getElementById('ai-tag-color-info').value
            };
            
            // 保存主题
            GM_setValue('ai_tag_manager_theme', newTheme);
            
            // 提示用户
            showToast('主题已保存，刷新页面后生效');
        });
        
        // 13. 重置主题按钮点击事件
        document.getElementById('ai-tag-reset-theme').addEventListener('click', function(e) {
            console.log("点击了重置主题按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 确认重置
            if (confirm('确定要恢复默认配色吗？')) {
                const defaultTheme = isDarkMode ? DARK_THEME : LIGHT_THEME;
                
                // 重置主题
                GM_setValue('ai_tag_manager_theme', defaultTheme);
                
                // 更新颜色选择器的值
                document.getElementById('ai-tag-color-primary').value = defaultTheme.primary;
                document.getElementById('ai-tag-color-secondary').value = defaultTheme.secondary;
                document.getElementById('ai-tag-color-success').value = defaultTheme.success;
                document.getElementById('ai-tag-color-danger').value = defaultTheme.danger;
                document.getElementById('ai-tag-color-info').value = defaultTheme.info;
                
                // 提示用户
                showToast('已恢复默认配色，刷新页面后生效');
            }
        });
        
        // 14. 暗黑模式开关事件
        document.getElementById('ai-tag-darkmode-toggle').addEventListener('change', function(e) {
            console.log("切换暗黑模式:", this.checked);
            
            // 保存暗黑模式设置
            GM_setValue('ai_tag_manager_darkmode', this.checked);
            
            // 提示用户
            showToast('显示模式已更改，刷新页面后生效');
        });
        
        // 15. 模式切换按钮点击事件
        document.getElementById('ai-tag-manager-mode-toggle').addEventListener('click', function(e) {
            console.log("点击了模式切换按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 获取当前模式并切换
            const darkModeToggle = document.getElementById('ai-tag-darkmode-toggle');
            darkModeToggle.checked = !darkModeToggle.checked;
            
            // 触发change事件
            const event = new Event('change');
            darkModeToggle.dispatchEvent(event);
            
            // 更新图标
            this.textContent = darkModeToggle.checked ? '☀️' : '🌙';
        });
        
        // 16. 导出数据按钮点击事件
        document.getElementById('ai-tag-export-btn').addEventListener('click', async function(e) {
            console.log("点击了导出数据按钮");
            e.preventDefault();
            e.stopPropagation();
            
            try {
                // 获取所有数据
                const collections = await getAllTagCollections();
                const categories = await getAllCategories();
                
                // 过滤掉默认分类
                const customCategories = categories.filter(cat => 
                    !DEFAULT_CATEGORIES.some(def => def.id === cat.id)
                );
                
                // 创建导出数据
                const exportData = {
                    tags: collections,
                    categories: customCategories
                };
                
                // 创建 Blob
                const dataStr = JSON.stringify(exportData, null, 2);
                const blob = new Blob([dataStr], { type: 'application/json' });
                
                // 创建下载链接
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `AI绘画Tag管理器_导出_${new Date().toISOString().slice(0, 10)}.json`;
                document.body.appendChild(a);
                a.click();
                
                // 清理
                setTimeout(function() {
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }, 0);
                
                showToast('导出成功！');
            } catch (error) {
                console.error("导出数据失败:", error);
                showToast('导出失败，请重试');
            }
        });
        
        // 17. 导入数据按钮点击事件
        document.getElementById('ai-tag-import-btn').addEventListener('click', function(e) {
            console.log("点击了导入数据按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 触发文件选择
            document.getElementById('ai-tag-file-input').click();
        });
        
        // 18. 文件选择事件
        document.getElementById('ai-tag-file-input').addEventListener('change', async function(e) {
            console.log("选择文件");
            
            if (!this.files || this.files.length === 0) {
                return;
            }
            
            const file = this.files[0];
            
            try {
                const content = await readFileAsText(file);
                let importData;
                
                try {
                    importData = JSON.parse(content);
                } catch (parseError) {
                    console.error("解析JSON失败:", parseError);
                    showToast('文件格式错误，请选择正确的导出文件');
                    return;
                }
                
                // 检查数据格式
                if (!importData.tags || !Array.isArray(importData.tags)) {
                    showToast('文件格式错误，请选择正确的导出文件');
                    return;
                }
                
                // 询问用户是否替换或合并
                const action = confirm('是否要替换现有数据？\n点击"确定"替换所有数据，点击"取消"合并导入。');
                
                if (action) {
                    // 替换：清空现有数据后导入
                    await clearAllTagCollections();
                }
                
                // 导入自定义分类
                if (importData.categories && Array.isArray(importData.categories)) {
                    for (const category of importData.categories) {
                        try {
                            await addCategory(category.id, category.name, category.color, category.order);
                        } catch (error) {
                            console.error(`导入分类 ${category.id} 失败:`, error);
                        }
                    }
                    
                    // 重新加载分类
                    const updatedCategories = await getAllCategories();
                    renderCategoriesList(updatedCategories);
                    updateCategoryUIElements(updatedCategories);
                }
                
                // 导入标签数据
                const result = await addTagCollections(importData.tags);
                
                showToast(`导入成功！成功导入 ${result.success} 个标签，失败 ${result.error} 个`);
                
                // 刷新列表
                const activeTab = document.querySelector('.ai-tag-tab.active');
                renderTagCollections(activeTab.dataset.category);
                
                // 重置文件输入
                this.value = '';
            } catch (error) {
                console.error("导入数据失败:", error);
                showToast('导入失败，请重试');
                
                // 重置文件输入
                this.value = '';
            }
        });
        
        // 19. 清空数据按钮点击事件
        document.getElementById('ai-tag-clear-btn').addEventListener('click', async function(e) {
            console.log("点击了清空数据按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 二次确认
            if (confirm('确定要清空所有标签数据吗？此操作不可恢复！')) {
                try {
                    await clearAllTagCollections();
                    
                    showToast('数据已清空');
                    
                    // 刷新列表
                    const activeTab = document.querySelector('.ai-tag-tab.active');
                    renderTagCollections(activeTab.dataset.category);
                } catch (error) {
                    console.error("清空数据失败:", error);
                    showToast('清空失败，请重试');
                }
            }
        });
        
        // 20. 管理分类按钮点击事件
        document.getElementById('ai-tag-manage-categories-btn').addEventListener('click', function(e) {
            console.log("点击了管理分类按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 显示分类管理面板
            categoriesView.style.display = 'flex';
            
            // 刷新分类列表
            getAllCategories().then(categories => {
                renderCategoriesList(categories);
            });
        });
        
        // 21. 分类管理返回按钮点击事件
        document.getElementById('ai-tag-categories-back').addEventListener('click', function(e) {
            console.log("点击了分类管理返回按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 隐藏分类管理面板
            categoriesView.style.display = 'none';
            
            // 隐藏编辑表单
            document.querySelector('.ai-tag-edit-category-form').style.display = 'none';
        });
        
        // 22. 添加分类按钮点击事件
        document.getElementById('ai-tag-add-category').addEventListener('click', async function(e) {
            console.log("点击了添加分类按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 获取表单值
            const idInput = document.getElementById('ai-tag-category-id');
            const nameInput = document.getElementById('ai-tag-category-name');
            const colorInput = document.getElementById('ai-tag-category-color');
            
            const id = idInput.value.trim();
            const name = nameInput.value.trim();
            const color = colorInput.value;
            
            // 验证
            if (!id || !name) {
                showToast('请填写完整信息');
                return;
            }
            
            // 验证ID格式
            if (!/^[a-zA-Z0-9_]+$/.test(id)) {
                showToast('分类ID只能包含英文字母、数字和下划线');
                return;
            }
            
            try {
                // 获取当前最大排序值
                const categories = await getAllCategories();
                const maxOrder = Math.max(...categories.map(c => c.order), 0);
                
                // 添加分类
                await addCategory(id, name, color, maxOrder + 1);
                
                // 重新加载分类
                const updatedCategories = await getAllCategories();
                renderCategoriesList(updatedCategories);
                
                // 更新标签页和分类选择器
                updateCategoryUIElements(updatedCategories);
                
                // 添加新分类的样式
                GM_addStyle(`
                    .ai-tag-collection-name.${id}::before {
                        background-color: ${color};
                    }
                `);
                
                // 重置表单
                idInput.value = '';
                nameInput.value = '';
                
                showToast('分类添加成功');
            } catch (error) {
                if (error.message === "分类ID已存在") {
                    showToast('分类ID已存在，请使用其他ID');
                } else {
                    console.error("添加分类失败:", error);
                    showToast('添加分类失败');
                }
            }
        });
        
        // 23. 更新分类按钮点击事件
        document.getElementById('ai-tag-update-category').addEventListener('click', async function(e) {
            console.log("点击了更新分类按钮");
            e.preventDefault();
            e.stopPropagation();
            
            const editForm = document.querySelector('.ai-tag-edit-category-form');
            const categoryId = editForm.dataset.editId;
            
            if (!categoryId) {
                showToast('未选择分类');
                return;
            }
            
            // 获取表单值
            const nameInput = document.getElementById('ai-tag-edit-category-name');
            const colorInput = document.getElementById('ai-tag-edit-category-color');
            
            const name = nameInput.value.trim();
            const color = colorInput.value;
            
            // 验证
            if (!name) {
                showToast('请填写分类名称');
                return;
            }
            
            try {
                // 更新分类
                await updateCategory(categoryId, name, color);
                
                // 重新加载分类
                const updatedCategories = await getAllCategories();
                renderCategoriesList(updatedCategories);
                
                // 更新标签页和分类选择器
                updateCategoryUIElements(updatedCategories);
                
                // 更新该分类的样式
                GM_addStyle(`
                    .ai-tag-collection-name.${categoryId}::before {
                        background-color: ${color};
                    }
                `);
                
                // 隐藏编辑表单
                editForm.style.display = 'none';
                
                showToast('分类更新成功');
            } catch (error) {
                console.error("更新分类失败:", error);
                showToast('更新分类失败');
            }
        });
        
        // 24. 取消编辑分类按钮点击事件
        document.getElementById('ai-tag-cancel-edit-category').addEventListener('click', function(e) {
            console.log("点击了取消编辑分类按钮");
            e.preventDefault();
            e.stopPropagation();
            
            // 隐藏编辑表单
            document.querySelector('.ai-tag-edit-category-form').style.display = 'none';
        });
        
        console.log("所有事件绑定完成");
    }
    
    /* 5. 渲染与处理函数 */
    
    // 显示添加表单
    function showAddForm() {
        console.log("显示添加表单");
        const detailView = document.getElementById('ai-tag-detail-view');
        const titleEl = document.getElementById('ai-tag-detail-title');
        const nameInput = document.getElementById('ai-tag-detail-name');
        const categorySelect = document.getElementById('ai-tag-detail-category');
        const tagsInput = document.getElementById('ai-tag-detail-tags');
        const deleteBtn = document.getElementById('ai-tag-detail-delete');
        
        // 重置表单
        titleEl.textContent = '添加标签组合';
        nameInput.value = '';
        categorySelect.selectedIndex = 0; // 选择第一个分类
        tagsInput.value = '';
        deleteBtn.style.display = 'none'; // 新增模式不显示删除按钮
        
        // 移除编辑ID
        detailView.removeAttribute('data-edit-id');
        
        // 显示详情视图
        detailView.style.display = 'flex';
    }
    
    // 显示编辑表单
    async function showEditForm(id) {
        console.log("显示编辑表单:", id);
        const detailView = document.getElementById('ai-tag-detail-view');
        const titleEl = document.getElementById('ai-tag-detail-title');
        const nameInput = document.getElementById('ai-tag-detail-name');
        const categorySelect = document.getElementById('ai-tag-detail-category');
        const tagsInput = document.getElementById('ai-tag-detail-tags');
        const deleteBtn = document.getElementById('ai-tag-detail-delete');
        
        try {
            if (!db) {
                throw new Error("数据库未初始化");
            }
            
            const transaction = db.transaction([STORE_NAME], 'readonly');
            const store = transaction.objectStore(STORE_NAME);
            
            const request = store.get(parseInt(id));
            
            request.onsuccess = function() {
                const collection = request.result;
                
                if (!collection) {
                    showToast('未找到标签组合');
                    return;
                }
                
                // 设置表单值
                titleEl.textContent = '编辑标签组合';
                nameInput.value = collection.name;
                
                // 选择对应的分类
                for (let i = 0; i < categorySelect.options.length; i++) {
                    if (categorySelect.options[i].value === collection.category) {
                        categorySelect.selectedIndex = i;
                        break;
                    }
                }
                
                tagsInput.value = collection.tags;
                deleteBtn.style.display = 'block'; // 编辑模式显示删除按钮
                
                // 设置编辑ID
                detailView.dataset.editId = id;
                
                // 显示详情视图
                detailView.style.display = 'flex';
            };
            
            request.onerror = function(event) {
                console.error("获取标签组合失败:", event.target.error);
                showToast('加载失败，请重试');
            };
        } catch (error) {
            console.error("显示编辑表单失败:", error);
            showToast('加载失败，请重试');
        }
    }
    
    // 渲染标签集合列表
    async function renderTagCollections(category) {
        console.log("渲染标签集合列表:", category);
        const contentDiv = document.getElementById('ai-tag-manager-content');
        contentDiv.innerHTML = '<div class="ai-tag-loading"><div class="ai-tag-loading-spinner"></div><div class="ai-tag-loading-text">加载中...</div></div>';
        
        try {
            let collections;
            
            if (category === 'all') {
                collections = await getAllTagCollections();
            } else {
                collections = await getTagCollectionsByCategory(category);
            }
            
            // 按名称排序
            collections.sort((a, b) => a.name.localeCompare(b.name));
            
            contentDiv.innerHTML = '';
            
            if (collections.length === 0) {
                contentDiv.innerHTML = `
                    <div class="ai-tag-empty-state">
                        <div class="ai-tag-empty-icon">📝</div>
                        <p>没有找到标签组合</p>
                        <button class="ai-tag-btn ai-tag-btn-primary" id="ai-tag-empty-add">添加一个</button>
                    </div>
                `;
                
                document.getElementById('ai-tag-empty-add').addEventListener('click', function(e) {
                    console.log("点击了空状态的添加按钮");
                    e.preventDefault();
                    e.stopPropagation();
                    document.getElementById('ai-tag-add-button').click();
                });
                
                return;
            }
            
            for (const collection of collections) {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'ai-tag-collection-item';
                itemDiv.dataset.id = collection.id;
                
                itemDiv.innerHTML = `
                    <div class="ai-tag-collection-name ${collection.category}" title="${escapeHTML(collection.name)}">
                        ${escapeHTML(collection.name)}
                    </div>
                    <div class="ai-tag-collection-actions">
                        <button class="ai-tag-action-btn ai-tag-action-edit" title="编辑">✏️</button>
                        <button class="ai-tag-action-btn ai-tag-action-copy" title="复制">📋</button>
                    </div>
                `;
                
                contentDiv.appendChild(itemDiv);
                
                // 整行点击复制标签
                itemDiv.addEventListener('click', function(e) {
                    // 忽略按钮点击
                    if (e.target.closest('.ai-tag-collection-actions')) {
                        return;
                    }
                    
                    console.log("点击了标签项:", this.dataset.id);
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const id = this.dataset.id;
                    copyTagsById(id);
                });
                
                // 编辑按钮
                const editBtn = itemDiv.querySelector('.ai-tag-action-edit');
                editBtn.addEventListener('click', function(e) {
                    console.log("点击了编辑按钮:", itemDiv.dataset.id);
                    e.preventDefault();
                    e.stopPropagation(); // 防止触发行点击
                    
                    const id = itemDiv.dataset.id;
                    showEditForm(id);
                });
                
                // 复制按钮
                const copyBtn = itemDiv.querySelector('.ai-tag-action-copy');
                copyBtn.addEventListener('click', function(e) {
                    console.log("点击了复制按钮:", itemDiv.dataset.id);
                    e.preventDefault();
                    e.stopPropagation(); // 防止触发行点击
                    
                    const id = itemDiv.dataset.id;
                    copyTagsById(id);
                });
            }
            
            console.log("标签列表渲染完成，共 " + collections.length + " 个");
        } catch (error) {
            console.error("渲染标签列表失败:", error);
            contentDiv.innerHTML = `
                <div class="ai-tag-empty-state">
                    <div class="ai-tag-empty-icon">⚠️</div>
                    <p>加载失败，请重试</p>
                    <button class="ai-tag-btn ai-tag-btn-primary" id="ai-tag-retry">重试</button>
                </div>
            `;
            
            document.getElementById('ai-tag-retry').addEventListener('click', function(e) {
                console.log("点击了重试按钮");
                e.preventDefault();
                e.stopPropagation();
                renderTagCollections(category);
            });
        }
    }
    
    // 搜索并渲染结果
    async function searchAndRenderResults(query) {
        console.log("搜索并渲染结果:", query);
        const contentDiv = document.getElementById('ai-tag-manager-content');
        contentDiv.innerHTML = '<div class="ai-tag-loading"><div class="ai-tag-loading-spinner"></div><div class="ai-tag-loading-text">搜索中...</div></div>';
        
        try {
            const results = await searchTagCollections(query);
            
            contentDiv.innerHTML = '';
            
            if (results.length === 0) {
                contentDiv.innerHTML = `
                    <div class="ai-tag-empty-state">
                        <div class="ai-tag-empty-icon">🔍</div>
                        <p>没有找到匹配的标签组合</p>
                        <p>尝试其他关键词或创建新组合</p>
                    </div>
                `;
                return;
            }
            
            for (const collection of results) {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'ai-tag-collection-item';
                itemDiv.dataset.id = collection.id;
                
                // 高亮匹配的文本
                const highlightedName = highlightText(collection.name, query);
                
                itemDiv.innerHTML = `
                    <div class="ai-tag-collection-name ${collection.category}" title="${escapeHTML(collection.name)}">
                        ${highlightedName}
                    </div>
                    <div class="ai-tag-collection-actions">
                        <button class="ai-tag-action-btn ai-tag-action-edit" title="编辑">✏️</button>
                        <button class="ai-tag-action-btn ai-tag-action-copy" title="复制">📋</button>
                    </div>
                `;
                
                contentDiv.appendChild(itemDiv);
                
                // 整行点击复制标签
                itemDiv.addEventListener('click', function(e) {
                    // 忽略按钮点击
                    if (e.target.closest('.ai-tag-collection-actions')) {
                        return;
                    }
                    
                    console.log("点击了标签项:", this.dataset.id);
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const id = this.dataset.id;
                    copyTagsById(id);
                });
                
                // 编辑按钮
                const editBtn = itemDiv.querySelector('.ai-tag-action-edit');
                editBtn.addEventListener('click', function(e) {
                    console.log("点击了编辑按钮:", itemDiv.dataset.id);
                    e.preventDefault();
                    e.stopPropagation(); // 防止触发行点击
                    
                    const id = itemDiv.dataset.id;
                    showEditForm(id);
                });
                
                // 复制按钮
                const copyBtn = itemDiv.querySelector('.ai-tag-action-copy');
                copyBtn.addEventListener('click', function(e) {
                    console.log("点击了复制按钮:", itemDiv.dataset.id);
                    e.preventDefault();
                    e.stopPropagation(); // 防止触发行点击
                    
                    const id = itemDiv.dataset.id;
                    copyTagsById(id);
                });
            }
            
            console.log("搜索结果渲染完成，共 " + results.length + " 个");
        } catch (error) {
            console.error("搜索渲染失败:", error);
            contentDiv.innerHTML = `
                <div class="ai-tag-empty-state">
                    <div class="ai-tag-empty-icon">⚠️</div>
                    <p>搜索失败，请重试</p>
                </div>
            `;
        }
    }
    
    // 通过ID复制标签
    async function copyTagsById(id) {
        console.log("复制标签:", id);
        try {
            if (!db) {
                throw new Error("数据库未初始化");
            }
            
            const transaction = db.transaction([STORE_NAME], 'readonly');
            const store = transaction.objectStore(STORE_NAME);
            
            const request = store.get(parseInt(id));
            
            request.onsuccess = function() {
                const collection = request.result;
                
                if (!collection) {
                    showToast('未找到标签组合');
                    return;
                }
                
                copyToClipboard(collection.tags);
            };
            
            request.onerror = function(event) {
                console.error("获取标签组合失败:", event.target.error);
                showToast('复制失败，请重试');
            };
        } catch (error) {
            console.error("复制标签失败:", error);
            showToast('复制失败，请重试');
        }
    }
    
    /* 6. 工具函数 */
    
    // 复制到剪贴板
    function copyToClipboard(text) {
        console.log("复制到剪贴板");
        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed'; // 防止滚动
        textarea.style.left = '-9999px'; // 移出视野
        textarea.style.top = '0';
        
        document.body.appendChild(textarea);
        textarea.focus();
        textarea.select();
        
        try {
            const successful = document.execCommand('copy');
            if (successful) {
                showToast('复制成功！');
            } else {
                showToast('复制失败，请手动复制');
            }
        } catch (err) {
            console.error("复制失败:", err);
            showToast('复制失败，请手动复制');
        }
        
        document.body.removeChild(textarea);
    }
    
    // 读取文件为文本
    function readFileAsText(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            
            reader.onload = function(event) {
                resolve(event.target.result);
            };
            
            reader.onerror = function(event) {
                reject(event.target.error);
            };
            
            reader.readAsText(file);
        });
    }
    
    // 显示提示消息
    function showToast(message) {
        console.log("显示提示:", message);
        // 移除现有提示
        const existingToast = document.querySelector('.ai-tag-toast');
        if (existingToast) {
            document.body.removeChild(existingToast);
        }
        
        const toast = document.createElement('div');
        toast.className = 'ai-tag-toast';
        toast.textContent = message;
        
        document.body.appendChild(toast);
        
        setTimeout(function() {
            if (document.body.contains(toast)) {
                document.body.removeChild(toast);
            }
        }, 2000);
    }
    
    // 高亮文本中匹配的部分
    function highlightText(text, query) {
        if (!query) return escapeHTML(text);
        
        const regex = new RegExp(`(${escapeRegExp(query)})`, 'gi');
        return escapeHTML(text).replace(regex, '<span class="ai-tag-highlight">$1</span>');
    }
    
    // 转义正则表达式特殊字符
    function escapeRegExp(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }
    
    // 转义HTML特殊字符
    function escapeHTML(str) {
        if (!str) return '';
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }
    
    // 调整颜色亮度
    function adjustColor(color, amount) {
        // 转换为RGB
        let hex = color;
        if (hex.startsWith('#')) {
            hex = hex.slice(1);
        }
        
        // 转换为RGB值
        let r = parseInt(hex.substring(0, 2), 16);
        let g = parseInt(hex.substring(2, 4), 16);
        let b = parseInt(hex.substring(4, 6), 16);
        
        // 调整亮度
        r = Math.max(0, Math.min(255, r + amount));
        g = Math.max(0, Math.min(255, g + amount));
        b = Math.max(0, Math.min(255, b + amount));
        
        // 转换回十六进制
        return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
    }
    
})();