gh-plus

gh-plus

Gh-Plus 商务 Vue3 组件库

基于 Vue 3 + Vite 构建的企业级商务 UI 组件库，内置 50+ 常用组件、统一请求封装与时间工具集，支持按需引入与全局注册，兼容 H5 与 UniApp 多端环境。

特性

• Vue 3 Composition API：全面使用 <script setup>，支持 Tree Shaking
• 50+ 商务组件：覆盖基础、表单、数据展示、导航、反馈五大类
• 统一请求封装：基于 axios，内置 Token 自动刷新、请求缓存、去重、取消、并发控制、接口签名
• 多端适配：H5 / UniApp（微信小程序、App）双端兼容
• SCSS 主题变量：全局样式变量可定制，支持商务风格快速切换
• 按需引入：支持单个组件独立导入，减小打包体积
• 工程化规范：ESLint + Prettier 代码规范，Vite 库模式构建

安装

# npm
npm install gh-plus

# yarn
yarn add gh-plus

# pnpm
pnpm add gh-plus

依赖要求：Vue >= 3.3.0

快速开始

全量注册

import { createApp } from 'vue'
import App from './App.vue'
import GhPlus from 'gh-plus'
import 'gh-plus/css'

const app = createApp(App)
app.use(GhPlus)
app.mount('#app')

按需引入

import { GhButton, GhInput, GhTable } from 'gh-plus'
import 'gh-plus/css'

// 组件注册
app.use(GhButton)
app.use(GhInput)
app.use(GhTable)

在模板中使用

<template>
  <gh-button type="primary" @click="handleClick">点击按钮</gh-button>
  <gh-input v-model="value" placeholder="请输入内容" />
</template>

组件列表

基础组件

表单组件

数据展示

导航组件

反馈 / 弹层

函数式组件调用示例：

import { GhMessage, GhNotification, GhMessageBox } from 'gh-plus'

GhMessage.success('操作成功')
GhNotification.info({ title: '通知', message: '您有一条新消息' })
GhMessageBox.confirm('确定删除吗？', '提示')

工具模块

Request 请求封装

基于 axios 的企业级请求库，支持多端适配。

import { createRequest } from 'gh-plus'

const request = createRequest({
  baseURL: 'https://api.example.com',
  timeout: 30000,
  // Token 自动刷新
  enableRefreshToken: true,
  refreshTokenUrl: '/auth/refresh',
  // 请求缓存
  cache: true,
  cacheTime: 60000,
  // 请求去重
  enableDedup: true,
  // 并发控制
  maxConcurrent: 5,
  // 接口签名
  enableSign: true,
  signKey: 'your-secret-key'
})

// 发起请求
const data = await request.get('/user/list', { page: 1 })
await request.post('/user/create', { name: '张三' })

核心能力：

• Token 自动刷新与重试（支持最多 3 次重试）
• GET 请求缓存（LRU 策略，默认最多 50 条）
• 重复请求去重
• 请求取消（AbortController）
• 并发数控制
• 接口签名（时间戳 + nonce + 参数排序）
• 请求失败自动重试
• Loading 统一管理
• UniApp 适配器（小程序 / App 端自动切换 uni.request）
• 上传 / 下载文件（UniApp 端）
• 全局实例管理 getGlobalRequest / setGlobalRequest

Time 时间工具

import { Time, formatDate, formatDuration } from 'gh-plus'

// 时间格式化
formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')  // 2026-09-01 10:00:00
formatDateShort(1693526400000)                   // 2023-09-01
formatTime('2026-09-01 10:00:00')                // 10:00:00
getNow()                                          // 当前时间字符串

// 时长换算
formatDuration(3661)   // 01:01:01
fromSeconds(90)        // 00:01:30
toSeconds('01:30:00')  // 5400

主题定制

组件库使用 SCSS 变量管理主题，通过覆盖 variables.scss 中的变量实现定制。

// 项目中自定义变量
$primary-color: #1890ff;
$success-color: #52c41a;
$warning-color: #faad14;
$danger-color: #f5222d;
$border-radius: 4px;

在 Vite 配置中注入：

// vite.config.js
css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@use "@/assets/styles/variables.scss" as *;`
    }
  }
}

开发

# 安装依赖
npm install

# 启动开发服务器（组件 demo 预览）
npm run dev

# 构建库文件
npm run build

# 代码检查
npm run lint

# 自动修复
npm run lint:fix

# 代码格式化
npm run format

项目结构

gh-plus/
├── src/
│   ├── components/          # 组件目录（每个组件独立文件夹）
│   │   ├── gh-button/
│   │   ├── gh-input/
│   │   ├── gh-table/
│   │   └── ...
│   ├── assets/              # 静态资源
│   │   ├── styles/          # 全局样式、变量、重置样式
│   │   └── fonts/           # 字体文件
│   ├── request/             # 请求封装模块
│   ├── time/                # 时间工具模块
│   ├── demo/                # 组件演示页面
│   ├── index.js             # 库入口（全量导出与注册）
│   └── main.js              # 开发环境入口
├── public/                  # 公共静态资源
├── vite.config.js           # Vite 构建配置（库模式）
├── eslint.config.js         # ESLint 配置
├── .prettierrc              # Prettier 配置
└── package.json

构建输出

执行 npm run build 后在 dist/ 目录生成：

dist/
├── gh-plus.es.js     # ES Module 格式
├── gh-plus.umd.js    # UMD 格式
└── index.css         # 样式文件

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88
• 微信小程序 / UniApp（通过适配器）

License

MIT