From b45a82c519628fe26ef80eb50e682ace9855a919 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 4 Jun 2024 18:53:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E6=B5=81=E7=BC=96?=
 =?UTF-8?q?=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/card-add/index.vue          |   4 +-
 .../items/complex/ArrayObjectCard.vue         |   4 +-
 ui/src/components/layout-container/index.vue  |   3 +-
 .../workflow/common/NodeControl.vue           |   6 +-
 .../workflow/common/app-node/index.ts         |   8 +-
 .../components/workflow/common/edge/index.ts  |   4 +
 .../components/workflow/common/menu/data.ts   |  24 ---
 .../components/workflow/common/menu/index.ts  | 115 -----------
 .../workflow/common/node-container/index.vue  |   4 +-
 ui/src/components/workflow/index.vue          |  17 +-
 .../workflow/nodes/ai-chat-node/index.vue     |   2 +-
 .../workflow/nodes/base-node/index.ts         |   8 +-
 .../workflow/nodes/base-node/index.vue        |   8 +-
 .../nodes/search-dataset-node/index.vue       | 185 +++++++++++++++---
 .../workflow/nodes/start-node/index.vue       |  16 +-
 .../components/top-bar/avatar/AboutDialog.vue |   3 +-
 ui/src/main.ts                                |   5 +-
 ui/src/styles/app.scss                        |  11 ++
 .../component/APIKeyDialog.vue                |  52 +++--
 .../component/EmbedDialog.vue                 |   4 +-
 .../component/LimitDialog.vue                 |  42 ++--
 ui/src/views/application-workflow/index.vue   |  15 +-
 ui/src/views/application/CreateAndSetting.vue |   5 +-
 .../components/AddDatasetDialog.vue           |  22 ++-
 .../components/ParamSettingDialog.vue         |  81 ++++++--
 ui/src/views/chat/base/index.vue              |   3 +-
 ui/src/views/chat/embed/index.vue             |   3 +-
 ui/src/views/chat/pc/index.vue                |   3 +-
 ui/src/views/hit-test/index.vue               |   3 +-
 29 files changed, 363 insertions(+), 297 deletions(-)
 delete mode 100644 ui/src/components/workflow/common/menu/data.ts
 delete mode 100644 ui/src/components/workflow/common/menu/index.ts

diff --git a/ui/src/components/card-add/index.vue b/ui/src/components/card-add/index.vue
index bdc5b41f7..07c66fbbd 100644
--- a/ui/src/components/card-add/index.vue
+++ b/ui/src/components/card-add/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-card shadow="never" class="card-add">
     <div class="flex-center">
-      <AppIcon iconName="Plus" class="add-icon p-8" />
+      <AppIcon iconName="Plus" class="add-icon p-8 border-r-4 layout-bg" />
       <span>{{ title }}</span>
     </div>
   </el-card>
@@ -30,9 +30,7 @@ defineProps({
 
   .add-icon {
     font-size: 14px;
-    border-radius: 4px;
     border: 1px solid var(--app-border-color-dark);
-    background: var(--app-layout-bg-color);
     margin-right: 12px;
   }
   &:hover {
diff --git a/ui/src/components/dynamics-form/items/complex/ArrayObjectCard.vue b/ui/src/components/dynamics-form/items/complex/ArrayObjectCard.vue
index 8fca1d45d..427924d31 100644
--- a/ui/src/components/dynamics-form/items/complex/ArrayObjectCard.vue
+++ b/ui/src/components/dynamics-form/items/complex/ArrayObjectCard.vue
@@ -21,7 +21,7 @@
     </el-card>
     <el-card shadow="never" class="card-add box-card" @click="add_card">
       <div class="flex-center">
-        <AppIcon iconName="Plus" class="add-icon p-8" />
+        <AppIcon iconName="Plus" class="add-icon layout-bg p-8 border-r-4" />
         <span>{{ add_msg }}</span>
       </div>
     </el-card>
@@ -133,9 +133,7 @@ defineExpose({
 
     .add-icon {
       font-size: 14px;
-      border-radius: 4px;
       border: 1px solid var(--app-border-color-dark);
-      background: var(--app-layout-bg-color);
       margin-right: 12px;
     }
     &:hover {
diff --git a/ui/src/components/layout-container/index.vue b/ui/src/components/layout-container/index.vue
index 19f463146..4d830242c 100644
--- a/ui/src/components/layout-container/index.vue
+++ b/ui/src/components/layout-container/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="content-container">
+  <div class="content-container border-r-4">
     <div class="content-container__header flex align-center w-full" v-if="slots.header || header">
       <slot name="backButton">
         <back-button :to="backTo" v-if="showBack"></back-button>
@@ -41,7 +41,6 @@ const showBack = computed(() => {
   }
   .content-container__main {
     background-color: var(--app-view-bg-color);
-    border-radius: 4px;
     box-sizing: border-box;
     min-width: 700px;
   }
diff --git a/ui/src/components/workflow/common/NodeControl.vue b/ui/src/components/workflow/common/NodeControl.vue
index 137bcca36..84114277a 100644
--- a/ui/src/components/workflow/common/NodeControl.vue
+++ b/ui/src/components/workflow/common/NodeControl.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <el-button-group>
-      <el-button type="plain" size="small" @click="$_zoomIn">放大</el-button>
-      <el-button type="plain" size="small" @click="$_zoomOut">缩小</el-button>
-      <el-button type="plain" size="small" @click="$_reset">还原(大小&定位)</el-button>
+      <el-button size="small" @click="$_zoomIn">放大</el-button>
+      <el-button size="small" @click="$_zoomOut">缩小</el-button>
+      <el-button size="small" @click="$_reset">还原(大小&定位)</el-button>
     </el-button-group>
   </div>
 </template>
diff --git a/ui/src/components/workflow/common/app-node/index.ts b/ui/src/components/workflow/common/app-node/index.ts
index 02138fea2..e935c76cb 100644
--- a/ui/src/components/workflow/common/app-node/index.ts
+++ b/ui/src/components/workflow/common/app-node/index.ts
@@ -1,8 +1,10 @@
 import Components from '@/components'
 import ElementPlus from 'element-plus'
+import * as ElementPlusIcons from '@element-plus/icons-vue'
 import { HtmlNode, HtmlNodeModel, BaseEdge } from '@logicflow/core'
 import { createApp, h } from 'vue'
 import directives from '@/directives'
+import i18n from '@/locales'
 
 class AppNode extends HtmlNode {
   isMounted
@@ -24,6 +26,10 @@ class AppNode extends HtmlNode {
     this.app.use(ElementPlus)
     this.app.use(Components)
     this.app.use(directives)
+    this.app.use(i18n)
+    for (const [key, component] of Object.entries(ElementPlusIcons)) {
+      this.app.component(key, component)
+    }
   }
 
   setHtml(rootEl: HTMLElement) {
@@ -31,7 +37,7 @@ class AppNode extends HtmlNode {
       this.isMounted = true
       const node = document.createElement('div')
       rootEl.appendChild(node)
-      this.app.mount(node)
+      this.app?.mount(node)
     } else {
       if (this.r && this.r.component) {
         this.r.component.props.properties = this.props.model.getProperties()
diff --git a/ui/src/components/workflow/common/edge/index.ts b/ui/src/components/workflow/common/edge/index.ts
index 338001649..466ee402f 100644
--- a/ui/src/components/workflow/common/edge/index.ts
+++ b/ui/src/components/workflow/common/edge/index.ts
@@ -3,6 +3,10 @@ import { BezierEdge, BezierEdgeModel } from '@logicflow/core'
 class CustomEdge2 extends BezierEdge {}
 
 class CustomEdgeModel2 extends BezierEdgeModel {
+  getArrowStyle() {
+    return { offet: 0 }
+  }
+  
   getEdgeStyle() {
     const style = super.getEdgeStyle()
 
diff --git a/ui/src/components/workflow/common/menu/data.ts b/ui/src/components/workflow/common/menu/data.ts
deleted file mode 100644
index bf19a69d9..000000000
--- a/ui/src/components/workflow/common/menu/data.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-const shapeList = [
-  {
-    type: 'ai-chat-node',
-    text: '',
-    label: 'AI对话',
-    icon: 'data:image/png;base64,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',
-    properties: {
-      height: 200,
-      stepName: 'AI对话',
-      input: [
-        {
-          key: '输入'
-        }
-      ],
-      output: [
-        {
-          key: '输出'
-        }
-      ]
-    }
-  }
-]
-
-export { shapeList }
diff --git a/ui/src/components/workflow/common/menu/index.ts b/ui/src/components/workflow/common/menu/index.ts
deleted file mode 100644
index a9076d115..000000000
--- a/ui/src/components/workflow/common/menu/index.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import LogicFlow from '@logicflow/core'
-import { shapeList } from './data'
-type ShapeItem = {
-  type?: string
-  text?: string
-  icon?: string
-  label?: string
-  className?: string
-  disabled?: boolean
-  properties?: Record<string, any>
-  callback?: (lf: LogicFlow, container: HTMLElement) => void
-}
-
-class AppMenu {
-  lf: LogicFlow
-  shapeList: ShapeItem[]
-  panelEl?: HTMLDivElement
-  static pluginName = 'AppMenu'
-  domContainer?: HTMLElement
-  constructor({ lf }: { lf: LogicFlow }) {
-    this.lf = lf
-    this.lf.setPatternItems = (shapeList: Array<ShapeItem>) => {
-      this.setPatternItems(shapeList)
-    }
-    this.shapeList = shapeList
-    this.panelEl = undefined
-    this.domContainer = undefined
-  }
-  render(lf: LogicFlow, domContainer: HTMLElement) {
-    this.destroy()
-    if (!this.shapeList || this.shapeList.length === 0) {
-      // 首次render后失败后，后续调用setPatternItems支持渲染
-      this.domContainer = domContainer
-      return
-    }
-    this.panelEl = document.createElement('div')
-    this.panelEl.className = 'lf-dndpanel'
-    this.shapeList.forEach((shapeItem) => {
-      this.panelEl?.appendChild(this.createDndItem(shapeItem))
-    })
-    domContainer.appendChild(this.panelEl)
-    this.domContainer = domContainer
-  }
-  destroy() {
-    if (this.domContainer && this.panelEl && this.domContainer.contains(this.panelEl)) {
-      this.domContainer.removeChild(this.panelEl)
-    }
-  }
-  setPatternItems(shapeList: Array<ShapeItem>) {
-    this.shapeList = shapeList
-    // 支持渲染后重新设置拖拽面板
-    if (this.domContainer) {
-      this.render(this.lf, this.domContainer)
-    }
-  }
-  private createDndItem(shapeItem: ShapeItem): HTMLElement {
-    const el = document.createElement('div')
-    el.className = shapeItem.className ? `lf-dnd-item ${shapeItem.className}` : 'lf-dnd-item'
-    const shape = document.createElement('div')
-    shape.className = 'lf-dnd-shape'
-
-    if (shapeItem.icon) {
-      shape.style.backgroundImage = `url(${shapeItem.icon})`
-    }
-    el.appendChild(shape)
-    if (shapeItem.label) {
-      const text = document.createElement('div')
-      text.innerText = shapeItem.label
-      text.className = 'lf-dnd-text'
-      el.appendChild(text)
-    }
-    if (shapeItem.disabled) {
-      el.classList.add('disabled')
-      // 保留callback的执行，可用于界面提示当前shapeItem的禁用状态
-      el.onmousedown = () => {
-        if (shapeItem.callback && this.domContainer) {
-          shapeItem.callback(this.lf, this.domContainer)
-        }
-      }
-      return el
-    }
-    el.onmousedown = () => {
-      if (shapeItem.type) {
-        this.lf.dnd.startDrag({
-          type: shapeItem.type,
-          properties: shapeItem.properties
-        })
-      }
-      if (shapeItem.callback && this.domContainer) {
-        shapeItem.callback(this.lf, this.domContainer)
-      }
-    }
-    el.ondblclick = (e) => {
-      this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {
-        e,
-        data: shapeItem
-      })
-    }
-    el.onclick = (e) => {
-      this.lf.graphModel.eventCenter.emit('dnd:panel-click', {
-        e,
-        data: shapeItem
-      })
-    }
-    el.oncontextmenu = (e) => {
-      this.lf.graphModel.eventCenter.emit('dnd:panel-contextmenu', {
-        e,
-        data: shapeItem
-      })
-    }
-    return el
-  }
-}
-
-export { AppMenu }
diff --git a/ui/src/components/workflow/common/node-container/index.vue b/ui/src/components/workflow/common/node-container/index.vue
index af18ac548..3de0bed6a 100644
--- a/ui/src/components/workflow/common/node-container/index.vue
+++ b/ui/src/components/workflow/common/node-container/index.vue
@@ -8,7 +8,7 @@
         </div>
         <div><slot></slot></div>
       </div>
-      <div class="input-container" v-resize="resetInputContainer">
+      <!-- <div class="input-container" v-resize="resetInputContainer">
         <div v-for="(item, index) in nodeModel.properties.input" :key="index" class="step-field">
           <span>{{ item.key }}</span>
         </div>
@@ -21,7 +21,7 @@
         >
           <span>{{ item.key }}</span>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
diff --git a/ui/src/components/workflow/index.vue b/ui/src/components/workflow/index.vue
index 965b66894..fd52dff84 100644
--- a/ui/src/components/workflow/index.vue
+++ b/ui/src/components/workflow/index.vue
@@ -11,8 +11,6 @@ import LogicFlow from '@logicflow/core'
 import { ref, onMounted } from 'vue'
 import AppEdge from './common/edge/index'
 import Control from './common/NodeControl.vue'
-import { AppMenu } from './common/menu/index'
-
 import '@logicflow/extension/lib/style/index.css'
 import '@logicflow/core/dist/style/index.css'
 const nodes: any = import.meta.glob('./nodes/**/index.ts', { eager: true })
@@ -29,7 +27,6 @@ type ShapeItem = {
   properties?: Record<string, any>
   callback?: (lf: LogicFlow, container: HTMLElement) => void
 }
-// LogicFlow.use(AppMenu)
 
 const graphData = {
   nodes: [
@@ -63,6 +60,19 @@ const graphData = {
         output: [{ key: '输出' }]
         // node_data: { model: 'shanghai', name: '222222' }
       }
+    },
+    {
+      id: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd4',
+      type: 'search-dataset-node',
+      x: 500,
+      y: 250,
+      properties: {
+        height: 200,
+        stepName: '开始',
+        // input: [{ key: '输入' }],
+        output: [{ key: '输出' }]
+        // node_data: { model: 'shanghai', name: '222222' }
+      }
     }
   ]
   // edges: [
@@ -108,6 +118,7 @@ onMounted(() => {
   const container: any = document.querySelector('#container')
   if (container) {
     lf.value = new LogicFlow({
+      textEdit: false,
       background: {
         backgroundColor: '#f5f6f7'
       },
diff --git a/ui/src/components/workflow/nodes/ai-chat-node/index.vue b/ui/src/components/workflow/nodes/ai-chat-node/index.vue
index 0f86377de..27a59f0c2 100644
--- a/ui/src/components/workflow/nodes/ai-chat-node/index.vue
+++ b/ui/src/components/workflow/nodes/ai-chat-node/index.vue
@@ -69,7 +69,7 @@ const validate = () => {
 }
 
 onMounted(() => {
-  props.nodeModel.validate = validate
+  set(props.nodeModel, 'validate', validate)
 })
 </script>
 <style lang="scss" scoped></style>
diff --git a/ui/src/components/workflow/nodes/base-node/index.ts b/ui/src/components/workflow/nodes/base-node/index.ts
index 0d4e21cb7..58ca091e8 100644
--- a/ui/src/components/workflow/nodes/base-node/index.ts
+++ b/ui/src/components/workflow/nodes/base-node/index.ts
@@ -1,12 +1,12 @@
-import ChatNodeVue from './index.vue'
+import BaseNodeVue from './index.vue'
 import { AppNode, AppNodeModel } from '@/components/workflow/common/app-node/index'
-class ChatNode extends AppNode {
+class BaseNode extends AppNode {
   constructor(props: any) {
-    super(props, ChatNodeVue)
+    super(props, BaseNodeVue)
   }
 }
 export default {
   type: 'base-node',
   model: AppNodeModel,
-  view: ChatNode
+  view: BaseNode
 }
diff --git a/ui/src/components/workflow/nodes/base-node/index.vue b/ui/src/components/workflow/nodes/base-node/index.vue
index 5f6a74774..dd645e210 100644
--- a/ui/src/components/workflow/nodes/base-node/index.vue
+++ b/ui/src/components/workflow/nodes/base-node/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <NodeContainer :nodeModel="nodeModel" style="width: 320px">
+  <NodeContainer :nodeModel="nodeModel">
     <el-form
       @submit.prevent
       :model="chat_data"
@@ -7,7 +7,7 @@
       require-asterisk-position="right"
       class="mb-24"
       label-width="auto"
-      ref="aiChatNodeFormRef"
+      ref="baseNodeFormRef"
     >
       <el-form-item
         label="应用名称"
@@ -76,10 +76,10 @@ const chat_data = computed({
 const handleFocus = () => {
   props.nodeModel.isSelected = false
 }
-const aiChatNodeFormRef = ref<FormInstance>()
+const baseNodeFormRef = ref<FormInstance>()
 
 const validate = () => {
-  aiChatNodeFormRef.value?.validate()
+  baseNodeFormRef.value?.validate()
 }
 
 onMounted(() => {
diff --git a/ui/src/components/workflow/nodes/search-dataset-node/index.vue b/ui/src/components/workflow/nodes/search-dataset-node/index.vue
index 0f8aeca81..7310ab9b7 100644
--- a/ui/src/components/workflow/nodes/search-dataset-node/index.vue
+++ b/ui/src/components/workflow/nodes/search-dataset-node/index.vue
@@ -1,51 +1,186 @@
 <template>
   <NodeContainer :nodeModel="nodeModel">
-    <el-form
-      :model="chat_data"
-      label-position="top"
-      require-asterisk-position="right"
-      class="mb-24"
-      label-width="auto"
-      ref="aiChatNodeFormRef"
-    >
-      <el-form-item label="知识库">
-        <el-select v-model="chat_data.model" placeholder="请选择模型">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="提示词">
-        <el-input v-model="chat_data.name" />
-      </el-form-item>
-    </el-form>
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="DatasetNodeFormRef"
+      >
+        <el-form-item label="选择知识库">
+          <template #label>
+            <div class="flex-between">
+              <span>选择知识库</span>
+              <el-button type="primary" link @click="openDatasetDialog">
+                <el-icon><Plus /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <div class="w-full">
+            <el-text type="info" v-if="form_data.dataset_id_list?.length === 0">
+              关联的知识库展示在这里
+            </el-text>
+            <template v-for="(item, index) in form_data.dataset_id_list" :key="index" v-else>
+              <div class="flex-between border border-r-4 white-bg mb-4" style="padding: 5px 8px">
+                <div class="flex align-center" style="line-height: 20px">
+                  <AppAvatar
+                    v-if="relatedObject(datasetList, item, 'id')?.type === '1'"
+                    class="mr-8 avatar-purple"
+                    shape="square"
+                    :size="20"
+                  >
+                    <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
+
+                  <AppAvatar v-else class="mr-8" shape="square" :size="20">
+                    <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
+                  <div class="ellipsis">
+                    {{ relatedObject(datasetList, item, 'id')?.name }}
+                  </div>
+                </div>
+                <el-button text @click="removeDataset(item)">
+                  <el-icon><Close /></el-icon>
+                </el-button>
+              </div>
+            </template>
+          </div>
+        </el-form-item>
+        <el-form-item label="检索参数">
+          <template #label>
+            <div class="flex-between">
+              <span>检索参数</span>
+              <el-button type="primary" link @click="openParamSettingDialog">
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <div class="w-full">
+            <el-row>
+              <el-col :span="12" class="color-secondary lighter">检索模式</el-col>
+              <el-col :span="12" class="lighter">
+                {{ form_data.dataset_setting.search_mode }}</el-col
+              >
+              <el-col :span="12" class="color-secondary lighter"> 相似度高于</el-col>
+              <el-col :span="12" class="lighter">
+                {{ form_data.dataset_setting.similarity }}</el-col
+              >
+              <el-col :span="12" class="color-secondary lighter"> 引用分段 Top</el-col>
+              <el-col :span="12" class="lighter"> {{ form_data.dataset_setting.top_n }}</el-col>
+              <el-col :span="12" class="color-secondary lighter"> 最大引用字符数</el-col>
+              <el-col :span="12" class="lighter">
+                {{ form_data.dataset_setting.max_paragraph_char_number }}</el-col
+              >
+            </el-row>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <h5 class="title-decoration-1 mb-8 mt-8">参数输出</h5>
+    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">检索结果 {data}</div>
+    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">满足直接回答的分段内容 {paragraph}</div>
+    <ParamSettingDialog ref="ParamSettingDialogRef" @refresh="refreshParam" />
+    <AddDatasetDialog
+      ref="AddDatasetDialogRef"
+      @addData="addDataset"
+      :data="datasetList"
+      @refresh="refresh"
+      :loading="datasetLoading"
+    />
   </NodeContainer>
 </template>
 <script setup lang="ts">
+import { set } from 'lodash'
+import { app } from '@/main'
 import NodeContainer from '@/components/workflow/common/node-container/index.vue'
+import AddDatasetDialog from '@/views/application/components/AddDatasetDialog.vue'
+import ParamSettingDialog from '@/views/application/components/ParamSettingDialog.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
+import { relatedObject } from '@/utils/utils'
+import useStore from '@/stores'
+const { dataset, application, user } = useStore()
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
 
-const chat_data = computed({
+const props = defineProps<{ nodeModel: any }>()
+
+const form = {
+  dataset_id_list: [],
+  dataset_setting: {
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    search_mode: 'embedding'
+  }
+}
+
+const form_data = computed({
   get: () => {
     if (props.nodeModel.properties.node_data) {
       return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
     }
-    return {}
+    return props.nodeModel.properties.node_data
   },
   set: (value) => {
-    props.nodeModel.properties.node_data = value
+    set(props.nodeModel.properties, 'node_data', value)
   }
 })
-const props = defineProps<{ nodeModel: any }>()
 
-const aiChatNodeFormRef = ref<FormInstance>()
+const DatasetNodeFormRef = ref<FormInstance>()
+const ParamSettingDialogRef = ref<InstanceType<typeof ParamSettingDialog>>()
+const AddDatasetDialogRef = ref<InstanceType<typeof AddDatasetDialog>>()
+const datasetList = ref<any>([])
+const datasetLoading = ref(false)
+
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'dataset_setting', data)
+}
+
+const openParamSettingDialog = () => {
+  ParamSettingDialogRef.value?.open(form_data.value.dataset_setting, 'workflow')
+}
+
+function removeDataset(id: any) {
+  const list = props.nodeModel.properties.node_data.dataset_id_list.filter((v) => v !== id)
+  set(props.nodeModel.properties.node_data, 'dataset_id_list', list)
+}
+
+function addDataset(val: Array<string>) {
+  set(props.nodeModel.properties.node_data, 'dataset_id_list', val)
+}
+
+function openDatasetDialog() {
+  AddDatasetDialogRef.value.open(form_data.value.dataset_id_list)
+}
+
+function getDataset() {
+  if (id) {
+    application.asyncGetApplicationDataset(id, datasetLoading).then((res: any) => {
+      datasetList.value = res.data
+    })
+  } else {
+    dataset.asyncGetAllDataset(datasetLoading).then((res: any) => {
+      datasetList.value = res.data?.filter((v: any) => v.user_id === user.userInfo?.id)
+    })
+  }
+}
+function refresh() {
+  getDataset()
+}
 
 const validate = () => {
-  aiChatNodeFormRef.value?.validate()
+  DatasetNodeFormRef.value?.validate()
 }
 
 onMounted(() => {
-  props.nodeModel.validate = validate
+  getDataset()
+  set(props.nodeModel, 'validate', validate)
 })
 </script>
 <style lang="scss" scoped></style>
diff --git a/ui/src/components/workflow/nodes/start-node/index.vue b/ui/src/components/workflow/nodes/start-node/index.vue
index 341c324a6..a83217cfd 100644
--- a/ui/src/components/workflow/nodes/start-node/index.vue
+++ b/ui/src/components/workflow/nodes/start-node/index.vue
@@ -1,16 +1,15 @@
 <template>
-  <NodeContainer :nodeModel="nodeModel" class="start-node" style="width: 320px">
+  <NodeContainer :nodeModel="nodeModel" class="start-node">
     <h5 class="title-decoration-1 mb-8">全局变量</h5>
-    <div class="text-bg p-8-12 mb-8">当前时 {time}</div>
+    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">当前时 {time}</div>
     <h5 class="title-decoration-1 mb-8">参数输出</h5>
-    <div class="text-bg p-8-12 mb-8">用户问题 {question}</div>
+    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">用户问题 {question}</div>
   </NodeContainer>
 </template>
 <script setup lang="ts">
 import NodeContainer from '@/components/workflow/common/node-container/index.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
-import { MdEditor } from 'md-editor-v3'
 
 // const chat_data = computed({
 //   get: () => {
@@ -44,11 +43,4 @@ onMounted(() => {
   props.nodeModel.validate = validate
 })
 </script>
-<style lang="scss" scoped>
-.start-node {
-  .text-bg {
-    background: var(--app-layout-bg-color);
-    border-radius: 4px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/layout/components/top-bar/avatar/AboutDialog.vue b/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
index 40ce12704..2d1f5f520 100644
--- a/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
+++ b/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="aboutDialogVisible" class="about-dialog">
+  <el-dialog v-model="aboutDialogVisible" class="about-dialog border-r-4">
     <template #header="{ titleId, titleClass }">
       <div class="flex-center">
         <div class="logo mr-4"></div>
@@ -57,7 +57,6 @@ defineExpose({ open })
 <style lang="scss" scope>
 .about-dialog {
   padding: 0 0 24px 0;
-  border-radius: 4px;
   width: 600px;
   font-weight: 400;
   .el-dialog__header {
diff --git a/ui/src/main.ts b/ui/src/main.ts
index a978a7efa..ab1b803fa 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -9,7 +9,7 @@ import directives from '@/directives'
 import App from './App.vue'
 import router from '@/router'
 import Components from '@/components'
-import i18n from './locales';
+import i18n from './locales'
 const app = createApp(App)
 app.use(store)
 app.use(directives)
@@ -24,6 +24,7 @@ app.use(ElementPlus, {
 app.use(theme)
 
 app.use(router)
-app.use(i18n);
+app.use(i18n)
 app.use(Components)
 app.mount('#app')
+export { app }
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 818cb7162..bd3a8fa5a 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -273,6 +273,9 @@ h5 {
 .border-b-light {
   border-bottom: 1px solid var(--el-border-color-lighter);
 }
+.border-r-4 {
+  border-radius: 4px;
+}
 
 .cursor {
   cursor: pointer;
@@ -460,6 +463,14 @@ h5 {
   color: var(--app-text-color-secondary);
 }
 
+.layout-bg {
+  background: var(--app-layout-bg-color);
+}
+
+.white-bg {
+  background: #ffffff;
+}
+
 .app-warning-icon {
   font-size: 16px;
   color: var(--app-text-color-secondary);
diff --git a/ui/src/views/application-overview/component/APIKeyDialog.vue b/ui/src/views/application-overview/component/APIKeyDialog.vue
index 2ad4bb1e2..a4a2e7d79 100644
--- a/ui/src/views/application-overview/component/APIKeyDialog.vue
+++ b/ui/src/views/application-overview/component/APIKeyDialog.vue
@@ -1,6 +1,8 @@
 <template>
   <el-dialog title="API Key" v-model="dialogVisible" width="800">
-    <el-button type="primary" class="mb-16" @click="createApiKey"> {{$t('views.applicationOverview.appInfo.APIKeyDialog.creatApiKey')}} </el-button>
+    <el-button type="primary" class="mb-16" @click="createApiKey">
+      {{ $t('views.applicationOverview.appInfo.APIKeyDialog.creatApiKey') }}
+    </el-button>
     <el-table :data="apiKey" class="mb-16" :loading="loading">
       <el-table-column prop="secret_key" label="API Key">
         <template #default="{ row }">
@@ -12,28 +14,47 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('views.applicationOverview.appInfo.APIKeyDialog.status')" width="60">
+      <el-table-column
+        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.status')"
+        width="60"
+      >
         <template #default="{ row }">
           <div @click.stop>
             <el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="name" :label="$t('views.applicationOverview.appInfo.APIKeyDialog.creationDate')" width="170">
+      <el-table-column
+        prop="name"
+        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.creationDate')"
+        width="170"
+      >
         <template #default="{ row }">
           {{ datetimeFormat(row.create_time) }}
         </template>
       </el-table-column>
-      <el-table-column :label="$t('views.applicationOverview.appInfo.APIKeyDialog.operations')" align="left" width="80">
+      <el-table-column
+        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.operations')"
+        align="left"
+        width="80"
+      >
         <template #default="{ row }">
           <span class="mr-4">
-            <el-tooltip effect="dark" :content="$t('views.applicationOverview.appInfo.APIKeyDialog.settings')" placement="top">
+            <el-tooltip
+              effect="dark"
+              :content="$t('views.applicationOverview.appInfo.APIKeyDialog.settings')"
+              placement="top"
+            >
               <el-button type="primary" text @click.stop="settingApiKey(row)">
                 <el-icon><Setting /></el-icon>
               </el-button>
             </el-tooltip>
           </span>
-          <el-tooltip effect="dark" :content="$t('views.applicationOverview.appInfo.APIKeyDialog.delete')" placement="top">
+          <el-tooltip
+            effect="dark"
+            :content="$t('views.applicationOverview.appInfo.APIKeyDialog.delete')"
+            placement="top"
+          >
             <el-button type="primary" text @click="deleteApiKey(row)">
               <el-icon><Delete /></el-icon>
             </el-button>
@@ -82,7 +103,7 @@ function deleteApiKey(row: any) {
     t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm2'),
     {
       confirmButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.confirmDelete'),
-      cancelButtonText:t('views.applicationOverview.appInfo.APIKeyDialog.cancel'),
+      cancelButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.cancel'),
       confirmButtonClass: 'danger'
     }
   )
@@ -99,7 +120,9 @@ function changeState(bool: Boolean, row: any) {
   const obj = {
     is_active: bool
   }
-  const str = bool ? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess') : t('views.applicationOverview.appInfo.APIKeyDialog.disabledSuccess')
+  const str = bool
+    ? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess')
+    : t('views.applicationOverview.appInfo.APIKeyDialog.disabledSuccess')
   overviewApi.putAPIKey(id as string, row.id, obj, loading).then((res) => {
     MsgSuccess(str)
     getApiKeyList()
@@ -129,15 +152,4 @@ function refresh() {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
-.embed-dialog {
-  .code {
-    color: var(--app-text-color) !important;
-    background: var(--app-layout-bg-color);
-    font-weight: 400;
-    font-size: 13px;
-    white-space: pre;
-    height: 180px;
-  }
-}
-</style>
+<style lang="scss" scope></style>
diff --git a/ui/src/views/application-overview/component/EmbedDialog.vue b/ui/src/views/application-overview/component/EmbedDialog.vue
index c497d3e5b..6792164b3 100644
--- a/ui/src/views/application-overview/component/EmbedDialog.vue
+++ b/ui/src/views/application-overview/component/EmbedDialog.vue
@@ -5,7 +5,7 @@
         <div class="border">
           <p class="title p-16 bold">{{$t('views.applicationOverview.appInfo.EmbedDialog.embedDialogTitle')}}</p>
           <img src="@/assets/window1.png" alt="" class="ml-8" />
-          <div class="code border-t p-16">
+          <div class="code layout-bg border-t p-16">
             <div class="flex-between">
               <span class="bold">{{$t('views.applicationOverview.appInfo.EmbedDialog.fullscreenModeTitle')}}</span>
               <el-button text @click="copyClick(source1)">
@@ -91,7 +91,7 @@ defineExpose({ open })
 
   .code {
     color: var(--app-text-color) !important;
-    background: var(--app-layout-bg-color);
+
     font-weight: 400;
     font-size: 13px;
     white-space: pre;
diff --git a/ui/src/views/application-overview/component/LimitDialog.vue b/ui/src/views/application-overview/component/LimitDialog.vue
index 262aed2be..69ec0ab83 100644
--- a/ui/src/views/application-overview/component/LimitDialog.vue
+++ b/ui/src/views/application-overview/component/LimitDialog.vue
@@ -1,10 +1,18 @@
 <template>
-  <el-dialog :title="$t('views.applicationOverview.appInfo.LimitDialog.dialogTitle')" v-model="dialogVisible">
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.LimitDialog.dialogTitle')"
+    v-model="dialogVisible"
+  >
     <el-form label-position="top" ref="limitFormRef" :model="form">
-      <el-form-item :label="$t('views.applicationOverview.appInfo.LimitDialog.showSourceLabel')" @click.prevent>
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.showSourceLabel')"
+        @click.prevent
+      >
         <el-switch size="small" v-model="form.show_source"></el-switch>
       </el-form-item>
-      <el-form-item :label="$t('views.applicationOverview.appInfo.LimitDialog.clientQueryLimitLabel')">
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.clientQueryLimitLabel')"
+      >
         <el-input-number
           v-model="form.access_num"
           :min="0"
@@ -12,9 +20,14 @@
           controls-position="right"
           step-strictly
         />
-        <span class="ml-4">{{$t('views.applicationOverview.appInfo.LimitDialog.timesDays')}}</span>
+        <span class="ml-4">{{
+          $t('views.applicationOverview.appInfo.LimitDialog.timesDays')
+        }}</span>
       </el-form-item>
-      <el-form-item :label="$t('views.applicationOverview.appInfo.LimitDialog.whitelistLabel')" @click.prevent>
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.whitelistLabel')"
+        @click.prevent
+      >
         <el-switch size="small" v-model="form.white_active"></el-switch>
       </el-form-item>
       <el-form-item>
@@ -28,9 +41,11 @@
     </el-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click.prevent="dialogVisible = false">{{$t('views.applicationOverview.appInfo.LimitDialog.cancelButtonText')}} </el-button>
+        <el-button @click.prevent="dialogVisible = false"
+          >{{ $t('views.applicationOverview.appInfo.LimitDialog.cancelButtonText') }}
+        </el-button>
         <el-button type="primary" @click="submit(limitFormRef)" :loading="loading">
-          {{$t('views.applicationOverview.appInfo.LimitDialog.saveButtonText')}}
+          {{ $t('views.applicationOverview.appInfo.LimitDialog.saveButtonText') }}
         </el-button>
       </span>
     </template>
@@ -103,15 +118,4 @@ const submit = async (formEl: FormInstance | undefined) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
-.embed-dialog {
-  .code {
-    color: var(--app-text-color) !important;
-    background: var(--app-layout-bg-color);
-    font-weight: 400;
-    font-size: 13px;
-    white-space: pre;
-    height: 180px;
-  }
-}
-</style>
+<style lang="scss" scope></style>
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 1c1395ebb..45eb529ee 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -15,7 +15,7 @@
     </div>
     <!-- 下拉框 -->
     <el-collapse-transition>
-      <div v-show="showPopover" class="workflow-dropdown-menu border">
+      <div v-show="showPopover" class="workflow-dropdown-menu border border-r-4">
         <h5 class="title">基础组件</h5>
         <template v-for="(item, index) in shapeList" :key="index">
           <div class="workflow-dropdown-item cursor flex p-8-12" @mousedown="onmousedown(item)">
@@ -37,16 +37,6 @@
 import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
 import Workflow from '@/components/workflow/index.vue'
 import { shapeList, iconComponent } from '@/components/workflow/menu-data'
-type ShapeItem = {
-  type?: string
-  text?: string
-  icon?: string
-  label?: string
-  className?: string
-  disabled?: boolean
-  properties?: Record<string, any>
-  callback?: (lf: LogicFlow, container: HTMLElement) => void
-}
 
 const workflowRef = ref()
 
@@ -56,7 +46,7 @@ function clickoutside() {
   showPopover.value = false
 }
 
-function onmousedown(item: ShapeItem) {
+function onmousedown(item: any) {
   workflowRef.value?.onmousedown(item)
 }
 
@@ -86,7 +76,6 @@ onBeforeUnmount(() => {})
     width: 240px;
     box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
     background: #ffffff;
-    border-radius: 4px;
 
     .title {
       padding: 8px 12px 4px;
diff --git a/ui/src/views/application/CreateAndSetting.vue b/ui/src/views/application/CreateAndSetting.vue
index f776f54ec..966151f12 100644
--- a/ui/src/views/application/CreateAndSetting.vue
+++ b/ui/src/views/application/CreateAndSetting.vue
@@ -206,7 +206,7 @@
                       v-for="(item, index) in applicationForm.dataset_id_list"
                       :key="index"
                     >
-                      <el-card class="relate-dataset-card" shadow="never">
+                      <el-card class="relate-dataset-card border-r-4" shadow="never">
                         <div class="flex-between">
                           <div class="flex align-center">
                             <AppAvatar
@@ -218,7 +218,7 @@
                               <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
                             </AppAvatar>
 
-                            <AppAvatar v-else class="mr-12" shape="square" :size="32">
+                            <AppAvatar v-else class="mr-8" shape="square" :size="32">
                               <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
                             </AppAvatar>
                             <div class="ellipsis">
@@ -525,7 +525,6 @@ onMounted(() => {
 .create-application {
   .relate-dataset-card {
     color: var(--app-text-color);
-    border-radius: 4px;
   }
   .dialog-bg {
     border-radius: 8px;
diff --git a/ui/src/views/application/components/AddDatasetDialog.vue b/ui/src/views/application/components/AddDatasetDialog.vue
index 076bd96e0..ede10143c 100644
--- a/ui/src/views/application/components/AddDatasetDialog.vue
+++ b/ui/src/views/application/components/AddDatasetDialog.vue
@@ -1,10 +1,18 @@
 <template>
-  <el-dialog :title="$t('views.application.applicationForm.dialogues.addDataset')" v-model="dialogVisible" width="600">
+  <el-dialog
+    :title="$t('views.application.applicationForm.dialogues.addDataset')"
+    v-model="dialogVisible"
+    width="600"
+    append-to-body
+  >
     <template #header="{ titleId, titleClass }">
       <div class="my-header flex">
-        <h4 :id="titleId" :class="titleClass">{{$t('views.application.applicationForm.dialogues.addDataset')}}</h4>
+        <h4 :id="titleId" :class="titleClass">
+          {{ $t('views.application.applicationForm.dialogues.addDataset') }}
+        </h4>
         <el-button link class="ml-16" @click="refresh">
-          <el-icon class="mr-4"><Refresh /></el-icon>{{$t('views.application.applicationForm.dialogues.refresh')}}
+          <el-icon class="mr-4"><Refresh /></el-icon
+          >{{ $t('views.application.applicationForm.dialogues.refresh') }}
         </el-button>
       </div>
     </template>
@@ -19,8 +27,12 @@
     </el-row>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click.prevent="dialogVisible = false"> {{$t('views.application.applicationForm.buttons.cancel')}} </el-button>
-        <el-button type="primary" @click="submitHandle"> {{$t('views.application.applicationForm.buttons.confirm')}} </el-button>
+        <el-button @click.prevent="dialogVisible = false">
+          {{ $t('views.application.applicationForm.buttons.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submitHandle">
+          {{ $t('views.application.applicationForm.buttons.confirm') }}
+        </el-button>
       </span>
     </template>
   </el-dialog>
diff --git a/ui/src/views/application/components/ParamSettingDialog.vue b/ui/src/views/application/components/ParamSettingDialog.vue
index 5a135ac74..6d2cbb1a0 100644
--- a/ui/src/views/application/components/ParamSettingDialog.vue
+++ b/ui/src/views/application/components/ParamSettingDialog.vue
@@ -5,12 +5,15 @@
     class="param-dialog"
     v-model="dialogVisible"
     style="width: 550px"
+    append-to-body
   >
     <div class="dialog-max-height">
       <el-scrollbar always>
         <div class="p-16">
           <el-form label-position="top" ref="paramFormRef" :model="form">
-            <el-form-item :label="$t('views.application.applicationForm.dialogues.selectSearchMode')">
+            <el-form-item
+              :label="$t('views.application.applicationForm.dialogues.selectSearchMode')"
+            >
               <el-radio-group v-model="form.search_mode" class="card__radio" @change="changeHandle">
                 <el-card
                   shadow="never"
@@ -18,8 +21,12 @@
                   :class="form.search_mode === 'embedding' ? 'active' : ''"
                 >
                   <el-radio value="embedding" size="large">
-                    <p class="mb-4">{{$t('views.application.applicationForm.dialogues.vectorSearch')}}</p>
-                    <el-text type="info">{{$t('views.application.applicationForm.dialogues.vectorSearchTooltip')}}</el-text>
+                    <p class="mb-4">
+                      {{ $t('views.application.applicationForm.dialogues.vectorSearch') }}
+                    </p>
+                    <el-text type="info">{{
+                      $t('views.application.applicationForm.dialogues.vectorSearchTooltip')
+                    }}</el-text>
                   </el-radio>
                 </el-card>
                 <el-card
@@ -28,16 +35,22 @@
                   :class="form.search_mode === 'keywords' ? 'active' : ''"
                 >
                   <el-radio value="keywords" size="large">
-                    <p class="mb-4">{{$t('views.application.applicationForm.dialogues.fullTextSearch')}}</p>
-                    <el-text type="info">{{$t('views.application.applicationForm.dialogues.fullTextSearchTooltip')}}</el-text>
+                    <p class="mb-4">
+                      {{ $t('views.application.applicationForm.dialogues.fullTextSearch') }}
+                    </p>
+                    <el-text type="info">{{
+                      $t('views.application.applicationForm.dialogues.fullTextSearchTooltip')
+                    }}</el-text>
                   </el-radio>
                 </el-card>
                 <el-card shadow="never" :class="form.search_mode === 'blend' ? 'active' : ''">
                   <el-radio value="blend" size="large">
-                    <p class="mb-4">{{$t('views.application.applicationForm.dialogues.hybridSearch')}}</p>
-                    <el-text type="info"
-                      >{{$t('views.application.applicationForm.dialogues.hybridSearchTooltip')}}</el-text
-                    >
+                    <p class="mb-4">
+                      {{ $t('views.application.applicationForm.dialogues.hybridSearch') }}
+                    </p>
+                    <el-text type="info">{{
+                      $t('views.application.applicationForm.dialogues.hybridSearchTooltip')
+                    }}</el-text>
                   </el-radio>
                 </el-card>
               </el-radio-group>
@@ -47,7 +60,9 @@
                 <el-form-item>
                   <template #label>
                     <div class="flex align-center">
-                      <span class="mr-4">{{$t('views.application.applicationForm.dialogues.similarityThreshold')}}</span>
+                      <span class="mr-4">{{
+                        $t('views.application.applicationForm.dialogues.similarityThreshold')
+                      }}</span>
                       <el-tooltip effect="dark" content="相似度越高相关性越强。" placement="right">
                         <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
                       </el-tooltip>
@@ -65,7 +80,9 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('views.application.applicationForm.dialogues.topReferences')">
+                <el-form-item
+                  :label="$t('views.application.applicationForm.dialogues.topReferences')"
+                >
                   <el-input-number
                     v-model="form.top_n"
                     :min="1"
@@ -87,7 +104,10 @@
                 class="custom-slider"
               />
             </el-form-item>
-            <el-form-item :label="$t('views.application.applicationForm.dialogues.noReferencesAction')">
+            <el-form-item
+              v-if="!isWorkflow"
+              :label="$t('views.application.applicationForm.dialogues.noReferencesAction')"
+            >
               <el-form
                 label-position="top"
                 ref="noReferencesformRef"
@@ -102,7 +122,9 @@
                 >
                   <div>
                     <el-radio value="ai_questioning">
-                      <p>{{$t('views.application.applicationForm.dialogues.continueQuestioning')}}</p>
+                      <p>
+                        {{ $t('views.application.applicationForm.dialogues.continueQuestioning') }}
+                      </p>
                       <el-form-item
                         v-if="form.no_references_setting.status === 'ai_questioning'"
                         :label="$t('views.application.applicationForm.form.prompt.label')"
@@ -120,7 +142,7 @@
                   </div>
                   <div class="mt-8">
                     <el-radio value="designated_answer">
-                      <p>{{$t('views.application.applicationForm.dialogues.provideAnswer')}}</p>
+                      <p>{{ $t('views.application.applicationForm.dialogues.provideAnswer') }}</p>
                       <el-form-item
                         v-if="form.no_references_setting.status === 'designated_answer'"
                         prop="designated_answer"
@@ -144,9 +166,11 @@
     </div>
     <template #footer>
       <span class="dialog-footer p-16">
-        <el-button @click.prevent="dialogVisible = false">{{$t('views.application.applicationForm.buttons.cancel')}}</el-button>
+        <el-button @click.prevent="dialogVisible = false">{{
+          $t('views.application.applicationForm.buttons.cancel')
+        }}</el-button>
         <el-button type="primary" @click="submit(noReferencesformRef)" :loading="loading">
-          {{$t('views.application.applicationForm.buttons.save')}}
+          {{ $t('views.application.applicationForm.buttons.save') }}
         </el-button>
       </span>
     </template>
@@ -164,8 +188,8 @@ const noReferencesformRef = ref()
 
 const defaultValue = {
   ai_questioning: '{question}',
-     // @ts-ignore
-  designated_answer:t('views.application.applicationForm.dialogues.designated_answer')
+  // @ts-ignore
+  designated_answer: t('views.application.applicationForm.dialogues.designated_answer')
 }
 
 const form = ref<any>({
@@ -185,13 +209,27 @@ const noReferencesform = ref<any>({
 })
 
 const noReferencesRules = reactive<FormRules<any>>({
-  ai_questioning: [{ required: true, message: t('views.application.applicationForm.dialogues.promptPlaceholder'), trigger: 'blur' }],
-  designated_answer: [{ required: true, message: t('views.application.applicationForm.dialogues.concentPlaceholder'), trigger: 'blur' }]
+  ai_questioning: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.dialogues.promptPlaceholder'),
+      trigger: 'blur'
+    }
+  ],
+  designated_answer: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.dialogues.concentPlaceholder'),
+      trigger: 'blur'
+    }
+  ]
 })
 
 const dialogVisible = ref<boolean>(false)
 const loading = ref(false)
 
+const isWorkflow = ref(false)
+
 watch(dialogVisible, (bool) => {
   if (!bool) {
     form.value = {
@@ -212,7 +250,8 @@ watch(dialogVisible, (bool) => {
   }
 })
 
-const open = (data: any) => {
+const open = (data: any, type?: string) => {
+  isWorkflow.value = type === 'workflow'
   form.value = { ...form.value, ...cloneDeep(data) }
   noReferencesform.value[form.value.no_references_setting.status] =
     form.value.no_references_setting.value
diff --git a/ui/src/views/chat/base/index.vue b/ui/src/views/chat/base/index.vue
index fcb58568b..f1bf2e1a3 100644
--- a/ui/src/views/chat/base/index.vue
+++ b/ui/src/views/chat/base/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chat" v-loading="loading">
+  <div class="chat layout-bg" v-loading="loading">
     <div class="chat__header">
       <div class="chat-width">
         <h2 class="ml-24">{{ applicationDetail?.name }}</h2>
@@ -60,7 +60,6 @@ onMounted(() => {
 </script>
 <style lang="scss">
 .chat {
-  background-color: var(--app-layout-bg-color);
   overflow: hidden;
   &__header {
     background: var(--app-header-bg-color);
diff --git a/ui/src/views/chat/embed/index.vue b/ui/src/views/chat/embed/index.vue
index 35c1941aa..c66b954ab 100644
--- a/ui/src/views/chat/embed/index.vue
+++ b/ui/src/views/chat/embed/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-embed" v-loading="loading">
+  <div class="chat-embed layout-bg" v-loading="loading">
     <div class="chat-embed__header">
       <div class="chat-width">
         <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
@@ -200,7 +200,6 @@ onMounted(() => {
 </script>
 <style lang="scss">
 .chat-embed {
-  background-color: var(--app-layout-bg-color);
   overflow: hidden;
   &__header {
     background: var(--app-header-bg-color);
diff --git a/ui/src/views/chat/pc/index.vue b/ui/src/views/chat/pc/index.vue
index 5b6d0af1a..16206b596 100644
--- a/ui/src/views/chat/pc/index.vue
+++ b/ui/src/views/chat/pc/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-pc" :class="classObj" v-loading="loading">
+  <div class="chat-pc layout-bg" :class="classObj" v-loading="loading">
     <div class="chat-pc__header">
       <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
     </div>
@@ -292,7 +292,6 @@ onMounted(() => {
 </script>
 <style lang="scss">
 .chat-pc {
-  background-color: var(--app-layout-bg-color);
   overflow: hidden;
 
   &__header {
diff --git a/ui/src/views/hit-test/index.vue b/ui/src/views/hit-test/index.vue
index f43380f0d..a27078bc5 100644
--- a/ui/src/views/hit-test/index.vue
+++ b/ui/src/views/hit-test/index.vue
@@ -37,7 +37,7 @@
                   shadow="hover"
                   :title="item.title || '-'"
                   :description="item.content"
-                  class="document-card cursor"
+                  class="document-card layout-bg layout-bg cursor "
                   :class="item.is_active ? '' : 'disabled'"
                   :showIcon="false"
                   @click="editParagraph(item)"
@@ -362,7 +362,6 @@ onMounted(() => {})
   }
   .document-card {
     height: 210px;
-    background: var(--app-layout-bg-color);
     border: 1px solid var(--app-layout-bg-color);
     &:hover {
       background: #ffffff;