xianyan/.trae/rules/design-rules.md at 2a66f565cc5798b092f338f7c540cce403ea113f

Files

Developer 35202b51e8 feat: 闲言APP v0.9.1 — 编辑器全面重写 + 迷你编辑器

- 标准编辑器: freezed数据模型 + 5Tab工具栏 + 多图层管理 + 文字增强 + 背景系统 + 导出链路
- 迷你编辑器: 极简6项功能(文字/字号/颜色/背景/预览/导出) + 三种调用方式(全屏/半屏/内嵌)
- 共享组件: GlassSlider/ColorPicker/FontPicker/TipsView
- 服务层: ExportService/ImageImportService/FontService/XycardService
- 设计系统: 统一主题令牌 + Liquid Glass风格

2026-04-20 07:48:07 +08:00

3.4 KiB

Raw Blame History

alwaysApply

alwaysApply
true

设计系统 (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 提升界面亲和力（如 👍 表示点赞）。

布局规范 (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 组件，禁止各自实现布局。

组件与代码结构项目目录结构 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 便于追踪，上线前可移除。

架构优先：先分析整体布局，再给出修改计划，最后修改代码。
布局规则：flex/grid，无固定宽度，max-width容器，禁止横向溢出，响应式。
设计系统：必须使用统一CSS变量，禁止自定义颜色。
修改规则：如要改布局，必须整体重构，禁止只改局部组件。
代码结构：按 layout / components / pages / styles 组织。
通用建议

UI细节：按钮、卡片等组件统一圆角、阴影，营造精致感。

核心三句话 Layout First – 布局决定体验 Design System First – 变量统一风格 Plan Before Code – 计划先行，安全重构

3.4 KiB Raw Blame History Unescape Escape

3.4 KiB

Raw Blame History