style: 语义化样式

napcat.webui/package.json

@@ -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",

napcat.webui/src/components/audio_player.tsx

@@ -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)}
           >

napcat.webui/src/components/button/add_button.tsx

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

napcat.webui/src/components/button/save_buttons.tsx

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

napcat.webui/src/components/chat_input/components/audio_insert.tsx

@@ -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>

napcat.webui/src/components/chat_input/components/dice_insert.tsx

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

napcat.webui/src/components/chat_input/components/emoji_picker.tsx

@@ -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"

napcat.webui/src/components/chat_input/components/file_insert.tsx

@@ -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"

napcat.webui/src/components/chat_input/components/image_insert.tsx

@@ -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"

napcat.webui/src/components/chat_input/components/music_insert.tsx

@@ -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"

napcat.webui/src/components/chat_input/components/reply_insert.tsx

@@ -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

napcat.webui/src/components/chat_input/components/rps_insert.tsx

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

napcat.webui/src/components/chat_input/components/video_insert.tsx

@@ -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"

napcat.webui/src/components/chat_input/index.tsx

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

napcat.webui/src/components/chat_input/modal.tsx

@@ -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>

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

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

napcat.webui/src/components/display_network_item.tsx

@@ -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"

napcat.webui/src/components/file_manage/create_file_modal.tsx

@@ -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>

napcat.webui/src/components/file_manage/file_edit_modal.tsx

@@ -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>

napcat.webui/src/components/file_manage/file_preview_modal.tsx

@@ -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>

napcat.webui/src/components/file_manage/file_table.tsx

@@ -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)}
                     >

napcat.webui/src/components/file_manage/move_modal.tsx

@@ -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>

napcat.webui/src/components/file_manage/rename_modal.tsx

@@ -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>

napcat.webui/src/components/hitokoto.tsx

@@ -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 />

napcat.webui/src/components/hover_titled_card.tsx

@@ -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>
   ),

napcat.webui/src/components/input/image_input.tsx

@@ -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"
       >

napcat.webui/src/components/log_com/log_level_select.tsx

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

napcat.webui/src/components/modal.tsx

@@ -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()

napcat.webui/src/components/napcat_repo_info.tsx

@@ -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>
         }

napcat.webui/src/components/network_edit/generic_form.tsx

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

napcat.webui/src/components/onebot/api/debug.tsx

@@ -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

napcat.webui/src/components/onebot/api/display_struct.tsx

@@ -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'

napcat.webui/src/components/onebot/api/nav_list.tsx

@@ -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',
+              'bg-opacity-30 bg-primary-50 backdrop-blur-sm border border-primary-300 mb-2',
-            input: 'bg-transparent !text-danger-400 !placeholder-danger-400'
+            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', {
+                className={clsx('text-sm text-primary-200', {
-                  '!text-danger-400': apiName === selectedApi
+                  '!text-primary-400': apiName === selectedApi
                 })}
               >
                 {apiName}

napcat.webui/src/components/onebot/display_card/render.tsx

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

napcat.webui/src/components/onebot/display_card/response.tsx

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

napcat.webui/src/components/onebot/send_modal.tsx

@@ -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)}
                 >
                   发送

napcat.webui/src/components/onebot/ws_status.tsx

@@ -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" />

napcat.webui/src/components/qq_info_card.tsx

@@ -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>
       )}

napcat.webui/src/components/qr_code_login.tsx

@@ -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} />

napcat.webui/src/components/sidebar/index.tsx

@@ -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}

napcat.webui/src/components/sidebar/menus.tsx

@@ -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'
                 )}
               />

napcat.webui/src/components/system_info.tsx

@@ -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">
+    <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-danger-500 font-extrabold">
+      <CardHeader className="pb-0 items-center gap-1 text-primary-500 font-extrabold">
         <FaCircleInfo className="text-lg" />
         <span>系统信息</span>
       </CardHeader>

napcat.webui/src/components/system_status_display.tsx

@@ -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>

napcat.webui/src/components/tabs/index.tsx

@@ -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
         )}

napcat.webui/src/layouts/default.tsx

@@ -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'
           )}
         >

napcat.webui/src/pages/dashboard/about.tsx

@@ -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 (
+        return <Skeleton className="h-16 rounded-lg" />
-          <div className="flex-1 h-32 flex items-center justify-center bg-default-100 rounded-lg">
-            <Spinner />
-          </div>
-        )
       }
 
       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>

napcat.webui/src/pages/dashboard/debug/http/index.tsx

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

napcat.webui/src/pages/dashboard/debug/websocket/index.tsx

@@ -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"

napcat.webui/src/pages/dashboard/file_manager.tsx

@@ -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}

napcat.webui/src/pages/dashboard/index.tsx

@@ -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>

napcat.webui/src/pages/dashboard/terminal.tsx

@@ -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}

napcat.webui/tailwind.config.js

@@ -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'
+            }
+          }
+        }
+      }
+    })
+  ]
 }