collabdocchat 1.2.13 → 2.0.1

package/src/utils/theme-manager.js

@@ -0,0 +1,811 @@
+/**
+ * 主题管理系统
+ * 支持多种主题切换和自定义主题
+ */
+
+export class ThemeManager {
+  constructor() {
+    this.currentTheme = this.loadTheme();
+    this.themes = {
+      default: {
+        name: '默认深色',
+        colors: {
+          primary: '#6366f1',
+          primaryDark: '#4f46e5',
+          secondary: '#8b5cf6',
+          success: '#10b981',
+          danger: '#ef4444',
+          warning: '#f59e0b',
+          bgDark: '#0f172a',
+          bgCard: '#1e293b',
+          bgHover: '#334155',
+          textPrimary: '#f1f5f9',
+          textSecondary: '#94a3b8',
+          border: '#334155'
+        }
+      },
+      light: {
+        name: '明亮模式',
+        colors: {
+          primary: '#6366f1',
+          primaryDark: '#4f46e5',
+          secondary: '#8b5cf6',
+          success: '#10b981',
+          danger: '#ef4444',
+          warning: '#f59e0b',
+          bgDark: '#ffffff',
+          bgCard: '#f8fafc',
+          bgHover: '#f1f5f9',
+          textPrimary: '#0f172a',
+          textSecondary: '#64748b',
+          border: '#e2e8f0'
+        }
+      },
+      ocean: {
+        name: '海洋蓝',
+        colors: {
+          primary: '#0ea5e9',
+          primaryDark: '#0284c7',
+          secondary: '#06b6d4',
+          success: '#10b981',
+          danger: '#ef4444',
+          warning: '#f59e0b',
+          bgDark: '#0c4a6e',
+          bgCard: '#075985',
+          bgHover: '#0369a1',
+          textPrimary: '#f0f9ff',
+          textSecondary: '#bae6fd',
+          border: '#0369a1'
+        }
+      },
+      forest: {
+        name: '森林绿',
+        colors: {
+          primary: '#22c55e',
+          primaryDark: '#16a34a',
+          secondary: '#84cc16',
+          success: '#10b981',
+          danger: '#ef4444',
+          warning: '#f59e0b',
+          bgDark: '#14532d',
+          bgCard: '#166534',
+          bgHover: '#15803d',
+          textPrimary: '#f0fdf4',
+          textSecondary: '#bbf7d0',
+          border: '#15803d'
+        }
+      },
+      sunset: {
+        name: '日落橙',
+        colors: {
+          primary: '#f97316',
+          primaryDark: '#ea580c',
+          secondary: '#fb923c',
+          success: '#10b981',
+          danger: '#ef4444',
+          warning: '#f59e0b',
+          bgDark: '#7c2d12',
+          bgCard: '#9a3412',
+          bgHover: '#c2410c',
+          textPrimary: '#fff7ed',
+          textSecondary: '#fed7aa',
+          border: '#c2410c'
+        }
+      },
+      purple: {
+        name: '紫罗兰',
+        colors: {
+          primary: '#a855f7',
+          primaryDark: '#9333ea',
+          secondary: '#c084fc',
+          success: '#10b981',
+          danger: '#ef4444',
+          warning: '#f59e0b',
+          bgDark: '#581c87',
+          bgCard: '#6b21a8',
+          bgHover: '#7e22ce',
+          textPrimary: '#faf5ff',
+          textSecondary: '#e9d5ff',
+          border: '#7e22ce'
+        }
+      },
+      midnight: {
+        name: '午夜黑',
+        colors: {
+          primary: '#3b82f6',
+          primaryDark: '#2563eb',
+          secondary: '#60a5fa',
+          success: '#10b981',
+          danger: '#ef4444',
+          warning: '#f59e0b',
+          bgDark: '#000000',
+          bgCard: '#1a1a1a',
+          bgHover: '#2d2d2d',
+          textPrimary: '#ffffff',
+          textSecondary: '#a3a3a3',
+          border: '#404040'
+        }
+      },
+      rose: {
+        name: '玫瑰粉',
+        colors: {
+          primary: '#f43f5e',
+          primaryDark: '#e11d48',
+          secondary: '#fb7185',
+          success: '#10b981',
+          danger: '#ef4444',
+          warning: '#f59e0b',
+          bgDark: '#881337',
+          bgCard: '#9f1239',
+          bgHover: '#be123c',
+          textPrimary: '#fff1f2',
+          textSecondary: '#fecdd3',
+          border: '#be123c'
+        }
+      }
+    };
+  }
+
+  /**
+   * 加载保存的主题
+   */
+  loadTheme() {
+    return localStorage.getItem('theme') || 'default';
+  }
+
+  /**
+   * 保存主题设置
+   */
+  saveTheme(themeName) {
+    localStorage.setItem('theme', themeName);
+  }
+
+  /**
+   * 应用主题
+   */
+  applyTheme(themeName) {
+    if (!this.themes[themeName]) {
+      console.error('主题不存在:', themeName);
+      return;
+    }
+
+    const theme = this.themes[themeName];
+    const root = document.documentElement;
+
+    // 应用CSS变量
+    Object.entries(theme.colors).forEach(([key, value]) => {
+      const cssVar = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      root.style.setProperty(`--${cssVar}`, value);
+    });
+
+    // 保存当前主题
+    this.currentTheme = themeName;
+    this.saveTheme(themeName);
+
+    // 触发主题变更事件
+    window.dispatchEvent(new CustomEvent('themeChanged', { 
+      detail: { theme: themeName } 
+    }));
+  }
+
+  /**
+   * 获取当前主题
+   */
+  getCurrentTheme() {
+    return this.currentTheme;
+  }
+
+  /**
+   * 获取所有主题
+   */
+  getAllThemes() {
+    return Object.entries(this.themes).map(([key, theme]) => ({
+      id: key,
+      name: theme.name,
+      colors: theme.colors
+    }));
+  }
+
+  /**
+   * 创建自定义主题
+   */
+  createCustomTheme(name, colors) {
+    const themeId = `custom_${Date.now()}`;
+    this.themes[themeId] = {
+      name: name,
+      colors: colors
+    };
+    
+    // 保存到localStorage
+    this.saveCustomThemes();
+    
+    return themeId;
+  }
+
+  /**
+   * 保存自定义主题
+   */
+  saveCustomThemes() {
+    const customThemes = {};
+    Object.entries(this.themes).forEach(([key, theme]) => {
+      if (key.startsWith('custom_')) {
+        customThemes[key] = theme;
+      }
+    });
+    localStorage.setItem('customThemes', JSON.stringify(customThemes));
+  }
+
+  /**
+   * 加载自定义主题
+   */
+  loadCustomThemes() {
+    const saved = localStorage.getItem('customThemes');
+    if (saved) {
+      try {
+        const customThemes = JSON.parse(saved);
+        Object.assign(this.themes, customThemes);
+      } catch (error) {
+        console.error('加载自定义主题失败:', error);
+      }
+    }
+  }
+
+  /**
+   * 删除自定义主题
+   */
+  deleteCustomTheme(themeId) {
+    if (!themeId.startsWith('custom_')) {
+      console.error('只能删除自定义主题');
+      return false;
+    }
+
+    delete this.themes[themeId];
+    this.saveCustomThemes();
+
+    // 如果删除的是当前主题，切换到默认主题
+    if (this.currentTheme === themeId) {
+      this.applyTheme('default');
+    }
+
+    return true;
+  }
+
+  /**
+   * 渲染主题选择器（美化版）
+   */
+  renderThemeSelector(container) {
+    const themes = this.getAllThemes();
+    
+    container.innerHTML = `
+      <div class="theme-selector-modern">
+        <div class="theme-header-modern">
+          <div class="theme-header-content">
+            <h2 class="theme-title-modern">🎨 主题设置</h2>
+            <p class="theme-subtitle-modern">选择您喜欢的主题风格，让界面更加个性化</p>
+          </div>
+          <button class="btn-create-theme-modern" id="createCustomThemeBtn">
+            <span class="btn-icon">✨</span>
+            <span>创建自定义主题</span>
+          </button>
+        </div>
+        
+        <div class="theme-grid-modern">
+          ${themes.map(theme => `
+            <div class="theme-card-modern ${this.currentTheme === theme.id ? 'active' : ''}" 
+                 data-theme="${theme.id}">
+              <div class="theme-preview-modern" style="background: linear-gradient(135deg, ${theme.colors.bgDark} 0%, ${theme.colors.bgCard} 100%);">
+                <div class="theme-preview-header" style="background: ${theme.colors.bgCard};">
+                  <div class="preview-dot" style="background: ${theme.colors.danger};"></div>
+                  <div class="preview-dot" style="background: ${theme.colors.warning};"></div>
+                  <div class="preview-dot" style="background: ${theme.colors.success};"></div>
+                </div>
+                <div class="theme-preview-content">
+                  <div class="preview-sidebar" style="background: ${theme.colors.bgCard};"></div>
+                  <div class="preview-main">
+                    <div class="preview-card" style="background: ${theme.colors.bgCard};">
+                      <div class="preview-line" style="background: ${theme.colors.primary};"></div>
+                      <div class="preview-line" style="background: ${theme.colors.textSecondary}; width: 80%;"></div>
+                      <div class="preview-line" style="background: ${theme.colors.textSecondary}; width: 60%;"></div>
+                    </div>
+                    <div class="preview-button" style="background: linear-gradient(135deg, ${theme.colors.primary} 0%, ${theme.colors.secondary} 100%);"></div>
+                  </div>
+                </div>
+                <div class="theme-colors-modern">
+                  <span class="color-dot" style="background: ${theme.colors.primary};" title="主色调"></span>
+                  <span class="color-dot" style="background: ${theme.colors.secondary};" title="次要色"></span>
+                  <span class="color-dot" style="background: ${theme.colors.success};" title="成功色"></span>
+                  <span class="color-dot" style="background: ${theme.colors.danger};" title="危险色"></span>
+                </div>
+              </div>
+              <div class="theme-info-modern">
+                <div class="theme-name-modern">${theme.name}</div>
+                ${this.currentTheme === theme.id ? 
+                  '<div class="theme-badge-modern">✓ 当前使用</div>' : 
+                  '<div class="theme-action-modern">点击应用</div>'}
+              </div>
+              ${theme.id.startsWith('custom_') ? 
+                `<button class="btn-delete-theme-modern" data-theme="${theme.id}" title="删除主题">
+                  <span>🗑️</span>
+                </button>` : 
+                ''}
+            </div>
+          `).join('')}
+        </div>
+      </div>
+    `;
+    
+    // 添加样式
+    this.addThemeSelectorStyles();
+
+    // 添加事件监听
+    container.querySelectorAll('.theme-card-modern').forEach(card => {
+      card.addEventListener('click', (e) => {
+        if (!e.target.closest('.btn-delete-theme-modern')) {
+          const themeId = card.dataset.theme;
+          this.applyTheme(themeId);
+          
+          // 更新选中状态
+          container.querySelectorAll('.theme-card-modern').forEach(c => c.classList.remove('active'));
+          card.classList.add('active');
+          
+          // 更新徽章文字
+          container.querySelectorAll('.theme-badge-modern, .theme-action-modern').forEach(badge => {
+            badge.className = 'theme-action-modern';
+            badge.textContent = '点击应用';
+          });
+          
+          const badge = card.querySelector('.theme-badge-modern, .theme-action-modern');
+          if (badge) {
+            badge.className = 'theme-badge-modern';
+            badge.textContent = '✓ 当前使用';
+          }
+        }
+      });
+    });
+
+    // 删除自定义主题
+    container.querySelectorAll('.btn-delete-theme-modern').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const themeId = btn.dataset.theme;
+        if (confirm('确定要删除这个主题吗？')) {
+          this.deleteCustomTheme(themeId);
+          this.renderThemeSelector(container);
+        }
+      });
+    });
+
+    // 创建自定义主题
+    const createBtn = container.querySelector('#createCustomThemeBtn');
+    if (createBtn) {
+      createBtn.addEventListener('click', () => {
+        this.showCustomThemeDialog(container);
+      });
+    }
+  }
+
+  /**
+   * 显示自定义主题对话框
+   */
+  showCustomThemeDialog(container) {
+    const dialog = document.createElement('div');
+    dialog.className = 'modal';
+    dialog.innerHTML = `
+      <div class="modal-content" style="max-width: 600px;">
+        <h3>创建自定义主题</h3>
+        <form id="customThemeForm">
+          <div class="form-group">
+            <label>主题名称</label>
+            <input type="text" name="name" placeholder="我的主题" required>
+          </div>
+          <div class="form-group">
+            <label>主色调</label>
+            <input type="color" name="primary" value="#6366f1">
+          </div>
+          <div class="form-group">
+            <label>次要色</label>
+            <input type="color" name="secondary" value="#8b5cf6">
+          </div>
+          <div class="form-group">
+            <label>成功色</label>
+            <input type="color" name="success" value="#10b981">
+          </div>
+          <div class="form-group">
+            <label>危险色</label>
+            <input type="color" name="danger" value="#ef4444">
+          </div>
+          <div class="form-group">
+            <label>背景色</label>
+            <input type="color" name="bgDark" value="#0f172a">
+          </div>
+          <div class="form-group">
+            <label>卡片背景</label>
+            <input type="color" name="bgCard" value="#1e293b">
+          </div>
+          <div class="form-group">
+            <label>文字颜色</label>
+            <input type="color" name="textPrimary" value="#f1f5f9">
+          </div>
+          <div style="display: flex; gap: 10px; margin-top: 20px;">
+            <button type="submit" class="btn-primary">创建</button>
+            <button type="button" class="btn-secondary" id="cancelCustomTheme">取消</button>
+          </div>
+        </form>
+      </div>
+    `;
+
+    document.body.appendChild(dialog);
+
+    // 取消按钮
+    dialog.querySelector('#cancelCustomTheme').addEventListener('click', () => {
+      dialog.remove();
+    });
+
+    // 提交表单
+    dialog.querySelector('#customThemeForm').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      
+      const colors = {
+        primary: formData.get('primary'),
+        primaryDark: this.darkenColor(formData.get('primary'), 10),
+        secondary: formData.get('secondary'),
+        success: formData.get('success'),
+        danger: formData.get('danger'),
+        warning: '#f59e0b',
+        bgDark: formData.get('bgDark'),
+        bgCard: formData.get('bgCard'),
+        bgHover: this.lightenColor(formData.get('bgCard'), 10),
+        textPrimary: formData.get('textPrimary'),
+        textSecondary: this.adjustOpacity(formData.get('textPrimary'), 0.7),
+        border: this.lightenColor(formData.get('bgCard'), 20)
+      };
+
+      const themeId = this.createCustomTheme(formData.get('name'), colors);
+      this.applyTheme(themeId);
+      
+      dialog.remove();
+      this.renderThemeSelector(container);
+    });
+  }
+
+  /**
+   * 加深颜色
+   */
+  darkenColor(color, percent) {
+    const num = parseInt(color.replace('#', ''), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = (num >> 16) - amt;
+    const G = (num >> 8 & 0x00FF) - amt;
+    const B = (num & 0x0000FF) - amt;
+    return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
+      (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
+      (B < 255 ? B < 1 ? 0 : B : 255))
+      .toString(16).slice(1);
+  }
+
+  /**
+   * 提亮颜色
+   */
+  lightenColor(color, percent) {
+    const num = parseInt(color.replace('#', ''), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = (num >> 16) + amt;
+    const G = (num >> 8 & 0x00FF) + amt;
+    const B = (num & 0x0000FF) + amt;
+    return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
+      (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
+      (B < 255 ? B < 1 ? 0 : B : 255))
+      .toString(16).slice(1);
+  }
+
+  /**
+   * 调整透明度
+   */
+  adjustOpacity(color, opacity) {
+    const num = parseInt(color.replace('#', ''), 16);
+    const R = num >> 16;
+    const G = num >> 8 & 0x00FF;
+    const B = num & 0x0000FF;
+    return `rgba(${R}, ${G}, ${B}, ${opacity})`;
+  }
+
+  /**
+   * 添加主题选择器样式
+   */
+  addThemeSelectorStyles() {
+    if (document.getElementById('theme-selector-modern-styles')) return;
+    
+    const style = document.createElement('style');
+    style.id = 'theme-selector-modern-styles';
+    style.textContent = `
+      .theme-selector-modern {
+        padding: 0;
+        animation: fadeInUp 0.5s ease;
+      }
+      
+      .theme-header-modern {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 40px;
+        padding: 30px;
+        background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99,102,241,0.05) 100%);
+        border-radius: 20px;
+        border: 1px solid var(--border);
+      }
+      
+      .theme-header-content {
+        flex: 1;
+      }
+      
+      .theme-title-modern {
+        margin: 0 0 8px;
+        font-size: 32px;
+        font-weight: 800;
+        color: var(--text-primary);
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      
+      .theme-subtitle-modern {
+        margin: 0;
+        font-size: 15px;
+        color: var(--text-secondary);
+        font-weight: 500;
+      }
+      
+      .btn-create-theme-modern {
+        padding: 14px 28px;
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        color: white;
+        border: none;
+        border-radius: 12px;
+        font-size: 15px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        box-shadow: 0 4px 12px rgba(99,102,241,0.3);
+      }
+      
+      .btn-create-theme-modern:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.4);
+      }
+      
+      .btn-icon {
+        font-size: 18px;
+      }
+      
+      .theme-grid-modern {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 24px;
+        padding: 0 30px 30px;
+      }
+      
+      .theme-card-modern {
+        background: var(--bg-card);
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        overflow: hidden;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        position: relative;
+      }
+      
+      .theme-card-modern:hover {
+        transform: translateY(-8px);
+        box-shadow: 0 12px 32px rgba(0,0,0,0.3);
+        border-color: var(--primary);
+      }
+      
+      .theme-card-modern.active {
+        border-color: var(--primary);
+        box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
+      }
+      
+      .theme-card-modern.active::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
+        z-index: 1;
+      }
+      
+      .theme-preview-modern {
+        height: 200px;
+        padding: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        position: relative;
+      }
+      
+      .theme-preview-header {
+        height: 24px;
+        border-radius: 8px 8px 0 0;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 0 10px;
+      }
+      
+      .preview-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+      }
+      
+      .theme-preview-content {
+        flex: 1;
+        display: flex;
+        gap: 8px;
+      }
+      
+      .preview-sidebar {
+        width: 50px;
+        border-radius: 8px;
+      }
+      
+      .preview-main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      
+      .preview-card {
+        flex: 1;
+        border-radius: 8px;
+        padding: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      
+      .preview-line {
+        height: 6px;
+        border-radius: 3px;
+        width: 100%;
+      }
+      
+      .preview-button {
+        height: 24px;
+        border-radius: 6px;
+      }
+      
+      .theme-colors-modern {
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+        padding: 8px 0;
+      }
+      
+      .color-dot {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        border: 2px solid rgba(255,255,255,0.2);
+        transition: all 0.3s ease;
+        cursor: pointer;
+      }
+      
+      .color-dot:hover {
+        transform: scale(1.2);
+        border-color: rgba(255,255,255,0.5);
+      }
+      
+      .theme-info-modern {
+        padding: 16px 20px;
+        background: var(--bg-dark);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      
+      .theme-name-modern {
+        font-size: 16px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+      
+      .theme-badge-modern {
+        padding: 4px 12px;
+        background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
+        color: white;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+      }
+      
+      .theme-action-modern {
+        padding: 4px 12px;
+        background: var(--bg-hover);
+        color: var(--text-secondary);
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+      }
+      
+      .btn-delete-theme-modern {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        width: 36px;
+        height: 36px;
+        background: rgba(239,68,68,0.9);
+        border: none;
+        border-radius: 50%;
+        color: white;
+        font-size: 16px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        opacity: 0;
+      }
+      
+      .theme-card-modern:hover .btn-delete-theme-modern {
+        opacity: 1;
+      }
+      
+      .btn-delete-theme-modern:hover {
+        background: var(--danger);
+        transform: scale(1.1) rotate(10deg);
+      }
+      
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      
+      @media (max-width: 768px) {
+        .theme-header-modern {
+          flex-direction: column;
+          gap: 20px;
+          align-items: flex-start;
+        }
+        
+        .btn-create-theme-modern {
+          width: 100%;
+          justify-content: center;
+        }
+        
+        .theme-grid-modern {
+          grid-template-columns: 1fr;
+          padding: 0 20px 20px;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * 初始化主题
+   */
+  init() {
+    this.loadCustomThemes();
+    this.applyTheme(this.currentTheme);
+  }
+}
+
+// 导出单例
+export const themeManager = new ThemeManager();
+
+