feat(platform): separate internal evidence navigation

vehicle-data-platform/apps/web/src/layout/AppShell.tsx

@@ -75,6 +75,8 @@ const navGroups = [
     ]
   }
 ];
+const customerNavGroups = navGroups.filter((group) => group.audience !== '内部');
+const internalNavGroups = navGroups.filter((group) => group.audience === '内部');
 
 const customerPrimaryPath = [
   { label: '车辆地图', page: 'map' as const },
@@ -181,6 +183,7 @@ export function AppShell({
 }) {
   const [keyword, setKeyword] = useState('');
   const [searching, setSearching] = useState(false);
+  const [internalEvidenceExpanded, setInternalEvidenceExpanded] = useState(false);
   const amapConfigured = isAMapConfigured();
   const alertLabel = alertButtonLabel(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount);
   const alertClassName = alertButtonClassName(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount);
@@ -269,7 +272,7 @@ export function AppShell({
             </div>
           </div>
           <div className="vp-nav-groups">
-            {navGroups.map((group) => (
+            {customerNavGroups.map((group) => (
               <div key={group.title} className="vp-nav-group">
                 <div className="vp-nav-section-title">
                   <span className="vp-nav-section-title-main">
@@ -286,6 +289,48 @@ export function AppShell({
                 />
               </div>
             ))}
+            <div className="vp-internal-evidence-zone" aria-label="内部证据区">
+              <div className="vp-internal-evidence-zone-head">
+                <div>
+                  <strong>内部证据区</strong>
+                  <span>运维证据只在客户问题需要解释时展开，不作为客户默认入口。</span>
+                </div>
+                <button
+                  type="button"
+                  aria-label={internalEvidenceExpanded ? '收起内部证据区' : '展开内部证据区'}
+                  onClick={() => setInternalEvidenceExpanded((value) => !value)}
+                >
+                  {internalEvidenceExpanded ? '收起' : '展开'}
+                </button>
+              </div>
+              <div className={internalEvidenceExpanded ? 'vp-internal-evidence-zone-body vp-internal-evidence-zone-body-open' : 'vp-internal-evidence-zone-body'}>
+                {internalNavGroups.map((group) => (
+                  <div key={group.title} className="vp-nav-group vp-nav-group-internal">
+                    <div className="vp-nav-section-title">
+                      <span className="vp-nav-section-title-main">
+                        <span>{group.title}</span>
+                        <Tag size="small" color="grey">{group.audience}</Tag>
+                      </span>
+                      <small>{group.description}</small>
+                    </div>
+                    <div className="vp-internal-evidence-actions">
+                      {group.items.map((item) => (
+                        <button
+                          key={item.itemKey}
+                          type="button"
+                          className={selectedPage === item.itemKey ? 'vp-internal-evidence-action vp-internal-evidence-action-active' : 'vp-internal-evidence-action'}
+                          aria-label={`内部证据区 ${item.text}`}
+                          onClick={() => onChange(item.itemKey as PageKey)}
+                        >
+                          <span>{item.icon}</span>
+                          <strong>{item.text}</strong>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
         </aside>
         <main className="vp-main">

vehicle-data-platform/apps/web/src/styles/global.css

@@ -234,6 +234,114 @@ body {
   line-height: 14px;
 }
 
+.vp-internal-evidence-zone {
+  padding: 10px;
+  border: 1px solid rgba(103, 119, 136, 0.18);
+  border-radius: 8px;
+  background: #f8fafc;
+  display: grid;
+  gap: 8px;
+}
+
+.vp-internal-evidence-zone-head {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.vp-internal-evidence-zone-head > div {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.vp-internal-evidence-zone-head strong {
+  color: var(--vp-text);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-internal-evidence-zone-head span {
+  color: var(--vp-text-muted);
+  font-size: 10px;
+  line-height: 15px;
+}
+
+.vp-internal-evidence-zone-head button {
+  flex: none;
+  padding: 4px 8px;
+  border: 1px solid var(--vp-border);
+  border-radius: 6px;
+  background: #ffffff;
+  color: var(--vp-text-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.vp-internal-evidence-zone-head button:hover,
+.vp-internal-evidence-zone-head button:focus-visible {
+  color: var(--vp-primary);
+  border-color: rgba(22, 100, 255, 0.34);
+  outline: none;
+}
+
+.vp-internal-evidence-zone-body {
+  display: grid;
+  gap: 8px;
+}
+
+.vp-internal-evidence-zone-body:not(.vp-internal-evidence-zone-body-open) .vp-nav-section-title {
+  display: none;
+}
+
+.vp-nav-group-internal .vp-nav-section-title {
+  padding: 2px 2px 4px;
+}
+
+.vp-internal-evidence-actions {
+  display: grid;
+  gap: 6px;
+}
+
+.vp-internal-evidence-action {
+  width: 100%;
+  min-height: 34px;
+  padding: 7px 8px;
+  border: 1px solid rgba(103, 119, 136, 0.18);
+  border-radius: 7px;
+  background: #ffffff;
+  color: var(--vp-text-muted);
+  cursor: pointer;
+  font: inherit;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+}
+
+.vp-internal-evidence-action span {
+  display: inline-flex;
+  color: var(--vp-text-subtle);
+}
+
+.vp-internal-evidence-action strong {
+  color: inherit;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-internal-evidence-action:hover,
+.vp-internal-evidence-action:focus-visible,
+.vp-internal-evidence-action-active {
+  color: var(--vp-primary);
+  border-color: rgba(22, 100, 255, 0.34);
+  background: #ffffff;
+  outline: none;
+}
+
 .vp-main {
   min-width: 0;
 }

vehicle-data-platform/apps/web/src/test/App.test.tsx

@@ -49,6 +49,10 @@ test('renders vehicle platform shell', () => {
   expect(screen.getAllByText('客户').length).toBeGreaterThanOrEqual(3);
   expect(screen.getByText('内部')).toBeInTheDocument();
   expect(screen.getByText('客户主流程外查看链路质量')).toBeInTheDocument();
+  expect(screen.getByText('内部证据区')).toBeInTheDocument();
+  expect(screen.getByText('运维证据只在客户问题需要解释时展开，不作为客户默认入口。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '展开内部证据区' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '内部证据区 运维质量' })).toBeInTheDocument();
   expect(screen.getAllByText('运营总览').length).toBeGreaterThanOrEqual(1);
   expect(getComputedStyle(document.body).minWidth).not.toBe('1280px');
 });