feat: node

2025-12-26 01:33:05 +00:00 · 2025-07-01 16:25:29 +08:00 · 2025-07-01 16:25:29 +08:00 · 2dc3d91a6c
parent cecd3f90c6
commit 2dc3d91a6c
35 changed files with 127 additions and 110 deletions
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@ -431,6 +431,10 @@ h5 {
  background: var(--app-layout-bg-color);
 }

+.white-bg {
+  background: #ffffff;
+}
+
 /*
  标题前带竖线样式
 */
@ -495,6 +499,14 @@ h5 {
  line-height: 25px;
 }

+/*
+  card 无边框无阴影 灰色背景
+*/
+.card-never {
+  background: var(--app-layout-bg-color);
+  border: none !important;
+}
+
 /*
  内容部分 自适应高度
 */
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@ -248,3 +248,12 @@
 .el-divider__text {
  background: var(--app-layout-bg-color);
 }
+
+// el-cascader
+.el-cascader-node {
+  padding-left: 2px;
+}
+.el-cascader-node__prefix {
+  right: 10px;
+  left: auto;
+}
--- a/ui/src/styles/md-editor.scss
+++ b/ui/src/styles/md-editor.scss
@ -1,6 +1,5 @@
 .md-editor {
  font-weight: 400;
-  background: none !important;
 }

 .md-editor-preview {
--- a/ui/src/views/application/component/ReasoningParamSettingDialog.vue
+++ b/ui/src/views/application/component/ReasoningParamSettingDialog.vue
@ -9,7 +9,7 @@
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
-    <el-form label-position="top" ref="paramFormRef" :model="form" class="p-12-16">
+    <el-form label-position="top" ref="paramFormRef" :model="form">
      <el-text type="info" class="color-secondary">{{
        $t('views.application.form.reasoningContent.tooltip')
      }}</el-text>
--- a/ui/src/views/model/component/CreateModelDialog.vue
+++ b/ui/src/views/model/component/CreateModelDialog.vue
@ -95,7 +95,7 @@
                <div class="flex align-center" style="display: inline-flex">
                  <div class="mr-4">
                    <span>{{ $t('views.model.modelForm.base_model.label') }} </span>
-                    <span class="danger ml-4">{{
+                    <span class="color-danger ml-4">{{
                      $t('views.model.modelForm.base_model.tooltip')
                    }}</span>
                  </div>
--- a/ui/src/views/model/component/EditModel.vue
+++ b/ui/src/views/model/component/EditModel.vue
@ -73,7 +73,7 @@
            <div class="flex align-center" style="display: inline-flex">
              <div class="mr-4">
                <span>{{ $t('views.model.modelForm.base_model.label') }} </span>
-                <span class="danger ml-4">{{
+                <span class="color-danger ml-4">{{
                  $t('views.model.modelForm.base_model.tooltip')
                }}</span>
              </div>
--- a/ui/src/views/model/component/ModelCard.vue
+++ b/ui/src/views/model/component/ModelCard.vue
@ -10,7 +10,7 @@
        </span>
        <span v-if="currentModel.status === 'ERROR'">
          <el-tooltip effect="dark" :content="errMessage" placement="top">
-            <el-icon class="danger ml-4" size="18"><Warning /></el-icon>
+            <el-icon class="color-danger ml-4" size="18"><Warning /></el-icon>
          </el-tooltip>
        </span>
        <span v-if="currentModel.status === 'PAUSE_DOWNLOAD'">
@ -19,7 +19,7 @@
            :content="`${$t('views.model.modelForm.base_model.label')}: ${props.model.model_name} ${$t('views.model.tip.downloadError')}`"
            placement="top"
          >
-            <el-icon class="danger ml-4" size="18"><Warning /></el-icon>
+            <el-icon class="color-danger ml-4" size="18"><Warning /></el-icon>
          </el-tooltip>
        </span>
      </div>
@ -179,7 +179,7 @@ const deleteModel = () => {
    `${t('views.model.delete.confirmMessage')}${props.model.name} ?`,
    {
      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
    },
  )
    .then(() => {
--- a/ui/src/views/paragraph/component/ParagraphCard.vue
+++ b/ui/src/views/paragraph/component/ParagraphCard.vue
@ -146,7 +146,7 @@ function deleteParagraph(row: any) {
    t('views.paragraph.delete.confirmMessage'),
    {
      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
    },
  )
    .then(() => {
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@ -230,7 +230,7 @@ function deleteMulParagraph() {
    t('views.paragraph.delete.confirmMessage'),
    {
      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
    },
  )
    .then(() => {
--- a/ui/src/views/problem/index.vue
+++ b/ui/src/views/problem/index.vue
@ -278,7 +278,7 @@ function deleteProblem(row: any) {
    `${t('views.problem.delete.confirmMessage1')} ${row.paragraph_count} ${t('views.problem.delete.confirmMessage2')}`,
    {
      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
    },
  )
    .then(() => {
--- a/ui/src/views/system-chat-user/chat-user/index.vue
+++ b/ui/src/views/system-chat-user/chat-user/index.vue
@ -352,7 +352,7 @@ function createUser() {
 function deleteUserManage(row: ChatUserItem) {
  MsgConfirm(`${t('views.userManage.delete.confirmTitle')}${row.nick_name} ?`, '', {
    confirmButtonText: t('common.confirm'),
-    confirmButtonClass: 'danger',
+    confirmButtonClass: 'color-danger',
  })
    .then(() => {
      loading.value = true
@ -394,7 +394,7 @@ async function getChatGroupList() {
 function handleBatchDelete() {
  MsgConfirm(t('views.chatUser.batchDeleteUser', { count: multipleSelection.value.length }), '', {
    confirmButtonText: t('common.confirm'),
-    confirmButtonClass: 'danger',
+    confirmButtonClass: 'color-danger',
  })
    .then(() => {
      userManageApi
--- a/ui/src/views/system-chat-user/group/index.vue
+++ b/ui/src/views/system-chat-user/group/index.vue
@ -290,7 +290,7 @@ function deleteGroup(item: ListItem) {
    t('views.chatUser.group.delete.confirmMessage'),
    {
      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
    },
  )
    .then(() => {
@ -376,7 +376,7 @@ function handleDeleteUser(item?: ChatUserGroupUserItem) {
    '',
    {
      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
    },
  )
    .then(() => {
--- a/ui/src/views/system/role/component/Member.vue
+++ b/ui/src/views/system/role/component/Member.vue
@ -162,7 +162,7 @@ function handleAdd() {
 function handleDelete(row: RoleMemberItem) {
  MsgConfirm(`${t('views.role.member.delete.confirmTitle')}${row.nick_name} ?`, '', {
    confirmButtonText: t('common.confirm'),
-    confirmButtonClass: 'danger',
+    confirmButtonClass: 'color-danger',
  })
    .then(() => {
      loading.value = true
@ -181,4 +181,4 @@ function handleDelete(row: RoleMemberItem) {
 .member-table :deep(.el-table__cell):nth-child(2) {
  border-right: 1px solid var(--el-table-border-color);
 }
-</style>
+</style>
--- a/ui/src/views/system/role/index.vue
+++ b/ui/src/views/system/role/index.vue
@ -269,7 +269,7 @@ function deleteRole(item: RoleItem) {
    t('views.role.delete.confirmMessage'),
    {
      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
    },
  )
    .then(() => {
--- a/ui/src/views/system/user-manage/index.vue
+++ b/ui/src/views/system/user-manage/index.vue
@ -265,7 +265,7 @@ function deleteUserManage(row: any) {
    t('views.userManage.delete.confirmMessage'),
    {
      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
    },
  )
    .then(() => {
--- a/ui/src/views/system/workspace/component/Member.vue
+++ b/ui/src/views/system/workspace/component/Member.vue
@ -158,7 +158,7 @@ function handleAdd() {
 function handleDelete(row: WorkspaceMemberItem) {
  MsgConfirm(`${t('views.workspace.member.delete.confirmTitle')}${row.nick_name} ?`, '', {
    confirmButtonText: t('common.confirm'),
-    confirmButtonClass: 'danger',
+    confirmButtonClass: 'color-danger',
  })
    .then(() => {
      loading.value = true
--- a/ui/src/views/system/workspace/index.vue
+++ b/ui/src/views/system/workspace/index.vue
@ -191,7 +191,7 @@ async function deleteWorkspace(item: WorkspaceItem) {
      t('views.workspace.delete.confirmContent'),
      {
        confirmButtonText: t('common.confirm'),
-        confirmButtonClass: 'danger',
+        confirmButtonClass: 'color-danger',
      },
    ).then(() => {
      WorkspaceApi.deleteWorkspace(item.id as string, loading).then(async () => {
--- a/ui/src/views/tool/ToolDebugDrawer.vue
+++ b/ui/src/views/tool/ToolDebugDrawer.vue
@ -54,7 +54,7 @@
                <template #label>
                  <div class="flex">
                    <span
-                      >{{ item.name }} <span class="danger" v-if="item.is_required">*</span></span
+                      >{{ item.name }} <span class="color-danger" v-if="item.is_required">*</span></span
                    >
                    <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
                  </div>
@ -96,7 +96,7 @@
        <p class="lighter mb-8">{{ $t('views.tool.form.debug.output') }}</p>

        <el-card
-          :class="isSuccess ? '' : 'danger'"
+          :class="isSuccess ? '' : 'color-danger'"
          class="pre-wrap"
          shadow="never"
          style="max-height: 350px; overflow: scroll"
--- a/ui/src/views/tool/component/ToolListContainer.vue
+++ b/ui/src/views/tool/component/ToolListContainer.vue
@ -415,7 +415,7 @@ async function changeState(row: any) {
      t('views.tool.disabled.confirmMessage'),
      {
        confirmButtonText: t('common.status.disable'),
-        confirmButtonClass: 'danger',
+        confirmButtonClass: 'color-danger',
      },
    ).then(() => {
      const obj = {
@ -498,7 +498,7 @@ function deleteTool(row: any) {
    {
      confirmButtonText: t('common.confirm'),
      cancelButtonText: t('common.cancel'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
    },
  )
    .then(() => {
--- a/ui/src/workflow/common/NodeContainer.vue
+++ b/ui/src/workflow/common/NodeContainer.vue
@ -275,7 +275,7 @@ const copyNode = () => {
 const deleteNode = () => {
  MsgConfirm(t('common.tip'), t('views.applicationWorkflow.delete.confirmTitle'), {
    confirmButtonText: t('common.confirm'),
-    confirmButtonClass: 'danger',
+    confirmButtonClass: 'color-danger',
  }).then(() => {
    props.nodeModel.graphModel.deleteNode(props.nodeModel.id)
  })
--- a/ui/src/workflow/common/shortcut.ts
+++ b/ui/src/workflow/common/shortcut.ts
@ -101,7 +101,7 @@ export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
    }
    MsgConfirm(t('common.tip'), t('views.applicationWorkflow.delete.confirmTitle'), {
      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger'
+      confirmButtonClass: 'color-danger'
    }).then(() => {
      if (!keyboardOptions?.enabled) return true
      if (graph.textEditElement) return true
--- a/ui/src/workflow/nodes/ai-chat-node/index.vue
+++ b/ui/src/workflow/nodes/ai-chat-node/index.vue
@ -25,7 +25,7 @@
              <div>
                <span
                  >{{ $t('views.application.form.aiModel.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>

@ -76,7 +76,7 @@
              <div class="mr-4">
                <span
                  >{{ $t('views.application.form.prompt.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
--- a/ui/src/workflow/nodes/form-node/index.vue
+++ b/ui/src/workflow/nodes/form-node/index.vue
@ -25,7 +25,7 @@
              <div class="mr-4">
                <span
                  >{{ $t('views.applicationWorkflow.nodes.formNode.formContent.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
--- a/ui/src/workflow/nodes/image-generate/index.vue
+++ b/ui/src/workflow/nodes/image-generate/index.vue
@ -25,7 +25,7 @@
              <div>
                <span
                  >{{ $t('views.applicationWorkflow.nodes.imageGenerateNode.model.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
              <el-button
@ -68,7 +68,7 @@
              <div class="mr-4">
                <span
                  >{{ $t('views.applicationWorkflow.nodes.imageGenerateNode.prompt.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
--- a/ui/src/workflow/nodes/image-understand/index.vue
+++ b/ui/src/workflow/nodes/image-understand/index.vue
@ -27,7 +27,7 @@
              <div>
                <span
                  >{{ t('views.applicationWorkflow.nodes.imageUnderstandNode.model.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
              <el-button
@ -78,7 +78,7 @@
              <div class="mr-4">
                <span
                  >{{ $t('views.application.form.prompt.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
@ -128,7 +128,7 @@
        >
          <template #label
            >{{ $t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label')
-            }}<span class="danger">*</span></template
+            }}<span class="color-danger">*</span></template
          >
          <NodeCascader
            ref="nodeCascaderRef"
--- a/ui/src/workflow/nodes/mcp-node/index.vue
+++ b/ui/src/workflow/nodes/mcp-node/index.vue
@ -82,7 +82,7 @@
              <div class="flex-between">
                <div>
                  <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
-                  <span v-if="item.required" class="danger">*</span>
+                  <span v-if="item.required" class="color-danger">*</span>
                </div>
                <el-select
                  :teleported="false"
@ -154,7 +154,7 @@
              <div class="flex-between">
                <div>
                  <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
-                  <span v-if="item.required" class="danger">*</span>
+                  <span v-if="item.required" class="color-danger">*</span>
                </div>
                <el-select
                  :teleported="false"
--- a/ui/src/workflow/nodes/question-node/index.vue
+++ b/ui/src/workflow/nodes/question-node/index.vue
@ -7,7 +7,6 @@
        :model="form_data"
        label-position="top"
        require-asterisk-position="right"
-        class="mb-24"
        label-width="auto"
        ref="questionNodeFormRef"
        hide-required-asterisk
@ -26,7 +25,7 @@
              <div>
                <span
                  >{{ $t('views.application.form.aiModel.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
              <el-button
@ -75,7 +74,7 @@
              <div class="mr-4">
                <span
                  >{{ $t('views.application.form.prompt.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
--- a/ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
+++ b/ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
@ -9,65 +9,62 @@
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
-    <div>
-      <el-scrollbar always>
-        <el-form label-position="top" ref="paramFormRef" :model="form">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item>
-                <template #label>
-                  <div class="flex align-center">
-                    <span class="mr-4"
-                      >Score {{ $t('views.applicationWorkflow.nodes.rerankerNode.higher') }}</span
-                    >
-                    <el-tooltip
-                      effect="dark"
-                      :content="$t('views.applicationWorkflow.nodes.rerankerNode.ScoreTooltip')"
-                      placement="right"
-                    >
-                      <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
-                    </el-tooltip>
-                  </div>
-                </template>
-                <el-input-number
-                  v-model="form.similarity"
-                  :min="0"
-                  :max="form.search_mode === 'blend' ? 2 : 1"
-                  :precision="3"
-                  :step="0.1"
-                  :value-on-clear="0"
-                  controls-position="right"
-                  class="w-full"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item :label="$t('views.application.dialog.topReferences')">
-                <el-input-number
-                  v-model="form.top_n"
-                  :min="1"
-                  :max="10000"
-                  :value-on-clear="1"
-                  controls-position="right"
-                  class="w-full"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-form-item :label="$t('views.application.dialog.maxCharacters')">
-            <el-slider
-              v-model="form.max_paragraph_char_number"
-              show-input
-              :show-input-controls="false"
-              :min="500"
-              :max="100000"
-              class="custom-slider"
+    <el-form label-position="top" ref="paramFormRef" :model="form">
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              <div class="flex align-center">
+                <span class="mr-4"
+                  >Score {{ $t('views.applicationWorkflow.nodes.rerankerNode.higher') }}</span
+                >
+                <el-tooltip
+                  effect="dark"
+                  :content="$t('views.applicationWorkflow.nodes.rerankerNode.ScoreTooltip')"
+                  placement="right"
+                >
+                  <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                </el-tooltip>
+              </div>
+            </template>
+            <el-input-number
+              v-model="form.similarity"
+              :min="0"
+              :max="form.search_mode === 'blend' ? 2 : 1"
+              :precision="3"
+              :step="0.1"
+              :value-on-clear="0"
+              controls-position="right"
+              class="w-full"
            />
          </el-form-item>
-        </el-form>
-      </el-scrollbar>
-    </div>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('views.application.dialog.topReferences')">
+            <el-input-number
+              v-model="form.top_n"
+              :min="1"
+              :max="10000"
+              :value-on-clear="1"
+              controls-position="right"
+              class="w-full"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item :label="$t('views.application.dialog.maxCharacters')">
+        <el-slider
+          v-model="form.max_paragraph_char_number"
+          show-input
+          :show-input-controls="false"
+          :min="500"
+          :max="100000"
+          class="custom-slider"
+        />
+      </el-form-item>
+    </el-form>
+
    <template #footer>
      <span class="dialog-footer">
        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
--- a/ui/src/workflow/nodes/reranker-node/index.vue
+++ b/ui/src/workflow/nodes/reranker-node/index.vue
@ -26,7 +26,7 @@
            <div class="flex-between">
              <span
                >{{ $t('views.applicationWorkflow.nodes.rerankerNode.rerankerContent.label')
-                }}<span class="danger">*</span></span
+                }}<span class="color-danger">*</span></span
              >
              <el-button @click="add_reranker_reference" link type="primary">
                <el-icon class="mr-4"><Plus /></el-icon>
@ -38,6 +38,7 @@
            style="margin-bottom: 8px"
            v-for="(reranker_reference, index) in form_data.reranker_reference_list"
            :key="index"
+            class="w-full"
          >
            <el-col :span="22">
              <el-form-item
@ -62,8 +63,8 @@
                />
              </el-form-item>
            </el-col>
-            <el-col :span="1">
-              <el-button link type="info" class="mt-4" @click="deleteCondition(index)">
+            <el-col :span="2">
+              <el-button link type="info" @click="deleteCondition(index)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </el-col>
@ -121,7 +122,7 @@
            <div class="flex-between">
              <span
                >{{ $t('views.applicationWorkflow.nodes.searchKnowledgeNode.searchQuestion.label')
-                }}<span class="danger">*</span></span
+                }}<span class="color-danger">*</span></span
              >
            </div>
          </template>
@ -148,7 +149,7 @@
            <div class="flex-between">
              <span
                >{{ $t('views.applicationWorkflow.nodes.rerankerNode.reranker_model.label')
-                }}<span class="danger">*</span></span
+                }}<span class="color-danger">*</span></span
              >
            </div>
          </template>
--- a/ui/src/workflow/nodes/search-knowledge-node/index.vue
+++ b/ui/src/workflow/nodes/search-knowledge-node/index.vue
@ -26,7 +26,7 @@
            <template v-for="(item, index) in form_data.knowledge_id_list" :key="index" v-else>
              <div class="flex-between border border-r-6 white-bg mb-4" style="padding: 5px 8px">
                <div class="flex align-center" style="line-height: 20px">
-                  <KnowledgeIcon :type="relatedObject(knowledgeList, item, 'id')?.type" />
+                  <KnowledgeIcon :type="relatedObject(knowledgeList, item, 'id')?.type" class="mr-8" :size="20"/>

                  <div class="ellipsis" :title="relatedObject(knowledgeList, item, 'id')?.name">
                    {{ relatedObject(knowledgeList, item, 'id')?.name }}
--- a/ui/src/workflow/nodes/speech-to-text-node/index.vue
+++ b/ui/src/workflow/nodes/speech-to-text-node/index.vue
@ -25,7 +25,7 @@
              <div>
                <span
                  >{{ $t('views.applicationWorkflow.nodes.speechToTextNode.stt_model.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
            </div>
@ -54,7 +54,7 @@
              <div>
                <span
                  >{{ $t('views.applicationWorkflow.nodes.speechToTextNode.audio.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
            </div>
--- a/ui/src/workflow/nodes/text-to-speech-node/index.vue
+++ b/ui/src/workflow/nodes/text-to-speech-node/index.vue
@ -25,7 +25,7 @@
              <div>
                <span
                  >{{ $t('views.applicationWorkflow.nodes.textToSpeechNode.tts_model.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
              <el-button
@ -63,7 +63,7 @@
              <div>
                <span
                  >{{ $t('views.applicationWorkflow.nodes.textToSpeechNode.content.label')
-                  }}<span class="danger">*</span></span
+                  }}<span class="color-danger">*</span></span
                >
              </div>
            </div>
--- a/ui/src/workflow/nodes/tool-lib-node/index.vue
+++ b/ui/src/workflow/nodes/tool-lib-node/index.vue
@ -32,7 +32,7 @@
                      <auto-tooltip :content="item.name" style="max-width: 130px">
                        {{ item.name }}
                      </auto-tooltip>
-                      <span class="danger" v-if="item.is_required">*</span></span
+                      <span class="color-danger" v-if="item.is_required">*</span></span
                    >
                    <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
                  </div>
--- a/ui/src/workflow/nodes/tool-node/index.vue
+++ b/ui/src/workflow/nodes/tool-node/index.vue
@ -37,7 +37,7 @@
                      <auto-tooltip :content="item.name" style="max-width: 130px">
                        {{ item.name }}
                      </auto-tooltip>
-                      <span class="danger" v-if="item.is_required">*</span>
+                      <span class="color-danger" v-if="item.is_required">*</span>
                    </span>
                    <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
                  </div>
--- a/ui/src/workflow/nodes/variable-assign-node/index.vue
+++ b/ui/src/workflow/nodes/variable-assign-node/index.vue
@ -16,7 +16,7 @@
              <div class="flex-between">
                <div>
                  {{ $t('views.applicationWorkflow.variable.label') }}
-                  <span class="danger">*</span>
+                  <span class="color-danger">*</span>
                </div>
                <el-button
                  text
@ -42,7 +42,7 @@
          <div class="flex-between mb-8">
            <span class="lighter"
              >{{ $t('views.applicationWorkflow.nodes.variableAssignNode.assign')
-              }}<span class="danger">*</span></span
+              }}<span class="color-danger">*</span></span
            >
            <el-select :teleported="false" v-model="item.source" size="small" style="width: 85px">
              <el-option