style: 语义化样式

This commit is contained in:
bietiaop
2025-02-05 10:38:12 +08:00
parent fca90592d6
commit 593fb13b61
52 changed files with 208 additions and 139 deletions

View File

@@ -32,6 +32,7 @@
"@heroui/pagination": "^2.2.9",
"@heroui/popover": "2.3.10",
"@heroui/select": "2.4.10",
"@heroui/skeleton": "^2.2.6",
"@heroui/slider": "2.4.8",
"@heroui/snippet": "2.2.11",
"@heroui/spinner": "2.2.7",

View File

@@ -231,7 +231,7 @@ export default function AudioPlayer(props: AudioPlayerProps) {
: 'top-3 -left-8 rounded-l-full bg-opacity-50 backdrop-blur-md'
)}
variant="solid"
color="danger"
color="primary"
size="sm"
onPress={() => setIsCollapsed(!isCollapsed)}
>

View File

@@ -33,7 +33,7 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
>
<DropdownTrigger>
<Button
color="danger"
color="primary"
startContent={<IoAddCircleOutline className="text-2xl" />}
>

View File

@@ -27,7 +27,7 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
</Button>
<Button
color="danger"
color="primary"
isLoading={isSubmitting}
onPress={() => onSubmit()}
>

View File

@@ -110,7 +110,7 @@ const AudioInsert = () => {
<Tooltip content="发送音频">
<div className="max-w-fit">
<PopoverTrigger>
<Button color="danger" variant="flat" isIconOnly radius="full">
<Button color="primary" variant="flat" isIconOnly radius="full">
<IoMic className="text-xl" />
</Button>
</PopoverTrigger>
@@ -120,7 +120,7 @@ const AudioInsert = () => {
<Tooltip content="上传音频">
<Button
className="text-lg"
color="danger"
color="primary"
isIconOnly
variant="flat"
radius="full"
@@ -137,7 +137,7 @@ const AudioInsert = () => {
<PopoverTrigger tooltip="输入音频地址">
<Button
className="text-lg"
color="danger"
color="primary"
isIconOnly
variant="flat"
radius="full"
@@ -154,7 +154,7 @@ const AudioInsert = () => {
placeholder="请输入音频地址"
/>
<Button
color="danger"
color="primary"
variant="flat"
isIconOnly
radius="full"
@@ -177,7 +177,7 @@ const AudioInsert = () => {
<PopoverTrigger>
<Button
className="text-lg"
color="danger"
color="primary"
isIconOnly
variant="flat"
radius="full"
@@ -190,7 +190,7 @@ const AudioInsert = () => {
<PopoverContent className="flex-col gap-2 p-4">
<div className="flex gap-2">
<Button
color={isRecording ? 'danger' : 'danger'}
color={isRecording ? 'primary' : 'primary'}
variant="flat"
onPress={isRecording ? stopRecording : startRecording}
>
@@ -198,7 +198,7 @@ const AudioInsert = () => {
</Button>
{showPreview && audioPreview && (
<Button
color="danger"
color="primary"
variant="flat"
onPress={handleShowPreview}
>
@@ -212,7 +212,7 @@ const AudioInsert = () => {
className={clsx(
'w-4 h-4 rounded-full',
isRecording
? 'animate-pulse bg-danger-400'
? 'animate-pulse bg-primary-400'
: 'bg-success-400'
)}
></span>

View File

@@ -10,7 +10,7 @@ const DiceInsert = () => {
return (
<Tooltip content="发送骰子">
<Button
color="danger"
color="primary"
variant="flat"
isIconOnly
radius="full"

View File

@@ -55,7 +55,7 @@ const EmojiPicker = ({ onInsertEmoji, onOpenChange }: EmojiPickerProps) => {
<Tooltip content="插入表情">
<div className="max-w-fit">
<PopoverTrigger>
<Button color="danger" variant="flat" isIconOnly radius="full">
<Button color="primary" variant="flat" isIconOnly radius="full">
<MdEmojiEmotions className="text-xl" />
</Button>
</PopoverTrigger>
@@ -65,7 +65,7 @@ const EmojiPicker = ({ onInsertEmoji, onOpenChange }: EmojiPickerProps) => {
{visibleEmojis.map((emoji) => (
<Button
key={emoji.id}
color="danger"
color="primary"
variant="flat"
isIconOnly
radius="full"

View File

@@ -35,7 +35,7 @@ const FileInsert = () => {
<Tooltip content="发送文件">
<div className="max-w-fit">
<PopoverTrigger>
<Button color="danger" variant="flat" isIconOnly radius="full">
<Button color="primary" variant="flat" isIconOnly radius="full">
<FaFolder className="text-lg" />
</Button>
</PopoverTrigger>
@@ -45,7 +45,7 @@ const FileInsert = () => {
<Tooltip content="上传文件">
<Button
className="text-lg"
color="danger"
color="primary"
isIconOnly
variant="flat"
radius="full"
@@ -62,7 +62,7 @@ const FileInsert = () => {
<PopoverTrigger tooltip="输入文件地址">
<Button
className="text-lg"
color="danger"
color="primary"
isIconOnly
variant="flat"
radius="full"
@@ -79,7 +79,7 @@ const FileInsert = () => {
placeholder="请输入文件地址"
/>
<Button
color="danger"
color="primary"
variant="flat"
isIconOnly
radius="full"

View File

@@ -23,7 +23,7 @@ const ImageInsert = ({ insertImage, onOpenChange }: ImageInsertProps) => {
<Tooltip content="插入图片">
<div className="max-w-fit">
<PopoverTrigger>
<Button color="danger" variant="flat" isIconOnly radius="full">
<Button color="primary" variant="flat" isIconOnly radius="full">
<MdImage className="text-xl" />
</Button>
</PopoverTrigger>
@@ -33,7 +33,7 @@ const ImageInsert = ({ insertImage, onOpenChange }: ImageInsertProps) => {
<Tooltip content="上传图片">
<Button
className="text-lg"
color="danger"
color="primary"
isIconOnly
variant="flat"
radius="full"
@@ -50,7 +50,7 @@ const ImageInsert = ({ insertImage, onOpenChange }: ImageInsertProps) => {
<PopoverTrigger tooltip="输入图片地址">
<Button
className="text-lg"
color="danger"
color="primary"
isIconOnly
variant="flat"
radius="full"
@@ -67,7 +67,7 @@ const ImageInsert = ({ insertImage, onOpenChange }: ImageInsertProps) => {
placeholder="请输入图片地址"
/>
<Button
color="danger"
color="primary"
variant="flat"
isIconOnly
radius="full"

View File

@@ -80,7 +80,7 @@ const MusicInsert = () => {
<Tooltip content="发送音乐">
<div className="max-w-fit">
<PopoverTrigger>
<Button color="danger" variant="flat" isIconOnly radius="full">
<Button color="primary" variant="flat" isIconOnly radius="full">
<IoMusicalNotes className="text-xl" />
</Button>
</PopoverTrigger>
@@ -132,7 +132,7 @@ const MusicInsert = () => {
<Button
fullWidth
size="lg"
color="danger"
color="primary"
variant="flat"
radius="full"
onPress={() => {
@@ -236,7 +236,7 @@ const MusicInsert = () => {
<Button
fullWidth
size="lg"
color="danger"
color="primary"
variant="flat"
radius="full"
type="submit"

View File

@@ -19,7 +19,7 @@ const ReplyInsert = ({ insertReply }: ReplyInsertProps) => {
<Tooltip content="回复消息">
<div className="max-w-fit">
<PopoverTrigger>
<Button color="danger" variant="flat" isIconOnly radius="full">
<Button color="primary" variant="flat" isIconOnly radius="full">
<BsChatQuoteFill className="text-lg" />
</Button>
</PopoverTrigger>
@@ -38,7 +38,7 @@ const ReplyInsert = ({ insertReply }: ReplyInsertProps) => {
}}
/>
<Button
color="danger"
color="primary"
variant="flat"
radius="full"
isIconOnly

View File

@@ -10,7 +10,7 @@ const RPSInsert = () => {
return (
<Tooltip content="发送猜拳">
<Button
color="danger"
color="primary"
variant="flat"
isIconOnly
radius="full"

View File

@@ -35,7 +35,7 @@ const VideoInsert = () => {
<Tooltip content="发送视频">
<div className="max-w-fit">
<PopoverTrigger>
<Button color="danger" variant="flat" isIconOnly radius="full">
<Button color="primary" variant="flat" isIconOnly radius="full">
<IoVideocam className="text-xl" />
</Button>
</PopoverTrigger>
@@ -45,7 +45,7 @@ const VideoInsert = () => {
<Tooltip content="上传视频">
<Button
className="text-lg"
color="danger"
color="primary"
isIconOnly
variant="flat"
radius="full"
@@ -62,7 +62,7 @@ const VideoInsert = () => {
<PopoverTrigger tooltip="输入视频地址">
<Button
className="text-lg"
color="danger"
color="primary"
isIconOnly
variant="flat"
radius="full"
@@ -79,7 +79,7 @@ const VideoInsert = () => {
placeholder="请输入视频地址"
/>
<Button
color="danger"
color="primary"
variant="flat"
isIconOnly
radius="full"

View File

@@ -190,7 +190,7 @@ const ChatInput = () => {
<DiceInsert />
<RPSInsert />
<Button
color="danger"
color="primary"
onPress={() => {
const messages = getChatMessage()
showStructuredMessage(messages)

View File

@@ -15,7 +15,7 @@ export default function ChatInputModal() {
return (
<>
<Button onPress={onOpen} color="danger" radius="full" variant="flat">
<Button onPress={onOpen} color="primary" radius="full" variant="flat">
</Button>
<Modal
@@ -36,7 +36,7 @@ export default function ChatInputModal() {
</div>
</ModalBody>
<ModalFooter>
<Button color="danger" onPress={onClose} variant="flat">
<Button color="primary" onPress={onClose} variant="flat">
</Button>
</ModalFooter>

View File

@@ -78,7 +78,7 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
{debug ? '关闭调试' : '开启调试'}
</Button>
<Button
color="danger"
color="primary"
startContent={<MdDeleteForever />}
onPress={handleDelete}
>

View File

@@ -19,7 +19,7 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
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-8 md:col-span-2 bg-primary-50 shadow-primary-100'
: 'col-span-2 md:col-span-1 bg-warning-100 shadow-warning-200'
)}
shadow="sm"

View File

@@ -33,7 +33,7 @@ export default function CreateFileModal({
<ModalHeader></ModalHeader>
<ModalBody>
<div className="flex flex-col gap-4">
<ButtonGroup color="danger">
<ButtonGroup color="primary">
<Button
variant={fileType === 'file' ? 'solid' : 'flat'}
onPress={() => onTypeChange('file')}
@@ -51,10 +51,10 @@ export default function CreateFileModal({
</div>
</ModalBody>
<ModalFooter>
<Button color="danger" variant="flat" onPress={onClose}>
<Button color="primary" variant="flat" onPress={onClose}>
</Button>
<Button color="danger" onPress={onCreate}>
<Button color="primary" onPress={onCreate}>
</Button>
</ModalFooter>

View File

@@ -81,10 +81,10 @@ export default function FileEditModal({
</div>
</ModalBody>
<ModalFooter>
<Button color="danger" variant="flat" onPress={onClose}>
<Button color="primary" variant="flat" onPress={onClose}>
</Button>
<Button color="danger" onPress={onSave}>
<Button color="primary" onPress={onSave}>
</Button>
</ModalFooter>

View File

@@ -82,7 +82,7 @@ export default function FilePreviewModal({
{contentElement}
</ModalBody>
<ModalFooter>
<Button color="danger" variant="flat" onPress={onClose}>
<Button color="primary" variant="flat" onPress={onClose}>
</Button>
</ModalFooter>

View File

@@ -116,7 +116,7 @@ export default function FileTable({
isCompact
showControls
showShadow
color="danger"
color="primary"
page={page}
total={pages}
onChange={(page) => setPage(page)}
@@ -195,7 +195,7 @@ export default function FileTable({
<ButtonGroup size="sm">
<Button
isIconOnly
color="danger"
color="primary"
variant="flat"
onPress={() => onRenameRequest(file.name)}
>
@@ -203,7 +203,7 @@ export default function FileTable({
</Button>
<Button
isIconOnly
color="danger"
color="primary"
variant="flat"
onPress={() => onMoveRequest(file.name)}
>
@@ -211,7 +211,7 @@ export default function FileTable({
</Button>
<Button
isIconOnly
color="danger"
color="primary"
variant="flat"
onPress={() => onCopyPath(file.name)}
>
@@ -219,7 +219,7 @@ export default function FileTable({
</Button>
<Button
isIconOnly
color="danger"
color="primary"
variant="flat"
onPress={() => onDownload(filePath)}
>
@@ -227,7 +227,7 @@ export default function FileTable({
</Button>
<Button
isIconOnly
color="danger"
color="primary"
variant="flat"
onPress={() => onDelete(filePath)}
>

View File

@@ -86,13 +86,13 @@ function DirectoryTree({
onPress={handleClick}
className="py-1 px-2 text-left justify-start min-w-0 min-h-0 h-auto text-sm rounded-md"
size="sm"
color="danger"
color="primary"
variant={variant}
startContent={
<div
className={clsx(
'rounded-md',
isSeleted ? 'bg-danger-600' : 'bg-danger-50'
isSeleted ? 'bg-primary-600' : 'bg-primary-50'
)}
>
{expanded ? <IoRemove /> : <IoAdd />}
@@ -105,7 +105,7 @@ function DirectoryTree({
<div>
{loading ? (
<div className="flex py-1 px-8">
<Spinner size="sm" color="danger" />
<Spinner size="sm" color="primary" />
</div>
) : (
dirs.map((dirName) => {
@@ -155,10 +155,10 @@ export default function MoveModal({
<p className="text-sm text-default-500">{selectionInfo}</p>
</ModalBody>
<ModalFooter>
<Button color="danger" variant="flat" onPress={onClose}>
<Button color="primary" variant="flat" onPress={onClose}>
</Button>
<Button color="danger" onPress={onMove}>
<Button color="primary" onPress={onMove}>
</Button>
</ModalFooter>

View File

@@ -31,10 +31,10 @@ export default function RenameModal({
<Input label="新名称" value={newFileName} onChange={onNameChange} />
</ModalBody>
<ModalFooter>
<Button color="danger" variant="flat" onPress={onClose}>
<Button color="primary" variant="flat" onPress={onClose}>
</Button>
<Button color="danger" onPress={onRename}>
<Button color="primary" onPress={onRename}>
</Button>
</ModalFooter>

View File

@@ -33,7 +33,7 @@ export default function Hitokoto() {
<div className="relative">
{loading && <PageLoading />}
{error ? (
<div className="text-danger-400">{error.message}</div>
<div className="text-primary-400">{error.message}</div>
) : (
<>
<div>{data?.hitokoto}</div>
@@ -52,7 +52,7 @@ export default function Hitokoto() {
isLoading={loading}
isIconOnly
radius="full"
color="danger"
color="primary"
variant="flat"
>
<IoRefresh />

View File

@@ -34,7 +34,7 @@ export default function HoverTiltedCard({
rotateAmplitude = 14,
showTooltip = false,
overlayContent = (
<div className="text-center mt-6 px-4 py-0.5 shadow-lg rounded-full bg-danger-600 text-default-100 bg-opacity-80">
<div className="text-center mt-6 px-4 py-0.5 shadow-lg rounded-full bg-primary-600 text-default-100 bg-opacity-80">
NapCat
</div>
),

View File

@@ -43,7 +43,7 @@ const ImageInput: React.FC<ImageInputProps> = ({ onChange, value, label }) => {
onChange('')
if (inputRef.current) inputRef.current.value = ''
}}
color="danger"
color="primary"
variant="flat"
size="sm"
>

View File

@@ -16,13 +16,13 @@ const logLevelColor: {
| 'secondary'
| 'success'
| 'warning'
| 'danger'
| 'primary'
} = {
[LogLevel.DEBUG]: 'default',
[LogLevel.INFO]: 'primary',
[LogLevel.WARN]: 'warning',
[LogLevel.ERROR]: 'danger',
[LogLevel.FATAL]: 'danger'
[LogLevel.ERROR]: 'primary',
[LogLevel.FATAL]: 'primary'
}
const LogLevelSelect = (props: LogLevelSelectProps) => {
const { selectedKeys, onSelectionChange } = props

View File

@@ -65,7 +65,7 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
<ModalFooter>
{showCancel && (
<Button
color="danger"
color="primary"
variant="light"
onPress={() => {
onCancel?.()
@@ -76,7 +76,7 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
</Button>
)}
<Button
color="danger"
color="primary"
onPress={() => {
onConfirm?.()
nativeClose()

View File

@@ -28,7 +28,7 @@ import type {
function displayData(data: number, loading: boolean, error?: Error) {
if (error) {
return <MdError className="text-danger-400" />
return <MdError className="text-primary-400" />
}
if (loading) {
@@ -175,7 +175,7 @@ export default function NapCatRepoInfo() {
className="group h-auto py-3"
endContent={
releaseError ? (
<MdError className="text-danger-400" />
<MdError className="text-primary-400" />
) : releaseLoading ? (
<Spinner size="sm" />
) : (
@@ -229,7 +229,7 @@ export default function NapCatRepoInfo() {
</span>
}
startContent={
<IconWrapper className="bg-danger/10 text-danger dark:text-danger-500">
<IconWrapper className="bg-primary/10 text-primary dark:text-primary-500">
<BookIcon />
</IconWrapper>
}

View File

@@ -150,7 +150,7 @@ const GenericForm = <T extends keyof NetworkConfigType>({
</ModalBody>
<ModalFooter>
<Button
color="danger"
color="primary"
isDisabled={formState.isSubmitting}
variant="light"
onPress={onClose}

View File

@@ -91,7 +91,7 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
return (
<section className="p-4 pt-14 rounded-lg shadow-md">
<h1 className="text-2xl font-bold mb-4 flex items-center gap-1 text-danger-400">
<h1 className="text-2xl font-bold mb-4 flex items-center gap-1 text-primary-400">
<PiCatDuotone />
{data.description}
</h1>
@@ -125,7 +125,7 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
/>
<Button
onPress={sendRequest}
color="danger"
color="primary"
size="lg"
radius="full"
isIconOnly

View File

@@ -27,7 +27,7 @@ const SchemaType = ({
name = '固定值'
break
}
let chipColor: 'primary' | 'success' | 'danger' | 'warning' | 'secondary' =
let chipColor: 'primary' | 'success' | 'primary' | 'warning' | 'secondary' =
'primary'
switch (type) {
case 'enum':
@@ -37,7 +37,7 @@ const SchemaType = ({
chipColor = 'secondary'
break
case 'array':
chipColor = 'danger'
chipColor = 'primary'
break
case 'object':
chipColor = 'success'

View File

@@ -33,11 +33,11 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
>
<div className="w-64 h-full overflow-y-auto px-2 pt-2 pb-10 md:pb-0">
<Input
className="sticky top-0 z-10 text-danger-600"
className="sticky top-0 z-10 text-primary-600"
classNames={{
inputWrapper:
'bg-opacity-30 bg-danger-50 backdrop-blur-sm border border-danger-300 mb-2',
input: 'bg-transparent !text-danger-400 !placeholder-danger-400'
'bg-opacity-30 bg-primary-50 backdrop-blur-sm border border-primary-300 mb-2',
input: 'bg-transparent !text-primary-400 !placeholder-primary-400'
}}
radius="full"
placeholder="搜索 API"
@@ -51,7 +51,7 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
key={apiName}
shadow="none"
className={clsx(
'w-full border border-danger-100 rounded-lg mb-1 bg-opacity-30 backdrop-blur-sm text-danger-400',
'w-full border border-primary-100 rounded-lg mb-1 bg-opacity-30 backdrop-blur-sm text-primary-400',
{
hidden: !(
apiName.includes(searchValue) ||
@@ -59,7 +59,7 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
)
},
{
'!bg-opacity-40 border border-danger-400 bg-danger-50 text-danger-600':
'!bg-opacity-40 border border-primary-400 bg-primary-50 text-primary-600':
apiName === selectedApi
}
)}
@@ -69,8 +69,8 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
<CardBody>
<h2 className="font-bold">{api.description}</h2>
<div
className={clsx('text-sm text-danger-200', {
'!text-danger-400': apiName === selectedApi
className={clsx('text-sm text-primary-200', {
'!text-primary-400': apiName === selectedApi
})}
>
{apiName}

View File

@@ -109,7 +109,7 @@ const OneBotItemRender = ({ data, index, style }: OneBotItemRenderProps) => {
<PopoverTrigger>
<Button
size="sm"
color="danger"
color="primary"
variant="flat"
radius="full"
isIconOnly

View File

@@ -30,7 +30,7 @@ const OneBotDisplayResponse: React.FC<OneBotDisplayResponseProps> = ({
<PopoverTrigger>
<Button
size="sm"
color="danger"
color="primary"
variant="flat"
radius="full"
className="text-medium"

View File

@@ -43,7 +43,7 @@ const OneBotSendModal: React.FC<OneBotSendModalProps> = (props) => {
return (
<>
<Button onPress={onOpen} color="danger" radius="full" variant="flat">
<Button onPress={onOpen} color="primary" radius="full" variant="flat">
</Button>
<Modal
@@ -75,11 +75,11 @@ const OneBotSendModal: React.FC<OneBotSendModalProps> = (props) => {
<ModalFooter>
<ChatInputModal />
<Button color="danger" variant="flat" onPress={onClose}>
<Button color="primary" variant="flat" onPress={onClose}>
</Button>
<Button
color="danger"
color="primary"
onPress={() => handleSendMessage(onClose)}
>

View File

@@ -10,7 +10,7 @@ function StatusTag({
color
}: {
title: string
color: 'success' | 'danger' | 'warning'
color: 'success' | 'primary' | 'warning'
}) {
const textClassName = `text-${color} text-sm`
const bgClassName = `bg-${color}`
@@ -27,7 +27,7 @@ export default function WSStatus({ state }: WSStatusProps) {
return <StatusTag title="已连接" color="success" />
}
if (state === ReadyState.CLOSED) {
return <StatusTag title="已关闭" color="danger" />
return <StatusTag title="已关闭" color="primary" />
}
if (state === ReadyState.CONNECTING) {
return <StatusTag title="连接中" color="warning" />

View File

@@ -16,7 +16,7 @@ export interface QQInfoCardProps {
const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
return (
<Card
className="relative bg-danger-100 bg-opacity-60 overflow-hidden flex-shrink-0 shadow-md shadow-danger-300 dark:shadow-danger-50"
className="relative bg-primary-100 bg-opacity-60 overflow-hidden flex-shrink-0 shadow-md shadow-primary-300 dark:shadow-primary-50"
shadow="none"
radius="lg"
>
@@ -30,7 +30,7 @@ const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
</CardBody>
) : (
<CardBody className="flex-row items-center gap-2 overflow-hidden relative">
<div className="absolute right-0 bottom-0 text-5xl text-danger-400">
<div className="absolute right-0 bottom-0 text-5xl text-primary-400">
<BsTencentQq />
</div>
<div className="relative flex-shrink-0 z-10">
@@ -43,14 +43,14 @@ const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
/>
<div
className={clsx(
'w-4 h-4 rounded-full absolute right-0.5 bottom-0 border-2 border-danger-100 z-10',
'w-4 h-4 rounded-full absolute right-0.5 bottom-0 border-2 border-primary-100 z-10',
data?.online ? 'bg-green-500' : 'bg-gray-500'
)}
></div>
</div>
<div className="flex-col justify-center">
<div className="text-lg truncate">{data?.nick}</div>
<div className="text-danger-500 text-sm">{data?.uin}</div>
<div className="text-primary-500 text-sm">{data?.uin}</div>
</div>
</CardBody>
)}

View File

@@ -11,7 +11,7 @@ const QrCodeLogin: React.FC<QrCodeLoginProps> = ({ qrcode }) => {
<div className="bg-white p-2 rounded-md w-fit mx-auto relative overflow-hidden">
{!qrcode && (
<div className="absolute left-2 top-2 right-2 bottom-2 bg-white bg-opacity-50 backdrop-blur flex items-center justify-center">
<Spinner color="danger" />
<Spinner color="primary" />
</div>
)}
<QRCodeSVG size={180} value={qrcode} />

View File

@@ -63,7 +63,7 @@ const SideBar: React.FC<SideBarProps> = (props) => {
<div className="mt-auto mb-10 md:mb-0">
<Button
className="w-full"
color="danger"
color="primary"
radius="full"
variant="light"
onPress={toggleTheme}
@@ -75,7 +75,7 @@ const SideBar: React.FC<SideBarProps> = (props) => {
</Button>
<Button
className="w-full mb-2"
color="danger"
color="primary"
radius="full"
variant="light"
onPress={onRevokeAuth}

View File

@@ -55,7 +55,7 @@ const renderItems = (items: MenuItem[], children = false) => {
isActive && 'bg-opacity-60',
b64img && 'backdrop-blur-md text-white'
)}
color="danger"
color="primary"
endContent={
canOpen ? (
// div实现箭头V效果
@@ -63,7 +63,9 @@ const renderItems = (items: MenuItem[], children = false) => {
className={clsx(
'ml-auto relative w-3 h-3 transition-transform',
open && 'transform rotate-180',
isActive ? 'text-danger-500' : 'text-red-300 dark:text-white',
isActive
? 'text-primary-500'
: 'text-red-300 dark:text-white',
'before:rounded-full',
'before:content-[""]',
'before:block',
@@ -95,7 +97,7 @@ const renderItems = (items: MenuItem[], children = false) => {
className={clsx(
'w-3 h-1.5 rounded-full ml-auto shadow-lg',
isActive
? 'bg-danger-500 animate-spinner-ease-spin'
? 'bg-primary-500 animate-spinner-ease-spin'
: 'bg-red-300 dark:bg-white'
)}
/>

View File

@@ -34,10 +34,10 @@ const SystemInfoItem: React.FC<SystemInfoItemProps> = ({
endContent
}) => {
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">
<div className="flex text-sm gap-1 p-2 items-center shadow-sm shadow-primary-50 dark:shadow-primary-100 rounded text-primary-400">
{icon}
<div className="w-24">{title}</div>
<div className="text-danger-200">{value}</div>
<div className="text-primary-200">{value}</div>
<div className="ml-auto">{endContent}</div>
</div>
)
@@ -62,7 +62,7 @@ const NewVersionTip = (props: NewVersionTipProps) => {
<Button
isIconOnly
radius="full"
color="danger"
color="primary"
variant="shadow"
className="!w-5 !h-5 !min-w-0 text-small shadow-md"
onPress={() => {
@@ -130,7 +130,7 @@ const NewVersionTip = (props: NewVersionTipProps) => {
)
}
if (aiSummaryError) {
return <div className="text-center text-danger-500">AI </div>
return <div className="text-center text-primary-500">AI </div>
}
return <span className="text-default-700">{aiSummaryData?.data.data}</span>
}
@@ -140,7 +140,7 @@ const NewVersionTip = (props: NewVersionTipProps) => {
<Button
isIconOnly
radius="full"
color="danger"
color="primary"
variant="shadow"
className="!w-5 !h-5 !min-w-0 text-small shadow-md"
onPress={() => {
@@ -159,7 +159,7 @@ const NewVersionTip = (props: NewVersionTipProps) => {
<Chip color="primary">{latestVersion}</Chip>
</div>
<div className="p-2 rounded-md bg-content2 text-sm">
<div className="text-danger-400 font-bold flex items-center gap-1 mb-1">
<div className="text-primary-400 font-bold flex items-center gap-1 mb-1">
<BsStars />
<span>AI总结</span>
</div>
@@ -234,8 +234,8 @@ const SystemInfo: React.FC<SystemInfoProps> = (props) => {
error: qqVersionError
} = useRequest(WebUIManager.getQQVersion)
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">
<Card className="bg-opacity-60 shadow-sm shadow-primary-50 dark:shadow-primary-100 overflow-visible flex-1">
<CardHeader className="pb-0 items-center gap-1 text-primary-500 font-extrabold">
<FaCircleInfo className="text-lg" />
<span></span>
</CardHeader>

View File

@@ -55,7 +55,7 @@ const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
}
return (
<Card className="bg-opacity-60 shadow-sm shadow-danger-50 dark:shadow-danger-100 col-span-1 lg:col-span-2 relative overflow-hidden">
<Card className="bg-opacity-60 shadow-sm shadow-primary-50 dark:shadow-primary-100 col-span-1 lg:col-span-2 relative overflow-hidden">
<div className="absolute h-full right-0 top-0">
<Image
src={bkg}
@@ -69,7 +69,7 @@ const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
</div>
<CardBody className="overflow-visible md:flex-row gap-4 items-center justify-stretch z-10">
<div className="flex-1 w-full md:max-w-96">
<h2 className="text-lg font-semibold flex items-center gap-1 text-danger-400">
<h2 className="text-lg font-semibold flex items-center gap-1 text-primary-400">
<GiCpu className="text-xl" />
<span>CPU</span>
</h2>
@@ -88,7 +88,7 @@ const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
unit="%"
/>
</div>
<h2 className="text-lg font-semibold flex items-center gap-1 text-danger-400 mt-2">
<h2 className="text-lg font-semibold flex items-center gap-1 text-primary-400 mt-2">
<BiSolidMemoryCard className="text-xl" />
<span></span>
</h2>

View File

@@ -62,7 +62,7 @@ export const Tab = forwardRef<HTMLDivElement, TabProps>(
className={clsx(
'px-2 py-1 flex items-center gap-1 text-sm font-medium border-b-2 transition-colors',
isSelected
? 'border-danger text-danger'
? 'border-primary text-primary'
: 'border-transparent hover:border-default',
className
)}

View File

@@ -79,7 +79,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
}, [location.pathname])
return (
<div
className="h-screen relative flex bg-danger-50 dark:bg-black items-stretch"
className="h-screen relative flex bg-primary-50 dark:bg-black items-stretch"
style={{
backgroundImage: `url(${b64img})`,
backgroundSize: 'cover'
@@ -99,9 +99,9 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
<div
className={clsx(
'h-10 flex items-center font-bold text-xl backdrop-blur-lg rounded-full',
'dark:bg-background dark:shadow-danger-100',
'dark:bg-background dark:shadow-primary-100',
'bg-background !bg-opacity-50',
'shadow-sm shadow-danger-50',
'shadow-sm shadow-primary-50',
'z-30 m-2 mb-0 sticky top-2 left-0'
)}
>

View File

@@ -1,6 +1,7 @@
import { Card, CardBody } from '@heroui/card'
import { Image } from '@heroui/image'
import { Link } from '@heroui/link'
import { Skeleton } from '@heroui/skeleton'
import { Spinner } from '@heroui/spinner'
import { useRequest } from 'ahooks'
import { useMemo } from 'react'
@@ -22,7 +23,7 @@ function VersionInfo() {
return (
<div className="flex items-center gap-2 text-2xl font-bold">
<div className="flex items-center gap-2">
<div className="text-danger-500 drop-shadow-md">NapCat</div>
<div className="text-primary-500 drop-shadow-md">NapCat</div>
{error ? (
error.message
) : loading ? (
@@ -30,7 +31,7 @@ function VersionInfo() {
) : (
<RotatingText
texts={['WebUI', data?.version ?? '']}
mainClassName="overflow-hidden flex items-center bg-danger-500 px-2 rounded-lg text-default-50 shadow-md"
mainClassName="overflow-hidden flex items-center bg-primary-500 px-2 rounded-lg text-default-50 shadow-md"
staggerFrom={'last'}
initial={{ y: '100%' }}
animate={{ y: 0 }}
@@ -78,16 +79,12 @@ export default function AboutPage() {
const imageUrl = getImageUrl(baseUrl)
if (!imageUrl) {
return (
<div className="flex-1 h-32 flex items-center justify-center bg-default-100 rounded-lg">
<Spinner />
</div>
)
return <Skeleton className="h-16 rounded-lg" />
}
return (
<Image
className="flex-1 pointer-events-none select-none"
className="flex-1 pointer-events-none select-none rounded-none"
src={imageUrl}
alt={alt}
/>
@@ -107,12 +104,12 @@ export default function AboutPage() {
<div className="flex-1 flex flex-col gap-2 py-2">
<VersionInfo />
<div className="space-y-1">
<p className="font-bold text-danger-400">NapCat ?</p>
<p className="font-bold text-primary-400">NapCat ?</p>
<p className="text-default-800">
TypeScript构建的Bot框架,,QQ
Node模块提供给客户端的接口,Bot的功能.
</p>
<p className="font-bold text-danger-400"></p>
<p className="font-bold text-primary-400"></p>
<p className="text-default-800">
QQ
便使 OneBot HTTP /
@@ -131,7 +128,7 @@ export default function AboutPage() {
href="https://qm.qq.com/q/F9cgs1N3Mc"
>
<CardBody className="flex-row items-center gap-2">
<span className="p-2 rounded-small bg-primary-50">
<span className="p-2 rounded-small bg-primary-50 text-primary-500">
<BsTencentQq size={16} />
</span>
<span>1</span>
@@ -146,7 +143,7 @@ export default function AboutPage() {
href="https://qm.qq.com/q/hSt0u9PVn"
>
<CardBody className="flex-row items-center gap-2">
<span className="p-2 rounded-small bg-primary-50">
<span className="p-2 rounded-small bg-primary-50 text-primary-500">
<BsTencentQq size={16} />
</span>
<span>2</span>
@@ -161,7 +158,7 @@ export default function AboutPage() {
href="https://t.me/MelodicMoonlight"
>
<CardBody className="flex-row items-center gap-2">
<span className="p-2 rounded-small bg-primary-50">
<span className="p-2 rounded-small bg-primary-50 text-primary-500">
<BsTelegram size={16} />
</span>
<span>Telegram</span>
@@ -176,7 +173,7 @@ export default function AboutPage() {
href="https://napcat.napneko.icu/"
>
<CardBody className="flex-row items-center gap-2">
<span className="p-2 rounded-small bg-primary-50">
<span className="p-2 rounded-small bg-primary-50 text-primary-500">
<IoDocument size={16} />
</span>
<span>使</span>

View File

@@ -41,7 +41,7 @@ export default function HttpDebug() {
>
<Button
isIconOnly
color="danger"
color="primary"
radius="md"
variant="shadow"
size="sm"

View File

@@ -64,7 +64,7 @@ export default function WSDebug() {
/>
<div className="flex-shrink-0 flex gap-2 col-span-2 md:col-span-1">
<Button
color="danger"
color="primary"
onPress={handleConnect}
size="lg"
radius="full"

View File

@@ -332,7 +332,7 @@ export default function FileManagerPage() {
<div className="p-4">
<div className="mb-4 flex items-center gap-4 sticky top-14 z-10 bg-content1 py-1">
<Button
color="danger"
color="primary"
size="sm"
isIconOnly
variant="flat"
@@ -343,7 +343,7 @@ export default function FileManagerPage() {
</Button>
<Button
color="danger"
color="primary"
size="sm"
isIconOnly
variant="flat"
@@ -354,7 +354,7 @@ export default function FileManagerPage() {
</Button>
<Button
color="danger"
color="primary"
isLoading={loading}
size="sm"
isIconOnly
@@ -365,7 +365,7 @@ export default function FileManagerPage() {
<MdRefresh />
</Button>
<Button
color="danger"
color="primary"
size="sm"
isIconOnly
variant="flat"
@@ -379,7 +379,7 @@ export default function FileManagerPage() {
selectedFiles === 'all') && (
<>
<Button
color="danger"
color="primary"
size="sm"
variant="flat"
onPress={handleBatchDelete}
@@ -391,7 +391,7 @@ export default function FileManagerPage() {
)
</Button>
<Button
color="danger"
color="primary"
size="sm"
variant="flat"
onPress={() => {
@@ -406,7 +406,7 @@ export default function FileManagerPage() {
)
</Button>
<Button
color="danger"
color="primary"
size="sm"
variant="flat"
onPress={handleBatchDownload}

View File

@@ -105,7 +105,7 @@ const DashboardIndexPage: React.FC = () => {
<SystemStatusCard setArchInfo={setArchInfo} />
</div>
<Networks />
<Card className="bg-opacity-60 shadow-sm shadow-danger-50">
<Card className="bg-opacity-60 shadow-sm shadow-primary-50">
<CardBody>
<Hitokoto />
</CardBody>

View File

@@ -133,7 +133,7 @@ export default function TerminalPage() {
size="sm"
className="min-w-0 w-4 h-4 flex-shrink-0"
onPress={() => closeTerminal(tab.id)}
color={selectedTab === tab.id ? 'danger' : 'default'}
color={selectedTab === tab.id ? 'primary' : 'default'}
>
<IoClose />
</Button>
@@ -143,7 +143,7 @@ export default function TerminalPage() {
</TabList>
<Button
isIconOnly
color="danger"
color="primary"
size="sm"
variant="flat"
onPress={createNewTerminal}

View File

@@ -13,5 +13,74 @@ export default {
extend: {}
},
darkMode: 'class',
plugins: [heroui()]
plugins: [
heroui({
themes: {
light: {
colors: {
primary: {
DEFAULT: '#f31260',
foreground: '#fff',
50: '#fee7ef',
100: '#fdd0df',
200: '#faa0bf',
300: '#f871a0',
400: '#f54180',
500: '#f31260',
600: '#c20e4d',
700: '#920b3a',
800: '#610726',
900: '#310413'
},
danger: {
DEFAULT: '#DB3694',
foreground: '#fff',
50: '#FEEAF6',
100: '#FDD7DD',
200: '#FBAFC4',
300: '#F485AE',
400: '#E965A3',
500: '#DB3694',
600: '#BC278B',
700: '#9D1B7F',
800: '#7F1170',
900: '#690A66'
}
}
},
dark: {
colors: {
primary: {
DEFAULT: '#f31260',
foreground: '#fff',
50: '#310413',
100: '#610726',
200: '#920b3a',
300: '#c20e4d',
400: '#f31260',
500: '#f54180',
600: '#f871a0',
700: '#faa0bf',
800: '#fdd0df',
900: '#fee7ef'
},
danger: {
DEFAULT: '#DB3694',
foreground: '#fff',
50: '#690A66',
100: '#7F1170',
200: '#9D1B7F',
300: '#BC278B',
400: '#DB3694',
500: '#E965A3',
600: '#F485AE',
700: '#FBAFC4',
800: '#FDD7DD',
900: '#FEEAF6'
}
}
}
}
})
]
}