@melt-js/libs-vben 0.0.0-stage → 2026.11.8-2

package/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) 2024-present, Vben
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

package/README.md

@@ -1,3 +1,87 @@
-# Temporary Holding Version
+# @melt-js/libs-vben
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+由 [vue-vben-admin](https://github.com/vbenjs/vue-vben-admin) 5.8 的 `packages/` 合并而来的基础库包：把原来 16 个 `@vben/*` / `@vben-core/*` 基础包收进一个包，用子路径导出保持原模块边界。
+
+组件层（`@core/ui-kit/*`、`common-ui`、`layouts`、`plugins`）拆到 [`comps-vben`](../comps-vben)，模板层来自 `apps/web-ele`，见 [`tpl-vue3-admin-ele-vben`](../tpl-vue3-admin-ele-vben)。
+
+## 合并范围
+
+| 子路径 | 上游包 | 内容 |
+| --- | --- | --- |
+| `design` | `@vben-core/design` | 设计变量、Tailwind 主题、BEM、全局样式 |
+| `shared/*` | `@vben-core/shared` | `utils` / `constants` / `color` / `cache` / `store` / `global-state` |
+| `typings` | `@vben-core/typings` | 全局类型、`RouteMeta` 增强 |
+| `core-icons` | `@vben-core/icons` | Iconify / Lucide 基础图标 |
+| `composables` | `@vben-core/composables` | 组合式函数 |
+| `core-preferences` | `@vben-core/preferences` | 偏好设置内核 |
+| `constants` | `@vben/constants` | 登录路径、默认首页等常量 |
+| `access` | `@vben/access` | 权限指令、动态路由 |
+| `hooks` | `@vben/hooks` | 业务 hooks（水印、设计变量等） |
+| `locales` | `@vben/locales` | i18n 初始化与语言包加载 |
+| `preferences` | `@vben/preferences` | 偏好设置门面 |
+| `request` | `@vben/request` | axios / fetch 请求客户端与拦截器 |
+| `stores` | `@vben/stores` | pinia store（access / user / tab） |
+| `styles` | `@vben/styles` | 全局样式与 Element Plus 适配 |
+| `types` | `@vben/types` | 业务类型 |
+| `utils` | `@vben/utils` | 工具函数 |
+| `icons` | `@vben/icons` | 项目图标集合 |
+
+## 使用
+
+```ts
+import { preferences } from '@melt-js/libs-vben/preferences';
+import { useAccessStore } from '@melt-js/libs-vben/stores';
+import { resetStaticRoutes } from '@melt-js/libs-vben/utils';
+import '@melt-js/libs-vben/styles';
+import '@melt-js/libs-vben/styles/ele';
+```
+
+样式子路径直接指向 CSS/SCSS 源码，由使用方的 Vite / Sass 编译：
+
+- `@melt-js/libs-vben/styles`
+- `@melt-js/libs-vben/styles/ele`
+- `@melt-js/libs-vben/styles/global`
+- `@melt-js/libs-vben/design/bem`
+
+## 边界
+
+- 本包只放非组件层：不包含 `shadcn-ui`、`form-ui`、`common-ui` 等 UI 组件。
+- `comps-vben` 依赖本包，本包不反向依赖 `comps-vben`，避免循环。
+- 源码按子目录保存，`package.json` 的 `exports` 与上游包名一一对应；内部相互引用已改为 `@melt-js/libs-vben/*`。
+- 依赖版本以 `vue-vben-admin` 5.8 的 `pnpm-lock.yaml` catalog 为准；`vue` / `vue-router` / `pinia` / `vue-i18n` 以 peerDependency 形式声明。
+
+## 目录
+
+```text
+src/
+  access/            # @vben/access
+  composables/       # @vben-core/composables
+  constants/         # @vben/constants
+  core-icons/        # @vben-core/icons
+  core-preferences/  # @vben-core/preferences
+  design/            # @vben-core/design
+  hooks/             # @vben/hooks
+  icons/             # @vben/icons
+  locales/           # @vben/locales
+  preferences/       # @vben/preferences
+  request/           # @vben/request
+  shared/            # @vben-core/shared
+  stores/            # @vben/stores
+  styles/            # @vben/styles
+  theme.css          # 上游 internal/tailwind-config 的主题
+  types/             # @vben/types
+  typings/           # @vben-core/typings
+  utils/             # @vben/utils
+```
+
+
+## 发布
+
+本包是源码包（与 `libs-fan` / `comps-vue3-fan` 一样），`files` 发布 `src`。
+
+```bash
+pnpm publish:stage
+```
+
+脚本会先用 `pnpm pack` 把 `workspace:*` 重写成当前版本，再提交 npm stage；
+批准后可由 unpkg 提供源码文件（需要消费方自行用 Vite / bundler 编译）。

package/package.json

@@ -1,6 +1,101 @@
 {
   "name": "@melt-js/libs-vben",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "appGroupName": "libs-vben",
+  "version": "2026.11.8-2",
+  "type": "module",
+  "description": "Vben Admin 5.8 基础库合集：design / shared / typings / icons / composables / preferences / access / hooks / locales / stores / styles / types / utils 合并为一个包",
+  "license": "MIT",
+  "exports": {
+    "./access": "./src/access/index.ts",
+    "./composables": "./src/composables/index.ts",
+    "./constants": "./src/constants/index.ts",
+    "./core-icons": "./src/core-icons/index.ts",
+    "./core-preferences": "./src/core-preferences/index.ts",
+    "./design": "./src/design/index.ts",
+    "./design/bem": "./src/design/scss-bem/bem.scss",
+    "./design/theme": "./src/design/css/global.css",
+    "./hooks": "./src/hooks/index.ts",
+    "./icons": "./src/icons/index.ts",
+    "./locales": "./src/locales/index.ts",
+    "./preferences": "./src/preferences/index.ts",
+    "./request": "./src/request/index.ts",
+    "./shared/cache": "./src/shared/cache/index.ts",
+    "./shared/color": "./src/shared/color/index.ts",
+    "./shared/constants": "./src/shared/constants/index.ts",
+    "./shared/global-state": "./src/shared/global-state.ts",
+    "./shared/store": "./src/shared/store.ts",
+    "./shared/utils": "./src/shared/utils/index.ts",
+    "./stores": "./src/stores/index.ts",
+    "./styles": "./src/styles/index.ts",
+    "./styles/antd": "./src/styles/antd/index.css",
+    "./styles/antdv-next": "./src/styles/antdv-next/index.css",
+    "./styles/ele": "./src/styles/ele/index.css",
+    "./styles/global": "./src/styles/global/index.scss",
+    "./styles/naive": "./src/styles/naive/index.css",
+    "./theme": "./src/theme.css",
+    "./typings": "./src/typings/index.ts",
+    "./types": "./src/types/index.ts",
+    "./types/global": "./src/types/global.d.ts",
+    "./utils": "./src/utils/index.ts"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org",
+    "tag": "latest"
+  },
+  "dependencies": {
+    "@ctrl/tinycolor": "4.2.1",
+    "@tanstack/vue-store": "0.11.2",
+    "@vue/shared": "3.5.44",
+    "clsx": "2.1.1",
+    "dayjs": "1.11.23",
+    "defu": "6.1.7",
+    "es-toolkit": "1.51.0",
+    "lodash.clonedeep": "4.5.0",
+    "nprogress": "0.2.0",
+    "tailwind-merge": "3.6.0",
+    "theme-colors": "0.1.0",
+    "vue": "3.5.41",
+    "vue-router": "5.2.0",
+    "@iconify/vue": "5.0.4",
+    "@lucide/vue": "1.60.0",
+    "@vueuse/core": "15.0.0",
+    "reka-ui": "2.10.4",
+    "sortablejs": "1.15.7",
+    "watermark-js-plus": "1.6.6",
+    "axios": "1.19.0",
+    "qs": "6.15.3",
+    "@intlify/core-base": "11.4.16",
+    "vue-i18n": "11.4.10",
+    "pinia": "4.0.3",
+    "pinia-plugin-persistedstate": "4.7.1",
+    "secure-ls": "2.0.0"
+  },
+  "peerDependencies": {
+    "@vueuse/core": ">=10.0.0",
+    "pinia": ">=2.0.0",
+    "vue": ">=3.4.0",
+    "vue-i18n": ">=9.0.0",
+    "vue-router": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "pinia": {
+      "optional": true
+    },
+    "vue-i18n": {
+      "optional": true
+    },
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit",
+    "publish:stage": "node scripts/publish-stage.mjs"
+  }
 }

package/src/access/access-control.vue

@@ -0,0 +1,47 @@
+<!--
+ Access control component for fine-grained access control.
+ TODO: 可以扩展更完善的功能：
+ 1. 支持多个权限码，只要有一个权限码满足即可 或者 多个权限码全部满足
+ 2. 支持多个角色，只要有一个角色满足即可 或者 多个角色全部满足
+ 3. 支持自定义权限码和角色的判断逻辑
+-->
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useAccess } from './use-access';
+
+interface Props {
+  /**
+   * Specified codes is visible
+   * @default []
+   */
+  codes?: string[];
+
+  /**
+   * 通过什么方式来控制组件，如果是 role，则传入角色，如果是 code，则传入权限码
+   * @default 'role'
+   */
+  type?: 'code' | 'role';
+}
+
+defineOptions({
+  name: 'AccessControl',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  codes: () => [],
+  type: 'role',
+});
+
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+const hasAuth = computed(() => {
+  const { codes, type } = props;
+  return type === 'role' ? hasAccessByRoles(codes) : hasAccessByCodes(codes);
+});
+</script>
+
+<template>
+  <slot v-if="!codes"></slot>
+  <slot v-else-if="hasAuth"></slot>
+</template>

package/src/access/accessible.ts

@@ -0,0 +1,236 @@
+import type { Component, DefineComponent } from 'vue';
+
+import type {
+  AccessModeType,
+  GenerateMenuAndRoutesOptions,
+  RouteRecordRaw,
+} from '@melt-js/libs-vben/types';
+
+import { defineComponent, h } from 'vue';
+
+import {
+  cloneDeep,
+  generateMenus,
+  generateRoutesByBackend,
+  generateRoutesByFrontend,
+  isFunction,
+  isString,
+  mapTree,
+} from '@melt-js/libs-vben/utils';
+
+async function generateAccessible(
+  mode: AccessModeType,
+  options: GenerateMenuAndRoutesOptions,
+) {
+  const { router } = options;
+
+  options.routes = cloneDeep(options.routes);
+
+  // 生成路由
+  const accessibleRoutes = await generateRoutes(mode, options);
+
+  const root = router.getRoutes().find((item) => item.path === '/');
+
+  // 获取已有的路由名称列表
+  const names = root?.children?.map((item) => item.name) ?? [];
+
+  // 动态添加到router实例内
+  accessibleRoutes.forEach((route) => {
+    if (root && !route.meta?.noBasicLayout) {
+      // 为了兼容之前的版本用法，如果包含子路由，则将component移除，以免出现多层BasicLayout
+      // 如果你的项目已经跟进了本次修改，移除了所有自定义菜单首级的BasicLayout，可以将这段if代码删除
+      if (route.children && route.children.length > 0) {
+        delete route.component;
+      }
+      // 根据router name判断，如果路由已经存在，则不再添加
+      if (names?.includes(route.name)) {
+        // 找到已存在的路由索引并更新，不更新会造成切换用户时，一级目录未更新，homePath 在二级目录导致的404问题
+        const index = root.children?.findIndex(
+          (item) => item.name === route.name,
+        );
+        if (index !== undefined && index !== -1 && root.children) {
+          root.children[index] = route;
+        }
+      } else {
+        root.children?.push(route);
+      }
+    } else {
+      router.addRoute(route);
+    }
+  });
+
+  if (root) {
+    if (root.name) {
+      router.removeRoute(root.name);
+    }
+    router.addRoute(root);
+  }
+
+  // 生成菜单
+  const accessibleMenus = generateMenus(accessibleRoutes, options.router);
+
+  return { accessibleMenus, accessibleRoutes };
+}
+
+/**
+ * Generate routes
+ * @param mode
+ * @param options
+ */
+async function generateRoutes(
+  mode: AccessModeType,
+  options: GenerateMenuAndRoutesOptions,
+) {
+  const { forbiddenComponent, roles, routes } = options;
+
+  let resultRoutes: RouteRecordRaw[] = routes;
+  switch (mode) {
+    case 'backend': {
+      resultRoutes = await generateRoutesByBackend(options);
+      break;
+    }
+    case 'frontend': {
+      resultRoutes = await generateRoutesByFrontend(
+        routes,
+        roles || [],
+        forbiddenComponent,
+      );
+      break;
+    }
+    case 'mixed': {
+      const [frontend_resultRoutes, backend_resultRoutes] = await Promise.all([
+        generateRoutesByFrontend(routes, roles || [], forbiddenComponent),
+        generateRoutesByBackend(options),
+      ]);
+      resultRoutes = mergeRoutesByName(
+        backend_resultRoutes,
+        frontend_resultRoutes,
+      );
+      break;
+    }
+  }
+
+  /**
+   * 调整路由树，做以下处理：
+   * 1. 对未添加redirect的路由添加redirect
+   * 2. 将懒加载的组件名称修改为当前路由的名称（如果启用了keep-alive的话）
+   */
+  resultRoutes = mapTree(resultRoutes, (route, parent) => {
+    // 重新包装component，使用与路由名称相同的name以支持keep-alive的条件缓存。
+    if (
+      route.meta?.keepAlive &&
+      isFunction(route.component) &&
+      route.name &&
+      isString(route.name)
+    ) {
+      const originalComponent = route.component as () => Promise<{
+        default: Component | DefineComponent;
+      }>;
+      route.component = async () => {
+        const component = await originalComponent();
+        if (!component.default) return component;
+        return defineComponent({
+          name: route.name as string,
+          setup(props, { attrs, slots }) {
+            return () => h(component.default, { ...props, ...attrs }, slots);
+          },
+        });
+      };
+    }
+
+    // 如果有redirect或者没有子路由，则直接返回
+    if (route.redirect || !route.children || route.children.length === 0) {
+      return route;
+    }
+    const firstChild = route.children[0];
+
+    if (!firstChild?.path || firstChild.path.startsWith('/')) {
+      return route;
+    }
+
+    // fork 定制：如果第一个子路由是动态路由（如 :id），说明当前路由本身是一个
+    // “列表+详情”页面（渲染自身组件），不应自动重定向到未填充的动态参数，
+    // 否则地址栏会出现字面量 ":id" 或匹配失败导致 404。
+    // 详见对上游重构 commit f00a8812 的修复。
+    if (firstChild.path.startsWith(':')) {
+      return route;
+    }
+
+    // 拼接子路由的重定向绝对路径。
+    // - 当 parent.redirect 为字符串时，它已经是累计好的绝对路径，直接替换最后一段
+    //   即可正确支持任意层级的深层嵌套（如 /demos/nested/menu2/menu2-1）。
+    // - fork 定制：后端菜单可能传入对象形式的 redirect（如 { name }），无法 split，
+    //   此时回退到使用 parent.path 拼接（这类 parent 为顶级路由，path 为绝对路径）。
+    if (parent && parent.redirect && isString(parent.redirect)) {
+      const parentSplit = parent.redirect.split('/');
+      parentSplit.splice(-1, 2, route.path, firstChild.path);
+      const redirectPath = parentSplit.join('/');
+      route.redirect = redirectPath;
+    } else if (parent && parent.redirect) {
+      route.redirect = `${parent.path}/${route.path}/${firstChild.path}`;
+    } else {
+      route.redirect = `${route.path}/${firstChild.path}`;
+    }
+
+    return route;
+  });
+
+  return resultRoutes;
+}
+
+/**
+ * 根据 name 合并前后端路由
+ * @param baseRoutes 后端路由
+ * @param extraRoutes 前端路由
+ */
+function mergeRoutesByName(
+  baseRoutes: RouteRecordRaw[],
+  extraRoutes: RouteRecordRaw[],
+): RouteRecordRaw[] {
+  const result: RouteRecordRaw[] = [];
+  const routeMap = new Map<string, RouteRecordRaw>();
+
+  for (const route of baseRoutes) {
+    const clone = { ...route };
+    result.push(clone);
+    if (clone.name && isString(clone.name)) {
+      routeMap.set(clone.name, clone);
+    }
+  }
+
+  for (const route of extraRoutes) {
+    if (route.name && isString(route.name) && routeMap.has(route.name)) {
+      const existing = routeMap.get(route.name);
+      if (!existing) {
+        continue;
+      }
+      const existingChildren = existing.children ?? [];
+      const routeChildren = route.children ?? [];
+
+      const merged = {
+        ...route,
+        ...existing, // keep backend as base
+        meta: {
+          ...route.meta,
+          ...existing.meta, // backend meta wins on conflicts
+        },
+      } as RouteRecordRaw;
+
+      if (existingChildren.length > 0 || routeChildren.length > 0) {
+        merged.children = mergeRoutesByName(existingChildren, routeChildren);
+      }
+
+      Object.assign(existing, merged);
+    } else {
+      const clone = { ...route };
+      result.push(clone);
+      if (clone.name && isString(clone.name)) {
+        routeMap.set(clone.name, clone);
+      }
+    }
+  }
+
+  return result;
+}
+
+export { generateAccessible };

package/src/access/directive.ts

@@ -0,0 +1,42 @@
+/**
+ * Global authority directive
+ * Used for fine-grained control of component permissions
+ * @Example v-access:role="[ROLE_NAME]" or v-access:role="ROLE_NAME"
+ * @Example v-access:code="[ROLE_CODE]" or v-access:code="ROLE_CODE"
+ */
+import type { App, Directive, DirectiveBinding } from 'vue';
+
+import { useAccess } from './use-access';
+
+function isAccessible(
+  el: Element,
+  binding: DirectiveBinding<string | string[]>,
+) {
+  const { accessMode, hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+  const value = binding.value;
+
+  if (!value) return;
+  const authMethod =
+    accessMode.value === 'frontend' && binding.arg === 'role'
+      ? hasAccessByRoles
+      : hasAccessByCodes;
+
+  const values = Array.isArray(value) ? value : [value];
+
+  if (!authMethod(values)) {
+    el?.remove();
+  }
+}
+
+const mounted = (el: Element, binding: DirectiveBinding<string | string[]>) => {
+  isAccessible(el, binding);
+};
+
+const authDirective: Directive = {
+  mounted,
+};
+
+export function registerAccessDirective(app: App) {
+  app.directive('access', authDirective);
+}

package/src/access/index.ts

@@ -0,0 +1,4 @@
+export { default as AccessControl } from './access-control.vue';
+export * from './accessible';
+export * from './directive';
+export * from './use-access';

package/src/access/use-access.ts

@@ -0,0 +1,53 @@
+import { computed } from 'vue';
+
+import { preferences, updatePreferences } from '@melt-js/libs-vben/preferences';
+import { useAccessStore, useUserStore } from '@melt-js/libs-vben/stores';
+
+function useAccess() {
+  const accessStore = useAccessStore();
+  const userStore = useUserStore();
+  const accessMode = computed(() => {
+    return preferences.app.accessMode;
+  });
+
+  /**
+   * 基于角色判断是否有权限
+   * @description: Determine whether there is permission，The role is judged by the user's role
+   * @param roles
+   */
+  function hasAccessByRoles(roles: string[]) {
+    const userRoleSet = new Set(userStore.userRoles);
+    const intersection = roles.filter((item) => userRoleSet.has(item));
+    return intersection.length > 0;
+  }
+
+  /**
+   * 基于权限码判断是否有权限
+   * @description: Determine whether there is permission，The permission code is judged by the user's permission code
+   * @param codes
+   */
+  function hasAccessByCodes(codes: string[]) {
+    const userCodesSet = new Set(accessStore.accessCodes);
+
+    const intersection = codes.filter((item) => userCodesSet.has(item));
+    return intersection.length > 0;
+  }
+
+  async function toggleAccessMode() {
+    updatePreferences({
+      app: {
+        accessMode:
+          preferences.app.accessMode === 'frontend' ? 'backend' : 'frontend',
+      },
+    });
+  }
+
+  return {
+    accessMode,
+    hasAccessByCodes,
+    hasAccessByRoles,
+    toggleAccessMode,
+  };
+}
+
+export { useAccess };

package/src/composables/index.ts

@@ -0,0 +1,14 @@
+export * from './use-is-mobile';
+export * from './use-layout-style';
+export * from './use-layout-viewport-height';
+export * from './use-namespace';
+export * from './use-priority-value';
+export * from './use-scroll-lock';
+export * from './use-simple-locale';
+export * from './use-sortable';
+export {
+  useEmitAsProps,
+  useForwardExpose,
+  useForwardProps,
+  useForwardPropsEmits,
+} from 'reka-ui';

package/src/composables/use-is-mobile.ts

@@ -0,0 +1,7 @@
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
+
+export function useIsMobile() {
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const isMobile = breakpoints.smaller('md');
+  return { isMobile };
+}

package/src/composables/use-layout-style.ts

@@ -0,0 +1,51 @@
+import type { CSSProperties } from 'vue';
+
+import { computed, ref } from 'vue';
+
+import {
+  CSS_VARIABLE_LAYOUT_FOOTER_HEIGHT,
+  CSS_VARIABLE_LAYOUT_HEADER_HEIGHT,
+} from '@melt-js/libs-vben/shared/constants';
+
+import { useCssVar } from '@vueuse/core';
+
+/**
+ * @zh_CN content style
+ */
+export function useLayoutContentStyle() {
+  const contentElement = ref<HTMLDivElement | null>(null);
+
+  const overlayStyle = computed((): CSSProperties => ({
+    inset: 0,
+    position: 'absolute',
+    zIndex: 150,
+  }));
+
+  return { contentElement, overlayStyle };
+}
+
+export function useLayoutHeaderStyle() {
+  const headerHeight = useCssVar(CSS_VARIABLE_LAYOUT_HEADER_HEIGHT);
+
+  return {
+    getLayoutHeaderHeight: () => {
+      return Number.parseInt(`${headerHeight.value}`, 10);
+    },
+    setLayoutHeaderHeight: (height: number) => {
+      headerHeight.value = `${height}px`;
+    },
+  };
+}
+
+export function useLayoutFooterStyle() {
+  const footerHeight = useCssVar(CSS_VARIABLE_LAYOUT_FOOTER_HEIGHT);
+
+  return {
+    getLayoutFooterHeight: () => {
+      return Number.parseInt(`${footerHeight.value}`, 10);
+    },
+    setLayoutFooterHeight: (height: number) => {
+      footerHeight.value = `${height}px`;
+    },
+  };
+}