codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/85./346/234/200/344/275/263/345/256/236/350/267/265/200./347/273/204/344/273/266/350/265/204/344/272/247/347/224/237/346/210/220/345/244/232/345/234/272/346/231/257/350/220/275/345/234/260/350/267/257/345/276/204.md

@@ -0,0 +1,536 @@
+# 组件资产生成多场景落地路径
+
+## 高码转低码，优化组件需求落地
+
+以往，面对“开发全新组件”或“为现有组件新增功能”等需求时，绕不开“前端扩展开发”——也就是用高代码的方式把业务需求落地。以开发新组件为例，一套固定流程几乎必不可少：
+
+1.  **开发环境初始化**：部署传统开发集成环境，安装前端脚手架工具。
+2.  **项目与组件开发**：创建标准化项目，参照文件结构规范、用高代码完成组件功能开发。
+3.  **资产打包与部署**：执行打包流程生成扩展依赖库，上传至将平台资产中心。
+4.  **应用集成使用**：在目标应用中导入依赖库并配置启用。
+
+长期采用上述流程，在实际落地中逐渐显现四大痛点：
+
+- **开发者技术门槛高**：需熟练掌握传统前端开发技能，还需额外适配平台能力，成本高、对新手不友好。
+- **第三方资源适配性弱**：引入第三方库或调用本地资产需重新执行完整流程，操作负担重，难响应多样需求。
+- **操作流程易中断**：全流程涉及环境搭建、项目创建、开发、打包、部署等多环节，且关联性强，易因配置偏差、代码报错反复操作，打乱节奏、降低效率。
+- **问题解决缺乏指引**：遇环境适配、打包失败等问题时，无标准化排查路径，开发者需自行摸索，延长解决周期。
+
+基于对这些核心痛点的洞察，我们希望聚焦 “轻量化开发” 展开优化：其一，精简非必要步骤，减少流程性投入，帮助开发者专注于 “组件功能实现” 这一核心目标；其二，降低技术门槛与平台适配复杂度，避免开发者陷入流程细节，借助 AI 将功能想法落地为可用组件；再三，通过可视化设计重构开发全流程，让操作与结果直观可见。
+
+## 定调组件需求落地的四大场景
+
+在明确 “轻量化开发” 的核心目标后，我们进一步收集了不同业务场景下的用户诉求 —— 正是这些差异化需求，催生出了多样化的组件需求落地路径。为帮助开发者更清晰地匹配自身需求、高效推进组件开发，我们将这些落地路径梳理为以下四大核心方向，开发者可根据实际业务场景与功能诉求，直接选择适配的路径推进落地。
+
+### 场景一：全新定制化组件的开发
+
+#### **场景介绍**
+
+面对业务专属的特殊功能需求，现有第三方库与平台官方组件均无法满足，可以 “从零到一” 设计开发全新组件，通过深度贴合业务流程的定制化开发，构建能够精准支撑特殊功能需求的专属组件。
+
+**前置准备**
+
+1.  需求梳理：输出清晰的组件需求描述，明确组件需要实现的核心功能、交互逻辑，甚至异常处理规则。能有组件的 UI 设计图更佳；
+2.  技术方案规划：确定组件的开发框架。能有更详细的技术方案更佳；
+3.  技能掌握：该场景涉及的平台功能点为[智能组件资产生成](../25.智能开发/090.智能依赖库资产生成/012.智能前端组件资产生成.md)，建议查阅官方文档，理解完整功能介绍。该场景着重描述组件的开发流程，其他功能不再赘述。
+
+#### 实践思路
+
+<img src="../assets/zujianzichan_202509151651_1.png" class="imgStyle" style="" />
+
+1.  需求定义：输出 AI 可理解的组件需求描述，交叉核对需求描述是否完整覆盖 “功能 - 设计 - 交互 - 技术” 维度，避免遗漏关键细节，确保 AI 接收的需求信息准确无歧义。
+2.  代码生成与审核：AI 辅助撰写组件核心代码，检查 AI 生成的代码是否符合需求定义、是否没有代码错误。
+3.  编辑效果测试：对照需求与API可视化面板，检查功能是否完整；验证组件功能与交互完整性。
+4.  发布效果测试：将组件部署到预发布环境，模拟实际业务场景进行测试，保障组件上线后稳定可用。
+
+**实践场景介绍：制作一个分段控制器组件。**
+
+#### **操作步骤**
+
+##### 1. 代码生成与审核
+
+1.  进入在线创建资产界面。
+2.  将结构化后的需求描述提交给 AI 助手，并选择需要的代码生成框架。
+
+    <img src="../assets/zujianzichan_202509151651_2.png" class="imgStyle" style="" />
+
+    <details>
+        <summary title="点击展开完整示例描述">
+            点击展开完整示例描述
+        </summary>
+
+    ```markdown
+    我需要创建一个分段控制器组件（SegmentedControl），用于展示多个选项并支持用户在同一视图中切换其中一项。
+
+    分段控制器组件（SegmentedControl）为container容器类型组件，支持两种使用模式：≠
+    **1. 直接添加子组件模式**
+    - 父组件提供插槽，支持通过 IDE 的 "+" 按钮添加分段选项子组件。即启用structured模式，在插槽配置中添加snippets，提供添加分段选项的快捷操作。
+    - 子组件是分段选项SegmentedControlOption，不作为独立组件在组件面板显示。
+    - 子组件属性包括：
+        - `value` (选项值): string | number，选项标识。
+        - `label` (选项文本): string，选项显示文本。
+        - `disabled` (禁用): boolean，当前选项是否不可交互。
+    - 子组件的定义在父组件的`api.ts`文件中完成，不需要调用工具创建子组件。
+    - 在`block.stories.js`文件中生成分段控制器组件（SegmentedControl）拖拽到画布时的区块示例，要求示例默认包含三个通过 IDE 的 "+" 按钮添加的分段选项（SegmentedControlOption）。
+
+    **2. 动态数据源模式**
+    - 支持绑定数据源（dataSource）属性，可以是数组或返回数组的函数
+    - 父组件属性包括：
+        - `dataSource` (数据源): 定义分段控制器组件展示数据的输入源。
+        - `textField` (文本字段): string，绑定数据源后，可选择某个属性，用于动态获取属性值作为选项显示文本。
+        - `valueField` (值字段): string，绑定数据源后，可选择某个属性，用于动态获取属性值作为选项标识。
+        - `disabledField` (禁用字段): string，绑定数据源后，可选择某个属性，用于动态获取属性值作为选项的禁用判断。
+    - 支持重新加载数据源的 reload 方法
+
+    分段控制器组件（SegmentedControl）其他需求描述如下：
+    **组件属性：**
+    - `v-model` (绑定值): string | number，用于指定当前选中项的标识，与数据源中的值字段对应。支持双向绑定。
+    - `disabled` (禁用): boolean，整个组件是否不可交互。
+    - `shape` (形状): 'default' | 'round'，选项的边框形状。
+    - `direction` (排列方向): 'horizontal' | 'vertical'，控制选项的排列方向。
+    - `keyboardOperable` (是否支持键盘操作): boolean，是否支持通过左右箭头（水平方向）或上下箭头（垂直方向）切换选中项。
+
+    **组件事件：**
+    - `change`: 当选中项发生变化时触发，回调参数为当前选中项的值 (value: string | number)。
+    - `click`: 点击任意选项时触发，无论是否选中状态，回调参数为当前点击项的值 (value: string | number) 和事件对象 (event: Event)。
+
+    **交互逻辑：**
+    - 初始渲染时，根据 `v-model` 自动选中对应的选项，若 `v-model` 不存在于选项中，则默认选中第一个可用选项。
+    - 点击未选中的选项时，该选项变为选中状态，原选中项变为未选中状态，并触发 `change` 事件。
+    - 点击已选中的选项时，不会改变选中状态，但会触发 `click` 事件。
+    - 当选项设置为 `disabled` 时，点击该选项无任何反应，也不会触发任何事件。
+    - 当整个组件设置为 `disabled` 时，所有选项均不可点击，视觉上呈现禁用状态。
+    - 选中状态切换时应有明显的滑动过渡动画效果。
+
+    **视觉要求：**
+    - 组件整体样式与CloudUI主题变量保持一致，支持主题样式定制。
+    - 主题样式设置包括选中、悬浮、未选中三种状态的背景颜色和文字颜色，且三种状态的默认颜色需存在显著差异。
+
+    **其他：**
+    请在`examples.stories.js`文件中帮我生成几个分段控制器组件（SegmentedControl）的调试示例，包括数据源模式、圆角形状、垂直布局、禁用选项。
+    ```
+
+    </details>
+
+
+
+
+1.  按下回车键或点击“Enter“按钮开始创建资产，进入创建资产界面后等待代码生成。
+
+    <img src="../assets/zujianzichan_202509151651_3.png" class="imgStyle" style="" />
+
+    代码生成后，AI可能会提示生成的代码存在错误，直接点击“修复”按钮，AI将自动根据错误类型推断错误原因并执行修复。
+
+    <img src="../assets/zujianzichan_202509151651_4.png" class="imgStyle" style="width:300px" />
+
+1.  如果你曾经通过官方脚手架创建过组件资产，或者你已经通过“帮助文档”学习了高代码开发组件的方式，那么你可以逐一点击AI修改的文件，对比代码前后变化并确认。即使你不熟悉高代码开发，也可以直接通过预览效果的方式检验AI生成的结果是否符合预期，请继续阅读下文。
+
+    <img src="../assets/zujianzichan_202509151651_5.png" class="imgStyle" style="" />
+
+##### 2. 编辑效果测试
+
+1.  进入Api.ts可视化，检查需求描述中包含的属性、事件、插槽、方法等是否全部生成。为了更方便效果演示，可以暂时将AI助手收起，同时查看Api.ts和IDE编辑态预览。
+
+    <img src="../assets/zujianzichan_202509151651_6.png" class="imgStyle" style="width:300px" />
+
+    <img src="../assets/zujianzichan_202509151651_7.png" class="imgStyle" style="" />
+
+1.  该示例通过效果检验，发现AI助手已经基本根据需求描述 1:1 还原了分段控制器组件。如果发现效果不符，也可以直接在Api.ts可视化面板中编辑，编辑后会同步修改代码。
+
+    <details>
+        <summary title="点击展开本示例检验结果">
+            点击展开本示例检验结果
+        </summary>
+
+    - 共计1个组件，组件名称为SegmentedControl，组件标题为分段控制器，支持通过IDE 的 "+" 按钮添加分段选项子组件。
+
+        <img src="../assets/zujianzichan_202509151651_8.png" class="imgStyle" style="" />
+
+    - 分段控制器包含数据属性：绑定值、数据源、数据类型、文本字段、值字段、禁用字段，支持通过数据源模式动态渲染分段控制器；包含主要属性、交互属性等：形状（可选择默认或圆形）、排列方向（可选择水平或垂直）、是否支持键盘操作、禁用。
+
+        <img src="../assets/zujianzichan_202509151651_9.png" class="imgStyle" style="" />
+
+        <img src="../assets/zujianzichan_202509151651_10.png" class="imgStyle" style="" />
+
+    - 分段控制器还包含两个事件、一个插槽、一个方法。
+
+        <img src="../assets/zujianzichan_202509151651_11.png" class="imgStyle" style="" />
+
+    - 分段控制器默认在拖拽到IDE中时，包含三个子组件，子组件名称为SegmentedControl，子组件标题为分段选项。
+
+        <img src="../assets/zujianzichan_202509151651_12.png" class="imgStyle" style="" />
+
+    - 分段选项包含主要属性、状态属性：选项值、选项文本、禁用。
+
+        <img src="../assets/zujianzichan_202509151651_13.png" class="imgStyle" style="" />
+
+    </details>
+
+
+
+1.  由于示例中已经在创建代码时发送了``在`examples.stories.js`文件中生成几个分段控制器组件（SegmentedControl）的调试示例``的指令，因此我们还可以在“运行态预览”通过AI生成示例效果进行验证。
+
+    <img src="../assets/zujianzichan_202509151651_14.png" class="imgStyle" style="" />
+
+1.  如果提交给AI的描述有遗漏，或者AI生成的结果有错误，我们可以继续向AI发送指令，AI能够通过对话式交互持续调整功能细节。
+
+    <img src="../assets/zujianzichan_202509151651_15.png" class="imgStyle" style="" />
+
+##### 3. 发布效果测试
+
+1.  接下来，我们可以通过“调试发布”功能，将组件资产与一个可以正常使用的应用连接起来，检验应用中实际的使用效果和应用发布后的效果。填入需要调试的应用地址并确认调试发布即可。
+
+    <img src="../assets/zujianzichan_202509151651_16.png" class="imgStyle" style="" />
+
+1.  进入调试的应用地址，该应用中可以将调试中的组件视为常规组件，为其定义属性、添加事件、添加组件逻辑。尝试编辑这个组件，完成后点击“预览”，查看组件在实际制品应用中的效果。
+
+    <img src="../assets/zujianzichan_202509151651_17.png" class="imgStyle" style="" />
+
+1.  若组件功能已全部完成，即可返回资产创建界面，正式将组件资产发布为依赖库。发布预览效果如下：
+
+    - 点击选项时：选中值改变，触发“点击”事件和“选中改变”事件。
+    - 按下上下按键时：选中值改变，触发“选中改变”事件。
+
+    <img src="../assets/zujianzichan_202509151651_18.gif" class="imgStyle" style="" />
+
+### 场景二：官方组件的优化迭代
+
+#### **场景介绍**
+
+日常开发中常使用平台官方组件，但官方组件的默认属性无法完全适配当前业务场景，需在保留官方组件主体功能与稳定性的基础上，对组件属性进行轻量化调整与优化，实现 “小改动满足大需求”，避免从零开发的成本浪费。
+
+**前置准备**
+
+1.  文档与 API 熟悉：建议查阅平台官方组件文档，掌握目标组件的可配置API；
+2.  需求差异梳理：输出清晰的组件需求优化方案描述。能有参考图更佳。
+3.  技能掌握：该场景涉及的平台功能点为[智能组件资产生成](../25.智能开发/090.智能依赖库资产生成/012.智能前端组件资产生成.md)，建议查阅官方文档，理解完整功能介绍。该场景着重描述官方组件二次开发流程，其他功能不再赘述。
+
+#### 实践思路
+
+<img src="../assets/zujianzichan_202509151651_19.png" class="imgStyle" style="" />
+
+1.  选择已有组件二开：根据应用的组件库框架选择需要二开的组件，向输出 AI 组件需要补充的功能描述。
+2.  AI 生成结果校验：检查 AI 生成内容是否符合预期，可检查内容包括代码、可视化API、IDE预览。
+3.  编写测试用例：编写“运行态预览”的测试用例，检查功能实现的完整性。
+4.  发布效果测试：将组件部署到预发布环境，模拟实际业务场景进行测试，保障组件上线后稳定可用。
+
+**实践场景介绍：为官方CloudUI的单选组组件添加“可取消”属性，允许在点击已勾选的选项时清空选中值。**
+
+#### **操作步骤**
+
+##### 1. 选择已有组件二开
+
+1.  在创建应用时，支持选择组件库框架（Vue2、Vue3、React）以及相应的组件库。如果你在使用相应的组件库时发现组件需要二次开发，即可进入在线创建资产界面，选择组件并向 AI 描述需求。
+
+    <img src="../assets/zujianzichan_202509151651_20.png" class="imgStyle" style="width:300px" />
+
+1.  进入在线创建资产界面。
+2.  将需求描述提交给 AI 助手，并选择需要的代码生成框架。AI 能够通过对话式交互继续新增功能，如果需要新增多个功能，建议每次对话向 AI 提交一个需求，不仅可以加快 AI 的响应速度，也方便对每个功能单独测试、确认或撤销。
+
+    ```markdown
+    请为单选组组件添加Boolean类型属性`可取消`，开启属性时，允许在点击已勾选的单选项时清空选中值。
+    ```
+
+    <img src="../assets/zujianzichan_202509151651_21.png" class="imgStyle" style="" />
+
+##### 2. AI 生成结果校验
+
+1.  当我们每次提交一个需求时，AI 会反馈当前功能的具体实现步骤，更直观地体现出需求落地的完整链路，方便校验需求的合理性，及时调整设计。
+
+    <img src="../assets/zujianzichan_202509151651_22.png" class="imgStyle" style="" />
+
+1.  继续通过Api.ts可视化校验IDE中生成的结果。该面板支持设置组件的一些常用功能，如果在需求描述时没有提及，也可以直接在面板中编辑，编辑后会同步修改代码。例如打开“可取消”属性的“是否支持双向绑定”。
+
+    <img src="../assets/zujianzichan_202509151651_23.png" class="imgStyle" style="" />
+
+##### 3. 编写测试用例
+
+1.  如果上述校验结果不够直观，我们还可以为功能自定义一个实际运行效果的测试用例。AI 可能会自发地编写一些示例，如果没有，发送新的指令即可。
+
+    ```markdown
+    在`src/components/ex-u-radios/stories/example.stories.js`文件中帮我编写一个关于可取消属性的测试用例
+    我需要使用一个按钮控制可取消属性是否开启，并测试不同属性值状态下的单选组。
+    ```
+
+    <img src="../assets/zujianzichan_202509151651_24.png" class="imgStyle" style="" />
+
+1.  在运行态预览 -> 示例中找到测试用例。运行态的测试用例仅用于本地预览运行效果，不会影响发布后的组件使用。当前测试用例的测试效果如下：
+
+    - 开启“可取消”，选项可取消选中，选中值同步清空；
+    - 关闭“可取消”，选项不可取消选中，选中值不会清空。
+
+    <img src="../assets/zujianzichan_202509151651_25.gif" class="imgStyle" style="" />
+
+##### 4. 发布效果测试
+
+1.  为了确认组件资产二开后能够正常使用，我们可以再通过“调试发布”功能，连接一个可以正常使用的应用，检验应用中实际的使用效果和应用发布后的效果。填入需要调试的应用地址并确认调试发布即可。
+
+    <img src="../assets/zujianzichan_202509151651_26.png" class="imgStyle" style="" />
+
+1.  进入调试的应用地址，手动在应用中完成一个类似于“运行态预览”的测试用例，完成后点击“预览”，查看组件在实际制品应用中的效果。
+
+    <img src="../assets/zujianzichan_202509151651_27.png" class="imgStyle" style="" />
+
+1.  若组件功能已完成，即可返回资产创建界面，正式将组件资产发布为依赖库。发布预览效果如下：
+
+    <img src="../assets/zujianzichan_202509151651_28.gif" class="imgStyle" style="" />
+
+### 场景三：第三方库组件的平台引入
+
+#### 场景介绍
+
+日常开发中常使用成熟的第三方组件库，希望跳过重复开发步骤，将这些经过行业验证的外部组件资源快速接入平台，直接在平台应用中调用组件功能，同时确保第三方组件与平台原生能力兼容，实现高效复用。
+
+**前置准备**
+
+1.  开发环境配置：部署传统开发集成环境（如 IntelliJ IDEA、VS Code、Eclipse），确保可正常编写、调试前端代码；
+2.  工具与依赖准备：安装平台指定的前端脚手架工具（lcap），后续需要通过 npm、yarn 等包管理工具获取第三方组件库的官方包并适配平台能力；
+3.  技能掌握：该场景涉及的平台功能点为[第三方组件可视化接入](../40.扩展与集成/10.扩展开发方式/20.前端扩展开发/85.第三方组件可视化接入.md)，建议查阅官方文档，理解完整功能介绍。
+
+#### 实践思路
+
+<img src="../assets/zujianzichan_202509151651_29.png" class="imgStyle" style="" />
+
+1.  选择第三方组件包：确认需要引入的第三方组件库，借助前端脚手架工具，以命令行方式完成引入。
+2.  完成组件配置：唤起组件可视化接入面板，系统会自动识别第三方组件的API，对照API的能力将其分类并添加为平台内的属性、事件、插槽、方法等。
+3.  继续扩展开发：继续借助前端脚手架工具完成组件开发的其他步骤，包括属性声明、事件处理、功能调试、依赖库发布等。
+
+**实践场景介绍：将ElementUI组件包引入平台使用。**
+
+#### 操作步骤
+
+##### 1. 选择第三方组件包
+
+1.  打开任意传统开发集成工具，输入如下命令创建依赖库并引入第三方组件库。实际使用中请将 element-ui@latest 替换为真实需要的第三方组件库。
+
+    ```shell
+    lcap init --npm element-ui@latest
+    ```
+
+1.  根据提示进行操作，包括输入依赖库名称、选择包管理工具、选择需要引入的组件等。选择组件时支持多选，如有遗漏，后续可以在组件配置环节继续添加。
+
+    <img src="../assets/zujianzichan_202509151651_30.png" class="imgStyle" style="" />
+
+##### 2. 完成组件配置
+
+1.  首次完成组件添加后，将自动唤起组件配置面板。当前组件配置内容为空，需要手动添加。
+
+    <img src="../assets/zujianzichan_202509151651_31.png" class="imgStyle" style="" />
+
+1.  建议查阅第三方组件的官方组件文档，为组件完成配置。例如：查阅 [button](https://element.eleme.cn/#/zh-CN/component/button#attributes) 组件文档发现，size为string类型属性尺寸，可选值包含medium / small / mini，因此在样式属性中添加属性size，自定义设置标题和描述等信息，类似于类型、默认值和设置器等设置也能根据源代码自动识别。
+
+    <img src="../assets/zujianzichan_202509151651_32.png" class="imgStyle" style="" />
+
+##### 3. 继续扩展开发
+
+**组件配置**能够识别到第三方组件的API并提供可视化配置界面，用户可完成第三方组件与平台的兼容对接，大幅简化配置操作流程，但这样的操作方式并不是万能的。例如：
+
+- 平台官方组件中常见的“数据源”、“文本字段”等属性，并不属于第三方API；
+- 父组件的子组件无法被识别；
+- 无法主动添加props声明和事件处理，确保组件正确透传属性和事件；
+- 除了组件配置可视化之外，组件开发的其他步骤（例如发布依赖库、调试依赖库）仍保持与前端脚手架工具开发模式一致的操作流程。
+
+这导致接入第三方组件时不可避免地需要学习前端扩展开发，更适用于有前端扩展开发经验的技术人员。前端扩展开发文档参考：直接点击组件配置面板右上角“帮助文档”；或进入文档中心查看[前端扩展开发](../40.扩展与集成/10.扩展开发方式/20.前端扩展开发/10.前端扩展开发概述.md)相关文档。
+
+如果你是一个组件资产开发的新手用户，更推荐辅以 AI 实现功能，请阅读其他三种场景，或许能够尝试通过结合 AI 来引入第三方组件。
+
+### 场景四：本地高码组件的平台集成
+
+#### **场景介绍**
+
+本地已通过高代码开发完成成熟组件，希望跳过重新编码或重构环节，将本地组件资产直接接入平台，实现 “本地开发成果复用”，同时确保组件与平台原生能力兼容，保护即有开发投入。
+
+**前置准备**
+
+1.  组件包构建：在本地开发环境中，使用 `npm pack` 命令将本地组件项目打包为.tgz 格式的压缩包，确保包内包含组件的核心代码、依赖清单（package.json）、使用文档；
+2.  组件功能验证：本地测试组件的功能的稳定性，确认组件无报错；
+3.  技能掌握：该场景涉及的平台功能点为[智能组件资产生成](../25.智能开发/090.智能依赖库资产生成/012.智能前端组件资产生成.md)，建议查阅官方文档，理解完整功能介绍。该场景着重描述本地资产兼容到平台的流程，其他功能不再赘述。
+
+#### 实践思路
+
+<img src="../assets/zujianzichan_202509151651_33.png" class="imgStyle" style="" />
+
+1.  添加已有资产：解析NPM包内的组件，将需要的组件添加到资产源码中，并对齐组件能力与具体操作方法。
+2.  检查组件能力的集成情况：验证组件能力对齐情况，能力不符或能力缺失时继续补充功能描述。
+
+**实践场景介绍：解析[本地资产](https://lcap-static-saas-private.nos-eastchina1.126.net/app/capsule-radio-vue-0.1.1_cdn1_fut1763023284380_ai504ee5f2-d5f3-4566-8b8e-abb7955c2c8f_conlcap_file_group_0.tgz)并根据包内组件创建CapsuleRadio组件。**
+
+
+#### **操作步骤**
+
+##### 1. 添加已有资产
+
+1.  进入在线创建资产界面。
+2.  点击“添加已有资产“按钮并上传资产源码，再将组件的需求描述提交给 AI 助手，每次描述并生成一个组件。
+
+    <img src="../assets/shijian_202509171033_1.png" class="imgStyle" style="" />
+
+    <details>
+        <summary title="示例">
+            为提升 AI 理解效率，除添加资产文件外，还建议在描述中同步提供组件使用文档。点击展开完整示例描述
+        </summary>
+
+    ````markdown
+    请使用capsule-radio-vue中的 CapsuleRadio 组件，创建一个胶囊样式的单选组件，需求如下：
+
+    1. 支持传入选项数据数组，每个选项包含 label（显示文本）和 value（选项值）
+    2. 支持 v-model 双向绑定，可以设置和获取当前选中的值
+    3. 点击选项时触发选择事件，并更新选中状态
+    4. 采用胶囊样式设计，选中项有明显的视觉区分
+    5. 支持响应式数据变化，当选项数据或选中值改变时自动更新
+
+    capsule-radio-vue中的 CapsuleRadio 组件使用文档如下：
+
+    ## API 文档
+
+    ### Props
+    - `data` (Array): 选项数据数组，默认值为示例数据
+    - 数组项格式：`{ label: string, value: string }`
+    - 示例：`[{ label: "月销售统计", value: "month" }, { label: "年销售统计", value: "year" }]`
+    - `value` (String): 当前选中的值，支持 v-model
+
+    ### Events
+    - `change`: 选项改变时触发，参数为选中项的 value
+    - `update:value`: 用于 v-model 双向绑定
+
+    ### 样式特点
+    - 胶囊形状容器，圆角边框
+    - 选中项蓝色背景高亮
+    - 使用 CSS Modules 避免样式冲突
+
+    ## Demo 代码
+
+    ```vue
+    <template>
+    <div>
+        <!-- 基础用法 -->
+        <CapsuleRadio 
+        :data="options" 
+        :value="selectedValue"
+        @change="handleChange"
+        />
+        
+        <!-- 使用 v-model -->
+        <CapsuleRadio 
+        v-model:value="selectedValue"
+        :data="options"
+        />
+        
+        <!-- 自定义选项数据 -->
+        <CapsuleRadio 
+        :data="customOptions"
+        v-model:value="customValue"
+        />
+        
+        <p>当前选中值: {{ selectedValue }}</p>
+    </div>
+    </template>
+
+    <script>
+    import CapsuleRadio from './components/CapsuleRadio.vue'
+
+    export default {
+    components: {
+        CapsuleRadio
+    },
+    data() {
+        return {
+        selectedValue: 'month',
+        customValue: 'option1',
+        options: [
+            { label: "月销售统计", value: "month" },
+            { label: "年销售统计", value: "year" }
+        ],
+        customOptions: [
+            { label: "选项一", value: "option1" },
+            { label: "选项二", value: "option2" },
+            { label: "选项三", value: "option3" }
+        ]
+        }
+    },
+    methods: {
+        handleChange(value) {
+        console.log('选中值改变:', value)
+        this.selectedValue = value
+        }
+    }
+    }
+    </script>
+    ```
+    ````
+    </details>
+
+
+AI 会根据资产文件生成新的组件，Api.ts可视化面板中也支持添加NPM包内原本的组件。系统会自动识别NPM包内组件的API，支持手动在面板中配置，也支持切换到资产源码面板手动编写代码。
+
+该操作类似于[场景三](#场景三第三方库组件的平台引入)，但不同之处在于，可以引导 AI 助手帮助完成组件API的引入，并且 AI 助手还能自发地修复代码问题、编写测试用例。
+
+<img src="../assets/shijian_202509171033_2.png" class="imgStyle" style="" />
+
+##### 2. 检查组件能力的集成情况
+
+1.  尝试通过 IDE 编辑态预览、运行态预览和调试发布功能验证功能实现情况。若实现效果与预期不符，可向AI提供更详尽的功能描述，以助其准确理解需求，确保组件的属性、事件、插槽等不仅完成API定义，还能明确具体处理方式。
+
+    <img src="../assets/shijian_202509171033_3.png" class="imgStyle" style="" />
+
+1.  除了集成本地资产的能力之外，还可以继续向 AI 阐述新的需求，快速实现新功能。
+
+    <img src="../assets/shijian_202509171033_4.png" class="imgStyle" style="" />
+
+    > 关于预览、调试以及实现新功能的操作步骤，与[场景一](#场景一全新定制化组件的开发)和[场景二](#场景二官方组件的优化迭代)类似，请参考上文。
+
+1.  若组件功能已完成，即可点击界面右上角“发布”按钮，正式将组件资产发布为依赖库。
+
+
+## 常见问题
+
+### 需求描述不达标
+
+如果你在描述需求时忽略了格式与层级，或不擅长精准表达，只需在输入框中填写核心需求，点击“一键优化您的需求”，即可由 AI 为你完善和润色需求描述。
+
+<img src="../assets/zujianzichan_202509151651_39.png" class="imgStyle" style="" />
+
+### 不清楚AI助手的使用方法
+
+如果您未曾尝试过在线创建资产，或不擅长为 AI 助手撰写提示词，可先阅读《[资产接入 AI 助手使用指南](../25.智能开发/090.智能组件资产生成/020.资产接入AI助手使用指南.md)》，文档中梳理了 AI 助手的常规使用流程与实用技巧，或许能为您带来启发。
+
+### 不习惯在线编辑或频繁断连
+
+- 如果您因为不习惯于在线创建资产界面编辑资产源码或使用终端命令，您可以点击“连接本地环境“按钮，按照提示步骤操作连接到本地环境，使用熟悉的开发工具编辑和修改代码。
+- 如果您在创建资产过程中频繁出现连接断开问题，根源在于沙箱环境已达到资源上限。同样可以连接到本地环境，绕开沙箱资源不足的限制。
+
+连接后支持在线资产源码和本地同步。
+
+<img src="../assets/zujianzichan_202509151651_40.png" class="imgStyle" style="" />
+
+### AI 理解有偏差
+
+如果在表述功能需求时AI无法正确理解，可以尝试切换到“对话模式”，明确询问 AI 功能的具体实现方法，确认 AI 对需求的基础认知；再切换回编码模式，将更细化的需求描述（例如明确标注功能所需的配置项、参数定义、格式规范等关键信息）反馈给AI，助力 AI 更精准地输出符合预期的结果。
+
+<img src="../assets/zujianzichan_202509151651_41.png" class="imgStyle" style="width:300px" />
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">有鲤</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年09月15日</span>
+</div>
+
+<style>
+/* 折叠块加边框、背景色、边距 */
+  details {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 40px 10px 40px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  /* 折叠块标题不需要内边距 */
+  details summary {  
+    margin: 0 0 0 -20px;
+    font-weight: bold;
+    color: #679CF8;
+    cursor: pointer;
+  }
+  </style>