wip: plugin

.eslintrc.cjs

@@ -1,5 +1,6 @@
 /* eslint-env node */
 module.exports = {
+    globals: { __SITE_VERSION__: 'readonly' },
     env: { browser: true, node: true },
     plugins: ['vue'],
     extends: [

entry.packages.js

@@ -14,4 +14,4 @@ export { TagsNav }
 
 // packages
 
-export * from '@packages'
+export * from '@site'

jsconfig.json

@@ -1,12 +1,16 @@
 {
-    "compilerOptions": {
-        "paths": {
-            "@/*": [
-                "./src/*"
-            ],
-            "@packages/*": [
-                "./packages/*"
-            ]
-        }
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "@site/*": [
+        "packages/*"
+      ]
     }
+  },
+  "include": [
+    "./src/*"
+  ]
 }

packages/index.js

@@ -1 +1,3 @@
+export * from './install-site'
+export * from './plugins'
 export * from './components'

packages/install-site.js

@@ -0,0 +1,29 @@
+import { inject } from 'vue'
+import { Screen } from './plugins'
+
+const BaseKey = Symbol('Site')
+
+const defaultPlugins = [Screen]
+
+function install (app, options = {}) {
+    const $site = {
+        version: __SITE_VERSION__,
+        config: options.config || {}
+    }
+
+    app.config.globalProperties.$site = $site
+    app.provide(BaseKey, $site)
+
+    defaultPlugins.forEach((plugin) => {
+        plugin.install(app, options, $site)
+        plugin.__installed = true
+    })
+}
+
+export function useSite () {
+    return inject(BaseKey, {})
+}
+
+export function createSite (config) {
+    return { name: 'Site', install: install }
+}

packages/plugins/screen/index.js

@@ -3,6 +3,8 @@ import { addClass, getWindowSize, removeClass } from '../../utils/dom'
 import { addEvt } from '../../utils/event'
 import { debounce, pick } from 'lodash-es'
 
+const SIZE_LIST = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+
 export default createReactivePlugin({
     width: 0,
     height: 0,
@@ -36,9 +38,10 @@ export default createReactivePlugin({
     xl: false,
     xxl: false
 }, {
-    install (app, options) {
-        const { sizes = {}, delay = 16, classes } = options || {}
-        const SIZE_LIST = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+    install (app, options, $site) {
+        const { sizes = {}, delay = 16, classes } = options
+
+        $site && ($site.screen = this)
 
         this.sizes = pick({ ...this.sizes, ...sizes }, SIZE_LIST)
 

src/App.jsx

@@ -1,7 +1,7 @@
 import { defineComponent, unref } from 'vue'
 import { RouterView } from 'vue-router'
 import { ConfigProvider } from 'ant-design-vue'
-import { LocaleProvider } from '@packages'
+import { LocaleProvider } from '@site'
 import { createAppInstance } from '@/hooks/useAppInstance'
 import useLocaleMessage from '@/hooks/useLocaleMessage'
 import useThemeConfig from '@/hooks/useThemeConfig'

src/boot/index.js

@@ -1,9 +1,9 @@
-import plugins from './plugins'
+import sitePlugin from './site-plugin'
 import i18n from './i18n'
 import axios from './axios'
 import { isFunction } from 'lodash-es'
 
-const bootArray = [plugins, i18n, axios]
+const bootArray = [sitePlugin, i18n, axios]
 
 export default async (...args) => {
     for (const bootChunk of bootArray) {

src/boot/site-plugin.js

@@ -0,0 +1,7 @@
+import { createSite } from '@site'
+
+export default ({ app }) => {
+    const site = createSite()
+    // 注入
+    app.use(site)
+}

src/components/loading/style/index.js

@@ -1,4 +1,4 @@
-import { genComponentStyleHook } from '@packages/utils/extend'
+import { genComponentStyleHook } from '@site/utils/extend'
 
 function genBaseStyle (token) {
     const { componentCls } = token

src/components/progress/Progress.jsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { useConfigInject } from '@packages/utils/extend'
+import { useConfigInject } from '@site/utils/extend'
 import useStyle from './style'
 
 export default defineComponent({

src/components/progress/style/index.js

@@ -1,4 +1,4 @@
-import { genComponentStyleHook } from '@packages/utils/extend'
+import { genComponentStyleHook } from '@site/utils/extend'
 
 function genBaseStyle (token) {
     const { componentCls } = token

src/components/transition/collapseMotion.js

@@ -1,5 +1,5 @@
 import { nextTick } from 'vue'
-import { addClass, removeClass } from '@packages/utils/dom'
+import { addClass, removeClass } from '@site/utils/dom'
 
 function collapseMotion (name, appear) {
     return {

src/layout/compatible/base-layout/index.jsx

@@ -1,6 +1,6 @@
 import { defineComponent, ref, unref } from 'vue'
-import { getPropsSlot } from '@packages/utils/props-util'
-import { useConfigInject } from '@packages/utils/extend'
+import { getPropsSlot } from '@site/utils/props-util'
+import { useConfigInject } from '@site/utils/extend'
 import useStyle from './style'
 
 export default defineComponent({

src/layout/compatible/base-layout/style/index.js

@@ -1,4 +1,4 @@
-import { genComponentStyleHook, mergeToken } from '@packages/utils/extend'
+import { genComponentStyleHook, mergeToken } from '@site/utils/extend'
 
 function genBaseStyle (token) {
     const { componentCls, layoutBgColor } = token

src/layout/compatible/container/index.jsx

@@ -1,8 +1,8 @@
 import { defineComponent, KeepAlive, ref, unref } from 'vue'
 import { RouterView } from 'vue-router'
 import { BackTop } from 'ant-design-vue'
-import { getPropsSlot } from '@packages/utils/props-util'
-import { useConfigInject } from '@packages/utils/extend'
+import { getPropsSlot } from '@site/utils/props-util'
+import { useConfigInject } from '@site/utils/extend'
 import useStyle from './style'
 
 export default defineComponent({

src/layout/compatible/container/style/index.js

@@ -1,4 +1,4 @@
-import { genComponentStyleHook, mergeToken } from '@packages/utils/extend'
+import { genComponentStyleHook, mergeToken } from '@site/utils/extend'
 
 function genBaseStyle (token) {
     const { componentCls, containerPaddingInline } = token

src/layout/compatible/navbar/index.jsx

@@ -6,8 +6,8 @@ import Fullscreen from '../../components/fullscreen'
 import Language from '../../components/language'
 import Avatar from '../../components/avatar'
 import { HamburgerOutlined } from '@/components/icon'
-import { getElement } from '@packages//utils/dom'
-import { useConfigInject } from '@packages/utils/extend'
+import { getElement } from '@site//utils/dom'
+import { useConfigInject } from '@site/utils/extend'
 import useStyle from './style'
 
 export default defineComponent({

src/layout/compatible/navbar/style/index.js

@@ -1,4 +1,4 @@
-import { genComponentStyleHook, mergeToken } from '@packages/utils/extend'
+import { genComponentStyleHook, mergeToken } from '@site/utils/extend'
 
 function genBaseStyle (token) {
     const { componentCls, navbarHeight, navbarPaddingInline, navbarCollapseSize } = token

src/layout/compatible/sidebar/index.jsx

@@ -3,8 +3,8 @@ import { Menu, theme } from 'ant-design-vue'
 import OutIcon from './OutIcon'
 import useShowTitle from '../../hooks/useShowTitle'
 import { hasChild, showChildren } from '../../utils'
-import { getPropsSlot } from '@packages/utils/props-util'
-import { useConfigInject } from '@packages/utils/extend'
+import { getPropsSlot } from '@site/utils/props-util'
+import { useConfigInject } from '@site/utils/extend'
 import useStyle from './style'
 import { dropRight, head, isNil, last, reverse } from 'lodash-es'
 

src/layout/compatible/sidebar/style/index.js

@@ -1,4 +1,4 @@
-import { genComponentStyleHook, mergeToken } from '@packages/utils/extend'
+import { genComponentStyleHook, mergeToken } from '@site/utils/extend'
 
 function genBaseStyle (token) {
     const { componentCls, antCls, sidebarLogoHeight, sidebarLightBg, sidebarDarkBg } = token

src/layout/compatible/tags/Node.jsx

@@ -1,7 +1,7 @@
 import { defineComponent, withModifiers } from 'vue'
 import { CloseOutlined } from '@ant-design/icons-vue'
-import { preventDefault } from '@packages/utils/event'
-import { useConfigInject } from '@packages/utils/extend'
+import { preventDefault } from '@site/utils/event'
+import { useConfigInject } from '@site/utils/extend'
 import useStyle from './style/node'
 
 export default defineComponent({

src/layout/compatible/tags/index.jsx

@@ -3,10 +3,10 @@ import { Button, ConfigProvider, Dropdown, Menu, theme } from 'ant-design-vue'
 import { CloseCircleOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
 import TagNode from './Node'
 import useShowTitle from '../../hooks/useShowTitle'
-import { omitNil } from '@packages/utils/util'
-import { getElement } from '@packages/utils/dom'
-import useGlobalProperties from '@packages/hooks/useGlobalProperties'
-import { useConfigInject } from '@packages/utils/extend'
+import { omitNil } from '@site/utils/util'
+import { getElement } from '@site/utils/dom'
+import useGlobalProperties from '@site/hooks/useGlobalProperties'
+import { useConfigInject } from '@site/utils/extend'
 import useStyle from './style'
 import { isString } from 'lodash-es'
 

src/layout/compatible/tags/style/index.js

@@ -1,4 +1,4 @@
-import { genComponentStyleHook, mergeToken } from '@packages/utils/extend'
+import { genComponentStyleHook, mergeToken } from '@site/utils/extend'
 
 function genBaseStyle (token) {
     const { componentCls, iconCls, tagsHeight, tagsButtonWidth, tagsCloseRight, tagsMenuMinWidth } = token

src/layout/compatible/tags/style/node.js

@@ -1,4 +1,4 @@
-import { genComponentStyleHook, mergeToken } from '@packages/utils/extend'
+import { genComponentStyleHook, mergeToken } from '@site/utils/extend'
 
 function genBaseStyle (token) {
     const { componentCls, tagPadding, tagCloseFontSize } = token

src/layout/components/avatar/index.jsx

@@ -2,8 +2,8 @@ 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 '@/hooks/useAppInstance'
-import useGlobalProperties from '@packages/hooks/useGlobalProperties'
-import { useConfigInject } from '@packages/utils/extend'
+import useGlobalProperties from '@site/hooks/useGlobalProperties'
+import { useConfigInject } from '@site/utils/extend'
 import useStyle from './style'
 
 export default defineComponent({

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

@@ -1,4 +1,4 @@
-import { genComponentStyleHook, mergeToken } from '@packages/utils/extend'
+import { genComponentStyleHook, mergeToken } from '@site/utils/extend'
 
 function genBaseStyle (token) {
     const { componentCls, avatarMenuMinWidth } = token