1Panel-dev · wangdan-fit2cloud · Sep 3, 2026 · Sep 3, 2026
diff --git a/ui/src/styles/STYLE_README.md b/ui/src/styles/STYLE_README.md
@@ -157,6 +157,15 @@ CSS 自定义属性同样按变量名排序。嵌套选择器、伪类和媒体
 仅在布局语义与工具类完全一致时使用。需要覆盖排列方向或对齐方式的响应式布局继续组合 Tailwind
 原子类，不为少量差异继续增加相似工具类。
 
+## 常用卡片样式
+
+`mk-gray-card` 用于需要 N100 灰色背景的内容卡片，统一使用 6px 圆角、12px 水平内边距和 8px
+垂直内边距。
+
+```html
+<div class="mk-gray-card">卡片内容</div>
+```
+
 ## 常用交互工具类
 
 `group-hover-visible` 用于列表项、卡片等父级带有 `group` 的悬浮操作区。操作区默认透明且不响应

diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
@@ -160,7 +160,6 @@ h6 {
   }
 }
 
-
 // 资源菜单的导入按钮
 .mk-import-button {
   width: 100%;
@@ -169,7 +168,6 @@ h6 {
   }
 }
 
-
 /*
   标题前带竖线样式
 */
@@ -207,6 +205,13 @@ h6 {
   }
 }
 
+// 灰色背景卡片
+.mk-gray-card {
+  background-color: var(--mk-N100) !important;
+  border-radius: 6px;
+  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+}
+
 // 资源的card grid布局
 .mk-resource-card-grid {
   display: grid;
@@ -219,9 +224,8 @@ h6 {
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
 }
 
-
-
-.mk-scrollbar-right  {
+// 让一些组件内部滚动条 不会限制在padding内，滚动条贴在最右侧
+.mk-scrollbar-right {
   &.el-scrollbar {
     margin-right: calc(var(--spacing) * -4);
 

diff --git a/ui/src/views/tool/ToolView.vue b/ui/src/views/tool/ToolView.vue
@@ -6,7 +6,7 @@ import ToolApi from '@/api/admin/workspace/tool/tool'
 import SharedApi from '@/api/admin/workspace/shared'
 import ToolStoreApi from '@/api/admin/tool-store.ts'
 import type { Dict, FolderItem, OptionItem, ToolItem, ToolStoreResponse, ToolType } from '@/api/types'
-import { RESOURCE_TYPE, TOOL_TYPE } from '@/api/enums'
+import { RESOURCE_TYPE, TOOL_TYPE, TOOL_SCOPE } from '@/api/enums'
 import { TOOL_TYPE_OPTIONS, FOLDER_ENTRIES, FOLDER_ENTRY_ID } from '@/constants'
 import FolderTree from '@/components/business/folder-tree/index.vue'
 import MoveToDialog from '@/components/business/folder-tree/MoveToDialog.vue'
@@ -68,7 +68,7 @@ const toolType = ref<ToolType | ''>('')
 
 function loadToolsPage(pagination: { currentPage: number; pageSize: number }) {
   const request = isShared.value ? SharedApi : ToolApi
-  const folderId = isShared.value ? {} : { folder_id: currentFolder.value.id || FOLDER_ENTRY_ID.ALL }
+  const folderId = isShared.value ? {} : { folder_id: currentFolder.value.id || FOLDER_ENTRY_ID.ALL, scope: TOOL_SCOPE.WORKSPACE }
   return request.getToolPage(pagination, { ...toolQuery.value, tool_type: toolType.value, ...folderId })
 }
 

diff --git a/ui/src/views/tool/tool-form/tool-custom/ToolFormDrawer.vue b/ui/src/views/tool/tool-form/tool-custom/ToolFormDrawer.vue
@@ -175,7 +175,7 @@ defineExpose({ open })
           <h4 class="mk-title-decoration">输出参数</h4>
           <span class="text-N600">使用工具时显示</span>
         </div>
-        <div class="rounded-md bg-N100! px-3 py-2">结果 {result}</div>
+        <div class="mk-gray-card">结果 {result}</div>
       </section>
     </el-form>
 

diff --git a/ui/src/workflow-canvas/config/node-data.ts b/ui/src/workflow-canvas/config/node-data.ts
@@ -35,10 +35,14 @@ export const baseNode = {
       desc: '',
       prologue: '您好，我是 XXX 小助手，您可以向我提出 XXX 使用问题。\n- XXX 主要功能有什么？\n- XXX 如何收费？\n- 需要转人工服务',
       tts_type: 'BROWSER',
+      stt_model_id_type: 'default',
+      long_term_model_id_type: 'default',
     },
     config: {},
     showNode: true,
     user_input_config: { title: '用户输入' },
+    api_input_field_list: [],
+    chat_input_field_list: [],
     user_input_field_list: [],
   },
 }
@@ -108,7 +112,6 @@ export const aiChatNode = {
   type: WorkflowNodeType.AiChat,
   text: '与 AI 大模型进行对话',
   label: 'AI 对话',
-  height: 340,
   properties: {
     stepName: 'AI 对话',
     config: {

diff --git a/ui/src/workflow-canvas/core/node-container/index.vue b/ui/src/workflow-canvas/core/node-container/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BaseNodeModel, Model } from '@logicflow/core'
+import { reaction, type BaseNodeModel, type Model } from '@logicflow/core'
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { cloneDeep, set } from 'lodash'
 import { iconComponent } from '@/workflow-canvas/icons/utils'
@@ -33,6 +33,13 @@ const getModel = inject('getModel') as () => BaseNodeModel
 const startDragNode = inject<(shapeItem: ShapeItem, event?: PointerEvent) => void>('startDragNode')
 const model = getModel()
 const nodeProperties = computed(() => model.properties as unknown as NodeContainerProperties)
+const nodeSelected = ref(model.isSelected)
+const disposeSelectionReaction = reaction(
+  () => model.isSelected,
+  (isSelected) => {
+    nodeSelected.value = isSelected
+  },
+)
 
 const showAnchor = ref(false)
 const nodeMenuDragClosing = ref(false)
@@ -242,6 +249,7 @@ const initResizeObserver = () => {
 }
 const stepContainerRef = ref<HTMLElement>()
 onBeforeUnmount(() => {
+  disposeSelectionReaction()
   resizeObserver?.disconnect()
   resizeObserver = null
   anchorGuard.reset()
@@ -252,7 +260,7 @@ onBeforeUnmount(() => {
     <div
       ref="stepContainerRef"
       class="step-container shadow-sm overflow-visible rounded-xl border-2 border-white bg-white p-4"
-      :class="{ isSelected: model.isSelected, error: node_status !== 200 }"
+      :class="{ isSelected: nodeSelected, error: node_status !== 200 }"
     >
       <div>
         <div class="flex-between">
@@ -289,15 +297,13 @@ onBeforeUnmount(() => {
             <slot />
             <template v-if="nodeFields.length > 0">
               <div class="flex-between">
-                <h5 class="my-2">
-                  {{ output_title }}
-                </h5>
-                <div v-if="exceptionNodeList.includes(String(model.type))" class="text-right">
-                  <span class="mr-2 mt-2 text-N600">异常捕获</span>
+                <h6 class="mk-title-decoration my-2">{{ output_title }}</h6>
+                <div v-if="exceptionNodeList.includes(String(model.type))" class="flex items-center gap-2">
+                  <span>异常捕获</span>
                   <el-switch v-model="enable_exception" size="small" />
                 </div>
               </div>
-              <div class="rounded-md bg-N100 px-3 py-1 text-N600">
+              <div class="mk-gray-card">
                 <template v-for="(item, index) in nodeFields" :key="index">
                   <div class="flex-between my-2" @mouseenter="showicon = index" @mouseleave="showicon = null">
                     <span class="break-all">{{ item.label }} {{ '{' + item.value + '}' }}</span>
@@ -310,7 +316,7 @@ onBeforeUnmount(() => {
                 </template>
               </div>
 
-              <div v-if="enable_exception" class="mt-2 rounded-md bg-N100 px-3 py-1 text-N600">
+              <div v-if="enable_exception" class="mk-gray-card">
                 <template v-for="(item, index) in abnormalNodeFields" :key="index">
                   <div class="flex-between my-2" @mouseenter="showicon = 'abnormal' + index" @mouseleave="showicon = null">
                     <span class="break-all">{{ item.label }} {{ '{' + item.value + '}' }}</span>

diff --git a/ui/src/workflow-canvas/core/workflow-node.ts b/ui/src/workflow-canvas/core/workflow-node.ts
@@ -129,7 +129,7 @@ export class WorkflowNodeModel extends HtmlNodeModel<WorkflowNodeProperties> {
   validate?: () => Promise<unknown>
 
   setAttributes() {
-    this.width = Number(this.properties.width ?? (String(this.type) === WorkflowNodeType.Base ? 600 : 340))
+    this.width = Number(this.properties.width ?? 320)
     this.height = Number(this.properties.height ?? 300)
     this.text.editable = false
   }