kdletters
c5200c7d45
## 变更内容 - 新增基于 shadcn open-code 模式的共享 UI canonical 组件、样式与导出。 - 新增 `/components` 共享组件展示页，并覆盖平台组件、Token、状态和移动端布局。 - 补齐平台展示页的筛选、排序、上传预览、标签、开关和异步状态交互。 - 修复排序导致预览主题变化、筛选弹窗误关闭和入口状态不更新的问题。 - 同步网站与客户端构建别名、依赖、路由测试和项目文档。 ## 验证 - `npm run test -- src/components/shared-components/SharedComponentsShowcasePage.test.tsx` - `npm run typecheck` - `npm run check:encoding` - `npm run build:raw` - `git diff --check` - pre-push 门禁通过 Reviewed-on: http://192.168.35.82/git/GenarrativeAI/Genarrative/pulls/202 Co-authored-by: kdletters <kdletters@qq.com> Co-committed-by: kdletters <kdletters@qq.com>
46 lines
949 B
TypeScript
46 lines
949 B
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
|
|
|
|
import {
|
|
getPlatformPillBadgeClassName,
|
|
type PlatformPillBadgeSize,
|
|
type PlatformPillBadgeTone,
|
|
} from './platformPillBadgeModel';
|
|
|
|
export type {
|
|
PlatformPillBadgeSize,
|
|
PlatformPillBadgeTone,
|
|
} from './platformPillBadgeModel';
|
|
|
|
export type PlatformPillBadgeProps = Omit<
|
|
HTMLAttributes<HTMLSpanElement>,
|
|
'children'
|
|
> & {
|
|
tone?: PlatformPillBadgeTone;
|
|
size?: PlatformPillBadgeSize;
|
|
icon?: ReactNode;
|
|
children: ReactNode;
|
|
};
|
|
|
|
/**
|
|
* 平台胶囊状态标签。
|
|
* 统一承接结果页、作品卡和配置摘要里的小型状态 / 标签 chip。
|
|
*/
|
|
export function PlatformPillBadge({
|
|
tone = 'neutral',
|
|
size = 'sm',
|
|
icon,
|
|
children,
|
|
className,
|
|
...spanProps
|
|
}: PlatformPillBadgeProps) {
|
|
return (
|
|
<span
|
|
{...spanProps}
|
|
className={getPlatformPillBadgeClassName({ tone, size, className })}
|
|
>
|
|
{icon}
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|