@echolab-auto/ui-frame

基于 新拟态（Neumorphism / Soft UI） 设计风格的 Vue 3 UI 组件库，通过多层柔和阴影和统一台阶高度模型营造真实的 3D 浮雕与凹陷效果。

特性

• 统一台阶高度模型 — 正数凸起、负数凹陷、零值平齐，阴影强度随 |elevation| 递增
• 悬停动效 — bulge（膨胀凸起）/ sink（下沉凹陷），不跨越零点，背景色自动匹配
• 亮色 / 暗色主题 — 内置 ThemeProvider，支持自动跟随系统偏好
• 多层阴影 — 环境遮挡 + 定向阴影 + 边缘高光，模拟物理光照
• 弹性缓动 — critically-damped 与 spring-like 过渡曲线，触感自然
• Tree-shaking — 按需引入，只打包需要的组件
• TypeScript — 完整的类型定义

安装

npm

npm install @echolab-auto/ui-frame

GitHub

npm install EchoLab-Auto/ui-frame

快速开始

样式说明：使用打包器（Vite / webpack / esbuild）时，组件样式会随 JS 自动注入，无需手动引入 CSS；仅在 CDN / UMD / 无打包器场景下才需要手动引入 dist/style.css。

全量引入

import { createApp } from 'vue'
import NeumorphismUI from '@echolab-auto/ui-frame'
import App from './App.vue'

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

按需引入

<script setup>
import { NeumorphismButton } from '@echolab-auto/ui-frame'
</script>

<template>
  <NeumorphismButton variant="raised" size="medium">点击我</NeumorphismButton>
</template>

CDN / UMD（无打包器）

<link rel="stylesheet" href="https://unpkg.com/@echolab-auto/ui-frame/dist/style.css" />
<script src="https://unpkg.com/@echolab-auto/ui-frame/dist/ui-frame.umd.cjs"></script>

组件列表（50+ 个）

基础输入

组件	说明	关键属性
NeumorphismButton	凸起/按压/主色/发光/玻璃等变体按钮	variant, size, shape, disabled, loading
NeumorphismSwitch	开关切换（default / power 变体）	v-model, variant, size, activeText
NeumorphismCheckbox	复选框	v-model, label, size, indeterminate
NeumorphismRadio / NeumorphismRadioGroup	单选按钮	v-model, value, direction
NeumorphismInput	文本输入框（凹陷效果）	v-model, label, placeholder, size, error
NeumorphismTextarea	多行文本	v-model, rows, autoResize, showCount
NeumorphismSelect	下拉选择	v-model, options, clearable
NeumorphismInputNumber	数字输入（±步进器）	v-model, min, max, step
NeumorphismAutoComplete	输入联想	v-model, options, loading
NeumorphismSlider	滑块	v-model, min, max, step, vertical
NeumorphismSegmented	分段选择（单选）	v-model, options, size

表单

组件	说明	关键属性
NeumorphismForm	表单容器 + 验证	model, rules, direction
NeumorphismFormItem	表单项	prop, label, required, rules
NeumorphismDatePicker	日期选择器	v-model(Date), format, minDate

数据展示

组件	说明	关键属性
NeumorphismCard	卡片容器（台阶高度模型）	elevation(-4~4), hoverable, radius
NeumorphismAvatar	头像	src, size, shape, initials
NeumorphismBadge	角标/红点	value, dot, max
NeumorphismTag	标签	variant, size, rounded
NeumorphismProgress	进度条	percentage, variant, striped
NeumorphismSkeleton	骨架屏	variant, animation
NeumorphismTable	数据表格	columns, data, striped, hoverable
NeumorphismTree	树形控件（键盘导航）	data, selectedKeys, showSearch
NeumorphismList	列表	items, bordered, loading
NeumorphismVirtualList	虚拟滚动列表	items, itemHeight, overscan
NeumorphismChartBar	柱状图	series, stacked, orientation
NeumorphismChartLine	折线图	series, curve, area, showPoints
NeumorphismChartPie	饼图/环图	data, innerRadius, roundedCorners
NeumorphismChartCandlestick	K 线图	data, ,

反馈

组件	说明	关键属性
NeumorphismModal	模态框	v-model, title, size, maskClosable
NeumorphismDrawer	抽屉面板	v-model, position, title
NeumorphismToastProvider	消息提示	position, maxCount
NeumorphismTooltip	文字提示	content, position, trigger
NeumorphismPopover	弹出面板	trigger, position, width
NeumorphismAlert	警告横幅	type(info/success/warning/error), closable
NeumorphismEmpty	空状态	description, size
NeumorphismCollapse	折叠面板	items, accordion
NeumorphismSpinner	加载指示	size(档位或像素), label

导航

组件	说明	关键属性
NeumorphismTabs	标签页	v-model, items, position
NeumorphismBreadcrumb	面包屑	items, size
NeumorphismPagination	分页	v-model:current, total, pageSize
NeumorphismMenu	垂直菜单	items, selectable, collapsed
NeumorphismNavMenu	水平导航栏	items, defaultActive
NeumorphismDropdown	下拉菜单	items, trigger 自动
NeumorphismSteps	步骤条	steps, v-model:current, direction

布局

组件	说明	关键属性
NeumorphismLayout	页面框架（Header/Sider/Content/Footer）	showHeader, showSider, collapsible
NeumorphismContainer	响应式页面容器	mode(fixed/fluid), noPadding
NeumorphismRow	flexbox 栅格行	gutter, justify, align
NeumorphismCol	栅格列（6 响应式断点）	span(1-24), xs/sm/md/lg/xl/xxl
NeumorphismDivider	分割线	direction, align, dashed
NeumorphismCanvas	画布	showGrid, gridSize

其他

组件	说明	关键属性
NeumorphismUpload	文件上传（拖拽）	v-model:files, accept, drag, listType
ThemeProvider	亮色/暗色主题管理	defaultTheme(light/dark/auto)
NeumorphismThemeToggle	主题切换按钮	v-model, size
NeumorphismScrollbar	自定义点阵滚动条	target, variant(standard/dots/glow)
NeumorphismFieldLabel / NeumorphismFieldError	表单标签/错误提示	label, required / id, message

领域模块（子路径按需引入）

模块	说明	引入
文档渲染（doc）	Markdown 渲染（代码高亮/复制、mermaid、prodoc-flow 流程画布）、文档查看器/编辑器	@echolab-auto/ui-frame/doc
聊天面板（chat）	纯元组件（气泡/托盘/折叠/输入/复制）自组聊天界面；吸底滚动、IME 安全输入区；组合形态由宿主组装	@echolab-auto/ui-frame/chat

详细文档：

• Agent 构建指南 — Agent 专用，组件目录 + 模式 + 决策指南
• 用户指南 — 教程式，按场景阅读
• API 参考 — 参考手册式，按模块名检索

示例

npm run example

访问 http://localhost:5173/ 查看所有组件的交互展示。

浏览器支持

• Chrome 88+
• Firefox 78+
• Safari 14+
• Edge 88+

开发

# 构建库
npm run build

# 启动示例开发服务器
npm run example

# 构建示例（用于 GitHub Pages）
npm run example:build

发布

export NPM_TOKEN=npm_xxxxxxxx
npm config set //registry.npmjs.org/:_authToken=${NPM_TOKEN}
npm publish

• 发布测试版本

npm publish --tag dev