refactor: 架构升级

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

@@ -0,0 +1,189 @@
+# uni.hideLoading - 隐藏加载提示示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/prompt.html#hideloading
+- **显示加载**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showloading

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

@@ -0,0 +1,140 @@
+# uni.hideNavigationBarLoading - 隐藏导航栏加载动画示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#hidenavigationbarloading
+- **显示加载**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#shownavigationbarloading

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

@@ -0,0 +1,147 @@
+# uni.hideTabBarRedDot - 隐藏 TabBar 红点示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/tab-bar.html#hidetabbarreddot
+- **显示红点**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#showtabbarreddot

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

@@ -0,0 +1,153 @@
+# uni.hideToast - 隐藏消息提示示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/prompt.html#hidetoast
+- **显示提示**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast

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

@@ -0,0 +1,171 @@
+# uni.removeTabBarBadge - 移除 TabBar 徽标示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/tab-bar.html#removetabbarbadge
+- **设置徽标**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbarbadge

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

@@ -0,0 +1,180 @@
+# uni.setNavigationBarColor - 设置导航栏颜色示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#setnavigationbarcolor
+- **设置标题**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#setnavigationbartitle

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

@@ -0,0 +1,191 @@
+# uni.setNavigationBarTitle - 设置导航栏标题示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#setnavigationbartitle
+- **设置导航栏颜色**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#setnavigationbarcolor

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

@@ -0,0 +1,205 @@
+# uni.setTabBarBadge - 设置 TabBar 徽标示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbarbadge
+- **清除徽标**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#removetabbarbadge

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

@@ -0,0 +1,168 @@
+# uni.setTabBarStyle - 设置 TabBar 样式示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbarstyle
+- **设置 TabBar 项**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbaritem

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

@@ -0,0 +1,217 @@
+# uni.showActionSheet - 操作菜单示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
+- **模态弹窗**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showmodal

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

@@ -0,0 +1,189 @@
+# uni.showLoading - 加载提示示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/prompt.html#showloading
+- **隐藏加载**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#hideloading

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

@@ -0,0 +1,226 @@
+# uni.showModal - 模态弹窗示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/prompt.html#showmodal
+- **消息提示**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast

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

@@ -0,0 +1,194 @@
+# uni.showNavigationBarLoading - 显示导航栏加载动画示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#shownavigationbarloading
+- **隐藏加载**: https://uniapp.dcloud.net.cn/api/ui/navigation-bar.html#hidenavigationbarloading

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

@@ -0,0 +1,199 @@
+# uni.showTabBarRedDot - 显示 TabBar 红点示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/tab-bar.html#showtabbarreddot
+- **隐藏红点**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#hidetabbarreddot
+- **设置徽标**: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbarbadge

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

@@ -0,0 +1,188 @@
+# uni.showToast - 消息提示示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast
+- **隐藏提示**: https://uniapp.dcloud.net.cn/api/ui/prompt.html#hidetoast