初始化

public/css/design.css

@@ -0,0 +1,408 @@
+
+html,body{
+    background-color: #31373D;
+    color: #ffffff;
+    user-select: none;
+    height: 100%;
+    overflow: hidden;
+}
+img {
+    -webkit-user-drag: none;
+}
+.main{
+    padding: 0 !important;
+    height: 100%;
+}
+.col-left{
+    margin-right: 320px;
+}
+.col-right{
+    float: right;
+    height: 100%;
+    width: 320px;
+}
+.tools-bar{
+    height: 50px;
+    width: 100%;
+    border-bottom: 1px solid #000000;
+}
+.left-bar{
+    border-right: 1px solid #000000;
+}
+.left-bar .tool{
+    margin-left: 10px;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    margin-top: 9px;
+}
+.left-bar .tool:hover{
+    background-color: #646E76;
+}
+.left-bar .tool img{
+    height: 24px;
+    width: 24px;
+    margin-top: 4px;
+    margin-left: 4px;
+}
+.right-bar .tool{
+    margin-left: 14px;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    margin-top: 9px;
+}
+.right-bar .tool:hover{
+    background-color: #646E76;
+}
+.right-bar .tool img{
+    height: 24px;
+    width: 24px;
+    margin-top: 4px;
+    margin-left: 4px;
+}
+.mode1{
+    display: inline-block;
+    border-right: 1px solid #000000;
+    padding-right: 10px;
+    height: 50px;
+}
+.mode2{
+
+    display: inline-block;
+    height: 50px;
+    padding-right: 10px;
+    border-right: 1px solid #000000;
+}
+.mode3{
+    float: right;
+    line-height: 50px;
+    margin-right: 30px;
+}
+.white{
+    color: white;
+}
+.white:hover{
+    color: white !important;
+}
+
+.container{
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.container .left{
+    position: absolute;
+    top: 50px;
+    bottom: 0px;
+    width: 50px;
+    border-right: 1px solid #000000;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.container .right{
+    margin-left: 50px;
+    border-right: 1px solid #000000;
+    height: 100%;
+}
+#canvas-div{
+    position: relative;
+}
+
+.canvas_box {
+    position: relative;
+    z-index: 4;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+}
+.canvas_bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+}
+.canvas_bg_img {
+    max-width: calc(100% - 470px);
+    max-height: calc(100% - 180px);
+}
+.container .tool{
+    width: 32px;
+    height: 32px;
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.container .tool img{
+    width: 24px;
+    height: 24px;
+}
+.container .tool:hover{
+    background-color: #646E76;
+}
+
+.layui-form-label{
+    width: 45px;
+    padding-left: 5px;
+}
+
+.layui-input-block {
+    margin-left: 70px;
+
+}
+
+.component-title{
+    height: 32px;
+    line-height: 32px;
+    width: 100%;
+    font-size: 18px;
+    background-color: #4E575F;
+    text-align: center;
+    padding-left: 10px;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+}
+.component-line{
+    font-size: 14px;
+    padding: 5px;
+}
+.component-line span{
+    color: #969FA7;
+}
+.ui-input{
+    background-color: #31373D;
+    border: #646E76 solid 1px;
+    color: #ffffff;
+    font-size: 16px;
+}
+.ui-input:hover{
+    background-color: #646E76;
+}
+textarea{
+    background-color: #31373D;
+    border: #646E76 solid 1px;
+    color: #ffffff;
+    font-size: 16px;
+}
+textarea:hover{
+    background-color: #646E76;
+}
+.control{
+    display: none;
+}
+#base_control{
+    display: none;
+}
+.pic_bg{
+    display: inline-block;
+    background-color: #31373D;
+    border: #646E76 solid 1px;
+    padding: 3px 10px;
+    color: #ffffff;
+    font-size: 16px;
+    position: relative;
+    margin-left: 5px;
+    cursor: pointer;
+    border-radius: 6px;
+}
+.pic_bg:hover{
+    background-color: #646E76;
+}
+
+
+.input_color{
+    position: relative;
+    top:5px;
+}
+.input_color[type='color']::-webkit-color-swatch-wrapper{padding: 0;}
+.input_color[type='color']::-webkit-color-swatch{border: 0;}
+
+.radio{
+    position: relative;
+    top:2px;
+    left:3px
+}
+
+.ui-select{
+    background-color: #31373D;
+    border: #646E76 solid 1px;
+    color: #ffffff;
+    font-size: 16px;
+}
+
+
+::-webkit-scrollbar
+{
+    width: 8px;
+    height: 8px;
+    background-color: #31373D;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+::-webkit-scrollbar-track
+{
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+}
+
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb
+{
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #555;
+}
+
+.ui-button{
+    display: inline-block;
+    background-color: #31373D;
+    border: #646E76 solid 1px;
+    padding: 3px 10px;
+    color: #ffffff;
+    font-size: 16px;
+    position: relative;
+    margin-left: 5px;
+    cursor: pointer;
+    border-radius: 6px;
+}
+.ui-button:hover{
+    background-color: #646E76;
+}
+
+.ui-button-active{
+    background-color: #646E76;
+}
+.ui-radio{
+
+}
+.ui-radio-acitve{
+    background-color: #646E76;
+}
+.ui-radio:hover{
+    background-color: #646E76;
+}
+.obj_list{
+    overflow-y: auto;
+
+}
+.obj_list div{
+    height: 32px;
+    line-height: 32px;
+    width: 100%;
+    font-size: 14px;
+    padding-left: 10px;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    overflow: hidden;
+}
+.obj_list img{
+    position: relative;
+    right: 4px;
+    width: 24px;
+}
+.obj_list div:hover{
+    background-color: #6F7A84;
+}
+
+#posText{
+    line-height: 50px;
+    font-size: 18px;
+    margin-left: 10px;
+}
+
+#rotate:hover{
+    background-color: #646E76;
+}
+
+#object_attribute{
+    height: 470px;
+    overflow-y: auto;
+}
+
+.transparent-button{
+    display: inline-block;
+    height: 19px;
+    border: #646E76 solid 1px;
+    position: relative;
+    bottom: 2px;
+    padding: 3px;
+}
+.transparent-button:hover{
+    background-color: #646E76;
+}
+
+
+.mode-left{
+    display: inline-block;
+}
+.mode-warp{
+    display: flex;
+    height: 50px;
+    align-items: center;
+}
+.mode-left .img-warp{
+    height: 32px;
+    width: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 10px;
+}
+
+.mode-left .img-warp:hover{
+    background-color: #646E76;
+}
+
+.mode-left .img-warp1 {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    border: none;
+}
+
+
+.line{
+    height: 50px;
+    width: 1px;
+    background-color: #000;
+    margin-left: 10px;
+}
+
+.rotate-div{
+    position: relative;
+    transition: 200ms;
+}
+.rotate-wrap{
+    position: absolute;
+    top:0px;
+    left:0px;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.3);
+    visibility: hidden;
+    border-radius: 3%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.rotate-div:hover .rotate-wrap{
+    visibility: visible;
+}

public/css/index.css

@@ -0,0 +1,125 @@
+html,body{
+    background-color: #31373D;
+    color: #ffffff;
+    user-select: none;
+    height: 100%;
+    overflow: hidden;
+}
+
+img {
+    -webkit-user-drag: none;
+}
+.main{
+    margin-top: 40px;
+    position: relative;
+    height: 100%;
+}
+.main .left{
+    padding-right: 40px;
+    padding-left: 40px;
+    border-right: 1px solid #000000;
+    height: 100%;
+}
+.left h1{
+    position: relative;
+}
+.left .card{
+    background-color: #3E454D;
+    width: 100%;
+    /* height: 130px; */
+    margin-top: 30px;
+    color: #999999;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.left .card:hover{
+    background-color: #646E76;
+    color: #ffffff !important;
+}
+.card .rect{
+    padding: 10px;
+    text-align: center;
+}
+.rect img{
+    max-width: 70%;
+    max-height: 70%;
+}
+.rect1 img {
+    border-radius: 0;
+}
+.rect .tip{
+    margin-top: 10px;
+    font-size: 16px;
+    letter-spacing:1px;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.right{
+    padding-left: 30px;
+    padding-right: 30px;
+    height: calc(100vh - 40px);
+    position: relative;
+}
+.right .recent{
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+    line-height: 40px;
+    font-size: 2em;
+}
+.right .card{
+    background-color: #3E454D;
+    width: 230px;
+    height: 200px;
+    margin-top: 30px;
+    color: #999999;
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.ui-select{
+    background-color: #31373D;
+    border: #646E76 solid 1px;
+    color: #ffffff;
+    font-size: 16px;
+    position: absolute;
+    bottom: 50px;
+}
+.card-list{
+    height: calc(100% - 78px);
+    display: flex;
+    flex-wrap: wrap;
+    overflow-y: auto;
+    align-content: flex-start;
+}
+
+
+::-webkit-scrollbar
+{
+    width: 8px;
+    height: 8px;
+    background-color: #31373D;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+::-webkit-scrollbar-track
+{
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+}
+
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb
+{
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #555;
+}

public/images/barcode.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g><rect width="48" height="48" fill="white" fill-opacity="0.01" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="none" fill-rule="evenodd"/><g transform="translate(4.000000, 6.000000)"><path d="M0,14 L40,14" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M2,0 L2,8" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M2,19.9954922 L2,31.9991242" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M16.4,0 L16.4,8" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M16.4,20 L16.4,36" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M30.8,0 L30.8,8" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M38,0 L38,8" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M30.8,20 L30.8,28" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M9.2,0 L9.2,8" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M9.2,20 L9.2,28" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M23.6,0 L23.6,8" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M23.6,20 L23.6,28" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/><path d="M38,20 L38,32" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="none" fill-rule="evenodd"/></g></g></svg>

public/images/counter.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42 8H6C4.89543 8 4 8.89543 4 10V38C4 39.1046 4.89543 40 6 40H42C43.1046 40 44 39.1046 44 38V10C44 8.89543 43.1046 8 42 8Z" stroke="#fff" stroke-width="4"/>  <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="18" id="svg_2" y="30.77832" x="9.15625" stroke-opacity="null" stroke-width="0" stroke="#fff" fill="#ffffff">123</text></svg>

public/images/images.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="6" width="36" height="36" rx="3" fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round"/><path d="M6 28L16.6931 18.198C17.4389 17.5143 18.5779 17.4953 19.3461 18.1538L32 29" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28 24L32.7735 19.2265C33.4772 18.5228 34.5914 18.4436 35.3877 19.0408L42 24" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 20L6 30" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 20V30" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

public/images/images_add.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 24C44 22.8954 43.1046 22 42 22C40.8954 22 40 22.8954 40 24H44ZM24 8C25.1046 8 26 7.10457 26 6C26 4.89543 25.1046 4 24 4V8ZM39 40H9V44H39V40ZM8 39V9H4V39H8ZM40 24V39H44V24H40ZM9 8H24V4H9V8ZM9 40C8.44772 40 8 39.5523 8 39H4C4 41.7614 6.23857 44 9 44V40ZM39 44C41.7614 44 44 41.7614 44 39H40C40 39.5523 39.5523 40 39 40V44ZM8 9C8 8.44772 8.44771 8 9 8V4C6.23858 4 4 6.23857 4 9H8Z" fill="#fff"/><path d="M6 35L16.6931 25.198C17.4389 24.5143 18.5779 24.4953 19.3461 25.1538L32 36" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28 31L32.7735 26.2265C33.4772 25.5228 34.5914 25.4436 35.3877 26.0408L42 31" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M30 12L42 12" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M36 6V18" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

public/images/line.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect id="svg_1" fill-opacity="0.01" fill="white" height="48" width="48"/><path stroke-width="4" stroke="#fff" id="svg_5" stroke-linejoin="round" stroke-linecap="round" d="m43.66658,24.37498l-38.47915,0"/></svg>

public/images/qrcode.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6H6V20H20V6Z" fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round"/><path d="M20 28H6V42H20V28Z" fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round"/><path d="M42 6H28V20H42V6Z" fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round"/><path d="M29 28V42" stroke="#fff" stroke-width="4" stroke-linecap="round"/><path d="M41 28V42" stroke="#fff" stroke-width="4" stroke-linecap="round"/></svg>

public/images/rect.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42 8H6C4.89543 8 4 8.89543 4 10V38C4 39.1046 4.89543 40 6 40H42C43.1046 40 44 39.1046 44 38V10C44 8.89543 43.1046 8 42 8Z" stroke="#fff" stroke-width="4"/></svg>

public/images/round.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="20" stroke="#fff" stroke-width="4"/></svg>

public/images/text.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M8 10.9333L8 6H40V10.9333" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 6V42" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 42H32" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

public/images/text2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect id="svg_1" fill-opacity="0.01" fill="white" height="48" width="48"/><path id="svg_2" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" stroke="#fff" d="m8,10.9333l0,-4.9333l32,0l0,4.9333"/><path id="svg_3" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" stroke="#fff" d="m24,6l0,36"/><path id="svg_4" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" stroke="#fff" d="m16,42l16,0"/><path stroke="#fff" id="svg_5" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" d="m14.79158,24.49998l-12.66665,0"/><path stroke="#fff" id="svg_6" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" d="m13.25006,18.49995l4.62503,5.81252l-4.62503,5.81252"/></svg>

public/images/text3.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;fill-opacity:1.000000e-02;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:none;stroke:#FFFFFF;stroke-width:1.75;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<rect x="0" class="st0" width="24" height="24"/>
+<g>
+	<path class="st1" d="M16,18h-8c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h8c0.6,0,1,0.5,1,1l0,0C17,17.5,16.5,18,16,18z"/>
+	<path class="st1" d="M21,4h-18V3.2C2.9,2.5,3.5,2,4.2,2h15.5C20.4,2,21,2.5,21,3.2V4L21,4z"/>
+	<path class="st1" d="M11,16.5v-13c0-0.6,0.5-1,1-1l0,0c0.6,0,1,0.5,1,1v13c0,0.6-0.5,1-1,1l0,0C11.4,17.5,11,17,11,16.5z"/>
+	<path class="st1" d="M2.9,5.5V4c0-0.6,0.5-1,1-1l0,0c0.6,0,1,0.5,1,1v1.5c0,0.6-0.5,1-1,1l0,0C3.4,6.5,2.9,6,2.9,5.5z"/>
+	<path class="st1" d="M19,5.5V4c0-0.6,0.5-1,1-1l0,0c0.6,0,1,0.5,1,1v1.5c0,0.6-0.5,1-1,1l0,0C19.4,6.5,19,6,19,5.5z"/>
+	<path class="st2" d="M2.9,21.7c2.6-1.6,5.6-2.4,8.8-2.4c3.4,0,6.6,1,9.3,2.8"/>
+</g>
+</svg>