W
Wos UI
v1.0.0
🎨 主题
hue 275

改一个变量，
整站换一种性格

Wos UI 是一套从生产环境管理后台中长出来的零依赖设计系统。 全部颜色由 oklch 色相 --hue 派生 —— 拖动右上角滑杆，现在就在换肤。

0
运行时依赖
~600
行 CSS（三文件）
20+
组件
48
内置线性图标
1
换肤要改的变量数
git clone https://gitee.com/dushu/wos-ui.git

快速上手 quick start

最快一行代码，最多两个文件。不碰 npm、不需要构建，任何框架 / 静态页面通用。

1一行代码接入（推荐）最简

下载 dist/wos-ui.auto.js（样式已内嵌），页面里一个 <script> 搞定——所有组件样式自动注入：

<script src="wos-ui.auto.js"></script>

// 立即可用 —— 写 class 就出组件，JS 一行调用
WOS.toast('已保存', 'ok');
WOS.hue(190);          // 一行换全站主题色
↓ 下载 wos-ui.auto.js（37KB） ↓ 下载 wos-ui.css
2两个文件接入（可改样式源码）

想要样式可读可改？用合并版 CSS + JS，各一个文件：

<link rel="stylesheet" href="wos-ui.css">
<script src="wos-ui.js"></script>

# 获取文件：克隆仓库即可，dist/ 里是现成的
git clone https://gitee.com/dushu/wos-ui.git
3分文件引入（按需裁剪）

只要一部分？三个 CSS 各司其职，按需引入：

<!-- 变量（必引）—— 全部设计令牌 -->
<link rel="stylesheet" href="css/tokens.css">
<!-- 基础 —— 面板/按钮/表单/表格 -->
<link rel="stylesheet" href="css/base.css">
<!-- 组件 —— Modal/Toast/Tabs/Switch… -->
<link rel="stylesheet" href="css/components.css">
<script src="js/wos-ui.js"></script>
写一个按钮
<button class="btn btn-primary">主要操作</button>
换肤
WOS.hue(190)   // 一行换主题色，localStorage 自动记住
弹窗 / 提示
WOS.toast('已保存', 'ok')  WOS.modal.open('#modalId')
提示：下面每个组件章节标题旁都有「代码」按钮，点开就是可直接复制的用法源码；页面底部还有「在线试一试」，改代码实时看效果。

实景预览 admin preview

深色石墨侧栏 + 极浅冷调工作区。下面不是截图，是实时渲染 —— 换主题色，它跟着变。

总览
知识库
名片管理
访客洞察
设置
数据总览
名片表现、AI 问答与线索的整体情况
张三
张
活跃名片
128
▲ 12% 较上周
AI 问答
3,264
▲ 8% 较上周
高意向线索
47
今日 +6
知识库
2.1万字
12 份文档
最新线索实时
访客提问意向时间
王先生高级版大概什么价格？高2 分钟前
李女士能对接我们现有 CRM 吗中18 分钟前
访客 #2091支持哪些文件格式上传低1 小时前

按钮 Button

徽标与标签 Badge · Tag

默认 正常 警告 异常 品牌 金牌
全部 进行中 已完成 可删除 ✕

表单 Form

手机号格式不正确，请检查后重试

导航与反馈 Tabs · Pager · Progress

… 共 230 条 · 20 条/页
容量
72%
额度
45%
告警
92%

弹窗与轻提示 Modal · Toast

Toast 与 Modal 均为 WOS.toast() / WOS.modal.open() 一行调用，原生 DOM 实现，不依赖任何框架。

数据与杂项 Metrics · Avatar · Notice

今日访客
86
▲ 23% 较昨日
转化线索
12
待跟进 5
满意度
98.2%
基于 1,204 次问答
企
张
W
A
B
C
+8
✓ 悬浮我 ⌘ KEsc
提示：上传 PDF / Word / PPT 后，AI 会自动解析并纳入知识库。
注意：体验版知识库上限 1,000 字，升级后解锁更大容量。
错误：3 份文档解析失败，点击重试。

空状态与加载 Empty · Skeleton

还没有知识库文档
上传企业资料后，AI 就能基于这些内容回答客户提问。支持 PDF、Word、PPT 与网页链接。
正在解析文档…

内置图标 48 icons · 单文件注册表

24×24 线性风格，2px 圆角描边，currentColor 自动跟随文字色。WOS.icon('name', size) 输出 SVG。

一变量换肤 theming

所有颜色都是 oklch(明度 纯度 var(--hue))。改色相，全套跟随 —— 包括深色侧栏、语义色底、阴影、光晕。

变量作用当前值示例
--hue主题色相（0-360），唯一必改275
--brand主色（自动派生）oklch(0.585 0.19 h)
--brand-2辅助色（hue + 18°）oklch(0.665 0.155 h+18)
--brand-soft品牌浅底oklch(0.965 0.025 h)
--side-bg深色侧栏底oklch(0.185 0.016 h)
--bg工作区底色oklch(0.984 0.003 h)
JS 一行换肤并记住： WOS.hue(190) —— 设置 CSS 变量 + 写入 localStorage，刷新不丢。

在线试一试 playground

左边改 HTML（可以直接粘贴任何用 Wos UI 写的片段），点「运行」右边实时渲染 —— 主题色也会带过去。

HTML
实时预览