57 lines
3.0 KiB
Vue
57 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import '@/styles/adminDensity.css'
|
|
import { ArrowLeft } from '@lucide/vue'
|
|
import AdminPage from '@/shared/components/AdminPage.vue'
|
|
import StatusBadge from '@/shared/components/StatusBadge.vue'
|
|
import ContractPendingNotice from './ContractPendingNotice.vue'
|
|
|
|
withDefaults(defineProps<{
|
|
title: string
|
|
dense?: boolean
|
|
referenceLabel: string
|
|
referenceValue: string
|
|
backLabel: string
|
|
backText?: string
|
|
domain: string
|
|
pending?: boolean
|
|
statusText?: string
|
|
}>(), { pending: true, statusText: '接口待接入' })
|
|
|
|
defineEmits<{ back: [] }>()
|
|
</script>
|
|
|
|
<template>
|
|
<AdminPage as="div" class="overseas-detail-page" :class="{ 'admin-density': dense }" :aria-label="title">
|
|
<header v-if="dense" class="density-detail-header">
|
|
<div class="overseas-detail-title density-detail-heading">
|
|
<el-button link class="density-back" :aria-label="backLabel" @click="$emit('back')"><ArrowLeft :size="16" />{{ backText || '返回列表' }}</el-button>
|
|
<h1 class="density-detail-title"><slot name="reference">{{ referenceValue }}</slot></h1>
|
|
<StatusBadge v-if="statusText" :status="statusText" />
|
|
</div>
|
|
</header>
|
|
<header v-else class="overseas-detail-head">
|
|
<el-button :class="{ 'density-back': dense }" :link="dense" :aria-label="backLabel" @click="$emit('back')"><ArrowLeft :size="16" />{{ backText || '返回' }}</el-button>
|
|
<div class="overseas-detail-title">
|
|
<h1>{{ title }}</h1>
|
|
<p>{{ referenceLabel }} <strong><slot name="reference">{{ referenceValue }}</slot></strong></p>
|
|
</div>
|
|
<span class="overseas-detail-status" :class="{ 'is-live': !pending }" role="status">{{ statusText }}</span>
|
|
</header>
|
|
<slot name="overview" />
|
|
<ContractPendingNotice v-if="pending" :domain="domain" />
|
|
<slot />
|
|
</AdminPage>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.overseas-detail-page { min-width: 0; }
|
|
.overseas-detail-head { display: flex; min-height: 44px; align-items: center; gap: 12px; }
|
|
.overseas-detail-head .overseas-detail-title { min-width: 0; flex: 1; }
|
|
.overseas-detail-head .overseas-detail-title h1 { margin: 0; color: var(--cc-text); font-size: 20px; line-height: 1.35; }
|
|
.overseas-detail-head .overseas-detail-title p { display: flex; min-width: 0; align-items: baseline; gap: 4px; margin: 3px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
|
|
.overseas-detail-head .overseas-detail-title strong { min-width: 0; max-width: 100%; color: var(--cc-text); }
|
|
.overseas-detail-status { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 10px; border: 1px solid #f3d19e; border-radius: 999px; background: #fdf6ec; color: #b88230; font-size: 12px; font-weight: 600; white-space: nowrap; }
|
|
.overseas-detail-status.is-live { border-color: var(--el-color-success-light-7); background: var(--el-color-success-light-9); color: var(--el-color-success-dark-2); }
|
|
.overseas-detail-page.admin-density { background: var(--admin-surface); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); gap: 0; }
|
|
</style>
|