# 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. 安装依赖

```bash
pnpm install
```

### 2. 配置环境变量

复制 `.env.example` 为 `.env`：

```bash
cp .env.example .env
```

修改 API 地址：

```bash
VITE_API_BASE_URL=http://localhost:8080
```

### 3. 启动开发服务器

```bash
pnpm dev
```

### 4. 构建生产版本

```bash
pnpm build
```

## 使用文档

- [权限系统使用指南](./docs/PERMISSION_GUIDE.md)
- [API 请求封装指南](./docs/API_GUIDE.md)
- [Vite 代理配置指南](./docs/PROXY_GUIDE.md)

## 使用示例

### 权限控制

```tsx
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 请求

```tsx
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