feat: unify detail side sheets

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

@@ -17,15 +17,18 @@ export type WorkspaceSideSheetSummaryItem = {
   tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
 };
 
-type WorkspaceSideSheetProps = {
+export type WorkspaceSideSheetBadgeColor = 'blue' | 'green' | 'orange' | 'red' | 'grey';
+
+export type WorkspaceSideSheetProps = {
   className?: string;
+  variant?: 'config' | 'detail';
   visible: boolean;
   ariaLabel: string;
   closeLabel?: string;
   title: ReactNode;
   description: ReactNode;
   badge?: ReactNode;
-  badgeColor?: 'blue' | 'green' | 'orange' | 'red' | 'grey';
+  badgeColor?: WorkspaceSideSheetBadgeColor;
   placement?: 'left' | 'right' | 'top' | 'bottom';
   width?: string | number;
   height?: string | number;
@@ -39,6 +42,7 @@ type WorkspaceSideSheetProps = {
 
 export function WorkspaceSideSheet({
   className = '',
+  variant = 'config',
   visible,
   ariaLabel,
   closeLabel = `关闭${ariaLabel}`,
@@ -57,7 +61,7 @@ export function WorkspaceSideSheet({
   children
 }: WorkspaceSideSheetProps) {
   const sheetId = useId();
-  const sheetClassName = ['v2-workspace-config-sidesheet', className].filter(Boolean).join(' ');
+  const sheetClassName = [`v2-workspace-${variant}-sidesheet`, className].filter(Boolean).join(' ');
   const hasFooter = Boolean(footerNote || secondaryActions.length || primaryAction);
 
   useLayoutEffect(() => {