mta-mcp 3.6.0 → 3.7.1

package/agents/flutter.agent.md

@@ -1,7 +1,7 @@
 # Flutter 开发代理
 
 > 此 Agent 引导 AI 通过 MCP 工具获取 npm 包中的详细规范
-> 版本: v3.5.0 | 最后更新: 2026-01-23
+> 版本: v3.6.0 | 最后更新: 2026-01-26
 
 ---
 
@@ -248,11 +248,24 @@ get_standard_by_id({ id: 'sketch-pitfalls' })
 
 | 关键点 | 说明 |
 |--------|------|
+| **布局选择** | 测量元素 Y/X 坐标，不同则用 `Stack + Positioned`，相同才用 `Row/Column` |
+| **还原原则** | 还原视觉效果，不是参数 - 参数正确不代表效果正确 |
 | **渐变色** | 检查 `fillType` 后读取 `gradient.stops`，勿直接用 `color` 属性 |
 | **全局样式** | 还原前先 grep 搜索项目现有 Token（颜色、圆角、阴影） |
 | **新拟态阴影** | 双阴影：右下深色 + 左上高光 |
 | **行高** | Flutter `height` 是比例值，非像素（如 24px/16px = 1.5） |
 
+### 🔴 布局选择原则（核心）
+
+**当同一行/列的元素有不同的 top/left 值时，必须使用 Stack + Positioned！**
+
+```
+❌ Row/Column: 强制元素对齐到同一轴线，丢失独立位置控制
+✅ Stack + Positioned: 每个元素可独立定位到设计稿指定位置
+```
+
+> 📖 **详细规范**：`get_standard_by_id({ id: 'design-restoration' })` → "布局选择原则" 章节
+
 ### 相关规范
 
 | 规范 | 调用方式 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mta-mcp",
-  "version": "3.6.0",
+  "version": "3.7.1",
   "description": "MTA - 智能编码助手 MCP 服务器（规范 + 技能 + 诊断 + 模板 + 记忆 + 思考）",
   "type": "module",
   "main": "./dist/index.js",

package/standards/workflows/design-restoration.md

@@ -143,6 +143,131 @@ CSS: line-height: 24px 或 line-height: 1.5
 
 ---
 
+## 🔴 布局选择原则（最高优先级）
+
+> **核心理念：还原的是视觉效果，不是参数**
+
+### 问题本质
+
+使用 `Row`、`Column`、`Flex` 等相对布局时，元素会被强制对齐到同一轴线，**失去独立的位置控制**。这导致即使测量数据正确，视觉效果仍然无法还原。
+
+### 🔴 判断标准（三种情况）
+
+#### 情况 1：元素 Y 坐标各不相同 → 完全使用绝对定位
+
+```
+测量结果：
+- 返回按钮: y=55
+- 标题: y=61  
+- 客服图标: y=41
+
+→ 三个元素 Y 值都不同，必须每个单独 Positioned
+```
+
+```dart
+// ✅ 正确：每个元素独立定位
+Stack(
+  children: [
+    Positioned(left: 0, top: 11, child: backButton),
+    Positioned(left: 0, right: 0, top: 17, child: title),
+    Positioned(right: 0, top: -3, child: serviceIcon),
+  ],
+)
+```
+
+#### 情况 2：元素 Y 坐标相同 → 绝对定位 Y + 相对布局处理宽度
+
+```
+测量结果：
+- 充值按钮: y=196, width=145
+- 提现按钮: y=196, width=145
+
+→ Y 值相同，但需要响应式宽度
+```
+
+```dart
+// ✅ 正确：外层 Positioned 定位 Y，内层 Row 处理宽度
+Positioned(
+  left: 16,
+  right: 23,
+  top: 96,  // 精确的 Y 坐标
+  child: Row(
+    children: [
+      Expanded(child: 充值按钮),  // 宽度自适应
+      SizedBox(width: 21),        // 固定间距
+      Expanded(child: 提现按钮),  // 宽度自适应
+    ],
+  ),
+)
+
+// ❌ 错误：每个按钮单独 Positioned + 固定宽度
+Positioned(left: 16, top: 96, child: SizedBox(width: 145, child: 充值按钮)),
+Positioned(left: 182, top: 96, child: SizedBox(width: 145, child: 提现按钮)),
+// 问题：无法响应式适配不同屏幕宽度！
+```
+
+#### 情况 3：纯垂直排列 + 水平居中 → 直接使用 Column
+
+```
+测量结果：
+- 图标容器: 水平居中
+- 标题: 水平居中
+- 描述: 水平居中
+- 按钮: 水平居中
+
+→ 所有元素水平居中，垂直排列
+```
+
+```dart
+// ✅ 正确：Column + Center，间距用 SizedBox
+Column(
+  children: [
+    SizedBox(height: 40),
+    iconContainer,
+    SizedBox(height: 20),
+    title,
+    SizedBox(height: 7),
+    description,
+    SizedBox(height: 16),
+    button,
+  ],
+)
+```
+
+### 完整判断流程
+
+```
+1. 测量同组元素的 Y 坐标
+   ├─ Y 坐标都不同 → 每个元素单独 Positioned
+   └─ Y 坐标相同 → 继续判断
+   
+2. 判断是否需要响应式宽度
+   ├─ 需要（如按钮、输入框）→ Positioned 定位 Y + Row/Expanded 处理宽度
+   └─ 不需要（固定尺寸元素）→ 可以直接 Row
+   
+3. 判断是否需要溢出
+   └─ 需要 → clipBehavior: Clip.none
+```
+
+### 常见错误
+
+| 错误 | 原因 | 正确做法 |
+|------|------|----------|
+| Y 相同的按钮用单独 Positioned | 无法响应式适配 | 外层 Positioned + 内层 Row/Expanded |
+| Y 不同的元素用 Row | 丢失独立 Y 坐标 | 每个元素单独 Positioned |
+| 全部用固定宽度 | 不同屏幕显示错误 | 使用 Expanded 或百分比 |
+
+### 框架语法映射
+
+| 场景 | Flutter | Vue/CSS | React |
+|------|---------|---------|-------|
+| 绝对定位容器 | `Stack` | `position: relative` | `position: relative` |
+| 绝对定位元素 | `Positioned` | `position: absolute` | `position: absolute` |
+| 水平均分 | `Row` + `Expanded` | `display: flex` + `flex: 1` | `display: flex` + `flex: 1` |
+| 固定间距 | `SizedBox(width: 21)` | `gap: 21px` | `gap: 21px` |
+
+---
+
 ## 🎨 颜色规范
 
 ### 颜色提取完整流程