119 lines
3.4 KiB
Markdown
119 lines
3.4 KiB
Markdown
---
|
||
alwaysApply: true
|
||
---
|
||
1. 设计系统 (Design System)
|
||
所有页面必须基于统一的设计令牌，禁止硬编码颜色、间距、圆角等。
|
||
|
||
设计变量 (CSS Variables)
|
||
css
|
||
:root {
|
||
/* 颜色 */
|
||
--primary: #; /* 主色 */
|
||
--secondary: #; /* 辅助色 */
|
||
--background: #; /* 背景 */
|
||
--text: #; /* 正文 */
|
||
|
||
/* 字体 */
|
||
--font-family: 'Inter', system-ui, sans-serif;
|
||
|
||
/* 间距 (4的倍数) */
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 16px;
|
||
--space-4: 24px;
|
||
--space-5: 32px;
|
||
|
||
|
||
/* 圆角 */
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
|
||
/* 阴影 */
|
||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||
}
|
||
统一风格要求 保持简洁
|
||
|
||
可适当使用毛玻璃效果（backdrop-filter: blur()）增强层次感。
|
||
|
||
圆角统一使用上述变量，避免零散定义。
|
||
|
||
尽量使用 emoji 提升界面亲和力（如 👍 表示点赞）。
|
||
|
||
2. 布局规范 (Layout Guidelines)
|
||
所有页面必须遵循响应式设计，确保在手机、平板、桌面及折叠屏上均无溢出、无横向滚动。
|
||
|
||
核心原则
|
||
使用 Flexbox 或 Grid 布局，禁止固定宽度。
|
||
|
||
容器必须设置 max-width（如 1200px）配合 margin: auto 居中。
|
||
|
||
全局设置 box-sizing: border-box。
|
||
|
||
禁止出现 overflow-x（除非必要且可控）。
|
||
|
||
图片：max-width: 100%; height: auto; object-fit: cover。
|
||
|
||
响应式断点
|
||
设备 视口宽度范围 布局策略
|
||
手机 360px – 640px 单列
|
||
平板 768px – 1024px 双列
|
||
桌面 1280px – 1920px 多列
|
||
大屏 >1920px 保持多列，容器居中
|
||
|
||
折叠屏适配 (600px – 900px)
|
||
自动切换双列布局。
|
||
|
||
避免关键内容置于屏幕中央折痕区域。
|
||
|
||
内容可重新流式排列（利用 order 或网格调整）。
|
||
|
||
页面骨架
|
||
|
||
Main 区域设置 overflow-y: auto，确保内部滚动。
|
||
|
||
所有页面必须使用统一 AppLayout 组件，禁止各自实现布局。
|
||
|
||
3. 组件与代码结构
|
||
项目目录结构
|
||
text
|
||
src/
|
||
├── layout/ # 布局组件 (AppLayout, Header, Footer)
|
||
├── components/ # 可复用UI组件 (Button, Card, Modal)
|
||
├── pages/ # 页面级组件
|
||
├── styles/ # 全局样式、设计令牌
|
||
├── services/ # API请求
|
||
├── hooks/ # 自定义逻辑
|
||
└── utils/ # 工具函数
|
||
编码规范
|
||
禁止：position: absolute 做整体布局、固定 px 宽度、使用负 margin 修补结构。
|
||
|
||
函数拆分：单一职责，每个函数不超过 30 行。
|
||
|
||
变量命名：语义化，如 isLiked 而非 flag。
|
||
|
||
删除重复代码：提取公共逻辑到 hooks 或 utils。
|
||
|
||
日志：关键操作（如点赞、API调用）添加 logger 便于追踪，上线前可移除。
|
||
|
||
|
||
1. 架构优先：先分析整体布局，再给出修改计划，最后修改代码。
|
||
2. 布局规则：flex/grid，无固定宽度，max-width容器，禁止横向溢出，响应式。
|
||
3. 设计系统：必须使用统一CSS变量，禁止自定义颜色。
|
||
4. 修改规则：如要改布局，必须整体重构，禁止只改局部组件。
|
||
5. 代码结构：按 layout / components / pages / styles 组织。
|
||
|
||
|
||
9. 通用建议
|
||
|
||
UI细节：按钮、卡片等组件统一圆角、阴影，营造精致感。
|
||
|
||
|
||
核心三句话
|
||
Layout First – 布局决定体验
|
||
Design System First – 变量统一风格
|
||
Plan Before Code – 计划先行，安全重构
|
||
|