11. 企业后台管理系统（technical-architecture）

1. 架构设计

2. 技术栈说明

• 前端: React@18 + Ant Design@5 + TypeScript + Vite
• 初始化工具: vite-init
• UI框架: Ant Design Pro (企业级UI组件库)
• 后端: Supabase (BaaS服务)
• 数据库: PostgreSQL (Supabase内置)
• 认证: Supabase Auth
• 文件存储: Supabase Storage
• 状态管理: React Context + useReducer
• 路由: React Router@6
• HTTP客户端: Supabase Client SDK

3. 路由定义

4. API 定义

4.1 认证 API

用户登录

POST /auth/v1/token?grant_type=password

Request:

Response:

{
  "access_token": "eyJhbGc...",
  "token_type": "bearer",
  "expires_in": 3600,
  "refresh_token": "eyJhbGc...",
  "user": {
    "id": "user-id",
    "email": "xxxxxxx@example.com",
    "role": "admin"
  }
}

用户注册

POST /auth/v1/signup

4.2 员工管理 API

获取员工列表

GET /rest/v1/employees

Query Parameters:

创建员工

POST /rest/v1/employees

Request Body:

{
  "name": "张三",
  "email": "zhangsan@example.com",
  "department_id": "dept-id",
  "position": "软件工程师",
  "phone": "xxxxxxx",
  "status": "active",
  "join_date": "2024-01-01"
}

4.3 部门管理 API

获取部门树

GET /rest/v1/departments?select=*&order=parent_id.asc.nullsfirst

创建部门

POST /rest/v1/departments

Request Body:

{
  "name": "技术部",
  "parent_id": "parent-dept-id",
  "manager_id": "manager-user-id",
  "description": "负责产品研发和技术创新"
}

4.4 审批 API

发起审批

POST /rest/v1/approvals

处理审批

PATCH /rest/v1/approvals?id=eq.approval-id

Request Body:

{
  "status": "approved",
  "comment": "同意申请",
  "processed_by": "user-id",
  "processed_at": "2024-01-15T10:00:00Z"
}

5. 服务器架构图

6. 数据模型

6.1 数据模型定义

6.2 数据定义语言 (DDL)

用户表 (users)

-- 创建用户表
CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR(255) UNIQUE NOT NULL,
  password_hash VARCHAR(255) NOT NULL,
  role VARCHAR(50) DEFAULT 'employee',
  status VARCHAR(20) DEFAULT 'active',
  last_login_at TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建索引
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_role ON users(role);

员工表 (employees)

-- 创建员工表
CREATE TABLE employees (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name VARCHAR(100) NOT NULL,
  email VARCHAR(255) UNIQUE NOT NULL,
  department_id UUID REFERENCES departments(id),
  position VARCHAR(100),
  phone VARCHAR(20),
  status VARCHAR(20) DEFAULT 'active',
  join_date DATE,
  manager_id UUID REFERENCES employees(id),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建索引
CREATE INDEX idx_employees_department ON employees(department_id);
CREATE INDEX idx_employees_status ON employees(status);
CREATE INDEX idx_employees_manager ON employees(manager_id);

部门表 (departments)

-- 创建部门表
CREATE TABLE departments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name VARCHAR(100) NOT NULL,
  parent_id UUID REFERENCES departments(id),
  manager_id UUID REFERENCES employees(id),
  description TEXT,
  sort_order INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建索引
CREATE INDEX idx_departments_parent ON departments(parent_id);
CREATE INDEX idx_departments_manager ON departments(manager_id);

审批表 (approvals)

-- 创建审批表
CREATE TABLE approvals (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  submitter_id UUID REFERENCES employees(id) NOT NULL,
  approver_id UUID REFERENCES employees(id),
  type VARCHAR(50) NOT NULL,
  title VARCHAR(200) NOT NULL,
  content TEXT,
  attachments JSONB,
  status VARCHAR(20) DEFAULT 'pending',
  comment TEXT,
  submit_time TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  process_time TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建索引
CREATE INDEX idx_approvals_submitter ON approvals(submitter_id);
CREATE INDEX idx_approvals_approver ON approvals(approver_id);
CREATE INDEX idx_approvals_status ON approvals(status);
CREATE INDEX idx_approvals_type ON approvals(type);

权限配置表 (permissions)

-- 创建角色表
CREATE TABLE roles (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name VARCHAR(50) UNIQUE NOT NULL,
  description TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建权限表
CREATE TABLE permissions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  role_id UUID REFERENCES roles(id),
  resource VARCHAR(100) NOT NULL,
  action VARCHAR(50) NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建用户角色关联表
CREATE TABLE user_roles (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id),
  role_id UUID REFERENCES roles(id),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建索引
CREATE INDEX idx_permissions_role ON permissions(role_id);
CREATE INDEX idx_permissions_resource ON permissions(resource);
CREATE INDEX idx_user_roles_user ON user_roles(user_id);
CREATE INDEX idx_user_roles_role ON user_roles(role_id);

权限设置

-- 授权匿名用户基本访问权限
GRANT SELECT ON departments TO anon;
GRANT SELECT ON employees TO anon;

-- 授权认证用户完整权限
GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO authenticated;
GRANT ALL PRIVILEGES ON ALL SEQUENCES IN SCHEMA public TO authenticated;

-- 创建行级安全策略
ALTER TABLE employees ENABLE ROW LEVEL SECURITY;
ALTER TABLE departments ENABLE ROW LEVEL SECURITY;
ALTER TABLE approvals ENABLE ROW LEVEL SECURITY;

-- 员工数据访问策略
CREATE POLICY "Employees can view own data" ON employees
  FOR SELECT USING (auth.uid() = id);

CREATE POLICY "Managers can view department employees" ON employees
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM departments 
      WHERE departments.id = employees.department_id 
      AND departments.manager_id = auth.uid()
    )
  );

7. 关键技术实现

7.1 RBAC权限控制

• 基于角色的访问控制模型
• 支持菜单级权限和数据级权限
• 动态权限验证，支持运行时权限变更
• 前端路由守卫和后端API权限双重验证

7.2 树形结构处理

• 部门管理采用邻接表模型存储树形结构
• 支持无限层级嵌套
• 提供递归查询获取完整树结构
• 支持拖拽调整部门层级关系

7.3 表格组件优化

• 基于Ant Design Table组件二次封装
• 支持虚拟滚动处理大数据量
• 集成搜索、筛选、排序、分页功能
• 支持列配置和自定义渲染

7.4 表单验证机制

• 统一的表单验证规则配置
• 支持同步和异步验证
• 实时验证反馈
• 错误信息国际化支持

7.5 数据缓存策略

• React Query进行服务端状态管理
• 智能缓存和失效策略
• 增量数据更新
• 离线数据支持

7.6 性能优化

• 代码分割和懒加载
• 图片和资源压缩
• CDN加速静态资源
• 接口请求合并和防抖处理