wip: 主题设置

ColeWang · Jul 27, 2024 · 0fd49f3 · 0fd49f3
1 parent 5ed16da
commit 0fd49f3
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 101 deletions.
diff --git a/packages/table/components/action/Action.jsx b/packages/table/components/action/Action.jsx
@@ -32,8 +32,10 @@ export default defineComponent({
                 [`${prefixCls.value}-warning`]: props.type === 'warning',
                 [`${prefixCls.value}-error`]: props.type === 'error'
             }]
+
+            const actionProps = { ...attrs, onClick: onClick }
             return wrapSSR(
-                <a class={actionClass} onClick={onClick} {...attrs}>
+                <a class={actionClass} {...actionProps}>
                     {slots.default && slots.default()}
                 </a>
             )

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,42 +1,38 @@
 import { defineComponent, ref, unref } from 'vue'
 import { RouterView } from 'vue-router'
-import { ConfigProvider, theme } from 'ant-design-vue'
+import { ConfigProvider } from 'ant-design-vue'
 import { LocaleProvider } from '@packages'
-import { useI18n } from 'vue-i18n'
-import dayjs from 'dayjs'
 import { createAppInstance } from './useAppInstance'
 
 export default defineComponent({
     inheritAttrs: false,
     setup () {
-        const { locale, getLocaleMessage } = useI18n()
-
         const localeMessage = ref({})
+        const customTheme = ref({})
+
+        function setCustomTheme (value) {
+            customTheme.value = value
+        }
 
-        function setLocale (value) {
-            if (locale && getLocaleMessage) {
-                const message = getLocaleMessage(value)
-                locale.value = value
-                localeMessage.value = message
-                dayjs.locale(message.dayjs)
-            }
+        function setLocaleMessage (value) {
+            localeMessage.value = value
         }
 
-        function onLogout () {
-            console.log('退出登录')
+        function onAvatarAction (key) {
+            console.log(key)
         }
 
         createAppInstance({
-            setLocale: setLocale,
-            onLogout: onLogout
+            setCustomTheme: setCustomTheme,
+            setLocaleMessage: setLocaleMessage,
+            onAvatarAction: onAvatarAction
         })
 
         return () => {
             const { antd, packages } = unref(localeMessage)
-            const { darkAlgorithm, compactAlgorithm } = theme
 
             return (
-                <ConfigProvider theme={{ algorithm: [] }} locale={antd}>
+                <ConfigProvider locale={antd} theme={unref(customTheme)}>
                     <LocaleProvider locale={packages}>
                         <RouterView/>
                     </LocaleProvider>

diff --git a/src/layout/compatible/navbar/index.jsx b/src/layout/compatible/navbar/index.jsx
@@ -1,8 +1,9 @@
 import { defineComponent } from 'vue'
 import Breadcrumb from '../../components/breadcrumb'
+import Settings from '../../components/settings'
 import Fullscreen from '../../components/fullscreen'
-import Avatar from '../../components/avatar'
 import Language from '../../components/language'
+import Avatar from '../../components/avatar'
 import { HamburgerOutlined } from '@/components/icon'
 import { useConfigInject } from '@utils/extend'
 import useStyle from './style'
@@ -48,6 +49,7 @@ export default defineComponent({
                         <Breadcrumb router={router}/>
                     </div>
                     <div class={`${prefixCls.value}-right`}>
+                        <Settings/>
                         <Fullscreen/>
                         <Language/>
                         <Avatar/>

diff --git a/src/layout/compatible/tags/Node.jsx b/src/layout/compatible/tags/Node.jsx
@@ -46,16 +46,18 @@ export default defineComponent({
             }]
 
             return wrapSSR(
-                <div class={[prefixCls.value, hashId.value]} onClick={onClick} {...attrs}>
-                    <span class={dotInnerClass}/>
-                    <span class={`${prefixCls.value}-text`}>
+                <div class={[prefixCls.value, hashId.value]} {...attrs}>
+                    <div class={`${prefixCls.value}-content`} onClick={onClick}>
+                        <span class={dotInnerClass}/>
+                        <span class={`${prefixCls.value}-text`}>
                         {slots.default && slots.default()}
                     </span>
-                    {closable && (
-                        <span class={`${prefixCls.value}-close`} onClick={withModifiers(onClose, ['stop'])}>
-                            <CloseOutlined/>
-                        </span>
-                    )}
+                        {closable && (
+                            <span class={`${prefixCls.value}-close`} onClick={withModifiers(onClose, ['stop'])}>
+                                <CloseOutlined/>
+                            </span>
+                        )}
+                    </div>
                 </div>
             )
         }

diff --git a/src/layout/compatible/tags/style/node.js b/src/layout/compatible/tags/style/node.js
@@ -4,46 +4,51 @@ function genBaseStyle (token) {
     const { componentCls, tagPadding, tagCloseFontSize } = token
     return {
         [componentCls]: {
-            height: token.controlHeight,
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            border: `1px solid ${token.colorBorder}`,
-            borderRadius: token.borderRadiusSM,
-            paddingInline: tagPadding,
-            transition: 'all 0.2s',
-            cursor: 'pointer',
-            background: token.colorBgContainer,
-            [`${componentCls}-text`]: {
-                fontSize: token.fontSizeSM,
-                lineHeight: token.lineHeightSM,
-                color: token.colorText
-            },
-            [`${componentCls}-dot-inner`]: {
-                width: token.fontSizeSM,
-                height: token.fontSizeSM,
-                borderRadius: '50%',
-                marginInlineEnd: tagPadding,
-                background: token.colorFill,
+            position: 'relative',
+            display: 'inline-block',
+            [`${componentCls}-content`]: {
+                height: token.controlHeight,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                border: `1px solid ${token.colorBorder}`,
+                borderRadius: token.borderRadiusSM,
+                paddingInline: tagPadding,
                 transition: 'all 0.2s',
-                [`&-primary`]: {
-                    background: token.colorPrimary,
-                }
-            },
-            [`${componentCls}-close`]: {
-                width: token.fontSize,
-                height: token.fontSize,
-                fontSize: tagCloseFontSize,
-                color: token.colorText,
-                lineHeight: `${token.fontSize}px`,
-                textAlign: 'center',
-                marginInlineStart: token.sizeXXS,
                 cursor: 'pointer',
-                [`&:hover`]: {
-                    color: token.colorError
+                background: token.colorBgContainer,
+                overflow: 'hidden',
+                [`${componentCls}-text`]: {
+                    fontSize: token.fontSizeSM,
+                    lineHeight: token.lineHeightSM,
+                    color: token.colorText
+                },
+                [`${componentCls}-dot-inner`]: {
+                    width: token.fontSizeSM,
+                    height: token.fontSizeSM,
+                    borderRadius: '50%',
+                    marginInlineEnd: tagPadding,
+                    background: token.colorFill,
+                    transition: 'all 0.2s',
+                    [`&-primary`]: {
+                        background: token.colorPrimary,
+                    }
                 },
-                [`&:active`]: {
-                    color: token.colorErrorActive
+                [`${componentCls}-close`]: {
+                    width: token.fontSize,
+                    height: token.fontSize,
+                    fontSize: tagCloseFontSize,
+                    color: token.colorText,
+                    lineHeight: `${token.fontSize}px`,
+                    textAlign: 'center',
+                    marginInlineStart: token.sizeXXS,
+                    cursor: 'pointer',
+                    [`&:hover`]: {
+                        color: token.colorError
+                    },
+                    [`&:active`]: {
+                        color: token.colorErrorActive
+                    }
                 }
             }
         }

diff --git a/src/layout/components/avatar/index.jsx b/src/layout/components/avatar/index.jsx
@@ -14,10 +14,10 @@ export default defineComponent({
         const { token } = theme.useToken()
         const { $t } = useGlobalProperties()
 
-        const { onLogout } = useAppInstance()
+        const { onAvatarAction } = useAppInstance()
 
-        function handleLogout () {
-            onLogout && onLogout()
+        function onMenuClick (key) {
+            onAvatarAction && onAvatarAction(key)
         }
 
         function getPopupContainer (trigger) {
@@ -32,21 +32,23 @@ export default defineComponent({
                     return (
                         <Menu class={`${prefixCls.value}-menu`} selectedKeys={[]}>
                             <Menu.Item
-                                key={'center'}
+                                key={'profile'}
+                                onClick={onMenuClick.bind(null, 'profile')}
                                 v-slots={{ icon: () => <UserOutlined/> }}
                             >
                                 {$t ? $t('layout.navbar.profile') : '个人中心'}
                             </Menu.Item>
                             <Menu.Item
                                 key={'settings'}
+                                onClick={onMenuClick.bind(null, 'settings')}
                                 v-slots={{ icon: () => <SettingOutlined/> }}
                             >
                                 {$t ? $t('layout.navbar.settings') : '个人设置'}
                             </Menu.Item>
                             <Menu.Divider/>
                             <Menu.Item
                                 key={'logout'}
-                                onClick={handleLogout}
+                                onClick={onMenuClick.bind(null, 'logout')}
                                 v-slots={{ icon: () => <LoginOutlined/> }}
                             >
                                 {$t ? $t('layout.navbar.logout') : '退出登录'}

diff --git a/src/layout/components/fullscreen/index.jsx b/src/layout/components/fullscreen/index.jsx
@@ -42,8 +42,10 @@ export default defineComponent({
 
         return () => {
             return wrapSSR(
-                <div class={[prefixCls.value, hashId.value]} onClick={handleFullscreen} {...attrs}>
-                    {unref(fullest) ? <ExitFullscreenOutlined/> : <FullscreenOutlined/>}
+                <div class={[prefixCls.value, hashId.value]} {...attrs}>
+                    <div class={`${prefixCls.value}-content`} onClick={handleFullscreen}>
+                        {unref(fullest) ? <ExitFullscreenOutlined/> : <FullscreenOutlined/>}
+                    </div>
                 </div>
             )
         }

diff --git a/src/layout/components/fullscreen/style/index.js b/src/layout/components/fullscreen/style/index.js
@@ -4,21 +4,25 @@ function genBaseStyle (token) {
     const { componentCls } = token
     return {
         [componentCls]: {
+            position: 'relative',
             height: '100%',
-            fontSize: token.fontSizeLG,
-            color: token.colorText,
-            lineHeight: token.lineHeightLG,
-            paddingInline: token.fontSizeSM,
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            [`&:hover`]: {
-                color: token.colorPrimaryHover,
-                background: token.colorFillQuaternary
-            },
-            [`&:active`]: {
-                color: token.colorPrimaryActive,
-                background: token.colorFillQuaternary
+            [`${componentCls}-content`]: {
+                height: '100%',
+                fontSize: token.fontSizeLG,
+                color: token.colorText,
+                lineHeight: token.lineHeightLG,
+                paddingInline: token.fontSizeSM,
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                [`&:hover`]: {
+                    color: token.colorPrimaryHover,
+                    background: token.colorFillQuaternary
+                },
+                [`&:active`]: {
+                    color: token.colorPrimaryActive,
+                    background: token.colorFillQuaternary
+                }
             }
         }
     }

diff --git a/src/layout/components/language/index.jsx b/src/layout/components/language/index.jsx
@@ -1,39 +1,41 @@
-import { defineComponent } from 'vue'
+import { defineComponent, unref } from 'vue'
 import { Dropdown, Menu } from 'ant-design-vue'
 import { GlobalOutlined } from '@ant-design/icons-vue'
-import { useAppInstance } from '@/useAppInstance'
-import { localCache, LOCALE__LOCAL } from '@/utils/storage'
-import useGlobalProperties from '@utils/hooks/useGlobalProperties'
 import { useConfigInject } from '@utils/extend'
 import useStyle from './style'
 import { map } from 'lodash-es'
+// --
+import { localCache, LOCALE__LOCAL } from '@/utils/storage'
+import { useAppInstance } from '@/useAppInstance'
+import { useI18n } from 'vue-i18n'
+import dayjs from 'dayjs'
 
 export default defineComponent({
     inheritAttrs: false,
     setup (props, { attrs }) {
         const { prefixCls } = useConfigInject('pro-language', props)
         const [wrapSSR, hashId] = useStyle(prefixCls)
 
-        // 需要修改为不需要依赖 useI18n 的方式
-        // 并且不干涉 layout 的逻辑
-        const { $i18n = { locale: 'zh-CN' } } = useGlobalProperties()
-        const { setLocale } = useAppInstance()
+        const { locale, getLocaleMessage } = useI18n()
+        const { setLocaleMessage } = useAppInstance()
 
         const language = navigator.language
-        const localeLang = (language === 'zh-CN' || language === 'en-US') ? language : false
-        const lang = localCache.get(LOCALE__LOCAL) || localeLang || 'zh-CN'
+        const lang = (language === 'zh-CN' || language === 'en-US') ? language : false
+        const localeLang = localCache.get(LOCALE__LOCAL) || lang || 'zh-CN'
+        // 先执行 缓存的 localeLang
+        onLocaleChange(localeLang)
 
         const localeList = {
             'zh-CN': '中文简体',
             'en-US': 'English'
         }
 
-        // 先执行 缓存的 lang
-        onLocaleChange(lang)
-
         function onLocaleChange (value) {
-            setLocale && setLocale(value)
+            locale.value = value
             localCache.set(LOCALE__LOCAL, value)
+            const message = getLocaleMessage(value)
+            dayjs.locale(message.dayjs)
+            setLocaleMessage && setLocaleMessage(message)
         }
 
         function getPopupContainer (trigger) {
@@ -44,7 +46,7 @@ export default defineComponent({
             const dropdownSlots = {
                 overlay: () => {
                     return (
-                        <Menu class={`${prefixCls.value}-menu`} selectedKeys={[$i18n.locale]}>
+                        <Menu class={`${prefixCls.value}-menu`} selectedKeys={[unref(locale)]}>
                             {map(localeList, (value, key) => {
                                 return (
                                     <Menu.Item key={key} onClick={onLocaleChange.bind(null, key)}>