unify Semi UI workspace command hierarchy

This commit is contained in:
lingniu
2026-07-18 03:36:18 +08:00
parent e39140c408
commit 3cebfe1982
12 changed files with 372 additions and 79 deletions

View File

@@ -0,0 +1,40 @@
import { Tag, Typography } from '@douyinfe/semi-ui';
import type { ReactNode } from 'react';
const { Text, Title } = Typography;
export function WorkspaceCommandBar({
title,
description,
status,
statusColor = 'blue',
meta,
actions,
className = '',
ariaLabel
}: {
title: ReactNode;
description: ReactNode;
status?: string;
statusColor?: React.ComponentProps<typeof Tag>['color'];
meta?: ReactNode;
actions?: ReactNode;
className?: string;
ariaLabel?: string;
}) {
const rootClassName = ['v2-workspace-command-bar', 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>
</div>
{status || meta || actions ? <div className="v2-workspace-command-actions">
{status ? <Tag color={statusColor} type="light" size="small">{status}</Tag> : null}
{meta ? <span className="v2-workspace-command-meta">{meta}</span> : null}
{actions}
</div> : null}
</header>
);
}