collabdocchat 1.2.13 → 2.0.1

package/src/utils/permission-manager.js

@@ -0,0 +1,890 @@
+/**
+ * 权限管理系统
+ * 提供细粒度的权限控制
+ */
+
+export class PermissionManager {
+  constructor() {
+    this.permissions = {
+      // 文档权限
+      document: {
+        create: ['admin', 'user'],
+        read: ['admin', 'user', 'guest'],
+        update: ['admin', 'user'],
+        delete: ['admin'],
+        share: ['admin', 'user'],
+        export: ['admin', 'user']
+      },
+      // 群组权限
+      group: {
+        create: ['admin'],
+        read: ['admin', 'user'],
+        update: ['admin'],
+        delete: ['admin'],
+        invite: ['admin'],
+        remove: ['admin']
+      },
+      // 任务权限
+      task: {
+        create: ['admin', 'user'],
+        read: ['admin', 'user'],
+        update: ['admin', 'user'],
+        delete: ['admin'],
+        assign: ['admin']
+      },
+      // 文件权限
+      file: {
+        upload: ['admin', 'user'],
+        download: ['admin', 'user', 'guest'],
+        delete: ['admin', 'user']
+      },
+      // 聊天权限
+      chat: {
+        send: ['admin', 'user'],
+        recall: ['admin', 'user'],
+        delete: ['admin'],
+        mute: ['admin']
+      },
+      // 系统权限
+      system: {
+        viewLogs: ['admin'],
+        manageUsers: ['admin'],
+        settings: ['admin']
+      }
+    };
+
+    // 自定义权限
+    this.customPermissions = this.loadCustomPermissions();
+  }
+
+  /**
+   * 检查权限
+   */
+  hasPermission(userRole, resource, action) {
+    // 检查基础权限
+    if (this.permissions[resource] && this.permissions[resource][action]) {
+      if (this.permissions[resource][action].includes(userRole)) {
+        return true;
+      }
+    }
+
+    // 检查自定义权限
+    const customKey = `${resource}.${action}`;
+    if (this.customPermissions[customKey]) {
+      return this.customPermissions[customKey].includes(userRole);
+    }
+
+    return false;
+  }
+
+  /**
+   * 检查文档权限
+   */
+  canAccessDocument(user, document) {
+    // 管理员可以访问所有文档
+    if (user.role === 'admin') {
+      return true;
+    }
+
+    // 文档创建者可以访问
+    if (document.creator === user.id) {
+      return true;
+    }
+
+    // 检查文档权限设置
+    if (document.permission === 'public') {
+      return true;
+    }
+
+    if (document.permission === 'readonly') {
+      return this.hasPermission(user.role, 'document', 'read');
+    }
+
+    // 检查是否在允许的用户列表中
+    if (document.allowedUsers && document.allowedUsers.includes(user.id)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 检查文档编辑权限
+   */
+  canEditDocument(user, document) {
+    // 管理员可以编辑所有文档
+    if (user.role === 'admin') {
+      return true;
+    }
+
+    // 文档创建者可以编辑
+    if (document.creator === user.id) {
+      return true;
+    }
+
+    // 只读文档不能编辑
+    if (document.permission === 'readonly') {
+      return false;
+    }
+
+    // 检查是否在编辑者列表中
+    if (document.editors && document.editors.includes(user.id)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 检查群组权限
+   */
+  canAccessGroup(user, group) {
+    // 管理员可以访问所有群组
+    if (user.role === 'admin') {
+      return true;
+    }
+
+    // 检查是否是群组成员
+    if (group.members && group.members.includes(user.id)) {
+      return true;
+    }
+
+    // 检查是否是公开群组
+    if (group.visibility === 'public') {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 检查是否是群组管理员
+   */
+  isGroupAdmin(user, group) {
+    return user.role === 'admin' || group.admin === user.id;
+  }
+
+  /**
+   * 添加自定义权限
+   */
+  addCustomPermission(resource, action, roles) {
+    const key = `${resource}.${action}`;
+    this.customPermissions[key] = roles;
+    this.saveCustomPermissions();
+  }
+
+  /**
+   * 移除自定义权限
+   */
+  removeCustomPermission(resource, action) {
+    const key = `${resource}.${action}`;
+    delete this.customPermissions[key];
+    this.saveCustomPermissions();
+  }
+
+  /**
+   * 保存自定义权限
+   */
+  saveCustomPermissions() {
+    localStorage.setItem('customPermissions', JSON.stringify(this.customPermissions));
+  }
+
+  /**
+   * 加载自定义权限
+   */
+  loadCustomPermissions() {
+    const saved = localStorage.getItem('customPermissions');
+    return saved ? JSON.parse(saved) : {};
+  }
+
+  /**
+   * 获取用户权限列表
+   */
+  getUserPermissions(userRole) {
+    const permissions = [];
+
+    Object.entries(this.permissions).forEach(([resource, actions]) => {
+      Object.entries(actions).forEach(([action, roles]) => {
+        if (roles.includes(userRole)) {
+          permissions.push(`${resource}.${action}`);
+        }
+      });
+    });
+
+    // 添加自定义权限
+    Object.entries(this.customPermissions).forEach(([key, roles]) => {
+      if (roles.includes(userRole)) {
+        permissions.push(key);
+      }
+    });
+
+    return permissions;
+  }
+
+  /**
+   * 渲染权限管理界面（优化后）
+   */
+  renderPermissionManager(container, currentUser) {
+    if (currentUser.role !== 'admin') {
+      container.innerHTML = '<div class="error-state">只有管理员可以管理权限</div>';
+      return;
+    }
+
+    const roles = ['admin', 'user', 'guest'];
+    
+    container.innerHTML = `
+      <div class="permission-manager-modern">
+        <div class="settings-header-modern">
+          <div class="settings-icon-large">🔒</div>
+          <h2>权限管理</h2>
+          <p>配置不同角色的系统访问权限</p>
+        </div>
+
+        <div class="permission-tabs-modern">
+          ${Object.keys(this.permissions).map((resource, index) => `
+            <button class="permission-tab-btn ${index === 0 ? 'active' : ''}" 
+                    data-resource="${resource}">
+              <span class="tab-icon">${this.getResourceIcon(resource)}</span>
+              <span class="tab-label">${this.getResourceName(resource)}</span>
+            </button>
+          `).join('')}
+        </div>
+
+        <div class="permission-content-modern">
+          ${Object.entries(this.permissions).map(([resource, actions], index) => `
+            <div class="permission-tab-panel ${index === 0 ? 'active' : ''}" 
+                 data-resource="${resource}">
+              <div class="permission-section-header">
+                <h3>${this.getResourceIcon(resource)} ${this.getResourceName(resource)}权限</h3>
+                <p class="section-description">${this.getResourceDescription(resource)}</p>
+              </div>
+
+              <div class="permission-cards-grid">
+                ${Object.entries(actions).map(([action, allowedRoles]) => `
+                  <div class="permission-card">
+                    <div class="permission-card-header">
+                      <div class="action-icon">${this.getActionIcon(action)}</div>
+                      <div class="action-info">
+                        <h4>${this.getActionName(action)}</h4>
+                        <p>${this.getActionDescription(action)}</p>
+                      </div>
+                    </div>
+                    <div class="permission-card-body">
+                      <div class="role-permissions">
+                        ${roles.map(role => `
+                          <div class="role-permission-item ${allowedRoles.includes(role) ? 'active' : ''}">
+                            <label class="permission-checkbox-label">
+                              <input type="checkbox" 
+                                     class="permission-checkbox"
+                                     data-resource="${resource}"
+                                     data-action="${action}"
+                                     data-role="${role}"
+                                     ${allowedRoles.includes(role) ? 'checked' : ''}
+                                     ${role === 'admin' ? 'disabled' : ''}>
+                              <span class="checkbox-custom"></span>
+                              <span class="role-badge role-${role}">
+                                ${this.getRoleIcon(role)} ${this.getRoleName(role)}
+                              </span>
+                            </label>
+                          </div>
+                        `).join('')}
+                      </div>
+                    </div>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          `).join('')}
+        </div>
+
+        <div class="permission-actions-modern">
+          <button class="btn-primary-large" id="savePermissions">
+            <span>💾</span> 保存权限设置
+          </button>
+          <button class="btn-secondary-large" id="resetPermissions">
+            <span>🔄</span> 重置为默认
+          </button>
+        </div>
+      </div>
+    `;
+
+    // 添加权限管理样式
+    this.addPermissionStyles();
+
+    // 标签切换
+    container.querySelectorAll('.permission-tab-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const resource = btn.dataset.resource;
+        
+        container.querySelectorAll('.permission-tab-btn').forEach(b => b.classList.remove('active'));
+        container.querySelectorAll('.permission-tab-panel').forEach(c => c.classList.remove('active'));
+        
+        btn.classList.add('active');
+        container.querySelector(`.permission-tab-panel[data-resource="${resource}"]`).classList.add('active');
+      });
+    });
+
+    // 复选框切换效果
+    container.querySelectorAll('.permission-checkbox').forEach(checkbox => {
+      checkbox.addEventListener('change', (e) => {
+        const item = e.target.closest('.role-permission-item');
+        if (e.target.checked) {
+          item.classList.add('active');
+        } else {
+          item.classList.remove('active');
+        }
+      });
+    });
+
+    // 保存权限
+    container.querySelector('#savePermissions').addEventListener('click', () => {
+      const checkboxes = container.querySelectorAll('input[type="checkbox"]:not([disabled])');
+      
+      checkboxes.forEach(checkbox => {
+        const resource = checkbox.dataset.resource;
+        const action = checkbox.dataset.action;
+        const role = checkbox.dataset.role;
+        
+        if (!this.permissions[resource][action]) {
+          this.permissions[resource][action] = [];
+        }
+        
+        if (checkbox.checked) {
+          if (!this.permissions[resource][action].includes(role)) {
+            this.permissions[resource][action].push(role);
+          }
+        } else {
+          this.permissions[resource][action] = this.permissions[resource][action].filter(r => r !== role);
+        }
+      });
+
+      alert('权限设置已保存！');
+    });
+
+    // 重置权限
+    container.querySelector('#resetPermissions').addEventListener('click', () => {
+      if (confirm('确定要重置为默认权限设置吗？')) {
+        this.resetPermissions();
+        this.renderPermissionManager(container, currentUser);
+        alert('权限已重置为默认设置！');
+      }
+    });
+  }
+
+  /**
+   * 重置权限
+   */
+  resetPermissions() {
+    this.customPermissions = {};
+    this.saveCustomPermissions();
+  }
+
+  /**
+   * 获取资源名称
+   */
+  getResourceName(resource) {
+    const names = {
+      document: '文档',
+      group: '群组',
+      task: '任务',
+      file: '文件',
+      chat: '聊天',
+      system: '系统'
+    };
+    return names[resource] || resource;
+  }
+
+  /**
+   * 获取角色名称
+   */
+  getRoleName(role) {
+    const names = {
+      admin: '管理员',
+      user: '用户',
+      guest: '访客'
+    };
+    return names[role] || role;
+  }
+
+  /**
+   * 获取操作名称
+   */
+  getActionName(action) {
+    const names = {
+      create: '创建',
+      read: '查看',
+      update: '编辑',
+      delete: '删除',
+      share: '分享',
+      export: '导出',
+      invite: '邀请',
+      remove: '移除',
+      assign: '分配',
+      upload: '上传',
+      download: '下载',
+      send: '发送',
+      recall: '撤回',
+      mute: '禁言',
+      viewLogs: '查看日志',
+      manageUsers: '管理用户',
+      settings: '系统设置'
+    };
+    return names[action] || action;
+  }
+
+  /**
+   * 获取资源图标
+   */
+  getResourceIcon(resource) {
+    const icons = {
+      document: '📄',
+      group: '👥',
+      task: '📋',
+      file: '📎',
+      chat: '💬',
+      system: '⚙️'
+    };
+    return icons[resource] || '📦';
+  }
+
+  /**
+   * 获取资源描述
+   */
+  getResourceDescription(resource) {
+    const descriptions = {
+      document: '管理文档的创建、查看、编辑和删除权限',
+      group: '控制群组的创建、管理和成员邀请权限',
+      task: '设置任务的创建、分配和管理权限',
+      file: '配置文件的上传、下载和删除权限',
+      chat: '管理聊天消息的发送、撤回和禁言权限',
+      system: '控制系统级别的管理和配置权限'
+    };
+    return descriptions[resource] || '';
+  }
+
+  /**
+   * 获取操作图标
+   */
+  getActionIcon(action) {
+    const icons = {
+      create: '➕',
+      read: '👁️',
+      update: '✏️',
+      delete: '🗑️',
+      share: '🔗',
+      export: '📤',
+      invite: '📨',
+      remove: '❌',
+      assign: '👤',
+      upload: '⬆️',
+      download: '⬇️',
+      send: '📨',
+      recall: '↩️',
+      mute: '🔇',
+      viewLogs: '📊',
+      manageUsers: '👥',
+      settings: '⚙️'
+    };
+    return icons[action] || '🔹';
+  }
+
+  /**
+   * 获取操作描述
+   */
+  getActionDescription(action) {
+    const descriptions = {
+      create: '允许创建新内容',
+      read: '允许查看和访问',
+      update: '允许修改和更新',
+      delete: '允许删除内容',
+      share: '允许分享给他人',
+      export: '允许导出数据',
+      invite: '允许邀请新成员',
+      remove: '允许移除成员',
+      assign: '允许分配任务',
+      upload: '允许上传文件',
+      download: '允许下载文件',
+      send: '允许发送消息',
+      recall: '允许撤回消息',
+      mute: '允许禁言用户',
+      viewLogs: '允许查看系统日志',
+      manageUsers: '允许管理用户',
+      settings: '允许修改系统设置'
+    };
+    return descriptions[action] || '';
+  }
+
+  /**
+   * 获取角色图标
+   */
+  getRoleIcon(role) {
+    const icons = {
+      admin: '👑',
+      user: '👤',
+      guest: '👻'
+    };
+    return icons[role] || '👤';
+  }
+
+  /**
+   * 添加权限管理样式
+   */
+  addPermissionStyles() {
+    if (document.getElementById('permission-manager-styles')) return;
+
+    const style = document.createElement('style');
+    style.id = 'permission-manager-styles';
+    style.textContent = `
+      /* 权限管理现代化样式 */
+      .permission-manager-modern {
+        animation: fadeInUp 0.5s ease;
+      }
+
+      /* 权限标签页 */
+      .permission-tabs-modern {
+        display: flex;
+        gap: 12px;
+        margin-bottom: 30px;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+
+      .permission-tab-btn {
+        padding: 14px 24px;
+        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;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .permission-tab-btn:hover {
+        border-color: var(--primary);
+        transform: translateY(-3px);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.2);
+      }
+
+      .permission-tab-btn.active {
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        color: white;
+        border-color: var(--primary);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.3);
+      }
+
+      .tab-icon {
+        font-size: 20px;
+      }
+
+      .tab-label {
+        font-size: 15px;
+      }
+
+      /* 权限内容面板 */
+      .permission-content-modern {
+        position: relative;
+        min-height: 400px;
+      }
+
+      .permission-tab-panel {
+        display: none;
+        animation: fadeIn 0.3s ease;
+      }
+
+      .permission-tab-panel.active {
+        display: block;
+      }
+
+      /* 权限区域头部 */
+      .permission-section-header {
+        text-align: center;
+        padding: 30px 20px;
+        background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99,102,241,0.05) 100%);
+        border-radius: 16px;
+        margin-bottom: 30px;
+        border: 2px solid var(--border);
+      }
+
+      .permission-section-header h3 {
+        margin: 0 0 10px;
+        font-size: 24px;
+        font-weight: 800;
+        color: var(--text-primary);
+      }
+
+      .section-description {
+        margin: 0;
+        font-size: 15px;
+        color: var(--text-secondary);
+        line-height: 1.6;
+      }
+
+      /* 权限卡片网格 */
+      .permission-cards-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+        gap: 20px;
+        margin-bottom: 30px;
+      }
+
+      /* 权限卡片 */
+      .permission-card {
+        background: var(--bg-card);
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        padding: 20px;
+        transition: all 0.3s ease;
+      }
+
+      .permission-card:hover {
+        border-color: var(--primary);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.15);
+        transform: translateY(-5px);
+      }
+
+      .permission-card-header {
+        display: flex;
+        gap: 16px;
+        margin-bottom: 20px;
+        padding-bottom: 16px;
+        border-bottom: 2px solid var(--border);
+      }
+
+      .action-icon {
+        width: 50px;
+        height: 50px;
+        border-radius: 12px;
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        flex-shrink: 0;
+      }
+
+      .action-info {
+        flex: 1;
+      }
+
+      .action-info h4 {
+        margin: 0 0 6px;
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+
+      .action-info p {
+        margin: 0;
+        font-size: 13px;
+        color: var(--text-secondary);
+        line-height: 1.5;
+      }
+
+      /* 角色权限列表 */
+      .role-permissions {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .role-permission-item {
+        background: var(--bg-dark);
+        border: 2px solid var(--border);
+        border-radius: 10px;
+        padding: 12px;
+        transition: all 0.3s ease;
+      }
+
+      .role-permission-item:hover {
+        border-color: var(--primary);
+        transform: translateX(5px);
+      }
+
+      .role-permission-item.active {
+        border-color: var(--success);
+        background: linear-gradient(90deg, rgba(16,185,129,0.1) 0%, transparent 100%);
+      }
+
+      /* 自定义复选框 */
+      .permission-checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        cursor: pointer;
+        width: 100%;
+      }
+
+      .permission-checkbox {
+        display: none;
+      }
+
+      .checkbox-custom {
+        width: 24px;
+        height: 24px;
+        border: 2px solid var(--border);
+        border-radius: 6px;
+        background: var(--bg-card);
+        position: relative;
+        transition: all 0.3s ease;
+        flex-shrink: 0;
+      }
+
+      .permission-checkbox:checked + .checkbox-custom {
+        background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
+        border-color: var(--success);
+      }
+
+      .permission-checkbox:checked + .checkbox-custom::after {
+        content: '✓';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        font-size: 16px;
+        font-weight: 700;
+      }
+
+      .permission-checkbox:disabled + .checkbox-custom {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      /* 角色徽章 */
+      .role-badge {
+        padding: 8px 16px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 1;
+      }
+
+      .role-admin {
+        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+        color: white;
+      }
+
+      .role-user {
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        color: white;
+      }
+
+      .role-guest {
+        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
+        color: white;
+      }
+
+      /* 操作按钮区域 */
+      .permission-actions-modern {
+        display: flex;
+        gap: 16px;
+        justify-content: center;
+        margin-top: 40px;
+        flex-wrap: wrap;
+      }
+
+      .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;
+      }
+
+      /* 响应式 */
+      @media (max-width: 768px) {
+        .permission-tabs-modern {
+          flex-direction: column;
+        }
+
+        .permission-tab-btn {
+          width: 100%;
+          justify-content: center;
+        }
+
+        .permission-cards-grid {
+          grid-template-columns: 1fr;
+        }
+
+        .permission-actions-modern {
+          flex-direction: column;
+        }
+
+        .btn-primary-large,
+        .btn-secondary-large {
+          width: 100%;
+          justify-content: center;
+        }
+      }
+
+      /* 动画 */
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+// 导出单例
+export const permissionManager = new PermissionManager();
+
+