mirror of
https://github.com/NapNeko/NapCatQQ.git
synced 2026-02-13 00:10:27 +00:00
feat: 新版webui
This commit is contained in:
bietiaop
180
napcat.webui/src/components/button/add_button.tsx
Normal file
180
napcat.webui/src/components/button/add_button.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import { Button } from '@heroui/button'
|
||||
import {
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownTrigger
|
||||
} from '@heroui/dropdown'
|
||||
import { Tooltip } from '@heroui/tooltip'
|
||||
import { FaRegCircleQuestion } from 'react-icons/fa6'
|
||||
import { IoAddCircleOutline } from 'react-icons/io5'
|
||||
|
||||
import {
|
||||
HTTPClientIcon,
|
||||
HTTPServerIcon,
|
||||
PCIcon,
|
||||
PlusIcon,
|
||||
WebsocketIcon
|
||||
} from '../icons'
|
||||
|
||||
export interface AddButtonProps {
|
||||
onOpen: (key: keyof OneBotConfig['network']) => void
|
||||
}
|
||||
|
||||
const AddButton: React.FC<AddButtonProps> = (props) => {
|
||||
const { onOpen } = props
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
classNames={{
|
||||
content: 'bg-opacity-30 backdrop-blur-md'
|
||||
}}
|
||||
placement="right"
|
||||
>
|
||||
<DropdownTrigger>
|
||||
<Button
|
||||
color="danger"
|
||||
startContent={<IoAddCircleOutline className="text-2xl" />}
|
||||
>
|
||||
新建
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu
|
||||
aria-label="Create Network Config"
|
||||
color="primary"
|
||||
variant="flat"
|
||||
onAction={(key) => {
|
||||
onOpen(key as keyof OneBotConfig['network'])
|
||||
}}
|
||||
>
|
||||
<DropdownItem
|
||||
key="title"
|
||||
isReadOnly
|
||||
className="cursor-default hover:!bg-transparent"
|
||||
textValue="title"
|
||||
>
|
||||
<div className="flex items-center gap-2 justify-center">
|
||||
<div className="w-5 h-5 -ml-3">
|
||||
<PlusIcon />
|
||||
</div>
|
||||
<div className="text-primary-400">新建网络配置</div>
|
||||
</div>
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key="httpServers"
|
||||
textValue="httpServers"
|
||||
startContent={
|
||||
<div className="w-6 h-6">
|
||||
<HTTPServerIcon />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="flex gap-1 items-center">
|
||||
HTTP服务器
|
||||
<Tooltip
|
||||
content="「由NapCat建立」一个HTTP服务器，你可以「使用框架连接」此服务器或者「自己构造请求发送」至此服务器。NapCat会根据你配置的IP和端口等建立一个地址，你或者你的框架应该连接到这个地址。"
|
||||
showArrow
|
||||
className="max-w-64"
|
||||
>
|
||||
<Button
|
||||
isIconOnly
|
||||
radius="full"
|
||||
size="sm"
|
||||
variant="light"
|
||||
className="w-4 h-4 min-w-0"
|
||||
>
|
||||
<FaRegCircleQuestion />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key="httpClients"
|
||||
textValue="httpClients"
|
||||
startContent={
|
||||
<div className="w-6 h-6">
|
||||
<HTTPClientIcon />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="flex gap-1 items-center">
|
||||
HTTP客户端
|
||||
<Tooltip
|
||||
content="「由框架或者你自己建立」的一个用于「接收」NapCat向你发送请求的客户端，通常框架会提供一个HTTP地址。这个地址是你使用的框架提供的，NapCat会主动连接它。"
|
||||
showArrow
|
||||
className="max-w-64"
|
||||
>
|
||||
<Button
|
||||
isIconOnly
|
||||
radius="full"
|
||||
size="sm"
|
||||
variant="light"
|
||||
className="w-4 h-4 min-w-0"
|
||||
>
|
||||
<FaRegCircleQuestion />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key="websocketServers"
|
||||
textValue="websocketServers"
|
||||
startContent={
|
||||
<div className="w-6 h-6">
|
||||
<WebsocketIcon />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="flex gap-1 items-center">
|
||||
Websocket服务器
|
||||
<Tooltip
|
||||
content="「由NapCat建立」一个WebSocket服务器，你的框架应该连接到此服务器。NapCat会根据你配置的IP和端口等建立一个WebSocket地址，你或者你的框架应该连接到这个地址。"
|
||||
showArrow
|
||||
className="max-w-64"
|
||||
>
|
||||
<Button
|
||||
isIconOnly
|
||||
radius="full"
|
||||
size="sm"
|
||||
variant="light"
|
||||
className="w-4 h-4 min-w-0"
|
||||
>
|
||||
<FaRegCircleQuestion />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key="websocketClients"
|
||||
textValue="websocketClients"
|
||||
startContent={
|
||||
<div className="w-6 h-6">
|
||||
<PCIcon />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="flex gap-1 items-center">
|
||||
Websocket客户端
|
||||
<Tooltip
|
||||
content="「由框架或者你自己建立」的WebSocket，通常框架会「提供」一个ws地址，NapCat会主动连接它。"
|
||||
showArrow
|
||||
className="max-w-64"
|
||||
>
|
||||
<Button
|
||||
isIconOnly
|
||||
radius="full"
|
||||
size="sm"
|
||||
variant="light"
|
||||
className="w-4 h-4 min-w-0"
|
||||
>
|
||||
<FaRegCircleQuestion />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddButton
|
||||
49
napcat.webui/src/components/button/save_buttons.tsx
Normal file
49
napcat.webui/src/components/button/save_buttons.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { Button } from '@heroui/button'
|
||||
import toast from 'react-hot-toast'
|
||||
import { IoMdRefresh } from 'react-icons/io'
|
||||
|
||||
export interface SaveButtonsProps {
|
||||
onSubmit: () => void
|
||||
reset: () => void
|
||||
refresh: () => void
|
||||
isSubmitting: boolean
|
||||
}
|
||||
|
||||
const SaveButtons: React.FC<SaveButtonsProps> = ({
|
||||
onSubmit,
|
||||
reset,
|
||||
isSubmitting,
|
||||
refresh
|
||||
}) => (
|
||||
<div className="max-w-full mx-3 w-96 flex flex-col justify-center gap-3">
|
||||
<div className="flex items-center justify-center gap-2 mt-5">
|
||||
<Button
|
||||
color="default"
|
||||
onPress={() => {
|
||||
reset()
|
||||
toast.success('重置成功')
|
||||
}}
|
||||
>
|
||||
取消更改
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
isLoading={isSubmitting}
|
||||
onPress={() => onSubmit()}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
<Button
|
||||
isIconOnly
|
||||
color="secondary"
|
||||
radius="full"
|
||||
variant="flat"
|
||||
onPress={() => refresh()}
|
||||
>
|
||||
<IoMdRefresh size={24} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default SaveButtons
|
||||
Reference in New Issue
Block a user