diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index a7d780a..65d04ae 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -15,7 +15,9 @@
"Bash(ls -la 'E:\\\\code\\\\智柜宝\\\\wx\\\\src\\\\static')",
"Bash(tree -L 3 -I 'node_modules|dist' /E/code/智柜宝/wx)",
"Bash(tree 'E:\\code\\智柜宝\\wx\\src\\pages\\order' -L 3)",
- "Bash(pnpm type-check)"
+ "Bash(pnpm type-check)",
+ "Bash(ls -la 'E:\\\\code\\\\智柜宝\\\\wx\\\\src\\\\pages\\\\index\\\\components')",
+ "Bash(ls -la 'E:\\\\code\\\\智柜宝\\\\wx\\\\doc\\\\thirdParty\\\\src\\\\pages\\\\product\\\\components')"
],
"deny": [],
"ask": []
diff --git a/doc/迁移工作总结.md b/doc/迁移工作总结.md
new file mode 100644
index 0000000..0672661
--- /dev/null
+++ b/doc/迁移工作总结.md
@@ -0,0 +1,932 @@
+# 代码迁移工作总结
+
+## 迁移概述
+
+本次迁移将第三方代码库中的页面和组件整合到主项目的 `src/pages` 目录下，主要涉及首页、商品展示、购物车、结算和用户中心等核心功能模块。
+
+## 迁移文件清单
+
+### 1. 首页模块（`src/pages/index/`）
+
+#### 1.1 主页面文件
+- **源文件**: `doc\thirdParty\src\pages\product\components\checkout.vue`
+- **目标文件**: `src\pages\index\checkout.vue`
+- **说明**: 结算页面组件，支持普通商品和租用机柜两种模式
+
+#### 1.2 页面主文件
+- **目标文件**: `src\pages\index\index.vue`
+- **功能**: 店铺选择页面，作为应用入口
+- **核心特性**:
+ - 支持店铺列表展示和选择
+ - 集成微信登录和企业微信登录
+ - 根据店铺模式（普通/租用）跳转不同组件
+ - 包含店铺封面图片展示
+
+#### 1.3 组件目录（`src/pages/index/components/`）
+
+**从 `doc\thirdParty\src\pages\product\components\` 迁移的组件**：
+
+1. **cart.vue** → `src\pages\index\components\cart.vue`
+ - 购物车组件，支持商品数量管理
+
+2. **detail.vue** → `src\pages\index\components\detail.vue`
+ - 商品详情组件
+
+3. **ProductContainer.vue** → `src\pages\index\components\product-container.vue`
+ - **重要**: 商品容器组件，支持普通商品展示和购买
+ - 包含分类导航、商品列表、搜索、购物车等功能
+ - 已适配为 Vue 3 语法（`
+```
+
+### 2. 状态管理整合
+
+所有组件已整合到项目的 Pinia 状态管理体系：
+
+- `useProductStore`: 商品数据管理
+- `useCartStore`: 购物车管理
+- `useRentingCabinetStore`: 租用机柜管理
+- `useWxStore`: 微信相关功能
+
+### 3. 路径别名适配
+
+使用 `@/` 路径别名替代相对路径：
+
+```typescript
+// 改造前
+import { useCartStore } from "../../../pinia/stores/cart"
+
+// 改造后
+import { useCartStore } from "@/pinia/stores/cart"
+```
+
+### 4. UI 组件库适配
+
+从 `vant` 组件库逐步迁移到 `wot design`（WDUI）：
+
+```html
+
+
+
+
+
+```
+
+### 5. 业务逻辑适配
+
+#### 5.1 双模式支持
+商品容器组件已改造为支持两种模式：
+- **普通模式** (`mode !== 3`): 商品购买流程
+- **租用模式** (`mode === 3`): 机柜格口租用流程
+
+#### 5.2 支付流程整合
+结算页面支持多种支付方式：
+- 微信支付
+- 余额支付
+- 借呗支付
+- 审批支付（企业微信环境）
+
+## 原H5代码 vs 微信小程序代码对比
+
+### 1. 页面定义方式
+
+**H5版本（Vue Router）**:
+```typescript
+// 在路由文件中定义
+const routes = [
+ {
+ path: '/index',
+ name: 'Index',
+ component: () => import('@/pages/index/index.vue')
+ }
+]
+
+// 在组件中使用
+this.$router.push('/checkout')
+```
+
+**微信小程序版本（Uni-App）**:
+```typescript
+// 在组件中直接使用 definePage 宏
+definePage({
+ style: {
+ navigationBarTitleText: '首页',
+ },
+})
+
+// 跳转方式
+uni.navigateTo({
+ url: '/pages/index/checkout'
+})
+```
+
+### 2. 样式单位
+
+**H5版本**:
+```scss
+.product-item {
+ padding: 16px; // 使用 px 单位
+ font-size: 14px;
+}
+```
+
+**微信小程序版本**:
+```scss
+.product-item {
+ padding: 16rpx; // 使用 rpx 单位，自适应屏幕
+ font-size: 28rpx;
+}
+```
+
+### 3. API调用方式
+
+**H5版本（基于 Vue Router）**:
+```typescript
+import { useRouter } from 'vue-router'
+const router = useRouter()
+router.push({ path: '/product', query: { id: 123 } })
+```
+
+**微信小程序版本（Uni-App）**:
+```typescript
+// 页面间跳转
+uni.navigateTo({
+ url: '/pages/product/detail?id=123'
+})
+
+// 获取参数
+onLoad((option) => {
+ const id = option.id
+})
+```
+
+### 4. 状态管理
+
+**H5版本（可能使用 Vuex）**:
+```typescript
+import { useStore } from 'vuex'
+
+export default {
+ computed: {
+ ...mapState(['cartItems'])
+ },
+ methods: {
+ ...mapActions(['addToCart'])
+ }
+}
+```
+
+**微信小程序版本（Pinia）**:
+```typescript
+import { useCartStore } from '@/pinia/stores/cart'
+import { storeToRefs } from 'pinia'
+
+const cartStore = useCartStore()
+const { cartItems } = storeToRefs(cartStore)
+
+// 直接解构/ref化，保持响应式
+```
+
+### 5. 网络请求
+
+**H5版本**:
+```typescript
+// 使用 axios 或 fetch
+import axios from 'axios'
+const response = await axios.get('/api/users')
+```
+
+**微信小程序版本**:
+```typescript
+// 使用 uni.request 或封装后的 http 模块
+import { http } from '@/http/http'
+const response = await http.get('/api/users')
+
+// 或者直接使用 uni.request
+uni.request({
+ url: 'https://api.example.com/users',
+ success: (res) => {
+ console.log(res.data)
+ }
+})
+```
+
+### 6. 图片资源处理
+
+**H5版本**:
+```html
+
+
+```
+
+**微信小程序版本**:
+```html
+
+
+
+```
+
+### 7. 数据存储
+
+**H5版本（localStorage）**:
+```typescript
+// 写入
+localStorage.setItem('userToken', token)
+
+// 读取
+const token = localStorage.getItem('userToken')
+```
+
+**微信小程序版本（uni.setStorage）**:
+```typescript
+// 写入
+uni.setStorageSync('userToken', token)
+
+// 读取
+const token = uni.getStorageSync('userToken')
+
+// 异步方式
+uni.setStorage({
+ key: 'userToken',
+ data: token,
+ success: () => {}
+})
+```
+
+### 8. 生命周期钩子
+
+**H5版本**:
+```typescript
+export default {
+ created() {
+ // 组件创建时
+ },
+ mounted() {
+ // DOM 挂载时
+ },
+ beforeDestroy() {
+ // 组件销毁前
+ }
+}
+```
+
+**微信小程序版本**:
+```typescript
+
+```
+
+### 9. 全局样式
+
+**H5版本**:
+```scss
+// 直接在 Vue 组件中使用全局样式
+.container {
+ color: #333;
+}
+```
+
+**微信小程序版本**:
+```scss
+// 需要使用 ::v-deep 或 /deep/ 深度选择器
+::v-deep .van-button {
+ background-color: #e95d5d;
+}
+
+// 或者在全局样式文件中定义
+page {
+ background-color: #f7f8fa;
+}
+```
+
+### 10. 组件通讯
+
+**H5版本（Props/Emit/EventBus）**:
+```typescript
+// 父传子
+
+
+// 子传父
+// 子组件
+this.$emit('update', data)
+// 父组件
+
+
+// EventBus
+import EventBus from '@/utils/eventBus'
+EventBus.$emit('dataUpdated', data)
+EventBus.$on('dataUpdated', callback)
+```
+
+**微信小程序版本（Props/Emits/UniBus）**:
+```typescript
+// 父传子
+
+
+// 子传父
+// 子组件
+const emit = defineEmits(['update'])
+emit('update', data)
+
+// 父组件
+
+
+// 或者使用 UniBus
+import { Bus } from '@/utils/bus'
+Bus.emit('dataUpdated', data)
+Bus.on('dataUpdated', callback)
+```
+
+### 11. 支付集成
+
+**H5版本**:
+```typescript
+// 直接调用微信JS-SDK
+wx.config({
+ debug: false,
+ appId: 'wx123',
+ timestamp: timestamp,
+ nonceStr: nonceStr,
+ signature: signature,
+ jsApiList: ['chooseWXPay']
+})
+
+wx.chooseWXPay({
+ timestamp: 0,
+ nonceStr: '',
+ package: '',
+ signType: '',
+ paySign: '',
+ success: function (res) {
+ // 支付成功
+ }
+})
+```
+
+**微信小程序版本**:
+```typescript
+// 使用小程序支付API
+uni.requestPayment({
+ timeStamp: '',
+ nonceStr: '',
+ package: '',
+ signType: 'MD5',
+ paySign: '',
+ success: function (res) {
+ // 支付成功
+ },
+ fail: function (res) {
+ // 支付失败
+ }
+})
+```
+
+### 12. 登录认证
+
+**H5版本**:
+```typescript
+// 微信网页授权
+wx.login({
+ success: function (res) {
+ // 获取 code
+ // 发送到后端换取 openid
+ }
+})
+```
+
+**微信小程序版本**:
+```typescript
+// 小程序登录
+uni.login({
+ provider: 'weixin',
+ success: function (loginRes) {
+ // 获取 code
+ // 发送到后端换取 openid/sessionKey
+ }
+})
+```
+
+### 13. HTML标签转换
+
+H5中的HTML标签需要转换为微信小程序对应的组件标签：
+
+**H5版本（标准HTML标签）**:
+```html
+
+
+
+
+
这是一段文本
+
行内文本
+
链接
+
+
+
+
+
+
+
` | `