feat(web): unify vehicle workspace identity

This commit is contained in:
lingniu
2026-07-20 02:02:06 +08:00
parent 6e9a170fbf
commit 537f8d9b45
5 changed files with 212 additions and 5 deletions

View File

@@ -1,4 +1,4 @@
import { Tag, Typography } from '@douyinfe/semi-ui';
import { Avatar, Tag, Typography } from '@douyinfe/semi-ui';
import type { ReactNode } from 'react';
const { Text, Title } = Typography;
@@ -6,6 +6,8 @@ const { Text, Title } = Typography;
export function WorkspaceCommandBar({
title,
description,
eyebrow,
icon,
status,
statusColor = 'blue',
meta,
@@ -15,6 +17,8 @@ export function WorkspaceCommandBar({
}: {
title: ReactNode;
description: ReactNode;
eyebrow?: ReactNode;
icon?: ReactNode;
status?: string;
statusColor?: React.ComponentProps<typeof Tag>['color'];
meta?: ReactNode;
@@ -22,13 +26,23 @@ export function WorkspaceCommandBar({
className?: string;
ariaLabel?: string;
}) {
const rootClassName = ['v2-workspace-command-bar', className].filter(Boolean).join(' ');
const hasIdentity = eyebrow != null || icon != null;
const rootClassName = ['v2-workspace-command-bar', hasIdentity ? 'has-identity' : '', className].filter(Boolean).join(' ');
return (
<header className={rootClassName} aria-label={ariaLabel}>
<div className="v2-workspace-command-copy">
<Title heading={5}>{title}</Title>
<Text type="tertiary">{description}</Text>
{hasIdentity ? <>
<Avatar className="v2-workspace-command-icon" color="blue" size="small">{icon}</Avatar>
<span className="v2-workspace-command-stack">
{eyebrow ? <Text className="v2-workspace-command-eyebrow" type="tertiary">{eyebrow}</Text> : null}
<Title className="v2-workspace-command-title" heading={5}>{title}</Title>
<Text className="v2-workspace-command-description" type="tertiary">{description}</Text>
</span>
</> : <>
<Title className="v2-workspace-command-title" heading={5}>{title}</Title>
<Text className="v2-workspace-command-description" type="tertiary">{description}</Text>
</>}
</div>
{status || meta || actions ? <div className="v2-workspace-command-actions">
{status ? <Tag color={statusColor} type="light" size="small">{status}</Tag> : null}