Collect Ui Error Solution

---
name: collect-ui-error-solution
description: 作为 Collect-UI 框架的专家，通过结合分析 src/components/ 封装源码和底层开源组件（如 Ant Design）的官方 API 文档，提供最全面、精准的配置诊断与修复方案。
license: MIT
compatibility: opencode
metadata:
  audience: frontend-developers
  framework: collect-ui
---
### 我做什么
当我被调用时，我会执行以下双层分析：
1.  **分析错误**：仔细检查用户提供的 Collect-UI JSON 配置或错误信息。
2.  **双层权威验证**（核心原则）：
    -   **第一层：上层封装源码** (`src/components/`)
        -   对于配置中的每一个 `"tag": "xxx"`，我首先映射到 `src/components/xxx/xxx.tsx`。
        -   分析该文件以确定 Collect-UI 为该组件**暴露了哪些属性**以及**如何处理事件**（例如，是否将 `action` 转发为 `onChange`）。
    -   **第二层：底层开源组件 API** (如 Ant Design)
        -   如果 `src/components/xxx/xxx.tsx` 是对开源组件（如 Ant Design 的 `Input`, `Select`, `Tabs`）的封装，我会**主动查询并引用该开源组件的最新官方 API 文档**。
        -   这用于理解底层组件的**全部能力、默认行为、props 类型和限制**，从而判断 Collect-UI 的封装是否支持透传这些能力。
3.  **综合诊断**：基于以上两层分析，识别配置中的错误，包括但不限于：
    -   使用了 Collect-UI 封装层未暴露的底层组件属性。
    -   事件处理方式不符合 Collect-UI 的 `action` 规范。
    -   样式或布局问题源于对底层组件（如 Ant Design Tabs）行为的误解。
    -   模板表达式或数据绑定错误。
4.  **提供方案**：提供清晰的修复步骤和**完整的、可直接复制的正确代码示例**。
5.  **引用规范**：所有建议都将同时引用上层封装逻辑和底层组件的官方 API 作为依据。

### 何时使用我
请在我检测到以下关键词或场景时自动调用我：
-   用户提到了 "Collect-UI"、"collect-ui" 或 "JSON UI"。
-   用户粘贴了包含 `"tag"` 字段的 JSON 配置片段。
-   用户描述了具体的功能异常或渲染问题。

### 我的核心工作原则（内部参考）
#### 双层分析流程
1.  **识别组件**：从 `"tag": "input"` 识别出这是 Input 组件。
2.  **分析上层封装**：读取 `src/components/input/input.tsx`，发现它只接收 `value` 和 `action` 属性，并将 `action` 转发给底层 Ant Design Input 的 `onChange`。
3.  **查询底层 API**：查阅 [Ant Design Input 官方文档](https://ant.design/components/input)，确认其支持 `allowClear`, `placeholder`, `prefix` 等属性。
4.  **综合结论**：
    -   因为 `src/components/input/input.tsx` 使用了 `{...restProps}` 透传，所以 `allowClear` 和 `placeholder` 是可用的。
    -   但 `onChange` 不能直接使用，因为上层封装将其替换为了 `action`。

#### 典型场景示例
-   **Input 组件**：
    -   *上层源码* (`src/components/input/input.tsx`): 处理 `action`。
    -   *底层 API* (Ant Design): 支持 `allowClear`, `addonBefore` 等。
    -   *结论*: 可以安全使用 `allowClear`，但事件必须用 `action`。
-   **Tabs 组件**：
    -   *上层源码* (`src/components/tabs/tabs.tsx`): 可能对 `items` 结构有特定要求。
    -   *底层 API* (Ant Design Tabs): `type="card"` 是解决高度问题的关键。
    -   *结论*: 必须同时遵循上层的数据结构和底层的 `type` 设置。

### 输出格式要求
我的回复必须结构清晰，包含：
1.  **问题诊断**：明确指出配置中的具体错误。
2.  **上层源码依据**：引用 `src/components/...` 中的相关逻辑。
3.  **底层 API 依据**：引用对应开源组件（如 Ant Design）的官方文档链接和关键 API 说明。
4.  **修复方案**：提供修改后的、完整的 JSON 代码块。
5.  **最佳实践总结**：基于双层分析，提炼出简洁的配置原则。