LingandRX
945780def8
feat: optimize dashboard/search UX and simplify extension architecture Redesign Dashboard with compact tool grid and recently used tools Improve TopBar search UX with Cmd/Ctrl+K shortcut and better history navigation Reorganize project structure into src/ Migrate i18n from react-i18next to chrome.i18n Remove runtime language switch and settings page Remove HTML/Markdown conversion tools Clean up unused code, dead animations, redundant comments, and imports Improve component consistency with shadcn/ui patterns Replace hardcoded strings/colors with i18n tokens and theme tokens Add comprehensive project documentation and coding standards Fix CI artifact upload workflow and multiple TypeScript/test issues Includes various refactors, UI polish, i18n cleanup, CI improvements, and maintenance updates across the codebase.
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
/**
|
|
* PageSkeleton 组件 - 页面加载骨架屏
|
|
*
|
|
* 用于 Suspense fallback 和初始加载状态，提供平滑的视觉过渡
|
|
* 避免白屏闪烁，减少布局偏移
|
|
*/
|
|
interface PageSkeletonProps {
|
|
/** 骨架屏类型 */
|
|
variant?: 'dashboard' | 'tool';
|
|
}
|
|
|
|
/**
|
|
* 仪表盘卡片骨架屏
|
|
*/
|
|
function DashboardCardSkeleton() {
|
|
return (
|
|
<div className="rounded-xl border border-border p-5 h-[100px]">
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex gap-3 items-center">
|
|
<div className="w-10 h-10 rounded-lg bg-muted animate-pulse" />
|
|
<div>
|
|
<div className="w-24 h-5 bg-muted rounded animate-pulse" />
|
|
<div className="w-32 h-3.5 bg-muted rounded animate-pulse mt-1.5" />
|
|
</div>
|
|
</div>
|
|
<div className="w-3 h-3 rounded-full bg-muted animate-pulse" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 工具页面骨架屏
|
|
*/
|
|
function ToolPageSkeleton() {
|
|
return (
|
|
<div className="p-5">
|
|
{/* 标题区域 */}
|
|
<div className="w-44 h-7 bg-muted rounded animate-pulse mb-4" />
|
|
|
|
{/* 输入区域 */}
|
|
<div className="w-full h-[120px] bg-muted rounded-xl animate-pulse mb-4" />
|
|
|
|
{/* 控制栏 */}
|
|
<div className="flex gap-2 mb-4">
|
|
<div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
|
|
<div className="w-20 h-9 bg-muted rounded-lg animate-pulse" />
|
|
<div className="flex-1" />
|
|
<div className="w-22 h-9 bg-muted rounded-lg animate-pulse" />
|
|
</div>
|
|
|
|
{/* 结果区域 */}
|
|
<div className="w-full h-[160px] bg-muted rounded-xl animate-pulse" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 页面加载骨架屏
|
|
*
|
|
* @param props - PageSkeletonProps
|
|
* @returns 骨架屏 JSX 元素
|
|
*/
|
|
export default function PageSkeleton({ variant = 'dashboard' }: PageSkeletonProps) {
|
|
if (variant === 'tool') {
|
|
return <ToolPageSkeleton />;
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(300px,1fr))] auto-rows-fr gap-4 p-4">
|
|
{Array.from({ length: 6 }).map((_, index) => (
|
|
<DashboardCardSkeleton key={index} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
PageSkeleton.displayName = 'PageSkeleton';
|