feat(platform): add mobile vehicle service dock

This commit is contained in:
lingniu
2026-07-06 01:06:59 +08:00
parent cd5336f353
commit 6da5f77267
3 changed files with 109 additions and 0 deletions

View File

@@ -346,6 +346,18 @@ export function AppShell({
/>
<Button theme="solid" type="primary" loading={searching} onClick={search}></Button>
</Space>
<nav className="vp-mobile-service-dock" aria-label="移动端车辆服务快捷入口">
{deliveryActions.map((item) => (
<button
key={item.page}
type="button"
aria-label={`移动端车辆服务快捷入口 ${item.label}`}
onClick={() => (onCustomerTask ?? onChange)(item.page)}
>
{item.label}
</button>
))}
</nav>
<div className="vp-topbar-context">
<div className="vp-service-delivery-strip" aria-label="车辆服务交付条">
<div className="vp-service-delivery-strip-head">

View File

@@ -389,6 +389,10 @@ body {
flex-wrap: wrap;
}
.vp-mobile-service-dock {
display: none;
}
.vp-topbar-time-window {
display: inline-flex;
align-items: center;
@@ -12528,9 +12532,82 @@ button.vp-realtime-command-item:focus-visible {
.vp-topbar {
position: relative;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding: 12px;
}
.vp-mobile-service-dock {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
padding: 8px;
border: 1px solid rgba(22, 100, 255, 0.16);
border-radius: 8px;
background: #ffffff;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.vp-mobile-service-dock button {
min-width: 0;
min-height: 34px;
border: 1px solid rgba(22, 100, 255, 0.14);
border-radius: 7px;
background: #f8fafc;
color: var(--vp-text);
font-size: 12px;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.vp-mobile-service-dock button:focus-visible,
.vp-mobile-service-dock button:hover {
border-color: rgba(22, 100, 255, 0.42);
background: rgba(22, 100, 255, 0.08);
color: var(--vp-primary);
outline: none;
}
.vp-topbar-context {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
overflow: visible;
}
.vp-service-delivery-strip,
.vp-topbar-quick-actions {
display: none;
}
.vp-topbar-time-window {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.vp-topbar-time-window-copy {
width: auto;
}
.vp-topbar-time-window-copy span {
max-width: none;
}
.vp-topbar-time-window-presets,
.vp-topbar-time-window label {
flex-wrap: wrap;
}
.vp-topbar-time-window label {
height: auto;
min-height: 28px;
}
.vp-topbar-time-window input {
width: min(100%, 132px);
}
.vp-evidence-grid,
.vp-action-grid,
.vp-fleet-monitor .semi-card-body,

View File

@@ -96,6 +96,26 @@ test('topbar frames customer work as a vehicle service delivery strip', () => {
expect(screen.getByRole('button', { name: '车辆服务交付条 告警' })).toBeInTheDocument();
});
test('topbar exposes a mobile vehicle service shortcut dock', () => {
vi.spyOn(globalThis, 'fetch').mockImplementation(async () => ({
ok: true,
json: async () => ({
data: { items: [], total: 0, limit: 20, offset: 0, linkHealth: [], runtime: { requestTimeoutMs: 5000 } },
traceId: 'trace-test',
timestamp: 1783094400000
})
}) as Response);
render(<App />);
expect(screen.getByRole('navigation', { name: '移动端车辆服务快捷入口' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '移动端车辆服务快捷入口 地图' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '移动端车辆服务快捷入口 轨迹' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '移动端车辆服务快捷入口 统计' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '移动端车辆服务快捷入口 导出' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '移动端车辆服务快捷入口 告警' })).toBeInTheDocument();
});
test('exposes AMap operations shortcuts when map key is configured', async () => {
window.__LINGNIU_APP_CONFIG__ = { amapWebJsKey: 'amap-web-key' };
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {