From 01907553a09d73597d8dc35e46d0f798eec90e30 Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Fri, 27 Mar 2026 17:36:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B5=8B=E8=AF=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                |    2 +-
 src/views/boardGenerate/index1.vue | 1857 ++++++++++++++++++++++++++++
 src/views/boardGenerate/test.vue   |   14 +
 3 files changed, 1872 insertions(+), 1 deletion(-)
 create mode 100644 src/views/boardGenerate/index1.vue
 create mode 100644 src/views/boardGenerate/test.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 0cb13bb..dd97f0e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -35,7 +35,7 @@ export const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/test',
     hidden: true,
-    component: () => import('@/views/print/test.vue')
+    component: () => import('@/views/boardGenerate/test.vue')
   },
   {
     path: '/board3',
diff --git a/src/views/boardGenerate/index1.vue b/src/views/boardGenerate/index1.vue
new file mode 100644
index 0000000..4923c28
--- /dev/null
+++ b/src/views/boardGenerate/index1.vue
@@ -0,0 +1,1857 @@
+<template>
+  <div class="boardGenerate">
+    <div class="right">
+      <div class="tabs">
+        <div class="tab" :class="{active : tabs === 0}"
+             @click="selectTabs(0)">
+          属性设置
+        </div>
+        <div v-if="Object.keys(nodeAttrForm).length>0" class="tab" :class="{active : tabs === 1}"
+             @click="selectTabs(1)">
+          样式设置
+        </div>
+        <div v-if="Object.keys(nodeDataForm).length>0" class="tab" :class="{active : tabs === 2}"
+             @click="selectTabs(2)">
+          数据
+        </div>
+      </div>
+      <div class="tabItems">
+        <div class="tabItem" v-if=" tabs === 0">
+          <el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
+            <el-form-item v-if="Object.keys(nodeDataForm).includes('name')" label="组件名称">
+              <el-input v-model="nodeDataForm.name" style="width: 100%" />
+            </el-form-item>
+            <el-form-item v-if="Object.keys(nodeDataForm).includes('position')" label="x">
+              <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
+                               @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
+            </el-form-item>
+            <el-form-item v-if="Object.keys(nodeDataForm).includes('position')" label="y">
+              <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.y" style="width: 100%"
+                               @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
+            </el-form-item>
+            <el-form-item v-if="Object.keys(nodeDataForm).includes('dimensions')" label="宽度">
+              <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.width" style="width: 100%"
+                               @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
+            </el-form-item>
+            <el-form-item v-if="Object.keys(nodeDataForm).includes('dimensions')" label="高度">
+              <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.height" style="width: 100%"
+                               @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
+            </el-form-item>
+            <el-form-item label="颜色库" v-if="!Object.keys(nodeAttrForm).length>0">
+              <el-badge value="99" class="item" :offset="[-8,0]"
+                        v-for="(i,k) in pageSettingForm.colors" style="margin-bottom: 12px;padding: 0">
+                <el-color-picker style="margin-right: 8px;padding:0"
+                                 v-model="pageSettingForm.colors[k]" show-alpha />
+                <template #content>
+                  <div class="custom-content" @click="pageSettingForm.colors.splice(k, 1)">
+                    <el-icon>
+                      <Close />
+                    </el-icon>
+                  </div>
+                </template>
+              </el-badge>
+              <el-button style="width: 32px;height: 32px; margin-bottom: 14px;  " :icon="Plus"
+                         @click="pageSettingForm.colors.push('#fff')" />
+            </el-form-item>
+            <el-form-item label="颜色库切换" v-if="!Object.keys(nodeAttrForm).length>0">
+              <el-select
+                v-model="colorType"
+                placeholder="请选择"
+                style="width: 200px"
+                @change="(e)=>pageSettingForm.colors = colorList[e].colors"
+              >
+                <el-option
+                  :label="i.name"
+                  v-for=" i in colorList"
+                  :value="i.value"
+                >
+                  <div v-for="ii in i.colors" style="width: 10px;height: 10px;display: inline-block"
+                       :style="{backgroundColor: ii}"></div>
+                  <div style="width: 10px;display: inline-block;margin-left: 20px">{{ i.name }}</div>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="tabItem" v-if="Object.keys(nodeAttrForm).length>0 && tabs === 1">
+          <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px" :key="key">
+            <el-collapse v-model="collapseActiveName" accordion expand-icon-position="left">
+              <el-collapse-item title="x轴设置" name="1" v-if="Object.keys(nodeAttrForm).includes('xName')">
+                <el-form-item label="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
+                  <el-input v-model="nodeAttrForm.xName" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="x轴名称位置" v-if="Object.keys(nodeAttrForm).includes('xNameLocation')">
+                  <el-select
+                    v-model="nodeAttrForm.xNameLocation"
+                    placeholder="Select"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="左侧"
+                      value="start"
+                    />
+                    <el-option
+                      label="中心"
+                      value="center"
+                    />
+                    <el-option
+                      label="右侧"
+                      value="end"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="x轴刻度文字居中" v-if="Object.keys(nodeAttrForm).includes('boundaryGap')">
+                  <el-switch v-model="nodeAttrForm.boundaryGap" />
+                </el-form-item>
+                <el-form-item label="是否显示轴线" v-if="Object.keys(nodeAttrForm).includes('xAxisLineShow')">
+                  <el-switch v-model="nodeAttrForm.xAxisLineShow" />
+                </el-form-item>
+                <el-form-item label="轴线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisLineColor')">
+                  <el-color-picker v-model="nodeAttrForm.xAxisLineColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="是否显示刻度线" v-if="Object.keys(nodeAttrForm).includes('xAxisTickShow')">
+                  <el-switch v-model="nodeAttrForm.xAxisTickShow" />
+                </el-form-item>
+                <el-form-item label="刻度线是否朝内" v-if="Object.keys(nodeAttrForm).includes('xAxisTickInside')">
+                  <el-switch v-model="nodeAttrForm.xAxisTickInside" />
+                </el-form-item>
+                <el-form-item label="刻度线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisTickColor')">
+                  <el-color-picker v-model="nodeAttrForm.xAxisTickColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="是否显示全部刻度" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelInterval')">
+                  <el-switch v-model="nodeAttrForm.xAxisLabelInterval" />
+                </el-form-item>
+                <el-form-item label="刻度文字是否朝内" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelInside')">
+                  <el-switch v-model="nodeAttrForm.xAxisLabelInside" />
+                </el-form-item>
+                <el-form-item label="刻度文字旋转角度" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelRotate')">
+                  <el-slider v-model="nodeAttrForm.xAxisLabelRotate" :min="0" :max="360" />
+                </el-form-item>
+                <el-form-item label="刻度文字格式化" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelFormatter')">
+                  <el-input v-model="nodeAttrForm.xAxisLabelFormatter" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="刻度文字颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelColor')">
+                  <el-color-picker v-model="nodeAttrForm.xAxisLabelColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="刻度文字大小" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelFontSize')">
+                  <el-slider v-model="nodeAttrForm.xAxisLabelFontSize" :min="6" :max="36" />
+                </el-form-item>
+                <el-form-item label="刻度文字距离线距离" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelMargin')">
+                  <el-slider v-model="nodeAttrForm.xAxisLabelMargin" :min="0" :max="36" />
+                </el-form-item>
+                <el-form-item label="是否显示分隔线" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineShow')">
+                  <el-switch v-model="nodeAttrForm.xAxisSplitLineShow" />
+                </el-form-item>
+                <el-form-item label="分隔线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineColor')">
+                  <el-color-picker v-model="nodeAttrForm.xAxisSplitLineColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="分隔线样式" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineType')">
+                  <el-select
+                    v-model="nodeAttrForm.xAxisSplitLineType"
+                    placeholder="Select"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="直线"
+                      value="solid"
+                    />
+                    <el-option
+                      label="虚线"
+                      value="dashed"
+                    />
+                    <el-option
+                      label="点线"
+                      value="dotted"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-collapse-item>
+              <el-collapse-item title="y轴设置" name="2" v-if="Object.keys(nodeAttrForm).includes('yName')">
+                <el-form-item label="y轴名称" v-if="Object.keys(nodeAttrForm).includes('yName')">
+                  <el-input v-model="nodeAttrForm.yName" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="y轴名称位置" v-if="Object.keys(nodeAttrForm).includes('yNameLocation')">
+                  <el-select
+                    v-model="nodeAttrForm.yNameLocation"
+                    placeholder="Select"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="0刻度"
+                      value="start"
+                    />
+                    <el-option
+                      label="中心"
+                      value="center"
+                    />
+                    <el-option
+                      label="最大刻度"
+                      value="end"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="是否显示轴线" v-if="Object.keys(nodeAttrForm).includes('yAxisLineShow')">
+                  <el-switch v-model="nodeAttrForm.yAxisLineShow" />
+                </el-form-item>
+                <el-form-item label="轴线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisLineColor')">
+                  <el-color-picker v-model="nodeAttrForm.yAxisLineColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="是否显示刻度线" v-if="Object.keys(nodeAttrForm).includes('yAxisTickShow')">
+                  <el-switch v-model="nodeAttrForm.yAxisTickShow" />
+                </el-form-item>
+                <el-form-item label="刻度线是否朝内" v-if="Object.keys(nodeAttrForm).includes('yAxisTickInside')">
+                  <el-switch v-model="nodeAttrForm.yAxisTickInside" />
+                </el-form-item>
+                <el-form-item label="刻度线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisTickColor')">
+                  <el-color-picker v-model="nodeAttrForm.yAxisTickColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="是否显示全部刻度" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelInterval')">
+                  <el-switch v-model="nodeAttrForm.yAxisLabelInterval" />
+                </el-form-item>
+                <el-form-item label="刻度文字是否朝内" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelInside')">
+                  <el-switch v-model="nodeAttrForm.yAxisLabelInside" />
+                </el-form-item>
+                <el-form-item label="刻度文字旋转角度" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelRotate')">
+                  <el-slider v-model="nodeAttrForm.yAxisLabelRotate" :min="0" :max="360" />
+                </el-form-item>
+                <el-form-item label="刻度文字内容格式" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelFormatter')">
+                  <el-input v-model="nodeAttrForm.yAxisLabelFormatter" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="刻度文字颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelColor')">
+                  <el-color-picker v-model="nodeAttrForm.yAxisLabelColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="刻度文字大小" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelFontSize')">
+                  <el-slider v-model="nodeAttrForm.yAxisLabelFontSize" :min="6" :max="36" />
+                </el-form-item>
+                <el-form-item label="刻度文字距离线距离" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelMargin')">
+                  <el-slider v-model="nodeAttrForm.yAxisLabelMargin" :min="0" :max="36" />
+                </el-form-item>
+                <el-form-item label="是否显示分隔线" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineShow')">
+                  <el-switch v-model="nodeAttrForm.yAxisSplitLineShow" />
+                </el-form-item>
+                <el-form-item label="分隔线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineColor')">
+                  <el-color-picker v-model="nodeAttrForm.yAxisSplitLineColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="分隔线样式" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineType')">
+                  <el-select
+                    v-model="nodeAttrForm.yAxisSplitLineType"
+                    placeholder="Select"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="直线"
+                      value="solid"
+                    />
+                    <el-option
+                      label="虚线"
+                      value="dashed"
+                    />
+                    <el-option
+                      label="点线"
+                      value="dotted"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-collapse-item>
+              <el-collapse-item title="边距设置" name="3" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
+                <el-form-item label="顶部距离" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
+                  <el-input-number v-model="nodeAttrForm.gridTop" style="width: 100%" :min="0" :max="100" />
+                </el-form-item>
+                <el-form-item label="左侧距离" v-if="Object.keys(nodeAttrForm).includes('gridLeft')">
+                  <el-input-number v-model="nodeAttrForm.gridLeft" style="width: 100%" :min="0" :max="100" />
+                </el-form-item>
+                <el-form-item label="底部距离" v-if="Object.keys(nodeAttrForm).includes('gridBottom')">
+                  <el-input-number v-model="nodeAttrForm.gridBottom" style="width: 100%" :min="0" :max="100" />
+                </el-form-item>
+                <el-form-item label="右侧距离" v-if="Object.keys(nodeAttrForm).includes('gridRight')">
+                  <el-input-number v-model="nodeAttrForm.gridRight" style="width: 100%" :min="0" :max="100" />
+                </el-form-item>
+              </el-collapse-item>
+              <el-collapse-item title="表格设置" name="4" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
+                <el-form-item label="表格列设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
+                  <el-button class="optionsBtn" plain @click="tableOptionsVisible = true">
+                    配置表格
+                  </el-button>
+                </el-form-item>
+                <el-form-item label="单元格设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
+                  <el-button class="optionsBtn" plain @click="tableCellOptionsVisible = true">
+                    配置表格
+                  </el-button>
+                </el-form-item>
+                <el-form-item label="表头是否显示" v-if="Object.keys(nodeAttrForm).includes('isThShow')">
+                  <el-switch v-model="nodeAttrForm.isThShow" />
+                </el-form-item>
+                <el-form-item label="表格动画设置" v-if="Object.keys(nodeAttrForm).includes('tableClassOption')">
+                  <el-button class="optionsBtn" plain @click="tableClassOptionsVisible = true">
+                    配置动画
+                  </el-button>
+                </el-form-item>
+                <el-form-item label="表头高度" v-if="Object.keys(nodeAttrForm).includes('thHeight')">
+                  <el-input v-model="nodeAttrForm.thHeight" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="行高度" v-if="Object.keys(nodeAttrForm).includes('tdHeight')">
+                  <el-input v-model="nodeAttrForm.tdHeight" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="表头文字颜色" v-if="Object.keys(nodeAttrForm).includes('thColor')">
+                  <el-color-picker v-model="nodeAttrForm.thColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="行文字颜色" v-if="Object.keys(nodeAttrForm).includes('tdColor')">
+                  <el-badge value="99" class="item" :offset="[-8,0]"
+                            v-for="(i,k) in nodeAttrForm.tdColor">
+                    <el-color-picker style="margin-right: 4px;" v-model="nodeAttrForm.tdColor[k]" show-alpha />
+                    <template #content>
+                      <div class="custom-content" @click="nodeAttrForm.tdColor.splice(k, 1)">
+                        <el-icon>
+                          <Close />
+                        </el-icon>
+                      </div>
+                    </template>
+                  </el-badge>
+                  <el-button :icon="Plus" @click="nodeAttrForm.tdColor.push('#fff')" />
+                </el-form-item>
+                <el-form-item label="表头背景颜色" v-if="Object.keys(nodeAttrForm).includes('thBgColor')">
+                  <el-color-picker v-model="nodeAttrForm.thBgColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="行背景颜色" v-if="Object.keys(nodeAttrForm).includes('tdBgColor')">
+                  <el-badge value="99" class="item" :offset="[-8,0]"
+                            v-for="(i,k) in nodeAttrForm.tdBgColor">
+                    <el-color-picker style="margin-right: 8px;"
+                                     v-model="nodeAttrForm.tdBgColor[k]" show-alpha />
+                    <template #content>
+                      <div class="custom-content" @click="nodeAttrForm.tdBgColor.splice(k, 1)">
+                        <el-icon>
+                          <Close />
+                        </el-icon>
+                      </div>
+                    </template>
+                  </el-badge>
+                  <el-button :icon="Plus" @click="nodeAttrForm.tdBgColor.push('#fff')" />
+                </el-form-item>
+              </el-collapse-item>
+              <el-collapse-item title="通用设置" name="5">
+                <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInputArea')">
+                  <el-input type="textarea" v-model="nodeAttrForm.defaultInputArea" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
+                  <el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('number')">
+                  <el-input-number :controls="false" autocomplete="off" v-model="nodeAttrForm.number"
+                                   style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="默认日期" v-if="Object.keys(nodeAttrForm).includes('defaultTime')">
+                  <el-date-picker
+                    v-model="nodeAttrForm.defaultTime"
+                    type="datetimerange"
+                    range-separator="到"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    style="width: 100%;height: 100%"
+                    :value-format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
+                    :format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
+                  />
+                </el-form-item>
+                <el-form-item label="日期格式" v-if="Object.keys(nodeAttrForm).includes('format')">
+                  <el-input v-model="nodeAttrForm.format" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
+                  <el-input v-model="nodeAttrForm.field" />
+                </el-form-item>
+                <el-form-item label="菜单显示字段名" v-if="Object.keys(nodeAttrForm).includes('menuField')">
+                  <el-input v-model="nodeAttrForm.menuField" />
+                </el-form-item>
+                <el-form-item label="菜单唯一字段名" v-if="Object.keys(nodeAttrForm).includes('activeField')">
+                  <el-input v-model="nodeAttrForm.activeField" />
+                </el-form-item>
+                <el-form-item label="每页个数字段" v-if="Object.keys(nodeAttrForm).includes('pageSizeField')">
+                  <el-input v-model="nodeAttrForm.pageSizeField" />
+                </el-form-item>
+                <el-form-item label="当前页字段" v-if="Object.keys(nodeAttrForm).includes('currentPageField')">
+                  <el-input v-model="nodeAttrForm.currentPageField" />
+                </el-form-item>
+                <el-form-item label="时间戳字段名" v-if="Object.keys(nodeAttrForm).includes('timestampField')">
+                  <el-input v-model="nodeAttrForm.timestampField" />
+                </el-form-item>
+                <el-form-item label="是否显示时间戳" v-if="Object.keys(nodeAttrForm).includes('isTimestamp')">
+                  <el-switch v-model="nodeAttrForm.isTimestamp" />
+                </el-form-item>
+                <el-form-item label="开始时间字段名" v-if="Object.keys(nodeAttrForm).includes('startTimeId')">
+                  <el-input v-model="nodeAttrForm.startTimeId" />
+                </el-form-item>
+                <el-form-item label="结束时间字段名" v-if="Object.keys(nodeAttrForm).includes('endTimeId')">
+                  <el-input v-model="nodeAttrForm.endTimeId" />
+                </el-form-item>
+                <el-form-item label="数据映射" v-if="Object.keys(nodeAttrForm).includes('dataMap')">
+                  <el-button class="optionsBtn" plain @click="mapOptionsVisible = true">
+                    配置数据映射
+                  </el-button>
+                </el-form-item>
+                <el-form-item label="内容" v-if="Object.keys(nodeAttrForm).includes('text')">
+                  <el-input v-model="nodeAttrForm.text" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="对齐方式" v-if="Object.keys(nodeAttrForm).includes('align')">
+                  <el-select
+                    v-model="nodeAttrForm.align"
+                    placeholder="请选择"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="左对齐"
+                      value="left"
+                    />
+                    <el-option
+                      label="居中对齐"
+                      value="center"
+                    />
+                    <el-option
+                      label="右对齐"
+                      value="right"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="换行方式" v-if="Object.keys(nodeAttrForm).includes('whiteSpace')">
+                  <el-select
+                    v-model="nodeAttrForm.whiteSpace"
+                    placeholder="请选择"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="自动换行"
+                      value="normal"
+                    />
+                    <el-option
+                      label="不换行"
+                      value="nowrap"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="文字颜色" v-if="Object.keys(nodeAttrForm).includes('color')">
+                  <el-color-picker v-model="nodeAttrForm.color" show-alpha />
+                </el-form-item>
+                <el-form-item label="选中文字颜色" v-if="Object.keys(nodeAttrForm).includes('activeColor')">
+                  <el-color-picker v-model="nodeAttrForm.activeColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="背景颜色" v-if="Object.keys(nodeAttrForm).includes('backgroundColor')">
+                  <el-color-picker v-model="nodeAttrForm.backgroundColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="背景图" v-if="Object.keys(nodeAttrForm).includes('backgroundImage')">
+                  <el-upload
+                    class="avatar-uploader"
+                    :action="uploadFileUrl"
+                    :show-file-list="false"
+                    :limit="1"
+                    accept=".jpg,.png"
+                    :headers="headers"
+                    :on-success="(res)=>nodeAttrForm.backgroundImage = res.data.url"
+                  >
+                    <img style="width: 100px" v-if="nodeAttrForm.backgroundImage" :src="nodeAttrForm.backgroundImage"
+                         class="avatar"
+                         alt="" />
+                    <el-icon v-else class="avatar-uploader-icon">
+                      <Plus />
+                    </el-icon>
+                  </el-upload>
+                </el-form-item>
+                <el-form-item label="是否显示边框" v-if="Object.keys(nodeAttrForm).includes('isBorder')">
+                  <el-switch v-model="nodeAttrForm.isBorder" />
+                </el-form-item>
+                <el-form-item label="边框颜色"
+                              v-if="Object.keys(nodeAttrForm).includes('borderColor') && nodeAttrForm.isBorder">
+                  <el-color-picker v-model="nodeAttrForm.borderColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="时间戳颜色" v-if="Object.keys(nodeAttrForm).includes('timestampColor')">
+                  <el-color-picker v-model="nodeAttrForm.timestampColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="图片路径" v-if="Object.keys(nodeAttrForm).includes('imgSrc')">
+                  <el-input v-model="nodeAttrForm.imgSrc" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="图标" v-if="Object.keys(nodeAttrForm).includes('icon')">
+                  <el-popover
+                    placement="bottom"
+                    :width="400"
+                    trigger="click"
+                  >
+                    <template #reference>
+                      <el-input readonly v-model="nodeAttrForm.icon" style="width: 100%" placeholder="选择图标">
+                        <template #prepend>
+                          <el-button style="background-color: #0000">
+                            <template #icon>
+                              <el-icon class="el-icon--right" color="#fff">
+                                <component :is="icon[nodeAttrForm.icon]" />
+                              </el-icon>
+                            </template>
+                          </el-button>
+                        </template>
+                      </el-input>
+                    </template>
+                    <el-input v-model="selectIconInput" style="width: 100%" placeholder="筛选图标" />
+                    <div style="height: 50vh;overflow-y: auto">
+                      <!--                  <el-tooltip-->
+                      <!--                    class="box-item"-->
+                      <!--                    effect="dark"-->
+                      <!--                    :content="i"-->
+                      <!--                    placement="bottom"-->
+                      <!--                    v-for="i in icons.filter(e=>e.includes(selectIconInput))"-->
+                      <!--                  >-->
+                      <el-button :icon="icon[i]" @click="nodeAttrForm.icon = i"
+                                 :type="nodeAttrForm.icon === i ? 'primary':''"
+                                 v-for="i in icons.filter(e=>e.includes(selectIconInput))"
+                                 style="margin-top: 4px;margin-left: 0;margin-right: 4px;" />
+                      <!--                  </el-tooltip>-->
+                    </div>
+                  </el-popover>
+                </el-form-item>
+                <el-form-item label="图标路径" v-if="Object.keys(nodeAttrForm).includes('iconSrc')">
+                  <el-input v-model="nodeAttrForm.iconSrc" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="视频路径" v-if="Object.keys(nodeAttrForm).includes('videoSrc')">
+                  <el-input v-model="nodeAttrForm.videoSrc" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="标题" v-if="Object.keys(nodeAttrForm).includes('title')">
+                  <el-input v-model="nodeAttrForm.title" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="数据名称" v-if="Object.keys(nodeAttrForm).includes('yNames')">
+                  <el-input-tag v-model="nodeAttrForm.yNames" placeholder="回车确认" />
+                </el-form-item>
+                <el-form-item label="超时时间" v-if="Object.keys(nodeAttrForm).includes('timeout')">
+                  <el-input-number
+                    v-model="nodeAttrForm.timeout"
+                    :min="-1"
+                    :step="1"
+                    controls-position="right"
+                  />
+                </el-form-item>
+                <el-form-item label="提示框" v-if="Object.keys(nodeAttrForm).includes('tooltip')">
+                  <el-switch v-model="nodeAttrForm.tooltip" active-text="显示" inactive-text="隐藏" />
+                </el-form-item>
+                <el-form-item label="图表方向" v-if="Object.keys(nodeAttrForm).includes('isHorizontal')">
+                  <el-switch v-model="nodeAttrForm.isHorizontal" active-text="竖向" inactive-text="横向" />
+                </el-form-item>
+                <el-form-item label="图例" v-if="Object.keys(nodeAttrForm).includes('legend')">
+                  <el-switch v-model="nodeAttrForm.legend" active-text="显示" inactive-text="隐藏" />
+                </el-form-item>
+                <el-form-item label="图例颜色" v-if="Object.keys(nodeAttrForm).includes('legendColor')">
+                  <el-color-picker v-model="nodeAttrForm.legendColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="饼图标签" v-if="Object.keys(nodeAttrForm).includes('label')">
+                  <el-switch v-model="nodeAttrForm.label" active-text="显示" inactive-text="隐藏" />
+                </el-form-item>
+                <el-form-item label="轮播设置" v-if="Object.keys(nodeAttrForm).includes('swiperOptions')">
+                  <el-button class="optionsBtn" plain @click="swiperOptionsVisible = true">
+                    配置轮播图
+                  </el-button>
+                </el-form-item>
+                <el-form-item label="图片显示方式" v-if="Object.keys(nodeAttrForm).includes('imageFit')">
+                  <el-select
+                    effect="dark"
+                    v-model="nodeAttrForm.imageFit"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="填充满"
+                      value="fill"
+                    />
+                    <el-option
+                      label="固定比例"
+                      value="contain"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="图片集" v-if="Object.keys(nodeAttrForm).includes('carouselImages')">
+                  <el-input-tag v-model="nodeAttrForm.carouselImages" placeholder="回车确认" />
+                </el-form-item>
+                <el-form-item label="默认数据" v-if="Object.keys(nodeAttrForm).includes('defaultDataType')">
+                  <el-select
+                    clearable
+                    effect="light"
+                    v-model="nodeAttrForm.defaultDataType"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="单折线数据"
+                      value="line"
+                    />
+                    <el-option
+                      label="单曲线数据"
+                      value="curve"
+                    />
+                    <el-option
+                      label="单柱状图数据"
+                      value="bar"
+                    />
+                    <el-option
+                      label="多折线数据"
+                      value="multiLines"
+                    />
+                    <el-option
+                      label="多曲线数据"
+                      value="multiCurves"
+                    />
+                    <el-option
+                      label="多柱状图数据"
+                      value="multiBars"
+                    />
+                    <el-option
+                      label="饼图数据"
+                      value="pie"
+                    />
+                    <el-option
+                      label="仪表盘数据"
+                      value="dashboard"
+                    />
+                    <el-option
+                      label="雷达图数据"
+                      value="radar"
+                    />
+                    <el-option
+                      label="轮播图数据"
+                      value="carousel"
+                    />
+                    <el-option
+                      label="图片数据"
+                      value="image"
+                    />
+                    <el-option
+                      label="视频数据"
+                      value="video"
+                    />
+                    <el-option
+                      label="时间线数据"
+                      value="timeline"
+                    />
+                    <el-option
+                      label="翻牌器数据"
+                      value="digitalFlop"
+                    />
+                    <el-option
+                      label="表格数据"
+                      value="table"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="图表颜色" v-if="Object.keys(nodeAttrForm).includes('seriesColor')">
+                  <el-color-picker v-model="nodeAttrForm.seriesColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="饼图标签格式" v-if="Object.keys(nodeAttrForm).includes('pieLabelFormatter')">
+                  <el-input v-model="nodeAttrForm.pieLabelFormatter" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="饼图中心位置" v-if="Object.keys(nodeAttrForm).includes('pieCenter')">
+                  <el-slider v-model="nodeAttrForm.pieCenter" :min="0" :max="100" />
+                </el-form-item>
+                <el-form-item label="文字大小" v-if="Object.keys(nodeAttrForm).includes('fontSize')">
+                  <el-slider v-model="nodeAttrForm.fontSize" :min="12" :max="40" />
+                </el-form-item>
+                <el-form-item label="饼图半径" v-if="Object.keys(nodeAttrForm).includes('pieRadius')">
+                  <el-slider v-model="nodeAttrForm.pieRadius" :min="0" :max="100" range />
+                </el-form-item>
+                <el-form-item label="饼图颜色" v-if="Object.keys(nodeAttrForm).includes('colorList')">
+                  <el-badge value="99" class="item" :offset="[-8,0]"
+                            v-for="(i,k) in nodeAttrForm.colorList">
+                    <el-color-picker style="margin-right: 8px;"
+                                     v-model="nodeAttrForm.colorList[k]" show-alpha />
+                    <template #content>
+                      <div class="custom-content" @click="nodeAttrForm.colorList.splice(k, 1)">
+                        <el-icon>
+                          <Close />
+                        </el-icon>
+                      </div>
+                    </template>
+                  </el-badge>
+                  <el-button :icon="Plus" @click="nodeAttrForm.colorList.push('#fff')" />
+                </el-form-item>
+                <el-form-item label="发送脉冲类型" v-if="Object.keys(nodeAttrForm).includes('sendType')">
+                  <el-select
+                    multiple
+                    v-model="nodeAttrForm.sendType"
+                    placeholder="Select"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="确定"
+                      value="ok"
+                    />
+                    <el-option
+                      label="重置"
+                      value="reset"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="数字数量" v-if="Object.keys(nodeAttrForm).includes('numQuantity')">
+                  <el-input-number :min="1" :controls="false" v-model="nodeAttrForm.numQuantity" autocomplete="off" />
+                </el-form-item>
+                <el-form-item label="树设置" v-if="Object.keys(nodeAttrForm).includes('treeOptions')">
+                  <el-button class="optionsBtn" plain @click="treeOptionsVisible = true">
+                    配置树
+                  </el-button>
+                </el-form-item>
+                <el-form-item label="层级数量" v-if="Object.keys(nodeAttrForm).includes('level')">
+                  <el-input-number :min="1" :controls="false" v-model="nodeAttrForm.level" autocomplete="off" />
+                </el-form-item>
+                <el-form-item label="js脚本设置">
+                  <el-input type="textarea" v-model="nodeAttrForm.JScript" style="width: 100%" />
+                </el-form-item>
+              </el-collapse-item>
+            </el-collapse>
+          </el-form>
+        </div>
+        <div class="tabItem" v-if="Object.keys(nodeDataForm).length>0 && tabs === 2">
+          <div v-for=" (i,k) in nodeAttrForm.request" style="margin-bottom: 12px;">
+            <el-form :model="i.data" label-width="auto" style="max-width: 600px" labelWidth="120px">
+              <el-form-item label="使用数据源">
+                <el-select
+                  v-model="i.dataSource"
+                  placeholder="请选择"
+                  style="width: 200px"
+                  @change="(e)=>nodeAttrForm.request[k].mapList = customData.find(v=>v.id === e).outputData.map(v=>{return{originalField:v.fieldOne}})"
+                >
+                  <el-option
+                    :label="option.name"
+                    v-for="option in customData"
+                    :value="option.id"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <div style="width: 100%;text-align: center;font-size: 14px;color: #fff;font-weight: 600;margin: 12px 0">
+                字段映射
+              </div>
+              <el-table :data="i.mapList" style="width: 100%" max-height="500">
+                <el-table-column label="原字段" prop="originalField">
+                </el-table-column>
+                <el-table-column label="映射字段">
+                  <template #default="scope">
+                    <el-input v-model="scope.row.field" style="width: 100%" />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form>
+          </div>
+          <div style="width: 100%;text-align: center;margin-top: 12px">
+            <el-button type="primary" plain style="text-align: center" @click="addRequest">添加数据源</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
+      <el-form :model="pageSettingForm">
+        <el-form-item label="页面大小" label-width="100px">
+          <el-input v-model="pageSettingForm.width" style="width: calc(50% - 10px)" autocomplete="off"
+                    placeholder="缺省则为不限制" />
+          <span style="width: 20px;text-align: center">
+        X
+        </span>
+          <el-input v-model="pageSettingForm.height" style="width: calc(50% - 10px)" autocomplete="off"
+                    placeholder="缺省则为不限制" />
+        </el-form-item>
+        <el-form-item label="页面背景色" label-width="100px">
+          <el-color-picker v-model="pageSettingForm.bgColor" show-alpha />
+        </el-form-item>
+        <el-form-item label="页面背景图" label-width="100px">
+          <el-upload
+            class="avatar-uploader"
+            :action="uploadFileUrl"
+            :show-file-list="false"
+            :limit="1"
+            accept=".jpg,.png"
+            :headers="headers"
+            :on-success="pageBgUploadSuccess"
+          >
+            <img v-if="pageSettingForm.bg" :src="pageSettingForm.bg" class="avatar" style="width: 100px" />
+            <el-icon v-else class="avatar-uploader-icon">
+              <Plus />
+            </el-icon>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="pageSettingVisible = false">取消</el-button>
+          <el-button type="primary" @click="setPageData">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="tableOptionsVisible" title="表格设置" width="950">
+      <el-table :data="nodeAttrForm.tableOptions">
+        <el-table-column label="列名称" width="150">
+          <template #default="scope">
+            <el-input v-model="scope.row.name" style="width: 100%" />
+          </template>
+        </el-table-column>
+        <el-table-column label="数据字段" width="200">
+          <template #default="scope">
+            <el-input v-model="scope.row.field" style="width: 100%" />
+          </template>
+        </el-table-column>
+        <el-table-column label="列宽">
+          <template #default="scope">
+            <el-input v-model="scope.row.width" style="width: 100%" />
+          </template>
+        </el-table-column>
+        <el-table-column label="对齐方式">
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.align"
+              placeholder="请选择"
+              style="width: 100%"
+            >
+              <el-option
+                label="左对齐"
+                value="left"
+              />
+              <el-option
+                label="居中"
+                value="center"
+              />
+              <el-option
+                label="右对齐"
+                value="right"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型">
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.type"
+              placeholder="请选择"
+              style="width: 100%"
+            >
+              <el-option
+                label="文本"
+                value="文本"
+              />
+              <el-option
+                label="标签"
+                value="标签"
+              />
+              <el-option
+                label="进度条"
+                value="进度条"
+              />
+              <el-option
+                label="图片"
+                value="图片"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="计算公式" width="200">
+          <template #default="scope">
+            <el-input v-model="scope.row.formula" style="width: 100%" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button :icon="Delete" circle @click="nodeAttrForm.tableOptions.splice(scope.$index, 1)" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-button size="small" :icon="Plus" style="width: 100%" @click="nodeAttrForm.tableOptions.push({})">添加
+      </el-button>
+    </el-dialog>
+    <el-dialog v-model="tableCellOptionsVisible" title="单元格设置" width="100%">
+      {{ (getInputData(nodeDataForm.id) || {}).tableData }}
+      <el-table
+        :data="(getInputData(nodeDataForm.id)||{}).tableData"
+        style="--el-table-border-color:#000"
+        :border="true"
+        :header-cell-style="{color:nodeAttrForm.thColor,backgroundColor:`${nodeAttrForm?.thBgColor} !important`}"
+        :header-row-style="{height:nodeAttrForm.thHeight }"
+        :show-header="nodeAttrForm.isThShow"
+        :style="{height: '100%'}"
+      >
+        <el-table-column v-for="(i,k) in nodeAttrForm.tableOptions" :key="k" :align="i.align" prop="date"
+                         :label="i.name"
+                         :width="i.width">
+          <template #default="scope">
+            <div @click.stop="cellClick(scope)">
+              <span
+                v-if="(scope.row[`cellType${k+1}`] || i.type) === '文本'">{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
+                }}</span>
+              <el-tag type="primary" v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '标签'">
+                {{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)) }}
+              </el-tag>
+              <el-image :preview-src-list="[scope.row[i.field]]"
+                        v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '图片'" style="width: 100%;"
+                        :style="{height:nodeAttrForm.tdHeight}"
+                        :src="setText(scope.row[i.field],scope.row,(scope.row[`cellFormula${k + 1}`] || i.formula))"
+                        fit="contain" />
+              <el-progress v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '进度条'" :text-inside="true"
+                           :stroke-width="26"
+                           :percentage="parseFloat(setText(scope.row[i.field],scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)))" />
+              <span v-else>{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
+                }}</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    <el-dialog v-model="cellOptionsVisible" title="单元格设置" width="500">
+      <el-form :model="cellOption" label-width="auto">
+        <el-form-item label="类型">
+          <el-select
+            @change="cellTypeChange"
+            v-model="cellOption.type"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option
+              label="文本"
+              value="文本"
+            />
+            <el-option
+              label="标签"
+              value="标签"
+            />
+            <el-option
+              label="进度条"
+              value="进度条"
+            />
+            <el-option
+              label="图片"
+              value="图片"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="计算公式">
+          <el-input @change="cellFormulaChange" v-model="cellOption.formula" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cellOptionsVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="tableClassOptionsVisible" title="动画设置" width="500">
+      <el-form :model="nodeAttrForm.tableClassOption" label-width="auto">
+        <el-form-item label="滚动速度">
+          <el-input-number :controls="false" v-model="nodeAttrForm.tableClassOption.step" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="开启滚动的数据量">
+          <el-input-number :controls="false" v-model="nodeAttrForm.tableClassOption.limitMoveNum" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="鼠标悬停停止">
+          <el-switch v-model="nodeAttrForm.tableClassOption.hoverStop" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="tableClassOptionsVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="swiperOptionsVisible" title="轮播设置" width="500">
+      <el-form v-if="swiperOptionsVisible" :model="nodeAttrForm.swiperOptions" label-width="auto">
+        <el-form-item label="自动播放">
+          <el-switch v-model="nodeAttrForm.swiperOptions.autoplay" />
+        </el-form-item>
+        <el-form-item label="切换间隔">
+          <el-input-number :controls="false" v-model="nodeAttrForm.swiperOptions.delay" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="鼠标悬停停止">
+          <el-switch v-model="nodeAttrForm.swiperOptions.pauseOnMouseEnter" />
+        </el-form-item>
+        <el-form-item label="过渡时间">
+          <el-input-number :controls="false" v-model="nodeAttrForm.swiperOptions.speed" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="循环播放">
+          <el-switch v-model="nodeAttrForm.swiperOptions.loop" />
+        </el-form-item>
+        <el-form-item label="显示导航按钮">
+          <el-switch v-model="nodeAttrForm.swiperOptions.navigation" />
+        </el-form-item>
+        <el-form-item label="动画效果">
+          <el-select
+            v-model="nodeAttrForm.swiperOptions.effect"
+            style="width: 100%"
+          >
+            <el-option
+              label="默认"
+              value="slide"
+            />
+            <el-option
+              label="淡入淡出"
+              value="fade"
+            />
+            <el-option
+              label="立方体"
+              value="cube"
+            />
+            <el-option
+              label="翻转"
+              value="flip"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="swiperOptionsVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="mapOptionsVisible" title="数据映射" width="500">
+      <el-table :data="nodeAttrForm.dataMap" style="width: 100%">
+        <el-table-column label="源字段" min-width="120">
+          <template #default="scope">
+            <el-input v-model="scope.row.source" style="width: 100%" />
+          </template>
+        </el-table-column>
+        <el-table-column label="映射字段" min-width="120">
+          <template #default="scope">
+            <el-input v-model="scope.row.target" style="width: 100%" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="120">
+          <template #default="scope">
+            <el-button link type="primary" size="small" @click="nodeAttrForm.dataMap.splice(scope.$index, 1)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-button style="width: 100%" @click="nodeAttrForm.dataMap.push({})">
+        添加映射
+      </el-button>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="mapOptionsVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="treeOptionsVisible" title="树设置" fullscreen :before-close="closeTreeOption">
+      <TreeOption v-if="treeOptionsVisible" ref="treeOptionRef" :data="nodeAttrForm.treeOptions"
+                  :level="nodeAttrForm.level" />
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+
+import FlowRuler from './FlowRuler.vue';
+import {
+  Close,
+  Delete,
+  Lock,
+  Plus,
+  Unlock
+} from '@element-plus/icons-vue';
+import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
+import tool, { options } from '@/views/boardGenerate/tool.js';
+import { v4 as uuidv4 } from 'uuid';
+import TreeOption from './nodes/advancedComponents/tree/option.vue';
+
+import { getDataSourceList } from '@/views/boardGenerate/api/dataSource.js';
+import { editBoardApi, getBoardApi } from '@/views/boardGenerate/api/boardList.js';
+import { globalHeaders } from '@/utils/request.ts';
+
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
+const headers = ref(globalHeaders());
+const { onDragStart, onDrop, onDragOver } = tool();
+const router = useRouter();
+const key = ref(0);
+const treeOptionRef = ref();
+
+const isSnapToGrid = ref(false);
+const toggleSnapToGrid = (e) => {
+  if (e.key === 'Alt') {
+    isSnapToGrid.value = false;
+  }
+};
+const keyup = () => {
+  isSnapToGrid.value = true;
+};
+window.addEventListener('keydown', toggleSnapToGrid);
+window.addEventListener('keyup', keyup);
+const {
+  addEdges,
+  updateNode,
+  removeNodes,
+  addNodes
+} = useVueFlow({ id: 'flowA' });
+
+const gridSize = 200;
+
+const handleResizeStop = (event, node) => {
+  if (event.altKey) return;
+
+  const snappedWidth = Math.round(node.width / gridSize) * gridSize;
+  const snappedHeight = Math.round(node.height / gridSize) * gridSize;
+
+  updateNode(node.id, {
+    style: {
+      width: `${snappedWidth}px`,
+      height: `${snappedHeight}px`
+    }
+  });
+};
+
+onMounted(async () => {
+  icons.value = Object.keys(icon);
+  loading.value = true;
+  getDataSourceList({
+    pageNum: 1,
+    pageSize: 9999999
+  })
+    .then((res) => {
+      customData.value = res.rows.map(e => {
+        return {
+          id: e.dataSourceId,
+          name: e.dataSourceName,
+          url: e.requestUrl,
+          method: e.requestMethod,
+          outputData: e.designDataFieldList,
+          type: e.responseType,
+          db: e.fieldOne,
+          SQL: e.fieldTwo,
+          isPage: e.fieldThree === 'true'
+        };
+      });
+    });
+  // customBoard.value = JSON.parse(localStorage.getItem('BOARDNODE') || '[]');
+  await nextTick();
+  getBoardApi(router.currentRoute.value.query.id)
+    .then((res) => {
+      let data = res.data;
+      boardData.value = data;
+      nodes.value = data.designPagePointList?.length !== 0 ? data.designPagePointList.sort((a, b) => a.fieldOne - b.fieldOne).map(e => {
+        let data = {};
+        let savaField = ['customData', 'options'];
+        let dataContent = JSON.parse(e.dataContent) || {};
+        Object.keys(dataContent).forEach((key) => {
+          if (savaField.includes(key)) {
+            data[key] = dataContent[key];
+          } else {
+            if (Array.isArray(dataContent[key])) {
+              data[key] = [];
+            } else if (dataContent[key] && typeof dataContent[key] === 'object' && !Array.isArray(dataContent[key])) {
+              data[key] = {};
+            } else {
+              data[key] = null;
+            }
+          }
+        });
+        return {
+          id: e.pagePointId,
+          name: e.pagePointName,
+          dimensions: {
+            width: e.width,
+            height: e.height
+          },
+          position: {
+            x: e.posX,
+            y: e.posY
+          },
+          type: e.pointType,
+          draggable: e.fieldTwo === 'true',
+          data: JSON.parse(e.dataContent)
+        };
+      }) : [{
+        id: `area_${uuidv4().replaceAll('-', '_')}`,
+        name: 'area',
+        type: 'area',
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      }];
+      edges.value = data.designPageEdgesList?.map(e => {
+        return {
+          id: e.pageEdgesId,
+          source: e.sourceNodeId,
+          target: e.targetNodeId,
+          type: e.edgeType,
+          targetHandle: e.targetHandleId,
+          sourceHandle: e.sourceHandleId
+        };
+      }) || [];
+      pageData.value = JSON.parse(data.customContent) || {};
+      pageSettingForm.value = pageData.value;
+      nextTick(() => {
+        isSnapToGrid.value = true;
+      });
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+});
+const icons = ref([]);
+const colorType = ref();
+const colorList = ref([
+  {
+    name: '科技',
+    value: 0,
+    colors: ['#0B3D91', '#0F4C81', '#1663A8', '#1A76C8', '#2A93E2', '#4AA7FF', '#70BCFF', '#98D4FF', '#BFE7FF', '#E6F3FF']
+  },
+  {
+    name: '复古',
+    value: 1,
+    colors: ['#6B3E2A', '#8B4F2E', '#A65A2F', '#C36A33', '#E07B3A', '#F09C4B', '#F6B66E', '#F9D19A', '#FBE5C4', '#FFF3E8']
+  },
+  {
+    name: '自然',
+    value: 2,
+    colors: ['#1B5E20', '#2E7D32', '#3EA34B', '#56B86A', '#6FD58A', '#86E3A7', '#A2F2C5', '#C1F9DE', '#DFFFEF', '#F3FFF8']
+  },
+  {
+    name: '霓虹',
+    value: 3,
+    colors: ['#FF3D7F', '#FF5E5E', '#FF8A00', '#FFD700', '#32FFDA', '#00E5FF', '#3B82F6', '#6B5BFF', '#B45CFF', '#FF3DF5']
+  },
+  {
+    name: '极简',
+    value: 4,
+    colors: ['#0B0C10', '#1A1B21', '#2B2D33', '#3D4048', '#4F535E', '#6A6F7A', '#8A909F', '#B0B6C3', '#D2D7E3', '#F0F2F8']
+  },
+  {
+    name: '标准',
+    value: 5,
+    colors: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC']
+  }
+
+
+]);
+const selectIconInput = ref('');
+const collapseActiveName = ref('1');
+const loading = ref(false);
+const pageSettingVisible = ref(false);
+const tableCellOptionsVisible = ref(false);
+const cellOptionsVisible = ref(false);
+const tableOptionsVisible = ref(false);
+const treeOptionsVisible = ref(false);
+const tableClassOptionsVisible = ref(false);
+const swiperOptionsVisible = ref(false);
+const mapOptionsVisible = ref(false);
+const tabs = ref(0);
+const nodes = ref([{
+  id: `area_${uuidv4().replaceAll('-', '_')}`,
+  name: 'area',
+  type: 'area',
+  position: {
+    x: 0,
+    y: 0
+  },
+  data: {}
+}]);
+const edges = ref([]);
+const requestDatas = ref([]);
+const customData = ref([]);
+// const customBoard = ref([]);
+const cellOption = ref({});
+const boardData = ref({});
+const pageData = ref({});
+const nodeAttrForm = ref({});
+const nodeDataForm = ref({});
+const pageSettingForm = ref({});
+const logEvent = async (eventname, event) => {
+  switch (eventname) {
+    case 'connect':
+      if (!edges.value.some(r => r.id === `${event.source}---${event.target}`)) {
+        addEdges({
+          id: `${event.source}---${event.target}`,
+          source: event.source,
+          target: event.target,
+          type: 'bezier',
+          animated: true,
+          markerEnd: MarkerType.ArrowClosed,
+          sourceHandle: event.sourceHandle,
+          style: { stroke: '#409EFF' }
+        });
+      }
+      break;
+    case 'paneClick':
+      nodeAttrForm.value = {};
+      nodeDataForm.value = {};
+      tabs.value = 0;
+      break;
+    case 'click':
+      nodeAttrForm.value = event.node.data.options;
+      nodeDataForm.value = event.node;
+      key.value += 1;
+      break;
+    case 'nodeDrag':
+      if (event.nodes.length === 1) {
+        nodeAttrForm.value = event.node.data.options;
+        nodeDataForm.value = event.node;
+        key.value += 1;
+      } else {
+        nodeAttrForm.value = {};
+        tabs.value = 0;
+        nodeDataForm.value = {};
+      }
+      break;
+    case 'contextmenu':
+  }
+};
+const getInputData = (e) => {
+  let outputData = {};
+  let nodeIds = edges.value.map(v => {
+    if (v.target === e) {
+      return v.source;
+    }
+  });
+  nodes.value.forEach(v => {
+    if (nodeIds.includes(v.id)) {
+      outputData = {
+        ...outputData,
+        ...v.data.outputData
+      };
+    }
+  });
+  return outputData;
+};
+const selectTabs = (e) => {
+  tabs.value = e;
+};
+const setPageData = () => {
+  pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value));
+  pageSettingVisible.value = false;
+};
+
+const pageSetting = () => {
+  pageSettingVisible.value = true;
+  pageSettingForm.value = pageData.value;
+};
+const save = () => {
+  loading.value = true;
+  editBoardApi({
+    ...boardData.value,
+    customContent: JSON.stringify(pageSettingForm.value),
+    designPagePointList: nodes.value.map((e, index) => {
+      let data = {};
+      let savaField = ['customData', 'options', 'isLock'];
+      Object.keys(e.data).forEach((key) => {
+        if (savaField.includes(key)) {
+          data[key] = e.data[key];
+        } else {
+          if (Array.isArray(e.data[key])) {
+            data[key] = [];
+          } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
+            data[key] = {};
+          } else {
+            data[key] = null;
+          }
+        }
+      });
+      if (e.type === 'area') {
+        return {
+          activeFlag: '1',
+          pageConfigId: boardData.value.pageConfigId,
+          pagePointId: e.id,
+          pagePointName: e.name,
+          fieldOne: index,
+          fieldTwo: e.draggable,
+          width: e.dimensions.width || '',
+          height: e.dimensions.height || '',
+          posX: e.position.x,
+          posY: e.position.y,
+          pointType: e.type,
+          dataContent: JSON.stringify(data)
+        };
+      } else {
+        return {
+          activeFlag: '1',
+          pageConfigId: boardData.value.pageConfigId,
+          pagePointId: e.id,
+          pagePointName: e.name,
+          fieldOne: index,
+          fieldTwo: e.draggable,
+          width: e.dimensions.width || '',
+          height: e.dimensions.height || '',
+          posX: e.position.x,
+          posY: e.position.y,
+          pointType: e.type,
+          dataContent: JSON.stringify(data)
+        };
+      }
+    }),
+    designPageEdgesList: edges.value.map(e => {
+      return {
+        activeFlag: '1',
+        pageConfigId: boardData.value.pageConfigId,
+        pageEdgesId: e.id,
+        sourceNodeId: e.source,
+        targetNodeId: e.target,
+        edgeType: e.type,
+        targetHandleId: e.targetHandle,
+        sourceHandleId: e.sourceHandle
+      };
+    })
+  }).then(() => {
+    ElMessage({
+      type: 'success',
+      message: '保存成功'
+    });
+  })
+    .finally(() => {
+      loading.value = false;
+    });
+  // localStorage.setItem('NODES', JSON.stringify(nodes.value.map(e => {
+  //   let data = {};
+  //   let savaField = ['customData', 'options'];
+  //   Object.keys(e.data).forEach((key) => {
+  //     if (savaField.includes(key)) {
+  //       data[key] = e.data[key];
+  //     } else {
+  //       if (Array.isArray(e.data[key])) {
+  //         data[key] = [];
+  //       } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
+  //         data[key] = {};
+  //       } else {
+  //         data[key] = null;
+  //       }
+  //
+  //     }
+  //   });
+  //   return {
+  //     id: e.id,
+  //     name: e.name,
+  //     dimensions: e.dimensions,
+  //     position: e.position,
+  //     type: e.type,
+  //     data: data
+  //   };
+  // })));
+  // localStorage.setItem('EDGES', JSON.stringify(edges.value.map(e => {
+  //   return {
+  //     id: e.id,
+  //     source: e.source,
+  //     target: e.target,
+  //     type: e.type,
+  //     animated: e.animated,
+  //     markerEnd: e.markerEnd,
+  //     targetHandle: e.targetHandle,
+  //     sourceHandle: e.sourceHandle,
+  //     style: e.style
+  //   };
+  // })));
+};
+const pageBgUploadSuccess = (res) => {
+  if (res.code === 200) {
+    pageSettingForm.value.bg = res.data.url;
+  }
+};
+const nodeOperate = (data) => {
+  let type = data.type;
+  const index = nodes.value.indexOf(data.node);
+  let arr = JSON.parse(JSON.stringify(nodes.value));
+  const item = arr[index];
+  switch (type) {
+    case 'toTop':
+      nodes.value = [...nodes.value.filter(e => e.id !== data.node.id), data.node];
+      break;
+    case 'toBottom':
+      nodes.value = [data.node, ...nodes.value.filter(e => e.id !== data.node.id)];
+      break;
+    case 'moveUp':
+      arr.splice(index, 1);
+      arr.splice(index + 1, 0, item);
+      nodes.value = arr;
+      break;
+    case 'moveDown':
+      arr.splice(index, 1);
+      arr.splice(index - 1, 0, item);
+      nodes.value = arr;
+      break;
+    case 'copy':
+      item.id = options.getId(item.type);
+      addNodes(item);
+      break;
+    case 'del':
+      removeNodes([data.node.id]);
+      break;
+  }
+};
+const pitchOnNode = (e) => {
+  nodes.value.forEach(v => {
+    if (v.id === e.id) {
+      v.selected = true;
+    } else {
+      v.selected = false;
+    }
+  });
+  nodeAttrForm.value = e.data.options;
+  key.value += 1;
+  nodeDataForm.value = e;
+};
+
+const cellClick = (e) => {
+  let option = (nodeAttrForm.value.tableCellOptions || []).find(v => v.index === e.$index && v.cellIndex === e.cellIndex) || {};
+  cellOption.value = {
+    ...(nodeAttrForm.value.tableOptions?.[e.cellIndex] || {}),
+    $index: e.$index,
+    $cellIndex: e.cellIndex,
+    formula: option.formula,
+    type: option.type
+  };
+  cellOptionsVisible.value = true;
+};
+
+const cellTypeChange = (value) => {
+  if (!nodeAttrForm.value.tableCellOptions) {
+    nodeAttrForm.value.tableCellOptions = [];
+  }
+  let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
+  let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
+  option.type = cellOption.value.type;
+  if (index === -1) {
+    nodeAttrForm.value.tableCellOptions.push({
+      index: cellOption.value.$index,
+      cellIndex: cellOption.value.$cellIndex,
+      type: value,
+      formula: cellOption.value.formula
+    });
+  } else {
+    nodeAttrForm.value.tableCellOptions[index].type = value;
+  }
+};
+
+const cellFormulaChange = (value) => {
+  if (!nodeAttrForm.value.tableCellOptions) {
+    nodeAttrForm.value.tableCellOptions = [];
+  }
+  let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
+  let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
+  option.formula = cellOption.value.formula;
+  if (index === -1) {
+    nodeAttrForm.value.tableCellOptions.push({
+      index: cellOption.value.$index,
+      cellIndex: cellOption.value.$cellIndex,
+      type: cellOption.value.type,
+      formula: value
+    });
+  } else {
+    nodeAttrForm.value.tableCellOptions[index].formula = value;
+  }
+
+};
+
+const formulaFun = (row, formula) => {
+  let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
+    if (key === 'tableData') {
+      return key;
+    }
+    if (`${row[key]}`?.trim() !== '' && !isNaN(row[key])) {
+      return row[key] || 0;
+    } else {
+      return `"${row[key]}"`;
+    }
+  });
+  let res = 0;
+  try {
+    const fun = new Function('tableData', `return ${data}`);
+    res = fun((getInputData(nodeDataForm.value.id) || {}).tableData);
+  } catch (err) {
+    res = 0;
+  }
+  if (`${res}`.trim() !== '' && !isNaN(res)) {
+    res = res.toFixed(2);
+  }
+  return res;
+};
+const setText = (value, row, formula) => {
+  if (!formula) {
+    return value;
+  } else {
+    return formulaFun(row, formula);
+  }
+};
+const closeTreeOption = (done) => {
+  console.log(treeOptionRef.value.getNodes());
+  nodeAttrForm.value.treeOptions = (treeOptionRef.value.getNodes() || []).map(e => {
+    return {
+      id: e.id,
+      parentNode: e.parentNode || '',
+      position: e.position,
+      type: e.type,
+      data: e.data,
+      dimensions: e.dimensions,
+      extent: e.extent || '',
+      draggable: e.draggable
+    };
+  });
+  done();
+};
+const addRequest = (e) => {
+  if (nodeAttrForm.value.request) {
+    nodeAttrForm.value.request.push({
+      dataSource: '',
+      mapList: []
+    });
+  } else {
+    nodeAttrForm.value.request = [{
+      dataSource: '',
+      mapList: []
+    }];
+  }
+};
+</script>
+<style scoped lang="less">
+
+:deep(.swiper-slide-active) {
+  pointer-events: none;
+}
+
+:deep(.vue-flow__node-area) {
+  z-index: -1 !important;
+  pointer-events: none !important;
+}
+
+:deep(.el-color-picker__icon) {
+  display: none;
+}
+
+.custom-content {
+  width: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+
+  .el-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+:deep(.el-badge__content) {
+  padding: 0;
+  height: 14px;
+  width: 14px;
+}
+
+.boardGenerate {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  --boardGenerateTopHeight: 50px;
+
+
+  .left {
+    .levels {
+      width: 100%;
+      height: calc(100% - 50px);
+      overflow: auto;
+      background-color: #1C1F20;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+
+      .isSelect {
+        background-color: #494949;
+
+        .isShow {
+          border-right: 1px solid #373737;
+        }
+      }
+    }
+
+  }
+
+  .center {
+    width: calc(100% - 500px);
+    display: inline-block;
+    background-color: #1C1F20;
+    height: calc(100vh - var(--boardGenerateTopHeight));
+    overflow: auto;
+
+
+    /deep/ .vue-flow__resize-control {
+      background-color: #409EFF !important;
+      border: 1px solid white;
+
+      .handle {
+        background-color: #409EFF !important;
+      }
+    }
+
+  }
+
+  .right {
+    width: 300px;
+    display: inline-block;
+    height: calc(100vh - var(--boardGenerateTopHeight));
+    overflow: auto;
+    background-color: #1C1F20;
+    border-left: 1px solid #000;
+
+    .tabs {
+      display: flex;
+      border-bottom: 1px solid black;
+      background-color: #1C1F20;
+
+      .tab {
+        padding: 8px 16px;
+        font-size: 14px;
+        background: transparent;
+        cursor: pointer;
+        color: #ccc;
+      }
+
+      .tab.active {
+        background: #222;
+        color: #fff;
+        border-bottom: none;
+        border-radius: 4px 4px 0 0;
+        position: relative;
+        top: 1px;
+        z-index: 1;
+      }
+    }
+
+    .tabItems {
+      width: 100%;
+      height: calc(100% - 50px);
+      background-color: #222;
+
+      .tabItem {
+        .el-collapse {
+          border: none;
+
+          :deep(.el-collapse-item) {
+            .el-collapse-item__header {
+              background-color: #0000;
+              color: #ccc;
+              border: none;
+            }
+
+            .el-collapse-item__wrap {
+              background-color: #0000;
+              border: none;
+            }
+          }
+
+        }
+
+        :deep(.el-form-item__label) {
+          color: #ccc;
+        }
+
+        :deep(.el-input__wrapper) {
+          background: #222;
+          border-color: #333;
+          box-shadow: 0 0 0 1px #666 inset;
+
+          .el-input__inner {
+            color: #ccc;
+          }
+        }
+
+        :deep(.el-input-number__decrease) {
+          background-color: #666;
+          border: none;
+          color: #ccc;
+        }
+
+        :deep(.el-input-number__increase) {
+          background-color: #666;
+          border: none;
+          color: #ccc;
+        }
+
+        :deep(.el-input-tag) {
+          background: #222;
+          border-color: #333;
+          box-shadow: 0 0 0 1px #666 inset;
+
+          .el-input-tag__inner {
+            .el-tag {
+              background-color: #666;
+              color: #ccc;
+            }
+          }
+        }
+
+        :deep(.el-switch__label) {
+          color: #ccc;
+
+          &.is-active {
+            color: var(--el-color-primary);
+          }
+        }
+
+        :deep(.el-input-group__prepend) {
+          background-color: #0000;
+          border: 1px solid #666;
+          box-shadow: none;
+        }
+
+        .optionsBtn {
+          background-color: #0000;
+          border-color: #ccc;
+          color: #ccc;
+        }
+
+        :deep(.el-select__wrapper) {
+          background-color: #666;
+          border: none;
+          color: #ccc;
+
+          .el-select__placeholder {
+            color: #ccc;
+          }
+        }
+
+        :deep(.el-textarea__inner) {
+          background-color: #0000;
+          border: none;
+          color: #ccc;
+          box-shadow: 0 0 0 1px #666 inset;
+        }
+
+        :deep(.el-table) {
+
+        }
+      }
+    }
+
+  }
+}
+
+.moduleCard {
+  width: 100px;
+  vertical-align: top;
+
+  :deep(.el-card__body) {
+    height: 40px;
+    padding: 0 !important;
+  }
+
+  :deep(.el-card__header) {
+    padding: 0 !important;
+  }
+
+  .moduleText {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+</style>
+<style>
+.vue-flow__handle-left {
+  width: 1vw;
+  height: 1vw;
+  opacity: 0.2;
+}
+
+.vue-flow__handle-right {
+  width: 1vw;
+  height: 1vw;
+}
+
+</style>
+
diff --git a/src/views/boardGenerate/test.vue b/src/views/boardGenerate/test.vue
new file mode 100644
index 0000000..d37e629
--- /dev/null
+++ b/src/views/boardGenerate/test.vue
@@ -0,0 +1,14 @@
+<template>
+  <div style="width: 100vw;height: 100vh">
+    <VisualEditor />
+  </div>
+</template>
+<script setup>
+import { VisualEditor } from '/Users/ysg/Desktop/开发/scrin-visual-editor';
+import '/Users/ysg/Desktop/开发/scrin-visual-editor/dist/style.css';
+
+console.log(VisualEditor);
+</script>
+<style>
+
+</style>