This repository has been archived by the owner on Jan 25, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(dashboard): 首页展示
- Loading branch information
Showing
21 changed files
with
587 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { Card, CardBody } from '@nextui-org/card' | ||
| import clsx from 'clsx' | ||
|
|
||
| import { title } from '@/components/primitives' | ||
|
|
||
| export interface NetworkItemDisplayProps { | ||
| count: number | ||
| label: string | ||
| size?: 'sm' | 'md' | ||
| } | ||
|
|
||
| const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({ | ||
| count, | ||
| label, | ||
| size = 'md' | ||
| }) => { | ||
| return ( | ||
| <Card | ||
| className={clsx( | ||
| 'bg-opacity-60 shadow-sm md:rounded-3xl', | ||
| size === 'md' | ||
| ? 'col-span-8 md:col-span-2 bg-danger-50 shadow-danger-100' | ||
| : 'col-span-2 md:col-span-1 bg-warning-100 shadow-warning-200' | ||
| )} | ||
| shadow="sm" | ||
| > | ||
| <CardBody className="items-center md:gap-1 p-1 md:p-2"> | ||
| <div | ||
| className={clsx( | ||
| 'font-outfit flex-1', | ||
| size === 'md' ? 'text-2xl md:text-3xl' : 'text-xl md:text-2xl', | ||
| title({ | ||
| color: size === 'md' ? 'pink' : 'yellow', | ||
| size | ||
| }) | ||
| )} | ||
| > | ||
| {count} | ||
| </div> | ||
| <div | ||
| className={clsx( | ||
| 'whitespace-nowrap text-nowrap flex-shrink-0', | ||
| size === 'md' ? 'text-sm md:text-base' : 'text-xs md:text-sm', | ||
| title({ | ||
| color: size === 'md' ? 'pink' : 'yellow', | ||
| shadow: true, | ||
| size: 'xxs' | ||
| }) | ||
| )} | ||
| > | ||
| {label} | ||
| </div> | ||
| </CardBody> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| export default NetworkItemDisplay |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { Card, CardBody, CardHeader } from '@nextui-org/card' | ||
| import { useRequest } from 'ahooks' | ||
| import { FaCircleInfo } from 'react-icons/fa6' | ||
| import { FaQq } from 'react-icons/fa6' | ||
| import { IoLogoChrome, IoLogoOctocat } from 'react-icons/io' | ||
| import { RiMacFill } from 'react-icons/ri' | ||
|
|
||
| import WebUIManager from '@/controllers/webui_manager' | ||
|
|
||
| import packageJson from '../../package.json' | ||
|
|
||
| export interface SystemInfoItemProps { | ||
| title: string | ||
| icon?: React.ReactNode | ||
| value?: string | ||
| } | ||
|
|
||
| const SystemInfoItem: React.FC<SystemInfoItemProps> = ({ | ||
| title, | ||
| value = '--', | ||
| icon | ||
| }) => { | ||
| return ( | ||
| <div className="flex text-sm gap-1 p-2 items-center shadow-sm shadow-danger-50 dark:shadow-danger-100 rounded text-danger-400"> | ||
| {icon} | ||
| <div className="w-24">{title}</div> | ||
| <div className="text-danger-200">{value}</div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const SystemInfo = () => { | ||
| const { data, loading, error } = useRequest(WebUIManager.getPackageInfo) | ||
| return ( | ||
| <Card className="bg-opacity-60 shadow-sm shadow-danger-50 dark:shadow-danger-100 overflow-visible flex-1"> | ||
| <CardHeader className="pb-0 items-center gap-1 text-danger-500 font-extrabold"> | ||
| <FaCircleInfo className="text-lg" /> | ||
| <span>系统信息</span> | ||
| </CardHeader> | ||
| <CardBody className="flex-1"> | ||
| <div className="flex flex-col justify-between h-full"> | ||
| <SystemInfoItem | ||
| title="NapCat 版本" | ||
| icon={<IoLogoOctocat className="text-xl" />} | ||
| value={ | ||
| error | ||
| ? `错误：${error.message}` | ||
| : loading | ||
| ? '加载中...' | ||
| : data?.version | ||
| } | ||
| /> | ||
| <SystemInfoItem | ||
| title="WebUI 版本" | ||
| icon={<IoLogoChrome className="text-xl" />} | ||
| value={packageJson.version} | ||
| /> | ||
| <SystemInfoItem title="QQ 版本" icon={<FaQq className="text-lg" />} /> | ||
| <SystemInfoItem | ||
| title="系统版本" | ||
| icon={<RiMacFill className="text-xl" />} | ||
| /> | ||
| </div> | ||
| </CardBody> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| export default SystemInfo |
Oops, something went wrong.