hui-vue

个人维护的 Vue 3 前端库：一组 TypeScript 工具方法 + 一套补充 Element Plus 的小众/二次封装组件。

基于 Vite 库模式构建，同时输出 ESM 与 CJS。工具方法统一挂在 Hex 命名空间下，组件作为命名导出单独引入。

安装

pnpm add hui-vue
# 必装 peer（vue 全家桶 + Element Plus，宿主单例语义）
pnpm add vue @vueuse/core element-plus @element-plus/icons-vue vue-router

装完上面两条就齐了。Markdown 编辑器 / 阅读器 / 差异面板 / 文档页 / 图表 / Vue Query 列表底座……所需的 shiki / @codemirror/* / unified / remark-* / rehype-* / diff / mermaid / katex / echarts / @tanstack/vue-query 等都已是 hui-vue 自己的 dependencies，随 pnpm add hui-vue 自动带上，不要求消费者再手动 pnpm add 任何子依赖。

使用

所有组件 / composable / 工具方法统一从 'hui-vue' 取，单一入口：

import Hex, {
  HexEChart, HexAppShell, HexDataList, HexFormDialog,
  HexMarkdownEditor, HexMarkdownViewer, hexMathPlugin,
  useFilters, useListQuery
} from 'hui-vue'
import 'hui-vue/style.css'

Hex.formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss') // e.g. '2026-04-22 09:07:05'

<template>
  <HexMarkdownViewer content="# hello" />
</template>

Hex 同时以默认导出和命名导出两种形式暴露，下面两种写法等价：

import Hex from 'hui-vue'
import { Hex } from 'hui-vue'

当前内容

工具方法 (挂载在 Hex 上)

| API | 说明 | | - | - | | isString(v) | 类型守卫，判断是否为 string | | isNumber(v) | 类型守卫，排除 NaN | | formatDate(input, format) | 本地时区格式化 Date / 时间戳 / ISO 字符串。tokens：YYYY MM DD HH mm ss，默认 YYYY-MM-DD | | slugify(text) | URL-friendly slug，保留中文 (CJK)，其余非词字符压缩为单 - | | copyToClipboard(text) | 写入系统剪贴板，返回 Promise<boolean>，永不抛错 | | evalExpression(input, scope?) | 在 async 函数沙箱里求值表达式 + 安全 stringify，给 test-doc viewer 用 | | noop() | 空函数 |

组件

详见 playground 内的逐组件 demo；统一以 Hex* 前缀命名，全部从 'hui-vue' 单一入口导出：

• 内容：HexCamera、HexClipboard、HexDiff、HexEChart、HexHamburger、HexImageUpload、HexJsonViewer、HexMarkdownEditor、HexMarkdownViewer、HexRemoteSelect、HexTagEditor
• 三态原语：HexEmpty / HexErrorView / HexSkeleton (异步 / 失败 / 空态默认 UI 底座，所有组件 #empty / #error / #loading slot 的兜底实现复用这三个)
• 应用骨架：HexAppShell (侧栏 + 移动 drawer)、HexTocLayout (TOC + 上下篇 + #back 三件套骨架)、HexDocPage (自带 TOC / 上下篇 / 阅读时长的 Markdown 文章页，基于 HexTocLayout + HexMarkdownViewer)
• 后台壳子：HexDataList (toolbar + 表格 + 分页三段式列表骨架)、HexFormDialog (CRUD 表单弹窗，自动 loading / 错误 toast / 关弹窗 / emit success)、HexConfirmButton (危险操作二次确认按钮)
• Markdown helper：hexAdmonitionPlugin / hexMathPlugin / hexMermaidPlugin / createShikiHighlighter / defaultWxStyles / NORMAL_BASE_CSS
• 文档脚手架：HexDemoSection / HexDemoBlock / HexDemoApi (写组件库 demo 页用，复用 HexTocLayout)

配套 composable：useScrollSpy、useAsyncPeerDep、useColorMode、useFilters、useHotkey、useListQuery、useMermaidRender、usePagination。

兼容性要求

• Vue ^3.3
• Element Plus ^2.0
• Vue Router ^5.0
• @vueuse/core ^14.0
• 打包工具需支持 ESM + CSS 副作用保留 (Vite / Rollup / webpack 5 均可)

开发

pnpm install
pnpm build        # 自动 clean + vite 构建（typecheck 由 check 统一管）
pnpm dev          # 启动 playground SPA（= pnpm playground）
pnpm build:watch  # 库本身的监听构建（vite build --watch）
pnpm typecheck    # 仅类型检查
pnpm check        # 聚合门禁：biome + typecheck + 单测覆盖率 + knip + jscpd + audit + build；发布走 prepublishOnly 自动调用

仓库内部结构与约定详见 CLAUDE.md。

状态

早期 alpha (4.0.0-alpha.1)，在到达稳定版之前 API 可能调整。这是一个个人向的收集仓库，欢迎使用，但不保证即时响应外部 issue。

License

ISC