@ls/admin-core

共享 Vue 3 基础库，聚焦于：路由模块化与守卫、通用页面组件、主题与样式系统、工具函数与类型、可配置的安装与覆盖机制。

• 框架：Vue 3 + Pinia + vue-router + TypeScript
• UI：ant-design-vue（Less 主题），参考 Vben Admin 布局风格
• 构建：Vite（library mode，ESM/CJS + dts）

安装

npm i @ls/admin-core

作为工作区依赖时，请在 peerDependencies 中保证：vue、pinia、vue-router、ant-design-vue 可用。

快速上手

// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { createRouter, createWebHistory } from 'vue-router';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

import { createCore, attachRouteGuards, mergeRoutes } from '@ls/admin-core';

const baseRoutes = [ /* 基础系统路由 */ ];
const systemRoutes = [ /* 业务路由 */ ];

const router = createRouter({ history: createWebHistory(), routes: mergeRoutes(baseRoutes, systemRoutes) });

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(Antd);

attachRouteGuards(router, {
  permissions: {
    getToken: () => localStorage.getItem('token'),
    hasPermission: (p) => p ? true : true,
    whiteListPaths: ['/login']
  }
});

app.use(createCore({
  router,
  theme: { primaryColor: '#13c2c2' },
  components: { pageContainer: { padding: 16 } }
}));

app.mount('#app');

路由模块化

• 类型：在 meta 中支持 title/roles/permissions/affix/hideInBreadcrumb。
• 动态导入：

import { deriveRoutesFromModules, mergeRoutes } from '@ls/admin-core';
const modules = import.meta.glob('@/routes/modules/**/*.ts');
const systemRoutes = await deriveRoutesFromModules(modules as any);
const routes = mergeRoutes(baseRoutes, systemRoutes);

• 守卫：attachRouteGuards(router, { permissions }) 支持登录白名单、权限校验、标题设置。

组件封装规范

• Props：使用显式类型 + 默认值（withDefaults）。
• 事件：以 onXxx 命名，双向绑定遵循 update:xxx。
• 样式：使用局部样式与 BEM 命名；全局变量通过 Less/CSS 变量桥接。
• 文档：组件提供简要 README 与注释，建议结合 Storybook/VitePress。

已内置：

• PageContainer：页容器（标题/面包屑/工具栏插槽 + 内容）。
• AppBreadcrumb：基于路由 meta.title 生成。
• PermissionButton：带权限判定的按钮（包装 a-button）。

样式与主题

• 变量：src/styles/variables.less 定义 CSS 变量，并映射到 Less 变量。
• 运行时主题：applyTheme(tokens) 设置 CSS 变量。
• AntD 主题：getAntdModifyVars(tokens) 输出 modifyVars 用于 Vite 的 less 配置。

工具函数

• deepMerge、storage、eventBus 等，均具名导出，便于按需引用与 Tree-shaking。

配置覆盖

• 安装时传入 CoreConfig：router、permissions、theme、components 等，使用 deepMerge 覆盖默认。
• 运行时可再次调用 applyTheme 切换主题。

构建与发布

• 构建：vite build（ESM/CJS + sourcemap）。
• 外部依赖：vue/pinia/vue-router/ant-design-vue。
• 发布建议：使用 semantic-release 自动版本与 CHANGELOG。