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 测试
2026-06-21 22:56:34 +08:00
parent 24b5b71b0f
commit 1986b0d945
7 changed files with 129 additions and 57 deletions
--- a/web/src/assets/styles/components/top-bar.css
+++ b/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;
--- a/web/src/assets/styles/views/travel-request-detail-view.css
+++ b/web/src/assets/styles/views/travel-request-detail-view.css
@@ -717,8 +717,12 @@

 .application-leader-opinion {
  display: grid;
-  gap: 10px;
-  margin-top: 12px;
+  gap: 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;
-  color: #334155;
+  width: 28px;
+  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;
-  padding: 12px 14px;
+  gap: 10px;
+  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;
-  font-size: 13px;
+  color: #0f172a;
+  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;
  }
 }
-
--- a/web/src/components/layout/TopBar.vue
+++ b/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,
--- a/web/src/views/TravelRequestDetailView.vue
+++ b/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>
-                      <span>{{ event.operator }}</span>
+                    </div>
+                    <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>
--- a/web/tests/ai-sidebar-rail-mode.test.mjs
+++ b/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/)
--- a/web/tests/topbar-ai-mode-switch.test.mjs
+++ b/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;/)
 })
--- a/web/tests/travel-request-detail-leader-approval.test.mjs
+++ b/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 \{/)