![\"ThriveX](\"https://bu.dusays.com/2024/11/17/6739adf188f64.png\")
\n ![\"License:](\"https://img.shields.io/badge/License-AGPL--3.0-blue.svg?style=flat-square&logo=gnu\"){kind=icon}
\n ![\"Stars\"](\"https://img.shields.io/github/stars/LiuYuYang01/ThriveX-Admin?style=flat-square&logo=github&color=gold\")
\n ![\"Forks\"](\"https://img.shields.io/github/forks/LiuYuYang01/ThriveX-Admin?style=flat-square&logo=github\")
\n ![\"ThriveX](\"https://bu.dusays.com/2026/03/08/69ad27c95c51f.jpg\")
\n![\"WeChat](\"https://bu.dusays.com/2025/06/03/683e96eb43ad8.jpg\")
\n\n
\n );\n};\n"
},
{
"path": "src/components/ClickOutside.tsx",
"content": "import React, { useRef, useEffect } from 'react';\n\ninterface Props {\n children: React.ReactNode;\n exceptionRef?: React.RefObject{title}
\n\n\n
\n {total}
\n\n\n {children}\n
\n \n {children}\n
\n );\n};\n\nexport default ClickOutside;\n"
},
{
"path": "src/components/Drawer/index.tsx",
"content": "import { Drawer } from 'antd';\nimport { CloseOutlined } from '@ant-design/icons';\n\ninterface Props {\n title: string;\n loading?: boolean;\n open?: boolean;\n onClose?: (open: boolean) => void;\n className?: string;\n children: React.ReactNode;\n}\n\nexport default ({ title, children, open, onClose, loading, className }: Props) => {\n const Title = () => {\n return (\n \n \n onClose?.(false)}\n className=\"group p-3 px-6 hover:bg-red-500 hover:text-white transition-colors cursor-pointer\"\n >\n
\n \n );\n };\n\n return (\n {title}
\n \n \n\n
\n );\n};\n\nexport default DropdownDefault;\n"
},
{
"path": "src/components/Empty/index.tsx",
"content": "import Empty from './empty.svg';\n\nexport default () => {\n return (\n 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'}`}>\n \n\n \n
\n \n 
空空如也\n
\n );\n};\n"
},
{
"path": "src/components/FileUpload/index.tsx",
"content": "import { useRef, useState, useCallback } from 'react';\nimport { InboxOutlined } from '@ant-design/icons';\nimport { message, Modal, Radio, Select, Spin } from 'antd';\nimport { useUserStore } from '@/stores';\nimport { DirList } from '@/types/app/file';\nimport { baseURL } from '@/utils/request';\nimport Compressor from 'compressorjs';\n\ninterface Props {\n multiple?: boolean;\n dir: DirList;\n open: boolean;\n onSuccess: (urls: string[]) => void;\n onCancel: () => void;\n}\n\nexport default ({ multiple, dir, open, onCancel, onSuccess }: Props) => {\n const store = useUserStore();\n const dragCounterRef = useRef(0);\n\n const fileInputRef = useRef\n setIsCompressionUpload(e.target.value ? true : false)}\n >\n 无损上传 \n 压缩上传 \n \n\n {isCompressionUpload && (\n
\n\n \n
\n\n {isDragging ? '释放文件以上传' : '点击或拖动文件到此区域进行上传'}
\n支持单个或多个上传
\n \n\n \n\n \n {store.user?.name}\n 超级管理员\n \n\n \n 
\n \n\n \n
\n \n
\n \n {/* 移动端菜单按钮和 Logo 骨架屏 */}\n
\n\n {/* 右侧操作栏骨架屏 */}\n \n
\n\n {/* PageTab 骨架屏 */}\n \n
\n \n {[1, 2, 3].map((item) => (\n
\n \n
\n - \n
\n
\n \n
\n \n
\n\n \n
\n \n
\n\n \n {\n e.stopPropagation();\n props.setSidebarOpen(!props.sidebarOpen);\n }}\n className=\"z-99999 block rounded-xs border border-stroke bg-white p-1 shadow-xs dark:border-strokedark dark:bg-boxdark lg:hidden\"\n >\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n 
\n \n
\n\n \n
\n \n
\n - \n
\n
\n \n \n
\n );\n};\n"
},
{
"path": "src/components/Material/index.scss",
"content": ".FilePage {\n .ant-image {\n display: block;\n width: 100%;\n\n .ant-image-img {\n width: 100%;\n height: auto;\n display: block;\n }\n }\n}\n\n// 自定义图片预览样式\n.customAntdPreviewsItem {\n overflow: hidden;\n background: #fff;\n border-radius: 10px;\n\n .anticon {\n font-size: 20px;\n color: #5d5d5d;\n padding: 10px;\n\n &:hover {\n color: #60a5fa;\n }\n }\n}"
},
{
"path": "src/components/Material/index.tsx",
"content": "import { useEffect, useState, useRef } from 'react';\nimport { Image, Spin, message, Button } from 'antd';\nimport { CheckOutlined } from '@ant-design/icons';\nimport { Modal } from 'antd';\nimport Masonry from 'react-masonry-css';\nimport { getFileListAPI, getDirListAPI } from '@/api/file';\nimport { File, FileDir } from '@/types/app/file';\nimport errorImg from '@/pages/file/image/error.png';\nimport fileSvg from '@/pages/file/image/file.svg';\nimport { PiKeyReturnFill } from 'react-icons/pi';\nimport FileUpload from '@/components/FileUpload';\nimport './index.scss';\n\ninterface Props {\n multiple?: boolean;\n maxCount?: number;\n open: boolean;\n onClose: () => void;\n onSelect?: (files: string[]) => void;\n}\n\n// Masonry 布局的响应式断点配置\nconst breakpointColumnsObj = {\n default: 4,\n 1100: 3,\n 700: 2,\n 500: 1,\n};\n\nexport default ({ multiple, open, onClose, onSelect, maxCount }: Props) => {\n // 加载状态\n const [loading, setLoading] = useState(false);\n // 当前页码\n const [page, setPage] = useState(1);\n // 是否还有更多数据\n const [hasMore, setHasMore] = useState(true);\n // 防止重复加载的引用\n const loadingRef = useRef(false);\n // 文件列表数据\n const [fileList, setFileList] = useState\n {!fileList.length && !dirName ?
\n\n \n {fileList.length || (!fileList.length && dirName) ? (\n \n {fileList.map((item, index) => (\n \n ) : (\n dirList.map((item, index) => (\n
\n file.url === item.url) ? 'border-primary' : 'border-gray-100'}`} onClick={() => onHandleSelectImage(item)}>\n
\n ))}\n \n
\n \n
\n )}\n openDir(item.name)}>\n 
\n
\n ))\n )}\n {item.name}
\n\n {/* 标签容器 */}\n
\n \n );\n};\n"
},
{
"path": "src/components/PageTitle.tsx",
"content": "import { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\n\ninterface Props {\n title: string;\n}\n\nexport default ({ title }: Props) => {\n const location = useLocation();\n\n useEffect(() => {\n document.title = title;\n }, [location, title]);\n\n return null;\n};\n"
},
{
"path": "src/components/RandomAvatar/index.tsx",
"content": "import { useMemo } from 'react';\nimport { createAvatar } from '@dicebear/core';\n\n// 使用指定风格头像\nimport { pixelArt } from '@dicebear/collection';\n\nexport default ({ className }: { className?: string }) => {\n const avatar = useMemo(() => {\n // 生成一个随机种子\n const seed = Math.random().toString(36).substring(2, 15);\n\n // 创建头像\n return createAvatar(pixelArt, {\n seed: seed, // 使用随机种子\n size: 128,\n // 其他选项\n }).toDataUri();\n }, []);\n\n return \n
\n \n {tabs.map((tab) => {\n const isActive = activeTab === tab.path;\n const icon = getTabIcon(tab.path);\n\n return (\n handleTabClick(tab)}\n className={`\n relative flex items-center gap-2 px-4 h-10 cursor-pointer\n transition-all duration-200 hover:text-primary!\n ${isActive ? 'text-primary' : 'text-gray-500 dark:text-gray-400'}\n `}\n >\n {icon && {icon}}\n {tab.title}\n {tabs.length > 1 && (\n \n )}\n
\n );\n })}\n \n 更新日志\n \n
\n ),\n },\n ],\n },\n ];\n\n // 初始加载时显示骨架屏\n if (initialLoading) {\n return (\n \n );\n }\n\n // 渲染侧边栏组件\n return (\n \n );\n};\n\nexport default Sidebar;\n"
},
{
"path": "src/components/StatusTag/index.tsx",
"content": "interface StatusTagProps {\n status: number | boolean;\n className?: string;\n flash?: boolean;\n}\n\nexport default ({ status, className, flash = false }: StatusTagProps) => {\n const enabled = Boolean(status);\n const animateClass = flash ? 'animate-pulse' : '';\n const pingClass = flash ? 'animate-ping' : '';\n\n return (\n \n {enabled ? (\n
\n );\n};\n"
},
{
"path": "src/components/SystemNotification/index.tsx",
"content": "import { Modal, Button } from 'antd';\nimport { GithubOutlined } from '@ant-design/icons';\n\nconst SHOW_NOTIFICATION_KEY = 'show_login_notification';\nconst GITHUB_URL = 'https://github.com/LiuYuYang01/ThriveX-Admin';\n\ninterface Props {\n open: boolean;\n onClose: () => void;\n}\n\nexport default ({ open, onClose }: Props) => {\n // 关闭通知框\n const handleClose = () => {\n localStorage.removeItem(SHOW_NOTIFICATION_KEY);\n onClose();\n };\n\n // 跳转到 GitHub\n const handleGoToGitHub = () => {\n window.open(GITHUB_URL, '_blank');\n };\n\n return (\n \n \n \n
\n ) : (\n \n \n \n
\n )}\n \n
\n \n
\n \n
\n\n ⭐ 喜欢 ThriveX 吗？
\n\n 如果这个项目对你有帮助，欢迎在 GitHub 上给我们一个 Star！\n
\n 你的支持是我们持续更新的最大动力 🚀\n
\n
\n\n \n
\n ThriveX 是一个年轻、高颜值、全开源、永不收费的现代化博客管理系统
\n\n
\n )\n}"
},
{
"path": "src/components/WangEditor/index.scss",
"content": ".w-e-text-container {\n .w-e-bar {\n display: none;\n }\n}"
},
{
"path": "src/components/WangEditor/index.tsx",
"content": "import { useState, useEffect, useImperativeHandle, forwardRef } from 'react';\nimport { Editor, Toolbar } from '@wangeditor-next/editor-for-react';\nimport { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor-next/editor';\nimport '@wangeditor-next/editor/dist/css/style.css';\nimport './index.scss';\n\nexport default forwardRef((_props, ref) => {\n // editor 实例\n const [editor, setEditor] = useState\n
\n {value}
\n\n {children}\n\n setHtml(editor.getHtml())} mode=\"default\" className=\"min-h-64\" />\n
\n );\n});\n"
},
{
"path": "src/hooks/useAssistant.tsx",
"content": "import { useState, useEffect } from 'react';\nimport { message } from 'antd';\nimport { testAssistantConnection, callAssistantAPI } from '@/services/assistant';\nimport { Assistant } from '@/types/app/assistant';\nimport { delAssistantDataAPI, getAssistantListAPI, addAssistantDataAPI, editAssistantDataAPI, setDefaultAssistantAPI } from '@/api/assistant';\n\nexport default function useAssistant() {\n const [loading, setLoading] = useState(false);\n const [testingMap, setTestingMap] = useState\n
\n );\n};\n"
},
{
"path": "src/main.tsx",
"content": "import ReactDOM from 'react-dom/client';\nimport { BrowserRouter as Router } from 'react-router-dom';\nimport App from './App';\nimport '@/styles/index.css';\n\nconst app = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\n\napp.render(\n \n
\n \n \n \n
\n {children}
\n \n fileInputRef.current?.click()}\n onKeyDown={(e) => e.key === 'Enter' && fileInputRef.current?.click()}\n onDragOver={handleDragOver}\n onDragEnter={handleDragEnter}\n onDragLeave={handleDragLeave}\n onDrop={handleDrop}\n className={`w-full h-40 p-4 border border-dashed rounded-lg transition-all duration-300 ${\n isDragging\n ? 'border-primary bg-primary/5'\n : 'border-[#D7D7D7] hover:border-primary bg-[#FAFAFA]'\n } space-y-2 cursor-pointer`}\n >\n
\n\n \n
\n \n {isDragging ? '文件放在此处即上传' : '点击或拖动文件到此区域'}\n
\n\n 仅支持 Markdown 或 JSON 格式\n
\n\n
\n )}\n\n {fileList.length === 0 && (\n 已选择的文件：
\n- \n {fileList.map((file) => (\n
\n 你可以下载模板后填写再导入：\n
\n )}\n \n \n );\n};\n\nexport default ArticleImportModal;\n"
},
{
"path": "src/pages/article/index.tsx",
"content": "import { useState, useEffect, useRef } from 'react';\nimport { Link } from 'react-router-dom';\n\nimport { Table, Button, Tag, notification, Popconfirm, Form, Input, Select, DatePicker, message, Tooltip, Space, Divider, Popover } from 'antd';\nimport type { ColumnsType } from 'antd/es/table';\nimport type { TableRowSelection } from 'antd/es/table/interface';\nimport { DeleteOutlined, FormOutlined, InboxOutlined, SearchOutlined, ClearOutlined, EyeOutlined, CommentOutlined } from '@ant-design/icons';\nimport { HiOutlineChevronDown, HiOutlineChevronUp } from 'react-icons/hi';\nimport dayjs from 'dayjs';\n\nimport Title from '@/components/Title';\nimport ArticleImportModal from './components/ArticleImportModal';\nimport ArticleExport from './components/ArticleExport';\n\nimport { getCateListAPI } from '@/api/cate';\nimport { getTagListAPI } from '@/api/tag';\nimport { delArticleDataAPI, getArticlePagingAPI, addArticleDataAPI, delBatchArticleDataAPI } from '@/api/article';\n\nimport type { Tag as ArticleTag } from '@/types/app/tag';\nimport type { Cate as ArticleCate } from '@/types/app/cate';\nimport type { Article, Config, ArticleFilterQueryParams, ArticleFilterDataForm } from '@/types/app/article';\n\nimport { useWebStore } from '@/stores';\n\nconst { RangePicker } = DatePicker;\n\nexport default () => {\n const [loading, setLoading] = useState\n \n \n
\n \n {list.map((item, index) => (\n \n {item.name}\n \n ))}\n
\n );\n return (\n \n {visible.map((item, index) => (\n \n {item.name}\n \n ))}\n\n {restCount > 0 && (\n \n \n +{restCount}\n \n \n )}\n
\n );\n };\n\n const columns: ColumnsType\n {text}\n
\n \n {dayjs(+text).format('YYYY-MM-DD')}\n {dayjs(+text).format('HH:mm:ss')}\n
\n ),\n },\n {\n title: '操作',\n key: 'action',\n fixed: 'right',\n width: 165,\n align: 'center',\n render: (_, record: Article) => (\n \n
\n );\n }\n\n return (\n \n \n
\n\n \n
\n \n
\n\n {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (\n \n \n \n \n \n
\n \n \n \n
\n \n \n
\n ))}\n \n \n \n
\n \n setIsModalOpen(false)}\n onImport={handleArticleImport}\n />\n
\n );\n};\n"
},
{
"path": "src/pages/assistant/index.tsx",
"content": "import { useState, useEffect, useRef } from 'react';\nimport { Button, Card, Form, Input, Modal, Select, Tooltip, Space, Skeleton, Avatar, Tag, Dropdown, MenuProps } from 'antd';\nimport { DeleteOutlined, FormOutlined, PlusOutlined, InfoCircleOutlined, MoreOutlined, ApiOutlined, ThunderboltFilled } from '@ant-design/icons';\nimport { ImSwitch } from 'react-icons/im';\n\nimport Title from '@/components/Title';\nimport useAssistant from '@/hooks/useAssistant';\nimport { Assistant } from '@/types/app/assistant';\n\n// 模型信息\nconst modelInfoMap: Record\n (\n
\n\n \n {/* 筛选区：搜索条件 + 查询/重置 */}\n \n\n {showBatchActions && (\n
\n\n \n \n\n
\n )}\n \n selectedRowKeys.includes(a.id as number))}\n onLoadAll={loadAllArticles}\n setLoading={setLoading}\n />\n\n } onClick={() => setIsModalOpen(true)}>\n 导入文章\n \n delSelected()}>\n }>删除选中\n \n
\n \n 当前第 {filter.page} / {Math.ceil(totalCount / (filter.size || 8))} 页 | 共 {totalCount} 条数据\n
\n ),\n onChange: (page, size) => setFilter((prev) => ({ ...prev, page, size: size || prev.size })),\n onShowSizeChange: (_, size) => setFilter((prev) => ({ ...prev, page: 1, size })),\n className: 'px-6! py-4!',\n }}\n className=\"[&_.ant-table-thead>tr>th]:bg-gray-50! dark:[&_.ant-table-thead>tr>th]:bg-boxdark-2! [&_.ant-table-thead>tr>th]:font-medium! [&_.ant-table-thead>tr>th]:text-gray-500! dark:[&_.ant-table-thead>tr>th]:text-gray-400!\"\n scroll={{ x: 1400 }}\n />\n \n {/* Title 骨架屏 */}\n .ant-card-body]:py-2! [&>.ant-card-body]:px-5! mb-2\">\n \n\n {/* 卡片网格骨架屏 */}\n
\n );\n }\n\n return (\n \n
\n \n {[1, 2, 3, 4, 5, 6].map((item) => (\n \n \n ))}\n
\n \n
\n \n
\n \n
\n \n\n
\n \n
\n \n \n <Button type=\"primary\" onClick={() => setIsModalOpen(true)}>\n 添加助手\n </Button>\n \n\n {/* 卡片网格区域 */}\n setIsModalOpen(true)}\n >\n
\n\n \n {list.map((item) => {\n const info = modelInfoMap[item.model];\n const theme = getModelTheme(item.model);\n const isTesting = testingMap[item.id];\n const isDefault = !!item.isDefault;\n\n // 下拉菜单项\n const menuItems: MenuProps['items'] = [\n {\n key: 'edit',\n label: '编辑配置',\n icon: \n {/* 卡片头部：图标与名称 */}\n
\n\n {/* 卡片底部：主要操作 */}\n \n \n } />\n \n
\n\n {/* 卡片内容：URL显示 */}\n \n \n {theme.icon}\n \n\n
\n\n {/* 更多操作菜单 */}\n \n \n \n {info ? info.label : item.model}\n \n\n {info && (\n \n \n )}\n \n
\n \n {item.name}\n
\n\n \n \n {item.url}\n
\n \n
\n \n
\n \n );\n })}\n\n {/* 空状态下的添加按钮（如果没有数据或者作为最后一个Card） */}\n \n \n \n 操作\n \n \n
\n ),\n key: item.id || 0,\n children: item.children ? toTreeData(item.children) : [],\n };\n });\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const toCascaderOptions: any = (data: Cate[], isRoot: boolean = true) => [\n ...(isRoot ? [{ value: 0, label: '一级分类' }] : []),\n ...data.map((item) => ({\n value: item.id!,\n label: item.name,\n children: item.children ? toCascaderOptions(item.children, false) : undefined,\n })),\n ];\n\n if (initialLoading) {\n return (\n \n {item.icon}\n {item.name}\n
\n\n \n .ant-card-body]:p-4! dark:border-strokedark!\">\n \n\n .ant-card-body]:p-6! dark:border-strokedark!\">\n \n
\n );\n }\n\n return (\n \n
\n \n {[1, 2, 3, 4, 5, 6].map((item) => (\n
\n \n
\n ))}\n \n
\n {item <= 3 && (\n \n {[1, 2, 3].map((child) => (\n
\n )}\n \n
\n ))}\n \n \n <Button\n type=\"primary\"\n onClick={() => addCateData(0)}\n >\n 新增分类\n </Button>\n \n\n .ant-card-body]:p-6! dark:border-strokedark! dark:bg-boxdark!`}\n >\n \n \n \n\n \n \n \n \n \n\n {isCateShow && (\n \n \n \n )}\n\n \n {\n const type = e.target.value;\n setIsCateShow(type === 'nav');\n }}\n >\n \n 分类\n \n \n 导航\n \n \n \n\n \n \n \n \n \n
\n );\n};\n"
},
{
"path": "src/pages/comment/index.tsx",
"content": "import { useState, useEffect, useRef } from 'react';\nimport dayjs from 'dayjs';\n\nimport { message, Table, Popconfirm, Button, Modal, Form, Input, DatePicker, Tooltip } from 'antd';\nimport TextArea from 'antd/es/input/TextArea';\nimport { ColumnsType } from 'antd/es/table';\nimport { DeleteOutlined, SendOutlined, SearchOutlined, ClearOutlined } from '@ant-design/icons';\n\nimport { addCommentDataAPI, getCommentListAPI, delCommentDataAPI } from '@/api/comment';\nimport Title from '@/components/Title';\nimport { Comment, FilterForm } from '@/types/app/comment';\nimport { useWebStore, useUserStore } from '@/stores';\n\nexport default () => {\n const [loading, setLoading] = useState(false);\n const [initialLoading, setInitialLoading] = useState\n \n \n \n \n \n \n
\n\n \n \n \n \n \n \n \n
\n\n \n \n {\n setComment(record);\n setIsReplyModalOpen(true);\n }}\n icon={ \n\n delCommentData(record.id!)}>\n \n } />\n \n \n
\n ),\n },\n ];\n\n const { RangePicker } = DatePicker;\n\n const delCommentData = async (id: number) => {\n setLoading(true);\n\n try {\n await delCommentDataAPI(id);\n await getCommentList();\n message.success('🎉 删除评论成功');\n } catch (error) {\n console.error(error);\n setLoading(false);\n }\n };\n\n const onFilterSubmit = async (values: FilterForm) => {\n try {\n setLoading(true);\n const query = {\n key: values?.title,\n content: values?.content,\n startDate: values.createTime?.[0]?.valueOf()?.toString(),\n endDate: values.createTime?.[1]?.valueOf()?.toString(),\n };\n const { data } = await getCommentListAPI({ query });\n setList(data);\n } catch (error) {\n console.error(error);\n } finally {\n setLoading(false);\n }\n };\n\n // 回复内容\n const [replyInfo, setReplyInfo] = useState('');\n const [isReplyModalOpen, setIsReplyModalOpen] = useState(false);\n const onHandleReply = async () => {\n try {\n setBtnLoading(true);\n\n await addCommentDataAPI({\n avatar: user.avatar,\n url: web.url,\n content: replyInfo,\n commentId: comment?.id ?? 0,\n auditStatus: 1,\n email: user.email,\n name: user.name,\n articleId: comment?.articleId ?? 0,\n createTime: new Date().getTime().toString(),\n });\n\n message.success('🎉 回复评论成功');\n getCommentList();\n setIsReplyModalOpen(false);\n setReplyInfo('');\n } catch (error) {\n console.error(error);\n } finally {\n setBtnLoading(false);\n }\n };\n\n // 初始加载时显示骨架屏（与 article 一致）\n if (initialLoading) {\n return (\n \n
\n );\n }\n\n return (\n \n \n
\n\n \n
\n \n
\n\n {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (\n \n \n \n \n
\n \n \n \n
\n \n \n
\n ))}\n \n \n \n
\n \n setIsReplyModalOpen(false)}>\n
\n (\n
\n\n \n \n
\n\n \n 共 {totalCount} 条数据\n
\n ),\n className: 'px-6! py-4!',\n }}\n className=\"[&_.ant-table-thead>tr>th]:bg-gray-50! dark:[&_.ant-table-thead>tr>th]:bg-boxdark-2! [&_.ant-table-thead>tr>th]:font-medium! [&_.ant-table-thead>tr>th]:text-gray-500! dark:[&_.ant-table-thead>tr>th]:text-gray-400!\"\n />\n