[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>
|
<template>
|
||||||
<div class="default-main domain-status-page">
|
<div v-loading="loading" class="default-main domain-status-page">
|
||||||
<section class="setting-grid">
|
<section class="setting-grid">
|
||||||
<div class="panel setting-panel">
|
<div class="panel setting-panel">
|
||||||
<div class="panel-title">{{ t('embed.domainStatus.settingTitle') }}</div>
|
<div class="panel-title">{{ t('embed.domainStatus.settingTitle') }}</div>
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</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') }}
|
{{ t('embed.domainStatus.save') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
@@ -49,45 +49,23 @@
|
|||||||
<div v-for="domain in domains" :key="domain.id" class="domain-row">
|
<div v-for="domain in domains" :key="domain.id" class="domain-row">
|
||||||
<span class="domain-icon" aria-hidden="true"></span>
|
<span class="domain-icon" aria-hidden="true"></span>
|
||||||
<span>{{ domain.name }}</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>
|
</div>
|
||||||
<el-empty v-if="domains.length === 0" :description="t('embed.domainStatus.empty')" :image-size="60" />
|
<el-empty v-if="domains.length === 0" :description="t('embed.domainStatus.empty')" :image-size="60" />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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') }}
|
{{ t('embed.domainStatus.editDomainList') }}
|
||||||
</el-button>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { reactive, ref, watch } from 'vue'
|
import { onMounted, reactive, ref } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { domainStatus, saveDomain } from '/@/api/backend/embed'
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'embed/domainStatus',
|
name: 'embed/domainStatus',
|
||||||
@@ -96,12 +74,24 @@ defineOptions({
|
|||||||
interface DomainRow {
|
interface DomainRow {
|
||||||
id: number
|
id: number
|
||||||
name: string
|
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'
|
type ColorSettingKey = 'baseColor' | 'borderColor' | 'onlineColor' | 'offlineColor' | 'titleColor' | 'textColor' | 'labelColor'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
const configTemplate = `{
|
const configTemplate = `{
|
||||||
"hideDomain": [
|
"hideDomain": [
|
||||||
@@ -172,12 +162,37 @@ const embedCode = ref(`<div style="position: relative;max-width: 1000px;margin:
|
|||||||
<\/script>
|
<\/script>
|
||||||
</div>`)
|
</div>`)
|
||||||
|
|
||||||
const saveSettings = () => {
|
const saving = ref(false)
|
||||||
|
|
||||||
|
const saveSettings = async () => {
|
||||||
|
let customConfig: Record<string, unknown> = {}
|
||||||
try {
|
try {
|
||||||
if (settings.customConfig) JSON.parse(settings.customConfig)
|
if (settings.customConfig.trim()) {
|
||||||
ElMessage.success(t('embed.domainStatus.saved'))
|
const parsed = JSON.parse(settings.customConfig)
|
||||||
|
if (!parsed || Array.isArray(parsed) || typeof parsed !== 'object') throw new Error()
|
||||||
|
customConfig = parsed
|
||||||
|
}
|
||||||
} catch {
|
} catch {
|
||||||
ElMessage.error(t('embed.domainStatus.invalidConfig'))
|
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 domains = ref<DomainRow[]>([])
|
||||||
const domainDraft = ref<DomainRow[]>([])
|
const loading = ref(false)
|
||||||
const domainDialogVisible = ref(false)
|
|
||||||
|
|
||||||
const cloneDomains = () => domains.value.map((domain) => ({ ...domain }))
|
const formatCustomConfig = (value: DomainSetting['custom_config']) => {
|
||||||
|
if (!value) return ''
|
||||||
watch(domainDialogVisible, (visible) => {
|
return typeof value === 'string' ? value : JSON.stringify(value, null, 2)
|
||||||
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 resetDomainDraft = () => {
|
const normalizeDomainList = (value: unknown): DomainRow[] => {
|
||||||
domainDraft.value = cloneDomains()
|
const list = Array.isArray(value) ? value : typeof value === 'string' ? value.split(/[\n,;]+/) : []
|
||||||
domainDialogVisible.value = false
|
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 applyDomainSetting = (domain?: DomainSetting) => {
|
||||||
const cleaned = domainDraft.value.map((domain) => ({ ...domain, name: domain.name.trim() })).filter((domain) => domain.name)
|
if (!domain) return
|
||||||
const names = cleaned.map((domain) => domain.name.toLowerCase())
|
settings.headerImage = domain.header_image_url ?? ''
|
||||||
if (new Set(names).size !== names.length) {
|
settings.customConfig = formatCustomConfig(domain.custom_config)
|
||||||
ElMessage.error(t('embed.domainStatus.duplicateDomain'))
|
settings.baseColor = domain.base_color ?? ''
|
||||||
return
|
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 ?? ''
|
||||||
}
|
}
|
||||||
domains.value = cleaned
|
|
||||||
domainDialogVisible.value = false
|
const loadDomainStatus = async () => {
|
||||||
ElMessage.success(t('embed.domainStatus.domainsSaved'))
|
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
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const editDomainList = () => {
|
||||||
|
router.push({ name: 'routine/config' })
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(loadDomainStatus)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@@ -348,10 +379,6 @@ const saveDomains = () => {
|
|||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-tag {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.domain-icon {
|
.domain-icon {
|
||||||
|
|||||||
Reference in New Issue
Block a user