381 lines
11 KiB
Vue
381 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { AlertTriangle, GitBranch, HardDrive, Package, Plus } from 'lucide-vue-next'
|
|
import { computed, onMounted, ref, watch } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { toast } from 'vue-sonner'
|
|
|
|
import type { Version } from '@/pages/admin/versions/data/schema'
|
|
|
|
import ConfirmDialog from '@/components/confirm-dialog.vue'
|
|
import SingleFilter from '@/components/data-table/single-filter.vue'
|
|
import { BasicPage } from '@/components/global-layout'
|
|
import DataTable from '@/pages/admin/versions/components/data-table.vue'
|
|
import api, { BASE_URL } from '@/services/api'
|
|
|
|
const { t } = useI18n()
|
|
|
|
interface Application {
|
|
id: number
|
|
name: string
|
|
}
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const loading = ref(true)
|
|
const versions = ref<Version[]>([])
|
|
const applications = ref<Application[]>([])
|
|
const tableRef = ref()
|
|
|
|
const appFilter = ref<string>('')
|
|
const strategyFilter = ref<string>('')
|
|
const methodFilter = ref<string>('')
|
|
const searchFilter = ref<string>('')
|
|
const currentPage = ref(1)
|
|
const pageSize = ref(20)
|
|
const total = ref(0)
|
|
|
|
const deleteDialogOpen = ref(false)
|
|
const deleteTarget = ref<Version | null>(null)
|
|
const batchDeleteDialogOpen = ref(false)
|
|
const batchDeleteIds = ref<number[]>([])
|
|
const exportDialogOpen = ref(false)
|
|
const exportTarget = ref<Version | null>(null)
|
|
const batchExportDialogOpen = ref(false)
|
|
|
|
const applicationOptions = computed(() => {
|
|
return applications.value.map(app => ({
|
|
label: app.name,
|
|
value: String(app.id),
|
|
}))
|
|
})
|
|
|
|
const strategyOptions = computed(() => [
|
|
{ label: t('admin.versions.strategies.optional'), value: 'optional' },
|
|
{ label: t('admin.versions.strategies.forced'), value: 'forced' },
|
|
])
|
|
|
|
const methodOptions = computed(() => [
|
|
{ label: t('admin.versions.methods.manual'), value: 'manual' },
|
|
{ label: t('admin.versions.methods.hot'), value: 'hot' },
|
|
{ label: t('admin.versions.methods.full'), value: 'full' },
|
|
])
|
|
|
|
const totalSize = computed(() => {
|
|
return versions.value.reduce((sum, v) => sum + (v.file_size || 0), 0)
|
|
})
|
|
|
|
const forcedCount = computed(() => versions.value.filter(v => v.update_strategy === 'forced').length)
|
|
|
|
const serverPagination = computed(() => ({
|
|
page: currentPage.value,
|
|
pageSize: pageSize.value,
|
|
total: total.value,
|
|
onPageChange: (newPage: number) => {
|
|
currentPage.value = newPage
|
|
},
|
|
onPageSizeChange: (newPageSize: number) => {
|
|
pageSize.value = newPageSize
|
|
currentPage.value = 1
|
|
},
|
|
}))
|
|
|
|
function formatFileSize(bytes: number): string {
|
|
if (bytes === 0)
|
|
return '0 B'
|
|
const k = 1024
|
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
|
|
}
|
|
|
|
async function fetchApplications() {
|
|
try {
|
|
const data = await api.get<{ applications: Application[] }>('/dev/applications')
|
|
applications.value = data?.applications || []
|
|
}
|
|
catch (error) {
|
|
console.error('获取应用列表失败:', error)
|
|
}
|
|
}
|
|
|
|
async function fetchVersions() {
|
|
loading.value = true
|
|
try {
|
|
const params = new URLSearchParams()
|
|
params.append('page', String(currentPage.value))
|
|
params.append('page_size', String(pageSize.value))
|
|
|
|
if (appFilter.value) {
|
|
params.append('application_id', appFilter.value)
|
|
}
|
|
if (strategyFilter.value) {
|
|
params.append('update_strategy', strategyFilter.value)
|
|
}
|
|
if (methodFilter.value) {
|
|
params.append('update_method', methodFilter.value)
|
|
}
|
|
if (searchFilter.value) {
|
|
params.append('search', searchFilter.value)
|
|
}
|
|
|
|
const data = await api.get<{ versions: Version[], total: number }>(`/dev/versions?${params.toString()}`)
|
|
versions.value = data?.versions || []
|
|
total.value = data?.total || 0
|
|
}
|
|
catch (error) {
|
|
console.error('加载版本列表失败:', error)
|
|
versions.value = []
|
|
}
|
|
finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function goToCreate() {
|
|
router.push('/admin/versions/create')
|
|
}
|
|
|
|
function goToEdit(version: Version) {
|
|
router.push(`/admin/versions/${version.id}`)
|
|
}
|
|
|
|
function downloadVersion(version: Version) {
|
|
if (!version.file_path)
|
|
return
|
|
const token = localStorage.getItem('token')
|
|
const downloadUrl = `${version.file_path}?token=${token}`
|
|
window.open(downloadUrl, '_blank')
|
|
}
|
|
|
|
function confirmDelete(version: Version) {
|
|
deleteTarget.value = version
|
|
deleteDialogOpen.value = true
|
|
}
|
|
|
|
async function handleDelete() {
|
|
if (!deleteTarget.value)
|
|
return
|
|
|
|
try {
|
|
await api.delete(`/dev/applications/${deleteTarget.value.application_id}/versions/${deleteTarget.value.id}`)
|
|
toast.success(t('admin.versions.deleteSuccess'))
|
|
fetchVersions()
|
|
}
|
|
catch (error: any) {
|
|
console.error('删除版本失败:', error)
|
|
toast.error(error.message || t('common.error'))
|
|
}
|
|
finally {
|
|
deleteTarget.value = null
|
|
}
|
|
}
|
|
|
|
function handleExport() {
|
|
const token = localStorage.getItem('token')
|
|
const params = new URLSearchParams()
|
|
if (appFilter.value)
|
|
params.append('application_id', appFilter.value)
|
|
if (strategyFilter.value)
|
|
params.append('update_strategy', strategyFilter.value)
|
|
if (methodFilter.value)
|
|
params.append('update_method', methodFilter.value)
|
|
|
|
const queryString = params.toString()
|
|
const url = `${BASE_URL}/dev/versions/export?${queryString}&token=${token}`
|
|
window.open(url, '_blank')
|
|
}
|
|
|
|
function handleBatchExport(ids: number[]) {
|
|
if (!ids.length)
|
|
return
|
|
const token = localStorage.getItem('token')
|
|
const params = new URLSearchParams()
|
|
params.append('ids', ids.join(','))
|
|
const url = `${BASE_URL}/dev/versions/export?${params.toString()}&token=${token}`
|
|
window.open(url, '_blank')
|
|
}
|
|
|
|
function confirmBatchDelete(ids: number[]) {
|
|
batchDeleteIds.value = ids
|
|
batchDeleteDialogOpen.value = true
|
|
}
|
|
|
|
async function handleBatchDelete() {
|
|
try {
|
|
await api.delete('/dev/versions/batch', { ids: batchDeleteIds.value } as any)
|
|
toast.success(t('admin.versions.batchDeleteSuccess'))
|
|
fetchVersions()
|
|
}
|
|
catch (error: any) {
|
|
console.error('批量删除失败:', error)
|
|
toast.error(error.message || t('common.error'))
|
|
}
|
|
finally {
|
|
batchDeleteIds.value = []
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchApplications()
|
|
fetchVersions()
|
|
const appParam = route.query.app as string
|
|
if (appParam) {
|
|
appFilter.value = appParam
|
|
}
|
|
})
|
|
|
|
watch([currentPage, pageSize], () => {
|
|
fetchVersions()
|
|
})
|
|
|
|
watch([appFilter, strategyFilter, methodFilter, searchFilter], () => {
|
|
currentPage.value = 1
|
|
fetchVersions()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<BasicPage
|
|
:title="t('admin.versions.title')"
|
|
:description="t('admin.versions.description')"
|
|
sticky
|
|
>
|
|
<template #actions>
|
|
<UiButton @click="goToCreate">
|
|
<Plus class="mr-2 h-4 w-4" />
|
|
{{ t('admin.versions.create') }}
|
|
</UiButton>
|
|
</template>
|
|
|
|
<div class="space-y-6">
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<UiCard>
|
|
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
|
<UiCardTitle class="text-sm font-medium">
|
|
{{ t('admin.versions.totalVersions') }}
|
|
</UiCardTitle>
|
|
<GitBranch class="size-4 text-muted-foreground" />
|
|
</UiCardHeader>
|
|
<UiCardContent>
|
|
<div class="text-2xl font-bold">
|
|
{{ versions.length }}
|
|
</div>
|
|
</UiCardContent>
|
|
</UiCard>
|
|
|
|
<UiCard>
|
|
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
|
<UiCardTitle class="text-sm font-medium">
|
|
{{ t('admin.versions.forcedCount') }}
|
|
</UiCardTitle>
|
|
<AlertTriangle class="size-4 text-muted-foreground" />
|
|
</UiCardHeader>
|
|
<UiCardContent>
|
|
<div class="text-2xl font-bold">
|
|
{{ forcedCount }}
|
|
</div>
|
|
</UiCardContent>
|
|
</UiCard>
|
|
|
|
<UiCard>
|
|
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
|
<UiCardTitle class="text-sm font-medium">
|
|
{{ t('admin.versions.totalSize') }}
|
|
</UiCardTitle>
|
|
<HardDrive class="size-4 text-muted-foreground" />
|
|
</UiCardHeader>
|
|
<UiCardContent>
|
|
<div class="text-2xl font-bold">
|
|
{{ formatFileSize(totalSize) }}
|
|
</div>
|
|
</UiCardContent>
|
|
</UiCard>
|
|
|
|
<UiCard>
|
|
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
|
<UiCardTitle class="text-sm font-medium">
|
|
{{ t('admin.versions.appCount') }}
|
|
</UiCardTitle>
|
|
<Package class="size-4 text-muted-foreground" />
|
|
</UiCardHeader>
|
|
<UiCardContent>
|
|
<div class="text-2xl font-bold">
|
|
{{ new Set(versions.map(v => v.application_id)).size }}
|
|
</div>
|
|
</UiCardContent>
|
|
</UiCard>
|
|
</div>
|
|
|
|
<UiCard>
|
|
<UiCardContent class="p-6">
|
|
<DataTable
|
|
ref="tableRef"
|
|
:loading
|
|
:data="versions"
|
|
:server-pagination="serverPagination"
|
|
:on-download="downloadVersion"
|
|
:on-edit="goToEdit"
|
|
:on-delete="confirmDelete"
|
|
:search-filter="searchFilter"
|
|
@refresh="fetchVersions"
|
|
@update:search-filter="searchFilter = $event"
|
|
@export="handleExport"
|
|
@batch-delete="confirmBatchDelete(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
|
|
@batch-export="handleBatchExport(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
|
|
>
|
|
<template #filters>
|
|
<SingleFilter
|
|
v-model="appFilter"
|
|
:title="t('admin.versions.application')"
|
|
:options="applicationOptions"
|
|
/>
|
|
<SingleFilter
|
|
v-model="strategyFilter"
|
|
:title="t('admin.versions.strategy')"
|
|
:options="strategyOptions"
|
|
/>
|
|
<SingleFilter
|
|
v-model="methodFilter"
|
|
:title="t('admin.versions.method')"
|
|
:options="methodOptions"
|
|
/>
|
|
</template>
|
|
</DataTable>
|
|
</UiCardContent>
|
|
</UiCard>
|
|
</div>
|
|
|
|
<ConfirmDialog
|
|
v-model:open="deleteDialogOpen"
|
|
destructive
|
|
:confirm-button-text="t('common.delete')"
|
|
:cancel-button-text="t('common.cancel')"
|
|
@confirm="handleDelete"
|
|
>
|
|
<template #title>
|
|
{{ t('admin.versions.deleteVersion') }}
|
|
</template>
|
|
<template #description>
|
|
{{ t('admin.versions.deleteConfirm', { version: deleteTarget?.version }) }}
|
|
</template>
|
|
</ConfirmDialog>
|
|
|
|
<ConfirmDialog
|
|
v-model:open="batchDeleteDialogOpen"
|
|
destructive
|
|
:confirm-button-text="t('common.delete')"
|
|
:cancel-button-text="t('common.cancel')"
|
|
@confirm="handleBatchDelete"
|
|
>
|
|
<template #title>
|
|
{{ t('admin.versions.batchDelete') }}
|
|
</template>
|
|
<template #description>
|
|
{{ t('admin.versions.batchDeleteConfirm', { count: batchDeleteIds.length }) }}
|
|
</template>
|
|
</ConfirmDialog>
|
|
</BasicPage>
|
|
</template>
|