medical-mall/ADMIN_PAGE_MODIFICATION_PLAN.md

后台页面 AdminLayout 包装修改计划

本文档详细说明需要修改的所有文件及具体修改方案。

修改方案概览

方案 1：完全包装（类别 B - 36个文件）

问题：完全没有使用 AdminLayout 包装 解决：使用 AdminLayout 包装整个页面内容，并添加正确的 currentPage prop

修改模板：

<!-- 修改前 -->
<template>
  <view class="Page">
    <!-- 内容 -->
  </view>
</template>

<!-- 修改后 -->
<template>
  <AdminLayout :currentPage="'current-page-id'">
    <view class="Page">
      <!-- 内容 -->
    </view>
  </AdminLayout>
</template>

<script setup lang="uts">
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
// ... 其他代码
</script>

---

方案 2：使用已导入的 AdminLayout（类别 A - 27个文件）

问题：已经导入 AdminLayout，但在模板中没有使用 解决：在模板中使用 AdminLayout 包装，并添加 currentPage prop

修改模板：

<!-- 修改前 -->
<template>
  <view class="Page">
    <!-- 内容 -->
  </view>
</template>

<script setup lang="uts">
import AdminLayout from '@/layouts/admin/AdminLayout.uvue' // 已导入但未使用
</script>

<!-- 修改后 -->
<template>
  <AdminLayout :currentPage="'page-id'">
    <view class="Page">
      <!-- 内容 -->
    </view>
  </AdminLayout>
</template>

<script setup lang="uts">
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
</script>

---

方案 3：修复属性名和值（类别 C 的属性名问题）

问题：使用 current-page （kebab-case）而非 currentPage （camelCase），或值不正确 解决：使用正确的属性名和值

修改示例 - design/index.uvue：

<!-- 修改前 -->
<AdminLayout current-page='design'>

<!-- 修改后 -->
<AdminLayout :currentPage="'design-home'">

修改示例 - customer-service/list.uvue：

<!-- 修改前 -->
<AdminLayout current-page='list'>

<!-- 修改后 -->
<AdminLayout :currentPage="'cs-list'">

---

方案 4：修复内层 currentPage（类别 C 的位置问题）

问题：currentPage 被放在了内层 view 上，而非 AdminLayout 上 解决：将 currentPage 移到 AdminLayout 组件上

修改示例 - user-statistics.uvue：

<!-- 修改前 -->
<template>
  <AdminLayout>
      <view class="Page" currentPage='user'>
        <!-- 内容 -->
      </view>
  </AdminLayout>
</template>

<!-- 修改后 -->
<template>
  <AdminLayout :currentPage="'user'">
    <view class="Page">
      <!-- 内容 -->
    </view>
  </AdminLayout>
</template>

---

方案 5：动态 currentPage（类别 D - user-management.uvue）

现状：已正确使用动态 currentPage，根据路由查询参数动态变化 行动：验证实现正确性，无需修改

<template>
  <AdminLayout :currentPage="currentPage">
    <!-- 内容 -->
  </AdminLayout>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'

const currentPage = ref('user-list')

onLoad((options) => {
  const action = options?.action as string | undefined
  if (action == 'group') currentPage.value = 'user-group'
  else if (action == 'tag') currentPage.value = 'user-tag'
  else if (action == 'level') currentPage.value = 'user-level'
  else if (action == 'config') currentPage.value = 'user-config'
  else currentPage.value = 'user-list'
})
</script>

---

方案 6：处理多 tab 页面（order-management.uvue、marketing/points/index.uvue）

问题：页面根据 tab 查询参数显示不同内容，需要动态设置 currentPage 解决：根据 tab 参数动态设置 currentPage

修改示例 - order-management.uvue：

<template>
  <AdminLayout :currentPage="currentPage">
    <view class="Page">
      <!-- 内容 -->
    </view>
  </AdminLayout>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'

const currentPage = ref('order-list')

onLoad((options) => {
  const tab = options?.tab as string | undefined
  switch (tab) {
    case 'stats':
      currentPage.value = 'order-stats'
      break
    case 'aftersale':
      currentPage.value = 'order-aftersale'
      break
    case 'cashier':
      currentPage.value = 'order-cashier'
      break
    case 'verify':
      currentPage.value = 'order-verify'
      break
    case 'config':
      currentPage.value = 'order-config'
      break
    default:
      currentPage.value = 'order-list'
  }
})
</script>

---

需要修改的文件详细清单

【类别 A】已导入但未在模板中使用（27个文件）

需要在模板中使用 AdminLayout 包装，并添加 currentPage prop。

商品管理（6个文件）

1. pages/mall/admin/product-classification.uvue → currentPage: product-classification
2. pages/mall/admin/product-specifications.uvue → currentPage: product-specifications
3. pages/mall/admin/product-parameters.uvue → currentPage: product-parameters
4. pages/mall/admin/product-labels.uvue → currentPage: product-labels
5. pages/mall/admin/product-protection.uvue → currentPage: product-protection
6. pages/mall/admin/product-reviews.uvue → currentPage: product-reviews

系统设置（8个文件）

7. pages/mall/admin/system/message-management.uvue → currentPage: sys-message
8. pages/mall/admin/system/agreement-settings.uvue → currentPage: sys-agreement
9. pages/mall/admin/system/receipt-settings.uvue → currentPage: sys-receipt
10. pages/mall/admin/system/permission/role.uvue → currentPage: sys-role
11. pages/mall/admin/system/permission/admin-list.uvue → currentPage: sys-admin
12. pages/mall/admin/system/permission/permission-setting.uvue → currentPage: sys-perm-setting
13. pages/mall/admin/system/api/yht/page.uvue → currentPage: api-yht-page
14. pages/mall/admin/system/api/yht/config.uvue → currentPage: api-yht-config

系统 API 配置（6个文件）

15. pages/mall/admin/system/api/storage.uvue → currentPage: api-storage
16. pages/mall/admin/system/api/collect.uvue → currentPage: api-collect
17. pages/mall/admin/system/api/logistics.uvue → currentPage: api-logistics
18. pages/mall/admin/system/api/waybill.uvue → currentPage: api-waybill
19. pages/mall/admin/system/api/sms.uvue → currentPage: api-sms
20. pages/mall/admin/system/api/pay.uvue → currentPage: api-pay

维护管理 - 开发配置（5个文件）

21. pages/mall/admin/maintain/dev-config/combination-data.uvue → currentPage: dev-config-combo
22. pages/mall/admin/maintain/dev-config/cron-job.uvue → currentPage: dev-config-cron
23. pages/mall/admin/maintain/dev-config/permission.uvue → currentPage: dev-config-permission
24. pages/mall/admin/maintain/dev-config/module-config.uvue → currentPage: dev-config-module
25. pages/mall/admin/maintain/dev-config/custom-event.uvue → currentPage: dev-config-event

维护管理 - 安全维护（3个文件）

26. pages/mall/admin/maintain/security/refresh-cache.uvue → currentPage: security-refresh-cache
27. pages/mall/admin/maintain/security/system-log.uvue → currentPage: security-system-log
28. pages/mall/admin/maintain/security/online-upgrade.uvue → currentPage: security-online-upgrade

---

【类别 B】完全未使用 AdminLayout（36个文件）

需要完全重新包装和导入，并添加 currentPage prop。

商品与订单管理（2个文件）

1. pages/mall/admin/product-management.uvue → currentPage: product-list
2. pages/mall/admin/order-management.uvue → currentPage: 根据 tab 参数动态设置

营销管理（7个文件）

3. pages/mall/admin/marketing/coupon/list.uvue → currentPage: coupon-list
4. pages/mall/admin/marketing/coupon/receive.uvue → currentPage: coupon-receive
5. pages/mall/admin/marketing/points/index.uvue → currentPage: 根据 tab 参数动态设置
6. pages/mall/admin/marketing/signin/rule.uvue → currentPage: signin-rule
7. pages/mall/admin/marketing/signin/record.uvue → currentPage: signin-record

客服管理（4个文件）

8. pages/mall/admin/customer-service/script.uvue → currentPage: cs-script
9. pages/mall/admin/customer-service/messages.uvue → currentPage: cs-message
10. pages/mall/admin/customer-service/auto-reply.uvue → currentPage: cs-auto-reply
11. pages/mall/admin/customer-service/config.uvue → currentPage: cs-config

系统 - 发货设置（4个文件）

12. pages/mall/admin/system/shipping/courier.uvue → currentPage: ship-courier
13. pages/mall/admin/system/shipping/pickup/points.uvue → currentPage: pickup-points
14. pages/mall/admin/system/shipping/pickup/verifiers.uvue → currentPage: pickup-verifier
15. pages/mall/admin/system/shipping/freight-template.uvue → currentPage: ship-freight

维护 - 数据维护（3个文件）

16. pages/mall/admin/maintain/data/logistics-company.uvue → currentPage: data-logistics-company
17. pages/mall/admin/maintain/data/city-data.uvue → currentPage: data-city-data
18. pages/mall/admin/maintain/data/clear-data.uvue → currentPage: data-clear-data

维护 - 对外接口（1个文件）

19. pages/mall/admin/maintain/external/account.uvue → currentPage: external-account

维护 - 语言设置（4个文件）

20. pages/mall/admin/maintain/i18n/language-list.uvue → currentPage: i18n-language-list
21. pages/mall/admin/maintain/i18n/language-detail.uvue → currentPage: i18n-language-detail
22. pages/mall/admin/maintain/i18n/region-list.uvue → currentPage: i18n-region-list
23. pages/mall/admin/maintain/i18n/translate-config.uvue → currentPage: i18n-translate-config

维护 - 开发工具（5个文件）

24. pages/mall/admin/maintain/dev-tools/database.uvue → currentPage: dev-tools-db
25. pages/mall/admin/maintain/dev-tools/file.uvue → currentPage: dev-tools-file
26. pages/mall/admin/maintain/dev-tools/api.uvue → currentPage: dev-tools-api
27. pages/mall/admin/maintain/dev-tools/codegen.uvue → currentPage: dev-tools-codegen
28. pages/mall/admin/maintain/dev-tools/data-dict.uvue → currentPage: dev-tools-dict

---

【类别 C】需要修复 currentPage（7个文件）

修复属性名（2个文件）

1. pages/mall/admin/design/index.uvue

   • 修改前：<AdminLayout current-page='design'>
   • 修改后：<AdminLayout :currentPage="'design-home'">

2. pages/mall/admin/customer-service/list.uvue

   • 修改前：<AdminLayout current-page='list'>
   • 修改后：<AdminLayout :currentPage="'cs-list'">

修复位置和属性名（1个文件）

3. pages/mall/admin/user-statistics.uvue
   • 修改前：

     <AdminLayout>
       <view class="Page" currentPage='user'>
     

   • 修改后：

     <AdminLayout :currentPage="'user'">
       <view class="Page">
     

添加 currentPage（3个文件）

4. pages/mall/admin/content/index.uvue → 添加 currentPage: content-list
5. pages/mall/admin/system-settings.uvue → 添加 currentPage: sys-basic
6. pages/mall/admin/maintain/dev-config/category.uvue → 添加 currentPage: dev-config-category
7. pages/mall/admin/maintain/system-info.uvue → 添加 currentPage: system-info

---

【类别 D】动态 currentPage（已正确 - 需验证）

1. pages/mall/admin/user-management.uvue ✅
   • 已正确实现根据 action 参数动态设置 currentPage
   • 无需修改

---

修改优先级建议

🔴 优先级 1 - 高危（15个文件 - 必须修改）

这些文件完全没有 AdminLayout，会导致页面无法正确显示导航和布局：

• product-management.uvue
• order-management.uvue
• marketing/coupon/list.uvue
• marketing/coupon/receive.uvue
• marketing/points/index.uvue
• marketing/signin/rule.uvue
• marketing/signin/record.uvue
• customer-service/*.uvue (4个文件)
• system/shipping/*.uvue (4个文件)

🟡 优先级 2 - 中等（20个文件 - 应该修改）

这些文件已导入 AdminLayout 但未使用，或属性不正确：

• product-*.uvue (6个文件)
• system/api/*.uvue (8个文件)
• maintain/dev-config/*.uvue (5个)
• design/index.uvue, user-statistics.uvue, 等

🟢 优先级 3 - 低（验证阶段）

• user-management.uvue (已正确实现)

---

实施建议

1. 分批修改：按优先级分批修改，每批10-15个文件
2. 验证方法：修改后在浏览器中访问每个页面，检查是否正确显示 AdminLayout
3. 检查清单：
   • 左侧导航菜单是否显示
   • 正确的菜单项是否高亮
   • 顶部面包屑导航是否正确
   • 页面内容是否正确显示

---

文档生成时间：2026年1月30日