From 8abcf591474b1ab2a1aef6767366a0c535c04665 Mon Sep 17 00:00:00 2001
From: XuqmGroup <noreply@xuqm.com>
Date: Thu, 11 Jun 2026 13:04:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(app):=20=E6=94=AF=E6=8C=81=E5=A4=9A?=
 =?UTF-8?q?=E5=B9=B3=E5=8F=B0=E5=8C=85=E5=90=8D=E9=85=8D=E7=BD=AE=E5=92=8C?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E4=BF=A1=E6=81=AF=E7=BC=96=E8=BE=91=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 后端增加至少填写一个平台包名的验证逻辑
- 前端调整应用数据模型，将包名字段改为可选类型
- 添加应用详情页的编辑功能和表单验证
- 优化应用列表页包名显示逻辑，支持多平台包名展示
- 重构应用配置指引页面，按平台分类展示商店配置指南
- 在版本管理页面增加包名配置检查和相应提示
- 新增应用信息编辑弹窗组件和相关业务逻辑
---
 tenant-platform/src/api/app.ts                |   4 +-
 .../src/views/apps/AppDetailView.vue          |  95 +++-
 .../src/views/apps/AppListView.vue            |  42 +-
 .../src/views/update/StoreGuideView.vue       | 487 +++++++++---------
 .../views/update/VersionManagementView.vue    | 210 ++++++--
 5 files changed, 546 insertions(+), 292 deletions(-)

diff --git a/tenant-platform/src/api/app.ts b/tenant-platform/src/api/app.ts
index 7eaacd4..8b50b31 100644
--- a/tenant-platform/src/api/app.ts
+++ b/tenant-platform/src/api/app.ts
@@ -3,7 +3,7 @@ import client from './client'
 export interface App {
   id: string
   tenantId: string
-  packageName: string
+  packageName?: string
   iosBundleId?: string
   harmonyBundleName?: string
   name: string
@@ -15,7 +15,7 @@ export interface App {
 }
 
 export interface CreateAppRequest {
-  packageName: string
+  packageName?: string
   iosBundleId?: string
   harmonyBundleName?: string
   name: string
diff --git a/tenant-platform/src/views/apps/AppDetailView.vue b/tenant-platform/src/views/apps/AppDetailView.vue
index ad5b675..5fad9e0 100644
--- a/tenant-platform/src/views/apps/AppDetailView.vue
+++ b/tenant-platform/src/views/apps/AppDetailView.vue
@@ -3,11 +3,17 @@
     <el-page-header @back="$router.back()" :content="app.name" style="margin-bottom:24px" />
 
     <el-card class="info-card" style="margin-bottom:16px">
+      <template #header>
+        <div style="display:flex;justify-content:space-between;align-items:center">
+          <span>应用信息</span>
+          <el-button size="small" @click="openEditDialog">编辑</el-button>
+        </div>
+      </template>
       <el-descriptions :column="isMobile ? 1 : 2" border>
         <el-descriptions-item label="应用名称">{{ app.name }}</el-descriptions-item>
         <el-descriptions-item label="Android 包名">{{ app.packageName }}</el-descriptions-item>
-        <el-descriptions-item label="iOS Bundle ID">{{ app.iosBundleId ?? '-' }}</el-descriptions-item>
-        <el-descriptions-item label="鸿蒙 Bundle Name">{{ app.harmonyBundleName ?? '-' }}</el-descriptions-item>
+        <el-descriptions-item label="iOS Bundle ID">{{ app.iosBundleId || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="鸿蒙 Bundle Name">{{ app.harmonyBundleName || '-' }}</el-descriptions-item>
         <el-descriptions-item label="AppKey">
           <el-text class="mono">{{ app.appKey }}</el-text>
           <el-button link @click="copy(app.appKey)"><el-icon><CopyDocument /></el-icon></el-button>
@@ -22,7 +28,7 @@
           </el-button>
           <el-button link type="warning" @click="openVerifyDialog('RESET_SECRET')">重置</el-button>
         </el-descriptions-item>
-        <el-descriptions-item label="简述" :span="2">{{ app.description ?? '-' }}</el-descriptions-item>
+        <el-descriptions-item label="简述" :span="2">{{ app.description || '-' }}</el-descriptions-item>
         <el-descriptions-item label="Config 文件">
           <el-button size="small" type="primary" plain @click="downloadConfigFile">下载</el-button>
           <el-button size="small" plain @click="regenerateConfigFile" :loading="regenerating">重新生成</el-button>
@@ -193,6 +199,35 @@
       </template>
     </el-dialog>
 
+    <!-- Edit App Info Dialog -->
+    <el-dialog v-model="showEditDialog" title="编辑应用信息" :width="dialogWidth">
+      <el-form label-width="120px" :model="editForm">
+        <el-form-item label="应用名称">
+          <el-input v-model="editForm.name" placeholder="应用名称" />
+        </el-form-item>
+        <el-form-item label="Android 包名">
+          <el-input v-model="editForm.packageName" placeholder="com.example.app（可选）" />
+        </el-form-item>
+        <el-form-item label="iOS Bundle ID">
+          <el-input v-model="editForm.iosBundleId" placeholder="com.example.app（可选）" />
+        </el-form-item>
+        <el-form-item label="鸿蒙 Bundle Name">
+          <el-input v-model="editForm.harmonyBundleName" placeholder="com.example.app（可选）" />
+        </el-form-item>
+        <el-form-item label="简述">
+          <el-input v-model="editForm.description" type="textarea" :rows="3" placeholder="应用简述（可选）" />
+        </el-form-item>
+        <el-form-item label="图标 URL">
+          <el-input v-model="editForm.iconUrl" placeholder="https://cdn.example.com/icon.png（可选）" />
+        </el-form-item>
+      </el-form>
+      <div class="form-tip" style="margin-top:-8px">至少填写一个平台的包名</div>
+      <template #footer>
+        <el-button @click="showEditDialog = false">取消</el-button>
+        <el-button type="primary" :loading="savingEdit" @click="submitEdit">保存</el-button>
+      </template>
+    </el-dialog>
+
     <!-- Activation Request Dialog -->
     <el-dialog v-model="showActivationDialog" title="申请开通服务" :width="dialogWidth">
       <el-form label-width="80px">
@@ -243,6 +278,59 @@ const submittingActivation = ref(false)
 const activationForm = ref({ platform: '', serviceType: '', reason: '' })
 const regenerating = ref(false)
 
+const showEditDialog = ref(false)
+const savingEdit = ref(false)
+const editForm = ref({
+  name: '',
+  packageName: '',
+  iosBundleId: '',
+  harmonyBundleName: '',
+  description: '',
+  iconUrl: '',
+})
+
+function openEditDialog() {
+  if (!app.value) return
+  editForm.value = {
+    name: app.value.name || '',
+    packageName: app.value.packageName || '',
+    iosBundleId: app.value.iosBundleId || '',
+    harmonyBundleName: app.value.harmonyBundleName || '',
+    description: app.value.description || '',
+    iconUrl: app.value.iconUrl || '',
+  }
+  showEditDialog.value = true
+}
+
+async function submitEdit() {
+  if (!editForm.value.name.trim()) {
+    ElMessage.warning('应用名称不能为空')
+    return
+  }
+  if (!editForm.value.packageName.trim() && !editForm.value.iosBundleId.trim() && !editForm.value.harmonyBundleName.trim()) {
+    ElMessage.warning('至少填写一个平台的包名')
+    return
+  }
+  savingEdit.value = true
+  try {
+    await appApi.update(app.value!.appKey, {
+      packageName: editForm.value.packageName.trim() || undefined,
+      name: editForm.value.name.trim(),
+      iosBundleId: editForm.value.iosBundleId.trim() || undefined,
+      harmonyBundleName: editForm.value.harmonyBundleName.trim() || undefined,
+      description: editForm.value.description.trim() || undefined,
+      iconUrl: editForm.value.iconUrl.trim() || undefined,
+    })
+    ElMessage.success('应用信息已更新')
+    showEditDialog.value = false
+    await loadData()
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || '保存失败')
+  } finally {
+    savingEdit.value = false
+  }
+}
+
 function isServiceEnabled(svcType: string) {
   return services.value.some(s => s.serviceType === svcType && s.enabled)
 }
@@ -435,6 +523,7 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .mono { font-family: monospace; font-size: 12px; }
+.form-tip { font-size: 12px; color: var(--el-text-color-secondary); margin-top: 4px; }
 .info-card :deep(.el-descriptions__body) {
   overflow-x: auto;
 }
diff --git a/tenant-platform/src/views/apps/AppListView.vue b/tenant-platform/src/views/apps/AppListView.vue
index b5652ad..4085dda 100644
--- a/tenant-platform/src/views/apps/AppListView.vue
+++ b/tenant-platform/src/views/apps/AppListView.vue
@@ -10,7 +10,11 @@
     <div class="table-wrap">
       <el-table :data="apps" v-loading="loading" style="width:100%">
         <el-table-column prop="name" label="应用名称" min-width="120" />
-        <el-table-column prop="packageName" label="包名" min-width="160" />
+        <el-table-column label="包名" min-width="160">
+          <template #default="{ row }">
+            {{ row.packageName || row.iosBundleId || row.harmonyBundleName || '-' }}
+          </template>
+        </el-table-column>
         <el-table-column prop="appKey" label="AppKey" min-width="220" show-overflow-tooltip />
         <el-table-column prop="createdAt" label="创建时间" width="180">
           <template #default="{ row }">{{ formatDate(row.createdAt) }}</template>
@@ -26,22 +30,23 @@
 
     <el-dialog v-model="showCreate" title="创建应用" :width="dialogWidth">
       <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-position="top">
-        <el-form-item label="Android 包名" prop="packageName">
-          <el-input v-model="createForm.packageName" placeholder="com.example.app" />
+        <el-form-item label="应用名称" prop="name">
+          <el-input v-model="createForm.name" placeholder="我的应用" />
+        </el-form-item>
+        <el-form-item label="Android 包名">
+          <el-input v-model="createForm.packageName" placeholder="com.example.app（可选）" />
         </el-form-item>
         <el-form-item label="iOS Bundle ID">
-          <el-input v-model="createForm.iosBundleId" placeholder="com.example.app" />
+          <el-input v-model="createForm.iosBundleId" placeholder="com.example.app（可选）" />
         </el-form-item>
         <el-form-item label="鸿蒙 Bundle Name">
-          <el-input v-model="createForm.harmonyBundleName" placeholder="com.example.app" />
-        </el-form-item>
-        <el-form-item label="应用名称" prop="name">
-          <el-input v-model="createForm.name" />
+          <el-input v-model="createForm.harmonyBundleName" placeholder="com.example.app（可选）" />
         </el-form-item>
         <el-form-item label="简述">
-          <el-input v-model="createForm.description" type="textarea" :rows="3" />
+          <el-input v-model="createForm.description" type="textarea" :rows="3" placeholder="应用简述（可选）" />
         </el-form-item>
       </el-form>
+      <div class="create-tip">至少填写一个平台的包名</div>
       <template #footer>
         <el-button @click="showCreate = false">取消</el-button>
         <el-button type="primary" :loading="creating" @click="handleCreate">确定</el-button>
@@ -67,7 +72,6 @@ const dialogWidth = computed(() => (isMobile.value ? 'calc(100vw - 24px)' : '480
 
 const createForm = reactive({ packageName: '', iosBundleId: '', harmonyBundleName: '', name: '', description: '' })
 const createRules: FormRules = {
-  packageName: [{ required: true, message: '请输入包名' }],
   name: [{ required: true, message: '请输入应用名' }],
 }
 
@@ -83,9 +87,19 @@ async function loadApps() {
 
 async function handleCreate() {
   await createFormRef.value?.validate()
+  if (!createForm.packageName.trim() && !createForm.iosBundleId.trim() && !createForm.harmonyBundleName.trim()) {
+    ElMessage.warning('至少填写一个平台的包名')
+    return
+  }
   creating.value = true
   try {
-    await appApi.create(createForm)
+    await appApi.create({
+      name: createForm.name.trim(),
+      packageName: createForm.packageName.trim() || undefined,
+      iosBundleId: createForm.iosBundleId.trim() || undefined,
+      harmonyBundleName: createForm.harmonyBundleName.trim() || undefined,
+      description: createForm.description.trim() || undefined,
+    })
     showCreate.value = false
     ElMessage.success('应用创建成功')
     loadApps()
@@ -132,6 +146,12 @@ onBeforeUnmount(() => {
   background: #fff;
   border-radius: 12px;
 }
+.create-tip {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  margin-top: -8px;
+  padding-left: 4px;
+}
 
 @media (max-width: 767px) {
   .page-header {
diff --git a/tenant-platform/src/views/update/StoreGuideView.vue b/tenant-platform/src/views/update/StoreGuideView.vue
index 0881427..413ca36 100644
--- a/tenant-platform/src/views/update/StoreGuideView.vue
+++ b/tenant-platform/src/views/update/StoreGuideView.vue
@@ -1,63 +1,55 @@
 <template>
   <div class="store-guide-page">
-    <el-page-header @back="$router.back()" :content="`应用配置指引 — ${appKey}`" />
+    <el-page-header @back="$router.back()" content="应用配置指引" />
 
-    <el-alert
-      title="各应用商店的凭据配置说明。配置完成后回到版本管理页提交审核。"
-      type="info"
-      show-icon
-      :closable="false"
-      style="margin: 16px 0;"
-    />
-
-    <div class="guide-layout">
-      <!-- 左侧厂商列表 -->
-      <div class="guide-sidebar">
-        <div class="guide-sidebar-group" v-for="group in GUIDE_GROUPS" :key="group.label">
-          <div class="guide-sidebar-group-label">{{ group.label }}</div>
-          <div
-            v-for="store in group.stores"
-            :key="store.type"
-            class="guide-sidebar-item"
-            :class="{ active: activeStoreType === store.type }"
-            @click="activeStoreType = store.type"
-          >
-            <span class="guide-sidebar-label">{{ store.label }}</span>
-          </div>
-        </div>
+    <!-- 平台选择 -->
+    <div class="platform-selector">
+      <div
+        v-for="p in PLATFORMS"
+        :key="p.key"
+        class="platform-card"
+        :class="{ active: activePlatform === p.key }"
+        @click="activePlatform = p.key"
+      >
+        <div class="platform-icon">{{ p.icon }}</div>
+        <div class="platform-label">{{ p.label }}</div>
+        <div class="platform-desc">{{ p.desc }}</div>
       </div>
+    </div>
 
-      <!-- 右侧内容区 -->
-      <div class="guide-content" v-if="activeStore">
-        <div class="guide-content-header">
-          <div class="guide-content-title">
-            <span>{{ activeStore.label }}</span>
-          </div>
-          <p class="guide-subtitle">{{ activeStore.subtitle }}</p>
-        </div>
-
-        <div class="guide-content-body">
-          <div class="guide-steps-wrap">
-            <el-steps direction="vertical" :active="activeStore.steps.length" finish-status="success">
-              <el-step
-                v-for="step in activeStore.steps"
-                :key="step.title"
-                :title="step.title"
-                :description="step.description"
-              />
-            </el-steps>
-            <p class="guide-hint">{{ activeStore.hint }}</p>
+    <!-- 商店指引列表 -->
+    <div class="guide-list">
+      <div v-for="store in currentStores" :key="store.type" class="guide-card">
+        <div class="guide-card-left">
+          <div class="guide-card-header">
+            <h3 class="guide-card-title">{{ store.label }}</h3>
+            <p class="guide-card-subtitle">{{ store.subtitle }}</p>
           </div>
 
-          <div class="guide-image-wrap" v-if="activeStore.image">
-            <img :src="activeStore.image" :alt="activeStore.label + ' 配置截图'" class="guide-image" />
+          <div class="guide-steps">
+            <div v-for="(step, i) in store.steps" :key="i" class="guide-step">
+              <div class="guide-step-num">{{ i + 1 }}</div>
+              <div class="guide-step-content">
+                <div class="guide-step-title">{{ step.title }}</div>
+                <div class="guide-step-desc">{{ step.description }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="guide-hint" v-if="store.hint">
+            <span class="guide-hint-icon">💡</span>
+            {{ store.hint }}
+          </div>
+
+          <div class="guide-footer">
+            <el-link :href="store.url" target="_blank" type="primary">
+              {{ store.urlLabel }} →
+            </el-link>
           </div>
         </div>
 
-        <div class="guide-footer">
-          <el-link :href="activeStore.url" target="_blank" type="primary">
-            {{ activeStore.urlLabel }}
-          </el-link>
+        <div class="guide-card-right" v-if="store.image">
+          <img :src="store.image" :alt="store.label + ' 配置截图'" class="guide-screenshot" />
         </div>
       </div>
     </div>
@@ -80,6 +72,7 @@ interface StoreGuide {
   type: string
   label: string
   subtitle: string
+  platform: string
   url: string
   urlLabel: string
   steps: { title: string; description: string }[]
@@ -87,286 +80,308 @@ interface StoreGuide {
   image?: string
 }
 
+const PLATFORMS = [
+  { key: 'android', label: 'Android', icon: '🤖', desc: '华为 / 小米 / OPPO / vivo / 荣耀 / Google Play' },
+  { key: 'ios', label: 'iOS', icon: '🍎', desc: 'Apple App Store' },
+  { key: 'harmony', label: '鸿蒙', icon: '🔷', desc: 'HarmonyOS 应用市场' },
+  { key: 'other', label: '通知配置', icon: '🔔', desc: '审核状态回调通知' },
+]
+
 const STORE_GUIDES: StoreGuide[] = [
   {
-    type: 'HUAWEI',
-    label: '华为应用市场',
+    type: 'HUAWEI', label: '华为应用市场', platform: 'android',
     subtitle: 'AppGallery Connect API 凭据',
     url: 'https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agcapi-getstarted-0000001111845114',
     urlLabel: '查看华为官方文档',
     steps: [
-      { title: '进入 AppGallery Connect', description: '在华为开发者平台找到目标应用。' },
-      { title: '创建 Connect API 凭据', description: '进入开发工具 → Connect API，创建服务端凭据并选择 APP 管理员角色。' },
-      { title: '填写 Client ID / Client Secret', description: '复制凭据信息保存到租户平台的凭据配置中。' },
+      { title: '进入 AppGallery Connect', description: '在华为开发者平台（developer.huawei.com）找到目标应用。' },
+      { title: '创建 Connect API 凭据', description: '进入"开发" → "API 管理" → 开启 Connect API，创建服务端凭据并选择 APP 管理员角色。' },
+      { title: '复制 Client ID 和 Client Secret', description: '创建成功后复制凭据，保存到租户平台的"凭据配置"中。' },
     ],
-    hint: '配置后可自动上传 APK 并提交审核，支持回调跟踪审核状态。',
+    hint: '配置后可自动上传 APK 并提交审核，支持轮询跟踪审核状态。',
     image: huaweiGuideImage,
   },
   {
-    type: 'MI',
-    label: '小米应用商店',
+    type: 'MI', label: '小米应用商店', platform: 'android',
     subtitle: '自动发布接口的账号与私钥',
     url: 'https://dev.mi.com/distribute/doc/details?pId=1134',
     urlLabel: '查看小米官方文档',
     steps: [
-      { title: '进入应用游戏管理', description: '在控制台选择目标应用。' },
-      { title: '打开自动发布接口', description: '下载公钥文件并准备 RSA 私钥。' },
-      { title: '填写用户名 / 公钥 / 私钥', description: '保存的是服务端上传所需凭据。' },
+      { title: '进入应用游戏管理', description: '在小米开放平台控制台选择目标应用。' },
+      { title: '打开自动发布接口', description: '进入"版本管理" → "自动发布接口"，下载公钥文件并准备 RSA 私钥。' },
+      { title: '录入用户名和私钥', description: '将用户名、公钥证书内容、RSA 私钥分别保存到凭据配置中。' },
     ],
-    hint: '字段为 username / publicKey / privateKey，与后端服务一致。',
+    hint: '字段为 username / publicKey / privateKey，与后端上传服务一致。',
     image: miGuideImage,
   },
   {
-    type: 'OPPO',
-    label: 'OPPO 软件商店',
+    type: 'OPPO', label: 'OPPO 软件商店', platform: 'android',
     subtitle: '我的 API 服务端应用凭据',
     url: 'https://open.oppomobile.com/new/developmentDoc/info?id=11119',
     urlLabel: '查看 OPPO 官方文档',
     steps: [
-      { title: '进入"我的 API"', description: '确认当前应用拥有服务端应用能力。' },
-      { title: '新建服务端应用', description: '按平台要求创建接口凭据。' },
-      { title: '填写 Client ID / Client Secret', description: '对应凭据配置中的两个字段。' },
+      { title: '进入"我的 API"', description: '在 OPPO 开放平台确认当前应用拥有服务端应用能力。' },
+      { title: '新建服务端应用', description: '点击"创建服务端应用"，按平台要求完成凭据申请。' },
+      { title: '复制 Client ID 和 Client Secret', description: '创建成功后复制两个值，保存到凭据配置中。' },
     ],
     hint: '字段与后端 submitToOppo 读取逻辑一致。',
     image: oppoGuideImage,
   },
   {
-    type: 'VIVO',
-    label: 'vivo 应用商店',
+    type: 'VIVO', label: 'vivo 应用商店', platform: 'android',
     subtitle: 'API 管理中的 access_key / access_secret',
     url: 'https://dev.vivo.com.cn/documentCenter/doc/326',
     urlLabel: '查看 vivo 官方文档',
     steps: [
-      { title: '进入 API 管理', description: '找到当前应用对应的接口管理入口。' },
-      { title: '激活后再读取密钥', description: '首次启用后可能需要刷新页面。' },
-      { title: '填写 Access Key / Access Secret', description: '与后端提交服务字段保持一致。' },
+      { title: '进入 API 管理', description: '在 vivo 开放平台找到当前应用对应的接口管理入口。' },
+      { title: '激活并读取密钥', description: '首次启用 API 后需要刷新页面，然后复制 access_key 和 access_secret。' },
+      { title: '保存到凭据配置', description: '将 Access Key 和 Access Secret 填入凭据配置中。' },
     ],
-    hint: '注意请求频率限制，状态拉取需做节流。',
+    hint: '注意请求频率限制，审核状态轮询已内置节流。',
     image: vivoGuideImage,
   },
   {
-    type: 'HONOR',
-    label: '荣耀应用市场',
+    type: 'HONOR', label: '荣耀应用市场', platform: 'android',
     subtitle: '管理中心 API 凭据',
     url: 'https://developer.honor.com/cn',
     urlLabel: '查看荣耀官方文档',
     steps: [
-      { title: '进入管理中心', description: '打开荣耀开发者后台并进入凭证页。' },
-      { title: '申请凭证', description: '创建用于服务端上传的 API 凭据。' },
-      { title: '填写 Client ID / Client Secret', description: '与华为同类流程接入。' },
+      { title: '进入管理中心', description: '打开荣耀开发者后台（developer.honor.com）并进入凭证页。' },
+      { title: '申请服务端凭据', description: '创建用于服务端上传的 API 凭据。' },
+      { title: '复制 Client ID 和 Client Secret', description: '与华为同类流程，复制凭据保存到配置中。' },
     ],
-    hint: '与后端 Honor 提交流程完全一致。',
+    hint: '与后端 Honor 提交流程完全一致；跳转页可选填写。',
     image: honorGuideImage,
   },
   {
-    type: 'APP_STORE',
-    label: 'Apple App Store',
-    subtitle: 'App Store Connect API Key',
-    url: 'https://developer.apple.com/documentation/appstoreconnectapi',
-    urlLabel: '查看 Apple 官方文档',
-    steps: [
-      { title: '创建 API Key', description: '进入 App Store Connect → 用户和访问 → 整合 → 点击 "+" 创建密钥。' },
-      { title: '下载 .p8 私钥', description: '创建后立即下载私钥文件（只能下载一次），复制完整内容。' },
-      { title: '填写 Issuer ID / Key ID / 私钥', description: 'Issuer ID 在整合页面顶部，Key ID 在密钥列表中。' },
-    ],
-    hint: '配置 API Key 后可自动查询审核状态。私钥为 .p8 文件的完整内容，包含 BEGIN/END 标记。',
-  },
-  {
-    type: 'HARMONY_APP',
-    label: '鸿蒙应用',
-    subtitle: 'AppGallery Connect API 凭据',
-    url: 'https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agcapi-getstarted-0000001111845114',
-    urlLabel: '查看鸿蒙官方文档',
-    steps: [
-      { title: '进入 AppGallery Connect', description: '在华为开发者平台找到目标鸿蒙应用。' },
-      { title: '创建 Connect API 凭据', description: '进入开发工具 → Connect API，创建服务端凭据。' },
-      { title: '填写 Client ID / Client Secret', description: '复制凭据信息保存到凭据配置中。' },
-    ],
-    hint: '配置 API 凭证后可自动查询审核状态。鸿蒙应用审核流程与华为应用市场共用 AppGallery Connect 平台。',
-  },
-  {
-    type: 'GOOGLE_PLAY',
-    label: 'Google Play',
+    type: 'GOOGLE_PLAY', label: 'Google Play', platform: 'android',
     subtitle: '服务账号 JSON 凭据',
     url: 'https://developer.android.com/google/play/developer-api',
     urlLabel: '查看 Google Play 官方文档',
     steps: [
-      { title: '创建服务账号', description: '从 Google Cloud 控制台获取服务账号 JSON。' },
-      { title: '授予 Play 管理权限', description: '把该服务账号绑定到目标应用的发布权限。' },
-      { title: '粘贴 JSON 内容', description: '将完整的 JSON 内容保存到凭据配置中。' },
+      { title: '创建服务账号', description: '从 Google Cloud 控制台创建服务账号并下载 JSON 密钥文件。' },
+      { title: '授予 Play 管理权限', description: '在 Google Play Console 中将该服务账号绑定到目标应用，授予发布权限。' },
+      { title: '粘贴 JSON 内容', description: '将完整的 JSON 文件内容保存到凭据配置中。' },
     ],
     hint: '适合由服务端或脚本自动提交审核。',
   },
+  {
+    type: 'APP_STORE', label: 'Apple App Store', platform: 'ios',
+    subtitle: 'App Store Connect API Key',
+    url: 'https://developer.apple.com/documentation/appstoreconnectapi',
+    urlLabel: '查看 Apple 官方文档',
+    steps: [
+      { title: '创建 API Key', description: '进入 App Store Connect → 用户和访问 → 整合 → 点击"+"创建密钥，选择"管理"权限。' },
+      { title: '下载 .p8 私钥', description: '创建后立即下载私钥文件（只能下载一次），用文本编辑器打开并复制完整内容。' },
+      { title: '填写 Issuer ID / Key ID / 私钥', description: 'Issuer ID 在整合页面顶部，Key ID 在密钥列表中，私钥包含 BEGIN/END 标记。' },
+    ],
+    hint: '配置后可自动查询 App Store 审核状态。私钥为 .p8 文件的完整 PEM 内容。',
+  },
+  {
+    type: 'HARMONY_APP', label: '鸿蒙应用市场', platform: 'harmony',
+    subtitle: 'AppGallery Connect API 凭据',
+    url: 'https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agcapi-getstarted-0000001111845114',
+    urlLabel: '查看鸿蒙官方文档',
+    steps: [
+      { title: '进入 AppGallery Connect', description: '在华为开发者平台找到目标鸿蒙应用（与华为应用市场共用平台）。' },
+      { title: '创建 Connect API 凭据', description: '进入"开发" → "API 管理" → 开启 Connect API，创建服务端凭据。' },
+      { title: '复制 Client ID 和 Client Secret', description: '复制凭据信息保存到凭据配置中。' },
+    ],
+    hint: '鸿蒙应用审核流程与华为应用市场共用 AppGallery Connect 平台。配置后可自动查询审核状态。',
+  },
 ]
 
-const GUIDE_GROUPS = [
-  { label: 'Android', stores: STORE_GUIDES.filter(s => ['HUAWEI', 'MI', 'OPPO', 'VIVO', 'HONOR', 'GOOGLE_PLAY'].includes(s.type)) },
-  { label: 'iOS / 鸿蒙', stores: STORE_GUIDES.filter(s => ['APP_STORE', 'HARMONY_APP'].includes(s.type)) },
-]
-
-const activeStoreType = ref(STORE_GUIDES[0].type)
-const activeStore = computed(() => STORE_GUIDES.find(s => s.type === activeStoreType.value) ?? STORE_GUIDES[0])
+const activePlatform = ref('android')
+const currentStores = computed(() => STORE_GUIDES.filter(s => s.platform === activePlatform.value))
 </script>
 
 <style scoped>
 .store-guide-page {
-  padding: 20px;
-  max-width: 1200px;
+  padding: 20px 24px;
+  max-width: 960px;
   margin: 0 auto;
 }
 
-.guide-layout {
+/* ── 平台选择器 ── */
+.platform-selector {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin: 20px 0 28px;
+}
+
+.platform-card {
   display: flex;
-  gap: 16px;
-  margin-top: 16px;
-}
-
-.guide-sidebar {
-  width: 200px;
-  flex-shrink: 0;
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--el-bg-color);
-}
-
-.guide-sidebar-group-label {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--el-text-color-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  padding: 10px 16px 4px;
-  background: var(--el-fill-color-lighter);
-}
-
-.guide-sidebar-item {
-  display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: center;
-  padding: 10px 16px;
+  padding: 20px 12px;
+  border: 2px solid var(--el-border-color-light);
+  border-radius: 12px;
   cursor: pointer;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-  transition: background 0.2s;
-}
-
-.guide-sidebar-item:last-child {
-  border-bottom: none;
-}
-
-.guide-sidebar-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.guide-sidebar-item.active {
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-  border-left: 3px solid var(--el-color-primary);
-  font-weight: 500;
-}
-
-.guide-sidebar-label {
-  font-size: 13px;
-}
-
-.guide-content {
-  flex: 1;
-  min-width: 0;
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-  padding: 24px;
+  transition: all 0.2s;
   background: var(--el-bg-color);
 }
 
-.guide-content-header {
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
+.platform-card:hover {
+  border-color: var(--el-color-primary-light-5);
+  background: var(--el-color-primary-light-9);
 }
 
-.guide-content-title {
+.platform-card.active {
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  box-shadow: 0 2px 8px rgba(var(--el-color-primary-rgb), 0.15);
+}
+
+.platform-icon {
+  font-size: 32px;
+  margin-bottom: 8px;
+}
+
+.platform-label {
+  font-size: 15px;
   font-weight: 600;
-  font-size: 18px;
   margin-bottom: 4px;
 }
 
-.guide-subtitle {
-  margin: 0;
+.platform-desc {
+  font-size: 11px;
   color: var(--el-text-color-secondary);
-  font-size: 14px;
+  text-align: center;
+  line-height: 1.4;
 }
 
-.guide-content-body {
+/* ── 指引卡片列表 ── */
+.guide-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.guide-card {
   display: flex;
   gap: 24px;
+  padding: 24px;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 12px;
+  background: var(--el-bg-color);
 }
 
-.guide-steps-wrap {
+.guide-card-left {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.guide-card-header {
+  margin-bottom: 20px;
+}
+
+.guide-card-title {
+  font-size: 17px;
+  font-weight: 600;
+  margin: 0 0 4px;
+}
+
+.guide-card-subtitle {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+  margin: 0;
+}
+
+/* ── 步骤 ── */
+.guide-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.guide-step {
+  display: flex;
+  gap: 12px;
+}
+
+.guide-step-num {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--el-color-primary);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.guide-step-content {
   flex: 1;
   min-width: 0;
 }
 
-.guide-hint {
-  color: var(--el-text-color-secondary);
-  font-size: 13px;
-  margin-top: 16px;
-  padding: 12px;
-  background: var(--el-fill-color-light);
-  border-radius: 6px;
-  line-height: 1.6;
+.guide-step-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 2px;
 }
 
-.guide-image-wrap {
-  width: 400px;
+.guide-step-desc {
+  font-size: 13px;
+  color: var(--el-text-color-regular);
+  line-height: 1.5;
+}
+
+/* ── 提示 ── */
+.guide-hint {
+  display: flex;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.6;
+  padding: 12px;
+  background: var(--el-fill-color-light);
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.guide-hint-icon {
   flex-shrink: 0;
 }
 
-.guide-image {
+/* ── 底部链接 ── */
+.guide-footer {
+  margin-top: auto;
+  padding-top: 12px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+/* ── 截图 ── */
+.guide-card-right {
+  width: 340px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+}
+
+.guide-screenshot {
   width: 100%;
   border-radius: 8px;
   border: 1px solid var(--el-border-color-light);
 }
 
-.guide-footer {
-  margin-top: 20px;
-  padding-top: 16px;
-  border-top: 1px solid var(--el-border-color-lighter);
-}
-
-@media (max-width: 992px) {
-  .guide-layout {
+/* ── 响应式 ── */
+@media (max-width: 768px) {
+  .platform-selector {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .guide-card {
     flex-direction: column;
   }
-  .guide-sidebar {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  .guide-sidebar-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
-    padding: 8px 12px;
-    align-items: center;
-  }
-  .guide-sidebar-group-label {
-    padding: 0;
-    background: transparent;
-    margin-right: 8px;
-  }
-  .guide-sidebar-item {
-    border: 1px solid var(--el-border-color-light);
-    border-radius: 6px;
-    padding: 6px 12px;
-    border-bottom: none;
-  }
-  .guide-sidebar-item.active {
-    border-left: 1px solid var(--el-color-primary);
-  }
-  .guide-content-body {
-    flex-direction: column;
-  }
-  .guide-image-wrap {
+  .guide-card-right {
     width: 100%;
   }
 }
diff --git a/tenant-platform/src/views/update/VersionManagementView.vue b/tenant-platform/src/views/update/VersionManagementView.vue
index 16cd198..3b8afa8 100644
--- a/tenant-platform/src/views/update/VersionManagementView.vue
+++ b/tenant-platform/src/views/update/VersionManagementView.vue
@@ -45,9 +45,17 @@
               <el-radio-button value="IOS">iOS</el-radio-button>
               <el-radio-button value="HARMONY">Harmony</el-radio-button>
             </el-radio-group>
-            <el-button type="primary" @click="openUploadAppDialog">上传新版本</el-button>
+            <el-button type="primary" @click="openUploadAppDialog" :disabled="!platformPackageName">上传新版本</el-button>
             <el-button @click="loadAppVersions" :loading="loadingApp">刷新</el-button>
           </div>
+          <el-alert
+            v-if="!platformPackageName"
+            :title="`${appPlatform === 'ANDROID' ? 'Android' : appPlatform === 'IOS' ? 'iOS' : '鸿蒙'}平台未配置包名，请先在应用信息中配置`"
+            type="warning"
+            show-icon
+            :closable="false"
+            style="margin-bottom:12px"
+          />
 
           <div class="table-wrap">
           <el-table :data="appVersions" v-loading="loadingApp" border stripe>
@@ -264,36 +272,57 @@
               </div>
             </el-tab-pane>
             <el-tab-pane label="应用配置指引" name="guide">
-              <div v-for="group in GUIDE_GROUPS" :key="group.label" class="guide-group">
-                <div class="guide-group-title">{{ group.label }}</div>
-                <div class="guide-grid">
-                  <el-card v-for="store in group.stores" :key="store.type" class="guide-card" shadow="never">
-                    <div class="guide-card-title-row">
-                      <div>
-                        <div class="guide-card-title">{{ store.label }}</div>
-                        <div class="guide-card-subtitle">{{ store.guideSubtitle }}</div>
+              <!-- 平台选择 -->
+              <div class="guide-platform-tabs">
+                <el-radio-group v-model="guidePlatform" size="default">
+                  <el-radio-button value="android">🤖 Android</el-radio-button>
+                  <el-radio-button value="ios">🍎 iOS</el-radio-button>
+                  <el-radio-button value="harmony">🔷 鸿蒙</el-radio-button>
+                </el-radio-group>
+              </div>
+              <!-- 商店列表 -->
+              <div class="guide-store-list">
+                <el-collapse v-model="guideExpandedStores">
+                  <el-collapse-item
+                    v-for="store in guideFilteredStores"
+                    :key="store.type"
+                    :name="store.type"
+                    class="guide-store-item"
+                  >
+                    <template #title>
+                      <div class="guide-store-header">
+                        <span class="guide-store-name">{{ store.label }}</span>
+                        <el-tag size="small" :type="isStoreEnabled(store.type) ? 'success' : 'info'">
+                          {{ isStoreEnabled(store.type) ? '已配置' : '未配置' }}
+                        </el-tag>
+                      </div>
+                    </template>
+                    <div class="guide-store-body">
+                      <div class="guide-store-steps">
+                        <div v-for="(step, i) in store.guideSteps" :key="i" class="guide-step-row">
+                          <div class="guide-step-badge">{{ i + 1 }}</div>
+                          <div>
+                            <div class="guide-step-title">{{ step.title }}</div>
+                            <div class="guide-step-desc">{{ step.description }}</div>
+                          </div>
+                        </div>
+                      </div>
+                      <el-image
+                        v-if="store.guideImage"
+                        :src="store.guideImage"
+                        fit="contain"
+                        class="guide-store-image"
+                        preview-teleported
+                      />
+                      <div class="guide-store-hint">{{ store.guideHint }}</div>
+                      <div class="guide-store-link">
+                        <div class="guide-store-link-label">应用跳转链接</div>
+                        <div class="guide-store-link-hint">{{ store.jumpLinkHint }}</div>
+                        <el-link :href="store.guideUrl" target="_blank" type="primary" size="small">查看官方文档 →</el-link>
                       </div>
-                      <el-tag size="small" :type="isStoreEnabled(store.type) ? 'success' : 'info'">
-                        {{ isStoreEnabled(store.type) ? '已配置' : '未配置' }}
-                      </el-tag>
                     </div>
-                    <el-steps direction="vertical" :active="store.guideSteps.length" finish-status="success" style="margin:12px 0 8px">
-                      <el-step v-for="step in store.guideSteps" :key="step.title" :title="step.title" :description="step.description" />
-                    </el-steps>
-                    <el-image
-                      v-if="store.guideImage"
-                      :src="store.guideImage"
-                      fit="cover"
-                      class="guide-image"
-                      preview-teleported
-                    />
-                    <div class="guide-hint">{{ store.guideHint }}</div>
-                    <el-divider />
-                    <div class="guide-link-title">应用跳转链接</div>
-                    <div class="guide-link-hint">{{ store.jumpLinkHint }}</div>
-                    <el-link :href="store.guideUrl" target="_blank" type="primary">查看官方文档</el-link>
-                  </el-card>
-                </div>
+                  </el-collapse-item>
+                </el-collapse>
               </div>
             </el-tab-pane>
           </el-tabs>
@@ -988,6 +1017,16 @@ async function submitActivation() {
 }
 const app = ref<App | null>(null)
 const pageTitle = computed(() => app.value?.name ?? appKey.value)
+
+const platformPackageName = computed(() => {
+  if (!app.value) return ''
+  const map: Record<string, string | undefined> = {
+    ANDROID: app.value.packageName,
+    IOS: app.value.iosBundleId,
+    HARMONY: app.value.harmonyBundleName,
+  }
+  return map[appPlatform.value] ?? ''
+})
 const isMobile = ref(false)
 const dialogWidth = computed(() => (isMobile.value ? 'calc(100vw - 24px)' : '920px'))
 
@@ -1311,6 +1350,18 @@ const GUIDE_GROUPS = computed(() => [
   },
 ])
 
+const guidePlatform = ref('android')
+const guideExpandedStores = ref<string[]>([])
+const guideFilteredStores = computed(() => {
+  const map: Record<string, string[]> = {
+    android: ['HUAWEI', 'MI', 'OPPO', 'VIVO', 'HONOR', 'GOOGLE_PLAY'],
+    ios: ['APP_STORE'],
+    harmony: ['HARMONY_APP'],
+  }
+  const types = map[guidePlatform.value] ?? []
+  return STORE_DEFS.filter(s => types.includes(s.type))
+})
+
 function getStoreConfig(type: StoreType): StoreConfig | undefined {
   return storeConfigs.value.find(c => c.storeType === type)
 }
@@ -2616,23 +2667,102 @@ onBeforeUnmount(() => {
   max-width: 920px;
 }
 
-.guide-group {
-  margin-bottom: 24px;
+.guide-platform-tabs {
+  margin-bottom: 20px;
 }
 
-.guide-group-title {
-  font-size: 15px;
+.guide-store-list {
+  max-width: 800px;
+}
+
+.guide-store-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.guide-store-name {
   font-weight: 600;
-  color: var(--el-text-color-primary);
-  margin-bottom: 12px;
-  padding-left: 10px;
-  border-left: 3px solid var(--el-color-primary);
+  font-size: 14px;
 }
 
-.guide-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+.guide-store-body {
+  display: flex;
+  flex-direction: column;
   gap: 16px;
+  padding: 4px 0;
+}
+
+.guide-store-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.guide-step-row {
+  display: flex;
+  gap: 10px;
+}
+
+.guide-step-badge {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--el-color-primary);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.guide-step-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 1px;
+}
+
+.guide-step-desc {
+  font-size: 12px;
+  color: var(--el-text-color-regular);
+  line-height: 1.5;
+}
+
+.guide-store-image {
+  width: 100%;
+  max-height: 200px;
+  border-radius: 6px;
+}
+
+.guide-store-hint {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.6;
+  padding: 10px 12px;
+  background: var(--el-fill-color-light);
+  border-radius: 6px;
+}
+
+.guide-store-link {
+  padding-top: 12px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.guide-store-link-label {
+  font-weight: 600;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.guide-store-link-hint {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.5;
+  margin-bottom: 8px;
 }
 
 .guide-card {