npm package: @ruixinkeji/prism-ui
Description: Prism UI - 现代化玻璃态设计 uni-app 组件库
Author: Ruixin
Latest version: 1.0.36

# Prism UI

现代化玻璃态设计 uni-app 组件库

## 特性

- 玻璃态设计风格
- 深色/浅色主题自动切换
- 14 种颜色 + 5 种形态
- 原子化 CSS 类
- H5/小程序/App 多端支持

## 安装

```bash
npm install @ruixinkeji/prism-ui pinia
```

## 快速开始

### 1. 初始化 Pinia

```ts
// 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. 引入样式并初始化主题

```vue
<!-- 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. 切换主题色（可选）

引入主题覆盖文件即可切换主题色：

```vue
<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` 中添加：

```json
{
  "easycom": {
    "custom": {
      "^Prism(.*)": "@ruixinkeji/prism-ui/components/Prism$1/Prism$1.vue"
    }
  }
}
```

配置后可直接使用组件，无需 import：

```vue
<template>
  <PrismNavBar title="首页" />
  <PrismTabBar :tabs="tabs" />
</template>
```

### 4. 手动引入组件

```vue
<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>
```

## 组件

### 按钮

```html
<!-- 颜色：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>
```

### 卡片

```html
<view class="prism-card">普通卡片</view>
<view class="prism-card glass">玻璃卡片</view>
<view class="prism-card primary gradient">渐变卡片</view>
```

### 图标

```html
<!-- 图标容器 -->
<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>
```

### 表单

```html
<view class="prism-input-box">
  <input placeholder="请输入" />
</view>
<view class="prism-checkbox checked"></view>
<view class="prism-switch active"></view>
```

### 数据展示

```html
<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` 中的引入：

```scss
// 可选：blue / green / purple / orange / red / cyan
@import '../theme/blue.scss';
```

## CSS 变量

```scss
--prism-primary-color      // 主题色
--prism-bg-color-card      // 卡片背景
--prism-bg-color-page      // 页面背景
--prism-text-primary       // 主要文字
--prism-text-secondary     // 次要文字
--prism-border-color-light // 边框颜色
```

## License

MIT