修改看板

package.json

@@ -37,7 +37,7 @@
     "didi": "9.0.2",
     "echarts": "5.5.0",
     "echarts-liquidfill": "^3.1.0",
-    "element-plus": "2.9.1",
+    "element-plus": "2.9.11",
     "file-saver": "2.0.5",
     "fuse.js": "7.0.0",
     "highlight.js": "11.9.0",

src/views/boardGenerate/index1.vue

@@ -481,6 +481,47 @@
         </div>
         <div class="tabItem" v-if="Object.keys(nodeAttrForm).length>0 && tabs === 1">
           <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
+            <el-collapse v-model="collapseActiveName" accordion expand-icon-position="left">
+              <el-collapse-item title="Consistency" name="1">
+                <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-collapse-item>
+              <el-collapse-item title="Feedback" name="2">
+                <div>
+                  Operation feedback: enable the users to clearly perceive their
+                  operations by style updates and interactive effects;
+                </div>
+                <div>
+                  Visual feedback: reflect current state by updating or rearranging
+                  elements of the page.
+                </div>
+              </el-collapse-item>
+              <el-collapse-item title="Efficiency" name="3">
+                <div>
+                  Simplify the process: keep operating process simple and intuitive;
+                </div>
+                <div>
+                  Definite and clear: enunciate your intentions clearly so that the
+                  users can quickly understand and make decisions;
+                </div>
+                <div>
+                  Easy to identify: the interface should be straightforward, which helps
+                  the users to identify and frees them from memorizing and recalling.
+                </div>
+              </el-collapse-item>
+              <el-collapse-item title="Controllability" name="4">
+                <div>
+                  Decision making: giving advices about operations is acceptable, but do
+                  not make decisions for the users;
+                </div>
+                <div>
+                  Controlled consequences: users should be granted the freedom to
+                  operate, including canceling, aborting or terminating current
+                  operation.
+                </div>
+              </el-collapse-item>
+            </el-collapse>
             <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>
@@ -490,9 +531,6 @@
             <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="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
-              <el-input v-model="nodeAttrForm.xName" style="width: 100%" />
-            </el-form-item>
             <el-form-item label="y轴名称" v-if="Object.keys(nodeAttrForm).includes('yName')">
               <el-input v-model="nodeAttrForm.yName" style="width: 100%" />
             </el-form-item>
@@ -613,7 +651,13 @@
                 <template #reference>
                   <el-input readonly v-model="nodeAttrForm.icon" style="width: 100%" placeholder="选择图标">
                     <template #prepend>
-                      <el-button :icon="icon[nodeAttrForm.icon]" />
+                      <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>
@@ -665,12 +709,13 @@
               <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 plain @click="swiperOptionsVisible = true">
+              <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%"
               >
@@ -688,12 +733,12 @@
               <el-input-tag v-model="nodeAttrForm.carouselImages" placeholder="回车确认" />
             </el-form-item>
             <el-form-item label="表格列设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
-              <el-button plain @click="tableOptionsVisible = true">
+              <el-button class="optionsBtn" plain @click="tableOptionsVisible = true">
                 配置表格
               </el-button>
             </el-form-item>
             <el-form-item label="表格动画设置" v-if="Object.keys(nodeAttrForm).includes('tableClassOption')">
-              <el-button plain @click="tableClassOptionsVisible = true">
+              <el-button class="optionsBtn" plain @click="tableClassOptionsVisible = true">
                 配置动画
               </el-button>
             </el-form-item>
@@ -742,7 +787,6 @@
         </div>
       </div>
     </div>
-
     <el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
       <el-form :model="pageSettingForm">
         <el-form-item label="页面大小" label-width="80px">
@@ -923,7 +967,16 @@
 <script setup>
 
 import FlowRuler from './FlowRuler.vue';
-import { ArrowDown, View, DocumentChecked } from '@element-plus/icons-vue';
+import {
+  ArrowDown,
+  View,
+  DocumentChecked,
+  Close,
+  Plus,
+  Setting,
+  StarFilled,
+  Delete
+} from '@element-plus/icons-vue';
 import * as icon from '@element-plus/icons-vue';
 import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
 import tool, { options } from '@/views/boardGenerate/tool.js';
@@ -1056,6 +1109,7 @@ onMounted(async () => {
 });
 const icons = ref([]);
 const selectIconInput = ref('');
+const collapseActiveName = ref('1');
 const loading = ref(false);
 const pageSettingVisible = ref(false);
 const tableOptionsVisible = ref(false);
@@ -1396,6 +1450,7 @@ const pitchOnNode = (e) => {
       &::-webkit-scrollbar {
         display: none;
       }
+
       .level {
 
         display: flex;
@@ -1483,7 +1538,104 @@ const pitchOnNode = (e) => {
       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;
+        }
+      }
     }
+
   }
 }
 

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

@@ -187,45 +187,47 @@ const defaultOption = {
   ]
 };
 const getOption = () => {
+  const options = props?.data?.options || {};
+  const data = props?.inputData || { x1: [], y1: [] };
   const chartOption = {
       title: {
-        text: props.data.options.title || ''
+        text: options.title || ''
       },
       legend: {
-        show: props.data?.options?.legend || false
+        show: options?.legend || false
       },
       tooltip: {
-        show: props.data?.options?.tooltip || false
+        show: options?.tooltip || false
       },
       grid: {
-        top: props.data?.options?.gridTop + '%' || '20%',
+        top: options?.gridTop + '%' || '20%',
-        left: props.data?.options?.gridLeft + '%' || '20%',
+        left: options?.gridLeft + '%' || '20%',
-        bottom: props.data?.options?.gridBottom + '%' || '20%',
+        bottom: options?.gridBottom + '%' || '20%',
-        right: props.data?.options?.gridRight + '%' || '20%'
+        right: options?.gridRight + '%' || '20%'
       },
       xAxis: [
         {
-          name: props.data?.options?.xName || ''
+          name: options?.xName || ''
         }
       ],
       yAxis: [
         {
-          name: props.data?.options?.yName || ''
+          name: options?.yName || ''
         }
       ],
       series: [
         {
           backgroundStyle: {
-            color: props.data?.options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
+            color: options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
           }
         }
       ]
     }
   ;
-  let xData = [props.inputData?.x1 || []];
+  let xData = [data?.x1 || []];
-  let yData = [props.inputData?.y1 || []];
+  let yData = [data?.y1 || []];
   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', ...[options?.yNames?.[0] || '']]];
   Array(length).fill(0).forEach((_, i) => {
     let item = [];
     xData.forEach(e => {