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>
101 lines
2.4 KiB
TypeScript
101 lines
2.4 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export type PlatformInfoBlockVariant = 'default' | 'compactRow';
|
|
|
|
export type PlatformInfoBlockProps = {
|
|
label?: ReactNode;
|
|
children: ReactNode;
|
|
variant?: PlatformInfoBlockVariant;
|
|
multiline?: boolean;
|
|
className?: string;
|
|
labelClassName?: string;
|
|
valueClassName?: string;
|
|
};
|
|
|
|
const PLATFORM_INFO_BLOCK_CLASS: Record<PlatformInfoBlockVariant, string> = {
|
|
default:
|
|
'rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/72 px-3 py-2',
|
|
compactRow:
|
|
'flex justify-between gap-2 rounded-[0.85rem] border-0 bg-white/74 px-2.5 py-1.5 sm:gap-3 sm:px-3 sm:py-2',
|
|
};
|
|
|
|
const PLATFORM_INFO_BLOCK_LABEL_CLASS: Record<
|
|
PlatformInfoBlockVariant,
|
|
string
|
|
> = {
|
|
default: 'text-xs font-bold text-[var(--platform-text-soft)]',
|
|
compactRow: 'text-xs font-bold text-[var(--platform-text-muted)] sm:text-sm',
|
|
};
|
|
|
|
function getValueClassName({
|
|
hasLabel,
|
|
multiline,
|
|
variant,
|
|
valueClassName,
|
|
}: {
|
|
hasLabel: boolean;
|
|
multiline: boolean;
|
|
variant: PlatformInfoBlockVariant;
|
|
valueClassName?: string;
|
|
}) {
|
|
if (variant === 'compactRow') {
|
|
return [
|
|
'break-words text-right text-xs font-black leading-5 text-[var(--platform-text-strong)] sm:text-sm',
|
|
valueClassName,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
}
|
|
|
|
return [
|
|
'break-words text-sm text-[var(--platform-text-strong)]',
|
|
hasLabel ? 'mt-1' : null,
|
|
multiline ? 'whitespace-pre-wrap leading-6' : 'font-semibold leading-5',
|
|
valueClassName,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
}
|
|
|
|
/**
|
|
* 平台信息展示块。
|
|
* 统一承接弹窗和详情页中“短标签 + 白底内容”的只读信息 chrome。
|
|
*/
|
|
export function PlatformInfoBlock({
|
|
label,
|
|
children,
|
|
variant = 'default',
|
|
multiline = false,
|
|
className,
|
|
labelClassName,
|
|
valueClassName,
|
|
}: PlatformInfoBlockProps) {
|
|
return (
|
|
<div
|
|
className={[PLATFORM_INFO_BLOCK_CLASS[variant], className]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{label ? (
|
|
<div
|
|
className={[PLATFORM_INFO_BLOCK_LABEL_CLASS[variant], labelClassName]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{label}
|
|
</div>
|
|
) : null}
|
|
<div
|
|
className={getValueClassName({
|
|
hasLabel: Boolean(label),
|
|
multiline,
|
|
variant,
|
|
valueClassName,
|
|
})}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|