# uView-Plus 使用指南

## 已完成集成步骤

1. ✅ 安装依赖：`npm install uview-plus --save`
2. ✅ 在 `main.js` 中引入并注册
3. ✅ 创建 `src/uni.scss` 并引入 uView 主题变量
4. ✅ 在 `vite.config.js` 中配置 SCSS 预处理器
5. ✅ 在 `pages.json` 中配置 easycom 自动引入

## 配置说明

### uni.scss
```scss
/* uView-Plus 主题变量配置 */
@import 'uview-plus/theme.scss';
```

### vite.config.js
```javascript
css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@import "@/uni.scss"; @import "@/styles/variables.scss"; @import "@/styles/mixins.scss";',
      api: 'modern-compiler',
      silenceDeprecations: ['legacy-js-api', 'import']
    }
  }
}
```

### pages.json
```json
"easycom": {
  "autoscan": true,
  "custom": {
    "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
  }
}
```

## 常用组件示例

### 1. 按钮 (u-button)
```vue
<u-button type="primary" text="主要按钮"></u-button>
<u-button type="success" text="成功按钮"></u-button>
<u-button type="warning" text="警告按钮"></u-button>
```

### 2. 加载动画 (u-loading-icon)
```vue
<u-loading-icon mode="spinner"></u-loading-icon>
<u-loading-icon mode="circle"></u-loading-icon>
```

### 3. 弹窗 (u-popup)
```vue
<u-popup v-model:show="show" mode="bottom" :round="10">
  <view class="content">弹窗内容</view>
</u-popup>
```

### 4. 输入框 (u-input)
```vue
<u-input v-model="value" placeholder="请输入内容"></u-input>
```

### 5. 表单 (u-form)
```vue
<u-form :model="form" ref="formRef">
  <u-form-item label="姓名" prop="name">
    <u-input v-model="form.name" placeholder="请输入姓名"></u-input>
  </u-form-item>
</u-form>
```

### 6. Toast 提示
```javascript
// 在组件中使用
this.$u.toast('提示内容')
```

### 7. 日历 (u-calendar)
```vue
<u-calendar v-model:show="show" @confirm="confirm"></u-calendar>
```

### 8. 时间选择器 (u-datetime-picker)
```vue
<u-datetime-picker 
  v-model:show="show" 
  v-model="currentDate"
  mode="datetime"
  @confirm="confirm"
></u-datetime-picker>
```

## 可以优化的现有组件

### LoadingOverlay.vue
可以使用 `u-loading-icon` 替代自定义加载动画：
```vue
<template>
  <u-overlay :show="visible">
    <view class="loading-box">
      <u-loading-icon mode="spinner" size="40" color="#ffffff"></u-loading-icon>
    </view>
  </u-overlay>
</template>
```

### BookingPopup.vue
可以使用 `u-popup` 替代自定义弹窗：
```vue
<u-popup 
  v-model:show="visible" 
  mode="bottom" 
  :round="16"
  :closeable="true"
  @close="handleClose"
>
  <!-- 弹窗内容 -->
</u-popup>
```

可以使用 `u-form` 和 `u-form-item` 优化表单：
```vue
<u-form :model="formData" ref="formRef" :rules="rules">
  <u-form-item label="姓名" prop="name" required>
    <u-input v-model="formData.name" placeholder="请填写您的姓名"></u-input>
  </u-form-item>
  <u-form-item label="电话" prop="phone" required>
    <u-input v-model="formData.phone" type="number" maxlength="11"></u-input>
  </u-form-item>
</u-form>
```

可以使用 `u-calendar` 替代自定义日期选择器

## 文档链接

- 官方文档：https://uview-plus.jiangruyi.com/
- 组件列表：https://uview-plus.jiangruyi.com/components/intro.html

## 注意事项

1. uview-plus 是专为 Vue3 + uni-app 设计的组件库
2. 组件通过 easycom 自动引入，无需手动 import
3. 所有组件以 `u-` 开头
4. 支持主题定制和暗黑模式