refactor: Integrate the @vben-core/shared package

Author: anncwb

apps/web-antd/src/bootstrap.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue';
 
+import { useAccessDirective } from '@vben/access';
 import '@vben/styles';
 import '@vben/styles/antd';
 
@@ -15,9 +16,12 @@ async function bootstrap(namespace: string) {
   // 国际化 i18n 配置
   await setupI18n(app);
 
-  // 配置 pinia-store
+  // 配置 pinia-tore
   await setupStore(app, { namespace });
 
+  // 安装权限指令
+  useAccessDirective(app);
+
   // 配置路由及路由守卫
   app.use(router);
 

apps/web-antd/src/main.ts

@@ -1,5 +1,5 @@
-import { unmountGlobalLoading } from '@vben/hooks';
 import { initPreferences } from '@vben/preferences';
+import { unmountGlobalLoading } from '@vben/utils';
 
 import { overridesPreferences } from './preferences';
 

apps/web-antd/src/views/demos/access/button-control.vue

@@ -98,16 +98,16 @@ async function changeAccount(role: string) {
 
     <div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
       <div class="mb-3 text-lg font-semibold">组件形式控制 - 用户角色方式</div>
-      <AccessControl :codes="['super']">
+      <AccessControl :codes="['super']" type="role">
         <Button class="mr-4"> Super 角色可见 </Button>
       </AccessControl>
-      <AccessControl :codes="['admin']">
+      <AccessControl :codes="['admin']" type="role">
         <Button class="mr-4"> Admin 角色可见 </Button>
       </AccessControl>
-      <AccessControl :codes="['user']">
+      <AccessControl :codes="['user']" type="role">
         <Button class="mr-4"> User 角色可见 </Button>
       </AccessControl>
-      <AccessControl :codes="['super', 'admin']">
+      <AccessControl :codes="['super', 'admin']" type="role">
         <Button class="mr-4"> Super & Admin 角色可见 </Button>
       </AccessControl>
     </div>
@@ -127,5 +127,31 @@ async function changeAccount(role: string) {
         Super & Admin 账号可见 ["AC_100100","AC_1000001"]
       </Button>
     </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="mb-3 text-lg font-semibold">指令方式 - 权限码</div>
+      <Button class="mr-4" v-access:code="['AC_100100']">
+        Super 账号可见 ["AC_1000001"]
+      </Button>
+      <Button class="mr-4" v-access:code="['AC_100030']">
+        Admin 账号可见 ["AC_100010"]
+      </Button>
+      <Button class="mr-4" v-access:code="['AC_1000001']">
+        User 账号可见 ["AC_1000001"]
+      </Button>
+      <Button class="mr-4" v-access:code="['AC_100100', 'AC_1000001']">
+        Super & Admin 账号可见 ["AC_100100","AC_1000001"]
+      </Button>
+    </div>
+
+    <div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
+      <div class="mb-3 text-lg font-semibold">指令方式 - 角色</div>
+      <Button class="mr-4" v-access:role="['super']"> Super 角色可见 </Button>
+      <Button class="mr-4" v-access:role="['admin']"> Admin 角色可见 </Button>
+      <Button class="mr-4" v-access:role="['user']"> User 角色可见 </Button>
+      <Button class="mr-4" v-access:role="['super', 'admin']">
+        Super & Admin 角色可见
+      </Button>
+    </div>
   </div>
 </template>

internal/lint-configs/eslint-config/src/configs/vue.ts

@@ -44,7 +44,7 @@ export async function vue(): Promise<Linter.FlatConfig[]> {
             ignore: [],
           },
         ],
-        'vue/attributes-order': 'error',
+        'vue/attributes-order': 'off',
         'vue/block-order': [
           'error',
           {

internal/lint-configs/eslint-config/src/custom-config.ts

@@ -69,7 +69,7 @@ const customConfig: Linter.FlatConfig[] = [
   },
   {
     // @core/shared内部组件，不能引入@vben/* 或者 @vben-core/* 里面的包
-    files: ['packages/@core/shared/**/**'],
+    files: ['packages/@core/base/**/**'],
     ignores: restrictedImportIgnores,
     rules: {
       'no-restricted-imports': [

packages/@core/base/README.md

@@ -6,7 +6,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/@vben-core/shared/design"
+    "directory": "packages/@vben-core/base/design"
   },
   "license": "MIT",
   "type": "module",

packages/@core/shared/design/package.json renamed to packages/@core/base/design/package.json

@@ -6,7 +6,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/@vben-core/shared/icons"
+    "directory": "packages/@vben-core/base/icons"
   },
   "license": "MIT",
   "type": "module",

packages/@core/shared/design/src/css/global.css renamed to packages/@core/base/design/src/css/global.css

@@ -0,0 +1,13 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    'src/index',
+    'src/constants/index',
+    'src/utils/index',
+    'src/colorful/index',
+    'src/cache/index',
+  ],
+});

packages/@core/shared/design/src/css/nprogress.css renamed to packages/@core/base/design/src/css/nprogress.css

@@ -1,12 +1,12 @@
 {
-  "name": "@vben-core/toolkit",
+  "name": "@vben-core/shared",
   "version": "5.0.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/@vben-core/shared/toolkit"
+    "directory": "packages/@vben-core/base/shared"
   },
   "license": "MIT",
   "type": "module",
@@ -24,6 +24,26 @@
       "types": "./src/index.ts",
       "development": "./src/index.ts",
       "default": "./dist/index.mjs"
+    },
+    "./constants": {
+      "types": "./src/constants/index.ts",
+      "development": "./src/constants/index.ts",
+      "default": "./dist/constants/index.mjs"
+    },
+    "./utils": {
+      "types": "./src/utils/index.ts",
+      "development": "./src/utils/index.ts",
+      "default": "./dist/utils/index.mjs"
+    },
+    "./colorful": {
+      "types": "./src/colorful/index.ts",
+      "development": "./src/colorful/index.ts",
+      "default": "./dist/colorful/index.mjs"
+    },
+    "./cache": {
+      "types": "./src/cache/index.ts",
+      "development": "./src/cache/index.ts",
+      "default": "./dist/cache/index.mjs"
     }
   },
   "publishConfig": {

packages/@core/shared/design/src/css/transition.css renamed to packages/@core/base/design/src/css/transition.css

@@ -0,0 +1,4 @@
+export * from './cache';
+export * from './colorful';
+export * from './constants';
+export * from './utils';

packages/@core/shared/design/src/design-tokens/dark/index.css renamed to packages/@core/base/design/src/design-tokens/dark/index.css

@@ -1,6 +1,4 @@
-export * from './cache';
 export * from './cn';
-export * from './colorful';
 export * from './diff';
 export * from './dom';
 export * from './inference';

packages/@core/shared/design/src/design-tokens/default/index.css renamed to packages/@core/base/design/src/design-tokens/default/index.css

@@ -6,7 +6,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/@vben-core/shared/typings"
+    "directory": "packages/@vben-core/base/typings"
   },
   "license": "MIT",
   "type": "module",

packages/@core/shared/design/src/design-tokens/index.ts renamed to packages/@core/base/design/src/design-tokens/index.ts

@@ -1,12 +1,12 @@
 {
-  "name": "@vben-core/hooks",
+  "name": "@vben-core/composables",
   "version": "5.0.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/@core/hooks"
+    "directory": "packages/@core/composables"
   },
   "license": "MIT",
   "type": "module",
@@ -35,8 +35,7 @@
     }
   },
   "dependencies": {
-    "@vben-core/constants": "workspace:*",
-    "@vben-core/toolkit": "workspace:*",
+    "@vben-core/shared": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "radix-vue": "^1.9.2",
     "sortablejs": "^1.15.2",

packages/@core/shared/design/src/index.ts renamed to packages/@core/base/design/src/index.ts

@@ -1,7 +1,9 @@
 import { computed, onMounted, ref, watch } from 'vue';
 
-import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/constants';
-import { getElementVisibleHeight } from '@vben-core/toolkit';
+import {
+  CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT,
+  getElementVisibleHeight,
+} from '@vben-core/shared';
 
 import { useCssVar, useDebounceFn, useWindowSize } from '@vueuse/core';
 /**

packages/@core/shared/design/src/scss-bem/bem.scss renamed to packages/@core/base/design/src/scss-bem/bem.scss

@@ -1,4 +1,4 @@
-import { DEFAULT_NAMESPACE } from '@vben-core/constants';
+import { DEFAULT_NAMESPACE } from '@vben-core/shared';
 
 /**
  * @see copy https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-namespace/index.ts

packages/@core/shared/design/src/scss-bem/constants.scss renamed to packages/@core/base/design/src/scss-bem/constants.scss

@@ -29,7 +29,7 @@
     }
   },
   "dependencies": {
-    "@vben-core/toolkit": "workspace:*",
+    "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "vue": "^3.4.34"

packages/@core/shared/design/tsconfig.json renamed to packages/@core/base/design/tsconfig.json

@@ -4,7 +4,7 @@ import type { InitialOptions, Preferences } from './types';
 
 import { markRaw, reactive, readonly, watch } from 'vue';
 
-import { isMacOs, merge, StorageManager } from '@vben-core/toolkit';
+import { isMacOs, merge, StorageManager } from '@vben-core/shared';
 
 import {
   breakpointsTailwind,

packages/@core/shared/design/vite.config.mts renamed to packages/@core/base/design/vite.config.mts

@@ -3,7 +3,7 @@ import type { Preferences } from './types';
 import {
   updateCSSVariables as executeUpdateCSSVariables,
   generatorColorVariables,
-} from '@vben-core/toolkit';
+} from '@vben-core/shared';
 
 import { BUILT_IN_THEME_PRESETS, type BuiltinThemePreset } from './constants';
 

packages/@core/hooks/build.config.ts renamed to packages/@core/base/icons/build.config.ts

@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 
-import { diff } from '@vben-core/toolkit';
+import { diff } from '@vben-core/shared';
 
 import { isDarkTheme, preferencesManager } from './preferences';
 

packages/@core/shared/icons/package.json renamed to packages/@core/base/icons/package.json

@@ -37,7 +37,7 @@
     }
   },
   "dependencies": {
-    "@vben-core/hooks": "workspace:*",
+    "@vben-core/composables": "workspace:*",
     "@vben-core/icons": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/typings": "workspace:*",

packages/@core/shared/icons/src/create-icon.ts renamed to packages/@core/base/icons/src/create-icon.ts

@@ -4,7 +4,7 @@ import type { ContentCompactType } from '@vben-core/typings';
 import type { CSSProperties } from 'vue';
 import { computed } from 'vue';
 
-import { useContentHeightListener } from '@vben-core/hooks';
+import { useContentHeightListener } from '@vben-core/composables';
 
 interface Props {
   /**

packages/@core/shared/icons/src/index.ts renamed to packages/@core/base/icons/src/index.ts

@@ -37,10 +37,10 @@
     }
   },
   "dependencies": {
-    "@vben-core/hooks": "workspace:*",
+    "@vben-core/composables": "workspace:*",
     "@vben-core/icons": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
-    "@vben-core/toolkit": "workspace:*",
+    "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "vue": "^3.4.34"

packages/@core/shared/icons/src/lucide.ts renamed to packages/@core/base/icons/src/lucide.ts

@@ -3,7 +3,7 @@ import type { MenuItemProps, MenuItemRegistered } from '../interface';
 
 import { computed, onBeforeUnmount, onMounted, reactive, useSlots } from 'vue';
 
-import { useNamespace } from '@vben-core/hooks';
+import { useNamespace } from '@vben-core/composables';
 import { VbenIcon, VbenMenuBadge, VbenTooltip } from '@vben-core/shadcn-ui';
 
 import { useMenu, useMenuContext, useSubMenuContext } from '../hooks';

packages/@core/shared/icons/src/mdi.ts renamed to packages/@core/base/icons/src/mdi.ts

@@ -18,9 +18,9 @@ import {
   watchEffect,
 } from 'vue';
 
-import { useNamespace } from '@vben-core/hooks';
+import { useNamespace } from '@vben-core/composables';
 import { Ellipsis } from '@vben-core/icons';
-import { isHttpUrl } from '@vben-core/toolkit';
+import { isHttpUrl } from '@vben-core/shared';
 
 import { useResizeObserver, UseResizeObserverReturn } from '@vueuse/core';