368 行
14 KiB
Vue
368 行
14 KiB
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-group>
|
|||
|
|
<el-button type="primary" @click="showUploadApp = true">上传新版本</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="120" />
|
|||
|
|
<el-table-column prop="versionCode" label="版本码" width="100" />
|
|||
|
|
<el-table-column label="状态" width="120">
|
|||
|
|
<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="forceUpdate" label="强制更新" width="100">
|
|||
|
|
<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="180">
|
|||
|
|
<template #default="{row}">{{ formatTime(row.createdAt) }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" width="200" 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>
|
|||
|
|
</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="180">
|
|||
|
|
<template #default="{row}">{{ formatTime(row.createdAt) }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" width="200" 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>
|
|||
|
|
</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>
|
|||
|
|
|
|||
|
|
<!-- Upload App Version Dialog -->
|
|||
|
|
<el-dialog v-model="showUploadApp" title="上传 App 版本" width="480px">
|
|||
|
|
<el-form :model="appUploadForm" label-width="100px">
|
|||
|
|
<el-form-item label="平台">
|
|||
|
|
<el-select v-model="appUploadForm.platform">
|
|||
|
|
<el-option value="ANDROID" label="Android" />
|
|||
|
|
<el-option value="IOS" label="iOS" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="版本名称"><el-input v-model="appUploadForm.versionName" /></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 label="APK 文件">
|
|||
|
|
<el-upload
|
|||
|
|
:auto-upload="false"
|
|||
|
|
:limit="1"
|
|||
|
|
:on-change="f => appUploadForm.file = f.raw ?? null"
|
|||
|
|
accept=".apk,.ipa">
|
|||
|
|
<el-button>选择文件</el-button>
|
|||
|
|
</el-upload>
|
|||
|
|
</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="100px">
|
|||
|
|
<el-form-item label="模块ID"><el-input v-model="rnUploadForm.moduleId" /></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-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="版本"><el-input v-model="rnUploadForm.version" placeholder="如 1.0.1" /></el-form-item>
|
|||
|
|
<el-form-item label="最低 Common 版本"><el-input v-model="rnUploadForm.minCommonVersion" placeholder="如 1.0.0" /></el-form-item>
|
|||
|
|
<el-form-item label="说明"><el-input v-model="rnUploadForm.note" type="textarea" :rows="2" /></el-form-item>
|
|||
|
|
<el-form-item label="Bundle 文件">
|
|||
|
|
<el-upload
|
|||
|
|
:auto-upload="false"
|
|||
|
|
:limit="1"
|
|||
|
|
:on-change="f => rnUploadForm.file = f.raw ?? null"
|
|||
|
|
accept=".bundle,.js">
|
|||
|
|
<el-button>选择文件</el-button>
|
|||
|
|
</el-upload>
|
|||
|
|
</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 { ref, onMounted } from 'vue'
|
|||
|
|
import { useRoute } from 'vue-router'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
import { updateAdminApi, type AppVersion, type RnBundle } from '@/api/update'
|
|||
|
|
|
|||
|
|
const route = useRoute()
|
|||
|
|
const appId = route.params.appId as string
|
|||
|
|
|
|||
|
|
const activeTab = ref('app')
|
|||
|
|
const appPlatform = ref<'ANDROID' | 'IOS'>('ANDROID')
|
|||
|
|
const rnPlatform = ref('')
|
|||
|
|
const rnModuleFilter = ref('')
|
|||
|
|
|
|||
|
|
const appVersions = ref<AppVersion[]>([])
|
|||
|
|
const loadingApp = ref(false)
|
|||
|
|
const rnBundles = ref<RnBundle[]>([])
|
|||
|
|
const loadingRn = ref(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 })
|
|||
|
|
|
|||
|
|
const showUploadApp = ref(false)
|
|||
|
|
const uploadingApp = ref(false)
|
|||
|
|
const appUploadForm = ref({
|
|||
|
|
platform: 'ANDROID' as 'ANDROID' | 'IOS',
|
|||
|
|
versionName: '',
|
|||
|
|
versionCode: 1,
|
|||
|
|
forceUpdate: false,
|
|||
|
|
changeLog: '',
|
|||
|
|
file: null as File | null,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const showUploadRn = ref(false)
|
|||
|
|
const uploadingRn = ref(false)
|
|||
|
|
const rnUploadForm = ref({
|
|||
|
|
moduleId: '',
|
|||
|
|
platform: 'ANDROID' as 'ANDROID' | 'IOS',
|
|||
|
|
version: '',
|
|||
|
|
minCommonVersion: '',
|
|||
|
|
note: '',
|
|||
|
|
file: null as File | null,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
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] ?? ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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('已发布')
|
|||
|
|
loadAppVersions()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function unpublishApp(id: string) {
|
|||
|
|
await updateAdminApi.unpublishAppVersion(id)
|
|||
|
|
ElMessage.success('已下架')
|
|||
|
|
loadAppVersions()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function publishRn(id: string) {
|
|||
|
|
await updateAdminApi.publishRnBundle(id)
|
|||
|
|
ElMessage.success('已发布')
|
|||
|
|
loadRnBundles()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function unpublishRn(id: string) {
|
|||
|
|
await updateAdminApi.unpublishRnBundle(id)
|
|||
|
|
ElMessage.success('已下架')
|
|||
|
|
loadRnBundles()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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)
|
|||
|
|
loadAppVersions()
|
|||
|
|
} else {
|
|||
|
|
await updateAdminApi.grayRnBundle(id, grayForm.value.enabled, grayForm.value.percent)
|
|||
|
|
loadRnBundles()
|
|||
|
|
}
|
|||
|
|
ElMessage.success('灰度配置已保存')
|
|||
|
|
showGray.value = false
|
|||
|
|
} finally { submittingGray.value = false }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function submitAppUpload() {
|
|||
|
|
const f = appUploadForm.value
|
|||
|
|
if (!f.versionName || !f.versionCode) return 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.changeLog) fd.append('changeLog', f.changeLog)
|
|||
|
|
if (f.file) fd.append('apkFile', f.file)
|
|||
|
|
await updateAdminApi.uploadAppVersion(fd)
|
|||
|
|
ElMessage.success('上传成功，版本已创建为草稿')
|
|||
|
|
showUploadApp.value = false
|
|||
|
|
loadAppVersions()
|
|||
|
|
} finally { uploadingApp.value = false }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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.note) fd.append('note', f.note)
|
|||
|
|
fd.append('bundle', f.file)
|
|||
|
|
await updateAdminApi.uploadRnBundle(fd)
|
|||
|
|
ElMessage.success('上传成功，Bundle 已创建为草稿')
|
|||
|
|
showUploadRn.value = false
|
|||
|
|
loadRnBundles()
|
|||
|
|
} finally { uploadingRn.value = false }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
loadAppVersions()
|
|||
|
|
loadRnBundles()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
|
|||
|
|
</style>
|
