{title}
{total}
{children}
{children}
);
};
export default ClickOutside;
================================================
FILE: src/components/Drawer/index.tsx
================================================
import { Drawer } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
interface Props {
title: string;
loading?: boolean;
open?: boolean;
onClose?: (open: boolean) => void;
className?: string;
children: React.ReactNode;
}
export default ({ title, children, open, onClose, loading, className }: Props) => {
const Title = () => {
return (
{title}
onClose?.(false)}
className="group p-3 px-6 hover:bg-red-500 hover:text-white transition-colors cursor-pointer"
>
setDropdownOpen(true)} onBlur={() => setDropdownOpen(false)} className={`absolute right-0 top-full z-40 w-40 space-y-1 rounded-xs border border-stroke dark:border-strokedark bg-white p-1.5 shadow-default dark:bg-boxdark ${dropdownOpen === true ? 'block' : 'hidden'}`}>
fileInputRef?.current?.click()}
onDragOver={handleDragOver}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
className={`w-full h-40 p-4 border border-dashed rounded-lg transition-all duration-300 ${
isDragging ? 'border-primary bg-primary/5' : 'border-[#D7D7D7] hover:border-primary bg-[#FAFAFA]'
} space-y-2 cursor-pointer`}
>
{isDragging ? '释放文件以上传' : '点击或拖动文件到此区域进行上传'}
支持单个或多个上传
{store.user?.name}
超级管理员
{/* 移动端菜单按钮和 Logo 骨架屏 */}
{/* 右侧操作栏骨架屏 */}
{[1, 2, 3].map((item) => (
{!fileList.length && !dirName ?
{fileList.length || (!fileList.length && dirName) ? (
{fileList.map((item, index) => (
) : (
dirList.map((item, index) => (
file.url === item.url) ? 'border-primary' : 'border-gray-100'}`} onClick={() => onHandleSelectImage(item)}>
))}
openDir(item.name)}>
))
)}
{item.name}
{/* 标签容器 */}
);
};
================================================
FILE: src/components/PageTitle.tsx
================================================
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
interface Props {
title: string;
}
export default ({ title }: Props) => {
const location = useLocation();
useEffect(() => {
document.title = title;
}, [location, title]);
return null;
};
================================================
FILE: src/components/RandomAvatar/index.tsx
================================================
import { useMemo } from 'react';
import { createAvatar } from '@dicebear/core';
// 使用指定风格头像
import { pixelArt } from '@dicebear/collection';
export default ({ className }: { className?: string }) => {
const avatar = useMemo(() => {
// 生成一个随机种子
const seed = Math.random().toString(36).substring(2, 15);
// 创建头像
return createAvatar(pixelArt, {
seed: seed, // 使用随机种子
size: 128,
// 其他选项
}).toDataUri();
}, []);
return
{tabs.map((tab) => {
const isActive = activeTab === tab.path;
const icon = getTabIcon(tab.path);
return (
handleTabClick(tab)}
className={`
relative flex items-center gap-2 px-4 h-10 cursor-pointer
transition-all duration-200 hover:text-primary!
${isActive ? 'text-primary' : 'text-gray-500 dark:text-gray-400'}
`}
>
{icon && {icon}}
{tab.title}
{tabs.length > 1 && (
)}
);
})}
更新日志
),
},
],
},
];
// 初始加载时显示骨架屏
if (initialLoading) {
return (
);
}
// 渲染侧边栏组件
return (
);
};
export default Sidebar;
================================================
FILE: src/components/StatusTag/index.tsx
================================================
interface StatusTagProps {
status: number | boolean;
className?: string;
flash?: boolean;
}
export default ({ status, className, flash = false }: StatusTagProps) => {
const enabled = Boolean(status);
const animateClass = flash ? 'animate-pulse' : '';
const pingClass = flash ? 'animate-ping' : '';
return (
{enabled ? (
) : (
)}
);
};
================================================
FILE: src/components/SystemNotification/index.tsx
================================================
import { Modal, Button } from 'antd';
import { GithubOutlined } from '@ant-design/icons';
const SHOW_NOTIFICATION_KEY = 'show_login_notification';
const GITHUB_URL = 'https://github.com/LiuYuYang01/ThriveX-Admin';
interface Props {
open: boolean;
onClose: () => void;
}
export default ({ open, onClose }: Props) => {
// 关闭通知框
const handleClose = () => {
localStorage.removeItem(SHOW_NOTIFICATION_KEY);
onClose();
};
// 跳转到 GitHub
const handleGoToGitHub = () => {
window.open(GITHUB_URL, '_blank');
};
return (
⭐ 喜欢 ThriveX 吗？
如果这个项目对你有帮助，欢迎在 GitHub 上给我们一个 Star！
你的支持是我们持续更新的最大动力 🚀
}
onClick={handleGoToGitHub}
style={{
height: '48px',
fontSize: '16px',
fontWeight: 500,
}}
>
前往 GitHub 点 Star
ThriveX 是一个年轻、高颜值、全开源、永不收费的现代化博客管理系统
{value}
{children}{children}
fileInputRef.current?.click()}
onKeyDown={(e) => e.key === 'Enter' && fileInputRef.current?.click()}
onDragOver={handleDragOver}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
className={`w-full h-40 p-4 border border-dashed rounded-lg transition-all duration-300 ${
isDragging
? 'border-primary bg-primary/5'
: 'border-[#D7D7D7] hover:border-primary bg-[#FAFAFA]'
} space-y-2 cursor-pointer`}
>
{fileList.length > 0 && (
{isDragging ? '文件放在此处即上传' : '点击或拖动文件到此区域'}
仅支持 Markdown 或 JSON 格式
已选择的文件：
-
{fileList.map((file) => (
- {file.name} ))}
你可以下载模板后填写再导入：
)}
{list.map((item, index) => (
{item.name}
))}
);
return (
{visible.map((item, index) => (
{item.name}
))}
{restCount > 0 && (
+{restCount}
)}
);
};
const columns: ColumnsType
{text}
{dayjs(+text).format('YYYY-MM-DD')}
{dayjs(+text).format('HH:mm:ss')}
),
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 165,
align: 'center',
render: (_, record: Article) => (
{/* 筛选区：搜索条件 + 查询/重置 */}
{showBatchActions && (
selectedRowKeys.includes(a.id as number))}
onLoadAll={loadAllArticles}
setLoading={setLoading}
/>
} onClick={() => setIsModalOpen(true)}>
导入文章
delSelected()}>
}>删除选中
)}