sunui UI

切换主题

使用指南 ​

定位 ​

sunui UI 是一套基于 Vue 3 与 Element Plus 的公开设计系统。Element Plus 提供成熟的基础组件能力，sunui 提供品牌 Token、Light / Dark 主题、统一视觉适配和 AI 产品专属模式。

组件库以 @sunui-ui/vue 发布。基础组件继续使用 Element Plus API，在 .sunui-app 作用域中呈现 Sunui 品牌视觉；Sunui 自有能力通过独立 Vue 组件提供。

安装 ​

bash
npm install @sunui-ui/vue element-plus

应用入口 ​

ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import Sunui from '@sunui-ui/vue'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import '@sunui-ui/vue/styles.css'
import App from './App.vue'

createApp(App).use(ElementPlus).use(Sunui).mount('#app')

在应用根节点启用作用域：

vue
<template>
  <div class="sunui-app">
    <RouterView />
  </div>
</template>

主题 ​

切换时同时维护 html.dark 与 data-theme="dark"。前者驱动 Element Plus，后者驱动 sunui 语义主题。

边界 ​

  • Button、Input、Table 等直接使用 Element Plus。
  • 页面布局、指标卡、品牌标题和 AI 组件由 sunui 定义。
  • 不在业务页面写死品牌颜色。

自有组件 ​

插件安装后可以全局使用，也可以按需导入：

ts
import { SunuiAgentStatus, SunuiColorPicker } from '@sunui-ui/vue'

本地运行 ​

bash
npm install
npm run docs:dev

构建公开站点 ​

bash
npm run docs:build

构建结果位于 docs/.vitepress/dist，可作为纯静态网站部署到 Nginx 或其他静态托管服务。