refactor: 架构升级

.agents/skills/uview-pro-vue3/examples/layout/intro.md

@@ -0,0 +1,77 @@
+# Layout Introduction
+
+**官方文档**: https://uviewpro.cn
+
+
+## Instructions
+
+This example provides an introduction to uView Pro layout templates.
+
+### Key Concepts
+
+- Layout categories
+- Layout usage
+- Responsive layout
+
+### Example: Layout Categories
+
+**Grid Layout (网格布局)**:
+- Grid system
+- Responsive grid
+- Grid columns
+
+**Flex Layout (弹性布局)**:
+- Flex container
+- Flex items
+- Flex direction
+
+**Container Layout (容器布局)**:
+- Container
+- Header
+- Content
+- Footer
+
+### Example: Grid Layout
+
+```vue
+<template>
+  <u-grid :col="3">
+    <u-grid-item>
+      <view>Item 1</view>
+    </u-grid-item>
+    <u-grid-item>
+      <view>Item 2</view>
+    </u-grid-item>
+    <u-grid-item>
+      <view>Item 3</view>
+    </u-grid-item>
+  </u-grid>
+</template>
+```
+
+### Example: Flex Layout
+
+```vue
+<template>
+  <view class="flex-container">
+    <view class="flex-item">Item 1</view>
+    <view class="flex-item">Item 2</view>
+    <view class="flex-item">Item 3</view>
+  </view>
+</template>
+
+<style>
+.flex-container {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
+```
+
+### Key Points
+
+- Multiple layout options
+- Responsive design
+- Easy to use
+- Well documented
+- Flexible configuration