refactor: Integrate the @vben-core/shared package

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

@@ -0,0 +1,5 @@
+# base
+
+基础共享包，请勿引入 workspace 依赖
+
+-

packages/@core/shared/design/package.json → 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/design"
+    "directory": "packages/@vben-core/base/design"
   },
   "license": "MIT",
   "type": "module",

packages/@core/shared/icons/package.json → packages/@core/base/icons/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/base/shared/build.config.ts

@@ -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/toolkit/package.json → packages/@core/base/shared/package.json

@@ -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/base/shared/src/index.ts

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

packages/@core/shared/toolkit/src/index.ts → packages/@core/base/shared/src/utils/index.ts

@@ -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/typings/package.json → packages/@core/base/typings/package.json

@@ -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/hooks/package.json → packages/@core/composables/package.json

@@ -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/hooks/src/use-content-height.ts → packages/@core/composables/src/use-content-height.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/hooks/src/use-namespace.ts → packages/@core/composables/src/use-namespace.ts

@@ -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/preferences/package.json

@@ -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/preferences/src/preferences.ts

@@ -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/preferences/src/update-css-variables.ts

@@ -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/preferences/src/use-preferences.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/README.md

@@ -1,6 +0,0 @@
-# shared
-
-全局共享包，请勿引入 workspace 依赖
-
-- typings 共享类型
-- toolkit 共享工具类

packages/@core/shared/constants/package.json

@@ -1,37 +0,0 @@
-{
-  "name": "@vben-core/constants",
-  "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/constants"
-  },
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "build": "pnpm unbuild"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts",
-      "default": "./dist/index.mjs"
-    }
-  },
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.mjs"
-      }
-    }
-  }
-}

packages/@core/shared/toolkit/build.config.ts

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

packages/@core/shared/typings/build.config.ts

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

packages/@core/shared/typings/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@vben/tsconfig/library.json",
-  "include": ["src"],
-  "exclude": ["node_modules"]
-}

packages/@core/ui-kit/layout-ui/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/ui-kit/layout-ui/src/components/layout-content.vue

@@ -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/ui-kit/menu-ui/package.json

@@ -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/ui-kit/menu-ui/src/components/menu-item.vue

@@ -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/ui-kit/menu-ui/src/components/menu.vue

@@ -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';
 

packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue

@@ -3,7 +3,7 @@ import type { MenuRecordRaw } from '@vben-core/typings';
 
 import type { NormalMenuProps } from './normal-menu';
 
-import { useNamespace } from '@vben-core/hooks';
+import { useNamespace } from '@vben-core/composables';
 import { VbenIcon } from '@vben-core/shadcn-ui';
 
 interface Props extends NormalMenuProps {}

packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue

@@ -3,7 +3,7 @@ import type { MenuItemProps } from '../interface';
 
 import { computed } from 'vue';
 
-import { useNamespace } from '@vben-core/hooks';
+import { useNamespace } from '@vben-core/composables';
 import { ChevronDown, ChevronRight } from '@vben-core/icons';
 import { VbenIcon } from '@vben-core/shadcn-ui';
 

packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue

@@ -9,7 +9,7 @@ import type {
 
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 
-import { useNamespace } from '@vben-core/hooks';
+import { useNamespace } from '@vben-core/composables';
 import { VbenHoverCard } from '@vben-core/shadcn-ui';
 
 import {

packages/@core/ui-kit/menu-ui/src/menu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MenuRecordRaw } from '@vben-core/typings';
 
-import { useForwardProps } from '@vben-core/hooks';
+import { useForwardProps } from '@vben-core/composables';
 
 import { Menu } from './components';
 import { MenuProps } from './interface';

packages/@core/ui-kit/shadcn-ui/components.json

@@ -11,6 +11,6 @@
   "framework": "vite",
   "aliases": {
     "components": "@vben-core/shadcn-ui/components",
-    "utils": "@vben-core/toolkit"
+    "utils": "@vben-core/shared"
   }
 }

packages/@core/ui-kit/shadcn-ui/package.json

@@ -44,7 +44,7 @@
   "dependencies": {
     "@radix-icons/vue": "^1.0.0",
     "@vben-core/icons": "workspace:*",
-    "@vben-core/toolkit": "workspace:*",
+    "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "class-variance-authority": "^0.7.0",

packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue

@@ -7,7 +7,7 @@ import {
   type ButtonVariants,
   buttonVariants,
 } from '@vben-core/shadcn-ui/components/ui/button';
-import { cn } from '@vben-core/toolkit';
+import { cn } from '@vben-core/shared';
 
 import { Primitive, type PrimitiveProps } from 'radix-vue';