From 58a4bb6a737aacecc3950600188b7bc7c542a53c Mon Sep 17 00:00:00 2001
From: Hu Gang <18768366022@163.com>
Date: Wed, 4 Jun 2025 15:57:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8F=92=E4=BB=B6=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/lang/en.ts                           |  1 +
 src/i18n/lang/zh-cn.ts                        |  1 +
 src/views/api/components/McpDrawer.vue        |  2 -
 src/views/api/components/McpServiceDetail.vue | 13 +++-
 src/views/api/components/MonacoEditor.vue     | 26 +++++++-
 src/views/api/index.vue                       |  5 ++
 src/views/app/style.scss                      |  4 +-
 src/views/createapp/components/McpDrawer.vue  | 13 +++-
 src/views/createapp/components/workFlow.vue   | 62 ++++++++++---------
 .../components/workFlowConfig/CustomNode.vue  | 40 ++++++------
 .../workFlowConfig/yamlEditDrawer.vue         | 40 ++++++------
 src/views/settings/Model.vue                  | 37 ++++++-----
 src/views/styles/workFlowArrange.scss         | 11 ++--
 13 files changed, 157 insertions(+), 98 deletions(-)

diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
index a3100b4c..328f740d 100644
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@@ -26,6 +26,7 @@ export default {
     new_api_key: 'New API KEY',
     secret_key: 'Secret Key',
     secret_key_desc: 'Description',
+    confirm_to_delete: 'Confirm to delete this model?',
     placeHolder: {
       url: 'Please enter the URL',
       api_key: 'Please enter the API KEY',
diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts
index 557cfeaa..fb9dada4 100644
--- a/src/i18n/lang/zh-cn.ts
+++ b/src/i18n/lang/zh-cn.ts
@@ -26,6 +26,7 @@ export default {
     new_api_key: '新建 API KEY',
     secret_key: '密钥',
     secret_key_desc: '密钥描述',
+    confirm_to_delete: '确定删除此模型吗？',
     placeHolder: {
       url: '请输入 URL',
       api_key: '请输入 API KEY',
diff --git a/src/views/api/components/McpDrawer.vue b/src/views/api/components/McpDrawer.vue
index cfb007dd..1ae8bfed 100644
--- a/src/views/api/components/McpDrawer.vue
+++ b/src/views/api/components/McpDrawer.vue
@@ -333,8 +333,6 @@ watch(
 
         .editor {
           width: 100%;
-          height: 450px;
-          flex: 1;
         }
       }
     }
diff --git a/src/views/api/components/McpServiceDetail.vue b/src/views/api/components/McpServiceDetail.vue
index ba5af4e1..9fdbb597 100644
--- a/src/views/api/components/McpServiceDetail.vue
+++ b/src/views/api/components/McpServiceDetail.vue
@@ -1,11 +1,14 @@
 <script lang="ts" setup>
 import { CaretRight } from '@element-plus/icons-vue';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { api } from '@/apis';
 import defaultIcon from '@/assets/svgs/app_upload.svg';
 import lightNull from '@/assets/svgs/light_null.svg';
+import DarkNull from '@/assets/svgs/dark_null.svg';
 import { ElEmpty } from 'element-plus';
 import i18n from 'src/i18n';
+import { useChangeThemeStore } from '@/store';
+import { storeToRefs } from 'pinia';
 
 interface McpDetail {
   serviceId: string;
@@ -50,6 +53,12 @@ const emits = defineEmits<{
 
 const { t } = i18n.global;
 
+const { theme } = storeToRefs(useChangeThemeStore());
+
+const emptyImg = computed(() =>
+  theme.value === 'light' ? lightNull : DarkNull,
+);
+
 const activeTab = ref<'description' | 'tools'>('description');
 
 const mcpServiceDetail = ref<McpDetail>();
@@ -197,7 +206,7 @@ watch(
 
               <ElEmpty
                 v-else
-                :image="lightNull"
+                :image="emptyImg"
                 :description="$t('common.null')"
                 style="height: 100%"
               />
diff --git a/src/views/api/components/MonacoEditor.vue b/src/views/api/components/MonacoEditor.vue
index 990df9e3..8490f3ba 100644
--- a/src/views/api/components/MonacoEditor.vue
+++ b/src/views/api/components/MonacoEditor.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import { storeToRefs } from 'pinia';
 import * as monaco from 'monaco-editor';
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import { useChangeThemeStore } from '@/store';
 
 const props = defineProps<{
   code?: string;
@@ -14,6 +16,8 @@ defineExpose({
   setJsonValue,
 });
 
+const { theme } = storeToRefs(useChangeThemeStore());
+
 const monacoEditorRef = ref<HTMLElement | null>(null);
 let editor: monaco.editor.IStandaloneCodeEditor | undefined = undefined;
 
@@ -44,7 +48,7 @@ function initMonacoEditor() {
   editor = monaco.editor.create(monacoEditorRef.value, {
     value: props.code || '{\n  \n}',
     language: 'json',
-    theme: 'vs',
+    theme: theme.value === 'dark' ? 'vs-dark' : 'vs',
     tabSize: 4,
     automaticLayout: true,
     insertSpaces: true,
@@ -53,6 +57,21 @@ function initMonacoEditor() {
   });
 }
 
+watch(
+  () => theme.value,
+  () => {
+    if (editor) {
+      editor.updateOptions({
+        theme: theme.value === 'dark' ? 'vs-dark' : 'vs',
+      });
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
 onMounted(() => {
   initMonacoEditor();
 });
@@ -60,6 +79,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   if (editor) {
     editor.dispose();
+    editor = undefined;
   }
 });
 </script>
@@ -69,7 +89,7 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 .editor-container {
   width: 100%;
-  height: 100%;
+  height: 355px;
 
   :deep(.monaco-editor) {
     outline: none;
diff --git a/src/views/api/index.vue b/src/views/api/index.vue
index 4b6df0cb..f0e39cd9 100644
--- a/src/views/api/index.vue
+++ b/src/views/api/index.vue
@@ -30,6 +30,7 @@
           </el-input>
 
           <el-popover
+            ref="createPopover"
             :popper-style="{
               transform: 'translateY(-10px)',
               padding: '4px 0px',
@@ -302,6 +303,8 @@ import { writeText } from '@/utils';
 
 const { t } = i18n.global;
 
+const createPopover = ref();
+
 const mcpDrawerVisible = ref(false);
 const mcpDetailDrawerVisible = ref(false);
 
@@ -309,6 +312,7 @@ function onOpenMcpDrawer(id?: string) {
   if (id) {
     selectedServiceId.value = id;
   }
+  createPopover.value?.hide();
   mcpDrawerVisible.value = true;
 }
 
@@ -391,6 +395,7 @@ const openSidebar = (
   id: string,
   type: 'semantic_interface' | 'mcp',
 ) => {
+  createPopover.value?.hide();
   if (type === 'semantic_interface') {
     drawer.value = true;
     actions.value = action;
diff --git a/src/views/app/style.scss b/src/views/app/style.scss
index 5447daae..6a861906 100644
--- a/src/views/app/style.scss
+++ b/src/views/app/style.scss
@@ -69,10 +69,10 @@
         width: fit-content;
         display: flex;
         flex-wrap: wrap;
+        align-content: flex-start;
         box-sizing: border-box;
         gap: 16px;
-        max-height: calc(100vh - 370px);
-        min-height: calc(100vh - 370px);
+        height: calc(100vh - 370px);
         overflow-y: auto;
         .appCenterCardSingle {
           box-sizing: border-box;
diff --git a/src/views/createapp/components/McpDrawer.vue b/src/views/createapp/components/McpDrawer.vue
index f4d059ef..00488679 100644
--- a/src/views/createapp/components/McpDrawer.vue
+++ b/src/views/createapp/components/McpDrawer.vue
@@ -1,11 +1,14 @@
 <script lang="ts" setup>
 import { Search } from '@element-plus/icons-vue';
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, watch, computed } from 'vue';
 import { api } from '@/apis';
 import { ElMessage } from 'element-plus';
 import i18n from '@/i18n';
 import { ElEmpty } from 'element-plus';
 import lightNull from '@/assets/svgs/light_null.svg';
+import DarkNull from '@/assets/svgs/dark_null.svg';
+import { storeToRefs } from 'pinia';
+import { useChangeThemeStore } from '@/store';
 
 const { t } = i18n.global;
 
@@ -37,6 +40,12 @@ const emits = defineEmits<{
   (e: 'confirm', mcpList: Mcp[]): void;
 }>();
 
+const { theme } = storeToRefs(useChangeThemeStore());
+
+const emptyImg = computed(() =>
+  theme.value === 'light' ? lightNull : DarkNull,
+);
+
 const mcpList = ref<McpWithChecked[]>([]);
 
 const searchKeyword = ref();
@@ -122,7 +131,7 @@ onMounted(() => {
         </div>
         <ElEmpty
           v-else
-          :image="lightNull"
+          :image="emptyImg"
           :description="$t('common.null')"
           style="height: 100%"
         />
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index bae52fa1..da70f354 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -3,7 +3,7 @@ import '../../styles/workFlowArrange.scss';
 import { onMounted, ref, watch, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ElTooltip, ElMessage } from 'element-plus';
-import { VueFlow, useVueFlow, Panel, Position } from '@vue-flow/core';
+import { VueFlow, useVueFlow } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { MiniMap } from '@vue-flow/minimap';
 import BranchNode from './workFlowConfig/BranchNode.vue';
@@ -25,15 +25,9 @@ import {
 } from '@computing/opendesign-icons';
 import EditYamlDrawer from './workFlowConfig/yamlEditDrawer.vue';
 import { api } from 'src/apis';
-import { BranchSourceIdType, StatusInfoTitle } from './types';
+import { StatusInfoTitle } from './types';
 import { useRoute } from 'vue-router';
-import {
-  nodeTypeToIcon,
-  iconTypeList,
-  getSrcIcon,
-  DefaultViewPortZoom,
-} from './types';
-import yaml from 'js-yaml';
+import { getSrcIcon, DefaultViewPortZoom } from './types';
 import $bus from 'src/bus/index';
 import CustomLoading from '../../customLoading/index.vue';
 import EditFlowName from './workFlowConfig/editFlowName.vue';
@@ -151,7 +145,7 @@ onConnect((e) => {
     type: 'normal',
   });
 });
-const handleChange = (activeList) => {
+const handleChange = () => {
   activeNames.value = activeName.value;
 };
 
@@ -163,12 +157,12 @@ const addWorkFlow = () => {
 };
 // 关闭工作流弹出
 const handleClose = (flowId?: string) => {
-  if(isEditFlowName.value){
+  if (isEditFlowName.value) {
     api.querySingleAppData({ id: route.query.appId }).then((res) => {
       //workflowList 数据更新
       workFlowList.value = res[1]?.result.workflows;
-      choiceFlowId(workFlowList.value.find(item => item.id === flowId));
-    })
+      choiceFlowId(workFlowList.value.find((item) => item.id === flowId));
+    });
   }
   isEditFlowName.value = false;
   isAddWorkFlow.value = false;
@@ -247,7 +241,7 @@ async function layoutGraph(direction) {
 // 拖拽添加
 const dropFunc = (e) => {
   if (!flowObj.value?.flowId) {
-    ElMessage.warning(i18n.global.t('app.create_or_edit_workflow_first'),);
+    ElMessage.warning(i18n.global.t('app.create_or_edit_workflow_first'));
     return;
   }
   // 如果调试弹窗打开，不可拖拽
@@ -297,7 +291,7 @@ const handleDebugDialogOps = (visible) => {
   // 这里将对应的保存
   if (!debugDialogVisible.value) {
     //在点击调试时，默认该
-    if(!updateFlowsDebugStatus.value){
+    if (!updateFlowsDebugStatus.value) {
       flowObj.value.debug = false;
     }
     saveFlow();
@@ -394,7 +388,7 @@ const openEditFlowDialog = (item) => {
   editFlowNameId.value = item.id;
   editFlow(item);
   isEditFlowName.value = true;
-}
+};
 // 点击编辑工作流--查询当前工作流数据-后续添加回显
 const editFlow = (item) => {
   loading.value = true;
@@ -493,7 +487,7 @@ const redrageFlow = (nodesList, edgesList) => {
 };
 
 // 接受工作流调试时获取的相应的数据
-$bus.on('getNodesStatue', (item:any) => {
+$bus.on('getNodesStatue', (item: any) => {
   // 对相应节点修改状态--此处需要分为开始/结束,分支,普通三种节点修改
   try {
     const newLines = item;
@@ -547,7 +541,7 @@ $bus.on('getNodesStatue', (item:any) => {
     } else {
       // do nothing
     }
-  } catch (error) {
+  } catch {
     ElMessage.error(i18n.global.t('semantic.checkFormat'));
   }
   // 修改节点时，需要将对应节点的边也进行修改
@@ -591,7 +585,7 @@ const updateConnectHandle = (nodeId) => {
 };
 
 // 这里是松开鼠标时[拖拽结束]-恢复不再拖拽的handle节点默认状态【对应的是customNode里拖拽节点设置状态】
-const cancelConnectStatus = (e) => {
+const cancelConnectStatus = () => {
   if (connectHandleNodeId.value) {
     // 获取到当前的node,更新
     const node = findNode(connectHandleNodeId.value);
@@ -604,7 +598,7 @@ const cancelConnectStatus = (e) => {
   }
 };
 
-const saveFlow = (updateNodeParameter?,debug?) => {
+const saveFlow = (updateNodeParameter?, debug?) => {
   loading.value = true;
   const appId = route.query?.appId;
   if (!flowObj.value.flowId) {
@@ -737,7 +731,9 @@ defineExpose({
         <div class="copilot-aside nodes" v-if="isCopilotAsideVisible">
           <CustomLoading :loading="apiLoading"></CustomLoading>
           <div class="apiCenterBox">
-            <div class="apiCenterTitle">{{ $t('semantic.semantic_interface_center') }}</div>
+            <div class="apiCenterTitle">
+              {{ $t('semantic.semantic_interface_center') }}
+            </div>
             <div class="apiCenterSearch">
               <el-input
                 v-model="apiSearchValue"
@@ -758,6 +754,7 @@ defineExpose({
                   title="Consistency"
                   :name="item.serviceId"
                   v-for="item in apiServiceList"
+                  :key="item.serviceId"
                 >
                   <template #title>
                     <el-icon
@@ -783,7 +780,13 @@ defineExpose({
                     "
                   >
                     <img class="nodeIcon" :src="getSrcIcon(node)" />
-                    <div class="stanceName">{{ node.name }}</div>
+                    <el-popover :content="node.name">
+                      <template #reference>
+                        <div class="stancesName">
+                          {{ node.name }}
+                        </div>
+                      </template>
+                    </el-popover>
                   </div>
                 </el-collapse-item>
               </el-collapse>
@@ -906,14 +909,17 @@ defineExpose({
           >
             <el-option
               class="workFlowOption"
-              v-for="(item, index) in workFlowList"
+              v-for="item in workFlowList"
               :label="item.name"
               :value="item.name"
               :key="item.id"
               @click="choiceFlowId(item)"
             >
               <div class="flowName">{{ item.name }}</div>
-              <div class="dealIcon editIcon" @click="openEditFlowDialog(item)"></div>
+              <div
+                class="dealIcon editIcon"
+                @click="openEditFlowDialog(item)"
+              ></div>
               <div class="dealIcon delIcon" @click.stop="delFlow(item)"></div>
             </el-option>
             <template #footer class="selectFooter">
@@ -957,19 +963,19 @@ defineExpose({
       <!-- 暂无工作流展示 -->
       <div class="noWorkFlow" v-else>
         <div class="noFlow"></div>
-        <div class="noFlowDesc">{{ $t('flow.no_flow')}}</div>
+        <div class="noFlowDesc">{{ $t('flow.no_flow') }}</div>
         <el-button type="primary" class="w96 addWorkFlow" @click="addWorkFlow">
           {{ $t('flow.create_flow') }}
         </el-button>
       </div>
     </div>
-    <EditFlowName 
-      v-model="isEditFlowName" 
+    <EditFlowName
+      v-model="isEditFlowName"
       :flowObj="flowObj"
       :appId="route.query?.appId"
       :editFlowNameId="editFlowNameId"
       @handleClose="handleClose"
-      ></EditFlowName>
+    ></EditFlowName>
     <!-- 工作流新建弹窗 -->
     <WorkFlowDialog
       v-if="isAddWorkFlow"
diff --git a/src/views/createapp/components/workFlowConfig/CustomNode.vue b/src/views/createapp/components/workFlowConfig/CustomNode.vue
index 6c000a0a..20a33d62 100644
--- a/src/views/createapp/components/workFlowConfig/CustomNode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomNode.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { Position, Handle } from '@vue-flow/core';
-import { ref, onMounted, watch } from 'vue';
+import { ref, watch } from 'vue';
 import NodeMirrorText from '../codeMirror/nodeMirrorText.vue';
 import { CopyDocument, WarnTriangleFilled } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { IconSuccess } from '@computing/opendesign-icons';
-import { nodeTypeToIcon, getSrcIcon, getNodeClass } from '../types';
+import { getSrcIcon, getNodeClass } from '../types';
+import { useI18n } from 'vue-i18n';
 const props = defineProps({
   id: {
     type: String,
@@ -29,6 +30,7 @@ const props = defineProps({
   },
 });
 const emits = defineEmits(['delNode', 'editYamlDrawer', 'updateConnectHandle']);
+const { t } = useI18n();
 
 const statusList = ref(['running', 'success', 'error']);
 const nodeDescription = ref<string[]>([]);
@@ -107,7 +109,7 @@ const handleCopyTextToclipboard = (text) => {
   document.execCommand('copy');
   ElMessage({
     showClose: true,
-    message: $t('feedback.copied_successfully'),
+    message: t('feedback.copied_successfully'),
     icon: IconSuccess,
     customClass: 'o-message--success',
     duration: 2000,
@@ -137,20 +139,7 @@ const handleCopyTextToclipboard = (text) => {
           </el-icon>
           <div class="label">{{ props.data.name }}</div>
         </div>
-        <div class="nodeIdShow" v-if="props.id">
-          <div class="nodeIdText">
-            <span>ID:</span>
-            <span>
-              {{ props.id }}
-            </span>
-          </div>
-          <el-icon
-            class="copydocument"
-            @click="handleCopyTextToclipboard(props.id)"
-          >
-            <CopyDocument />
-          </el-icon>
-        </div>
+
         <div class="moreTip" :class="{ notAllow: props.disabled }">
           <el-popover
             :disabled="props.disabled"
@@ -176,7 +165,7 @@ const handleCopyTextToclipboard = (text) => {
                 )
               "
             >
-            {{ $t('semantic.edit') }}
+              {{ $t('semantic.edit') }}
             </el-button>
             <el-button text class="dealItem" @click="delNode(props.id)">
               {{ $t('semantic.interface_delete') }}
@@ -188,10 +177,25 @@ const handleCopyTextToclipboard = (text) => {
         <div
           v-for="(desc, index) in nodeDescription"
           :class="{ descSign: nodeDescription.length > 1 && !index }"
+          :key="index"
         >
           {{ desc }}
         </div>
       </div>
+      <div class="nodeIdShow" v-if="props.id">
+        <div class="nodeIdText">
+          <span>ID:</span>
+          <span>
+            {{ props.id }}
+          </span>
+        </div>
+        <el-icon
+          class="copydocument"
+          @click="handleCopyTextToclipboard(props.id)"
+        >
+          <CopyDocument />
+        </el-icon>
+      </div>
     </div>
     <Handle
       type="source"
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
index 4630f5ad..dd5ebe9d 100644
--- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -9,7 +9,9 @@
       :before-close="closeDrawer"
     >
       <template #header>
-        <div class="drawerHeader">{{$t('flow.step_configuration')}}-{{ yamlNodeName }}</div>
+        <div class="drawerHeader">
+          {{ $t('flow.step_configuration') }}-{{ yamlNodeName }}
+        </div>
       </template>
       <template #default>
         <div class="drawerBody">
@@ -29,10 +31,7 @@
                 </el-icon>
                 <span>{{ $t(item.title) }}</span>
               </template>
-              <div
-                class="yamlMonacoEditor"
-                v-if="item.type && index === 1"
-              >
+              <div class="yamlMonacoEditor" v-if="item.type && index === 1">
                 <MonacoEditor
                   :yamlContent="item.yamlCode"
                   placeholder="Code goes here..."
@@ -41,7 +40,7 @@
                 />
               </div>
               <div v-else-if="item.type && index === 2">
-                <YamlContentOutput :yamlOutPutContent="item.yamlCode"/>
+                <YamlContentOutput :yamlOutPutContent="item.yamlCode" />
               </div>
               <MirrorText
                 v-else-if="item.type && !index"
@@ -59,7 +58,10 @@
                   :rules="yamlBaseInfoRule"
                   label-position="left"
                 >
-                  <el-form-item prop="name" :label="$t('semantic.interface_name')">
+                  <el-form-item
+                    prop="name"
+                    :label="$t('semantic.interface_name')"
+                  >
                     <el-input
                       v-model="yamlExpress[0].name"
                       :placeholder="$t('semantic.pleaseEnter')"
@@ -68,7 +70,10 @@
                       clearable
                     ></el-input>
                   </el-form-item>
-                  <el-form-item prop="description" :label="$t('semantic.interface_introduction')">
+                  <el-form-item
+                    prop="description"
+                    :label="$t('semantic.interface_introduction')"
+                  >
                     <el-input
                       type="textarea"
                       show-word-limit
@@ -107,7 +112,7 @@ import { IconCaretRight } from '@computing/opendesign-icons';
 import yaml from 'js-yaml';
 import { ElMessage } from 'element-plus';
 import MonacoEditor from 'src/components/monaco/MonacoEditor.vue';
-import YamlContentOutput  from 'src/components/yamloutput/yamlContentOutput.jsx';
+import YamlContentOutput from 'src/components/yamloutput/yamlContentOutput.jsx';
 import i18n from 'src/i18n';
 const visible = ref(true);
 const yamlInputCode = ref();
@@ -116,7 +121,7 @@ const yamlNodeName = ref();
 const infoDisabled = ref(true);
 const yamlExpress = ref([
   {
-    title:'semantic.baseMessage',
+    title: 'semantic.baseMessage',
     type: '',
     name: '',
     description: '',
@@ -209,23 +214,22 @@ const updateNodeYaml = () => {
 };
 </script>
 
-<style lang="scss" scoped> 
-:deep(.el-collapse-item__arrow .is-active){ 
-    top: 0px !important; 
+<style lang="scss" scoped>
+:deep(.el-collapse-item__arrow .is-active) {
+  top: 0px !important;
 }
 .yamlMonacoEditor {
   height: 400px;
 }
 
-.monacoEditorMask{
-  .view-lines{
+.monacoEditorMask {
+  .view-lines {
     position: relative;
   }
-  .view-lines{
+  .view-lines {
     pointer-events: none;
-
   }
-  .view-lines::after{
+  .view-lines::after {
     content: '';
     display: block;
     position: absolute;
diff --git a/src/views/settings/Model.vue b/src/views/settings/Model.vue
index be90ffe3..0b88e6f1 100644
--- a/src/views/settings/Model.vue
+++ b/src/views/settings/Model.vue
@@ -1,12 +1,15 @@
 <script lang="ts" setup>
-import { markRaw, onMounted, ref, watch } from 'vue';
+import { computed, markRaw, onMounted, ref, watch } from 'vue';
 import ModelCard from './components/ModelCard.vue';
 import lightNull from '@/assets/svgs/light_null.svg';
+import DarkNull from '@/assets/svgs/dark_null.svg';
 import { ElEmpty, ElMessage, ElMessageBox } from 'element-plus';
 import AddModel, { ModelProvider } from './components/AddModel.vue';
 import { IconAlarm } from '@computing/opendesign-icons';
 import i18n from '@/i18n';
 import { api } from '@/apis';
+import { storeToRefs } from 'pinia';
+import { useChangeThemeStore } from '@/store';
 
 interface Model {
   llmId: string;
@@ -20,6 +23,12 @@ interface Model {
 
 const { t } = i18n.global;
 
+const { theme } = storeToRefs(useChangeThemeStore());
+
+const emptyImg = computed(() =>
+  theme.value === 'light' ? lightNull : DarkNull,
+);
+
 const models = ref<Model[]>([]);
 
 const modelProviders = ref<ModelProvider[]>([]);
@@ -63,14 +72,16 @@ const beDeleteModelId = ref('');
 
 async function handleDelete(modelId: string) {
   if (!modelId) return;
-  ElMessageBox.confirm('确定删除此模型吗？', '提示', {
+  ElMessageBox.confirm(t('settings.confirm_to_delete'), t('common.tip'), {
+    confirmButtonText: t('common.confirm'),
+    cancelButtonText: t('common.cancel'),
     type: 'warning',
     icon: markRaw(IconAlarm),
   }).then(async () => {
-    const [err, _] = await api.deleteModel(modelId);
+    const [err] = await api.deleteModel(modelId);
     if (err) ElMessage.error(err.message);
     else {
-      ElMessage.success('删除成功');
+      ElMessage.success(t('common.delete_success'));
       queryModels();
       beDeleteModelId.value = '';
       isDeleteVisible.value = false;
@@ -102,6 +113,7 @@ onMounted(() => {
         v-for="item in models"
         :name="item.modelName"
         :icon="item.icon"
+        :key="item.llmId"
         size="small"
       >
         <template #headerRight>
@@ -131,6 +143,7 @@ onMounted(() => {
         :name="item.provider"
         :icon="item.icon"
         :description="item.description"
+        :key="item.provider"
       >
         <template #cardFooter>
           <div class="model-provider-footer">
@@ -139,7 +152,7 @@ onMounted(() => {
         </template>
       </ModelCard>
     </div>
-    <ElEmpty v-else :image="lightNull" :description="t('common.null')" />
+    <ElEmpty v-else :image="emptyImg" :description="t('common.null')" />
   </div>
 
   <AddModel
@@ -149,20 +162,6 @@ onMounted(() => {
     :model="selectedModel"
     :provider="selectedProvider"
   />
-
-  <el-dialog v-model="isDeleteVisible" title="提示" width="432">
-    确定删除此模型吗？
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="isDeleteVisible = false">
-          {{ t('common.cancel') }}
-        </el-button>
-        <el-button type="primary" @click="">
-          {{ t('common.delete') }}
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
 </template>
 <style lang="scss" scoped>
 .model {
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index 42613588..48992a9d 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -157,8 +157,11 @@
       border-radius: 4px;
     }
     .stancesName {
-      flex: 1;
+      width: 100%;
       text-align: left;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     &:hover {
       background-color: var(--flow-bg-color);
@@ -349,7 +352,7 @@
             rgba(90, 179, 255, 0.15)
           );
         }
-        .warnTiangleIcon{
+        .warnTiangleIcon {
           font-size: 20px;
         }
         .warnTiangleIcon svg path {
@@ -402,7 +405,7 @@
         font-size: 12px;
         color: var(--o-text-color-tertiary);
       }
-      .descSign{
+      .descSign {
         color: red !important;
         font-weight: 600 !important;
       }
@@ -512,7 +515,7 @@
   .nodeIdShow {
     display: flex;
     align-items: center;
-    width: 50%;
+    gap: 8px;
     .nodeIdText {
       flex: 1;
       color: #575d6c;
-- 
Gitee