feat(web): update TopBar component and useAppShell composable

web/src/components/layout/TopBar.vue

@@ -81,11 +81,25 @@
             </div>
           </div>
         </div>
-      </template>
-
-      <template v-else-if="isRequests">
-        <div class="kpi-chips">
-          <div v-for="kpi in requestKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
+      </template>
+
+      <template v-else-if="isRequestDetail">
+        <div class="detail-alert-strip">
+          <span
+            v-for="alert in detailAlerts"
+            :key="alert.label"
+            class="detail-alert-pill"
+            :class="alert.tone"
+          >
+            <i class="mdi mdi-alert-circle-outline"></i>
+            <span>{{ alert.label }}</span>
+          </span>
+        </div>
+      </template>
+
+      <template v-else-if="isRequests">
+        <div class="kpi-chips">
+          <div v-for="kpi in requestKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
             <span class="chip-value">{{ kpi.value }}<small>单</small></span>
             <span class="chip-label">{{ kpi.label }}</span>
             <span class="chip-delta" :class="kpi.trend">{{ kpi.delta }} <i :class="kpi.arrow"></i></span>
@@ -152,6 +166,14 @@ const props = defineProps({
     type: Object,
     default: () => null
   },
+  detailMode: {
+    type: Boolean,
+    default: false
+  },
+  detailAlerts: {
+    type: Array,
+    default: () => []
+  },
   customRange: {
     type: Object,
     default: () => ({ start: '2024-07-06', end: '2024-07-12' })
@@ -169,6 +191,7 @@ const emit = defineEmits([
 
 const isChat = computed(() => props.activeView === 'chat')
 const isOverview = computed(() => props.activeView === 'overview')
+const isRequestDetail = computed(() => props.activeView === 'requests' && props.detailMode)
 const isRequests = computed(() => props.activeView === 'requests')
 const isApproval = computed(() => props.activeView === 'approval')
 const isPolicies = computed(() => props.activeView === 'policies')
@@ -593,14 +616,53 @@ function buildPresetRangeLabel(label) {
   background: #cbd5e1;
 }
 
-.kpi-chips {
-  display: flex;
-  gap: 10px;
-}
-
-.kpi-chip {
-  display: grid;
-  grid-template-columns: auto auto;
+.kpi-chips {
+  display: flex;
+  gap: 10px;
+}
+
+.detail-alert-strip {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.detail-alert-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid #fed7aa;
+  border-radius: 999px;
+  background: #fff7ed;
+  color: #ea580c;
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.detail-alert-pill i {
+  font-size: 14px;
+}
+
+.detail-alert-pill.success {
+  border-color: #bbf7d0;
+  background: #f0fdf4;
+  color: #059669;
+}
+
+.detail-alert-pill.danger {
+  border-color: #fecaca;
+  background: #fff1f2;
+  color: #dc2626;
+}
+
+.kpi-chip {
+  display: grid;
+  grid-template-columns: auto auto;
   grid-template-rows: auto auto;
   gap: 2px 10px;
   padding: 8px 16px;
@@ -677,12 +739,13 @@ function buildPresetRangeLabel(label) {
     align-items: stretch;
   }
 
-  .top-actions,
-  .search-wrap,
-  .search-wrap.wide,
-  .month-chip,
-  .qa-filter,
-  .new-question-btn {
+  .top-actions,
+  .search-wrap,
+  .search-wrap.wide,
+  .detail-alert-strip,
+  .month-chip,
+  .qa-filter,
+  .new-question-btn {
     width: 100%;
   }