From ba6f63fcbd65e6ef571176973a7f6af8b7eaf871 Mon Sep 17 00:00:00 2001
From: 666ghj <670939375@qq.com>
Date: Thu, 11 Dec 2025 13:54:30 +0800
Subject: [PATCH] Enhance MainView.vue with workflow step indicators and
 improved styling

- Updated button labels to display localized text for different view modes.
- Added a workflow step indicator to provide users with progress context.
- Enhanced styling for header elements, including font adjustments and layout improvements for better visual consistency.
---
 frontend/src/views/MainView.vue | 40 +++++++++++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/MainView.vue b/frontend/src/views/MainView.vue
index 0dab5c3..7aef973 100644
--- a/frontend/src/views/MainView.vue
+++ b/frontend/src/views/MainView.vue
@@ -15,13 +15,17 @@
             :class="{ active: viewMode === mode }"
             @click="viewMode = mode"
           >
-            {{ mode.toUpperCase() }}
+            {{ { graph: '图谱', split: '双栏', workbench: '工作台' }[mode] }}
           </button>
         </div>
       </div>
 
       <div class="header-right">
-        <!-- Optional user info or status -->
+        <div class="workflow-step">
+          <span class="step-num">Step 1/5</span>
+          <span class="step-name">图谱构建</span>
+        </div>
+        <div class="step-divider"></div>
         <span class="status-indicator" :class="statusClass">
           <span class="dot"></span>
           {{ statusText }}
@@ -391,6 +395,7 @@ onUnmounted(() => {
 }
 
 .brand {
+  font-family: 'JetBrains Mono', monospace;
   font-weight: 800;
   font-size: 18px;
   letter-spacing: 1px;
@@ -429,6 +434,37 @@ onUnmounted(() => {
   gap: 8px;
   font-size: 12px;
   color: #666;
+  font-weight: 500;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.workflow-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.step-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 700;
+  color: #999;
+}
+
+.step-name {
+  font-weight: 700;
+  color: #000;
+}
+
+.step-divider {
+  width: 1px;
+  height: 14px;
+  background-color: #E0E0E0;
 }
 
 .dot {