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>
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
export type PlatformPillBadgeTone =
|
|
| 'muted'
|
|
| 'neutral'
|
|
| 'neutralSolid'
|
|
| 'lightOverlay'
|
|
| 'success'
|
|
| 'warning'
|
|
| 'danger'
|
|
| 'cool'
|
|
| 'profile'
|
|
| 'profileAccent'
|
|
| 'darkSoft'
|
|
| 'darkNeutral'
|
|
| 'darkSky'
|
|
| 'darkEmerald'
|
|
| 'darkAmber'
|
|
| 'darkRose';
|
|
|
|
export type PlatformPillBadgeSize = 'xxs' | 'xs' | 'sm';
|
|
|
|
const PLATFORM_PILL_BADGE_TONE_CLASS: Record<PlatformPillBadgeTone, string> = {
|
|
muted:
|
|
'border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)] text-[var(--platform-text-soft)]',
|
|
neutral:
|
|
'border-[var(--platform-subpanel-border)] bg-white/72 text-[var(--platform-text-base)]',
|
|
neutralSolid:
|
|
'border-transparent bg-[var(--platform-neutral-bg)] text-[var(--platform-neutral-text)]',
|
|
lightOverlay: 'border-white/30 bg-white/24 text-current',
|
|
success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
|
|
warning:
|
|
'border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] text-[var(--platform-warm-text)]',
|
|
danger:
|
|
'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
|
|
cool: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
|
|
profile: 'border-rose-100 bg-rose-50 text-zinc-600',
|
|
profileAccent: 'border-rose-100 bg-rose-50 text-[#ff4056]',
|
|
darkSoft: 'border-white/10 bg-white/6 text-zinc-100',
|
|
darkNeutral: 'border-white/10 bg-black/20 text-zinc-200',
|
|
darkSky: 'border-sky-300/20 bg-sky-500/10 text-sky-100',
|
|
darkEmerald: 'border-emerald-300/20 bg-emerald-500/10 text-emerald-100',
|
|
darkAmber: 'border-amber-300/20 bg-amber-500/10 text-amber-100',
|
|
darkRose: 'border-rose-300/20 bg-rose-500/10 text-rose-100',
|
|
};
|
|
|
|
const PLATFORM_PILL_BADGE_SIZE_CLASS: Record<PlatformPillBadgeSize, string> = {
|
|
xxs: 'px-2.5 py-1 text-[10px]',
|
|
xs: 'px-2.5 py-0.5 text-[11px]',
|
|
sm: 'px-3 py-1 text-xs',
|
|
};
|
|
|
|
export function getPlatformPillBadgeClassName({
|
|
tone = 'neutral',
|
|
size = 'sm',
|
|
className,
|
|
}: {
|
|
tone?: PlatformPillBadgeTone;
|
|
size?: PlatformPillBadgeSize;
|
|
className?: string;
|
|
} = {}) {
|
|
return [
|
|
'inline-flex items-center gap-1 rounded-full border font-black',
|
|
PLATFORM_PILL_BADGE_SIZE_CLASS[size],
|
|
PLATFORM_PILL_BADGE_TONE_CLASS[tone],
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
}
|