灵应
0e94adf7b6
Deploy / Build Production Runtime Images (push) Has been skipped
Deploy / Deploy Production (push) Has been skipped
Deploy / Production Browser E2E (push) Has been skipped
Deploy / Staging E2E Tests (push) Failing after 112h11m9s
Deploy / Deploy Staging (push) Failing after 112h12m49s
CI/CD Pipeline / Frontend Lint (push) Failing after 112h12m58s
CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 112h12m58s
颜色体系： - 边框统一 #1f1f30（原 #222/#2a2a4a/#1a1a2a） - 文字统一 #e8e8f0/#9ca3af/#4b5563（原 #e0e0e0/#888/#666/#555/#ccc） - 顶栏/底栏背景 #13131f（原 #161625） - 按钮/卡片背景 #1a1a2e（原 #1e1e2e） 尺寸收紧： - 按钮高度统一 28px（.ep-btn）/ 24px（.ep-btn-sm） - 圆角统一 4px（按钮/搜索框/chip/标签/卡片） - 搜索框高度 28px（原 30px） - 片段卡片高度 96px（原 100px） - 模板卡片圆角 6px（原 8px） 动画增强： - 模式栏下划线滑动动画 cubic-bezier(0.4, 0, 0.2, 1) - 按钮/卡片 hover 过渡统一 0.2s ease 新增样式： - .ep-cover-ai-btns / .ep-cover-ai-btn（AI 封面操作按钮） - .ep-playhead（播放头竖线 + 三角标记） - .ep-clip-track 轨道底色 - 滚动条颜色统一 #1f1f30 内联样式修复： - ClipPropertiesPanel 秒数标签 #666 → #4b5563
小虾 SaaS - 前端应用
基于 Vite + React 18 + TypeScript + Ant Design 的现代化 SaaS 前端应用。
快速开始
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览生产版本
npm run preview
技术栈
- 框架: React 18.3.1
- 语言: TypeScript 5.5.3
- 构建工具: Vite 5.3.1
- UI 组件库: Ant Design 5.18.0
- 路由: React Router 6.24.0
- 状态管理: Zustand 4.5.2
- 数据获取: React Query 5.45.0
- HTTP 客户端: Axios 1.7.2
- 表单: React Hook Form 7.52.0 + Zod 3.23.8
项目结构
src/
├── api/ # API 服务层
├── components/ # React 组件
│ ├── common/ # 通用组件
│ ├── layout/ # 布局组件
│ └── business/ # 业务组件
├── pages/ # 页面组件
│ ├── auth/ # 认证页面
│ ├── workspace/ # 工作空间
│ ├── subscription/# 订阅管理
│ ├── admin/ # Admin 后台
│ └── profile/ # 个人中心
├── hooks/ # 自定义 Hooks
├── store/ # 状态管理
├── router/ # 路由配置
├── types/ # TypeScript 类型
├── utils/ # 工具函数
└── styles/ # 全局样式
功能特性
- ✅ 用户认证（登录/注册/密码重置）
- ✅ 工作空间管理
- ✅ 成员管理和权限控制
- ✅ 订阅计划和升级
- ✅ 配额使用监控
- ✅ Admin 管理后台
- ✅ 个人设置和安全
- ✅ 响应式设计
环境变量
创建 .env 文件：
VITE_API_URL=http://localhost:8000
开发指南
添加新页面
- 在
src/pages/下创建页面组件 - 在
src/router/index.tsx中添加路由 - 确保导出
Component用于懒加载
添加新 API
- 在
src/api/下创建服务模块 - 定义 TypeScript 接口
- 使用
apiClient发起请求
状态管理
使用 Zustand 创建 Store：
import { create } from "zustand";
interface MyStore {
data: any;
setData: (data: any) => void;
}
export const useMyStore = create<MyStore>((set) => ({
data: null,
setData: (data) => set({ data }),
}));
部署
# 构建
npm run build
# 产物在 dist/ 目录
License
MIT