advich-content-frontend

Content Management System

基于 React + TypeScript + Vite 构建的内容管理系统，集成 JeecgBoot 后台权限系统。

技术栈

• React 19 - UI 框架
• TypeScript - 类型安全
• Vite - 构建工具
• Contentful F36 - UI 组件库
• JeecgBoot - 后台权限系统

项目结构

src/
├── config/              # 配置文件
│   └── menuIds.ts      # 菜单ID配置
├── contexts/           # React Context
│   └── AuthContext.tsx # 权限上下文
├── hooks/              # 自定义Hooks
│   └── usePermission.ts # 权限Hook
├── layouts/            # 布局组件
│   ├── MainLayout.tsx
│   ├── Header.tsx
│   └── Sidebar.tsx
├── pages/              # 页面组件
│   └── ContentPage.tsx
├── components/         # 通用组件
│   └── common/
│       ├── EmptyState.tsx
│       ├── PermissionButton.tsx
│       └── PermissionWrapper.tsx
├── services/           # API服务层
│   ├── api.ts         # 系统API
│   ├── BaseService.ts # 基础服务类
│   ├── index.ts       # 统一导出
│   └── modules/       # 业务模块
│       ├── user.ts
│       ├── role.ts
│       └── content.ts
├── types/              # 类型定义
│   └── menu.ts
├── utils/              # 工具函数
│   └── request.ts     # 请求封装
└── examples/           # 使用示例
    ├── ApiUsage.tsx
    └── PermissionUsage.tsx

核心特性

1. 权限管理系统

• ✅ 动态菜单渲染
• ✅ 细粒度权限控制（view/add/edit/delete）
• ✅ 三种权限使用方式
  • PermissionButton 组件
  • PermissionWrapper 组件
  • usePermission Hook

2. 请求封装

• ✅ 参考 JeecgBoot 前端封装
• ✅ 自动 Token 管理
• ✅ 请求/响应拦截
• ✅ 统一错误处理
• ✅ 文件上传/下载
• ✅ 超时控制

3. 服务层封装

• ✅ BaseService 基类（CRUD）
• ✅ 分页查询
• ✅ 批量操作
• ✅ 导入/导出

快速开始

1. 安装依赖

pnpm install

2. 配置环境变量

复制 .env.example 为 .env：

cp .env.example .env

修改 API 地址：

VITE_API_BASE_URL=http://localhost:8080

3. 启动开发服务器

pnpm dev

4. 构建生产版本

pnpm build

使用文档

• 权限系统使用指南
• API 请求封装指南
• Vite 代理配置指南

使用示例

权限控制

import { usePermission } from "@/hooks/usePermission";
import PermissionButton from "@/components/common/PermissionButton";

function MyPage() {
  const permission = usePermission("user-management");

  return (
    <>
      {/* 方式1: 使用 Hook */}
      {permission.canAdd && <Button>新增</Button>}

      {/* 方式2: 使用组件 */}
      <PermissionButton menuId="user-management" action="edit">
        编辑
      </PermissionButton>
    </>
  );
}

API 请求

import { userService } from "@/services";

// 分页查询
const users = await userService.list({ pageNo: 1, pageSize: 10 });

// CRUD 操作
await userService.add({ username: "test" });
await userService.edit({ id: "1", username: "updated" });
await userService.delete("1");

// 导出
await userService.exportXls({}, "用户列表.xls");

开发规范

1. 组件组织

• layouts/ - 布局组件
• pages/ - 页面组件
• components/common/ - 通用组件

2. 服务层组织

• services/api.ts - 系统级 API
• services/modules/ - 按业务模块组织

3. 类型定义

• 所有接口都应该有类型定义
• 使用 TypeScript 严格模式

浏览器支持

• Chrome >= 90
• Firefox >= 88
• Safari >= 14
• Edge >= 90

License

MIT