360 lines
26 KiB
Vue
360 lines
26 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onBeforeUnmount, ref, watch } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import {
|
||
ArrowLeft, Building2, Eye,
|
||
FileCheck2, FileText, Pencil, Power,
|
||
UserRound, UsersRound,
|
||
} from '@lucide/vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import {
|
||
changePlatformTenantStatus,
|
||
downloadTenantQualification,
|
||
getPlatformTenant,
|
||
listPlatformTenantMembers,
|
||
listTenantQualifications,
|
||
qualificationFileName,
|
||
type PlatformTenantQualification,
|
||
type PlatformTenantMember,
|
||
type PlatformTenantResource,
|
||
type PlatformTenantStatus,
|
||
} from '@/modules/iam'
|
||
import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
|
||
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||
import AdminPage from '@/shared/components/AdminPage.vue'
|
||
import AppDialog from '@/shared/components/AppDialog.vue'
|
||
import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
|
||
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
||
import PageToolbar from '@/shared/components/PageToolbar.vue'
|
||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||
import CustomerBillingRulesPanel from '@/modules/customers/components/CustomerBillingRulesPanel.vue'
|
||
import CustomerOverseasStorageFeePanel from '@/modules/customers/CustomerOverseasStorageFeePanel.vue'
|
||
import { CustomerAuditLogsPanel } from '@/modules/audit'
|
||
|
||
type DetailTab = 'basic' | 'billing' | 'logs'
|
||
type PreviewState = { url: string; kind: 'image' | 'pdf'; loading: boolean; failed: boolean }
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const access = useAccessPreviewStore()
|
||
const tenantId = computed(() => String(route.params.tenantId ?? ''))
|
||
const activeTab = ref<DetailTab>('basic')
|
||
const loading = ref(true)
|
||
const statusChanging = ref(false)
|
||
const loadError = ref<ApiErrorDetails | null>(null)
|
||
const customer = ref<PlatformTenantResource | null>(null)
|
||
const qualifications = ref<PlatformTenantQualification[]>([])
|
||
const members = ref<PlatformTenantMember[]>([])
|
||
let detailRequestSerial = 0
|
||
let disposed = false
|
||
const previews = ref<Record<string, PreviewState>>({})
|
||
const previewOpen = ref(false)
|
||
const previewName = ref('')
|
||
const previewUrl = ref('')
|
||
const previewKind = ref<'image' | 'pdf'>('image')
|
||
const tabList = ref<HTMLElement | null>(null)
|
||
|
||
const tabs: Array<{ key: DetailTab; label: string; icon: string }> = [
|
||
{ key: 'basic', label: '基本信息', icon: '📋' },
|
||
{ key: 'billing', label: '计费规则', icon: '⚖️' },
|
||
{ key: 'logs', label: '操作日志', icon: '📝' },
|
||
]
|
||
|
||
const enterpriseMembers = computed(() => members.value.filter((member) => ['OWNER', 'EMPLOYEE'].includes(member.memberType)))
|
||
function displayText(value?: string | null) { return value?.trim() || '—' }
|
||
function formatDate(value?: string | null) { return value ? value.replace('T', ' ').slice(0, 16) : '—' }
|
||
function formatCapital(value: number | string | null, currency: string | null) {
|
||
if (value === null || value === '') return '—'
|
||
const numericValue = Number(value)
|
||
if (!Number.isFinite(numericValue)) return '—'
|
||
const label = currency === 'USD' ? '美元' : currency === 'HKD' ? '港币' : '人民币'
|
||
return `${numericValue.toLocaleString('zh-CN')} ${label}`
|
||
}
|
||
function statusMeta(status: PlatformTenantStatus) {
|
||
if (status === 'ACTIVE') return { label: '启用', type: 'success' as const }
|
||
if (status === 'PROFILE_REQUIRED') return { label: '待完善', type: 'info' as const }
|
||
if (status === 'PENDING') return { label: '待审核', type: 'warning' as const }
|
||
if (status === 'REJECTED') return { label: '已驳回', type: 'danger' as const }
|
||
if (status === 'ARCHIVED') return { label: '已归档', type: 'info' as const }
|
||
return { label: '已停用', type: 'info' as const }
|
||
}
|
||
function qualificationLabel(type: string) {
|
||
return ({ BUSINESS_LICENSE: '营业执照', LEGAL_PERSON_ID: '法人身份证', FREIGHT_FORWARDER_CERTIFICATE: '货代资质证书', BANK_ACCOUNT_LICENSE: '银行开户许可证' } as Record<string, string>)[type] || '未知资质类型'
|
||
}
|
||
function qualificationStatus(status: PlatformTenantQualification['status']) {
|
||
if (status === 'APPROVED') return { label: '已通过', type: 'success' as const }
|
||
if (status === 'REJECTED') return { label: '已驳回', type: 'danger' as const }
|
||
if (status === 'SUPERSEDED') return { label: '已替换', type: 'info' as const }
|
||
return { label: '待审核', type: 'warning' as const }
|
||
}
|
||
function qualificationName(item: PlatformTenantQualification) {
|
||
try { return qualificationFileName(item.documentUrl) }
|
||
catch { return `${qualificationLabel(item.qualificationType)}文件` }
|
||
}
|
||
function clearPreviews() {
|
||
for (const preview of Object.values(previews.value)) if (preview.url) URL.revokeObjectURL(preview.url)
|
||
previews.value = {}
|
||
previewOpen.value = false
|
||
}
|
||
|
||
async function loadPreview(item: PlatformTenantQualification, notify = true) {
|
||
const state = previews.value[String(item.id)]
|
||
if (!state || state.loading) return false
|
||
state.loading = true
|
||
try {
|
||
const blob = await downloadTenantQualification(tenantId.value, item.documentUrl)
|
||
if (!blob.size) throw new Error('资质文件内容为空')
|
||
if (state.url) URL.revokeObjectURL(state.url)
|
||
state.url = URL.createObjectURL(blob)
|
||
state.kind = blob.type === 'application/pdf' || qualificationName(item).toLowerCase().endsWith('.pdf') ? 'pdf' : 'image'
|
||
state.failed = false
|
||
return true
|
||
} catch (error) {
|
||
state.failed = true
|
||
if (notify) ElMessage.error(getApiErrorMessage(error, '资质文件预览加载失败'))
|
||
return false
|
||
} finally { state.loading = false }
|
||
}
|
||
|
||
async function openPreview(item: PlatformTenantQualification) {
|
||
const state = previews.value[String(item.id)]
|
||
if (!state) return
|
||
if (!state.url) await loadPreview(item)
|
||
if (!state.url) return
|
||
previewName.value = qualificationName(item)
|
||
previewUrl.value = state.url
|
||
previewKind.value = state.kind
|
||
previewOpen.value = true
|
||
}
|
||
|
||
async function loadDetail() {
|
||
const requestedTenantId = tenantId.value
|
||
const serial = ++detailRequestSerial
|
||
loading.value = true
|
||
loadError.value = null
|
||
clearPreviews()
|
||
customer.value = null
|
||
qualifications.value = []
|
||
members.value = []
|
||
try {
|
||
const [tenantResult, qualificationResult, memberResult] = await Promise.all([
|
||
getPlatformTenant(requestedTenantId),
|
||
listTenantQualifications(requestedTenantId),
|
||
listPlatformTenantMembers(requestedTenantId),
|
||
])
|
||
if (disposed || serial !== detailRequestSerial || requestedTenantId !== tenantId.value) return
|
||
customer.value = tenantResult
|
||
qualifications.value = qualificationResult
|
||
members.value = memberResult
|
||
previews.value = Object.fromEntries(qualificationResult.map((item) => [String(item.id), {
|
||
url: '', kind: qualificationName(item).toLowerCase().endsWith('.pdf') ? 'pdf' : 'image', loading: false, failed: false,
|
||
} satisfies PreviewState]))
|
||
} catch (error) {
|
||
if (disposed || serial !== detailRequestSerial || requestedTenantId !== tenantId.value) return
|
||
customer.value = null
|
||
qualifications.value = []
|
||
members.value = []
|
||
loadError.value = getApiErrorDetails(error, '客户详情加载失败，请稍后重试')
|
||
} finally {
|
||
if (!disposed && serial === detailRequestSerial) loading.value = false
|
||
}
|
||
}
|
||
|
||
async function changeStatus() {
|
||
if (!customer.value || statusChanging.value) return
|
||
const next = customer.value.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE'
|
||
const verb = next === 'ACTIVE' ? '启用' : '停用'
|
||
try {
|
||
await ElMessageBox.confirm(`确认${verb}客户“${customer.value.tenantName}”吗？`, `${verb}客户`, {
|
||
type: 'warning', confirmButtonText: `确认${verb}`, cancelButtonText: '取消',
|
||
})
|
||
statusChanging.value = true
|
||
customer.value = await changePlatformTenantStatus(tenantId.value, next)
|
||
ElMessage.success(`客户已${verb}`)
|
||
} catch (error) {
|
||
if (error !== 'cancel' && error !== 'close') ElMessage.error(getApiErrorMessage(error, `客户${verb}失败`))
|
||
} finally { statusChanging.value = false }
|
||
}
|
||
|
||
function goEdit() { void router.push({ name: 'customers', query: { edit: tenantId.value } }) }
|
||
function selectTab(key: DetailTab, button?: HTMLElement) {
|
||
activeTab.value = key
|
||
button?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
|
||
}
|
||
function handleTabKeydown(event: KeyboardEvent, key: DetailTab) {
|
||
if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return
|
||
event.preventDefault()
|
||
const current = tabs.findIndex((item) => item.key === key)
|
||
const next = event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : event.key === 'ArrowRight' ? (current + 1) % tabs.length : (current - 1 + tabs.length) % tabs.length
|
||
const button = tabList.value?.querySelectorAll<HTMLButtonElement>('[role="tab"]')[next]
|
||
button?.focus()
|
||
selectTab(tabs[next].key, button)
|
||
}
|
||
watch(tenantId, (value) => {
|
||
activeTab.value = 'basic'
|
||
if (value) void loadDetail()
|
||
else {
|
||
detailRequestSerial += 1
|
||
loading.value = false
|
||
customer.value = null
|
||
qualifications.value = []
|
||
members.value = []
|
||
}
|
||
}, { immediate: true })
|
||
onBeforeUnmount(() => {
|
||
disposed = true
|
||
detailRequestSerial += 1
|
||
clearPreviews()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<!--
|
||
THESIS: 客户档案是一张可核验的运营工作台，不是被抽屉压缩的字段清单。
|
||
OWN-WORLD: 延续后台冷灰底、白色数据面板、紫蓝主色与克制的状态色。
|
||
STORY: 运营先确认企业状态，再查看客户资料、计费规则和操作日志。
|
||
FIRST VIEWPORT: 客户身份与动作居首，三个页签形成稳定内容索引。
|
||
FORM: 精确继承原型的详情工作台结构，以现有后台组件体系实现。
|
||
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
|
||
-->
|
||
<AdminPage as="div" class="customer-detail-page">
|
||
<LoadErrorState v-if="loadError" title="客户详情暂时无法加载" :message="loadError.message" :loading="loading" @retry="loadDetail">
|
||
<template #details><ApiErrorMeta :details="loadError" /></template>
|
||
</LoadErrorState>
|
||
|
||
<DetailPageLayout v-else v-loading="loading" aria-label="客户详情">
|
||
<template #header>
|
||
<header class="detail-header">
|
||
<el-button class="back-button" @click="router.push({ name: 'customers' })"><ArrowLeft :size="17" />返回列表</el-button>
|
||
<div class="company-mark" aria-hidden="true"><Building2 :size="23" /></div>
|
||
<PageToolbar class="detail-page-toolbar" as="section" :title="customer?.tenantName || '客户详情'" :description="customer?.tenantCode || '客户资料'">
|
||
<template #actions>
|
||
<div v-if="customer" class="header-actions">
|
||
<el-tag :type="statusMeta(customer.status).type" effect="light" round>{{ statusMeta(customer.status).label }}</el-tag>
|
||
<el-button v-if="access.can('platform:customer:edit') && customer.status !== 'ARCHIVED'" @click="goEdit"><Pencil :size="16" />编辑信息</el-button>
|
||
<el-button v-if="access.can('platform:customer:status') && ['ACTIVE', 'DISABLED'].includes(customer.status)" :type="customer.status === 'ACTIVE' ? 'danger' : 'success'" :loading="statusChanging" @click="changeStatus"><Power :size="16" />{{ customer.status === 'ACTIVE' ? '停用账号' : '启用账号' }}</el-button>
|
||
</div>
|
||
</template>
|
||
</PageToolbar>
|
||
</header>
|
||
</template>
|
||
|
||
<!-- <template #summary>
|
||
<section class="overview-strip" aria-label="客户概况">
|
||
<CustomerOperatingMetricCard title="累计运单" :value="String(orderStatistics.data?.totalSubmittedOrders ?? '')" unit="票" :detail="`本月 ${orderStatistics.data?.currentMonthSubmittedOrders ?? 0} 票`" tone="blue" :loading="orderStatistics.loading" :failed="orderStatistics.failed" :unauthorized="!access.can('platform:order:list')"><template #icon><Ship :size="20" /></template></CustomerOperatingMetricCard>
|
||
<CustomerOperatingMetricCard title="累计应收" :value="cnyWan(financeStatistics.data?.totalReceivable)" unit="万元" :detail="`未结清 ${cnyWan(financeStatistics.data?.outstandingReceivable)} 万元`" tone="green" :loading="financeStatistics.loading" :failed="financeStatistics.failed" :unauthorized="!access.can('platform:finance:customer-account:list')"><template #icon><CircleDollarSign :size="20" /></template></CustomerOperatingMetricCard>
|
||
<CustomerOperatingMetricCard title="在途柜量" :value="decimalText(transitStatistics.data?.totalTeu)" unit="TEU" :detail="`${transitStatistics.data?.containerCount ?? 0} 柜${transitStatistics.data?.unknownContainerCount ? ` · 另有 ${transitStatistics.data.unknownContainerCount} 柜柜型未知，未计入TEU` : ''}`" tone="amber" :loading="transitStatistics.loading" :failed="transitStatistics.failed" :unauthorized="!access.can('platform:firstleg:container:list')"><template #icon><Container :size="20" /></template></CustomerOperatingMetricCard>
|
||
</section>
|
||
</template> -->
|
||
|
||
<div ref="tabList" class="detail-tabs" role="tablist" aria-label="客户详情模块">
|
||
<button v-for="tab in tabs" :id="`customer-tab-${tab.key}`" :key="tab.key" type="button" role="tab" :class="{ active: activeTab === tab.key }" :aria-label="tab.label" :aria-selected="activeTab === tab.key" :aria-controls="`customer-panel-${tab.key}`" :tabindex="activeTab === tab.key ? 0 : -1" @click="selectTab(tab.key, $event.currentTarget as HTMLElement)" @keydown="handleTabKeydown($event, tab.key)"><span class="detail-tab-icon" aria-hidden="true">{{ tab.icon }}</span><span>{{ tab.label }}</span></button>
|
||
</div>
|
||
|
||
<div v-if="customer" :id="`customer-panel-${activeTab}`" class="tab-panel" role="tabpanel" :aria-labelledby="`customer-tab-${activeTab}`" tabindex="0">
|
||
<template v-if="activeTab === 'basic'">
|
||
<div class="basic-layout">
|
||
<section class="detail-panel company-panel">
|
||
<div class="panel-title"><div><h2>企业基本信息</h2><p>工商档案与合作配置</p></div><Building2 :size="19" /></div>
|
||
<dl class="info-grid">
|
||
<div><dt>公司名称</dt><dd>{{ displayText(customer.legalName || customer.tenantName) }}</dd></div>
|
||
<div><dt>客户昵称</dt><dd>{{ displayText(customer.customerNickname) }}</dd></div>
|
||
<div><dt>统一社会信用代码</dt><dd>{{ displayText(customer.unifiedSocialCreditCode) }}</dd></div>
|
||
<div><dt>企业类型</dt><dd>{{ displayText(customer.enterpriseType) }}</dd></div>
|
||
<div><dt>法定代表人</dt><dd>{{ displayText(customer.legalRepresentative) }}</dd></div>
|
||
<div><dt>成立日期</dt><dd>{{ formatDate(customer.establishedDate).slice(0, 10) }}</dd></div>
|
||
<div><dt>注册资本</dt><dd>{{ formatCapital(customer.registeredCapital, customer.registeredCapitalCurrency) }}</dd></div>
|
||
<div class="wide"><dt>注册地址</dt><dd>{{ displayText(customer.registeredAddress) }}</dd></div>
|
||
</dl>
|
||
</section>
|
||
<section class="detail-panel qualification-panel">
|
||
<div class="panel-title"><div><h2>资质文件</h2><p>共 {{ qualifications.length }} 份</p></div><FileText :size="19" /></div>
|
||
<div v-if="qualifications.length" class="qualification-list">
|
||
<button v-for="item in qualifications" :key="String(item.id)" type="button" :disabled="previews[String(item.id)]?.loading" @click="openPreview(item)">
|
||
<span class="file-icon"><FileText :size="18" /></span><span><strong>{{ qualificationLabel(item.qualificationType) }}</strong><small>{{ qualificationName(item) }}</small></span><el-tag :type="qualificationStatus(item.status).type" effect="light" size="small">{{ qualificationStatus(item.status).label }}</el-tag><span class="file-date">{{ item.validTo || '长期有效' }}</span><Eye :size="17" />
|
||
</button>
|
||
</div>
|
||
<div v-else class="section-empty"><FileCheck2 :size="22" /><strong>暂无资质文件</strong><span>客户尚未上传企业资质</span></div>
|
||
</section>
|
||
<section class="detail-panel contact-panel">
|
||
<div class="panel-title"><div><h2>联系与合作信息</h2><p>客户联络及内部跟进信息</p></div><UserRound :size="19" /></div>
|
||
<dl class="info-grid">
|
||
<div><dt>联系人</dt><dd>{{ displayText(customer.contactName) }}</dd></div><div><dt>公司联系电话</dt><dd>{{ displayText(customer.contactPhone) }}</dd></div>
|
||
<div><dt>联系邮箱</dt><dd>{{ displayText(customer.contactEmail) }}</dd></div><div><dt>联系微信</dt><dd>{{ displayText(customer.contactWechat) }}</dd></div>
|
||
<div><dt>客户套餐</dt><dd>{{ displayText(customer.servicePackage) }}</dd></div><div><dt>账期</dt><dd>{{ customer.paymentTermDays ?? 0 }} 天</dd></div>
|
||
<div><dt>销售人员</dt><dd>{{ displayText(customer.salesOwnerName) }}</dd></div><div><dt>入驻时间</dt><dd>{{ formatDate(customer.createdAt) }}</dd></div>
|
||
<div class="wide"><dt>内部备注</dt><dd>{{ displayText(customer.internalRemark) }}</dd></div>
|
||
</dl>
|
||
</section>
|
||
<section class="detail-panel user-panel">
|
||
<div class="panel-title"><div><h2>企业用户</h2><p>登录手机号属于账号信息；请在成员/账号管理中单独维护，修改会影响登录</p></div><UsersRound :size="19" /></div>
|
||
<div v-if="enterpriseMembers.length" class="user-table-wrap">
|
||
<table><thead><tr><th>账号</th><th>成员类型</th><th>登录手机号</th><th>邮箱</th><th>角色</th><th>状态</th></tr></thead>
|
||
<tbody><tr v-for="member in enterpriseMembers" :key="String(member.membershipId)">
|
||
<td><div class="user-identity"><span>{{ (member.displayName || member.username || '?').slice(0, 1) }}</span><div><strong>{{ displayText(member.username) }}</strong><small>{{ displayText(member.displayName) }}</small></div></div></td>
|
||
<td>{{ member.memberType === 'OWNER' ? '企业管理员' : '企业员工' }}</td>
|
||
<td>{{ displayText(member.phone) }}</td>
|
||
<td>{{ displayText(member.email) }}</td>
|
||
<td><div v-if="member.roleNames?.length" class="role-list"><el-tag v-for="role in member.roleNames" :key="role" size="small" effect="plain">{{ role }}</el-tag></div><span v-else>—</span></td>
|
||
<td><el-tag :type="member.status === 'ACTIVE' ? 'success' : 'info'" effect="light" size="small">{{ member.status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></td>
|
||
</tr></tbody>
|
||
</table>
|
||
</div>
|
||
<div v-else class="section-empty"><UsersRound :size="22" /><strong>暂无企业用户</strong><span>当前客户尚未创建企业成员账号</span></div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<section v-else-if="activeTab === 'logs'" class="detail-panel module-panel"><CustomerAuditLogsPanel :customer-id="tenantId" :customer-name="customer.tenantName" /></section>
|
||
<section v-else class="detail-panel module-panel"><CustomerBillingRulesPanel :customer-id="tenantId" :customer-name="customer.tenantName" :customer-code="customer.tenantCode" :dimension-initialization-status="customer.dimensionInitializationStatus" /><CustomerOverseasStorageFeePanel :customer-id="tenantId" :customer-name="customer.tenantName" /></section>
|
||
</div>
|
||
</DetailPageLayout>
|
||
|
||
<AppDialog v-model="previewOpen" :title="previewName" width="min(920px, calc(100vw - 28px))" append-to-body :show-footer="false">
|
||
<div class="qualification-preview"><img v-if="previewKind === 'image'" :src="previewUrl" :alt="`${previewName}预览`" /><iframe v-else :src="previewUrl" :title="`${previewName}预览`" /></div>
|
||
</AppDialog>
|
||
</AdminPage>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.customer-detail-page { min-width: 0; }
|
||
.detail-header { display:flex; min-width:0; align-items:center; gap:12px; }
|
||
.back-button { flex:0 0 auto; }
|
||
.company-mark { display:grid; width:44px; height:44px; flex:0 0 auto; place-items:center; border-radius:12px; background:linear-gradient(135deg,rgba(102,126,234,.18),rgba(240,147,251,.18)); color:#667eea; box-shadow:0 4px 12px rgba(102,126,234,.16); }
|
||
.detail-page-toolbar { min-width:0; flex:1; }
|
||
.header-actions { display:flex; flex:0 0 auto; gap:8px; }
|
||
.header-actions :deep(.el-button + .el-button) { margin-left:0; }
|
||
.detail-tabs { display:flex; gap:0; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid rgba(228,228,231,.5); border-radius:20px 20px 0 0; background:rgba(255,255,255,.95); box-shadow:0 -4px 16px rgba(0,0,0,.04); scrollbar-width:thin; }
|
||
.detail-tabs button { display:inline-flex; min-width:max-content; min-height:0; flex:0 0 auto; align-items:center; justify-content:center; gap:8px; padding:16px 28px; border:0; border-bottom:3px solid transparent; background:transparent; color:#71717a; font-size:15px; font-weight:600; white-space:nowrap; cursor:pointer; transition:all .3s cubic-bezier(.4,0,.2,1); }
|
||
.detail-tab-icon { font-size:18px; line-height:1; }
|
||
.detail-tabs button:hover { background:rgba(102,126,234,.05); color:#667eea; }
|
||
.detail-tabs button.active { border-bottom-color:#667eea; background:rgba(102,126,234,.08); color:#667eea; font-weight:800; }
|
||
.tab-panel { min-height:400px; padding-top:18px; }
|
||
.basic-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:18px; align-items:start; }
|
||
.detail-panel { min-width:0; padding:22px; border:1px solid rgba(255,255,255,.5); border-radius:12px; background:rgba(255,255,255,.95); box-shadow:0 3px 12px rgba(15,23,42,.05); }
|
||
.contact-panel,.user-panel { grid-column:1 / -1; }
|
||
.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--cc-border); }
|
||
.panel-title h2 { margin:0; color:#344054; font-size:16px; }.panel-title p { margin:5px 0 0; color:var(--cc-muted); font-size:11px; }.panel-title > svg { color:var(--cc-primary); }
|
||
.info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
|
||
.info-grid > div { min-width:0; padding:12px 14px; border-radius:10px; background:#f8f9fc; }.info-grid > div.wide { grid-column:1 / -1; }
|
||
.info-grid dt { margin-bottom:5px; color:var(--cc-muted); font-size:11px; }.info-grid dd { margin:0; color:#25324a; font-size:13px; font-weight:650; line-height:1.55; overflow-wrap:anywhere; }
|
||
.qualification-list { display:flex; flex-direction:column; gap:8px; }
|
||
.qualification-list button { display:grid; width:100%; grid-template-columns:38px minmax(0,1fr) auto auto 20px; align-items:center; gap:10px; padding:10px; border:1px solid var(--cc-border); border-radius:10px; background:#fff; color:inherit; text-align:left; cursor:pointer; }
|
||
.qualification-list button:hover { border-color:#b9c3f5; background:#fafbff; }.qualification-list button:disabled { cursor:wait; opacity:.65; }
|
||
.file-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:9px; background:linear-gradient(135deg,rgba(102,126,234,.15),rgba(118,75,162,.1)); color:#667eea; }
|
||
.qualification-list strong,.qualification-list small { display:block; }.qualification-list strong { font-size:12px; }.qualification-list small,.file-date { margin-top:3px; color:var(--cc-muted); font-size:10px; }.file-date { margin:0; white-space:nowrap; }
|
||
.section-empty,.module-empty { display:flex; min-height:150px; align-items:center; justify-content:center; flex-direction:column; gap:7px; color:#98a2b3; text-align:center; }
|
||
.section-empty strong,.module-empty strong { color:#475467; font-size:13px; }.section-empty span,.module-empty p { max-width:600px; margin:0; color:var(--cc-muted); font-size:11px; line-height:1.7; }
|
||
.section-empty button { border:0; background:transparent; color:var(--cc-primary); cursor:pointer; }.section-empty.is-error svg { color:#d92d20; }
|
||
.user-table-wrap { overflow-x:auto; }
|
||
table { width:100%; min-width:720px; border-collapse:collapse; font-size:12px; }th { padding:10px 12px; background:#f8fafc; color:#667085; text-align:left; font-weight:650; }td { padding:12px; border-top:1px solid #edf0f4; color:#344054; }
|
||
.user-identity { display:flex; align-items:center; gap:9px; }.user-identity > span { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:50%; background:#eef1ff; color:var(--cc-primary); font-weight:700; }.user-identity strong,.user-identity small { display:block; }.user-identity small { margin-top:3px; color:var(--cc-muted); font-size:10px; }.role-list { display:flex; flex-wrap:wrap; gap:5px; }
|
||
.member-contact span,.member-contact small { display:block; }.member-contact small { margin-top:3px; color:var(--cc-muted); font-size:10px; }
|
||
.module-panel { min-height:360px; }.module-empty { min-height:260px; }.module-empty > svg { color:#8797b2; }.module-empty p { max-width:520px; font-size:12px; }
|
||
.contract-note { padding:16px 18px; border-radius:10px; background:#f8fafc; }.contract-note strong { color:#344054; font-size:12px; }.contract-note p { margin:5px 0 0; color:var(--cc-muted); font-size:11px; line-height:1.7; }
|
||
.qualification-preview { display:grid; min-height:320px; max-height:72vh; overflow:auto; place-items:center; border-radius:10px; background:#f8fafc; }.qualification-preview img { display:block; max-width:100%; height:auto; }.qualification-preview iframe { width:100%; min-height:68vh; border:0; background:#fff; }
|
||
@media (max-width:960px) { .basic-layout { grid-template-columns:1fr; }.contact-panel,.user-panel { grid-column:auto; }.qualification-panel { order:3; }.user-panel { order:4; } }
|
||
@media (max-width:720px) { .detail-header { align-items:flex-start; flex-wrap:wrap; }.detail-page-toolbar { width:100%; flex-basis:100%; }.company-mark { width:40px; height:40px; }.header-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }.header-actions :deep(.el-tag) { grid-column:1 / -1; justify-self:start; }.header-actions :deep(.el-button) { min-height:44px; }.detail-panel { padding:16px; }.info-grid { grid-template-columns:1fr; }.info-grid > div.wide { grid-column:auto; } }
|
||
@media (max-width:420px) { .company-mark { display:none; }.header-actions { grid-template-columns:1fr; }.header-actions :deep(.el-tag) { grid-column:auto; }.qualification-list button { grid-template-columns:36px minmax(0,1fr) auto; }.qualification-list .file-date,.qualification-list button > svg { display:none; } }
|
||
</style>
|