From 9b48fabd3a4731581a96d55d151eb5753ee0d283 Mon Sep 17 00:00:00 2001 From: ansgoo Date: Fri, 3 May 2024 12:59:12 +0800 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E4=BA=86?= =?UTF-8?q?=E5=BC=82=E6=AD=A5=E5=8A=A0=E8=BD=BD=E9=85=8D=E7=BD=AE=E6=95=B0?= =?UTF-8?q?=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/designer/src/data/DemoData/Pane.vue | 3 +- packages/designer/src/editor/Editor.vue | 66 +++++++++++++++---- .../LeftSideBar/Component/ComponentList.vue | 26 ++++++-- packages/designer/src/state/canvas.ts | 33 +++++++++- packages/designer/src/utils.ts | 46 +++++++++++-- 5 files changed, 149 insertions(+), 25 deletions(-) diff --git a/packages/designer/src/data/DemoData/Pane.vue b/packages/designer/src/data/DemoData/Pane.vue index 5bcc6b88..fc119c78 100644 --- a/packages/designer/src/data/DemoData/Pane.vue +++ b/packages/designer/src/data/DemoData/Pane.vue @@ -49,7 +49,7 @@ onMounted(async () => { const initData = async () => { const dataConfig = props.slotter.dataConfig - const exampleData = props.slotter.exampleData || {} + const exampleData = (await props.slotter.getExampleData()) || {} if (dataConfig && dataConfig.type === 'DEMO') { const acceptor = (resp) => { formData.data = JSON.stringify(resp.data, null, '\t') @@ -57,6 +57,7 @@ const initData = async () => { const instance = dataConfig.dataInstance instance.debug(acceptor) } else { + formData.data = JSON.stringify(exampleData, null, '\t') const dataConfig = { type: 'DEMO', dataInstance: new props.handler({ diff --git a/packages/designer/src/editor/Editor.vue b/packages/designer/src/editor/Editor.vue index 37e5dfbc..93bbac58 100644 --- a/packages/designer/src/editor/Editor.vue +++ b/packages/designer/src/editor/Editor.vue @@ -50,7 +50,8 @@ + + diff --git a/resources/Basic/BorderBox1/index.ts b/resources/Basic/BorderBox1/index.ts new file mode 100644 index 00000000..14777575 --- /dev/null +++ b/resources/Basic/BorderBox1/index.ts @@ -0,0 +1,7 @@ +import mainfest from './mainfest.json' + +export default { + component: () => import('./BorderBox.vue'), + panel: () => import('./panel'), + mainfest +} diff --git a/resources/Basic/BorderBox1/mainfest.json b/resources/Basic/BorderBox1/mainfest.json new file mode 100644 index 00000000..e21cde6b --- /dev/null +++ b/resources/Basic/BorderBox1/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "BorderBox", + "title": "测试边框", + "category": "BORDER", + "size": { + "width": 200, + "height": 200 + } +} \ No newline at end of file diff --git a/resources/Basic/BorderBox1/package.json b/resources/Basic/BorderBox1/package.json new file mode 100644 index 00000000..d8833905 --- /dev/null +++ b/resources/Basic/BorderBox1/package.json @@ -0,0 +1,15 @@ +{ + "name": "borderbox1", + "version": "1.0.0", + "description": "边框1", + "main": "index.ts", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "chenghaiwen", + "license": "Apache-2.0", + "dependencies": { + "@open-data-v/base":"workspace:*" + }, + "devDependencies": {} +} \ No newline at end of file diff --git a/resources/Basic/BorderBox1/panel.ts b/resources/Basic/BorderBox1/panel.ts new file mode 100644 index 00000000..216fc7e0 --- /dev/null +++ b/resources/Basic/BorderBox1/panel.ts @@ -0,0 +1,37 @@ +import { FormType } from '@open-data-v/base' + +export default { + style: [], + propValue: [ + { + label: '基础配置', + prop: 'base', + children: [ + { + prop: 'colorLeft', + label: '边框颜色1', + type: FormType.COLOR, + props: { + defaultValue: '#4fd2dd' + } + }, + { + prop: 'colorRight', + label: '边框颜色2', + type: FormType.COLOR, + props: { + defaultValue: '#235fa7' + } + }, + { + prop: 'backgroundColor', + label: '底色', + type: FormType.COLOR, + props: { + defaultValue: 'transparent' + } + } + ] + } + ] +} diff --git a/resources/Basic/BorderBox1/type.ts b/resources/Basic/BorderBox1/type.ts new file mode 100644 index 00000000..daf9d765 --- /dev/null +++ b/resources/Basic/BorderBox1/type.ts @@ -0,0 +1,7 @@ +export interface BorderBox { + base: { + colorLeft: string + colorRight: string + backgroundColor: string + } +} diff --git a/resources/Basic/Image/Image.vue b/resources/Basic/Image/Image.vue new file mode 100644 index 00000000..aacf9c3a --- /dev/null +++ b/resources/Basic/Image/Image.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/resources/Basic/Image/index.ts b/resources/Basic/Image/index.ts new file mode 100644 index 00000000..3e89ffba --- /dev/null +++ b/resources/Basic/Image/index.ts @@ -0,0 +1,7 @@ +import mainfest from './mainfest.json' + +export default { + component: () => import('./Image.vue'), + panel: () => import('./panel'), + mainfest +} diff --git a/resources/Basic/Image/mainfest.json b/resources/Basic/Image/mainfest.json new file mode 100644 index 00000000..4c696e9a --- /dev/null +++ b/resources/Basic/Image/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "ImgView", + "title": "图片测试", + "category": "BASIC", + "size": { + "width": 200, + "height": 200 + } +} \ No newline at end of file diff --git a/resources/Basic/Image/package.json b/resources/Basic/Image/package.json new file mode 100644 index 00000000..4f5b3f16 --- /dev/null +++ b/resources/Basic/Image/package.json @@ -0,0 +1,16 @@ +{ + "name": "image", + "version": "1.0.0", + "description": "图片组件", + "main": "index.ts", + "scripts": {}, + "keywords": [ + "OpenDataV" + ], + "author": "chenghaiwen", + "license": "Apache-2.0", + "dependencies": { + "@open-data-v/base":"workspace:*" + }, + "devDependencies": {} +} diff --git a/resources/Basic/Image/panel.ts b/resources/Basic/Image/panel.ts new file mode 100644 index 00000000..c724b278 --- /dev/null +++ b/resources/Basic/Image/panel.ts @@ -0,0 +1,21 @@ +import { FormType } from '@open-data-v/base' + +export default { + style: [], + propValue: [ + { + label: '背景设置', + prop: 'back', + children: [ + { + prop: 'background', + label: '背景', + type: FormType.BACKGROUND, + props: { + defaultValue: { backgroundColor: '#14c9c9' } + } + } + ] + } + ] +} diff --git a/resources/Chart/BasicBarChart/BasicBarChart.vue b/resources/Chart/BasicBarChart/BasicBarChart.vue new file mode 100644 index 00000000..44b00c7f --- /dev/null +++ b/resources/Chart/BasicBarChart/BasicBarChart.vue @@ -0,0 +1,155 @@ + + + diff --git a/resources/Chart/BasicBarChart/index.ts b/resources/Chart/BasicBarChart/index.ts new file mode 100644 index 00000000..34a29296 --- /dev/null +++ b/resources/Chart/BasicBarChart/index.ts @@ -0,0 +1,7 @@ +import mainfest from './mainfest.json' + +export default { + component: () => import('./BasicBarChart.vue'), + panel: () => import('./panel'), + mainfest +} diff --git a/resources/Chart/BasicBarChart/mainfest.json b/resources/Chart/BasicBarChart/mainfest.json new file mode 100644 index 00000000..4489372e --- /dev/null +++ b/resources/Chart/BasicBarChart/mainfest.json @@ -0,0 +1,10 @@ +{ + "name": "BasicBarChart1", + "title": "基础柱状图1", + "category": "BAR", + "size": { + "width": 500, + "height": 170 + }, + "dataMode": "UNIVERSAL" +} \ No newline at end of file diff --git a/resources/Chart/BasicBarChart/panel.ts b/resources/Chart/BasicBarChart/panel.ts new file mode 100644 index 00000000..459ceb98 --- /dev/null +++ b/resources/Chart/BasicBarChart/panel.ts @@ -0,0 +1,215 @@ +import { FormType } from '@open-data-v/base' + +export default { + style: [], + propValue: [ + { + label: '数据配置', + prop: 'data', + children: [ + { + prop: 'upperLimit', + label: '上限', + type: FormType.NUMBER, + componentOptions: { + defaultValue: 150 + } + }, + { + prop: 'lowerLimit', + label: '下限', + type: FormType.NUMBER, + props: { + defaultValue: 0 + } + }, + { + prop: 'max', + label: '最大值', + type: FormType.TEXT, + props: { + defaultValue: 'dataMax' + } + }, + { + prop: 'min', + label: '最小值', + type: FormType.TEXT, + props: { + defaultValue: '0' + } + }, + { + prop: 'maxOffset', + label: '最大偏移值', + type: FormType.NUMBER, + props: { + defaultValue: 0 + } + }, + { + prop: 'minOffset', + label: '最小偏移值', + type: FormType.NUMBER, + props: { + defaultValue: 0 + } + } + ] + }, + { + label: '标签配置', + prop: 'label', + children: [ + { + prop: 'axisLabelColor', + label: 'label颜色', + type: FormType.COLOR, + props: { + defaultValue: '#3DE7C9' + } + }, + { + prop: 'axisColor', + label: '颜色1', + type: FormType.COLOR, + props: { + defaultValue: '#3DE7C9' + } + } + ] + }, + { + label: '坐标轴配置', + prop: 'axis', + children: [ + { + prop: 'axisColor', + label: '轴线颜色', + type: FormType.COLOR, + props: { + defaultValue: '#00BAFF' + } + }, + { + prop: 'axisLabelColor', + label: '轴线文字颜色', + type: FormType.COLOR, + props: { + defaultValue: '#00BAFF' + } + }, + { + prop: 'xshow', + label: 'X网格线是否显示', + type: FormType.SWITCH, + props: { + defaultValue: true + } + }, + { + prop: 'yshow', + label: 'Y网格线是否显示', + type: FormType.SWITCH, + props: { + defaultValue: true + } + }, + { + prop: 'xLineType', + label: 'X轴网格线样式', + type: FormType.SELECT, + props: { + defaultValue: 'dotted', + options: [ + { value: 'solid', label: 'solid' }, + { value: 'dotted', label: 'dotted' }, + { value: 'dashed', label: 'dashed' } + ] + } + }, + { + prop: 'yLineType', + label: 'Y轴网格线样式', + type: FormType.SELECT, + props: { + defaultValue: 'dotted', + options: [ + { value: 'solid', label: 'solid' }, + { value: 'dotted', label: 'dotted' }, + { value: 'dashed', label: 'dashed' } + ] + } + }, + { + prop: 'xAxisLineColor', + label: 'x轴网格线颜色', + type: FormType.COLOR, + props: { + defaultValue: '#3391E4' + } + }, + { + prop: 'yAxisLineColor', + label: 'y轴网格线颜色', + type: FormType.COLOR, + props: { + defaultValue: '#3391E4' + } + } + ] + }, + { + label: '测试', + prop: 'test', + children: [ + { + prop: 'axisColor', + label: '轴线颜色', + type: FormType.COLOR, + props: { + defaultValue: '#00BAFF' + } + }, + { + prop: 'axisLabelColor', + label: '轴线文字颜色', + type: FormType.MODAL, + children: [ + { + prop: 'axisColor23', + label: '轴线颜色', + type: FormType.COLOR, + props: { + defaultValue: '#00BAFF' + } + }, + { + prop: 'axisLabelColor', + label: '颜色1', + type: FormType.COLOR, + props: { + defaultValue: '#3DE7C9' + } + } + ], + props: { + buttonText: '测试', + defaultValue: '' + } + } + ] + } + ], + demoLoader: () => { + return [ + { label: '秦', value: Math.round(Math.random() * 100) }, + { label: '齐', value: Math.round(Math.random() * 100) }, + { label: '楚', value: Math.round(Math.random() * 100) }, + { label: '赵', value: Math.round(Math.random() * 100) }, + { label: '燕', value: Math.round(Math.random() * 100) }, + { label: '韩', value: Math.round(Math.random() * 100) }, + { label: '魏', value: Math.round(Math.random() * 100) } + ] + } +} diff --git a/resources/Chart/BasicBarChart/type.ts b/resources/Chart/BasicBarChart/type.ts new file mode 100644 index 00000000..49686861 --- /dev/null +++ b/resources/Chart/BasicBarChart/type.ts @@ -0,0 +1,27 @@ +type ZRLineType = 'solid' | 'dotted' | 'dashed' | number | number[] +export interface BasicLineChart { + data: { + upperLimit: number + lowerLimit: number + min: string | undefined + max: string | undefined + minOffset: number + maxOffset: number + } + label: { + axisLabelColor: string + axisColor: string + } + axis: { + xshow: boolean + xcolor: string + yshow: boolean + ycolor: string + xLineType: ZRLineType + yLineType: ZRLineType + yAxisLineColor: string + xAxisLineColor: string + axisLabelColor: string + axisColor: string + } +} diff --git a/resources/Chart/hooks.ts b/resources/Chart/hooks.ts new file mode 100644 index 00000000..46ccd2f4 --- /dev/null +++ b/resources/Chart/hooks.ts @@ -0,0 +1,41 @@ +import * as echarts from 'echarts' +import type { Ref } from 'vue' +import { onMounted, onUnmounted } from 'vue' + +import mydark from './theme' + +type EchartOption = echarts.EChartsOption | any +// 图表大小改变 +export const useEchart = (chartEl: Ref) => { + echarts.registerTheme('mydark', mydark) + let chart: Nullable = null + + onMounted(() => { + if (chartEl.value) { + chart = echarts.init(chartEl.value, 'mydark') + chart.clear() + } + }) + + const resizeHandler = (entry: ResizeObserverEntry) => { + const { width, height } = entry.contentRect + chart?.resize({ width, height }) + } + + onUnmounted(() => { + if (chart) { + chart.clear() + chart.dispose() + } + }) + + const updateEchart = (option: EchartOption) => { + try { + chart?.setOption(option) + } catch (e) { + console.log(e) + } + } + + return { updateEchart, resizeHandler } +} diff --git a/resources/Chart/index.ts b/resources/Chart/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/resources/Chart/package.json b/resources/Chart/package.json new file mode 100644 index 00000000..186e3251 --- /dev/null +++ b/resources/Chart/package.json @@ -0,0 +1,17 @@ +{ + "name": "echarts", + "version": "1.0.0", + "description": "echarts组件", + "main": "index.ts", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "chenghaiwen", + "license": "Apache-2.0", + "dependencies": { + "echarts": "^5.3.3", + "echarts-liquidfill": "^3.1.0", + "@open-data-v/base":"workspace:*" + } +} diff --git a/resources/Chart/theme.ts b/resources/Chart/theme.ts new file mode 100644 index 00000000..d4f5aa35 --- /dev/null +++ b/resources/Chart/theme.ts @@ -0,0 +1,379 @@ +const theme = { + color: [ + '#194f97', + '#bd6b08', + '#00686b', + '#c82d31', + '#625ba1', + '#898989', + '#9c9800', + '#007f54', + '#a195c5', + '#103667', + 'f19272' + ], + backgroundColor: 'rgba(251,251,251,0)', + textStyle: {}, + title: { + textStyle: { + color: '#ffffff' + }, + subtextStyle: { + color: '#ffffff' + } + }, + line: { + itemStyle: { + borderWidth: 1 + }, + lineStyle: { + width: 2 + }, + symbolSize: 4, + symbol: 'circle', + smooth: false + }, + radar: { + itemStyle: { + borderWidth: 1 + }, + lineStyle: { + width: 2 + }, + symbolSize: 4, + symbol: 'circle', + smooth: false + }, + bar: { + itemStyle: { + borderWidth: 0 + } + }, + pie: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + scatter: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + boxplot: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + parallel: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + sankey: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + funnel: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + gauge: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + candlestick: { + itemStyle: { + color: '#fd1050', + color0: '#0cf49b', + borderColor: '#fd1050', + borderColor0: '#0cf49b', + borderWidth: 1 + } + }, + graph: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + }, + lineStyle: { + width: 1, + color: '#aaaaaa' + }, + symbolSize: 4, + symbol: 'circle', + smooth: false, + color: [ + '#dd6b66', + '#759aa0', + '#e69d87', + '#8dc1a9', + '#ea7e53', + '#eedd78', + '#73a373', + '#73b9bc', + '#7289ab', + '#91ca8c', + '#f49f42' + ], + label: { + color: '#ffffff' + } + }, + map: { + itemStyle: { + areaColor: '#eee', + borderColor: '#444', + borderWidth: 0.5 + }, + label: { + color: '#000' + }, + emphasis: { + itemStyle: { + areaColor: 'rgba(255,215,0,0.8)', + borderColor: '#444', + borderWidth: 1 + }, + label: { + color: 'rgb(100,0,0)' + } + } + }, + geo: { + itemStyle: { + areaColor: '#eee', + borderColor: '#444', + borderWidth: 0.5 + }, + label: { + color: '#000' + }, + emphasis: { + itemStyle: { + areaColor: 'rgba(255,215,0,0.8)', + borderColor: '#444', + borderWidth: 1 + }, + label: { + color: 'rgb(100,0,0)' + } + } + }, + categoryAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#ffffff' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#ffffff' + } + }, + axisLabel: { + show: true, + color: '#ffffff' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#aaaaaa'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['#eeeeee'] + } + } + }, + valueAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#ffffff' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#ffffff' + } + }, + axisLabel: { + show: true, + color: '#ffffff' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#aaaaaa'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['#eeeeee'] + } + } + }, + logAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#ffffff' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#ffffff' + } + }, + axisLabel: { + show: true, + color: '#ffffff' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#aaaaaa'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['#eeeeee'] + } + } + }, + timeAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#ffffff' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#ffffff' + } + }, + axisLabel: { + show: true, + color: '#ffffff' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#aaaaaa'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['#eeeeee'] + } + } + }, + toolbox: { + iconStyle: { + borderColor: '#999999' + }, + emphasis: { + iconStyle: { + borderColor: '#666666' + } + } + }, + legend: { + textStyle: { + color: '#ffffff' + } + }, + tooltip: { + axisPointer: { + lineStyle: { + color: '#eeeeee', + width: '1' + }, + crossStyle: { + color: '#eeeeee', + width: '1' + } + } + }, + timeline: { + lineStyle: { + color: '#eeeeee', + width: 1 + }, + itemStyle: { + color: '#dd6b66', + borderWidth: 1 + }, + controlStyle: { + color: '#eeeeee', + borderColor: '#eeeeee', + borderWidth: 0.5 + }, + checkpointStyle: { + color: '#e43c59', + borderColor: '#c23531' + }, + label: { + color: '#eeeeee' + }, + emphasis: { + itemStyle: { + color: '#a9334c' + }, + controlStyle: { + color: '#eeeeee', + borderColor: '#eeeeee', + borderWidth: 0.5 + }, + label: { + color: '#eeeeee' + } + } + }, + visualMap: { + color: ['#bf444c', '#d88273', '#f6efa6'] + }, + dataZoom: { + backgroundColor: 'rgba(47,69,84,0)', + dataBackgroundColor: 'rgba(255,255,255,0.3)', + fillerColor: 'rgba(167,183,204,0.4)', + handleColor: '#a7b7cc', + handleSize: '100%', + textStyle: { + color: '#eeeeee' + } + }, + markPoint: { + label: { + color: '#ffffff' + }, + emphasis: { + label: { + color: '#ffffff' + } + } + } +} + +export default theme diff --git a/resources/Chart/utils.ts b/resources/Chart/utils.ts new file mode 100644 index 00000000..8312d2ed --- /dev/null +++ b/resources/Chart/utils.ts @@ -0,0 +1,9 @@ +export const compareResetValue = (value: number, upperLimit: number, lowLimit: number): number => { + if (value < lowLimit) { + return lowLimit + } else if (value > upperLimit) { + return upperLimit + } else { + return value + } +} diff --git a/resources/Gauge/Gauge.vue b/resources/Gauge/Gauge.vue new file mode 100644 index 00000000..93b42c84 --- /dev/null +++ b/resources/Gauge/Gauge.vue @@ -0,0 +1,166 @@ + + + + + diff --git a/resources/Gauge/index.ts b/resources/Gauge/index.ts new file mode 100644 index 00000000..bff4c58a --- /dev/null +++ b/resources/Gauge/index.ts @@ -0,0 +1,7 @@ +import mainfest from './mainfest.json' + +export default { + component: () => import('./Gauge.vue'), + panel: () => import('./panel'), + mainfest +} diff --git a/resources/Gauge/mainfest.json b/resources/Gauge/mainfest.json new file mode 100644 index 00000000..8259e3a0 --- /dev/null +++ b/resources/Gauge/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "Gauge2", + "title": "2#仪表盘", + "category": "GAUGE", + "size": { + "width": 200, + "height": 200 + } +} \ No newline at end of file diff --git a/resources/Gauge/package.json b/resources/Gauge/package.json new file mode 100644 index 00000000..c65a2eb0 --- /dev/null +++ b/resources/Gauge/package.json @@ -0,0 +1,16 @@ +{ + "name": "gauge", + "version": "1.0.0", + "description": "1#仪表盘", + "main": "index.ts", + "scripts": {}, + "keywords": [ + "OpenDataV" + ], + "author": "chenghaiwen", + "license": "Apache-2.0", + "dependencies": { + "@open-data-v/base":"workspace:*" + }, + "devDependencies": {} +} diff --git a/resources/Gauge/panel.ts b/resources/Gauge/panel.ts new file mode 100644 index 00000000..896a1aa2 --- /dev/null +++ b/resources/Gauge/panel.ts @@ -0,0 +1,108 @@ +import { FormType } from '@open-data-v/base' +import { h } from 'vue' + +export default { + style: [ + { + label: '字体设置', + prop: 'font', + children: [ + { + prop: 'color', + label: '颜色', + type: FormType.COLOR, + props: { + defaultValue: '#03A6E0CC' + } + }, + { + prop: 'fontSize', + label: '字体大小', + type: FormType.NUMBER, + props: { + defaultValue: 40, + suffix: () => h('span', {}, 'px') + } + }, + { + prop: 'fontWeight', + label: '字体宽度', + type: FormType.NUMBER, + props: { + defaultValue: 800 + } + }, + { + prop: 'fontFamily', + label: '字体', + type: FormType.FONT_STYLE, + props: { + defaultValue: 'Arial' + } + } + ] + } + ], + propValue: [ + { + label: '数据配置', + prop: 'data', + children: [ + { + prop: 'history', + label: '历史数据地址', + type: FormType.TEXT, + props: { + defaultValue: '' + } + }, + { + prop: 'datatag', + label: '数据标签', + type: FormType.TEXT, + props: { + defaultValue: '' + } + }, + { + prop: 'maxValue', + label: '最大值', + type: FormType.NUMBER, + props: { + defaultValue: 150 + } + } + ] + }, + { + label: '属性配置', + prop: 'attr', + children: [ + { + prop: 'color1', + label: '颜色1', + type: FormType.COLOR, + props: { + defaultValue: '#03A6E0CC' + } + }, + { + prop: 'color2', + label: '颜色2', + type: FormType.COLOR, + props: { + defaultValue: '#03A6E04D' + } + }, + { + prop: 'unit', + label: '单位', + type: FormType.TEXT, + props: { + defaultValue: '' + } + } + ] + } + ] +} diff --git a/resources/Gauge/type.ts b/resources/Gauge/type.ts new file mode 100644 index 00000000..cf7c9933 --- /dev/null +++ b/resources/Gauge/type.ts @@ -0,0 +1,12 @@ +export interface Gauge { + data: { + history: string + datatag: string + maxValue: number + } + attr: { + color1: string + color2: string + unit: string + } +} diff --git a/resources/components.ts b/resources/components.ts new file mode 100644 index 00000000..9054e845 --- /dev/null +++ b/resources/components.ts @@ -0,0 +1,11 @@ +import BorderBox1 from './Basic/BorderBox1' +import Image from './Basic/Image' +import Gauge from './Gauge' +import BasicBarChart from './Chart/BasicBarChart' + +export default { + Image, + BorderBox1, + Gauge, + BasicBarChart +} From 520203f574a40edb5a6d964bf8275bfe556a9e6e Mon Sep 17 00:00:00 2001 From: ansgoo Date: Fri, 3 May 2024 21:29:25 +0800 Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=BA=86?= =?UTF-8?q?=E6=96=B0=E7=9A=84=E9=85=8D=E7=BD=AE=E9=A1=B9=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resource/Basic/Image/index.ts | 6 +++--- resource/Basic/Image/mainfest.json | 16 ++++++++-------- resource/Basic/Video/FlvVideo/index.ts | 6 +++--- resource/Basic/Video/FlvVideo/mainfest.json | 16 ++++++++-------- resource/Border/BorderBox1/index.ts | 4 ++-- resource/Border/BorderBox1/mainfest.json | 16 ++++++++-------- resource/Border/BorderBox2/index.ts | 6 +++--- resource/Border/BorderBox2/mainfest.json | 16 ++++++++-------- resource/Border/BorderBox3/index.ts | 6 +++--- resource/Border/BorderBox3/mainfest.json | 16 ++++++++-------- resource/Border/BorderBox4/index.ts | 6 +++--- resource/Border/BorderBox4/mainfest.json | 9 +++++++++ resource/Border/BorderBox5/index.ts | 6 +++--- resource/Border/BorderBox5/mainfest.json | 9 +++++++++ resource/Border/BorderBox6/index.ts | 6 +++--- resource/Border/BorderBox6/mainfest.json | 9 +++++++++ resource/Border/BorderBox7/index.ts | 6 +++--- resource/Border/BorderBox7/mainfest.json | 9 +++++++++ resource/Border/BorderImage/index.ts | 6 +++--- resource/Border/BorderImage/mainfest.json | 9 +++++++++ resource/Container/Tabs/mainfest.json | 9 +++++++++ resource/Decoration/Decoration1/index.ts | 6 +++--- resource/Decoration/Decoration1/mainfest.json | 9 +++++++++ resource/Decoration/Decoration2/index.ts | 6 +++--- resource/Decoration/Decoration2/mainfest.json | 9 +++++++++ resource/Decoration/Decoration3/index.ts | 6 +++--- resource/Decoration/Decoration3/mainfest.json | 9 +++++++++ resource/Decoration/Decoration4/index.ts | 6 +++--- resource/Decoration/Decoration4/mainfest.json | 9 +++++++++ resource/Gauge/Gauge1/index.ts | 6 +++--- resource/Gauge/Gauge1/mainfest.json | 9 +++++++++ resource/Progress/Progress/index.ts | 7 ++++--- resource/Progress/Progress/mainfest.json | 9 +++++++++ resource/Progress/RankBoard/index.ts | 6 +++--- resource/Progress/RankBoard/mainfest.json | 10 ++++++++++ resource/Table/ScrollTable/index.ts | 6 +++--- resource/Table/ScrollTable/mainfest.json | 10 ++++++++++ resource/Text/DateText/index.ts | 6 +++--- resource/Text/DateText/mainfest.json | 9 +++++++++ resource/Text/StaticText/index.ts | 7 +++---- resource/Text/StaticText/mainfest.json | 9 +++++++++ resource/Text/SubText/index.ts | 6 +++--- resource/Text/SubText/mainfest.json | 9 +++++++++ resource/echarts/BarChart/BasicBarChart/index.ts | 6 +++--- .../echarts/BarChart/BasicBarChart/mainfest.json | 10 ++++++++++ .../BarChart/StereoscopicLineChart/index.ts | 6 +++--- .../BarChart/StereoscopicLineChart/mainfest.json | 10 ++++++++++ resource/echarts/ComChart/index.ts | 6 +++--- resource/echarts/ComChart/mainfest.json | 10 ++++++++++ .../echarts/LineChart/BasicLineChart/index.ts | 6 +++--- .../LineChart/BasicLineChart/mainfest.json | 10 ++++++++++ resource/echarts/MapChart/MapChart/index.ts | 6 +++--- resource/echarts/MapChart/MapChart/mainfest.json | 10 ++++++++++ resource/echarts/PieChart/BasicPieChart/index.ts | 6 +++--- .../echarts/PieChart/BasicPieChart/mainfest.json | 10 ++++++++++ resource/echarts/WaterChart/WaveChart/index.ts | 6 +++--- .../echarts/WaterChart/WaveChart/mainfest.json | 10 ++++++++++ 57 files changed, 349 insertions(+), 124 deletions(-) create mode 100644 resource/Border/BorderBox4/mainfest.json create mode 100644 resource/Border/BorderBox5/mainfest.json create mode 100644 resource/Border/BorderBox6/mainfest.json create mode 100644 resource/Border/BorderBox7/mainfest.json create mode 100644 resource/Border/BorderImage/mainfest.json create mode 100644 resource/Container/Tabs/mainfest.json create mode 100644 resource/Decoration/Decoration1/mainfest.json create mode 100644 resource/Decoration/Decoration2/mainfest.json create mode 100644 resource/Decoration/Decoration3/mainfest.json create mode 100644 resource/Decoration/Decoration4/mainfest.json create mode 100644 resource/Gauge/Gauge1/mainfest.json create mode 100644 resource/Progress/Progress/mainfest.json create mode 100644 resource/Progress/RankBoard/mainfest.json create mode 100644 resource/Table/ScrollTable/mainfest.json create mode 100644 resource/Text/DateText/mainfest.json create mode 100644 resource/Text/StaticText/mainfest.json create mode 100644 resource/Text/SubText/mainfest.json create mode 100644 resource/echarts/BarChart/BasicBarChart/mainfest.json create mode 100644 resource/echarts/BarChart/StereoscopicLineChart/mainfest.json create mode 100644 resource/echarts/ComChart/mainfest.json create mode 100644 resource/echarts/LineChart/BasicLineChart/mainfest.json create mode 100644 resource/echarts/MapChart/MapChart/mainfest.json create mode 100644 resource/echarts/PieChart/BasicPieChart/mainfest.json create mode 100644 resource/echarts/WaterChart/WaveChart/mainfest.json diff --git a/resource/Basic/Image/index.ts b/resource/Basic/Image/index.ts index 997c812f..a7aa5da0 100644 --- a/resource/Basic/Image/index.ts +++ b/resource/Basic/Image/index.ts @@ -1,7 +1,7 @@ -import ImageComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, component: () => import('./Image.vue'), - config: ImageComponent + config: () => import('./config'), + mainfest } diff --git a/resource/Basic/Image/mainfest.json b/resource/Basic/Image/mainfest.json index 6684a985..53454c27 100644 --- a/resource/Basic/Image/mainfest.json +++ b/resource/Basic/Image/mainfest.json @@ -1,9 +1,9 @@ -{ - "name": "Image", - "title": "图片", - "category": "BASIC", - "metaData": { - "width": 200, - "height": 200 - } +{ + "name": "Image", + "title": "图片", + "category": "BASIC", + "size": { + "width": 200, + "height": 200 + } } \ No newline at end of file diff --git a/resource/Basic/Video/FlvVideo/index.ts b/resource/Basic/Video/FlvVideo/index.ts index 9f42b9b5..567fd765 100644 --- a/resource/Basic/Video/FlvVideo/index.ts +++ b/resource/Basic/Video/FlvVideo/index.ts @@ -1,7 +1,7 @@ -import FlvVideo, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, component: () => import('./FlvVideo.vue'), - config: FlvVideo + config: () => import('./config'), + mainfest } diff --git a/resource/Basic/Video/FlvVideo/mainfest.json b/resource/Basic/Video/FlvVideo/mainfest.json index 75a1758a..63137b96 100644 --- a/resource/Basic/Video/FlvVideo/mainfest.json +++ b/resource/Basic/Video/FlvVideo/mainfest.json @@ -1,9 +1,9 @@ -{ - "name": "FlvVideo", - "title": "视频", - "category": "BASIC", - "metaData": { - "width": 400, - "height": 225 - } +{ + "name": "FlvVideo", + "title": "视频", + "category": "BASIC", + "size": { + "width": 400, + "height": 225 + } } \ No newline at end of file diff --git a/resource/Border/BorderBox1/index.ts b/resource/Border/BorderBox1/index.ts index 2c99ea10..f2cfd1fb 100644 --- a/resource/Border/BorderBox1/index.ts +++ b/resource/Border/BorderBox1/index.ts @@ -1,7 +1,7 @@ -import BorderBox, { componentName } from './config' +import BorderBoxComponent, { componentName } from './config' export default { componentName, component: () => import('./BorderBox.vue'), - config: BorderBox + config: BorderBoxComponent } diff --git a/resource/Border/BorderBox1/mainfest.json b/resource/Border/BorderBox1/mainfest.json index aa1439be..1c0ffe2b 100644 --- a/resource/Border/BorderBox1/mainfest.json +++ b/resource/Border/BorderBox1/mainfest.json @@ -1,9 +1,9 @@ -{ - "name": "BorderBox1", - "title": "1#边框'", - "category": "BORDER", - "metaData": { - "width": 200, - "height": 200 - } +{ + "name": "BorderBox1", + "title": "1#边框", + "category": "BORDER", + "size": { + "width": 200, + "height": 200 + } } \ No newline at end of file diff --git a/resource/Border/BorderBox2/index.ts b/resource/Border/BorderBox2/index.ts index efdaec39..ca91e9fb 100644 --- a/resource/Border/BorderBox2/index.ts +++ b/resource/Border/BorderBox2/index.ts @@ -1,7 +1,7 @@ -import BorderBox2, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./BorderBox.vue'), - config: BorderBox2 + mainfest } diff --git a/resource/Border/BorderBox2/mainfest.json b/resource/Border/BorderBox2/mainfest.json index 2d56f1ac..d8090c87 100644 --- a/resource/Border/BorderBox2/mainfest.json +++ b/resource/Border/BorderBox2/mainfest.json @@ -1,9 +1,9 @@ -{ - "name": "BorderBox2", - "title": "2#边框'", - "category": "BORDER", - "metaData": { - "width": 200, - "height": 200 - } +{ + "name": "BorderBox2", + "title": "2#边框", + "category": "BORDER", + "size": { + "width": 200, + "height": 200 + } } \ No newline at end of file diff --git a/resource/Border/BorderBox3/index.ts b/resource/Border/BorderBox3/index.ts index 2adc263e..ca91e9fb 100644 --- a/resource/Border/BorderBox3/index.ts +++ b/resource/Border/BorderBox3/index.ts @@ -1,7 +1,7 @@ -import BorderBox3, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./BorderBox.vue'), - config: BorderBox3 + mainfest } diff --git a/resource/Border/BorderBox3/mainfest.json b/resource/Border/BorderBox3/mainfest.json index e327be31..6dbb4628 100644 --- a/resource/Border/BorderBox3/mainfest.json +++ b/resource/Border/BorderBox3/mainfest.json @@ -1,9 +1,9 @@ -{ - "name": "BorderBox3", - "title": "3#边框'", - "category": "BORDER", - "metaData": { - "width": 200, - "height": 200 - } +{ + "name": "BorderBox3", + "title": "3#边框", + "category": "BORDER", + "size": { + "width": 200, + "height": 200 + } } \ No newline at end of file diff --git a/resource/Border/BorderBox4/index.ts b/resource/Border/BorderBox4/index.ts index 33298bfc..ca91e9fb 100644 --- a/resource/Border/BorderBox4/index.ts +++ b/resource/Border/BorderBox4/index.ts @@ -1,7 +1,7 @@ -import BorderBox4, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./BorderBox.vue'), - config: BorderBox4 + mainfest } diff --git a/resource/Border/BorderBox4/mainfest.json b/resource/Border/BorderBox4/mainfest.json new file mode 100644 index 00000000..b7f8efe9 --- /dev/null +++ b/resource/Border/BorderBox4/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "BorderBox4", + "title": "4#边框", + "category": "BORDER", + "size": { + "width": 200, + "height": 200 + } +} \ No newline at end of file diff --git a/resource/Border/BorderBox5/index.ts b/resource/Border/BorderBox5/index.ts index bfb19749..ca91e9fb 100644 --- a/resource/Border/BorderBox5/index.ts +++ b/resource/Border/BorderBox5/index.ts @@ -1,7 +1,7 @@ -import BorderBox5, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./BorderBox.vue'), - config: BorderBox5 + mainfest } diff --git a/resource/Border/BorderBox5/mainfest.json b/resource/Border/BorderBox5/mainfest.json new file mode 100644 index 00000000..4ec13504 --- /dev/null +++ b/resource/Border/BorderBox5/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "BorderBox5", + "title": "5#边框", + "category": "BORDER", + "size": { + "width": 200, + "height": 200 + } +} \ No newline at end of file diff --git a/resource/Border/BorderBox6/index.ts b/resource/Border/BorderBox6/index.ts index b3fa7324..44ec5849 100644 --- a/resource/Border/BorderBox6/index.ts +++ b/resource/Border/BorderBox6/index.ts @@ -1,7 +1,7 @@ -import BorderBox6, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, component: () => import('./BorderBox.vue'), - config: BorderBox6 + config: () => import('./config'), + mainfest } diff --git a/resource/Border/BorderBox6/mainfest.json b/resource/Border/BorderBox6/mainfest.json new file mode 100644 index 00000000..483bfc38 --- /dev/null +++ b/resource/Border/BorderBox6/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "BorderBox6", + "title": "6#边框", + "category": "BORDER", + "size": { + "width": 200, + "height": 200 + } +} \ No newline at end of file diff --git a/resource/Border/BorderBox7/index.ts b/resource/Border/BorderBox7/index.ts index c4b4dea0..ca91e9fb 100644 --- a/resource/Border/BorderBox7/index.ts +++ b/resource/Border/BorderBox7/index.ts @@ -1,7 +1,7 @@ -import BorderBox7, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./BorderBox.vue'), - config: BorderBox7 + mainfest } diff --git a/resource/Border/BorderBox7/mainfest.json b/resource/Border/BorderBox7/mainfest.json new file mode 100644 index 00000000..764d120b --- /dev/null +++ b/resource/Border/BorderBox7/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "BorderBox7", + "title": "7#边框", + "category": "BORDER", + "size": { + "width": 459, + "height": 300 + } +} \ No newline at end of file diff --git a/resource/Border/BorderImage/index.ts b/resource/Border/BorderImage/index.ts index db5cf750..1ee8e3ce 100644 --- a/resource/Border/BorderImage/index.ts +++ b/resource/Border/BorderImage/index.ts @@ -1,7 +1,7 @@ -import BorderImage, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, component: () => import('./BorderImage.vue'), - config: BorderImage + config: () => import('./config'), + mainfest } diff --git a/resource/Border/BorderImage/mainfest.json b/resource/Border/BorderImage/mainfest.json new file mode 100644 index 00000000..23a3de01 --- /dev/null +++ b/resource/Border/BorderImage/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "BorderImage", + "title": "7#图片边框", + "category": "BORDER", + "size": { + "width": 300, + "height": 200 + } +} \ No newline at end of file diff --git a/resource/Container/Tabs/mainfest.json b/resource/Container/Tabs/mainfest.json new file mode 100644 index 00000000..5187f0c3 --- /dev/null +++ b/resource/Container/Tabs/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "Tabs", + "title": "标签页", + "category": "CONTAINER", + "size": { + "width": 400, + "height": 200 + } +} \ No newline at end of file diff --git a/resource/Decoration/Decoration1/index.ts b/resource/Decoration/Decoration1/index.ts index f81451af..500bd74d 100644 --- a/resource/Decoration/Decoration1/index.ts +++ b/resource/Decoration/Decoration1/index.ts @@ -1,7 +1,7 @@ -import Decoration, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./Decoration.vue'), - config: Decoration + mainfest } diff --git a/resource/Decoration/Decoration1/mainfest.json b/resource/Decoration/Decoration1/mainfest.json new file mode 100644 index 00000000..f774de31 --- /dev/null +++ b/resource/Decoration/Decoration1/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "Decoration1", + "title": "1#装饰", + "category": "DECORATION", + "size": { + "width": 200, + "height": 60 + } +} \ No newline at end of file diff --git a/resource/Decoration/Decoration2/index.ts b/resource/Decoration/Decoration2/index.ts index f81451af..500bd74d 100644 --- a/resource/Decoration/Decoration2/index.ts +++ b/resource/Decoration/Decoration2/index.ts @@ -1,7 +1,7 @@ -import Decoration, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./Decoration.vue'), - config: Decoration + mainfest } diff --git a/resource/Decoration/Decoration2/mainfest.json b/resource/Decoration/Decoration2/mainfest.json new file mode 100644 index 00000000..327e719f --- /dev/null +++ b/resource/Decoration/Decoration2/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "Decoration2", + "title": "2#装饰", + "category": "DECORATION", + "size": { + "width": 200, + "height": 60 + } +} \ No newline at end of file diff --git a/resource/Decoration/Decoration3/index.ts b/resource/Decoration/Decoration3/index.ts index f81451af..500bd74d 100644 --- a/resource/Decoration/Decoration3/index.ts +++ b/resource/Decoration/Decoration3/index.ts @@ -1,7 +1,7 @@ -import Decoration, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./Decoration.vue'), - config: Decoration + mainfest } diff --git a/resource/Decoration/Decoration3/mainfest.json b/resource/Decoration/Decoration3/mainfest.json new file mode 100644 index 00000000..88c0355c --- /dev/null +++ b/resource/Decoration/Decoration3/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "Decoration3", + "title": "3#装饰", + "category": "DECORATION", + "size": { + "width": 200, + "height": 60 + } +} \ No newline at end of file diff --git a/resource/Decoration/Decoration4/index.ts b/resource/Decoration/Decoration4/index.ts index f81451af..500bd74d 100644 --- a/resource/Decoration/Decoration4/index.ts +++ b/resource/Decoration/Decoration4/index.ts @@ -1,7 +1,7 @@ -import Decoration, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./Decoration.vue'), - config: Decoration + mainfest } diff --git a/resource/Decoration/Decoration4/mainfest.json b/resource/Decoration/Decoration4/mainfest.json new file mode 100644 index 00000000..52473726 --- /dev/null +++ b/resource/Decoration/Decoration4/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "Decoration4", + "title": "4#装饰", + "category": "DECORATION", + "size": { + "width": 200, + "height": 10 + } +} \ No newline at end of file diff --git a/resource/Gauge/Gauge1/index.ts b/resource/Gauge/Gauge1/index.ts index fae4a5c7..e37543b0 100644 --- a/resource/Gauge/Gauge1/index.ts +++ b/resource/Gauge/Gauge1/index.ts @@ -1,7 +1,7 @@ -import GaugeComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./Gauge.vue'), - config: GaugeComponent + mainfest } diff --git a/resource/Gauge/Gauge1/mainfest.json b/resource/Gauge/Gauge1/mainfest.json new file mode 100644 index 00000000..b6150948 --- /dev/null +++ b/resource/Gauge/Gauge1/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "Gauge1", + "title": "1#仪表盘", + "category": "GAUGE", + "size": { + "width": 200, + "height": 200 + } +} \ No newline at end of file diff --git a/resource/Progress/Progress/index.ts b/resource/Progress/Progress/index.ts index 6ffcffc9..ea3e1119 100644 --- a/resource/Progress/Progress/index.ts +++ b/resource/Progress/Progress/index.ts @@ -1,7 +1,8 @@ -import ProgressComponent, { componentName } from './config' +import ProgressComponent from './config' +import mainfest from './mainfest.json' export default { - componentName, component: () => import('./Progress.vue'), - config: ProgressComponent + config: ProgressComponent, + mainfest } diff --git a/resource/Progress/Progress/mainfest.json b/resource/Progress/Progress/mainfest.json new file mode 100644 index 00000000..4487284f --- /dev/null +++ b/resource/Progress/Progress/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "Progress", + "title": "进度条", + "category": "PROGERSS", + "size": { + "width": 800, + "height": 400 + } +} \ No newline at end of file diff --git a/resource/Progress/RankBoard/index.ts b/resource/Progress/RankBoard/index.ts index 03e7e5fd..c38fe9db 100644 --- a/resource/Progress/RankBoard/index.ts +++ b/resource/Progress/RankBoard/index.ts @@ -1,7 +1,7 @@ -import RankBoardComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, component: () => import('./RankBoard.vue'), - config: RankBoardComponent + config: () => import('./config'), + mainfest } diff --git a/resource/Progress/RankBoard/mainfest.json b/resource/Progress/RankBoard/mainfest.json new file mode 100644 index 00000000..65e1685e --- /dev/null +++ b/resource/Progress/RankBoard/mainfest.json @@ -0,0 +1,10 @@ +{ + "name": "ScrollRankingBoard", + "title": "排名板", + "category": "PROGERSS", + "size": { + "width": 800, + "height": 400 + }, + "dataMode": "UNIVERSAL" +} \ No newline at end of file diff --git a/resource/Table/ScrollTable/index.ts b/resource/Table/ScrollTable/index.ts index d597b2b5..1917e13a 100644 --- a/resource/Table/ScrollTable/index.ts +++ b/resource/Table/ScrollTable/index.ts @@ -1,7 +1,7 @@ -import ScrollTableComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./ScrollTable.vue'), - config: ScrollTableComponent + mainfest } diff --git a/resource/Table/ScrollTable/mainfest.json b/resource/Table/ScrollTable/mainfest.json new file mode 100644 index 00000000..8313c4d5 --- /dev/null +++ b/resource/Table/ScrollTable/mainfest.json @@ -0,0 +1,10 @@ +{ + "name": "ScrollTable", + "title": "滚动表格", + "category": "TABLE", + "size": { + "width": 400, + "height": 100 + }, + "dataMode": "UNIVERSAL" +} \ No newline at end of file diff --git a/resource/Text/DateText/index.ts b/resource/Text/DateText/index.ts index 1f9c1044..dc86247d 100644 --- a/resource/Text/DateText/index.ts +++ b/resource/Text/DateText/index.ts @@ -1,7 +1,7 @@ -import DateTextComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./DateText.vue'), - config: DateTextComponent + mainfest } diff --git a/resource/Text/DateText/mainfest.json b/resource/Text/DateText/mainfest.json new file mode 100644 index 00000000..232c58a3 --- /dev/null +++ b/resource/Text/DateText/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "DateText", + "title": "时间文本", + "category": "TEXT", + "size": { + "width": 200, + "height": 50 + } +} \ No newline at end of file diff --git a/resource/Text/StaticText/index.ts b/resource/Text/StaticText/index.ts index 5b061f85..407a15a8 100644 --- a/resource/Text/StaticText/index.ts +++ b/resource/Text/StaticText/index.ts @@ -1,8 +1,7 @@ -import StaticTextComponent, { componentName } from './config' -// import README from './README.md' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./StaticText.vue'), - config: StaticTextComponent + mainfest } diff --git a/resource/Text/StaticText/mainfest.json b/resource/Text/StaticText/mainfest.json new file mode 100644 index 00000000..ce6b476a --- /dev/null +++ b/resource/Text/StaticText/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "StaticText", + "title": "静态文本", + "category": "TEXT", + "size": { + "width": 150, + "height": 20 + } +} \ No newline at end of file diff --git a/resource/Text/SubText/index.ts b/resource/Text/SubText/index.ts index 2d853a2b..c771a874 100644 --- a/resource/Text/SubText/index.ts +++ b/resource/Text/SubText/index.ts @@ -1,7 +1,7 @@ -import SubTextComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./SubText.vue'), - config: SubTextComponent + mainfest } diff --git a/resource/Text/SubText/mainfest.json b/resource/Text/SubText/mainfest.json new file mode 100644 index 00000000..f383112b --- /dev/null +++ b/resource/Text/SubText/mainfest.json @@ -0,0 +1,9 @@ +{ + "name": "SubText", + "title": "数据订阅文本", + "category": "TEXT", + "size": { + "width": 100, + "height": 30 + } +} \ No newline at end of file diff --git a/resource/echarts/BarChart/BasicBarChart/index.ts b/resource/echarts/BarChart/BasicBarChart/index.ts index 71825f53..9b57e977 100644 --- a/resource/echarts/BarChart/BasicBarChart/index.ts +++ b/resource/echarts/BarChart/BasicBarChart/index.ts @@ -1,7 +1,7 @@ -import BasicBarChartComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, component: () => import('./BasicBarChart.vue'), - config: BasicBarChartComponent + config: () => import('./config'), + mainfest } diff --git a/resource/echarts/BarChart/BasicBarChart/mainfest.json b/resource/echarts/BarChart/BasicBarChart/mainfest.json new file mode 100644 index 00000000..5a4b0bda --- /dev/null +++ b/resource/echarts/BarChart/BasicBarChart/mainfest.json @@ -0,0 +1,10 @@ +{ + "name": "BasicBarChart", + "title": "基础柱状图", + "category": "BAR", + "size": { + "width": 500, + "height": 170 + }, + "dataMode": "UNIVERSAL" +} \ No newline at end of file diff --git a/resource/echarts/BarChart/StereoscopicLineChart/index.ts b/resource/echarts/BarChart/StereoscopicLineChart/index.ts index 4f13c91d..7a51ff53 100644 --- a/resource/echarts/BarChart/StereoscopicLineChart/index.ts +++ b/resource/echarts/BarChart/StereoscopicLineChart/index.ts @@ -1,7 +1,7 @@ -import StereoscopicBarChartComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + config: () => import('./config'), component: () => import('./src/StereoscopicBarChart.vue'), - config: StereoscopicBarChartComponent + mainfest } diff --git a/resource/echarts/BarChart/StereoscopicLineChart/mainfest.json b/resource/echarts/BarChart/StereoscopicLineChart/mainfest.json new file mode 100644 index 00000000..fee2123f --- /dev/null +++ b/resource/echarts/BarChart/StereoscopicLineChart/mainfest.json @@ -0,0 +1,10 @@ +{ + "name": "StereoscopicBarChart", + "title": "立体柱状图", + "category": "BAR", + "size": { + "width": 500, + "height": 170 + }, + "dataMode": "UNIVERSAL" +} \ No newline at end of file diff --git a/resource/echarts/ComChart/index.ts b/resource/echarts/ComChart/index.ts index 59ebda8e..251ae402 100644 --- a/resource/echarts/ComChart/index.ts +++ b/resource/echarts/ComChart/index.ts @@ -1,7 +1,7 @@ -import ComChartComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, + mainfest, component: () => import('./ComChart.vue'), - config: ComChartComponent + config: () => import('./config') } diff --git a/resource/echarts/ComChart/mainfest.json b/resource/echarts/ComChart/mainfest.json new file mode 100644 index 00000000..90af22c0 --- /dev/null +++ b/resource/echarts/ComChart/mainfest.json @@ -0,0 +1,10 @@ +{ + "name": "ComChart", + "title": "通用Echart图", + "category": "OTHER", + "size": { + "width": 500, + "height": 170 + }, + "dataMode": "UNIVERSAL" +} \ No newline at end of file diff --git a/resource/echarts/LineChart/BasicLineChart/index.ts b/resource/echarts/LineChart/BasicLineChart/index.ts index ed372759..5fea9766 100644 --- a/resource/echarts/LineChart/BasicLineChart/index.ts +++ b/resource/echarts/LineChart/BasicLineChart/index.ts @@ -1,7 +1,7 @@ -import BasicLineChartComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, component: () => import('./BasicLineChart.vue'), - config: BasicLineChartComponent + config: () => import('./config'), + mainfest } diff --git a/resource/echarts/LineChart/BasicLineChart/mainfest.json b/resource/echarts/LineChart/BasicLineChart/mainfest.json new file mode 100644 index 00000000..c32cc82a --- /dev/null +++ b/resource/echarts/LineChart/BasicLineChart/mainfest.json @@ -0,0 +1,10 @@ +{ + "name": "BasicLineChart", + "title": "基础线图", + "category": "LINE", + "size": { + "width": 500, + "height": 170 + }, + "dataMode": "UNIVERSAL" +} \ No newline at end of file diff --git a/resource/echarts/MapChart/MapChart/index.ts b/resource/echarts/MapChart/MapChart/index.ts index 36915ef8..49ad0fef 100644 --- a/resource/echarts/MapChart/MapChart/index.ts +++ b/resource/echarts/MapChart/MapChart/index.ts @@ -1,7 +1,7 @@ -import MapChartComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, component: () => import('./src/MapChart.vue'), - config: MapChartComponent + config: () => import('./config'), + mainfest } diff --git a/resource/echarts/MapChart/MapChart/mainfest.json b/resource/echarts/MapChart/MapChart/mainfest.json new file mode 100644 index 00000000..0a819f16 --- /dev/null +++ b/resource/echarts/MapChart/MapChart/mainfest.json @@ -0,0 +1,10 @@ +{ + "name": "MapChart", + "title": "地图", + "category": "MAP", + "size": { + "width": 490, + "height": 408 + }, + "dataMode": "UNIVERSAL" +} \ No newline at end of file diff --git a/resource/echarts/PieChart/BasicPieChart/index.ts b/resource/echarts/PieChart/BasicPieChart/index.ts index da0330f9..14ff3a1b 100644 --- a/resource/echarts/PieChart/BasicPieChart/index.ts +++ b/resource/echarts/PieChart/BasicPieChart/index.ts @@ -1,7 +1,7 @@ -import BasicPieChartComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, component: () => import('./BasicPieChart.vue'), - config: BasicPieChartComponent + config: () => import('./config'), + mainfest } diff --git a/resource/echarts/PieChart/BasicPieChart/mainfest.json b/resource/echarts/PieChart/BasicPieChart/mainfest.json new file mode 100644 index 00000000..f36038a3 --- /dev/null +++ b/resource/echarts/PieChart/BasicPieChart/mainfest.json @@ -0,0 +1,10 @@ +{ + "name": "BasicPieChart", + "title": "基础饼状图", + "category": "PIE", + "size": { + "width": 520, + "height": 260 + }, + "dataMode": "UNIVERSAL" +} \ No newline at end of file diff --git a/resource/echarts/WaterChart/WaveChart/index.ts b/resource/echarts/WaterChart/WaveChart/index.ts index 12d6c1a3..8d7f1bb2 100644 --- a/resource/echarts/WaterChart/WaveChart/index.ts +++ b/resource/echarts/WaterChart/WaveChart/index.ts @@ -1,7 +1,7 @@ -import ProgressComponent, { componentName } from './config' +import mainfest from './mainfest.json' export default { - componentName, component: () => import('./WaveChart.vue'), - config: ProgressComponent + config: () => import('./config'), + mainfest } diff --git a/resource/echarts/WaterChart/WaveChart/mainfest.json b/resource/echarts/WaterChart/WaveChart/mainfest.json new file mode 100644 index 00000000..9ccaf782 --- /dev/null +++ b/resource/echarts/WaterChart/WaveChart/mainfest.json @@ -0,0 +1,10 @@ +{ + "name": "WaveChart", + "title": "水波图", + "category": "PROGERSS", + "size": { + "width": 200, + "height": 300 + }, + "dataMode": "UNIVERSAL" +} \ No newline at end of file From c94d4e2cc2bed55bd8a34eba41fa2485ec7495b4 Mon Sep 17 00:00:00 2001 From: ansgoo Date: Fri, 3 May 2024 21:29:41 +0800 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=BA=86?= =?UTF-8?q?=E6=96=B0=E7=9A=84=E9=85=8D=E7=BD=AE=E9=A1=B9=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/src/api/pages/type.ts | 1 + examples/src/load.ts | 11 +++++------ examples/src/pages/DesignerView/View.vue | 6 +----- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/examples/src/api/pages/type.ts b/examples/src/api/pages/type.ts index f53e490a..260bd99c 100644 --- a/examples/src/api/pages/type.ts +++ b/examples/src/api/pages/type.ts @@ -12,6 +12,7 @@ export interface LayoutData { canvasStyle: CanvasStyleData isPublish?: boolean dataSlotters: Array<{ type: string; config: any }> + components?: Array } export type SimpleLayoutData = Omit diff --git a/examples/src/load.ts b/examples/src/load.ts index 24f33113..4eb16c40 100644 --- a/examples/src/load.ts +++ b/examples/src/load.ts @@ -17,17 +17,16 @@ const useLoadComponent = () => { const componentOptions = moduleFilesTs[key]?.default if (componentOptions) { - canvasState.loadComponent( - componentOptions.componentName, - componentOptions.config as BaseComponent - ) + const { componentName, config, mainfest, component } = componentOptions + const name = mainfest ? mainfest.name : componentName + canvasState.loadComponent(name, config as BaseComponent, mainfest) // 注册异步组件 const asyncComp = defineAsyncComponent({ - loader: componentOptions.component, + loader: component, delay: 200, timeout: 3000 }) - app.component(componentOptions.componentName, asyncComp) + app.component(name, asyncComp) } else { console.error(`${key} is not a valid component`) } diff --git a/examples/src/pages/DesignerView/View.vue b/examples/src/pages/DesignerView/View.vue index 21d430d1..e286ab18 100644 --- a/examples/src/pages/DesignerView/View.vue +++ b/examples/src/pages/DesignerView/View.vue @@ -1,9 +1,5 @@ diff --git a/packages/designer/src/pages/perviewer/viewer.vue b/packages/designer/src/pages/perviewer/viewer.vue index 9d46efdb..dd5ee9fb 100644 --- a/packages/designer/src/pages/perviewer/viewer.vue +++ b/packages/designer/src/pages/perviewer/viewer.vue @@ -7,22 +7,19 @@