From ac0dd5be0b8108adbcfc0eea344fab15dcb4a8c1 Mon Sep 17 00:00:00 2001 From: hexqi Date: Fri, 23 Aug 2024 17:02:26 +0800 Subject: [PATCH 1/3] feat: add material snippet label and add group --- designer-demo/public/mock/bundle.json | 1331 +++++++++-------- .../materials/src/meta/component/src/Main.vue | 7 +- 2 files changed, 691 insertions(+), 647 deletions(-) diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json index 2a1d74cc1..6249fbebe 100644 --- a/designer-demo/public/mock/bundle.json +++ b/designer-demo/public/mock/bundle.json @@ -13010,109 +13010,183 @@ "blocks": [], "snippets": [ { - "group": "element-plus", + "group": "basic", + "label": { + "zh_CN": "基础" + }, "children": [ { "name": { - "zh_CN": "输入框" + "zh_CN": "按钮" }, - "icon": "input", + "icon": "button", "screenshot": "", - "snippetName": "ElInput", - "schema": {} + "snippetName": "TinyButton", + "schema": { + "componentName": "TinyButton", + "props": { + "text": "按钮文案" + } + } }, { "name": { - "zh_CN": "按钮" + "zh_CN": "按钮组" }, - "icon": "button", + "icon": "buttons", + "snippetName": "TinyButtons", "screenshot": "", - "snippetName": "ElButton", "schema": { + "componentName": "div", + "props": {}, "children": [ { - "componentName": "Text", + "componentName": "TinyButton", "props": { - "text": "按钮文本" + "text": "提交", + "type": "primary", + "style": { + "margin": "0 5px 0 5px" + } + } + }, + { + "componentName": "TinyButton", + "props": { + "text": "重置", + "style": { + "margin": "0 5px 0 5px" + } + } + }, + { + "componentName": "TinyButton", + "props": { + "text": "取消" } } ] + }, + "configure": { + "isContainer": true + } + }, + { + "name": { + "zh_CN": "互斥按钮组" + }, + "icon": "buttons", + "snippetName": "TinyButtonGroup", + "screenshot": "", + "schema": { + "componentName": "TinyButtonGroup", + "props": { + "data": [ + { + "text": "Button1", + "value": "1" + }, + { + "text": "Button2", + "value": "2" + }, + { + "text": "Button3", + "value": "3" + } + ], + "modelValue": "1" + } } }, + { + "name": { + "zh_CN": "搜索框" + }, + "icon": "search", + "screenshot": "", + "snippetName": "TinySearch", + "schema": { + "componentName": "TinySearch", + "props": { + "modelValue": "", + "placeholder": "输入关键词" + } + } + } + ] + }, + { + "group": "form", + "label": { + "zh_CN": "表单" + }, + "children": [ { "name": { "zh_CN": "表单" }, - "icon": "form", "screenshot": "", - "snippetName": "ElForm", + "snippetName": "tiny-form", + "icon": "form", "schema": { + "componentName": "TinyForm", + "props": { + "labelWidth": "80px", + "labelPosition": "top" + }, "children": [ { - "componentName": "ElFormItem", + "componentName": "TinyFormItem", "props": { - "label": "账号", - "prop": "account" + "label": "人员" }, "children": [ { - "componentName": "ElInput", + "componentName": "TinyInput", "props": { - "modelValue": "", - "placeholder": "请输入账号" + "placeholder": "请输入", + "modelValue": "" } } ] }, { - "componentName": "ElFormItem", + "componentName": "TinyFormItem", "props": { - "label": "密码", - "prop": "password" + "label": "密码" }, "children": [ { - "componentName": "ElInput", + "componentName": "TinyInput", "props": { + "placeholder": "请输入", "modelValue": "", - "placeholder": "请输入密码", "type": "password" } } ] }, { - "componentName": "ElFormItem", - "props": {}, + "componentName": "TinyFormItem", + "props": { + "label": "" + }, "children": [ { - "componentName": "ElButton", + "componentName": "TinyButton", "props": { + "text": "提交", "type": "primary", "style": "margin-right: 10px" - }, - "children": [ - { - "componentName": "Text", - "props": { - "text": "提交" - } - } - ] + } }, { - "componentName": "ElButton", + "componentName": "TinyButton", "props": { + "text": "重置", "type": "primary" - }, - "children": [ - { - "componentName": "Text", - "props": { - "text": "重置" - } - } - ] + } } ] } @@ -13121,368 +13195,358 @@ }, { "name": { - "zh_CN": "表格" + "zh_CN": "下拉框" }, - "icon": "grid", + "icon": "select", "screenshot": "", - "snippetName": "ElTable", + "snippetName": "TinySelect", "schema": { + "componentName": "TinySelect", "props": { - "data": [ - { - "date": "2016-05-03", - "name": "Tom", - "address": "No. 189, Grove St, Los Angeles" - }, - { - "date": "2016-05-02", - "name": "Tom", - "address": "No. 189, Grove St, Los Angeles" - }, - { - "date": "2016-05-04", - "name": "Tom", - "address": "No. 189, Grove St, Los Angeles" - }, - { - "date": "2016-05-01", - "name": "Tom", - "address": "No. 189, Grove St, Los Angeles" - } - ], - "columns": [ - { - "type": "index" - }, - { - "label": "Date", - "prop": "date" - }, + "modelValue": "", + "placeholder": "请选择", + "options": [ { - "label": "Name", - "prop": "name" + "value": "1", + "label": "黄金糕" }, { - "label": "Address", - "prop": "address" + "value": "2", + "label": "双皮奶" } ] } } - } - ] - }, - { - "group": "html", - "children": [ + }, { "name": { - "zh_CN": "段落" + "zh_CN": "开关" }, - "icon": "paragraph", + "icon": "switch", "screenshot": "", - "snippetName": "p", + "snippetName": "TinySwitch", "schema": { - "componentName": "p", - "children": "TinyEngine 前端可视化设计器致力于通过友好的用户交互提升业务应用的开发效率。" + "componentName": "TinySwitch", + "props": { + "modelValue": "" + } } }, { "name": { - "zh_CN": "链接" + "zh_CN": "复选框组" }, - "icon": "link", + "icon": "checkboxs", "screenshot": "", - "snippetName": "a", + "snippetName": "TinyCheckboxGroup", "schema": { - "componentName": "a", - "children": "链接" + "componentName": "TinyCheckboxGroup", + "props": { + "modelValue": ["name1", "name2"], + "type": "checkbox", + "options": [ + { + "text": "复选框1", + "label": "name1" + }, + { + "text": "复选框2", + "label": "name2" + }, + { + "text": "复选框3", + "label": "name3" + } + ] + } } }, { "name": { - "zh_CN": "分隔线" + "zh_CN": "复选框拖拽按钮组" }, - "icon": "hr", + "icon": "checkboxgroup", "screenshot": "", - "snippetName": "hr", - "schema": {} + "snippetName": "TinyCheckboxbuttonGroup", + "schema": { + "componentName": "TinyCheckboxGroup", + "props": { + "modelValue": [] + }, + "children": [ + { + "componentName": "TinyCheckboxButton", + "children": [ + { + "componentName": "div" + } + ] + } + ] + } }, { "name": { - "zh_CN": "标题" + "zh_CN": "输入框" }, - "icon": "h16", + "icon": "input", "screenshot": "", - "snippetName": "h1", + "snippetName": "TinyInput", "schema": { - "componentName": "h1", - "props": {}, - "children": "Heading" + "componentName": "TinyInput", + "props": { + "placeholder": "请输入", + "modelValue": "" + } } }, { "name": { - "zh_CN": "输入框" + "zh_CN": "单选" }, - "icon": "input", + "icon": "radio", "screenshot": "", - "snippetName": "input", + "snippetName": "TinyRadio", "schema": { - "componentName": "input", + "componentName": "TinyRadio", "props": { - "type": "text", - "placeholder": "请输入" + "label": "1", + "text": "单选文本" } } }, { "name": { - "zh_CN": "视频" + "zh_CN": "复选框" }, - "icon": "video", + "icon": "checkbox", "screenshot": "", - "snippetName": "video", + "snippetName": "TinyCheckbox", "schema": { - "componentName": "video", + "componentName": "TinyCheckbox", "props": { - "src": "img/webNova.jpg", - "width": "200", - "height": "100", - "style": "border:1px solid #ccc" + "text": "复选框文案" } } }, { "name": { - "zh_CN": "图片" + "zh_CN": "日期选择" }, - "icon": "Image", + "icon": "datepick", "screenshot": "", - "snippetName": "img", + "snippetName": "TinyDatePicker", "schema": { - "componentName": "img", + "componentName": "TinyDatePicker", "props": { - "src": "img/webNova.jpg", - "width": "200", - "height": "100" + "placeholder": "请输入", + "modelValue": "" } } }, { "name": { - "zh_CN": "按钮" + "zh_CN": "数字输入框" }, - "icon": "button", + "icon": "numeric", "screenshot": "", - "snippetName": "button", + "snippetName": "TinyNumeric", "schema": { - "componentName": "button", - "props": {}, - "children": [ - { - "componentName": "Text", - "props": { - "text": "按钮文案" - } - } - ] + "componentName": "TinyNumeric", + "props": { + "allow-empty": true, + "placeholder": "请输入", + "controlsPosition": "right", + "step": 1 + } } - }, + } + ] + }, + { + "group": "table", + "label": { + "zh_CN": "表格" + }, + "children": [ { "name": { "zh_CN": "表格" }, - "icon": "table", + "icon": "grid", "screenshot": "", - "snippetName": "table", + "snippetName": "tinyGrid", "schema": { - "componentName": "table", + "componentName": "TinyGrid", "props": { - "border": "1" - }, - "children": [ - { - "componentName": "tr", - "children": [ - { - "componentName": "td", - "children": "Month" - }, - { - "componentName": "td", - "children": "Savings" - } - ] + "editConfig": { + "trigger": "click", + "mode": "cell", + "showStatus": true }, - { - "componentName": "tr", - "children": [ - { - "componentName": "td", - "children": "January" - }, - { - "componentName": "td", - "children": "100" - } - ] - } - ] + "columns": [ + { + "type": "index", + "width": 60 + }, + { + "type": "selection", + "width": 60 + }, + { + "field": "employees", + "title": "员工数" + }, + { + "field": "created_date", + "title": "创建日期" + }, + { + "field": "city", + "title": "城市" + } + ], + "data": [ + { + "id": "1", + "name": "GFD科技有限公司", + "city": "福州", + "employees": 800, + "created_date": "2014-04-30 00:56:00", + "boole": false + }, + { + "id": "2", + "name": "WWW科技有限公司", + "city": "深圳", + "employees": 300, + "created_date": "2016-07-08 12:36:22", + "boole": true + } + ] + } } }, { "name": { - "zh_CN": "表单" + "zh_CN": "分页" }, - "icon": "form", + "icon": "pager", "screenshot": "", - "snippetName": "form", + "snippetName": "TinyPager", "schema": { - "componentName": "form", + "componentName": "TinyPager", "props": { - "action": "action" - }, + "layout": "total, sizes, prev, pager, next", + "total": 100, + "pageSize": 10, + "currentPage": 1 + } + } + } + ] + }, + { + "group": "layout", + "label": { + "zh_CN": "布局与容器" + }, + "children": [ + { + "name": { + "zh_CN": "Row" + }, + "icon": "row", + "screenshot": "", + "snippetName": "TinyRow", + "schema": { + "componentName": "TinyRow", + "props": {}, "children": [ { - "componentName": "label", + "componentName": "TinyCol", "props": { - "for": "male" - }, - "children": "male" + "span": 3 + } }, { - "componentName": "input", + "componentName": "TinyCol", "props": { - "type": "text" + "span": 3 } }, { - "componentName": "br" - }, - { - "componentName": "label", + "componentName": "TinyCol", "props": { - "for": "Female" - }, - "children": "Female" + "span": 3 + } }, { - "componentName": "input", + "componentName": "TinyCol", "props": { - "type": "text" + "span": 3 } } ] } - } - ] - }, - { - "group": "content", - "children": [ + }, { "name": { - "zh_CN": "走马灯" + "zh_CN": "Col" }, + "icon": "col", "screenshot": "", - "snippetName": "tiny-carousel", - "icon": "carousel", + "snippetName": "TinyCol", "schema": { - "componentName": "TinyCarousel", + "componentName": "TinyCol", "props": { - "height": "180px" - }, - "children": [ - { - "componentName": "TinyCarouselItem", - "children": [ - { - "componentName": "div", - "props": { - "style": "margin:10px 0 0 30px" - } - } - ] - }, - { - "componentName": "TinyCarouselItem", - "children": [ - { - "componentName": "div", - "props": { - "style": "margin:10px 0 0 30px" - } - } - ] + "span": 12, + "style": { + "height": "30px", + "border": "1px solid #ccc" } - ] + } } - }, + } + ] + }, + { + "group": "data-display", + "label": { + "zh_CN": "数据展示" + }, + "children": [ { "name": { - "zh_CN": "表单" + "zh_CN": "走马灯" }, "screenshot": "", - "snippetName": "tiny-form", - "icon": "form", + "snippetName": "tiny-carousel", + "icon": "carousel", "schema": { - "componentName": "TinyForm", + "componentName": "TinyCarousel", "props": { - "labelWidth": "80px", - "labelPosition": "top" + "height": "180px" }, "children": [ { - "componentName": "TinyFormItem", - "props": { - "label": "人员" - }, - "children": [ - { - "componentName": "TinyInput", - "props": { - "placeholder": "请输入", - "modelValue": "" - } - } - ] - }, - { - "componentName": "TinyFormItem", - "props": { - "label": "密码" - }, + "componentName": "TinyCarouselItem", "children": [ { - "componentName": "TinyInput", + "componentName": "div", "props": { - "placeholder": "请输入", - "modelValue": "", - "type": "password" + "style": "margin:10px 0 0 30px" } } ] }, { - "componentName": "TinyFormItem", - "props": { - "label": "" - }, + "componentName": "TinyCarouselItem", "children": [ { - "componentName": "TinyButton", - "props": { - "text": "提交", - "type": "primary", - "style": "margin-right: 10px" - } - }, - { - "componentName": "TinyButton", + "componentName": "div", "props": { - "text": "重置", - "type": "primary" + "style": "margin:10px 0 0 30px" } } ] @@ -13490,98 +13554,6 @@ ] } }, - { - "name": { - "zh_CN": "下拉框" - }, - "icon": "select", - "screenshot": "", - "snippetName": "TinySelect", - "schema": { - "componentName": "TinySelect", - "props": { - "modelValue": "", - "placeholder": "请选择", - "options": [ - { - "value": "1", - "label": "黄金糕" - }, - { - "value": "2", - "label": "双皮奶" - } - ] - } - } - }, - { - "name": { - "zh_CN": "开关" - }, - "icon": "switch", - "screenshot": "", - "snippetName": "TinySwitch", - "schema": { - "componentName": "TinySwitch", - "props": { - "modelValue": "" - } - } - }, - { - "name": { - "zh_CN": "复选框组" - }, - "icon": "checkboxs", - "screenshot": "", - "snippetName": "TinyCheckboxGroup", - "schema": { - "componentName": "TinyCheckboxGroup", - "props": { - "modelValue": ["name1", "name2"], - "type": "checkbox", - "options": [ - { - "text": "复选框1", - "label": "name1" - }, - { - "text": "复选框2", - "label": "name2" - }, - { - "text": "复选框3", - "label": "name3" - } - ] - } - } - }, - { - "name": { - "zh_CN": "复选框拖拽按钮组" - }, - "icon": "checkboxgroup", - "screenshot": "", - "snippetName": "TinyCheckboxbuttonGroup", - "schema": { - "componentName": "TinyCheckboxGroup", - "props": { - "modelValue": [] - }, - "children": [ - { - "componentName": "TinyCheckboxButton", - "children": [ - { - "componentName": "div" - } - ] - } - ] - } - }, { "name": { "zh_CN": "对话框" @@ -13603,53 +13575,6 @@ ] } }, - { - "name": { - "zh_CN": "标签页" - }, - "icon": "tabs", - "screenshot": "", - "group": true, - "snippetName": "TinyTabs", - "schema": { - "componentName": "TinyTabs", - "props": { - "modelValue": "first" - }, - "children": [ - { - "componentName": "TinyTabItem", - "props": { - "title": "标签页1", - "name": "first" - }, - "children": [ - { - "componentName": "div", - "props": { - "style": "margin:10px 0 0 30px" - } - } - ] - }, - { - "componentName": "TinyTabItem", - "props": { - "title": "标签页2", - "name": "second" - }, - "children": [ - { - "componentName": "div", - "props": { - "style": "margin:10px 0 0 30px" - } - } - ] - } - ] - } - }, { "name": { "zh_CN": "折叠面板" @@ -13704,71 +13629,13 @@ }, { "name": { - "zh_CN": "表格" + "zh_CN": "弹出编辑" }, - "icon": "grid", + "icon": "popeditor", "screenshot": "", - "snippetName": "tinyGrid", + "snippetName": "TinyPopeditor", "schema": { - "componentName": "TinyGrid", - "props": { - "editConfig": { - "trigger": "click", - "mode": "cell", - "showStatus": true - }, - "columns": [ - { - "type": "index", - "width": 60 - }, - { - "type": "selection", - "width": 60 - }, - { - "field": "employees", - "title": "员工数" - }, - { - "field": "created_date", - "title": "创建日期" - }, - { - "field": "city", - "title": "城市" - } - ], - "data": [ - { - "id": "1", - "name": "GFD科技有限公司", - "city": "福州", - "employees": 800, - "created_date": "2014-04-30 00:56:00", - "boole": false - }, - { - "id": "2", - "name": "WWW科技有限公司", - "city": "深圳", - "employees": 300, - "created_date": "2016-07-08 12:36:22", - "boole": true - } - ] - } - } - }, - { - "name": { - "zh_CN": "弹出编辑" - }, - "icon": "popeditor", - "screenshot": "", - "snippetName": "TinyPopeditor", - "schema": { - "componentName": "TinyPopeditor", + "componentName": "TinyPopeditor", "props": { "modelValue": "", "placeholder": "请选择", @@ -13979,21 +13846,37 @@ } ] } - }, + } + ] + }, + { + "group": "navigation", + "label": { + "zh_CN": "导航" + }, + "children": [ { "name": { - "zh_CN": "分页" + "zh_CN": "时间线" }, - "icon": "pager", + "icon": "timeline", "screenshot": "", - "snippetName": "TinyPager", + "snippetName": "TinyTimeLine", "schema": { - "componentName": "TinyPager", + "componentName": "TinyTimeLine", "props": { - "layout": "total, sizes, prev, pager, next", - "total": 100, - "pageSize": 10, - "currentPage": 1 + "active": "2", + "data": [ + { + "name": "已下单" + }, + { + "name": "运输中" + }, + { + "name": "已签收" + } + ] } } }, @@ -14026,265 +13909,421 @@ }, { "name": { - "zh_CN": "日期选择" + "zh_CN": "标签页" }, - "icon": "datepick", + "icon": "tabs", "screenshot": "", - "snippetName": "TinyDatePicker", + "group": true, + "snippetName": "TinyTabs", "schema": { - "componentName": "TinyDatePicker", + "componentName": "TinyTabs", "props": { - "placeholder": "请输入", - "modelValue": "" - } + "modelValue": "first" + }, + "children": [ + { + "componentName": "TinyTabItem", + "props": { + "title": "标签页1", + "name": "first" + }, + "children": [ + { + "componentName": "div", + "props": { + "style": "margin:10px 0 0 30px" + } + } + ] + }, + { + "componentName": "TinyTabItem", + "props": { + "title": "标签页2", + "name": "second" + }, + "children": [ + { + "componentName": "div", + "props": { + "style": "margin:10px 0 0 30px" + } + } + ] + } + ] + } + } + ] + }, + { + "group": "html", + "label": { + "zh_CN": "HTML组件" + }, + "children": [ + { + "name": { + "zh_CN": "段落" + }, + "icon": "paragraph", + "screenshot": "", + "snippetName": "p", + "schema": { + "componentName": "p", + "children": "TinyEngine 前端可视化设计器致力于通过友好的用户交互提升业务应用的开发效率。" } }, { "name": { - "zh_CN": "数字输入框" + "zh_CN": "链接" }, - "icon": "numeric", + "icon": "link", "screenshot": "", - "snippetName": "TinyNumeric", + "snippetName": "a", "schema": { - "componentName": "TinyNumeric", - "props": { - "allow-empty": true, - "placeholder": "请输入", - "controlsPosition": "right", - "step": 1 - } + "componentName": "a", + "children": "链接" } - } - ] - }, - { - "group": "general", - "children": [ + }, { "name": { - "zh_CN": "Row" + "zh_CN": "分隔线" }, - "icon": "row", + "icon": "hr", "screenshot": "", - "snippetName": "TinyRow", + "snippetName": "hr", + "schema": {} + }, + { + "name": { + "zh_CN": "标题" + }, + "icon": "h16", + "screenshot": "", + "snippetName": "h1", "schema": { - "componentName": "TinyRow", + "componentName": "h1", "props": {}, - "children": [ - { - "componentName": "TinyCol", - "props": { - "span": 3 - } - }, - { - "componentName": "TinyCol", - "props": { - "span": 3 - } - }, - { - "componentName": "TinyCol", - "props": { - "span": 3 - } - }, - { - "componentName": "TinyCol", - "props": { - "span": 3 - } - } - ] + "children": "Heading" } }, { "name": { - "zh_CN": "Col" + "zh_CN": "输入框" }, - "icon": "col", + "icon": "input", "screenshot": "", - "snippetName": "TinyCol", + "snippetName": "input", "schema": { - "componentName": "TinyCol", + "componentName": "input", "props": { - "span": 12, - "style": { - "height": "30px", - "border": "1px solid #ccc" - } + "type": "text", + "placeholder": "请输入" } } }, { "name": { - "zh_CN": "按钮" + "zh_CN": "视频" }, - "icon": "button", + "icon": "video", "screenshot": "", - "snippetName": "TinyButton", + "snippetName": "video", "schema": { - "componentName": "TinyButton", + "componentName": "video", "props": { - "text": "按钮文案" + "src": "img/webNova.jpg", + "width": "200", + "height": "100", + "style": "border:1px solid #ccc" } } }, { "name": { - "zh_CN": "按钮组" + "zh_CN": "图片" }, - "icon": "buttons", - "snippetName": "TinyButtons", + "icon": "Image", "screenshot": "", + "snippetName": "img", "schema": { - "componentName": "div", + "componentName": "img", + "props": { + "src": "img/webNova.jpg", + "width": "200", + "height": "100" + } + } + }, + { + "name": { + "zh_CN": "按钮" + }, + "icon": "button", + "screenshot": "", + "snippetName": "button", + "schema": { + "componentName": "button", "props": {}, "children": [ { - "componentName": "TinyButton", + "componentName": "Text", "props": { - "text": "提交", - "type": "primary", - "style": { - "margin": "0 5px 0 5px" - } + "text": "按钮文案" } - }, + } + ] + } + }, + { + "name": { + "zh_CN": "表格" + }, + "icon": "table", + "screenshot": "", + "snippetName": "table", + "schema": { + "componentName": "table", + "props": { + "border": "1" + }, + "children": [ { - "componentName": "TinyButton", - "props": { - "text": "重置", - "style": { - "margin": "0 5px 0 5px" + "componentName": "tr", + "children": [ + { + "componentName": "td", + "children": "Month" + }, + { + "componentName": "td", + "children": "Savings" } - } + ] }, { - "componentName": "TinyButton", - "props": { - "text": "取消" - } + "componentName": "tr", + "children": [ + { + "componentName": "td", + "children": "January" + }, + { + "componentName": "td", + "children": "100" + } + ] } ] - }, - "configure": { - "isContainer": true } }, { "name": { - "zh_CN": "互斥按钮组" + "zh_CN": "表单" }, - "icon": "buttons", - "snippetName": "TinyButtonGroup", + "icon": "form", "screenshot": "", + "snippetName": "form", "schema": { - "componentName": "TinyButtonGroup", + "componentName": "form", "props": { - "data": [ - { - "text": "Button1", - "value": "1" + "action": "action" + }, + "children": [ + { + "componentName": "label", + "props": { + "for": "male" }, - { - "text": "Button2", - "value": "2" + "children": "male" + }, + { + "componentName": "input", + "props": { + "type": "text" + } + }, + { + "componentName": "br" + }, + { + "componentName": "label", + "props": { + "for": "Female" }, - { - "text": "Button3", - "value": "3" + "children": "Female" + }, + { + "componentName": "input", + "props": { + "type": "text" } - ], - "modelValue": "1" - } + } + ] } - }, + } + ] + }, + { + "group": "element-plus", + "label": { + "zh_CN": "Element Plus组件" + }, + "children": [ { "name": { "zh_CN": "输入框" }, "icon": "input", "screenshot": "", - "snippetName": "TinyInput", - "schema": { - "componentName": "TinyInput", - "props": { - "placeholder": "请输入", - "modelValue": "" - } - } + "snippetName": "ElInput", + "schema": {} }, { "name": { - "zh_CN": "单选" + "zh_CN": "按钮" }, - "icon": "radio", + "icon": "button", "screenshot": "", - "snippetName": "TinyRadio", + "snippetName": "ElButton", "schema": { - "componentName": "TinyRadio", - "props": { - "label": "1", - "text": "单选文本" - } + "children": [ + { + "componentName": "Text", + "props": { + "text": "按钮文本" + } + } + ] } }, { "name": { - "zh_CN": "复选框" - }, - "icon": "checkbox", - "screenshot": "", - "snippetName": "TinyCheckbox", - "schema": { - "componentName": "TinyCheckbox", - "props": { - "text": "复选框文案" - } - } - } - ] - }, - { - "group": "navigation", - "children": [ - { - "name": { - "zh_CN": "搜索框" + "zh_CN": "表单" }, - "icon": "search", + "icon": "form", "screenshot": "", - "snippetName": "TinySearch", + "snippetName": "ElForm", "schema": { - "componentName": "TinySearch", - "props": { - "modelValue": "", - "placeholder": "输入关键词" - } + "children": [ + { + "componentName": "ElFormItem", + "props": { + "label": "账号", + "prop": "account" + }, + "children": [ + { + "componentName": "ElInput", + "props": { + "modelValue": "", + "placeholder": "请输入账号" + } + } + ] + }, + { + "componentName": "ElFormItem", + "props": { + "label": "密码", + "prop": "password" + }, + "children": [ + { + "componentName": "ElInput", + "props": { + "modelValue": "", + "placeholder": "请输入密码", + "type": "password" + } + } + ] + }, + { + "componentName": "ElFormItem", + "props": {}, + "children": [ + { + "componentName": "ElButton", + "props": { + "type": "primary", + "style": "margin-right: 10px" + }, + "children": [ + { + "componentName": "Text", + "props": { + "text": "提交" + } + } + ] + }, + { + "componentName": "ElButton", + "props": { + "type": "primary" + }, + "children": [ + { + "componentName": "Text", + "props": { + "text": "重置" + } + } + ] + } + ] + } + ] } }, { "name": { - "zh_CN": "时间线" + "zh_CN": "表格" }, - "icon": "timeline", + "icon": "grid", "screenshot": "", - "snippetName": "TinyTimeLine", + "snippetName": "ElTable", "schema": { - "componentName": "TinyTimeLine", "props": { - "active": "2", "data": [ { - "name": "已下单" + "date": "2016-05-03", + "name": "Tom", + "address": "No. 189, Grove St, Los Angeles" }, { - "name": "运输中" + "date": "2016-05-02", + "name": "Tom", + "address": "No. 189, Grove St, Los Angeles" }, { - "name": "已签收" + "date": "2016-05-04", + "name": "Tom", + "address": "No. 189, Grove St, Los Angeles" + }, + { + "date": "2016-05-01", + "name": "Tom", + "address": "No. 189, Grove St, Los Angeles" + } + ], + "columns": [ + { + "type": "index" + }, + { + "label": "Date", + "prop": "date" + }, + { + "label": "Name", + "prop": "name" + }, + { + "label": "Address", + "prop": "address" } ] } diff --git a/packages/plugins/materials/src/meta/component/src/Main.vue b/packages/plugins/materials/src/meta/component/src/Main.vue index 9ff75f76f..02121246c 100644 --- a/packages/plugins/materials/src/meta/component/src/Main.vue +++ b/packages/plugins/materials/src/meta/component/src/Main.vue @@ -4,7 +4,12 @@ - +