Joy Logi Design

这是一个基于 Vue 3 开发的现代化组件库，使用 TypeScript 编写，旨在帮助开发者快速构建高质量的企业级应用。该组件库提供了丰富的 UI 组件、实用的 Hooks 和工具函数，特别针对企业级应用场景进行了优化。

框架概述

• 基于 Vue 3 开发，充分利用 Composition API 和 TypeScript
• 使用 TypeScript 编写，提供完整的类型定义和类型推导
• 使用工厂函数模式设计Hooks，便于依赖注入和测试
• 组件前缀统一使用 Er，如 ErButton、ErButtonGroup 等

主要功能模块

• 组件库：提供了企业级UI组件，如 Button、ButtonGroup 等
• Hooks：提供了大量实用的功能钩子，采用工厂函数模式设计
  • 核心hooks：如useAttrs、useContext、useLockFn等
  • 事件hooks：如useEventListener、useScrollTo、useBreakpoint等
  • 组件hooks：如useFormItem、usePageContext等
  • Web应用hooks：如useI18n、usePermission、useWebSocket等
  • 设置hooks：如useHeaderSetting、useMenuSetting等
• 工具函数：提供了实用的工具函数
• 国际化：支持多语言配置

组件特点

• 类型安全：所有组件都使用 TypeScript 编写，提供完整的类型定义
• 可定制性：组件支持丰富的配置选项，可以根据需求进行定制
• 工厂函数模式：Hooks采用工厂函数模式，便于依赖注入和单元测试
• 基于Ant Design Vue：在底层集成了Ant Design Vue，确保组件的稳定性和一致性

技术栈

• Vue框架：Vue 3
• UI组件：部分基于 Ant Design Vue 4.x
• 构建工具：Vite
• 测试框架：Vitest + JSDOM
• 图表库：集成 ECharts
• 工具库：使用 lodash-es 等成熟的工具库
• 拖拽功能：集成 sortablejs
• WebSocket：集成 reconnecting-websocket

使用方式

全局引入

import { createApp } from "vue";
import App from "./App.vue";
// 引入组件库
import JoyLogiDesign from "joy-logi-design";
// 引入样式
import "joy-logi-design/dist/theme/index.css";

const app = createApp(App);
// 注册组件库
app.use(JoyLogiDesign);
app.mount("#app");

按需引入

<template>
  <er-button type="primary">按钮</er-button>
  <er-button-group>
    <er-button>按钮1</er-button>
    <er-button>按钮2</er-button>
  </er-button-group>
</template>

<script setup lang="ts">
// 从主包引入组件
import { ErButton, ErButtonGroup } from "joy-logi-design";
// 引入对应的样式
import "joy-logi-design/dist/theme/Button.css";
</script>

Hooks 使用

// 从 hooks 路径引入
import {
  // 核心hooks
  useAttrs,
  useContext,
  useLockFn,
  // 事件hooks
  useEventListener,
  useScrollTo,
  // Web应用hooks
  useI18n,
  usePermission,
  useWebSocket,
} from "joy-logi-design/hooks";

// 工厂函数模式示例
const { t } = useI18n();
const { hasPermission } = usePermission();

可用的 Hooks 分类

• 核心 Hooks：useAttrs, useContext, useLockFn, useRefs, useTimeout, onMountedOrActivated
• 事件 Hooks：useBreakpoint, useEventListener, useIntersectionObserver, useScroll, useScrollTo, useWindowSizeFn
• 组件 Hooks：useFormItem, usePageContext
• Web应用 Hooks：useI18n, usePermission, usePagination, useSortable, useWebSocket, useECharts 等
• 设置 Hooks：useHeaderSetting, useMenuSetting, useRootSetting 等

工具函数使用

// 从工具函数路径引入
import { isString, isFunction } from "joy-logi-design/utils";

// 使用示例
console.log(isString("test")); // true

项目结构

joy-logi-design/
├── src/                # 源代码目录
│   ├── components/     # UI 组件
│   ├── hooks/          # Vue Hooks
│   │   ├── core/       # 核心Hooks
│   │   ├── event/      # 事件相关Hooks
│   │   ├── component/  # 组件相关Hooks
│   │   ├── web/        # Web应用Hooks
│   │   └── setting/    # 设置相关Hooks
│   ├── utils/          # 工具函数
│   ├── theme/          # 主题样式
│   ├── locale/         # 国际化
│   ├── core/           # 核心功能
│   ├── docs/           # 文档
│   └── play/           # 开发预览
├── dist/               # 构建输出目录
├── types/              # 类型定义
└── libs/               # 第三方库

开发命令

• pnpm dev: 启动开发环境
• pnpm build: 构建完整项目
• pnpm build:umd: 仅构建UMD格式
• pnpm build:modules: 构建ES和CJS模块
• pnpm test: 运行测试
• pnpm type-check: 类型检查
• pnpm lint: 代码风格检查

注意事项

• 部分Hooks采用工厂函数模式设计，使用时需要注意依赖注入
• 使用WebSocket相关功能时，确保正确配置连接参数
• 集成了Ant Design Vue组件，可以利用其丰富的组件系统

许可证

MIT