From 401129d21f6d87c641037ed2ebf41b05f80e72c2 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 1 Nov 2025 21:11:14 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96=E8=8A=82=E7=82=B9=E5=92=8C?=
 =?UTF-8?q?=E6=99=BA=E8=83=BD=E4=BD=93=E8=AF=A6=E6=83=85=E9=A1=B5=E7=9A=84?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../local_ai_agent/local_ai_agent_toolbar.vue | 85 +++++++++++++++++--
 .../local_ai_node/local_ai_node_toolbar.vue   | 60 ++++++++++++-
 2 files changed, 137 insertions(+), 8 deletions(-)

diff --git a/apps/jingrow/frontend/src/views/pagetype/local_ai_agent/local_ai_agent_toolbar.vue b/apps/jingrow/frontend/src/views/pagetype/local_ai_agent/local_ai_agent_toolbar.vue
index 28e71f1..46136dd 100644
--- a/apps/jingrow/frontend/src/views/pagetype/local_ai_agent/local_ai_agent_toolbar.vue
+++ b/apps/jingrow/frontend/src/views/pagetype/local_ai_agent/local_ai_agent_toolbar.vue
@@ -1,12 +1,24 @@
 <template>
-  <n-space>
-    <n-button type="success" :disabled="executing" @click="handleExecute" v-if="!isNew">
+  <n-space :size="8">
+    <n-button 
+      type="default" 
+      size="medium" 
+      :disabled="executing" 
+      @click="handleExecute" 
+      v-if="!isNew"
+      class="toolbar-btn execute-btn"
+    >
       <template #icon>
         <n-icon><Icon icon="tabler:play" /></n-icon>
       </template>
       {{ executing ? t('Executing...') : t('Execute') }}
     </n-button>
-    <n-button type="info" @click="handleFlowBuilder">
+    <n-button 
+      type="default" 
+      size="medium" 
+      @click="handleFlowBuilder"
+      class="toolbar-btn flow-builder-btn"
+    >
       <template #icon>
         <n-icon><Icon icon="lucide:workflow" /></n-icon>
       </template>
@@ -84,12 +96,73 @@ async function handleFlowBuilder() {
   } catch (_) {}
 }
 
-const canEdit = computed(() => !!(props.context.canEdit?.value ?? props.context.canEdit))
-const loading = computed(() => !!(props.context.loading?.value ?? props.context.loading))
-
 </script>
 
 <style scoped>
+/* 工具栏按钮基础样式 - 与返回按钮一致，使用badge配色方案 */
+.toolbar-btn {
+  background: #f3f4f6 !important;
+  color: #374151 !important;
+  border: 1px solid rgba(0, 0, 0, 0.08) !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 清除 Naive UI 按钮内部的边框元素，避免双重边框 */
+.toolbar-btn :deep(.n-button__border),
+.toolbar-btn :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.toolbar-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.toolbar-btn:hover:not(:disabled) :deep(.n-button__border),
+.toolbar-btn:hover:not(:disabled) :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+/* 执行按钮 - 绿色系（与列表页badge配色一致） */
+.execute-btn {
+  background: #dcfce7 !important;
+  color: #166534 !important;
+  border-color: rgba(34, 197, 94, 0.2) !important;
+}
+
+.execute-btn:hover:not(:disabled) {
+  background: #bbf7d0 !important;
+  color: #15803d !important;
+  border-color: rgba(34, 197, 94, 0.3) !important;
+  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
+}
+
+/* 流程编排按钮 - 蓝色系（与列表页badge配色一致） */
+.flow-builder-btn {
+  background: #e0f2fe !important;
+  color: #0369a1 !important;
+  border-color: rgba(14, 165, 233, 0.2) !important;
+}
+
+.flow-builder-btn:hover:not(:disabled) {
+  background: #bae6fd !important;
+  color: #0284c7 !important;
+  border-color: rgba(14, 165, 233, 0.3) !important;
+  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
+}
+
+.toolbar-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.toolbar-btn:disabled :deep(.n-button__border),
+.toolbar-btn:disabled :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
 </style>
 
 
diff --git a/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_toolbar.vue b/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_toolbar.vue
index ba277db..e79d9ef 100644
--- a/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_toolbar.vue
+++ b/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_toolbar.vue
@@ -1,6 +1,12 @@
 <template>
-  <n-space>
-    <n-button type="info" @click="openSchemaEditor" v-if="!isNew">
+  <n-space :size="8">
+    <n-button 
+      type="default" 
+      size="medium" 
+      @click="openSchemaEditor" 
+      v-if="!isNew"
+      class="toolbar-btn schema-editor-btn"
+    >
       <template #icon>
         <n-icon><Icon icon="tabler:edit" /></n-icon>
       </template>
@@ -79,4 +85,54 @@ async function handleSchemaSave(schemaData: any) {
 </script>
 
 <style scoped>
+/* 工具栏按钮基础样式 - 与返回按钮一致，使用badge配色方案 */
+.toolbar-btn {
+  background: #f3f4f6 !important;
+  color: #374151 !important;
+  border: 1px solid rgba(0, 0, 0, 0.08) !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 清除 Naive UI 按钮内部的边框元素，避免双重边框 */
+.toolbar-btn :deep(.n-button__border),
+.toolbar-btn :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.toolbar-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.toolbar-btn:hover:not(:disabled) :deep(.n-button__border),
+.toolbar-btn:hover:not(:disabled) :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+/* 编辑Schema按钮 - 青绿色系（与列表页badge配色一致） */
+.schema-editor-btn {
+  background: #e6f8f0 !important;
+  color: #0d684b !important;
+  border-color: rgba(13, 104, 75, 0.2) !important;
+}
+
+.schema-editor-btn:hover:not(:disabled) {
+  background: #d1f2e5 !important;
+  color: #0a5543 !important;
+  border-color: rgba(13, 104, 75, 0.3) !important;
+  box-shadow: 0 2px 8px rgba(13, 104, 75, 0.15);
+}
+
+.toolbar-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.toolbar-btn:disabled :deep(.n-button__border),
+.toolbar-btn:disabled :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
 </style>