feat(portal-shell): v2.0 P0 shadcn standardization + security + streaming + error handling
- 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 路由生成成功
This commit is contained in:
58
packages/ui-components/src/slot-placeholder.tsx
Normal file
58
packages/ui-components/src/slot-placeholder.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user