9cedf0c437
- shadcn/ui 标准化：废弃纸感令牌，统一 bg-background/text-foreground 等 - Tailwind v4 + @theme inline，移除 tailwind.config.js - React 19 use() + Suspense 流式渲染，首屏骨架秒出 - 三级错误边界：Route → Section → Widget 层层兜底 - 错误上报：useErrorReport → sendBeacon → /api/log mock 端点 - 三层安全边界：L1 角色门禁 / L2 权限点门禁 / L3 数据范围 - 权限位图 base36 压缩：67 权限点 → ~14 字符，JWT 体积减少 ≥ 99% - notify 统一 Toast 封装，禁止业务直接 import sonner - PluginBoundary 替代 PluginLoader（错误边界 + Suspense + Skeleton 三件套） 验证：typecheck 0 错误 / lint 0 错误 / build 6 路由生成成功
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import type { ReactNode } from "react";
|
||
import { cn } from "./utils/cn";
|
||
|
||
/**
|
||
* SlotPlaceholder - 空 slot 占位组件（portal-shell spec §7.3）
|
||
*
|
||
* 当 slot 中没有可见插件时显示此占位。
|
||
* admin 模式下显示"添加插件"按钮，普通模式下显示空态提示。
|
||
*
|
||
* v2.0 令牌迁移：shadcn 标准令牌
|
||
*
|
||
* @example
|
||
* <SlotPlaceholder slotName="main" isAdmin={false} />
|
||
* <SlotPlaceholder slotName="side" isAdmin={true} onAddPlugin={() => openDialog()} />
|
||
*/
|
||
export interface SlotPlaceholderProps {
|
||
/** slot 名称 */
|
||
slotName: string;
|
||
/** 是否为 admin 模式（admin 模式显示添加按钮） */
|
||
isAdmin?: boolean;
|
||
/** 添加插件回调（admin 模式下点击触发） */
|
||
onAddPlugin?: () => void;
|
||
/** 自定义类名 */
|
||
className?: string;
|
||
}
|
||
|
||
export function SlotPlaceholder({
|
||
slotName,
|
||
isAdmin = false,
|
||
onAddPlugin,
|
||
className,
|
||
}: SlotPlaceholderProps): ReactNode {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"rounded-xl border bg-card p-4 text-sm text-muted-foreground",
|
||
className,
|
||
)}
|
||
>
|
||
{isAdmin ? (
|
||
<div className="flex items-center justify-between">
|
||
<span>slot「{slotName}」暂无插件</span>
|
||
{onAddPlugin ? (
|
||
<button
|
||
type="button"
|
||
onClick={onAddPlugin}
|
||
className="rounded-md bg-primary px-2 py-1 text-xs text-primary-foreground"
|
||
>
|
||
添加插件
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
) : (
|
||
<span>暂无可见插件</span>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|