shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(platform): separate internal evidence navigation

Browse Source
This commit is contained in:
lingniu
2026-07-06 00:18:08 +08:00
parent 79207d5096
commit cca574d5eb
3 changed files with 158 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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">

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

@@ -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;
}

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

@@ -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');
});