style(web): 移除顶栏 AI 快捷操作区并优化差旅领导意见事件样式

- TopBar 移除 AI 模式下的公司切换/AI 模式切换快捷操作块及 showAiModeUtilityActions 计算属性，清理 top-bar.css 对应样式
- TravelRequestDetailView 领导意见事件重构为状态/意见/审批人结构化布局，travel-request-detail-view.css 补充对应样式
- 同步更新 topbar-ai-mode-switch、ai-sidebar-rail-mode、travel-request-detail-leader-approval 测试

web/src/assets/styles/components/top-bar.css

@@ -380,14 +380,6 @@
   min-width: 0;
 }
 
-.topbar-utility-actions {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-  min-width: 0;
-}
-
 .topbar-icon-btn {
   position: relative;
   width: 34px;
@@ -1329,10 +1321,6 @@
     gap: 12px;
   }
 
-  .topbar-utility-actions {
-    gap: 8px;
-  }
-
   .topbar-icon-btn {
     width: 30px;
     height: 30px;
@@ -1413,7 +1401,6 @@
   .search-wrap,
   .search-wrap.wide,
   .topbar-toolset,
-  .topbar-utility-actions,
   .detail-alert-strip,
   .month-chip,
   .qa-filter,
@@ -1429,10 +1416,6 @@
     justify-content: flex-end;
   }
 
-  .topbar-utility-actions {
-    justify-content: flex-end;
-  }
-
   .topbar-ai-mode-toggle {
     width: 34px;
     height: 34px;

web/src/assets/styles/views/travel-request-detail-view.css

@@ -717,8 +717,12 @@
 
 .application-leader-opinion {
   display: grid;
-  gap: 10px;
+  gap: 12px;
-  margin-top: 12px;
+  margin-top: 14px;
+  padding: 14px;
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), .16);
+  background: linear-gradient(180deg, rgba(248, 251, 255, .98) 0%, #ffffff 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
 }
 
 .application-leader-opinion-head {
@@ -726,7 +730,9 @@
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  color: #475569;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e2e8f0;
+  color: #334155;
   font-size: 14px;
   line-height: 1.5;
 }
@@ -741,15 +747,26 @@
 }
 
 .application-leader-opinion-head span i {
-  margin-top: 1px;
+  width: 28px;
-  color: #334155;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--theme-primary-active, #255b7d);
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), .22);
+  border-radius: 999px;
+  background: rgba(var(--theme-primary-rgb, 58, 124, 165), .08);
   font-size: 18px;
 }
 
 .application-leader-opinion-head strong {
+  padding: 4px 10px;
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), .18);
+  border-radius: 999px;
+  background: rgba(var(--theme-primary-rgb, 58, 124, 165), .08);
   color: var(--theme-primary-active);
   font-weight: 800;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .application-leader-opinion-timeline {
@@ -779,13 +796,19 @@
 }
 
 .application-leader-opinion-event {
+  --leader-opinion-tone: var(--theme-primary, #3a7ca5);
+  --leader-opinion-soft-bg: #f8fbff;
+  --leader-opinion-soft-border: #dbeafe;
   position: relative;
   display: grid;
-  gap: 8px;
+  gap: 10px;
-  padding: 12px 14px;
+  padding: 14px 16px 14px 18px;
   border: 1px solid #dbe4ee;
+  border-left: 4px solid var(--leader-opinion-tone);
   border-radius: 4px;
-  background: #ffffff;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
+  overflow: hidden;
 }
 
 .application-leader-opinion-event::before {
@@ -801,11 +824,23 @@
   box-shadow: 0 0 0 1px rgba(var(--theme-primary-rgb, 58, 124, 165), .34);
 }
 
+.application-leader-opinion-event.danger {
+  --leader-opinion-tone: #dc2626;
+  --leader-opinion-soft-bg: #fff7f7;
+  --leader-opinion-soft-border: #fecaca;
+}
+
 .application-leader-opinion-event.danger::before {
   background: #dc2626;
   box-shadow: 0 0 0 1px rgba(220, 38, 38, .32);
 }
 
+.application-leader-opinion-event.success {
+  --leader-opinion-tone: #16a34a;
+  --leader-opinion-soft-bg: #f0fdf4;
+  --leader-opinion-soft-border: #bbf7d0;
+}
+
 .application-leader-opinion-event.success::before {
   background: #16a34a;
   box-shadow: 0 0 0 1px rgba(22, 163, 74, .32);
@@ -827,8 +862,17 @@
   font-weight: 850;
 }
 
+.application-leader-opinion-event-status {
+  min-height: 30px;
+  padding: 4px 10px;
+  border: 1px solid var(--leader-opinion-soft-border);
+  border-radius: 999px;
+  background: var(--leader-opinion-soft-bg);
+  color: var(--leader-opinion-tone);
+}
+
 .application-leader-opinion-event-head i {
-  color: var(--theme-primary-active, #255b7d);
+  color: currentColor;
   font-size: 16px;
 }
 
@@ -847,10 +891,36 @@
   font-weight: 720;
 }
 
-.application-leader-opinion-event p {
+.application-leader-opinion-event-head time {
+  padding: 4px 9px;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #475569;
+  white-space: nowrap;
+}
+
+.application-leader-opinion-event-body {
+  display: grid;
+  gap: 5px;
+  padding: 10px 12px;
+  border: 1px solid var(--leader-opinion-soft-border);
+  border-radius: 4px;
+  background: var(--leader-opinion-soft-bg);
+}
+
+.application-leader-opinion-event-body span {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 850;
+  line-height: 1.4;
+}
+
+.application-leader-opinion-event-body p {
   margin: 0;
-  color: #334155;
+  color: #0f172a;
-  font-size: 13px;
+  font-size: 15px;
+  font-weight: 850;
   line-height: 1.65;
 }
 
@@ -860,6 +930,23 @@
   gap: 8px;
 }
 
+.application-leader-opinion-event-foot span {
+  min-height: 26px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 9px;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #475569;
+}
+
+.application-leader-opinion-event-foot i {
+  color: var(--leader-opinion-tone);
+  font-size: 14px;
+}
+
 .detail-expense-table {
   --expense-editor-control-height: 34px;
   --expense-editor-control-line-height: 16px;
@@ -2361,4 +2448,3 @@
     border-left: 0;
   }
 }
-

web/src/components/layout/TopBar.vue

@@ -367,23 +367,6 @@
         </div>
       </template>
 
-      <div v-if="showAiModeUtilityActions" class="topbar-utility-actions" aria-label="AI模式快捷操作">
-        <button class="company-switcher" type="button" aria-label="切换公司">
-          <span>{{ displayCompanyName }}</span>
-          <i class="mdi mdi-chevron-down"></i>
-        </button>
-        <button
-          type="button"
-          class="topbar-ai-mode-toggle"
-          :class="{ active: isTopbarAiMode }"
-          :aria-pressed="isTopbarAiMode"
-          :aria-label="topbarWorkbenchModeTitle"
-          :title="topbarWorkbenchModeTitle"
-          @click="toggleTopbarWorkbenchMode"
-        >
-          <span class="topbar-ai-mode-toggle__glyph">AI</span>
-        </button>
-      </div>
     </div>
   </header>
 </template>
@@ -488,7 +471,6 @@ const displayCompanyName = computed(() => String(props.companyName || '远光软
 const isTopbarAiMode = computed(() => props.workbenchMode === 'ai')
 const topbarWorkbenchModeTitle = computed(() => (isTopbarAiMode.value ? 'AI 模式，点击切换传统模式' : '传统模式，点击切换 AI 模式'))
 const isWorkbenchAiHome = computed(() => isWorkbench.value && isTopbarAiMode.value)
-const showAiModeUtilityActions = computed(() => isTopbarAiMode.value && !isWorkbench.value)
 const MAX_NOTIFICATION_ITEMS = 30
 const {
   markDocumentInboxRowRead,

web/src/views/TravelRequestDetailView.vue

@@ -165,15 +165,21 @@
                     :class="event.tone"
                   >
                     <div class="application-leader-opinion-event-head">
-                      <span>
+                      <span class="application-leader-opinion-event-status">
                         <i :class="event.type === 'returned' ? 'mdi mdi-arrow-u-left-top' : 'mdi mdi-check-circle-outline'"></i>
                         {{ event.title }}
                       </span>
                       <time v-if="event.time">{{ event.time }}</time>
                     </div>
+                    <div class="application-leader-opinion-event-body">
+                      <span>意见</span>
                       <p>{{ event.opinion }}</p>
-                    <footer>
+                    </div>
-                      <span>{{ event.operator }}</span>
+                    <footer class="application-leader-opinion-event-foot">
+                      <span class="application-leader-opinion-operator">
+                        <em>审批人</em>
+                        {{ event.operator }}
+                      </span>
                       <span v-if="event.returnCount">第 {{ event.returnCount }} 次退回</span>
                     </footer>
                   </article>

web/tests/ai-sidebar-rail-mode.test.mjs

@@ -44,7 +44,7 @@ test('workbench AI mode swaps the traditional rail for the AI three-layer rail',
   assert.match(appShell, /function openAiSidebarNewChat\(\)/)
   assert.match(appShell, /function openAiSidebarRecent\(item = \{\}\)/)
   assert.match(appShell, /function handleAiConversationRename\(payload = \{\}\)/)
-  assert.match(appShell, /import \{ computed, nextTick, onBeforeUnmount, onMounted, ref, watch \} from 'vue'/)
+  assert.match(appShell, /import \{ computed, nextTick, ref, watch \} from 'vue'/)
   assert.match(appShell, /async function openAiConversationWorkspace\(type, payload = null\)/)
   assert.match(appShell, /const navigation = handleNavigate\('workbench'\)/)
   assert.match(appShell, /if \(navigation && typeof navigation\.then === 'function'\)[\s\S]*await navigation/)

web/tests/topbar-ai-mode-switch.test.mjs

@@ -22,18 +22,23 @@ test('workbench topbar places the colorful AI mode button after the company swit
   assert.doesNotMatch(topbar, /const topbarWorkbenchMode = ref/)
   assert.match(topbar, /const isTopbarAiMode = computed\(\(\) => props\.workbenchMode === 'ai'\)/)
   assert.match(topbar, /const topbarWorkbenchModeTitle = computed/)
-  assert.match(topbar, /const showAiModeUtilityActions = computed\(\(\) => isTopbarAiMode\.value && !isWorkbench\.value\)/)
-  assert.match(topbar, /<div v-if="showAiModeUtilityActions" class="topbar-utility-actions"/)
   assert.match(topbar, /function toggleTopbarWorkbenchMode\(\)/)
   assert.match(topbar, /emit\('toggleWorkbenchMode'\)/)
 })
 
+test('AI mode business pages do not append company or AI buttons to the right side', () => {
+  assert.equal((topbar.match(/class="company-switcher"/g) || []).length, 1)
+  assert.equal((topbar.match(/class="topbar-ai-mode-toggle"/g) || []).length, 1)
+  assert.doesNotMatch(topbar, /showAiModeUtilityActions/)
+  assert.doesNotMatch(topbar, /class="topbar-utility-actions"/)
+})
+
 test('topbar AI mode button keeps a circular colorful text treatment', () => {
   assert.match(topbarStyles, /\.topbar-ai-mode-toggle\s*\{[\s\S]*width:\s*38px;[\s\S]*height:\s*38px;[\s\S]*border-radius:\s*50%;/)
   assert.match(topbarStyles, /\.topbar-ai-mode-toggle\s*\{[\s\S]*conic-gradient\(from 210deg,[\s\S]*border-box;/)
   assert.match(topbarStyles, /\.topbar-ai-mode-toggle__glyph\s*\{[\s\S]*linear-gradient\(135deg,[\s\S]*background-clip:\s*text;[\s\S]*letter-spacing:\s*0;/)
   assert.match(topbarStyles, /\.topbar-ai-mode-toggle:hover,[\s\S]*\.topbar-ai-mode-toggle:focus-visible\s*\{[\s\S]*transform:\s*translateY\(-1px\);/)
-  assert.match(topbarStyles, /\.topbar-utility-actions\s*\{[\s\S]*display:\s*inline-flex;[\s\S]*justify-content:\s*flex-end;/)
+  assert.doesNotMatch(topbarStyles, /\.topbar-utility-actions/)
   assert.match(topbarStyles, /@media \(max-width: 960px\)[\s\S]*\.topbar-ai-mode-toggle\s*\{[\s\S]*width:\s*34px;[\s\S]*height:\s*34px;/)
   assert.match(topbarStyles, /@media \(max-width: 640px\)[\s\S]*\.topbar-ai-mode-toggle\s*\{[\s\S]*flex:\s*0 0 34px;/)
 })

web/tests/travel-request-detail-leader-approval.test.mjs

@@ -129,6 +129,11 @@ test('approval-mode detail collects leader opinion inside confirm dialog before
   assert.match(detailTemplate, /v-for="event in leaderApprovalEvents"/)
   assert.match(detailTemplate, /class="application-leader-opinion-event"/)
   assert.match(detailTemplate, /event\.type === 'returned'/)
+  assert.match(detailTemplate, /class="application-leader-opinion-event-status"/)
+  assert.match(detailTemplate, /class="application-leader-opinion-event-body"/)
+  assert.match(detailTemplate, /审批意见/)
+  assert.match(detailTemplate, /class="application-leader-opinion-event-foot"/)
+  assert.match(detailTemplate, /class="application-leader-opinion-operator"/)
   assert.doesNotMatch(detailTemplate, /leaderApprovalReadonlyText/)
   assert.doesNotMatch(detailTemplate, /\u5f85\u76f4\u5c5e\u9886\u5bfc\u586b\u5199\u5ba1\u6279\u610f\u89c1/)
   assert.match(detailTemplate, /领导意见/)
@@ -204,6 +209,11 @@ test('approval-mode detail collects leader opinion inside confirm dialog before
   assert.match(detailStyles, /\.application-leader-opinion-timeline\.is-single \{[\s\S]*padding-left: 0;/)
   assert.match(detailStyles, /\.application-leader-opinion-timeline\.is-single::before,[\s\S]*\.application-leader-opinion-timeline\.is-single \.application-leader-opinion-event::before \{[\s\S]*display: none;/)
   assert.match(detailStyles, /\.application-leader-opinion-event \{/)
+  assert.match(detailStyles, /\.application-leader-opinion-event \{[\s\S]*border-left: 4px solid var\(--leader-opinion-tone/)
+  assert.match(detailStyles, /\.application-leader-opinion-event-status \{[\s\S]*border-radius: 999px;/)
+  assert.match(detailStyles, /\.application-leader-opinion-event-body \{[\s\S]*background: var\(--leader-opinion-soft-bg/)
+  assert.match(detailStyles, /\.application-leader-opinion-event-body p \{[\s\S]*font-size: 15px;/)
+  assert.match(detailStyles, /\.application-leader-opinion-event-foot span \{[\s\S]*border-radius: 999px;/)
   assert.match(detailStyles, /\.application-leader-opinion-event\.danger::before \{/)
   assert.match(detailStyles, /\.application-leader-opinion-event\.success::before \{/)