From 3cd4955634ad544c65db6afaa4c7cc0dd4f840c6 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Fri, 31 Oct 2025 11:24:27 +0800 Subject: [PATCH 1/3] feat/Add tinyvue knowledge base --- documents/tinyengine/CanvasFlexBox.md | 25 ++++++++ documents/tinyengine/breadcrumb.md | 39 +++++++++++++ documents/tinyengine/button.md | 33 +++++++++++ documents/tinyengine/carousel.md | 69 ++++++++++++++++++++++ documents/tinyengine/checkbox.md | 30 ++++++++++ documents/tinyengine/h1.md | 82 +++++++++++++++++++++++++++ documents/tinyengine/icon.md | 20 +++++++ documents/tinyengine/input.md | 34 +++++++++++ documents/tinyengine/radio.md | 29 ++++++++++ documents/tinyengine/seacrh.md | 30 ++++++++++ documents/tinyengine/select.md | 42 ++++++++++++++ documents/tinyengine/switch.md | 28 +++++++++ documents/tinyengine/tabs.md | 64 +++++++++++++++++++++ 13 files changed, 525 insertions(+) create mode 100644 documents/tinyengine/CanvasFlexBox.md create mode 100644 documents/tinyengine/breadcrumb.md create mode 100644 documents/tinyengine/button.md create mode 100644 documents/tinyengine/carousel.md create mode 100644 documents/tinyengine/checkbox.md create mode 100644 documents/tinyengine/h1.md create mode 100644 documents/tinyengine/icon.md create mode 100644 documents/tinyengine/input.md create mode 100644 documents/tinyengine/radio.md create mode 100644 documents/tinyengine/seacrh.md create mode 100644 documents/tinyengine/select.md create mode 100644 documents/tinyengine/switch.md create mode 100644 documents/tinyengine/tabs.md diff --git a/documents/tinyengine/CanvasFlexBox.md b/documents/tinyengine/CanvasFlexBox.md new file mode 100644 index 00000000..d2f3fdd0 --- /dev/null +++ b/documents/tinyengine/CanvasFlexBox.md @@ -0,0 +1,25 @@ +# CanvasFlexBox 组件生成 schema + +CanvasFlexBox 组件是一个弹性布局容器。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## CanvasFlexBox 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "CanvasFlexBox", + "props": { + "flexDirection": "row", + "gap": "8px", // 可通过 gap 属性调整间距 + "padding": "8px", // padding 属性调整内间距 + "className": "component-base-style", + "flexDirection": "row", // 通过对应的 flexDirection 属性，可以设置为对应的水平对齐方式。默认为 row（水平,起点在左端），可选值为 row（水平,起点在左端）、row-reverse（水平,起点在右端）、 column（垂直,起点在上沿）、column-reverse（垂直,起点在下沿）。 + "justifyContent": "space-around", // 通过对应的 justifyContent 属性，可以设置为对应的水平对齐方式。默认为 flex-start（左对齐），可选值为 flex-start（左对齐）、flex-end（右对齐）、 center（居中）、space-between（两端对齐，子元素间隔相等）、space-around（子元素两侧间隔相等）。 + "alignItems": "stretch" // 通过对应的 alignItems 属性，可以设置为对应的垂直对齐方式。默认为 center（交叉轴的中点对齐），可选值为 center（交叉轴的中点对齐）、flex-start（交叉轴的起点对齐）、flex-end（交叉轴的终点对齐）、baseline（以子元素第一行文字的基线对齐）、stretch（占满容器高度）。 + }, + "children": [], + "id": "236d76f3" +} +``` \ No newline at end of file diff --git a/documents/tinyengine/breadcrumb.md b/documents/tinyengine/breadcrumb.md new file mode 100644 index 00000000..c0802a24 --- /dev/null +++ b/documents/tinyengine/breadcrumb.md @@ -0,0 +1,39 @@ +# TinyVue breadcrumb 组件生成 schema + +TinyBreadcrumb是一个面包屑组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## breadcrumb 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "TinyBreadcrumb", + "props": { + "options": [ + { + "to": "{ path: '/' }", + "label": "首页" + }, + { + "to": "{ path: '/breadcrumb' }", + "label": "产品" + }, + { + "replace": "true", + "label": "软件" + } + ], + "className": "component-base-style", + "separator": ".", // 可通过 separator 属性设置面包屑中间的分隔符。 + "textField": "label", // 可通过 textField 属性设置面包屑的显示键值，结合options使用。 + "onSelect": { + "type": "JSExpression", + "value": "this.onSelectNew" + } // 面包屑的事件，包括 onSelect（选择 breadcrumb 时触发）、onClick（点击事件）、onChange（值被改变时触发）、onFocus（获得焦点时触发）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值 + }, + "children": [], + "id": "62815232" +} +``` \ No newline at end of file diff --git a/documents/tinyengine/button.md b/documents/tinyengine/button.md new file mode 100644 index 00000000..7b837280 --- /dev/null +++ b/documents/tinyengine/button.md @@ -0,0 +1,33 @@ +# TinyVue button 组件生成 schema + +TinyButton是一个按钮组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## button 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "TinyButton", + "props": { + "text": "按钮文案", + "className": "component-base-style", + "type": "primary", // 通过 type 设置按钮类型，可以设置为对应的类型。可选值为 primary、success、info、warning、danger和 text。 + "disabled": false, // 可通过 disabled 属性设置按钮是否禁用。 + "size": "large", // 可通过 size 属性设置尺寸大小，可选值：large / medium / small / mini。 + "round": true, // 可通过 round 属性设置按钮是否圆角。 + "plain": true, // 可通过 plain 属性设置按钮是否为朴素按钮。 + "reset-time": 2, // 可通过 reset-time 属性设置按钮禁用时间。可防止重复提交，单位毫秒 + "circle": false, // 可通过 circle 属性设置是否为圆形按钮。 + "autofocus": true, // 可通过 autofocus 属性设置是否自动聚焦。 + "loading": true, // 可通过 loading 属性设置是否加载中样式。 + "onUpdate:modelValue": { + "type": "JSExpression", + "value": "this.onUpdate_modelValueNew" + } // 按钮的事件，包括 onChange（值被改变时触发）、onInput（输入值改变时触发）、onUpdate:modelValue（双向绑定的值改变时触发）、onBlur（失去焦点时触发）、onFocus（获得焦点时触发）、onClear（点击清空按钮时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值 + }, + "children": [], + "id": "84331435" +} +``` \ No newline at end of file diff --git a/documents/tinyengine/carousel.md b/documents/tinyengine/carousel.md new file mode 100644 index 00000000..37321c81 --- /dev/null +++ b/documents/tinyengine/carousel.md @@ -0,0 +1,69 @@ +# TinyVue carousel 组件生成 schema + +TinyCarousel是一个走马灯组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 +componentName 为 TinyCarouselItem 的组件， 通过对应的 title 属性，可以设置标题。 通过对应的 name 属性，可以设置唯一标识， 通过对应的 indicator-position 属性，可以设置指示器位置。可选值为 outside 和 none。 + +## carousel 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "TinyCarousel", + "props": { + "height": "180px", // 设置走马灯的高度。 + "className": "component-base-style", + "arrow": "always", // 可以设置切换箭头的显示效果。默认值为 hover， 可选值为 always 、 hover 和 never。 + "autoplay": true, // 可以设置是否自动切换。 + "indicator-position": "outside", // 可以设置指示器位置。可选值为 outside 和 none。 + "initial-index": 0, // 可以设置初始状态激活的幻灯片的索引。 + "interval": 5000, // 可以设置自动切换的时间间隔，单位为毫秒。 + "loop": true, // 可以设置是否循环显示。 + "show-title": true, // 可以设置是否显示标题。 + "trigger": "hover", // 可以设置指示器的触发方式。默认值为 hover，可选值为 hover 和 click。 + "type": "card", // 可以设置走马灯的类型。默认值为 horizontal，可选值为 horizontal 、 vertical 和 card。 + "ref": "carousel", // 可以设置需要的ref引用类名。 + // 走马灯的事件，包括 onChange（值被改变时触发）、onFocus（获得焦点时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值 + "onClick": { + "type": "JSExpression", + "value": "this.onClickNew" + } + }, + "children": [ + { + "componentName": "TinyCarouselItem", + "props": { + "title": "carousel-item-a" + }, + "children": [ + { + "componentName": "div", + "props": { + "style": "margin:10px 0 0 30px" + }, + "id": "614d4146" + } + ], + "id": "2366c336" + }, + { + "componentName": "TinyCarouselItem", + "props": { + "title": "carousel-item-b" + }, + "children": [ + { + "componentName": "div", + "props": { + "style": "margin:10px 0 0 30px" + }, + "id": "1732256d" + } + ], + "id": "442457ef" + } + ], + "id": "231c8a63" +} +``` diff --git a/documents/tinyengine/checkbox.md b/documents/tinyengine/checkbox.md new file mode 100644 index 00000000..d54df410 --- /dev/null +++ b/documents/tinyengine/checkbox.md @@ -0,0 +1,30 @@ +# TinyVue checkout 组件生成 schema + +TinyCheckbox是一个多选框组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## checkout 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "TinyCheckbox", + "props": { + "text": "复选框文案", + "className": "component-base-style", + "disabled": false, // 可通过 disabled 属性设置复选框是否禁用。 + "checked": true, // 可通过 checked 属性设置复选框是否勾选。 + "text": "复选框文案", // 可通过 text 属性设置复选框的描述文本。 + "border": true, // 可通过 border 属性设置复选框是否有边框。 + "true-label": "真文本", // 通过 true-label 属性设置选中的值。 + "false-label": "假文本", // 通过 false-label 属性设置选中的值。 + "onUpdate:modelValue": { + "type": "JSExpression", + "value": "this.onUpdate_modelValueNew" + } // 复选框的事件，包括 onChange（值被改变时触发）、onUpdate:modelValue（双向绑定的值改变时触发）、onFocus（获得焦点时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值 + }, + "children": [], + "id": "e4636442" +} +``` diff --git a/documents/tinyengine/h1.md b/documents/tinyengine/h1.md new file mode 100644 index 00000000..6058f7e2 --- /dev/null +++ b/documents/tinyengine/h1.md @@ -0,0 +1,82 @@ +# Heading 组件生成schema + +## Heading 组件生成schema代码示例 + +### 基本用法 + +可配置 children 来展示对应的标题内容 + +```json +{ + "componentName": "h1", + "props": { + "className": "component-base-style" + }, + "children": "Heading", + "id": "3261c636" +} +``` + +### 标题类型 + +标题分为 h1（一级标题）、h2（二级标题）、h3（三级标题）、h4（四级标题）、h5（五级标题）、h6（六级标题），通过配置 componentName 生成对应的标题 + +```json +{ + "componentName": "h1", + "props": { + "className": "component-base-style" + }, + "children": "Heading", + "id": "3261c636" +} +``` + +### 设置样式 + +通过对应的 style 属性，可以设置需要的样式。 + +```json +{ + "componentName": "h1", + "props": { + "className": "component-base-style", + "style": "color: #f000f0;" + }, + "children": "Heading", + "id": "3261c636" +} +``` + +### 设置ref + +通过对应的 ref 属性，可以设置需要的ref引用类名。 + +```json +{ + "componentName": "h1", + "props": { + "className": "component-base-style", + "style": "color: #f000f0;", + "ref": "heading" + }, + "children": "Heading", + "id": "3261c636" +} +``` + +### id属性 + +通过对应的 id 属性，可以设置元素id值。 + +```json +{ + "componentName": "h1", + "props": { + "className": "component-base-style", + "id": "heading" + }, + "children": "Heading", + "id": "3261c636" +} +``` \ No newline at end of file diff --git a/documents/tinyengine/icon.md b/documents/tinyengine/icon.md new file mode 100644 index 00000000..c9a0179c --- /dev/null +++ b/documents/tinyengine/icon.md @@ -0,0 +1,20 @@ +# icon 组件生成schema + +Icon是一个图标组件。 +componentName为渲染时候的组件名称，props为组件绑定的属性，children为子组件列表，id为可以动态生成的唯一id。 + +## icon 组件生成schema代码示例 + +```json +{ + "componentName": "Icon", + "props": { + "name": "IconDel", + "className": "component-base-style", // 可通过 name 属性设置图标名称，IconDel（删除），IconChevronRight（向右），IconChevronLeft（向左），IconSmile（笑脸），IconMobileView（手机），IconTelephone（电话），IconLanguage（国际化），IcoSearch（搜索） + "style": "color: #f0f00f;" // 通过对应的 style 属性，可以设置需要的样式。 + }, + "children": [], + "id": "5e4451af" +} +``` + diff --git a/documents/tinyengine/input.md b/documents/tinyengine/input.md new file mode 100644 index 00000000..d67dfae2 --- /dev/null +++ b/documents/tinyengine/input.md @@ -0,0 +1,34 @@ +# TinyVue input 组件生成 schema + +TinyInput 是一个输入框组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## input 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "TinyInput", + "props": { + "placeholder": "请输入", + "modelValue": "", + "className": "component-base-style", + "clearable": true, // 可通过 clearable 属性设置输入框显示清空图标按钮 + "disabled": false, // 可通过 disabled 属性设置输入框是否禁用。 + "type": "text", // 通过对应的 type 属性，可以设置为对应的类型。默认为 text，可选值为 text、 textarea 和 password。 + "size": "medium", // 可通过 size 属性设置尺寸大小，可选值：medium / small / mini。注意： 只在type!="textarea"时有效。 + "modelValue": { + "type": "JSExpression", + "value": "this.state.inputData", + "model": true + }, // 通过配置对应的 modelValue 属性，modelValue中的value是设置文本的绑定值，取this.state下对应的参数值。 + "onUpdate:modelValue": { + "type": "JSExpression", + "value": "this.onUpdate_modelValueNew" + } // 输入框的事件，包括 onChange（值被改变时触发）、onInput（输入值改变时触发）、onUpdate:modelValue（双向绑定的值改变时触发）、onBlur（失去焦点时触发）、onFocus（获得焦点时触发）、onClear（点击清空按钮时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值 + }, + "children": [], + "id": "12731335" +} +``` \ No newline at end of file diff --git a/documents/tinyengine/radio.md b/documents/tinyengine/radio.md new file mode 100644 index 00000000..81a6f399 --- /dev/null +++ b/documents/tinyengine/radio.md @@ -0,0 +1,29 @@ +# TinyVue radio 组件生成 schema + +TinyRadio是一个单选框组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## radio 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "TinyRadio", + "props": { + "label": "1", + "text": "单选文本", // 可通过 text 属性设置文本内容， label 属性设置选中值 + "className": "component-base-style", + "disabled": true, // 可通过 disabled 属性设置单选框是否禁用。 + "border": true, // 可通过 border 属性设置是否显示边框。 + "size": "medium", // 可通过 size 属性设置尺寸大小，可选值：medium / small / mini。 + "name": "radio", // 可通过 name 属性设置 原生name属性 + "onUpdate:modelValue": { + "type": "JSExpression", + "value": "this.onUpdate_modelValueNew" + } // 单选框的事件，包括 onChange（值被改变时触发）、onUpdate:modelValue（双向绑定的值改变时触发）、onFocus（获得焦点时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值 + }, + "children": [], + "id": "26723552" +} +``` diff --git a/documents/tinyengine/seacrh.md b/documents/tinyengine/seacrh.md new file mode 100644 index 00000000..58a53090 --- /dev/null +++ b/documents/tinyengine/seacrh.md @@ -0,0 +1,30 @@ +# TinyVue search 组件生成 schema + +TinySearch是一个搜索框组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## search 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "TinySearch", + "props": { + "modelValue": "", + "placeholder": "输入关键词", + "className": "component-base-style", + "disabled": true, // 可通过 disabled 属性设置输入框是否禁用。 + "clearable": true, // 可通过 clearable 属性设置输入框显示清空图标按钮 + "isEnterSearch": true, // 可通过 isEnterSearch 属性设置是否在按下键盘Enter键的时候触发search事件 + "mini": true, // 可通过 mini 属性设置迷你模式，配置为true时，搜索默认显示为一个带图标的圆形按钮，点击后展开 + "ref": "search", // 通过对应的 ref 属性，可以设置需要的ref引用类名 + "onUpdate:modelValue": { + "type": "JSExpression", + "value": "this.onUpdate_modelValueNew" + } // 搜索框的事件，包括 onChange（值被改变时触发）、onSearch（点击搜索按钮时触发）、onClick（点击事件）、onFocus（获得焦点时触发）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值 + }, + "children": [], + "id": "56121254" +} +``` diff --git a/documents/tinyengine/select.md b/documents/tinyengine/select.md new file mode 100644 index 00000000..f78cb4af --- /dev/null +++ b/documents/tinyengine/select.md @@ -0,0 +1,42 @@ +# TinyVue select 组件生成 schema + +TinySelect是一个选择器组件 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## select 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "TinySelect", + "props": { + "modelValue": "", + "placeholder": "请选择", + "options": [ + { + "value": "1", + "label": "黄金糕" + }, + { + "value": "2", + "label": "双皮奶" + } + ], + "className": "component-base-style", + "clearable": true, // 可通过 clearable 属性设置下拉框显示清空图标按钮 + "searchable": true, // 可通过 searchable 属性设置下拉框是否下拉可搜索 + "disabled": false, // 可通过 disabled 属性设置下拉框是否禁用 + "multiple": false, // 可通过 multiple 属性设置下拉框是否禁用 + "multiple-limit": 2, // 可通过 multiple-limit 属性设置下拉框最大可选值，多选时用户最多可以选择的项目数，为 0 则不限制 + "collapse-tags": true, // 可通过 collapse-tags 属性设置下拉框多选时是否将选中值按文字的形式展示 + "popper-class": "select", // 可通过 popper-class 属性设置下拉框类名 + "onUpdate:modelValue": { + "type": "JSExpression", + "value": "this.onUpdate_modelValueNew" + } // 下拉框的事件，包括 onChange（值被改变时触发）、onUpdate:modelValue（双向绑定的值改变时触发）、onBlur（失去焦点时触发）、onFocus（获得焦点时触发）、onClear（点击清空按钮时触发）、onRemoveTag（多选模式下移除tag时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值 + }, + "children": [], + "id": "2446244a" +} +``` diff --git a/documents/tinyengine/switch.md b/documents/tinyengine/switch.md new file mode 100644 index 00000000..e589ae64 --- /dev/null +++ b/documents/tinyengine/switch.md @@ -0,0 +1,28 @@ +# TinyVue switch 组件生成 schema + +TinySwitch是一个开关组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## switch 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "TinySwitch", + "props": { + "modelValue": "", + "className": "component-base-style", + "disabled": false, // 可通过 disabled 属性设置开关是否禁用。 + "true-value": "yes", // 通过 true-value 属性设置打开值。 + "false-value": "no", // 通过 false-value 属性设置关闭值。 + "mini": true, // 可通过 mini 属性设置小尺寸开关。 + "onUpdate:modelValue": { + "type": "JSExpression", + "value": "this.onUpdate_modelValueNew" + } // 开关的事件，包括 onChange（值被改变时触发）、onUpdate:modelValue（双向绑定的值改变时触发）、onFocus（获得焦点时触发）、onClick（点击事件）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值 + }, + "children": [], + "id": "e2642249" +} +``` diff --git a/documents/tinyengine/tabs.md b/documents/tinyengine/tabs.md new file mode 100644 index 00000000..296fde8e --- /dev/null +++ b/documents/tinyengine/tabs.md @@ -0,0 +1,64 @@ +# TinyVue tabs 组件生成 schema + +TinyTabs是一个页签组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## tabs 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "TinyTabs", + "props": { + "id": "tabs1", + "modelValue": "first", // 该字段必须有，可通过 modelValue 属性设置默认展示的标签页项 + "className": "component-base-style", + "showEditIcon": true, // 可通过 showEditIcon 属性设置是否显示编辑图标。 + "tab-style": "card", // 通过对应的 tab-style 属性，可以设置为对应的标签页样式。默认为 空 ，可选值为 card、border-card 和清空所选值。 + "ref": "tabs", // 通过对应的 ref 属性，可以设置需要的ref引用类名。 + "onClick": { + "type": "JSExpression", + "value": "this.onClickNew" + } // 标签页的事件，包括 onClick（点击事件）、onEdit（点击新增按钮或关闭按钮或者编辑按钮后触发）、onClose（关闭页签时触发）、onChange（值被改变时触发）、onFocus（获得焦点时触发）、onMousemove（鼠标移动时触发），添加对应的事件类型为当前属性，value值绑定事件名，取对应的参数值 + }, + // 通过对应的 children 属性，在 children 下新增一个子组件 TinyTabItem。componentName 为 TinyTabItem 的组件， 通过对应的 title 属性，可以设置标题。 通过对应的 name 属性，可以设置唯一标识 + "children": [ + { + "componentName": "TinyTabItem", + "props": { + "title": "标签页1", + "name": "first" // 该字段必须有，可通过 name 属性与父级 modelValue 属性对应，展示对应的标签页项 + }, + "children": [ + { + "componentName": "div", + "props": { + "style": "margin:10px 0 0 30px" + }, + "id": "216721a4" + } + ], + "id": "15556232" + }, + { + "componentName": "TinyTabItem", + "props": { + "title": "标签页2", + "name": "second" + }, + "children": [ + { + "componentName": "div", + "props": { + "style": "margin:10px 0 0 30px" + }, + "id": "69a8d345" + } + ], + "id": "fe4d3436" + } + ], + "id": "45153634" +} +``` From deaebddacb05c49fa32d45bb3ae22253fe6cd135 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Fri, 31 Oct 2025 11:34:39 +0800 Subject: [PATCH 2/3] feat/Add harmony knowledge base --- documents/harmony/HarmonyBlock.md | 19 +++++++ documents/harmony/HarmonyButton.md | 27 ++++++++++ documents/harmony/HarmonyCheckbox.md | 22 ++++++++ documents/harmony/HarmonyEditor.md | 21 ++++++++ documents/harmony/HarmonyForm.md | 61 +++++++++++++++++++++ documents/harmony/HarmonyImage.md | 22 ++++++++ documents/harmony/HarmonyInput.md | 25 +++++++++ documents/harmony/HarmonyLabel.md | 20 +++++++ documents/harmony/HarmonyNavigator.md | 34 ++++++++++++ documents/harmony/HarmonyPicker.md | 32 +++++++++++ documents/harmony/HarmonyProgress.md | 23 ++++++++ documents/harmony/HarmonyRadio.md | 23 ++++++++ documents/harmony/HarmonyScrollView.md | 21 ++++++++ documents/harmony/HarmonySlider.md | 25 +++++++++ documents/harmony/HarmonySwiper.md | 54 +++++++++++++++++++ documents/harmony/HarmonySwitch.md | 22 ++++++++ documents/harmony/HarmonyTabBar.md | 75 ++++++++++++++++++++++++++ documents/harmony/HarmonyText.md | 21 ++++++++ documents/harmony/HarmonyTextarea.md | 25 +++++++++ documents/harmony/HarmonyVideo.md | 28 ++++++++++ documents/harmony/HarmonyView.md | 20 +++++++ 21 files changed, 620 insertions(+) create mode 100644 documents/harmony/HarmonyBlock.md create mode 100644 documents/harmony/HarmonyButton.md create mode 100644 documents/harmony/HarmonyCheckbox.md create mode 100644 documents/harmony/HarmonyEditor.md create mode 100644 documents/harmony/HarmonyForm.md create mode 100644 documents/harmony/HarmonyImage.md create mode 100644 documents/harmony/HarmonyInput.md create mode 100644 documents/harmony/HarmonyLabel.md create mode 100644 documents/harmony/HarmonyNavigator.md create mode 100644 documents/harmony/HarmonyPicker.md create mode 100644 documents/harmony/HarmonyProgress.md create mode 100644 documents/harmony/HarmonyRadio.md create mode 100644 documents/harmony/HarmonyScrollView.md create mode 100644 documents/harmony/HarmonySlider.md create mode 100644 documents/harmony/HarmonySwiper.md create mode 100644 documents/harmony/HarmonySwitch.md create mode 100644 documents/harmony/HarmonyTabBar.md create mode 100644 documents/harmony/HarmonyText.md create mode 100644 documents/harmony/HarmonyTextarea.md create mode 100644 documents/harmony/HarmonyVideo.md create mode 100644 documents/harmony/HarmonyView.md diff --git a/documents/harmony/HarmonyBlock.md b/documents/harmony/HarmonyBlock.md new file mode 100644 index 00000000..66279b07 --- /dev/null +++ b/documents/harmony/HarmonyBlock.md @@ -0,0 +1,19 @@ +# HarmonyComponent block 组件生成 schema + +HarmonyBlock 是一个区块组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## block 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyBlock", + "props": { + "className": "component-base-style" + }, + "children": [], + "id": "42593436" +} +``` diff --git a/documents/harmony/HarmonyButton.md b/documents/harmony/HarmonyButton.md new file mode 100644 index 00000000..a77fa20f --- /dev/null +++ b/documents/harmony/HarmonyButton.md @@ -0,0 +1,27 @@ +# HarmonyComponent button 组件生成 schema + +HarmonyButton 是一个按钮组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## button 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyButton", + "props": { + "text": "按钮文案", // 可以设置按钮的文案。 + "className": "component-base-style", + "size": "medium", // 可以设置按钮的大小。可选值为 large 、 medium 、 small 、 mini + "disabled": true, // 可以设置按钮是否为禁用状态。 + "type": "primary", // 可以设置按钮的类型。可选值为 primary 、 success 、 warning 、 danger 、 info 、 text + "round": true, // 可以设置按钮是否为圆角。 + "plain": true, // 可以设置按钮是否镂空，背景色透明。 + "autofocus": true, // 可以设置按钮是否自动聚焦。 + "loading": true // 可以设置按钮是否为加载中状态。 + }, + "children": [], + "id": "36322253" +} +``` diff --git a/documents/harmony/HarmonyCheckbox.md b/documents/harmony/HarmonyCheckbox.md new file mode 100644 index 00000000..39be961a --- /dev/null +++ b/documents/harmony/HarmonyCheckbox.md @@ -0,0 +1,22 @@ +# HarmonyComponent checkbox 组件生成 schema + +HarmonyCheckbox 是一个多选框组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## checkbox 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyCheckbox", + "props": { + "checked": true, // 可以设置多选框的选中状态。 + "text": "多选框文案", // 可以设置多选框的文案。 + "className": "component-base-style", + "disabled": true // 可以设置多选框是否为禁用状态。 + }, + "children": [], + "id": "58523b45" +} +``` diff --git a/documents/harmony/HarmonyEditor.md b/documents/harmony/HarmonyEditor.md new file mode 100644 index 00000000..9cc919d3 --- /dev/null +++ b/documents/harmony/HarmonyEditor.md @@ -0,0 +1,21 @@ +# HarmonyComponent editor 组件生成 schema + +HarmonyEditor 是一个编辑器组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## editor 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyEditor", + "props": { + "modelValue": "value", // 可以设置编辑器的绑定值。 + "className": "component-base-style", + "read-only": true // 可以设置是否为只读模式。 + }, + "children": [], + "id": "3255e443" +} +``` diff --git a/documents/harmony/HarmonyForm.md b/documents/harmony/HarmonyForm.md new file mode 100644 index 00000000..3e29a0bb --- /dev/null +++ b/documents/harmony/HarmonyForm.md @@ -0,0 +1,61 @@ +# HarmonyComponent form 组件生成 schema + +HarmonyForm 是一个表单组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## form 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyForm", + "props": { + "className": "component-base-style", + "report-submit": true, // 可以设置是否返回 formId 用于发送模板消息 + "report-submit-timeout": 100 // 可以设置返回 formId 的超时时间，单位为 ms + }, + "children": [ + { + "componentName": "HarmonyView", + "props": {}, + "children": [ + { + "componentName": "HarmonyView", + "props": { + "label": "用户名" + }, + "children": [ + { + "componentName": "HarmonyText", + "props": { + "text": "姓名" + }, + "id": "45655522" + } + ], + "id": "5224f433" + }, + { + "componentName": "HarmonyView", + "props": { + "label": "用户名" + }, + "children": [ + { + "componentName": "HarmonyInput", + "props": { + "placeholder": "请输入用户名" + }, + "id": "5533e24d" + } + ], + "id": "6c946365" + } + ], + "id": "d64452a5" + } + ], + "id": "53654522" +} +``` diff --git a/documents/harmony/HarmonyImage.md b/documents/harmony/HarmonyImage.md new file mode 100644 index 00000000..4850e546 --- /dev/null +++ b/documents/harmony/HarmonyImage.md @@ -0,0 +1,22 @@ +# HarmonyComponent image 组件生成 schema + +HarmonyImage 是一个图片组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## image 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyImage", + "props": { + "src": "https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/designer-default-icon.jpg", // 可以设置图片的源。 + "className": "component-base-style", + "draggable": true, // 可以设置图片是否可拖拽。 + "mode": "scaleToFill" // 可以设置图片的缩放模式。可选值为 scaleToFill 、 aspectFit 、 aspectFill 、 widthFix 、 heightFix + }, + "children": [], + "id": "62256151" +} +``` diff --git a/documents/harmony/HarmonyInput.md b/documents/harmony/HarmonyInput.md new file mode 100644 index 00000000..b73b1c54 --- /dev/null +++ b/documents/harmony/HarmonyInput.md @@ -0,0 +1,25 @@ +# HarmonyComponent input 组件生成 schema + +HarmonyInput 是一个输入框组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## input 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyInput", + "props": { + "placeholder": "请输入", // 可以设置输入框的提示文字。 + "modelValue": "value", // 可以设置输入框的绑定值。 + "className": "component-base-style", + "type": "text", // 可以设置输入框的类型。 + "clearable": true, // 可以设置是否显示清除按钮。 + "disabled": true, // 可以设置是否禁用输入框。 + "maxlength": 10 // 可以设置输入框的最大长度。 + }, + "children": [], + "id": "31365645" +} +``` diff --git a/documents/harmony/HarmonyLabel.md b/documents/harmony/HarmonyLabel.md new file mode 100644 index 00000000..f523dd71 --- /dev/null +++ b/documents/harmony/HarmonyLabel.md @@ -0,0 +1,20 @@ +# HarmonyComponent label 组件生成 schema + +HarmonyLabel 是一个标签组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## label 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyLabel", + "props": { + "className": "component-base-style", + "for": "name" // 可以设置 label 标签的 for 属性，用于绑定对应的表单控件。 + }, + "children": [], + "id": "5125653c" +} +``` diff --git a/documents/harmony/HarmonyNavigator.md b/documents/harmony/HarmonyNavigator.md new file mode 100644 index 00000000..794dfdb4 --- /dev/null +++ b/documents/harmony/HarmonyNavigator.md @@ -0,0 +1,34 @@ +# HarmonyComponent navigator 组件生成 schema + +HarmonyNavigator 是一个页面跳转组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## navigator 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyNavigator", + "props": { + "open-type": "navigate", // 可以设置跳转方式。可选值为 navigate 、 redirect 、 switchTab 、 reLaunch 、 navigateBack + "target": "self", // 可以设置跳转后页面的打开方式。可选值为 self 、 top 、 parent + "className": "component-base-style", + "url": "https://huaweicloud.com", // 可以设置跳转的页面路径。 + "delta": 1, // 可以设置回退的层数。当 open-type 为 'navigateBack' 时有效，表示回退的层数 + "animation-type": "pop-in", // 可以设置跳转页面的动画效果。可选值为 pop-in 、 pop-out 、 none + "animation-duration": 1000, // 可以设置跳转页面的动画时长。单位为 ms + "render-link": true // 可以设置是否给 navigator 组件加一层 a 标签控制 ssr 渲染。 + }, + "children": [ + { + "componentName": "HarmonyButton", + "props": { + "text": "跳转页面" + }, + "id": "62555236" + } + ], + "id": "55325f22" +} +``` diff --git a/documents/harmony/HarmonyPicker.md b/documents/harmony/HarmonyPicker.md new file mode 100644 index 00000000..e73c7054 --- /dev/null +++ b/documents/harmony/HarmonyPicker.md @@ -0,0 +1,32 @@ +# HarmonyComponent picker 组件生成 schema + +HarmonyPicker 是一个选择器组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## picker 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyPicker", + "props": { + "value": "1", // 可以设置选择器的初始值。 + "mode": "selector", // 可以设置选择器的模式。默认值为 selector，可选值为 selector 、 date 和 time + "range": [ + { + "value": "1", + "label": "黄金糕" + }, + { + "value": "2", + "label": "双皮奶" + } + ], // 可以设置选择器的数据源。模式为 selector 时，range 为数组，数组的元素为对象，对象包含 value 和 label 属性。 + "className": "component-base-style", + "disabled": true // 可以设置是否禁用选择器。 + }, + "children": [], + "id": "54e34551" +} +``` diff --git a/documents/harmony/HarmonyProgress.md b/documents/harmony/HarmonyProgress.md new file mode 100644 index 00000000..a763c2fa --- /dev/null +++ b/documents/harmony/HarmonyProgress.md @@ -0,0 +1,23 @@ +# HarmonyComponent progress 组件生成 schema + +HarmonyProgress 是一个进度条组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## progress 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyProgress", + "props": { + "stroke-width": 6, // 可以设置进度条的宽度。 + "percent": 20, // 可以设置进度条的百分比。 + "className": "component-base-style", + "show-info": true, // 可以设置是否在进度条右侧显示百分比。 + "activeColor": "#147523" // 可以设置进度条的激活状态颜色。 + }, + "children": [], + "id": "61b4ff44" +} +``` diff --git a/documents/harmony/HarmonyRadio.md b/documents/harmony/HarmonyRadio.md new file mode 100644 index 00000000..d3fba3ef --- /dev/null +++ b/documents/harmony/HarmonyRadio.md @@ -0,0 +1,23 @@ +# HarmonyComponent radio 组件生成 schema + +HarmonyRadio 是一个单项选择器组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## radio 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyRadio", + "props": { + "checked": true, // 可以设置是否绑定默认选中。 + "value": "1", + "text": "单项选择器文案", // 可以设置单项选择器的文案。 + "className": "component-base-style", + "disabled": true // 可以设置是否禁用。 + }, + "children": [], + "id": "51334543" +} +``` diff --git a/documents/harmony/HarmonyScrollView.md b/documents/harmony/HarmonyScrollView.md new file mode 100644 index 00000000..c80a203a --- /dev/null +++ b/documents/harmony/HarmonyScrollView.md @@ -0,0 +1,21 @@ +# HarmonyComponent scrollView 组件生成 schema + +HarmonyScrollView 是一个可滚动视图组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## scrollView 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyScrollView", + "props": { + "className": "component-base-style", + "scroll-x": true, // 可以设置横向滚动。 + "scroll-y": true // 可以设置纵向滚动。 + }, + "children": [], + "id": "55f32255" +} +``` diff --git a/documents/harmony/HarmonySlider.md b/documents/harmony/HarmonySlider.md new file mode 100644 index 00000000..64d4f135 --- /dev/null +++ b/documents/harmony/HarmonySlider.md @@ -0,0 +1,25 @@ +# HarmonyComponent slider 组件生成 schema + +HarmonySlider 是一个滑块选择器组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## slider 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonySlider", + "props": { + "value": 6, // 可以设置滑块选择器的初始值。 + "show-value": true, // 可以设置是否显示数值。 + "className": "component-base-style", + "min": 0, // 可以设置滑块选择器的最小值。 + "max": 100, // 可以设置滑块选择器最大值。 + "step": 1, // 可以设置滑块选择器的步长。 + "disabled": true // 可以设置是否禁用滑块选择器。 + }, + "children": [], + "id": "25164222" +} +``` diff --git a/documents/harmony/HarmonySwiper.md b/documents/harmony/HarmonySwiper.md new file mode 100644 index 00000000..f9a37fde --- /dev/null +++ b/documents/harmony/HarmonySwiper.md @@ -0,0 +1,54 @@ +# HarmonyComponent swiper 组件生成 schema + +HarmonySwiper 是一个滑块视图组件 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 +componentName 为 HarmonySwiperItem 的组件， 通过对应的 title 属性，可以设置标题。 通过对应的 name 属性，可以设置唯一标识。 + +## swiper 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonySwiper", + "props": { + "height": "180px", + "className": "component-base-style", + "autoplay": true, // 可以设置是否自动切换。 + "current": 0, // 可以设置当前所在滑块的 index。 + "interval": 5000, // 可以设置自动切换的时间间隔，单位为毫秒。 + "circular": true, // 可以设置是否采用衔接滑动，即播放到末尾后重新回到开头。 + "vertical": true, // 可以设置滑动方向是否为纵向。 + "ref": "swiper", // 可以设置需要的ref引用类名。 + }, + "children": [ + { + "componentName": "HarmonySwiperItem", + "props": { + "title": "swiper-item-a" + }, + "children": [ + { + "componentName": "div", + "id": "66837336" + } + ], + "id": "46446424" + }, + { + "componentName": "HarmonySwiperItem", + "props": { + "title": "swiper-item-b" + }, + "children": [ + { + "componentName": "div", + "id": "24122354" + } + ], + "id": "63422654" + } + ], + "id": "362166a8" +} +``` diff --git a/documents/harmony/HarmonySwitch.md b/documents/harmony/HarmonySwitch.md new file mode 100644 index 00000000..9f6d9ecb --- /dev/null +++ b/documents/harmony/HarmonySwitch.md @@ -0,0 +1,22 @@ +# HarmonyComponent switch 组件生成 schema + +HarmonySwitch 是一个开关组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## switch 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonySwitch", + "props": { + "checked": true, // 可以设置是否绑定默认打开。 + "className": "component-base-style", + "disabled": true, // 可以设置是否禁用。 + "color": "red" // 可以设置开关颜色。 + }, + "children": [], + "id": "63346431" +} +``` diff --git a/documents/harmony/HarmonyTabBar.md b/documents/harmony/HarmonyTabBar.md new file mode 100644 index 00000000..0a0b826a --- /dev/null +++ b/documents/harmony/HarmonyTabBar.md @@ -0,0 +1,75 @@ +# HarmonyComponent tabbar 组件生成 schema + +HarmonyTabBar 是一个导航菜单组件 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 +componentName 为 HarmonyTabBarItem 的组件， 通过对应的 to 属性，可以设置跳转页面。 通过对应的 iconPath 属性，可以设置显示的图标， 通过对应的 selectedIconPath 属性，可以设置选中后的图标， 通过对应的 text 属性，可以设置显示的名称。 + +## tabbar 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyTabBar", + "props": { + "style": "position: fixed; left: 0; bottom: 0; width: calc(100% - 24px); border-top: 1px solid rgba(0, 0, 0, 0.33); z-index: 1; background: #fff;", // 设置导航菜单的样式。 + "className": "", + "ref": "tabbar", // 可以设置需要的ref引用类名 + }, + "children": [ + { + "componentName": "HarmonyTabBarItem", + "props": { + "to": { + "name": "", + "path": "" + }, + "iconPath": "https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/harmony/images/tabbar/home.svg", + "selectedIconPath": "https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/harmony/images/tabbar/home-active.svg", + "text": "首页" + }, + "id": "23425346" + }, + { + "componentName": "HarmonyTabBarItem", + "props": { + "to": { + "name": "", + "path": "" + }, + "iconPath": "https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/harmony/images/tabbar/menu.svg", + "selectedIconPath": "https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/harmony/images/tabbar/menu-active.svg", + "text": "菜单" + }, + "id": "54253623" + }, + { + "componentName": "HarmonyTabBarItem", + "props": { + "to": { + "name": "", + "path": "" + }, + "iconPath": "https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/harmony/images/tabbar/cart.svg", + "selectedIconPath": "https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/harmony/images/tabbar/cart-active.svg", + "text": "购物车" + }, + "id": "54539326" + }, + { + "componentName": "HarmonyTabBarItem", + "props": { + "to": { + "name": "", + "path": "" + }, + "iconPath": "https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/harmony/images/tabbar/my.svg", + "selectedIconPath": "https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/harmony/images/tabbar/my-active.svg", + "text": "我的" + }, + "id": "23655268" + } + ], + "id": "3c543344" +} +``` diff --git a/documents/harmony/HarmonyText.md b/documents/harmony/HarmonyText.md new file mode 100644 index 00000000..80bd37bf --- /dev/null +++ b/documents/harmony/HarmonyText.md @@ -0,0 +1,21 @@ +# HarmonyComponent text 组件生成 schema + +HarmonyText 是一个文本组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## text 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyText", + "props": { + "style": "display: inline-block;", + "text": "查看更多", // 可以设置文本内容。 + "className": "component-base-style" + }, + "children": [], + "id": "65653bb6" +} +``` diff --git a/documents/harmony/HarmonyTextarea.md b/documents/harmony/HarmonyTextarea.md new file mode 100644 index 00000000..35c20e93 --- /dev/null +++ b/documents/harmony/HarmonyTextarea.md @@ -0,0 +1,25 @@ +# HarmonyComponent textarea 组件生成 schema + +HarmonyTextarea 是一个多行输入框组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## textarea 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyTextarea", + "props": { + "placeholder": "请输入", // 可以设置占位符。 + "value": "value", // 可以设置多行输入框的初始内容。 + "className": "component-base-style", + "disabled": true, // 可以设置是否禁用。 + "clearable": true, // 可以设置是否显示清除按钮。 + "rows": 2, // 可以设置多行输入框的行数。 + "maxlength": 1000 // 可以设置多行输入框的最大输入长度。 + }, + "children": [], + "id": "152352c5" +} +``` diff --git a/documents/harmony/HarmonyVideo.md b/documents/harmony/HarmonyVideo.md new file mode 100644 index 00000000..009cf190 --- /dev/null +++ b/documents/harmony/HarmonyVideo.md @@ -0,0 +1,28 @@ +# HarmonyComponent video 组件生成 schema + +HarmonyVideo 是一个视频组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## video 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyVideo", + "props": { + "src": "https://tinyengine-assets.obs.myhuaweicloud.com/files/in-action.mp4", // 可以设置视频的资源地址。 + "width": "200", // 可以设置视频的宽度。 + "height": "100", // 可以设置视频的高度。 + "style": "border:1px solid #ccc", // 可以设置视频的样式。 + "className": "component-base-style", + "controls": true, // 可以设置是否显示播放控件。 + "autoplay": true, // 可以设置是否自动播放。 + "loop": true, // 可以设置是否循环播放。 + "muted": true, // 可以设置是否静音播放。 + "poster": "https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/designer-default-icon.jpg" // 可以设置视频的封面图片。 + }, + "children": [], + "id": "62561452" +} +``` diff --git a/documents/harmony/HarmonyView.md b/documents/harmony/HarmonyView.md new file mode 100644 index 00000000..b271fa8d --- /dev/null +++ b/documents/harmony/HarmonyView.md @@ -0,0 +1,20 @@ +# HarmonyComponent view 组件生成 schema + +HarmonyView 是一个视图组件。 +componentName 为渲染时候的组件名称，props 为组件绑定的属性，children 为子组件列表，id 为可以动态生成的唯一 id。 + +## view 组件生成 schema 代码示例 + +### 基本用法 + +```json +{ + "componentName": "HarmonyView", + "props": { + "className": "component-base-style", + "hoverClass": "hover-style" // 可以设置按下去的样式类。 + }, + "children": [], + "id": "b662a654" +} +``` From 4ce43e8d1afeb7321093c90d737c7a5a938c3d77 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Fri, 31 Oct 2025 11:39:26 +0800 Subject: [PATCH 3/3] feat/Add harmony knowledge base --- documents/{harmony => agent}/HarmonyBlock.md | 0 documents/{harmony => agent}/HarmonyButton.md | 0 documents/{harmony => agent}/HarmonyCheckbox.md | 0 documents/{harmony => agent}/HarmonyEditor.md | 0 documents/{harmony => agent}/HarmonyForm.md | 0 documents/{harmony => agent}/HarmonyImage.md | 0 documents/{harmony => agent}/HarmonyInput.md | 0 documents/{harmony => agent}/HarmonyLabel.md | 0 documents/{harmony => agent}/HarmonyNavigator.md | 0 documents/{harmony => agent}/HarmonyPicker.md | 0 documents/{harmony => agent}/HarmonyProgress.md | 0 documents/{harmony => agent}/HarmonyRadio.md | 0 documents/{harmony => agent}/HarmonyScrollView.md | 0 documents/{harmony => agent}/HarmonySlider.md | 0 documents/{harmony => agent}/HarmonySwiper.md | 0 documents/{harmony => agent}/HarmonySwitch.md | 0 documents/{harmony => agent}/HarmonyTabBar.md | 0 documents/{harmony => agent}/HarmonyText.md | 0 documents/{harmony => agent}/HarmonyTextarea.md | 0 documents/{harmony => agent}/HarmonyVideo.md | 0 documents/{harmony => agent}/HarmonyView.md | 0 21 files changed, 0 insertions(+), 0 deletions(-) rename documents/{harmony => agent}/HarmonyBlock.md (100%) rename documents/{harmony => agent}/HarmonyButton.md (100%) rename documents/{harmony => agent}/HarmonyCheckbox.md (100%) rename documents/{harmony => agent}/HarmonyEditor.md (100%) rename documents/{harmony => agent}/HarmonyForm.md (100%) rename documents/{harmony => agent}/HarmonyImage.md (100%) rename documents/{harmony => agent}/HarmonyInput.md (100%) rename documents/{harmony => agent}/HarmonyLabel.md (100%) rename documents/{harmony => agent}/HarmonyNavigator.md (100%) rename documents/{harmony => agent}/HarmonyPicker.md (100%) rename documents/{harmony => agent}/HarmonyProgress.md (100%) rename documents/{harmony => agent}/HarmonyRadio.md (100%) rename documents/{harmony => agent}/HarmonyScrollView.md (100%) rename documents/{harmony => agent}/HarmonySlider.md (100%) rename documents/{harmony => agent}/HarmonySwiper.md (100%) rename documents/{harmony => agent}/HarmonySwitch.md (100%) rename documents/{harmony => agent}/HarmonyTabBar.md (100%) rename documents/{harmony => agent}/HarmonyText.md (100%) rename documents/{harmony => agent}/HarmonyTextarea.md (100%) rename documents/{harmony => agent}/HarmonyVideo.md (100%) rename documents/{harmony => agent}/HarmonyView.md (100%) diff --git a/documents/harmony/HarmonyBlock.md b/documents/agent/HarmonyBlock.md similarity index 100% rename from documents/harmony/HarmonyBlock.md rename to documents/agent/HarmonyBlock.md diff --git a/documents/harmony/HarmonyButton.md b/documents/agent/HarmonyButton.md similarity index 100% rename from documents/harmony/HarmonyButton.md rename to documents/agent/HarmonyButton.md diff --git a/documents/harmony/HarmonyCheckbox.md b/documents/agent/HarmonyCheckbox.md similarity index 100% rename from documents/harmony/HarmonyCheckbox.md rename to documents/agent/HarmonyCheckbox.md diff --git a/documents/harmony/HarmonyEditor.md b/documents/agent/HarmonyEditor.md similarity index 100% rename from documents/harmony/HarmonyEditor.md rename to documents/agent/HarmonyEditor.md diff --git a/documents/harmony/HarmonyForm.md b/documents/agent/HarmonyForm.md similarity index 100% rename from documents/harmony/HarmonyForm.md rename to documents/agent/HarmonyForm.md diff --git a/documents/harmony/HarmonyImage.md b/documents/agent/HarmonyImage.md similarity index 100% rename from documents/harmony/HarmonyImage.md rename to documents/agent/HarmonyImage.md diff --git a/documents/harmony/HarmonyInput.md b/documents/agent/HarmonyInput.md similarity index 100% rename from documents/harmony/HarmonyInput.md rename to documents/agent/HarmonyInput.md diff --git a/documents/harmony/HarmonyLabel.md b/documents/agent/HarmonyLabel.md similarity index 100% rename from documents/harmony/HarmonyLabel.md rename to documents/agent/HarmonyLabel.md diff --git a/documents/harmony/HarmonyNavigator.md b/documents/agent/HarmonyNavigator.md similarity index 100% rename from documents/harmony/HarmonyNavigator.md rename to documents/agent/HarmonyNavigator.md diff --git a/documents/harmony/HarmonyPicker.md b/documents/agent/HarmonyPicker.md similarity index 100% rename from documents/harmony/HarmonyPicker.md rename to documents/agent/HarmonyPicker.md diff --git a/documents/harmony/HarmonyProgress.md b/documents/agent/HarmonyProgress.md similarity index 100% rename from documents/harmony/HarmonyProgress.md rename to documents/agent/HarmonyProgress.md diff --git a/documents/harmony/HarmonyRadio.md b/documents/agent/HarmonyRadio.md similarity index 100% rename from documents/harmony/HarmonyRadio.md rename to documents/agent/HarmonyRadio.md diff --git a/documents/harmony/HarmonyScrollView.md b/documents/agent/HarmonyScrollView.md similarity index 100% rename from documents/harmony/HarmonyScrollView.md rename to documents/agent/HarmonyScrollView.md diff --git a/documents/harmony/HarmonySlider.md b/documents/agent/HarmonySlider.md similarity index 100% rename from documents/harmony/HarmonySlider.md rename to documents/agent/HarmonySlider.md diff --git a/documents/harmony/HarmonySwiper.md b/documents/agent/HarmonySwiper.md similarity index 100% rename from documents/harmony/HarmonySwiper.md rename to documents/agent/HarmonySwiper.md diff --git a/documents/harmony/HarmonySwitch.md b/documents/agent/HarmonySwitch.md similarity index 100% rename from documents/harmony/HarmonySwitch.md rename to documents/agent/HarmonySwitch.md diff --git a/documents/harmony/HarmonyTabBar.md b/documents/agent/HarmonyTabBar.md similarity index 100% rename from documents/harmony/HarmonyTabBar.md rename to documents/agent/HarmonyTabBar.md diff --git a/documents/harmony/HarmonyText.md b/documents/agent/HarmonyText.md similarity index 100% rename from documents/harmony/HarmonyText.md rename to documents/agent/HarmonyText.md diff --git a/documents/harmony/HarmonyTextarea.md b/documents/agent/HarmonyTextarea.md similarity index 100% rename from documents/harmony/HarmonyTextarea.md rename to documents/agent/HarmonyTextarea.md diff --git a/documents/harmony/HarmonyVideo.md b/documents/agent/HarmonyVideo.md similarity index 100% rename from documents/harmony/HarmonyVideo.md rename to documents/agent/HarmonyVideo.md diff --git a/documents/harmony/HarmonyView.md b/documents/agent/HarmonyView.md similarity index 100% rename from documents/harmony/HarmonyView.md rename to documents/agent/HarmonyView.md