refactor: 架构升级

.agents/bak-skills/uniappx-uview-pro/examples/platform-specific/h5.md

@@ -0,0 +1,95 @@
+# H5 Platform | H5 平台
+
+## Instructions
+
+This example demonstrates H5 platform-specific considerations when using uView Pro in UniAppX.
+
+### Key Concepts
+
+- H5 responsive design
+- Browser compatibility
+- Performance optimization
+- CSS and SCSS support
+
+### Example: H5 Responsive Components
+
+```vue
+<!-- pages/index/index.vue -->
+<template>
+  <view class="container">
+    <u-grid :col="gridCol">
+      <u-grid-item v-for="item in gridData" :key="item.id">
+        {{ item.name }}
+      </u-grid-item>
+    </u-grid>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const gridCol = ref(3)
+const gridData = ref([])
+
+onMounted(() => {
+  // #ifdef H5
+  // H5: Adjust based on window width
+  const updateGridCol = () => {
+    if (window.innerWidth > 1200) {
+      gridCol.value = 4
+    } else if (window.innerWidth > 768) {
+      gridCol.value = 3
+    } else {
+      gridCol.value = 2
+    }
+  }
+  updateGridCol()
+  window.addEventListener('resize', updateGridCol)
+  // #endif
+})
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  /* H5: Use viewport units for responsive sizing */
+  padding: 20rpx;
+  
+  // #ifdef H5
+  @media (min-width: 768px) {
+    padding: 40rpx;
+  }
+  // #endif
+}
+</style>
+```
+
+### Example: H5 Browser Compatibility
+
+```vue
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  // #ifdef H5
+  // Check browser compatibility
+  if (!window.CSS || !CSS.supports('display', 'flex')) {
+    uni.showModal({
+      title: '提示',
+      content: '您的浏览器版本过低，部分功能可能无法正常使用',
+      showCancel: false
+    })
+  }
+  // #endif
+})
+</script>
+```
+
+### Key Points
+
+- H5 supports full CSS and SCSS features
+- Use viewport units (vw, vh) for responsive sizing
+- Handle window resize events for responsive components
+- Check browser compatibility for modern CSS features
+- Use conditional compilation (`#ifdef H5`) for H5-specific code
+- Use media queries for responsive design