fix: custom app color

Signed-off-by: Innei <[email protected]>

package.json

@@ -85,6 +85,7 @@
     "socket.io-client": "4.7.5",
     "sortablejs": "1.15.2",
     "swrv": "1.0.4",
+    "tinycolor2": "1.6.0",
     "umi-request": "1.4.0",
     "unidata.js": "0.8.0",
     "validator": "13.12.0",
@@ -104,6 +105,7 @@
     "@types/markdown-escape": "1.1.3",
     "@types/qs": "6.9.15",
     "@types/sortablejs": "1.15.8",
+    "@types/tinycolor2": "1.4.6",
     "@types/validator": "13.11.10",
     "@vitejs/plugin-vue": "5.0.4",
     "@vitejs/plugin-vue-jsx": "3.1.0",

src/App.tsx

@@ -1,23 +1,26 @@
-import { PortalInjectKey } from '~/hooks/use-portal-element'
 import {
+  darkTheme,
+  dateZhCN,
+  lightTheme,
   NConfigProvider,
   NDialogProvider,
   NMessageProvider,
   NNotificationProvider,
-  darkTheme,
-  dateZhCN,
-  lightTheme,
   useDialog,
   useMessage,
   useNotification,
+  useThemeVars,
   zhCN,
 } from 'naive-ui'
 import { defineComponent, onMounted } from 'vue'
 import { RouterView } from 'vue-router'
+import type { VNode } from 'vue'
+
+import { PortalInjectKey } from '~/hooks/use-portal-element'
 
 import { ThemeColorConfig } from '../theme.config'
 import { useUIStore } from './stores/ui'
-import type { VNode } from 'vue'
+import { colorRef } from './utils/color'
 
 const Root = defineComponent({
   name: 'RootView',
@@ -70,13 +73,14 @@ const App = defineComponent({
           locale={zhCN}
           dateLocale={dateZhCN}
           themeOverrides={{
-            common: ThemeColorConfig,
+            common: colorRef.value,
           }}
           theme={naiveUIDark ? darkTheme : isDark ? darkTheme : lightTheme}
         >
           <NNotificationProvider>
             <NMessageProvider>
               <NDialogProvider>
+                <AccentColorInjector />
                 <Root />
               </NDialogProvider>
             </NMessageProvider>
@@ -87,5 +91,28 @@ const App = defineComponent({
   },
 })
 
+const AccentColorInjector = defineComponent({
+  setup() {
+    const vars = useThemeVars()
+    watchEffect(() => {
+      const { primaryColor, primaryColorHover, primaryColorSuppl } = vars.value
+
+      document.documentElement.style.setProperty(
+        '--color-primary',
+        primaryColor,
+      )
+      document.documentElement.style.setProperty(
+        '--color-primary-shallow',
+        primaryColorHover,
+      )
+      document.documentElement.style.setProperty(
+        '--color-primary-deep',
+        primaryColorSuppl,
+      )
+    })
+
+    return () => null
+  },
+})
 // eslint-disable-next-line import/no-default-export
 export default App

src/components/config-form/index.tsx

@@ -1,4 +1,4 @@
-import { useStoreRef } from '~/hooks/use-store-ref'
+import { O } from 'crossbell.js/dist/index-LKLW_17H'
 import { get, set } from 'lodash-es'
 import { marked } from 'marked'
 import {
@@ -14,9 +14,12 @@ import {
   NSwitch,
   NText,
 } from 'naive-ui'
+import { isVNode } from 'vue'
+import type { ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+
+import { useStoreRef } from '~/hooks/use-store-ref'
 import { UIStore } from '~/stores/ui'
 import { uuid } from '~/utils'
-import type { ComputedRef, InjectionKey, PropType, Ref } from 'vue'
 
 const NFormPrefixCls = 'mt-6'
 const NFormBaseProps = {
@@ -53,9 +56,15 @@ export const ConfigForm = defineComponent({
       required: false,
       default: (key: string) => key,
     },
+
+    extendConfigView: {
+      type: Object as PropType<{
+        [key: string]: VNode
+      }>,
+    },
   },
 
-  setup(props) {
+  setup(props, { slots }) {
     const formData = ref(props.initialValue)
 
     watchEffect(
@@ -131,7 +140,10 @@ export const ConfigForm = defineComponent({
                       dataKey={props.getKey(key)}
                       formData={formData}
                       schema={schema}
+                      property={key}
                     />
+                    {props.extendConfigView?.[key]}
+                    {slots[key]?.()}
                   </NForm>
                 </NCollapseItem>
               )
@@ -168,16 +180,20 @@ const SchemaSection = defineComponent({
       type: String as PropType<string>,
       required: true,
     },
+    property: {
+      type: String as PropType<string>,
+    },
   },
   setup(props) {
     const { definitions, getKey } = inject(JSONSchemaFormInjectKey, {} as any)
 
     return () => {
-      const { schema, formData, dataKey: key } = props
+      const { schema, formData, dataKey: key, property } = props
 
       if (!schema) {
         return null
       }
+
       return (
         <>
           {Object.keys(schema.properties).map((property) => {
@@ -193,6 +209,7 @@ const SchemaSection = defineComponent({
                   dataKey={`${getKey(key)}.${property}`}
                   formData={formData}
                   schema={nestSchmea}
+                  property={property}
                 />
               )
             }

src/utils/color.ts

@@ -0,0 +1,28 @@
+import tinycolor from 'tinycolor2'
+
+import { ThemeColorConfig } from '~/../theme.config'
+
+export const colorRef = useStorage('mx-admin-color', ThemeColorConfig)
+
+interface Colors {
+  primaryColor: string
+  primaryColorHover: string
+  primaryColorPressed: string
+  primaryColorSuppl: string
+}
+
+export function defineColors(baseColor: string): Colors {
+  const base = tinycolor(baseColor)
+
+  const primaryColor = base.toHexString()
+  const primaryColorHover = base.brighten(10).toHexString()
+  const primaryColorPressed = base.darken(10).toHexString()
+  const primaryColorSuppl = base.darken(15).toHexString()
+
+  return {
+    primaryColor,
+    primaryColorHover,
+    primaryColorPressed,
+    primaryColorSuppl,
+  }
+}

src/views/setting/tabs/system.tsx

@@ -1,11 +1,6 @@
-import { HeaderActionButton } from '~/components/button/rounded-button'
-import { ConfigForm } from '~/components/config-form'
-import { CheckCircleOutlinedIcon } from '~/components/icons'
-import { useStoreRef } from '~/hooks/use-store-ref'
-import { useLayout } from '~/layouts/content'
 import { camelCase, cloneDeep, isEmpty, merge } from 'lodash-es'
-import { UIStore } from '~/stores/ui'
-import { RESTManager, deepDiff } from '~/utils'
+import { NButton, NColorPicker, NFormItem, useThemeVars } from 'naive-ui'
+import { ThemeColorConfig } from 'theme.config'
 import {
   defineComponent,
   onBeforeUnmount,
@@ -16,6 +11,15 @@ import {
   watch,
 } from 'vue'
 
+import { HeaderActionButton } from '~/components/button/rounded-button'
+import { ConfigForm } from '~/components/config-form'
+import { CheckCircleOutlinedIcon } from '~/components/icons'
+import { useStoreRef } from '~/hooks/use-store-ref'
+import { useLayout } from '~/layouts/content'
+import { UIStore } from '~/stores/ui'
+import { deepDiff, RESTManager } from '~/utils'
+import { colorRef, defineColors } from '~/utils/color'
+
 const NFormPrefixCls = 'mt-6'
 const NFormBaseProps = {
   class: NFormPrefixCls,
@@ -153,8 +157,56 @@ export const TabSystem = defineComponent(() => {
               .replace('Dto', '')
           }}
           schema={schema.value}
-        />
+        >
+          {{
+            AdminExtraDto() {
+              return (
+                <>
+                  <NFormItem label={'主题色'}>
+                    <AppColorSetter />
+                  </NFormItem>
+                </>
+              )
+            },
+          }}
+        </ConfigForm>
       )}
     </Fragment>
   )
 })
+
+const AppColorSetter = defineComponent({
+  setup() {
+    const vars = useThemeVars()
+
+    const $style = document.createElement('style')
+    $style.innerHTML = `* { transition: none !important; }`
+
+    return () => (
+      <div class={'flex items-center gap-2'}>
+        <NColorPicker
+          class={'w-36'}
+          value={vars.value.primaryColor}
+          onUpdateValue={(value) => {
+            document.head.appendChild($style)
+
+            Object.assign(colorRef.value, defineColors(value))
+            setTimeout(() => {
+              document.head.removeChild($style)
+            })
+          }}
+        ></NColorPicker>
+
+        <NButton
+          size="small"
+          ghost
+          onClick={() => {
+            Object.assign(colorRef.value, ThemeColorConfig)
+          }}
+        >
+          <span>重置</span>
+        </NButton>
+      </div>
+    )
+  },
+})

windi.config.ts

@@ -35,9 +35,9 @@ export default defineConfig({
       },
       colors: {
         primary: {
-          default: ThemeColorConfig.primaryColor,
-          deep: ThemeColorConfig.primaryColorPressed,
-          shallow: ThemeColorConfig.primaryColorHover,
+          default: 'var(--color-primary)',
+          deep: 'var(--color-primary-deep)',
+          shallow: 'var(--color-primary-shallow)',
         },
         gray$: {
           default: '#ddd',