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>
93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export type PlatformIconBadgeSize =
|
|
| 'xs'
|
|
| 'sm'
|
|
| 'base'
|
|
| 'md'
|
|
| 'lg'
|
|
| 'xl'
|
|
| 'xxl';
|
|
export type PlatformIconBadgeShape = 'circle' | 'rounded' | 'xl';
|
|
export type PlatformIconBadgeTone =
|
|
| 'neutral'
|
|
| 'soft'
|
|
| 'softBright'
|
|
| 'hero'
|
|
| 'heroMuted'
|
|
| 'darkAmber'
|
|
| 'success'
|
|
| 'danger';
|
|
|
|
export type PlatformIconBadgeProps = {
|
|
icon: ReactNode;
|
|
label?: string;
|
|
size?: PlatformIconBadgeSize;
|
|
shape?: PlatformIconBadgeShape;
|
|
tone?: PlatformIconBadgeTone;
|
|
className?: string;
|
|
};
|
|
|
|
const PLATFORM_ICON_BADGE_SIZE_CLASS: Record<PlatformIconBadgeSize, string> = {
|
|
xs: 'h-7 w-7',
|
|
sm: 'h-9 w-9',
|
|
base: 'h-10 w-10',
|
|
md: 'h-11 w-11',
|
|
lg: 'h-12 w-12',
|
|
xl: 'h-14 w-14',
|
|
xxl: 'h-20 w-20',
|
|
};
|
|
|
|
const PLATFORM_ICON_BADGE_SHAPE_CLASS: Record<PlatformIconBadgeShape, string> =
|
|
{
|
|
circle: 'rounded-full',
|
|
rounded: 'rounded-[0.85rem]',
|
|
xl: 'rounded-2xl',
|
|
};
|
|
|
|
const PLATFORM_ICON_BADGE_TONE_CLASS: Record<PlatformIconBadgeTone, string> = {
|
|
neutral:
|
|
'bg-[var(--platform-neutral-bg)] text-[var(--platform-neutral-text)]',
|
|
soft: 'bg-white/82 text-[var(--platform-text-strong)] shadow-sm',
|
|
softBright: 'bg-white/84 text-[var(--platform-text-strong)] shadow-sm',
|
|
hero: 'bg-white/18 text-white',
|
|
heroMuted: 'bg-white/18 text-white/72',
|
|
darkAmber: 'border border-amber-400/30 bg-amber-500/15 text-amber-50',
|
|
success:
|
|
'bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
|
|
danger:
|
|
'bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
|
|
};
|
|
|
|
/**
|
|
* 平台中性图标徽章。
|
|
* 统一承接弹窗标题、列表项和小卡片里的非交互图标槽。
|
|
*/
|
|
export function PlatformIconBadge({
|
|
icon,
|
|
label,
|
|
size = 'sm',
|
|
shape = 'circle',
|
|
tone = 'neutral',
|
|
className,
|
|
}: PlatformIconBadgeProps) {
|
|
return (
|
|
<span
|
|
aria-label={label}
|
|
aria-hidden={label ? undefined : true}
|
|
className={[
|
|
'platform-icon-badge',
|
|
'grid shrink-0 place-items-center',
|
|
PLATFORM_ICON_BADGE_SIZE_CLASS[size],
|
|
PLATFORM_ICON_BADGE_SHAPE_CLASS[shape],
|
|
PLATFORM_ICON_BADGE_TONE_CLASS[tone],
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{icon}
|
|
</span>
|
|
);
|
|
}
|