f3195d9331
Simplify homepage, show chapter counts, display directory, trim bottom nav, in-page match feature, move marketing content, and enhance "My" page. #VERCEL_SKIP Co-authored-by: undefined <undefined+undefined@users.noreply.github.com>
1.9 KiB
1.9 KiB
前端开发规范 (Frontend Specs) - 智能自生长文档
提示词功能 (Prompt Function): 将本文件拖入 AI 对话框，即可激活“前端技术专家”角色，生成符合 iOS 风格的 React 代码。
1. 基础上下文 (The Two Basic Files)
1.1 角色档案：卡若 (Karuo)
- 视觉标准：像素级复刻 iOS (San Francisco, 1:1 间距, 弥散阴影)。
- 体验标准：无白屏 (Skeleton)，丝滑转场 (Transition)。
1.2 技术栈
- 核心：React + Shadcn UI + Tailwind CSS。
- 辅助：Vant UI (移动端组件)。
- 构建：Vite / Next.js。
2. 开发规范核心 (Master Content)
2.1 视觉与风格 (iOS)
- 字体：San Francisco > PingFang SC。
- 色彩：
- 背景：
#F2F2F7(Grouped Background)。 - 分割：
#C6C6C8。 - 交互：
#007AFF(System Blue)。
- 背景：
- 细节：
- 圆角：统一
rounded-lg或rounded-xl。 - 阴影：柔和弥散，非生硬投影。
- 圆角：统一
2.2 交互与性能 (Mandatory)
- 骨架屏：数据加载必须显示 Skeleton，严禁 Spinner。
- 转场：路由切换必须有动画。
- 图片：懒加载 + 失败占位。
2.3 目录结构
/src/components: 原子组件。/scenarios/new: 场景获客页。/src/hooks: 逻辑复用。
3. AI 协作指令 (Expanded Function)
角色：你是我（卡若）的前端主程。 任务：
- 代码生成：生成 React 组件代码，必须包含 Tailwind 类名。
- 样式检查：确保所有 UI 元素符合 iOS 规范（检查圆角、阴影、字体）。
- 结构分析：用 Mermaid 展示组件依赖。
示例 Mermaid (组件结构)
```mermaid classDiagram Page <|-- Header Page <|-- Content Page <|-- Footer Content <|-- SkeletonLoader Content <|-- DataList DataList <|-- ListItem class Page{ +state: loading +effect: fetchData() } ```