XuqmGroup-Web/tenant-platform/src/views/update/VersionManagementView.vue

<template>
  <div>
    <el-page-header @back="$router.back()" :content="`版本管理 — ${appId}`" style="margin-bottom:20px" />

    <el-card>
      <el-tabs v-model="activeTab">
        <!-- App Versions -->
        <el-tab-pane label="App 整包版本" name="app">
          <div class="toolbar">
            <el-radio-group v-model="appPlatform" @change="loadAppVersions" style="margin-right:12px">
              <el-radio-button value="ANDROID">Android</el-radio-button>
              <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="showUploadApp = true">上传新版本</el-button>
            <el-button @click="goToStoreGuide">应用配置指引</el-button>
            <el-button @click="loadAppVersions" :loading="loadingApp">刷新</el-button>
          </div>

          <el-table :data="appVersions" v-loading="loadingApp" border stripe>
            <el-table-column prop="versionName" label="版本名" width="110" />
            <el-table-column prop="versionCode" label="版本码" width="90" />
            <el-table-column label="状态" width="140">
              <template #default="{row}">
                <el-tag :type="statusTagType(row)" size="small">{{ statusLabel(row) }}</el-tag>
                <el-tag v-if="row.grayEnabled" type="warning" size="small" style="margin-left:4px">
                  灰度 {{ row.grayPercent }}%
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="应用商店" width="220" show-overflow-tooltip>
              <template #default="{row}">
                <template v-if="parseStoreReview(row.storeReviewStatus).length">
                  <el-tag
                    v-for="item in parseStoreReview(row.storeReviewStatus)"
                    :key="item.store"
                    :type="reviewTagType(item.state)"
                    size="small"
                    style="margin:2px"
                  >{{ storeLabel(item.store) }} · {{ reviewLabel(item.state) }}</el-tag>
                </template>
                <span v-else class="text-muted">—</span>
              </template>
            </el-table-column>
            <el-table-column prop="forceUpdate" label="强制" width="70">
              <template #default="{row}">
                <el-tag :type="row.forceUpdate ? 'danger' : 'info'" size="small">
                  {{ row.forceUpdate ? '是' : '否' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="changeLog" label="更新说明" show-overflow-tooltip />
            <el-table-column prop="createdAt" label="上传时间" width="160">
              <template #default="{row}">{{ formatTime(row.createdAt) }}</template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right">
              <template #default="{row}">
                <el-button
                  v-if="row.publishStatus === 'DRAFT'"
                  link type="success" size="small"
                  @click="publishApp(row.id)">发布</el-button>
                <el-button
                  v-if="row.publishStatus === 'PUBLISHED'"
                  link type="warning" size="small"
                  @click="openGrayDialog(row, 'app')">灰度</el-button>
                <el-button
                  v-if="row.publishStatus === 'PUBLISHED'"
                  link type="danger" size="small"
                  @click="unpublishApp(row.id)">下架</el-button>
                <el-button
                  v-if="row.downloadUrl && row.publishStatus !== 'DEPRECATED'"
                  link type="primary" size="small"
                  @click="openSubmitStoreDialog(row)">提交市场</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- RN Bundles -->
        <el-tab-pane label="RN Bundle 热更新" name="rn">
          <div class="toolbar">
            <el-input
              v-model="rnModuleFilter"
              placeholder="模块ID（可选）"
              clearable
              style="width:180px;margin-right:8px"
              @change="loadRnBundles"
            />
            <el-radio-group v-model="rnPlatform" @change="loadRnBundles" style="margin-right:12px">
              <el-radio-button value="">全平台</el-radio-button>
              <el-radio-button value="ANDROID">Android</el-radio-button>
              <el-radio-button value="IOS">iOS</el-radio-button>
            </el-radio-group>
            <el-button type="primary" @click="showUploadRn = true">上传 Bundle</el-button>
            <el-button @click="loadRnBundles" :loading="loadingRn">刷新</el-button>
          </div>

          <el-table :data="rnBundles" v-loading="loadingRn" border stripe>
            <el-table-column prop="moduleId" label="模块ID" width="140" />
            <el-table-column prop="version" label="版本" width="100" />
            <el-table-column prop="platform" label="平台" width="90" />
            <el-table-column label="状态" width="140">
              <template #default="{row}">
                <el-tag :type="statusTagType(row)" size="small">{{ statusLabel(row) }}</el-tag>
                <el-tag v-if="row.grayEnabled" type="warning" size="small" style="margin-left:4px">
                  灰度 {{ row.grayPercent }}%
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="minCommonVersion" label="最低 Common 版本" width="160" />
            <el-table-column prop="note" label="说明" show-overflow-tooltip />
            <el-table-column prop="createdAt" label="上传时间" width="160">
              <template #default="{row}">{{ formatTime(row.createdAt) }}</template>
            </el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="{row}">
                <el-button v-if="row.publishStatus === 'DRAFT'" link type="success" size="small" @click="publishRn(row.id)">发布</el-button>
                <el-button v-if="row.publishStatus === 'PUBLISHED'" link type="warning" size="small" @click="openGrayDialog(row, 'rn')">灰度</el-button>
                <el-button v-if="row.publishStatus === 'PUBLISHED'" link type="danger" size="small" @click="unpublishRn(row.id)">下架</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- App Store Config -->
        <el-tab-pane label="应用商店配置" name="store">
          <el-alert
            title="应用商店配置按渠道分别维护，页面只保留真实可用的凭据字段和提交说明。"
            type="info"
            show-icon
            :closable="false"
            style="margin-bottom:16px"
          />
          <div class="store-grid">
            <el-card
              v-for="store in STORE_DEFS"
              :key="store.type"
              class="store-card"
              shadow="hover"
            >
              <div class="store-card-header">
                <span class="store-card-name">{{ store.label }}</span>
                <el-switch
                  :model-value="isStoreEnabled(store.type)"
                  :disabled="!getStoreConfig(store.type)"
                  @change="toggleStore(store.type, $event as boolean)"
                />
              </div>
              <div class="store-card-status">
                <el-tag v-if="getStoreConfig(store.type)" type="success" size="small">已配置</el-tag>
                <el-tag v-else type="info" size="small">未配置</el-tag>
              </div>
              <div class="store-card-meta">
                <div v-if="getStoreConfig(store.type)">更新于 {{ formatTime(getStoreConfig(store.type)?.updatedAt ?? '') }}</div>
                <div v-else>请先补齐 {{ store.shortLabel }} 的凭据</div>
              </div>
              <div class="store-card-footer">
                <el-button size="small" @click="openStoreConfigDialog(store)">
                  {{ getStoreConfig(store.type) ? '编辑凭据' : '配置凭据' }}
                </el-button>
                <el-button
                  v-if="getStoreConfig(store.type)"
                  size="small" type="danger"
                  @click="removeStoreConfig(store.type)"
                >删除</el-button>
              </div>
            </el-card>
          </div>
        </el-tab-pane>

        <!-- Release Defaults -->
        <el-tab-pane label="发版默认配置" name="release-config">
          <el-alert
            title="这里配置的是当前租户应用的更新默认值，脚本运行时会自动读取并优先使用这些设置。它们不会替代每次发版时的最终确认。"
            type="info"
            show-icon
            :closable="false"
            style="margin-bottom:16px"
          />
          <div class="toolbar">
            <el-radio-group v-model="releaseConfigPlatform" @change="loadReleaseConfig" style="margin-right:12px">
              <el-radio-button value="ANDROID">Android</el-radio-button>
              <el-radio-button value="IOS">iOS</el-radio-button>
              <el-radio-button value="HARMONY">Harmony</el-radio-button>
            </el-radio-group>
            <el-button @click="loadReleaseConfig" :loading="loadingReleaseConfig">刷新</el-button>
            <el-button type="primary" @click="saveReleaseConfig" :loading="savingReleaseConfig">保存配置</el-button>
          </div>

          <el-form :model="releaseConfigForm" label-width="150px" class="release-config-form">
            <el-form-item label="默认发布模式">
              <el-select v-model="releaseConfigForm.defaultPublishMode" style="width:240px">
                <el-option value="MANUAL" label="手动发布" />
                <el-option value="NOW" label="上传即发布" />
                <el-option value="SCHEDULED" label="定时发布" />
                <el-option value="AUTO_REVIEW" label="审核通过后自动发布" />
              </el-select>
            </el-form-item>
            <el-form-item label="默认计划发布时间">
              <el-date-picker
                v-model="releaseConfigForm.defaultScheduledPublishAt"
                type="datetime"
                placeholder="留空则不默认定时"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DDTHH:mm:ss"
                clearable
              />
            </el-form-item>
            <el-form-item label="默认审核后自动发布">
              <el-switch v-model="releaseConfigForm.defaultAutoPublishAfterReview" :disabled="!!releaseConfigForm.defaultScheduledPublishAt" />
              <span class="form-tip">与默认定时发布互斥</span>
            </el-form-item>
            <el-form-item label="默认立即发布">
              <el-switch v-model="releaseConfigForm.defaultPublishImmediately" :disabled="!!releaseConfigForm.defaultScheduledPublishAt" />
            </el-form-item>
            <el-form-item label="默认 Webhook URL">
              <el-input v-model="releaseConfigForm.defaultWebhookUrl" placeholder="审核状态变更时回调的 URL" />
            </el-form-item>
            <el-form-item label="默认强制更新">
              <el-switch v-model="releaseConfigForm.defaultForceUpdate" />
            </el-form-item>
            <el-form-item label="默认灰度开关">
              <el-switch v-model="releaseConfigForm.defaultGrayEnabled" />
            </el-form-item>
            <el-form-item v-if="releaseConfigForm.defaultGrayEnabled" label="默认灰度比例">
              <el-slider v-model="releaseConfigForm.defaultGrayPercent" :min="1" :max="100" show-input />
            </el-form-item>
            <el-form-item label="默认包名 / Bundle ID">
              <el-input v-model="releaseConfigForm.defaultPackageName" placeholder="脚本可自动读取，也可在这里预置" />
            </el-form-item>
            <el-form-item v-if="releaseConfigPlatform === 'IOS'" label="默认 App Store 链接">
              <el-input v-model="releaseConfigForm.defaultAppStoreUrl" placeholder="iOS 默认跳转链接" />
            </el-form-item>
            <el-form-item v-if="releaseConfigPlatform === 'HARMONY'" label="默认应用市场链接">
              <el-input v-model="releaseConfigForm.defaultMarketUrl" placeholder="Harmony 默认市场链接" />
            </el-form-item>
            <el-form-item label="默认市场提交目标">
              <el-checkbox-group
                v-model="releaseConfigForm.defaultStoreTargets"
                :disabled="releaseStoreDefs.length === 0"
              >
                <div v-if="releaseStoreDefs.length" class="store-checkbox-grid">
                  <div v-for="store in releaseStoreDefs" :key="store.type" class="release-store-checkbox-row">
                    <el-checkbox :value="store.type">{{ store.label }}</el-checkbox>
                  </div>
                </div>
                <el-alert
                  v-else
                  type="info"
                  :closable="false"
                  show-icon
                  title="当前平台没有需要默认勾选的市场目标，仍可手动在发版时选择。"
                />
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- Gray Release Dialog -->
    <el-dialog v-model="showGray" title="灰度发布配置" width="400px">
      <el-form label-width="90px">
        <el-form-item label="开启灰度"><el-switch v-model="grayForm.enabled" /></el-form-item>
        <el-form-item label="灰度比例" v-if="grayForm.enabled">
          <el-slider v-model="grayForm.percent" :min="1" :max="100" show-input />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showGray = false">取消</el-button>
        <el-button type="primary" @click="submitGray" :loading="submittingGray">保存</el-button>
      </template>
    </el-dialog>

    <!-- Submit to Store Dialog -->
    <el-dialog v-model="showSubmitStore" title="提交应用市场" width="480px">
      <div v-if="submitStoreVersion">
        <p style="margin-bottom:12px">
          版本 <strong>{{ submitStoreVersion.versionName }}</strong>
          将由服务端自动提交至以下已配置且启用的市场：
        </p>
        <el-checkbox-group v-model="selectedStores">
          <div v-for="store in enabledStores" :key="store.type" class="store-checkbox-row">
            <el-checkbox :value="store.type">{{ store.label }}</el-checkbox>
            <el-tag size="small" type="success" style="margin-left:8px">已配置</el-tag>
          </div>
        </el-checkbox-group>
        <el-alert
          v-if="!enabledStores.length"
          type="warning"
          show-icon
          :closable="false"
          title="当前应用暂未配置任何应用商店凭据，请先在「应用商店配置」标签页中配置。"
          style="margin-top:12px"
        />
      </div>
      <template #footer>
        <el-button @click="showSubmitStore = false">取消</el-button>
        <el-button
          type="primary"
          :disabled="!selectedStores.length"
          @click="confirmSubmitToStores"
          :loading="submittingToStores"
        >提交审核</el-button>
      </template>
    </el-dialog>

    <!-- Store Credential Config Dialog -->
    <el-dialog
      v-model="showStoreConfig"
      :title="`配置 ${currentStoreDef?.label} 凭据`"
      width="980px"
    >
      <div v-if="currentStoreDef" class="store-config-layout">
        <el-form :model="storeConfigForm" label-width="160px" class="store-config-form">
          <el-form-item label="启用">
            <el-switch v-model="storeConfigForm.enabled" />
          </el-form-item>
          <template v-for="field in currentStoreDef.fields" :key="field.key">
            <el-form-item :label="field.label">
              <el-input
                v-if="field.type === 'password'"
                v-model="storeConfigForm.values[field.key]"
                type="password"
                show-password
                :placeholder="field.placeholder"
              />
              <el-input
                v-else-if="field.type === 'textarea'"
                v-model="storeConfigForm.values[field.key]"
                type="textarea"
                :rows="4"
                :placeholder="field.placeholder"
              />
              <el-input
                v-else
                v-model="storeConfigForm.values[field.key]"
                :placeholder="field.placeholder"
              />
            </el-form-item>
          </template>
        </el-form>
        <div class="store-config-guide">
          <div class="store-config-guide-title">填写指引</div>
          <div class="store-config-guide-subtitle">{{ currentStoreDef.guideSubtitle }}</div>
          <el-steps direction="vertical" :active="currentStoreDef.guideSteps.length" finish-status="success" style="margin:16px 0">
            <el-step v-for="step in currentStoreDef.guideSteps" :key="step.title" :title="step.title" :description="step.description" />
          </el-steps>
          <el-link :href="currentStoreDef.guideUrl" target="_blank" type="primary">查看官方文档</el-link>
          <el-divider />
          <div class="store-config-guide-hint">{{ currentStoreDef.guideHint }}</div>
          <img
            v-if="currentStoreDef.guideImage"
            :src="currentStoreDef.guideImage"
            :alt="currentStoreDef.label + ' 配置截图'"
            class="store-config-guide-image"
          />
        </div>
      </div>
      <template #footer>
        <el-button @click="showStoreConfig = false">取消</el-button>
        <el-button type="primary" @click="saveStoreConfig" :loading="savingStoreConfig">保存</el-button>
      </template>
    </el-dialog>

    <!-- Upload App Version Dialog -->
    <el-dialog v-model="showUploadApp" title="上传 App 版本" width="540px">
        <el-form :model="appUploadForm" label-width="120px">
          <el-divider content-position="left">基础信息</el-divider>
          <el-form-item label="平台">
            <el-select v-model="appUploadForm.platform">
              <el-option value="ANDROID" label="Android" />
              <el-option value="IOS" label="iOS" />
              <el-option value="HARMONY" label="Harmony" />
            </el-select>
          </el-form-item>
          <el-form-item label="包名 / Bundle ID">
          <el-input v-model="appUploadForm.packageName" placeholder="选择文件后可自动填充，或手动填写 Harmony bundleName" />
          </el-form-item>
          <el-form-item label="版本名称"><el-input v-model="appUploadForm.versionName" placeholder="选择文件后可自动填充" /></el-form-item>
          <el-form-item label="版本码"><el-input-number v-model="appUploadForm.versionCode" :min="1" /></el-form-item>
          <el-form-item label="强制更新"><el-switch v-model="appUploadForm.forceUpdate" /></el-form-item>
          <el-form-item label="更新说明"><el-input v-model="appUploadForm.changeLog" type="textarea" :rows="3" /></el-form-item>
          <el-form-item v-if="appUploadForm.platform !== 'HARMONY'" label="包文件">
            <el-upload :auto-upload="false" :limit="1" :on-change="onAppPackageChange" accept=".apk,.ipa">
              <el-button>选择文件</el-button>
            </el-upload>
          </el-form-item>
          <el-alert
            v-if="appUploadForm.platform === 'HARMONY'"
            type="warning"
            :closable="false"
            show-icon
            title="Harmony 应用更新只提交市场配置与版本信息，不需要本地安装包。"
          />
          <el-alert
            v-if="appUploadForm.platform !== 'HARMONY'"
            type="info"
            :closable="false"
            show-icon
            title="选中 APK / IPA 后会先上传到文件服务，再读取包名、版本名和版本码；若识别到的包名与当前填写不一致，会提示你确认。"
          />
          <el-divider content-position="left">发版配置</el-divider>
          <el-form-item label="定时发布">
          <el-date-picker
            v-model="appUploadForm.scheduledPublishAt"
            type="datetime"
            placeholder="留空则手动发布"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DDTHH:mm:ss"
            clearable
          />
        </el-form-item>
          <el-form-item label="Webhook 通知">
          <el-input v-model="appUploadForm.webhookUrl" placeholder="审核状态变更时回调此 URL" />
        </el-form-item>
        <el-form-item label="审核后自动发布">
          <el-switch v-model="appUploadForm.autoPublishAfterReview" :disabled="!!appUploadForm.scheduledPublishAt" />
          <span class="form-tip">与定时发布互斥</span>
        </el-form-item>
        <el-form-item v-if="appUploadForm.platform === 'IOS'" label="App Store 链接">
          <el-input v-model="appUploadForm.appStoreUrl" placeholder="可填写 App Store 链接，便于审核跳转" />
        </el-form-item>
        <el-form-item v-if="appUploadForm.platform === 'HARMONY'" label="应用市场链接">
          <el-input v-model="appUploadForm.marketUrl" placeholder="Harmony 应用市场详情页链接" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showUploadApp = false">取消</el-button>
        <el-button type="primary" @click="submitAppUpload" :loading="uploadingApp">上传</el-button>
      </template>
    </el-dialog>

    <!-- Upload RN Bundle Dialog -->
    <el-dialog v-model="showUploadRn" title="上传 RN Bundle" width="480px">
      <el-form :model="rnUploadForm" label-width="120px">
        <el-form-item label="Bundle 文件">
          <el-upload :auto-upload="false" :limit="1" :on-change="onRnBundleChange" accept=".bundle,.js">
            <el-button>选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-alert
          type="info"
          :closable="false"
          show-icon
          title="推荐文件名格式：moduleId__ANDROID__1.0.0__1.0.0__com.example.app.bundle，系统会按命名自动识别模块、平台、版本、最低 Common 版本和包名。"
        />
        <el-form-item label="模块ID"><el-input v-model="rnUploadForm.moduleId" placeholder="可由文件名自动识别" /></el-form-item>
        <el-form-item label="平台">
          <el-select v-model="rnUploadForm.platform">
            <el-option value="ANDROID" label="Android" />
            <el-option value="IOS" label="iOS" />
            <el-option value="HARMONY" label="Harmony" />
          </el-select>
        </el-form-item>
        <el-form-item label="版本"><el-input v-model="rnUploadForm.version" placeholder="可由文件名自动识别" /></el-form-item>
        <el-form-item label="最低 Common 版本"><el-input v-model="rnUploadForm.minCommonVersion" placeholder="可由文件名自动识别" /></el-form-item>
        <el-form-item label="包名 / Bundle">
          <el-input v-model="rnUploadForm.packageName" placeholder="可选，建议与应用包名一致" />
        </el-form-item>
        <el-form-item label="说明"><el-input v-model="rnUploadForm.note" type="textarea" :rows="2" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showUploadRn = false">取消</el-button>
        <el-button type="primary" @click="submitRnUpload" :loading="uploadingRn">上传</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { appApi, type UpdateServiceConfig } from '@/api/app'
import { fileApi } from '@/api/file'
import {
  updateAdminApi,
  type AppPackageInspectResult,
  type AppVersion,
  type RnBundle,
  type RnBundleInspectResult,
  type StoreConfig,
  type StoreType,
} from '@/api/update'
import huaweiGuideImage from '@/assets/update-store/huawei/01.png'
import miGuideImage from '@/assets/update-store/mi/01.png'
import oppoGuideImage from '@/assets/update-store/oppo/01.png'
import vivoGuideImage from '@/assets/update-store/vivo/01.png'
import honorGuideImage from '@/assets/update-store/honor/01.png'

const route = useRoute()
const router = useRouter()
const appId = route.params.appId as string

const activeTab = ref('app')
const appPlatform = ref<'ANDROID' | 'IOS' | 'HARMONY'>('ANDROID')
const rnPlatform = ref<'ANDROID' | 'IOS' | 'HARMONY' | ''>('')
const rnModuleFilter = ref('')

const appVersions = ref<AppVersion[]>([])
const loadingApp = ref(false)
const rnBundles = ref<RnBundle[]>([])
const loadingRn = ref(false)
const storeConfigs = ref<StoreConfig[]>([])
const releaseConfigPlatform = ref<'ANDROID' | 'IOS' | 'HARMONY'>('ANDROID')
const loadingReleaseConfig = ref(false)
const savingReleaseConfig = ref(false)
const releaseStoreDefs = computed(() => {
  if (releaseConfigPlatform.value === 'ANDROID') {
    return STORE_DEFS.filter(store => store.type !== 'APP_STORE')
  }
  if (releaseConfigPlatform.value === 'IOS') {
    return STORE_DEFS.filter(store => store.type === 'APP_STORE')
  }
  return []
})

const releaseConfigForm = ref<UpdateServiceConfig>({
  defaultStoreTargets: [],
  defaultPublishMode: 'MANUAL',
  defaultPublishImmediately: false,
  defaultScheduledPublishAt: '',
  defaultAutoPublishAfterReview: false,
  defaultWebhookUrl: '',
  defaultForceUpdate: false,
  defaultGrayEnabled: false,
  defaultGrayPercent: 0,
  defaultPackageName: '',
  defaultAppStoreUrl: '',
  defaultMarketUrl: '',
})

type FieldDef = { key: string; label: string; type?: 'password' | 'textarea'; placeholder?: string }
type GuideStep = { title: string; description: string }
type StoreDef = {
  type: StoreType
  label: string
  shortLabel: string
  fields: FieldDef[]
  guideSubtitle: string
  guideUrl: string
  guideSteps: GuideStep[]
  guideHint: string
  guideImage?: string
}

const STORE_DEFS: StoreDef[] = [
  {
    type: 'HUAWEI',
    label: '华为应用市场',
    shortLabel: '华为',
    fields: [
      { key: 'clientId', label: 'Client ID', placeholder: 'AppGallery Connect Client ID' },
      { key: 'clientSecret', label: 'Client Secret', type: 'password', placeholder: 'AppGallery Connect Client Secret' },
    ],
    guideSubtitle: '在 AppGallery Connect 创建 Connect API 凭据',
    guideUrl: 'https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agcapi-getstarted-0000001111845114',
    guideSteps: [
      { title: '创建应用或进入应用管理', description: '在 AppGallery Connect 中找到目标应用。' },
      { title: '进入开发工具 / Connect API', description: '创建服务端凭据并选择 APP 管理员角色。' },
      { title: '复制客户端 ID 和密钥', description: '把 Client ID / Client Secret 填到这里。' },
    ],
    guideHint: '与后端提交服务对应字段一致：clientId、clientSecret。',
    guideImage: huaweiGuideImage,
  },
  {
    type: 'MI',
    label: '小米应用商店',
    shortLabel: '小米',
    fields: [
      { key: 'username', label: '用户名' },
      { key: 'privateKey', label: 'RSA 私钥', type: 'textarea', placeholder: '-----BEGIN PRIVATE KEY-----\n...' },
    ],
    guideSubtitle: '在自动发布接口页面获取上传所需密钥',
    guideUrl: 'https://dev.mi.com/distribute/doc/details?pId=1134',
    guideSteps: [
      { title: '进入应用游戏管理', description: '在控制台选择目标应用。' },
      { title: '打开自动发布接口', description: '下载公钥文件并准备私钥。' },
      { title: '录入用户名和私钥', description: '这里保存的是服务端上传所需凭据。' },
    ],
    guideHint: '当前字段保持为 username / privateKey，与后端服务一致。',
    guideImage: miGuideImage,
  },
  {
    type: 'OPPO',
    label: 'OPPO 软件商店',
    shortLabel: 'OPPO',
    fields: [
      { key: 'clientId', label: 'Client ID' },
      { key: 'clientSecret', label: 'Client Secret', type: 'password' },
    ],
    guideSubtitle: '在我的 API 里创建服务端应用',
    guideUrl: 'https://open.oppomobile.com/new/developmentDoc/info?id=11119',
    guideSteps: [
      { title: '进入“我的 API”', description: '确认当前应用拥有服务端应用能力。' },
      { title: '新建服务端应用', description: '按平台要求创建接口凭据。' },
      { title: '保存 client_id / client_secret', description: '这两个值对应这里的 Client ID / Client Secret。' },
    ],
    guideHint: '字段与后端 submitToOppo 读取逻辑一致。',
    guideImage: oppoGuideImage,
  },
  {
    type: 'VIVO',
    label: 'vivo 应用商店',
    shortLabel: 'vivo',
    fields: [
      { key: 'accessKey', label: 'Access Key' },
      { key: 'accessSecret', label: 'Access Secret', type: 'password' },
    ],
    guideSubtitle: '在 API 管理中复制 access_key / access_secret',
    guideUrl: 'https://dev.vivo.com.cn/documentCenter/doc/326',
    guideSteps: [
      { title: '进入 api 管理', description: '找到当前应用对应的接口管理入口。' },
      { title: '激活后再读取密钥', description: '首次启用后可能需要刷新页面。' },
      { title: '填入 Access Key / Access Secret', description: '与后端提交服务字段保持一致。' },
    ],
    guideHint: '提交服务读取 accessKey / accessSecret。',
    guideImage: vivoGuideImage,
  },
  {
    type: 'HONOR',
    label: '荣耀应用市场',
    shortLabel: '荣耀',
    fields: [
      { key: 'clientId', label: 'Client ID', placeholder: 'AppGallery Connect Client ID' },
      { key: 'clientSecret', label: 'Client Secret', type: 'password' },
    ],
    guideSubtitle: '在管理中心申请凭证并复制 Client_id / 密钥',
    guideUrl: 'https://developer.honor.com/cn',
    guideSteps: [
      { title: '进入管理中心', description: '打开荣耀开发者后台并进入凭证页。' },
      { title: '申请凭证', description: '创建用于服务端上传的 API 凭据。' },
      { title: '保存 Client_id / 密钥', description: '与这里的 Client ID / Client Secret 对应。' },
    ],
    guideHint: '与后端 Honor 提交流程完全一致。',
    guideImage: honorGuideImage,
  },
  {
    type: 'APP_STORE',
    label: 'Apple App Store',
    shortLabel: 'App Store',
    fields: [
      { key: 'teamId', label: 'Team ID' },
      { key: 'keyId', label: 'Key ID' },
      { key: 'privateKey', label: 'P8 私钥内容', type: 'textarea', placeholder: '-----BEGIN PRIVATE KEY-----\n...' },
      { key: 'bundleId', label: 'Bundle ID', placeholder: 'com.example.app' },
    ],
    guideSubtitle: '在 App Store Connect 创建 API Key',
    guideUrl: 'https://developer.apple.com/documentation/appstoreconnectapi',
    guideSteps: [
      { title: '进入 App Store Connect', description: '打开用户与访问或对应的 App 详情。' },
      { title: '生成 API Key', description: '保存 Team ID、Key ID 和 p8 私钥。' },
      { title: '补充 Bundle ID', description: '这里填写目标包名或 bundle identifier。' },
    ],
    guideHint: 'App Store 提交与后端 Apple 提交流程读取的字段一致。',
  },
  {
    type: 'GOOGLE_PLAY',
    label: 'Google Play',
    shortLabel: 'Google Play',
    fields: [
      { key: 'serviceAccountJson', label: '服务账号 JSON', type: 'textarea', placeholder: '{ "type": "service_account", ... }' },
    ],
    guideSubtitle: '使用服务账号 JSON 授权上传',
    guideUrl: 'https://developer.android.com/google/play/developer-api',
    guideSteps: [
      { title: '创建服务账号', description: '从 Google Cloud 获取服务账号 JSON。' },
      { title: '授予 Play 管理权限', description: '把该服务账号绑定到目标应用。' },
      { title: '粘贴 JSON 内容', description: '这里保存的是上传服务端所需内容。' },
    ],
    guideHint: '目前字段以 JSON 方式保存，方便服务端直接读取。',
  },
]

function getStoreConfig(type: StoreType): StoreConfig | undefined {
  return storeConfigs.value.find(c => c.storeType === type)
}

function isStoreEnabled(type: StoreType): boolean {
  return getStoreConfig(type)?.enabled ?? false
}

const enabledStores = computed(() => STORE_DEFS.filter(s => isStoreEnabled(s.type)))

async function toggleStore(type: StoreType, enabled: boolean) {
  const cfg = getStoreConfig(type)
  if (!cfg) return
  try {
    await updateAdminApi.saveStoreConfig(appId, type, cfg.configJson ?? '{}', enabled)
    await loadStoreConfigs()
  } catch {
    ElMessage.error('操作失败')
  }
}

async function loadStoreConfigs() {
  try {
    const res = await updateAdminApi.getStoreConfigs(appId)
    storeConfigs.value = res.data.data
  } catch {
    storeConfigs.value = []
  }
}

const showStoreConfig = ref(false)
const savingStoreConfig = ref(false)
const currentStoreDef = ref<StoreDef | null>(null)
const storeConfigForm = ref<{ enabled: boolean; values: Record<string, string> }>({
  enabled: true,
  values: {},
})

function openStoreConfigDialog(store: StoreDef) {
  currentStoreDef.value = store
  const existing = getStoreConfig(store.type)
  let values: Record<string, string> = {}
  if (existing?.configJson) {
    try {
      values = JSON.parse(existing.configJson)
    } catch {
      values = {}
    }
  }
  storeConfigForm.value = { enabled: existing?.enabled ?? true, values }
  showStoreConfig.value = true
}

async function saveStoreConfig() {
  if (!currentStoreDef.value) return
  savingStoreConfig.value = true
  try {
    await updateAdminApi.saveStoreConfig(
      appId,
      currentStoreDef.value.type,
      JSON.stringify(storeConfigForm.value.values),
      storeConfigForm.value.enabled,
    )
    ElMessage.success('凭据已保存')
    showStoreConfig.value = false
    await loadStoreConfigs()
  } catch {
    ElMessage.error('保存失败')
  } finally {
    savingStoreConfig.value = false
  }
}

async function removeStoreConfig(type: StoreType) {
  await ElMessageBox.confirm('确认删除此应用商店凭据？', '提示', { type: 'warning' })
  try {
    await updateAdminApi.deleteStoreConfig(appId, type)
    ElMessage.success('已删除')
    await loadStoreConfigs()
  } catch {
    ElMessage.error('删除失败')
  }
}

function normalizeReleaseConfig(raw: Partial<UpdateServiceConfig> | null | undefined): UpdateServiceConfig {
  return {
    defaultStoreTargets: raw?.defaultStoreTargets ?? [],
    defaultPublishMode: raw?.defaultPublishMode ?? 'MANUAL',
    defaultPublishImmediately: raw?.defaultPublishImmediately ?? false,
    defaultScheduledPublishAt: raw?.defaultScheduledPublishAt ?? '',
    defaultAutoPublishAfterReview: raw?.defaultAutoPublishAfterReview ?? false,
    defaultWebhookUrl: raw?.defaultWebhookUrl ?? '',
    defaultForceUpdate: raw?.defaultForceUpdate ?? false,
    defaultGrayEnabled: raw?.defaultGrayEnabled ?? false,
    defaultGrayPercent: raw?.defaultGrayPercent ?? 0,
    defaultPackageName: raw?.defaultPackageName ?? '',
    defaultAppStoreUrl: raw?.defaultAppStoreUrl ?? '',
    defaultMarketUrl: raw?.defaultMarketUrl ?? '',
  }
}

function parseReleaseConfig(config?: string | null): UpdateServiceConfig {
  if (!config) return normalizeReleaseConfig({})
  try {
    return normalizeReleaseConfig(JSON.parse(config) as Partial<UpdateServiceConfig>)
  } catch {
    return normalizeReleaseConfig({})
  }
}

async function loadReleaseConfig() {
  loadingReleaseConfig.value = true
  try {
    const res = await appApi.getService(appId, releaseConfigPlatform.value, 'UPDATE')
    releaseConfigForm.value = parseReleaseConfig(res.data.data.config)
    const cfg = releaseConfigForm.value
    if (cfg.defaultScheduledPublishAt) {
      cfg.defaultPublishImmediately = false
      cfg.defaultAutoPublishAfterReview = false
    }
  } catch {
    releaseConfigForm.value = normalizeReleaseConfig({})
  } finally {
    loadingReleaseConfig.value = false
  }
}

async function saveReleaseConfig() {
  savingReleaseConfig.value = true
  try {
    const cfg = normalizeReleaseConfig(releaseConfigForm.value)
    if (cfg.defaultScheduledPublishAt) {
      cfg.defaultPublishImmediately = false
      cfg.defaultAutoPublishAfterReview = false
    }
    await appApi.updateServiceConfig(appId, releaseConfigPlatform.value, 'UPDATE', cfg)
    ElMessage.success('发版默认配置已保存')
  } catch {
    ElMessage.error('保存失败')
  } finally {
    savingReleaseConfig.value = false
  }
}

const showSubmitStore = ref(false)
const submittingToStores = ref(false)
const submitStoreVersion = ref<AppVersion | null>(null)
const selectedStores = ref<StoreType[]>([])

function openSubmitStoreDialog(row: AppVersion) {
  submitStoreVersion.value = row
  selectedStores.value = enabledStores.value.map(s => s.type)
  showSubmitStore.value = true
}

async function confirmSubmitToStores() {
  if (!submitStoreVersion.value || !selectedStores.value.length) return
  submittingToStores.value = true
  try {
    await updateAdminApi.executeSubmitToStores(submitStoreVersion.value.id, selectedStores.value)
    ElMessage.success('已提交，服务端正在向应用市场上传，审核状态将通过 Webhook 或刷新页面查看')
    showSubmitStore.value = false
    await loadAppVersions()
  } catch {
    ElMessage.error('提交失败')
  } finally {
    submittingToStores.value = false
  }
}

const showGray = ref(false)
const submittingGray = ref(false)
const grayTarget = ref<{ id: string; type: 'app' | 'rn' } | null>(null)
const grayForm = ref({ enabled: true, percent: 10 })

function openGrayDialog(row: { id: string }, type: 'app' | 'rn') {
  grayTarget.value = { id: row.id, type }
  grayForm.value = { enabled: true, percent: 10 }
  showGray.value = true
}

async function submitGray() {
  if (!grayTarget.value) return
  submittingGray.value = true
  try {
    const { id, type } = grayTarget.value
    if (type === 'app') {
      await updateAdminApi.grayAppVersion(id, grayForm.value.enabled, grayForm.value.percent)
      await loadAppVersions()
    } else {
      await updateAdminApi.grayRnBundle(id, grayForm.value.enabled, grayForm.value.percent)
      await loadRnBundles()
    }
    ElMessage.success('灰度配置已保存')
    showGray.value = false
  } finally {
    submittingGray.value = false
  }
}

const showUploadApp = ref(false)
const uploadingApp = ref(false)
const appUploadForm = ref({
  platform: 'ANDROID' as 'ANDROID' | 'IOS' | 'HARMONY',
  packageName: '',
  versionName: '',
  versionCode: 1,
  forceUpdate: false,
  changeLog: '',
  file: null as File | null,
  fileUrl: '',
  scheduledPublishAt: '',
  webhookUrl: '',
  autoPublishAfterReview: false,
  appStoreUrl: '',
  marketUrl: '',
})

async function onAppPackageChange(uploadFile: { raw?: File } | null) {
  const file = uploadFile?.raw ?? null
  appUploadForm.value.file = file
  appUploadForm.value.fileUrl = ''
  if (!file) return

  try {
    const uploaded = await fileApi.uploadFile(file)
    const fileInfo = uploaded.data.data
    appUploadForm.value.fileUrl = fileInfo.url
    const res = await updateAdminApi.inspectAppPackage(fileInfo.url)
    const inspected = res.data.data as AppPackageInspectResult
    if (inspected.platform) appUploadForm.value.platform = inspected.platform
    if (inspected.packageName && appUploadForm.value.packageName && appUploadForm.value.packageName !== inspected.packageName) {
      try {
        await ElMessageBox.confirm(
          `检测到文件包名为 ${inspected.packageName}，当前填写为 ${appUploadForm.value.packageName}。是否强制使用文件识别结果？`,
          '包名不一致',
          { type: 'warning', confirmButtonText: '使用文件包名', cancelButtonText: '保留当前填写' },
        )
        appUploadForm.value.packageName = inspected.packageName
      } catch {
        // keep current manual input
      }
    } else if (inspected.packageName) {
      appUploadForm.value.packageName = inspected.packageName
    }
    if (inspected.versionName) appUploadForm.value.versionName = inspected.versionName
    if (typeof inspected.versionCode === 'number') appUploadForm.value.versionCode = inspected.versionCode
  } catch {
    ElMessage.warning('已选择文件，但未能完整识别，请补全版本信息后上传')
  }
}

async function submitAppUpload() {
  const f = appUploadForm.value
  if (f.platform !== 'HARMONY' && !f.fileUrl) return ElMessage.warning('请先选择应用包文件')
  if (f.platform === 'HARMONY' && !f.marketUrl) return ElMessage.warning('Harmony 版本请填写应用市场链接')
  if (f.platform === 'HARMONY' && !f.packageName) return ElMessage.warning('Harmony 版本请填写 bundleName / 包名')
  if (!f.versionName || !f.versionCode) return ElMessage.warning('请填写版本信息')
  if (f.scheduledPublishAt && f.autoPublishAfterReview) {
    f.autoPublishAfterReview = false
    ElMessage.warning('定时发布和审核后自动发布互斥，已按定时发布处理')
  }

  uploadingApp.value = true
  try {
    const fd = new FormData()
    fd.append('appId', appId)
    fd.append('platform', f.platform)
    fd.append('versionName', f.versionName)
    fd.append('versionCode', String(f.versionCode))
    fd.append('forceUpdate', String(f.forceUpdate))
    if (f.packageName) fd.append('packageName', f.packageName)
    if (f.changeLog) fd.append('changeLog', f.changeLog)
    if (f.scheduledPublishAt) fd.append('scheduledPublishAt', f.scheduledPublishAt)
    if (f.webhookUrl) fd.append('webhookUrl', f.webhookUrl)
    if (f.appStoreUrl) fd.append('appStoreUrl', f.appStoreUrl)
    if (f.marketUrl) fd.append('marketUrl', f.marketUrl)
    fd.append('autoPublishAfterReview', String(f.autoPublishAfterReview))
    if (f.fileUrl) fd.append('apkUrl', f.fileUrl)
    await updateAdminApi.uploadAppVersion(fd)
    ElMessage.success('上传成功')
    showUploadApp.value = false
    await loadAppVersions()
  } finally {
    uploadingApp.value = false
  }
}

const showUploadRn = ref(false)
const uploadingRn = ref(false)
const rnUploadForm = ref({
  moduleId: '',
  platform: 'ANDROID' as 'ANDROID' | 'IOS' | 'HARMONY',
  version: '',
  minCommonVersion: '',
  packageName: '',
  note: '',
  file: null as File | null,
})

function parseRnBundleName(fileName: string): RnBundleInspectResult | null {
  const baseName = fileName.replace(/\.[^.]+$/, '')
  const parts = baseName.split('__')
  if (parts.length >= 4) {
    return {
      moduleId: parts[0],
      platform: parts[1].toUpperCase() as 'ANDROID' | 'IOS' | 'HARMONY',
      version: parts[2],
      minCommonVersion: parts[3],
      packageName: parts[4],
      fileName,
      detected: true,
    }
  }
  return null
}

async function onRnBundleChange(uploadFile: { raw?: File } | null) {
  const file = uploadFile?.raw ?? null
  rnUploadForm.value.file = file
  if (!file) return

  const local = parseRnBundleName(file.name)
  if (local) {
    if (local.moduleId) rnUploadForm.value.moduleId = local.moduleId
    if (local.platform) rnUploadForm.value.platform = local.platform
    if (local.version) rnUploadForm.value.version = local.version
    if (local.minCommonVersion) rnUploadForm.value.minCommonVersion = local.minCommonVersion
    if (local.packageName) rnUploadForm.value.packageName = local.packageName
    return
  }

  const formData = new FormData()
  formData.append('bundle', file)
  try {
    const res = await updateAdminApi.inspectRnBundle(formData)
    const inspected = res.data.data as RnBundleInspectResult
    if (inspected.moduleId) rnUploadForm.value.moduleId = inspected.moduleId
    if (inspected.platform) rnUploadForm.value.platform = inspected.platform
    if (inspected.version) rnUploadForm.value.version = inspected.version
    if (inspected.minCommonVersion) rnUploadForm.value.minCommonVersion = inspected.minCommonVersion
    if (inspected.packageName) rnUploadForm.value.packageName = inspected.packageName
  } catch {
    ElMessage.warning('已选择文件，但未能从文件名识别出 RN Bundle 元数据，请补全后上传')
  }
}

async function submitRnUpload() {
  const f = rnUploadForm.value
  if (!f.moduleId || !f.version || !f.file) return ElMessage.warning('请填写模块ID、版本和 Bundle 文件')
  uploadingRn.value = true
  try {
    const fd = new FormData()
    fd.append('appId', appId)
    fd.append('moduleId', f.moduleId)
    fd.append('platform', f.platform)
    fd.append('version', f.version)
    if (f.minCommonVersion) fd.append('minCommonVersion', f.minCommonVersion)
    if (f.packageName) fd.append('packageName', f.packageName)
    if (f.note) fd.append('note', f.note)
    fd.append('bundle', f.file)
    await updateAdminApi.uploadRnBundle(fd)
    ElMessage.success('Bundle 上传成功')
    showUploadRn.value = false
    await loadRnBundles()
  } finally {
    uploadingRn.value = false
  }
}

async function loadAppVersions() {
  loadingApp.value = true
  try {
    const res = await updateAdminApi.listAppVersions(appId, appPlatform.value)
    appVersions.value = res.data.data
  } catch {
    ElMessage.error('加载失败')
  } finally {
    loadingApp.value = false
  }
}

async function loadRnBundles() {
  loadingRn.value = true
  try {
    const res = await updateAdminApi.listRnBundles(appId, rnModuleFilter.value || undefined, rnPlatform.value || undefined)
    rnBundles.value = res.data.data
  } catch {
    ElMessage.error('加载失败')
  } finally {
    loadingRn.value = false
  }
}

async function publishApp(id: string) {
  await updateAdminApi.publishAppVersion(id)
  ElMessage.success('已发布')
  await loadAppVersions()
}

async function unpublishApp(id: string) {
  await updateAdminApi.unpublishAppVersion(id)
  ElMessage.success('已下架')
  await loadAppVersions()
}

async function publishRn(id: string) {
  await updateAdminApi.publishRnBundle(id)
  ElMessage.success('已发布')
  await loadRnBundles()
}

async function unpublishRn(id: string) {
  await updateAdminApi.unpublishRnBundle(id)
  ElMessage.success('已下架')
  await loadRnBundles()
}

function formatTime(t: string) {
  return t ? new Date(t).toLocaleString('zh-CN') : '-'
}

function statusLabel(row: { publishStatus: string }) {
  return { DRAFT: '草稿', PUBLISHED: '已发布', DEPRECATED: '已下架' }[row.publishStatus] ?? row.publishStatus
}

function statusTagType(row: { publishStatus: string }) {
  return { DRAFT: '', PUBLISHED: 'success', DEPRECATED: 'info' }[row.publishStatus] ?? ''
}

function storeLabel(type: string) {
  return STORE_DEFS.find(s => s.type === type)?.label ?? type
}

function reviewLabel(state: string): string {
  return { PENDING: '待提交', UNDER_REVIEW: '审核中', APPROVED: '已通过', REJECTED: '已拒绝' }[state] ?? state
}

function reviewTagType(state: string): string {
  return { PENDING: 'info', UNDER_REVIEW: 'warning', APPROVED: 'success', REJECTED: 'danger' }[state] ?? ''
}

function parseStoreReview(json?: string): { store: string; state: string }[] {
  if (!json) return []
  try {
    const m = JSON.parse(json) as Record<string, string>
    return Object.entries(m).map(([store, state]) => ({ store, state }))
  } catch {
    return []
  }
}

function goToStoreGuide() {
  router.push(`/apps/${appId}/update-guide`)
}

onMounted(() => {
  loadAppVersions()
  loadRnBundles()
  loadStoreConfigs()
  loadReleaseConfig()
})
</script>

<style scoped>
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.text-muted { color: var(--el-text-color-placeholder); font-size: 12px; }
.form-tip { font-size: 12px; color: var(--el-text-color-secondary); margin-left: 8px; }

/* Store config grid */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.store-card { cursor: default; }
.store-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.store-card-name { font-weight: 600; font-size: 14px; }
.store-card-status { margin-bottom: 12px; }
.store-card-footer { display: flex; gap: 8px; }

/* Submit store checkbox */
.store-checkbox-row { padding: 6px 0; }

/* Store config dialog */
.store-config-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 20px;
}
.store-config-form {
  min-width: 0;
}
.store-config-guide {
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 16px;
  background: var(--el-fill-color-blank);
}
.store-config-guide-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.store-config-guide-subtitle {
  color: var(--el-text-color-secondary);
  font-size: 13px;
}
.store-config-guide-hint {
  color: var(--el-text-color-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.store-config-guide-image {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-top: 16px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  object-fit: cover;
}

.release-config-form {
  max-width: 920px;
}

.store-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 12px;
  width: 100%;
}

.release-store-checkbox-row {
  display: flex;
  align-items: center;
}
</style>