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>
129 lines
3.2 KiB
TypeScript
129 lines
3.2 KiB
TypeScript
import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
|
|
|
|
export type PlatformEmptyStateSurface =
|
|
| 'soft'
|
|
| 'dashed'
|
|
| 'subpanel'
|
|
| 'editorDark';
|
|
export type PlatformEmptyStateSize = 'compact' | 'panel' | 'inline';
|
|
export type PlatformEmptyStateTone = 'base' | 'soft';
|
|
|
|
type PlatformEmptyStateBaseProps = {
|
|
children: ReactNode;
|
|
surface?: PlatformEmptyStateSurface;
|
|
size?: PlatformEmptyStateSize;
|
|
tone?: PlatformEmptyStateTone;
|
|
};
|
|
|
|
type PlatformEmptyStateDivProps = Omit<
|
|
HTMLAttributes<HTMLDivElement>,
|
|
'children'
|
|
> & {
|
|
asChild?: false;
|
|
} & PlatformEmptyStateBaseProps;
|
|
|
|
type PlatformEmptyStateButtonProps = Omit<
|
|
ButtonHTMLAttributes<HTMLButtonElement>,
|
|
'children'
|
|
> & {
|
|
asChild: 'button';
|
|
} & PlatformEmptyStateBaseProps;
|
|
|
|
export type PlatformEmptyStateProps =
|
|
| PlatformEmptyStateDivProps
|
|
| PlatformEmptyStateButtonProps;
|
|
|
|
type PlatformEmptyStateClassNameOptions = {
|
|
surface: PlatformEmptyStateSurface;
|
|
size: PlatformEmptyStateSize;
|
|
tone: PlatformEmptyStateTone;
|
|
className?: string;
|
|
};
|
|
|
|
const PLATFORM_EMPTY_STATE_SURFACE_CLASS: Record<
|
|
PlatformEmptyStateSurface,
|
|
string
|
|
> = {
|
|
soft: 'platform-surface platform-surface--soft rounded-[1.35rem]',
|
|
dashed:
|
|
'rounded-[1.35rem] border border-dashed border-[var(--platform-subpanel-border)] bg-white/52',
|
|
subpanel:
|
|
'rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/74',
|
|
editorDark: 'rounded-2xl border border-dashed border-white/12 bg-black/20',
|
|
};
|
|
|
|
const PLATFORM_EMPTY_STATE_SIZE_CLASS: Record<PlatformEmptyStateSize, string> =
|
|
{
|
|
compact: 'px-4 py-3 text-sm leading-6',
|
|
panel:
|
|
'flex min-h-[14rem] items-center justify-center px-6 text-center text-sm',
|
|
inline: 'px-4 py-5 text-center text-sm font-semibold',
|
|
};
|
|
|
|
const PLATFORM_EMPTY_STATE_TONE_CLASS: Record<PlatformEmptyStateTone, string> =
|
|
{
|
|
base: 'text-[var(--platform-text-base)]',
|
|
soft: 'text-[var(--platform-text-soft)]',
|
|
};
|
|
|
|
/**
|
|
* 平台通用空态和轻量加载态。
|
|
* 收口平台列表、作品架和素材选择弹窗中重复的空面板外观。
|
|
*/
|
|
function getPlatformEmptyStateClassName({
|
|
surface,
|
|
size,
|
|
tone,
|
|
className,
|
|
}: PlatformEmptyStateClassNameOptions) {
|
|
return [
|
|
'min-w-0',
|
|
'platform-empty-state',
|
|
PLATFORM_EMPTY_STATE_SURFACE_CLASS[surface],
|
|
PLATFORM_EMPTY_STATE_SIZE_CLASS[size],
|
|
PLATFORM_EMPTY_STATE_TONE_CLASS[tone],
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
}
|
|
|
|
export function PlatformEmptyState({
|
|
children,
|
|
surface = 'soft',
|
|
size = 'compact',
|
|
tone,
|
|
className,
|
|
asChild,
|
|
...emptyStateProps
|
|
}: PlatformEmptyStateProps) {
|
|
const resolvedTone =
|
|
tone ?? (surface === 'subpanel' || size === 'inline' ? 'soft' : 'base');
|
|
const emptyStateClassName = getPlatformEmptyStateClassName({
|
|
surface,
|
|
size,
|
|
tone: resolvedTone,
|
|
className,
|
|
});
|
|
|
|
if (asChild === 'button') {
|
|
const { type = 'button', ...buttonProps } =
|
|
emptyStateProps as ButtonHTMLAttributes<HTMLButtonElement>;
|
|
|
|
return (
|
|
<button {...buttonProps} type={type} className={emptyStateClassName}>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
{...(emptyStateProps as HTMLAttributes<HTMLDivElement>)}
|
|
className={emptyStateClassName}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|