From f818aa8fe7a227e5dfed96d1999c9ccacf032851 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 3 Dec 2024 16:28:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/markdown/MdEditorMagnify.vue   |   2 +-
 ui/src/styles/md-editor.scss                  |   3 +
 ui/src/workflow/common/NodeContainer.vue      |   2 +-
 ui/src/workflow/nodes/form-node/index.vue     | 223 +++++++++---------
 4 files changed, 116 insertions(+), 114 deletions(-)

diff --git a/ui/src/components/markdown/MdEditorMagnify.vue b/ui/src/components/markdown/MdEditorMagnify.vue
index cf12d42dc..cfd4d2f88 100644
--- a/ui/src/components/markdown/MdEditorMagnify.vue
+++ b/ui/src/components/markdown/MdEditorMagnify.vue
@@ -9,7 +9,7 @@
   >
     <template #defFooters>
       <el-button text type="info" @click="openDialog">
-        <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
+        <AppIcon class="color-secondary"  iconName="app-magnify" style="font-size: 16px"></AppIcon>
       </el-button>
     </template>
   </MdEditor>
diff --git a/ui/src/styles/md-editor.scss b/ui/src/styles/md-editor.scss
index ce87022e1..06a6ab887 100644
--- a/ui/src/styles/md-editor.scss
+++ b/ui/src/styles/md-editor.scss
@@ -1,3 +1,6 @@
+.md-editor {
+  font-weight: 400;
+}
 .md-editor-preview {
   padding: 0;
   margin: 0;
diff --git a/ui/src/workflow/common/NodeContainer.vue b/ui/src/workflow/common/NodeContainer.vue
index ac83fc4d7..7679ea3f7 100644
--- a/ui/src/workflow/common/NodeContainer.vue
+++ b/ui/src/workflow/common/NodeContainer.vue
@@ -33,7 +33,7 @@
 
           <div @mousemove.stop @mousedown.stop @keydown.stop @click.stop>
             <el-button text @click="showNode = !showNode" class="mr-4">
-              <el-icon class="arrow-icon" :class="showNode ? 'rotate-180' : ''"
+              <el-icon class="arrow-icon color-secondary" :class="showNode ? 'rotate-180' : ''"
                 ><ArrowDownBold />
               </el-icon>
             </el-button>
diff --git a/ui/src/workflow/nodes/form-node/index.vue b/ui/src/workflow/nodes/form-node/index.vue
index c2c741de7..7adaf57ff 100644
--- a/ui/src/workflow/nodes/form-node/index.vue
+++ b/ui/src/workflow/nodes/form-node/index.vue
@@ -1,122 +1,121 @@
 <template>
   <NodeContainer :nodeModel="nodeModel">
-    <el-form
-      @submit.prevent
-      :model="form_data"
-      label-position="top"
-      require-asterisk-position="right"
-      label-width="auto"
-      ref="formNodeFormRef"
-      hide-required-asterisk
-    >
-      <el-form-item
-        label="表单输出内容"
-        prop="form_content_format"
-        :rules="{
-          required: true,
-          message: '请表单输出内容',
-          trigger: 'blur'
-        }"
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="formNodeFormRef"
+        hide-required-asterisk
       >
-        <template #label>
-          <div class="flex align-center">
-            <div class="mr-4">
-              <span>表单输出内容<span class="danger">*</span></span>
-            </div>
-            <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
-              <template #content>
-                设置执行该节点输出的内容，{{ '{ form }' }}为表单的占位符。
-              </template>
-              <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
-            </el-tooltip>
-          </div>
-        </template>
-        <MdEditorMagnify
-          title="表单输出内容"
-          v-model="form_data.form_content_format"
-          style="height: 150px"
-          @submitDialog="submitDialog"
-        />
-      </el-form-item>
-      <el-form-item label="表单配置" @click.prevent>
-        <template #label>
-          <div class="flex-between mb-16">
-            <h5 class="lighter">{{ '表单配置' }}</h5>
-            <el-button link type="primary" @click="openAddFormCollect()">
-              <el-icon class="mr-4">
-                <Plus />
-              </el-icon>
-              添加
-            </el-button>
-          </div></template
+        <el-form-item
+          label="表单输出内容"
+          prop="form_content_format"
+          :rules="{
+            required: true,
+            message: '请表单输出内容',
+            trigger: 'blur'
+          }"
         >
-
-        <el-table
-          v-if="form_data.form_field_list.length > 0"
-          :data="form_data.form_field_list"
-          class="mb-16"
-        >
-          <el-table-column prop="field" label="参数">
-            <template #default="{ row }">
-              <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="label" label="显示名称">
-            <template #default="{ row }">
-              <span v-if="row.label && row.label.input_type === 'TooltipLabel'">
-                <span :title="row.label.label" class="ellipsis-1">
-                  {{ row.label.label }}
-                </span>
-              </span>
-              <span v-else>
-                <span :title="row.label" class="ellipsis-1">
-                  {{ row.label }}
-                </span></span
-              >
-            </template>
-          </el-table-column>
-
-          <el-table-column label="组件类型" width="110px">
-            <template #default="{ row }">
-              <el-tag type="info" class="info-tag">{{
-                input_type_list.find((item) => item.value === row.input_type)?.label
-              }}</el-tag>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="default_value" label="默认值">
-            <template #default="{ row }">
-              <span :title="row.default_value" class="ellipsis-1">{{ row.default_value }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="必填">
-            <template #default="{ row }">
-              <div @click.stop>
-                <el-switch disabled size="small" v-model="row.required" />
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>表单输出内容<span class="danger">*</span></span>
               </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="left" width="80">
-            <template #default="{ row, $index }">
-              <span class="mr-4">
-                <el-tooltip effect="dark" content="修改" placement="top">
-                  <el-button type="primary" text @click.stop="openEditFormCollect(row, $index)">
-                    <el-icon><EditPen /></el-icon>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  设置执行该节点输出的内容，{{ '{ form }' }}为表单的占位符。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            title="表单输出内容"
+            v-model="form_data.form_content_format"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+        </el-form-item>
+        <el-form-item label="表单配置" @click.prevent>
+          <template #label>
+            <div class="flex-between">
+              <h5 class="lighter">{{ '表单配置' }}</h5>
+              <el-button link type="primary" @click="openAddFormCollect()">
+                <el-icon class="mr-4">
+                  <Plus />
+                </el-icon>
+                添加
+              </el-button>
+            </div></template
+          >
+
+          <el-table class="border" v-if="form_data.form_field_list.length > 0" :data="form_data.form_field_list">
+            <el-table-column prop="field" label="参数">
+              <template #default="{ row }">
+                <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="label" label="显示名称">
+              <template #default="{ row }">
+                <span v-if="row.label && row.label.input_type === 'TooltipLabel'">
+                  <span :title="row.label.label" class="ellipsis-1">
+                    {{ row.label.label }}
+                  </span>
+                </span>
+                <span v-else>
+                  <span :title="row.label" class="ellipsis-1">
+                    {{ row.label }}
+                  </span></span
+                >
+              </template>
+            </el-table-column>
+
+            <el-table-column label="组件类型" width="110px">
+              <template #default="{ row }">
+                <el-tag type="info" class="info-tag">{{
+                  input_type_list.find((item) => item.value === row.input_type)?.label
+                }}</el-tag>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="default_value" label="默认值">
+              <template #default="{ row }">
+                <span :title="row.default_value" class="ellipsis-1">{{ row.default_value }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="必填">
+              <template #default="{ row }">
+                <div @click.stop>
+                  <el-switch disabled size="small" v-model="row.required" />
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="left" width="80">
+              <template #default="{ row, $index }">
+                <span class="mr-4">
+                  <el-tooltip effect="dark" content="修改" placement="top">
+                    <el-button type="primary" text @click.stop="openEditFormCollect(row, $index)">
+                      <el-icon><EditPen /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+                <el-tooltip effect="dark" content="删除" placement="top">
+                  <el-button type="primary" text @click="deleteField(row)">
+                    <el-icon>
+                      <Delete />
+                    </el-icon>
                   </el-button>
                 </el-tooltip>
-              </span>
-              <el-tooltip effect="dark" content="删除" placement="top">
-                <el-button type="primary" text @click="deleteField(row)">
-                  <el-icon>
-                    <Delete />
-                  </el-icon>
-                </el-button>
-              </el-tooltip>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-form-item>
-    </el-form>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+    </el-card>
     <AddFormCollect ref="addFormCollectRef" :addFormField="addFormField"></AddFormCollect>
     <EditFormCollect ref="editFormCollectRef" :editFormField="editFormField"></EditFormCollect>
   </NodeContainer>