469 lines
13 KiB
Vue
469 lines
13 KiB
Vue
<script lang="ts" setup>
|
||
import { computed, reactive, ref, watch } from 'vue';
|
||
|
||
import { Page } from '@vben/common-ui';
|
||
import { useAccessStore } from '@vben/stores';
|
||
|
||
import {
|
||
activateHotgameProviderProfile,
|
||
fetchHotgameCatalog,
|
||
getHotgameProviderConfig,
|
||
importHotgameCatalog,
|
||
pageHotgameCatalog,
|
||
saveHotgameProviderConfig,
|
||
} from '#/api/legacy/baishun-game';
|
||
import { getAllowedSysOrigins } from '#/views/system/shared';
|
||
|
||
import {
|
||
Button,
|
||
Card,
|
||
Collapse,
|
||
CollapsePanel,
|
||
Form,
|
||
FormItem,
|
||
Input,
|
||
Pagination,
|
||
Select,
|
||
Table,
|
||
Tag,
|
||
message,
|
||
} from 'antdv-next';
|
||
|
||
defineOptions({ name: 'OperateHotgameConfig' });
|
||
|
||
function createProviderForm(sysOrigin = '') {
|
||
return {
|
||
appKey: '',
|
||
callbackBaseUrl: '',
|
||
profile: 'PROD',
|
||
sysOrigin,
|
||
testToken: '',
|
||
testUid: '',
|
||
};
|
||
}
|
||
|
||
const accessStore = useAccessStore();
|
||
const sysOriginOptions = computed(() => {
|
||
const options = getAllowedSysOrigins(accessStore.accessCodes || []);
|
||
return options.length > 0 ? options : getAllowedSysOrigins([]);
|
||
});
|
||
const profileOptions = [
|
||
{ label: '正式环境', value: 'PROD' },
|
||
{ label: '测试环境', value: 'TEST' },
|
||
];
|
||
const importShowcaseOptions = [
|
||
{ label: '默认上架', value: true as any },
|
||
{ label: '默认下架', value: false as any },
|
||
];
|
||
|
||
const contextQuery = reactive({ profile: 'PROD', sysOrigin: '' });
|
||
const providerForm = reactive(createProviderForm());
|
||
const catalogQuery = reactive<Record<string, any>>({
|
||
cursor: 1,
|
||
keyword: '',
|
||
limit: 20,
|
||
});
|
||
|
||
const providerLoading = ref(false);
|
||
const providerSaving = ref(false);
|
||
const catalogLoading = ref(false);
|
||
const catalogFetching = ref(false);
|
||
const catalogImporting = ref(false);
|
||
const profileActivating = ref(false);
|
||
const totalCatalog = ref(0);
|
||
const catalogList = ref<Array<Record<string, any>>>([]);
|
||
const selectedCatalogKeys = ref<Array<string>>([]);
|
||
const activeProfile = ref('PROD');
|
||
const importDefaultShowcase = ref(true as any);
|
||
|
||
const isCurrentProfileActive = computed(
|
||
() => activeProfile.value === contextQuery.profile,
|
||
);
|
||
const activeProfileLabel = computed(
|
||
() =>
|
||
profileOptions.find((item) => item.value === activeProfile.value)?.label ||
|
||
activeProfile.value,
|
||
);
|
||
|
||
const catalogColumns = [
|
||
{ dataIndex: 'name', key: 'name', title: '名称', width: 180 },
|
||
{ dataIndex: 'gameId', key: 'gameId', title: '内部ID', width: 150 },
|
||
{ dataIndex: 'vendorGameId', key: 'vendorGameId', title: '热游ID', width: 120 },
|
||
{ dataIndex: 'status', key: 'status', title: '目录状态', width: 110 },
|
||
{ dataIndex: 'packageVersion', key: 'packageVersion', title: '版本', width: 90 },
|
||
{ dataIndex: 'added', key: 'added', title: '统一游戏列表', width: 140 },
|
||
{ dataIndex: 'downloadUrl', key: 'downloadUrl', title: '启动地址', width: 520 },
|
||
{ dataIndex: 'updateTime', key: 'updateTime', title: '更新时间', width: 180 },
|
||
];
|
||
|
||
const catalogRowSelection = computed(() => ({
|
||
selectedRowKeys: selectedCatalogKeys.value,
|
||
onChange: (keys: Array<number | string>) => {
|
||
selectedCatalogKeys.value = keys.map((item) => String(item));
|
||
},
|
||
getCheckboxProps: (record: Record<string, any>) => ({
|
||
disabled: Boolean(record.added),
|
||
}),
|
||
}));
|
||
|
||
watch(
|
||
sysOriginOptions,
|
||
(options) => {
|
||
if (!contextQuery.sysOrigin) {
|
||
contextQuery.sysOrigin = String(options[0]?.value || '');
|
||
}
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
watch(
|
||
() => [contextQuery.sysOrigin, contextQuery.profile],
|
||
([sysOrigin, profile]) => {
|
||
if (!sysOrigin || !profile) {
|
||
return;
|
||
}
|
||
Object.assign(providerForm, createProviderForm(sysOrigin), {
|
||
profile,
|
||
sysOrigin,
|
||
});
|
||
selectedCatalogKeys.value = [];
|
||
void Promise.all([loadProviderConfig(), loadCatalog(true)]);
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
function applyProviderForm(record: Record<string, any>) {
|
||
activeProfile.value = String(record.activeProfile || activeProfile.value || 'PROD');
|
||
Object.assign(providerForm, createProviderForm(contextQuery.sysOrigin), {
|
||
...record,
|
||
profile: contextQuery.profile,
|
||
sysOrigin: contextQuery.sysOrigin,
|
||
});
|
||
}
|
||
|
||
async function loadProviderConfig() {
|
||
if (!contextQuery.sysOrigin) {
|
||
return;
|
||
}
|
||
providerLoading.value = true;
|
||
try {
|
||
const result = await getHotgameProviderConfig({
|
||
profile: contextQuery.profile,
|
||
sysOrigin: contextQuery.sysOrigin,
|
||
});
|
||
applyProviderForm(result || {});
|
||
} finally {
|
||
providerLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function persistProviderConfig(showSuccess = true) {
|
||
if (!contextQuery.sysOrigin || !providerForm.appKey) {
|
||
message.warning('请补全热游签名 Key');
|
||
return false;
|
||
}
|
||
providerSaving.value = true;
|
||
try {
|
||
const result = await saveHotgameProviderConfig({
|
||
...providerForm,
|
||
profile: contextQuery.profile,
|
||
sysOrigin: contextQuery.sysOrigin,
|
||
});
|
||
applyProviderForm(result || providerForm);
|
||
if (showSuccess) {
|
||
message.success('热游配置已保存');
|
||
}
|
||
return true;
|
||
} catch {
|
||
return false;
|
||
} finally {
|
||
providerSaving.value = false;
|
||
}
|
||
}
|
||
|
||
async function loadCatalog(reset = false) {
|
||
if (!contextQuery.sysOrigin) {
|
||
return;
|
||
}
|
||
if (reset) {
|
||
catalogQuery.cursor = 1;
|
||
}
|
||
catalogLoading.value = true;
|
||
try {
|
||
const result = await pageHotgameCatalog({
|
||
...catalogQuery,
|
||
profile: contextQuery.profile,
|
||
sysOrigin: contextQuery.sysOrigin,
|
||
});
|
||
catalogList.value = Array.isArray(result.records) ? result.records : [];
|
||
totalCatalog.value = Number(result.total || 0);
|
||
} finally {
|
||
catalogLoading.value = false;
|
||
}
|
||
}
|
||
|
||
function handleCatalogPageChange(page: number, pageSize: number) {
|
||
catalogQuery.cursor = page;
|
||
catalogQuery.limit = pageSize;
|
||
void loadCatalog();
|
||
}
|
||
|
||
async function handleActivateProfile() {
|
||
if (!(await persistProviderConfig(false))) {
|
||
return;
|
||
}
|
||
profileActivating.value = true;
|
||
try {
|
||
const result = await activateHotgameProviderProfile({
|
||
profile: contextQuery.profile,
|
||
sysOrigin: contextQuery.sysOrigin,
|
||
});
|
||
applyProviderForm(result || providerForm);
|
||
message.success(`已切换到${activeProfileLabel.value}`);
|
||
await loadCatalog(true);
|
||
} finally {
|
||
profileActivating.value = false;
|
||
}
|
||
}
|
||
|
||
async function handleFetchCatalog() {
|
||
if (!(await persistProviderConfig(false))) {
|
||
return;
|
||
}
|
||
catalogFetching.value = true;
|
||
try {
|
||
const result = await fetchHotgameCatalog({
|
||
profile: contextQuery.profile,
|
||
sysOrigin: contextQuery.sysOrigin,
|
||
});
|
||
message.success(
|
||
`同步完成：新增 ${Number(result.inserted || 0)}，更新 ${Number(result.updated || 0)}，跳过 ${Number(result.skipped || 0)}`,
|
||
);
|
||
await loadCatalog(true);
|
||
} finally {
|
||
catalogFetching.value = false;
|
||
}
|
||
}
|
||
|
||
async function handleImportSelected() {
|
||
if (selectedCatalogKeys.value.length === 0) {
|
||
message.warning('请选择要添加到统一游戏列表的热游游戏');
|
||
return;
|
||
}
|
||
catalogImporting.value = true;
|
||
try {
|
||
const result = await importHotgameCatalog({
|
||
profile: contextQuery.profile,
|
||
sysOrigin: contextQuery.sysOrigin,
|
||
vendorGameIds: selectedCatalogKeys.value,
|
||
defaultShowcase: importDefaultShowcase.value,
|
||
});
|
||
selectedCatalogKeys.value = [];
|
||
message.success(
|
||
`添加完成：新增 ${Number(result.imported || 0)}，已存在 ${Number(result.existing || 0)}`,
|
||
);
|
||
await loadCatalog(true);
|
||
} finally {
|
||
catalogImporting.value = false;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<Page title="热游配置">
|
||
<Card :loading="providerLoading" title="热游接入配置">
|
||
<Form layout="vertical">
|
||
<div class="form-grid provider-grid">
|
||
<FormItem label="系统">
|
||
<SysOriginSelect
|
||
v-model:value="contextQuery.sysOrigin"
|
||
:options="sysOriginOptions"
|
||
/>
|
||
</FormItem>
|
||
<FormItem label="配置环境" extra="app 侧只读取当前启用环境。">
|
||
<Select
|
||
v-model:value="contextQuery.profile"
|
||
:options="profileOptions"
|
||
option-label-prop="label"
|
||
/>
|
||
</FormItem>
|
||
<FormItem label="回调域名">
|
||
<Input
|
||
v-model:value="providerForm.callbackBaseUrl"
|
||
placeholder="https://api.global-interaction.com/"
|
||
/>
|
||
</FormItem>
|
||
<FormItem label="Key">
|
||
<Input
|
||
v-model:value="providerForm.appKey"
|
||
placeholder="请输入热游签名 Key"
|
||
type="password"
|
||
/>
|
||
</FormItem>
|
||
</div>
|
||
<Collapse class="test-user-collapse" ghost>
|
||
<CollapsePanel key="test-user" header="测试用户">
|
||
<div class="form-grid">
|
||
<FormItem label="UID">
|
||
<Input v-model:value="providerForm.testUid" placeholder="可选" />
|
||
</FormItem>
|
||
<FormItem label="Token">
|
||
<Input
|
||
v-model:value="providerForm.testToken"
|
||
placeholder="可选"
|
||
type="password"
|
||
/>
|
||
</FormItem>
|
||
</div>
|
||
</CollapsePanel>
|
||
</Collapse>
|
||
<div class="toolbar">
|
||
<Button
|
||
type="primary"
|
||
:loading="providerSaving"
|
||
@click="persistProviderConfig(true)"
|
||
>
|
||
保存配置
|
||
</Button>
|
||
<Button
|
||
:disabled="isCurrentProfileActive"
|
||
:loading="profileActivating"
|
||
@click="handleActivateProfile"
|
||
>
|
||
启用此环境
|
||
</Button>
|
||
<Button :loading="catalogFetching" @click="handleFetchCatalog">
|
||
同步热游目录
|
||
</Button>
|
||
<Tag :color="isCurrentProfileActive ? 'success' : 'warning'">
|
||
当前启用：{{ activeProfileLabel }}
|
||
</Tag>
|
||
</div>
|
||
</Form>
|
||
</Card>
|
||
|
||
<Card class="content-card" title="热游目录">
|
||
<div class="toolbar">
|
||
<Input
|
||
v-model:value="catalogQuery.keyword"
|
||
placeholder="搜索目录名称 / 内部ID / 热游ID"
|
||
style="width: 280px"
|
||
@pressEnter="loadCatalog(true)"
|
||
/>
|
||
<Button :loading="catalogLoading" type="primary" @click="loadCatalog(true)">
|
||
搜索
|
||
</Button>
|
||
<Button :loading="catalogFetching" @click="handleFetchCatalog">
|
||
重新同步目录
|
||
</Button>
|
||
<Select
|
||
v-model:value="importDefaultShowcase"
|
||
:options="importShowcaseOptions"
|
||
style="width: 120px"
|
||
/>
|
||
<Button
|
||
type="primary"
|
||
:loading="catalogImporting"
|
||
@click="handleImportSelected"
|
||
>
|
||
添加已选游戏
|
||
</Button>
|
||
</div>
|
||
|
||
<Table
|
||
:columns="catalogColumns"
|
||
:data-source="catalogList"
|
||
:loading="catalogLoading"
|
||
:pagination="false"
|
||
row-key="vendorGameId"
|
||
:row-selection="catalogRowSelection"
|
||
:scroll="{ x: 1500 }"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'status'">
|
||
<Tag :color="record.status === 'ENABLED' ? 'success' : 'default'">
|
||
{{ record.status || '-' }}
|
||
</Tag>
|
||
</template>
|
||
<template v-else-if="column.key === 'added'">
|
||
<Tag :color="record.added ? 'success' : 'default'">
|
||
{{ record.added ? '已进入统一游戏列表' : '未添加' }}
|
||
</Tag>
|
||
</template>
|
||
<template v-else-if="column.key === 'downloadUrl'">
|
||
<a
|
||
v-if="record.downloadUrl"
|
||
:href="record.downloadUrl"
|
||
class="link-cell"
|
||
rel="noreferrer"
|
||
target="_blank"
|
||
>
|
||
{{ record.downloadUrl }}
|
||
</a>
|
||
<span v-else>-</span>
|
||
</template>
|
||
</template>
|
||
</Table>
|
||
|
||
<div v-if="totalCatalog > 0" class="pager">
|
||
<Pagination
|
||
:current="catalogQuery.cursor"
|
||
:page-size="catalogQuery.limit"
|
||
:total="totalCatalog"
|
||
show-size-changer
|
||
@change="handleCatalogPageChange"
|
||
@showSizeChange="handleCatalogPageChange"
|
||
/>
|
||
</div>
|
||
</Card>
|
||
</Page>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.content-card {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.pager {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 0 16px;
|
||
}
|
||
|
||
.provider-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.test-user-collapse {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.link-cell {
|
||
display: inline-block;
|
||
max-width: 500px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.form-grid,
|
||
.provider-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|