FCC Dashboard

一个为 兽展日历 定制的内容管理系统仪表板，用于管理展会、展商、地区等信息。

技术栈

• 前端框架: React 19 + TypeScript
• 构建工具: Rsbuild
• UI 组件库: Ant Design + Tailwind CSS
• 状态管理: Zustand + TanStack Query
• 表单处理: React Hook Form + Zod
• 路由: React Router 8 Data Mode（createBrowserRouter + RouterProvider）
• 样式: Tailwind CSS + PostCSS

开发环境要求

• Node.js 24 LTS
• Yarn 4

快速开始

1. 环境准备

确保你已经使用了正确的 Node.js 版本和 Yarn，如果不确定，请运行：

nvm use
corepack enable

2. 安装依赖

yarn install

3. 环境配置

创建环境变量文件（如需要）：

cp .env.example .env.local

4. 启动开发服务器

yarn dev

应用将在 http://localhost:3001 启动。

Rsbuild 2 默认仅监听本机。如需从局域网设备访问，运行 yarn dev --host 0.0.0.0。

5. 构建生产版本

yarn build

6. 预览生产版本

yarn preview

可用脚本

• yarn dev - 启动开发服务器（端口 3001）
• yarn build - 构建生产版本
• yarn preview - 预览生产版本
• yarn format - 格式化代码

组织创建接口

• 管理员和编辑均可创建组织，统一调用 POST /cms/organization；普通用户不显示新建入口，直接访问新建页面显示 403。
• 创建请求包含名称、Slug、状态及可选的类型、描述、联系邮箱、链接和创立日期；Slug 仅接受小写英文字母、数字和连字符，长度为 1–64。
• 创建时即可上传并裁剪组织头像，创建成功后进入编辑页面。创建操作不会自动授予创建者组织 Owner 身份。
• 后端已移除 POST /cms/organization/owned；已有组织的编辑权限仍由服务端检查。
• 管理员和编辑均可删除组织、审核组织认领，前端入口与后端平台内容权限保持一致。

路由与页面

路由在 src/routes.tsx 中显式配置，页面目录与路由路径对齐，页面文件统一使用简短小写命名（如 list.tsx、edit.tsx、manage.tsx、detail.tsx），页面私有组件归入同级 components/ 目录。页面通过 lazy 按需加载，新建和编辑路由可以复用同一个页面。

路由 API 从直接依赖 react-router 导入，浏览器入口的 RouterProvider 从 react-router/dom 导入。查询参数继续使用 nuqs 的 React Router v8 适配器。

构建工具仍为 Rsbuild，静态部署产物仍为 dist/。

项目结构

src/
├── api/              # API 调用相关
│   ├── auth/         # 认证相关 API
│   └── cms/          # CMS 业务 API
├── components/       # 可复用组件（按 kebab-case 业务/功能分子目录）
│   ├── common/       # 通用表单、表格、选择器组件
│   ├── guards/       # 路由权限守卫
│   └── layout/       # 全局布局与容器组件
├── consts/           # 常量配置
├── hooks/            # 自定义 Hooks
├── pages/            # 页面组件（与路由结构对齐）
│   ├── admin/        # 管理后台页面
│   ├── auth/         # 认证相关页面
│   ├── dashboard/    # 仪表盘业务页面
│   └── developer/    # 开发者应用页面
├── stores/           # 状态管理
├── types/            # TypeScript 类型定义（统一 camelCase）
├── utils/            # 工具函数
└── styles/           # 样式文件