Prysm UI - 光之棱镜 · 优雅的现代前端组件库

https://via.placeholder.com/150x50/6e48aa/ffffff?text=PrysmUI A prism that refracts code into beautiful interfaces

🌈 简介

Prysm UI 是一款基于 Vue 3 的现代化 UI 组件库，其名称灵感来源于 "Prism"（棱镜）与 "Pretty"（优雅）的结合。如同棱镜将白光分解为绚丽光谱，Prysm UI 将您的代码转化为优雅的用户界面。

# 安装
npm install prysm-ui
# 或
yarn add prysm-ui

✨ 核心特性

1. 光学设计语言 色彩系统：基于光学频谱的预设调色板 动态阴影：模拟真实光线折射效果 玻璃拟态：现代化毛玻璃视觉效果

2. 开发者友好

   <template>
   	<PrButton
   		type="prismatic"
   		@click="handleRainbow">
       </PrButton>
   </template>

3. 自适应架构 特性 描述 CSS变量驱动 轻松定制主题 按需加载 支持Tree Shaking 无障碍访问 WCAG 2.1标准

🛠 快速开始

在Vue中使用

import { createApp } from 'vue'
import PrysmUI from 'prysm-ui'
import 'prysm-ui/dist/prysm.css'

const app = createApp(App)
app.use(PrysmUI)

主题定制

/* 在你的CSS中覆盖变量 */
:root {
	--pr-primary: #6e48aa;
	--pr-refraction: 0.8; /* 控制光效强度 */
}

🎨 设计哲学

"好的界面应该像棱镜折射的光 - 既遵循物理规律，又创造视觉奇迹"

精确性：每个像素都经过光学模拟

适应性：自动适应环境光模式

表现力：合理的动效持续时间（精确到毫秒）

📦 组件示例

特色组件 PrismMenu：具有光谱展开效果的导航

LensInput：带焦距效果的输入框

SpectrumSlider：色谱选择器

DiffractionGrid：响应式网格系统

📊 性能基准

plaintext Bundle Size:

• 基础版: 23.4KB gzipped
• 完整版: 48.2KB gzipped

渲染性能:

• 首屏加载: <50ms
• 60FPS动效保证 🌟 为什么选择Prysm UI? ✓ 科学美学：基于光学物理的设计系统 ✓ 完美像素：所有组件在2x/3x屏下锐利显示 ✓ 未来证明：支持Vue 3 Composition API和React Hooks ✓ 企业级：已在多家科技公司产品中使用

贡献指南 我们欢迎任何贡献！请阅读我们的贡献指南。

bash

开发环境设置

git clone https://github.com/your-repo/prysm-ui.git cd prysm-ui npm install npm run dev 许可证 MIT Licensed | Copyright © 2023-present Prysm UI Team