使用文档 — 栈序笔记

通过包管理器安装到你的 Vue 3 项目中，组件按需引入，不引入额外的运行时依赖。

# 使用 pnpm
pnpm add systempro

# 使用 npm
npm install systempro

要求 Vue 版本 ≥ 3.3，Node.js ≥ 18。

支持全局注册与按需引入两种方式，均支持 Tree Shaking，不会引入未使用的组件代码。

// main.ts — 全局注册
import { createApp } from 'vue'
import SystemproUIKit from 'systempro'
import 'systempro/dist/style.css'

app.use(SystemproUIKit)

// 按需引入
import { SystemproGauge, SystemproPanel } from 'systempro'

所有视觉变量通过 CSS 变量暴露，覆盖对应变量即可完成暗色 / 亮色模式或品牌色的定制，无需修改组件源码。

:root {
  --systempro-accent: #4fd1ae;
  --systempro-surface: #121922;
  --systempro-border: #232e3a;
}

亮色模式可通过覆盖同一套变量实现，组件本身不区分暗色/亮色两套逻辑，只读取变量值。

提供 comfortable 与 compact 两种密度 token，适配从驾驶舱大屏到管理后台的不同信息密度需求。

组件层只负责渲染与交互，不内置数据请求逻辑。数据轮询、WebSocket 接入由使用方自行实现，通过 props 传入即可。