refactor: 架构升级

.agents/bak-skills/uniappx-project/examples/api/device/get-battery-info.md

@@ -0,0 +1,178 @@
+# uni.getBatteryInfo - 获取电池信息示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/system/battery.html#getbatteryinfo
+
+## 概述
+
+`uni.getBatteryInfo` 用于获取设备电池信息。
+
+## 基础用法
+
+```javascript
+uni.getBatteryInfo({
+  success: (res) => {
+    console.log('电池信息', res)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 获取电池信息
+
+```javascript
+uni.getBatteryInfo({
+  success: (res) => {
+    console.log('电池电量', res.level, '%')
+    console.log('是否正在充电', res.isCharging)
+  },
+  fail: (err) => {
+    console.error('获取失败', err)
+  }
+})
+```
+
+### 示例 2: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="getBatteryInfo">获取电池信息</button>
+    <view v-if="batteryInfo" class="battery-info">
+      <text>电量：{{ batteryInfo.level }}%</text>
+      <text>充电状态：{{ batteryInfo.isCharging ? '充电中' : '未充电' }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      batteryInfo: null
+    }
+  },
+  methods: {
+    getBatteryInfo() {
+      uni.getBatteryInfo({
+        success: (res) => {
+          this.batteryInfo = res
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: '获取失败',
+            icon: 'none'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 低电量提醒
+
+```javascript
+function checkBatteryLevel() {
+  uni.getBatteryInfo({
+    success: (res) => {
+      if (res.level < 20 && !res.isCharging) {
+        uni.showModal({
+          title: '低电量提醒',
+          content: `当前电量仅剩${res.level}%，建议连接充电器`,
+          showCancel: false
+        })
+      }
+    }
+  })
+}
+
+// 定时检查
+setInterval(checkBatteryLevel, 60000) // 每分钟检查一次
+```
+
+### 示例 4: 同步版本
+
+```javascript
+try {
+  const batteryInfo = uni.getBatteryInfoSync()
+  console.log('电池电量', batteryInfo.level, '%')
+  console.log('是否正在充电', batteryInfo.isCharging)
+} catch (err) {
+  console.error('获取失败', err)
+}
+```
+
+### 示例 5: 根据电量调整策略
+
+```javascript
+function getBatteryInfo() {
+  return new Promise((resolve, reject) => {
+    uni.getBatteryInfo({
+      success: (res) => {
+        resolve(res)
+      },
+      fail: (err) => {
+        reject(err)
+      }
+    })
+  })
+}
+
+// 根据电量决定是否执行耗电操作
+async function performHeavyTask() {
+  const batteryInfo = await getBatteryInfo()
+  
+  if (batteryInfo.level < 20 && !batteryInfo.isCharging) {
+    uni.showModal({
+      title: '提示',
+      content: '电量较低，建议连接充电器后再执行',
+      success: (res) => {
+        if (res.confirm) {
+          // 执行任务
+          console.log('执行任务')
+        }
+      }
+    })
+  } else {
+    // 直接执行
+    console.log('执行任务')
+  }
+}
+```
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| level | Number | 设备电量，范围 1 - 100 |
+| isCharging | Boolean | 是否正在充电 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ❌ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. H5 平台不支持此 API
+2. `level` 范围是 1-100，表示电量百分比
+3. `isCharging` 表示设备是否正在充电
+4. 同步版本 `getBatteryInfoSync` 性能更好
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/system/battery.html#getbatteryinfo
+- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/system/battery.html#getbatteryinfosync

.agents/bak-skills/uniappx-project/examples/api/device/get-network-type.md

@@ -0,0 +1,195 @@
+# uni.getNetworkType - 获取网络类型示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/system/network.html#getnetworktype
+
+## 概述
+
+`uni.getNetworkType` 用于获取设备当前网络类型。
+
+## 基础用法
+
+```javascript
+uni.getNetworkType({
+  success: (res) => {
+    console.log('网络类型', res.networkType)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 获取网络类型
+
+```javascript
+uni.getNetworkType({
+  success: (res) => {
+    console.log('网络类型', res.networkType)
+    // 可能的值：wifi、2g、3g、4g、5g、unknown、none
+  },
+  fail: (err) => {
+    console.error('获取失败', err)
+  }
+})
+```
+
+### 示例 2: 检查网络状态
+
+```javascript
+function checkNetwork() {
+  uni.getNetworkType({
+    success: (res) => {
+      if (res.networkType === 'none') {
+        uni.showToast({
+          title: '网络不可用',
+          icon: 'none'
+        })
+      } else if (res.networkType === '2g' || res.networkType === '3g') {
+        uni.showModal({
+          title: '提示',
+          content: '当前网络较慢，建议使用WiFi',
+          showCancel: false
+        })
+      } else {
+        console.log('网络正常', res.networkType)
+      }
+    }
+  })
+}
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="checkNetwork">检查网络</button>
+    <view v-if="networkType" class="network-info">
+      <text>当前网络类型：{{ networkType }}</text>
+      <text>网络状态：{{ networkStatus }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      networkType: '',
+      networkStatus: ''
+    }
+  },
+  onLoad() {
+    this.checkNetwork()
+  },
+  methods: {
+    checkNetwork() {
+      uni.getNetworkType({
+        success: (res) => {
+          this.networkType = res.networkType
+          if (res.networkType === 'none') {
+            this.networkStatus = '无网络'
+          } else if (res.networkType === 'wifi') {
+            this.networkStatus = 'WiFi网络'
+          } else {
+            this.networkStatus = '移动网络'
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 监听网络状态变化
+
+```javascript
+// 监听网络状态变化
+uni.onNetworkStatusChange((res) => {
+  console.log('网络类型', res.networkType)
+  console.log('是否联网', res.isConnected)
+  
+  if (!res.isConnected) {
+    uni.showToast({
+      title: '网络已断开',
+      icon: 'none'
+    })
+  } else {
+    uni.showToast({
+      title: '网络已连接',
+      icon: 'success'
+    })
+  }
+})
+
+// 获取当前网络状态
+uni.getNetworkType({
+  success: (res) => {
+    console.log('当前网络类型', res.networkType)
+  }
+})
+```
+
+### 示例 5: 根据网络类型调整策略
+
+```javascript
+function getNetworkType() {
+  return new Promise((resolve, reject) => {
+    uni.getNetworkType({
+      success: (res) => {
+        resolve(res.networkType)
+      },
+      fail: (err) => {
+        reject(err)
+      }
+    })
+  })
+}
+
+// 根据网络类型决定是否加载高清图片
+async function loadImage() {
+  const networkType = await getNetworkType()
+  
+  if (networkType === 'wifi' || networkType === '4g' || networkType === '5g') {
+    // 加载高清图片
+    return 'https://example.com/hd-image.jpg'
+  } else {
+    // 加载压缩图片
+    return 'https://example.com/compressed-image.jpg'
+  }
+}
+```
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| networkType | String | 网络类型，可能的值：wifi、2g、3g、4g、5g、unknown、none |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `networkType` 可能的值：wifi、2g、3g、4g、5g、unknown、none
+2. `none` 表示无网络连接
+3. 建议配合 `onNetworkStatusChange` 监听网络变化
+4. 可以根据网络类型调整加载策略
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/system/network.html#getnetworktype
+- **监听网络变化**: https://doc.dcloud.net.cn/uni-app-x/api/system/network.html#onnetworkstatuschange

.agents/bak-skills/uniappx-project/examples/api/device/get-screen-brightness.md

@@ -0,0 +1,192 @@
+# uni.getScreenBrightness - 获取屏幕亮度示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/device/screen.html#getscreenbrightness
+
+## 概述
+
+`uni.getScreenBrightness` 用于获取屏幕亮度。
+
+## 基础用法
+
+```javascript
+uni.getScreenBrightness({
+  success: (res) => {
+    console.log('屏幕亮度', res.value)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 获取屏幕亮度
+
+```javascript
+uni.getScreenBrightness({
+  success: (res) => {
+    console.log('屏幕亮度', res.value) // 范围 0 - 1
+    console.log('亮度百分比', (res.value * 100).toFixed(0) + '%')
+  },
+  fail: (err) => {
+    console.error('获取失败', err)
+  }
+})
+```
+
+### 示例 2: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="getBrightness">获取屏幕亮度</button>
+    <view v-if="brightness !== null" class="brightness-info">
+      <text>当前亮度：{{ (brightness * 100).toFixed(0) }}%</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      brightness: null
+    }
+  },
+  methods: {
+    getBrightness() {
+      uni.getScreenBrightness({
+        success: (res) => {
+          this.brightness = res.value
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: '获取失败',
+            icon: 'none'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 保存和恢复亮度
+
+```vue
+<template>
+  <view class="container">
+    <slider 
+      :value="brightness * 100"
+      min="0"
+      max="100"
+      @change="handleBrightnessChange"
+    />
+    <button @click="saveBrightness">保存亮度</button>
+    <button @click="restoreBrightness">恢复亮度</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      brightness: 0.5,
+      savedBrightness: 0.5
+    }
+  },
+  onLoad() {
+    this.getBrightness()
+    // 加载保存的亮度
+    const saved = uni.getStorageSync('screenBrightness')
+    if (saved) {
+      this.savedBrightness = saved
+    }
+  },
+  methods: {
+    getBrightness() {
+      uni.getScreenBrightness({
+        success: (res) => {
+          this.brightness = res.value
+        }
+      })
+    },
+    handleBrightnessChange(e) {
+      this.brightness = e.detail.value / 100
+      uni.setScreenBrightness({
+        value: this.brightness
+      })
+    },
+    saveBrightness() {
+      this.savedBrightness = this.brightness
+      uni.setStorageSync('screenBrightness', this.brightness)
+      uni.showToast({
+        title: '已保存',
+        icon: 'success'
+      })
+    },
+    restoreBrightness() {
+      this.brightness = this.savedBrightness
+      uni.setScreenBrightness({
+        value: this.brightness
+      })
+      uni.showToast({
+        title: '已恢复',
+        icon: 'success'
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 检查亮度设置
+
+```javascript
+function checkBrightness() {
+  uni.getScreenBrightness({
+    success: (res) => {
+      if (res.value < 0.3) {
+        console.log('屏幕较暗')
+      } else if (res.value > 0.8) {
+        console.log('屏幕较亮')
+      } else {
+        console.log('屏幕亮度适中')
+      }
+    }
+  })
+}
+```
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| value | Number | 屏幕亮度值，范围 0 - 1 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ❌ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. H5 平台不支持此 API
+2. `value` 范围是 0-1，0 表示最暗，1 表示最亮
+3. 可以配合 `setScreenBrightness` 使用
+4. 建议在设置亮度前先获取当前亮度
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/device/screen.html#getscreenbrightness
+- **设置亮度**: https://doc.dcloud.net.cn/uni-app-x/api/device/screen.html#setscreenbrightness

.agents/bak-skills/uniappx-project/examples/api/device/get-system-info.md

@@ -0,0 +1,209 @@
+# uni.getSystemInfo - 获取系统信息示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/system/info.html#getsysteminfo
+
+## 概述
+
+`uni.getSystemInfo` 用于获取系统信息，包括设备信息、屏幕信息等。
+
+## 基础用法
+
+```javascript
+uni.getSystemInfo({
+  success: (res) => {
+    console.log('系统信息', res)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 获取系统信息
+
+```javascript
+uni.getSystemInfo({
+  success: (res) => {
+    console.log('手机品牌', res.brand)
+    console.log('手机型号', res.model)
+    console.log('系统版本', res.system)
+    console.log('平台', res.platform)
+    console.log('屏幕宽度', res.windowWidth)
+    console.log('屏幕高度', res.windowHeight)
+  }
+})
+```
+
+### 示例 2: 同步获取系统信息
+
+```javascript
+try {
+  const systemInfo = uni.getSystemInfoSync()
+  console.log('系统信息', systemInfo)
+} catch (err) {
+  console.error('获取失败', err)
+}
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="getSystemInfo">获取系统信息</button>
+    <view v-if="systemInfo" class="info-list">
+      <view class="info-item">
+        <text class="label">手机品牌：</text>
+        <text>{{ systemInfo.brand }}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">手机型号：</text>
+        <text>{{ systemInfo.model }}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">系统版本：</text>
+        <text>{{ systemInfo.system }}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">平台：</text>
+        <text>{{ systemInfo.platform }}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">屏幕宽度：</text>
+        <text>{{ systemInfo.windowWidth }}px</text>
+      </view>
+      <view class="info-item">
+        <text class="label">屏幕高度：</text>
+        <text>{{ systemInfo.windowHeight }}px</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      systemInfo: null
+    }
+  },
+  onLoad() {
+    this.getSystemInfo()
+  },
+  methods: {
+    getSystemInfo() {
+      uni.getSystemInfo({
+        success: (res) => {
+          this.systemInfo = res
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.info-list {
+  margin-top: 20px;
+  padding: 20px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+}
+.info-item {
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+}
+.label {
+  font-weight: bold;
+  color: #333;
+}
+</style>
+```
+
+### 示例 4: 适配不同屏幕
+
+```vue
+<template>
+  <view class="container" :style="containerStyle">
+    <text>自适应内容</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      containerStyle: {}
+    }
+  },
+  onLoad() {
+    const systemInfo = uni.getSystemInfoSync()
+    this.containerStyle = {
+      width: systemInfo.windowWidth + 'px',
+      height: systemInfo.windowHeight + 'px'
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 判断平台
+
+```javascript
+const systemInfo = uni.getSystemInfoSync()
+
+// 判断平台
+if (systemInfo.platform === 'ios') {
+  console.log('iOS 平台')
+} else if (systemInfo.platform === 'android') {
+  console.log('Android 平台')
+}
+
+// 判断是否为 App
+if (systemInfo.platform !== 'devtools') {
+  console.log('非开发工具环境')
+}
+```
+
+## 返回值说明
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| brand | String | 手机品牌 |
+| model | String | 手机型号 |
+| system | String | 操作系统版本 |
+| platform | String | 客户端平台 |
+| windowWidth | Number | 窗口宽度 |
+| windowHeight | Number | 窗口高度 |
+| pixelRatio | Number | 设备像素比 |
+| screenWidth | Number | 屏幕宽度 |
+| screenHeight | Number | 屏幕高度 |
+| statusBarHeight | Number | 状态栏高度 |
+| safeArea | Object | 安全区域 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 建议在 `onLoad` 中获取系统信息
+2. 同步版本 `getSystemInfoSync` 性能更好
+3. 不同平台返回的信息可能不同
+4. 使用 `windowWidth` 和 `windowHeight` 进行屏幕适配
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/system/info.html#getsysteminfo
+- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/system/info.html#getsysteminfosync

.agents/bak-skills/uniappx-project/examples/api/device/set-screen-brightness.md

@@ -0,0 +1,195 @@
+# uni.setScreenBrightness - 设置屏幕亮度示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/device/screen.html#setscreenbrightness
+
+## 概述
+
+`uni.setScreenBrightness` 用于设置屏幕亮度。
+
+## 基础用法
+
+```javascript
+uni.setScreenBrightness({
+  value: 0.5
+})
+```
+
+## 完整示例
+
+### 示例 1: 设置屏幕亮度
+
+```javascript
+uni.setScreenBrightness({
+  value: 0.5, // 亮度值，范围 0 - 1
+  success: () => {
+    console.log('设置成功')
+  },
+  fail: (err) => {
+    console.error('设置失败', err)
+  }
+})
+```
+
+### 示例 2: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <slider 
+      :value="brightness * 100"
+      min="0"
+      max="100"
+      @change="handleBrightnessChange"
+    />
+    <text>亮度：{{ (brightness * 100).toFixed(0) }}%</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      brightness: 0.5
+    }
+  },
+  onLoad() {
+    this.getBrightness()
+  },
+  methods: {
+    getBrightness() {
+      uni.getScreenBrightness({
+        success: (res) => {
+          this.brightness = res.value
+        }
+      })
+    },
+    handleBrightnessChange(e) {
+      this.brightness = e.detail.value / 100
+      uni.setScreenBrightness({
+        value: this.brightness,
+        success: () => {
+          console.log('亮度已设置')
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 自动调节亮度
+
+```javascript
+function autoAdjustBrightness() {
+  // 获取当前时间
+  const hour = new Date().getHours()
+  
+  // 晚上（18:00-6:00）降低亮度
+  if (hour >= 18 || hour < 6) {
+    uni.setScreenBrightness({
+      value: 0.3 // 较暗
+    })
+  } else {
+    uni.setScreenBrightness({
+      value: 0.8 // 较亮
+    })
+  }
+}
+```
+
+### 示例 4: 护眼模式
+
+```vue
+<template>
+  <view class="container">
+    <switch :checked="eyeProtectionMode" @change="toggleEyeProtection" />
+    <text>护眼模式</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      eyeProtectionMode: false,
+      originalBrightness: 0.5
+    }
+  },
+  methods: {
+    toggleEyeProtection(e) {
+      this.eyeProtectionMode = e.detail.value
+      
+      if (this.eyeProtectionMode) {
+        // 保存当前亮度
+        uni.getScreenBrightness({
+          success: (res) => {
+            this.originalBrightness = res.value
+          }
+        })
+        // 降低亮度
+        uni.setScreenBrightness({
+          value: 0.3
+        })
+      } else {
+        // 恢复原亮度
+        uni.setScreenBrightness({
+          value: this.originalBrightness
+        })
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 根据环境光调节
+
+```javascript
+// 注意：此功能需要配合其他API实现
+function adjustBrightnessByAmbient() {
+  // 获取环境光强度（需要其他API支持）
+  // 这里只是示例逻辑
+  const ambientLight = 0.5 // 假设获取到的环境光强度
+  
+  // 根据环境光设置屏幕亮度
+  const screenBrightness = Math.max(0.2, Math.min(1.0, ambientLight))
+  
+  uni.setScreenBrightness({
+    value: screenBrightness
+  })
+}
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| value | Number | 是 | 屏幕亮度值，范围 0 - 1，0 最暗，1 最亮 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ❌ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. H5 平台不支持此 API
+2. `value` 范围是 0-1，0 表示最暗，1 表示最亮
+3. 设置后立即生效
+4. 建议在用户退出应用时恢复系统默认亮度
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/device/screen.html#setscreenbrightness
+- **获取亮度**: https://doc.dcloud.net.cn/uni-app-x/api/device/screen.html#getscreenbrightness

.agents/bak-skills/uniappx-project/examples/api/file/get-file-info.md

@@ -0,0 +1,232 @@
+# uni.getFileInfo - 获取文件信息示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#getfileinfo
+
+## 概述
+
+`uni.getFileInfo` 用于获取文件信息。
+
+## 基础用法
+
+```javascript
+uni.getFileInfo({
+  filePath: 'file_path',
+  success: (res) => {
+    console.log('文件大小', res.size)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 获取文件信息
+
+```javascript
+uni.getFileInfo({
+  filePath: 'file_path',
+  success: (res) => {
+    console.log('文件大小', res.size, '字节')
+    console.log('文件大小（KB）', (res.size / 1024).toFixed(2), 'KB')
+    console.log('文件大小（MB）', (res.size / 1024 / 1024).toFixed(2), 'MB')
+  },
+  fail: (err) => {
+    console.error('获取失败', err)
+  }
+})
+```
+
+### 示例 2: 检查文件大小
+
+```javascript
+function checkFileSize(filePath) {
+  return new Promise((resolve, reject) => {
+    uni.getFileInfo({
+      filePath: filePath,
+      success: (res) => {
+        const sizeInMB = res.size / 1024 / 1024
+        if (sizeInMB > 10) {
+          uni.showModal({
+            title: '提示',
+            content: `文件大小 ${sizeInMB.toFixed(2)}MB，超过10MB，建议压缩后上传`,
+            showCancel: false
+          })
+        }
+        resolve(res)
+      },
+      fail: (err) => {
+        reject(err)
+      }
+    })
+  })
+}
+
+// 使用
+checkFileSize('file_path').then(res => {
+  console.log('文件信息', res)
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="chooseAndCheckFile">选择文件并检查</button>
+    <view v-if="fileInfo" class="file-info">
+      <text>文件大小：{{ formatFileSize(fileInfo.size) }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      fileInfo: null
+    }
+  },
+  methods: {
+    chooseAndCheckFile() {
+      uni.chooseFile({
+        count: 1,
+        success: (res) => {
+          const filePath = res.tempFiles[0].path
+          this.getFileInfo(filePath)
+        }
+      })
+    },
+    getFileInfo(filePath) {
+      uni.getFileInfo({
+        filePath: filePath,
+        success: (res) => {
+          this.fileInfo = res
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: '获取失败',
+            icon: 'none'
+          })
+        }
+      })
+    },
+    formatFileSize(size) {
+      if (size < 1024) {
+        return size + ' B'
+      } else if (size < 1024 * 1024) {
+        return (size / 1024).toFixed(2) + ' KB'
+      } else {
+        return (size / 1024 / 1024).toFixed(2) + ' MB'
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 上传前检查文件大小
+
+```javascript
+function uploadFileWithSizeCheck(filePath) {
+  uni.getFileInfo({
+    filePath: filePath,
+    success: (res) => {
+      const maxSize = 10 * 1024 * 1024 // 10MB
+      
+      if (res.size > maxSize) {
+        uni.showModal({
+          title: '提示',
+          content: `文件大小 ${(res.size / 1024 / 1024).toFixed(2)}MB，超过限制`,
+          showCancel: false
+        })
+        return
+      }
+      
+      // 上传文件
+      uni.uploadFile({
+        url: 'https://api.example.com/upload',
+        filePath: filePath,
+        name: 'file',
+        success: (uploadRes) => {
+          console.log('上传成功', uploadRes)
+        }
+      })
+    }
+  })
+}
+```
+
+### 示例 5: 获取多个文件信息
+
+```javascript
+function getMultipleFileInfo(filePaths) {
+  const fileInfoList = []
+  let completedCount = 0
+  
+  filePaths.forEach((filePath, index) => {
+    uni.getFileInfo({
+      filePath: filePath,
+      success: (res) => {
+        fileInfoList[index] = {
+          path: filePath,
+          size: res.size
+        }
+        completedCount++
+        
+        if (completedCount === filePaths.length) {
+          console.log('所有文件信息', fileInfoList)
+          const totalSize = fileInfoList.reduce((sum, info) => sum + info.size, 0)
+          console.log('总大小', (totalSize / 1024 / 1024).toFixed(2), 'MB')
+        }
+      }
+    })
+  })
+}
+
+// 使用
+uni.chooseFile({
+  count: 5,
+  success: (res) => {
+    const filePaths = res.tempFiles.map(file => file.path)
+    getMultipleFileInfo(filePaths)
+  }
+})
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| filePath | String | 是 | 文件路径 |
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| size | Number | 文件大小，单位：字节 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ❌ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. H5 平台不支持此 API
+2. `size` 单位是字节（bytes）
+3. 可以通过 `size` 判断文件大小，进行上传限制
+4. 建议在上传前检查文件大小
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#getfileinfo

.agents/bak-skills/uniappx-project/examples/api/file/get-saved-file-list.md

@@ -0,0 +1,347 @@
+# uni.getSavedFileList - 获取已保存的文件列表示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#getsavedfilelist
+
+## 概述
+
+`uni.getSavedFileList` 用于获取本地已保存的文件列表。
+
+## 基础用法
+
+```javascript
+uni.getSavedFileList({
+  success: (res) => {
+    console.log('文件列表', res.fileList)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 获取文件列表
+
+```javascript
+uni.getSavedFileList({
+  success: (res) => {
+    console.log('文件数量', res.fileList.length)
+    res.fileList.forEach((file, index) => {
+      console.log(`文件${index + 1}:`, file.filePath)
+      console.log(`大小:`, file.size, '字节')
+      console.log(`创建时间:`, new Date(file.createTime))
+    })
+  },
+  fail: (err) => {
+    console.error('获取失败', err)
+  }
+})
+```
+
+### 示例 2: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="getFileList">获取文件列表</button>
+    <view v-if="fileList.length > 0" class="file-list">
+      <view 
+        v-for="(file, index) in fileList" 
+        :key="index"
+        class="file-item"
+      >
+        <text class="file-path">{{ file.filePath }}</text>
+        <text class="file-size">大小：{{ formatFileSize(file.size) }}</text>
+        <text class="file-time">创建时间：{{ formatTime(file.createTime) }}</text>
+        <button @click="removeFile(file.filePath)">删除</button>
+      </view>
+    </view>
+    <view v-else class="empty">
+      <text>暂无保存的文件</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      fileList: []
+    }
+  },
+  onLoad() {
+    this.getFileList()
+  },
+  methods: {
+    getFileList() {
+      uni.getSavedFileList({
+        success: (res) => {
+          this.fileList = res.fileList
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: '获取失败',
+            icon: 'none'
+          })
+        }
+      })
+    },
+    removeFile(filePath) {
+      uni.removeSavedFile({
+        filePath: filePath,
+        success: () => {
+          uni.showToast({
+            title: '删除成功',
+            icon: 'success'
+          })
+          this.getFileList()
+        }
+      })
+    },
+    formatFileSize(size) {
+      if (size < 1024) {
+        return size + ' B'
+      } else if (size < 1024 * 1024) {
+        return (size / 1024).toFixed(2) + ' KB'
+      } else {
+        return (size / 1024 / 1024).toFixed(2) + ' MB'
+      }
+    },
+    formatTime(timestamp) {
+      const date = new Date(timestamp)
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+    }
+  }
+}
+</script>
+
+<style>
+.file-list {
+  margin-top: 20px;
+}
+.file-item {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+.file-path {
+  display: block;
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 10px;
+}
+.file-size, .file-time {
+  display: block;
+  font-size: 24rpx;
+  color: #666;
+  margin-bottom: 5px;
+}
+</style>
+```
+
+### 示例 3: 计算总文件大小
+
+```javascript
+function getTotalFileSize() {
+  return new Promise((resolve, reject) => {
+    uni.getSavedFileList({
+      success: (res) => {
+        const totalSize = res.fileList.reduce((sum, file) => sum + file.size, 0)
+        const totalSizeMB = (totalSize / 1024 / 1024).toFixed(2)
+        console.log('总文件大小', totalSizeMB, 'MB')
+        resolve({
+          fileList: res.fileList,
+          totalSize: totalSize,
+          totalSizeMB: totalSizeMB
+        })
+      },
+      fail: (err) => {
+        reject(err)
+      }
+    })
+  })
+}
+
+// 使用
+getTotalFileSize().then(result => {
+  console.log('文件统计', result)
+})
+```
+
+### 示例 4: 清理旧文件
+
+```javascript
+function cleanOldFiles(maxAge = 7 * 24 * 60 * 60 * 1000) {
+  // maxAge: 最大保留时间（毫秒），默认7天
+  uni.getSavedFileList({
+    success: (res) => {
+      const now = Date.now()
+      let deletedCount = 0
+      
+      res.fileList.forEach(file => {
+        if (now - file.createTime > maxAge) {
+          uni.removeSavedFile({
+            filePath: file.filePath,
+            success: () => {
+              deletedCount++
+              console.log('已删除旧文件', file.filePath)
+            }
+          })
+        }
+      })
+      
+      setTimeout(() => {
+        uni.showToast({
+          title: `已清理${deletedCount}个文件`,
+          icon: 'success'
+        })
+      }, 1000)
+    }
+  })
+}
+
+// 使用：清理7天前的文件
+cleanOldFiles()
+```
+
+### 示例 5: 文件管理
+
+```vue
+<template>
+  <view class="container">
+    <view class="header">
+      <text>文件管理</text>
+      <text class="total-size">总大小：{{ totalSizeMB }}MB</text>
+    </view>
+    <view class="file-list">
+      <view 
+        v-for="(file, index) in fileList" 
+        :key="index"
+        class="file-item"
+      >
+        <view class="file-info">
+          <text class="file-name">{{ getFileName(file.filePath) }}</text>
+          <text class="file-detail">{{ formatFileSize(file.size) }} · {{ formatTime(file.createTime) }}</text>
+        </view>
+        <view class="file-actions">
+          <button size="mini" @click="previewFile(file)">预览</button>
+          <button size="mini" @click="removeFile(file.filePath)">删除</button>
+        </view>
+      </view>
+    </view>
+    <button @click="clearAllFiles" class="clear-btn">清空所有文件</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      fileList: [],
+      totalSizeMB: '0.00'
+    }
+  },
+  onLoad() {
+    this.getFileList()
+  },
+  methods: {
+    getFileList() {
+      uni.getSavedFileList({
+        success: (res) => {
+          this.fileList = res.fileList
+          const totalSize = res.fileList.reduce((sum, file) => sum + file.size, 0)
+          this.totalSizeMB = (totalSize / 1024 / 1024).toFixed(2)
+        }
+      })
+    },
+    getFileName(filePath) {
+      return filePath.split('/').pop()
+    },
+    removeFile(filePath) {
+      uni.removeSavedFile({
+        filePath: filePath,
+        success: () => {
+          this.getFileList()
+        }
+      })
+    },
+    clearAllFiles() {
+      uni.showModal({
+        title: '确认',
+        content: '确定要清空所有文件吗？',
+        success: (res) => {
+          if (res.confirm) {
+            this.fileList.forEach(file => {
+              uni.removeSavedFile({
+                filePath: file.filePath
+              })
+            })
+            setTimeout(() => {
+              this.getFileList()
+            }, 500)
+          }
+        }
+      })
+    },
+    previewFile(file) {
+      // 根据文件类型预览
+      if (file.filePath.endsWith('.jpg') || file.filePath.endsWith('.png')) {
+        uni.previewImage({
+          urls: [file.filePath]
+        })
+      } else {
+        uni.showToast({
+          title: '暂不支持预览此类型文件',
+          icon: 'none'
+        })
+      }
+    },
+    formatFileSize(size) {
+      if (size < 1024) {
+        return size + ' B'
+      } else if (size < 1024 * 1024) {
+        return (size / 1024).toFixed(2) + ' KB'
+      } else {
+        return (size / 1024 / 1024).toFixed(2) + ' MB'
+      }
+    },
+    formatTime(timestamp) {
+      const date = new Date(timestamp)
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+    }
+  }
+}
+</script>
+```
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| fileList | Array | 文件列表，每个文件包含 filePath、size、createTime |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ❌ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. H5 平台不支持此 API
+2. 返回的文件列表包含通过 `uni.saveFile` 保存的文件
+3. 可以通过 `createTime` 判断文件创建时间
+4. 建议定期清理不需要的文件
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#getsavedfilelist
+- **保存文件**: https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#savefile
+- **删除文件**: https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#removesavedfile

.agents/bak-skills/uniappx-project/examples/api/file/save-file.md

@@ -0,0 +1,223 @@
+# uni.saveFile - 保存文件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#savefile
+
+## 概述
+
+`uni.saveFile` 用于保存文件到本地。
+
+## 基础用法
+
+```javascript
+uni.saveFile({
+  tempFilePath: 'temp_file_path',
+  success: (res) => {
+    console.log('保存成功', res.savedFilePath)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 保存临时文件
+
+```javascript
+uni.saveFile({
+  tempFilePath: 'temp_file_path',
+  success: (res) => {
+    console.log('保存成功', res.savedFilePath)
+    uni.showToast({
+      title: '保存成功',
+      icon: 'success'
+    })
+  },
+  fail: (err) => {
+    console.error('保存失败', err)
+  }
+})
+```
+
+### 示例 2: 保存下载的文件
+
+```javascript
+uni.downloadFile({
+  url: 'https://example.com/file.pdf',
+  success: (res) => {
+    if (res.statusCode === 200) {
+      // 保存下载的文件
+      uni.saveFile({
+        tempFilePath: res.tempFilePath,
+        success: (saveRes) => {
+          console.log('文件已保存', saveRes.savedFilePath)
+        }
+      })
+    }
+  }
+})
+```
+
+### 示例 3: 保存图片到本地
+
+```javascript
+uni.chooseImage({
+  count: 1,
+  success: (res) => {
+    const tempFilePath = res.tempFilePaths[0]
+    
+    // 保存图片
+    uni.saveFile({
+      tempFilePath: tempFilePath,
+      success: (saveRes) => {
+        console.log('图片已保存', saveRes.savedFilePath)
+        uni.showToast({
+          title: '保存成功',
+          icon: 'success'
+        })
+      }
+    })
+  }
+})
+```
+
+### 示例 4: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="downloadAndSave">下载并保存文件</button>
+    <view v-if="savedFilePath" class="file-info">
+      <text>文件已保存：{{ savedFilePath }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      savedFilePath: ''
+    }
+  },
+  methods: {
+    downloadAndSave() {
+      uni.showLoading({
+        title: '下载中...'
+      })
+      
+      uni.downloadFile({
+        url: 'https://example.com/file.pdf',
+        success: (res) => {
+          if (res.statusCode === 200) {
+            uni.saveFile({
+              tempFilePath: res.tempFilePath,
+              success: (saveRes) => {
+                this.savedFilePath = saveRes.savedFilePath
+                uni.hideLoading()
+                uni.showToast({
+                  title: '保存成功',
+                  icon: 'success'
+                })
+              },
+              fail: (err) => {
+                uni.hideLoading()
+                uni.showToast({
+                  title: '保存失败',
+                  icon: 'none'
+                })
+              }
+            })
+          }
+        },
+        fail: (err) => {
+          uni.hideLoading()
+          uni.showToast({
+            title: '下载失败',
+            icon: 'none'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 保存多个文件
+
+```javascript
+function saveMultipleFiles(tempFilePaths) {
+  const savedFilePaths = []
+  let completedCount = 0
+  
+  tempFilePaths.forEach((tempFilePath, index) => {
+    uni.saveFile({
+      tempFilePath: tempFilePath,
+      success: (res) => {
+        savedFilePaths[index] = res.savedFilePath
+        completedCount++
+        
+        if (completedCount === tempFilePaths.length) {
+          console.log('所有文件已保存', savedFilePaths)
+          uni.showToast({
+            title: '全部保存成功',
+            icon: 'success'
+          })
+        }
+      },
+      fail: (err) => {
+        console.error(`文件${index + 1}保存失败`, err)
+        completedCount++
+      }
+    })
+  })
+}
+
+// 使用
+uni.chooseImage({
+  count: 3,
+  success: (res) => {
+    saveMultipleFiles(res.tempFilePaths)
+  }
+})
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| tempFilePath | String | 是 | 需要保存的文件的临时路径 |
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| savedFilePath | String | 文件的保存路径 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ❌ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. H5 平台不支持此 API
+2. 保存的文件可以通过 `uni.getSavedFileList` 获取列表
+3. 保存的文件可以通过 `uni.removeSavedFile` 删除
+4. 建议在保存前检查文件大小
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#savefile
+- **获取文件列表**: https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#getsavedfilelist
+- **删除文件**: https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#removesavedfile

.agents/bak-skills/uniappx-project/examples/api/location/choose-location.md

@@ -0,0 +1,299 @@
+# uni.chooseLocation - 选择位置示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/location/choose-location.html#chooselocation
+
+## 概述
+
+`uni.chooseLocation` 用于打开地图选择位置。
+
+## 基础用法
+
+```javascript
+uni.chooseLocation({
+  success: (res) => {
+    console.log('选择的位置', res.name, res.address)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 基本选择位置
+
+```javascript
+uni.chooseLocation({
+  success: (res) => {
+    console.log('位置名称', res.name)
+    console.log('详细地址', res.address)
+    console.log('纬度', res.latitude)
+    console.log('经度', res.longitude)
+  },
+  fail: (err) => {
+    console.error('选择失败', err)
+  }
+})
+```
+
+### 示例 2: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="chooseLocation">选择位置</button>
+    <view v-if="location" class="location-info">
+      <text>位置：{{ location.name }}</text>
+      <text>地址：{{ location.address }}</text>
+      <text>坐标：{{ location.latitude }}, {{ location.longitude }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      location: null
+    }
+  },
+  methods: {
+    chooseLocation() {
+      uni.chooseLocation({
+        success: (res) => {
+          this.location = res
+          uni.showToast({
+            title: '选择成功',
+            icon: 'success'
+          })
+        },
+        fail: (err) => {
+          if (err.errMsg.includes('auth deny')) {
+            uni.showModal({
+              title: '提示',
+              content: '需要位置权限才能选择位置',
+              success: (modalRes) => {
+                if (modalRes.confirm) {
+                  uni.openSetting()
+                }
+              }
+            })
+          } else {
+            uni.showToast({
+              title: '选择失败',
+              icon: 'none'
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 选择收货地址
+
+```vue
+<template>
+  <view class="container">
+    <view class="address-item" @click="chooseAddress">
+      <view v-if="address">
+        <text class="address-name">{{ address.name }}</text>
+        <text class="address-detail">{{ address.address }}</text>
+      </view>
+      <view v-else>
+        <text>请选择收货地址</text>
+      </view>
+      <text class="arrow">></text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      address: null
+    }
+  },
+  methods: {
+    chooseAddress() {
+      uni.chooseLocation({
+        success: (res) => {
+          this.address = {
+            name: res.name,
+            address: res.address,
+            latitude: res.latitude,
+            longitude: res.longitude
+          }
+          // 保存地址
+          uni.setStorageSync('deliveryAddress', this.address)
+        }
+      })
+    }
+  },
+  onLoad() {
+    // 加载保存的地址
+    const savedAddress = uni.getStorageSync('deliveryAddress')
+    if (savedAddress) {
+      this.address = savedAddress
+    }
+  }
+}
+</script>
+
+<style>
+.address-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+.address-name {
+  display: block;
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-bottom: 10rpx;
+}
+.address-detail {
+  display: block;
+  font-size: 28rpx;
+  color: #999;
+}
+.arrow {
+  color: #999;
+}
+</style>
+```
+
+### 示例 4: 检查权限
+
+```javascript
+function chooseLocationWithPermission() {
+  // 先检查权限
+  uni.getSetting({
+    success: (res) => {
+      if (res.authSetting['scope.userLocation']) {
+        // 已授权，直接选择
+        chooseLocation()
+      } else {
+        // 请求授权
+        uni.authorize({
+          scope: 'scope.userLocation',
+          success: () => {
+            chooseLocation()
+          },
+          fail: () => {
+            uni.showModal({
+              title: '提示',
+              content: '需要位置权限才能选择位置',
+              success: (modalRes) => {
+                if (modalRes.confirm) {
+                  uni.openSetting()
+                }
+              }
+            })
+          }
+        })
+      }
+    }
+  })
+}
+
+function chooseLocation() {
+  uni.chooseLocation({
+    success: (res) => {
+      console.log('选择的位置', res)
+    }
+  })
+}
+```
+
+### 示例 5: 在地图上显示选择的位置
+
+```vue
+<template>
+  <view class="container">
+    <button @click="chooseLocation">选择位置</button>
+    <map 
+      v-if="location"
+      :latitude="location.latitude"
+      :longitude="location.longitude"
+      :markers="markers"
+      class="map"
+    ></map>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      location: null,
+      markers: []
+    }
+  },
+  methods: {
+    chooseLocation() {
+      uni.chooseLocation({
+        success: (res) => {
+          this.location = res
+          this.markers = [{
+            id: 1,
+            latitude: res.latitude,
+            longitude: res.longitude,
+            title: res.name
+          }]
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.map {
+  width: 100%;
+  height: 500px;
+  margin-top: 20px;
+}
+</style>
+```
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| name | String | 位置名称 |
+| address | String | 详细地址 |
+| latitude | Number | 纬度 |
+| longitude | Number | 经度 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ❌ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 需要用户授权位置权限
+2. H5 平台不支持此 API
+3. 选择的位置包含名称、地址和坐标信息
+4. 建议在需要时再请求权限
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/location/choose-location.html#chooselocation
+- **获取位置**: https://doc.dcloud.net.cn/uni-app-x/api/location/location.html#getlocation
+- **打开地图**: https://doc.dcloud.net.cn/uni-app-x/api/location/open-location.html#openlocation

.agents/bak-skills/uniappx-project/examples/api/location/get-location.md

@@ -0,0 +1,243 @@
+# uni.getLocation - 获取位置示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/location/location.html#getlocation
+
+## 概述
+
+`uni.getLocation` 用于获取当前地理位置。
+
+## 基础用法
+
+```javascript
+uni.getLocation({
+  type: 'wgs84',
+  success: (res) => {
+    console.log('当前位置', res.latitude, res.longitude)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 获取当前位置
+
+```javascript
+uni.getLocation({
+  type: 'wgs84',
+  success: (res) => {
+    console.log('纬度', res.latitude)
+    console.log('经度', res.longitude)
+    console.log('速度', res.speed)
+    console.log('精度', res.accuracy)
+  },
+  fail: (err) => {
+    console.error('获取位置失败', err)
+  }
+})
+```
+
+### 示例 2: 高精度定位
+
+```javascript
+uni.getLocation({
+  type: 'gcj02',
+  altitude: true,
+  geocode: true,
+  success: (res) => {
+    console.log('位置信息', res)
+    // res.address 包含地址信息（需要 geocode: true）
+  }
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="getCurrentLocation">获取当前位置</button>
+    <view v-if="location" class="location-info">
+      <text>纬度：{{ location.latitude }}</text>
+      <text>经度：{{ location.longitude }}</text>
+      <text>地址：{{ location.address || '未获取' }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      location: null
+    }
+  },
+  methods: {
+    getCurrentLocation() {
+      uni.showLoading({
+        title: '定位中...'
+      })
+      
+      uni.getLocation({
+        type: 'gcj02',
+        geocode: true,
+        success: (res) => {
+          this.location = res
+          uni.hideLoading()
+          uni.showToast({
+            title: '定位成功',
+            icon: 'success'
+          })
+        },
+        fail: (err) => {
+          uni.hideLoading()
+          uni.showToast({
+            title: '定位失败',
+            icon: 'none'
+          })
+          console.error('定位失败', err)
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 检查定位权限
+
+```javascript
+// 先检查定位权限
+uni.getSetting({
+  success: (res) => {
+    if (res.authSetting['scope.userLocation']) {
+      // 已授权，直接获取位置
+      uni.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          console.log('位置', res)
+        }
+      })
+    } else {
+      // 未授权，请求授权
+      uni.authorize({
+        scope: 'scope.userLocation',
+        success: () => {
+          uni.getLocation({
+            type: 'gcj02',
+            success: (res) => {
+              console.log('位置', res)
+            }
+          })
+        },
+        fail: () => {
+          uni.showModal({
+            title: '提示',
+            content: '需要定位权限才能使用此功能',
+            showCancel: false
+          })
+        }
+      })
+    }
+  }
+})
+```
+
+### 示例 5: 在地图上显示位置
+
+```vue
+<template>
+  <view class="container">
+    <button @click="getLocationAndShow">获取位置并显示</button>
+    <map 
+      v-if="location"
+      :latitude="location.latitude"
+      :longitude="location.longitude"
+      :markers="markers"
+      class="map"
+    ></map>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      location: null,
+      markers: []
+    }
+  },
+  methods: {
+    getLocationAndShow() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          this.location = res
+          this.markers = [{
+            id: 1,
+            latitude: res.latitude,
+            longitude: res.longitude,
+            title: '我的位置'
+          }]
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.map {
+  width: 100%;
+  height: 500px;
+  margin-top: 20px;
+}
+</style>
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| type | String | 否 | 坐标类型，可选值：wgs84、gcj02 |
+| altitude | Boolean | 否 | 是否返回高度信息 |
+| geocode | Boolean | 否 | 是否解析地址信息 |
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| latitude | Number | 纬度 |
+| longitude | Number | 经度 |
+| speed | Number | 速度 |
+| accuracy | Number | 位置的精确度 |
+| altitude | Number | 高度（需要 altitude: true） |
+| address | Object | 地址信息（需要 geocode: true） |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅（需要 HTTPS） |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 需要用户授权定位权限
+2. H5 平台需要 HTTPS 协议
+3. `type` 为 `gcj02` 时返回的坐标可用于地图显示
+4. `geocode` 为 true 时才能获取地址信息
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/location/location.html#getlocation
+- **打开地图**: https://doc.dcloud.net.cn/uni-app-x/api/location/location.html#openlocation
+- **选择位置**: https://doc.dcloud.net.cn/uni-app-x/api/location/location.html#chooselocation

.agents/bak-skills/uniappx-project/examples/api/location/open-location.md

@@ -0,0 +1,188 @@
+# uni.openLocation - 打开地图查看位置示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/location/open-location.html#openlocation
+
+## 概述
+
+`uni.openLocation` 用于使用地图查看位置，可以打开系统地图应用显示指定位置。
+
+## 基础用法
+
+```javascript
+uni.openLocation({
+  latitude: 39.908823,
+  longitude: 116.397470,
+  name: '天安门',
+  address: '北京市东城区'
+})
+```
+
+## 完整示例
+
+### 示例 1: 打开地图查看位置
+
+```javascript
+uni.openLocation({
+  latitude: 39.908823,
+  longitude: 116.397470,
+  name: '天安门',
+  address: '北京市东城区天安门广场',
+  scale: 18,
+  success: () => {
+    console.log('打开地图成功')
+  },
+  fail: (err) => {
+    console.error('打开地图失败', err)
+  }
+})
+```
+
+### 示例 2: 先获取位置再打开地图
+
+```javascript
+// 先获取当前位置
+uni.getLocation({
+  type: 'gcj02',
+  success: (locationRes) => {
+    // 打开地图显示当前位置
+    uni.openLocation({
+      latitude: locationRes.latitude,
+      longitude: locationRes.longitude,
+      name: '我的位置',
+      address: locationRes.address || '当前位置'
+    })
+  }
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="openCurrentLocation">查看当前位置</button>
+    <button @click="openTargetLocation">查看目标位置</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      targetLocation: {
+        latitude: 39.908823,
+        longitude: 116.397470,
+        name: '天安门',
+        address: '北京市东城区天安门广场'
+      }
+    }
+  },
+  methods: {
+    openCurrentLocation() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          uni.openLocation({
+            latitude: res.latitude,
+            longitude: res.longitude,
+            name: '我的位置',
+            address: res.address || '当前位置'
+          })
+        },
+        fail: () => {
+          uni.showToast({
+            title: '获取位置失败',
+            icon: 'none'
+          })
+        }
+      })
+    },
+    openTargetLocation() {
+      uni.openLocation({
+        latitude: this.targetLocation.latitude,
+        longitude: this.targetLocation.longitude,
+        name: this.targetLocation.name,
+        address: this.targetLocation.address
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 查看商家位置
+
+```javascript
+function openStoreLocation(store) {
+  uni.openLocation({
+    latitude: store.latitude,
+    longitude: store.longitude,
+    name: store.name,
+    address: store.address,
+    scale: 18,
+    success: () => {
+      console.log('打开商家位置成功')
+    }
+  })
+}
+
+// 使用
+const store = {
+  name: '星巴克咖啡',
+  address: '北京市朝阳区xxx路xxx号',
+  latitude: 39.908823,
+  longitude: 116.397470
+}
+openStoreLocation(store)
+```
+
+### 示例 5: 导航到位置
+
+```javascript
+// 在某些平台上，openLocation 可以用于导航
+uni.openLocation({
+  latitude: 39.908823,
+  longitude: 116.397470,
+  name: '目的地',
+  address: '北京市东城区',
+  scale: 18
+})
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| latitude | Number | 是 | 纬度，范围为 -90~90，负数表示南纬 |
+| longitude | Number | 是 | 经度，范围为 -180~180，负数表示西经 |
+| scale | Number | 否 | 缩放比例，范围 5~18，默认为 18 |
+| name | String | 否 | 位置名称 |
+| address | String | 否 | 地址的详细说明 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 需要使用 `gcj02` 类型的坐标（通过 `uni.getLocation` 获取）
+2. `scale` 值越大，地图显示越详细
+3. `name` 和 `address` 用于在地图上显示位置信息
+4. 不同平台打开的地图应用可能不同
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/location/open-location.html#openlocation
+- **获取位置**: https://doc.dcloud.net.cn/uni-app-x/api/location/location.html#getlocation

.agents/bak-skills/uniappx-project/examples/api/media/choose-image.md

@@ -0,0 +1,222 @@
+# uni.chooseImage - 选择图片示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#chooseimage
+
+## 概述
+
+`uni.chooseImage` 用于从本地相册选择图片或使用相机拍照。
+
+## 基础用法
+
+```javascript
+uni.chooseImage({
+  count: 1,
+  success: (res) => {
+    console.log('选择的图片', res.tempFilePaths)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 选择单张图片
+
+```javascript
+uni.chooseImage({
+  count: 1,
+  sizeType: ['original', 'compressed'],
+  sourceType: ['album', 'camera'],
+  success: (res) => {
+    console.log('选择的图片路径', res.tempFilePaths)
+    console.log('图片文件信息', res.tempFiles)
+  }
+})
+```
+
+### 示例 2: 选择多张图片
+
+```javascript
+uni.chooseImage({
+  count: 9, // 最多选择9张
+  sizeType: ['compressed'], // 只选择压缩图
+  sourceType: ['album'], // 只从相册选择
+  success: (res) => {
+    console.log('选择了', res.tempFilePaths.length, '张图片')
+    res.tempFilePaths.forEach((path, index) => {
+      console.log(`图片${index + 1}:`, path)
+    })
+  }
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="chooseImage">选择图片</button>
+    <view class="image-list">
+      <image 
+        v-for="(item, index) in imageList" 
+        :key="index"
+        :src="item"
+        mode="aspectFill"
+        class="image-item"
+        @click="previewImage(index)"
+      ></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageList: []
+    }
+  },
+  methods: {
+    chooseImage() {
+      uni.chooseImage({
+        count: 9,
+        sizeType: ['original', 'compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          this.imageList = res.tempFilePaths
+          uni.showToast({
+            title: `选择了${res.tempFilePaths.length}张图片`,
+            icon: 'success'
+          })
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: '选择图片失败',
+            icon: 'none'
+          })
+        }
+      })
+    },
+    previewImage(index) {
+      uni.previewImage({
+        current: index,
+        urls: this.imageList
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+.image-item {
+  width: 200rpx;
+  height: 200rpx;
+  margin: 10rpx;
+  border-radius: 8rpx;
+}
+</style>
+```
+
+### 示例 4: 上传图片
+
+```javascript
+uni.chooseImage({
+  count: 1,
+  sizeType: ['compressed'],
+  sourceType: ['album', 'camera'],
+  success: (res) => {
+    const tempFilePath = res.tempFilePaths[0]
+    
+    // 上传图片
+    uni.uploadFile({
+      url: 'https://api.example.com/upload',
+      filePath: tempFilePath,
+      name: 'file',
+      success: (uploadRes) => {
+        const data = JSON.parse(uploadRes.data)
+        console.log('上传成功', data.url)
+        uni.showToast({
+          title: '上传成功',
+          icon: 'success'
+        })
+      },
+      fail: (err) => {
+        console.error('上传失败', err)
+        uni.showToast({
+          title: '上传失败',
+          icon: 'none'
+        })
+      }
+    })
+  }
+})
+```
+
+### 示例 5: 获取图片信息
+
+```javascript
+uni.chooseImage({
+  count: 1,
+  success: (res) => {
+    const tempFilePath = res.tempFilePaths[0]
+    
+    // 获取图片信息
+    uni.getImageInfo({
+      src: tempFilePath,
+      success: (imageInfo) => {
+        console.log('图片宽度', imageInfo.width)
+        console.log('图片高度', imageInfo.height)
+        console.log('图片路径', imageInfo.path)
+      }
+    })
+  }
+})
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| count | Number | 否 | 最多可以选择的图片张数，默认 9 |
+| sizeType | Array | 否 | 所选的图片的尺寸，可选值：original（原图）、compressed（压缩图） |
+| sourceType | Array | 否 | 选择图片的来源，可选值：album（相册）、camera（相机） |
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| tempFilePaths | Array | 图片的本地文件路径列表 |
+| tempFiles | Array | 图片的本地文件列表，每个文件包含 path 和 size |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 选择的图片是临时文件，需要上传到服务器才能永久保存
+2. 临时文件路径在不同平台格式可能不同
+3. 选择图片需要用户授权，首次使用会弹出授权提示
+4. 建议使用压缩图以节省存储空间
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#chooseimage
+- **预览图片**: https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#previewimage
+- **上传文件**: https://doc.dcloud.net.cn/uni-app-x/api/request/network-file.html#uploadfile

.agents/bak-skills/uniappx-project/examples/api/media/choose-media.md

@@ -0,0 +1,232 @@
+# uni.chooseMedia - 选择媒体文件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/media/video.html#choosemedia
+
+## 概述
+
+`uni.chooseMedia` 用于从本地相册选择图片或视频，或者使用相机拍摄图片或视频。
+
+## 基础用法
+
+```javascript
+uni.chooseMedia({
+  count: 9,
+  success: (res) => {
+    console.log('选择的文件', res.tempFiles)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 选择图片和视频
+
+```javascript
+uni.chooseMedia({
+  count: 9,
+  mediaType: ['image', 'video'],
+  sourceType: ['album', 'camera'],
+  success: (res) => {
+    console.log('选择的文件', res.tempFiles)
+    res.tempFiles.forEach((file, index) => {
+      console.log(`文件${index + 1}:`, file.tempFilePath)
+      if (file.fileType === 'image') {
+        console.log('图片大小', file.size)
+      } else if (file.fileType === 'video') {
+        console.log('视频时长', file.duration)
+      }
+    })
+  }
+})
+```
+
+### 示例 2: 只选择图片
+
+```javascript
+uni.chooseMedia({
+  count: 9,
+  mediaType: ['image'],
+  sourceType: ['album', 'camera'],
+  sizeType: ['original', 'compressed'],
+  success: (res) => {
+    console.log('选择的图片', res.tempFiles)
+  }
+})
+```
+
+### 示例 3: 只选择视频
+
+```javascript
+uni.chooseMedia({
+  count: 1,
+  mediaType: ['video'],
+  sourceType: ['album', 'camera'],
+  maxDuration: 60,
+  camera: 'back',
+  success: (res) => {
+    console.log('选择的视频', res.tempFiles)
+  }
+})
+```
+
+### 示例 4: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="chooseMedia">选择媒体文件</button>
+    <view class="media-list">
+      <view 
+        v-for="(item, index) in mediaList" 
+        :key="index"
+        class="media-item"
+      >
+        <image 
+          v-if="item.fileType === 'image'"
+          :src="item.tempFilePath"
+          mode="aspectFill"
+          class="media-preview"
+        ></image>
+        <video 
+          v-else-if="item.fileType === 'video'"
+          :src="item.tempFilePath"
+          controls
+          class="media-preview"
+        ></video>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      mediaList: []
+    }
+  },
+  methods: {
+    chooseMedia() {
+      uni.chooseMedia({
+        count: 9,
+        mediaType: ['image', 'video'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          this.mediaList = res.tempFiles
+          uni.showToast({
+            title: `选择了${res.tempFiles.length}个文件`,
+            icon: 'success'
+          })
+        },
+        fail: (err) => {
+          console.error('选择失败', err)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.media-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+.media-item {
+  width: 200rpx;
+  height: 200rpx;
+  margin: 10rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+.media-preview {
+  width: 100%;
+  height: 100%;
+}
+</style>
+```
+
+### 示例 5: 上传媒体文件
+
+```javascript
+uni.chooseMedia({
+  count: 9,
+  mediaType: ['image', 'video'],
+  success: (res) => {
+    const files = res.tempFiles
+    let uploadCount = 0
+    
+    files.forEach((file, index) => {
+      uni.uploadFile({
+        url: 'https://api.example.com/upload',
+        filePath: file.tempFilePath,
+        name: 'file',
+        formData: {
+          fileType: file.fileType,
+          size: file.size
+        },
+        success: (uploadRes) => {
+          uploadCount++
+          console.log(`文件${index + 1}上传成功`)
+          
+          if (uploadCount === files.length) {
+            uni.showToast({
+              title: '全部上传成功',
+              icon: 'success'
+            })
+          }
+        },
+        fail: (err) => {
+          console.error(`文件${index + 1}上传失败`, err)
+        }
+      })
+    })
+  }
+})
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| count | Number | 否 | 最多可以选择的文件个数，默认 9 |
+| mediaType | Array | 否 | 文件类型，可选值：image、video |
+| sourceType | Array | 否 | 选择文件来源，可选值：album、camera |
+| maxDuration | Number | 否 | 拍摄视频最长拍摄时间，单位秒 |
+| camera | String | 否 | 使用前置或后置摄像头，可选值：back、front |
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| tempFiles | Array | 选中的文件列表，每个文件包含 tempFilePath、size、fileType 等 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `mediaType` 可以同时选择图片和视频
+2. `count` 表示最多可以选择的文件个数
+3. 返回的文件包含 `fileType` 字段，用于区分图片和视频
+4. 建议根据实际需求设置 `maxDuration` 限制视频时长
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/media/video.html#choosemedia
+- **选择图片**: https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#chooseimage
+- **选择视频**: https://doc.dcloud.net.cn/uni-app-x/api/media/video.html#choosevideo

.agents/bak-skills/uniappx-project/examples/api/media/choose-video.md

@@ -0,0 +1,233 @@
+# uni.chooseVideo - 选择视频示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/media/video.html#choosevideo
+
+## 概述
+
+`uni.chooseVideo` 用于从本地相册选择视频或使用相机拍摄视频。
+
+## 基础用法
+
+```javascript
+uni.chooseVideo({
+  success: (res) => {
+    console.log('选择的视频', res.tempFilePath)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 选择视频
+
+```javascript
+uni.chooseVideo({
+  sourceType: ['album', 'camera'],
+  maxDuration: 60,
+  camera: 'back',
+  success: (res) => {
+    console.log('视频路径', res.tempFilePath)
+    console.log('视频时长', res.duration, '秒')
+    console.log('视频大小', res.size, '字节')
+    console.log('视频高度', res.height)
+    console.log('视频宽度', res.width)
+  }
+})
+```
+
+### 示例 2: 拍摄视频
+
+```javascript
+uni.chooseVideo({
+  sourceType: ['camera'],
+  maxDuration: 30,
+  camera: 'back',
+  success: (res) => {
+    console.log('拍摄的视频', res.tempFilePath)
+    // 可以预览或上传视频
+  }
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="chooseVideo">选择视频</button>
+    <button @click="recordVideo">拍摄视频</button>
+    <video 
+      v-if="videoSrc" 
+      :src="videoSrc" 
+      controls
+      class="video-player"
+    ></video>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      videoSrc: ''
+    }
+  },
+  methods: {
+    chooseVideo() {
+      uni.chooseVideo({
+        sourceType: ['album'],
+        maxDuration: 60,
+        success: (res) => {
+          this.videoSrc = res.tempFilePath
+          uni.showToast({
+            title: '选择成功',
+            icon: 'success'
+          })
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: '选择失败',
+            icon: 'none'
+          })
+        }
+      })
+    },
+    recordVideo() {
+      uni.chooseVideo({
+        sourceType: ['camera'],
+        maxDuration: 30,
+        camera: 'back',
+        success: (res) => {
+          this.videoSrc = res.tempFilePath
+          uni.showToast({
+            title: '拍摄成功',
+            icon: 'success'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.video-player {
+  width: 100%;
+  height: 400px;
+  margin-top: 20px;
+}
+</style>
+```
+
+### 示例 4: 上传视频
+
+```javascript
+uni.chooseVideo({
+  sourceType: ['album', 'camera'],
+  maxDuration: 60,
+  success: (res) => {
+    const tempFilePath = res.tempFilePath
+    
+    // 上传视频
+    uni.uploadFile({
+      url: 'https://api.example.com/upload-video',
+      filePath: tempFilePath,
+      name: 'video',
+      formData: {
+        duration: res.duration,
+        size: res.size
+      },
+      success: (uploadRes) => {
+        const data = JSON.parse(uploadRes.data)
+        console.log('上传成功', data.url)
+        uni.showToast({
+          title: '上传成功',
+          icon: 'success'
+        })
+      },
+      fail: (err) => {
+        console.error('上传失败', err)
+      }
+    })
+  }
+})
+```
+
+### 示例 5: 限制视频时长和大小
+
+```javascript
+uni.chooseVideo({
+  sourceType: ['album', 'camera'],
+  maxDuration: 30, // 最长30秒
+  success: (res) => {
+    // 检查视频大小（例如限制为50MB）
+    const maxSize = 50 * 1024 * 1024 // 50MB
+    if (res.size > maxSize) {
+      uni.showModal({
+        title: '提示',
+        content: '视频文件过大，请选择小于50MB的视频',
+        showCancel: false
+      })
+      return
+    }
+    
+    // 检查视频时长
+    if (res.duration > 30) {
+      uni.showModal({
+        title: '提示',
+        content: '视频时长不能超过30秒',
+        showCancel: false
+      })
+      return
+    }
+    
+    console.log('视频符合要求', res)
+  }
+})
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| sourceType | Array | 否 | 选择视频的来源，可选值：album（相册）、camera（相机） |
+| maxDuration | Number | 否 | 拍摄视频最长拍摄时间，单位秒 |
+| camera | String | 否 | 使用前置或后置摄像头，可选值：back、front |
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| tempFilePath | String | 选定视频的临时文件路径 |
+| duration | Number | 选定视频的时间长度，单位秒 |
+| size | Number | 选定视频的数据量大小，单位字节 |
+| width | Number | 选定视频的宽度，单位 px |
+| height | Number | 选定视频的高度，单位 px |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 选择的视频是临时文件，需要上传到服务器才能永久保存
+2. `maxDuration` 用于限制拍摄时长
+3. 可以通过 `size` 检查视频文件大小
+4. 建议在拍摄前提示用户视频时长限制
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/media/video.html#choosevideo
+- **上传文件**: https://doc.dcloud.net.cn/uni-app-x/api/request/network-file.html#uploadfile

.agents/bak-skills/uniappx-project/examples/api/media/get-image-info.md

@@ -0,0 +1,209 @@
+# uni.getImageInfo - 获取图片信息示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#getimageinfo
+
+## 概述
+
+`uni.getImageInfo` 用于获取图片信息，包括宽度、高度、路径等。
+
+## 基础用法
+
+```javascript
+uni.getImageInfo({
+  src: 'https://example.com/image.jpg',
+  success: (res) => {
+    console.log('图片宽度', res.width)
+    console.log('图片高度', res.height)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 获取网络图片信息
+
+```javascript
+uni.getImageInfo({
+  src: 'https://example.com/image.jpg',
+  success: (res) => {
+    console.log('图片宽度', res.width)
+    console.log('图片高度', res.height)
+    console.log('图片路径', res.path)
+  },
+  fail: (err) => {
+    console.error('获取失败', err)
+  }
+})
+```
+
+### 示例 2: 获取本地图片信息
+
+```javascript
+// 先选择图片
+uni.chooseImage({
+  count: 1,
+  success: (res) => {
+    const tempFilePath = res.tempFilePaths[0]
+    
+    // 获取图片信息
+    uni.getImageInfo({
+      src: tempFilePath,
+      success: (imageInfo) => {
+        console.log('图片信息', imageInfo)
+        // { width: 800, height: 600, path: '...' }
+      }
+    })
+  }
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="selectAndGetInfo">选择图片并获取信息</button>
+    <view v-if="imageInfo" class="info">
+      <text>宽度：{{ imageInfo.width }}px</text>
+      <text>高度：{{ imageInfo.height }}px</text>
+      <image :src="imageInfo.path" mode="aspectFit" class="preview"></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageInfo: null
+    }
+  },
+  methods: {
+    selectAndGetInfo() {
+      uni.chooseImage({
+        count: 1,
+        success: (res) => {
+          const tempFilePath = res.tempFilePaths[0]
+          uni.getImageInfo({
+            src: tempFilePath,
+            success: (imageInfo) => {
+              this.imageInfo = imageInfo
+            },
+            fail: (err) => {
+              uni.showToast({
+                title: '获取图片信息失败',
+                icon: 'none'
+              })
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.info {
+  margin-top: 20px;
+  padding: 20px;
+}
+.preview {
+  width: 100%;
+  max-height: 400px;
+  margin-top: 20px;
+}
+</style>
+```
+
+### 示例 4: 计算图片宽高比
+
+```javascript
+uni.getImageInfo({
+  src: 'https://example.com/image.jpg',
+  success: (res) => {
+    const aspectRatio = res.width / res.height
+    console.log('宽高比', aspectRatio)
+    
+    // 根据宽高比调整显示
+    if (aspectRatio > 1) {
+      console.log('横向图片')
+    } else {
+      console.log('纵向图片')
+    }
+  }
+})
+```
+
+### 示例 5: 验证图片尺寸
+
+```javascript
+function validateImageSize(imagePath, minWidth, minHeight) {
+  return new Promise((resolve, reject) => {
+    uni.getImageInfo({
+      src: imagePath,
+      success: (res) => {
+        if (res.width >= minWidth && res.height >= minHeight) {
+          resolve(res)
+        } else {
+          reject(new Error(`图片尺寸不符合要求，需要至少 ${minWidth}x${minHeight}`))
+        }
+      },
+      fail: (err) => {
+        reject(err)
+      }
+    })
+  })
+}
+
+// 使用
+validateImageSize('https://example.com/image.jpg', 800, 600)
+  .then(info => {
+    console.log('图片符合要求', info)
+  })
+  .catch(err => {
+    console.error('验证失败', err)
+  })
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| src | String | 是 | 图片的路径，可以是相对路径、临时文件路径或网络图片路径 |
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| width | Number | 图片宽度，单位 px |
+| height | Number | 图片高度，单位 px |
+| path | String | 返回图片的本地路径 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 网络图片需要配置合法域名
+2. 本地图片路径需要使用 `/static/` 开头或临时文件路径
+3. 获取图片信息是异步操作
+4. 可以用于验证图片尺寸、计算宽高比等
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#getimageinfo
+- **选择图片**: https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#chooseimage

.agents/bak-skills/uniappx-project/examples/api/media/preview-image.md

@@ -0,0 +1,234 @@
+# uni.previewImage - 预览图片示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#previewimage
+
+## 概述
+
+`uni.previewImage` 用于预览图片，支持缩放、滑动查看多张图片。
+
+## 基础用法
+
+```javascript
+uni.previewImage({
+  urls: ['https://example.com/image1.jpg'],
+  current: 0
+})
+```
+
+## 完整示例
+
+### 示例 1: 预览单张图片
+
+```javascript
+uni.previewImage({
+  urls: ['https://example.com/image1.jpg'],
+  current: 'https://example.com/image1.jpg'
+})
+```
+
+### 示例 2: 预览多张图片
+
+```javascript
+const imageList = [
+  'https://example.com/image1.jpg',
+  'https://example.com/image2.jpg',
+  'https://example.com/image3.jpg'
+]
+
+uni.previewImage({
+  urls: imageList,
+  current: 0 // 从第一张开始
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <view class="image-list">
+      <image 
+        v-for="(item, index) in imageList" 
+        :key="index"
+        :src="item"
+        mode="aspectFill"
+        class="image-item"
+        @click="previewImage(index)"
+      ></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageList: [
+        'https://example.com/image1.jpg',
+        'https://example.com/image2.jpg',
+        'https://example.com/image3.jpg'
+      ]
+    }
+  },
+  methods: {
+    previewImage(index) {
+      uni.previewImage({
+        urls: this.imageList,
+        current: index
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.image-item {
+  width: 200rpx;
+  height: 200rpx;
+  margin: 10rpx;
+  border-radius: 8rpx;
+}
+</style>
+```
+
+### 示例 4: 从选择图片到预览
+
+```vue
+<template>
+  <view class="container">
+    <button @click="chooseAndPreview">选择并预览图片</button>
+    <view class="image-list">
+      <image 
+        v-for="(item, index) in selectedImages" 
+        :key="index"
+        :src="item"
+        mode="aspectFill"
+        class="image-item"
+        @click="previewSelected(index)"
+      ></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedImages: []
+    }
+  },
+  methods: {
+    chooseAndPreview() {
+      uni.chooseImage({
+        count: 9,
+        success: (res) => {
+          this.selectedImages = res.tempFilePaths
+          // 预览第一张
+          if (res.tempFilePaths.length > 0) {
+            uni.previewImage({
+              urls: res.tempFilePaths,
+              current: 0
+            })
+          }
+        }
+      })
+    },
+    previewSelected(index) {
+      uni.previewImage({
+        urls: this.selectedImages,
+        current: index
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 长按保存图片
+
+```vue
+<template>
+  <view class="container">
+    <image 
+      :src="imageUrl"
+      mode="aspectFit"
+      @longpress="saveImage"
+      class="preview-image"
+    ></image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageUrl: 'https://example.com/image.jpg'
+    }
+  },
+  methods: {
+    saveImage() {
+      uni.showActionSheet({
+        itemList: ['保存图片'],
+        success: (res) => {
+          if (res.tapIndex === 0) {
+            uni.downloadFile({
+              url: this.imageUrl,
+              success: (downloadRes) => {
+                uni.saveImageToPhotosAlbum({
+                  filePath: downloadRes.tempFilePath,
+                  success: () => {
+                    uni.showToast({
+                      title: '保存成功',
+                      icon: 'success'
+                    })
+                  }
+                })
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| urls | Array | 是 | 需要预览的图片 http 链接列表 |
+| current | String/Number | 否 | 当前显示图片的索引或链接 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `urls` 必须是网络图片或已下载的本地路径
+2. `current` 可以是索引（Number）或图片链接（String）
+3. 预览时支持手势缩放和滑动切换
+4. 建议使用网络图片时确保图片可访问
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#previewimage
+- **选择图片**: https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#chooseimage

.agents/bak-skills/uniappx-project/examples/api/media/save-image-to-photos-album.md

@@ -0,0 +1,274 @@
+# uni.saveImageToPhotosAlbum - 保存图片到相册示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#saveimagetophotosalbum
+
+## 概述
+
+`uni.saveImageToPhotosAlbum` 用于保存图片到系统相册。
+
+## 基础用法
+
+```javascript
+uni.saveImageToPhotosAlbum({
+  filePath: '/tmp/image.jpg',
+  success: () => {
+    console.log('保存成功')
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 保存网络图片
+
+```javascript
+// 先下载图片
+uni.downloadFile({
+  url: 'https://example.com/image.jpg',
+  success: (res) => {
+    if (res.statusCode === 200) {
+      // 保存到相册
+      uni.saveImageToPhotosAlbum({
+        filePath: res.tempFilePath,
+        success: () => {
+          uni.showToast({
+            title: '保存成功',
+            icon: 'success'
+          })
+        },
+        fail: (err) => {
+          console.error('保存失败', err)
+          if (err.errMsg.includes('auth deny')) {
+            uni.showModal({
+              title: '提示',
+              content: '需要相册权限才能保存图片',
+              showCancel: false
+            })
+          }
+        }
+      })
+    }
+  }
+})
+```
+
+### 示例 2: 保存选择的图片
+
+```javascript
+uni.chooseImage({
+  count: 1,
+  success: (res) => {
+    const tempFilePath = res.tempFilePaths[0]
+    
+    uni.saveImageToPhotosAlbum({
+      filePath: tempFilePath,
+      success: () => {
+        uni.showToast({
+          title: '保存成功',
+          icon: 'success'
+        })
+      },
+      fail: (err) => {
+        console.error('保存失败', err)
+      }
+    })
+  }
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <image :src="imageUrl" mode="aspectFit" class="preview-image"></image>
+    <button @click="saveImage">保存图片</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageUrl: 'https://example.com/image.jpg'
+    }
+  },
+  methods: {
+    saveImage() {
+      // 先下载图片
+      uni.downloadFile({
+        url: this.imageUrl,
+        success: (res) => {
+          if (res.statusCode === 200) {
+            uni.saveImageToPhotosAlbum({
+              filePath: res.tempFilePath,
+              success: () => {
+                uni.showToast({
+                  title: '保存成功',
+                  icon: 'success'
+                })
+              },
+              fail: (err) => {
+                if (err.errMsg.includes('auth deny')) {
+                  uni.showModal({
+                    title: '提示',
+                    content: '需要相册权限，请在设置中开启',
+                    success: (modalRes) => {
+                      if (modalRes.confirm) {
+                        uni.openSetting()
+                      }
+                    }
+                  })
+                } else {
+                  uni.showToast({
+                    title: '保存失败',
+                    icon: 'none'
+                  })
+                }
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 检查权限
+
+```javascript
+function saveImageWithPermission(filePath) {
+  // 先检查权限
+  uni.getSetting({
+    success: (res) => {
+      if (res.authSetting['scope.writePhotosAlbum']) {
+        // 已授权，直接保存
+        saveImage(filePath)
+      } else {
+        // 请求授权
+        uni.authorize({
+          scope: 'scope.writePhotosAlbum',
+          success: () => {
+            saveImage(filePath)
+          },
+          fail: () => {
+            uni.showModal({
+              title: '提示',
+              content: '需要相册权限才能保存图片',
+              success: (modalRes) => {
+                if (modalRes.confirm) {
+                  uni.openSetting()
+                }
+              }
+            })
+          }
+        })
+      }
+    }
+  })
+}
+
+function saveImage(filePath) {
+  uni.saveImageToPhotosAlbum({
+    filePath: filePath,
+    success: () => {
+      uni.showToast({
+        title: '保存成功',
+        icon: 'success'
+      })
+    }
+  })
+}
+```
+
+### 示例 5: 长按保存图片
+
+```vue
+<template>
+  <view class="container">
+    <image 
+      :src="imageUrl" 
+      mode="aspectFit"
+      @longpress="handleLongPress"
+      class="preview-image"
+    ></image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageUrl: 'https://example.com/image.jpg'
+    }
+  },
+  methods: {
+    handleLongPress() {
+      uni.showActionSheet({
+        itemList: ['保存图片'],
+        success: (res) => {
+          if (res.tapIndex === 0) {
+            this.saveImage()
+          }
+        }
+      })
+    },
+    saveImage() {
+      uni.downloadFile({
+        url: this.imageUrl,
+        success: (res) => {
+          if (res.statusCode === 200) {
+            uni.saveImageToPhotosAlbum({
+              filePath: res.tempFilePath,
+              success: () => {
+                uni.showToast({
+                  title: '保存成功',
+                  icon: 'success'
+                })
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| filePath | String | 是 | 图片文件路径，可以是临时文件路径或永久文件路径 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 需要用户授权相册权限
+2. 网络图片需要先下载到本地
+3. 如果权限被拒绝，可以引导用户到设置中开启
+4. 建议在保存前检查权限状态
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#saveimagetophotosalbum
+- **下载文件**: https://doc.dcloud.net.cn/uni-app-x/api/request/network-file.html#downloadfile
+- **授权**: https://doc.dcloud.net.cn/uni-app-x/api/other/authorize.html#authorize

.agents/bak-skills/uniappx-project/examples/api/navigation/navigate-back.md

@@ -0,0 +1,177 @@
+# uni.navigateBack - 返回上一页示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/router.html#navigateback
+
+## 概述
+
+`uni.navigateBack` 用于关闭当前页面，返回上一页面或多级页面。
+
+## 基础用法
+
+```javascript
+uni.navigateBack()
+```
+
+## 完整示例
+
+### 示例 1: 基本返回
+
+```javascript
+uni.navigateBack({
+  success: () => {
+    console.log('返回成功')
+  },
+  fail: (err) => {
+    console.error('返回失败', err)
+  }
+})
+```
+
+### 示例 2: 返回多级页面
+
+```javascript
+// 返回上一页
+uni.navigateBack({
+  delta: 1
+})
+
+// 返回上两页
+uni.navigateBack({
+  delta: 2
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="goBack">返回</button>
+    <button @click="goBackTwoPages">返回上两页</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    },
+    goBackTwoPages() {
+      uni.navigateBack({
+        delta: 2
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 带数据返回
+
+```vue
+<!-- 当前页面 -->
+<template>
+  <view class="container">
+    <button @click="saveAndBack">保存并返回</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formData: {
+        name: 'test',
+        value: '123'
+      }
+    }
+  },
+  methods: {
+    saveAndBack() {
+      // 保存数据到上一页
+      const pages = getCurrentPages()
+      const prevPage = pages[pages.length - 2]
+      if (prevPage) {
+        prevPage.setData({
+          savedData: this.formData
+        })
+      }
+      
+      uni.navigateBack()
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 返回前确认
+
+```vue
+<template>
+  <view class="container">
+    <button @click="handleBack">返回</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      hasChanges: false
+    }
+  },
+  methods: {
+    handleBack() {
+      if (this.hasChanges) {
+        uni.showModal({
+          title: '提示',
+          content: '有未保存的更改，确定要返回吗？',
+          success: (res) => {
+            if (res.confirm) {
+              uni.navigateBack()
+            }
+          }
+        })
+      } else {
+        uni.navigateBack()
+      }
+    }
+  }
+}
+</script>
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| delta | Number | 否 | 返回的页面数，如果 delta 大于现有页面数，则返回到首页 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `delta` 默认为 1，表示返回上一页
+2. 如果 `delta` 大于现有页面数，会返回到首页
+3. 可以通过 `getCurrentPages()` 获取页面栈信息
+4. 返回时可以传递数据给上一页
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/router.html#navigateback
+- **页面跳转**: https://doc.dcloud.net.cn/uni-app-x/api/router.html#navigateto

.agents/bak-skills/uniappx-project/examples/api/navigation/navigate-to.md

@@ -0,0 +1,151 @@
+# uni.navigateTo - 页面跳转示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/router.html#navigateto
+
+## 概述
+
+`uni.navigateTo` 用于保留当前页面，跳转到应用内的某个页面。
+
+## 基础用法
+
+```javascript
+uni.navigateTo({
+  url: '/pages/detail/detail'
+})
+```
+
+## 完整示例
+
+### 示例 1: 基本跳转
+
+```javascript
+uni.navigateTo({
+  url: '/pages/detail/detail',
+  success: () => {
+    console.log('跳转成功')
+  },
+  fail: (err) => {
+    console.error('跳转失败', err)
+  }
+})
+```
+
+### 示例 2: 带参数跳转
+
+```javascript
+// 跳转并传递参数
+uni.navigateTo({
+  url: '/pages/detail/detail?id=123&name=test'
+})
+
+// 在目标页面接收参数
+// pages/detail/detail.vue
+export default {
+  onLoad(options) {
+    console.log('接收到的参数', options)
+    // { id: '123', name: 'test' }
+  }
+}
+```
+
+### 示例 3: 传递对象参数
+
+```javascript
+// 传递对象
+const params = {
+  id: 123,
+  name: 'test',
+  data: { key: 'value' }
+}
+
+// 需要序列化
+uni.navigateTo({
+  url: `/pages/detail/detail?data=${encodeURIComponent(JSON.stringify(params))}`
+})
+
+// 在目标页面解析
+export default {
+  onLoad(options) {
+    const data = JSON.parse(decodeURIComponent(options.data))
+    console.log('解析后的数据', data)
+  }
+}
+```
+
+### 示例 4: 在组件中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="goToDetail">查看详情</button>
+    <button @click="goToDetailWithParams">带参数跳转</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    goToDetail() {
+      uni.navigateTo({
+        url: '/pages/detail/detail'
+      })
+    },
+    goToDetailWithParams() {
+      uni.navigateTo({
+        url: '/pages/detail/detail?id=123&name=test'
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 封装跳转函数
+
+```javascript
+// utils/navigation.js
+const navigation = {
+  // 跳转到详情页
+  toDetail(id) {
+    uni.navigateTo({
+      url: `/pages/detail/detail?id=${id}`
+    })
+  },
+  
+  // 跳转到用户页
+  toUser(userId) {
+    uni.navigateTo({
+      url: `/pages/user/user?id=${userId}`
+    })
+  },
+  
+  // 通用跳转
+  navigate(url, params = {}) {
+    const query = Object.keys(params)
+      .map(key => `${key}=${encodeURIComponent(params[key])}`)
+      .join('&')
+    const fullUrl = query ? `${url}?${query}` : url
+    uni.navigateTo({
+      url: fullUrl
+    })
+  }
+}
+
+// 使用
+navigation.toDetail(123)
+navigation.navigate('/pages/detail/detail', { id: 123, name: 'test' })
+```
+
+## 注意事项
+
+1. 不能跳转到 tabBar 页面，需要使用 `uni.switchTab`
+2. 路径前需要加 `/`，表示从根目录开始
+3. 参数会拼接在 URL 后面，长度有限制
+4. 复杂对象需要序列化后传递
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/router.html#navigateto
+- **其他路由 API**: https://doc.dcloud.net.cn/uni-app-x/api/router.html

.agents/bak-skills/uniappx-project/examples/api/navigation/re-launch.md

@@ -0,0 +1,152 @@
+# uni.reLaunch - 重新启动应用示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/router.html#relaunch
+
+## 概述
+
+`uni.reLaunch` 用于关闭所有页面，打开到应用内的某个页面。
+
+## 基础用法
+
+```javascript
+uni.reLaunch({
+  url: '/pages/index/index'
+})
+```
+
+## 完整示例
+
+### 示例 1: 基本重新启动
+
+```javascript
+uni.reLaunch({
+  url: '/pages/index/index',
+  success: () => {
+    console.log('重新启动成功')
+  },
+  fail: (err) => {
+    console.error('重新启动失败', err)
+  }
+})
+```
+
+### 示例 2: 退出登录后重新启动
+
+```javascript
+function logout() {
+  // 清除所有数据
+  uni.clearStorageSync()
+  
+  // 重新启动到登录页
+  uni.reLaunch({
+    url: '/pages/login/login'
+  })
+}
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="restartApp">重新启动应用</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    restartApp() {
+      uni.showModal({
+        title: '提示',
+        content: '确定要重新启动应用吗？',
+        success: (res) => {
+          if (res.confirm) {
+            uni.reLaunch({
+              url: '/pages/index/index'
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 与 navigateTo 和 redirectTo 的区别
+
+```javascript
+// navigateTo: 保留当前页面，可以返回
+uni.navigateTo({
+  url: '/pages/detail/detail'
+})
+// 页面栈: [首页, 详情页]
+
+// redirectTo: 关闭当前页面，不能返回
+uni.redirectTo({
+  url: '/pages/detail/detail'
+})
+// 页面栈: [详情页] (首页被关闭)
+
+// reLaunch: 关闭所有页面，重新启动
+uni.reLaunch({
+  url: '/pages/detail/detail'
+})
+// 页面栈: [详情页] (所有页面都被关闭)
+```
+
+### 示例 5: 登录后重新启动
+
+```javascript
+function login() {
+  uni.request({
+    url: 'https://api.example.com/login',
+    method: 'POST',
+    data: { username: 'test', password: '123456' },
+    success: (res) => {
+      if (res.data.success) {
+        uni.setStorageSync('token', res.data.token)
+        // 重新启动到首页
+        uni.reLaunch({
+          url: '/pages/index/index'
+        })
+      }
+    }
+  })
+}
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 不能跳转到 tabBar 页面，需要使用 `uni.switchTab`
+2. 会关闭所有页面，无法返回
+3. 路径前需要加 `/`，表示从根目录开始
+4. 适合退出登录、重新启动等场景
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/router.html#relaunch
+- **页面跳转**: https://doc.dcloud.net.cn/uni-app-x/api/router.html#navigateto

.agents/bak-skills/uniappx-project/examples/api/navigation/redirect-to.md

@@ -0,0 +1,146 @@
+# uni.redirectTo - 重定向跳转示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/router.html#redirectto
+
+## 概述
+
+`uni.redirectTo` 用于关闭当前页面，跳转到应用内的某个页面。
+
+## 基础用法
+
+```javascript
+uni.redirectTo({
+  url: '/pages/detail/detail'
+})
+```
+
+## 完整示例
+
+### 示例 1: 基本重定向
+
+```javascript
+uni.redirectTo({
+  url: '/pages/detail/detail',
+  success: () => {
+    console.log('跳转成功')
+  },
+  fail: (err) => {
+    console.error('跳转失败', err)
+  }
+})
+```
+
+### 示例 2: 带参数重定向
+
+```javascript
+uni.redirectTo({
+  url: '/pages/detail/detail?id=123&name=test'
+})
+
+// 在目标页面接收参数
+// pages/detail/detail.vue
+export default {
+  onLoad(options) {
+    console.log('接收到的参数', options)
+    // { id: '123', name: 'test' }
+  }
+}
+```
+
+### 示例 3: 登录后重定向
+
+```javascript
+function login() {
+  // 登录逻辑
+  uni.request({
+    url: 'https://api.example.com/login',
+    method: 'POST',
+    data: { username: 'test', password: '123456' },
+    success: (res) => {
+      if (res.data.success) {
+        // 保存 token
+        uni.setStorageSync('token', res.data.token)
+        // 重定向到首页（关闭登录页）
+        uni.redirectTo({
+          url: '/pages/index/index'
+        })
+      }
+    }
+  })
+}
+```
+
+### 示例 4: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="goToDetail">跳转到详情页</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    goToDetail() {
+      uni.redirectTo({
+        url: '/pages/detail/detail?id=123'
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 与 navigateTo 的区别
+
+```javascript
+// navigateTo: 保留当前页面，可以返回
+uni.navigateTo({
+  url: '/pages/detail/detail'
+})
+// 页面栈: [首页, 详情页]
+
+// redirectTo: 关闭当前页面，不能返回
+uni.redirectTo({
+  url: '/pages/detail/detail'
+})
+// 页面栈: [详情页] (首页被关闭)
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 不能跳转到 tabBar 页面，需要使用 `uni.switchTab`
+2. 会关闭当前页面，无法返回
+3. 路径前需要加 `/`，表示从根目录开始
+4. 适合登录后跳转等不需要返回的场景
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/router.html#redirectto
+- **保留页面跳转**: https://doc.dcloud.net.cn/uni-app-x/api/router.html#navigateto
+- **重新启动**: https://doc.dcloud.net.cn/uni-app-x/api/router.html#relaunch

.agents/bak-skills/uniappx-project/examples/api/navigation/switch-tab.md

@@ -0,0 +1,149 @@
+# uni.switchTab - 切换 TabBar 页面示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/router.html#switchtab
+
+## 概述
+
+`uni.switchTab` 用于跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
+
+## 基础用法
+
+```javascript
+uni.switchTab({
+  url: '/pages/index/index'
+})
+```
+
+## 完整示例
+
+### 示例 1: 基本切换
+
+```javascript
+uni.switchTab({
+  url: '/pages/index/index',
+  success: () => {
+    console.log('切换成功')
+  },
+  fail: (err) => {
+    console.error('切换失败', err)
+  }
+})
+```
+
+### 示例 2: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="goToHome">回到首页</button>
+    <button @click="goToCategory">分类</button>
+    <button @click="goToCart">购物车</button>
+    <button @click="goToProfile">我的</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    goToHome() {
+      uni.switchTab({
+        url: '/pages/index/index'
+      })
+    },
+    goToCategory() {
+      uni.switchTab({
+        url: '/pages/category/category'
+      })
+    },
+    goToCart() {
+      uni.switchTab({
+        url: '/pages/cart/cart'
+      })
+    },
+    goToProfile() {
+      uni.switchTab({
+        url: '/pages/profile/profile'
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 登录后跳转到首页
+
+```javascript
+function login() {
+  uni.request({
+    url: 'https://api.example.com/login',
+    method: 'POST',
+    data: { username: 'test', password: '123456' },
+    success: (res) => {
+      if (res.data.success) {
+        uni.setStorageSync('token', res.data.token)
+        // 跳转到 tabBar 首页
+        uni.switchTab({
+          url: '/pages/index/index'
+        })
+      }
+    }
+  })
+}
+```
+
+### 示例 4: 封装切换函数
+
+```javascript
+// utils/navigation.js
+const navigation = {
+  switchToTab(url) {
+    uni.switchTab({
+      url: url,
+      fail: (err) => {
+        console.error('切换失败', err)
+        // 如果不是 tabBar 页面，使用 navigateTo
+        uni.navigateTo({
+          url: url
+        })
+      }
+    })
+  }
+}
+
+// 使用
+navigation.switchToTab('/pages/index/index')
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| url | String | 是 | 需要跳转的 tabBar 页面的路径 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 只能跳转到 `pages.json` 中配置的 tabBar 页面
+2. 不能传递参数（URL 参数会被忽略）
+3. 会关闭所有非 tabBar 页面
+4. 如果目标页面不是 tabBar 页面，会触发 fail 回调
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/router.html#switchtab
+- **页面跳转**: https://doc.dcloud.net.cn/uni-app-x/api/router.html#navigateto

.agents/bak-skills/uniappx-project/examples/api/network/download-file.md

@@ -0,0 +1,234 @@
+# uni.downloadFile - 下载文件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/request/network-file.html#downloadfile
+
+## 概述
+
+`uni.downloadFile` 用于下载文件资源到本地。
+
+## 基础用法
+
+```javascript
+uni.downloadFile({
+  url: 'https://example.com/file.pdf',
+  success: (res) => {
+    console.log('下载成功', res.tempFilePath)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 下载图片
+
+```javascript
+uni.downloadFile({
+  url: 'https://example.com/image.jpg',
+  success: (res) => {
+    if (res.statusCode === 200) {
+      console.log('下载成功', res.tempFilePath)
+      // 可以预览或保存图片
+      uni.previewImage({
+        urls: [res.tempFilePath]
+      })
+    }
+  },
+  fail: (err) => {
+    console.error('下载失败', err)
+  }
+})
+```
+
+### 示例 2: 下载并保存到相册
+
+```javascript
+uni.downloadFile({
+  url: 'https://example.com/image.jpg',
+  success: (res) => {
+    if (res.statusCode === 200) {
+      // 保存到相册
+      uni.saveImageToPhotosAlbum({
+        filePath: res.tempFilePath,
+        success: () => {
+          uni.showToast({
+            title: '保存成功',
+            icon: 'success'
+          })
+        },
+        fail: (err) => {
+          console.error('保存失败', err)
+        }
+      })
+    }
+  }
+})
+```
+
+### 示例 3: 显示下载进度
+
+```javascript
+uni.downloadFile({
+  url: 'https://example.com/large-file.pdf',
+  success: (res) => {
+    console.log('下载完成', res.tempFilePath)
+  },
+  fail: (err) => {
+    console.error('下载失败', err)
+  }
+})
+```
+
+### 示例 4: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="downloadFile">下载文件</button>
+    <view v-if="downloading" class="download-status">
+      <text>下载中...</text>
+    </view>
+    <view v-if="filePath" class="file-info">
+      <text>文件路径：{{ filePath }}</text>
+      <button @click="openFile">打开文件</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      downloading: false,
+      filePath: ''
+    }
+  },
+  methods: {
+    downloadFile() {
+      this.downloading = true
+      uni.downloadFile({
+        url: 'https://example.com/file.pdf',
+        success: (res) => {
+          if (res.statusCode === 200) {
+            this.filePath = res.tempFilePath
+            this.downloading = false
+            uni.showToast({
+              title: '下载成功',
+              icon: 'success'
+            })
+          }
+        },
+        fail: (err) => {
+          this.downloading = false
+          uni.showToast({
+            title: '下载失败',
+            icon: 'none'
+          })
+        }
+      })
+    },
+    openFile() {
+      // 打开文件
+      uni.openDocument({
+        filePath: this.filePath,
+        success: () => {
+          console.log('打开成功')
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 封装下载函数
+
+```javascript
+// utils/download.js
+const download = {
+  downloadFile(url, options = {}) {
+    return new Promise((resolve, reject) => {
+      uni.downloadFile({
+        url: url,
+        header: options.header || {},
+        success: (res) => {
+          if (res.statusCode === 200) {
+            resolve(res.tempFilePath)
+          } else {
+            reject(new Error(`下载失败，状态码：${res.statusCode}`))
+          }
+        },
+        fail: (err) => {
+          reject(err)
+        }
+      })
+    })
+  },
+  
+  async downloadAndSave(url) {
+    try {
+      const filePath = await this.downloadFile(url)
+      // 根据文件类型保存
+      if (filePath.endsWith('.jpg') || filePath.endsWith('.png')) {
+        await uni.saveImageToPhotosAlbum({ filePath })
+      } else {
+        await uni.saveFile({ tempFilePath: filePath })
+      }
+      return filePath
+    } catch (err) {
+      throw err
+    }
+  }
+}
+
+// 使用
+download.downloadFile('https://example.com/file.pdf')
+  .then(filePath => {
+    console.log('下载成功', filePath)
+  })
+  .catch(err => {
+    console.error('下载失败', err)
+  })
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| url | String | 是 | 下载资源的 url |
+| header | Object | 否 | HTTP 请求 Header |
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| tempFilePath | String | 临时文件路径，下载后的文件会存储到一个临时文件 |
+| statusCode | Number | HTTP 状态码 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 下载的文件是临时文件，需要保存才能永久使用
+2. 可以通过 `statusCode` 判断下载是否成功
+3. 下载的文件路径是临时路径，应用关闭后可能失效
+4. 建议下载后立即保存或使用
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/request/network-file.html#downloadfile
+- **保存文件**: https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#savefile
+- **打开文档**: https://doc.dcloud.net.cn/uni-app-x/api/file/file.html#opendocument

.agents/bak-skills/uniappx-project/examples/api/network/request.md

@@ -0,0 +1,287 @@
+# uni.request - 网络请求示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/request/request.html
+
+## 概述
+
+`uni.request` 用于发起网络请求，支持 GET、POST、PUT、DELETE 等方法。
+
+## 基础用法
+
+### GET 请求
+
+```javascript
+uni.request({
+  url: 'https://api.example.com/data',
+  method: 'GET',
+  success: (res) => {
+    console.log('请求成功', res.data)
+  },
+  fail: (err) => {
+    console.error('请求失败', err)
+  }
+})
+```
+
+### POST 请求
+
+```javascript
+uni.request({
+  url: 'https://api.example.com/user',
+  method: 'POST',
+  data: {
+    name: 'John',
+    age: 30
+  },
+  header: {
+    'Content-Type': 'application/json'
+  },
+  success: (res) => {
+    console.log('请求成功', res.data)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 带参数的 GET 请求
+
+```javascript
+uni.request({
+  url: 'https://api.example.com/users',
+  method: 'GET',
+  data: {
+    page: 1,
+    limit: 10
+  },
+  success: (res) => {
+    if (res.statusCode === 200) {
+      console.log('用户列表', res.data)
+    }
+  },
+  fail: (err) => {
+    uni.showToast({
+      title: '请求失败',
+      icon: 'none'
+    })
+  }
+})
+```
+
+### 示例 2: POST 请求上传数据
+
+```javascript
+uni.request({
+  url: 'https://api.example.com/users',
+  method: 'POST',
+  data: {
+    name: 'John Doe',
+    email: 'john@example.com',
+    age: 30
+  },
+  header: {
+    'Content-Type': 'application/json',
+    'Authorization': 'Bearer token123'
+  },
+  success: (res) => {
+    if (res.statusCode === 200 || res.statusCode === 201) {
+      uni.showToast({
+        title: '创建成功',
+        icon: 'success'
+      })
+    }
+  }
+})
+```
+
+### 示例 3: 使用 Promise
+
+```javascript
+// Promise 方式（部分平台支持）
+uni.request({
+  url: 'https://api.example.com/data'
+}).then(res => {
+  console.log('请求成功', res.data)
+}).catch(err => {
+  console.error('请求失败', err)
+})
+```
+
+### 示例 4: 封装请求函数
+
+```javascript
+// utils/request.js
+const request = (options) => {
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: options.url,
+      method: options.method || 'GET',
+      data: options.data || {},
+      header: {
+        'Content-Type': 'application/json',
+        ...options.header
+      },
+      success: (res) => {
+        if (res.statusCode === 200) {
+          resolve(res.data)
+        } else {
+          reject(new Error(`请求失败: ${res.statusCode}`))
+        }
+      },
+      fail: (err) => {
+        reject(err)
+      }
+    })
+  })
+}
+
+// 使用
+request({
+  url: 'https://api.example.com/data',
+  method: 'GET'
+}).then(data => {
+  console.log('数据', data)
+}).catch(err => {
+  console.error('错误', err)
+})
+```
+
+### 示例 5: 请求拦截和响应拦截
+
+```javascript
+// utils/http.js
+const baseURL = 'https://api.example.com'
+
+// 请求拦截
+const requestInterceptor = (config) => {
+  // 添加 token
+  const token = uni.getStorageSync('token')
+  if (token) {
+    config.header = {
+      ...config.header,
+      'Authorization': `Bearer ${token}`
+    }
+  }
+  return config
+}
+
+// 响应拦截
+const responseInterceptor = (res) => {
+  if (res.statusCode === 401) {
+    // token 过期，跳转登录
+    uni.navigateTo({
+      url: '/pages/login/login'
+    })
+    return Promise.reject(new Error('未授权'))
+  }
+  return res.data
+}
+
+const http = {
+  request(options) {
+    const config = requestInterceptor({
+      url: baseURL + options.url,
+      method: options.method || 'GET',
+      data: options.data || {},
+      header: options.header || {}
+    })
+    
+    return new Promise((resolve, reject) => {
+      uni.request({
+        ...config,
+        success: (res) => {
+          try {
+            const data = responseInterceptor(res)
+            resolve(data)
+          } catch (err) {
+            reject(err)
+          }
+        },
+        fail: (err) => {
+          reject(err)
+        }
+      })
+    })
+  }
+}
+
+export default http
+```
+
+### 示例 6: 超时处理
+
+```javascript
+uni.request({
+  url: 'https://api.example.com/data',
+  method: 'GET',
+  timeout: 5000, // 5秒超时
+  success: (res) => {
+    console.log('请求成功', res.data)
+  },
+  fail: (err) => {
+    if (err.errMsg && err.errMsg.includes('timeout')) {
+      uni.showToast({
+        title: '请求超时',
+        icon: 'none'
+      })
+    } else {
+      uni.showToast({
+        title: '请求失败',
+        icon: 'none'
+      })
+    }
+  }
+})
+```
+
+### 示例 7: 处理不同数据类型
+
+```javascript
+// JSON 数据
+uni.request({
+  url: 'https://api.example.com/data',
+  dataType: 'json',
+  success: (res) => {
+    console.log('JSON 数据', res.data)
+  }
+})
+
+// 文本数据
+uni.request({
+  url: 'https://api.example.com/text',
+  dataType: 'text',
+  success: (res) => {
+    console.log('文本数据', res.data)
+  }
+})
+
+// ArrayBuffer 数据
+uni.request({
+  url: 'https://api.example.com/binary',
+  responseType: 'arraybuffer',
+  success: (res) => {
+    console.log('二进制数据', res.data)
+  }
+})
+```
+
+## 平台差异
+
+- **H5**: 支持 `withCredentials` 参数，用于跨域请求携带凭证
+- **App**: 支持 `sslVerify` 参数，用于验证 SSL 证书
+- **App**: 支持 `firstIpv4` 参数，DNS 解析时优先使用 IPv4
+
+## 注意事项
+
+1. 默认超时时间为 60000ms（60秒）
+2. 默认 `dataType` 为 `json`，会自动解析 JSON 数据
+3. 请求 header 中不能设置 `Referer`
+4. 部分平台支持 Promise 方式调用
+5. 建议封装统一的请求函数，便于统一处理错误和拦截
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/request/request.html
+- **网络请求最佳实践**: https://doc.dcloud.net.cn/uni-app-x/api/request/request.html

.agents/bak-skills/uniappx-project/examples/api/network/upload-file.md

@@ -0,0 +1,262 @@
+# uni.uploadFile - 上传文件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/request/network-file.html#uploadfile
+
+## 概述
+
+`uni.uploadFile` 用于将本地资源上传到服务器。
+
+## 基础用法
+
+```javascript
+uni.uploadFile({
+  url: 'https://api.example.com/upload',
+  filePath: '/tmp/image.jpg',
+  name: 'file',
+  success: (res) => {
+    console.log('上传成功', res.data)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 上传图片
+
+```javascript
+// 先选择图片
+uni.chooseImage({
+  count: 1,
+  success: (res) => {
+    const tempFilePath = res.tempFilePaths[0]
+    
+    // 上传图片
+    uni.uploadFile({
+      url: 'https://api.example.com/upload',
+      filePath: tempFilePath,
+      name: 'file',
+      formData: {
+        'user': 'test'
+      },
+      success: (uploadRes) => {
+        const data = JSON.parse(uploadRes.data)
+        console.log('上传成功', data.url)
+        uni.showToast({
+          title: '上传成功',
+          icon: 'success'
+        })
+      },
+      fail: (err) => {
+        console.error('上传失败', err)
+        uni.showToast({
+          title: '上传失败',
+          icon: 'none'
+        })
+      }
+    })
+  }
+})
+```
+
+### 示例 2: 上传多张图片
+
+```javascript
+uni.chooseImage({
+  count: 9,
+  success: (res) => {
+    const tempFilePaths = res.tempFilePaths
+    let uploadCount = 0
+    
+    tempFilePaths.forEach((filePath, index) => {
+      uni.uploadFile({
+        url: 'https://api.example.com/upload',
+        filePath: filePath,
+        name: 'file',
+        success: () => {
+          uploadCount++
+          if (uploadCount === tempFilePaths.length) {
+            uni.showToast({
+              title: '全部上传成功',
+              icon: 'success'
+            })
+          }
+        },
+        fail: (err) => {
+          console.error(`第${index + 1}张图片上传失败`, err)
+        }
+      })
+    })
+  }
+})
+```
+
+### 示例 3: 显示上传进度
+
+```javascript
+uni.chooseImage({
+  count: 1,
+  success: (res) => {
+    const tempFilePath = res.tempFilePaths[0]
+    
+    uni.uploadFile({
+      url: 'https://api.example.com/upload',
+      filePath: tempFilePath,
+      name: 'file',
+      success: (res) => {
+        console.log('上传成功', res)
+      },
+      fail: (err) => {
+        console.error('上传失败', err)
+      }
+    })
+  }
+})
+```
+
+### 示例 4: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="uploadImage">上传图片</button>
+    <view v-if="uploading" class="upload-status">
+      <text>上传中...</text>
+    </view>
+    <image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="uploaded-image"></image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      uploading: false,
+      imageUrl: ''
+    }
+  },
+  methods: {
+    uploadImage() {
+      uni.chooseImage({
+        count: 1,
+        success: (res) => {
+          this.uploading = true
+          const tempFilePath = res.tempFilePaths[0]
+          
+          uni.uploadFile({
+            url: 'https://api.example.com/upload',
+            filePath: tempFilePath,
+            name: 'file',
+            header: {
+              'Authorization': 'Bearer ' + uni.getStorageSync('token')
+            },
+            success: (uploadRes) => {
+              const data = JSON.parse(uploadRes.data)
+              this.imageUrl = data.url
+              this.uploading = false
+              uni.showToast({
+                title: '上传成功',
+                icon: 'success'
+              })
+            },
+            fail: (err) => {
+              this.uploading = false
+              uni.showToast({
+                title: '上传失败',
+                icon: 'none'
+              })
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 封装上传函数
+
+```javascript
+// utils/upload.js
+const upload = {
+  uploadImage(filePath, options = {}) {
+    return new Promise((resolve, reject) => {
+      uni.uploadFile({
+        url: options.url || 'https://api.example.com/upload',
+        filePath: filePath,
+        name: options.name || 'file',
+        formData: options.formData || {},
+        header: options.header || {},
+        success: (res) => {
+          try {
+            const data = JSON.parse(res.data)
+            resolve(data)
+          } catch (e) {
+            resolve(res.data)
+          }
+        },
+        fail: (err) => {
+          reject(err)
+        }
+      })
+    })
+  }
+}
+
+// 使用
+const filePath = '/tmp/image.jpg'
+upload.uploadImage(filePath, {
+  url: 'https://api.example.com/upload',
+  formData: { userId: '123' }
+}).then(data => {
+  console.log('上传成功', data)
+}).catch(err => {
+  console.error('上传失败', err)
+})
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| url | String | 是 | 开发者服务器地址 |
+| filePath | String | 是 | 要上传文件资源的路径 |
+| name | String | 是 | 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容 |
+| header | Object | 否 | HTTP 请求 Header |
+| formData | Object | 否 | HTTP 请求中其他额外的 form data |
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| data | String | 服务器返回的数据 |
+| statusCode | Number | HTTP 状态码 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 上传文件前需要先选择文件（使用 `uni.chooseImage` 等）
+2. `filePath` 必须是本地路径
+3. 可以通过 `formData` 传递额外的表单数据
+4. 建议在请求头中添加认证信息
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/request/network-file.html#uploadfile
+- **选择图片**: https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#chooseimage
+- **下载文件**: https://doc.dcloud.net.cn/uni-app-x/api/request/network-file.html#downloadfile

.agents/bak-skills/uniappx-project/examples/api/storage/clear-storage.md

@@ -0,0 +1,137 @@
+# uni.clearStorage - 清除所有存储数据示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#clearstorage
+
+## 概述
+
+`uni.clearStorage` 用于清理本地数据缓存，清除所有存储的数据。
+
+## 基础用法
+
+```javascript
+uni.clearStorage({
+  success: () => {
+    console.log('清除成功')
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 清除所有数据
+
+```javascript
+uni.clearStorage({
+  success: () => {
+    console.log('所有数据已清除')
+    uni.showToast({
+      title: '清除成功',
+      icon: 'success'
+    })
+  },
+  fail: (err) => {
+    console.error('清除失败', err)
+  }
+})
+```
+
+### 示例 2: 退出登录时清除
+
+```javascript
+function logout() {
+  uni.clearStorage({
+    success: () => {
+      console.log('数据已清除')
+      // 跳转到登录页
+      uni.reLaunch({
+        url: '/pages/login/login'
+      })
+    }
+  })
+}
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="clearAllData">清除所有数据</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    clearAllData() {
+      uni.showModal({
+        title: '提示',
+        content: '确定要清除所有数据吗？此操作不可恢复',
+        success: (res) => {
+          if (res.confirm) {
+            uni.clearStorage({
+              success: () => {
+                uni.showToast({
+                  title: '清除成功',
+                  icon: 'success'
+                })
+                // 重新加载页面
+                setTimeout(() => {
+                  uni.reLaunch({
+                    url: '/pages/index/index'
+                  })
+                }, 1500)
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 同步版本
+
+```javascript
+try {
+  uni.clearStorageSync()
+  console.log('清除成功')
+} catch (err) {
+  console.error('清除失败', err)
+}
+```
+
+## 参数说明
+
+此 API 无需参数。
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 此操作会清除所有本地存储的数据，请谨慎使用
+2. 建议在清除前提示用户确认
+3. 同步版本 `clearStorageSync` 性能更好
+4. 清除后可能需要重新登录或初始化数据
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#clearstorage
+- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#clearstoragesync
+- **删除单个**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#removestorage

.agents/bak-skills/uniappx-project/examples/api/storage/get-storage-info.md

@@ -0,0 +1,202 @@
+# uni.getStorageInfo - 获取存储信息示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorageinfo
+
+## 概述
+
+`uni.getStorageInfo` 用于异步获取当前 storage 的相关信息。
+
+## 基础用法
+
+```javascript
+uni.getStorageInfo({
+  success: (res) => {
+    console.log('存储信息', res)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 获取存储信息
+
+```javascript
+uni.getStorageInfo({
+  success: (res) => {
+    console.log('所有key', res.keys)
+    console.log('当前占用的空间大小', res.currentSize, 'KB')
+    console.log('限制的空间大小', res.limitSize, 'KB')
+  },
+  fail: (err) => {
+    console.error('获取失败', err)
+  }
+})
+```
+
+### 示例 2: 检查存储空间
+
+```javascript
+function checkStorageSpace() {
+  uni.getStorageInfo({
+    success: (res) => {
+      const usagePercent = (res.currentSize / res.limitSize * 100).toFixed(2)
+      console.log(`存储使用率：${usagePercent}%`)
+      
+      if (usagePercent > 80) {
+        uni.showModal({
+          title: '提示',
+          content: '存储空间不足，建议清理缓存',
+          showCancel: false
+        })
+      }
+    }
+  })
+}
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="getStorageInfo">查看存储信息</button>
+    <view v-if="storageInfo" class="storage-info">
+      <text>已使用：{{ storageInfo.currentSize }}KB / {{ storageInfo.limitSize }}KB</text>
+      <text>使用率：{{ usagePercent }}%</text>
+      <text>存储的key数量：{{ storageInfo.keys.length }}</text>
+      <view class="key-list">
+        <text v-for="key in storageInfo.keys" :key="key" class="key-item">
+          {{ key }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      storageInfo: null
+    }
+  },
+  computed: {
+    usagePercent() {
+      if (!this.storageInfo) return 0
+      return ((this.storageInfo.currentSize / this.storageInfo.limitSize) * 100).toFixed(2)
+    }
+  },
+  methods: {
+    getStorageInfo() {
+      uni.getStorageInfo({
+        success: (res) => {
+          this.storageInfo = res
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.storage-info {
+  margin-top: 20px;
+  padding: 20px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+}
+.key-list {
+  margin-top: 10px;
+}
+.key-item {
+  display: block;
+  padding: 5px;
+  font-size: 24rpx;
+  color: #666;
+}
+</style>
+```
+
+### 示例 4: 清理存储空间
+
+```javascript
+function clearStorageIfNeeded() {
+  uni.getStorageInfo({
+    success: (res) => {
+      const usagePercent = (res.currentSize / res.limitSize) * 100
+      
+      if (usagePercent > 80) {
+        uni.showModal({
+          title: '提示',
+          content: '存储空间不足，是否清理缓存？',
+          success: (modalRes) => {
+            if (modalRes.confirm) {
+              // 清理非关键数据
+              const importantKeys = ['token', 'userInfo']
+              res.keys.forEach(key => {
+                if (!importantKeys.includes(key)) {
+                  uni.removeStorageSync(key)
+                }
+              })
+              uni.showToast({
+                title: '清理完成',
+                icon: 'success'
+              })
+            }
+          }
+        })
+      }
+    }
+  })
+}
+```
+
+### 示例 5: 同步版本
+
+```javascript
+try {
+  const storageInfo = uni.getStorageInfoSync()
+  console.log('所有key', storageInfo.keys)
+  console.log('当前大小', storageInfo.currentSize, 'KB')
+  console.log('限制大小', storageInfo.limitSize, 'KB')
+} catch (err) {
+  console.error('获取失败', err)
+}
+```
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| keys | Array | 当前 storage 中所有的 key |
+| currentSize | Number | 当前占用的空间大小，单位 KB |
+| limitSize | Number | 限制的空间大小，单位 KB |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 可以通过 `keys` 获取所有存储的 key
+2. `currentSize` 和 `limitSize` 单位都是 KB
+3. 建议定期检查存储空间使用情况
+4. 同步版本 `getStorageInfoSync` 性能更好
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorageinfo
+- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorageinfosync
+- **清除存储**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#clearstorage

.agents/bak-skills/uniappx-project/examples/api/storage/get-storage-sync.md

@@ -0,0 +1,200 @@
+# uni.getStorageSync - 同步获取存储数据示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstoragesync
+
+## 概述
+
+`uni.getStorageSync` 用于从本地缓存中同步获取指定 key 的内容。
+
+## 基础用法
+
+```javascript
+try {
+  const value = uni.getStorageSync('key')
+  console.log('获取的数据', value)
+} catch (err) {
+  console.error('获取失败', err)
+}
+```
+
+## 完整示例
+
+### 示例 1: 获取用户信息
+
+```javascript
+try {
+  const userInfo = uni.getStorageSync('userInfo')
+  if (userInfo) {
+    console.log('用户信息', userInfo)
+  } else {
+    console.log('数据不存在')
+  }
+} catch (err) {
+  console.error('获取失败', err)
+}
+```
+
+### 示例 2: 获取 Token
+
+```javascript
+function getToken() {
+  try {
+    const token = uni.getStorageSync('token')
+    return token || null
+  } catch (err) {
+    console.error('获取Token失败', err)
+    return null
+  }
+}
+
+// 使用
+const token = getToken()
+if (token) {
+  console.log('Token存在', token)
+} else {
+  console.log('未登录')
+}
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <view v-if="userInfo" class="user-info">
+      <text>用户名：{{ userInfo.name }}</text>
+      <text>邮箱：{{ userInfo.email }}</text>
+    </view>
+    <view v-else>
+      <text>未登录</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      userInfo: null
+    }
+  },
+  onLoad() {
+    this.loadUserInfo()
+  },
+  methods: {
+    loadUserInfo() {
+      try {
+        const userInfo = uni.getStorageSync('userInfo')
+        if (userInfo) {
+          this.userInfo = userInfo
+        }
+      } catch (err) {
+        console.error('获取用户信息失败', err)
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 封装获取函数
+
+```javascript
+// utils/storage.js
+const storage = {
+  get(key, defaultValue = null) {
+    try {
+      const value = uni.getStorageSync(key)
+      return value !== '' ? value : defaultValue
+    } catch (err) {
+      console.error(`获取${key}失败`, err)
+      return defaultValue
+    }
+  },
+  
+  getString(key, defaultValue = '') {
+    return this.get(key, defaultValue)
+  },
+  
+  getNumber(key, defaultValue = 0) {
+    const value = this.get(key, defaultValue)
+    return Number(value) || defaultValue
+  },
+  
+  getBoolean(key, defaultValue = false) {
+    const value = this.get(key, defaultValue)
+    return Boolean(value)
+  },
+  
+  getObject(key, defaultValue = {}) {
+    const value = this.get(key, defaultValue)
+    return typeof value === 'object' ? value : defaultValue
+  }
+}
+
+// 使用
+const userInfo = storage.getObject('userInfo', {})
+const token = storage.getString('token', '')
+const count = storage.getNumber('count', 0)
+```
+
+### 示例 5: 检查数据是否存在
+
+```javascript
+function hasStorage(key) {
+  try {
+    const value = uni.getStorageSync(key)
+    return value !== '' && value !== null && value !== undefined
+  } catch (err) {
+    return false
+  }
+}
+
+// 使用
+if (hasStorage('userInfo')) {
+  console.log('用户信息存在')
+} else {
+  console.log('用户信息不存在')
+}
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| key | String | 是 | 本地缓存中指定的 key |
+
+## 返回值
+
+| 类型 | 说明 |
+|------|------|
+| Any | key 对应的内容 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 同步接口会阻塞后续代码执行，性能比异步接口好
+2. 如果 key 不存在，返回空字符串
+3. 建议使用 try-catch 处理错误
+4. 适合在页面初始化时获取数据
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstoragesync
+- **异步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorage
+- **设置存储**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstoragesync

.agents/bak-skills/uniappx-project/examples/api/storage/get-storage.md

@@ -0,0 +1,175 @@
+# uni.getStorage - 获取存储数据示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorage
+
+## 概述
+
+`uni.getStorage` 用于从本地缓存中异步获取指定 key 的内容。
+
+## 基础用法
+
+```javascript
+uni.getStorage({
+  key: 'userInfo',
+  success: (res) => {
+    console.log('获取的数据', res.data)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 获取用户信息
+
+```javascript
+uni.getStorage({
+  key: 'userInfo',
+  success: (res) => {
+    const userInfo = res.data
+    console.log('用户信息', userInfo)
+    // 使用用户信息
+  },
+  fail: (err) => {
+    console.error('获取失败', err)
+    // 数据不存在或获取失败
+  }
+})
+```
+
+### 示例 2: 获取字符串
+
+```javascript
+uni.getStorage({
+  key: 'token',
+  success: (res) => {
+    const token = res.data
+    console.log('Token', token)
+    // 使用 token
+  }
+})
+```
+
+### 示例 3: 获取数组
+
+```javascript
+uni.getStorage({
+  key: 'shoppingCart',
+  success: (res) => {
+    const cart = res.data || []
+    console.log('购物车', cart)
+  }
+})
+```
+
+### 示例 4: 封装获取函数
+
+```javascript
+// utils/storage.js
+const storage = {
+  get(key) {
+    return new Promise((resolve, reject) => {
+      uni.getStorage({
+        key: key,
+        success: (res) => {
+          resolve(res.data)
+        },
+        fail: (err) => {
+          if (err.errMsg.includes('data not found')) {
+            resolve(null) // 数据不存在返回 null
+          } else {
+            reject(err)
+          }
+        }
+      })
+    })
+  }
+}
+
+// 使用
+storage.get('userInfo')
+  .then(data => {
+    if (data) {
+      console.log('用户信息', data)
+    } else {
+      console.log('数据不存在')
+    }
+  })
+  .catch(err => {
+    console.error('获取失败', err)
+  })
+```
+
+### 示例 5: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="loadUserInfo">加载用户信息</button>
+    <view v-if="userInfo" class="user-info">
+      <text>用户名：{{ userInfo.name }}</text>
+      <text>邮箱：{{ userInfo.email }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      userInfo: null
+    }
+  },
+  onLoad() {
+    this.loadUserInfo()
+  },
+  methods: {
+    loadUserInfo() {
+      uni.getStorage({
+        key: 'userInfo',
+        success: (res) => {
+          this.userInfo = res.data
+        },
+        fail: () => {
+          uni.showToast({
+            title: '未登录',
+            icon: 'none'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+## 同步版本
+
+使用 `uni.getStorageSync` 进行同步获取：
+
+```javascript
+try {
+  const userInfo = uni.getStorageSync('userInfo')
+  if (userInfo) {
+    console.log('用户信息', userInfo)
+  } else {
+    console.log('数据不存在')
+  }
+} catch (err) {
+  console.error('获取失败', err)
+}
+```
+
+## 注意事项
+
+1. 如果 key 不存在，会触发 fail 回调
+2. 建议使用 try-catch 处理同步接口的错误
+3. 获取的数据类型与存储时一致
+4. 异步接口不会阻塞后续代码执行
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorage
+- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstoragesync
+- **设置存储**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstorage

.agents/bak-skills/uniappx-project/examples/api/storage/remove-storage.md

@@ -0,0 +1,160 @@
+# uni.removeStorage - 删除存储数据示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#removestorage
+
+## 概述
+
+`uni.removeStorage` 用于从本地缓存中异步移除指定 key。
+
+## 基础用法
+
+```javascript
+uni.removeStorage({
+  key: 'userInfo',
+  success: () => {
+    console.log('删除成功')
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 删除单个数据
+
+```javascript
+uni.removeStorage({
+  key: 'token',
+  success: () => {
+    console.log('Token 已删除')
+  },
+  fail: (err) => {
+    console.error('删除失败', err)
+  }
+})
+```
+
+### 示例 2: 退出登录时清除数据
+
+```javascript
+function logout() {
+  // 删除用户信息
+  uni.removeStorage({
+    key: 'userInfo',
+    success: () => {
+      console.log('用户信息已清除')
+    }
+  })
+  
+  // 删除 Token
+  uni.removeStorage({
+    key: 'token',
+    success: () => {
+      console.log('Token 已清除')
+      // 跳转到登录页
+      uni.reLaunch({
+        url: '/pages/login/login'
+      })
+    }
+  })
+}
+```
+
+### 示例 3: 批量删除
+
+```javascript
+const keysToRemove = ['userInfo', 'token', 'settings']
+
+keysToRemove.forEach(key => {
+  uni.removeStorage({
+    key: key,
+    success: () => {
+      console.log(`${key} 已删除`)
+    }
+  })
+})
+```
+
+### 示例 4: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="clearUserData">清除用户数据</button>
+    <button @click="clearAllData">清除所有数据</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    clearUserData() {
+      uni.removeStorage({
+        key: 'userInfo',
+        success: () => {
+          uni.showToast({
+            title: '用户数据已清除',
+            icon: 'success'
+          })
+        }
+      })
+    },
+    clearAllData() {
+      uni.clearStorage({
+        success: () => {
+          uni.showToast({
+            title: '所有数据已清除',
+            icon: 'success'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 同步版本
+
+```javascript
+try {
+  uni.removeStorageSync('userInfo')
+  console.log('删除成功')
+} catch (err) {
+  console.error('删除失败', err)
+}
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| key | String | 是 | 本地缓存中指定的 key |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 如果 key 不存在，不会报错
+2. 建议使用同步版本 `removeStorageSync` 性能更好
+3. 删除操作是异步的，需要等待 success 回调
+4. 退出登录时建议清除所有相关数据
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#removestorage
+- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#removestoragesync
+- **清除所有**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#clearstorage

.agents/bak-skills/uniappx-project/examples/api/storage/set-storage-sync.md

@@ -0,0 +1,196 @@
+# uni.setStorageSync - 同步设置存储数据示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstoragesync
+
+## 概述
+
+`uni.setStorageSync` 用于同步将数据存储在本地缓存中指定的 key 中。
+
+## 基础用法
+
+```javascript
+try {
+  uni.setStorageSync('key', 'value')
+  console.log('存储成功')
+} catch (err) {
+  console.error('存储失败', err)
+}
+```
+
+## 完整示例
+
+### 示例 1: 存储用户信息
+
+```javascript
+try {
+  const userInfo = {
+    name: 'John',
+    age: 30,
+    email: 'john@example.com'
+  }
+  uni.setStorageSync('userInfo', userInfo)
+  console.log('存储成功')
+} catch (err) {
+  console.error('存储失败', err)
+}
+```
+
+### 示例 2: 存储 Token
+
+```javascript
+function saveToken(token) {
+  try {
+    uni.setStorageSync('token', token)
+    return true
+  } catch (err) {
+    console.error('存储Token失败', err)
+    return false
+  }
+}
+
+// 使用
+if (saveToken('abc123')) {
+  console.log('Token已保存')
+}
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <input v-model="username" placeholder="用户名" />
+    <input v-model="email" placeholder="邮箱" />
+    <button @click="saveUserInfo">保存用户信息</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      email: ''
+    }
+  },
+  methods: {
+    saveUserInfo() {
+      try {
+        const userInfo = {
+          username: this.username,
+          email: this.email
+        }
+        uni.setStorageSync('userInfo', userInfo)
+        uni.showToast({
+          title: '保存成功',
+          icon: 'success'
+        })
+      } catch (err) {
+        uni.showToast({
+          title: '保存失败',
+          icon: 'none'
+        })
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 封装存储函数
+
+```javascript
+// utils/storage.js
+const storage = {
+  set(key, value) {
+    try {
+      uni.setStorageSync(key, value)
+      return true
+    } catch (err) {
+      console.error(`存储${key}失败`, err)
+      return false
+    }
+  },
+  
+  setString(key, value) {
+    return this.set(key, String(value))
+  },
+  
+  setNumber(key, value) {
+    return this.set(key, Number(value))
+  },
+  
+  setBoolean(key, value) {
+    return this.set(key, Boolean(value))
+  },
+  
+  setObject(key, value) {
+    return this.set(key, value)
+  }
+}
+
+// 使用
+storage.setString('token', 'abc123')
+storage.setNumber('count', 10)
+storage.setBoolean('isLogin', true)
+storage.setObject('userInfo', { name: 'John' })
+```
+
+### 示例 5: 批量存储
+
+```javascript
+function saveMultipleData(data) {
+  try {
+    Object.keys(data).forEach(key => {
+      uni.setStorageSync(key, data[key])
+    })
+    return true
+  } catch (err) {
+    console.error('批量存储失败', err)
+    return false
+  }
+}
+
+// 使用
+saveMultipleData({
+  token: 'abc123',
+  userInfo: { name: 'John' },
+  settings: { theme: 'dark' }
+})
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| key | String | 是 | 本地缓存中指定的 key |
+| data | Any | 是 | 需要存储的内容 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 同步接口会阻塞后续代码执行，性能比异步接口好
+2. 存储的数据类型与设置时一致
+3. 建议使用 try-catch 处理错误
+4. 单个 key 允许存储的最大数据长度为 1MB
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstoragesync
+- **异步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstorage
+- **获取存储**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstoragesync

.agents/bak-skills/uniappx-project/examples/api/storage/set-storage.md

@@ -0,0 +1,160 @@
+# uni.setStorage - 数据存储示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstorage
+
+## 概述
+
+`uni.setStorage` 用于将数据存储在本地缓存中指定的 key 中，异步接口。
+
+## 基础用法
+
+```javascript
+uni.setStorage({
+  key: 'userInfo',
+  data: {
+    name: 'John',
+    age: 30
+  },
+  success: () => {
+    console.log('存储成功')
+  },
+  fail: (err) => {
+    console.error('存储失败', err)
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 存储用户信息
+
+```javascript
+// 存储用户信息
+const userInfo = {
+  id: 1,
+  name: 'John Doe',
+  email: 'john@example.com',
+  avatar: 'https://example.com/avatar.jpg'
+}
+
+uni.setStorage({
+  key: 'userInfo',
+  data: userInfo,
+  success: () => {
+    uni.showToast({
+      title: '保存成功',
+      icon: 'success'
+    })
+  },
+  fail: (err) => {
+    uni.showToast({
+      title: '保存失败',
+      icon: 'none'
+    })
+  }
+})
+```
+
+### 示例 2: 存储字符串
+
+```javascript
+uni.setStorage({
+  key: 'token',
+  data: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
+  success: () => {
+    console.log('Token 已保存')
+  }
+})
+```
+
+### 示例 3: 存储数组
+
+```javascript
+const shoppingCart = [
+  { id: 1, name: '商品1', price: 99 },
+  { id: 2, name: '商品2', price: 199 }
+]
+
+uni.setStorage({
+  key: 'shoppingCart',
+  data: shoppingCart,
+  success: () => {
+    console.log('购物车已保存')
+  }
+})
+```
+
+### 示例 4: 封装存储函数
+
+```javascript
+// utils/storage.js
+const storage = {
+  set(key, data) {
+    return new Promise((resolve, reject) => {
+      uni.setStorage({
+        key: key,
+        data: data,
+        success: () => {
+          resolve()
+        },
+        fail: (err) => {
+          reject(err)
+        }
+      })
+    })
+  },
+  
+  get(key) {
+    return new Promise((resolve, reject) => {
+      uni.getStorage({
+        key: key,
+        success: (res) => {
+          resolve(res.data)
+        },
+        fail: (err) => {
+          reject(err)
+        }
+      })
+    })
+  }
+}
+
+// 使用
+storage.set('userInfo', { name: 'John' })
+  .then(() => {
+    console.log('存储成功')
+  })
+  .catch(err => {
+    console.error('存储失败', err)
+  })
+```
+
+## 同步版本
+
+使用 `uni.setStorageSync` 进行同步存储：
+
+```javascript
+try {
+  uni.setStorageSync('userInfo', {
+    name: 'John',
+    age: 30
+  })
+  console.log('存储成功')
+} catch (err) {
+  console.error('存储失败', err)
+}
+```
+
+## 注意事项
+
+1. 存储的数据会被持久化，除非手动删除或清除缓存
+2. 单个 key 允许存储的最大数据长度为 1MB
+3. 异步接口不会阻塞后续代码执行
+4. 建议使用 try-catch 处理同步接口的错误
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstorage
+- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstoragesync

.agents/bak-skills/uniappx-project/examples/api/ui/hide-loading.md

@@ -0,0 +1,189 @@
+# uni.hideLoading - 隐藏加载提示示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hideloading
+
+## 概述
+
+`uni.hideLoading` 用于隐藏加载提示框。
+
+## 基础用法
+
+```javascript
+uni.hideLoading()
+```
+
+## 完整示例
+
+### 示例 1: 基本使用
+
+```javascript
+// 显示加载
+uni.showLoading({
+  title: '加载中...'
+})
+
+// 隐藏加载
+setTimeout(() => {
+  uni.hideLoading()
+}, 2000)
+```
+
+### 示例 2: 网络请求中使用
+
+```javascript
+// 显示加载
+uni.showLoading({
+  title: '加载中...',
+  mask: true
+})
+
+uni.request({
+  url: 'https://api.example.com/data',
+  success: (res) => {
+    console.log('数据', res.data)
+  },
+  complete: () => {
+    // 请求完成后隐藏加载
+    uni.hideLoading()
+  }
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="loadData">加载数据</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    loadData() {
+      uni.showLoading({
+        title: '加载中...',
+        mask: true
+      })
+      
+      uni.request({
+        url: 'https://api.example.com/data',
+        success: (res) => {
+          console.log('数据', res.data)
+        },
+        fail: (err) => {
+          console.error('加载失败', err)
+        },
+        complete: () => {
+          // 无论成功失败都要隐藏加载
+          uni.hideLoading()
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 封装加载函数
+
+```javascript
+// utils/loading.js
+const loading = {
+  show(title = '加载中...') {
+    uni.showLoading({
+      title: title,
+      mask: true
+    })
+  },
+  
+  hide() {
+    uni.hideLoading()
+  },
+  
+  async withLoading(fn, title = '加载中...') {
+    this.show(title)
+    try {
+      const result = await fn()
+      return result
+    } finally {
+      this.hide()
+    }
+  }
+}
+
+// 使用
+loading.withLoading(async () => {
+  const data = await fetchData()
+  return data
+}, '加载数据中...')
+```
+
+### 示例 5: 确保隐藏加载
+
+```javascript
+function loadData() {
+  let loadingShown = false
+  
+  try {
+    uni.showLoading({
+      title: '加载中...',
+      mask: true
+    })
+    loadingShown = true
+    
+    // 执行加载逻辑
+    uni.request({
+      url: 'https://api.example.com/data',
+      success: (res) => {
+        console.log('数据', res.data)
+      },
+      complete: () => {
+        if (loadingShown) {
+          uni.hideLoading()
+          loadingShown = false
+        }
+      }
+    })
+  } catch (err) {
+    // 确保异常时也隐藏加载
+    if (loadingShown) {
+      uni.hideLoading()
+      loadingShown = false
+    }
+  }
+}
+```
+
+## 参数说明
+
+此 API 无需参数。
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 必须与 `uni.showLoading` 配对使用
+2. 建议在 `complete` 回调中调用，确保无论成功失败都会隐藏
+3. 多次调用 `showLoading` 后，只需调用一次 `hideLoading` 即可隐藏
+4. 建议使用 try-finally 确保异常时也能隐藏
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hideloading
+- **显示加载**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showloading

.agents/bak-skills/uniappx-project/examples/api/ui/hide-navigation-bar-loading.md

@@ -0,0 +1,140 @@
+# uni.hideNavigationBarLoading - 隐藏导航栏加载动画示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#hidenavigationbarloading
+
+## 概述
+
+`uni.hideNavigationBarLoading` 用于隐藏当前页面导航栏的加载动画。
+
+## 基础用法
+
+```javascript
+uni.hideNavigationBarLoading()
+```
+
+## 完整示例
+
+### 示例 1: 基本使用
+
+```javascript
+// 显示加载动画
+uni.showNavigationBarLoading()
+
+// 隐藏加载动画
+uni.hideNavigationBarLoading()
+```
+
+### 示例 2: 网络请求中使用
+
+```javascript
+// 显示加载动画
+uni.showNavigationBarLoading()
+
+uni.request({
+  url: 'https://api.example.com/data',
+  success: (res) => {
+    console.log('数据', res.data)
+  },
+  complete: () => {
+    // 请求完成后隐藏
+    uni.hideNavigationBarLoading()
+  }
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="loadData">加载数据</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    loadData() {
+      uni.showNavigationBarLoading()
+      
+      uni.request({
+        url: 'https://api.example.com/data',
+        success: (res) => {
+          console.log('数据', res.data)
+        },
+        fail: (err) => {
+          console.error('加载失败', err)
+        },
+        complete: () => {
+          // 无论成功失败都要隐藏
+          uni.hideNavigationBarLoading()
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 确保隐藏
+
+```javascript
+function loadData() {
+  let loadingShown = false
+  
+  try {
+    uni.showNavigationBarLoading()
+    loadingShown = true
+    
+    uni.request({
+      url: 'https://api.example.com/data',
+      success: (res) => {
+        console.log('数据', res.data)
+      },
+      complete: () => {
+        if (loadingShown) {
+          uni.hideNavigationBarLoading()
+          loadingShown = false
+        }
+      }
+    })
+  } catch (err) {
+    // 确保异常时也隐藏
+    if (loadingShown) {
+      uni.hideNavigationBarLoading()
+      loadingShown = false
+    }
+  }
+}
+```
+
+## 参数说明
+
+此 API 无需参数。
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 必须与 `uni.showNavigationBarLoading` 配对使用
+2. 建议在 `complete` 回调中调用，确保无论成功失败都会隐藏
+3. 多次调用 `showNavigationBarLoading` 后，只需调用一次 `hideNavigationBarLoading` 即可隐藏
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#hidenavigationbarloading
+- **显示加载**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#shownavigationbarloading

.agents/bak-skills/uniappx-project/examples/api/ui/hide-tab-bar-red-dot.md

@@ -0,0 +1,147 @@
+# uni.hideTabBarRedDot - 隐藏 TabBar 红点示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#hidetabbarreddot
+
+## 概述
+
+`uni.hideTabBarRedDot` 用于隐藏 tabBar 某一项的右上角的红点。
+
+## 基础用法
+
+```javascript
+uni.hideTabBarRedDot({
+  index: 0
+})
+```
+
+## 完整示例
+
+### 示例 1: 隐藏红点
+
+```javascript
+uni.hideTabBarRedDot({
+  index: 0, // tabBar 的哪一项，从左边算起
+  success: () => {
+    console.log('隐藏成功')
+  },
+  fail: (err) => {
+    console.error('隐藏失败', err)
+  }
+})
+```
+
+### 示例 2: 阅读消息后隐藏
+
+```javascript
+function readMessage(messageId) {
+  // 标记消息为已读
+  uni.request({
+    url: `https://api.example.com/messages/${messageId}/read`,
+    method: 'POST',
+    success: () => {
+      // 隐藏消息红点
+      uni.hideTabBarRedDot({
+        index: 1 // 消息页面的索引
+      })
+    }
+  })
+}
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="hideRedDot">隐藏红点</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    hideRedDot() {
+      uni.hideTabBarRedDot({
+        index: 0,
+        success: () => {
+          uni.showToast({
+            title: '已隐藏',
+            icon: 'success'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 进入页面时隐藏
+
+```vue
+<template>
+  <view class="container">
+    <text>消息列表</text>
+  </view>
+</template>
+
+<script>
+export default {
+  onLoad() {
+    // 进入消息页面时隐藏红点
+    uni.hideTabBarRedDot({
+      index: 1 // 当前页面的索引
+    })
+  }
+}
+</script>
+```
+
+### 示例 5: 清除所有红点
+
+```javascript
+function clearAllRedDots(tabBarCount) {
+  for (let i = 0; i < tabBarCount; i++) {
+    uni.hideTabBarRedDot({
+      index: i
+    })
+  }
+}
+
+// 使用（假设有4个tabBar）
+clearAllRedDots(4)
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| index | Number | 是 | tabBar 的哪一项，从左边算起 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `index` 从 0 开始，对应 `pages.json` 中 tabBar 的配置顺序
+2. 如果该 tabBar 项没有红点，调用此 API 不会报错
+3. 建议在用户查看相关内容后隐藏红点
+4. 与 `showTabBarRedDot` 配合使用
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#hidetabbarreddot
+- **显示红点**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#showtabbarreddot

.agents/bak-skills/uniappx-project/examples/api/ui/hide-toast.md

@@ -0,0 +1,153 @@
+# uni.hideToast - 隐藏消息提示示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hidetoast
+
+## 概述
+
+`uni.hideToast` 用于隐藏消息提示框。
+
+## 基础用法
+
+```javascript
+uni.hideToast()
+```
+
+## 完整示例
+
+### 示例 1: 基本使用
+
+```javascript
+// 显示提示
+uni.showToast({
+  title: '操作成功',
+  icon: 'success'
+})
+
+// 提前隐藏
+setTimeout(() => {
+  uni.hideToast()
+}, 1000)
+```
+
+### 示例 2: 手动控制提示显示时间
+
+```javascript
+function showCustomToast(title, duration = 2000) {
+  uni.showToast({
+    title: title,
+    icon: 'none',
+    duration: duration
+  })
+  
+  // 如果需要提前隐藏
+  setTimeout(() => {
+    uni.hideToast()
+  }, duration - 500)
+}
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="showMessage">显示消息</button>
+    <button @click="hideMessage">隐藏消息</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    showMessage() {
+      uni.showToast({
+        title: '这是一条消息',
+        icon: 'none',
+        duration: 5000
+      })
+    },
+    hideMessage() {
+      uni.hideToast()
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 替换提示内容
+
+```javascript
+function showReplacingToast(messages) {
+  let currentIndex = 0
+  
+  const showNext = () => {
+    if (currentIndex < messages.length) {
+      uni.showToast({
+        title: messages[currentIndex],
+        icon: 'none',
+        duration: 2000
+      })
+      currentIndex++
+      
+      setTimeout(() => {
+        uni.hideToast()
+        setTimeout(showNext, 100)
+      }, 2000)
+    }
+  }
+  
+  showNext()
+}
+
+// 使用
+showReplacingToast(['消息1', '消息2', '消息3'])
+```
+
+### 示例 5: 确保隐藏提示
+
+```javascript
+function showTemporaryToast(title) {
+  uni.showToast({
+    title: title,
+    icon: 'none',
+    duration: 3000
+  })
+  
+  // 3秒后自动隐藏
+  setTimeout(() => {
+    uni.hideToast()
+  }, 3000)
+}
+```
+
+## 参数说明
+
+此 API 无需参数。
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 用于提前隐藏通过 `uni.showToast` 显示的提示
+2. 如果不调用，提示会在 `duration` 时间后自动消失
+3. 建议在需要立即隐藏提示时使用
+4. 通常不需要手动调用，除非需要提前隐藏
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hidetoast
+- **显示提示**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showtoast

.agents/bak-skills/uniappx-project/examples/api/ui/remove-tab-bar-badge.md

@@ -0,0 +1,171 @@
+# uni.removeTabBarBadge - 移除 TabBar 徽标示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#removetabbarbadge
+
+## 概述
+
+`uni.removeTabBarBadge` 用于移除 tabBar 某一项右上角的文本。
+
+## 基础用法
+
+```javascript
+uni.removeTabBarBadge({
+  index: 0
+})
+```
+
+## 完整示例
+
+### 示例 1: 清除徽标
+
+```javascript
+uni.removeTabBarBadge({
+  index: 0, // tabBar 的哪一项，从左边算起
+  success: () => {
+    console.log('清除成功')
+  },
+  fail: (err) => {
+    console.error('清除失败', err)
+  }
+})
+```
+
+### 示例 2: 清除未读消息徽标
+
+```javascript
+function clearUnreadBadge() {
+  uni.removeTabBarBadge({
+    index: 1, // 消息页面的索引
+    success: () => {
+      console.log('未读消息徽标已清除')
+    }
+  })
+}
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="clearBadge">清除徽标</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    clearBadge() {
+      uni.removeTabBarBadge({
+        index: 0,
+        success: () => {
+          uni.showToast({
+            title: '已清除',
+            icon: 'success'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 阅读消息后清除
+
+```vue
+<template>
+  <view class="container">
+    <view 
+      v-for="message in messages" 
+      :key="message.id"
+      class="message-item"
+      @click="readMessage(message)"
+    >
+      <text>{{ message.content }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      messages: [
+        { id: 1, content: '消息1', read: false },
+        { id: 2, content: '消息2', read: false }
+      ]
+    }
+  },
+  methods: {
+    readMessage(message) {
+      message.read = true
+      
+      // 如果所有消息都已读，清除徽标
+      const allRead = this.messages.every(msg => msg.read)
+      if (allRead) {
+        uni.removeTabBarBadge({
+          index: 1 // 消息页面的索引
+        })
+      } else {
+        // 更新未读数
+        const unreadCount = this.messages.filter(msg => !msg.read).length
+        uni.setTabBarBadge({
+          index: 1,
+          text: String(unreadCount)
+        })
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 清除所有徽标
+
+```javascript
+function clearAllBadges(tabBarCount) {
+  for (let i = 0; i < tabBarCount; i++) {
+    uni.removeTabBarBadge({
+      index: i
+    })
+  }
+}
+
+// 使用（假设有4个tabBar）
+clearAllBadges(4)
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| index | Number | 是 | tabBar 的哪一项，从左边算起 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `index` 从 0 开始，对应 `pages.json` 中 tabBar 的配置顺序
+2. 如果该 tabBar 项没有徽标，调用此 API 不会报错
+3. 建议在消息已读或数量为 0 时清除徽标
+4. 与 `setTabBarBadge` 配合使用
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#removetabbarbadge
+- **设置徽标**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarbadge

.agents/bak-skills/uniappx-project/examples/api/ui/set-navigation-bar-color.md

@@ -0,0 +1,180 @@
+# uni.setNavigationBarColor - 设置导航栏颜色示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbarcolor
+
+## 概述
+
+`uni.setNavigationBarColor` 用于设置页面导航栏颜色。
+
+## 基础用法
+
+```javascript
+uni.setNavigationBarColor({
+  frontColor: '#ffffff',
+  backgroundColor: '#007aff'
+})
+```
+
+## 完整示例
+
+### 示例 1: 设置导航栏颜色
+
+```javascript
+uni.setNavigationBarColor({
+  frontColor: '#ffffff', // 前景颜色，包括按钮、标题、状态栏的颜色
+  backgroundColor: '#007aff', // 背景颜色
+  success: () => {
+    console.log('设置成功')
+  }
+})
+```
+
+### 示例 2: 深色主题
+
+```javascript
+uni.setNavigationBarColor({
+  frontColor: '#ffffff',
+  backgroundColor: '#000000',
+  animation: {
+    duration: 400,
+    timingFunc: 'easeIn'
+  }
+})
+```
+
+### 示例 3: 浅色主题
+
+```javascript
+uni.setNavigationBarColor({
+  frontColor: '#000000',
+  backgroundColor: '#ffffff',
+  animation: {
+    duration: 400,
+    timingFunc: 'easeIn'
+  }
+})
+```
+
+### 示例 4: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="setDarkTheme">深色主题</button>
+    <button @click="setLightTheme">浅色主题</button>
+    <button @click="setCustomColor">自定义颜色</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    setDarkTheme() {
+      uni.setNavigationBarColor({
+        frontColor: '#ffffff',
+        backgroundColor: '#000000'
+      })
+    },
+    setLightTheme() {
+      uni.setNavigationBarColor({
+        frontColor: '#000000',
+        backgroundColor: '#ffffff'
+      })
+    },
+    setCustomColor() {
+      uni.setNavigationBarColor({
+        frontColor: '#ffffff',
+        backgroundColor: '#ff3b30',
+        animation: {
+          duration: 400,
+          timingFunc: 'easeIn'
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 根据内容动态设置
+
+```vue
+<template>
+  <view class="container">
+    <view v-if="article">
+      <text>{{ article.content }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      article: null
+    }
+  },
+  onLoad(options) {
+    this.loadArticle(options.id)
+  },
+  methods: {
+    loadArticle(id) {
+      uni.request({
+        url: `https://api.example.com/article/${id}`,
+        success: (res) => {
+          this.article = res.data
+          // 根据文章主题色设置导航栏
+          if (res.data.theme === 'dark') {
+            uni.setNavigationBarColor({
+              frontColor: '#ffffff',
+              backgroundColor: '#000000'
+            })
+          } else {
+            uni.setNavigationBarColor({
+              frontColor: '#000000',
+              backgroundColor: '#ffffff'
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| frontColor | String | 是 | 前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 |
+| backgroundColor | String | 是 | 背景颜色值，有效值为十六进制颜色 |
+| animation | Object | 否 | 动画效果 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `frontColor` 仅支持 `#ffffff` 和 `#000000`
+2. `backgroundColor` 支持任意十六进制颜色
+3. 可以通过 `animation` 设置颜色切换动画
+4. 建议与页面主题色保持一致
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbarcolor
+- **设置标题**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbartitle

.agents/bak-skills/uniappx-project/examples/api/ui/set-navigation-bar-title.md

@@ -0,0 +1,191 @@
+# uni.setNavigationBarTitle - 设置导航栏标题示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbartitle
+
+## 概述
+
+`uni.setNavigationBarTitle` 用于设置当前页面导航栏标题。
+
+## 基础用法
+
+```javascript
+uni.setNavigationBarTitle({
+  title: '新标题'
+})
+```
+
+## 完整示例
+
+### 示例 1: 设置标题
+
+```javascript
+uni.setNavigationBarTitle({
+  title: '我的页面',
+  success: () => {
+    console.log('设置成功')
+  },
+  fail: (err) => {
+    console.error('设置失败', err)
+  }
+})
+```
+
+### 示例 2: 动态设置标题
+
+```vue
+<template>
+  <view class="container">
+    <input v-model="pageTitle" placeholder="输入页面标题" />
+    <button @click="updateTitle">更新标题</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pageTitle: ''
+    }
+  },
+  methods: {
+    updateTitle() {
+      if (this.pageTitle) {
+        uni.setNavigationBarTitle({
+          title: this.pageTitle
+        })
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 在页面生命周期中设置
+
+```vue
+<template>
+  <view class="container">
+    <text>页面内容</text>
+  </view>
+</template>
+
+<script>
+export default {
+  onLoad(options) {
+    // 根据参数设置标题
+    if (options.type === 'detail') {
+      uni.setNavigationBarTitle({
+        title: '详情页'
+      })
+    } else {
+      uni.setNavigationBarTitle({
+        title: '列表页'
+      })
+    }
+  },
+  onReady() {
+    // 也可以在这里设置
+    uni.setNavigationBarTitle({
+      title: '页面标题'
+    })
+  }
+}
+</script>
+```
+
+### 示例 4: 根据数据设置标题
+
+```vue
+<template>
+  <view class="container">
+    <view v-if="article">
+      <text>{{ article.title }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      article: null
+    }
+  },
+  onLoad(options) {
+    this.loadArticle(options.id)
+  },
+  methods: {
+    loadArticle(id) {
+      uni.request({
+        url: `https://api.example.com/article/${id}`,
+        success: (res) => {
+          this.article = res.data
+          // 使用文章标题作为页面标题
+          uni.setNavigationBarTitle({
+            title: res.data.title
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 封装设置标题函数
+
+```javascript
+// utils/navigation.js
+const navigation = {
+  setTitle(title) {
+    uni.setNavigationBarTitle({
+      title: title
+    })
+  },
+  
+  setTitleWithSubtitle(mainTitle, subtitle) {
+    const fullTitle = subtitle ? `${mainTitle} - ${subtitle}` : mainTitle
+    uni.setNavigationBarTitle({
+      title: fullTitle
+    })
+  }
+}
+
+// 使用
+navigation.setTitle('我的页面')
+navigation.setTitleWithSubtitle('商品', '详情')
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| title | String | 是 | 页面标题 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 标题长度建议不超过 10 个字符
+2. 可以在 `onLoad` 或 `onReady` 中设置
+3. 设置后立即生效
+4. 建议根据页面内容动态设置标题
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbartitle
+- **设置导航栏颜色**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbarcolor

.agents/bak-skills/uniappx-project/examples/api/ui/set-tab-bar-badge.md

@@ -0,0 +1,205 @@
+# uni.setTabBarBadge - 设置 TabBar 徽标示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarbadge
+
+## 概述
+
+`uni.setTabBarBadge` 用于为 tabBar 某一项的右上角添加文本。
+
+## 基础用法
+
+```javascript
+uni.setTabBarBadge({
+  index: 0,
+  text: '1'
+})
+```
+
+## 完整示例
+
+### 示例 1: 设置徽标
+
+```javascript
+uni.setTabBarBadge({
+  index: 0, // tabBar 的哪一项，从左边算起
+  text: '5' // 显示的文本，超过 3 个字符则显示成 "..."
+})
+```
+
+### 示例 2: 显示未读消息数
+
+```javascript
+function updateUnreadCount(count) {
+  if (count > 0) {
+    const text = count > 99 ? '99+' : String(count)
+    uni.setTabBarBadge({
+      index: 1, // 消息页面的索引
+      text: text
+    })
+  } else {
+    // 清除徽标
+    uni.removeTabBarBadge({
+      index: 1
+    })
+  }
+}
+
+// 使用
+updateUnreadCount(5) // 显示 "5"
+updateUnreadCount(100) // 显示 "99+"
+updateUnreadCount(0) // 清除徽标
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="setBadge">设置徽标</button>
+    <button @click="removeBadge">清除徽标</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    setBadge() {
+      uni.setTabBarBadge({
+        index: 0,
+        text: '5'
+      })
+      uni.showToast({
+        title: '已设置徽标',
+        icon: 'success'
+      })
+    },
+    removeBadge() {
+      uni.removeTabBarBadge({
+        index: 0
+      })
+      uni.showToast({
+        title: '已清除徽标',
+        icon: 'success'
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 实时更新未读消息
+
+```vue
+<template>
+  <view class="container">
+    <text>未读消息：{{ unreadCount }}</text>
+    <button @click="refreshUnreadCount">刷新未读数</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      unreadCount: 0
+    }
+  },
+  onLoad() {
+    this.loadUnreadCount()
+    // 定时刷新
+    setInterval(() => {
+      this.loadUnreadCount()
+    }, 30000) // 每30秒刷新一次
+  },
+  methods: {
+    loadUnreadCount() {
+      uni.request({
+        url: 'https://api.example.com/unread-count',
+        success: (res) => {
+          this.unreadCount = res.data.count
+          this.updateTabBarBadge(res.data.count)
+        }
+      })
+    },
+    updateTabBarBadge(count) {
+      if (count > 0) {
+        const text = count > 99 ? '99+' : String(count)
+        uni.setTabBarBadge({
+          index: 1, // 消息页面的索引
+          text: text
+        })
+      } else {
+        uni.removeTabBarBadge({
+          index: 1
+        })
+      }
+    },
+    refreshUnreadCount() {
+      this.loadUnreadCount()
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 多个 TabBar 徽标
+
+```javascript
+function updateAllTabBarBadges(badges) {
+  // badges: [{ index: 0, text: '5' }, { index: 1, text: '10' }]
+  badges.forEach(badge => {
+    if (badge.text && badge.text !== '0') {
+      uni.setTabBarBadge({
+        index: badge.index,
+        text: badge.text
+      })
+    } else {
+      uni.removeTabBarBadge({
+        index: badge.index
+      })
+    }
+  })
+}
+
+// 使用
+updateAllTabBarBadges([
+  { index: 0, text: '5' },
+  { index: 1, text: '10' },
+  { index: 2, text: '0' } // 清除
+])
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| index | Number | 是 | tabBar 的哪一项，从左边算起 |
+| text | String | 是 | 显示的文本，超过 3 个字符则显示成 "..." |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `index` 从 0 开始，对应 `pages.json` 中 tabBar 的配置顺序
+2. `text` 超过 3 个字符会显示成 "..."
+3. 建议数字超过 99 时显示 "99+"
+4. 使用 `removeTabBarBadge` 可以清除徽标
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarbadge
+- **清除徽标**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#removetabbarbadge

.agents/bak-skills/uniappx-project/examples/api/ui/set-tab-bar-style.md

@@ -0,0 +1,168 @@
+# uni.setTabBarStyle - 设置 TabBar 样式示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarstyle
+
+## 概述
+
+`uni.setTabBarStyle` 用于动态设置 tabBar 的整体样式。
+
+## 基础用法
+
+```javascript
+uni.setTabBarStyle({
+  color: '#7A7E83',
+  selectedColor: '#3cc51f',
+  backgroundColor: '#ffffff'
+})
+```
+
+## 完整示例
+
+### 示例 1: 设置 TabBar 样式
+
+```javascript
+uni.setTabBarStyle({
+  color: '#7A7E83', // 未选中时的文字颜色
+  selectedColor: '#3cc51f', // 选中时的文字颜色
+  backgroundColor: '#ffffff', // 背景颜色
+  borderStyle: 'black', // 边框颜色
+  success: () => {
+    console.log('设置成功')
+  }
+})
+```
+
+### 示例 2: 深色主题
+
+```javascript
+function setDarkTheme() {
+  uni.setTabBarStyle({
+    color: '#999999',
+    selectedColor: '#ffffff',
+    backgroundColor: '#000000',
+    borderStyle: 'white'
+  })
+}
+```
+
+### 示例 3: 浅色主题
+
+```javascript
+function setLightTheme() {
+  uni.setTabBarStyle({
+    color: '#7A7E83',
+    selectedColor: '#007aff',
+    backgroundColor: '#ffffff',
+    borderStyle: 'black'
+  })
+}
+```
+
+### 示例 4: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="setDarkTheme">深色主题</button>
+    <button @click="setLightTheme">浅色主题</button>
+    <button @click="setCustomTheme">自定义主题</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    setDarkTheme() {
+      uni.setTabBarStyle({
+        color: '#999999',
+        selectedColor: '#ffffff',
+        backgroundColor: '#000000',
+        borderStyle: 'white'
+      })
+    },
+    setLightTheme() {
+      uni.setTabBarStyle({
+        color: '#7A7E83',
+        selectedColor: '#007aff',
+        backgroundColor: '#ffffff',
+        borderStyle: 'black'
+      })
+    },
+    setCustomTheme() {
+      uni.setTabBarStyle({
+        color: '#666666',
+        selectedColor: '#ff3b30',
+        backgroundColor: '#f5f5f5',
+        borderStyle: 'black'
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 根据系统主题设置
+
+```javascript
+function setTabBarThemeBySystem() {
+  uni.getSystemInfo({
+    success: (res) => {
+      // 根据系统主题设置（需要自己判断）
+      const isDark = res.theme === 'dark' // 某些平台支持
+      
+      if (isDark) {
+        uni.setTabBarStyle({
+          color: '#999999',
+          selectedColor: '#ffffff',
+          backgroundColor: '#000000',
+          borderStyle: 'white'
+        })
+      } else {
+        uni.setTabBarStyle({
+          color: '#7A7E83',
+          selectedColor: '#007aff',
+          backgroundColor: '#ffffff',
+          borderStyle: 'black'
+        })
+      }
+    }
+  })
+}
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| color | String | 否 | tab 上的文字默认颜色 |
+| selectedColor | String | 否 | tab 上的文字选中时的颜色 |
+| backgroundColor | String | 否 | tab 的背景色 |
+| borderStyle | String | 否 | tabbar 上边框的颜色，可选值：black、white |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 设置后立即生效
+2. `color` 和 `selectedColor` 建议使用对比度高的颜色
+3. `borderStyle` 可选值为 `black` 或 `white`
+4. 建议与页面主题色保持一致
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarstyle
+- **设置 TabBar 项**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbaritem

.agents/bak-skills/uniappx-project/examples/api/ui/show-action-sheet.md

@@ -0,0 +1,217 @@
+# uni.showActionSheet - 操作菜单示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showactionsheet
+
+## 概述
+
+`uni.showActionSheet` 用于显示操作菜单，从底部弹出选择项。
+
+## 基础用法
+
+```javascript
+uni.showActionSheet({
+  itemList: ['选项1', '选项2', '选项3'],
+  success: (res) => {
+    console.log('选择了第', res.tapIndex, '个选项')
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 基本操作菜单
+
+```javascript
+uni.showActionSheet({
+  itemList: ['拍照', '从相册选择', '取消'],
+  success: (res) => {
+    if (res.tapIndex === 0) {
+      // 拍照
+      console.log('选择拍照')
+    } else if (res.tapIndex === 1) {
+      // 从相册选择
+      console.log('从相册选择')
+    }
+  }
+})
+```
+
+### 示例 2: 图片选择
+
+```javascript
+uni.showActionSheet({
+  itemList: ['拍照', '从相册选择'],
+  success: (res) => {
+    if (res.tapIndex === 0) {
+      // 拍照
+      uni.chooseImage({
+        count: 1,
+        sourceType: ['camera'],
+        success: (imageRes) => {
+          console.log('拍照成功', imageRes.tempFilePaths)
+        }
+      })
+    } else if (res.tapIndex === 1) {
+      // 从相册选择
+      uni.chooseImage({
+        count: 1,
+        sourceType: ['album'],
+        success: (imageRes) => {
+          console.log('选择成功', imageRes.tempFilePaths)
+        }
+      })
+    }
+  }
+})
+```
+
+### 示例 3: 分享功能
+
+```javascript
+uni.showActionSheet({
+  itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
+  success: (res) => {
+    switch (res.tapIndex) {
+      case 0:
+        // 分享到微信
+        uni.share({
+          provider: 'weixin',
+          scene: 'WXSceneSession'
+        })
+        break
+      case 1:
+        // 分享到朋友圈
+        uni.share({
+          provider: 'weixin',
+          scene: 'WXSceneTimeline'
+        })
+        break
+      case 2:
+        // 复制链接
+        uni.setClipboardData({
+          data: 'https://example.com',
+          success: () => {
+            uni.showToast({
+              title: '链接已复制',
+              icon: 'success'
+            })
+          }
+        })
+        break
+    }
+  }
+})
+```
+
+### 示例 4: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="showMoreOptions">更多操作</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    showMoreOptions() {
+      uni.showActionSheet({
+        itemList: ['编辑', '删除', '分享', '举报'],
+        success: (res) => {
+          switch (res.tapIndex) {
+            case 0:
+              this.handleEdit()
+              break
+            case 1:
+              this.handleDelete()
+              break
+            case 2:
+              this.handleShare()
+              break
+            case 3:
+              this.handleReport()
+              break
+          }
+        }
+      })
+    },
+    handleEdit() {
+      console.log('编辑')
+    },
+    handleDelete() {
+      uni.showModal({
+        title: '提示',
+        content: '确定要删除吗？',
+        success: (res) => {
+          if (res.confirm) {
+            console.log('删除')
+          }
+        }
+      })
+    },
+    handleShare() {
+      console.log('分享')
+    },
+    handleReport() {
+      console.log('举报')
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 带取消按钮
+
+```javascript
+uni.showActionSheet({
+  itemList: ['选项1', '选项2', '选项3'],
+  success: (res) => {
+    console.log('选择了', res.tapIndex)
+  },
+  fail: (res) => {
+    console.log('取消选择')
+  }
+})
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| itemList | Array | 是 | 按钮的文字数组 |
+| itemColor | String | 否 | 按钮的文字颜色 |
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| tapIndex | Number | 用户点击的按钮序号，从上到下的顺序，从0开始 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `itemList` 数组最多支持 6 个选项
+2. 用户点击取消或遮罩层会触发 fail 回调
+3. `tapIndex` 从 0 开始，对应 `itemList` 的索引
+4. 建议将"取消"选项放在最后
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showactionsheet
+- **模态弹窗**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showmodal

.agents/bak-skills/uniappx-project/examples/api/ui/show-loading.md

@@ -0,0 +1,189 @@
+# uni.showLoading - 加载提示示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showloading
+
+## 概述
+
+`uni.showLoading` 用于显示加载提示框，常用于异步操作时显示加载状态。
+
+## 基础用法
+
+```javascript
+uni.showLoading({
+  title: '加载中...'
+})
+```
+
+## 完整示例
+
+### 示例 1: 基本加载提示
+
+```javascript
+uni.showLoading({
+  title: '加载中...',
+  mask: true
+})
+
+// 操作完成后隐藏
+setTimeout(() => {
+  uni.hideLoading()
+}, 2000)
+```
+
+### 示例 2: 网络请求时显示加载
+
+```javascript
+uni.showLoading({
+  title: '加载中...',
+  mask: true
+})
+
+uni.request({
+  url: 'https://api.example.com/data',
+  success: (res) => {
+    console.log('数据', res.data)
+  },
+  complete: () => {
+    uni.hideLoading()
+  }
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="loadData">加载数据</button>
+    <view v-if="data">{{ data }}</view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      data: null
+    }
+  },
+  methods: {
+    loadData() {
+      uni.showLoading({
+        title: '加载中...',
+        mask: true
+      })
+      
+      // 模拟请求
+      setTimeout(() => {
+        this.data = '数据加载完成'
+        uni.hideLoading()
+        uni.showToast({
+          title: '加载成功',
+          icon: 'success'
+        })
+      }, 2000)
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 封装加载函数
+
+```javascript
+// utils/loading.js
+const loading = {
+  show(title = '加载中...') {
+    uni.showLoading({
+      title: title,
+      mask: true
+    })
+  },
+  
+  hide() {
+    uni.hideLoading()
+  },
+  
+  async withLoading(fn, title = '加载中...') {
+    this.show(title)
+    try {
+      const result = await fn()
+      return result
+    } finally {
+      this.hide()
+    }
+  }
+}
+
+// 使用
+loading.withLoading(async () => {
+  const data = await fetchData()
+  return data
+}, '加载数据中...')
+```
+
+### 示例 5: 配合请求使用
+
+```javascript
+// 显示加载
+uni.showLoading({
+  title: '提交中...',
+  mask: true
+})
+
+// 提交数据
+uni.request({
+  url: 'https://api.example.com/submit',
+  method: 'POST',
+  data: { name: 'test' },
+  success: (res) => {
+    uni.hideLoading()
+    uni.showToast({
+      title: '提交成功',
+      icon: 'success'
+    })
+  },
+  fail: (err) => {
+    uni.hideLoading()
+    uni.showToast({
+      title: '提交失败',
+      icon: 'none'
+    })
+  }
+})
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| title | String | 是 | 提示的内容 |
+| mask | Boolean | 否 | 是否显示透明蒙层，防止触摸穿透 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 必须调用 `uni.hideLoading()` 才能关闭加载提示
+2. `mask: true` 可以防止用户在加载时操作页面
+3. 建议在异步操作的开始显示，在完成时隐藏
+4. 不要在 `success` 回调中忘记调用 `hideLoading`
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showloading
+- **隐藏加载**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hideloading

.agents/bak-skills/uniappx-project/examples/api/ui/show-modal.md

@@ -0,0 +1,226 @@
+# uni.showModal - 模态弹窗示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showmodal
+
+## 概述
+
+`uni.showModal` 用于显示模态弹窗，常用于确认操作。
+
+## 基础用法
+
+```javascript
+uni.showModal({
+  title: '提示',
+  content: '确定要删除吗？',
+  success: (res) => {
+    if (res.confirm) {
+      console.log('用户点击确定')
+    } else if (res.cancel) {
+      console.log('用户点击取消')
+    }
+  }
+})
+```
+
+## 完整示例
+
+### 示例 1: 确认删除
+
+```javascript
+uni.showModal({
+  title: '提示',
+  content: '确定要删除这条记录吗？',
+  confirmText: '删除',
+  cancelText: '取消',
+  success: (res) => {
+    if (res.confirm) {
+      // 执行删除操作
+      console.log('确认删除')
+    }
+  }
+})
+```
+
+### 示例 2: 自定义按钮文字
+
+```javascript
+uni.showModal({
+  title: '提示',
+  content: '确定要退出登录吗？',
+  confirmText: '退出',
+  cancelText: '取消',
+  confirmColor: '#ff3b30',
+  success: (res) => {
+    if (res.confirm) {
+      // 退出登录
+      uni.removeStorageSync('token')
+      uni.reLaunch({
+        url: '/pages/login/login'
+      })
+    }
+  }
+})
+```
+
+### 示例 3: 只显示确定按钮
+
+```javascript
+uni.showModal({
+  title: '提示',
+  content: '操作成功',
+  showCancel: false,
+  success: (res) => {
+    if (res.confirm) {
+      console.log('用户点击确定')
+    }
+  }
+})
+```
+
+### 示例 4: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="handleDelete">删除记录</button>
+    <button @click="handleLogout">退出登录</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleDelete() {
+      uni.showModal({
+        title: '确认删除',
+        content: '删除后无法恢复，确定要删除吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#ff3b30',
+        success: (res) => {
+          if (res.confirm) {
+            // 执行删除
+            this.deleteRecord()
+          }
+        }
+      })
+    },
+    handleLogout() {
+      uni.showModal({
+        title: '提示',
+        content: '确定要退出登录吗？',
+        success: (res) => {
+          if (res.confirm) {
+            uni.removeStorageSync('token')
+            uni.reLaunch({
+              url: '/pages/login/login'
+            })
+          }
+        }
+      })
+    },
+    deleteRecord() {
+      // 删除逻辑
+      uni.showToast({
+        title: '删除成功',
+        icon: 'success'
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 封装确认函数
+
+```javascript
+// utils/modal.js
+const modal = {
+  confirm(title, content) {
+    return new Promise((resolve, reject) => {
+      uni.showModal({
+        title: title,
+        content: content,
+        success: (res) => {
+          if (res.confirm) {
+            resolve(true)
+          } else {
+            resolve(false)
+          }
+        },
+        fail: (err) => {
+          reject(err)
+        }
+      })
+    })
+  },
+  
+  alert(title, content) {
+    return new Promise((resolve) => {
+      uni.showModal({
+        title: title,
+        content: content,
+        showCancel: false,
+        success: () => {
+          resolve()
+        }
+      })
+    })
+  }
+}
+
+// 使用
+const result = await modal.confirm('提示', '确定要删除吗？')
+if (result) {
+  console.log('用户确认')
+} else {
+  console.log('用户取消')
+}
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| title | String | 否 | 提示的标题 |
+| content | String | 否 | 提示的内容 |
+| showCancel | Boolean | 否 | 是否显示取消按钮，默认 true |
+| cancelText | String | 否 | 取消按钮的文字，默认"取消" |
+| cancelColor | String | 否 | 取消按钮的文字颜色 |
+| confirmText | String | 否 | 确认按钮的文字，默认"确定" |
+| confirmColor | String | 否 | 确认按钮的文字颜色 |
+
+## 返回值
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| confirm | Boolean | 为 true 时，表示用户点击了确定按钮 |
+| cancel | Boolean | 为 true 时，表示用户点击了取消按钮 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `title` 和 `content` 至少需要提供一个
+2. 确认和取消按钮的文字可以自定义
+3. 可以通过 `showCancel: false` 只显示确定按钮
+4. 建议用于重要的确认操作
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showmodal
+- **消息提示**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showtoast

.agents/bak-skills/uniappx-project/examples/api/ui/show-navigation-bar-loading.md

@@ -0,0 +1,194 @@
+# uni.showNavigationBarLoading - 显示导航栏加载动画示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#shownavigationbarloading
+
+## 概述
+
+`uni.showNavigationBarLoading` 用于在当前页面导航栏显示加载动画。
+
+## 基础用法
+
+```javascript
+uni.showNavigationBarLoading()
+```
+
+## 完整示例
+
+### 示例 1: 基本使用
+
+```javascript
+// 显示加载动画
+uni.showNavigationBarLoading()
+
+// 隐藏加载动画
+setTimeout(() => {
+  uni.hideNavigationBarLoading()
+}, 2000)
+```
+
+### 示例 2: 网络请求时显示
+
+```javascript
+// 显示加载动画
+uni.showNavigationBarLoading()
+
+uni.request({
+  url: 'https://api.example.com/data',
+  success: (res) => {
+    console.log('数据', res.data)
+  },
+  complete: () => {
+    // 请求完成后隐藏
+    uni.hideNavigationBarLoading()
+  }
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="loadData">加载数据</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    loadData() {
+      // 显示导航栏加载动画
+      uni.showNavigationBarLoading()
+      
+      uni.request({
+        url: 'https://api.example.com/data',
+        success: (res) => {
+          console.log('数据', res.data)
+        },
+        fail: (err) => {
+          console.error('加载失败', err)
+        },
+        complete: () => {
+          // 无论成功失败都要隐藏
+          uni.hideNavigationBarLoading()
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 封装加载函数
+
+```javascript
+// utils/loading.js
+const loading = {
+  showNavBar() {
+    uni.showNavigationBarLoading()
+  },
+  
+  hideNavBar() {
+    uni.hideNavigationBarLoading()
+  },
+  
+  async withNavBarLoading(fn) {
+    this.showNavBar()
+    try {
+      const result = await fn()
+      return result
+    } finally {
+      this.hideNavBar()
+    }
+  }
+}
+
+// 使用
+loading.withNavBarLoading(async () => {
+  const data = await fetchData()
+  return data
+})
+```
+
+### 示例 5: 页面刷新时显示
+
+```vue
+<template>
+  <view class="container">
+    <button @click="refresh">刷新</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    refresh() {
+      // 显示导航栏加载动画
+      uni.showNavigationBarLoading()
+      
+      // 模拟刷新
+      setTimeout(() => {
+        uni.hideNavigationBarLoading()
+        uni.showToast({
+          title: '刷新成功',
+          icon: 'success'
+        })
+      }, 2000)
+    }
+  },
+  onPullDownRefresh() {
+    // 下拉刷新时显示
+    uni.showNavigationBarLoading()
+    
+    // 刷新数据
+    this.loadData()
+  },
+  methods: {
+    loadData() {
+      uni.request({
+        url: 'https://api.example.com/data',
+        success: (res) => {
+          console.log('数据', res.data)
+        },
+        complete: () => {
+          uni.hideNavigationBarLoading()
+          uni.stopPullDownRefresh()
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+## 参数说明
+
+此 API 无需参数。
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 必须与 `uni.hideNavigationBarLoading` 配对使用
+2. 在导航栏标题旁边显示加载动画
+3. 适合页面级别的加载状态
+4. 建议在 `complete` 回调中隐藏
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#shownavigationbarloading
+- **隐藏加载**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#hidenavigationbarloading

.agents/bak-skills/uniappx-project/examples/api/ui/show-tab-bar-red-dot.md

@@ -0,0 +1,199 @@
+# uni.showTabBarRedDot - 显示 TabBar 红点示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#showtabbarreddot
+
+## 概述
+
+`uni.showTabBarRedDot` 用于显示 tabBar 某一项的右上角的红点。
+
+## 基础用法
+
+```javascript
+uni.showTabBarRedDot({
+  index: 0
+})
+```
+
+## 完整示例
+
+### 示例 1: 显示红点
+
+```javascript
+uni.showTabBarRedDot({
+  index: 0, // tabBar 的哪一项，从左边算起
+  success: () => {
+    console.log('显示成功')
+  },
+  fail: (err) => {
+    console.error('显示失败', err)
+  }
+})
+```
+
+### 示例 2: 显示消息红点
+
+```javascript
+function showMessageRedDot() {
+  uni.showTabBarRedDot({
+    index: 1, // 消息页面的索引
+    success: () => {
+      console.log('消息红点已显示')
+    }
+  })
+}
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="showRedDot">显示红点</button>
+    <button @click="hideRedDot">隐藏红点</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    showRedDot() {
+      uni.showTabBarRedDot({
+        index: 0,
+        success: () => {
+          uni.showToast({
+            title: '已显示红点',
+            icon: 'success'
+          })
+        }
+      })
+    },
+    hideRedDot() {
+      uni.hideTabBarRedDot({
+        index: 0,
+        success: () => {
+          uni.showToast({
+            title: '已隐藏红点',
+            icon: 'success'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 根据状态显示红点
+
+```vue
+<template>
+  <view class="container">
+    <view v-if="hasNewMessage" class="message-list">
+      <view 
+        v-for="message in messages" 
+        :key="message.id"
+        class="message-item"
+        @click="readMessage(message)"
+      >
+        <text>{{ message.content }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      messages: [],
+      hasNewMessage: false
+    }
+  },
+  onLoad() {
+    this.loadMessages()
+  },
+  methods: {
+    loadMessages() {
+      uni.request({
+        url: 'https://api.example.com/messages',
+        success: (res) => {
+          this.messages = res.data
+          this.hasNewMessage = res.data.some(msg => !msg.read)
+          
+          // 根据是否有新消息显示红点
+          if (this.hasNewMessage) {
+            uni.showTabBarRedDot({
+              index: 1 // 消息页面的索引
+            })
+          } else {
+            uni.hideTabBarRedDot({
+              index: 1
+            })
+          }
+        }
+      })
+    },
+    readMessage(message) {
+      message.read = true
+      this.hasNewMessage = this.messages.some(msg => !msg.read)
+      
+      if (!this.hasNewMessage) {
+        uni.hideTabBarRedDot({
+          index: 1
+        })
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 多个 TabBar 红点
+
+```javascript
+function showAllRedDots(indices) {
+  indices.forEach(index => {
+    uni.showTabBarRedDot({
+      index: index
+    })
+  })
+}
+
+// 使用
+showAllRedDots([0, 1, 2]) // 显示第0、1、2项的红点
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| index | Number | 是 | tabBar 的哪一项，从左边算起 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `index` 从 0 开始，对应 `pages.json` 中 tabBar 的配置顺序
+2. 红点不显示数字，只显示一个小红点
+3. 与 `setTabBarBadge` 的区别：红点不显示文字，徽标显示文字
+4. 使用 `hideTabBarRedDot` 可以隐藏红点
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#showtabbarreddot
+- **隐藏红点**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#hidetabbarreddot
+- **设置徽标**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarbadge

.agents/bak-skills/uniappx-project/examples/api/ui/show-toast.md

@@ -0,0 +1,188 @@
+# uni.showToast - 消息提示示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showtoast
+
+## 概述
+
+`uni.showToast` 用于显示消息提示框，常用于操作反馈。
+
+## 基础用法
+
+```javascript
+uni.showToast({
+  title: '操作成功',
+  icon: 'success'
+})
+```
+
+## 完整示例
+
+### 示例 1: 成功提示
+
+```javascript
+uni.showToast({
+  title: '操作成功',
+  icon: 'success',
+  duration: 2000
+})
+```
+
+### 示例 2: 错误提示
+
+```javascript
+uni.showToast({
+  title: '操作失败',
+  icon: 'error',
+  duration: 2000
+})
+```
+
+### 示例 3: 加载提示
+
+```javascript
+uni.showToast({
+  title: '加载中...',
+  icon: 'loading',
+  duration: 2000
+})
+```
+
+### 示例 4: 无图标提示
+
+```javascript
+uni.showToast({
+  title: '这是一条消息',
+  icon: 'none',
+  duration: 2000
+})
+```
+
+### 示例 5: 自定义图片
+
+```javascript
+uni.showToast({
+  title: '自定义图标',
+  image: '/static/custom-icon.png',
+  duration: 2000
+})
+```
+
+### 示例 6: 封装提示函数
+
+```javascript
+// utils/toast.js
+const toast = {
+  success(title, duration = 2000) {
+    uni.showToast({
+      title: title,
+      icon: 'success',
+      duration: duration
+    })
+  },
+  
+  error(title, duration = 2000) {
+    uni.showToast({
+      title: title,
+      icon: 'error',
+      duration: duration
+    })
+  },
+  
+  loading(title, duration = 2000) {
+    uni.showToast({
+      title: title,
+      icon: 'loading',
+      duration: duration
+    })
+  },
+  
+  info(title, duration = 2000) {
+    uni.showToast({
+      title: title,
+      icon: 'none',
+      duration: duration
+    })
+  }
+}
+
+// 使用
+toast.success('保存成功')
+toast.error('保存失败')
+toast.info('这是一条消息')
+```
+
+### 示例 7: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="handleSuccess">成功提示</button>
+    <button @click="handleError">错误提示</button>
+    <button @click="handleLoading">加载提示</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleSuccess() {
+      uni.showToast({
+        title: '操作成功',
+        icon: 'success'
+      })
+    },
+    handleError() {
+      uni.showToast({
+        title: '操作失败',
+        icon: 'error'
+      })
+    },
+    handleLoading() {
+      uni.showToast({
+        title: '加载中...',
+        icon: 'loading',
+        duration: 3000
+      })
+    }
+  }
+}
+</script>
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| title | String | 是 | 提示的内容 |
+| icon | String | 否 | 图标类型，可选值：success、error、loading、none |
+| image | String | 否 | 自定义图标的本地路径 |
+| duration | Number | 否 | 提示的延迟时间，单位 ms，默认 2000 |
+| mask | Boolean | 否 | 是否显示透明蒙层，防止触摸穿透 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `title` 长度限制：微信小程序最多 7 个汉字长度
+2. 同时只能显示一个 toast，新的 toast 会覆盖旧的
+3. 使用 `uni.hideToast()` 可以手动关闭 toast
+4. `mask` 参数在某些平台可能不支持
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showtoast
+- **隐藏提示**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hidetoast

.agents/bak-skills/uniappx-project/examples/components/built-in/audio.md

@@ -0,0 +1,320 @@
+# audio 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/audio.html
+
+## 概述
+
+`audio` 是音频播放组件，用于播放音频。
+
+## 基础用法
+
+```vue
+<template>
+  <audio src="https://example.com/audio.mp3" controls></audio>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 基本音频播放
+
+```vue
+<template>
+  <view class="container">
+    <audio 
+      :src="audioSrc"
+      controls
+      class="audio-player"
+    ></audio>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      audioSrc: 'https://example.com/audio.mp3'
+    }
+  }
+}
+</script>
+
+<style>
+.audio-player {
+  width: 100%;
+}
+</style>
+```
+
+### 示例 2: 音频播放控制
+
+```vue
+<template>
+  <view class="container">
+    <audio 
+      :src="audioSrc"
+      :controls="showControls"
+      :autoplay="autoplay"
+      :loop="loop"
+      @play="handlePlay"
+      @pause="handlePause"
+      @ended="handleEnded"
+      class="audio-player"
+    ></audio>
+    <view class="controls">
+      <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
+      <button @click="toggleLoop">{{ loop ? '取消循环' : '循环播放' }}</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      audioSrc: 'https://example.com/audio.mp3',
+      showControls: true,
+      autoplay: false,
+      loop: false,
+      isPlaying: false
+    }
+  },
+  methods: {
+    handlePlay() {
+      this.isPlaying = true
+      console.log('音频开始播放')
+    },
+    handlePause() {
+      this.isPlaying = false
+      console.log('音频暂停')
+    },
+    handleEnded() {
+      this.isPlaying = false
+      console.log('音频播放结束')
+    },
+    togglePlay() {
+      // 需要通过 ref 调用音频组件的方法
+      if (this.isPlaying) {
+        this.$refs.audio.pause()
+      } else {
+        this.$refs.audio.play()
+      }
+    },
+    toggleLoop() {
+      this.loop = !this.loop
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 音频列表
+
+```vue
+<template>
+  <view class="container">
+    <view 
+      v-for="(item, index) in audioList" 
+      :key="index"
+      class="audio-item"
+    >
+      <text class="audio-title">{{ item.title }}</text>
+      <audio 
+        :src="item.src"
+        controls
+        class="audio-player"
+        @play="handleAudioPlay(index)"
+      ></audio>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      audioList: [
+        {
+          src: 'https://example.com/audio1.mp3',
+          title: '音频1'
+        },
+        {
+          src: 'https://example.com/audio2.mp3',
+          title: '音频2'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleAudioPlay(index) {
+      console.log('播放音频', index)
+    }
+  }
+}
+</script>
+
+<style>
+.audio-item {
+  margin-bottom: 20px;
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+.audio-title {
+  display: block;
+  font-size: 32rpx;
+  margin-bottom: 10px;
+}
+.audio-player {
+  width: 100%;
+}
+</style>
+```
+
+### 示例 4: 播放进度显示
+
+```vue
+<template>
+  <view class="container">
+    <audio 
+      :src="audioSrc"
+      controls
+      @timeupdate="handleTimeUpdate"
+      class="audio-player"
+    ></audio>
+    <view class="progress-info">
+      <text>播放进度：{{ currentTime }}s / {{ duration }}s</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      audioSrc: 'https://example.com/audio.mp3',
+      currentTime: 0,
+      duration: 0
+    }
+  },
+  methods: {
+    handleTimeUpdate(e) {
+      this.currentTime = e.detail.currentTime
+      this.duration = e.detail.duration
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 自定义播放器
+
+```vue
+<template>
+  <view class="container">
+    <view class="custom-player">
+      <text class="audio-title">{{ currentAudio.title }}</text>
+      <view class="player-controls">
+        <button @click="playPrevious">上一首</button>
+        <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
+        <button @click="playNext">下一首</button>
+      </view>
+      <audio 
+        ref="audio"
+        :src="currentAudio.src"
+        :autoplay="autoplay"
+        @play="handlePlay"
+        @pause="handlePause"
+        @ended="handleEnded"
+      ></audio>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      audioList: [
+        { src: 'https://example.com/audio1.mp3', title: '音频1' },
+        { src: 'https://example.com/audio2.mp3', title: '音频2' },
+        { src: 'https://example.com/audio3.mp3', title: '音频3' }
+      ],
+      currentIndex: 0,
+      isPlaying: false,
+      autoplay: false
+    }
+  },
+  computed: {
+    currentAudio() {
+      return this.audioList[this.currentIndex]
+    }
+  },
+  methods: {
+    togglePlay() {
+      if (this.isPlaying) {
+        this.$refs.audio.pause()
+      } else {
+        this.$refs.audio.play()
+      }
+    },
+    playPrevious() {
+      this.currentIndex = (this.currentIndex - 1 + this.audioList.length) % this.audioList.length
+      this.autoplay = true
+    },
+    playNext() {
+      this.currentIndex = (this.currentIndex + 1) % this.audioList.length
+      this.autoplay = true
+    },
+    handlePlay() {
+      this.isPlaying = true
+      this.autoplay = false
+    },
+    handlePause() {
+      this.isPlaying = false
+    },
+    handleEnded() {
+      this.isPlaying = false
+      // 自动播放下一首
+      this.playNext()
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| src | String | - | 要播放音频的资源地址 |
+| controls | Boolean | false | 是否显示默认播放控件 |
+| autoplay | Boolean | false | 是否自动播放 |
+| loop | Boolean | false | 是否循环播放 |
+| muted | Boolean | false | 是否静音播放 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 音频地址需要配置合法域名
+2. `autoplay` 在某些平台可能不生效
+3. 可以通过事件监听播放状态
+4. 建议使用 `controls` 显示播放控件
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/audio.html

.agents/bak-skills/uniappx-project/examples/components/built-in/button.md

@@ -0,0 +1,233 @@
+# button 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/button.html
+
+## 概述
+
+`button` 是按钮组件，用于触发操作。
+
+## 基础用法
+
+```vue
+<template>
+  <button @click="handleClick">点击按钮</button>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick() {
+      console.log('按钮被点击')
+    }
+  }
+}
+</script>
+```
+
+## 完整示例
+
+### 示例 1: 按钮类型
+
+```vue
+<template>
+  <view class="container">
+    <button type="default">默认按钮</button>
+    <button type="primary">主要按钮</button>
+    <button type="warn">警告按钮</button>
+  </view>
+</template>
+
+<style>
+.container {
+  padding: 20px;
+}
+button {
+  margin-bottom: 20px;
+}
+</style>
+```
+
+### 示例 2: 按钮大小
+
+```vue
+<template>
+  <view class="container">
+    <button size="mini">小按钮</button>
+    <button size="default">默认按钮</button>
+  </view>
+</template>
+```
+
+### 示例 3: 镂空按钮
+
+```vue
+<template>
+  <view class="container">
+    <button type="primary" plain>镂空按钮</button>
+    <button type="warn" plain>镂空警告按钮</button>
+  </view>
+</template>
+```
+
+### 示例 4: 禁用按钮
+
+```vue
+<template>
+  <view class="container">
+    <button disabled>禁用按钮</button>
+    <button :disabled="isDisabled" @click="handleClick">
+      {{ isDisabled ? '已禁用' : '可点击' }}
+    </button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isDisabled: false
+    }
+  },
+  methods: {
+    handleClick() {
+      this.isDisabled = true
+      setTimeout(() => {
+        this.isDisabled = false
+      }, 2000)
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 加载状态
+
+```vue
+<template>
+  <view class="container">
+    <button :loading="isLoading" @click="handleSubmit">
+      提交
+    </button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isLoading: false
+    }
+  },
+  methods: {
+    async handleSubmit() {
+      this.isLoading = true
+      try {
+        // 模拟请求
+        await new Promise(resolve => setTimeout(resolve, 2000))
+        uni.showToast({
+          title: '提交成功',
+          icon: 'success'
+        })
+      } finally {
+        this.isLoading = false
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 6: 表单提交
+
+```vue
+<template>
+  <form @submit="handleSubmit">
+    <input name="username" placeholder="用户名" />
+    <input name="password" type="password" placeholder="密码" />
+    <button form-type="submit">提交</button>
+    <button form-type="reset">重置</button>
+  </form>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleSubmit(e) {
+      console.log('表单数据', e.detail.value)
+    }
+  }
+}
+</script>
+```
+
+### 示例 7: 开放能力（微信小程序）
+
+```vue
+<template>
+  <view class="container">
+    <!-- 获取用户信息 -->
+    <button open-type="getUserInfo" @getuserinfo="getUserInfo">
+      获取用户信息
+    </button>
+    
+    <!-- 打开客服会话 -->
+    <button open-type="contact">联系客服</button>
+    
+    <!-- 分享 -->
+    <button open-type="share">分享</button>
+    
+    <!-- 打开设置 -->
+    <button open-type="openSetting">打开设置</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    getUserInfo(e) {
+      console.log('用户信息', e.detail.userInfo)
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| size | String | default | 按钮的大小，可选值：default、mini |
+| type | String | default | 按钮的样式类型，可选值：primary、default、warn |
+| plain | Boolean | false | 按钮是否镂空，背景色透明 |
+| disabled | Boolean | false | 是否禁用 |
+| loading | Boolean | false | 名称前是否带 loading 图标 |
+| form-type | String | - | 用于 form 组件，可选值：submit、reset |
+| open-type | String | - | 开放能力，如：getUserInfo、contact、share 等 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `open-type` 在不同平台支持的能力不同
+2. 按钮的样式可以通过 CSS 自定义
+3. `loading` 图标在不同平台显示可能不同
+4. 建议使用 `@click` 事件处理点击，而不是依赖 `open-type`
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/button.html
+- **表单组件**: https://doc.dcloud.net.cn/uni-app-x/component/form.html

.agents/bak-skills/uniappx-project/examples/components/built-in/camera.md

@@ -0,0 +1,347 @@
+# camera 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/camera.html
+
+## 概述
+
+`camera` 是相机组件，用于调用设备相机进行拍照或录像。
+
+## 基础用法
+
+```vue
+<template>
+  <camera 
+    device-position="back"
+    @error="handleError"
+  ></camera>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleError(e) {
+      console.error('相机错误', e.detail)
+    }
+  }
+}
+</script>
+```
+
+## 完整示例
+
+### 示例 1: 基本相机
+
+```vue
+<template>
+  <view class="container">
+    <camera 
+      device-position="back"
+      flash="off"
+      class="camera"
+      @error="handleError"
+    ></camera>
+    <button @click="takePhoto">拍照</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    takePhoto() {
+      const ctx = uni.createCameraContext('myCamera', this)
+      ctx.takePhoto({
+        quality: 'high',
+        success: (res) => {
+          console.log('拍照成功', res.tempImagePath)
+          uni.previewImage({
+            urls: [res.tempImagePath]
+          })
+        }
+      })
+    },
+    handleError(e) {
+      console.error('相机错误', e.detail)
+    }
+  }
+}
+</script>
+
+<style>
+.camera {
+  width: 100%;
+  height: 500px;
+}
+</style>
+```
+
+### 示例 2: 拍照和录像
+
+```vue
+<template>
+  <view class="container">
+    <camera 
+      ref="camera"
+      device-position="back"
+      flash="off"
+      class="camera"
+      @error="handleError"
+    ></camera>
+    <view class="controls">
+      <button @click="takePhoto">拍照</button>
+      <button @click="startRecord">开始录像</button>
+      <button @click="stopRecord">停止录像</button>
+      <button @click="switchCamera">切换摄像头</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isRecording: false
+    }
+  },
+  methods: {
+    takePhoto() {
+      const ctx = uni.createCameraContext('myCamera', this)
+      ctx.takePhoto({
+        quality: 'high',
+        success: (res) => {
+          console.log('拍照成功', res.tempImagePath)
+        }
+      })
+    },
+    startRecord() {
+      const ctx = uni.createCameraContext('myCamera', this)
+      ctx.startRecord({
+        success: () => {
+          this.isRecording = true
+          console.log('开始录像')
+        }
+      })
+    },
+    stopRecord() {
+      const ctx = uni.createCameraContext('myCamera', this)
+      ctx.stopRecord({
+        success: (res) => {
+          this.isRecording = false
+          console.log('录像成功', res.tempVideoPath)
+        }
+      })
+    },
+    switchCamera() {
+      // 需要通过 ref 切换
+      this.$refs.camera.switchCamera()
+    },
+    handleError(e) {
+      console.error('相机错误', e.detail)
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 切换摄像头和闪光灯
+
+```vue
+<template>
+  <view class="container">
+    <camera 
+      :device-position="devicePosition"
+      :flash="flash"
+      class="camera"
+    ></camera>
+    <view class="controls">
+      <button @click="switchCamera">切换摄像头</button>
+      <button @click="toggleFlash">切换闪光灯</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      devicePosition: 'back',
+      flash: 'off'
+    }
+  },
+  methods: {
+    switchCamera() {
+      this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back'
+    },
+    toggleFlash() {
+      const flashOptions = ['off', 'on', 'auto', 'torch']
+      const currentIndex = flashOptions.indexOf(this.flash)
+      this.flash = flashOptions[(currentIndex + 1) % flashOptions.length]
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 拍照并上传
+
+```vue
+<template>
+  <view class="container">
+    <camera 
+      device-position="back"
+      class="camera"
+    ></camera>
+    <button @click="takePhotoAndUpload">拍照并上传</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    takePhotoAndUpload() {
+      const ctx = uni.createCameraContext('myCamera', this)
+      ctx.takePhoto({
+        quality: 'high',
+        success: (res) => {
+          // 上传图片
+          uni.uploadFile({
+            url: 'https://api.example.com/upload',
+            filePath: res.tempImagePath,
+            name: 'file',
+            success: (uploadRes) => {
+              const data = JSON.parse(uploadRes.data)
+              console.log('上传成功', data.url)
+              uni.showToast({
+                title: '上传成功',
+                icon: 'success'
+              })
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 自定义相机界面
+
+```vue
+<template>
+  <view class="container">
+    <camera 
+      device-position="back"
+      flash="off"
+      class="camera"
+    ></camera>
+    <view class="camera-overlay">
+      <view class="camera-controls">
+        <button class="control-btn" @click="switchCamera">切换</button>
+        <button class="control-btn capture-btn" @click="takePhoto">拍照</button>
+        <button class="control-btn" @click="toggleFlash">闪光</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      devicePosition: 'back',
+      flash: 'off'
+    }
+  },
+  methods: {
+    takePhoto() {
+      const ctx = uni.createCameraContext('myCamera', this)
+      ctx.takePhoto({
+        quality: 'high',
+        success: (res) => {
+          uni.previewImage({
+            urls: [res.tempImagePath]
+          })
+        }
+      })
+    },
+    switchCamera() {
+      this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back'
+    },
+    toggleFlash() {
+      const flashOptions = ['off', 'on', 'auto']
+      const currentIndex = flashOptions.indexOf(this.flash)
+      this.flash = flashOptions[(currentIndex + 1) % flashOptions.length]
+    }
+  }
+}
+</script>
+
+<style>
+.camera {
+  width: 100%;
+  height: 100vh;
+}
+.camera-overlay {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 20px;
+}
+.camera-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.control-btn {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.3);
+  color: white;
+}
+.capture-btn {
+  width: 80px;
+  height: 80px;
+  background-color: white;
+  color: #333;
+}
+</style>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| device-position | String | back | 摄像头朝向，可选值：back、front |
+| flash | String | off | 闪光灯，可选值：on、off、auto、torch |
+| frame-size | String | medium | 指定期望的相机帧数据尺寸，可选值：small、medium、large |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ❌ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. H5 平台不支持此组件
+2. 需要通过 `uni.createCameraContext` 创建相机上下文
+3. 拍照和录像需要通过上下文方法调用
+4. 建议全屏显示相机组件
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/camera.html
+- **Camera API**: https://doc.dcloud.net.cn/uni-app-x/api/media/camera.html

.agents/bak-skills/uniappx-project/examples/components/built-in/canvas.md

@@ -0,0 +1,247 @@
+# canvas 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/canvas.html
+
+## 概述
+
+`canvas` 是画布组件，用于绘制图形、文字等。
+
+## 基础用法
+
+```vue
+<template>
+  <canvas canvas-id="myCanvas" class="canvas"></canvas>
+</template>
+
+<script>
+export default {
+  onReady() {
+    this.drawCanvas()
+  },
+  methods: {
+    drawCanvas() {
+      const ctx = uni.createCanvasContext('myCanvas', this)
+      ctx.setFillStyle('#007aff')
+      ctx.fillRect(0, 0, 200, 200)
+      ctx.draw()
+    }
+  }
+}
+</script>
+
+<style>
+.canvas {
+  width: 200px;
+  height: 200px;
+}
+</style>
+```
+
+## 完整示例
+
+### 示例 1: 绘制矩形
+
+```vue
+<template>
+  <view class="container">
+    <canvas canvas-id="myCanvas" class="canvas"></canvas>
+    <button @click="drawRect">绘制矩形</button>
+  </view>
+</template>
+
+<script>
+export default {
+  onReady() {
+    this.drawRect()
+  },
+  methods: {
+    drawRect() {
+      const ctx = uni.createCanvasContext('myCanvas', this)
+      ctx.setFillStyle('#007aff')
+      ctx.fillRect(10, 10, 150, 100)
+      ctx.draw()
+    }
+  }
+}
+</script>
+
+<style>
+.canvas {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #eee;
+}
+</style>
+```
+
+### 示例 2: 绘制圆形
+
+```vue
+<template>
+  <view class="container">
+    <canvas canvas-id="myCanvas" class="canvas"></canvas>
+    <button @click="drawCircle">绘制圆形</button>
+  </view>
+</template>
+
+<script>
+export default {
+  onReady() {
+    this.drawCircle()
+  },
+  methods: {
+    drawCircle() {
+      const ctx = uni.createCanvasContext('myCanvas', this)
+      ctx.beginPath()
+      ctx.arc(100, 100, 50, 0, 2 * Math.PI)
+      ctx.setFillStyle('#4cd964')
+      ctx.fill()
+      ctx.draw()
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 绘制文字
+
+```vue
+<template>
+  <view class="container">
+    <canvas canvas-id="myCanvas" class="canvas"></canvas>
+    <button @click="drawText">绘制文字</button>
+  </view>
+</template>
+
+<script>
+export default {
+  onReady() {
+    this.drawText()
+  },
+  methods: {
+    drawText() {
+      const ctx = uni.createCanvasContext('myCanvas', this)
+      ctx.setFontSize(20)
+      ctx.setFillStyle('#333')
+      ctx.fillText('Hello Canvas', 10, 50)
+      ctx.draw()
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 绘制图片
+
+```vue
+<template>
+  <view class="container">
+    <canvas canvas-id="myCanvas" class="canvas"></canvas>
+    <button @click="drawImage">绘制图片</button>
+  </view>
+</template>
+
+<script>
+export default {
+  onReady() {
+    this.drawImage()
+  },
+  methods: {
+    drawImage() {
+      const ctx = uni.createCanvasContext('myCanvas', this)
+      uni.downloadFile({
+        url: 'https://example.com/image.jpg',
+        success: (res) => {
+          ctx.drawImage(res.tempFilePath, 0, 0, 200, 200)
+          ctx.draw()
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 保存为图片
+
+```vue
+<template>
+  <view class="container">
+    <canvas canvas-id="myCanvas" class="canvas"></canvas>
+    <button @click="drawAndSave">绘制并保存</button>
+  </view>
+</template>
+
+<script>
+export default {
+  onReady() {
+    this.drawCanvas()
+  },
+  methods: {
+    drawCanvas() {
+      const ctx = uni.createCanvasContext('myCanvas', this)
+      ctx.setFillStyle('#007aff')
+      ctx.fillRect(0, 0, 200, 200)
+      ctx.setFontSize(20)
+      ctx.setFillStyle('#fff')
+      ctx.fillText('Canvas', 70, 100)
+      ctx.draw()
+    },
+    drawAndSave() {
+      this.drawCanvas()
+      setTimeout(() => {
+        uni.canvasToTempFilePath({
+          canvasId: 'myCanvas',
+          success: (res) => {
+            uni.saveImageToPhotosAlbum({
+              filePath: res.tempFilePath,
+              success: () => {
+                uni.showToast({
+                  title: '保存成功',
+                  icon: 'success'
+                })
+              }
+            })
+          }
+        }, this)
+      }, 500)
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| canvas-id | String | - | canvas 组件的唯一标识符 |
+| disable-scroll | Boolean | false | 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 需要在 `onReady` 生命周期中绘制
+2. 调用 `ctx.draw()` 才会真正绘制到画布上
+3. 可以通过 `uni.canvasToTempFilePath` 将画布转为图片
+4. 不同平台的 API 可能略有差异
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/canvas.html
+- **Canvas API**: https://doc.dcloud.net.cn/uni-app-x/api/canvas/canvas.html

.agents/bak-skills/uniappx-project/examples/components/built-in/checkbox.md

@@ -0,0 +1,233 @@
+# checkbox 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/checkbox.html
+
+## 概述
+
+`checkbox` 是多项选择器组件，用于多选场景。
+
+## 基础用法
+
+```vue
+<template>
+  <checkbox value="option1" checked>选项1</checkbox>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 单个复选框
+
+```vue
+<template>
+  <view class="container">
+    <checkbox value="agree" :checked="isAgreed" @tap="handleChange">
+      我已阅读并同意协议
+    </checkbox>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isAgreed: false
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.isAgreed = e.detail.value.length > 0
+      console.log('选中状态', this.isAgreed)
+    }
+  }
+}
+</script>
+```
+
+### 示例 2: 复选框组
+
+```vue
+<template>
+  <view class="container">
+    <checkbox-group @change="handleGroupChange">
+      <label v-for="item in options" :key="item.value" class="checkbox-item">
+        <checkbox :value="item.value" :checked="item.checked" />
+        <text>{{ item.label }}</text>
+      </label>
+    </checkbox-group>
+    <text>已选择：{{ selectedValues.join(', ') }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        { value: 'option1', label: '选项1', checked: false },
+        { value: 'option2', label: '选项2', checked: false },
+        { value: 'option3', label: '选项3', checked: false }
+      ],
+      selectedValues: []
+    }
+  },
+  methods: {
+    handleGroupChange(e) {
+      this.selectedValues = e.detail.value
+      console.log('选中的值', this.selectedValues)
+    }
+  }
+}
+</script>
+
+<style>
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+</style>
+```
+
+### 示例 3: 全选功能
+
+```vue
+<template>
+  <view class="container">
+    <checkbox-group @change="handleGroupChange">
+      <label class="checkbox-item">
+        <checkbox 
+          value="all" 
+          :checked="isAllSelected"
+          @tap="handleSelectAll"
+        />
+        <text>全选</text>
+      </label>
+      <label 
+        v-for="item in list" 
+        :key="item.id"
+        class="checkbox-item"
+      >
+        <checkbox 
+          :value="item.id" 
+          :checked="item.checked"
+        />
+        <text>{{ item.name }}</text>
+      </label>
+    </checkbox-group>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { id: '1', name: '项目1', checked: false },
+        { id: '2', name: '项目2', checked: false },
+        { id: '3', name: '项目3', checked: false }
+      ]
+    }
+  },
+  computed: {
+    isAllSelected() {
+      return this.list.every(item => item.checked)
+    }
+  },
+  methods: {
+    handleSelectAll() {
+      const allSelected = this.isAllSelected
+      this.list.forEach(item => {
+        item.checked = !allSelected
+      })
+    },
+    handleGroupChange(e) {
+      const selectedIds = e.detail.value.filter(id => id !== 'all')
+      this.list.forEach(item => {
+        item.checked = selectedIds.includes(item.id)
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 在表单中使用
+
+```vue
+<template>
+  <form @submit="handleSubmit">
+    <view class="form-item">
+      <text>兴趣爱好：</text>
+      <checkbox-group name="hobbies" @change="handleHobbiesChange">
+        <label v-for="hobby in hobbies" :key="hobby.value" class="checkbox-item">
+          <checkbox :value="hobby.value" />
+          <text>{{ hobby.label }}</text>
+        </label>
+      </checkbox-group>
+    </view>
+    <button form-type="submit">提交</button>
+  </form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      hobbies: [
+        { value: 'reading', label: '阅读' },
+        { value: 'music', label: '音乐' },
+        { value: 'sports', label: '运动' },
+        { value: 'travel', label: '旅行' }
+      ],
+      selectedHobbies: []
+    }
+  },
+  methods: {
+    handleHobbiesChange(e) {
+      this.selectedHobbies = e.detail.value
+    },
+    handleSubmit(e) {
+      console.log('选中的兴趣爱好', this.selectedHobbies)
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| value | String | - | checkbox 标识，选中时触发 change 事件，并携带 value |
+| checked | Boolean | false | 当前是否选中 |
+| disabled | Boolean | false | 是否禁用 |
+| color | String | #007aff | checkbox 的颜色 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 需要配合 `checkbox-group` 使用才能获取选中的值
+2. `value` 用于标识不同的选项
+3. `checked` 属性控制选中状态
+4. 可以通过 `@change` 事件监听变化
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/checkbox.html
+- **表单组件**: https://doc.dcloud.net.cn/uni-app-x/component/form.html

.agents/bak-skills/uniappx-project/examples/components/built-in/form.md

@@ -0,0 +1,321 @@
+# form 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/form.html
+
+## 概述
+
+`form` 是表单组件，用于收集用户输入的数据。
+
+## 基础用法
+
+```vue
+<template>
+  <form @submit="handleSubmit">
+    <input name="username" placeholder="用户名" />
+    <button form-type="submit">提交</button>
+  </form>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleSubmit(e) {
+      console.log('表单数据', e.detail.value)
+    }
+  }
+}
+</script>
+```
+
+## 完整示例
+
+### 示例 1: 基本表单
+
+```vue
+<template>
+  <form @submit="handleSubmit">
+    <view class="form-item">
+      <text>用户名：</text>
+      <input name="username" placeholder="请输入用户名" />
+    </view>
+    <view class="form-item">
+      <text>密码：</text>
+      <input name="password" type="password" placeholder="请输入密码" />
+    </view>
+    <button form-type="submit">提交</button>
+    <button form-type="reset">重置</button>
+  </form>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleSubmit(e) {
+      const formData = e.detail.value
+      console.log('表单数据', formData)
+      // { username: 'xxx', password: 'xxx' }
+    }
+  }
+}
+</script>
+
+<style>
+.form-item {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+</style>
+```
+
+### 示例 2: 完整登录表单
+
+```vue
+<template>
+  <form @submit="handleLogin">
+    <view class="form-item">
+      <input 
+        name="username" 
+        placeholder="请输入用户名"
+        v-model="username"
+      />
+    </view>
+    <view class="form-item">
+      <input 
+        name="password" 
+        type="password"
+        placeholder="请输入密码"
+        v-model="password"
+      />
+    </view>
+    <button form-type="submit" :loading="loading">登录</button>
+  </form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: '',
+      loading: false
+    }
+  },
+  methods: {
+    handleLogin(e) {
+      const formData = e.detail.value
+      this.loading = true
+      
+      uni.request({
+        url: 'https://api.example.com/login',
+        method: 'POST',
+        data: formData,
+        success: (res) => {
+          if (res.data.success) {
+            uni.setStorageSync('token', res.data.token)
+            uni.showToast({
+              title: '登录成功',
+              icon: 'success'
+            })
+            setTimeout(() => {
+              uni.switchTab({
+                url: '/pages/index/index'
+              })
+            }, 1500)
+          }
+        },
+        complete: () => {
+          this.loading = false
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 表单验证
+
+```vue
+<template>
+  <form @submit="handleSubmit">
+    <view class="form-item">
+      <input 
+        name="email" 
+        type="text"
+        placeholder="请输入邮箱"
+        v-model="email"
+      />
+      <text v-if="emailError" class="error">{{ emailError }}</text>
+    </view>
+    <view class="form-item">
+      <input 
+        name="phone" 
+        type="tel"
+        placeholder="请输入手机号"
+        maxlength="11"
+        v-model="phone"
+      />
+      <text v-if="phoneError" class="error">{{ phoneError }}</text>
+    </view>
+    <button form-type="submit">提交</button>
+  </form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      email: '',
+      phone: '',
+      emailError: '',
+      phoneError: ''
+    }
+  },
+  methods: {
+    validateEmail() {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+      if (!this.email) {
+        this.emailError = '邮箱不能为空'
+      } else if (!emailRegex.test(this.email)) {
+        this.emailError = '邮箱格式不正确'
+      } else {
+        this.emailError = ''
+      }
+    },
+    validatePhone() {
+      const phoneRegex = /^1[3-9]\d{9}$/
+      if (!this.phone) {
+        this.phoneError = '手机号不能为空'
+      } else if (!phoneRegex.test(this.phone)) {
+        this.phoneError = '手机号格式不正确'
+      } else {
+        this.phoneError = ''
+      }
+    },
+    handleSubmit(e) {
+      this.validateEmail()
+      this.validatePhone()
+      
+      if (!this.emailError && !this.phoneError) {
+        const formData = e.detail.value
+        console.log('表单数据', formData)
+        uni.showToast({
+          title: '提交成功',
+          icon: 'success'
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.error {
+  color: #ff3b30;
+  font-size: 24rpx;
+  margin-top: 10rpx;
+}
+</style>
+```
+
+### 示例 4: 复杂表单
+
+```vue
+<template>
+  <form @submit="handleSubmit">
+    <view class="form-item">
+      <text>姓名：</text>
+      <input name="name" placeholder="请输入姓名" />
+    </view>
+    
+    <view class="form-item">
+      <text>性别：</text>
+      <radio-group name="gender">
+        <label>
+          <radio value="male" /> 男
+        </label>
+        <label>
+          <radio value="female" /> 女
+        </label>
+      </radio-group>
+    </view>
+    
+    <view class="form-item">
+      <text>兴趣爱好：</text>
+      <checkbox-group name="hobbies">
+        <label>
+          <checkbox value="reading" /> 阅读
+        </label>
+        <label>
+          <checkbox value="music" /> 音乐
+        </label>
+        <label>
+          <checkbox value="sports" /> 运动
+        </label>
+      </checkbox-group>
+    </view>
+    
+    <view class="form-item">
+      <text>城市：</text>
+      <picker mode="region" name="city">
+        <view>请选择城市</view>
+      </picker>
+    </view>
+    
+    <button form-type="submit">提交</button>
+  </form>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleSubmit(e) {
+      console.log('表单数据', e.detail.value)
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| report-submit | Boolean | false | 是否返回 formId 用于发送模板消息 |
+
+## 事件说明
+
+| 事件名 | 说明 | 返回值 |
+|--------|------|--------|
+| @submit | 携带 form 中的数据触发 submit 事件 | e.detail.value 包含所有表单数据 |
+| @reset | 表单重置时会触发 reset 事件 | - |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 表单内的组件需要设置 `name` 属性才能被收集
+2. `form-type="submit"` 的按钮会触发表单提交
+3. `form-type="reset"` 的按钮会重置表单
+4. 可以通过 `e.detail.value` 获取所有表单数据
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/form.html
+- **输入框**: https://doc.dcloud.net.cn/uni-app-x/component/input.html

.agents/bak-skills/uniappx-project/examples/components/built-in/icon.md

@@ -0,0 +1,160 @@
+# icon 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/icon.html
+
+## 概述
+
+`icon` 是图标组件，用于显示各种图标。
+
+## 基础用法
+
+```vue
+<template>
+  <icon type="success" size="20" color="#4cd964"></icon>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 不同类型的图标
+
+```vue
+<template>
+  <view class="container">
+    <view class="icon-item">
+      <icon type="success" size="26" color="#4cd964"></icon>
+      <text>成功</text>
+    </view>
+    <view class="icon-item">
+      <icon type="info" size="26" color="#909399"></icon>
+      <text>信息</text>
+    </view>
+    <view class="icon-item">
+      <icon type="warn" size="26" color="#ff9500"></icon>
+      <text>警告</text>
+    </view>
+    <view class="icon-item">
+      <icon type="waiting" size="26" color="#007aff"></icon>
+      <text>等待</text>
+    </view>
+    <view class="icon-item">
+      <icon type="clear" size="26" color="#ff3b30"></icon>
+      <text>清除</text>
+    </view>
+    <view class="icon-item">
+      <icon type="search" size="26" color="#333"></icon>
+      <text>搜索</text>
+    </view>
+  </view>
+</template>
+
+<style>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px;
+}
+.icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+</style>
+```
+
+### 示例 2: 不同大小的图标
+
+```vue
+<template>
+  <view class="container">
+    <icon type="success" size="20" color="#4cd964"></icon>
+    <icon type="success" size="30" color="#4cd964"></icon>
+    <icon type="success" size="40" color="#4cd964"></icon>
+    <icon type="success" size="50" color="#4cd964"></icon>
+  </view>
+</template>
+
+<style>
+.container {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+}
+</style>
+```
+
+### 示例 3: 不同颜色的图标
+
+```vue
+<template>
+  <view class="container">
+    <icon type="success" size="30" color="#4cd964"></icon>
+    <icon type="success" size="30" color="#007aff"></icon>
+    <icon type="success" size="30" color="#ff3b30"></icon>
+    <icon type="success" size="30" color="#ff9500"></icon>
+  </view>
+</template>
+```
+
+### 示例 4: 在按钮中使用
+
+```vue
+<template>
+  <view class="container">
+    <button class="icon-button">
+      <icon type="search" size="20" color="#fff"></icon>
+      <text>搜索</text>
+    </button>
+    <button class="icon-button">
+      <icon type="success" size="20" color="#fff"></icon>
+      <text>确认</text>
+    </button>
+  </view>
+</template>
+
+<style>
+.icon-button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+</style>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| type | String | - | icon 的类型，可选值：success、info、warn、waiting、clear、search 等 |
+| size | Number | 23 | icon 的大小，单位 px |
+| color | String | - | icon 的颜色，同 CSS 的 color |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `type` 的值在不同平台可能不同
+2. 建议使用 uni-icons 组件库获得更多图标
+3. `size` 单位为 px，不是 rpx
+4. `color` 可以使用任何 CSS 颜色值
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/icon.html
+- **uni-icons**: https://ext.dcloud.net.cn/plugin?id=28

.agents/bak-skills/uniappx-project/examples/components/built-in/image.md

@@ -0,0 +1,373 @@
+# image 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/image.html
+
+## 概述
+
+`image` 是图片组件，用于显示图片。
+
+## 基础用法
+
+```vue
+<template>
+  <image src="/static/logo.png" mode="aspectFit"></image>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 图片显示模式
+
+```vue
+<template>
+  <view class="container">
+    <view class="image-item">
+      <text>scaleToFill（默认）</text>
+      <image 
+        src="/static/logo.png" 
+        mode="scaleToFill"
+        style="width: 200px; height: 200px;"
+      ></image>
+    </view>
+    
+    <view class="image-item">
+      <text>aspectFit</text>
+      <image 
+        src="/static/logo.png" 
+        mode="aspectFit"
+        style="width: 200px; height: 200px;"
+      ></image>
+    </view>
+    
+    <view class="image-item">
+      <text>aspectFill</text>
+      <image 
+        src="/static/logo.png" 
+        mode="aspectFill"
+        style="width: 200px; height: 200px;"
+      ></image>
+    </view>
+    
+    <view class="image-item">
+      <text>widthFix</text>
+      <image 
+        src="/static/logo.png" 
+        mode="widthFix"
+        style="width: 200px;"
+      ></image>
+    </view>
+  </view>
+</template>
+
+<style>
+.container {
+  padding: 20px;
+}
+.image-item {
+  margin-bottom: 30px;
+}
+</style>
+```
+
+### 示例 2: 图片列表
+
+```vue
+<template>
+  <view class="container">
+    <view class="image-list">
+      <image 
+        v-for="(item, index) in imageList" 
+        :key="index"
+        :src="item"
+        mode="aspectFill"
+        class="image-item"
+        @click="previewImage(index)"
+      ></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageList: [
+        'https://example.com/image1.jpg',
+        'https://example.com/image2.jpg',
+        'https://example.com/image3.jpg'
+      ]
+    }
+  },
+  methods: {
+    previewImage(index) {
+      uni.previewImage({
+        current: index,
+        urls: this.imageList
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.image-item {
+  width: 200rpx;
+  height: 200rpx;
+  margin: 10rpx;
+  border-radius: 8rpx;
+}
+</style>
+```
+
+### 示例 3: 图片懒加载
+
+```vue
+<template>
+  <scroll-view scroll-y class="scroll-view">
+    <image 
+      v-for="(item, index) in imageList" 
+      :key="index"
+      :src="item"
+      mode="aspectFill"
+      lazy-load
+      class="lazy-image"
+    ></image>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageList: [
+        'https://example.com/image1.jpg',
+        'https://example.com/image2.jpg',
+        // ... 更多图片
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+.scroll-view {
+  height: 100vh;
+}
+.lazy-image {
+  width: 100%;
+  height: 400rpx;
+  margin-bottom: 20rpx;
+}
+</style>
+```
+
+### 示例 4: 图片加载和错误处理
+
+```vue
+<template>
+  <view class="container">
+    <image 
+      :src="imageUrl"
+      mode="aspectFit"
+      @load="handleLoad"
+      @error="handleError"
+      :class="{ 'error-image': hasError }"
+    ></image>
+    <text v-if="hasError" class="error-text">图片加载失败</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageUrl: 'https://example.com/image.jpg',
+      hasError: false
+    }
+  },
+  methods: {
+    handleLoad(e) {
+      console.log('图片加载成功', e.detail)
+      this.hasError = false
+    },
+    handleError(e) {
+      console.error('图片加载失败', e.detail)
+      this.hasError = true
+    }
+  }
+}
+</script>
+
+<style>
+.error-image {
+  background-color: #f5f5f5;
+}
+.error-text {
+  color: #ff3b30;
+  font-size: 24rpx;
+  margin-top: 10rpx;
+}
+</style>
+```
+
+### 示例 5: 占位图和加载状态
+
+```vue
+<template>
+  <view class="container">
+    <view class="image-wrapper">
+      <image 
+        v-if="!imageLoaded"
+        src="/static/placeholder.png"
+        mode="aspectFit"
+        class="placeholder"
+      ></image>
+      <image 
+        :src="imageUrl"
+        mode="aspectFit"
+        @load="imageLoaded = true"
+        :class="{ 'hidden': !imageLoaded }"
+        class="main-image"
+      ></image>
+      <view v-if="loading" class="loading">加载中...</view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageUrl: 'https://example.com/image.jpg',
+      imageLoaded: false,
+      loading: true
+    }
+  },
+  methods: {
+    handleLoad() {
+      this.imageLoaded = true
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style>
+.image-wrapper {
+  position: relative;
+  width: 400rpx;
+  height: 400rpx;
+}
+.placeholder {
+  width: 100%;
+  height: 100%;
+}
+.main-image {
+  width: 100%;
+  height: 100%;
+}
+.hidden {
+  display: none;
+}
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #999;
+}
+</style>
+```
+
+### 示例 6: 网络图片和本地图片
+
+```vue
+<template>
+  <view class="container">
+    <!-- 本地图片 -->
+    <image src="/static/logo.png" mode="aspectFit"></image>
+    
+    <!-- 网络图片 -->
+    <image 
+      src="https://example.com/image.jpg" 
+      mode="aspectFit"
+    ></image>
+    
+    <!-- 动态图片 -->
+    <image 
+      :src="dynamicImageUrl" 
+      mode="aspectFit"
+    ></image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dynamicImageUrl: 'https://example.com/image.jpg'
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| src | String | - | 图片资源地址 |
+| mode | String | scaleToFill | 图片裁剪、缩放的模式 |
+| lazy-load | Boolean | false | 图片懒加载 |
+| webp | Boolean | false | 是否启用 webp 格式 |
+
+## mode 可选值
+
+| 值 | 说明 |
+|----|------|
+| scaleToFill | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
+| aspectFit | 保持纵横比缩放图片，使图片的长边能完全显示出来 |
+| aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来 |
+| widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 |
+| heightFix | 高度不变，宽度自动变化，保持原图宽高比不变 |
+| top | 不缩放图片，只显示图片的顶部区域 |
+| bottom | 不缩放图片，只显示图片的底部区域 |
+| center | 不缩放图片，只显示图片的中间区域 |
+| left | 不缩放图片，只显示图片的左边区域 |
+| right | 不缩放图片，只显示图片的右边区域 |
+| top left | 不缩放图片，只显示图片的左上边区域 |
+| top right | 不缩放图片，只显示图片的右上边区域 |
+| bottom left | 不缩放图片，只显示图片的左下边区域 |
+| bottom right | 不缩放图片，只显示图片的右下边区域 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 网络图片需要配置合法域名
+2. 本地图片路径需要使用 `/static/` 开头
+3. `lazy-load` 只对 page 和 scroll-view 下的 image 有效
+4. 建议使用合适的 `mode` 值以优化显示效果
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/image.html
+- **预览图片**: https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#previewimage

.agents/bak-skills/uniappx-project/examples/components/built-in/input.md

@@ -0,0 +1,331 @@
+# input 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/input.html
+
+## 概述
+
+`input` 是单行输入框组件，用于用户输入文本。
+
+## 基础用法
+
+```vue
+<template>
+  <input v-model="value" placeholder="请输入内容" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: ''
+    }
+  }
+}
+</script>
+```
+
+## 完整示例
+
+### 示例 1: 基本输入框
+
+```vue
+<template>
+  <view class="container">
+    <input 
+      v-model="inputValue" 
+      placeholder="请输入内容"
+      @input="handleInput"
+    />
+    <text>输入的内容：{{ inputValue }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      inputValue: ''
+    }
+  },
+  methods: {
+    handleInput(e) {
+      this.inputValue = e.detail.value
+    }
+  }
+}
+</script>
+```
+
+### 示例 2: 不同类型的输入框
+
+```vue
+<template>
+  <view class="container">
+    <input type="text" placeholder="文本输入" />
+    <input type="number" placeholder="数字输入" />
+    <input type="digit" placeholder="带小数点的数字" />
+    <input type="idcard" placeholder="身份证号" />
+    <input type="tel" placeholder="电话号码" />
+    <input type="safe-password" placeholder="安全密码" />
+    <input type="nickname" placeholder="昵称" />
+  </view>
+</template>
+```
+
+### 示例 3: 密码输入框
+
+```vue
+<template>
+  <view class="container">
+    <input 
+      type="text"
+      password
+      placeholder="请输入密码"
+      v-model="password"
+    />
+    <input 
+      type="text"
+      :password="!showPassword"
+      placeholder="显示/隐藏密码"
+      v-model="password2"
+    />
+    <button @click="showPassword = !showPassword">
+      {{ showPassword ? '隐藏' : '显示' }}密码
+    </button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      password: '',
+      password2: '',
+      showPassword: false
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 限制输入长度
+
+```vue
+<template>
+  <view class="container">
+    <input 
+      v-model="value"
+      placeholder="最多输入10个字符"
+      maxlength="10"
+      @input="handleInput"
+    />
+    <text>已输入：{{ value.length }}/10</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: ''
+    }
+  },
+  methods: {
+    handleInput(e) {
+      this.value = e.detail.value
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 获取焦点
+
+```vue
+<template>
+  <view class="container">
+    <input 
+      ref="input"
+      v-model="value"
+      placeholder="点击按钮获取焦点"
+      :focus="isFocused"
+    />
+    <button @click="focusInput">获取焦点</button>
+    <button @click="blurInput">失去焦点</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      isFocused: false
+    }
+  },
+  methods: {
+    focusInput() {
+      this.isFocused = true
+      // 或使用组件方法
+      this.$refs.input.focus()
+    },
+    blurInput() {
+      this.isFocused = false
+      // 或使用组件方法
+      this.$refs.input.blur()
+    }
+  }
+}
+</script>
+```
+
+### 示例 6: 确认按钮
+
+```vue
+<template>
+  <view class="container">
+    <input 
+      v-model="value"
+      placeholder="输入后点击键盘确认"
+      confirm-type="search"
+      @confirm="handleConfirm"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: ''
+    }
+  },
+  methods: {
+    handleConfirm(e) {
+      console.log('确认输入', e.detail.value)
+      uni.showToast({
+        title: '搜索：' + e.detail.value,
+        icon: 'none'
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 7: 表单验证
+
+```vue
+<template>
+  <view class="container">
+    <input 
+      v-model="email"
+      type="text"
+      placeholder="请输入邮箱"
+      @blur="validateEmail"
+    />
+    <text v-if="emailError" class="error">{{ emailError }}</text>
+    
+    <input 
+      v-model="phone"
+      type="tel"
+      placeholder="请输入手机号"
+      maxlength="11"
+      @blur="validatePhone"
+    />
+    <text v-if="phoneError" class="error">{{ phoneError }}</text>
+    
+    <button @click="submit">提交</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      email: '',
+      phone: '',
+      emailError: '',
+      phoneError: ''
+    }
+  },
+  methods: {
+    validateEmail() {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+      if (this.email && !emailRegex.test(this.email)) {
+        this.emailError = '邮箱格式不正确'
+      } else {
+        this.emailError = ''
+      }
+    },
+    validatePhone() {
+      const phoneRegex = /^1[3-9]\d{9}$/
+      if (this.phone && !phoneRegex.test(this.phone)) {
+        this.phoneError = '手机号格式不正确'
+      } else {
+        this.phoneError = ''
+      }
+    },
+    submit() {
+      this.validateEmail()
+      this.validatePhone()
+      if (!this.emailError && !this.phoneError) {
+        uni.showToast({
+          title: '提交成功',
+          icon: 'success'
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.error {
+  color: #ff3b30;
+  font-size: 24rpx;
+  margin-top: 10rpx;
+}
+</style>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| value | String | - | 输入框的初始内容 |
+| type | String | text | input 的类型，可选值：text、number、digit、idcard、tel、safe-password、nickname |
+| password | Boolean | false | 是否是密码类型 |
+| placeholder | String | - | 输入框为空时占位符 |
+| disabled | Boolean | false | 是否禁用 |
+| maxlength | Number | 140 | 最大输入长度，-1 表示不限制 |
+| focus | Boolean | false | 获取焦点 |
+| confirm-type | String | done | 设置键盘右下角按钮的文字 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `v-model` 是双向绑定的推荐方式
+2. `maxlength` 设置为 -1 时不限制最大长度
+3. `focus` 属性在 H5 和 App 上需要特殊处理
+4. `confirm-type` 在不同平台支持的值可能不同
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/input.html
+- **表单组件**: https://doc.dcloud.net.cn/uni-app-x/component/form.html

.agents/bak-skills/uniappx-project/examples/components/built-in/label.md

@@ -0,0 +1,262 @@
+# label 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/label.html
+
+## 概述
+
+`label` 是标签组件，用于改进表单组件的可用性。
+
+## 基础用法
+
+```vue
+<template>
+  <label>
+    <checkbox value="option1" />
+    <text>选项1</text>
+  </label>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 配合 checkbox 使用
+
+```vue
+<template>
+  <view class="container">
+    <checkbox-group @change="handleChange">
+      <label class="checkbox-label">
+        <checkbox value="option1" />
+        <text>选项1</text>
+      </label>
+      <label class="checkbox-label">
+        <checkbox value="option2" />
+        <text>选项2</text>
+      </label>
+      <label class="checkbox-label">
+        <checkbox value="option3" />
+        <text>选项3</text>
+      </label>
+    </checkbox-group>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleChange(e) {
+      console.log('选中的值', e.detail.value)
+    }
+  }
+}
+</script>
+
+<style>
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+</style>
+```
+
+### 示例 2: 配合 radio 使用
+
+```vue
+<template>
+  <view class="container">
+    <radio-group @change="handleChange">
+      <label class="radio-label">
+        <radio value="male" />
+        <text>男</text>
+      </label>
+      <label class="radio-label">
+        <radio value="female" />
+        <text>女</text>
+      </label>
+    </radio-group>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleChange(e) {
+      console.log('选中的值', e.detail.value)
+    }
+  }
+}
+</script>
+
+<style>
+.radio-label {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+</style>
+```
+
+### 示例 3: 配合 switch 使用
+
+```vue
+<template>
+  <view class="container">
+    <label class="switch-label">
+      <text>开启通知</text>
+      <switch :checked="notifyEnabled" @change="handleSwitchChange" />
+    </label>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      notifyEnabled: false
+    }
+  },
+  methods: {
+    handleSwitchChange(e) {
+      this.notifyEnabled = e.detail.value
+    }
+  }
+}
+</script>
+
+<style>
+.switch-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+}
+</style>
+```
+
+### 示例 4: 配合 input 使用
+
+```vue
+<template>
+  <view class="container">
+    <label class="input-label">
+      <text>用户名：</text>
+      <input v-model="username" placeholder="请输入用户名" />
+    </label>
+    <label class="input-label">
+      <text>密码：</text>
+      <input v-model="password" type="password" placeholder="请输入密码" />
+    </label>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: ''
+    }
+  }
+}
+</script>
+
+<style>
+.input-label {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+</style>
+```
+
+### 示例 5: 表单列表
+
+```vue
+<template>
+  <view class="container">
+    <view class="form-list">
+      <label class="form-item">
+        <text class="label-text">同意协议</text>
+        <checkbox value="agree" />
+      </label>
+      <label class="form-item">
+        <text class="label-text">接收通知</text>
+        <switch :checked="notifyEnabled" @change="notifyEnabled = $event.detail.value" />
+      </label>
+      <label class="form-item">
+        <text class="label-text">性别</text>
+        <radio-group>
+          <radio value="male" />男
+          <radio value="female" />女
+        </radio-group>
+      </label>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      notifyEnabled: false
+    }
+  }
+}
+</script>
+
+<style>
+.form-list {
+  padding: 20px;
+}
+.form-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 0;
+  border-bottom: 1px solid #eee;
+}
+.label-text {
+  font-size: 32rpx;
+  color: #333;
+}
+</style>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| for | String | - | 绑定控件的 id |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `label` 用于改进表单组件的可用性
+2. 点击 `label` 内的文本可以触发关联的表单控件
+3. 可以配合 `checkbox`、`radio`、`switch`、`input` 等使用
+4. 建议使用 `label` 包裹表单控件和文本
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/label.html
+- **复选框**: https://doc.dcloud.net.cn/uni-app-x/component/checkbox.html
+- **单选框**: https://doc.dcloud.net.cn/uni-app-x/component/radio.html

.agents/bak-skills/uniappx-project/examples/components/built-in/map.md

@@ -0,0 +1,326 @@
+# map 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/map.html
+
+## 概述
+
+`map` 是地图组件，用于显示地图和标记位置。
+
+## 基础用法
+
+```vue
+<template>
+  <map 
+    :latitude="latitude"
+    :longitude="longitude"
+    :markers="markers"
+  ></map>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      latitude: 39.908823,
+      longitude: 116.397470,
+      markers: [{
+        id: 1,
+        latitude: 39.908823,
+        longitude: 116.397470,
+        title: '天安门'
+      }]
+    }
+  }
+}
+</script>
+```
+
+## 完整示例
+
+### 示例 1: 基本地图
+
+```vue
+<template>
+  <view class="container">
+    <map 
+      :latitude="latitude"
+      :longitude="longitude"
+      :scale="scale"
+      class="map"
+    ></map>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      latitude: 39.908823,
+      longitude: 116.397470,
+      scale: 16
+    }
+  }
+}
+</script>
+
+<style>
+.map {
+  width: 100%;
+  height: 500px;
+}
+</style>
+```
+
+### 示例 2: 地图标记
+
+```vue
+<template>
+  <view class="container">
+    <map 
+      :latitude="latitude"
+      :longitude="longitude"
+      :markers="markers"
+      :show-location="true"
+      class="map"
+      @markertap="handleMarkerTap"
+    ></map>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      latitude: 39.908823,
+      longitude: 116.397470,
+      markers: [
+        {
+          id: 1,
+          latitude: 39.908823,
+          longitude: 116.397470,
+          title: '天安门',
+          iconPath: '/static/marker.png',
+          width: 30,
+          height: 30
+        },
+        {
+          id: 2,
+          latitude: 39.918823,
+          longitude: 116.407470,
+          title: '故宫',
+          iconPath: '/static/marker.png',
+          width: 30,
+          height: 30
+        }
+      ]
+    }
+  },
+  methods: {
+    handleMarkerTap(e) {
+      const markerId = e.detail.markerId
+      const marker = this.markers.find(m => m.id === markerId)
+      if (marker) {
+        uni.showToast({
+          title: marker.title,
+          icon: 'none'
+        })
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 显示当前位置
+
+```vue
+<template>
+  <view class="container">
+    <map 
+      :latitude="latitude"
+      :longitude="longitude"
+      :show-location="true"
+      :enable-zoom="true"
+      class="map"
+    ></map>
+    <button @click="getCurrentLocation">获取当前位置</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      latitude: 39.908823,
+      longitude: 116.397470
+    }
+  },
+  onLoad() {
+    this.getCurrentLocation()
+  },
+  methods: {
+    getCurrentLocation() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          this.latitude = res.latitude
+          this.longitude = res.longitude
+        },
+        fail: () => {
+          uni.showToast({
+            title: '获取位置失败',
+            icon: 'none'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 地图控件
+
+```vue
+<template>
+  <view class="container">
+    <map 
+      :latitude="latitude"
+      :longitude="longitude"
+      :controls="controls"
+      :show-location="true"
+      class="map"
+      @controltap="handleControlTap"
+    ></map>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      latitude: 39.908823,
+      longitude: 116.397470,
+      controls: [
+        {
+          id: 1,
+          iconPath: '/static/location.png',
+          position: {
+            left: 10,
+            top: 10,
+            width: 30,
+            height: 30
+          },
+          clickable: true
+        }
+      ]
+    }
+  },
+  methods: {
+    handleControlTap(e) {
+      const controlId = e.detail.controlId
+      if (controlId === 1) {
+        this.getCurrentLocation()
+      }
+    },
+    getCurrentLocation() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          this.latitude = res.latitude
+          this.longitude = res.longitude
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 地图事件
+
+```vue
+<template>
+  <view class="container">
+    <map 
+      :latitude="latitude"
+      :longitude="longitude"
+      :markers="markers"
+      class="map"
+      @tap="handleMapTap"
+      @regionchange="handleRegionChange"
+      @updated="handleMapUpdated"
+    ></map>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      latitude: 39.908823,
+      longitude: 116.397470,
+      markers: []
+    }
+  },
+  methods: {
+    handleMapTap(e) {
+      console.log('地图点击', e.detail)
+      // 添加标记
+      const newMarker = {
+        id: Date.now(),
+        latitude: e.detail.latitude,
+        longitude: e.detail.longitude,
+        title: '新位置'
+      }
+      this.markers.push(newMarker)
+    },
+    handleRegionChange(e) {
+      console.log('地图区域变化', e.detail)
+    },
+    handleMapUpdated() {
+      console.log('地图更新完成')
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| latitude | Number | - | 中心纬度 |
+| longitude | Number | - | 中心经度 |
+| scale | Number | 16 | 缩放级别，取值范围为 5-18 |
+| markers | Array | [] | 标记点 |
+| show-location | Boolean | false | 显示带有方向的当前定位点 |
+| controls | Array | [] | 控件 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 需要使用 `gcj02` 类型的坐标
+2. `markers` 数组中的每个标记需要唯一 `id`
+3. `show-location` 可以显示当前位置
+4. 可以通过事件监听地图交互
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/map.html
+- **获取位置**: https://doc.dcloud.net.cn/uni-app-x/api/location/location.html#getlocation

.agents/bak-skills/uniappx-project/examples/components/built-in/navigator.md

@@ -0,0 +1,204 @@
+# navigator 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/navigator.html
+
+## 概述
+
+`navigator` 是页面链接组件，用于页面跳转。
+
+## 基础用法
+
+```vue
+<template>
+  <navigator url="/pages/detail/detail">跳转到详情页</navigator>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 基本跳转
+
+```vue
+<template>
+  <view class="container">
+    <navigator url="/pages/detail/detail">跳转到详情页</navigator>
+  </view>
+</template>
+```
+
+### 示例 2: 带参数跳转
+
+```vue
+<template>
+  <view class="container">
+    <navigator url="/pages/detail/detail?id=123&name=test">
+      跳转到详情页
+    </navigator>
+  </view>
+</template>
+```
+
+### 示例 3: 不同跳转方式
+
+```vue
+<template>
+  <view class="container">
+    <!-- 保留当前页面，可以返回 -->
+    <navigator url="/pages/detail/detail" open-type="navigate">
+      保留页面跳转
+    </navigator>
+    
+    <!-- 关闭当前页面，不能返回 -->
+    <navigator url="/pages/detail/detail" open-type="redirect">
+      关闭页面跳转
+    </navigator>
+    
+    <!-- 关闭所有页面，重新启动 -->
+    <navigator url="/pages/index/index" open-type="reLaunch">
+      重新启动
+    </navigator>
+    
+    <!-- 跳转到 tabBar 页面 -->
+    <navigator url="/pages/index/index" open-type="switchTab">
+      切换到首页
+    </navigator>
+    
+    <!-- 返回上一页 -->
+    <navigator open-type="navigateBack" :delta="1">
+      返回上一页
+    </navigator>
+  </view>
+</template>
+```
+
+### 示例 4: 列表跳转
+
+```vue
+<template>
+  <view class="container">
+    <view 
+      v-for="item in list" 
+      :key="item.id"
+      class="list-item"
+    >
+      <navigator :url="`/pages/detail/detail?id=${item.id}`">
+        <text>{{ item.title }}</text>
+        <text class="arrow">></text>
+      </navigator>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { id: 1, title: '项目1' },
+        { id: 2, title: '项目2' },
+        { id: 3, title: '项目3' }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+.list-item {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+.arrow {
+  float: right;
+  color: #999;
+}
+</style>
+```
+
+### 示例 5: 条件跳转
+
+```vue
+<template>
+  <view class="container">
+    <navigator 
+      v-if="isLogin"
+      url="/pages/user/user"
+      open-type="navigate"
+    >
+      个人中心
+    </navigator>
+    <navigator 
+      v-else
+      url="/pages/login/login"
+      open-type="navigate"
+    >
+      登录
+    </navigator>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isLogin: false
+    }
+  },
+  onLoad() {
+    this.checkLogin()
+  },
+  methods: {
+    checkLogin() {
+      const token = uni.getStorageSync('token')
+      this.isLogin = !!token
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| url | String | - | 应用内的跳转链接 |
+| open-type | String | navigate | 跳转方式，可选值：navigate、redirect、switchTab、reLaunch、navigateBack |
+| delta | Number | 1 | 当 open-type 为 navigateBack 时有效，表示返回的页面数 |
+
+## open-type 可选值
+
+| 值 | 说明 |
+|----|------|
+| navigate | 保留当前页面，跳转到应用内的某个页面 |
+| redirect | 关闭当前页面，跳转到应用内的某个页面 |
+| switchTab | 跳转到 tabBar 页面 |
+| reLaunch | 关闭所有页面，打开到应用内的某个页面 |
+| navigateBack | 关闭当前页面，返回上一页面或多级页面 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `url` 必须以 `/` 开头
+2. `open-type` 为 `switchTab` 时，只能跳转到 tabBar 页面
+3. `open-type` 为 `navigateBack` 时，不需要 `url` 参数
+4. 可以通过 `delta` 控制返回的页面数
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/navigator.html
+- **页面路由**: https://doc.dcloud.net.cn/uni-app-x/api/router.html

.agents/bak-skills/uniappx-project/examples/components/built-in/picker.md

@@ -0,0 +1,290 @@
+# picker 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/picker.html
+
+## 概述
+
+`picker` 是滚动选择器组件，支持普通选择器、多列选择器、时间选择器、日期选择器等。
+
+## 基础用法
+
+```vue
+<template>
+  <picker mode="selector" :range="options" @change="handleChange">
+    <view>请选择</view>
+  </picker>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: ['选项1', '选项2', '选项3']
+    }
+  },
+  methods: {
+    handleChange(e) {
+      console.log('选中的索引', e.detail.value)
+    }
+  }
+}
+</script>
+```
+
+## 完整示例
+
+### 示例 1: 普通选择器
+
+```vue
+<template>
+  <view class="container">
+    <picker 
+      mode="selector" 
+      :range="options"
+      :value="selectedIndex"
+      @change="handleChange"
+    >
+      <view class="picker-view">
+        <text>{{ selectedText || '请选择' }}</text>
+        <text class="arrow">></text>
+      </view>
+    </picker>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: ['选项1', '选项2', '选项3', '选项4'],
+      selectedIndex: 0,
+      selectedText: ''
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.selectedIndex = e.detail.value
+      this.selectedText = this.options[e.detail.value]
+      console.log('选中的值', this.selectedText)
+    }
+  }
+}
+</script>
+
+<style>
+.picker-view {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+.arrow {
+  color: #999;
+}
+</style>
+```
+
+### 示例 2: 多列选择器
+
+```vue
+<template>
+  <view class="container">
+    <picker 
+      mode="multiSelector" 
+      :range="multiArray"
+      :value="multiIndex"
+      @change="handleMultiChange"
+      @columnchange="handleColumnChange"
+    >
+      <view class="picker-view">
+        <text>{{ displayText || '请选择省市区' }}</text>
+        <text class="arrow">></text>
+      </view>
+    </picker>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      multiArray: [
+        ['北京', '上海', '广东'],
+        ['朝阳区', '海淀区', '丰台区'],
+        ['街道1', '街道2', '街道3']
+      ],
+      multiIndex: [0, 0, 0],
+      displayText: ''
+    }
+  },
+  methods: {
+    handleMultiChange(e) {
+      this.multiIndex = e.detail.value
+      this.updateDisplayText()
+    },
+    handleColumnChange(e) {
+      // 当某一列改变时，可以更新其他列的数据
+      const column = e.detail.column
+      const row = e.detail.value
+      this.multiIndex[column] = row
+      this.updateDisplayText()
+    },
+    updateDisplayText() {
+      this.displayText = this.multiArray.map((arr, index) => {
+        return arr[this.multiIndex[index]]
+      }).join(' ')
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 时间选择器
+
+```vue
+<template>
+  <view class="container">
+    <picker 
+      mode="time" 
+      :value="time"
+      @change="handleTimeChange"
+    >
+      <view class="picker-view">
+        <text>{{ time || '请选择时间' }}</text>
+        <text class="arrow">></text>
+      </view>
+    </picker>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      time: ''
+    }
+  },
+  methods: {
+    handleTimeChange(e) {
+      this.time = e.detail.value
+      console.log('选择的时间', this.time)
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 日期选择器
+
+```vue
+<template>
+  <view class="container">
+    <picker 
+      mode="date" 
+      :value="date"
+      :start="startDate"
+      :end="endDate"
+      @change="handleDateChange"
+    >
+      <view class="picker-view">
+        <text>{{ date || '请选择日期' }}</text>
+        <text class="arrow">></text>
+      </view>
+    </picker>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: '',
+      startDate: '2020-01-01',
+      endDate: '2030-12-31'
+    }
+  },
+  methods: {
+    handleDateChange(e) {
+      this.date = e.detail.value
+      console.log('选择的日期', this.date)
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 地区选择器
+
+```vue
+<template>
+  <view class="container">
+    <picker 
+      mode="region" 
+      :value="region"
+      @change="handleRegionChange"
+    >
+      <view class="picker-view">
+        <text>{{ regionText || '请选择地区' }}</text>
+        <text class="arrow">></text>
+      </view>
+    </picker>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      region: [],
+      regionText: ''
+    }
+  },
+  methods: {
+    handleRegionChange(e) {
+      this.region = e.detail.value
+      this.regionText = e.detail.value.join(' ')
+      console.log('选择的地区', this.region)
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| mode | String | selector | 选择器类型，可选值：selector、multiSelector、time、date、region |
+| range | Array | [] | mode 为 selector 或 multiSelector 时，range 有效 |
+| value | Number/Array | 0 | 表示选择了 range 中的第几个（下标从 0 开始） |
+| start | String | - | 有效值范围的开始，字符串格式为 "YYYY-MM-DD" |
+| end | String | - | 有效值范围的结束，字符串格式为 "YYYY-MM-DD" |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `mode` 不同，`range` 和 `value` 的格式也不同
+2. 时间选择器的 `value` 格式为 "HH:mm"
+3. 日期选择器的 `value` 格式为 "YYYY-MM-DD"
+4. 多列选择器需要配合 `@columnchange` 事件处理联动
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/picker.html
+- **滚动选择器**: https://doc.dcloud.net.cn/uni-app-x/component/picker-view.html

.agents/bak-skills/uniappx-project/examples/components/built-in/progress.md

@@ -0,0 +1,209 @@
+# progress 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/progress.html
+
+## 概述
+
+`progress` 是进度条组件，用于显示任务进度。
+
+## 基础用法
+
+```vue
+<template>
+  <progress :percent="50"></progress>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 基本进度条
+
+```vue
+<template>
+  <view class="container">
+    <progress :percent="progress" />
+    <text>{{ progress }}%</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      progress: 50
+    }
+  }
+}
+</script>
+```
+
+### 示例 2: 显示进度百分比
+
+```vue
+<template>
+  <view class="container">
+    <progress :percent="progress" :show-info="true" />
+    <button @click="increaseProgress">增加进度</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      progress: 0
+    }
+  },
+  methods: {
+    increaseProgress() {
+      if (this.progress < 100) {
+        this.progress += 10
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 不同颜色
+
+```vue
+<template>
+  <view class="container">
+    <progress :percent="50" color="#007aff" />
+    <progress :percent="60" color="#4cd964" />
+    <progress :percent="70" color="#ff3b30" />
+  </view>
+</template>
+```
+
+### 示例 4: 文件上传进度
+
+```vue
+<template>
+  <view class="container">
+    <progress :percent="uploadProgress" :show-info="true" />
+    <button @click="uploadFile">上传文件</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      uploadProgress: 0
+    }
+  },
+  methods: {
+    uploadFile() {
+      uni.chooseImage({
+        count: 1,
+        success: (res) => {
+          const tempFilePath = res.tempFilePaths[0]
+          this.uploadProgress = 0
+          
+          // 模拟上传进度
+          const interval = setInterval(() => {
+            this.uploadProgress += 10
+            if (this.uploadProgress >= 100) {
+              clearInterval(interval)
+              uni.showToast({
+                title: '上传完成',
+                icon: 'success'
+              })
+            }
+          }, 200)
+          
+          // 实际上传
+          uni.uploadFile({
+            url: 'https://api.example.com/upload',
+            filePath: tempFilePath,
+            name: 'file',
+            success: () => {
+              clearInterval(interval)
+              this.uploadProgress = 100
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 动画进度条
+
+```vue
+<template>
+  <view class="container">
+    <progress 
+      :percent="progress" 
+      :active="true"
+      :active-color="activeColor"
+    />
+    <button @click="startProgress">开始进度</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      progress: 0,
+      activeColor: '#007aff'
+    }
+  },
+  methods: {
+    startProgress() {
+      this.progress = 0
+      const interval = setInterval(() => {
+        this.progress += 2
+        if (this.progress >= 100) {
+          clearInterval(interval)
+          this.activeColor = '#4cd964'
+        }
+      }, 100)
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| percent | Number | 0 | 百分比 0~100 |
+| show-info | Boolean | false | 在进度条右侧显示百分比 |
+| stroke-width | Number | 6 | 进度条线的宽度，单位 px |
+| active | Boolean | false | 进度条是否显示动画 |
+| active-color | String | #007aff | 已选择的进度条的颜色 |
+| backgroundColor | String | #ebebeb | 未选择的进度条的颜色 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `percent` 值范围是 0-100
+2. `show-info` 可以在右侧显示百分比文字
+3. `active` 可以启用动画效果
+4. 可以通过 `active-color` 自定义颜色
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/progress.html

.agents/bak-skills/uniappx-project/examples/components/built-in/radio.md

@@ -0,0 +1,172 @@
+# radio 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/radio.html
+
+## 概述
+
+`radio` 是单项选择器组件，用于单选场景。
+
+## 基础用法
+
+```vue
+<template>
+  <radio value="option1" checked>选项1</radio>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 单个单选框
+
+```vue
+<template>
+  <view class="container">
+    <radio value="male" :checked="gender === 'male'" @tap="handleChange">
+      男
+    </radio>
+    <radio value="female" :checked="gender === 'female'" @tap="handleChange">
+      女
+    </radio>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      gender: 'male'
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.gender = e.detail.value
+      console.log('选择的性别', this.gender)
+    }
+  }
+}
+</script>
+```
+
+### 示例 2: 单选框组
+
+```vue
+<template>
+  <view class="container">
+    <radio-group @change="handleGroupChange">
+      <label v-for="item in options" :key="item.value" class="radio-item">
+        <radio :value="item.value" :checked="selectedValue === item.value" />
+        <text>{{ item.label }}</text>
+      </label>
+    </radio-group>
+    <text>已选择：{{ selectedValue }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        { value: 'option1', label: '选项1' },
+        { value: 'option2', label: '选项2' },
+        { value: 'option3', label: '选项3' }
+      ],
+      selectedValue: 'option1'
+    }
+  },
+  methods: {
+    handleGroupChange(e) {
+      this.selectedValue = e.detail.value
+      console.log('选中的值', this.selectedValue)
+    }
+  }
+}
+</script>
+
+<style>
+.radio-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+</style>
+```
+
+### 示例 3: 在表单中使用
+
+```vue
+<template>
+  <form @submit="handleSubmit">
+    <view class="form-item">
+      <text>支付方式：</text>
+      <radio-group name="payment" @change="handlePaymentChange">
+        <label v-for="method in paymentMethods" :key="method.value" class="radio-item">
+          <radio :value="method.value" />
+          <text>{{ method.label }}</text>
+        </label>
+      </radio-group>
+    </view>
+    <button form-type="submit">提交</button>
+  </form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      paymentMethods: [
+        { value: 'alipay', label: '支付宝' },
+        { value: 'wechat', label: '微信支付' },
+        { value: 'bank', label: '银行卡' }
+      ],
+      selectedPayment: ''
+    }
+  },
+  methods: {
+    handlePaymentChange(e) {
+      this.selectedPayment = e.detail.value
+    },
+    handleSubmit(e) {
+      console.log('选择的支付方式', this.selectedPayment)
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| value | String | - | radio 标识，选中时触发 change 事件，并携带 value |
+| checked | Boolean | false | 当前是否选中 |
+| disabled | Boolean | false | 是否禁用 |
+| color | String | #007aff | radio 的颜色 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 需要配合 `radio-group` 使用才能获取选中的值
+2. 同一组内只能选择一个选项
+3. `value` 用于标识不同的选项
+4. `checked` 属性控制选中状态
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/radio.html
+- **表单组件**: https://doc.dcloud.net.cn/uni-app-x/component/form.html

.agents/bak-skills/uniappx-project/examples/components/built-in/rich-text.md

@@ -0,0 +1,247 @@
+# rich-text 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/rich-text.html
+
+## 概述
+
+`rich-text` 是富文本组件，用于显示富文本内容。
+
+## 基础用法
+
+```vue
+<template>
+  <rich-text :nodes="htmlContent"></rich-text>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      htmlContent: '<div>这是富文本内容</div>'
+    }
+  }
+}
+</script>
+```
+
+## 完整示例
+
+### 示例 1: 显示 HTML 内容
+
+```vue
+<template>
+  <view class="container">
+    <rich-text :nodes="htmlContent"></rich-text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      htmlContent: `
+        <div>
+          <h1>标题</h1>
+          <p>这是一段<strong>加粗</strong>的文字</p>
+          <p>这是一段<em>斜体</em>的文字</p>
+          <ul>
+            <li>列表项1</li>
+            <li>列表项2</li>
+          </ul>
+        </div>
+      `
+    }
+  }
+}
+</script>
+```
+
+### 示例 2: 显示网络 HTML
+
+```vue
+<template>
+  <view class="container">
+    <rich-text :nodes="htmlContent"></rich-text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      htmlContent: ''
+    }
+  },
+  onLoad() {
+    this.loadHtmlContent()
+  },
+  methods: {
+    loadHtmlContent() {
+      uni.request({
+        url: 'https://api.example.com/article',
+        success: (res) => {
+          this.htmlContent = res.data.content
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 使用对象数组
+
+```vue
+<template>
+  <view class="container">
+    <rich-text :nodes="nodes"></rich-text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      nodes: [
+        {
+          name: 'div',
+          attrs: {
+            class: 'wrapper',
+            style: 'color: red;'
+          },
+          children: [
+            {
+              type: 'text',
+              text: 'Hello World!'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 混合使用
+
+```vue
+<template>
+  <view class="container">
+    <rich-text :nodes="mixedContent"></rich-text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      mixedContent: [
+        '<p>这是HTML字符串</p>',
+        {
+          name: 'div',
+          attrs: {
+            style: 'color: blue;'
+          },
+          children: [
+            {
+              type: 'text',
+              text: '这是对象节点'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 文章详情页
+
+```vue
+<template>
+  <view class="container">
+    <view class="article-header">
+      <text class="title">{{ article.title }}</text>
+      <text class="date">{{ article.date }}</text>
+    </view>
+    <rich-text :nodes="article.content" class="article-content"></rich-text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      article: {
+        title: '文章标题',
+        date: '2024-01-01',
+        content: `
+          <div>
+            <h2>第一章</h2>
+            <p>这是文章的第一段内容...</p>
+            <img src="https://example.com/image.jpg" />
+            <h2>第二章</h2>
+            <p>这是文章的第二段内容...</p>
+          </div>
+        `
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.article-header {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+.title {
+  font-size: 36rpx;
+  font-weight: bold;
+  display: block;
+  margin-bottom: 10px;
+}
+.date {
+  font-size: 24rpx;
+  color: #999;
+}
+.article-content {
+  padding: 20px;
+}
+</style>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| nodes | String/Array | - | 节点列表/HTML String |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `nodes` 可以是 HTML 字符串或对象数组
+2. 不同平台支持的 HTML 标签可能不同
+3. 建议使用对象数组格式以获得更好的兼容性
+4. 图片需要配置合法域名
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/rich-text.html

.agents/bak-skills/uniappx-project/examples/components/built-in/scroll-view.md

@@ -0,0 +1,337 @@
+# scroll-view 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/scroll-view.html
+
+## 概述
+
+`scroll-view` 是可滚动视图容器组件，用于实现可滚动的区域。
+
+## 基础用法
+
+```vue
+<template>
+  <scroll-view scroll-y class="scroll-view">
+    <view v-for="item in list" :key="item.id">{{ item.name }}</view>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { id: 1, name: '项目1' },
+        { id: 2, name: '项目2' }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+.scroll-view {
+  height: 400px;
+}
+</style>
+```
+
+## 完整示例
+
+### 示例 1: 垂直滚动
+
+```vue
+<template>
+  <scroll-view 
+    scroll-y 
+    class="scroll-view"
+    @scroll="handleScroll"
+  >
+    <view 
+      v-for="item in list" 
+      :key="item.id"
+      class="list-item"
+    >
+      {{ item.name }}
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: Array.from({ length: 50 }, (_, i) => ({
+        id: i + 1,
+        name: `项目 ${i + 1}`
+      }))
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      console.log('滚动位置', e.detail.scrollTop)
+    }
+  }
+}
+</script>
+
+<style>
+.scroll-view {
+  height: 500px;
+}
+.list-item {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+</style>
+```
+
+### 示例 2: 水平滚动
+
+```vue
+<template>
+  <scroll-view 
+    scroll-x 
+    class="scroll-view-horizontal"
+    show-scrollbar
+  >
+    <view 
+      v-for="item in list" 
+      :key="item.id"
+      class="horizontal-item"
+    >
+      {{ item.name }}
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: Array.from({ length: 20 }, (_, i) => ({
+        id: i + 1,
+        name: `项目 ${i + 1}`
+      }))
+    }
+  }
+}
+</script>
+
+<style>
+.scroll-view-horizontal {
+  white-space: nowrap;
+  width: 100%;
+}
+.horizontal-item {
+  display: inline-block;
+  width: 200px;
+  padding: 20px;
+  margin-right: 10px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+}
+</style>
+```
+
+### 示例 3: 下拉刷新
+
+```vue
+<template>
+  <scroll-view 
+    scroll-y 
+    class="scroll-view"
+    refresher-enabled
+    :refresher-triggered="refreshing"
+    @refresherrefresh="onRefresh"
+    @refresherrestore="onRestore"
+  >
+    <view 
+      v-for="item in list" 
+      :key="item.id"
+      class="list-item"
+    >
+      {{ item.name }}
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      refreshing: false,
+      list: Array.from({ length: 20 }, (_, i) => ({
+        id: i + 1,
+        name: `项目 ${i + 1}`
+      }))
+    }
+  },
+  methods: {
+    onRefresh() {
+      this.refreshing = true
+      // 模拟刷新
+      setTimeout(() => {
+        this.list = Array.from({ length: 20 }, (_, i) => ({
+          id: i + 1,
+          name: `新项目 ${i + 1}`
+        }))
+        this.refreshing = false
+        uni.showToast({
+          title: '刷新成功',
+          icon: 'success'
+        })
+      }, 2000)
+    },
+    onRestore() {
+      console.log('刷新恢复')
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 上拉加载
+
+```vue
+<template>
+  <scroll-view 
+    scroll-y 
+    class="scroll-view"
+    @scrolltolower="loadMore"
+    lower-threshold="50"
+  >
+    <view 
+      v-for="item in list" 
+      :key="item.id"
+      class="list-item"
+    >
+      {{ item.name }}
+    </view>
+    <view v-if="loading" class="loading">加载中...</view>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      page: 1,
+      list: Array.from({ length: 20 }, (_, i) => ({
+        id: i + 1,
+        name: `项目 ${i + 1}`
+      }))
+    }
+  },
+  methods: {
+    loadMore() {
+      if (this.loading) return
+      this.loading = true
+      // 模拟加载
+      setTimeout(() => {
+        const newList = Array.from({ length: 20 }, (_, i) => ({
+          id: this.list.length + i + 1,
+          name: `项目 ${this.list.length + i + 1}`
+        }))
+        this.list = [...this.list, ...newList]
+        this.page++
+        this.loading = false
+      }, 1000)
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 滚动到指定位置
+
+```vue
+<template>
+  <view class="container">
+    <button @click="scrollToTop">滚动到顶部</button>
+    <button @click="scrollToBottom">滚动到底部</button>
+    <button @click="scrollToIndex(10)">滚动到第10项</button>
+    
+    <scroll-view 
+      scroll-y 
+      class="scroll-view"
+      :scroll-top="scrollTop"
+      scroll-with-animation
+    >
+      <view 
+        v-for="(item, index) in list" 
+        :key="item.id"
+        :id="`item-${index}`"
+        class="list-item"
+      >
+        {{ item.name }}
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      scrollTop: 0,
+      list: Array.from({ length: 50 }, (_, i) => ({
+        id: i + 1,
+        name: `项目 ${i + 1}`
+      }))
+    }
+  },
+  methods: {
+    scrollToTop() {
+      this.scrollTop = 0
+    },
+    scrollToBottom() {
+      this.scrollTop = 9999
+    },
+    scrollToIndex(index) {
+      // 假设每项高度为 60px
+      this.scrollTop = index * 60
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| scroll-x | Boolean | false | 允许横向滚动 |
+| scroll-y | Boolean | false | 允许纵向滚动 |
+| scroll-top | Number | - | 设置竖向滚动条位置 |
+| scroll-left | Number | - | 设置横向滚动条位置 |
+| refresher-enabled | Boolean | false | 开启自定义下拉刷新 |
+| refresher-triggered | Boolean | false | 设置当前下拉刷新状态 |
+| lower-threshold | Number | 50 | 距底部/右边多远时触发 scrolltolower 事件 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 使用 `scroll-y` 时必须设置固定高度
+2. 使用 `scroll-x` 时内容需要设置 `white-space: nowrap`
+3. 下拉刷新需要设置 `refresher-enabled` 和 `refresher-triggered`
+4. 上拉加载通过 `@scrolltolower` 事件实现
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/scroll-view.html

.agents/bak-skills/uniappx-project/examples/components/built-in/slider.md

@@ -0,0 +1,262 @@
+# slider 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/slider.html
+
+## 概述
+
+`slider` 是滑动选择器组件，用于选择数值。
+
+## 基础用法
+
+```vue
+<template>
+  <slider :value="50" @change="handleChange" />
+</template>
+
+<script>
+export default {
+  methods: {
+    handleChange(e) {
+      console.log('当前值', e.detail.value)
+    }
+  }
+}
+</script>
+```
+
+## 完整示例
+
+### 示例 1: 基本滑动条
+
+```vue
+<template>
+  <view class="container">
+    <slider :value="value" @change="handleChange" />
+    <text>当前值：{{ value }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: 50
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.value = e.detail.value
+    }
+  }
+}
+</script>
+```
+
+### 示例 2: 设置范围
+
+```vue
+<template>
+  <view class="container">
+    <slider 
+      :value="value"
+      min="0"
+      max="100"
+      step="5"
+      @change="handleChange"
+    />
+    <text>当前值：{{ value }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: 50
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.value = e.detail.value
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 音量控制
+
+```vue
+<template>
+  <view class="container">
+    <view class="volume-control">
+      <text>音量：{{ volume }}%</text>
+      <slider 
+        :value="volume"
+        min="0"
+        max="100"
+        activeColor="#007aff"
+        backgroundColor="#ebebeb"
+        block-color="#007aff"
+        @change="handleVolumeChange"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      volume: 50
+    }
+  },
+  methods: {
+    handleVolumeChange(e) {
+      this.volume = e.detail.value
+      // 可以在这里控制实际音量
+      console.log('音量设置为', this.volume)
+    }
+  }
+}
+</script>
+
+<style>
+.volume-control {
+  padding: 20px;
+}
+</style>
+```
+
+### 示例 4: 亮度控制
+
+```vue
+<template>
+  <view class="container">
+    <view class="brightness-control">
+      <text>亮度：{{ brightness }}%</text>
+      <slider 
+        :value="brightness"
+        min="0"
+        max="100"
+        @change="handleBrightnessChange"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      brightness: 50
+    }
+  },
+  methods: {
+    handleBrightnessChange(e) {
+      this.brightness = e.detail.value
+      // 设置屏幕亮度
+      uni.setScreenBrightness({
+        value: this.brightness / 100,
+        success: () => {
+          console.log('亮度已设置')
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 价格区间选择
+
+```vue
+<template>
+  <view class="container">
+    <view class="price-range">
+      <text>价格区间：{{ minPrice }} - {{ maxPrice }}</text>
+      <slider 
+        :value="minPrice"
+        min="0"
+        max="1000"
+        step="10"
+        @change="handleMinPriceChange"
+      />
+      <text>最低价格：{{ minPrice }}</text>
+      <slider 
+        :value="maxPrice"
+        min="0"
+        max="1000"
+        step="10"
+        @change="handleMaxPriceChange"
+      />
+      <text>最高价格：{{ maxPrice }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      minPrice: 0,
+      maxPrice: 1000
+    }
+  },
+  methods: {
+    handleMinPriceChange(e) {
+      const value = e.detail.value
+      if (value <= this.maxPrice) {
+        this.minPrice = value
+      }
+    },
+    handleMaxPriceChange(e) {
+      const value = e.detail.value
+      if (value >= this.minPrice) {
+        this.maxPrice = value
+      }
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| min | Number | 0 | 最小值 |
+| max | Number | 100 | 最大值 |
+| step | Number | 1 | 步长，取值必须大于 0，并且可被(max - min)整除 |
+| value | Number | 0 | 当前值 |
+| activeColor | String | #007aff | 已选择的颜色 |
+| backgroundColor | String | #ebebeb | 背景条的颜色 |
+| block-size | Number | 28 | 滑块的大小，取值范围为 12 - 28 |
+| block-color | String | #ffffff | 滑块的颜色 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `value` 必须在 `min` 和 `max` 之间
+2. `step` 必须能被 `(max - min)` 整除
+3. 可以通过 `@change` 事件监听值的变化
+4. 适合用于音量、亮度、价格区间等场景
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/slider.html

.agents/bak-skills/uniappx-project/examples/components/built-in/swiper.md

@@ -0,0 +1,294 @@
+# swiper 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/swiper.html
+
+## 概述
+
+`swiper` 是滑块视图容器组件，常用于轮播图。
+
+## 基础用法
+
+```vue
+<template>
+  <swiper class="swiper">
+    <swiper-item>
+      <view class="swiper-item">1</view>
+    </swiper-item>
+    <swiper-item>
+      <view class="swiper-item">2</view>
+    </swiper-item>
+    <swiper-item>
+      <view class="swiper-item">3</view>
+    </swiper-item>
+  </swiper>
+</template>
+
+<style>
+.swiper {
+  height: 400px;
+}
+.swiper-item {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
+```
+
+## 完整示例
+
+### 示例 1: 基础轮播图
+
+```vue
+<template>
+  <swiper 
+    class="swiper"
+    :indicator-dots="true"
+    :autoplay="true"
+    :interval="3000"
+    :duration="500"
+  >
+    <swiper-item v-for="(item, index) in bannerList" :key="index">
+      <image 
+        :src="item.image" 
+        mode="aspectFill"
+        class="swiper-image"
+      ></image>
+    </swiper-item>
+  </swiper>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      bannerList: [
+        { image: 'https://example.com/banner1.jpg' },
+        { image: 'https://example.com/banner2.jpg' },
+        { image: 'https://example.com/banner3.jpg' }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+.swiper {
+  height: 400px;
+}
+.swiper-image {
+  width: 100%;
+  height: 100%;
+}
+</style>
+```
+
+### 示例 2: 自定义指示点
+
+```vue
+<template>
+  <swiper 
+    class="swiper"
+    :indicator-dots="true"
+    indicator-color="rgba(0, 0, 0, 0.3)"
+    indicator-active-color="#007aff"
+  >
+    <swiper-item v-for="(item, index) in list" :key="index">
+      <view class="swiper-item">{{ item }}</view>
+    </swiper-item>
+  </swiper>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: ['页面1', '页面2', '页面3']
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 垂直滑动
+
+```vue
+<template>
+  <swiper 
+    class="swiper-vertical"
+    :vertical="true"
+    :indicator-dots="true"
+  >
+    <swiper-item v-for="(item, index) in list" :key="index">
+      <view class="swiper-item">{{ item }}</view>
+    </swiper-item>
+  </swiper>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: ['页面1', '页面2', '页面3']
+    }
+  }
+}
+</script>
+
+<style>
+.swiper-vertical {
+  height: 500px;
+}
+</style>
+```
+
+### 示例 4: 切换事件
+
+```vue
+<template>
+  <view class="container">
+    <swiper 
+      class="swiper"
+      :current="current"
+      @change="handleChange"
+    >
+      <swiper-item v-for="(item, index) in list" :key="index">
+        <view class="swiper-item">{{ item }}</view>
+      </swiper-item>
+    </swiper>
+    <text>当前页：{{ current + 1 }} / {{ list.length }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      current: 0,
+      list: ['页面1', '页面2', '页面3']
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.current = e.detail.current
+      console.log('切换到', this.current + 1, '页')
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 图片轮播
+
+```vue
+<template>
+  <swiper 
+    class="swiper"
+    :indicator-dots="true"
+    :autoplay="true"
+    :interval="3000"
+    :circular="true"
+    @change="handleChange"
+  >
+    <swiper-item 
+      v-for="(item, index) in imageList" 
+      :key="index"
+      @click="handleImageClick(item)"
+    >
+      <image 
+        :src="item.url" 
+        mode="aspectFill"
+        class="swiper-image"
+      ></image>
+      <view class="image-title">{{ item.title }}</view>
+    </swiper-item>
+  </swiper>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageList: [
+        { url: 'https://example.com/image1.jpg', title: '标题1' },
+        { url: 'https://example.com/image2.jpg', title: '标题2' },
+        { url: 'https://example.com/image3.jpg', title: '标题3' }
+      ]
+    }
+  },
+  methods: {
+    handleChange(e) {
+      console.log('切换到', e.detail.current)
+    },
+    handleImageClick(item) {
+      uni.previewImage({
+        urls: this.imageList.map(img => img.url),
+        current: item.url
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.swiper {
+  height: 400px;
+  position: relative;
+}
+.swiper-image {
+  width: 100%;
+  height: 100%;
+}
+.image-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0,0,0,0.5));
+  color: white;
+  padding: 20px;
+}
+</style>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| indicator-dots | Boolean | false | 是否显示面板指示点 |
+| indicator-color | String | rgba(0, 0, 0, 0.3) | 指示点颜色 |
+| indicator-active-color | String | #000000 | 当前选中的指示点颜色 |
+| autoplay | Boolean | false | 是否自动切换 |
+| interval | Number | 5000 | 自动切换时间间隔 |
+| duration | Number | 500 | 滑动动画时长 |
+| circular | Boolean | false | 是否采用衔接滑动 |
+| vertical | Boolean | false | 滑动方向是否为纵向 |
+| current | Number | 0 | 当前所在滑块的 index |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 必须设置固定高度才能正常显示
+2. `swiper-item` 内只能放置一个根元素
+3. `circular` 设置为 true 时可以实现循环轮播
+4. 图片轮播建议使用 `mode="aspectFill"` 保持比例
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/swiper.html

.agents/bak-skills/uniappx-project/examples/components/built-in/switch.md

@@ -0,0 +1,277 @@
+# switch 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/switch.html
+
+## 概述
+
+`switch` 是开关选择器组件，用于两种状态的切换。
+
+## 基础用法
+
+```vue
+<template>
+  <switch :checked="isChecked" @change="handleChange" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isChecked: false
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.isChecked = e.detail.value
+    }
+  }
+}
+</script>
+```
+
+## 完整示例
+
+### 示例 1: 基本开关
+
+```vue
+<template>
+  <view class="container">
+    <view class="switch-item">
+      <text>通知开关</text>
+      <switch :checked="notifyEnabled" @change="handleNotifyChange" />
+    </view>
+    <view class="switch-item">
+      <text>声音开关</text>
+      <switch :checked="soundEnabled" @change="handleSoundChange" />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      notifyEnabled: true,
+      soundEnabled: false
+    }
+  },
+  methods: {
+    handleNotifyChange(e) {
+      this.notifyEnabled = e.detail.value
+      console.log('通知开关', this.notifyEnabled)
+    },
+    handleSoundChange(e) {
+      this.soundEnabled = e.detail.value
+      console.log('声音开关', this.soundEnabled)
+    }
+  }
+}
+</script>
+
+<style>
+.switch-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+</style>
+```
+
+### 示例 2: 自定义颜色
+
+```vue
+<template>
+  <view class="container">
+    <view class="switch-item">
+      <text>默认颜色</text>
+      <switch :checked="checked1" @change="checked1 = $event.detail.value" />
+    </view>
+    <view class="switch-item">
+      <text>自定义颜色</text>
+      <switch 
+        :checked="checked2" 
+        color="#ff3b30"
+        @change="checked2 = $event.detail.value" 
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked1: false,
+      checked2: false
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 禁用状态
+
+```vue
+<template>
+  <view class="container">
+    <view class="switch-item">
+      <text>可用开关</text>
+      <switch :checked="checked" @change="handleChange" />
+    </view>
+    <view class="switch-item">
+      <text>禁用开关</text>
+      <switch :checked="checked" disabled />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked: false
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.checked = e.detail.value
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 设置项列表
+
+```vue
+<template>
+  <view class="container">
+    <view 
+      v-for="item in settings" 
+      :key="item.key"
+      class="setting-item"
+    >
+      <view class="setting-info">
+        <text class="setting-title">{{ item.title }}</text>
+        <text class="setting-desc">{{ item.desc }}</text>
+      </view>
+      <switch 
+        :checked="item.value" 
+        @change="handleSettingChange(item.key, $event.detail.value)"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      settings: [
+        {
+          key: 'notify',
+          title: '消息通知',
+          desc: '接收新消息通知',
+          value: true
+        },
+        {
+          key: 'sound',
+          title: '声音提醒',
+          desc: '收到消息时播放声音',
+          value: false
+        },
+        {
+          key: 'vibrate',
+          title: '震动提醒',
+          desc: '收到消息时震动',
+          value: true
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSettingChange(key, value) {
+      const item = this.settings.find(s => s.key === key)
+      if (item) {
+        item.value = value
+        // 保存设置
+        uni.setStorageSync(`setting_${key}`, value)
+        console.log(`设置 ${key} 已更新为`, value)
+      }
+    }
+  },
+  onLoad() {
+    // 加载保存的设置
+    this.settings.forEach(item => {
+      const saved = uni.getStorageSync(`setting_${item.key}`)
+      if (saved !== '') {
+        item.value = saved
+      }
+    })
+  }
+}
+</script>
+
+<style>
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+.setting-info {
+  flex: 1;
+  margin-right: 20px;
+}
+.setting-title {
+  display: block;
+  font-size: 32rpx;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+.setting-desc {
+  display: block;
+  font-size: 24rpx;
+  color: #999;
+}
+</style>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| checked | Boolean | false | 是否选中 |
+| disabled | Boolean | false | 是否禁用 |
+| type | String | switch | 样式类型，可选值：switch、checkbox |
+| color | String | #007aff | switch 的颜色 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `checked` 属性控制开关状态
+2. `@change` 事件返回 `e.detail.value` 为布尔值
+3. 可以通过 `color` 自定义开关颜色
+4. `disabled` 为 true 时开关不可操作
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/switch.html

.agents/bak-skills/uniappx-project/examples/components/built-in/text.md

@@ -0,0 +1,151 @@
+# text 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/text.html
+
+## 概述
+
+`text` 是文本组件，用于显示文本内容。
+
+## 基础用法
+
+```vue
+<template>
+  <text>这是一段文本</text>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 基本文本
+
+```vue
+<template>
+  <view class="container">
+    <text>普通文本</text>
+    <text class="bold-text">加粗文本</text>
+    <text class="colored-text">彩色文本</text>
+  </view>
+</template>
+
+<style>
+.bold-text {
+  font-weight: bold;
+}
+.colored-text {
+  color: #007aff;
+}
+</style>
+```
+
+### 示例 2: 文本嵌套
+
+```vue
+<template>
+  <view class="container">
+    <text>
+      这是一段
+      <text class="highlight">高亮</text>
+      文本
+    </text>
+  </view>
+</template>
+
+<style>
+.highlight {
+  color: #ff3b30;
+  font-weight: bold;
+}
+</style>
+```
+
+### 示例 3: 文本选择
+
+```vue
+<template>
+  <view class="container">
+    <text selectable>这段文本可以选择</text>
+    <text :selectable="false">这段文本不可选择</text>
+  </view>
+</template>
+```
+
+### 示例 4: 文本换行
+
+```vue
+<template>
+  <view class="container">
+    <text class="text-wrap">
+      这是一段很长的文本，会自动换行显示。这是一段很长的文本，会自动换行显示。
+    </text>
+  </view>
+</template>
+
+<style>
+.text-wrap {
+  width: 300px;
+  word-wrap: break-word;
+}
+</style>
+```
+
+### 示例 5: 文本样式
+
+```vue
+<template>
+  <view class="container">
+    <text class="text-style">样式文本</text>
+    <text class="text-decoration">装饰文本</text>
+    <text class="text-shadow">阴影文本</text>
+  </view>
+</template>
+
+<style>
+.text-style {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+.text-decoration {
+  text-decoration: underline;
+  color: #007aff;
+}
+.text-shadow {
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+</style>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| selectable | Boolean | false | 文本是否可选 |
+| user-select | Boolean | false | 文本是否可选（H5） |
+| space | String | - | 显示连续空格 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `text` 组件内只能嵌套 `text` 组件
+2. `selectable` 属性用于控制文本是否可选择
+3. 文本样式通过 CSS 控制
+4. 建议使用 `text` 组件而不是直接在 `view` 中写文本
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/text.html

.agents/bak-skills/uniappx-project/examples/components/built-in/textarea.md

@@ -0,0 +1,261 @@
+# textarea 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/textarea.html
+
+## 概述
+
+`textarea` 是多行输入框组件，用于输入多行文本。
+
+## 基础用法
+
+```vue
+<template>
+  <textarea v-model="content" placeholder="请输入内容"></textarea>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: ''
+    }
+  }
+}
+</script>
+```
+
+## 完整示例
+
+### 示例 1: 基本多行输入
+
+```vue
+<template>
+  <view class="container">
+    <textarea 
+      v-model="content"
+      placeholder="请输入内容"
+      @input="handleInput"
+    ></textarea>
+    <text>已输入：{{ content.length }} 字</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: ''
+    }
+  },
+  methods: {
+    handleInput(e) {
+      this.content = e.detail.value
+    }
+  }
+}
+</script>
+```
+
+### 示例 2: 限制输入长度
+
+```vue
+<template>
+  <view class="container">
+    <textarea 
+      v-model="content"
+      placeholder="最多输入200字"
+      maxlength="200"
+      @input="handleInput"
+    ></textarea>
+    <text class="count">{{ content.length }}/200</text>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: ''
+    }
+  },
+  methods: {
+    handleInput(e) {
+      this.content = e.detail.value
+    }
+  }
+}
+</script>
+
+<style>
+.count {
+  color: #999;
+  font-size: 24rpx;
+  text-align: right;
+}
+</style>
+```
+
+### 示例 3: 自动调整高度
+
+```vue
+<template>
+  <view class="container">
+    <textarea 
+      v-model="content"
+      placeholder="输入内容会自动调整高度"
+      :auto-height="true"
+      :min-height="100"
+    ></textarea>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: ''
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 固定高度
+
+```vue
+<template>
+  <view class="container">
+    <textarea 
+      v-model="content"
+      placeholder="固定高度输入框"
+      :show-confirm-bar="true"
+      confirm-type="done"
+      @confirm="handleConfirm"
+    ></textarea>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: ''
+    }
+  },
+  methods: {
+    handleConfirm(e) {
+      console.log('确认输入', e.detail.value)
+    }
+  }
+}
+</script>
+
+<style>
+textarea {
+  width: 100%;
+  height: 200px;
+}
+</style>
+```
+
+### 示例 5: 表单验证
+
+```vue
+<template>
+  <view class="container">
+    <textarea 
+      v-model="content"
+      placeholder="请输入反馈内容"
+      maxlength="500"
+      @blur="validateContent"
+    ></textarea>
+    <text v-if="error" class="error">{{ error }}</text>
+    <text class="count">{{ content.length }}/500</text>
+    <button @click="submit">提交</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: '',
+      error: ''
+    }
+  },
+  methods: {
+    validateContent() {
+      if (this.content.length < 10) {
+        this.error = '内容至少需要10个字符'
+      } else {
+        this.error = ''
+      }
+    },
+    submit() {
+      this.validateContent()
+      if (!this.error && this.content) {
+        uni.showToast({
+          title: '提交成功',
+          icon: 'success'
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.error {
+  color: #ff3b30;
+  font-size: 24rpx;
+  margin-top: 10rpx;
+}
+.count {
+  color: #999;
+  font-size: 24rpx;
+  text-align: right;
+}
+</style>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| value | String | - | 输入框的内容 |
+| placeholder | String | - | 输入框为空时占位符 |
+| placeholder-style | String | - | 指定 placeholder 的样式 |
+| disabled | Boolean | false | 是否禁用 |
+| maxlength | Number | 140 | 最大输入长度，-1 表示不限制 |
+| auto-focus | Boolean | false | 是否自动聚焦 |
+| focus | Boolean | false | 获取焦点 |
+| auto-height | Boolean | false | 是否自动增高 |
+| fixed | Boolean | false | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `v-model` 是双向绑定的推荐方式
+2. `maxlength` 设置为 -1 时不限制最大长度
+3. `auto-height` 可以让输入框随内容自动调整高度
+4. 建议使用 `@input` 事件监听输入变化
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/textarea.html
+- **单行输入**: https://doc.dcloud.net.cn/uni-app-x/component/input.html

.agents/bak-skills/uniappx-project/examples/components/built-in/video.md

@@ -0,0 +1,291 @@
+# video 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/video.html
+
+## 概述
+
+`video` 是视频播放组件，用于播放视频内容。
+
+## 基础用法
+
+```vue
+<template>
+  <video 
+    src="https://example.com/video.mp4"
+    controls
+  ></video>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 基本视频播放
+
+```vue
+<template>
+  <view class="container">
+    <video 
+      :src="videoSrc"
+      controls
+      class="video-player"
+    ></video>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      videoSrc: 'https://example.com/video.mp4'
+    }
+  }
+}
+</script>
+
+<style>
+.video-player {
+  width: 100%;
+  height: 400px;
+}
+</style>
+```
+
+### 示例 2: 视频播放控制
+
+```vue
+<template>
+  <view class="container">
+    <video 
+      :src="videoSrc"
+      :controls="showControls"
+      :autoplay="autoplay"
+      :loop="loop"
+      :muted="muted"
+      :poster="poster"
+      @play="handlePlay"
+      @pause="handlePause"
+      @ended="handleEnded"
+      class="video-player"
+    ></video>
+    <view class="controls">
+      <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
+      <button @click="toggleMute">{{ muted ? '取消静音' : '静音' }}</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      videoSrc: 'https://example.com/video.mp4',
+      showControls: true,
+      autoplay: false,
+      loop: false,
+      muted: false,
+      poster: 'https://example.com/poster.jpg',
+      isPlaying: false
+    }
+  },
+  methods: {
+    handlePlay() {
+      this.isPlaying = true
+      console.log('视频开始播放')
+    },
+    handlePause() {
+      this.isPlaying = false
+      console.log('视频暂停')
+    },
+    handleEnded() {
+      this.isPlaying = false
+      console.log('视频播放结束')
+    },
+    togglePlay() {
+      // 需要通过 ref 调用视频组件的方法
+      this.$refs.video.play()
+    },
+    toggleMute() {
+      this.muted = !this.muted
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 视频列表
+
+```vue
+<template>
+  <view class="container">
+    <view 
+      v-for="(item, index) in videoList" 
+      :key="index"
+      class="video-item"
+    >
+      <video 
+        :src="item.src"
+        :poster="item.poster"
+        controls
+        class="video-player"
+        @play="handleVideoPlay(index)"
+      ></video>
+      <text class="video-title">{{ item.title }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      videoList: [
+        {
+          src: 'https://example.com/video1.mp4',
+          poster: 'https://example.com/poster1.jpg',
+          title: '视频1'
+        },
+        {
+          src: 'https://example.com/video2.mp4',
+          poster: 'https://example.com/poster2.jpg',
+          title: '视频2'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleVideoPlay(index) {
+      console.log('播放视频', index)
+    }
+  }
+}
+</script>
+
+<style>
+.video-item {
+  margin-bottom: 20px;
+}
+.video-player {
+  width: 100%;
+  height: 400px;
+}
+.video-title {
+  display: block;
+  padding: 10px;
+  font-size: 32rpx;
+}
+</style>
+```
+
+### 示例 4: 全屏播放
+
+```vue
+<template>
+  <view class="container">
+    <video 
+      :src="videoSrc"
+      controls
+      :show-fullscreen-btn="true"
+      :enable-play-gesture="true"
+      @fullscreenchange="handleFullscreenChange"
+      class="video-player"
+    ></video>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      videoSrc: 'https://example.com/video.mp4',
+      isFullscreen: false
+    }
+  },
+  methods: {
+    handleFullscreenChange(e) {
+      this.isFullscreen = e.detail.fullScreen
+      console.log('全屏状态', this.isFullscreen)
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 视频弹幕
+
+```vue
+<template>
+  <view class="container">
+    <video 
+      :src="videoSrc"
+      :danmu-list="danmuList"
+      :enable-danmu="true"
+      :danmu-btn="true"
+      controls
+      class="video-player"
+    ></video>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      videoSrc: 'https://example.com/video.mp4',
+      danmuList: [
+        {
+          text: '第一条弹幕',
+          color: '#ff0000',
+          time: 1
+        },
+        {
+          text: '第二条弹幕',
+          color: '#00ff00',
+          time: 3
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| src | String | - | 要播放视频的资源地址 |
+| controls | Boolean | true | 是否显示默认播放控件 |
+| autoplay | Boolean | false | 是否自动播放 |
+| loop | Boolean | false | 是否循环播放 |
+| muted | Boolean | false | 是否静音播放 |
+| poster | String | - | 视频封面的图片网络资源地址 |
+| show-fullscreen-btn | Boolean | true | 是否显示全屏按钮 |
+| enable-play-gesture | Boolean | false | 是否开启播放手势 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 视频地址需要配置合法域名
+2. `autoplay` 在某些平台可能不生效
+3. 建议设置 `poster` 作为视频封面
+4. 可以通过事件监听播放状态
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/video.html
+- **选择视频**: https://doc.dcloud.net.cn/uni-app-x/api/media/video.html#choosevideo

.agents/bak-skills/uniappx-project/examples/components/built-in/view.md

@@ -0,0 +1,407 @@
+# view 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/view.html
+
+## 概述
+
+`view` 是视图容器组件，类似于 HTML 中的 `div`，用于包裹各种元素内容。
+
+## 基础用法
+
+### 基本视图容器
+
+```vue
+<template>
+  <view class="container">
+    <text>这是内容</text>
+  </view>
+</template>
+
+<style>
+.container {
+  padding: 20px;
+  background-color: #f5f5f5;
+}
+</style>
+```
+
+## 完整示例
+
+### 示例 1: Flex 布局 - 横向布局
+
+```vue
+<template>
+  <view class="uni-padding-wrap uni-common-mt">
+    <view class="uni-title uni-common-mt">
+      flex-direction: row
+      <text>\n横向布局</text>
+    </view>
+    <view class="uni-flex uni-row">
+      <view class="flex-item uni-bg-red">A</view>
+      <view class="flex-item uni-bg-green">B</view>
+      <view class="flex-item uni-bg-blue">C</view>
+    </view>
+  </view>
+</template>
+
+<style>
+.uni-flex {
+  display: flex;
+}
+.uni-row {
+  flex-direction: row;
+}
+.flex-item {
+  flex: 1;
+  height: 100px;
+  text-align: center;
+  line-height: 100px;
+}
+.uni-bg-red {
+  background-color: #ff3b30;
+}
+.uni-bg-green {
+  background-color: #4cd964;
+}
+.uni-bg-blue {
+  background-color: #007aff;
+}
+</style>
+```
+
+### 示例 2: Flex 布局 - 纵向布局
+
+```vue
+<template>
+  <view class="uni-padding-wrap uni-common-mt">
+    <view class="uni-title uni-common-mt">
+      flex-direction: column
+      <text>\n纵向布局</text>
+    </view>
+    <view class="uni-flex uni-column">
+      <view class="flex-item flex-item-V uni-bg-red">A</view>
+      <view class="flex-item flex-item-V uni-bg-green">B</view>
+      <view class="flex-item flex-item-V uni-bg-blue">C</view>
+    </view>
+  </view>
+</template>
+
+<style>
+.uni-flex {
+  display: flex;
+}
+.uni-column {
+  flex-direction: column;
+}
+.flex-item-V {
+  width: 100%;
+  height: 100px;
+  text-align: center;
+  line-height: 100px;
+}
+</style>
+```
+
+### 示例 3: 点击态效果
+
+```vue
+<template>
+  <view class="container">
+    <view 
+      class="clickable-item"
+      hover-class="hover"
+      hover-start-time="50"
+      hover-stay-time="400"
+      @click="handleClick"
+    >
+      点击我
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick() {
+      uni.showToast({
+        title: '被点击了',
+        icon: 'success'
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.clickable-item {
+  padding: 20px;
+  background-color: #007aff;
+  color: white;
+  text-align: center;
+  border-radius: 8px;
+}
+.hover {
+  background-color: #0051d5;
+  opacity: 0.8;
+}
+</style>
+```
+
+### 示例 4: 阻止点击态冒泡
+
+```vue
+<template>
+  <view class="container" hover-class="container-hover">
+    <view 
+      class="inner-item"
+      hover-class="inner-hover"
+      hover-stop-propagation="true"
+      @click="handleInnerClick"
+    >
+      内部元素（阻止冒泡）
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleInnerClick() {
+      console.log('内部元素被点击')
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  padding: 40px;
+  background-color: #f5f5f5;
+}
+.container-hover {
+  background-color: #e0e0e0;
+}
+.inner-item {
+  padding: 20px;
+  background-color: #007aff;
+  color: white;
+  text-align: center;
+  border-radius: 8px;
+}
+.inner-hover {
+  background-color: #0051d5;
+}
+</style>
+```
+
+### 示例 5: 嵌套视图
+
+```vue
+<template>
+  <view class="page">
+    <view class="header">
+      <text class="title">页面标题</text>
+    </view>
+    <view class="content">
+      <view class="section">
+        <text class="section-title">第一部分</text>
+        <view class="section-content">
+          <text>这是第一部分的内容</text>
+        </view>
+      </view>
+      <view class="section">
+        <text class="section-title">第二部分</text>
+        <view class="section-content">
+          <text>这是第二部分的内容</text>
+        </view>
+      </view>
+    </view>
+    <view class="footer">
+      <text>页脚</text>
+    </view>
+  </view>
+</template>
+
+<style>
+.page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.header {
+  padding: 20px;
+  background-color: #007aff;
+  color: white;
+}
+.title {
+  font-size: 18px;
+  font-weight: bold;
+}
+.content {
+  flex: 1;
+  padding: 20px;
+}
+.section {
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+}
+.section-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.section-content {
+  padding: 10px;
+  background-color: white;
+  border-radius: 4px;
+}
+.footer {
+  padding: 20px;
+  background-color: #f5f5f5;
+  text-align: center;
+}
+</style>
+```
+
+### 示例 6: 条件渲染
+
+```vue
+<template>
+  <view class="container">
+    <view v-if="showContent" class="content">
+      <text>这是显示的内容</text>
+    </view>
+    <view v-else class="empty">
+      <text>暂无内容</text>
+    </view>
+    <button @click="toggleContent">切换显示</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showContent: true
+    }
+  },
+  methods: {
+    toggleContent() {
+      this.showContent = !this.showContent
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  padding: 20px;
+}
+.content {
+  padding: 20px;
+  background-color: #4cd964;
+  color: white;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+.empty {
+  padding: 20px;
+  background-color: #f5f5f5;
+  color: #999;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+</style>
+```
+
+### 示例 7: 列表渲染
+
+```vue
+<template>
+  <view class="container">
+    <view 
+      v-for="(item, index) in list" 
+      :key="index"
+      class="list-item"
+      @click="handleItemClick(item)"
+    >
+      <text>{{ item.name }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { id: 1, name: '项目 1' },
+        { id: 2, name: '项目 2' },
+        { id: 3, name: '项目 3' }
+      ]
+    }
+  },
+  methods: {
+    handleItemClick(item) {
+      uni.showToast({
+        title: `点击了 ${item.name}`,
+        icon: 'none'
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  padding: 20px;
+}
+.list-item {
+  padding: 15px;
+  margin-bottom: 10px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+}
+</style>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| hover-class | String | none | 指定按下去的样式类 |
+| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
+| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
+| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `view` 组件本身不显示任何可视化元素，主要用于包裹其他组件
+2. 可以使用 CSS 样式控制 `view` 的显示效果
+3. 支持 Flex 布局，常用于页面布局
+4. `hover-class` 属性用于设置点击态效果
+5. `hover-stop-propagation` 在某些平台可能不支持
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/view.html
+- **Flex 布局**: https://uniapp.dcloud.net.cn/tutorial/css-flex.html

.agents/bak-skills/uniappx-project/examples/components/built-in/web-view.md

@@ -0,0 +1,196 @@
+# web-view 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/web-view.html
+
+## 概述
+
+`web-view` 是网页视图组件，用于在页面中嵌入网页。
+
+## 基础用法
+
+```vue
+<template>
+  <web-view src="https://example.com"></web-view>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 基本网页显示
+
+```vue
+<template>
+  <view class="container">
+    <web-view :src="webUrl"></web-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      webUrl: 'https://example.com'
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
+```
+
+### 示例 2: 动态加载网页
+
+```vue
+<template>
+  <view class="container">
+    <input v-model="url" placeholder="输入网址" />
+    <button @click="loadUrl">加载网页</button>
+    <web-view v-if="webUrl" :src="webUrl"></web-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      url: '',
+      webUrl: ''
+    }
+  },
+  methods: {
+    loadUrl() {
+      if (this.url) {
+        // 确保 URL 以 http:// 或 https:// 开头
+        if (!this.url.startsWith('http://') && !this.url.startsWith('https://')) {
+          this.webUrl = 'https://' + this.url
+        } else {
+          this.webUrl = this.url
+        }
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 3: 从参数加载网页
+
+```vue
+<template>
+  <view class="container">
+    <web-view :src="webUrl"></web-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      webUrl: ''
+    }
+  },
+  onLoad(options) {
+    if (options.url) {
+      this.webUrl = decodeURIComponent(options.url)
+    } else {
+      this.webUrl = 'https://example.com'
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 网页与小程序通信
+
+```vue
+<template>
+  <view class="container">
+    <web-view :src="webUrl" @message="handleMessage"></web-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      webUrl: 'https://example.com'
+    }
+  },
+  methods: {
+    handleMessage(e) {
+      console.log('收到网页消息', e.detail.data)
+      // 处理来自网页的消息
+      const data = e.detail.data[0]
+      if (data && data.type === 'close') {
+        uni.navigateBack()
+      }
+    }
+  }
+}
+</script>
+```
+
+### 示例 5: 加载本地 HTML
+
+```vue
+<template>
+  <view class="container">
+    <web-view :src="localHtmlUrl"></web-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      localHtmlUrl: '/static/webview.html'
+    }
+  }
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| src | String | - | webview 指向网页的链接 |
+
+## 事件说明
+
+| 事件名 | 说明 | 返回值 |
+|--------|------|--------|
+| @message | 网页向小程序 postMessage 时触发 | e.detail.data 包含网页传递的数据 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `src` 必须是 HTTPS 协议（H5 除外）
+2. 需要在 `manifest.json` 中配置业务域名
+3. 网页可以通过 `wx.miniProgram.postMessage` 向小程序发送消息
+4. 建议使用全屏显示 web-view
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/web-view.html
+- **配置业务域名**: https://uniapp.dcloud.net.cn/tutorial/app-webview.html