first commit

README.md

@@ -0,0 +1,187 @@
+# 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