feat: 预定义主题

2025-07-19 12:03:37 +00:00 · 2025-02-09 11:58:46 +08:00
parent 2c7b0625e8
commit 9f78e1ce1e
6 changed files with 311 additions and 170 deletions
--- 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"
--- 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
--- 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>
    </>
--- 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
 }
--- 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
+}
--- 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: {}
  },