xusir 组件库

一套基于 Vue 3 的自定义业务组件库（10 个组件 + 1 个分层选择器等，均为 <script setup> 单文件组件）。所有组件零三方 UI 依赖——图标（XIcon）、分段选择器（XSegmented）、轻提示（useToast）均已自封装；仅 XEditor 富文本编辑器依赖 @tiptap。

本站已将全部组件全局注册，每个组件对应一个独立文档页，并在下方按原始项目相同的四大分类逐一排列。

组件清单（按分类）

分类	组件	链接	说明
基础组件	XIcon	xicon	零依赖 SVG 图标集，颜色继承父级字体色
基础组件	XCode	xcode	内置自研零依赖高亮的代码展示组件
基础组件	XTime	xtime	数字 / 钟表 / 交通灯三种显示模式
基础组件	XTimeDiff	xtimediff	已过 / 倒计时时间差，5 种风格
基础组件	XLoading	xloading	多样式纯 CSS / SVG 加载动画
图表组件	XRadar	xradar	纯 SVG 自研雷达图，零依赖
图表组件	XHeatmap	xheatmap	Gitee 风格贡献热力图
图表组件	XKeyboard	xkeyboard	纯 SVG 键盘示意图，内置 5 种布局
工具类组件	XPixelImage	xpixelimage	Canvas 像素风图片转换
工具类组件	XEditor	xeditor	基于 Tiptap 的富文本编辑器
其他组件	XSegmented	xsegmented	分段选择器，替代 el-radio-group

每个组件的「Props / 事件 / 示例 / 注意事项」详见对应独立页面。

---

在项目中使用：全局注册

以下以从零开始拿到组件后，如何在你自己的 Vue 3 项目里全局注册并直接用为例。

第 1 步：把组件源码拷贝进你的项目

将所需组件的目录整体拷贝到项目的组件目录下（示例放到 src/components/xusir/）：

# 拷贝单一组件（以 XTime 为例）
cp -r <组件源码>/XTime src/components/xusir/XTime

# 或整库拷贝，保留相对引用（XCode 会引用 ../XIcon）
cp -r <组件源码>/src/components/element/X* src/components/xusir/

说明：组件源码位于本站 docs/.vitepress/theme/components/element/ 下。建议整库整体拷贝，因为 XCode 内部会通过 ../XIcon/index.vue 引用 XIcon，保持目录层级才能让相对路径成立。

第 2 步：安装 XEditor 所需依赖（仅用 XEditor 时需要）

其余组件零依赖，XEditor 需要：

npm install @tiptap/vue-3 @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-code-block-lowlight lowlight

第 3 步：全局注册组件

在应用入口（如 src/main.js）里注册为全局组件，之后任意模板中直接用 <XTime /> 即可：

// src/main.js
import { createApp, defineAsyncComponent } from 'vue'
import App from './App.vue'

// 体积大 / 含 tiptap 依赖的 XEditor 用异步注册，避免拖入首屏包
const app = createApp(App)

app.component('XIcon', () => import('./components/xusir/XIcon/index.vue'))
app.component('XCode', () => import('./components/xusir/XCode/index.vue'))
app.component('XTime', () => import('./components/xusir/XTime/index.vue'))
app.component('XTimeDiff', () => import('./components/xusir/XTimeDiff/index.vue'))
app.component('XLoading', () => import('./components/xusir/XLoading/index.vue'))
app.component('XRadar', () => import('./components/xusir/XRadar/index.vue'))
app.component('XHeatmap', () => import('./components/xusir/XHeatmap/index.vue'))
app.component('XKeyboard', () => import('./components/xusir/XKeyboard/index.vue'))
app.component('XPixelImage', () => import('./components/xusir/XPixelImage/index.vue'))
app.component('XSegmented', () => import('./components/xusir/XSegmented/index.vue'))
app.component('XEditor', defineAsyncComponent(() => import('./components/xusir/XEditor/index.vue')))

app.mount('#app')

若你更习惯「同步 + 统一入口」，可参考组件库自身的 index.js 写法，用 import.meta.glob 自动发现并按分类生成菜单。

第 4 步：在模板中使用

<template>
  <XTime style-type="digital" />
  <XRadar :data="chartData" />
  <XSegmented :options="['实时', '历史']" v-model="seg" />
</template>

如需按需引入单个组件，直接 import 组件文件即可：

import XTime from '@/components/xusir/XTime/index.vue'

---

注意事项

• 组件默认使用中性配色 + 自有 CSS token（如 --xcode-*、--x-time-*），不依赖应用外壳变量；深色模式通过外层 data-theme="dark" 自动适配。
• XIcon 的图标资源通过 import.meta.glob('./icon/**/*.svg', { query: '?raw' }) 自动收集，拷目录时要连同 icon/ 子文件夹一起拷贝。
• 组件均以 X 开头，命名全局唯一。