添加颜色库

src/App.vue

@@ -52,3 +52,30 @@ const openAiAssistantMenu = () => {
   z-index:8006 !important;
 }
 </style>
+<style>
+.auto-scroll-back {
+  display: inline-block;
+  animation-name: backAndForth;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+/* 来回滚动动画 */
+@keyframes backAndForth {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(calc(-1 * var(--scroll-x)));
+  }
+  75% {
+    transform: translateX(calc(-1 * var(--scroll-x)));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+</style>

src/directive/autoScroll/autoScroll.js

@@ -0,0 +1,58 @@
+export default {
+  mounted(el, binding) {
+    const duration = binding.value?.duration || 4
+    const delay = binding.value?.delay || 1
+
+    const run = () => {
+      // 1. 找到容器内部所有带 id 的元素
+      const nodes = [...el.querySelectorAll('#autoScroll')]
+
+      // 2. 按 id 分组
+      const groups = {}
+      nodes.forEach(node => {
+        const id = node.id
+        if (!groups[id]) groups[id] = []
+        groups[id].push(node)
+      })
+
+      // 3. 每组只判断一次
+      Object.keys(groups).forEach(id => {
+        const group = groups[id]
+        const target = group[0]
+
+        const parent = target.parentElement
+        if (!parent) return
+
+        target.style.display = 'inline-block'
+        target.style.whiteSpace = 'nowrap'
+
+        const overflow = target.scrollWidth - parent.clientWidth
+
+        if (overflow > 0) {
+          group.forEach(elm => {
+            elm.classList.add('auto-scroll-back')
+            elm.style.setProperty('--scroll-x', `${overflow}px`)
+            elm.style.animationDuration = `${duration * 2 + delay * 2}s`
+          })
+        } else {
+          group.forEach(elm => {
+            elm.classList.remove('auto-scroll-back')
+          })
+        }
+      })
+    }
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(run)
+    })
+
+    const ro = new ResizeObserver(run)
+    ro.observe(el)
+
+    el.__ro__ = ro
+  },
+
+  unmounted(el) {
+    el.__ro__?.disconnect()
+  }
+}

src/directive/index.ts

@@ -1,4 +1,5 @@
 import copyText from './common/copyText';
+import autoScroll from './autoScroll/autoScroll';
 import { hasPermi, hasRoles } from './permission';
 import { App } from 'vue';
 
@@ -6,4 +7,5 @@ export default (app: App) => {
   app.directive('copyText', copyText);
   app.directive('hasPermi', hasPermi);
   app.directive('hasRoles', hasRoles);
+  app.directive('autoScroll', autoScroll);
 };

src/views/boardGenerate/index.vue

@@ -402,8 +402,10 @@
                      :body-style="{padding:'4px 0'}">
               <template #header>
                 <div style="width: 100%;height: 100%;text-align: center">
-                  <el-icon><Menu /></el-icon>
-<!--                  <el-image style="width:50px;height: 50px;text-align: center" :src="textImg" fit="contain" />-->
+                  <el-icon>
+                    <Menu />
+                  </el-icon>
+                  <!--                  <el-image style="width:50px;height: 50px;text-align: center" :src="textImg" fit="contain" />-->
                 </div>
               </template>
               <div class="moduleText">菜单</div>
@@ -522,167 +524,175 @@
           </template>
 
           <template #node-line="props">
-            <LineNode v-bind="props" :inputData="getInputData(props.id)"
+            <LineNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                       @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-multiLines="props">
-            <MultiLinesNode v-bind="props" :inputData="getInputData(props.id)"
+            <MultiLinesNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                             @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-curve="props">
-            <CurveNode v-bind="props" :inputData="getInputData(props.id)"
+            <CurveNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                        @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-multiCurves="props">
-            <MultiCurvesNode v-bind="props" :inputData="getInputData(props.id)"
+            <MultiCurvesNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                              @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-lineBar="props">
-            <LineBarNode v-bind="props" :inputData="getInputData(props.id)"
+            <LineBarNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                          @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-bar="props">
-            <BarNode v-bind="props" :inputData="getInputData(props.id)"
+            <BarNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                      @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-backgroundBar="props">
-            <BackgroundBarNode v-bind="props" :inputData="getInputData(props.id)"
+            <BackgroundBarNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                                @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-multiBars="props">
-            <MultiBarsNode v-bind="props" :inputData="getInputData(props.id)"
+            <MultiBarsNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                            @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-pie="props">
-            <PieNode v-bind="props" :inputData="getInputData(props.id)"
+            <PieNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                      @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-annular="props">
-            <AnnularNode v-bind="props" :inputData="getInputData(props.id)"
+            <AnnularNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                          @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-radar="props">
-            <RadarNode v-bind="props" :inputData="getInputData(props.id)"
+            <RadarNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                        @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-dashboard="props">
-            <DashboardNode v-bind="props" :inputData="getInputData(props.id)"
+            <DashboardNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                            @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-props="props">
-            <NightingaleRoseDiagramNode v-bind="props"
+            <NightingaleRoseDiagramNode :colors="pageSettingForm.colors" v-bind="props"
                                         :inputData="getInputData(props.id)"
                                         @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-carousel="props">
-            <CarouselNode v-bind="props" :inputData="getInputData(props.id)"
+            <CarouselNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                           @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-data="props">
-            <DataNode v-bind="props" :inputData="getInputData(props.id)"
+            <DataNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                       @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-text="props">
-            <TextNode v-bind="props" :inputData="getInputData(props.id)"
+            <TextNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                       @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-img="imgNodeProps">
-            <ImgNode v-bind="imgNodeProps" :inputData="getInputData(imgNodeProps.id)"
+            <ImgNode :colors="pageSettingForm.colors" v-bind="imgNodeProps" :inputData="getInputData(imgNodeProps.id)"
                      @resize="(e) => handleResizeStop(e, imgNodeProps)" />
           </template>
 
           <template #node-icon="iconNodeProps">
-            <IconNode v-bind="iconNodeProps" :inputData="getInputData(iconNodeProps.id)"
+            <IconNode :colors="pageSettingForm.colors" v-bind="iconNodeProps"
+                      :inputData="getInputData(iconNodeProps.id)"
                       @resize="(e) => handleResizeStop(e, iconNodeProps)" />
           </template>
 
           <template #node-video="videoNodeProps">
-            <VideoNode v-bind="videoNodeProps" :inputData="getInputData(videoNodeProps.id)"
+            <VideoNode :colors="pageSettingForm.colors" v-bind="videoNodeProps"
+                       :inputData="getInputData(videoNodeProps.id)"
                        @resize="(e) => handleResizeStop(e, videoNodeProps)" />
           </template>
 
           <template #node-timeline="timelineNodeProps">
-            <TimelineNode v-bind="timelineNodeProps" :inputData="getInputData(timelineNodeProps.id)"
+            <TimelineNode :colors="pageSettingForm.colors" v-bind="timelineNodeProps"
+                          :inputData="getInputData(timelineNodeProps.id)"
                           @resize="(e) => handleResizeStop(e, timelineNodeProps)" />
           </template>
 
           <template #node-digitalFlop="digitalFlopNodeProps">
-            <DigitalFlopNode v-bind="digitalFlopNodeProps" :inputData="getInputData(digitalFlopNodeProps.id)"
+            <DigitalFlopNode :colors="pageSettingForm.colors" v-bind="digitalFlopNodeProps"
+                             :inputData="getInputData(digitalFlopNodeProps.id)"
                              @resize="(e) => handleResizeStop(e, digitalFlopNodeProps)" />
           </template>
 
           <template #node-inputNode="inputNodeProps">
-            <InputNode v-bind="inputNodeProps" :inputData="getInputData(inputNodeProps.id)"
+            <InputNode :colors="pageSettingForm.colors" v-bind="inputNodeProps"
+                       :inputData="getInputData(inputNodeProps.id)"
                        @resize="(e) => handleResizeStop(e, inputNodeProps)" />
           </template>
 
           <template #node-buttonNode="buttonNodeProps">
-            <ButtonNode v-bind="buttonNodeProps" :inputData="getInputData(buttonNodeProps.id)"
+            <ButtonNode :colors="pageSettingForm.colors" v-bind="buttonNodeProps"
+                        :inputData="getInputData(buttonNodeProps.id)"
                         @resize="(e) => handleResizeStop(e, buttonNodeProps)" />
           </template>
 
           <template #node-selectNode="selectNodeProps">
-            <SelectNode v-bind="selectNodeProps" :inputData="getInputData(selectNodeProps.id)"
+            <SelectNode :colors="pageSettingForm.colors" v-bind="selectNodeProps"
+                        :inputData="getInputData(selectNodeProps.id)"
                         @resize="(e) => handleResizeStop(e, selectNodeProps)" />
           </template>
 
           <template #node-time="props">
-            <TimeNode v-bind="props" :inputData="getInputData(props.id)"
+            <TimeNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                       @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-map="mapNodeProps">
-            <MapNode v-bind="mapNodeProps" :inputData="getInputData(mapNodeProps.id)"
+            <MapNode :colors="pageSettingForm.colors" v-bind="mapNodeProps" :inputData="getInputData(mapNodeProps.id)"
                      @resize="(e) => handleResizeStop(e, mapNodeProps)" />
           </template>
 
           <template #node-staticData="staticDataNodeProps">
-            <StaticDataNode v-bind="staticDataNodeProps" :inputData="getInputData(staticDataNodeProps.id)"
+            <StaticDataNode :colors="pageSettingForm.colors" v-bind="staticDataNodeProps" :inputData="getInputData(staticDataNodeProps.id)"
                             @resize="(e) => handleResizeStop(e, staticDataNodeProps)" />
           </template>
 
           <template #node-table="tableNodeProps">
-            <TableNode v-bind="tableNodeProps" :inputData="getInputData(tableNodeProps.id)"
+            <TableNode :colors="pageSettingForm.colors" v-bind="tableNodeProps" :inputData="getInputData(tableNodeProps.id)"
                        @resize="(e) => handleResizeStop(e, tableNodeProps)" />
           </template>
 
           <template #node-scrollTable="scrollTableNodeProps">
-            <ScrollTableNode v-bind="scrollTableNodeProps" :inputData="getInputData(scrollTableNodeProps.id)"
+            <ScrollTableNode :colors="pageSettingForm.colors" v-bind="scrollTableNodeProps" :inputData="getInputData(scrollTableNodeProps.id)"
                              @resize="(e) => handleResizeStop(e, scrollTableNodeProps)" />
           </template>
 
           <template #node-background="backgroundNodeProps">
-            <BackgroundNode v-bind="backgroundNodeProps" :inputData="getInputData(backgroundNodeProps.id)"
+            <BackgroundNode :colors="pageSettingForm.colors" v-bind="backgroundNodeProps" :inputData="getInputData(backgroundNodeProps.id)"
                             @resize="(e) => handleResizeStop(e, backgroundNodeProps)" />
           </template>
 
           <template #node-pagination="paginationNodeProps">
-            <PaginationNode v-bind="paginationNodeProps" :inputData="getInputData(paginationNodeProps.id)"
+            <PaginationNode  :colors="pageSettingForm.colors" v-bind="paginationNodeProps" :inputData="getInputData(paginationNodeProps.id)"
                             @resize="(e) => handleResizeStop(e, paginationNodeProps)" />
           </template>
 
           <template #node-menu="props">
-            <MenuNode v-bind="props" :inputData="getInputData(props.id)"
+            <MenuNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                       @resize="(e) => handleResizeStop(e, props)" />
           </template>
+
           <template #node-tree="props">
-            <TreeNode v-bind="props" :inputData="getInputData(props.id)"
+            <TreeNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
                       @resize="(e) => handleResizeStop(e, props)" />
           </template>
         </VueFlow>
@@ -690,7 +700,7 @@
     </div>
     <div class="right">
       <div class="tabs">
-        <div v-if="Object.keys(nodeDataForm).length>0" class="tab" :class="{active : tabs === 0}"
+        <div class="tab" :class="{active : tabs === 0}"
              @click="selectTabs(0)">
           属性设置
         </div>
@@ -700,27 +710,61 @@
         </div>
       </div>
       <div class="tabItems">
-        <div class="tabItem" v-if="Object.keys(nodeDataForm).length>0 && tabs === 0">
+        <div class="tabItem" v-if=" tabs === 0">
           <el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
-            <el-form-item label="组件名称">
+            <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 label="x">
+            <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 label="y">
+            <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 label="宽度">
+            <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 label="高度">
+            <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">
+                <el-color-picker style="margin-right: 8px;"
+                                 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 :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">
@@ -1059,6 +1103,22 @@
                     />
                   </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>
@@ -1078,7 +1138,8 @@
                     :headers="headers"
                     :on-success="(res)=>nodeAttrForm.backgroundImage = res.data.url"
                   >
-                    <img style="width: 100px" v-if="nodeAttrForm.backgroundImage" :src="nodeAttrForm.backgroundImage" class="avatar"
+                    <img style="width: 100px" v-if="nodeAttrForm.backgroundImage" :src="nodeAttrForm.backgroundImage"
+                         class="avatar"
                          alt="" />
                     <el-icon v-else class="avatar-uploader-icon">
                       <Plus />
@@ -1274,7 +1335,6 @@
                 <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">
@@ -1618,7 +1678,7 @@
       </template>
     </el-dialog>
     <el-dialog v-model="treeOptionsVisible" title="树设置" fullscreen>
-      <TreeOption :data="nodeAttrForm.treeOptions" :level="nodeAttrForm.level"/>
+      <TreeOption :data="nodeAttrForm.treeOptions" :level="nodeAttrForm.level" />
     </el-dialog>
   </div>
 </template>
@@ -1697,7 +1757,7 @@ import InputNode from '@/views/boardGenerate/nodes/form/inputNode.vue';
 import ButtonNode from '@/views/boardGenerate/nodes/form/buttonNode.vue';
 import SelectNode from '@/views/boardGenerate/nodes/form/selectNode.vue';
 
-import MenuNode from './nodes/advancedComponents/menuNode.vue'
+import MenuNode from './nodes/advancedComponents/menuNode.vue';
 import TreeNode from './nodes/advancedComponents/tree/index.vue';
 import TreeOption from './nodes/advancedComponents/tree/option.vue';
 
@@ -1845,6 +1905,41 @@ onMounted(async () => {
     });
 });
 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);
@@ -1873,7 +1968,6 @@ const customData = ref([]);
 const cellOption = ref({});
 const boardData = ref({});
 const pageData = ref({});
-const customDataForm = ref({});
 const nodeAttrForm = ref({});
 const nodeDataForm = ref({});
 const pageSettingForm = ref({});
@@ -1896,24 +1990,22 @@ const logEvent = async (eventname, event) => {
     case 'paneClick':
       nodeAttrForm.value = {};
       nodeDataForm.value = {};
-      customDataForm.value = {};
+      tabs.value = 0
       break;
     case 'click':
       nodeAttrForm.value = event.node.data.options;
       nodeDataForm.value = event.node;
-      customDataForm.value = event.node.data.customData;
       key.value += 1;
       break;
     case 'nodeDrag':
       if (event.nodes.length === 1) {
         nodeAttrForm.value = event.node.data.options;
         nodeDataForm.value = event.node;
-        customDataForm.value = event.node.data.customData;
         key.value += 1;
       } else {
         nodeAttrForm.value = {};
-        nodeDataForm.value = {};
-        customDataForm.value = {};
+        tabs,value = 0
+        nodeDataForm.value = { };
       }
       break;
     case 'contextmenu':
@@ -2133,7 +2225,6 @@ const pitchOnNode = (e) => {
   nodeAttrForm.value = e.data.options;
   key.value += 1;
   nodeDataForm.value = e;
-  customDataForm.value = e.data.customData;
 };
 
 const cellClick = (e) => {

src/views/boardGenerate/nodes/board/multiLinesNode.vue

@@ -1,7 +1,8 @@
 <template>
   <div
     :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
-    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
+    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
+                 v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
          :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
@@ -27,6 +28,11 @@ const props = defineProps({
     required: false,
     default: 1
   },
+  colors: {
+    type: Array,
+    required: false
+  },
+
   isView: {
     type: Boolean,
     required: false
@@ -121,8 +127,10 @@ const getOption = () => {
       extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
     },
     grid: {
-      top: '30%',
-      bottom: '10%'
+      top: props.data?.options?.gridTop + '%' || '20%',
+      left: props.data?.options?.gridLeft + '%' || '20%',
+      bottom: props.data?.options?.gridBottom + '%' || '20%',
+      right: props.data?.options?.gridRight + '%' || '20%'
     },
     xAxis: [
       {
@@ -197,7 +205,7 @@ const getOption = () => {
         }
       }
     },
-    series: props.data.options?.yNames.map((i,k) => {
+    series: props.data.options?.yNames.map((i, k) => {
       return {
         type: 'line',
         showSymbol: props.data?.options?.lineSymbolShow || false,
@@ -207,15 +215,15 @@ const getOption = () => {
         yAxisIndex: 0,
         lineStyle: {
           width: 1,
-          color: props.data?.options?.seriesColor || colorList.value[k % colorList.length],
+          color: props.colors[k % colorList.length],
           shadowColor: 'rgba(158,135,255, 0.3)',
           shadowBlur: 10,
           shadowOffsetY: 20
         },
         itemStyle: {
           normal: {
-            color: colorList.value[k % colorList.value.length],
-            borderColor: colorList.value[k % colorList.value.length],
+            color: props.colors[k % props.colors.length],
+            borderColor: props.colors[k % props.colors.length]
           }
         }
       };
@@ -246,6 +254,11 @@ onMounted(() => {
   });
   chart && chart.setOption(getOption(), true);
 });
+watch(() => [JSON.parse(JSON.stringify(props.colors))], (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    chart && chart.setOption(getOption(), true);
+  }
+}, { deep: true, immediate: true });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
     chart && chart.setOption(getOption(), true);

src/views/boardGenerate/nodes/board/radarNode.vue

@@ -60,7 +60,15 @@ const chartRef = ref();
 let chart = null;
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
 const getOption = () => {
+  console.log(props.inputData?.x1);
   const chartOption = {
+
+    grid: {
+      top: props.data?.options?.gridTop + '%' || '20%',
+      left: props.data?.options?.gridLeft + '%' || '20%',
+      bottom: props.data?.options?.gridBottom + '%' || '20%',
+      right: props.data?.options?.gridRight + '%' || '20%'
+    },
     title: {
       text: props.data.options.title || '',
       textStyle: {
@@ -181,7 +189,7 @@ const getOption = () => {
   let yData = [props.inputData?.y1 || []];
   console.log(chartOption);
   let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
-  let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
+  let source = [['product', ...[props.data.options?.yNames?.[0] || ' ']]];
   Array(length).fill(0).forEach((_, i) => {
     let item = [];
     xData.forEach(e => {

src/views/boardGenerate/nodes/form/scrollTableNode.vue

@@ -30,6 +30,7 @@
         v-if="scrollShow"
         style="overflow: hidden"
         :style="{ height: `calc(100% - ${props.data.options.thHeight || '0px'})` }"
+        v-autoScroll
       >
         <div
           :style="{
@@ -50,8 +51,8 @@
             }"
             v-for="(i, k) in props.data.options.tableOptions"
           >
-            <div style="width:100%;height:100%;overflow: hidden;position: relative;">
-              <span v-if="i.type === '文本'" class="lrScroll">
+            <div style="white-space: nowrap;width:100%;height:100%;overflow: hidden;position: relative;">
+              <span v-if="i.type === '文本'" id="autoScroll">
                 {{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}
               </span>
 
@@ -75,7 +76,8 @@
                 fit="contain"
               />
 
-              <span class="lrScroll" v-else>{{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}</span>
+              <span id="autoScroll"
+                    v-else>{{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}</span>
             </div>
           </div>
         </div>

src/views/boardGenerate/nodes/form/textNode.vue

@@ -7,7 +7,7 @@
     <div class="custom-node"
          :style="{textAlign:props.data.options.align,width:props.dimensions.width*props.ratioWidth+'px',lineHeight:props.dimensions.height*props.ratioHeight+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <span
-        :style="{color:props.data.options.color,fontSize:props.dimensions.height*props.ratioHeight+'px'}">{{ props.inputData?.text || props.data.options.text
+        :style="{whiteSpace:props.data.options.whiteSpace,color:props.data.options.color,fontSize:props.dimensions.height*props.ratioHeight+'px'}">{{ props.inputData?.text || props.data.options.text
         }}</span>
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />

src/views/boardGenerate/tool.js

@@ -9,6 +9,7 @@ const getId = (type) => {
 
 
 const getOption = (e) => {
+  let res = {}
   if (e === 'line' || e === 'multiLines') {
     return {
       title: '',
@@ -69,7 +70,6 @@ const getOption = (e) => {
       gridLeft: 5,
       gridBottom: 10,
       gridRight: 10,
-      boundaryGap: true,
       xName: '',
       xNameLocation: 'end',
       xAxisLineShow: true,
@@ -118,7 +118,6 @@ const getOption = (e) => {
       gridLeft: 5,
       gridBottom: 10,
       gridRight: 10,
-      boundaryGap: true,
       xName: '',
       xNameLocation: 'end',
       xAxisLineShow: true,
@@ -268,10 +267,6 @@ const getOption = (e) => {
       title: '',
       seriesColor: '#9E87FF',
       yNames: [],
-      gridTop: 30,
-      gridLeft: 5,
-      gridBottom: 10,
-      gridRight: 10,
       tooltip: true,
       legend: true,
       radarCenter: [30, 50],
@@ -317,11 +312,11 @@ const getOption = (e) => {
   } else if (e === 'time') {
     return { startTimeId: 'startTime', endTimeId: 'endTime', defaultTime: [], format: '' };
   } else if (e === 'text') {
-    return { text: '文字', align: '', color: '#fff' };
+    return { text: '文字', align: '', color: '#fff',whiteSpace:'nowrap' };
   } else if (e === 'img') {
     return { imgSrc: '' };
   } else if (e === 'icon') {
-    return { icon: '', iconSrc: '' };
+    return { icon: 'Tools', iconSrc: '' };
   } else if (e === 'video') {
     return { videoSrc: '' };
   } else if (e === 'timeline') {