feat(platform): add mobile vehicle service dock
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user