Prism UI

现代化玻璃态设计 uni-app 组件库

特性

• 玻璃态设计风格
• 深色/浅色主题自动切换
• 14 种颜色 + 5 种形态
• 原子化 CSS 类
• H5/小程序/App 多端支持

安装

npm install @ruixinkeji/prism-ui pinia

快速开始

1. 初始化 Pinia

// main.ts
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  app.use(createPinia())
  return { app }
}

2. 引入样式并初始化主题

<!-- App.vue -->
<script setup>
import { onLaunch } from '@dcloudio/uni-app'
import { useAppStore } from '@ruixinkeji/prism-ui/store/app'

onLaunch(() => {
  // 初始化主题（恢复保存的主题设置）
  const appStore = useAppStore()
  appStore.initTheme()
})
</script>

<style>
/* 引入预编译的 CSS（推荐，无需安装 sass） */
@import '@ruixinkeji/prism-ui/styles/prism-ui.css';
/* 引入字体图标 */
@import '@ruixinkeji/prism-ui/fonts/font-awesome.css';
</style>

也可以使用压缩版本：@import '@ruixinkeji/prism-ui/styles/prism-ui.min.css';

3. 切换主题色（可选）

引入主题覆盖文件即可切换主题色：

<style>
@import '@ruixinkeji/prism-ui/styles/prism-ui.css';
@import '@ruixinkeji/prism-ui/styles/themes/purple.css'; /* 紫色主题 */
@import '@ruixinkeji/prism-ui/fonts/font-awesome.css';
</style>

可选主题：purple / green / orange / red / cyan

4. 配置 easycom（可选）

在 pages.json 中添加：

{
  "easycom": {
    "custom": {
      "^Prism(.*)": "@ruixinkeji/prism-ui/components/Prism$1/Prism$1.vue"
    }
  }
}

配置后可直接使用组件，无需 import：

<template>
  <PrismNavBar title="首页" />
  <PrismTabBar :tabs="tabs" />
</template>

4. 手动引入组件

<script setup>
import PrismNavBar from '@ruixinkeji/prism-ui/components/PrismNavBar/PrismNavBar.vue'
import { useAppStore } from '@ruixinkeji/prism-ui/store/app'

const appStore = useAppStore()
</script>

<template>
  <view :class="{ 'dark-mode': appStore.isDarkMode }">
    <PrismNavBar title="首页" />
  </view>
</template>

组件

按钮

<!-- 颜色：primary / success / warning / danger / blue / green / purple 等 -->
<button class="prism-btn primary">主题色</button>
<button class="prism-btn success">成功</button>
<button class="prism-btn danger">危险</button>

<!-- 形态：solid / gradient / glass / outline -->
<button class="prism-btn primary solid">实心</button>
<button class="prism-btn primary gradient">渐变</button>
<button class="prism-btn primary glass">玻璃</button>
<button class="prism-btn primary outline">轮廓</button>

<!-- 尺寸：xs / sm / md / lg / xl -->
<button class="prism-btn primary md">中等</button>
<button class="prism-btn primary lg">大号</button>

卡片

<view class="prism-card">普通卡片</view>
<view class="prism-card glass">玻璃卡片</view>
<view class="prism-card primary gradient">渐变卡片</view>

图标

<!-- 图标容器 -->
<view class="prism-icon blue">
  <text class="fa fa-home"></text>
</view>

<!-- 图标按钮 -->
<view class="prism-icon-btn primary">
  <text class="fa fa-plus"></text>
</view>

表单

<view class="prism-input-box">
  <input placeholder="请输入" />
</view>
<view class="prism-checkbox checked"></view>
<view class="prism-switch active"></view>

数据展示

<view class="prism-avatar md"></view>
<view class="prism-badge">99</view>
<view class="prism-progress">
  <view class="progress-bar" style="width:60%"></view>
</view>

颜色系统

14 种颜色

purple / blue / green / red / orange / cyan / yellow / pink / magenta / indigo / teal / violet / rose / ai

语义化别名

• primary → 主题色（跟随 theme 设置）
• success → 绿色
• warning → 橙色
• danger → 红色
• info → 青色

5 种形态

• 默认 - 自适应深浅模式
• solid - 实心
• gradient - 渐变
• glass - 玻璃态
• outline - 轮廓

主题切换

修改 src/styles/variables.scss 中的引入：

// 可选：blue / green / purple / orange / red / cyan
@import '../theme/blue.scss';

CSS 变量

--prism-primary-color      // 主题色
--prism-bg-color-card      // 卡片背景
--prism-bg-color-page      // 页面背景
--prism-text-primary       // 主要文字
--prism-text-secondary     // 次要文字
--prism-border-color-light // 边框颜色

License

MIT