[update]domainStatus页面接入后端接口
This commit is contained in:
@@ -92,3 +92,35 @@ export function saveGameRtp(data: SaveGameRtpPayload) {
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
export function domainStatus() {
|
||||
return createAxios({
|
||||
url: '/admin/embed.Embed/domainStatus',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export interface SaveDomainPayload {
|
||||
header_image_url: string
|
||||
custom_config: Record<string, unknown>
|
||||
base_color: string
|
||||
border_color: string
|
||||
online_color: string
|
||||
offline_color: string
|
||||
title_color: string
|
||||
text_color: string
|
||||
tag_color: string
|
||||
}
|
||||
|
||||
export function saveDomain(data: SaveDomainPayload) {
|
||||
return createAxios(
|
||||
{
|
||||
url: '/admin/embed.Embed/saveDomain',
|
||||
method: 'post',
|
||||
data,
|
||||
},
|
||||
{
|
||||
showSuccessMessage: true,
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="default-main domain-status-page">
|
||||
<div v-loading="loading" class="default-main domain-status-page">
|
||||
<section class="setting-grid">
|
||||
<div class="panel setting-panel">
|
||||
<div class="panel-title">{{ t('embed.domainStatus.settingTitle') }}</div>
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-button type="success" class="save-button" @click="saveSettings">
|
||||
<el-button type="success" class="save-button" :loading="saving" @click="saveSettings">
|
||||
{{ t('embed.domainStatus.save') }}
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -49,45 +49,23 @@
|
||||
<div v-for="domain in domains" :key="domain.id" class="domain-row">
|
||||
<span class="domain-icon" aria-hidden="true"></span>
|
||||
<span>{{ domain.name }}</span>
|
||||
<el-tag :type="domain.online ? 'success' : 'danger'" effect="plain">
|
||||
{{ domain.online ? t('embed.domainStatus.online') : t('embed.domainStatus.offline') }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-empty v-if="domains.length === 0" :description="t('embed.domainStatus.empty')" :image-size="60" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<el-button link type="primary" class="edit-link" @click="domainDialogVisible = true">
|
||||
<el-button link type="primary" class="edit-link" @click="editDomainList">
|
||||
{{ t('embed.domainStatus.editDomainList') }}
|
||||
</el-button>
|
||||
|
||||
<el-dialog v-model="domainDialogVisible" :title="t('embed.domainStatus.editTitle')" width="620px">
|
||||
<div class="domain-editor">
|
||||
<div v-for="(domain, index) in domainDraft" :key="domain.id" class="domain-edit-row">
|
||||
<el-input v-model="domain.name" placeholder="example.com" />
|
||||
<el-switch
|
||||
v-model="domain.online"
|
||||
:active-text="t('embed.domainStatus.online')"
|
||||
:inactive-text="t('embed.domainStatus.offline')"
|
||||
/>
|
||||
<el-button type="danger" link @click="domainDraft.splice(index, 1)">
|
||||
{{ t('embed.domainStatus.delete') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button class="add-domain-button" @click="addDomain">{{ t('embed.domainStatus.addDomain') }}</el-button>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="resetDomainDraft">{{ t('embed.domainStatus.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="saveDomains">{{ t('embed.domainStatus.confirm') }}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { domainStatus, saveDomain } from '/@/api/backend/embed'
|
||||
|
||||
defineOptions({
|
||||
name: 'embed/domainStatus',
|
||||
@@ -96,12 +74,24 @@ defineOptions({
|
||||
interface DomainRow {
|
||||
id: number
|
||||
name: string
|
||||
online: boolean
|
||||
}
|
||||
|
||||
interface DomainSetting {
|
||||
header_image_url?: string | null
|
||||
custom_config?: string | Record<string, unknown> | null
|
||||
base_color?: string | null
|
||||
border_color?: string | null
|
||||
online_color?: string | null
|
||||
offline_color?: string | null
|
||||
title_color?: string | null
|
||||
text_color?: string | null
|
||||
tag_color?: string | null
|
||||
}
|
||||
|
||||
type ColorSettingKey = 'baseColor' | 'borderColor' | 'onlineColor' | 'offlineColor' | 'titleColor' | 'textColor' | 'labelColor'
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
const configTemplate = `{
|
||||
"hideDomain": [
|
||||
@@ -172,12 +162,37 @@ const embedCode = ref(`<div style="position: relative;max-width: 1000px;margin:
|
||||
<\/script>
|
||||
</div>`)
|
||||
|
||||
const saveSettings = () => {
|
||||
const saving = ref(false)
|
||||
|
||||
const saveSettings = async () => {
|
||||
let customConfig: Record<string, unknown> = {}
|
||||
try {
|
||||
if (settings.customConfig) JSON.parse(settings.customConfig)
|
||||
ElMessage.success(t('embed.domainStatus.saved'))
|
||||
if (settings.customConfig.trim()) {
|
||||
const parsed = JSON.parse(settings.customConfig)
|
||||
if (!parsed || Array.isArray(parsed) || typeof parsed !== 'object') throw new Error()
|
||||
customConfig = parsed
|
||||
}
|
||||
} catch {
|
||||
ElMessage.error(t('embed.domainStatus.invalidConfig'))
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
await saveDomain({
|
||||
header_image_url: settings.headerImage,
|
||||
custom_config: customConfig,
|
||||
base_color: settings.baseColor,
|
||||
border_color: settings.borderColor,
|
||||
online_color: settings.onlineColor,
|
||||
offline_color: settings.offlineColor,
|
||||
title_color: settings.titleColor,
|
||||
text_color: settings.textColor,
|
||||
tag_color: settings.labelColor,
|
||||
})
|
||||
await loadDomainStatus()
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -190,37 +205,53 @@ const copyEmbedCode = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const domains = ref<DomainRow[]>([{ id: 1, name: '1xaud.com', online: true }])
|
||||
const domainDraft = ref<DomainRow[]>([])
|
||||
const domainDialogVisible = ref(false)
|
||||
const domains = ref<DomainRow[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const cloneDomains = () => domains.value.map((domain) => ({ ...domain }))
|
||||
|
||||
watch(domainDialogVisible, (visible) => {
|
||||
if (visible) domainDraft.value = cloneDomains()
|
||||
})
|
||||
|
||||
const addDomain = () => {
|
||||
const nextId = Math.max(0, ...domainDraft.value.map((domain) => domain.id)) + 1
|
||||
domainDraft.value.push({ id: nextId, name: '', online: true })
|
||||
const formatCustomConfig = (value: DomainSetting['custom_config']) => {
|
||||
if (!value) return ''
|
||||
return typeof value === 'string' ? value : JSON.stringify(value, null, 2)
|
||||
}
|
||||
|
||||
const resetDomainDraft = () => {
|
||||
domainDraft.value = cloneDomains()
|
||||
domainDialogVisible.value = false
|
||||
const normalizeDomainList = (value: unknown): DomainRow[] => {
|
||||
const list = Array.isArray(value) ? value : typeof value === 'string' ? value.split(/[\n,;]+/) : []
|
||||
return list
|
||||
.map((item) => (typeof item === 'object' && item ? String((item as any).domain ?? (item as any).name ?? '') : String(item)))
|
||||
.map((name) => name.trim())
|
||||
.filter(Boolean)
|
||||
.map((name, index) => ({ id: index + 1, name }))
|
||||
}
|
||||
|
||||
const saveDomains = () => {
|
||||
const cleaned = domainDraft.value.map((domain) => ({ ...domain, name: domain.name.trim() })).filter((domain) => domain.name)
|
||||
const names = cleaned.map((domain) => domain.name.toLowerCase())
|
||||
if (new Set(names).size !== names.length) {
|
||||
ElMessage.error(t('embed.domainStatus.duplicateDomain'))
|
||||
return
|
||||
const applyDomainSetting = (domain?: DomainSetting) => {
|
||||
if (!domain) return
|
||||
settings.headerImage = domain.header_image_url ?? ''
|
||||
settings.customConfig = formatCustomConfig(domain.custom_config)
|
||||
settings.baseColor = domain.base_color ?? ''
|
||||
settings.borderColor = domain.border_color ?? ''
|
||||
settings.onlineColor = domain.online_color ?? ''
|
||||
settings.offlineColor = domain.offline_color ?? ''
|
||||
settings.titleColor = domain.title_color ?? ''
|
||||
settings.textColor = domain.text_color ?? ''
|
||||
settings.labelColor = domain.tag_color ?? ''
|
||||
}
|
||||
|
||||
const loadDomainStatus = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const response = await domainStatus()
|
||||
const data = response.data ?? response
|
||||
applyDomainSetting(data?.domain)
|
||||
domains.value = normalizeDomainList(data?.domain_list)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
domains.value = cleaned
|
||||
domainDialogVisible.value = false
|
||||
ElMessage.success(t('embed.domainStatus.domainsSaved'))
|
||||
}
|
||||
|
||||
const editDomainList = () => {
|
||||
router.push({ name: 'routine/config' })
|
||||
}
|
||||
|
||||
onMounted(loadDomainStatus)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -348,10 +379,6 @@ const saveDomains = () => {
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.domain-icon {
|
||||
|
||||
Reference in New Issue
Block a user