diff --git a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx index e3d7d3cf..cd9e3144 100644 --- a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx +++ b/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({
- {navGroups.map((group) => ( + {customerNavGroups.map((group) => (
@@ -286,6 +289,48 @@ export function AppShell({ />
))} +
+
+
+ 内部证据区 + 运维证据只在客户问题需要解释时展开,不作为客户默认入口。 +
+ +
+
+ {internalNavGroups.map((group) => ( +
+
+ + {group.title} + {group.audience} + + {group.description} +
+
+ {group.items.map((item) => ( + + ))} +
+
+ ))} +
+
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index d7b281ad..7e1fc503 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/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; } diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx index ded8fa4b..aa254b92 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/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'); });