feat: refine mobile vehicle detail actions

2026-07-19 00:43:37 +08:00
parent 23b632a2e0
commit 862671c083
4 changed files with 173 additions and 22 deletions
--- a/vehicle-data-platform/apps/web/src/v2/pages/VehicleActions.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/VehicleActions.tsx
@@ -0,0 +1,57 @@
+import { IconChevronRight, IconMore } from '@douyinfe/semi-icons';
+import { Button, SideSheet } from '@douyinfe/semi-ui';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import { useSideSheetA11y } from '../hooks/useSideSheetA11y';
+
+export type VehicleAction = {
+  key: string;
+  label: string;
+  icon: ReactNode;
+  to: string;
+  type: 'primary' | 'tertiary';
+};
+
+export default function VehicleActions({
+  actions,
+  mobile,
+  onSelect
+}: {
+  actions: VehicleAction[];
+  mobile: boolean;
+  onSelect: (to: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const primaryActions = actions.filter((action) => action.key === 'switch' || action.key === 'tracks');
+  const overflowActions = actions.filter((action) => action.key !== 'switch' && action.key !== 'tracks');
+  const selectAction = (to: string) => {
+    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>;
+
+  return <>
+    <div className="v2-identity-actions" role="group" aria-label="车辆快捷操作">
+      {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
+      className="v2-vehicle-mobile-actions-sidesheet"
+      visible={open}
+      placement="bottom"
+      height="min(48dvh, 360px)"
+      aria-label="更多车辆操作"
+      title={<div className="v2-vehicle-mobile-actions-title"><strong>更多车辆操作</strong><span>继续查看这辆车的历史、里程与告警</span></div>}
+      onCancel={() => setOpen(false)}
+      footer={<Button block theme="solid" type="primary" onClick={() => setOpen(false)}>完成</Button>}
+    >
+      <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>
+  </>;
+}