10 Star 61 Fork 37

咬轮猫 / dream-design

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
LGPL-3.0

声明

该项目被公司采用,后续暂停更新,实在抱歉!如有疑问请加qq群:209048413

背景

2022年x月x日,某前端群。

“我想开发一款页面设计器,目标是功能全到让老板流泪,二次开发简单到令人发指。兄弟萌帮我取个名字”

“dream。我看你在做梦”,一个漂亮软妹随即回复到。

dream?我突然眼前一亮!

是啊!饼确实画的有点大,但是做人如果没有梦想,那和咸鱼又有什么区别呢?

于是便有了它——Dream-design,我的梦想设计器!

Dream的D要大写,代表梦想一定要大

design的d要小写,轻量简单才是我想要的

预览地址

http://dream_design.yaolm.top/(请使用版本新一点的浏览器🤔)

项目介绍

与组件库一致的组件列表(大致一样😂)

与组件库属性一致的设置面板

与编程一致的dom生成

编写如下代码

<el-row>
    <el-col>
        <el-button>按钮一</el-button>
        <el-button>按钮二</el-button>
    </el-col>
</el-row>

运行项目审查元素,观察网页生成的dom元素为

<div class="el-row" data-v-53f231d2="">
	<div class="el-col el-col-24" data-v-53f231d2="">
		<button class="el-button el-button--default" type="button" data-v-53f231d2="">
			<!--v-if-->
				<span class="">按钮一</span>
		</button>
		<button class="el-button el-button--default" type="button" data-v-53f231d2="">
			<!--v-if-->
				<span class="">按钮二</span>
		</button>
	</div>
</div>

使用Dreamdesign拖动一个单列栅格和两个按钮

审查元素,观察网页生成的dom元素为

<div class="el-row canvas-component default-slot  not-move" data-v-0edba2b9="" data-v-53f231d2="">
    <div class="el-col el-col-24 canvas-component default-slot  not-move" data-draggable="true" data-v-0edba2b9="">
        <button class="el-button el-button--primary el-button--default canvas-component not-move" type="button" data-draggable="true" data-v-0edba2b9="" style="--el-button-bg-color:#409eff; --el-button-border-color:#409eff; --el-button-hover-bg-color:rgb(102, 177, 255); --el-button-hover-border-color:rgb(102, 177, 255); --el-button-active-bg-color:rgb(58, 142, 230); --el-button-active-border-color:rgb(58, 142, 230);">
            <!--v-if-->
            <span class="">el按钮</span>
        </button>
        <button class="el-button el-button--primary el-button--default canvas-component not-move" type="button" data-draggable="true" data-v-0edba2b9="" style="--el-button-bg-color:#409eff; --el-button-border-color:#409eff; --el-button-hover-bg-color:rgb(102, 177, 255); --el-button-hover-border-color:rgb(102, 177, 255); --el-button-active-bg-color:rgb(58, 142, 230); --el-button-active-border-color:rgb(58, 142, 230);">
            <!--v-if-->
            <span class="">el按钮</span>
        </button>
    </div>
</div>

设置面板预定义多种格式

除去基本的输入、开关、选择器、单选等,还封装了对象编辑器

上图为级联选择器数据源编辑演示

还增加了配置编辑器,用来可视化操作属性为对象时的情况,例如element ui的级联选择器的props属性有如下字段

在Dreamdesign里可视化进行操作

与dom层级一致的组件配置

非嵌套组件只需遵守如下格式

    {
    	tag: "el-button",
    	title: "el按钮",
            ...
        childrens: []
    }

即可渲染出如下dom

<el-button></el-button>

嵌套组件只需遵守如下格式

    {
    	tag: "el-row",
    	title: "el行容器",
            ...
        childrens: [    
        	{
    			tag: "el-col",
    			title: "el列容器",
            	...
        		childrens: []
    		}]
    }

即可渲染出如下dom

<el-row>
    <el-col></el-col>
</el-row>

支持多种组件库,支持自定义组件

支持全局预定义css调用,支持自定义css

参考public\mock\global_css.json,在此编写了css样式即可在右侧属性面板直接设置于组件上

也可以自定义样式

同时支持全局预定义函数调用,支持自定义函数,效果同上

如何进行开发

pnpm i

pnpm run dev

特别说明

其实说白了,就是一个框架,赋予了任意组件拖拽的行为。详细的二次开发文档会等项目开发完毕再编写。 虽然项目还没有开发完,但还是决定先发布出来了,毕竟一个人的力量是有限的,我更希望得到大家的建议

GNU LESSER GENERAL PUBLIC LICENSE Version 3, 29 June 2007 Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/> Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. This version of the GNU Lesser General Public License incorporates the terms and conditions of version 3 of the GNU General Public License, supplemented by the additional permissions listed below. 0. Additional Definitions. As used herein, "this License" refers to version 3 of the GNU Lesser General Public License, and the "GNU GPL" refers to version 3 of the GNU General Public License. "The Library" refers to a covered work governed by this License, other than an Application or a Combined Work as defined below. An "Application" is any work that makes use of an interface provided by the Library, but which is not otherwise based on the Library. Defining a subclass of a class defined by the Library is deemed a mode of using an interface provided by the Library. A "Combined Work" is a work produced by combining or linking an Application with the Library. The particular version of the Library with which the Combined Work was made is also called the "Linked Version". The "Minimal Corresponding Source" for a Combined Work means the Corresponding Source for the Combined Work, excluding any source code for portions of the Combined Work that, considered in isolation, are based on the Application, and not on the Linked Version. The "Corresponding Application Code" for a Combined Work means the object code and/or source code for the Application, including any data and utility programs needed for reproducing the Combined Work from the Application, but excluding the System Libraries of the Combined Work. 1. Exception to Section 3 of the GNU GPL. You may convey a covered work under sections 3 and 4 of this License without being bound by section 3 of the GNU GPL. 2. Conveying Modified Versions. If you modify a copy of the Library, and, in your modifications, a facility refers to a function or data to be supplied by an Application that uses the facility (other than as an argument passed when the facility is invoked), then you may convey a copy of the modified version: a) under this License, provided that you make a good faith effort to ensure that, in the event an Application does not supply the function or data, the facility still operates, and performs whatever part of its purpose remains meaningful, or b) under the GNU GPL, with none of the additional permissions of this License applicable to that copy. 3. Object Code Incorporating Material from Library Header Files. The object code form of an Application may incorporate material from a header file that is part of the Library. You may convey such object code under terms of your choice, provided that, if the incorporated material is not limited to numerical parameters, data structure layouts and accessors, or small macros, inline functions and templates (ten or fewer lines in length), you do both of the following: a) Give prominent notice with each copy of the object code that the Library is used in it and that the Library and its use are covered by this License. b) Accompany the object code with a copy of the GNU GPL and this license document. 4. Combined Works. You may convey a Combined Work under terms of your choice that, taken together, effectively do not restrict modification of the portions of the Library contained in the Combined Work and reverse engineering for debugging such modifications, if you also do each of the following: a) Give prominent notice with each copy of the Combined Work that the Library is used in it and that the Library and its use are covered by this License. b) Accompany the Combined Work with a copy of the GNU GPL and this license document. c) For a Combined Work that displays copyright notices during execution, include the copyright notice for the Library among these notices, as well as a reference directing the user to the copies of the GNU GPL and this license document. d) Do one of the following: 0) Convey the Minimal Corresponding Source under the terms of this License, and the Corresponding Application Code in a form suitable for, and under terms that permit, the user to recombine or relink the Application with a modified version of the Linked Version to produce a modified Combined Work, in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source. 1) Use a suitable shared library mechanism for linking with the Library. A suitable mechanism is one that (a) uses at run time a copy of the Library already present on the user's computer system, and (b) will operate properly with a modified version of the Library that is interface-compatible with the Linked Version. e) Provide Installation Information, but only if you would otherwise be required to provide such information under section 6 of the GNU GPL, and only to the extent that such information is necessary to install and execute a modified version of the Combined Work produced by recombining or relinking the Application with a modified version of the Linked Version. (If you use option 4d0, the Installation Information must accompany the Minimal Corresponding Source and Corresponding Application Code. If you use option 4d1, you must provide the Installation Information in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source.) 5. Combined Libraries. You may place library facilities that are a work based on the Library side by side in a single library together with other library facilities that are not Applications and are not covered by this License, and convey such a combined library under terms of your choice, if you do both of the following: a) Accompany the combined library with a copy of the same work based on the Library, uncombined with any other library facilities, conveyed under the terms of this License. b) Give prominent notice with the combined library that part of it is a work based on the Library, and explaining where to find the accompanying uncombined form of the same work. 6. Revised Versions of the GNU Lesser General Public License. The Free Software Foundation may publish revised and/or new versions of the GNU Lesser General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns. Each version is given a distinguishing version number. If the Library as you received it specifies that a certain numbered version of the GNU Lesser General Public License "or any later version" applies to it, you have the option of following the terms and conditions either of that published version or of any later version published by the Free Software Foundation. If the Library as you received it does not specify a version number of the GNU Lesser General Public License, you may choose any version of the GNU Lesser General Public License ever published by the Free Software Foundation. If the Library as you received it specifies that a proxy can decide whether future versions of the GNU Lesser General Public License shall apply, that proxy's public statement of acceptance of any version is permanent authorization for you to choose that version for the Library.

简介

基于vue3+vite+ts的可视化页面设计器,可在线设计页面表单等,支持引入多种组件库和自定义组件,致力于低代码开发 展开 收起
TypeScript 等 4 种语言
LGPL-3.0
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/yaolunmao/dream-design.git
git@gitee.com:yaolunmao/dream-design.git
yaolunmao
dream-design
dream-design
main

搜索帮助