@echolab-auto/ui-frame

@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+ 个）

基础输入

表单

数据展示

反馈

导航

布局

其他

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

详细文档：

• 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