feat: 优化 AuditView 样式与交互细节

web/src/assets/styles/app.css

@@ -91,6 +91,9 @@
 .main.settings-main {
   grid-template-rows: minmax(0, 1fr);
 }
+.main.audit-detail-main {
+  grid-template-rows: minmax(0, 1fr);
+}
 .workarea { overflow: auto; padding: 24px; }
 .workarea.chat-workarea {
   min-height: 0;

web/src/assets/styles/views/audit-view.css

@@ -247,6 +247,7 @@ tbody tr.spotlight {
   height: 100%;
   overflow: auto;
   display: grid;
+  align-content: start;
   gap: 16px;
 }
 
@@ -299,6 +300,10 @@ tbody tr.spotlight {
   margin-top: 12px;
 }
 
+.inline-review-meta {
+  margin-top: 10px;
+}
+
 .hero-review-meta span {
   display: inline-flex;
   align-items: center;
@@ -366,7 +371,7 @@ tbody tr.spotlight {
 }
 
 .detail-grid.skill-md-detail-grid {
-  grid-template-columns: minmax(0, 1fr) 360px;
+  grid-template-columns: minmax(0, 1fr) 372px;
   align-items: stretch;
 }
 
@@ -476,6 +481,7 @@ tbody tr.spotlight {
 
 .skill-review-side {
   align-content: start;
+  padding-right: 8px;
 }
 
 .review-card {

web/src/views/AppShellRouteView.vue

@@ -18,14 +18,15 @@
         'workbench-main': activeView === 'workbench',
         'requests-main': activeView === 'requests',
         'approval-main': activeView === 'approval',
-        'policies-main': activeView === 'policies',
+        'policies-main': activeView === 'policies',
-        'audit-main': activeView === 'audit',
+        'audit-main': activeView === 'audit',
-        'employees-main': activeView === 'employees',
+        'audit-detail-main': activeView === 'audit' && auditDetailOpen,
-        'settings-main': activeView === 'settings'
+        'employees-main': activeView === 'employees',
-      }"
+        'settings-main': activeView === 'settings'
+      }"
     >
-      <TopBar
+      <TopBar
-        v-if="activeView !== 'settings'"
+        v-if="activeView !== 'settings' && !(activeView === 'audit' && auditDetailOpen)"
         :current-view="topBarView"
         :search="search"
         :active-view="activeView"
@@ -112,7 +113,7 @@
 
         <ApprovalCenterView v-else-if="activeView === 'approval'" />
         <PoliciesView v-else-if="activeView === 'policies'" @summary-change="knowledgeSummary = $event" />
-        <AuditView v-else-if="activeView === 'audit'" />
+        <AuditView v-else-if="activeView === 'audit'" @detail-open-change="auditDetailOpen = $event" />
         <EmployeeManagementView v-else-if="activeView === 'employees'" @overview-change="employeeSummary = $event" />
         <SettingsView v-else />
       </section>
@@ -151,8 +152,9 @@ import { useAppShell } from '../composables/useAppShell.js'
 import { useSystemState } from '../composables/useSystemState.js'
 import { filterNavItemsByAccess } from '../utils/accessControl.js'
 
-const employeeSummary = ref(null)
+const employeeSummary = ref(null)
-const knowledgeSummary = ref(null)
+const knowledgeSummary = ref(null)
+const auditDetailOpen = ref(false)
 
 const {
   activeCase,

web/src/views/scripts/AuditView.js

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const TYPE_META = {
   skills: {
@@ -545,7 +545,8 @@ const assets = [
 
 export default {
   name: 'AuditView',
-  setup() {
+  emits: ['detail-open-change'],
+  setup(props, { emit }) {
     const tabs = [
       { id: 'skills', label: 'Skills' },
       { id: 'mcp', label: 'MCP' },
@@ -562,6 +563,14 @@ export default {
     const tableColumns = computed(() => activeMeta.value.tableColumns)
     const visibleSkills = computed(() => assets.filter((item) => item.type === activeType.value))
 
+    watch(
+      selectedSkill,
+      (value) => {
+        emit('detail-open-change', Boolean(value))
+      },
+      { immediate: true }
+    )
+
     function openVersionSwitch(version) {
       if (!selectedSkill.value || version.version === selectedSkill.value.version) {
         return