first commit

docs/uView使用指南.md

@@ -0,0 +1,151 @@
+# 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. 支持主题定制和暗黑模式