├── .gitignore ├── .vscode └── extensions.json ├── public ├── favicon.ico └── mock │ ├── global_event.json │ ├── custo_basic_table1.json │ ├── custo_basic_table2.json │ └── global_css.json ├── readme_images ├── oh.gif ├── el按钮属性.png ├── 多组件库支持.png ├── 对象编辑器.png ├── 组件库列表对比.png ├── 自定义css.gif ├── 配置可视化.png ├── 预制css.png ├── 级联选择器props.png └── Dreamdesign按钮属性.png ├── src ├── assets │ ├── logo.png │ ├── icons │ │ ├── grid1.svg │ │ ├── stacked-line.svg │ │ ├── button-group.svg │ │ ├── button.svg │ │ ├── grid2.svg │ │ ├── pad.svg │ │ ├── chart-line.svg │ │ ├── checkbox-group.svg │ │ ├── h5.svg │ │ ├── input.svg │ │ ├── left-main.svg │ │ ├── top-main.svg │ │ ├── undo.svg │ │ ├── link.svg │ │ ├── redo.svg │ │ ├── chart-pie.svg │ │ ├── export-json.svg │ │ ├── import-json.svg │ │ ├── checkbox.svg │ │ ├── cascader-panel.svg │ │ ├── pc.svg │ │ ├── form.svg │ │ ├── preview.svg │ │ ├── chart-bar.svg │ │ ├── clear.svg │ │ ├── horizontal-bar.svg │ │ ├── table.svg │ │ ├── file-code.svg │ │ ├── echart-variable.svg │ │ ├── params.svg │ │ ├── cascader.svg │ │ ├── chart-ring.svg │ │ ├── scroll.svg │ │ ├── top-left-main.svg │ │ ├── top-main-footer.svg │ │ ├── datepicker.svg │ │ ├── tree-list.svg │ │ └── color-picker.svg │ └── global.module.less ├── export.ts ├── config-center │ ├── README.md │ ├── antdesign │ │ └── basic │ │ │ ├── index.ts │ │ │ └── button │ │ │ └── index.ts │ ├── native │ │ └── basic │ │ │ ├── index.ts │ │ │ └── div │ │ │ └── index.ts │ ├── custom │ │ └── data │ │ │ ├── index.ts │ │ │ └── table │ │ │ └── index.ts │ ├── echarts │ │ ├── custom │ │ │ ├── index.ts │ │ │ └── variable │ │ │ │ └── index.ts │ │ ├── bar │ │ │ └── index.ts │ │ ├── pie │ │ │ └── index.ts │ │ └── line │ │ │ └── index.ts │ ├── element │ │ ├── basic │ │ │ ├── index.ts │ │ │ ├── scrollbar │ │ │ │ └── index.ts │ │ │ ├── link │ │ │ │ └── index.ts │ │ │ └── button │ │ │ │ └── index.ts │ │ ├── layout │ │ │ ├── index.ts │ │ │ ├── grid │ │ │ │ └── index.ts │ │ │ └── container │ │ │ │ └── index.ts │ │ └── form │ │ │ ├── index.ts │ │ │ ├── colorpicker │ │ │ └── index.ts │ │ │ ├── input │ │ │ └── index.ts │ │ │ ├── checkbox │ │ │ └── index.ts │ │ │ ├── form │ │ │ └── index.ts │ │ │ ├── datepicker │ │ │ └── index.ts │ │ │ └── cascader │ │ │ └── index.ts │ └── index.ts ├── env.d.ts ├── main.ts ├── components │ ├── svg-icon │ │ └── index.vue │ ├── monaco-edit │ │ ├── customMonaco.ts │ │ └── index.vue │ ├── dream-design-edit │ │ ├── canvas-main │ │ │ └── index.vue │ │ ├── right-nav │ │ │ ├── ext-props.vue │ │ │ ├── json-code-edit.vue │ │ │ ├── custom-class.vue │ │ │ ├── custom-func.vue │ │ │ └── config-edit.vue │ │ ├── left-nav │ │ │ └── index.vue │ │ ├── param_edit │ │ │ └── index.vue │ │ ├── top-bar │ │ │ └── index.vue │ │ └── render-component │ │ │ └── index.vue │ ├── echarts │ │ ├── bar │ │ │ ├── basic-bar-chart.vue │ │ │ └── horizontal-bar-chart.vue │ │ ├── line │ │ │ ├── basic-line-chart.vue │ │ │ └── stacked-line-chart.vue │ │ └── pie │ │ │ ├── doughnut-chart.vue │ │ │ └── basic-pie-chart.vue │ └── custom │ │ └── custom-basic-table.vue ├── App.vue ├── utils │ └── index.ts └── model │ └── model.ts ├── index.html ├── tsconfig.json ├── vite.config.ts ├── vite.lib.config.ts ├── package.json ├── README.md └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /readme_images/oh.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/readme_images/oh.gif -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /readme_images/el按钮属性.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/readme_images/el按钮属性.png -------------------------------------------------------------------------------- /readme_images/多组件库支持.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/readme_images/多组件库支持.png -------------------------------------------------------------------------------- /readme_images/对象编辑器.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/readme_images/对象编辑器.png -------------------------------------------------------------------------------- /readme_images/组件库列表对比.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/readme_images/组件库列表对比.png -------------------------------------------------------------------------------- /readme_images/自定义css.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/readme_images/自定义css.gif -------------------------------------------------------------------------------- /readme_images/配置可视化.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/readme_images/配置可视化.png -------------------------------------------------------------------------------- /readme_images/预制css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/readme_images/预制css.png -------------------------------------------------------------------------------- /readme_images/级联选择器props.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/readme_images/级联选择器props.png -------------------------------------------------------------------------------- /src/export.ts: -------------------------------------------------------------------------------- 1 | import DreamDesignEdit from './components/dream-design-edit/index.vue'; 2 | export { DreamDesignEdit } -------------------------------------------------------------------------------- /readme_images/Dreamdesign按钮属性.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yaolunmao/dream-design/HEAD/readme_images/Dreamdesign按钮属性.png -------------------------------------------------------------------------------- /src/config-center/README.md: -------------------------------------------------------------------------------- 1 | # config-center 2 | 该目录为组件的初始信息 3 | 其实本来是打算采用json加载的 参考我的这个项目 但是json缺少了ts约束 而且吧 太长一串json编辑起来也不是那么直观 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/grid1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/config-center/antdesign/basic/index.ts: -------------------------------------------------------------------------------- 1 | import { IConfigComponentGroup } from "../../../model/model"; 2 | import { D_AntdButton } from "./button"; 3 | export const AntdBasicGroup: IConfigComponentGroup = { 4 | groupType: "basic", 5 | title: "基础", 6 | list: [D_AntdButton], 7 | }; 8 | -------------------------------------------------------------------------------- /src/config-center/native/basic/index.ts: -------------------------------------------------------------------------------- 1 | import { IConfigComponentGroup } from "../../../model/model"; 2 | import { D_NT_Basic_div } from "./div"; 3 | 4 | export const NativeBasicGroup: IConfigComponentGroup = { 5 | groupType: "basic", 6 | title: "基础", 7 | list: [D_NT_Basic_div], 8 | }; 9 | -------------------------------------------------------------------------------- /src/config-center/custom/data/index.ts: -------------------------------------------------------------------------------- 1 | import { IConfigComponentGroup } from "../../../model/model"; 2 | import { D_ElCustomBasicTable } from "./table"; 3 | export const CustomDataGroup: IConfigComponentGroup = { 4 | groupType: "data", 5 | title: "数据展示", 6 | list: [D_ElCustomBasicTable], 7 | }; 8 | -------------------------------------------------------------------------------- /src/config-center/echarts/custom/index.ts: -------------------------------------------------------------------------------- 1 | import { IConfigComponentGroup } from "../../../model/model"; 2 | import { D_EchartsCustom } from "./variable"; 3 | export const EchartsCustomGroup: IConfigComponentGroup = { 4 | groupType: "echartscustom", 5 | title: "自定义图表", 6 | list: [D_EchartsCustom], 7 | }; 8 | -------------------------------------------------------------------------------- /src/assets/icons/stacked-line.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/icons/button-group.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/grid2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dream design 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/icons/pad.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/config-center/element/basic/index.ts: -------------------------------------------------------------------------------- 1 | import { IConfigComponentGroup } from "../../../model/model"; 2 | import { D_ElScrollbar } from "./scrollbar"; 3 | import { D_ElButton, D_ElButtonGroup } from "./button"; 4 | import { D_ElLink } from "./link"; 5 | export const ElBasicGroup: IConfigComponentGroup = { 6 | groupType: "basic", 7 | title: "基础", 8 | list: [D_ElButton, D_ElButtonGroup, D_ElLink, D_ElScrollbar], 9 | }; 10 | -------------------------------------------------------------------------------- /src/assets/icons/chart-line.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/config-center/element/layout/index.ts: -------------------------------------------------------------------------------- 1 | import { IConfigComponentGroup } from "../../../model/model"; 2 | import { D_ElGrid1,D_ElGrid2 } from "./grid"; 3 | import { D_ElContainer1,D_ElContainer2,D_ElContainer3,D_ElContainer4 } from "./container"; 4 | export const ElLayoutGroup: IConfigComponentGroup = { 5 | groupType: "layout", 6 | title: "布局", 7 | list: [D_ElGrid1, D_ElGrid2, D_ElContainer1,D_ElContainer2,D_ElContainer3,D_ElContainer4], 8 | }; 9 | -------------------------------------------------------------------------------- /src/assets/icons/checkbox-group.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/icons/h5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/config-center/native/basic/div/index.ts: -------------------------------------------------------------------------------- 1 | import { IConfigComponentItem } from "../../../../model/model"; 2 | 3 | export const D_NT_Basic_div: IConfigComponentItem = { 4 | title: "div", 5 | icon: "link", 6 | domInfo: { 7 | tag: "div", 8 | title: "原生div", 9 | slots: false, 10 | canMove: true, 11 | canAllowTo: false, 12 | ClearStyle: false, 13 | props: {}, 14 | tagSlots: { 15 | enable: true, 16 | val: "原生div", 17 | }, 18 | childrens: [], 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /public/mock/global_event.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "value":"alert(111)", 4 | "label": "弹出111", 5 | "tips": "会弹出数字111的提示", 6 | "event_name": "alert_111" 7 | }, 8 | { 9 | "value":"alert('abc')", 10 | "label": "弹出abc", 11 | "tips": "会弹出字符串abc的提示", 12 | "event_name": "alert_abc" 13 | }, 14 | { 15 | "value":"alert(\"转义测试\")", 16 | "label": "弹出转义测试", 17 | "tips": "会弹出字符串“转义测试”的提示", 18 | "event_name": "alert_escape" 19 | } 20 | ] -------------------------------------------------------------------------------- /src/assets/icons/input.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/left-main.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/top-main.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/undo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/icons/link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/redo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/assets/icons/chart-pie.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/export-json.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/import-json.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | import viteSvgIcons from "vite-plugin-svg-icons"; 4 | import path from "path"; 5 | import monacoEditorPlugin from "vite-plugin-monaco-editor" 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | viteSvgIcons({ 11 | // 指定需要缓存的图标文件夹 12 | iconDirs: [path.resolve(process.cwd(), "src/assets/icons")], 13 | // 指定symbolId格式 14 | symbolId: "icon-[dir]-[name]", 15 | }),monacoEditorPlugin() 16 | ], 17 | }); 18 | -------------------------------------------------------------------------------- /src/assets/icons/checkbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | // import * as Icons from "@element-plus/icons-vue"; 4 | // import { store, key } from "./store"; 5 | // import { store } from "./store"; 6 | // import Antd from 'ant-design-vue'; 7 | // import 'ant-design-vue/dist/antd.css'; 8 | const app = createApp(App); 9 | // 注册全局组件 10 | // Object.keys(Icons).forEach((key) => { 11 | // app.component(key, (Icons as any)[key]); 12 | // }); 13 | // app.use(ElementPlus); 14 | // app.use(Antd); 15 | // app.use(store, key); 16 | // app.use(store); 17 | app.mount("#app"); 18 | -------------------------------------------------------------------------------- /src/assets/icons/cascader-panel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/icons/pc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/icons/form.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/config-center/element/form/index.ts: -------------------------------------------------------------------------------- 1 | import { IConfigComponentGroup } from "../../../model/model"; 2 | import { D_ElCascader, D_ElCascaderPanel } from "./cascader"; 3 | import { D_ElCheckbox,D_ElCheckboxGroup } from "./checkbox"; 4 | import { D_ElColorPicker } from "./colorpicker"; 5 | import { D_ElDatePicker } from "./datepicker"; 6 | import { D_ElFormContainer } from "./form"; 7 | import { D_ElInput } from "./input"; 8 | export const ElFormGroup: IConfigComponentGroup = { 9 | groupType: "form", 10 | title: "表单组件", 11 | list: [D_ElCascader, D_ElCascaderPanel,D_ElCheckbox,D_ElCheckboxGroup,D_ElColorPicker,D_ElDatePicker,D_ElFormContainer,D_ElInput], 12 | }; 13 | -------------------------------------------------------------------------------- /src/assets/icons/preview.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/icons/chart-bar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/clear.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/horizontal-bar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/table.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/file-code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/icons/echart-variable.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/svg-icon/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/icons/params.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/mock/custo_basic_table1.json: -------------------------------------------------------------------------------- 1 | { 2 | "info": { 3 | "id": { 4 | "title": "id", 5 | "query": false 6 | }, 7 | "name": { 8 | "title": "姓名", 9 | "query": true 10 | }, 11 | "address": { 12 | "title": "地址", 13 | "query": true 14 | }, 15 | "date": { 16 | "title": "创建日期", 17 | "query": false 18 | } 19 | }, 20 | "data": [{ 21 | "id": "1", 22 | "date": "2022-03-03", 23 | "name": "张伟", 24 | "address": "长春市宽城区" 25 | }, { 26 | "id": "2", 27 | "date": "2022-03-02", 28 | "name": "刘磊", 29 | "address": "长春市绿园区" 30 | }, { 31 | "id": "3", 32 | "date": "2022-03-04", 33 | "name": "张三", 34 | "address": "长春市北湖新区" 35 | }, { 36 | "id": "4", 37 | "date": "2022-03-01", 38 | "name": "刘伟", 39 | "address": "长春市净月区" 40 | }] 41 | } -------------------------------------------------------------------------------- /src/assets/icons/cascader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/chart-ring.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/mock/custo_basic_table2.json: -------------------------------------------------------------------------------- 1 | { 2 | "info": { 3 | "id": { 4 | "title": "id", 5 | "query": false 6 | }, 7 | "language": { 8 | "title": "语言", 9 | "query": true 10 | }, 11 | "percentage": { 12 | "title": "百分比", 13 | "query": false 14 | }, 15 | "year": { 16 | "title": "统计年份", 17 | "query": false 18 | } 19 | }, 20 | "data": [{ 21 | "id": "1", 22 | "language": "javascript", 23 | "percentage": "64.96%", 24 | "year": "2022" 25 | }, { 26 | "id": "2", 27 | "language": "html", 28 | "percentage": "56.07%", 29 | "year": "2022" 30 | }, { 31 | "id": "3", 32 | "language": "python", 33 | "percentage": "48.24%", 34 | "year": "2022" 35 | }, { 36 | "id": "4", 37 | "language": "sql", 38 | "percentage": "47.08", 39 | "year": "2022" 40 | }] 41 | } -------------------------------------------------------------------------------- /src/assets/icons/scroll.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/mock/global_css.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "value": { 4 | "background-color": "green" 5 | }, 6 | "label": "绿色背景", 7 | "tips": "将元素的背景色改为绿色", 8 | "class_name": "bg-color-green" 9 | }, 10 | { 11 | "value": { 12 | "width": "20px" 13 | }, 14 | "label": "宽度20px", 15 | "tips": "将元素的宽度改为20px", 16 | "class_name": "width-20px" 17 | }, 18 | { 19 | "value": { 20 | "display": ["-webkit-box","-webkit-flex", "-ms-flexbox", "flex"] 21 | }, 22 | "label": "flex横向布局", 23 | "tips": "flex横向布局-这个演示了相同键名如何添加浏览器兼容", 24 | "class_name": "flex-h" 25 | }, 26 | { 27 | "value": { 28 | "display": "flex", 29 | "flex-direction": "column" 30 | }, 31 | "label": "flex纵向布局", 32 | "tips": "flex纵向布局", 33 | "class_name": "flex-v" 34 | } 35 | ] 36 | -------------------------------------------------------------------------------- /src/assets/icons/top-left-main.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/icons/top-main-footer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite.lib.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | import path from "path"; 4 | import viteSvgIcons from "vite-plugin-svg-icons"; 5 | import monacoEditorPlugin from "vite-plugin-monaco-editor"; 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [vue(), 9 | viteSvgIcons({ 10 | // 指定需要缓存的图标文件夹 11 | iconDirs: [path.resolve(process.cwd(), "src/assets/icons")], 12 | // 指定symbolId格式 13 | symbolId: "icon-[dir]-[name]", 14 | }),monacoEditorPlugin()], 15 | build: { 16 | lib: { 17 | entry: path.resolve(__dirname, "src/export.ts"), 18 | name: "dream-design", 19 | fileName: (format) => `dream-design.${format}.ts`, 20 | }, 21 | rollupOptions: { 22 | // 确保外部化处理那些你不想打包进库的依赖 23 | external: ["vue"], 24 | output: { 25 | // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 26 | globals: { 27 | vue: "Vue", 28 | }, 29 | }, 30 | }, 31 | }, 32 | }); 33 | -------------------------------------------------------------------------------- /src/assets/icons/datepicker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/tree-list.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/icons/color-picker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 29 | 30 | 35 | -------------------------------------------------------------------------------- /src/components/monaco-edit/customMonaco.ts: -------------------------------------------------------------------------------- 1 | import 'monaco-editor/esm/vs/editor/editor.all.js'; 2 | 3 | import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js'; 4 | import 'monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js'; 5 | import 'monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js'; 6 | import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js'; 7 | import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js'; 8 | import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js'; 9 | import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js'; 10 | import 'monaco-editor/esm/vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js'; 11 | 12 | import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'; 13 | import 'monaco-editor/esm/vs/language/css/monaco.contribution'; 14 | import 'monaco-editor/esm/vs/language/json/monaco.contribution'; 15 | import 'monaco-editor/esm/vs/language/html/monaco.contribution'; 16 | import 'monaco-editor/esm/vs/basic-languages/monaco.contribution'; 17 | 18 | import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; 19 | 20 | export { monaco }; -------------------------------------------------------------------------------- /src/config-center/antdesign/basic/button/index.ts: -------------------------------------------------------------------------------- 1 | import { IConfigComponentItem } from "../../../../model/model"; 2 | 3 | export const D_AntdButton: IConfigComponentItem = { 4 | title: "按钮", 5 | icon: "button", 6 | domInfo: { 7 | tag: "a-button", 8 | title: "antd按钮", 9 | slots: false, 10 | canMove: true, 11 | ClearStyle:false, 12 | canAllowTo: false, 13 | props: { 14 | size: { 15 | type: "Select", 16 | default: "default", 17 | title: "大小", 18 | tips:"大小", 19 | options: [{ 20 | value: 'large', 21 | label: 'large', 22 | }, 23 | { 24 | value: 'default', 25 | label: 'default', 26 | }, 27 | { 28 | value: 'small', 29 | label: 'small', 30 | }] 31 | }, 32 | type: { 33 | type: "Select", 34 | default: "primary", 35 | title: "类型", 36 | tips:"类型", 37 | options: [{ 38 | value: 'primary', 39 | label: 'primary', 40 | }, 41 | { 42 | value: 'dashed', 43 | label: 'dashed', 44 | }, 45 | { 46 | value: 'text', 47 | label: 'text', 48 | }] 49 | } 50 | }, 51 | tagSlots: { 52 | enable: true, 53 | val: "antd按钮" 54 | }, 55 | childrens: [], 56 | }, 57 | }; 58 | -------------------------------------------------------------------------------- /src/components/monaco-edit/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dream-design", 3 | "version": "0.0.1", 4 | "files": [ 5 | "dist" 6 | ], 7 | "module": "./dist/dream-design.es.ts", 8 | "main": "./dist/dream-design.umd.ts", 9 | "exports": { 10 | ".": { 11 | "import": "./dist/dream-design.es.ts", 12 | "require": "./dist/dream-design.umd.ts" 13 | }, 14 | "./dist/style.css": { 15 | "import": "./dist/style.css", 16 | "require": "./dist/style.css" 17 | } 18 | }, 19 | "scripts": { 20 | "dev": "vite --port 3000", 21 | "build": "vue-tsc --noEmit && vite build", 22 | "lib": "vue-tsc --noEmit && vite build --config vite.lib.config.ts", 23 | "preview": "vite preview" 24 | }, 25 | "dependencies": { 26 | "@element-plus/icons-vue": "^0.2.4", 27 | "@types/node": "^17.0.10", 28 | "ant-design-vue": "^2.2.8", 29 | "axios": "^0.25.0", 30 | "echarts": "^5.3.0", 31 | "element-plus": "^2.0.0", 32 | "less": "^4.1.2", 33 | "monaco-editor": "^0.31.1", 34 | "vue": "^3.2.25", 35 | "vue-echarts": "^6.0.2", 36 | "vue-router": "4", 37 | "vuedraggable": "^4.1.0" 38 | }, 39 | "devDependencies": { 40 | "@vitejs/plugin-vue": "^2.0.0", 41 | "@vue/compiler-sfc": "^3.2.25", 42 | "typescript": "^4.4.4", 43 | "vite": "^2.7.2", 44 | "vite-plugin-monaco-editor": "^1.0.10", 45 | "vite-plugin-svg-icons": "^1.1.0", 46 | "vue-tsc": "^0.29.8" 47 | } 48 | } -------------------------------------------------------------------------------- /src/config-center/custom/data/table/index.ts: -------------------------------------------------------------------------------- 1 | import { ERightToolAttrType, IConfigComponentItem } from "../../../../model/model"; 2 | 3 | export const D_ElCustomBasicTable: IConfigComponentItem = { 4 | title: "基础表格", 5 | icon: "table", 6 | domInfo: { 7 | tag: "custom-basic-table", 8 | title: "自定义el基础表格Demo,只是为了演示自定义组件", 9 | slots: false, 10 | canMove: true, 11 | canAllowTo: false, 12 | ClearStyle: false, 13 | props: { 14 | "table-query-url": { 15 | type: ERightToolAttrType.Select, 16 | default: "/mock/custo_basic_table1.json", 17 | title: "接口地址", 18 | tips: "为了演示采用了下拉选择", 19 | options: [ 20 | { 21 | value: "/mock/custo_basic_table1.json", 22 | label: "人员信息接口", 23 | }, 24 | { 25 | value: "/mock/custo_basic_table2.json", 26 | label: "编程语言受欢迎度", 27 | }, 28 | ], 29 | }, 30 | tableAddUrl: { 31 | type: ERightToolAttrType.Input, 32 | default: "https://www.test.com/add/", 33 | title: "新增地址", 34 | tips: "新增数据接口地址", 35 | }, 36 | tableEditUrl: { 37 | type: ERightToolAttrType.Input, 38 | default: "https://www.test.com/edit/", 39 | title: "编辑地址", 40 | tips: "编辑数据接口地址", 41 | }, 42 | tableDeleteUrl: { 43 | type: ERightToolAttrType.Input, 44 | default: "https://www.test.com/delete/", 45 | title: "删除地址", 46 | tips: "删除数据接口地址", 47 | }, 48 | }, 49 | tagSlots: { 50 | enable: false, 51 | val: "", 52 | }, 53 | childrens: [], 54 | }, 55 | }; 56 | -------------------------------------------------------------------------------- /src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export const objectDeepClone = (object: object, default_val: any = {}) => { 2 | if (!object) { 3 | return default_val; 4 | } 5 | return JSON.parse(JSON.stringify(object)); 6 | }; 7 | /** 8 | * 生成随机字符串 9 | * @param len 生成个数 10 | */ 11 | export const randomString = (len?: number) => { 12 | len = len || 10; 13 | const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; 14 | const maxPos = str.length; 15 | let random_str = ""; 16 | for (let i = 0; i < len; i++) { 17 | random_str += str.charAt(Math.floor(Math.random() * maxPos)); 18 | } 19 | return random_str; 20 | }; 21 | export const cssToJson = (css_str: string) => { 22 | //记录第一个花括号的位置 23 | const firstbrackets_index = css_str.indexOf('{'); 24 | const lastbrackets_index = css_str.indexOf('}'); 25 | //将括号外的都视为垃圾数据 26 | const effective_str = css_str.substring(firstbrackets_index + 1, lastbrackets_index).replace(/\s/g, ""); 27 | //根据分号分隔成数组 28 | const effective_arr = effective_str.split(';'); 29 | let _json = '' 30 | effective_arr.forEach(f => { 31 | if (f.includes(':')) { 32 | const temp_json_arr = f.split(':'); 33 | _json += `,"${temp_json_arr[0]}":"${temp_json_arr[1]}"`; 34 | } 35 | }); 36 | _json = `{${_json.substring(1)}}`; 37 | return _json; 38 | } 39 | export const objectToCss = (ob: { 40 | [key: string]: string; 41 | }) => { 42 | let _css = ""; 43 | for (let ob_item in ob) { 44 | _css += `;\n\t${ob_item}:${ob[ob_item]}`; 45 | } 46 | if (_css) { 47 | _css = `{${_css.substring(1)};\n}`; 48 | } 49 | else { 50 | _css = `{\n\n}`; 51 | } 52 | 53 | 54 | return _css; 55 | } 56 | -------------------------------------------------------------------------------- /src/components/dream-design-edit/canvas-main/index.vue: -------------------------------------------------------------------------------- 1 | 2 | 16 | 45 | -------------------------------------------------------------------------------- /src/components/echarts/bar/basic-bar-chart.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/config-center/element/basic/scrollbar/index.ts: -------------------------------------------------------------------------------- 1 | import { ERightToolAttrType, IConfigComponentItem } from "../../../../model/model"; 2 | 3 | export const D_ElScrollbar: IConfigComponentItem = { 4 | title: "滚动条", 5 | icon: "scroll", 6 | domInfo: { 7 | tag: "el-scrollbar", 8 | title: "el滚动条", 9 | slots: true, 10 | canMove: true, 11 | canAllowTo: true, 12 | ClearStyle: false, 13 | props: { 14 | height: { 15 | type: ERightToolAttrType.Input, 16 | default: "", 17 | title: "高度", 18 | tips: "滚动条高度", 19 | }, 20 | "max-height": { 21 | type: ERightToolAttrType.Input, 22 | default: "100px", 23 | title: "最大高度", 24 | tips: "滚动条最大高度", 25 | }, 26 | native: { 27 | type: ERightToolAttrType.Switch, 28 | default: false, 29 | title: "原生滚动条", 30 | tips: "是否使用原生滚动条样式", 31 | }, 32 | noresize: { 33 | type: ERightToolAttrType.Switch, 34 | default: false, 35 | title: "不响应容器", 36 | tips: "不响应容器尺寸变化,如果容器尺寸不会发生变化,最好设置它可以优化性能", 37 | }, 38 | tag: { 39 | type: ERightToolAttrType.Input, 40 | default: "div", 41 | title: "元素标签", 42 | tips: "视图的元素标签", 43 | }, 44 | always: { 45 | type: ERightToolAttrType.Switch, 46 | default: false, 47 | title: "总是显示", 48 | tips: "滚动条总是显示", 49 | }, 50 | 'min-size': { 51 | type: ERightToolAttrType.InputNumber, 52 | default: 20, 53 | title: "最小尺寸", 54 | tips: "滚动条最小尺寸", 55 | }, 56 | }, 57 | eventAttr:{ 58 | scroll:{ 59 | custom:true, 60 | tips:"滚动触发事件", 61 | val:"console.log('顶部滚动距离:'+scroll_params.scrollTop);\n\tconsole.log('左侧滚动距离:'+scroll_params.scrollLeft)", 62 | anonymous_params:['scroll_params'], 63 | list:[] 64 | } 65 | }, 66 | tagSlots: { 67 | enable: false, 68 | val: "", 69 | }, 70 | childrens: [], 71 | compatibility:true 72 | }, 73 | }; 74 | -------------------------------------------------------------------------------- /src/components/echarts/bar/horizontal-bar-chart.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/echarts/line/basic-line-chart.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/echarts/pie/doughnut-chart.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/config-center/element/basic/link/index.ts: -------------------------------------------------------------------------------- 1 | import { ERightToolAttrType, IConfigComponentItem } from "../../../../model/model"; 2 | 3 | export const D_ElLink: IConfigComponentItem = { 4 | title: "链接", 5 | icon: "link", 6 | domInfo: { 7 | tag: "el-link", 8 | title: "el链接", 9 | slots: false, 10 | canMove: true, 11 | canAllowTo: false, 12 | ClearStyle: false, 13 | props: { 14 | type: { 15 | type: ERightToolAttrType.Select, 16 | default: "primary", 17 | title: "类型", 18 | tips: "类型", 19 | options: [ 20 | { 21 | value: "primary", 22 | label: "主要链接", 23 | }, 24 | { 25 | value: "success", 26 | label: "成功链接", 27 | }, 28 | { 29 | value: "warning", 30 | label: "警告链接", 31 | }, 32 | { 33 | value: "danger", 34 | label: "危险链接", 35 | }, 36 | { 37 | value: "info", 38 | label: "信息链接", 39 | }, 40 | ], 41 | }, 42 | underline: { 43 | type: ERightToolAttrType.Switch, 44 | default: true, 45 | title: "是否下划线", 46 | tips: "鼠标悬停是否显示下划线", 47 | }, 48 | disabled: { 49 | type: ERightToolAttrType.Switch, 50 | default: false, 51 | title: "是否禁用状态", 52 | tips: "是否禁用状态", 53 | }, 54 | href: { 55 | type: ERightToolAttrType.Input, 56 | default: "https://www.cnblogs.com/Hero-/", 57 | title: "链接地址", 58 | tips: "原生 href 属性", 59 | }, 60 | icon: { 61 | type: ERightToolAttrType.Select, 62 | default: "", 63 | title: "icon", 64 | tips: "自定义图标组件", 65 | options: [ 66 | { 67 | value: "", 68 | label: "无", 69 | }, 70 | { 71 | value: "Edit", 72 | label: "Edit", 73 | }, 74 | { 75 | value: "Search", 76 | label: "Search", 77 | }, 78 | ], 79 | }, 80 | }, 81 | tagSlots: { 82 | enable: true, 83 | val: "el链接", 84 | }, 85 | childrens: [], 86 | }, 87 | }; 88 | -------------------------------------------------------------------------------- /src/components/echarts/line/stacked-line-chart.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/echarts/pie/basic-pie-chart.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/dream-design-edit/right-nav/ext-props.vue: -------------------------------------------------------------------------------- 1 | 50 | 61 | -------------------------------------------------------------------------------- /src/config-center/echarts/custom/variable/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ERightToolAttrType, 3 | IConfigComponentItem, 4 | } from "../../../../model/model"; 5 | 6 | export const D_EchartsCustom: IConfigComponentItem = { 7 | title: "可变图表", 8 | icon: "echart-variable", 9 | domInfo: { 10 | tag: "v-chart", 11 | title: "通过改变option生成各类图表,当前测试环境里面仅引入了柱状图和饼图", 12 | slots: false, 13 | canMove: true, 14 | canAllowTo: false, 15 | ClearStyle: false, 16 | props: { 17 | option: { 18 | type: ERightToolAttrType.JsonEdit, 19 | default: { 20 | title: { 21 | text: "Traffic Sources", 22 | left: "center", 23 | }, 24 | tooltip: { 25 | trigger: "item", 26 | formatter: "{a}
{b} : {c} ({d}%)", 27 | }, 28 | legend: { 29 | orient: "vertical", 30 | left: "left", 31 | data: [ 32 | "Direct", 33 | "Email", 34 | "Ad Networks", 35 | "Video Ads", 36 | "Search Engines", 37 | ], 38 | }, 39 | series: [ 40 | { 41 | name: "Traffic Sources", 42 | type: "pie", 43 | radius: "55%", 44 | center: ["50%", "60%"], 45 | data: [ 46 | { 47 | value: 335, 48 | name: "Direct", 49 | }, 50 | { 51 | value: 310, 52 | name: "Email", 53 | }, 54 | { 55 | value: 234, 56 | name: "Ad Networks", 57 | }, 58 | { 59 | value: 135, 60 | name: "Video Ads", 61 | }, 62 | { 63 | value: 1548, 64 | name: "Search Engines", 65 | }, 66 | ], 67 | emphasis: { 68 | itemStyle: { 69 | shadowBlur: 10, 70 | shadowOffsetX: 0, 71 | shadowColor: "rgba(0, 0, 0, 0.5)", 72 | }, 73 | }, 74 | }, 75 | ], 76 | }, 77 | title: "配置数据", 78 | tips: "配置数据", 79 | }, 80 | }, 81 | tagSlots: { 82 | enable: false, 83 | val: "", 84 | }, 85 | classAttr: { 86 | custom: { 87 | height: "400px", 88 | width: "400px", 89 | }, 90 | global: [], 91 | }, 92 | childrens: [], 93 | compatibility:true 94 | }, 95 | }; 96 | -------------------------------------------------------------------------------- /src/assets/global.module.less: -------------------------------------------------------------------------------- 1 | .flex-h { 2 | display: -webkit-box; 3 | /* android 2.1-3.0, ios 3.2-4.3 */ 4 | display: -webkit-flex; 5 | /* Chrome 21+ */ 6 | display: -ms-flexbox; 7 | /* WP IE 10 */ 8 | display: flex; 9 | /* android 4.4 */ 10 | } 11 | .flex-v { 12 | display: -webkit-box; 13 | /* android 2.1-3.0, ios 3.2-4.3 */ 14 | display: -webkit-flex; 15 | /* Chrome 21+ */ 16 | display: -ms-flexbox; 17 | /* WP IE 10 */ 18 | display: flex; 19 | /* android 4.4 */ 20 | -webkit-box-orient: vertical; 21 | /* android 2.1-3.0, ios 3.2-4.3 */ 22 | -webkit-flex-direction: column; 23 | /* Chrome 21+ */ 24 | -ms-flex-direction: column; 25 | /* WP IE 10 */ 26 | flex-direction: column; 27 | /* android 4.4 */ 28 | } 29 | .flex-between { 30 | /*! autoprefixer: off */ 31 | -webkit-box-pack: justify; 32 | /* android 2.1-3.0, ios 3.2-4.3 */ 33 | -webkit-justify-content: space-between; 34 | /* Chrome 21+ */ 35 | -ms-flex-pack: justify; 36 | /* WP IE 10 */ 37 | justify-content: space-between; 38 | } 39 | .flex-center { 40 | -webkit-box-pack: center; 41 | /* android 2.1-3.0, ios 3.2-4.3 */ 42 | -webkit-justify-content: center; 43 | /* Chrome 21+ */ 44 | -ms-flex-pack: center; 45 | /* WP IE 10 */ 46 | justify-content: center; 47 | /* android 4.4 */ 48 | -webkit-box-align: center; 49 | /* android 2.1-3.0, ios 3.2-4.3 */ 50 | -webkit-align-items: center; 51 | /* Chrome 21+ */ 52 | -ms-flex-align: center; 53 | /* WP IE 10 */ 54 | align-items: center; 55 | /* android 4.4 */ 56 | } 57 | .flex-h-center { 58 | -webkit-box-pack: center; 59 | /* android 2.1-3.0, ios 3.2-4.3 */ 60 | -webkit-justify-content: center; 61 | /* Chrome 21+ */ 62 | -ms-flex-pack: center; 63 | /* WP IE 10 */ 64 | justify-content: center; 65 | /* android 4.4 */ 66 | } 67 | .flex-v-center { 68 | -webkit-box-align: center; 69 | /* android 2.1-3.0, ios 3.2-4.3 */ 70 | -webkit-align-items: center; 71 | /* Chrome 21+ */ 72 | -ms-flex-align: center; 73 | /* WP IE 10 */ 74 | align-items: center; 75 | /* android 4.4 */ 76 | } 77 | .flex-warp { 78 | -webkit-flex-wrap: wrap; /* Safari 6.1+ */ 79 | flex-wrap: wrap; 80 | } 81 | .ghost { 82 | content: ""; 83 | font-size: 0; 84 | height: 3px; 85 | box-sizing: border-box; 86 | background-color: #409eff; 87 | border: 2px solid #409eff; 88 | outline-width: 0; 89 | padding: 0; 90 | overflow: hidden; 91 | } 92 | .select-tool{ 93 | position: absolute; 94 | bottom: 0; 95 | right: 0; 96 | height: 30px; 97 | line-height: 30px; 98 | z-index: 99; 99 | } 100 | -------------------------------------------------------------------------------- /src/components/dream-design-edit/right-nav/json-code-edit.vue: -------------------------------------------------------------------------------- 1 | 29 | 77 | -------------------------------------------------------------------------------- /src/components/dream-design-edit/right-nav/custom-class.vue: -------------------------------------------------------------------------------- 1 | 23 | 75 | -------------------------------------------------------------------------------- /src/config-center/element/form/colorpicker/index.ts: -------------------------------------------------------------------------------- 1 | import { ERightToolAttrType, IConfigComponentItem } from "../../../../model/model"; 2 | 3 | export const D_ElColorPicker: IConfigComponentItem = { 4 | title: "颜色选择器", 5 | icon: "color-picker", 6 | domInfo: { 7 | tag: "el-color-picker", 8 | title: "el颜色选择器", 9 | slots: false, 10 | canMove: true, 11 | canAllowTo: false, 12 | ClearStyle: false, 13 | props: { 14 | disabled: { 15 | type: ERightToolAttrType.Switch, 16 | default: false, 17 | title: "禁用", 18 | tips: "是否禁用", 19 | }, 20 | size: { 21 | type: ERightToolAttrType.Select, 22 | default: "default", 23 | title: "尺寸", 24 | tips: "尺寸", 25 | options: [ 26 | { 27 | value: "large", 28 | label: "大", 29 | }, 30 | { 31 | value: "default", 32 | label: "默认", 33 | }, 34 | { 35 | value: "small", 36 | label: "小", 37 | } 38 | ], 39 | }, 40 | 'show-alpha': { 41 | type: ERightToolAttrType.Switch, 42 | default: false, 43 | title: "透明度选择", 44 | tips: "是否支持透明度选择", 45 | }, 46 | 'color-format': { 47 | type: ERightToolAttrType.Select, 48 | default: "hex", 49 | title: "颜色格式", 50 | tips: "写入v-model的颜色的格式", 51 | options: [ 52 | { 53 | value: "hsl", 54 | label: "hsl", 55 | }, 56 | { 57 | value: "hsv", 58 | label: "hsv", 59 | }, 60 | { 61 | value: "hex", 62 | label: "hex", 63 | }, 64 | { 65 | value: "rgb", 66 | label: "rgb", 67 | }, 68 | ], 69 | }, 70 | predefine: { 71 | type: ERightToolAttrType.JsonEdit, 72 | default: [ 73 | '#ff4500', 74 | '#ff8c00', 75 | '#ffd700', 76 | '#90ee90', 77 | '#00ced1', 78 | '#1e90ff', 79 | '#c71585', 80 | 'rgba(255, 69, 0, 0.68)', 81 | 'rgb(255, 120, 0)', 82 | 'hsv(51, 100, 98)', 83 | 'hsva(120, 40, 94, 0.5)', 84 | 'hsl(181, 100%, 37%)', 85 | 'hsla(209, 100%, 56%, 0.73)', 86 | '#c7158577', 87 | ], 88 | title: "预定义颜色", 89 | tips: "预定义颜色", 90 | }, 91 | }, 92 | tagSlots: { 93 | enable: false, 94 | val: "", 95 | }, 96 | eventAttr: { 97 | change: { 98 | custom: true, 99 | tips: "当绑定值变化时触发", 100 | val: "console.log('ColorPicker--change:'+value);", 101 | anonymous_params: ["value"], 102 | list: [], 103 | }, 104 | 'active-change': { 105 | custom: true, 106 | tips: "显示的颜色发生改变时触发", 107 | val: "console.log('ColorPicker--active-change:'+value);", 108 | anonymous_params: ["value"], 109 | list: [], 110 | }, 111 | }, 112 | childrens: [], 113 | compatibility:true 114 | }, 115 | }; 116 | -------------------------------------------------------------------------------- /src/config-center/echarts/bar/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ERightToolAttrType, 3 | IConfigComponentGroup, 4 | IConfigComponentItem, 5 | } from "../../../model/model"; 6 | 7 | const D_EchartsBasicBar: IConfigComponentItem = { 8 | title: "基础柱状图", 9 | icon: "chart-bar", 10 | domInfo: { 11 | tag: "basic-bar-chart", 12 | title: "基础柱状图", 13 | slots: false, 14 | canMove: true, 15 | canAllowTo: false, 16 | ClearStyle: false, 17 | props: { 18 | title: { 19 | type: ERightToolAttrType.Input, 20 | default: "基础柱状图", 21 | title: "标题", 22 | tips: "标题", 23 | }, 24 | xAxisData: { 25 | type: ERightToolAttrType.JsonEdit, 26 | default: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 27 | title: "X轴数据", 28 | tips: "X轴数据", 29 | }, 30 | seriesData: { 31 | type: ERightToolAttrType.JsonEdit, 32 | default: [120, 200, 150, 80, 70, 110, 130], 33 | title: "Y轴数据", 34 | tips: "Y轴数据", 35 | }, 36 | height: { 37 | type: ERightToolAttrType.InputNumber, 38 | default: 400, 39 | title: "高度", 40 | tips: "高度", 41 | }, 42 | width: { 43 | type: ERightToolAttrType.InputNumber, 44 | default: 400, 45 | title: "宽度", 46 | tips: "宽度", 47 | }, 48 | showBackground: { 49 | type: ERightToolAttrType.Switch, 50 | default: false, 51 | title: "显示背景色", 52 | tips: "显示背景色", 53 | }, 54 | }, 55 | tagSlots: { 56 | enable: false, 57 | val: "", 58 | }, 59 | childrens: [], 60 | compatibility:true 61 | }, 62 | }; 63 | const D_EchartsHorizontalBar: IConfigComponentItem = { 64 | title: "横向柱状图", 65 | icon: "horizontal-bar", 66 | domInfo: { 67 | tag: "horizontal-bar-chart", 68 | title: "横向柱状图", 69 | slots: false, 70 | canMove: true, 71 | canAllowTo: false, 72 | ClearStyle: false, 73 | props: { 74 | title: { 75 | type: ERightToolAttrType.Input, 76 | default: "World Population", 77 | title: "标题", 78 | tips: "标题", 79 | }, 80 | yAxisData: { 81 | type: ERightToolAttrType.JsonEdit, 82 | default: ["Brazil", "Indonesia", "USA", "India", "China", "World"], 83 | title: "Y轴数据", 84 | tips: "Y轴数据", 85 | }, 86 | seriesData: { 87 | type: ERightToolAttrType.JsonEdit, 88 | default: [ 89 | { 90 | name: "2011", 91 | type: "bar", 92 | data: [18203, 23489, 29034, 104970, 131744, 630230], 93 | }, 94 | { 95 | name: "2012", 96 | type: "bar", 97 | data: [19325, 23438, 31000, 121594, 134141, 681807], 98 | }, 99 | ], 100 | title: "数据源", 101 | tips: "数据源", 102 | }, 103 | height: { 104 | type: ERightToolAttrType.InputNumber, 105 | default: 400, 106 | title: "高度", 107 | tips: "高度", 108 | }, 109 | width: { 110 | type: ERightToolAttrType.InputNumber, 111 | default: 1000, 112 | title: "宽度", 113 | tips: "宽度", 114 | }, 115 | }, 116 | tagSlots: { 117 | enable: false, 118 | val: "", 119 | }, 120 | childrens: [], 121 | compatibility:true 122 | }, 123 | }; 124 | export const EchartsBarGroup: IConfigComponentGroup = { 125 | groupType: "bar", 126 | title: "柱状图", 127 | list: [D_EchartsBasicBar, D_EchartsHorizontalBar], 128 | }; 129 | -------------------------------------------------------------------------------- /src/config-center/echarts/pie/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ERightToolAttrType, 3 | IConfigComponentGroup, 4 | IConfigComponentItem, 5 | } from "../../../model/model"; 6 | 7 | const D_EchartsBasicPie: IConfigComponentItem = { 8 | title: "基础饼图", 9 | icon: "chart-pie", 10 | domInfo: { 11 | tag: "basic-pie-chart", 12 | title: "基础饼图", 13 | slots: false, 14 | canMove: true, 15 | canAllowTo: false, 16 | ClearStyle: false, 17 | props: { 18 | title: { 19 | type: ERightToolAttrType.Input, 20 | default: "Referer of a Website", 21 | title: "标题", 22 | tips: "标题", 23 | }, 24 | subtitle: { 25 | type: ERightToolAttrType.Input, 26 | default: "Fake Data", 27 | title: "副标题", 28 | tips: "副标题", 29 | }, 30 | seriesName: { 31 | type: ERightToolAttrType.Input, 32 | default: "Access From", 33 | title: "源名称", 34 | tips: "源名称", 35 | }, 36 | seriesData: { 37 | type: ERightToolAttrType.JsonEdit, 38 | default: [ 39 | { value: 1048, name: 'Search Engine' }, 40 | { value: 735, name: 'Direct' }, 41 | { value: 580, name: 'Email' }, 42 | { value: 484, name: 'Union Ads' }, 43 | { value: 300, name: 'Video Ads' } 44 | ], 45 | title: "数据源", 46 | tips: "数据源", 47 | }, 48 | height: { 49 | type: ERightToolAttrType.InputNumber, 50 | default: 400, 51 | title: "高度", 52 | tips: "高度", 53 | }, 54 | width: { 55 | type: ERightToolAttrType.InputNumber, 56 | default: 600, 57 | title: "宽度", 58 | tips: "宽度", 59 | } 60 | }, 61 | tagSlots: { 62 | enable: false, 63 | val: "", 64 | }, 65 | childrens: [], 66 | compatibility:true 67 | }, 68 | }; 69 | const D_EchartsDoughnutPie: IConfigComponentItem = { 70 | title: "环形图", 71 | icon: "chart-ring", 72 | domInfo: { 73 | tag: "doughnut-chart", 74 | title: "环形图", 75 | slots: false, 76 | canMove: true, 77 | canAllowTo: false, 78 | ClearStyle: false, 79 | props: { 80 | title: { 81 | type: ERightToolAttrType.Input, 82 | default: "World Population", 83 | title: "标题", 84 | tips: "标题", 85 | }, 86 | seriesName: { 87 | type: ERightToolAttrType.Input, 88 | default: "Access From", 89 | title: "源名称", 90 | tips: "源名称", 91 | }, 92 | seriesData: { 93 | type: ERightToolAttrType.JsonEdit, 94 | default: [ 95 | { value: 1048, name: 'Search Engine' }, 96 | { value: 735, name: 'Direct' }, 97 | { value: 580, name: 'Email' }, 98 | { value: 484, name: 'Union Ads' }, 99 | { value: 300, name: 'Video Ads' } 100 | ], 101 | title: "数据源", 102 | tips: "数据源", 103 | }, 104 | height: { 105 | type: ERightToolAttrType.InputNumber, 106 | default: 400, 107 | title: "高度", 108 | tips: "高度", 109 | }, 110 | width: { 111 | type: ERightToolAttrType.InputNumber, 112 | default: 600, 113 | title: "宽度", 114 | tips: "宽度", 115 | }, 116 | }, 117 | tagSlots: { 118 | enable: false, 119 | val: "", 120 | }, 121 | childrens: [], 122 | compatibility:true 123 | }, 124 | }; 125 | export const EchartsPieGroup: IConfigComponentGroup = { 126 | groupType: "pie", 127 | title: "饼图", 128 | list: [D_EchartsBasicPie, D_EchartsDoughnutPie], 129 | }; 130 | -------------------------------------------------------------------------------- /src/components/dream-design-edit/right-nav/custom-func.vue: -------------------------------------------------------------------------------- 1 | 27 | 83 | -------------------------------------------------------------------------------- /src/config-center/index.ts: -------------------------------------------------------------------------------- 1 | import { IComponentImport, IConfigComponentGroup } from "../model/model"; 2 | //element组件 3 | import { ElLayoutGroup } from "./element/layout"; //布局 4 | import { ElBasicGroup } from "./element/basic"; //基础 5 | import { ElFormGroup } from "./element/form"; //表单 6 | //antd组件 7 | import { AntdBasicGroup } from "./antdesign/basic"; //基础 8 | //图表组件 9 | import { EchartsLineGroup } from "./echarts/line"; //折线图 10 | import { EchartsBarGroup } from "./echarts/bar"; //折线图 11 | import { EchartsPieGroup } from "./echarts/pie"; //饼图 12 | import { EchartsCustomGroup } from "./echarts/custom"; //自定义 13 | //原生组件 14 | import { NativeBasicGroup } from "./native/basic"; //原生 15 | //自定义组件 16 | import { CustomDataGroup } from "./custom/data"; //数据展示 17 | import { 18 | ElButton, 19 | ElButtonGroup, 20 | ElCol, 21 | ElContainer, 22 | ElHeader, 23 | ElLink, 24 | ElAside, 25 | ElMain, 26 | ElFooter, 27 | ElRow, 28 | ElScrollbar, 29 | ElCascader, 30 | ElCascaderPanel, 31 | ElCheckbox, 32 | ElCheckboxGroup, 33 | ElColorPicker, 34 | ElDatePicker, 35 | ElForm, 36 | ElFormItem, 37 | ElInput, 38 | } from "element-plus"; 39 | import { Button as AButton } from "ant-design-vue"; 40 | import VChart from "vue-echarts"; 41 | import BasicLineChart from "../components/echarts/line/basic-line-chart.vue"; 42 | import StackedLineChart from "../components/echarts/line/stacked-line-chart.vue"; 43 | import BasicBarChart from "../components/echarts/bar/basic-bar-chart.vue"; 44 | import HorizontalBarChart from "../components/echarts/bar/horizontal-bar-chart.vue"; 45 | import BasicPieChart from "../components/echarts/pie/basic-pie-chart.vue"; 46 | import DoughnutPieChart from "../components/echarts/pie/doughnut-chart.vue"; 47 | import CustomBasicTable from ".././components/custom/custom-basic-table.vue"; 48 | 49 | const elementConfigCenter: IConfigComponentGroup[] = Object.seal([ 50 | ElLayoutGroup, 51 | ElBasicGroup, 52 | ElFormGroup, 53 | ]); 54 | const antdConfigCenter: IConfigComponentGroup[] = Object.seal([AntdBasicGroup]); 55 | 56 | const EchartsConfigCenter: IConfigComponentGroup[] = Object.seal([ 57 | EchartsLineGroup, 58 | EchartsBarGroup, 59 | EchartsPieGroup, 60 | EchartsCustomGroup, 61 | ]); 62 | const NativeConfigCenter: IConfigComponentGroup[] = Object.seal([ 63 | NativeBasicGroup, 64 | ]); 65 | const customConfigCenter: IConfigComponentGroup[] = Object.seal([ 66 | CustomDataGroup, 67 | ]); 68 | export const configCenter:{[key:string]:IConfigComponentGroup[]} = { 69 | element: elementConfigCenter, 70 | antd: antdConfigCenter, 71 | EChart: EchartsConfigCenter, 72 | 原生: NativeConfigCenter, 73 | 自定义: customConfigCenter, 74 | }; 75 | //这么写是为了让别人引用编辑器组件的时候不用全局引入其它组件库 76 | export const ComponentImport: IComponentImport = { 77 | "el-button": ElButton, 78 | "el-button-group": ElButtonGroup, 79 | "el-link": ElLink, 80 | "el-container": ElContainer, 81 | "el-header": ElHeader, 82 | "el-aside": ElAside, 83 | "el-main": ElMain, 84 | "el-footer": ElFooter, 85 | "el-row": ElRow, 86 | "el-col": ElCol, 87 | "el-scrollbar": ElScrollbar, 88 | "el-cascader": ElCascader, 89 | "el-cascader-panel": ElCascaderPanel, 90 | "el-checkbox": ElCheckbox, 91 | "el-checkbox-group": ElCheckboxGroup, 92 | "el-color-picker": ElColorPicker, 93 | "el-date-picker": ElDatePicker, 94 | "el-form": ElForm, 95 | "el-form-item": ElFormItem, 96 | "el-input": ElInput, 97 | "v-chart": VChart, 98 | "basic-line-chart": BasicLineChart, 99 | "stacked-line-chart": StackedLineChart, 100 | "basic-bar-chart": BasicBarChart, 101 | "horizontal-bar-chart": HorizontalBarChart, 102 | "basic-pie-chart": BasicPieChart, 103 | "doughnut-chart": DoughnutPieChart, 104 | "a-button": AButton, 105 | "custom-basic-table": CustomBasicTable, 106 | }; 107 | -------------------------------------------------------------------------------- /src/components/dream-design-edit/right-nav/config-edit.vue: -------------------------------------------------------------------------------- 1 | 59 | 93 | -------------------------------------------------------------------------------- /src/model/model.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 组件默认数据格式 3 | * @property {string} title 左侧工具栏组件的显示名称 4 | * @property {string} icon 组件的前缀图标 5 | * @property {IConfigComponentItemInfo} domInfo 组件的dom信息 6 | * @export 7 | * @interface IConfigComponentItem 8 | */ 9 | export interface IConfigComponentItem { 10 | title: string; 11 | icon: string; 12 | domInfo: IConfigComponentItemInfo; 13 | } 14 | 15 | /** 16 | * 组件dom信息格式 17 | * @property {string} tag 组件dom标签 18 | * @property {boolean} slots 是否具有插槽 19 | * @property {boolean} canMove 是否可以移动 20 | * @property {IConfigComponentItemInfo[]} childrens 默认插槽 21 | * @export 22 | * @interface IConfigComponentItemInfo 23 | */ 24 | export interface IConfigComponentItemInfo { 25 | tag: string; 26 | title: string; 27 | slots: boolean; 28 | canMove: boolean; 29 | canAllowTo: boolean; 30 | ClearStyle: boolean; 31 | tagSlots: { 32 | enable: boolean; 33 | val: any; 34 | }; 35 | childrens: IConfigComponentItemInfo[]; 36 | props: IConfigComponentItemProps; 37 | extProps?: { [key: string]: IDomExtProps }; 38 | classAttr?: IClassAttr; 39 | eventAttr?: IEventAttr; 40 | v_model?: ""; 41 | compatibility?: boolean; //有些组件无法拖动可设置兼容性 会在组件上层包裹一层div 42 | } 43 | export interface IConfigComponentItemProps { 44 | [key: string]: { 45 | type: string; 46 | default: any; 47 | source?: IConfigComponentItemPropsSource; 48 | title: string; 49 | tips: string; 50 | options?: { value: any; label: string }[]; 51 | config?: IConfigComponentItemProps; 52 | }; 53 | } 54 | //数据源来源 本地 远程 变量 待开发 55 | export enum IConfigComponentItemPropsSource { 56 | Local = "Local", 57 | Remote = "Remote", 58 | variable = "Variable", 59 | } 60 | /** 61 | * 组件分组数据格式 62 | * @property {string} groupType 组件分组类型 63 | * @property {string} title 组件分组标题 64 | * @property {IConfigComponentItem[]} list 分组包含的组件项列表 65 | * @export 66 | * @interface IComponentGroup 67 | */ 68 | export interface IConfigComponentGroup { 69 | groupType: string; 70 | title: string; 71 | list: IConfigComponentItem[]; 72 | } 73 | export enum ERightToolAttrType { 74 | Input = "Input", 75 | InputNumber = "InputNumber", 76 | ColorPicker = "ColorPicker", 77 | Select = "Select", 78 | Switch = "Switch", 79 | Radio = "Radio", 80 | JsonEdit = "JsonEdit", 81 | ConfigEdit = "ConfigEdit", 82 | } 83 | export interface IDoneComponent 84 | extends Omit { 85 | id: string; 86 | childrens: IDoneComponent[]; 87 | props: IDoneComponentProps; 88 | } 89 | export interface IDoneComponentProps { 90 | [key: string]: { 91 | default: any; 92 | config?:IConfigComponentItemProps 93 | }; 94 | } 95 | export interface IComponentImport { 96 | [key: string]: any; 97 | } 98 | export enum IDomExtProps { 99 | ChangeChildrenCount = "ChangeChildrenCount", //可以改变插槽内子元素个数最小为1 100 | } 101 | export interface IGloablCss { 102 | class_name: string; 103 | value: object; 104 | label: string; 105 | tips: string; 106 | } 107 | export interface IGloablEvent { 108 | event_name: string; 109 | value: string; 110 | label: string; 111 | tips: string; 112 | } 113 | export interface IClassAttr { 114 | global: string[]; 115 | custom?: { 116 | [key: string]: string; 117 | }; 118 | } 119 | export interface IEventAttr { 120 | [key: string]: { 121 | custom: boolean; 122 | tips: string; 123 | val: string; 124 | anonymous_params: string[]; 125 | list: string[]; 126 | }; 127 | } 128 | export enum IEventAttrType { 129 | Call = "call", //代表调用 130 | Custom = "custom", //代表自定义 131 | } 132 | export enum IMonacoLanguage { 133 | TypeScript = "typescript", 134 | JavaScript = "javascript", 135 | CSS = "css", 136 | JSON = "json", 137 | } 138 | export interface IParamEdit { 139 | name: string; 140 | type: IParamEditType; 141 | value_type: IParamEditValueType; 142 | val: any; 143 | } 144 | /** 145 | * 响应式类型 146 | */ 147 | export enum IParamEditType { 148 | None = "", 149 | Ref = "ref", 150 | Reactive = "reactive", 151 | } 152 | /** 153 | * 值类型 154 | */ 155 | export enum IParamEditValueType { 156 | String = "string", 157 | Boolean = "bool", 158 | Number = "number", 159 | Object = "object", 160 | Array = "array", 161 | } 162 | -------------------------------------------------------------------------------- /src/config-center/element/layout/grid/index.ts: -------------------------------------------------------------------------------- 1 | import { ERightToolAttrType, IConfigComponentItem, IDomExtProps } from "../../../../model/model"; 2 | const D_ElRow: IConfigComponentItem = { 3 | title: "行容器", 4 | icon: "grid", 5 | domInfo: { 6 | tag: "el-row", 7 | title: "el行容器", 8 | slots: true, 9 | canMove: true, 10 | canAllowTo: false, 11 | ClearStyle: true, 12 | props: { 13 | gutter: { 14 | type: ERightToolAttrType.InputNumber, 15 | default: 0, 16 | title: "栅格间隔", 17 | tips: "栅格间隔", 18 | }, 19 | justify: { 20 | type: ERightToolAttrType.Select, 21 | default: "start", 22 | title: "水平排列方式", 23 | tips: "flex布局下的水平排列方式", 24 | options: [ 25 | { 26 | value: "start", 27 | label: "start", 28 | }, 29 | { 30 | value: "end", 31 | label: "end", 32 | }, 33 | { 34 | value: "center", 35 | label: "center", 36 | }, 37 | { 38 | value: "space-around", 39 | label: "space-around", 40 | }, 41 | { 42 | value: "space-between", 43 | label: "space-between", 44 | }, 45 | ], 46 | }, 47 | align: { 48 | type: ERightToolAttrType.Select, 49 | default: "top", 50 | title: "垂直排列方式", 51 | tips: "flex布局下的垂直排列方式", 52 | options: [ 53 | { 54 | value: "top", 55 | label: "top", 56 | }, 57 | { 58 | value: "middle", 59 | label: "middle", 60 | }, 61 | { 62 | value: "bottom", 63 | label: "bottom", 64 | }, 65 | ], 66 | }, 67 | tag: { 68 | type: ERightToolAttrType.Input, 69 | default: "div", 70 | title: "元素标签", 71 | tips: "自定义元素标签", 72 | }, 73 | }, 74 | extProps:{ 75 | "列容器个数":IDomExtProps.ChangeChildrenCount 76 | }, 77 | tagSlots: { 78 | enable: false, 79 | val: "", 80 | }, 81 | childrens: [], 82 | }, 83 | }; 84 | const D_ElCol: IConfigComponentItem = { 85 | title: "列容器", 86 | icon: "grid", 87 | domInfo: { 88 | tag: "el-col", 89 | title: "el列容器", 90 | slots: true, 91 | canMove: false, 92 | canAllowTo: true, 93 | ClearStyle: false, 94 | props: { 95 | span: { 96 | type: ERightToolAttrType.InputNumber, 97 | default: 24, 98 | title: "占据列数", 99 | tips: "栅格占据的列数", 100 | }, 101 | offset: { 102 | type: ERightToolAttrType.InputNumber, 103 | default: 0, 104 | title: "左侧间隔格数", 105 | tips: "栅格左侧的间隔格数", 106 | }, 107 | push: { 108 | type: ERightToolAttrType.InputNumber, 109 | default: 0, 110 | title: "向右移动格数", 111 | tips: "栅格向右移动格数", 112 | }, 113 | pull: { 114 | type: ERightToolAttrType.InputNumber, 115 | default: 0, 116 | title: "向左移动格数", 117 | tips: "栅格向左移动格数", 118 | }, 119 | tag: { 120 | type: ERightToolAttrType.Input, 121 | default: "div", 122 | title: "元素标签", 123 | tips: "自定义元素标签", 124 | }, 125 | }, 126 | tagSlots: { 127 | enable: false, 128 | val: "", 129 | }, 130 | childrens: [], 131 | }, 132 | }; 133 | export const D_ElGrid1: IConfigComponentItem = { 134 | title: "单列栅格", 135 | icon: "grid1", 136 | domInfo: { ...D_ElRow.domInfo, childrens: [{ ...D_ElCol.domInfo }] }, 137 | }; 138 | export const D_ElGrid2: IConfigComponentItem = { 139 | title: "双列栅格", 140 | icon: "grid2", 141 | domInfo: { 142 | ...D_ElRow.domInfo, 143 | childrens: [ 144 | { 145 | ...D_ElCol.domInfo, 146 | props: { 147 | ...D_ElCol.domInfo.props, 148 | span: { 149 | ...D_ElCol.domInfo.props.span, 150 | default: 12, 151 | }, 152 | }, 153 | }, 154 | { 155 | ...D_ElCol.domInfo, 156 | props: { 157 | ...D_ElCol.domInfo.props, 158 | span: { 159 | ...D_ElCol.domInfo.props.span, 160 | default: 12, 161 | }, 162 | }, 163 | }, 164 | ], 165 | }, 166 | }; 167 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 声明 2 | 该项目被公司采用，后续暂停更新，实在抱歉！如有疑问请加qq群：209048413 3 | # 背景 4 | 5 | 2022年x月x日，某前端群。 6 | 7 | “我想开发一款页面设计器，目标是功能全到让老板流泪，二次开发简单到令人发指。兄弟萌帮我取个名字” 8 | 9 | “dream。我看你在做梦”，一个漂亮软妹随即回复到。 10 | 11 | dream？我突然眼前一亮！ 12 | 13 | 是啊！饼确实画的有点大，但是做人如果没有梦想，那和咸鱼又有什么区别呢？ 14 | 15 | 于是便有了它——Dream-design,我的梦想设计器！ 16 | 17 | Dream的D要大写，代表梦想一定要大 18 | 19 | design的d要小写，轻量简单才是我想要的 20 | 21 | ![](./readme_images/oh.gif) 22 | 23 | ## 预览地址 24 | 25 | [http://dream_design.yaolm.top/](http://dream_design.yaolm.top/)（请使用版本新一点的浏览器🤔） 26 | 27 | ## 项目介绍 28 | 29 | ### 与组件库一致的组件列表（大致一样😂） 30 | 31 | ![](./readme_images/组件库列表对比.png) 32 | 33 | ### 与组件库属性一致的设置面板 34 | 35 | ![](./readme_images/el按钮属性.png) 36 | 37 | ![](./readme_images/Dreamdesign按钮属性.png) 38 | 39 | ### 与编程一致的dom生成 40 | 41 | 编写如下代码 42 | 43 | ```vue 44 | 45 | 46 | 按钮一 47 | 按钮二 48 | 49 | 50 | ``` 51 | 52 | 运行项目审查元素，观察网页生成的dom元素为 53 | 54 | ```html 55 |
56 |
57 | 61 | 65 |
66 |
67 | ``` 68 | 69 | 使用Dreamdesign拖动一个单列栅格和两个按钮 70 | 71 | 审查元素，观察网页生成的dom元素为 72 | 73 | ```html 74 |
75 |
76 | 80 | 84 |
85 |
86 | ``` 87 | 88 | 89 | 90 | ### 设置面板预定义多种格式 91 | 92 | 除去基本的输入、开关、选择器、单选等，还封装了对象编辑器 93 | 94 | ![](./readme_images/对象编辑器.png) 95 | 96 | > 上图为级联选择器数据源编辑演示 97 | 98 | 还增加了配置编辑器，用来可视化操作属性为对象时的情况，例如element ui的级联选择器的props属性有如下字段 99 | 100 | ![](./readme_images/级联选择器props.png) 101 | 102 | 在Dreamdesign里可视化进行操作 103 | 104 | ![](./readme_images/配置可视化.png) 105 | 106 | ### 与dom层级一致的组件配置 107 | 108 | 非嵌套组件只需遵守如下格式 109 | 110 | ```js 111 | { 112 | tag: "el-button", 113 | title: "el按钮", 114 | ... 115 | childrens: [] 116 | } 117 | ``` 118 | 119 | 即可渲染出如下dom 120 | 121 | ```vue 122 | 123 | ``` 124 | 125 | 嵌套组件只需遵守如下格式 126 | 127 | ```js 128 | { 129 | tag: "el-row", 130 | title: "el行容器", 131 | ... 132 | childrens: [ 133 | { 134 | tag: "el-col", 135 | title: "el列容器", 136 | ... 137 | childrens: [] 138 | }] 139 | } 140 | ``` 141 | 142 | 即可渲染出如下dom 143 | 144 | ```vue 145 | 146 | 147 | 148 | ``` 149 | 150 | ### 支持多种组件库，支持自定义组件 151 | 152 | ![](./readme_images/多组件库支持.png) 153 | 154 | ### 支持全局预定义css调用，支持自定义css 155 | 156 | 参考public\mock\global_css.json，在此编写了css样式即可在右侧属性面板直接设置于组件上 157 | 158 | ![](./readme_images/预制css.png) 159 | 160 | 也可以自定义样式 161 | 162 | ![](./readme_images/自定义css.gif) 163 | 164 | 同时支持全局预定义函数调用，支持自定义函数，效果同上 165 | 166 | 167 | 168 | ## 如何进行开发 169 | 170 | ```powershell 171 | pnpm i 172 | 173 | pnpm run dev 174 | ``` 175 | 176 | ## 特别说明 177 | 178 | 其实说白了，就是一个框架，赋予了任意组件拖拽的行为。详细的二次开发文档会等项目开发完毕再编写。 179 | 虽然项目还没有开发完，但还是决定先发布出来了，毕竟一个人的力量是有限的，我更希望得到大家的建议 180 | -------------------------------------------------------------------------------- /src/config-center/echarts/line/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ERightToolAttrType, 3 | IConfigComponentGroup, 4 | IConfigComponentItem, 5 | } from "../../../model/model"; 6 | 7 | const D_EchartsBasicLine: IConfigComponentItem = { 8 | title: "基础折线图", 9 | icon: "chart-line", 10 | domInfo: { 11 | tag: "basic-line-chart", 12 | title: "基础折线图", 13 | slots: false, 14 | canMove: true, 15 | canAllowTo: false, 16 | ClearStyle: false, 17 | props: { 18 | title: { 19 | type: ERightToolAttrType.Input, 20 | default: "基础折线图", 21 | title: "标题", 22 | tips: "标题", 23 | }, 24 | xAxisData: { 25 | type: ERightToolAttrType.JsonEdit, 26 | default: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 27 | title: "X轴数据", 28 | tips: "X轴数据", 29 | }, 30 | seriesData: { 31 | type: ERightToolAttrType.JsonEdit, 32 | default: [150, 230, 224, 218, 135, 147, 260], 33 | title: "Y轴数据", 34 | tips: "Y轴数据", 35 | }, 36 | height: { 37 | type: ERightToolAttrType.InputNumber, 38 | default: 400, 39 | title: "高度", 40 | tips: "高度", 41 | }, 42 | width: { 43 | type: ERightToolAttrType.InputNumber, 44 | default: 400, 45 | title: "宽度", 46 | tips: "宽度", 47 | }, 48 | smooth: { 49 | type: ERightToolAttrType.Switch, 50 | default: false, 51 | title: "平滑效果", 52 | tips: "平滑效果", 53 | }, 54 | areaStyle: { 55 | type: ERightToolAttrType.JsonEdit, 56 | default: { 57 | color: "transparent", 58 | origin: "auto", 59 | shadowBlur: 0, 60 | shadowColor: "rgba(0, 0, 0, 0)", 61 | shadowOffsetX: 0, 62 | shadowOffsetY: 0, 63 | opacity: 1, 64 | }, 65 | title: "区域填充样式", 66 | tips: "区域填充样式", 67 | }, 68 | }, 69 | tagSlots: { 70 | enable: false, 71 | val: "", 72 | }, 73 | childrens: [], 74 | compatibility:true 75 | }, 76 | }; 77 | const D_EchartsStackedLine: IConfigComponentItem = { 78 | title: "折线图堆叠", 79 | icon: "stacked-line", 80 | domInfo: { 81 | tag: "stacked-line-chart", 82 | title: "折线图堆叠", 83 | slots: false, 84 | canMove: true, 85 | canAllowTo: false, 86 | ClearStyle: false, 87 | props: { 88 | title: { 89 | type: ERightToolAttrType.Input, 90 | default: "Stacked Line", 91 | title: "标题", 92 | tips: "标题", 93 | }, 94 | legend: { 95 | type: ERightToolAttrType.JsonEdit, 96 | default: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'], 97 | title: "图例数据", 98 | tips: "图例数据", 99 | }, 100 | xAxisData: { 101 | type: ERightToolAttrType.JsonEdit, 102 | default: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], 103 | title: "X轴数据", 104 | tips: "X轴数据", 105 | }, 106 | seriesData: { 107 | type: ERightToolAttrType.JsonEdit, 108 | default: [ 109 | { 110 | name: 'Email', 111 | type: 'line', 112 | stack: 'Total', 113 | data: [120, 132, 101, 134, 90, 230, 210] 114 | }, 115 | { 116 | name: 'Union Ads', 117 | type: 'line', 118 | stack: 'Total', 119 | data: [220, 182, 191, 234, 290, 330, 310] 120 | }, 121 | { 122 | name: 'Video Ads', 123 | type: 'line', 124 | stack: 'Total', 125 | data: [150, 232, 201, 154, 190, 330, 410] 126 | }, 127 | { 128 | name: 'Direct', 129 | type: 'line', 130 | stack: 'Total', 131 | data: [320, 332, 301, 334, 390, 330, 320] 132 | }, 133 | { 134 | name: 'Search Engine', 135 | type: 'line', 136 | stack: 'Total', 137 | data: [820, 932, 901, 934, 1290, 1330, 1320] 138 | } 139 | ], 140 | title: "数据源", 141 | tips: "数据源", 142 | }, 143 | height: { 144 | type: ERightToolAttrType.InputNumber, 145 | default: 400, 146 | title: "高度", 147 | tips: "高度", 148 | }, 149 | width: { 150 | type: ERightToolAttrType.InputNumber, 151 | default: 1000, 152 | title: "宽度", 153 | tips: "宽度", 154 | }, 155 | }, 156 | tagSlots: { 157 | enable: false, 158 | val: "", 159 | }, 160 | childrens: [], 161 | compatibility:true 162 | }, 163 | }; 164 | export const EchartsLineGroup: IConfigComponentGroup = { 165 | groupType: "line", 166 | title: "折线图", 167 | list: [D_EchartsBasicLine, D_EchartsStackedLine], 168 | }; 169 | -------------------------------------------------------------------------------- /src/config-center/element/form/input/index.ts: -------------------------------------------------------------------------------- 1 | import { ERightToolAttrType, IConfigComponentItem } from "../../../../model/model"; 2 | 3 | export const D_ElInput: IConfigComponentItem = { 4 | title: "输入框", 5 | icon: "input", 6 | domInfo: { 7 | tag: "el-input", 8 | title: "el输入框", 9 | slots: false, 10 | canMove: true, 11 | canAllowTo: false, 12 | ClearStyle: false, 13 | props: { 14 | type: { 15 | type: ERightToolAttrType.Select, 16 | default: "text", 17 | title: "类型", 18 | tips: "类型", 19 | options: [ 20 | { 21 | value: "textarea", 22 | label: "textarea", 23 | }, 24 | { 25 | value: "text", 26 | label: "text", 27 | } 28 | ], 29 | }, 30 | maxlength: { 31 | type: ERightToolAttrType.InputNumber, 32 | default: 100, 33 | title: "最大输入长度", 34 | tips: "最大输入长度", 35 | }, 36 | minlength: { 37 | type: ERightToolAttrType.InputNumber, 38 | default: 0, 39 | title: "最小输入长度", 40 | tips: "最小输入长度", 41 | }, 42 | 'show-word-limit': { 43 | type: ERightToolAttrType.Switch, 44 | default: false, 45 | title: "显示输入字数", 46 | tips: "是否显示输入字数统计,只在 type = \"text\" 或 type = \"textarea\" 时有效", 47 | }, 48 | placeholder: { 49 | type: ERightToolAttrType.Input, 50 | default: `请输入文字`, 51 | title: "输入框占位文本", 52 | tips: "输入框占位文本", 53 | }, 54 | clearable: { 55 | type: ERightToolAttrType.Switch, 56 | default: false, 57 | title: "可清空", 58 | tips: "可清空", 59 | }, 60 | 'show-password': { 61 | type: ERightToolAttrType.Switch, 62 | default: false, 63 | title: "切换密码图标", 64 | tips: "是否显示切换密码图标", 65 | }, 66 | disabled: { 67 | type: ERightToolAttrType.Switch, 68 | default: false, 69 | title: "禁用", 70 | tips: "是否禁用", 71 | }, 72 | size: { 73 | type: ERightToolAttrType.Select, 74 | default: "default", 75 | title: "尺寸", 76 | tips: "尺寸", 77 | options: [ 78 | { 79 | value: "large", 80 | label: "大", 81 | }, 82 | { 83 | value: "default", 84 | label: "默认", 85 | }, 86 | { 87 | value: "small", 88 | label: "小", 89 | } 90 | ], 91 | }, 92 | "prefix-icon": { 93 | type: ERightToolAttrType.Select, 94 | default: "", 95 | title: "前缀icon", 96 | tips: "自定义前缀图标", 97 | options: [ 98 | { 99 | value: "", 100 | label: "无", 101 | }, 102 | { 103 | value: "Edit", 104 | label: "Edit", 105 | }, 106 | { 107 | value: "Search", 108 | label: "Search", 109 | }, 110 | ], 111 | }, 112 | "suffix-icon": { 113 | type: ERightToolAttrType.Select, 114 | default: "", 115 | title: "后缀icon", 116 | tips: "自定义后缀图标", 117 | options: [ 118 | { 119 | value: "", 120 | label: "无", 121 | }, 122 | { 123 | value: "Edit", 124 | label: "Edit", 125 | }, 126 | { 127 | value: "Search", 128 | label: "Search", 129 | }, 130 | ], 131 | }, 132 | rows: { 133 | type: ERightToolAttrType.InputNumber, 134 | default: 2, 135 | title: "输入框行数", 136 | tips: "输入框行数,只对 type=\"textarea\" 有效", 137 | }, 138 | autosize: { 139 | type: ERightToolAttrType.Switch, 140 | default: false, 141 | title: "高度自适应", 142 | tips: "textarea高度是否自适应,只在 type=\"textarea\" 时生效。 ", 143 | }, 144 | autocomplete: { 145 | type: ERightToolAttrType.Input, 146 | default: `off`, 147 | title: "自动补全", 148 | tips: "原生属性,自动补全", 149 | }, 150 | name: { 151 | type: ERightToolAttrType.Input, 152 | default: ``, 153 | title: "原生属性name", 154 | tips: "原生属性name", 155 | }, 156 | readonly: { 157 | type: ERightToolAttrType.Switch, 158 | default: false, 159 | title: "原生只读", 160 | tips: "原生属性,是否只读 ", 161 | }, 162 | //够多了下面不写了 163 | }, 164 | tagSlots: { 165 | enable: false, 166 | val: "", 167 | }, 168 | eventAttr: { 169 | change: { 170 | custom: true, 171 | tips: "当绑定值变化时触发", 172 | val: "console.log('ColorPicker--change:'+value);", 173 | anonymous_params: ["value"], 174 | list: [], 175 | }, 176 | 'active-change': { 177 | custom: true, 178 | tips: "显示的颜色发生改变时触发", 179 | val: "console.log('ColorPicker--active-change:'+value);", 180 | anonymous_params: ["value"], 181 | list: [], 182 | }, 183 | }, 184 | childrens: [], 185 | compatibility:true 186 | }, 187 | }; 188 | -------------------------------------------------------------------------------- /src/components/dream-design-edit/left-nav/index.vue: -------------------------------------------------------------------------------- 1 | 2 | 39 | 40 | 125 | -------------------------------------------------------------------------------- /src/config-center/element/layout/container/index.ts: -------------------------------------------------------------------------------- 1 | import { ERightToolAttrType, IConfigComponentItem } from "../../../../model/model"; 2 | const D_ElContainer: IConfigComponentItem = { 3 | title: "外层容器", 4 | icon: "grid", 5 | domInfo: { 6 | tag: "el-container", 7 | title: "el外层容器", 8 | slots: true, 9 | canMove: true, 10 | canAllowTo: false, 11 | ClearStyle: true, 12 | props: { 13 | direction: { 14 | type: ERightToolAttrType.Select, 15 | default: "horizontal", 16 | title: "排列方向", 17 | tips: "子元素的排列方向", 18 | options: [ 19 | { 20 | value: "horizontal", 21 | label: "horizontal", 22 | }, 23 | { 24 | value: "vertical", 25 | label: "vertical", 26 | }, 27 | ], 28 | }, 29 | }, 30 | tagSlots: { 31 | enable: false, 32 | val: "", 33 | }, 34 | childrens: [], 35 | }, 36 | }; 37 | const D_ElHeader: IConfigComponentItem = { 38 | title: "顶栏容器", 39 | icon: "grid", 40 | domInfo: { 41 | tag: "el-header", 42 | title: "el顶栏容器", 43 | slots: true, 44 | canMove: false, 45 | canAllowTo: true, 46 | ClearStyle: false, 47 | props: { 48 | height: { 49 | type: ERightToolAttrType.Input, 50 | default: "60px", 51 | title: "顶栏高度", 52 | tips: "顶栏高度", 53 | }, 54 | }, 55 | tagSlots: { 56 | enable: false, 57 | val: "", 58 | }, 59 | childrens: [], 60 | }, 61 | }; 62 | const D_ElAside: IConfigComponentItem = { 63 | title: "侧边栏容器", 64 | icon: "grid", 65 | domInfo: { 66 | tag: "el-aside", 67 | title: "el侧边栏容器", 68 | slots: true, 69 | canMove: false, 70 | canAllowTo: true, 71 | ClearStyle: false, 72 | props: { 73 | width: { 74 | type: ERightToolAttrType.Input, 75 | default: "300px", 76 | title: "侧边栏宽度", 77 | tips: "侧边栏宽度", 78 | }, 79 | }, 80 | tagSlots: { 81 | enable: false, 82 | val: "", 83 | }, 84 | childrens: [], 85 | }, 86 | }; 87 | const D_ElMain: IConfigComponentItem = { 88 | title: "主要区域容器", 89 | icon: "grid", 90 | domInfo: { 91 | tag: "el-main", 92 | title: "el主要区域容器", 93 | slots: true, 94 | canMove: false, 95 | canAllowTo: true, 96 | ClearStyle: false, 97 | props: {}, 98 | tagSlots: { 99 | enable: false, 100 | val: "", 101 | }, 102 | childrens: [], 103 | }, 104 | }; 105 | const D_ElFooter: IConfigComponentItem = { 106 | title: "底栏容器", 107 | icon: "grid", 108 | domInfo: { 109 | tag: "el-footer", 110 | title: "el底栏容器", 111 | slots: true, 112 | canMove: false, 113 | canAllowTo: true, 114 | ClearStyle: false, 115 | props: { 116 | height: { 117 | type: ERightToolAttrType.Input, 118 | default: "60px", 119 | title: "底栏高度", 120 | tips: "底栏高度", 121 | }, 122 | }, 123 | tagSlots: { 124 | enable: false, 125 | val: "", 126 | }, 127 | childrens: [], 128 | }, 129 | }; 130 | export const D_ElContainer1: IConfigComponentItem = { 131 | title: "顶-中布局", 132 | icon: "top-main", 133 | domInfo: { 134 | ...D_ElContainer.domInfo, 135 | props: { 136 | ...D_ElContainer.domInfo.props, 137 | direction: { 138 | ...D_ElContainer.domInfo.props.direction, 139 | default: "vertical", 140 | }, 141 | }, 142 | childrens: [{ ...D_ElHeader.domInfo }, { ...D_ElMain.domInfo }], 143 | }, 144 | }; 145 | export const D_ElContainer2: IConfigComponentItem = { 146 | title: "顶中下布局", 147 | icon: "top-main-footer", 148 | domInfo: { 149 | ...D_ElContainer.domInfo, 150 | props: { 151 | ...D_ElContainer.domInfo.props, 152 | direction: { 153 | ...D_ElContainer.domInfo.props.direction, 154 | default: "vertical", 155 | }, 156 | }, 157 | childrens: [ 158 | { ...D_ElHeader.domInfo }, 159 | { ...D_ElMain.domInfo }, 160 | { ...D_ElFooter.domInfo }, 161 | ], 162 | }, 163 | }; 164 | export const D_ElContainer3: IConfigComponentItem = { 165 | title: "左-中布局", 166 | icon: "left-main", 167 | domInfo: { 168 | ...D_ElContainer.domInfo, 169 | props: { 170 | ...D_ElContainer.domInfo.props, 171 | direction: { 172 | ...D_ElContainer.domInfo.props.direction, 173 | }, 174 | }, 175 | childrens: [{ ...D_ElAside.domInfo }, { ...D_ElMain.domInfo }], 176 | }, 177 | }; 178 | export const D_ElContainer4: IConfigComponentItem = { 179 | title: "上左中布局", 180 | icon: "top-left-main", 181 | domInfo: { 182 | ...D_ElContainer.domInfo, 183 | props: { 184 | ...D_ElContainer.domInfo.props, 185 | direction: { 186 | ...D_ElContainer.domInfo.props.direction, 187 | default: "vertical", 188 | }, 189 | }, 190 | childrens: [ 191 | { ...D_ElHeader.domInfo }, 192 | { 193 | ...D_ElContainer.domInfo, 194 | props: { 195 | ...D_ElContainer.domInfo.props, 196 | direction: { 197 | ...D_ElContainer.domInfo.props.direction, 198 | }, 199 | }, 200 | childrens: [{ ...D_ElAside.domInfo }, { ...D_ElMain.domInfo }], 201 | }, 202 | ], 203 | }, 204 | }; 205 | -------------------------------------------------------------------------------- /src/config-center/element/form/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ERightToolAttrType, 3 | IConfigComponentItem, 4 | IDomExtProps, 5 | } from "../../../../model/model"; 6 | 7 | export const D_ElCheckbox: IConfigComponentItem = { 8 | title: "多选框", 9 | icon: "checkbox", 10 | domInfo: { 11 | tag: "el-checkbox", 12 | title: "el多选框", 13 | slots: false, 14 | canMove: true, 15 | canAllowTo: false, 16 | ClearStyle: false, 17 | props: { 18 | label: { 19 | type: ERightToolAttrType.Input, 20 | default: "Option", 21 | title: "选中值", 22 | tips: "选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效)", 23 | }, 24 | "true-label": { 25 | type: ERightToolAttrType.Input, 26 | default: "", 27 | title: "选中时的值", 28 | tips: "选中时的值", 29 | }, 30 | "false-label": { 31 | type: ERightToolAttrType.Input, 32 | default: "", 33 | title: "未选中时值", 34 | tips: "没有选中时的值", 35 | }, 36 | disabled: { 37 | type: ERightToolAttrType.Switch, 38 | default: false, 39 | title: "禁用", 40 | tips: "是否禁用", 41 | }, 42 | border: { 43 | type: ERightToolAttrType.Switch, 44 | default: false, 45 | title: "显示边框", 46 | tips: "是否显示边框", 47 | }, 48 | size: { 49 | type: ERightToolAttrType.Select, 50 | default: "default", 51 | title: "尺寸", 52 | tips: "Checkbox 的尺寸", 53 | options: [ 54 | { 55 | value: "large", 56 | label: "大", 57 | }, 58 | { 59 | value: "default", 60 | label: "默认", 61 | }, 62 | { 63 | value: "small", 64 | label: "小", 65 | }, 66 | ], 67 | }, 68 | name: { 69 | type: ERightToolAttrType.Input, 70 | default: "", 71 | title: "name属性", 72 | tips: "原生name属性", 73 | }, 74 | checked: { 75 | type: ERightToolAttrType.Switch, 76 | default: false, 77 | title: "是否勾选", 78 | tips: "当前是否勾选", 79 | }, 80 | indeterminate: { 81 | type: ERightToolAttrType.Switch, 82 | default: false, 83 | title: "indeterminate", 84 | tips: "设置 indeterminate 状态,只负责样式控制", 85 | }, 86 | }, 87 | tagSlots: { 88 | enable: false, 89 | val: "", 90 | }, 91 | eventAttr: { 92 | change: { 93 | custom: true, 94 | tips: "当绑定值变化时触发的事件", 95 | val: "console.log('Checkbox--change:'+value);", 96 | anonymous_params: ["value"], 97 | list: [], 98 | }, 99 | }, 100 | childrens: [], 101 | }, 102 | }; 103 | export const D_ElCheckboxGroup: IConfigComponentItem = { 104 | title: "双多选框组", 105 | icon: "checkbox-group", 106 | domInfo: { 107 | tag: "el-checkbox-group", 108 | title: "el多选框组", 109 | slots: true, 110 | canMove: true, 111 | canAllowTo: false, 112 | ClearStyle: true, 113 | props: { 114 | size: { 115 | type: ERightToolAttrType.Select, 116 | default: "default", 117 | title: "尺寸", 118 | tips: "Checkbox 的尺寸", 119 | options: [ 120 | { 121 | value: "large", 122 | label: "大", 123 | }, 124 | { 125 | value: "default", 126 | label: "默认", 127 | }, 128 | { 129 | value: "small", 130 | label: "小", 131 | }, 132 | ], 133 | }, 134 | disabled: { 135 | type: ERightToolAttrType.Switch, 136 | default: false, 137 | title: "禁用", 138 | tips: "是否禁用", 139 | }, 140 | min: { 141 | type: ERightToolAttrType.InputNumber, 142 | default: 0, 143 | title: "最小数量", 144 | tips: "可被勾选的checkbox的最小数量", 145 | }, 146 | max: { 147 | type: ERightToolAttrType.InputNumber, 148 | default: 100, 149 | title: "最大数量", 150 | tips: "可被勾选的checkbox的最大数量", 151 | }, 152 | "text-color": { 153 | type: ERightToolAttrType.ColorPicker, 154 | default: "#ffffff", 155 | title: "文本颜色", 156 | tips: "按钮形式的Checkbox激活时的文本颜色", 157 | }, 158 | fill: { 159 | type: ERightToolAttrType.ColorPicker, 160 | default: "#409EFF", 161 | title: "填充颜色", 162 | tips: "按钮形式的Checkbox激活时的填充色和边框色", 163 | }, 164 | }, 165 | extProps: { 166 | 选项个数: IDomExtProps.ChangeChildrenCount, 167 | }, 168 | tagSlots: { 169 | enable: false, 170 | val: "", 171 | }, 172 | eventAttr: { 173 | change: { 174 | custom: true, 175 | tips: "当绑定值变化时触发的事件", 176 | val: "console.log('Checkboxgroup--change:'+value);", 177 | anonymous_params: ["value"], 178 | list: [], 179 | }, 180 | }, 181 | childrens: [ 182 | { 183 | ...D_ElCheckbox.domInfo, 184 | props: { 185 | ...D_ElCheckbox.domInfo.props, 186 | label: { ...D_ElCheckbox.domInfo.props.label, default: "Option1" }, 187 | }, 188 | title: "多选框组一", 189 | canMove: false, 190 | ClearStyle: true, 191 | }, 192 | { 193 | ...D_ElCheckbox.domInfo, 194 | props: { 195 | ...D_ElCheckbox.domInfo.props, 196 | label: { ...D_ElCheckbox.domInfo.props.label, default: "Option2" }, 197 | }, 198 | title: "多选框组二", 199 | canMove: false, 200 | ClearStyle: true, 201 | }, 202 | ], 203 | }, 204 | }; 205 | -------------------------------------------------------------------------------- /src/config-center/element/form/form/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ERightToolAttrType, 3 | IConfigComponentItem, 4 | IDomExtProps, 5 | } from "../../../../model/model"; 6 | const D_ElForm: IConfigComponentItem = { 7 | title: "表单容器", 8 | icon: "grid", 9 | domInfo: { 10 | tag: "el-form", 11 | title: "el表单容器", 12 | slots: true, 13 | canMove: true, 14 | canAllowTo: false, 15 | ClearStyle: true, 16 | props: { 17 | rules: { 18 | type: ERightToolAttrType.JsonEdit, 19 | default: { trigger: "blur" }, 20 | title: "验证规则", 21 | tips: "表单验证规则", 22 | }, 23 | inline: { 24 | type: ERightToolAttrType.Switch, 25 | default: false, 26 | title: "行内表单", 27 | tips: "行内表单模式" 28 | }, 29 | 'label-position': { 30 | type: ERightToolAttrType.Select, 31 | default: "right", 32 | title: "标签位置", 33 | tips: "表单域标签的位置,如果值为 left 或者 right 时,则需要设置 label-width", 34 | options: [ 35 | { 36 | value: "left", 37 | label: "left", 38 | }, 39 | { 40 | value: "right", 41 | label: "right", 42 | }, 43 | { 44 | value: "top", 45 | label: "top", 46 | }, 47 | ], 48 | }, 49 | 'label-width': { 50 | type: ERightToolAttrType.Input, 51 | default: "50px", 52 | title: "标签宽度", 53 | tips: "表单域标签的宽度,例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto。", 54 | }, 55 | 'label-suffix': { 56 | type: ERightToolAttrType.Input, 57 | default: "", 58 | title: "标签后缀", 59 | tips: "表单域标签的后缀", 60 | }, 61 | 'hide-required-asterisk': { 62 | type: ERightToolAttrType.Switch, 63 | default: false, 64 | title: "显示星号", 65 | tips: "是否显示必填字段的标签旁边的红色星号", 66 | }, 67 | 'show-message': { 68 | type: ERightToolAttrType.Switch, 69 | default: false, 70 | title: "显示校验错误", 71 | tips: "是否显示校验错误信息", 72 | }, 73 | 'inline-message': { 74 | type: ERightToolAttrType.Switch, 75 | default: false, 76 | title: "行内形式展示", 77 | tips: "是否以行内形式展示校验信息", 78 | }, 79 | 'status-icon': { 80 | type: ERightToolAttrType.Switch, 81 | default: false, 82 | title: "显示反馈图标", 83 | tips: "是否在输入框中显示校验结果反馈图标", 84 | }, 85 | 'validate-on-rule-change': { 86 | type: ERightToolAttrType.Switch, 87 | default: true, 88 | title: "立即触发验证", 89 | tips: "是否在 rules 属性改变后立即触发一次验证", 90 | }, 91 | size: { 92 | type: ERightToolAttrType.Select, 93 | default: "default", 94 | title: "组件尺寸", 95 | tips: "用于控制该表单内组件的尺寸", 96 | options: [ 97 | { 98 | value: "large", 99 | label: "large", 100 | }, 101 | { 102 | value: "default", 103 | label: "default", 104 | }, 105 | { 106 | value: "small", 107 | label: "small", 108 | }, 109 | ], 110 | }, 111 | disabled: { 112 | type: ERightToolAttrType.Switch, 113 | default: false, 114 | title: "禁用", 115 | tips: "是否禁用该表单内的所有组件。 若设置为 true,则表单内组件上的 disabled 属性不再生效", 116 | }, 117 | }, 118 | extProps: { 119 | 列容器个数: IDomExtProps.ChangeChildrenCount, 120 | }, 121 | tagSlots: { 122 | enable: false, 123 | val: "", 124 | }, 125 | childrens: [], 126 | }, 127 | }; 128 | const D_ElFormItem: IConfigComponentItem = { 129 | title: "表单项", 130 | icon: "grid", 131 | domInfo: { 132 | tag: "el-form-item", 133 | title: "el表单项", 134 | slots: true, 135 | canMove: false, 136 | canAllowTo: true, 137 | ClearStyle: false, 138 | props: { 139 | label: { 140 | type: ERightToolAttrType.Input, 141 | default: "标签", 142 | title: "标签", 143 | tips: "标签", 144 | }, 145 | 'label-width': { 146 | type: ERightToolAttrType.Input, 147 | default: "100px", 148 | title: "标签宽度", 149 | tips: "表单域标签的宽度,例如 '50px'。 支持 auto。", 150 | }, 151 | required: { 152 | type: ERightToolAttrType.Switch, 153 | default: false, 154 | title: "必填", 155 | tips: "是否必填,如不设置,则会根据校验规则自动生成", 156 | }, 157 | rules: { 158 | type: ERightToolAttrType.JsonEdit, 159 | default: {}, 160 | title: "表单验证规则", 161 | tips: "表单验证规则", 162 | }, 163 | error: { 164 | type: ERightToolAttrType.Input, 165 | default: "", 166 | title: "错误信息", 167 | tips: "表单域验证错误信息, 设置该值会使表单验证状态变为 error,并显示该错误信息", 168 | }, 169 | 'show-message': { 170 | type: ERightToolAttrType.Switch, 171 | default: true, 172 | title: "显示校验错误", 173 | tips: "是否显示校验错误信息", 174 | }, 175 | 'inline-message': { 176 | type: ERightToolAttrType.Switch, 177 | default: false, 178 | title: "行内形式展示", 179 | tips: "以行内形式展示校验信息", 180 | }, 181 | size: { 182 | type: ERightToolAttrType.Select, 183 | default: "default", 184 | title: "大小", 185 | tips: "控制组件在此表单项中的大小", 186 | options: [ 187 | { 188 | value: "large", 189 | label: "large", 190 | }, 191 | { 192 | value: "default", 193 | label: "default", 194 | }, 195 | { 196 | value: "small", 197 | label: "small", 198 | }, 199 | ], 200 | }, 201 | }, 202 | tagSlots: { 203 | enable: false, 204 | val: "", 205 | }, 206 | childrens: [], 207 | compatibility:true 208 | }, 209 | }; 210 | export const D_ElFormContainer: IConfigComponentItem = { 211 | title: "表单容器", 212 | icon: "form", 213 | domInfo: { ...D_ElForm.domInfo, childrens: [{ ...D_ElFormItem.domInfo }] }, 214 | }; 215 | 216 | -------------------------------------------------------------------------------- /src/config-center/element/basic/button/index.ts: -------------------------------------------------------------------------------- 1 | import { IConfigComponentItem, ERightToolAttrType, IDomExtProps, IEventAttrType } from "../../../../model/model"; 2 | 3 | export const D_ElButton: IConfigComponentItem = { 4 | title: "按钮", 5 | icon: "button", 6 | domInfo: { 7 | tag: "el-button", 8 | title: "el按钮", 9 | slots: false, 10 | canMove: true, 11 | canAllowTo: false, 12 | ClearStyle: false, 13 | props: { 14 | size: { 15 | type: ERightToolAttrType.Select, 16 | default: "default", 17 | title: "尺寸", 18 | tips: "尺寸", 19 | options: [ 20 | { 21 | value: "large", 22 | label: "特大", 23 | }, 24 | { 25 | value: "default", 26 | label: "大", 27 | }, 28 | { 29 | value: "small", 30 | label: "中", 31 | }, 32 | ], 33 | }, 34 | type: { 35 | type: ERightToolAttrType.Select, 36 | default: "primary", 37 | title: "类型", 38 | tips: "类型", 39 | options: [ 40 | { 41 | value: "default", 42 | label: "默认按钮", 43 | }, 44 | { 45 | value: "primary", 46 | label: "主要按钮", 47 | }, 48 | { 49 | value: "success", 50 | label: "成功按钮", 51 | }, 52 | { 53 | value: "warning", 54 | label: "警告按钮", 55 | }, 56 | { 57 | value: "danger", 58 | label: "危险按钮", 59 | }, 60 | { 61 | value: "info", 62 | label: "信息按钮", 63 | }, 64 | { 65 | value: "text", 66 | label: "文字按钮", 67 | }, 68 | ], 69 | }, 70 | plain: { 71 | type: ERightToolAttrType.Switch, 72 | default: false, 73 | title: "朴素按钮", 74 | tips: "是否为朴素按钮", 75 | }, 76 | round: { 77 | type: ERightToolAttrType.Switch, 78 | default: false, 79 | title: "圆角按钮", 80 | tips: "是否为圆角按钮", 81 | }, 82 | circle: { 83 | type: ERightToolAttrType.Switch, 84 | default: false, 85 | title: "圆形按钮", 86 | tips: "是否为圆形按钮", 87 | }, 88 | loading: { 89 | type: ERightToolAttrType.Switch, 90 | default: false, 91 | title: "加载中", 92 | tips: "是否为加载中状态", 93 | }, 94 | "loading-icon": { 95 | type: ERightToolAttrType.Select, 96 | default: "", 97 | title: "加载中icon", 98 | tips: "自定义加载中图标", 99 | options: [ 100 | { 101 | value: "", 102 | label: "无", 103 | }, 104 | { 105 | value: "Edit", 106 | label: "Edit", 107 | }, 108 | { 109 | value: "Search", 110 | label: "Search", 111 | }, 112 | ], 113 | }, 114 | disabled: { 115 | type: ERightToolAttrType.Switch, 116 | default: false, 117 | title: "禁用", 118 | tips: "是否为禁用状态" 119 | }, 120 | icon: { 121 | type: ERightToolAttrType.Select, 122 | default: "", 123 | title: "icon", 124 | tips: "自定义图标", 125 | options: [ 126 | { 127 | value: "", 128 | label: "无", 129 | }, 130 | { 131 | value: "Edit", 132 | label: "Edit", 133 | }, 134 | { 135 | value: "Search", 136 | label: "Search", 137 | }, 138 | ], 139 | }, 140 | autofocus: { 141 | type: ERightToolAttrType.Switch, 142 | default: false, 143 | title: "自动焦点", 144 | tips: "原生autofocus属性", 145 | }, 146 | "native-type": { 147 | type: ERightToolAttrType.Select, 148 | default: "button", 149 | title: "原生按钮类型", 150 | tips: "原生type属性", 151 | options: [ 152 | { 153 | value: "button", 154 | label: "button", 155 | }, 156 | { 157 | value: "submit", 158 | label: "submit", 159 | }, 160 | { 161 | value: "reset", 162 | label: "reset", 163 | }, 164 | ], 165 | }, 166 | //这个也没生效 167 | "auto-insert-space": { 168 | type: ERightToolAttrType.Radio, 169 | default: false, 170 | title: "自动空格", 171 | tips: "自动在两个中文之间加空格", 172 | options: [ 173 | { 174 | value: true, 175 | label: "是", 176 | }, 177 | { 178 | value: false, 179 | label: "否", 180 | }, 181 | ], 182 | }, 183 | }, 184 | eventAttr: { 185 | click: { 186 | custom: true, 187 | tips:'点击', 188 | val: "alert('点击了按钮')", 189 | anonymous_params:[], 190 | list:[] 191 | } 192 | }, 193 | tagSlots: { 194 | enable: true, 195 | val: "el按钮", 196 | }, 197 | childrens: [], 198 | }, 199 | }; 200 | export const D_ElButtonGroup: IConfigComponentItem = { 201 | title: "双按钮组", 202 | icon: "button-group", 203 | domInfo: { 204 | tag: "el-button-group", 205 | title: "el按钮组", 206 | slots: true, 207 | canMove: true, 208 | canAllowTo: false, 209 | ClearStyle: true, 210 | props: {}, 211 | extProps: { 212 | "按钮个数": IDomExtProps.ChangeChildrenCount 213 | }, 214 | tagSlots: { 215 | enable: false, 216 | val: "", 217 | }, 218 | childrens: [ 219 | { 220 | ...D_ElButton.domInfo, 221 | title: "按钮组一", 222 | tagSlots: { 223 | enable: true, 224 | val: "按钮一", 225 | }, 226 | canMove: false, 227 | ClearStyle: true, 228 | }, 229 | { 230 | ...D_ElButton.domInfo, 231 | title: "按钮组二", 232 | tagSlots: { 233 | enable: true, 234 | val: "按钮二", 235 | }, 236 | canMove: false, 237 | ClearStyle: true, 238 | }, 239 | ], 240 | }, 241 | }; 242 | -------------------------------------------------------------------------------- /src/config-center/element/form/datepicker/index.ts: -------------------------------------------------------------------------------- 1 | import { ERightToolAttrType, IConfigComponentItem } from "../../../../model/model"; 2 | 3 | export const D_ElDatePicker: IConfigComponentItem = { 4 | title: "日期选择器", 5 | icon: "datepicker", 6 | domInfo: { 7 | tag: "el-date-picker", 8 | title: "el日期选择器", 9 | slots: false, 10 | canMove: true, 11 | canAllowTo: false, 12 | ClearStyle: false, 13 | props: { 14 | readonly: { 15 | type: ERightToolAttrType.Switch, 16 | default: false, 17 | title: "只读", 18 | tips: "只读", 19 | }, 20 | disabled: { 21 | type: ERightToolAttrType.Switch, 22 | default: false, 23 | title: "禁用", 24 | tips: "是否禁用", 25 | }, 26 | size: { 27 | type: ERightToolAttrType.Select, 28 | default: "default", 29 | title: "尺寸", 30 | tips: "尺寸", 31 | options: [ 32 | { 33 | value: "large", 34 | label: "大", 35 | }, 36 | { 37 | value: "default", 38 | label: "默认", 39 | }, 40 | { 41 | value: "small", 42 | label: "小", 43 | }, 44 | ], 45 | }, 46 | editable: { 47 | type: ERightToolAttrType.Switch, 48 | default: true, 49 | title: "可输入", 50 | tips: "文本框可输入", 51 | }, 52 | clearable: { 53 | type: ERightToolAttrType.Switch, 54 | default: true, 55 | title: "可清除", 56 | tips: "是否显示清除按钮", 57 | }, 58 | placeholder: { 59 | type: ERightToolAttrType.Input, 60 | default: "", 61 | title: "非范围占位", 62 | tips: "非范围选择时的占位内容", 63 | }, 64 | "start-placeholder": { 65 | type: ERightToolAttrType.Input, 66 | default: "", 67 | title: "开始日期占位", 68 | tips: "范围选择时开始日期的占位内容", 69 | }, 70 | "end-placeholder": { 71 | type: ERightToolAttrType.Input, 72 | default: "", 73 | title: "结束日期占位", 74 | tips: "范围选择时结束日期的占位内容", 75 | }, 76 | type: { 77 | type: ERightToolAttrType.Select, 78 | default: "date", 79 | title: "显示类型", 80 | tips: "显示类型", 81 | options: [ 82 | { 83 | value: "year", 84 | label: "year", 85 | }, 86 | { 87 | value: "month", 88 | label: "month", 89 | }, 90 | { 91 | value: "date", 92 | label: "date", 93 | }, 94 | { 95 | value: "dates", 96 | label: "dates", 97 | }, 98 | { 99 | value: "datetime", 100 | label: "datetime", 101 | }, 102 | { 103 | value: "week", 104 | label: "week", 105 | }, 106 | { 107 | value: "datetimerange", 108 | label: "datetimerange", 109 | }, 110 | { 111 | value: "daterange", 112 | label: "daterange", 113 | }, 114 | { 115 | value: "monthrange", 116 | label: "monthrange", 117 | }, 118 | ], 119 | }, 120 | format: { 121 | type: ERightToolAttrType.Input, 122 | default: null, 123 | title: "格式化", 124 | tips: "显示在输入框中的格式", 125 | }, 126 | "popper-class": { 127 | type: ERightToolAttrType.Input, 128 | default: "", 129 | title: "下拉框类名", 130 | tips: "DatePicker下拉框的类名", 131 | }, 132 | "range-separator": { 133 | type: ERightToolAttrType.Input, 134 | default: "-", 135 | title: "分隔符", 136 | tips: "选择范围时的分隔符", 137 | }, 138 | "unlink-panels": { 139 | type: ERightToolAttrType.Switch, 140 | default: false, 141 | title: "取消联动", 142 | tips: "在范围选择器里取消两个日期面板之间的联动", 143 | }, 144 | "prefix-icon": { 145 | type: ERightToolAttrType.Select, 146 | default: "", 147 | title: "前缀icon", 148 | tips: "自定义前缀图标", 149 | options: [ 150 | { 151 | value: "", 152 | label: "Date", 153 | }, 154 | { 155 | value: "Edit", 156 | label: "Edit", 157 | }, 158 | { 159 | value: "Search", 160 | label: "Search", 161 | }, 162 | ], 163 | }, 164 | "clear-icon": { 165 | type: ERightToolAttrType.Select, 166 | default: "CircleClose", 167 | title: "清除icon", 168 | tips: "自定义清除图标", 169 | options: [ 170 | { 171 | value: "CircleClose", 172 | label: "CircleClose", 173 | }, 174 | { 175 | value: "Edit", 176 | label: "Edit", 177 | }, 178 | { 179 | value: "Search", 180 | label: "Search", 181 | }, 182 | ], 183 | }, 184 | "validate-event": { 185 | type: ERightToolAttrType.Switch, 186 | default: true, 187 | title: "表单校验", 188 | tips: "输入时是否触发表单的校验", 189 | }, 190 | }, 191 | tagSlots: { 192 | enable: false, 193 | val: "", 194 | }, 195 | eventAttr: { 196 | change: { 197 | custom: true, 198 | tips: "用户确认选定的值时触发", 199 | val: "console.log('DatePicker--change:'+value);", 200 | anonymous_params: ["value"], 201 | list: [], 202 | }, 203 | blur: { 204 | custom: true, 205 | tips: "在组件Input失去焦点时触发", 206 | val: "console.log('DatePicker--blur:'+e);", 207 | anonymous_params: ["e"], 208 | list: [], 209 | }, 210 | focus: { 211 | custom: true, 212 | tips: "在组件Input获得焦点时触发", 213 | val: "console.log('DatePicker--focus:'+JSON.stringify(e));", 214 | anonymous_params: ["e"], 215 | list: [], 216 | }, 217 | "panel-change": { 218 | custom: true, 219 | tips: "当日期面板改变时触发", 220 | val: "console.log('DatePicker--panel-change:'+date,mode,view);", 221 | anonymous_params: ["date,mode,view"], 222 | list: [], 223 | }, 224 | }, 225 | childrens: [], 226 | compatibility:true 227 | }, 228 | }; 229 | -------------------------------------------------------------------------------- /src/components/dream-design-edit/param_edit/index.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 166 | -------------------------------------------------------------------------------- /src/components/custom/custom-basic-table.vue: -------------------------------------------------------------------------------- 1 | 2 | 54 | 55 | 171 | -------------------------------------------------------------------------------- /src/components/dream-design-edit/top-bar/index.vue: -------------------------------------------------------------------------------- 1 | 111 | 133 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. 166 | -------------------------------------------------------------------------------- /src/config-center/element/form/cascader/index.ts: -------------------------------------------------------------------------------- 1 | import { reactive, ref, watch, watchEffect } from "vue"; 2 | import { 3 | ERightToolAttrType, 4 | IConfigComponentItem, 5 | IConfigComponentItemProps, 6 | } from "../../../../model/model"; 7 | const D_ElCascaderProps: IConfigComponentItemProps = { 8 | expandTrigger: { 9 | type: ERightToolAttrType.Radio, 10 | default: "click", 11 | title: "展开方式", 12 | tips: "次级菜单的展开方式", 13 | options: [ 14 | { 15 | value: "click", 16 | label: "点击", 17 | }, 18 | { 19 | value: "hover", 20 | label: "悬停", 21 | }, 22 | ], 23 | }, 24 | multiple: { 25 | type: ERightToolAttrType.Switch, 26 | default: false, 27 | title: "是否多选", 28 | tips: "是否多选", 29 | }, 30 | checkStrictly: { 31 | type: ERightToolAttrType.Switch, 32 | default: false, 33 | title: "遵守不互相关联", 34 | tips: "是否严格的遵守父子节点不互相关联 ", 35 | }, 36 | emitPath: { 37 | type: ERightToolAttrType.Switch, 38 | default: true, 39 | title: "返回数组", 40 | tips: "在选中节点改变时,是否返回由该节点所在的各级菜单的值所组成的数组,若设置 false,则只返回该节点的值", 41 | }, 42 | lazy: { 43 | type: ERightToolAttrType.Switch, 44 | default: false, 45 | title: "动态加载子节点", 46 | tips: "是否动态加载子节点,需与 lazyLoad 方法结合使用,暂未实现方法关联", 47 | }, 48 | value: { 49 | type: ERightToolAttrType.Input, 50 | default: "value", 51 | title: "指定选项值", 52 | tips: "指定选项的值为选项对象的某个属性值", 53 | }, 54 | label: { 55 | type: ERightToolAttrType.Input, 56 | default: "label", 57 | title: "指定选项标签", 58 | tips: "指定选项标签为选项对象的某个属性值", 59 | }, 60 | children: { 61 | type: ERightToolAttrType.Input, 62 | default: "children", 63 | title: "指定子选项", 64 | tips: "指定选项的子选项为选项对象的某个属性值", 65 | }, 66 | disabled: { 67 | type: ERightToolAttrType.Input, 68 | default: "disabled", 69 | title: "指定选项禁用", 70 | tips: "指定选项的禁用为选项对象的某个属性值", 71 | }, 72 | leaf: { 73 | type: ERightToolAttrType.Input, 74 | default: "leaf", 75 | title: "指定叶子节点", 76 | tips: "指定选项的叶子节点的标志位为选项对象的某个属性值", 77 | }, 78 | }; 79 | export const D_ElCascader: IConfigComponentItem = { 80 | title: "级联选择器", 81 | icon: "cascader", 82 | domInfo: { 83 | tag: "el-cascader", 84 | title: "el级联选择器", 85 | slots: false, 86 | canMove: true, 87 | canAllowTo: false, 88 | ClearStyle: false, 89 | props: { 90 | options: { 91 | type: ERightToolAttrType.JsonEdit, 92 | default: [ 93 | { 94 | value: "jilin", 95 | label: "吉林", 96 | children: [ 97 | { 98 | value: "changchun", 99 | label: "长春", 100 | children: [ 101 | { value: "chaoyang", label: "朝阳区", children: [] }, 102 | { value: "jingyue", label: "净月区", children: [] }, 103 | { value: "erdao", label: "二道区", children: [] }, 104 | ], 105 | }, 106 | { 107 | value: "songyuan", 108 | label: "松原", 109 | children: [], 110 | }, 111 | { 112 | value: "siping", 113 | label: "四平", 114 | children: [], 115 | disabled: true, 116 | }, 117 | ], 118 | }, 119 | ], 120 | title: "数据源", 121 | tips: "可选项数据源", 122 | }, 123 | props: { 124 | type: ERightToolAttrType.ConfigEdit, 125 | default: {}, 126 | config: D_ElCascaderProps, 127 | title: "配置选项", 128 | tips: "数据源配置选项", 129 | }, 130 | size: { 131 | type: ERightToolAttrType.Select, 132 | default: "default", 133 | title: "尺寸", 134 | tips: "尺寸", 135 | options: [ 136 | { 137 | value: "large", 138 | label: "大", 139 | }, 140 | { 141 | value: "default", 142 | label: "默认", 143 | }, 144 | { 145 | value: "small", 146 | label: "小", 147 | } 148 | ], 149 | }, 150 | placeholder: { 151 | type: ERightToolAttrType.Input, 152 | default: "点击选择", 153 | title: "占位文本", 154 | tips: "输入框占位文本", 155 | }, 156 | disabled: { 157 | type: ERightToolAttrType.Switch, 158 | default: false, 159 | title: "是否禁用", 160 | tips: "是否禁用", 161 | }, 162 | clearable: { 163 | type: ERightToolAttrType.Switch, 164 | default: false, 165 | title: "支持清空", 166 | tips: "是否支持清空选项", 167 | }, 168 | 'show-all-levels': { 169 | type: ERightToolAttrType.Switch, 170 | default: true, 171 | title: "完整路径", 172 | tips: "输入框中是否显示选中值的完整路径", 173 | }, 174 | 'collapse-tags': { 175 | type: ERightToolAttrType.Switch, 176 | default: false, 177 | title: "多选折叠", 178 | tips: "多选模式下是否折叠Tag", 179 | }, 180 | separator: { 181 | type: ERightToolAttrType.Input, 182 | default: "/", 183 | title: "分隔符", 184 | tips: "选项分隔符", 185 | }, 186 | filterable: { 187 | type: ERightToolAttrType.Switch, 188 | default: false, 189 | title: "可搜索", 190 | tips: "是否可搜索选项", 191 | }, 192 | debounce: { 193 | type: ERightToolAttrType.InputNumber, 194 | default: 300, 195 | title: "去抖延迟", 196 | tips: "搜索关键词输入的去抖延迟,毫秒", 197 | }, 198 | 'popper-class': { 199 | type: ERightToolAttrType.Input, 200 | default: "", 201 | title: "浮层类名", 202 | tips: "自定义浮层类名", 203 | }, 204 | teleported: { 205 | type: ERightToolAttrType.Switch, 206 | default: false, 207 | title: "使用teleport", 208 | tips: "弹层是否使用teleport", 209 | }, 210 | deprecated: { 211 | type: ERightToolAttrType.Switch, 212 | default: true, 213 | title: "插入body", 214 | tips: "是否将弹出框插入至body元素。在弹出框的定位出现问题时,可将该属性设置为 false", 215 | }, 216 | }, 217 | tagSlots: { 218 | enable: false, 219 | val: "", 220 | }, 221 | childrens: [], 222 | compatibility:true, 223 | eventAttr:{ 224 | change:{ 225 | custom:true, 226 | tips:"当绑定值变化时触发的事件", 227 | val:"console.log('Cascader--值变化:'+value);", 228 | anonymous_params:['value'], 229 | list:[] 230 | }, 231 | 'expand-change':{ 232 | custom:true, 233 | tips:"当展开节点发生变化时触发", 234 | val:"console.log('Cascader--各父级选项值组成的数组:'+value);", 235 | anonymous_params:['value'], 236 | list:[] 237 | }, 238 | blur:{ 239 | custom:true, 240 | tips:"当失去焦点时触发", 241 | val:"console.log('Cascader--失去焦点:'+JSON.stringify(e));", 242 | anonymous_params:['e'], 243 | list:[] 244 | }, 245 | focus:{ 246 | custom:true, 247 | tips:"当获得焦点时触发", 248 | val:"console.log('Cascader--获得焦点:'+JSON.stringify(e));", 249 | anonymous_params:['e'], 250 | list:[] 251 | }, 252 | 'visible-change':{ 253 | custom:true, 254 | tips:"下拉框出现/隐藏时触发", 255 | val:"console.log('Cascader--下拉框状态:'+value);", 256 | anonymous_params:['value'], 257 | list:[] 258 | }, 259 | 'remove-tag':{ 260 | custom:true, 261 | tips:"多选模式移除Tag时触发", 262 | val:"console.log('Cascader--移除Tag:'+value);", 263 | anonymous_params:['value'], 264 | list:[] 265 | }, 266 | }, 267 | }, 268 | }; 269 | export const D_ElCascaderPanel: IConfigComponentItem = { 270 | title: "级联面板", 271 | icon: "cascader-panel", 272 | domInfo: { 273 | tag: "el-cascader-panel", 274 | title: "el级联级联面板", 275 | slots: false, 276 | canMove: true, 277 | canAllowTo: false, 278 | ClearStyle: false, 279 | props: { 280 | options: { 281 | type: ERightToolAttrType.JsonEdit, 282 | default: [ 283 | { 284 | value: "jilin", 285 | label: "吉林", 286 | children: [ 287 | { 288 | value: "changchun", 289 | label: "长春", 290 | children: [ 291 | { value: "chaoyang", label: "朝阳区", children: [] }, 292 | { value: "jingyue", label: "净月区", children: [] }, 293 | { value: "erdao", label: "二道区", children: [] }, 294 | ], 295 | }, 296 | { 297 | value: "songyuan", 298 | label: "松原", 299 | children: [], 300 | }, 301 | { 302 | value: "siping", 303 | label: "四平", 304 | children: [], 305 | disabled: true, 306 | }, 307 | ], 308 | }, 309 | ], 310 | title: "数据源", 311 | tips: "可选项数据源", 312 | }, 313 | props: { 314 | type: ERightToolAttrType.ConfigEdit, 315 | default: {}, 316 | config: D_ElCascaderProps, 317 | title: "配置选项", 318 | tips: "数据源配置选项", 319 | } 320 | }, 321 | tagSlots: { 322 | enable: false, 323 | val: "", 324 | }, 325 | childrens: [], 326 | eventAttr:{ 327 | change:{ 328 | custom:true, 329 | tips:"当绑定值变化时触发的事件", 330 | val:"console.log('CascaderPanel--值变化:'+value);", 331 | anonymous_params:['value'], 332 | list:[] 333 | }, 334 | 'expand-change':{ 335 | custom:true, 336 | tips:"当展开节点发生变化时触发", 337 | val:"console.log('CascaderPanel--各父级选项值组成的数组:'+value);", 338 | anonymous_params:['value'], 339 | list:[] 340 | } 341 | }, 342 | }, 343 | }; -------------------------------------------------------------------------------- /src/components/dream-design-edit/render-component/index.vue: -------------------------------------------------------------------------------- 1 | 2 | 142 | 247 | --------------------------------------------------------------------------------