workflow: cssinjs

Author: cole

src/css/base.css

@@ -25,7 +25,6 @@ ul, ol, li {
 }
 
 body {
-    color: green;
     font-size: 14px;
     background: #fff;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@@ -43,18 +42,9 @@ body, html {
 #app {
     width: 100%;
     height: 100%;
+    overflow: hidden;
 }
 
-/*#app a {*/
-/*    color: #1677ff;*/
-/*    text-decoration: none;*/
-/*}*/
-
-/*#app a:active {*/
-/*    color: #0958d9;*/
-/*    text-decoration: none;*/
-/*}*/
-
 *, *::after, *::before {
     box-sizing: border-box;
 }

src/layout/components/avatar/index.jsx

@@ -1,15 +1,17 @@
-import { defineComponent } from 'vue'
-import { Avatar, Dropdown, Menu } from 'ant-design-vue'
-import { CaretDownOutlined, LoginOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons-vue'
+import { defineComponent, unref } from 'vue'
+import { Avatar, Dropdown, Menu, theme } from 'ant-design-vue'
+import { LoginOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons-vue'
 import { useAppInstance } from '@/useAppInstance'
-import classNames from '@/utils/classNames/bind'
-import styles from './style/index.module.scss'
-
-const cx = classNames.bind(styles)
+import { useConfigInject } from '@utils/extend'
+import useStyle from './style'
 
 export default defineComponent({
     inheritAttrs: false,
-    setup () {
+    setup (props, { attrs }) {
+        const { prefixCls } = useConfigInject('pro-avatar', props)
+        const [wrapSSR, hashId] = useStyle(prefixCls)
+        const { token } = theme.useToken()
+
         const { onLogout } = useAppInstance()
 
         function handleLogout () {
@@ -21,10 +23,12 @@ export default defineComponent({
         }
 
         return () => {
+            const { controlHeight } = unref(token)
+
             const dropdownSlots = {
                 overlay: () => {
                     return (
-                        <Menu class={cx('avatar-menu')} selectedKeys={[]}>
+                        <Menu class={`${prefixCls.value}-menu`} selectedKeys={[]}>
                             <Menu.Item
                                 key={'center'}
                                 v-slots={{ icon: () => <UserOutlined/> }}
@@ -50,18 +54,18 @@ export default defineComponent({
                 }
             }
 
-            return (
-                <div class={cx('avatar-wrap')}>
+            return wrapSSR(
+                <div class={[prefixCls.value, hashId.value]} {...attrs}>
                     <Dropdown
                         getPopupContainer={getPopupContainer}
                         placement={'bottomRight'}
                         v-slots={dropdownSlots}
                     >
-                        <div class={cx('avatar-center')}>
-                            <Avatar size={28} v-slots={{ icon: () => <UserOutlined/> }}/>
-                            <div class={cx('avatar-center__icon-down')}>
-                                <CaretDownOutlined/>
-                            </div>
+                        <div class={`${prefixCls.value}-content`}>
+                            <Avatar
+                                size={controlHeight - 4}
+                                v-slots={{ icon: () => <UserOutlined/> }}
+                            />
                         </div>
                     </Dropdown>
                 </div>

src/layout/components/avatar/style/index.js

@@ -0,0 +1,42 @@
+import { genComponentStyleHook, mergeToken } from '@utils/extend'
+
+function genBaseStyle (token) {
+    const { componentCls, avatarMenuMinWidth } = token
+    return {
+        [componentCls]: {
+            position: 'relative',
+            height: '100%',
+            [`${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
+                }
+            },
+            [`${componentCls}-menu`]: {
+                minWidth: avatarMenuMinWidth,
+                whiteSpace: 'nowrap'
+            }
+        }
+    }
+}
+
+export default genComponentStyleHook('ProAvatar', (token) => {
+    const avatarMenuMinWidth = token.fontSize * 8
+
+    const avatarToken = mergeToken(token, {
+        avatarMenuMinWidth
+    })
+    return [genBaseStyle(avatarToken)]
+})

src/layout/components/avatar/style/index.module.scss

@@ -1,10 +1,8 @@
 import { computed, defineComponent, unref } from 'vue'
 import { Breadcrumb } from 'ant-design-vue'
 import useShowTitle from '../../hooks/useShowTitle'
-import classNames from '@/utils/classNames/bind'
-import styles from './style/index.module.scss'
-
-const cx = classNames.bind(styles)
+import { useConfigInject } from '@utils/extend'
+import useStyle from './style'
 
 export default defineComponent({
     inheritAttrs: false,
@@ -14,7 +12,10 @@ export default defineComponent({
             default: undefined
         }
     },
-    setup (props) {
+    setup (props, { attrs }) {
+        const { prefixCls } = useConfigInject('pro-breadcrumb', props)
+        const [wrapSSR, hashId] = useStyle(prefixCls)
+
         const { showTitle } = useShowTitle()
 
         const levels = computed(() => {
@@ -28,16 +29,18 @@ export default defineComponent({
         })
 
         return () => {
-            return (
-                <Breadcrumb class={cx('breadcrumb')}>
-                    {unref(levels).map((item, index) => {
-                        return (
-                            <Breadcrumb.Item key={item.name || index}>
-                                {showTitle && showTitle(item)}
-                            </Breadcrumb.Item>
-                        )
-                    })}
-                </Breadcrumb>
+            return wrapSSR(
+                <div class={[prefixCls.value, hashId.value]} {...attrs}>
+                    <Breadcrumb>
+                        {unref(levels).map((item, index) => {
+                            return (
+                                <Breadcrumb.Item key={item.name || index}>
+                                    {showTitle && showTitle(item)}
+                                </Breadcrumb.Item>
+                            )
+                        })}
+                    </Breadcrumb>
+                </div>
             )
         }
     }

src/layout/components/breadcrumb/index.jsx

@@ -0,0 +1,20 @@
+import { genComponentStyleHook } from '@utils/extend'
+
+function genBaseStyle (token) {
+    const { componentCls, antCls } = token
+    return {
+        [componentCls]: {
+            paddingInline: token.sizeMD,
+            [`ol`]: {
+                flexWrap: 'nowrap'
+            },
+            [`${antCls}-breadcrumb-link`]: {
+                whiteSpace: 'nowrap'
+            }
+        }
+    }
+}
+
+export default genComponentStyleHook('ProBreadcrumb', (token) => {
+    return [genBaseStyle(token)]
+})

src/layout/components/breadcrumb/style/index.js

@@ -2,14 +2,15 @@ import { defineComponent, onBeforeUnmount, onMounted, ref, unref } from 'vue'
 import { ExitFullscreenOutlined, FullscreenOutlined } from '@/components/icon'
 import native from './screenfull'
 import { off, on } from '@utils/dom'
-import classNames from '@/utils/classNames/bind'
-import styles from './style/index.module.scss'
-
-const cx = classNames.bind(styles)
+import { useConfigInject } from '@utils/extend'
+import useStyle from './style'
 
 export default defineComponent({
     inheritAttrs: false,
-    setup () {
+    setup (props, { attrs }) {
+        const { prefixCls } = useConfigInject('pro-fullscreen', props)
+        const [wrapSSR, hashId] = useStyle(prefixCls)
+
         const { fullscreenElement, exitFullscreen, requestFullscreen, fullscreenchange } = native
 
         const fullest = ref(false)
@@ -40,8 +41,8 @@ export default defineComponent({
         })
 
         return () => {
-            return (
-                <div class={cx('fullscreen')} onClick={handleFullscreen}>
+            return wrapSSR(
+                <div class={[prefixCls.value, hashId.value]} onClick={handleFullscreen} {...attrs}>
                     {unref(fullest) ? <ExitFullscreenOutlined/> : <FullscreenOutlined/>}
                 </div>
             )

src/layout/components/breadcrumb/style/index.module.scss

@@ -0,0 +1,29 @@
+import { genComponentStyleHook } from '@utils/extend'
+
+function genBaseStyle (token) {
+    const { componentCls } = token
+    return {
+        [componentCls]: {
+            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
+            }
+        }
+    }
+}
+
+export default genComponentStyleHook('ProFullscreen', (token) => {
+    return [genBaseStyle(token)]
+})

src/layout/components/fullscreen/index.jsx

@@ -4,14 +4,15 @@ import { GlobalOutlined } from '@ant-design/icons-vue'
 import { useAppInstance } from '@/useAppInstance'
 import { map } from 'lodash-es'
 import { localCache, LOCALE__LOCAL } from '@/utils/storage'
-import classNames from '@/utils/classNames/bind'
-import styles from './style/index.module.scss'
-
-const cx = classNames.bind(styles)
+import { useConfigInject } from '@utils/extend'
+import useStyle from './style'
 
 export default defineComponent({
     inheritAttrs: false,
-    setup () {
+    setup (props, { attrs }) {
+        const { prefixCls } = useConfigInject('pro-language', props)
+        const [wrapSSR, hashId] = useStyle(prefixCls)
+
         const { setLocale } = useAppInstance()
         // 需要修改为不需要依赖 useI18n 的方式
         // 并且不干涉 layout 的逻辑
@@ -49,7 +50,7 @@ export default defineComponent({
             const dropdownSlots = {
                 overlay: () => {
                     return (
-                        <Menu class={cx('language-menu')} selectedKeys={[$i18n.locale]}>
+                        <Menu class={`${prefixCls.value}-menu`} selectedKeys={[$i18n.locale]}>
                             {map(localeList, (value, key) => {
                                 return (
                                     <Menu.Item key={key} onClick={onLocaleChange.bind(null, key)}>
@@ -62,14 +63,14 @@ export default defineComponent({
                 }
             }
 
-            return (
-                <div class={cx('language-wrap')}>
+            return wrapSSR(
+                <div class={[prefixCls.value, hashId.value]} {...attrs}>
                     <Dropdown
                         placement={'bottom'}
                         getPopupContainer={getPopupContainer}
                         v-slots={dropdownSlots}
                     >
-                        <div class={cx('language-center')}>
+                        <div class={`${prefixCls.value}-content`}>
                             <GlobalOutlined/>
                         </div>
                     </Dropdown>