易搭低代码应用生成系统前端，一个基于 AI 的低代码应用创建与分享平台
Yida 易搭是一款低代码应用生成平台，集成 AI 能力，让用户可以轻松创建、管理和分享智能应用。平台提供可视化的工作台、丰富的应用案例展示、便捷的案例管理等功能。
| 特性 | 说明 |
|---|---|
| 🤖 AI 工作台 | 基于 @ant-design/x 的智能应用构建与对话能力 |
| 📦 应用案例 | 丰富的应用案例广场，支持点赞、评论、关注 |
| 🎨 可视化编辑 | 实时预览与应用可视化编辑 |
| 🔐 权限管理 | 完整的用户权限体系与审核流程 |
| 📱 响应式设计 | 移动端优先的 UI 设计，适配各种屏幕尺寸 |
| 🔄 状态管理 | Zustand + TanStack Query 统一状态管理 |
| 技术 | 版本 | 用途 |
|---|---|---|
| React | ^19.2.0 | UI 框架 |
| TypeScript | ^5.x | 类型安全 |
| Vite | ^7.x | 构建工具 |
| TailwindCSS | ^4.x | 原子化 CSS |
| React Compiler | ^1.0.0 | 自动优化渲染 |
| 技术 | 版本 | 用途 |
|---|---|---|
| Ant Design | ^6.3.5 | UI 组件库 |
| @ant-design/x | ^2.5.0 | AI 对话组件 |
| lucide-react | ^1.8.0 | 图标组件 |
| 技术 | 版本 | 用途 |
|---|---|---|
| TanStack Router | ^1.168.10 | 文件系统路由 |
| TanStack Query | ^5.97.0 | 数据请求与缓存 |
| Zustand | ^5.0.12 | 全局状态管理 |
| 技术 | 版本 | 用途 |
|---|---|---|
| Axios | ^1.15.0 | HTTP 请求 |
| Orval | ^8.7.0 | API 代码生成 |
| dayjs | ^1.11.20 | 日期处理 |
yida-web/
├── src/
│ ├── api/ # API 层
│ │ ├── generated/ # orval 生成的代码（禁止修改）
│ │ │ ├── endpoints/ # 接口调用代码
│ │ │ └── models/ # 接口相关类型定义
│ │ └── mutator/ # Axios 自定义实例
│ ├── assets/ # 静态资源
│ ├── components/ # 公共组件
│ ├── features/ # 功能模块
│ │ ├── about/ # 关于页面
│ │ ├── admin/ # 管理后台
│ │ │ └── pages/
│ │ │ ├── AdminLlmLogsPage.tsx
│ │ │ └── AdminUsersPage.tsx
│ │ ├── app-case/ # 应用案例
│ │ │ ├── components/
│ │ │ ├── pages/
│ │ │ ├── hooks/
│ │ │ ├── utils/
│ │ │ └── types.ts
│ │ ├── auth/ # 认证
│ │ │ └── pages/
│ │ │ ├── LoginPage.tsx
│ │ │ └── RegisterPage.tsx
│ │ ├── case-management/ # 案例管理
│ │ │ ├── components/
│ │ │ ├── pages/
│ │ │ ├── hooks/
│ │ │ └── utils/
│ │ ├── cases-square/ # 案例广场
│ │ │ ├── components/
│ │ │ ├── pages/
│ │ │ └── utils/
│ │ ├── home/ # 首页
│ │ │ ├── components/
│ │ │ ├── hooks/
│ │ │ └── pages/
│ │ ├── user/ # 用户中心
│ │ │ ├── components/
│ │ │ ├── pages/
│ │ │ ├── hooks/
│ │ │ ├── utils/
│ │ │ └── types.ts
│ │ └── workbench/ # 应用工作台
│ │ ├── components/
│ │ ├── pages/
│ │ ├── hooks/
│ │ ├── stores/
│ │ └── utils/
│ ├── layouts/ # 布局组件
│ │ ├── AdminLayout/ # 管理后台布局
│ │ ├── AuthLayout/ # 认证布局
│ │ ├── BasicLayout/ # 基础布局
│ │ └── PublicCaseDetailLayout/ # 公开案例详情布局
│ ├── routes/ # 路由定义（TanStack Router）
│ │ ├── __root.tsx # 根路由
│ │ ├── _basic/ # 基础路由组
│ │ └── _case-detail/ # 案例详情路由组
│ ├── libs/
│ │ ├── query-client.ts # TanStack Query 客户端
│ │ └── router.ts # 路由配置
│ ├── index.css # 全局样式
│ └── main.tsx # 应用入口
├── public/ # 公共静态资源
├── package.json # 项目依赖
├── tsconfig.json # TypeScript 配置
├── vite.config.ts # Vite 配置
└── README.md # 项目说明
- Node.js: >= 18
- pnpm: >= 8
# 克隆项目
git clone https://github.com/your-org/yida-web.git
cd yida-web
# 安装依赖
pnpm installpnpm devpnpm buildpnpm previewpnpm format # 格式化代码（Prettier）
pnpm format:check # 检查代码格式
pnpm ts:check # TypeScript 类型检查项目使用 Orval 根据 OpenAPI 规范自动生成 API 调用代码：
pnpm gen:api生成的代码位于 src/api/generated/ 目录，请勿手动编辑。
遵循 Feature-Based 模式：
- 页面组件放在
src/features/{feature}/pages/ - 业务组件放在
src/features/{feature}/components/ - 工具函数放在
src/features/{feature}/utils/ - 自定义 Hooks 放在
src/features/{feature}/hooks/
- 优先使用 Tailwind CSS v4 实现样式
- 图标组件库使用 lucide-react
- Tailwind 工具类可以覆盖 Ant Design 样式
自定义 Axios 配置位于 src/api/mutator/custom-instance.ts，可按需补充请求拦截器、响应拦截器等。
全局 Ant Design ConfigProvider 配置位于 src/main.tsx，可通过 theme.token 自定义主题 token，如字体大小、颜色等。
| 命令 | 说明 |
|---|---|
pnpm dev |
启动开发服务器 |
pnpm build |
构建生产版本 |
pnpm preview |
预览生产版本 |
pnpm format |
格式化代码 |
pnpm format:check |
检查代码格式 |
pnpm ts:check |
TypeScript 类型检查 |
pnpm gen:api |
生成 API 代码 |
pnpm test |
运行测试 |
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/amazing-feature) - 提交更改 (
git commit -m 'Add some amazing feature') - 推送到分支 (
git push origin feature/amazing-feature) - 创建 Pull Request
本项目采用 MIT 许可证。
Made with ❤️