From 9f78e1ce1e1b42215143b92fe86b6d220a7b7acf Mon Sep 17 00:00:00 2001
From: bietiaop <1527109126@qq.com>
Date: Sun, 9 Feb 2025 11:58:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A2=84=E5=AE=9A=E4=B9=89=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/button/save_buttons.tsx    |  12 +-
 napcat.webui/src/const/themes/nc_pink.ts      |   2 -
 .../src/pages/dashboard/config/theme.tsx      | 333 +++++++++---------
 napcat.webui/src/types/theme.d.ts             |   2 -
 napcat.webui/src/utils/theme.ts               | 126 +++++++
 napcat.webui/tailwind.config.js               |   6 +
 6 files changed, 311 insertions(+), 170 deletions(-)

diff --git a/napcat.webui/src/components/button/save_buttons.tsx b/napcat.webui/src/components/button/save_buttons.tsx
index f19486d3..d943677a 100644
--- a/napcat.webui/src/components/button/save_buttons.tsx
+++ b/napcat.webui/src/components/button/save_buttons.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@heroui/button'
+import clsx from 'clsx'
 import toast from 'react-hot-toast'
 import { IoMdRefresh } from 'react-icons/io'
 
@@ -7,15 +8,22 @@ export interface SaveButtonsProps {
   reset: () => void
   refresh?: () => void
   isSubmitting: boolean
+  className?: string
 }
 
 const SaveButtons: React.FC<SaveButtonsProps> = ({
   onSubmit,
   reset,
   isSubmitting,
-  refresh
+  refresh,
+  className
 }) => (
-  <div className="max-w-full mx-3 w-96 flex flex-col justify-center gap-3">
+  <div
+    className={clsx(
+      'max-w-full mx-3 w-96 flex flex-col justify-center gap-3',
+      className
+    )}
+  >
     <div className="flex items-center justify-center gap-2 mt-5">
       <Button
         color="default"
diff --git a/napcat.webui/src/const/themes/nc_pink.ts b/napcat.webui/src/const/themes/nc_pink.ts
index 69fdec60..e9ea2823 100644
--- a/napcat.webui/src/const/themes/nc_pink.ts
+++ b/napcat.webui/src/const/themes/nc_pink.ts
@@ -252,7 +252,5 @@ export default {
   theme,
   author: 'NapCat',
   name: 'nc_pink',
-  bgColor: 'hsl(339.2,90.36%,51.18%)',
-  textColor: 'hsl(0,0%,100%)',
   description: 'NapCat Pink Theme'
 } satisfies ThemeInfo
diff --git a/napcat.webui/src/pages/dashboard/config/theme.tsx b/napcat.webui/src/pages/dashboard/config/theme.tsx
index 099c78bf..e948b416 100644
--- a/napcat.webui/src/pages/dashboard/config/theme.tsx
+++ b/napcat.webui/src/pages/dashboard/config/theme.tsx
@@ -1,8 +1,14 @@
 import { Accordion, AccordionItem } from '@heroui/accordion'
+import { Card, CardBody, CardHeader } from '@heroui/card'
 import { useRequest } from 'ahooks'
-import { useEffect } from 'react'
-import { Controller, useForm } from 'react-hook-form'
+import clsx from 'clsx'
+import { useEffect, useRef } from 'react'
+import { Controller, useForm, useWatch } from 'react-hook-form'
 import toast from 'react-hot-toast'
+import { FaUserAstronaut } from 'react-icons/fa'
+import { FaPaintbrush } from 'react-icons/fa6'
+import { IoIosColorPalette } from 'react-icons/io'
+import { MdDarkMode, MdLightMode } from 'react-icons/md'
 
 import themes from '@/const/themes'
 
@@ -10,120 +16,82 @@ import ColorPicker from '@/components/ColorPicker'
 import SaveButtons from '@/components/button/save_buttons'
 import PageLoading from '@/components/page_loading'
 
-import { loadTheme } from '@/utils/theme'
+import { colorKeys, generateTheme, loadTheme } from '@/utils/theme'
 
 import WebUIManager from '@/controllers/webui_manager'
 
-// 将颜色 key 补全为 ThemeConfigItem 中定义的所有颜色相关属性
-const colorKeys = [
-  '--heroui-background',
+export type PreviewThemeCardProps = {
+  theme: ThemeInfo
+  onPreview: () => void
+}
 
-  '--heroui-foreground-50',
-  '--heroui-foreground-100',
-  '--heroui-foreground-200',
-  '--heroui-foreground-300',
-  '--heroui-foreground-400',
-  '--heroui-foreground-500',
-  '--heroui-foreground-600',
-  '--heroui-foreground-700',
-  '--heroui-foreground-800',
-  '--heroui-foreground-900',
-  '--heroui-foreground',
+const values = [
+  '',
+  '-50',
+  '-100',
+  '-200',
+  '-300',
+  '-400',
+  '-500',
+  '-600',
+  '-700',
+  '-800',
+  '-900'
+]
+const colors = ['primary', 'secondary', 'success', 'danger', 'warning']
 
-  '--heroui-content1',
-  '--heroui-content1-foreground',
-  '--heroui-content2',
-  '--heroui-content2-foreground',
-  '--heroui-content3',
-  '--heroui-content3-foreground',
-  '--heroui-content4',
-  '--heroui-content4-foreground',
-
-  '--heroui-default-50',
-  '--heroui-default-100',
-  '--heroui-default-200',
-  '--heroui-default-300',
-  '--heroui-default-400',
-  '--heroui-default-500',
-  '--heroui-default-600',
-  '--heroui-default-700',
-  '--heroui-default-800',
-  '--heroui-default-900',
-  '--heroui-default-foreground',
-  '--heroui-default',
-
-  '--heroui-danger-50',
-  '--heroui-danger-100',
-  '--heroui-danger-200',
-  '--heroui-danger-300',
-  '--heroui-danger-400',
-  '--heroui-danger-500',
-  '--heroui-danger-600',
-  '--heroui-danger-700',
-  '--heroui-danger-800',
-  '--heroui-danger-900',
-  '--heroui-danger-foreground',
-  '--heroui-danger',
-
-  '--heroui-primary-50',
-  '--heroui-primary-100',
-  '--heroui-primary-200',
-  '--heroui-primary-300',
-  '--heroui-primary-400',
-  '--heroui-primary-500',
-  '--heroui-primary-600',
-  '--heroui-primary-700',
-  '--heroui-primary-800',
-  '--heroui-primary-900',
-  '--heroui-primary-foreground',
-  '--heroui-primary',
-
-  '--heroui-secondary-50',
-  '--heroui-secondary-100',
-  '--heroui-secondary-200',
-  '--heroui-secondary-300',
-  '--heroui-secondary-400',
-  '--heroui-secondary-500',
-  '--heroui-secondary-600',
-  '--heroui-secondary-700',
-  '--heroui-secondary-800',
-  '--heroui-secondary-900',
-  '--heroui-secondary-foreground',
-  '--heroui-secondary',
-
-  '--heroui-success-50',
-  '--heroui-success-100',
-  '--heroui-success-200',
-  '--heroui-success-300',
-  '--heroui-success-400',
-  '--heroui-success-500',
-  '--heroui-success-600',
-  '--heroui-success-700',
-  '--heroui-success-800',
-  '--heroui-success-900',
-  '--heroui-success-foreground',
-  '--heroui-success',
-
-  '--heroui-warning-50',
-  '--heroui-warning-100',
-  '--heroui-warning-200',
-  '--heroui-warning-300',
-  '--heroui-warning-400',
-  '--heroui-warning-500',
-  '--heroui-warning-600',
-  '--heroui-warning-700',
-  '--heroui-warning-800',
-  '--heroui-warning-900',
-  '--heroui-warning-foreground',
-  '--heroui-warning',
-
-  '--heroui-focus',
-  '--heroui-overlay',
-  '--heroui-divider',
-  '--heroui-code-background',
-  '--heroui-strong',
-  '--heroui-code-mdx'
-] as const
+function PreviewThemeCard({ theme, onPreview }: PreviewThemeCardProps) {
+  const style = document.createElement('style')
+  style.innerHTML = generateTheme(theme.theme, theme.name)
+  const cardRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    document.head.appendChild(style)
+    return () => {
+      document.head.removeChild(style)
+    }
+  }, [])
+  return (
+    <Card
+      ref={cardRef}
+      shadow="sm"
+      radius="sm"
+      isPressable
+      onPress={onPreview}
+      className={clsx('text-primary bg-primary-50', theme.name)}
+    >
+      <CardHeader className="pb-0 flex flex-col items-start gap-1">
+        <div className="px-1 rounded-md bg-primary text-primary-foreground">
+          {theme.name}
+        </div>
+        <div className="text-xs flex items-center gap-1 text-primary-300">
+          <FaUserAstronaut />
+          {theme.author ?? '未知'}
+        </div>
+        <div className="text-xs text-primary-200">{theme.description}</div>
+      </CardHeader>
+      <CardBody>
+        <div className="flex flex-col gap-1">
+          {colors.map((color) => (
+            <div className="flex gap-1 items-center flex-wrap" key={color}>
+              <div className="text-xs w-4 text-right">
+                {color[0].toUpperCase()}
+              </div>
+              {values.map((value) => (
+                <div
+                  key={value}
+                  className={clsx(
+                    'w-2 h-2 rounded-full shadow-small',
+                    `bg-${color}${value}`
+                  )}
+                ></div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </CardBody>
+    </Card>
+  )
+}
 
 const ThemeConfigCard = () => {
   const { data, loading, error, refreshAsync } = useRequest(
@@ -145,6 +113,23 @@ const ThemeConfigCard = () => {
     }
   })
 
+  // 使用 useRef 存储 style 标签引用
+  const styleTagRef = useRef<HTMLStyleElement | null>(null)
+
+  // 在组件挂载时创建 style 标签，并在卸载时清理
+  useEffect(() => {
+    const styleTag = document.createElement('style')
+    document.head.appendChild(styleTag)
+    styleTagRef.current = styleTag
+    return () => {
+      if (styleTagRef.current) {
+        document.head.removeChild(styleTagRef.current)
+      }
+    }
+  }, [])
+
+  const theme = useWatch({ control, name: 'theme' })
+
   const reset = () => {
     if (data) setOnebotValue('theme', data)
   }
@@ -174,6 +159,13 @@ const ThemeConfigCard = () => {
     reset()
   }, [data])
 
+  useEffect(() => {
+    if (theme && styleTagRef.current) {
+      const css = generateTheme(theme)
+      styleTagRef.current.innerHTML = css
+    }
+  }, [theme])
+
   if (loading) return <PageLoading loading={true} />
 
   if (error)
@@ -184,31 +176,33 @@ const ThemeConfigCard = () => {
   return (
     <>
       <title>主题配置 - NapCat WebUI</title>
-      <Accordion variant="splitted">
+
+      <SaveButtons
+        onSubmit={onSubmit}
+        reset={reset}
+        isSubmitting={isSubmitting}
+        refresh={onRefresh}
+        className="items-end w-full p-4"
+      />
+      <div className="px-4 text-sm text-default-600">实时预览，记得保存！</div>
+      <Accordion variant="splitted" defaultExpandedKeys={['select']}>
         <AccordionItem
           key="select"
           aria-label="Pick Color"
           title="选择主题"
-          subtitle="点击立即生效"
+          subtitle="可以切换夜间/白昼模式查看对应颜色"
           className="shadow-small"
+          startContent={<IoIosColorPalette />}
         >
           <div className="flex flex-wrap gap-2">
             {themes.map((theme) => (
-              <div
+              <PreviewThemeCard
                 key={theme.name}
-                className="p-4 rounded-md cursor-pointer"
-                style={{
-                  backgroundColor: theme.bgColor,
-                  color: theme.textColor
-                }}
-                onClick={() => {
+                theme={theme}
+                onPreview={() => {
                   setOnebotValue('theme', theme.theme)
-                  onSubmit()
                 }}
-              >
-                <div>{theme.name}</div>
-                <div>{theme.author}</div>
-              </div>
+              />
             ))}
           </div>
         </AccordionItem>
@@ -217,47 +211,58 @@ const ThemeConfigCard = () => {
           key="pick"
           aria-label="Pick Color"
           title="自定义配色"
-          subtitle="需手动点击保存"
           className="shadow-small"
+          startContent={<FaPaintbrush />}
         >
-          {(['dark', 'light'] as const).map((mode) => (
-            <div key={mode}>
-              <h3>{mode === 'dark' ? '暗色主题' : '亮色主题'}</h3>
-              {colorKeys.map((key) => (
-                <div
-                  key={key}
-                  className="grid grid-cols-2 items-center mb-2 gap-2"
-                >
-                  <label className="text-right">{key}</label>
-                  <Controller
-                    control={control}
-                    name={`theme.${mode}.${key}`}
-                    render={({ field: { value, onChange } }) => {
-                      const hslArray = value?.split(' ') ?? [0, 0, 0]
-                      const color = `hsl(${hslArray[0]}, ${hslArray[1]}, ${hslArray[2]})`
-                      return (
-                        <ColorPicker
-                          color={color}
-                          onChange={(result) => {
-                            onChange(
-                              `${result.hsl.h} ${result.hsl.s * 100}% ${result.hsl.l * 100}%`
-                            )
-                          }}
-                        />
-                      )
-                    }}
-                  />
-                </div>
-              ))}
-            </div>
-          ))}
-
-          <SaveButtons
-            onSubmit={onSubmit}
-            reset={reset}
-            isSubmitting={isSubmitting}
-            refresh={onRefresh}
-          />
+          <div className="space-y-2">
+            {(['dark', 'light'] as const).map((mode) => (
+              <div
+                key={mode}
+                className={clsx(
+                  'p-2 rounded-md',
+                  mode === 'dark' ? 'text-white' : 'text-black',
+                  mode === 'dark'
+                    ? 'bg-content1-foreground dark:bg-content1'
+                    : 'bg-content1 dark:bg-content1-foreground'
+                )}
+              >
+                <h3 className="text-center p-2 rounded-md bg-content2 mb-2 text-default-800 flex items-center justify-center">
+                  {mode === 'dark' ? (
+                    <MdDarkMode size={24} />
+                  ) : (
+                    <MdLightMode size={24} />
+                  )}
+                  {mode === 'dark' ? '夜间模式主题' : '白昼模式主题'}
+                </h3>
+                {colorKeys.map((key) => (
+                  <div
+                    key={key}
+                    className="grid grid-cols-2 items-center mb-2 gap-2"
+                  >
+                    <label className="text-right">{key}</label>
+                    <Controller
+                      control={control}
+                      name={`theme.${mode}.${key}`}
+                      render={({ field: { value, onChange } }) => {
+                        const hslArray = value?.split(' ') ?? [0, 0, 0]
+                        const color = `hsl(${hslArray[0]}, ${hslArray[1]}, ${hslArray[2]})`
+                        return (
+                          <ColorPicker
+                            color={color}
+                            onChange={(result) => {
+                              onChange(
+                                `${result.hsl.h} ${result.hsl.s * 100}% ${result.hsl.l * 100}%`
+                              )
+                            }}
+                          />
+                        )
+                      }}
+                    />
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
         </AccordionItem>
       </Accordion>
     </>
diff --git a/napcat.webui/src/types/theme.d.ts b/napcat.webui/src/types/theme.d.ts
index 75a98cb4..0f016f57 100644
--- a/napcat.webui/src/types/theme.d.ts
+++ b/napcat.webui/src/types/theme.d.ts
@@ -1,8 +1,6 @@
 interface ThemeInfo {
   theme: ThemeConfig
   name: string
-  bgColor: string
-  textColor: string
   description?: string
   author?: string
 }
diff --git a/napcat.webui/src/utils/theme.ts b/napcat.webui/src/utils/theme.ts
index dafe4516..5f3c91eb 100644
--- a/napcat.webui/src/utils/theme.ts
+++ b/napcat.webui/src/utils/theme.ts
@@ -13,3 +13,129 @@ export function loadTheme() {
       console.error('Failed to load theme.css')
     })
 }
+
+export const colorKeys = [
+  '--heroui-background',
+
+  '--heroui-foreground-50',
+  '--heroui-foreground-100',
+  '--heroui-foreground-200',
+  '--heroui-foreground-300',
+  '--heroui-foreground-400',
+  '--heroui-foreground-500',
+  '--heroui-foreground-600',
+  '--heroui-foreground-700',
+  '--heroui-foreground-800',
+  '--heroui-foreground-900',
+  '--heroui-foreground',
+
+  '--heroui-content1',
+  '--heroui-content1-foreground',
+  '--heroui-content2',
+  '--heroui-content2-foreground',
+  '--heroui-content3',
+  '--heroui-content3-foreground',
+  '--heroui-content4',
+  '--heroui-content4-foreground',
+
+  '--heroui-default-50',
+  '--heroui-default-100',
+  '--heroui-default-200',
+  '--heroui-default-300',
+  '--heroui-default-400',
+  '--heroui-default-500',
+  '--heroui-default-600',
+  '--heroui-default-700',
+  '--heroui-default-800',
+  '--heroui-default-900',
+  '--heroui-default-foreground',
+  '--heroui-default',
+
+  '--heroui-danger-50',
+  '--heroui-danger-100',
+  '--heroui-danger-200',
+  '--heroui-danger-300',
+  '--heroui-danger-400',
+  '--heroui-danger-500',
+  '--heroui-danger-600',
+  '--heroui-danger-700',
+  '--heroui-danger-800',
+  '--heroui-danger-900',
+  '--heroui-danger-foreground',
+  '--heroui-danger',
+
+  '--heroui-primary-50',
+  '--heroui-primary-100',
+  '--heroui-primary-200',
+  '--heroui-primary-300',
+  '--heroui-primary-400',
+  '--heroui-primary-500',
+  '--heroui-primary-600',
+  '--heroui-primary-700',
+  '--heroui-primary-800',
+  '--heroui-primary-900',
+  '--heroui-primary-foreground',
+  '--heroui-primary',
+
+  '--heroui-secondary-50',
+  '--heroui-secondary-100',
+  '--heroui-secondary-200',
+  '--heroui-secondary-300',
+  '--heroui-secondary-400',
+  '--heroui-secondary-500',
+  '--heroui-secondary-600',
+  '--heroui-secondary-700',
+  '--heroui-secondary-800',
+  '--heroui-secondary-900',
+  '--heroui-secondary-foreground',
+  '--heroui-secondary',
+
+  '--heroui-success-50',
+  '--heroui-success-100',
+  '--heroui-success-200',
+  '--heroui-success-300',
+  '--heroui-success-400',
+  '--heroui-success-500',
+  '--heroui-success-600',
+  '--heroui-success-700',
+  '--heroui-success-800',
+  '--heroui-success-900',
+  '--heroui-success-foreground',
+  '--heroui-success',
+
+  '--heroui-warning-50',
+  '--heroui-warning-100',
+  '--heroui-warning-200',
+  '--heroui-warning-300',
+  '--heroui-warning-400',
+  '--heroui-warning-500',
+  '--heroui-warning-600',
+  '--heroui-warning-700',
+  '--heroui-warning-800',
+  '--heroui-warning-900',
+  '--heroui-warning-foreground',
+  '--heroui-warning',
+
+  '--heroui-focus',
+  '--heroui-overlay',
+  '--heroui-divider',
+  '--heroui-code-background',
+  '--heroui-strong',
+  '--heroui-code-mdx'
+] as const
+
+export const generateTheme = (theme: ThemeConfig, validField?: string) => {
+  let css = `:root ${validField ? `.${validField}` : ''}, .light ${validField ? `.${validField}` : ''}, [data-theme="light"] ${validField ? `.${validField}` : ''} {`
+  for (const key in theme.light) {
+    const _key = key as keyof ThemeConfigItem
+    css += `${_key}: ${theme.light[_key]};`
+  }
+  css += `}`
+  css += `.dark ${validField ? `.${validField}` : ''}, [data-theme="dark"] ${validField ? `.${validField}` : ''} {`
+  for (const key in theme.dark) {
+    const _key = key as keyof ThemeConfigItem
+    css += `${_key}: ${theme.dark[_key]};`
+  }
+  css += `}`
+  return css
+}
diff --git a/napcat.webui/tailwind.config.js b/napcat.webui/tailwind.config.js
index 876ad876..e61cb47e 100644
--- a/napcat.webui/tailwind.config.js
+++ b/napcat.webui/tailwind.config.js
@@ -9,6 +9,12 @@ export default {
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'
   ],
+  safelist: [
+    {
+      pattern:
+        /bg-(primary|secondary|success|danger|warning)-(50|100|200|300|400|500|600|700|800|900)/
+    }
+  ],
   theme: {
     extend: {}
   },