collabdocchat 1.2.13 → 2.0.1

package/src/utils/feature-integrator.js

@@ -0,0 +1,1724 @@
+/**
+ * 功能集成器
+ * 将所有增强功能集成到仪表板中
+ */
+
+import { ChatEnhancements, OnlineStatusManager, MessageNotificationManager } from './chat-enhancements.js';
+import { AIAssistant } from './ai-assistant.js';
+import { themeManager } from './theme-manager.js';
+import { permissionManager } from './permission-manager.js';
+import { onboardingGuide } from './onboarding-guide.js';
+import { CollaborationEnhancer } from './collaboration-enhancer.js';
+
+export class FeatureIntegrator {
+  constructor(apiService, wsService, user) {
+    this.apiService = apiService;
+    this.wsService = wsService;
+    this.user = user;
+    
+    // 初始化各个功能模块
+    this.chatEnhancements = new ChatEnhancements(apiService, wsService, user.id || user._id);
+    this.onlineStatus = new OnlineStatusManager(wsService);
+    this.notifications = new MessageNotificationManager();
+    this.aiAssistant = new AIAssistant(apiService);
+    this.collaboration = new CollaborationEnhancer(apiService, wsService);
+    
+    // 初始化主题
+    themeManager.init();
+    
+    // 设置在线状态监听
+    this.onlineStatus.setupListeners();
+  }
+
+  /**
+   * 添加设置菜单到侧边栏
+   */
+  addSettingsMenu(sidebar) {
+    const settingsHTML = `
+      <div class="sidebar-footer">
+        <button class="nav-item" data-view="settings">
+          <span class="icon">⚙️</span> 设置
+        </button>
+        <button class="nav-item" data-view="help">
+          <span class="icon">❓</span> 帮助
+        </button>
+      </div>
+    `;
+    
+    sidebar.insertAdjacentHTML('beforeend', settingsHTML);
+  }
+
+  /**
+   * 渲染设置页面（优化后的卡片式布局）
+   */
+  renderSettingsView(container) {
+    container.innerHTML = `
+        <div class="view-header">
+          <h2>⚙️ 设置</h2>
+        </div>
+        
+      <div class="settings-cards-grid">
+        <div class="setting-card" data-setting="theme">
+          <div class="setting-icon">🎨</div>
+          <h3>主题设置</h3>
+          <p>选择主题风格和颜色方案</p>
+          <button class="btn-card-action">进入设置 →</button>
+        </div>
+        
+        <div class="setting-card" data-setting="notifications">
+          <div class="setting-icon">🔔</div>
+          <h3>通知设置</h3>
+          <p>管理通知偏好和提醒方式</p>
+          <button class="btn-card-action">进入设置 →</button>
+        </div>
+
+        <div class="setting-card" data-setting="ai">
+          <div class="setting-icon">🤖</div>
+          <h3>AI 助手</h3>
+          <p>配置 AI 功能和智能建议</p>
+          <button class="btn-card-action">进入设置 →</button>
+      </div>
+
+        ${this.user.role === 'admin' ? `
+          <div class="setting-card" data-setting="permissions">
+            <div class="setting-icon">🔒</div>
+            <h3>权限管理</h3>
+            <p>设置用户权限和访问控制</p>
+            <button class="btn-card-action">进入设置 →</button>
+          </div>
+        ` : ''}
+
+        <div class="setting-card" data-setting="data">
+          <div class="setting-icon">📊</div>
+          <h3>数据管理</h3>
+          <p>导出数据和备份管理</p>
+          <button class="btn-card-action">进入设置 →</button>
+        </div>
+
+        <div class="setting-card" data-setting="language">
+          <div class="setting-icon">🌐</div>
+          <h3>语言设置</h3>
+          <p>选择界面显示语言</p>
+          <button class="btn-card-action">进入设置 →</button>
+        </div>
+      </div>
+
+      <!-- 详细设置面板 -->
+      <div class="setting-detail-panel hidden" id="settingDetailPanel">
+        <button class="btn-back" id="backToSettings">← 返回</button>
+        <div id="settingDetailContent"></div>
+      </div>
+    `;
+
+    // 添加样式
+    this.addSettingsStyles();
+
+    // 绑定事件
+    container.querySelectorAll('.setting-card').forEach(card => {
+      card.addEventListener('click', () => {
+        const setting = card.dataset.setting;
+        this.showSettingDetail(setting, container);
+      });
+    });
+  }
+
+  /**
+   * 添加设置界面样式
+   */
+  addSettingsStyles() {
+    if (document.getElementById('settings-modern-styles')) return;
+
+    const style = document.createElement('style');
+    style.id = 'settings-modern-styles';
+    style.textContent = `
+      /* 设置页面容器 - 添加高度限制和滚动 */
+      #contentArea {
+        max-height: calc(100vh - 40px);
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding-right: 10px;
+      }
+      
+      /* 自定义滚动条 */
+      #contentArea::-webkit-scrollbar {
+        width: 8px;
+      }
+      
+      #contentArea::-webkit-scrollbar-track {
+        background: var(--bg-dark);
+        border-radius: 4px;
+      }
+      
+      #contentArea::-webkit-scrollbar-thumb {
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        border-radius: 4px;
+      }
+      
+      #contentArea::-webkit-scrollbar-thumb:hover {
+        background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
+      }
+      
+      .settings-cards-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 20px;
+        margin-top: 20px;
+      }
+
+      .setting-card {
+        background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99,102,241,0.05) 100%);
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        padding: 24px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        text-align: center;
+        animation: fadeInUp 0.5s ease;
+      }
+
+      .setting-card:hover {
+        transform: translateY(-8px);
+        box-shadow: 0 12px 32px rgba(99,102,241,0.2);
+        border-color: var(--primary);
+      }
+
+      .setting-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+      }
+
+      .setting-card h3 {
+        margin: 0 0 8px;
+        font-size: 18px;
+        color: var(--text-primary);
+      }
+
+      .setting-card p {
+        margin: 0 0 16px;
+        font-size: 14px;
+        color: var(--text-secondary);
+        line-height: 1.5;
+      }
+
+      .btn-card-action {
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 8px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+
+      .btn-card-action:hover {
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+      }
+
+      .setting-detail-panel {
+        margin-top: 20px;
+        animation: fadeIn 0.3s ease;
+      }
+
+      .setting-detail-panel.hidden {
+        display: none;
+      }
+
+      .btn-back {
+        margin-bottom: 20px;
+        padding: 10px 20px;
+        background: var(--bg-hover);
+        border: none;
+        border-radius: 8px;
+        color: var(--text-primary);
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+
+      .btn-back:hover {
+        background: var(--border);
+      }
+
+      @media (max-width: 768px) {
+        .settings-cards-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * 添加详细设置样式
+   */
+  addDetailSettingsStyles() {
+    if (document.getElementById('detail-settings-styles')) return;
+
+    const style = document.createElement('style');
+    style.id = 'detail-settings-styles';
+    style.textContent = `
+      /* 详细设置容器 */
+      .settings-detail-modern {
+        animation: fadeInUp 0.5s ease;
+      }
+
+      /* 设置头部 */
+      .settings-header-modern {
+        text-align: center;
+        padding: 40px 20px;
+        background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99,102,241,0.05) 100%);
+        border-radius: 20px;
+        margin-bottom: 30px;
+        border: 2px solid var(--border);
+      }
+
+      .settings-icon-large {
+        font-size: 64px;
+        margin-bottom: 20px;
+        animation: bounce 2s infinite;
+      }
+
+      .settings-header-modern h2 {
+        margin: 0 0 10px;
+        font-size: 32px;
+        font-weight: 800;
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      .settings-header-modern p {
+        margin: 0;
+        font-size: 16px;
+        color: var(--text-secondary);
+      }
+
+      /* 设置卡片容器 */
+      .settings-cards-container {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        margin-bottom: 30px;
+      }
+
+      /* 设置卡片详情 */
+      .setting-card-detail {
+        background: var(--bg-card);
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        padding: 24px;
+        display: flex;
+        align-items: flex-start;
+        gap: 20px;
+        transition: all 0.3s ease;
+      }
+
+      .setting-card-detail:hover {
+        border-color: var(--primary);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.15);
+        transform: translateX(5px);
+      }
+
+      .setting-card-detail.active {
+        border-color: var(--success);
+        background: linear-gradient(90deg, rgba(16,185,129,0.05) 0%, transparent 100%);
+      }
+
+      .setting-card-icon {
+        width: 60px;
+        height: 60px;
+        border-radius: 12px;
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 28px;
+        flex-shrink: 0;
+      }
+
+      .setting-card-content {
+        flex: 1;
+      }
+
+      .setting-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+      }
+
+      .setting-card-content h4 {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+
+      .setting-card-content p {
+        margin: 0;
+        font-size: 14px;
+        color: var(--text-secondary);
+        line-height: 1.6;
+      }
+
+      /* 切换开关 */
+      .toggle-switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 30px;
+      }
+
+      .toggle-switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      .toggle-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: var(--bg-hover);
+        border-radius: 30px;
+        transition: all 0.3s ease;
+      }
+
+      .toggle-slider:before {
+        position: absolute;
+        content: "";
+        height: 22px;
+        width: 22px;
+        left: 4px;
+        bottom: 4px;
+        background: white;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+      }
+
+      .toggle-switch input:checked + .toggle-slider {
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      }
+
+      .toggle-switch input:checked + .toggle-slider:before {
+        transform: translateX(30px);
+      }
+
+      /* 操作按钮区域 */
+      .settings-actions {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-top: 30px;
+      }
+
+      .btn-primary-large,
+      .btn-secondary-large {
+        padding: 16px 32px;
+        border: none;
+        border-radius: 12px;
+        font-size: 16px;
+        font-weight: 700;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .btn-primary-large {
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        color: white;
+        box-shadow: 0 4px 12px rgba(99,102,241,0.3);
+      }
+
+      .btn-primary-large:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.5);
+      }
+
+      .btn-secondary-large {
+        background: var(--bg-card);
+        color: var(--text-primary);
+        border: 2px solid var(--border);
+      }
+
+      .btn-secondary-large:hover {
+        border-color: var(--primary);
+        transform: translateY(-3px);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.2);
+      }
+
+      .btn-primary-large span,
+      .btn-secondary-large span {
+        font-size: 20px;
+      }
+
+      /* AI 功能展示 */
+      .ai-features-showcase {
+        background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99,102,241,0.03) 100%);
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        padding: 30px;
+        margin-bottom: 30px;
+      }
+
+      .ai-features-showcase h3 {
+        margin: 0 0 24px;
+        font-size: 20px;
+        font-weight: 700;
+        color: var(--text-primary);
+        text-align: center;
+      }
+
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 20px;
+      }
+
+      .feature-item {
+        background: var(--bg-dark);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 20px;
+        text-align: center;
+        transition: all 0.3s ease;
+      }
+
+      .feature-item:hover {
+        border-color: var(--primary);
+        transform: translateY(-5px);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.2);
+      }
+
+      .feature-icon {
+        font-size: 36px;
+        margin-bottom: 12px;
+      }
+
+      .feature-item h4 {
+        margin: 0 0 8px;
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--text-primary);
+      }
+
+      .feature-item p {
+        margin: 0;
+        font-size: 13px;
+        color: var(--text-secondary);
+      }
+
+      /* 数据统计卡片 */
+      .data-stats-cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 20px;
+        margin-bottom: 30px;
+      }
+
+      .data-stat-card {
+        background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99,102,241,0.05) 100%);
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        padding: 24px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        transition: all 0.3s ease;
+      }
+
+      .data-stat-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.2);
+        border-color: var(--primary);
+      }
+
+      .stat-icon-large {
+        font-size: 48px;
+      }
+
+      .stat-info {
+        flex: 1;
+      }
+
+      .stat-value {
+        font-size: 32px;
+        font-weight: 800;
+        color: var(--text-primary);
+        margin-bottom: 4px;
+      }
+
+      .stat-label {
+        font-size: 14px;
+        color: var(--text-secondary);
+        font-weight: 600;
+      }
+
+      /* 导出选项 */
+      .export-options {
+        display: flex;
+        gap: 10px;
+        margin-top: 16px;
+        flex-wrap: wrap;
+      }
+
+      .btn-export {
+        padding: 10px 20px;
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .btn-export:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+      }
+
+      .btn-danger-outline {
+        padding: 10px 20px;
+        background: transparent;
+        color: var(--danger);
+        border: 2px solid var(--danger);
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 16px;
+      }
+
+      .btn-danger-outline:hover {
+        background: var(--danger);
+        color: white;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(239,68,68,0.4);
+      }
+
+      /* 语言选择器 */
+      .language-selector-modern {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 16px;
+        margin-bottom: 30px;
+      }
+
+      .language-card {
+        background: var(--bg-card);
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+
+      .language-card:hover {
+        border-color: var(--primary);
+        transform: translateY(-5px);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.2);
+      }
+
+      .language-card.selected {
+        border-color: var(--success);
+        background: linear-gradient(90deg, rgba(16,185,129,0.1) 0%, transparent 100%);
+      }
+
+      .language-flag {
+        font-size: 48px;
+      }
+
+      .language-info {
+        flex: 1;
+      }
+
+      .language-info h4 {
+        margin: 0 0 4px;
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+
+      .language-info p {
+        margin: 0;
+        font-size: 13px;
+        color: var(--text-secondary);
+      }
+
+      .language-check {
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .check-icon {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        font-weight: 700;
+        animation: scaleIn 0.3s ease;
+      }
+
+      /* 信息提示框 */
+      .language-info-box {
+        background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.05) 100%);
+        border: 2px solid rgba(99,102,241,0.3);
+        border-radius: 12px;
+        padding: 20px;
+        display: flex;
+        gap: 16px;
+        margin-bottom: 30px;
+      }
+
+      .info-icon {
+        font-size: 32px;
+        flex-shrink: 0;
+      }
+
+      .info-content h4 {
+        margin: 0 0 8px;
+        font-size: 16px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+
+      .info-content p {
+        margin: 0;
+        font-size: 14px;
+        color: var(--text-secondary);
+        line-height: 1.6;
+      }
+
+      /* 动画 */
+      @keyframes scaleIn {
+        from {
+          transform: scale(0);
+          opacity: 0;
+        }
+        to {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+
+      @keyframes bounce {
+        0%, 100% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-10px);
+        }
+      }
+
+      /* 响应式 */
+      @media (max-width: 768px) {
+        .settings-header-modern {
+          padding: 30px 20px;
+        }
+
+        .settings-icon-large {
+          font-size: 48px;
+        }
+
+        .settings-header-modern h2 {
+          font-size: 24px;
+        }
+
+        .setting-card-detail {
+          flex-direction: column;
+          text-align: center;
+        }
+
+        .setting-card-header {
+          flex-direction: column;
+          gap: 12px;
+        }
+
+        .settings-actions {
+          flex-direction: column;
+        }
+
+        .btn-primary-large,
+        .btn-secondary-large {
+          width: 100%;
+          justify-content: center;
+        }
+
+        .language-selector-modern {
+          grid-template-columns: 1fr;
+        }
+
+        .features-grid {
+          grid-template-columns: 1fr;
+        }
+
+        .data-stats-cards {
+          grid-template-columns: 1fr;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * 显示设置详情
+   */
+  showSettingDetail(setting, container) {
+    const grid = container.querySelector('.settings-cards-grid');
+    const panel = container.querySelector('.setting-detail-panel');
+    const content = container.querySelector('#settingDetailContent');
+
+    grid.style.display = 'none';
+    panel.classList.remove('hidden');
+
+    // 加载对应的设置内容
+    this.loadSettingsTab(setting, content);
+
+    // 返回按钮
+    container.querySelector('#backToSettings').addEventListener('click', () => {
+      panel.classList.add('hidden');
+      grid.style.display = 'grid';
+    });
+  }
+
+  /**
+   * 加载设置标签内容
+   */
+  loadSettingsTab(tab, container) {
+    switch(tab) {
+      case 'theme':
+        themeManager.renderThemeSelector(container);
+        break;
+      case 'notifications':
+        this.renderNotificationSettings(container);
+        break;
+      case 'ai':
+        this.renderAISettings(container);
+        break;
+      case 'permissions':
+        if (this.user.role === 'admin') {
+          permissionManager.renderPermissionManager(container, this.user);
+        }
+        break;
+      case 'data':
+        this.renderDataSettings(container);
+        break;
+      case 'language':
+        this.renderLanguageSettings(container);
+        break;
+    }
+  }
+
+  /**
+   * 渲染数据管理设置（优化后）
+   */
+  renderDataSettings(container) {
+    container.innerHTML = `
+      <div class="settings-detail-modern">
+        <div class="settings-header-modern">
+          <div class="settings-icon-large">📊</div>
+          <h2>数据管理</h2>
+          <p>管理您的数据、导出和备份</p>
+        </div>
+
+        <div class="data-stats-cards">
+          <div class="data-stat-card">
+            <div class="stat-icon-large">💬</div>
+            <div class="stat-info">
+              <div class="stat-value">--</div>
+              <div class="stat-label">消息数量</div>
+            </div>
+          </div>
+
+          <div class="data-stat-card">
+            <div class="stat-icon-large">📄</div>
+            <div class="stat-info">
+              <div class="stat-value">--</div>
+              <div class="stat-label">文档数量</div>
+            </div>
+          </div>
+
+          <div class="data-stat-card">
+            <div class="stat-icon-large">💾</div>
+            <div class="stat-info">
+              <div class="stat-value">--</div>
+              <div class="stat-label">存储空间</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="settings-cards-container">
+          <div class="setting-card-detail">
+            <div class="setting-card-icon">📤</div>
+            <div class="setting-card-content">
+              <h4>导出数据</h4>
+              <p>导出您的聊天记录、文档和其他数据为 JSON 或 CSV 格式</p>
+              <div class="export-options">
+                <button class="btn-export" data-type="messages">
+                  <span>💬</span> 导出消息
+                </button>
+                <button class="btn-export" data-type="documents">
+                  <span>📄</span> 导出文档
+                </button>
+                <button class="btn-export" data-type="all">
+                  <span>📦</span> 导出全部
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="setting-card-detail">
+            <div class="setting-card-icon">🗑️</div>
+            <div class="setting-card-content">
+              <h4>清除缓存</h4>
+              <p>清除本地缓存数据以释放空间，不会删除服务器数据</p>
+              <button class="btn-danger-outline" id="clearCache">
+                <span>🗑️</span> 清除缓存
+              </button>
+            </div>
+          </div>
+
+          <div class="setting-card-detail">
+            <div class="setting-card-icon">🔄</div>
+            <div class="setting-card-content">
+              <h4>自动备份</h4>
+              <p>定期自动备份您的重要数据，确保数据安全</p>
+              <label class="toggle-switch">
+                <input type="checkbox" id="autoBackup" checked>
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    // 添加详细设置样式
+    this.addDetailSettingsStyles();
+
+    // 导出按钮
+    container.querySelectorAll('.btn-export').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const type = btn.dataset.type;
+        const originalText = btn.innerHTML;
+        btn.innerHTML = '<span>⏳</span> 导出中...';
+        btn.disabled = true;
+        
+        setTimeout(() => {
+          btn.innerHTML = '<span>✅</span> 导出成功！';
+          setTimeout(() => {
+            btn.innerHTML = originalText;
+            btn.disabled = false;
+          }, 2000);
+          
+          alert(`${type === 'all' ? '全部数据' : type === 'messages' ? '消息' : '文档'}导出功能开发中...`);
+        }, 1000);
+      });
+    });
+
+    // 清除缓存
+    container.querySelector('#clearCache')?.addEventListener('click', () => {
+      if (confirm('确定要清除缓存吗？这不会删除服务器上的数据。')) {
+        const btn = container.querySelector('#clearCache');
+        btn.innerHTML = '<span>⏳</span> 清除中...';
+        btn.disabled = true;
+        
+        setTimeout(() => {
+          localStorage.clear();
+          alert('缓存已清除！页面将刷新...');
+          window.location.reload();
+        }, 1000);
+      }
+    });
+  }
+
+  /**
+   * 渲染语言设置（优化后）
+   */
+  renderLanguageSettings(container) {
+    const currentLang = localStorage.getItem('language') || 'zh-CN';
+    
+    container.innerHTML = `
+      <div class="settings-detail-modern">
+        <div class="settings-header-modern">
+          <div class="settings-icon-large">🌐</div>
+          <h2>语言设置</h2>
+          <p>选择您偏好的界面显示语言</p>
+        </div>
+
+        <div class="language-selector-modern">
+          <div class="language-card ${currentLang === 'zh-CN' ? 'selected' : ''}" data-lang="zh-CN">
+            <div class="language-flag">🇨🇳</div>
+            <div class="language-info">
+              <h4>简体中文</h4>
+              <p>Simplified Chinese</p>
+            </div>
+            <div class="language-check">
+              ${currentLang === 'zh-CN' ? '<span class="check-icon">✓</span>' : ''}
+            </div>
+          </div>
+
+          <div class="language-card ${currentLang === 'zh-TW' ? 'selected' : ''}" data-lang="zh-TW">
+            <div class="language-flag">🇹🇼</div>
+            <div class="language-info">
+              <h4>繁體中文</h4>
+              <p>Traditional Chinese</p>
+            </div>
+            <div class="language-check">
+              ${currentLang === 'zh-TW' ? '<span class="check-icon">✓</span>' : ''}
+            </div>
+          </div>
+
+          <div class="language-card ${currentLang === 'en-US' ? 'selected' : ''}" data-lang="en-US">
+            <div class="language-flag">🇺🇸</div>
+            <div class="language-info">
+              <h4>English</h4>
+              <p>United States</p>
+            </div>
+            <div class="language-check">
+              ${currentLang === 'en-US' ? '<span class="check-icon">✓</span>' : ''}
+            </div>
+          </div>
+
+          <div class="language-card ${currentLang === 'ja-JP' ? 'selected' : ''}" data-lang="ja-JP">
+            <div class="language-flag">🇯🇵</div>
+            <div class="language-info">
+              <h4>日本語</h4>
+              <p>Japanese</p>
+            </div>
+            <div class="language-check">
+              ${currentLang === 'ja-JP' ? '<span class="check-icon">✓</span>' : ''}
+            </div>
+          </div>
+
+          <div class="language-card ${currentLang === 'ko-KR' ? 'selected' : ''}" data-lang="ko-KR">
+            <div class="language-flag">🇰🇷</div>
+            <div class="language-info">
+              <h4>한국어</h4>
+              <p>Korean</p>
+            </div>
+            <div class="language-check">
+              ${currentLang === 'ko-KR' ? '<span class="check-icon">✓</span>' : ''}
+            </div>
+          </div>
+
+          <div class="language-card ${currentLang === 'fr-FR' ? 'selected' : ''}" data-lang="fr-FR">
+            <div class="language-flag">🇫🇷</div>
+            <div class="language-info">
+              <h4>Français</h4>
+              <p>French</p>
+            </div>
+            <div class="language-check">
+              ${currentLang === 'fr-FR' ? '<span class="check-icon">✓</span>' : ''}
+            </div>
+          </div>
+        </div>
+
+        <div class="language-info-box">
+          <div class="info-icon">ℹ️</div>
+          <div class="info-content">
+            <h4>语言切换说明</h4>
+            <p>更改语言后，页面将自动刷新以应用新的语言设置。部分内容可能需要重新加载。</p>
+          </div>
+        </div>
+
+        <div class="settings-actions">
+          <button class="btn-primary-large" id="saveLanguage">
+            <span>💾</span> 保存并应用
+          </button>
+        </div>
+      </div>
+    `;
+
+    // 添加详细设置样式
+    this.addDetailSettingsStyles();
+
+    // 语言卡片点击效果
+    container.querySelectorAll('.language-card').forEach(card => {
+      card.addEventListener('click', () => {
+        // 移除所有选中状态
+        container.querySelectorAll('.language-card').forEach(c => {
+          c.classList.remove('selected');
+          c.querySelector('.language-check').innerHTML = '';
+        });
+        
+        // 添加选中状态
+        card.classList.add('selected');
+        card.querySelector('.language-check').innerHTML = '<span class="check-icon">✓</span>';
+      });
+    });
+
+    // 保存语言设置
+    container.querySelector('#saveLanguage')?.addEventListener('click', () => {
+      const selectedCard = container.querySelector('.language-card.selected');
+      const selectedLang = selectedCard.dataset.lang;
+      
+      const btn = container.querySelector('#saveLanguage');
+      const originalText = btn.innerHTML;
+      btn.innerHTML = '<span>⏳</span> 应用中...';
+      btn.disabled = true;
+      
+      setTimeout(() => {
+        localStorage.setItem('language', selectedLang);
+        btn.innerHTML = '<span>✅</span> 应用成功！';
+        
+        setTimeout(() => {
+          window.location.reload();
+        }, 1000);
+      }, 500);
+    });
+  }
+
+  /**
+   * 渲染通知设置（优化后）
+   */
+  renderNotificationSettings(container) {
+    const settings = {
+      desktop: localStorage.getItem('notif_desktop') !== 'false',
+      sound: localStorage.getItem('notif_sound') !== 'false',
+      mentions: localStorage.getItem('notif_mentions') !== 'false',
+      messages: localStorage.getItem('notif_messages') !== 'false'
+    };
+
+    container.innerHTML = `
+      <div class="settings-detail-modern">
+        <div class="settings-header-modern">
+          <div class="settings-icon-large">🔔</div>
+          <h2>通知设置</h2>
+          <p>管理您的通知偏好和提醒方式</p>
+        </div>
+
+        <div class="settings-cards-container">
+          <div class="setting-card-detail ${settings.desktop ? 'active' : ''}">
+            <div class="setting-card-icon">🖥️</div>
+            <div class="setting-card-content">
+              <div class="setting-card-header">
+                <h4>桌面通知</h4>
+                <label class="toggle-switch">
+            <input type="checkbox" id="desktopNotif" ${settings.desktop ? 'checked' : ''}>
+                  <span class="toggle-slider"></span>
+          </label>
+              </div>
+              <p>在桌面显示新消息通知，即使浏览器在后台运行</p>
+            </div>
+        </div>
+        
+          <div class="setting-card-detail ${settings.sound ? 'active' : ''}">
+            <div class="setting-card-icon">🔊</div>
+            <div class="setting-card-content">
+              <div class="setting-card-header">
+                <h4>声音提示</h4>
+                <label class="toggle-switch">
+            <input type="checkbox" id="soundNotif" ${settings.sound ? 'checked' : ''}>
+                  <span class="toggle-slider"></span>
+          </label>
+              </div>
+              <p>收到新消息时播放提示音，让您不会错过重要信息</p>
+            </div>
+        </div>
+        
+          <div class="setting-card-detail ${settings.mentions ? 'active' : ''}">
+            <div class="setting-card-icon">@</div>
+            <div class="setting-card-content">
+              <div class="setting-card-header">
+                <h4>@提及通知</h4>
+                <label class="toggle-switch">
+            <input type="checkbox" id="mentionNotif" ${settings.mentions ? 'checked' : ''}>
+                  <span class="toggle-slider"></span>
+          </label>
+              </div>
+              <p>有人@提及您时发送特别通知，确保及时回复</p>
+            </div>
+        </div>
+        
+          <div class="setting-card-detail ${settings.messages ? 'active' : ''}">
+            <div class="setting-card-icon">💬</div>
+            <div class="setting-card-content">
+              <div class="setting-card-header">
+                <h4>新消息通知</h4>
+                <label class="toggle-switch">
+            <input type="checkbox" id="messageNotif" ${settings.messages ? 'checked' : ''}>
+                  <span class="toggle-slider"></span>
+          </label>
+              </div>
+              <p>收到新消息时发送通知，保持与团队的实时沟通</p>
+            </div>
+          </div>
+        </div>
+        
+        <div class="settings-actions">
+          <button class="btn-primary-large" id="saveNotifSettings">
+            <span>💾</span> 保存设置
+          </button>
+          <button class="btn-secondary-large" id="testNotif">
+            <span>🔔</span> 测试通知
+          </button>
+        </div>
+      </div>
+    `;
+
+    // 添加详细设置样式
+    this.addDetailSettingsStyles();
+
+    // 切换开关效果
+    container.querySelectorAll('.toggle-switch input').forEach(input => {
+      input.addEventListener('change', (e) => {
+        const card = e.target.closest('.setting-card-detail');
+        if (e.target.checked) {
+          card.classList.add('active');
+        } else {
+          card.classList.remove('active');
+        }
+      });
+    });
+
+    // 保存设置
+    container.querySelector('#saveNotifSettings').addEventListener('click', () => {
+      localStorage.setItem('notif_desktop', container.querySelector('#desktopNotif').checked);
+      localStorage.setItem('notif_sound', container.querySelector('#soundNotif').checked);
+      localStorage.setItem('notif_mentions', container.querySelector('#mentionNotif').checked);
+      localStorage.setItem('notif_messages', container.querySelector('#messageNotif').checked);
+      
+      // 显示成功提示
+      const btn = container.querySelector('#saveNotifSettings');
+      const originalText = btn.innerHTML;
+      btn.innerHTML = '<span>✅</span> 保存成功！';
+      btn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
+      
+      setTimeout(() => {
+        btn.innerHTML = originalText;
+        btn.style.background = '';
+      }, 2000);
+    });
+
+    // 测试通知
+    container.querySelector('#testNotif')?.addEventListener('click', () => {
+      if ('Notification' in window) {
+        Notification.requestPermission().then(permission => {
+          if (permission === 'granted') {
+            new Notification('CollabDocChat', {
+              body: '这是一条测试通知！',
+              icon: '/favicon.ico'
+            });
+          } else {
+            alert('请允许浏览器通知权限');
+          }
+        });
+      } else {
+        alert('您的浏览器不支持桌面通知');
+      }
+    });
+  }
+
+  /**
+   * 渲染AI设置（优化后）
+   */
+  renderAISettings(container) {
+    const aiEnabled = localStorage.getItem('ai_enabled') !== 'false';
+    const smartReplies = localStorage.getItem('ai_smart_replies') !== 'false';
+    const autoComplete = localStorage.getItem('ai_auto_complete') !== 'false';
+
+    container.innerHTML = `
+      <div class="settings-detail-modern">
+        <div class="settings-header-modern">
+          <div class="settings-icon-large">🤖</div>
+          <h2>AI 助手设置</h2>
+          <p>配置 AI 功能，提升您的工作效率</p>
+        </div>
+
+        <div class="settings-cards-container">
+          <div class="setting-card-detail ${aiEnabled ? 'active' : ''}">
+            <div class="setting-card-icon">⚡</div>
+            <div class="setting-card-content">
+              <div class="setting-card-header">
+                <h4>启用 AI 助手</h4>
+                <label class="toggle-switch">
+                  <input type="checkbox" id="aiEnabled" ${aiEnabled ? 'checked' : ''}>
+                  <span class="toggle-slider"></span>
+          </label>
+              </div>
+              <p>使用 AI 提供智能回复建议和内容分析，让沟通更高效</p>
+            </div>
+        </div>
+        
+          <div class="setting-card-detail ${smartReplies ? 'active' : ''}">
+            <div class="setting-card-icon">💡</div>
+            <div class="setting-card-content">
+              <div class="setting-card-header">
+                <h4>智能回复建议</h4>
+                <label class="toggle-switch">
+                  <input type="checkbox" id="smartReplies" ${smartReplies ? 'checked' : ''}>
+                  <span class="toggle-slider"></span>
+          </label>
+              </div>
+              <p>根据消息内容自动生成回复建议，快速响应对话</p>
+            </div>
+        </div>
+        
+          <div class="setting-card-detail ${autoComplete ? 'active' : ''}">
+            <div class="setting-card-icon">✨</div>
+            <div class="setting-card-content">
+              <div class="setting-card-header">
+                <h4>自动完成</h4>
+                <label class="toggle-switch">
+                  <input type="checkbox" id="autoComplete" ${autoComplete ? 'checked' : ''}>
+                  <span class="toggle-slider"></span>
+          </label>
+              </div>
+              <p>输入时提供智能自动完成建议，提高输入效率</p>
+            </div>
+          </div>
+        </div>
+        
+        <div class="ai-features-showcase">
+          <h3>✨ AI 功能展示</h3>
+          <div class="features-grid">
+            <div class="feature-item">
+              <div class="feature-icon">📝</div>
+              <h4>智能摘要</h4>
+              <p>自动生成会议和文档摘要</p>
+            </div>
+            <div class="feature-item">
+              <div class="feature-icon">🔍</div>
+              <h4>智能搜索</h4>
+              <p>理解语义的智能搜索</p>
+            </div>
+            <div class="feature-item">
+              <div class="feature-icon">🎯</div>
+              <h4>任务建议</h4>
+              <p>智能推荐任务优先级</p>
+            </div>
+            <div class="feature-item">
+              <div class="feature-icon">📊</div>
+              <h4>数据分析</h4>
+              <p>自动分析团队协作数据</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="settings-actions">
+          <button class="btn-primary-large" id="saveAISettings">
+            <span>💾</span> 保存设置
+          </button>
+          <button class="btn-secondary-large" id="testAI">
+            <span>🧪</span> 测试 AI
+          </button>
+          <button class="btn-secondary-large" id="openAIPanel">
+            <span>🤖</span> AI 面板
+          </button>
+        </div>
+      </div>
+    `;
+
+    // 添加详细设置样式
+    this.addDetailSettingsStyles();
+
+    // 切换开关效果
+    container.querySelectorAll('.toggle-switch input').forEach(input => {
+      input.addEventListener('change', (e) => {
+        const card = e.target.closest('.setting-card-detail');
+        if (e.target.checked) {
+          card.classList.add('active');
+        } else {
+          card.classList.remove('active');
+        }
+      });
+    });
+
+    // 保存设置
+    container.querySelector('#saveAISettings').addEventListener('click', () => {
+      localStorage.setItem('ai_enabled', container.querySelector('#aiEnabled').checked);
+      localStorage.setItem('ai_smart_replies', container.querySelector('#smartReplies').checked);
+      localStorage.setItem('ai_auto_complete', container.querySelector('#autoComplete').checked);
+      
+      const btn = container.querySelector('#saveAISettings');
+      const originalText = btn.innerHTML;
+      btn.innerHTML = '<span>✅</span> 保存成功！';
+      btn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
+      
+      setTimeout(() => {
+        btn.innerHTML = originalText;
+        btn.style.background = '';
+      }, 2000);
+    });
+
+    // 测试 AI
+    container.querySelector('#testAI').addEventListener('click', () => {
+      const btn = container.querySelector('#testAI');
+      const originalText = btn.innerHTML;
+      btn.innerHTML = '<span>⏳</span> 测试中...';
+      btn.disabled = true;
+      
+      setTimeout(() => {
+        btn.innerHTML = '<span>✅</span> AI 正常运行！';
+        setTimeout(() => {
+          btn.innerHTML = originalText;
+          btn.disabled = false;
+        }, 2000);
+      }, 1000);
+    });
+
+    // 打开 AI 面板
+    container.querySelector('#openAIPanel').addEventListener('click', () => {
+      const panel = document.createElement('div');
+      panel.className = 'modal';
+      panel.innerHTML = '<div class="modal-content" style="max-width: 800px;"></div>';
+      document.body.appendChild(panel);
+      
+      this.aiAssistant.renderAssistantPanel(panel.querySelector('.modal-content'));
+      
+      panel.addEventListener('click', (e) => {
+        if (e.target === panel) {
+          panel.remove();
+        }
+      });
+    });
+  }
+
+  /**
+   * 渲染帮助页面
+   */
+  renderHelpView(container) {
+    onboardingGuide.showHelpCenter(container);
+  }
+
+  /**
+   * 增强聊天视图
+   */
+  enhanceChatView(container, currentGroup, groupMembers) {
+    // 添加增强功能按钮
+    const header = container.querySelector('.view-header');
+    if (header) {
+      const enhancementsHTML = `
+        <div class="chat-enhancements">
+          <button class="btn-secondary" id="showAIAssistant" title="AI 助手">
+            🤖 AI
+          </button>
+          <button class="btn-secondary" id="showCollabTools" title="协作工具">
+            🛠️ 工具
+          </button>
+          <button class="btn-secondary" id="markAllRead" title="全部标记为已读">
+            ✓ 已读
+          </button>
+        </div>
+      `;
+      header.insertAdjacentHTML('beforeend', enhancementsHTML);
+
+      // AI 助手按钮
+      container.querySelector('#showAIAssistant').addEventListener('click', () => {
+        const panel = document.createElement('div');
+        panel.className = 'modal';
+        panel.innerHTML = '<div class="modal-content" style="max-width: 800px;"></div>';
+        document.body.appendChild(panel);
+        
+        this.aiAssistant.renderAssistantPanel(panel.querySelector('.modal-content'));
+        
+        panel.addEventListener('click', (e) => {
+          if (e.target === panel) panel.remove();
+        });
+      });
+
+      // 协作工具按钮
+      container.querySelector('#showCollabTools').addEventListener('click', () => {
+        this.showCollaborationTools(currentGroup._id);
+      });
+
+      // 标记全部已读
+      container.querySelector('#markAllRead').addEventListener('click', async () => {
+        const messages = Array.from(container.querySelectorAll('.message[data-message-id]'))
+          .map(el => el.dataset.messageId);
+        
+        if (messages.length > 0) {
+          await this.chatEnhancements.markAllAsRead(messages);
+          alert('已标记所有消息为已读');
+        }
+      });
+    }
+
+    // 设置@提及功能
+    const messageInput = container.querySelector('#messageInput');
+    if (messageInput && groupMembers) {
+      this.chatEnhancements.setupMentionInput(messageInput, groupMembers);
+    }
+
+    // 监听智能回复选择
+    window.addEventListener('smartReplySelected', (e) => {
+      if (messageInput) {
+        messageInput.value = e.detail.reply;
+        messageInput.focus();
+      }
+    });
+  }
+
+  /**
+   * 显示协作工具
+   */
+  showCollaborationTools(groupId) {
+    const modal = document.createElement('div');
+    modal.className = 'modal';
+    
+    // 根据用户角色决定是否显示投票功能
+    const pollTab = this.user.role === 'admin' ? '<button class="collab-tab-btn" data-tool="poll"><span class="tab-icon">📊</span><span class="tab-text">投票</span></button>' : '';
+    
+    modal.innerHTML = `
+      <div class="modal-content" style="max-width: 1000px;">
+        <div class="modal-header">
+          <h3>🛠️ 协作工具</h3>
+          <button class="modal-close" id="closeCollabTools">×</button>
+        </div>
+        <div class="collab-tools-tabs-modern">
+          <button class="collab-tab-btn active" data-tool="whiteboard">
+            <span class="tab-icon">🎨</span>
+            <span class="tab-text">白板</span>
+          </button>
+          ${pollTab}
+          <button class="collab-tab-btn" data-tool="code">
+            <span class="tab-icon">💻</span>
+            <span class="tab-text">代码编辑</span>
+          </button>
+          <button class="collab-tab-btn" data-tool="mindmap">
+            <span class="tab-icon">🧠</span>
+            <span class="tab-text">思维导图</span>
+          </button>
+        </div>
+        <div class="collab-tools-content" id="collabToolsContent"></div>
+      </div>
+    `;
+
+    document.body.appendChild(modal);
+    
+    // 添加标签按钮样式
+    this.addCollabTabStyles();
+
+    // 关闭按钮
+    modal.querySelector('#closeCollabTools').addEventListener('click', () => {
+      modal.remove();
+    });
+
+    // 标签切换
+    modal.querySelectorAll('.collab-tab-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const tool = btn.dataset.tool;
+        
+        modal.querySelectorAll('.collab-tab-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        
+        const content = modal.querySelector('#collabToolsContent');
+        this.loadCollaborationTool(tool, content, groupId);
+      });
+    });
+
+    // 默认加载白板
+    this.loadCollaborationTool('whiteboard', modal.querySelector('#collabToolsContent'), groupId);
+  }
+  
+  /**
+   * 添加协作标签按钮样式
+   */
+  addCollabTabStyles() {
+    if (document.getElementById('collab-tab-modern-styles')) return;
+    
+    const style = document.createElement('style');
+    style.id = 'collab-tab-modern-styles';
+    style.textContent = `
+      .collab-tools-tabs-modern {
+        display: flex;
+        gap: 12px;
+        padding: 20px;
+        background: var(--bg-dark);
+        border-radius: 12px;
+        margin-bottom: 20px;
+        flex-wrap: wrap;
+      }
+      
+      .collab-tab-btn {
+        flex: 1;
+        min-width: 120px;
+        padding: 14px 20px;
+        background: var(--bg-card);
+        border: 2px solid var(--border);
+        border-radius: 12px;
+        color: var(--text-primary);
+        font-size: 15px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+        position: relative;
+        overflow: hidden;
+      }
+      
+      .collab-tab-btn::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+        transition: left 0.5s ease;
+      }
+      
+      .collab-tab-btn:hover::before {
+        left: 100%;
+      }
+      
+      .collab-tab-btn:hover {
+        border-color: var(--primary);
+        transform: translateY(-3px);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.3);
+      }
+      
+      .collab-tab-btn.active {
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        border-color: var(--primary);
+        color: white;
+        box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+      }
+      
+      .collab-tab-btn.active::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: white;
+        box-shadow: 0 0 10px rgba(255,255,255,0.5);
+      }
+      
+      .tab-icon {
+        font-size: 24px;
+        transition: all 0.3s ease;
+      }
+      
+      .collab-tab-btn:hover .tab-icon {
+        transform: scale(1.2);
+      }
+      
+      .collab-tab-btn.active .tab-icon {
+        animation: bounce 0.6s ease;
+      }
+      
+      .tab-text {
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 0.5px;
+      }
+      
+      @keyframes bounce {
+        0%, 100% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-5px);
+        }
+      }
+      
+      @media (max-width: 768px) {
+        .collab-tools-tabs-modern {
+          flex-direction: column;
+        }
+        
+        .collab-tab-btn {
+          width: 100%;
+          flex-direction: row;
+          justify-content: center;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * 加载协作工具
+   */
+  loadCollaborationTool(tool, container, groupId) {
+    const isAdmin = this.user.role === 'admin';
+    
+    switch(tool) {
+      case 'whiteboard':
+        this.collaboration.createWhiteboard(container, groupId, this.user.username, isAdmin);
+        break;
+      case 'poll':
+        this.collaboration.createPoll(container, groupId);
+        break;
+      case 'code':
+        this.collaboration.createCodeEditor(container);
+        break;
+      case 'mindmap':
+        this.collaboration.createMindMap(container);
+        break;
+    }
+  }
+
+  /**
+   * 显示新手引导
+   */
+  showOnboarding() {
+    if (!onboardingGuide.hasCompleted) {
+      setTimeout(() => {
+        const showGuide = confirm('欢迎使用 CollabDocChat！是否需要新手引导？');
+        if (showGuide) {
+          onboardingGuide.start();
+        } else {
+          onboardingGuide.markCompleted();
+        }
+      }, 1000);
+    }
+  }
+
+  /**
+   * 添加在线状态指示器
+   */
+  addOnlineStatusIndicators(container, members) {
+    members.forEach(member => {
+      const memberEl = container.querySelector(`[data-user-id="${member._id}"]`);
+      if (memberEl) {
+        const indicator = this.onlineStatus.renderStatusIndicator(member._id);
+        memberEl.insertAdjacentHTML('beforeend', indicator);
+      }
+    });
+  }
+
+  /**
+   * 清理资源
+   */
+  cleanup() {
+    this.chatEnhancements.cleanup();
+  }
+}
+