Initial commit: Flutter 无书应用项目

.trae/rules/layout-rules.md

@@ -0,0 +1,364 @@
+---
+alwaysApply: false
+description: 
+---
+页面必须是响应式布局，不允许任何元素溢出屏幕。
+
+必须适配：
+- 手机
+- 平板
+- 桌面
+
+布局要求：
+
+1 所有元素使用 flex 或 grid 布局
+2 不允许使用固定宽度
+3 必须使用 max-width
+4 必须使用 box-sizing: border-box
+5 页面内容不能超出 viewport
+6 禁止 overflow-x
+
+所有图片必须：
+max-width:100%
+height:auto
+object-fit:cover
+
+页面内容必须考虑 header 高度，
+主体区域必须使用 padding-top。
+
+主体区域必须允许垂直滚动
+overflow-y:auto
+
+请编写一个现代前端页面。
+
+要求：
+
+1 页面必须是响应式布局
+2 所有屏幕尺寸必须适配
+3 不允许任何元素溢出屏幕
+4 必须使用 flex 或 grid 布局
+5 不允许使用固定宽度
+6 图片必须 max-width:100%
+7 页面必须适配手机、平板、桌面
+8 包含 media query (768px / 1024px)
+9 不允许出现 horizontal scroll
+10 所有组件必须保持在 viewport 内
+
+代码必须通过 Chrome responsive mode 测试，
+确保不会出现 overflow 或布局错位。
+
+所有页面必须有 container 容器
+max-width:1200px
+margin:auto
+padding:16px
+
+推荐结构 
+container
+header
+main
+section
+grid
+card
+foote
+
+
+| 你的规则                  | 行业术语                               | 说明     |
+| --------------------- | ---------------------------------- | ------ |
+| 所有元素用 flex/grid       | **Modern Layout System**           | 现代布局系统 |
+| 不使用固定宽度               | **Fluid Layout**                   | 流式布局   |
+| 使用 max-width          | **Content Container Pattern**      | 内容容器模式 |
+| box-sizing:border-box | **Universal Box Model Reset**      | 盒模型重置  |
+| 不能超出 viewport         | **Viewport Safe Layout**           | 视口安全布局 |
+| 禁止 overflow-x         | **Horizontal Overflow Prevention** | 防止横向滚动 |
+
+Responsive Layout Best Practices
+Modern Responsive UI Architecture
+
+| 你的说法 | 行业术语                              | 说明      |
+| ---- | --------------------------------- | ------- |
+| 大屏   | **Large Screen / Desktop Layout** | 桌面显示器   |
+| 小屏   | **Mobile Layout**                 | 手机      |
+| 折叠屏  | **Foldable Layout**               | 可折叠设备   |
+| 小窗   | **Windowed / Resizable Layout**   | 浏览器窗口缩放 |
+
+
+Responsive Web Design (RWD)
+
+过渡动画
+该页面必须实现响应式布局 (Responsive Layout)。
+
+适配以下 viewport：
+
+Mobile: 360px - 640px
+Tablet: 768px - 1024px
+Desktop: 1280px - 1920px
+Large Screen: >1920px
+
+要求：
+
+1 使用 flex 或 grid 布局
+2 不允许固定宽度
+3 使用 max-width 控制容器
+4 所有图片 max-width:100%
+5 页面禁止 horizontal overflow
+6 组件必须在小屏幕自动换行
+7 在小屏幕使用单列布局
+8 在大屏幕使用多列布局
+9 页面必须支持浏览器窗口缩放
+
+页面必须支持 foldable devices。
+
+当 viewport 在 600px - 900px 之间时：
+
+1 自动切换为双列布局
+2 避免关键元素位于屏幕中央折叠区域
+3 内容必须允许重新流式排列
+
+
+页面必须支持 foldable devices。
+
+当 viewport 在 600px - 900px 之间时：
+
+1 自动切换为双列布局
+2 避免关键元素位于屏幕中央折叠区域
+3 内容必须允许重新流式排列
+
+
+布局必须遵循 mobile-safe 和 desktop-safe 的响应式设计原则。
+
+生成一个现代响应式网页。
+
+要求：
+
+1 默认 viewport 为 desktop (1280px)
+2 页面必须支持 mobile、tablet、desktop
+3 使用 flex 或 grid 布局
+4 不允许固定宽度
+5 所有图片 max-width:100%
+6 不允许 horizontal overflow
+7 小屏幕自动单列布局
+8 大屏幕自动多列布局
+9 页面必须支持浏览器窗口缩放
+10 代码必须通过 Chrome responsive mode
+
+
+
+先架构，后页面；先设计系统，后组件；先计划，后改代码。
+
+🧠 一、AI 前端开发“终极总控 Prompt”
+
+你以后可以直接复制这个作为基础模板：
+
+你是资深前端架构师。
+
+本项目必须遵循以下原则：
+
+【架构优先】
+1. 先分析整体布局结构
+2. 先给出修改计划
+3. 再进行代码修改
+4. 禁止只修改局部组件而忽略整体布局
+
+【布局规则】
+1. 使用 flex 或 grid
+2. 不允许固定宽度
+3. 必须使用 max-width 容器
+4. 所有元素 box-sizing: border-box
+5. 禁止 horizontal overflow
+6. 页面必须支持窗口缩放
+7. 小屏自动单列，大屏多列
+
+【设计系统】
+必须遵循统一 design system：
+- 颜色
+- 字体
+- 间距
+- 圆角
+- 阴影
+- 按钮样式
+
+【修改规则】
+如果需要改布局：
+必须重构整体 layout，
+不能只修改一个组件。
+🏗 二、标准项目结构（强烈推荐）
+
+让 AI 按这个结构生成代码：
+
+/src
+  /layout
+  /components
+  /pages
+  /styles
+  /design-system
+
+Prompt 加一句：
+
+请按以下结构组织代码：
+layout / components / pages / styles。
+
+这样多个 AI 写的代码天然统一。
+
+🎨 三、统一风格（解决色调不一致）
+
+多个 AI 最大问题是：
+
+一个用蓝色
+
+一个用紫色
+
+一个按钮圆角不同
+
+一个阴影不同
+
+解决方法：强制使用设计系统。
+
+Prompt 加：
+
+所有页面必须使用统一设计系统变量，
+禁止自定义颜色。
+必须使用 CSS 变量或主题系统。
+
+例如：
+
+:root {
+  --primary: #2563eb;
+  --background: #f8fafc;
+  --text: #0f172a;
+}
+📱 四、响应式统一规则模板
+
+如果页面需要适配：
+
+移动端 + 平板 + 桌面
+
+加这段：
+
+必须使用响应式设计。
+
+断点：
+- 640px
+- 768px
+- 1024px
+- 1280px
+
+小屏幕：单列布局
+中屏幕：双列布局
+大屏幕：多列布局
+🪟 五、桌面专用页面模板
+
+如果某些页面 不需要响应式：
+
+该页面为 Desktop-only。
+
+设计基准：1280px。
+
+不需要 mobile 适配。
+不需要 media query。
+
+这样 AI 不会乱写。
+
+🔄 六、防止 AI 只改局部的“强制整体重构模板”
+
+这是你刚才说的核心问题。
+
+用这个：
+
+如果需要修改布局：
+
+1. 先分析当前整个页面结构
+2. 输出完整布局结构图
+3. 制定整体重构方案
+4. 然后一次性修改所有相关区域
+5. 禁止只修改单个组件
+
+这句话非常关键。
+
+🧩 七、强制布局骨架（最稳定方式）
+
+让 AI 必须使用这种结构：
+
+App
+ ├ Header
+ ├ Sidebar
+ ├ Main
+ └ Footer
+
+Prompt：
+
+页面必须采用标准 App Layout 结构。
+main 区域负责滚动。
+header 和 sidebar 为固定结构。
+🛑 八、禁止错误写法（必须写）
+禁止：
+- position: absolute 进行整体布局
+- 固定 px 宽度
+- overflow:hidden 用于解决布局问题
+- 使用 margin 负值修复结构
+🧱 九、AI 写页面的标准流程（最重要）
+
+以后让 AI 改布局，一定这样写：
+
+步骤：
+
+1. 分析当前布局
+2. 给出修改计划
+3. 等我确认
+4. 再修改代码
+
+这样可以避免：
+
+无限循环改局部
+
+进度为 0
+
+越改越乱
+
+🚀 十、真正专业团队的做法
+
+大型团队通常会：
+
+1️⃣ 先写 Design System
+2️⃣ 再写 Layout System
+3️⃣ 再写 Component Library
+4️⃣ 最后写 Pages
+
+AI 也必须按这个顺序。
+
+💎 十一、终极万能 Prompt（推荐收藏）
+
+你可以直接用这个：
+
+请作为高级前端架构师开发页面。
+
+要求：
+
+- 优先设计整体布局结构
+- 使用 flex/grid
+- 响应式设计
+- 使用统一设计系统
+- 不允许固定宽度
+- 不允许 horizontal overflow
+- 修改布局时必须整体重构
+- 不允许只改局部组件
+- 输出清晰结构
+- 代码必须可维护
+🎯 最后总结
+
+解决你所有问题的核心只有三句话：
+
+Layout First
+Design System First
+Plan Before Code
+
+只要做到这三点：
+
+不会溢出
+
+不会错位
+
+不会风格混乱
+
+不会局部修改失控
+
+多 AI 开发也能统一