skeuo-ui

Skeuo UI

纯正 Neumorphism（新拟物）风格 Vue3 组件库
73 个组件 · TypeScript Strict · 阴影即边界，无边框无渐变

✨ 特性

• 🎨 纯正新拟物 — 同色背景 + 双向柔和阴影，凸起与凹陷一目了然。无边框、无渐变、无纹理、无发光
• ⚡️ Vue3 + TS Strict — 全部 <script setup> 编写，类型导出完整，strict 模式零 any
• 🌗 浅深双主题 — 纯 CSS 变量 Token 驱动，data-theme="dark" 一键切换
• 🧩 73 个组件 — 表单 / 展示 / 反馈 / 导航 / 工具 / 页面全品类覆盖
• 📦 双模式引入 — app.use(SkeuoUI) 全量 / 按需导入
• 📊 图表封装 — SChart 基于 ECharts 按需注册，只打包用到的图表类型（体积 -37%）
• 🔔 编程式 API — message / notification / confirm 开箱即用
• 🚀 可发布 — ESM + UMD + 类型声明，npm pack 真实安装验证通过
• 以下为部分展示，效果图在./docs/public中 ヾ(´∀ ˋ)ﾉ

📚 文档

完整组件文档在 docs/ 目录（VitePress 构建），本地运行 npm run docs:dev 预览。 部署后可访问在线文档站（未部署前此为占位说明）。

🔧 安装

npm install skeuo-ui

🚀 快速上手

全量引入

// main.ts
import { createApp } from 'vue'
import SkeuoUI from 'skeuo-ui'
import 'skeuo-ui/style.css'

const app = createApp(App)
app.use(SkeuoUI)
app.mount('#app')

按需引入

import { SButton, SInput, message } from 'skeuo-ui'
import 'skeuo-ui/style.css'

编程式 API

import { message, notification, confirm } from 'skeuo-ui'

message.success('保存成功')
notification.info('任务完成', '文档已生成')

const ok = await confirm('确定删除该项目吗？', {
  okType: 'danger',
})
if (ok) {
  // 执行删除
}

🌗 深色模式

// 在 <html> 上设置 data-theme="dark"
document.documentElement.setAttribute('data-theme', 'dark')

浅色为默认（#f7f6f2 微暖白底），深色自动切换整套阴影与色彩。组件内部样式 scoped 自足，只需引入一次全局样式。

🧩 组件清单

表单类

展示类

反馈类

导航类

工具类

页面

🎨 设计原则

纯正 Neumorphism：同一背景色上同时存在亮影与暗影。

凸起（按钮/卡片）          凹陷（输入框/轨道）
┌──────────┐              ┌──────────┐
│ 亮↖ 暗↘  │              │ 暗↖ 亮↘  │
└──────────┘              └──────────┘

• ❌ 无边框（用阴影替代）· ❌ 无渐变 · ❌ 无纹理
• ✅ 全部样式走 CSS 变量 Token（--s-*），改一处全局生效
• ✅ 浅色 #f7f6f2 / 深色 data-theme="dark"

🛠 开发

npm install          # 安装依赖
npm run dev          # 启动组件实验室（playground）
npm run build        # 构建产物（vue-tsc + vite build）
npm run docs:dev     # 启动文档站
npm run docs:build   # 构建文档站
npm run gen:docs     # 从源码重新生成组件文档页

📄 License

MIT © 2026 qiangqiang554