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

feat: unify global action workbenches

Browse Source
This commit is contained in:
lingniu
2026-07-19 07:13:09 +08:00
parent 3b5a66b687
commit af608b35e0
8 changed files with 295 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
vehicle-data-platform/apps/web/src/v2/pages/VehicleActions.tsx
View File

@@ -1,8 +1,8 @@
import { IconChevronRight, IconMore } from '@douyinfe/semi-icons';
import { Button, SideSheet } from '@douyinfe/semi-ui';
import { Button } from '@douyinfe/semi-ui';
import type { ReactNode } from 'react';
import { useState } from 'react';
import { useSideSheetA11y } from '../hooks/useSideSheetA11y';
import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
export type VehicleAction = {
key: string;
@@ -28,8 +28,6 @@ export default function VehicleActions({
setOpen(false);
onSelect(to);
};
useSideSheetA11y(open, '.v2-vehicle-mobile-actions-sidesheet', 'v2-vehicle-mobile-actions', '更多车辆操作', '关闭更多车辆操作');
if (!mobile) return <div className="v2-identity-actions" role="group" aria-label="车辆快捷操作">
{actions.map((action) => <Button key={action.key} theme="light" type={action.type} icon={action.icon} aria-label={action.label} onClick={() => onSelect(action.to)}>{action.label}</Button>)}
</div>;
@@ -39,19 +37,25 @@ export default function VehicleActions({
{primaryActions.map((action) => <Button key={action.key} theme="light" type={action.type} icon={action.icon} aria-label={action.label} onClick={() => selectAction(action.to)}>{action.label}</Button>)}
{overflowActions.length ? <Button className="v2-vehicle-more-trigger" theme="light" type="tertiary" icon={<IconMore />} aria-label="更多车辆操作" aria-haspopup="dialog" aria-controls="v2-vehicle-mobile-actions" aria-expanded={open} onClick={() => setOpen(true)}>更多</Button> : null}
</div>
<SideSheet
<WorkspaceSideSheet
className="v2-vehicle-mobile-actions-sidesheet"
variant="action"
visible={open}
placement="bottom"
height="min(48dvh, 360px)"
aria-label="更多车辆操作"
title={<div className="v2-vehicle-mobile-actions-title"><strong>更多车辆操作</strong><span>继续查看这辆车的历史、里程与告警</span></div>}
height="min(48dvh, 380px)"
icon={<IconMore />}
ariaLabel="更多车辆操作"
dialogId="v2-vehicle-mobile-actions"
title="更多车辆操作"
description="继续查看这辆车的历史、里程与告警"
badge={`${overflowActions.length} 项`}
onCancel={() => setOpen(false)}
footer={<Button block theme="solid" type="primary" onClick={() => setOpen(false)}>完成</Button>}
footerNote="选择操作后将自动进入对应车辆页面"
primaryAction={{ label: '完成', onClick: () => setOpen(false) }}
>
<div className="v2-vehicle-mobile-actions-list">
{overflowActions.map((action) => <Button key={action.key} block theme="light" type="tertiary" icon={action.icon} iconPosition="left" aria-label={action.label} onClick={() => selectAction(action.to)}>{action.label}<IconChevronRight /></Button>)}
</div>
</SideSheet>
</WorkspaceSideSheet>
</>;
}

2
vehicle-data-platform/apps/web/src/v2/pages/VehiclePage.test.tsx
View File

@@ -552,7 +552,7 @@ test('uses compact Semi telemetry evidence cards on mobile', async () => {
expect(moreActions).toHaveAttribute('aria-expanded', 'false');
fireEvent.click(moreActions);
expect(await screen.findByRole('dialog', { name: '更多车辆操作' })).toBeVisible();
expect(document.querySelector('.v2-vehicle-mobile-actions-sidesheet')).toHaveClass('semi-sidesheet-bottom');
expect(document.querySelector('.v2-vehicle-mobile-actions-sidesheet')).toHaveClass('v2-workspace-action-sidesheet', 'semi-sidesheet-bottom');
expect(screen.getByRole('button', { name: '历史数据' })).toBeVisible();
expect(screen.getByRole('button', { name: '里程查询' })).toBeVisible();
expect(screen.getByRole('button', { name: '告警事件' })).toBeVisible();