refactor: 架构升级

.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