collabdocchat 1.2.13 → 2.0.1

package/src/utils/ui-enhancements-loader.js

@@ -0,0 +1,329 @@
+/**
+ * UI 美化增强加载器
+ * 自动加载所有界面美化功能
+ * 确保所有优化的界面在启动时自动集成
+ */
+
+export class UIEnhancementsLoader {
+  constructor() {
+    this.enhancementsLoaded = false;
+  }
+
+  /**
+   * 初始化所有UI美化增强
+   * 在应用启动时自动调用
+   */
+  async init() {
+    if (this.enhancementsLoaded) {
+      console.log('✅ UI美化增强已加载');
+      return;
+    }
+
+    console.log('🎨 开始加载UI美化增强...');
+
+    try {
+      // 1. 加载全局美化样式
+      this.loadGlobalStyles();
+
+      // 2. 加载备份管理美化
+      await this.loadBackupEnhancements();
+
+      // 3. 加载任务详情美化
+      await this.loadTaskDetailEnhancements();
+
+      // 4. 加载工作流美化
+      await this.loadWorkflowEnhancements();
+
+      // 5. 加载投票详情美化
+      await this.loadPollDetailEnhancements();
+
+      // 6. 加载协作工具美化
+      await this.loadCollaborationEnhancements();
+
+      // 7. 加载设置界面美化（已在 feature-integrator.js 中）
+      console.log('✅ 设置界面美化已集成');
+
+      // 8. 加载帮助中心美化（已在 onboarding-guide.js 中）
+      console.log('✅ 帮助中心美化已集成');
+
+      this.enhancementsLoaded = true;
+      console.log('🎉 所有UI美化增强加载完成！');
+
+    } catch (error) {
+      console.error('❌ UI美化增强加载失败:', error);
+    }
+  }
+
+  /**
+   * 加载全局美化样式
+   */
+  loadGlobalStyles() {
+    if (document.getElementById('global-ui-enhancements')) {
+      return;
+    }
+
+    const style = document.createElement('style');
+    style.id = 'global-ui-enhancements';
+    style.textContent = `
+      /* ========================================
+         全局UI美化样式
+         自动加载，无需手动集成
+         ======================================== */
+
+      /* 确保主内容区域填满空间 */
+      .main-content {
+        width: 100% !important;
+        max-width: 100% !important;
+        overflow-x: hidden;
+      }
+
+      .dashboard {
+        width: 100% !important;
+        max-width: 100% !important;
+      }
+
+      /* 通用卡片样式 */
+      .card-modern {
+        background: var(--bg-card);
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        padding: 24px;
+        transition: all 0.3s ease;
+      }
+
+      .card-modern:hover {
+        border-color: var(--primary);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.15);
+        transform: translateY(-2px);
+      }
+
+      /* 通用按钮增强 */
+      .btn-primary,
+      .btn-secondary {
+        transition: all 0.3s ease;
+      }
+
+      .btn-primary:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+      }
+
+      .btn-secondary:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      }
+
+      /* 通用动画 */
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes slideInRight {
+        from {
+          opacity: 0;
+          transform: translateX(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      @keyframes pulse {
+        0%, 100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.5;
+        }
+      }
+
+      /* 视图头部增强 */
+      .view-header {
+        animation: fadeInUp 0.5s ease;
+      }
+
+      /* 网格布局增强 */
+      .groups-grid,
+      .tasks-grid,
+      .documents-grid {
+        animation: fadeIn 0.5s ease;
+      }
+
+      /* 模态框增强 */
+      .modal {
+        animation: fadeIn 0.3s ease;
+      }
+
+      .modal-content {
+        animation: fadeInUp 0.3s ease;
+      }
+
+      /* 加载状态 */
+      .loading {
+        animation: pulse 1.5s ease-in-out infinite;
+      }
+
+      /* 成功状态 */
+      .success-feedback {
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        color: white;
+        padding: 12px 24px;
+        border-radius: 8px;
+        animation: fadeInUp 0.3s ease;
+      }
+
+      /* 错误状态 */
+      .error-feedback {
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+        color: white;
+        padding: 12px 24px;
+        border-radius: 8px;
+        animation: fadeInUp 0.3s ease;
+      }
+    `;
+    document.head.appendChild(style);
+    console.log('✅ 全局美化样式已加载');
+  }
+
+  /**
+   * 加载备份管理美化
+   */
+  async loadBackupEnhancements() {
+    try {
+      // 动态导入备份管理美化模块
+      const module = await import('../pages/optimized-backup-view.js');
+      
+      // 将函数挂载到全局，供 admin-dashboard.js 调用
+      window.renderOptimizedBackupView = module.renderOptimizedBackupView;
+      
+      console.log('✅ 备份管理美化已加载');
+    } catch (error) {
+      console.warn('⚠️ 备份管理美化加载失败，使用默认界面:', error);
+    }
+  }
+
+  /**
+   * 加载任务详情美化
+   */
+  async loadTaskDetailEnhancements() {
+    try {
+      // 动态导入任务详情美化模块
+      const module = await import('../pages/optimized-task-detail.js');
+      
+      // 将函数挂载到全局，供其他模块调用
+      window.renderOptimizedTaskDetail = module.renderOptimizedTaskDetail;
+      
+      console.log('✅ 任务详情美化已加载');
+    } catch (error) {
+      console.warn('⚠️ 任务详情美化加载失败，使用默认界面:', error);
+    }
+  }
+
+  /**
+   * 加载工作流美化
+   */
+  async loadWorkflowEnhancements() {
+    try {
+      // 动态导入工作流美化模块
+      const module = await import('../pages/optimized-workflow-view.js');
+      
+      // 将函数挂载到全局，供其他模块调用
+      window.renderOptimizedWorkflowView = module.renderOptimizedWorkflowView;
+      
+      console.log('✅ 工作流美化已加载');
+    } catch (error) {
+      console.warn('⚠️ 工作流美化加载失败，使用默认界面:', error);
+    }
+  }
+
+  /**
+   * 加载投票详情美化
+   */
+  async loadPollDetailEnhancements() {
+    try {
+      // 动态导入投票详情美化模块
+      const module = await import('../components/optimized-poll-detail.js');
+      
+      // 将函数挂载到全局，供其他模块调用
+      window.renderOptimizedPollDetail = module.renderOptimizedPollDetail;
+      window.addPollDetailStyles = module.addPollDetailStyles;
+      
+      // 立即添加样式
+      if (typeof window.addPollDetailStyles === 'function') {
+        window.addPollDetailStyles();
+      }
+      
+      console.log('✅ 投票详情美化已加载');
+    } catch (error) {
+      console.warn('⚠️ 投票详情美化加载失败，使用默认界面:', error);
+    }
+  }
+
+  /**
+   * 加载协作工具美化
+   */
+  async loadCollaborationEnhancements() {
+    try {
+      // 动态导入协作工具美化模块
+      const module = await import('../styles/collaboration-modern.js');
+      
+      // 立即添加样式
+      if (typeof module.addCollaborationStyles === 'function') {
+        module.addCollaborationStyles();
+      }
+      
+      console.log('✅ 协作工具美化已加载');
+    } catch (error) {
+      console.warn('⚠️ 协作工具美化加载失败，使用默认界面:', error);
+    }
+  }
+
+  /**
+   * 检查美化功能是否已加载
+   */
+  isLoaded() {
+    return this.enhancementsLoaded;
+  }
+
+  /**
+   * 重新加载所有美化功能
+   */
+  async reload() {
+    this.enhancementsLoaded = false;
+    await this.init();
+  }
+}
+
+// 创建单例实例
+export const uiEnhancementsLoader = new UIEnhancementsLoader();
+
+// 自动初始化（在模块加载时）
+if (typeof window !== 'undefined') {
+  // 等待 DOM 加载完成后初始化
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      uiEnhancementsLoader.init();
+    });
+  } else {
+    // DOM 已经加载完成，立即初始化
+    uiEnhancementsLoader.init();
+  }
+}
+

package/USAGE.md

@@ -1,298 +0,0 @@
-# 使用说明
-
-## 🚀 推荐的安装和使用流程
-
-### 步骤 1: 安装包
-
-```bash
-# 在您想要的目录下安装
-npm install collabdocchat
-```
-
-### 步骤 2: 进入目录
-
-```bash
-cd node_modules/collabdocchat
-```
-
-### 步骤 3: 启动应用
-
-```bash
-npm start
-```
-
-**首次启动时**，系统会自动：
-- 检测并安装缺失的依赖
-- 检查端口是否可用
-- 启动服务器和客户端
-- 自动打开浏览器
-
-## ⚠️ 常见问题解决
-
-### 问题 1: 端口被占用
-
-如果看到错误：`Error: listen EADDRINUSE: address already in use :::3000`
-
-**解决方案：**
-
-#### Windows:
-```cmd
-# 查找占用端口的进程
-netstat -ano | findstr :3000
-
-# 结束进程（替换 <PID> 为实际的进程ID）
-taskkill /PID <PID> /F
-```
-
-#### Mac/Linux:
-```bash
-# 查找并结束进程
-lsof -ti:3000 | xargs kill -9
-```
-
-或者使用项目提供的停止脚本：
-```bash
-npm run stop
-```
-
-### 问题 2: vite 命令找不到
-
-如果看到错误：`'vite' 不是内部或外部命令`
-
-**原因：** 开发依赖未安装
-
-**解决方案：**
-```bash
-# 在 collabdocchat 目录下运行
-npm install
-```
-
-v1.2.8 及以上版本会在启动时自动检测并安装缺失的依赖。
-
-### 问题 3: MongoDB 连接失败
-
-如果看到错误：`MongoNetworkError: connect ECONNREFUSED`
-
-**解决方案：**
-
-1. **确保 MongoDB 已安装**
-   - 下载地址: https://www.mongodb.com/try/download/community
-
-2. **启动 MongoDB 服务**
-
-   **Windows:**
-   ```cmd
-   net start MongoDB
-   ```
-
-   **Mac:**
-   ```bash
-   brew services start mongodb-community
-   ```
-
-   **Linux:**
-   ```bash
-   sudo systemctl start mongod
-   ```
-
-3. **验证 MongoDB 运行**
-   ```bash
-   # 连接到 MongoDB
-   mongosh
-   # 或旧版本
-   mongo
-   ```
-
-## 📋 完整的使用流程示例
-
-### Windows 用户
-
-```cmd
-# 1. 创建项目目录
-mkdir my-collab-app
-cd my-collab-app
-
-# 2. 安装包
-npm install collabdocchat
-
-# 3. 进入目录
-cd node_modules\collabdocchat
-
-# 4. 确保 MongoDB 运行
-net start MongoDB
-
-# 5. 启动应用
-npm start
-```
-
-### Mac/Linux 用户
-
-```bash
-# 1. 创建项目目录
-mkdir my-collab-app
-cd my-collab-app
-
-# 2. 安装包
-npm install collabdocchat
-
-# 3. 进入目录
-cd node_modules/collabdocchat
-
-# 4. 确保 MongoDB 运行
-brew services start mongodb-community  # Mac
-# 或
-sudo systemctl start mongod  # Linux
-
-# 5. 启动应用
-npm start
-```
-
-## 🎯 访问应用
-
-启动成功后，浏览器会自动打开：
-
-- **客户端界面**: http://localhost:5173
-- **服务器 API**: http://localhost:3000
-
-### 默认管理员账号
-
-- **用户名**: `admin`
-- **密码**: `admin123`
-
-⚠️ **重要**: 首次登录后请立即修改密码！
-
-## 🛑 停止应用
-
-### 方法 1: 使用快捷键
-在运行应用的终端窗口按 `Ctrl + C`
-
-### 方法 2: 使用停止脚本
-```bash
-npm run stop
-```
-
-### 方法 3: 手动结束进程
-
-**Windows:**
-```cmd
-taskkill /F /IM node.exe
-```
-
-**Mac/Linux:**
-```bash
-pkill -f node
-```
-
-## 🔧 配置说明
-
-### 修改端口
-
-编辑 `.env` 文件：
-
-```env
-# 修改服务器端口
-PORT=3000
-
-# MongoDB 连接
-MONGODB_URI=mongodb://localhost:27017/collabdocchat
-
-# JWT 密钥（生产环境务必修改）
-JWT_SECRET=your-secret-key-here
-```
-
-### 修改管理员账号
-
-编辑 `.env` 文件：
-
-```env
-ADMIN_USERNAME=admin
-ADMIN_PASSWORD=your-secure-password
-ADMIN_EMAIL=admin@yourdomain.com
-```
-
-删除数据库后重新启动，将使用新的管理员信息。
-
-## 📊 开发模式
-
-如果您想进行开发或调试：
-
-```bash
-# 开发模式（支持热重载）
-npm run dev
-```
-
-特点：
-- 服务器自动重启（nodemon）
-- 前端热重载（Vite HMR）
-- 自动打开浏览器
-
-## 🔍 检查安装
-
-### 验证 Node.js
-```bash
-node --version
-# 应该 >= 16.0.0
-```
-
-### 验证 npm
-```bash
-npm --version
-# 应该 >= 7.0.0
-```
-
-### 验证 MongoDB
-```bash
-mongod --version
-# 应该 >= 4.4
-```
-
-## 📞 获取帮助
-
-如果遇到其他问题：
-
-1. 查看 [INSTALLATION.md](./INSTALLATION.md) - 详细安装指南
-2. 查看 [README.md](./README.md) - 完整文档
-3. 访问 [GitHub Issues](https://github.com/shijinghao/collabdocchat/issues)
-4. 提交新的 Issue 描述您的问题
-
-## 💡 最佳实践
-
-1. **定期更新**
-   ```bash
-   npm update collabdocchat
-   ```
-
-2. **备份数据**
-   ```bash
-   mongodump --db collabdocchat --out ./backup
-   ```
-
-3. **使用 PM2 管理进程**（生产环境）
-   ```bash
-   npm install -g pm2
-   pm2 start server/index.js --name collabdocchat
-   pm2 startup
-   pm2 save
-   ```
-
-4. **配置反向代理**（生产环境）
-   使用 Nginx 或 Apache 作为反向代理
-
-5. **启用 HTTPS**（生产环境）
-   使用 Let's Encrypt 获取免费 SSL 证书
-
-## 🎉 开始使用
-
-现在您可以：
-
-- ✅ 创建新文档
-- ✅ 邀请团队成员
-- ✅ 实时协作编辑
-- ✅ 使用聊天功能
-- ✅ 管理任务
-- ✅ 上传文件
-
-祝您使用愉快！🚀
-
-
-