codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/40./346/211/251/345/261/225/344/270/216/351/233/206/346/210/220/10./346/211/251/345/261/225/345/274/200/345/217/221/346/226/271/345/274/217/20./345/211/215/347/253/257/346/211/251/345/261/225/345/274/200/345/217/221/30./347/273/204/344/273/266/345/274/200/345/217/221/15./347/273/204/344/273/266/351/205/215/347/275/256/347/274/226/345/206/231/350/257/264/346/230/216.md

@@ -0,0 +1,339 @@
+# 组件配置编写说明
+
+<div class="yellowBlock">
+
+此文档仅简单介绍api.ts如何编写， 详细文档介绍请参考[View Component API 书写指南和规范](../30.组件开发/70.ViewComponentAPI书写指南和规范.md)。
+
+</div>
+
+api.ts用于组件的配置面板生成、应用翻译等，整体的格式参考如下:
+
+> 样例模板，不建议直接复制使用。
+
+```typescript
+/// <reference types="@nasl/types" />          // 引用 nasl 类型S
+
+namespace nasl.ui {  // 命名空间，基础组件库 nasl.ui, 依赖库 extensions.[LibrayName].viewComponents
+
+  /* 组件描述 */
+  @ExtensionComponent({
+    show: false,
+  })
+  @Component({
+    title: '按钮',
+    icon: 'button',
+    description: '常用的操作按钮。',
+  })
+  export class ElButton extends ViewComponent {         // 组件名称为 tag 的大驼峰，例如 el-button => ElButton
+    constructor(options?: Partial<ElButtonOptions>) {
+      super();
+
+      /* 提供调用方法描述 */
+      @Method({
+        title: '打开加载中',
+        description: '打开加载中',
+      })
+      startLoading(): void {}
+
+      @Method({
+        title: '关闭加载中',
+        description: '关闭加载中',
+      })
+      closeLoading(): void {}
+    }
+  }
+
+  export class ElButtonOptions extends ViewComponentOptions {  // 参数类名需要与 组件class 名称对齐， 例如 ElButton -> ElButtonOptions, ElSelect -> ElSelectOptions
+    /* 配置参数描述 */
+    @Prop({
+      group: '主要属性',
+      title: 'Size',
+      description: '尺寸',
+      setter: { concept: 'InputSetter' },
+    })
+    size: nasl.core.String;
+
+    /* 更多参数描述 */
+    
+    /* 事件描述 */
+    @Event({
+      title: '点击',
+      description: '在元素上按下并释放任意鼠标按钮时触发。',
+    })
+    onClick: (event: {
+      altKey: nasl.core.Boolean;
+      button: nasl.core.Integer;
+      clientX: nasl.core.Integer;
+      clientY: nasl.core.Integer;
+      ctrlKey: nasl.core.Boolean;
+      metaKey: nasl.core.Boolean;
+      movementX: nasl.core.Integer;
+      movementY: nasl.core.Integer;
+      offsetX: nasl.core.Integer;
+      offsetY: nasl.core.Integer;
+      pageX: nasl.core.Integer;
+      pageY: nasl.core.Integer;
+      screenX: nasl.core.Integer;
+      screenY: nasl.core.Integer;
+      which: nasl.core.Integer;
+    }) => any;
+
+    /* 插槽描述 */
+    @Slot({
+      title: 'default',
+      description: '内容',
+    })
+    slotDefault: () => Array<nasl.ui.ViewComponent>;
+  }
+}
+```
+
+api.ts 需要提供**组件描述**、**属性描述**、**事件描述**、**插槽描述**、**方法描述**五个方面，使用不同注解。以下分别详细解释这五个方面。
+
+## 1. 组件描述
+
+使用`@Component`来标注，用于组件面板识别排列。参考如下：
+
+- 自定义 icon 请参考文档[自定义组件面板图标​](../30.组件开发/60.IDE能力适配/30.自定义组件面板图标.md)；
+- 依赖库中的组件无需定义 group ，默认将依赖库名称作为其分组。
+
+
+```typescript
+@Component({
+  title: '按钮',                         // 组件显示名称
+  icon: 'button',                       // 组件显示图标 （平台内置）
+  description: '常用的操作按钮。',         // 组件描述
+  /**
+   * 组件分组，目前有
+   * Display 展示 Form 表单 Selector 选择器 Layout 布局
+   * Container 容器 Navigation 导航 Table 表格
+   */
+  group: 'Display',          // 依赖库使用 依赖库名称作为分组名称           
+})
+```
+
+<img src="../assets/peizhi_202411201455_1.png" class="imgStyle" style="width:400px" />
+
+## 2. 属性描述
+
+属性描述即参数配置，使用 `@Prop`来描述参数、渲染参数配置表单。参考如下：
+
+```typescript
+@Prop({
+// 分组，目前支持 '数据属性' | '主要属性' | '交互属性' | '状态属性' | '样式属性' | '工具属性'
+group: '主要属性',
+// 属性配置面板显示名称
+title: '尺寸',
+// hover 到名称上显示具体描述
+description: '尺寸',
+// 属性设置器，支持参数设置器，请查看 “属性设置器”
+setter: { },
+})
+size: nasl.core.String = 'small';  //  = ‘small’ 默认值 'small', nasl.core.String 参数类型，请查看“参数类型设置规范”
+```
+
+<img src="../assets/peizhi_202411201455_2.png" class="imgStyle" style="width:400px" />
+
+### 属性设置器
+
+定义属性的设计器（setter）时，支持参数设计器，大致分为以下几种：
+
+| 设置器名称                   | 说明         | 支持类型                                   | 效果图                                                                                                                                                                                                                                                    |
+| :---------------------- | :--------- | :------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| InputSetter             | 输入框设置器（默认） | any                                    | <img src="../assets/peizhi_202411201455_3.png" class="imgStyle" style="" />                                                                                                                            |
+| SwitchSetter            | 开关设置器      | nasl.core.Boolean                      | <img src="../assets/peizhi_202411201455_4.png" class="imgStyle" style="" />                                                                                                                            |
+| EnumSelectSetter        | 枚举选择设置器    | nasl.core.String（字符串枚举形式）              | <img src="../assets/peizhi_202411201455_5.png" class="imgStyle" style="" />                                                                                                                            |
+| CapsulesSetter          | 胶囊设置器      | nasl.core.String（字符串枚举形式）              | <img src="../assets/peizhi_202411201455_6.png" class="imgStyle" style="" />                                                                                                                            |
+| NumberInputSetter       | 数字输入设置器    | nasl.core.Integer \| nasl.core.Decimal | <img src="../assets/peizhi_202411201455_7.png" class="imgStyle" style="" />                                                                                                                            |
+| IconSetter              | 图标设置器      | nasl.core.String                       | <img src="../assets/peizhi_202411201455_8.png" class="imgStyle" style="" />                                                                                                                            |
+| ImageSetter             | 图片设置器      | nasl.core.String                       | <img src="../assets/peizhi_202411201455_9.png" class="imgStyle" style="" />                                                                                                                            |
+| PropertySelectSetter    | 属性选择设置器    | nasl.core.String                       | <img src="../assets/peizhi_202411201455_10.png" class="imgStyle" style="" />                                                                                                                            |
+| AnonymousFunctionSetter | 匿名函数设置器    | (...args) => any                       | <img src="../assets/peizhi_202411201455_11.png" class="imgStyle" style="" /><img src="../assets/peizhi_202411201455_12.png" class="imgStyle" style="" /> |
+
+**设计器 demo 参考：**
+
+```typescript
+Prop({
+  group: '主要属性',
+  title: '文本',
+  description: '按钮内容',
+  setter: { concept: 'InputSetter' },
+})
+text: nasl.core.String = '';
+@Prop({
+  group: '状态属性',
+  title: 'Disabled',
+  description: '是否禁用状态',
+  setter: { concept: 'SwitchSetter' },
+})
+disabled: nasl.core.Boolean = false;
+
+@Prop({
+  group: '主要属性',
+  title: '图标',
+  description: '图标类名',
+  setter: { concept: 'IconSetter' },
+})
+icon: nasl.core.String;
+
+@Prop({
+  title: '图标位置',
+  description: '设置图标居左或居右显示',
+  setter: {
+    concept: 'EnumSelectSetter',
+    options: [{ title: '左' }, { title: '右' }],
+  },
+})
+iconPosition: 'left' | 'right' = 'left';
+```
+
+<img src="../assets/peizhi_202411201455_13.png" class="imgStyle" style="width:400px" />
+
+<img src="../assets/peizhi_202411201455_14.png" class="imgStyle" style="width:400px" />
+
+### 属性类型设置规范
+
+使用api.ts属性描述，每个属性类型强制要求使用 nasl 提供的类型来写，支持类型如下：
+
+```typescript
+declare namespace nasl.core {
+    export type Any = any;
+    export type Boolean = boolean;
+    export type Integer = number;
+    export type Decimal = number;
+    export type String = string;
+
+    export class Binary {
+        accept: 'Binary';
+    }
+
+    export class Date { // 组件接收的是string 类型
+        accept: 'Date';
+    }
+
+    export class Time {// 组件接收的是string 类型
+        accept: 'Time';
+    }
+
+    export class DateTime {// 组件接收的是string 类型
+        accept: 'DateTime';
+    }
+}
+
+// 集合类型
+nasl.collection.List<T>
+
+// union 类型
+'small' | 'large' | 'medium'
+
+// 匿名数据结构
+{ list: nasl.collection.List<T>, total: nasl.core.Integer }
+```
+
+## 3. 事件描述
+
+使用`@Event`来标注支持的事件，需要注意以下几点：
+
+1.  事件名需要以on 开头的小驼峰，例如click 需要写为onClick，row-click需要写为onRowClick；
+2.  事件参数仅允许有一个参数event，多个参数的情况需要转为一个匿名结构对象, 例如onSelect(value, item)需要转换为 onSelect({ value, item })。具体请参考[事件转换](../30.组件开发/50.平台能力适配/50.事件转换.md)；
+3.  返回参数统一为void，匿名数据结构属性也必须使用 nasl 支持的类型；
+
+```typescript
+@Event({
+    title: '改变后',
+    description: '单选或多选值改变后触发',
+})
+onChange: (event: {
+    value: nasl.core.String;
+    values: nasl.collection.List<String>;
+    oldValues: nasl.collection.List<String>; 
+    items: nasl.collection.List<String>;
+}) => void;
+```
+
+## 4. 插槽描述
+
+使用`@Slot` 来描述组件插槽，插槽属性名以 slot 开头的小驼峰命名，例如默认插槽 slotDefault。
+
+```typescript
+export class XxxOptions extends ViewComponentOptions {
+  // ...
+  @Slot({
+      title: 'Default',
+      description: '内容',
+  })
+  slotDefault: () => Array<nasl.ui.ViewComponent>;
+}
+```
+
+<div class="highlight">
+
+具体请参考文档[插槽处理](../30.组件开发/50.平台能力适配/60.插槽处理.md)。
+
+</div>
+
+
+## 5. 方法描述
+
+使用`@Method`来描述组件提供的方法，如果有参数 则需要@Param对参数进行描述
+
+```typescript
+@Method({
+    title: '导出',
+    description: '导出 excel 文件',
+})
+exportExcel(
+    @Param({
+        title: '当前页码',
+        description: '当前页码',
+    })
+    page: nasl.core.Integer = 1,
+    @Param({
+        title: '每页条数',
+        description: '每页条数',
+    })
+    size: nasl.core.Integer = 2000,
+    // ... 
+): void {}
+```
+
+> 参数描述中的 title 和 description 在IDE中不可见，但仍然建议将其作为标识为参数补全。
+
+<img src="../assets/peizhi_202411201455_15.png" class="imgStyle" style="width:400px" />
+
+## 6. 子组件描述
+
+<div class="highlight">
+
+具体请参考文档[父组件和子组件](../30.组件开发/50.平台能力适配/70.父组件和子组件.md)。
+
+</div>
+
+
+
+<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);">2024年11月20日</span>
+</div>
+<style>
+ .highlight {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 20px 10px 20px;
+      margin-bottom:20px;
+      margin-top:20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+  .yellowBlock {
+    /* color: #FFFFFF; */
+    border-left-width: 0.5rem;
+    border-left-style: solid;
+    padding: 0.1rem 1.5rem;
+    margin:1rem 0;
+    background-color: #fcf5e1;
+    border-color: #eaaa08;
+  }
+  </style>

package/skills/smart-customer-service/docs/codewave/40./346/211/251/345/261/225/344/270/216/351/233/206/346/210/220/10./346/211/251/345/261/225/345/274/200/345/217/221/346/226/271/345/274/217/20./345/211/215/347/253/257/346/211/251/345/261/225/345/274/200/345/217/221/30./347/273/204/344/273/266/345/274/200/345/217/221/30./351/241/265/351/235/242/350/256/276/350/256/241/345/231/250/351/200/202/351/205/215/350/257/264/346/230/216/10./351/241/265/351/235/242/350/256/276/350/256/241/345/231/250/351/200/202/351/205/215/350/257/264/346/230/216.md

@@ -0,0 +1,114 @@
+# 页面设计器适配说明
+
+在IDE中，页面设计器是实现可视化拖拽与布局、配置属性、数据绑定、交互设计等的工具。
+
+在依赖库项目中，开发者可以通过在 api.ts 文件中配置 ideusage ，从而定制页面设计器接入组件后内置的翻译器行为。
+
+<img src="../assets/shejiqi_202411201513_1.png" class="imgStyle" style="" />
+
+设计器内部的翻译结果可以通过在控制台打印预览：
+
+通过在浏览器控制台输入 window.\_\_\$dev\_runtime\_\_ = true 来开启当前设计器内的代码输出，以便组件配置与目标代码进行比对。
+
+## 1. 前提条件
+
+- PC端 - IDE3.10以上版本
+- H5端 - IDE3.11以上版本
+- React 应用
+
+## 2. 组件配置说明
+
+接入的组件分为以下几种类型：
+
+- element (默认) ：无法再插入子节点的原子组件
+- container ：可以插入子节点的容器组件
+- modal ：弹窗类组件
+- drawer ：抽屉类组件
+- messager ：消息弹出类组件
+- popover ：一些弹出框类组件
+- router ：路由组件
+- board : 自由布局组件
+
+开发者可以通过配置 `idetype` 来指定组件的类型，以 element 类型为例：
+
+```typescript
+@ExtensionComponent({
+  ideusage: {
+    idetype: "element"
+  }
+}）
+```
+
+### 公用配置
+
+开发者可以为组件指定的公用配置如下：
+
+#### forceRefresh
+
+选配，定义组件在画布内移动后，强制刷新自己或者父组件。书写格式为：`"forceRefresh: "self"` 或 `"forceRefresh:"parent"` 。
+
+forceRefresh 是通过key值变化强制刷新页面上的组件，比如在数据表格 table-view 中，表格列 table-view-column 的顺序需要通过强制刷新 table-view 来改变。
+
+table-view-column的配置为：
+
+```typescript
+ "ideusage": {
+        "idetype": "container",
+        "forceRefresh": "parent",
+        ...
+ }
+```
+
+#### forceUpdateWhenAttributeChange
+
+选配，定义组件改变属性后是否强制刷新自己。书写格式为`"forceUpdateWhenAttributeChange": Boolean` 。
+
+forceUpdateWhenAttributeChange 同样是通过key值变化强制刷新页面上的组件。
+
+#### ignoreProperty
+
+选配，定义不需要翻译的属性。书写格式为`"ignoreProperty": Array[String]`，Array\[String]即属性名的数组。
+
+例如在表单组件的表单项上，为了避免在设计器里使用到验证规则导致报错，所以屏蔽了验证规则属性 rules 的翻译：
+
+```typescript
+ "ignoreProperty": ["rules"]
+```
+
+#### useWrapperInBoard
+
+选配，定义自由布局内是否使用div包裹。书写格式为`"useWrapperInBoard":Boolean`。
+
+#### defaultStyleInBoard
+
+选配，定义组件首次置入自由布局的样式。书写格式为`"defaultStyleInBoard"：Object`，Object为样式的键值对。
+
+例如图片组件首次拖入自由布局时的宽度为300px。
+
+```typescript
+ defaultStyleInBoard: {
+    width: "300px"
+  }
+```
+
+<img src="../assets/shejiqi_202411201513_2.png" class="imgStyle" style="" />
+
+### 组件配置
+
+具体组件配置说明请前往相应的文档查看：
+
+- [element 配置](../30.页面设计器适配说明/20.element配置说明.md)
+- [container 配置说明](../30.页面设计器适配说明/30.container配置说明.md)
+- [modal | drawer | messager 配置说明](../30.页面设计器适配说明/40.modal&drawer&messager配置说明.md)
+- [popover 配置说明](../30.页面设计器适配说明/50.popover配置说明.md)
+
+### API表达式说明
+
+配置项中使用表达式说明请参考[表达式API说明与示例](../30.页面设计器适配说明/60.表达式API说明与示例.md)。
+
+<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);">2024年11月20日</span>
+</div>