feat: unify global action workbenches

vehicle-data-platform/apps/web/src/v2/shared/WorkspaceSideSheet.tsx

@@ -21,12 +21,14 @@ export type WorkspaceSideSheetBadgeColor = 'blue' | 'green' | 'orange' | 'red' |
 
 export type WorkspaceSideSheetProps = {
   className?: string;
-  variant?: 'config' | 'detail' | 'task' | 'editor';
+  variant?: 'config' | 'detail' | 'task' | 'editor' | 'help' | 'action';
   visible: boolean;
   ariaLabel: string;
   closeLabel?: string;
+  dialogId?: string;
   title: ReactNode;
   description: ReactNode;
+  icon?: ReactNode;
   badge?: ReactNode;
   badgeColor?: WorkspaceSideSheetBadgeColor;
   placement?: 'left' | 'right' | 'top' | 'bottom';
@@ -46,8 +48,10 @@ export function WorkspaceSideSheet({
   visible,
   ariaLabel,
   closeLabel = `关闭${ariaLabel}`,
+  dialogId,
   title,
   description,
+  icon,
   badge,
   badgeColor = 'blue',
   placement = 'right',
@@ -69,12 +73,13 @@ export function WorkspaceSideSheet({
     const apply = () => {
       const dialog = document.querySelector(`[data-workspace-sheet-id="${sheetId}"] .semi-sidesheet-inner`);
       dialog?.setAttribute('aria-label', ariaLabel);
+      if (dialogId) dialog?.setAttribute('id', dialogId);
       dialog?.querySelector('.semi-sidesheet-close')?.setAttribute('aria-label', closeLabel);
     };
     apply();
     const frame = window.requestAnimationFrame(apply);
     return () => window.cancelAnimationFrame(frame);
-  }, [ariaLabel, closeLabel, sheetId, visible]);
+  }, [ariaLabel, closeLabel, dialogId, sheetId, visible]);
 
   return <SideSheet
     className={sheetClassName}
@@ -85,6 +90,7 @@ export function WorkspaceSideSheet({
     width={placement === 'left' || placement === 'right' ? width : undefined}
     height={placement === 'top' || placement === 'bottom' ? height : undefined}
     title={<div className="v2-workspace-config-title">
+      {icon ? <i className="v2-workspace-config-title-icon" aria-hidden="true">{icon}</i> : null}
       <span><strong>{title}</strong><small>{description}</small></span>
       {badge ? <Tag color={badgeColor} type="light" size="small">{badge}</Tag> : null}
     </div>}