feat: 新版webui

napcat.webui/src/components/display_card/common_card.tsx

@@ -0,0 +1,120 @@
+import { Button, ButtonGroup } from '@heroui/button'
+import { Switch } from '@heroui/switch'
+import { useState } from 'react'
+import { CgDebug } from 'react-icons/cg'
+import { FiEdit3 } from 'react-icons/fi'
+import { MdDeleteForever } from 'react-icons/md'
+
+import DisplayCardContainer from './container'
+
+type NetworkType = OneBotConfig['network']
+
+export type NetworkDisplayCardFields<T extends keyof NetworkType> = Array<{
+  label: string
+  value: NetworkType[T][0][keyof NetworkType[T][0]]
+  render?: (
+    value: NetworkType[T][0][keyof NetworkType[T][0]]
+  ) => React.ReactNode
+}>
+
+export interface NetworkDisplayCardProps<T extends keyof NetworkType> {
+  data: NetworkType[T][0]
+  showType?: boolean
+  typeLabel: string
+  fields: NetworkDisplayCardFields<T>
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const NetworkDisplayCard = <T extends keyof NetworkType>({
+  data,
+  showType,
+  typeLabel,
+  fields,
+  onEdit,
+  onEnable,
+  onDelete,
+  onEnableDebug
+}: NetworkDisplayCardProps<T>) => {
+  const { name, enable, debug } = data
+  const [editing, setEditing] = useState(false)
+
+  const handleEnable = () => {
+    setEditing(true)
+    onEnable().finally(() => setEditing(false))
+  }
+
+  const handleDelete = () => {
+    setEditing(true)
+    onDelete().finally(() => setEditing(false))
+  }
+
+  const handleEnableDebug = () => {
+    setEditing(true)
+    onEnableDebug().finally(() => setEditing(false))
+  }
+
+  return (
+    <DisplayCardContainer
+      action={
+        <ButtonGroup
+          fullWidth
+          isDisabled={editing}
+          radius="full"
+          size="sm"
+          variant="shadow"
+        >
+          <Button color="warning" startContent={<FiEdit3 />} onPress={onEdit}>
+            编辑
+          </Button>
+
+          <Button
+            color={debug ? 'success' : 'default'}
+            startContent={<CgDebug />}
+            onPress={handleEnableDebug}
+          >
+            {debug ? '关闭调试' : '开启调试'}
+          </Button>
+          <Button
+            color="danger"
+            startContent={<MdDeleteForever />}
+            onPress={handleDelete}
+          >
+            删除
+          </Button>
+        </ButtonGroup>
+      }
+      enableSwitch={
+        <Switch
+          isDisabled={editing}
+          isSelected={enable}
+          onChange={handleEnable}
+        />
+      }
+      tag={showType && typeLabel}
+      title={name}
+    >
+      <div className="grid grid-cols-2 gap-1">
+        {fields.map((field, index) => (
+          <div
+            key={index}
+            className={`flex items-center gap-2 ${
+              field.label === 'URL' ? 'col-span-2' : ''
+            }`}
+          >
+            <span className="text-default-400">{field.label}</span>
+            {field.render ? (
+              field.render(field.value)
+            ) : (
+              <span>{field.value}</span>
+            )}
+          </div>
+        ))}
+      </div>
+    </DisplayCardContainer>
+  )
+}
+
+export default NetworkDisplayCard

napcat.webui/src/components/display_card/container.tsx

@@ -0,0 +1,57 @@
+import { Card, CardBody, CardFooter, CardHeader } from '@heroui/card'
+import clsx from 'clsx'
+
+import { title } from '../primitives'
+
+export interface ContainerProps {
+  title: string
+  tag?: React.ReactNode
+  action: React.ReactNode
+  enableSwitch: React.ReactNode
+  children: React.ReactNode
+}
+
+export interface DisplayCardProps {
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const DisplayCardContainer: React.FC<ContainerProps> = ({
+  title: _title,
+  action,
+  tag,
+  enableSwitch,
+  children
+}) => {
+  return (
+    <Card className="bg-opacity-50 backdrop-blur-sm">
+      <CardHeader className={'pb-0 flex items-center'}>
+        {tag && (
+          <div className="text-center text-default-400 mb-1 absolute top-0 left-1/2 -translate-x-1/2 text-sm pointer-events-none bg-warning-100 dark:bg-warning-50 px-2 rounded-b">
+            {tag}
+          </div>
+        )}
+        <h2
+          className={clsx(
+            title({
+              color: 'foreground',
+              size: 'xs',
+              shadow: true
+            }),
+            'truncate'
+          )}
+        >
+          {_title}
+        </h2>
+        <div className="ml-auto">{enableSwitch}</div>
+      </CardHeader>
+      <CardBody className="text-sm">{children}</CardBody>
+      <CardFooter>{action}</CardFooter>
+    </Card>
+  )
+}
+
+export default DisplayCardContainer

napcat.webui/src/components/display_card/http_client.tsx

@@ -0,0 +1,47 @@
+import { Chip } from '@heroui/chip'
+
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
+
+interface HTTPClientDisplayCardProps {
+  data: OneBotConfig['network']['httpClients'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const HTTPClientDisplayCard: React.FC<HTTPClientDisplayCardProps> = (props) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const { url, reportSelfMessage, messagePostFormat } = data
+
+  const fields: NetworkDisplayCardFields<'httpClients'> = [
+    { label: 'URL', value: url },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: '上报自身消息',
+      value: reportSelfMessage,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '是' : '否'}
+        </Chip>
+      )
+    }
+  ]
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel="HTTP客户端"
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  )
+}
+
+export default HTTPClientDisplayCard

napcat.webui/src/components/display_card/http_server.tsx

@@ -0,0 +1,57 @@
+import { Chip } from '@heroui/chip'
+
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
+
+interface HTTPServerDisplayCardProps {
+  data: OneBotConfig['network']['httpServers'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const HTTPServerDisplayCard: React.FC<HTTPServerDisplayCardProps> = (props) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data
+
+  const fields: NetworkDisplayCardFields<'httpServers'> = [
+    { label: '主机', value: host },
+    { label: '端口', value: port },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: 'CORS',
+      value: enableCors,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '已启用' : '未启用'}
+        </Chip>
+      )
+    },
+    {
+      label: 'WS',
+      value: enableWebsocket,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '已启用' : '未启用'}
+        </Chip>
+      )
+    }
+  ]
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel="HTTP服务器"
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  )
+}
+
+export default HTTPServerDisplayCard

napcat.webui/src/components/display_card/ws_client.tsx

@@ -0,0 +1,57 @@
+import { Chip } from '@heroui/chip'
+
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
+
+interface WebsocketClientDisplayCardProps {
+  data: OneBotConfig['network']['websocketClients'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const WebsocketClientDisplayCard: React.FC<WebsocketClientDisplayCardProps> = (
+  props
+) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const {
+    url,
+    heartInterval,
+    reconnectInterval,
+    messagePostFormat,
+    reportSelfMessage
+  } = data
+
+  const fields: NetworkDisplayCardFields<'websocketClients'> = [
+    { label: 'URL', value: url },
+    { label: '重连间隔', value: `${reconnectInterval}ms` },
+    { label: '心跳间隔', value: `${heartInterval}ms` },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: '上报自身消息',
+      value: reportSelfMessage,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '是' : '否'}
+        </Chip>
+      )
+    }
+  ]
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel="Websocket客户端"
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  )
+}
+
+export default WebsocketClientDisplayCard

napcat.webui/src/components/display_card/ws_server.tsx

@@ -0,0 +1,67 @@
+import { Chip } from '@heroui/chip'
+
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
+
+interface WebsocketServerDisplayCardProps {
+  data: OneBotConfig['network']['websocketServers'][0]
+  showType?: boolean
+  onEdit: () => void
+  onEnable: () => Promise<void>
+  onDelete: () => Promise<void>
+  onEnableDebug: () => Promise<void>
+}
+
+const WebsocketServerDisplayCard: React.FC<WebsocketServerDisplayCardProps> = (
+  props
+) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const {
+    host,
+    port,
+    heartInterval,
+    messagePostFormat,
+    reportSelfMessage,
+    enableForcePushEvent
+  } = data
+
+  const fields: NetworkDisplayCardFields<'websocketServers'> = [
+    { label: '主机', value: host },
+    { label: '端口', value: port },
+    { label: '心跳间隔', value: `${heartInterval}ms` },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: '上报自身消息',
+      value: reportSelfMessage,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '是' : '否'}
+        </Chip>
+      )
+    },
+    {
+      label: '强制推送事件',
+      value: enableForcePushEvent,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+          {value ? '是' : '否'}
+        </Chip>
+      )
+    }
+  ]
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel="Websocket服务器"
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  )
+}
+
+export default WebsocketServerDisplayCard