@yanbinkwan/component-library

Component Library

基于Vue3和Element Plus的组件库，经过优化支持Tree Shaking和按需加载。

安装

npm install component-library

使用方式

全局注册

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import ComponentLibrary from "component-library";
import router from "./router";

// 引入Element Plus样式
import "element-plus/dist/index.css";
// 引入组件库样式
import "component-library/style";

const app = createApp(App);
app.use(ComponentLibrary, {
  router: router.getRoutes(),
  routerIns: router,
});
app.mount("#app");

按需引入

// 按需引入，支持Tree Shaking
import { Layout, TabsBar } from "component-library";
import "component-library/style";

// 在组件中使用
<template>
  <Layout>
    <TabsBar />
  </Layout>
</template>;

使用Store

import { useNavigationStore, useTabsStore } from "component-library";

const navigationStore = useNavigationStore();
const tabsStore = useTabsStore();

// 使用store
navigationStore.initializeMenuItems(router);

关于优化

本组件库采用以下优化措施减小包体积：

1. 使用命名导出支持Tree Shaking
2. 外部化Vue、ElementPlus等依赖
3. 代码按功能分块打包
4. CSS代码拆分
5. sideEffects字段标识
6. 配置exports字段支持多种导入方式

组件文档

请查看Storybook了解每个组件的详细用法：

npm run storybook

组件列表

Layout

主要布局组件，包含侧边栏、内容区和右侧面板。

Props:

• 无需传递 props

Events:

• navChange - 当导航项被点击时触发，返回目标路径

Slots:

• default - 内容区域

示例:

<Layout @navChange="(path) => router.push(path)">
  <div>你的内容</div>
</Layout>

ExpandedNav

展开状态的导航组件。

Props:

• currentPath - 当前路径，用于高亮当前选中的菜单项
• routes - 路由配置，用于生成菜单项

Events:

• nav-change - 当导航项被点击时触发，返回目标路径

示例:

<ExpandedNav :currentPath="$route.path" :routes="routes" @nav-change="handleNavChange" />

SideMenu

折叠状态的侧边菜单组件。

Props:

• 无需传递 props

Events:

• nav-change - 当导航项被点击时触发，返回目标路径

示例:

<SideMenu @nav-change="handleNavChange" />

TabsBar

标签页管理组件，显示打开的标签页并允许操作。

Props:

• 无需传递 props

Events:

• tab-operation - 当标签页操作被触发时触发，返回操作类型和相关信息

示例:

<TabsBar @tab-operation="handleTabOperation" />

// 处理标签页操作
const handleTabOperation = (operation: { type: string; path: string }) => {
  if (operation.type === "navigate") {
    router.push(operation.path);
  } else if (operation.type === "closeAll") {
    // 处理关闭所有标签后的逻辑
    router.push("/home");
  }
};

AIChat

AI 聊天组件。

Props:

• 无需传递 props

Events:

• nav-change - 当需要导航到其他页面时触发

示例:

<AIChat @nav-change="handleNavChange" />

与路由集成

组件库现在通过以下方式与路由集成：

1. 参数传递 - 全局注册时或使用 setRouter 函数传入路由器实例
2. 事件通知 - 组件通过 navChange 事件通知外部路由变化
3. 外部控制 - 外部通过 currentPath 参数控制当前选中的菜单项

菜单数据结构

菜单项的数据结构：

interface MenuItem {
  id: string;
  title: string;
  path?: string;
  icon?: string;
  children?: MenuItem[];
}

如果你想自定义菜单项，可以将路由配置通过 routes 参数传递给 ExpandedNav 组件：

<ExpandedNav
  :routes="[
    {
      path: '/dashboard',
      name: 'dashboard',
      meta: { title: '仪表盘', icon: 'Dashboard' },
    },
    // ...其他路由
  ]"
  @nav-change="handleNavChange"
/>

存储

组件库使用 Pinia 进行状态管理，包含以下几个 store：

• navigation - 管理导航状态、标签页等
• layout - 管理布局状态
• quickActions - 管理快捷操作按钮

许可证

MIT