admin后台 第一阶段目录优化
This commit is contained in:
yml2213
@@ -0,0 +1,244 @@
|
||||
@import '../../../styles/admin-config-pages.css';
|
||||
|
||||
/* ============================================================
|
||||
AdminFulfillmentBindings — 绿色主题覆盖 & 页面特有样式
|
||||
============================================================ */
|
||||
|
||||
.admin-panel {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ---------- 主题：标题文字 ---------- */
|
||||
.panel-header h1,
|
||||
.panel-header-copy h1,
|
||||
.section-title-row h3 {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.panel-header p,
|
||||
.panel-header-copy p,
|
||||
.section-title-row p {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ---------- 主题：标签 chip (绿色) ---------- */
|
||||
.header-tag,
|
||||
.section-note-chip,
|
||||
.mini-stat-chip,
|
||||
.summary-label,
|
||||
.overview-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
border: 1px solid rgba(37, 89, 167, 0.12);
|
||||
color: var(--color-primary-dark);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ---------- 主题：概览标签 ---------- */
|
||||
.overview-note {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(15, 23, 42, 0.04);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：header-actions 间距 ---------- */
|
||||
.header-actions {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：卡片圆角 ---------- */
|
||||
.overview-card,
|
||||
.table-card,
|
||||
.empty-block,
|
||||
.error-copy {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.overview-file code {
|
||||
background: rgba(15, 23, 42, 0.05);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：概览统计 ---------- */
|
||||
.overview-stat {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.overview-stat span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.overview-stat strong {
|
||||
color: var(--text-primary);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* ---------- 查询工具栏 (本页特有) ---------- */
|
||||
.lookup-toolbar,
|
||||
.lookup-summary {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.lookup-toolbar {
|
||||
grid-template-columns: 96px 110px minmax(140px, 1fr) minmax(180px, 1.2fr) 136px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.lookup-summary {
|
||||
margin-top: 14px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.lookup-summary-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.lookup-summary-item strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：字段块 ---------- */
|
||||
.field-block span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.field-help {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.field-wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：文本输入 ---------- */
|
||||
.text-input {
|
||||
min-height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(86, 108, 138, 0.18);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.text-input--invalid {
|
||||
border-color: rgba(220, 38, 38, 0.45);
|
||||
background: #fff8f8;
|
||||
}
|
||||
|
||||
.text-input--invalid:focus {
|
||||
outline: none;
|
||||
border-color: rgba(220, 38, 38, 0.6);
|
||||
box-shadow: 0 0 0 3px rgba(254, 226, 226, 0.95);
|
||||
}
|
||||
|
||||
.text-input--readonly {
|
||||
color: var(--text-secondary);
|
||||
background: rgba(148, 163, 184, 0.08);
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：校验/错误/空状态 ---------- */
|
||||
.validation-banner {
|
||||
background: #fff4f2;
|
||||
border: 1px solid rgba(244, 63, 94, 0.18);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.binding-inline-error {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.empty-block,
|
||||
.empty-inline {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：表格 ---------- */
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 12px 10px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.cell-subtle {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：绑定卡片 ---------- */
|
||||
.binding-card {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.binding-title-row {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.binding-subtle {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.binding-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 12px;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：折叠/操作/复选框 ---------- */
|
||||
.binding-collapsed-preview {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.checkbox-line {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.toolbar-hint {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ==============================================
|
||||
响应式
|
||||
============================================== */
|
||||
@media (max-width: 900px) {
|
||||
.panel-header,
|
||||
.section-title-row,
|
||||
.section-header-tools,
|
||||
.binding-actions,
|
||||
.binding-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.overview-stats,
|
||||
.lookup-toolbar,
|
||||
.lookup-summary,
|
||||
.binding-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,905 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
|
||||
|
||||
import { showSuccess } from '@/lib/feedback'
|
||||
import {
|
||||
fetchAdminFulfillmentBindingConfigs,
|
||||
lookupAdminFulfillmentBindingOrder,
|
||||
saveAdminFulfillmentBindingConfigs,
|
||||
} from '@/services/admin'
|
||||
import type {
|
||||
AdminFulfillmentBindingConfigItem,
|
||||
AdminFulfillmentLookupItem,
|
||||
AdminFulfillmentLookupResult,
|
||||
AdminObservedProductItem,
|
||||
} from '@/types/admin'
|
||||
import { hasAdminRole } from '@/utils/admin-auth'
|
||||
import { formatAdminDateTime } from '@/utils/admin-time'
|
||||
|
||||
type EditableBinding = {
|
||||
id: string
|
||||
provider: string
|
||||
platform: string
|
||||
shopId: string
|
||||
shopName: string
|
||||
skuCode: string
|
||||
skuName: string
|
||||
profileKey: string
|
||||
enabled: boolean
|
||||
priority: number
|
||||
externalSkuCode: string
|
||||
externalItemId: string
|
||||
externalSkuName: string
|
||||
resolvedSkuName: string
|
||||
}
|
||||
|
||||
type SaveBindingPayload = {
|
||||
provider: string
|
||||
platform: string
|
||||
shopId: string
|
||||
shopName: string
|
||||
skuCode: string
|
||||
skuName: string
|
||||
profileKey: string
|
||||
enabled: boolean
|
||||
priority: number
|
||||
match: {
|
||||
externalSkuCode: string
|
||||
externalItemId: string
|
||||
externalSkuName: string
|
||||
config: {
|
||||
resolvedSkuName: string
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
type ValidationField = 'skuCode' | 'match' | 'profileKey' | 'shopId'
|
||||
|
||||
type ValidationState = {
|
||||
bindingId: string
|
||||
field: ValidationField
|
||||
message: string
|
||||
} | null
|
||||
|
||||
const PROFILE_OPTIONS = [
|
||||
{ label: '腾讯领取兑换', value: 'tencent_claim_redeem' },
|
||||
{ label: '腾讯领取兑换（半自动+人工）', value: 'tencent_claim_assisted' },
|
||||
{ label: '快手 Cloud 履约', value: 'kuaishou_ct_assisted' },
|
||||
{ label: '人工发货', value: 'manual_review' },
|
||||
]
|
||||
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const filePath = ref('')
|
||||
const bindings = ref<EditableBinding[]>([])
|
||||
const observedProducts = ref<AdminObservedProductItem[]>([])
|
||||
const lookupLoading = ref(false)
|
||||
const lookupErrorMessage = ref('')
|
||||
const lookupResult = ref<AdminFulfillmentLookupResult | null>(null)
|
||||
const importedLookupLineIds = ref<string[]>([])
|
||||
const VALID_PROFILE_KEYS = new Set(PROFILE_OPTIONS.map((item) => item.value))
|
||||
const validationState = ref<ValidationState>(null)
|
||||
const collapsedBindingIds = ref<string[]>([])
|
||||
const lookupForm = reactive({
|
||||
shopId: '',
|
||||
platformOrderId: '',
|
||||
})
|
||||
|
||||
const ruleMetrics = computed(() => {
|
||||
const completedCount = bindings.value.filter(isEditableBindingComplete).length
|
||||
const manualCount = bindings.value.filter((item) => item.profileKey.trim() === 'manual_review').length
|
||||
const assistedCount = bindings.value.filter((item) => item.profileKey.trim() === 'tencent_claim_assisted').length
|
||||
const kuaishouCloudCount = bindings.value.filter((item) => item.profileKey.trim() === 'kuaishou_ct_assisted').length
|
||||
|
||||
return {
|
||||
totalCount: bindings.value.length,
|
||||
completedCount,
|
||||
draftCount: Math.max(bindings.value.length - completedCount, 0),
|
||||
manualCount,
|
||||
assistedCount,
|
||||
kuaishouCloudCount,
|
||||
}
|
||||
})
|
||||
|
||||
const pendingObservedCount = computed(() => observedProducts.value.filter((item) => !item.configured).length)
|
||||
|
||||
type ImportableProductCandidate = Pick<
|
||||
AdminObservedProductItem,
|
||||
'provider' | 'platform' | 'shopId' | 'shopName' | 'externalSkuCode' | 'externalItemId' | 'externalSkuName'
|
||||
> & {
|
||||
}
|
||||
|
||||
function createEmptyBinding(): EditableBinding {
|
||||
return {
|
||||
id: crypto.randomUUID(),
|
||||
provider: 'agiso',
|
||||
platform: '',
|
||||
shopId: '',
|
||||
shopName: '',
|
||||
skuCode: '',
|
||||
skuName: '',
|
||||
profileKey: 'manual_review',
|
||||
enabled: true,
|
||||
priority: 100,
|
||||
externalSkuCode: '',
|
||||
externalItemId: '',
|
||||
externalSkuName: '',
|
||||
resolvedSkuName: '',
|
||||
}
|
||||
}
|
||||
|
||||
function mapEditableBinding(item: AdminFulfillmentBindingConfigItem): EditableBinding {
|
||||
return {
|
||||
id: crypto.randomUUID(),
|
||||
provider: item.provider || 'agiso',
|
||||
platform: item.platform,
|
||||
shopId: item.shopId,
|
||||
shopName: item.shopName || '',
|
||||
skuCode: item.skuCode,
|
||||
skuName: item.skuName,
|
||||
profileKey: item.profileKey || 'manual_review',
|
||||
enabled: item.enabled !== false,
|
||||
priority: item.priority || 100,
|
||||
externalSkuCode: item.match.externalSkuCode,
|
||||
externalItemId: item.match.externalItemId,
|
||||
externalSkuName: item.match.externalSkuName,
|
||||
resolvedSkuName: String(item.match.config?.resolvedSkuName || ''),
|
||||
}
|
||||
}
|
||||
|
||||
function hasMatchCondition(item: Pick<EditableBinding, 'externalSkuCode' | 'externalItemId' | 'externalSkuName'>) {
|
||||
return Boolean(item.externalSkuCode.trim() || item.externalItemId.trim() || item.externalSkuName.trim())
|
||||
}
|
||||
|
||||
function isEditableBindingComplete(item: EditableBinding) {
|
||||
return Boolean(item.skuCode.trim() && hasMatchCondition(item) && VALID_PROFILE_KEYS.has(item.profileKey.trim() || 'manual_review'))
|
||||
}
|
||||
|
||||
function buildCollapsedIds(items: EditableBinding[]) {
|
||||
return items.filter(isEditableBindingComplete).map((item) => item.id)
|
||||
}
|
||||
|
||||
function isBindingCollapsed(bindingId: string) {
|
||||
return collapsedBindingIds.value.includes(bindingId)
|
||||
}
|
||||
|
||||
function setBindingCollapsed(bindingId: string, collapsed: boolean) {
|
||||
const next = new Set(collapsedBindingIds.value)
|
||||
|
||||
if (collapsed) {
|
||||
next.add(bindingId)
|
||||
} else {
|
||||
next.delete(bindingId)
|
||||
}
|
||||
|
||||
collapsedBindingIds.value = Array.from(next)
|
||||
}
|
||||
|
||||
function toggleBindingCollapsed(bindingId: string) {
|
||||
setBindingCollapsed(bindingId, !isBindingCollapsed(bindingId))
|
||||
}
|
||||
|
||||
function getBindingTitle(binding: EditableBinding, index: number) {
|
||||
const internalName = binding.skuName.trim()
|
||||
const externalName = binding.externalSkuName.trim()
|
||||
const skuCode = binding.skuCode.trim()
|
||||
|
||||
return internalName || externalName || skuCode || `规则 ${index + 1}`
|
||||
}
|
||||
|
||||
function getBindingStatusLabel(binding: EditableBinding) {
|
||||
return isEditableBindingComplete(binding) ? '已完成' : '待完善'
|
||||
}
|
||||
|
||||
function getBindingSummary(binding: EditableBinding) {
|
||||
const parts = [
|
||||
binding.provider.trim() || 'agiso',
|
||||
binding.platform.trim() || '未选平台',
|
||||
binding.shopName.trim() || binding.shopId.trim() || '跨店铺',
|
||||
binding.profileKey.trim() || 'manual_review',
|
||||
]
|
||||
|
||||
return parts.join(' / ')
|
||||
}
|
||||
|
||||
async function loadConfigs() {
|
||||
if (!hasAdminRole('admin')) {
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
const response = await fetchAdminFulfillmentBindingConfigs()
|
||||
filePath.value = response.data.filePath
|
||||
const nextBindings = response.data.bindings.map(mapEditableBinding)
|
||||
bindings.value = nextBindings
|
||||
collapsedBindingIds.value = buildCollapsedIds(nextBindings)
|
||||
observedProducts.value = response.data.observedProducts
|
||||
} catch (error) {
|
||||
errorMessage.value = error instanceof Error ? error.message : '读取履约配置失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function addBinding() {
|
||||
validationState.value = null
|
||||
const next = createEmptyBinding()
|
||||
setBindingCollapsed(next.id, false)
|
||||
bindings.value.unshift(next)
|
||||
}
|
||||
|
||||
function removeBinding(id: string) {
|
||||
if (validationState.value?.bindingId === id) {
|
||||
validationState.value = null
|
||||
}
|
||||
setBindingCollapsed(id, false)
|
||||
bindings.value = bindings.value.filter((item) => item.id !== id)
|
||||
}
|
||||
|
||||
function createBindingFromProductCandidate(item: ImportableProductCandidate): EditableBinding {
|
||||
const binding = {
|
||||
id: crypto.randomUUID(),
|
||||
provider: item.provider || 'agiso',
|
||||
platform: item.platform,
|
||||
shopId: item.shopId,
|
||||
shopName: item.shopName,
|
||||
skuCode: '',
|
||||
skuName: item.externalSkuName,
|
||||
profileKey: 'manual_review',
|
||||
enabled: true,
|
||||
priority: 100,
|
||||
externalSkuCode: item.externalSkuCode,
|
||||
externalItemId: item.externalItemId,
|
||||
externalSkuName: item.externalSkuName,
|
||||
resolvedSkuName: item.externalSkuName,
|
||||
}
|
||||
|
||||
return binding
|
||||
}
|
||||
|
||||
function importObservedProduct(item: ImportableProductCandidate) {
|
||||
validationState.value = null
|
||||
const nextBinding = createBindingFromProductCandidate(item)
|
||||
setBindingCollapsed(nextBinding.id, false)
|
||||
bindings.value.unshift(nextBinding)
|
||||
}
|
||||
|
||||
function importLookupProduct(item: AdminFulfillmentLookupItem) {
|
||||
importObservedProduct(item)
|
||||
if (!importedLookupLineIds.value.includes(item.lineId)) {
|
||||
importedLookupLineIds.value = [...importedLookupLineIds.value, item.lineId]
|
||||
}
|
||||
}
|
||||
|
||||
function isLookupProductImported(lineId: string) {
|
||||
return importedLookupLineIds.value.includes(lineId)
|
||||
}
|
||||
|
||||
function normalizeBindingForSave(item: EditableBinding): SaveBindingPayload {
|
||||
return {
|
||||
provider: item.provider.trim() || 'agiso',
|
||||
platform: item.platform.trim(),
|
||||
shopId: item.shopId.trim(),
|
||||
shopName: item.shopName.trim(),
|
||||
skuCode: item.skuCode.trim(),
|
||||
skuName: item.skuName.trim(),
|
||||
profileKey: item.profileKey.trim() || 'manual_review',
|
||||
enabled: item.enabled,
|
||||
priority: Number(item.priority || 100),
|
||||
match: {
|
||||
externalSkuCode: item.externalSkuCode.trim(),
|
||||
externalItemId: item.externalItemId.trim(),
|
||||
externalSkuName: item.externalSkuName.trim(),
|
||||
config: {
|
||||
resolvedSkuName: item.resolvedSkuName.trim(),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function hasBindingContent(item: SaveBindingPayload) {
|
||||
return Boolean(
|
||||
item.platform
|
||||
|| item.shopId
|
||||
|| item.shopName
|
||||
|| item.skuCode
|
||||
|| item.skuName
|
||||
|| item.match.externalSkuCode
|
||||
|| item.match.externalItemId
|
||||
|| item.match.externalSkuName
|
||||
|| item.match.config.resolvedSkuName
|
||||
|| item.provider !== 'agiso'
|
||||
|| item.profileKey !== 'manual_review'
|
||||
|| item.priority !== 100
|
||||
|| item.enabled !== true,
|
||||
)
|
||||
}
|
||||
|
||||
function resolveBindingValidationState(item: SaveBindingPayload, index: number, bindingId: string): ValidationState {
|
||||
const label = `第 ${index + 1} 条规则`
|
||||
|
||||
if (!item.skuCode) {
|
||||
return {
|
||||
bindingId,
|
||||
field: 'skuCode',
|
||||
message: `${label} 还没填写“内部履约 SKU”`,
|
||||
}
|
||||
}
|
||||
|
||||
if (!item.match.externalSkuCode && !item.match.externalItemId && !item.match.externalSkuName) {
|
||||
return {
|
||||
bindingId,
|
||||
field: 'match',
|
||||
message: `${label} 至少填写一种外部匹配条件`,
|
||||
}
|
||||
}
|
||||
|
||||
if (!VALID_PROFILE_KEYS.has(item.profileKey)) {
|
||||
return {
|
||||
bindingId,
|
||||
field: 'profileKey',
|
||||
message: `${label} 的履约方式无效`,
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
async function focusValidationTarget(state: ValidationState) {
|
||||
if (!state?.bindingId) {
|
||||
return
|
||||
}
|
||||
|
||||
setBindingCollapsed(state.bindingId, false)
|
||||
await nextTick()
|
||||
|
||||
const card = document.querySelector<HTMLElement>(`[data-binding-id="${state.bindingId}"]`)
|
||||
if (!card) {
|
||||
return
|
||||
}
|
||||
|
||||
card.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
|
||||
const selectors: Record<ValidationField, string> = {
|
||||
shopId: '[data-field="shopId"]',
|
||||
skuCode: '[data-field="skuCode"]',
|
||||
match: '[data-field="externalSkuCode"]',
|
||||
profileKey: '[data-field="profileKey"]',
|
||||
}
|
||||
|
||||
const target = card.querySelector<HTMLInputElement | HTMLSelectElement>(selectors[state.field])
|
||||
target?.focus()
|
||||
}
|
||||
|
||||
function clearValidationState() {
|
||||
validationState.value = null
|
||||
}
|
||||
|
||||
function isBindingInvalid(bindingId: string) {
|
||||
return validationState.value?.bindingId === bindingId
|
||||
}
|
||||
|
||||
function isFieldInvalid(bindingId: string, field: ValidationField | 'externalSkuCode' | 'externalItemId' | 'externalSkuName') {
|
||||
if (validationState.value?.bindingId !== bindingId) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (validationState.value.field === 'match') {
|
||||
return ['externalSkuCode', 'externalItemId', 'externalSkuName'].includes(field)
|
||||
}
|
||||
|
||||
return validationState.value.field === field
|
||||
}
|
||||
|
||||
async function saveConfigs() {
|
||||
const normalizedBindings = bindings.value.map(normalizeBindingForSave)
|
||||
const nonEmptyBindings = normalizedBindings.filter(hasBindingContent)
|
||||
const invalidState = normalizedBindings.reduce<ValidationState>((state, item, index) => {
|
||||
if (state || !hasBindingContent(item)) {
|
||||
return state
|
||||
}
|
||||
|
||||
return resolveBindingValidationState(item, index, bindings.value[index]?.id || '')
|
||||
}, null)
|
||||
|
||||
if (invalidState) {
|
||||
validationState.value = invalidState
|
||||
await focusValidationTarget(invalidState)
|
||||
return
|
||||
}
|
||||
|
||||
if (bindings.value.length > 0 && nonEmptyBindings.length === 0) {
|
||||
validationState.value = {
|
||||
bindingId: '',
|
||||
field: 'skuCode',
|
||||
message: '当前没有可保存的规则，请至少填写内部履约 SKU 和外部匹配条件',
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const payload = nonEmptyBindings
|
||||
|
||||
saving.value = true
|
||||
validationState.value = null
|
||||
|
||||
try {
|
||||
const response = await saveAdminFulfillmentBindingConfigs({ bindings: payload })
|
||||
filePath.value = response.data.filePath
|
||||
bindings.value = response.data.bindings.map(mapEditableBinding)
|
||||
showSuccess('履约配置已保存')
|
||||
await loadConfigs()
|
||||
} catch (error) {
|
||||
validationState.value = {
|
||||
bindingId: '',
|
||||
field: 'skuCode',
|
||||
message: error instanceof Error ? error.message : '保存履约配置失败',
|
||||
}
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function lookupOrderProducts() {
|
||||
const shopId = lookupForm.shopId.trim()
|
||||
const platformOrderId = lookupForm.platformOrderId.trim()
|
||||
|
||||
if (!shopId || !platformOrderId) {
|
||||
lookupErrorMessage.value = '请先填写店铺 ID 和平台订单号'
|
||||
return
|
||||
}
|
||||
|
||||
lookupLoading.value = true
|
||||
lookupErrorMessage.value = ''
|
||||
|
||||
try {
|
||||
const response = await lookupAdminFulfillmentBindingOrder({
|
||||
provider: 'agiso',
|
||||
platform: 'xianyu',
|
||||
shopId,
|
||||
platformOrderId,
|
||||
})
|
||||
lookupResult.value = response.data
|
||||
importedLookupLineIds.value = []
|
||||
} catch (error) {
|
||||
lookupResult.value = null
|
||||
lookupErrorMessage.value = error instanceof Error ? error.message : '订单商品查询失败'
|
||||
} finally {
|
||||
lookupLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadConfigs)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-panel">
|
||||
<header class="panel-header">
|
||||
<div class="panel-header-copy">
|
||||
<h1>履约配置</h1>
|
||||
<p>把外部商品统一映射到内部履约 SKU，并指定最终走腾讯领取、快手 Cloud 或人工处理。</p>
|
||||
</div>
|
||||
<div class="header-tags">
|
||||
<span class="header-tag">外部条件命中 1 个即可</span>
|
||||
<span class="header-tag">同类商品尽量复用同一内部 SKU</span>
|
||||
<span class="header-tag">保存后立即生效</span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button round @click="loadConfigs">刷新</el-button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以维护履约配置。</div>
|
||||
|
||||
<template v-else>
|
||||
<section class="overview-card">
|
||||
<div class="overview-file">
|
||||
<span class="overview-label">配置文件</span>
|
||||
<code>{{ filePath || '-' }}</code>
|
||||
</div>
|
||||
|
||||
<div class="overview-stats">
|
||||
<article class="overview-stat">
|
||||
<span>规则总数</span>
|
||||
<strong>{{ ruleMetrics.totalCount }}</strong>
|
||||
</article>
|
||||
<article class="overview-stat">
|
||||
<span>完整规则</span>
|
||||
<strong>{{ ruleMetrics.completedCount }}</strong>
|
||||
</article>
|
||||
<article class="overview-stat">
|
||||
<span>待完善</span>
|
||||
<strong>{{ ruleMetrics.draftCount }}</strong>
|
||||
</article>
|
||||
<article class="overview-stat">
|
||||
<span>待补商品</span>
|
||||
<strong>{{ pendingObservedCount }}</strong>
|
||||
</article>
|
||||
<article class="overview-stat">
|
||||
<span>已识别商品</span>
|
||||
<strong>{{ observedProducts.length }}</strong>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="overview-notes">
|
||||
<span class="overview-note">外部 SKU / 商品 ID / 商品名命中任一即可</span>
|
||||
<span class="overview-note">内部 SKU 决定库存绑定与履约链路</span>
|
||||
<span class="overview-note">同类商品跨平台尽量共用同一内部 SKU</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||||
<div v-if="loading" class="empty-block">履约配置加载中</div>
|
||||
|
||||
<template v-else>
|
||||
<section class="table-card table-card--dense">
|
||||
<div class="section-title-row section-title-row--tight">
|
||||
<div>
|
||||
<h3>已配置规则</h3>
|
||||
<p>正式规则集中维护在这里，新补查到的商品也会导入到这个区域继续补全。</p>
|
||||
</div>
|
||||
<div class="section-header-tools">
|
||||
<div class="section-mini-stats">
|
||||
<span class="mini-stat-chip">完整 {{ ruleMetrics.completedCount }}</span>
|
||||
<span class="mini-stat-chip">待完善 {{ ruleMetrics.draftCount }}</span>
|
||||
<span class="mini-stat-chip">人工 {{ ruleMetrics.manualCount }}</span>
|
||||
<span class="mini-stat-chip">半自动 {{ ruleMetrics.assistedCount }}</span>
|
||||
<span class="mini-stat-chip">快手 Cloud {{ ruleMetrics.kuaishouCloudCount }}</span>
|
||||
</div>
|
||||
<div class="section-action-group">
|
||||
<el-button round @click="addBinding">新增规则</el-button>
|
||||
<el-button :loading="saving" round type="primary" @click="saveConfigs">保存配置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="validationState?.message" class="validation-banner">{{ validationState.message }}</p>
|
||||
|
||||
<div v-if="bindings.length === 0" class="empty-inline">当前还没有履约规则，先新增一条。</div>
|
||||
|
||||
<div
|
||||
v-for="(binding, index) in bindings"
|
||||
:key="binding.id"
|
||||
:data-binding-id="binding.id"
|
||||
:class="['binding-card', { 'binding-card--invalid': isBindingInvalid(binding.id) }]"
|
||||
>
|
||||
<div class="binding-header">
|
||||
<div class="binding-summary">
|
||||
<div class="binding-title-row">
|
||||
<strong>{{ getBindingTitle(binding, index) }}</strong>
|
||||
<span :class="['binding-status-chip', { 'binding-status-chip--done': isEditableBindingComplete(binding) }]">
|
||||
{{ getBindingStatusLabel(binding) }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="binding-subtle">{{ getBindingSummary(binding) }}</span>
|
||||
</div>
|
||||
<button class="collapse-button" type="button" @click="toggleBindingCollapsed(binding.id)">
|
||||
{{ isBindingCollapsed(binding.id) ? '展开' : '折叠' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="isBindingCollapsed(binding.id)" class="binding-collapsed-preview">
|
||||
<span>外部商品：{{ binding.externalSkuName || binding.externalSkuCode || binding.externalItemId || '-' }}</span>
|
||||
<span>内部履约 SKU：{{ binding.skuCode || '-' }}</span>
|
||||
<span>履约方式：{{ PROFILE_OPTIONS.find((item) => item.value === binding.profileKey)?.label || binding.profileKey }}</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="binding-grid">
|
||||
<label class="field-block">
|
||||
<span>渠道</span>
|
||||
<input
|
||||
v-model="binding.provider"
|
||||
class="text-input"
|
||||
placeholder="agiso"
|
||||
@input="clearValidationState"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>平台</span>
|
||||
<input
|
||||
v-model="binding.platform"
|
||||
class="text-input"
|
||||
placeholder="xianyu / taobao / pdd"
|
||||
@input="clearValidationState"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>店铺 ID</span>
|
||||
<input
|
||||
v-model="binding.shopId"
|
||||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'shopId') }]"
|
||||
data-field="shopId"
|
||||
placeholder="留空表示跨店铺通用"
|
||||
@input="clearValidationState"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>店铺名称</span>
|
||||
<input
|
||||
v-model="binding.shopName"
|
||||
class="text-input"
|
||||
placeholder="用于保存和识别店铺"
|
||||
@input="clearValidationState"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>优先级</span>
|
||||
<input v-model.number="binding.priority" class="text-input" type="number" min="1" @input="clearValidationState" />
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>外部 SKU 编码</span>
|
||||
<input
|
||||
v-model="binding.externalSkuCode"
|
||||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'externalSkuCode') }]"
|
||||
data-field="externalSkuCode"
|
||||
placeholder="例如 6046726460016"
|
||||
@input="clearValidationState"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>外部商品 ID</span>
|
||||
<input
|
||||
v-model="binding.externalItemId"
|
||||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'externalItemId') }]"
|
||||
data-field="externalItemId"
|
||||
placeholder="例如 1033324289962"
|
||||
@input="clearValidationState"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field-block field-wide">
|
||||
<span>外部商品名</span>
|
||||
<input
|
||||
v-model="binding.externalSkuName"
|
||||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'externalSkuName') }]"
|
||||
data-field="externalSkuName"
|
||||
placeholder="例如 奥利奥动作"
|
||||
@input="clearValidationState"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>内部履约 SKU</span>
|
||||
<input
|
||||
v-model="binding.skuCode"
|
||||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'skuCode') }]"
|
||||
data-field="skuCode"
|
||||
placeholder="例如 sjz_hdl_test01"
|
||||
@input="clearValidationState"
|
||||
/>
|
||||
<small class="field-help">填你们系统内部统一 SKU。相同履约商品，尽量跨平台共用同一个内部 SKU。</small>
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>内部商品名</span>
|
||||
<input v-model="binding.skuName" class="text-input" placeholder="用于后台展示" @input="clearValidationState" />
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>履约方式</span>
|
||||
<select
|
||||
v-model="binding.profileKey"
|
||||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'profileKey') }]"
|
||||
data-field="profileKey"
|
||||
@change="clearValidationState"
|
||||
>
|
||||
<option v-for="item in PROFILE_OPTIONS" :key="item.value" :value="item.value">
|
||||
{{ item.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>匹配后展示名</span>
|
||||
<input
|
||||
v-model="binding.resolvedSkuName"
|
||||
class="text-input"
|
||||
placeholder="例如 三角洲行动-自动领取"
|
||||
@input="clearValidationState"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p v-if="isBindingInvalid(binding.id)" class="binding-inline-error">{{ validationState?.message }}</p>
|
||||
|
||||
<div class="binding-actions">
|
||||
<label class="checkbox-line">
|
||||
<input v-model="binding.enabled" type="checkbox" />
|
||||
<span>启用规则</span>
|
||||
</label>
|
||||
<el-button link type="danger" @click="removeBinding(binding.id)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="table-card table-card--dense">
|
||||
<div class="section-title-row section-title-row--tight">
|
||||
<div>
|
||||
<h3>手动补查订单商品</h3>
|
||||
<p>新商品还没配规则时，可以按店铺 ID 和平台订单号临时补查，查完直接导入规则草稿。</p>
|
||||
</div>
|
||||
<span class="section-note-chip">仅支持 Agiso 咸鱼订单</span>
|
||||
</div>
|
||||
|
||||
<div class="lookup-toolbar">
|
||||
<label class="field-block">
|
||||
<span>渠道</span>
|
||||
<input class="text-input" value="agiso" disabled />
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>平台</span>
|
||||
<input class="text-input" value="xianyu" disabled />
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>店铺 ID</span>
|
||||
<input
|
||||
v-model="lookupForm.shopId"
|
||||
class="text-input"
|
||||
placeholder="例如 252609"
|
||||
@keydown.enter.prevent="lookupOrderProducts"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field-block">
|
||||
<span>平台订单号</span>
|
||||
<input
|
||||
v-model="lookupForm.platformOrderId"
|
||||
class="text-input"
|
||||
placeholder="输入需要补查的订单号"
|
||||
@keydown.enter.prevent="lookupOrderProducts"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="field-block field-block--action">
|
||||
<span>操作</span>
|
||||
<el-button :loading="lookupLoading" round type="primary" @click="lookupOrderProducts">查询订单商品</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="toolbar-hint">查询结果只用于补配置，不会写入订单库，也不会影响现有订单数据。</p>
|
||||
|
||||
<p v-if="lookupErrorMessage" class="error-copy lookup-error">{{ lookupErrorMessage }}</p>
|
||||
<div v-else-if="lookupLoading" class="empty-inline">正在查询订单详情…</div>
|
||||
|
||||
<template v-else-if="lookupResult">
|
||||
<div class="lookup-summary">
|
||||
<div class="lookup-summary-item">
|
||||
<span class="summary-label">订单</span>
|
||||
<strong>{{ lookupResult.order.platformOrderId }}</strong>
|
||||
<span class="cell-subtle">{{ lookupResult.order.shopName || lookupResult.order.shopId || '-' }}</span>
|
||||
</div>
|
||||
<div class="lookup-summary-item">
|
||||
<span class="summary-label">买家</span>
|
||||
<strong>{{ lookupResult.order.buyerName || '-' }}</strong>
|
||||
<span class="cell-subtle">支付时间：{{ formatAdminDateTime(lookupResult.order.paidAt) }}</span>
|
||||
</div>
|
||||
<div class="lookup-summary-item">
|
||||
<span class="summary-label">金额</span>
|
||||
<strong>{{ lookupResult.order.totalAmount || '0.00' }}</strong>
|
||||
<span class="cell-subtle">补查结果：{{ lookupResult.order.enriched ? '已补全' : lookupResult.order.enrichReason || '已返回' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>外部商品</th>
|
||||
<th>数量</th>
|
||||
<th>识别结果</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in lookupResult.items" :key="item.lineId">
|
||||
<td>
|
||||
<div class="cell-stack">
|
||||
<strong>{{ item.externalSkuName || item.itemTitle || item.externalSkuCode || item.externalItemId || '-' }}</strong>
|
||||
<span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
|
||||
<span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ item.quantity }}</td>
|
||||
<td>
|
||||
<div class="cell-stack">
|
||||
<strong>{{ item.configured ? '已配置' : '未配置' }}</strong>
|
||||
<span v-if="item.matchedBinding" class="cell-subtle">
|
||||
{{ item.matchedBinding.skuName || item.matchedBinding.skuCode || '-' }} / {{ item.matchedBinding.profileKey || '-' }}
|
||||
</span>
|
||||
<span v-else class="cell-subtle">可直接导入成新规则草稿</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<el-button
|
||||
v-if="!item.configured && !isLookupProductImported(item.lineId)"
|
||||
link
|
||||
type="primary"
|
||||
@click="importLookupProduct(item)"
|
||||
>
|
||||
导入到规则
|
||||
</el-button>
|
||||
<span v-else-if="item.configured" class="cell-subtle">已存在</span>
|
||||
<span v-else class="cell-subtle">已导入草稿</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<section class="table-card table-card--dense">
|
||||
<div class="section-title-row section-title-row--tight">
|
||||
<div>
|
||||
<h3>近期识别到的外部商品</h3>
|
||||
<p>从已入库订单里提取的外部商品信息，优先处理未配置商品，导入后再补齐内部 SKU。</p>
|
||||
</div>
|
||||
<div class="section-mini-stats">
|
||||
<span class="mini-stat-chip">待补 {{ pendingObservedCount }}</span>
|
||||
<span class="mini-stat-chip">总计 {{ observedProducts.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>来源</th>
|
||||
<th>外部商品</th>
|
||||
<th>订单商品数</th>
|
||||
<th>最近出现时间</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in observedProducts" :key="`${item.provider}:${item.platform}:${item.shopId}:${item.externalSkuCode}:${item.externalItemId}:${item.externalSkuName}`">
|
||||
<td>
|
||||
<div class="cell-stack">
|
||||
<strong>{{ item.platform || '-' }}</strong>
|
||||
<span class="cell-subtle">{{ item.provider }} · {{ item.shopName || item.shopId || '全店铺' }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell-stack">
|
||||
<strong>{{ item.externalSkuName || item.externalSkuCode || item.externalItemId || '-' }}</strong>
|
||||
<span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
|
||||
<span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ item.orderItemCount }}</td>
|
||||
<td>{{ formatAdminDateTime(item.latestSeenAt) }}</td>
|
||||
<td>{{ item.configured ? '已配置' : '未配置' }}</td>
|
||||
<td>
|
||||
<el-button
|
||||
v-if="!item.configured"
|
||||
link
|
||||
type="primary"
|
||||
@click="importObservedProduct(item)"
|
||||
>
|
||||
导入到规则
|
||||
</el-button>
|
||||
<span v-else class="cell-subtle">已存在</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="observedProducts.length === 0">
|
||||
<td colspan="6" class="empty-inline">最近还没有识别到可用的外部商品。</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</template>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped src="./AdminFulfillmentBindings.css"></style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import AdminFulfillmentBindingsView from './AdminFulfillmentBindingsView.vue'
|
||||
import AdminKuaishouCloudFulfillmentView from './AdminKuaishouCloudFulfillmentView.vue'
|
||||
|
||||
type FulfillmentTabKey = 'legacy' | 'kuaishou-cloud'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const TAB_OPTIONS: Array<{ key: FulfillmentTabKey; label: string; desc: string }> = [
|
||||
{
|
||||
key: 'legacy',
|
||||
label: '旧履约规则',
|
||||
desc: '这里维护原有统一履约绑定，支持腾讯领取、人工发货，以及旧任务匹配逻辑。',
|
||||
},
|
||||
{
|
||||
key: 'kuaishou-cloud',
|
||||
label: '快手 Cloud 新履约',
|
||||
desc: '这里维护快手下单后走 cloudtentacles 绑定、发货、退号的新流程，不会覆盖旧规则。',
|
||||
},
|
||||
]
|
||||
|
||||
const activeTab = computed<FulfillmentTabKey>({
|
||||
get() {
|
||||
const value = String(route.query.tab || '').trim()
|
||||
return value === 'kuaishou-cloud' ? 'kuaishou-cloud' : 'legacy'
|
||||
},
|
||||
set(value) {
|
||||
const next = value === 'kuaishou-cloud' ? 'kuaishou-cloud' : 'legacy'
|
||||
void router.replace({
|
||||
path: '/admin/platform-fulfillment',
|
||||
query: next === 'legacy' ? {} : { tab: next },
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="hub-panel">
|
||||
<AdminPageHeader
|
||||
title="履约配置中心"
|
||||
description="旧规则和快手 Cloud 新流程都放在这里维护，不再拆成两个侧边栏入口。"
|
||||
/>
|
||||
|
||||
<section class="hub-card">
|
||||
<div class="tab-copy">
|
||||
<h3>{{ TAB_OPTIONS.find((item) => item.key === activeTab)?.label }}</h3>
|
||||
<p>{{ TAB_OPTIONS.find((item) => item.key === activeTab)?.desc }}</p>
|
||||
</div>
|
||||
|
||||
<el-tabs v-model="activeTab" class="hub-tabs">
|
||||
<el-tab-pane label="旧履约规则" name="legacy">
|
||||
<AdminFulfillmentBindingsView />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="快手 Cloud 新履约" name="kuaishou-cloud">
|
||||
<AdminKuaishouCloudFulfillmentView />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hub-panel {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.hub-card {
|
||||
padding: var(--space-5);
|
||||
border-radius: var(--radius-xl);
|
||||
border: 1px solid var(--border-default);
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.tab-copy h3 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab-copy p {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
:deep(.hub-tabs .el-tabs__content) {
|
||||
padding-top: var(--space-3);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,972 @@
|
||||
@import '../../../styles/admin-config-pages.css';
|
||||
|
||||
.admin-panel {
|
||||
--panel-ink: var(--text-primary);
|
||||
--panel-muted: var(--text-secondary);
|
||||
--panel-border: var(--border-default);
|
||||
--panel-soft: #f6f8fb;
|
||||
--panel-line: #dce3ec;
|
||||
--accent: var(--color-primary);
|
||||
--accent-strong: var(--color-primary-dark);
|
||||
--warn: var(--color-warning);
|
||||
--danger: var(--color-danger);
|
||||
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.hero-card,
|
||||
.work-section,
|
||||
.rule-card,
|
||||
.empty-block,
|
||||
.message-box {
|
||||
border: 1px solid var(--panel-border);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 22px;
|
||||
border-radius: 10px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(15, 107, 95, 0.1), rgba(255, 255, 255, 0) 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 251, 0.96));
|
||||
}
|
||||
|
||||
.hero-main,
|
||||
.section-heading,
|
||||
.rule-head,
|
||||
.pane-heading,
|
||||
.rule-footer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.section-heading > div:first-child {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-copy h1,
|
||||
.section-heading h2,
|
||||
.pane-heading h3 {
|
||||
margin: 0;
|
||||
color: var(--panel-ink);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.pane-heading h3 {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
max-width: 720px;
|
||||
margin: 0;
|
||||
color: var(--panel-muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.hero-actions,
|
||||
.toolbar-actions,
|
||||
.sample-metrics,
|
||||
.rule-head-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inline-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 34px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
color: var(--panel-ink);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(112px, 1fr)) minmax(240px, 2fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.status-strip article {
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(31, 42, 55, 0.08);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.status-strip span,
|
||||
.label,
|
||||
.field-block > span,
|
||||
.pane-heading span,
|
||||
.rule-footer,
|
||||
.field-help {
|
||||
color: var(--panel-muted);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.status-strip strong {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
color: var(--panel-ink);
|
||||
font-size: var(--text-2xl);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.status-strip code {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
overflow: hidden;
|
||||
color: var(--panel-ink);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.work-section {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
padding: 18px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sample-metrics span {
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
background: #eef7f5;
|
||||
color: var(--accent-strong);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.lookup-console {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: linear-gradient(180deg, #f8fafc, #ffffff);
|
||||
}
|
||||
|
||||
.lookup-grid,
|
||||
.grid,
|
||||
.switch-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.lookup-grid {
|
||||
grid-template-columns: 1.4fr 1.4fr 1fr 1fr 92px 92px 92px 132px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.field-span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.field-block {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.field-block > span {
|
||||
color: #344054;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.action-field {
|
||||
align-content: end;
|
||||
}
|
||||
|
||||
.action-field :deep(.el-button),
|
||||
.sample-import-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sample-results {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sample-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 112px;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sample-card[data-imported='true'] {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.sample-main {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1.7fr 1.25fr 0.8fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.sample-main > div,
|
||||
.rule-title-group,
|
||||
.order-cell,
|
||||
.product-cell,
|
||||
.shop-cell,
|
||||
.amount-cell {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.sample-main strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: var(--panel-ink);
|
||||
font-size: var(--text-base);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sample-main small,
|
||||
.rule-title-group small,
|
||||
.field-help {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: var(--panel-muted);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.45;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.imported-mark {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #eaf7f0;
|
||||
color: #067647;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.rules-section {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.rule-filter-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-chip,
|
||||
.collapse-button {
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
color: var(--panel-ink);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 34px;
|
||||
padding: 0 11px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.filter-chip strong {
|
||||
color: var(--panel-muted);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.filter-chip--active {
|
||||
border-color: rgba(15, 107, 95, 0.32);
|
||||
background: #eef7f5;
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.filter-chip--active strong {
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.rule-card {
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.rule-card[data-invalid='true'] {
|
||||
border-color: rgba(180, 35, 24, 0.36);
|
||||
box-shadow: 0 0 0 3px rgba(254, 228, 226, 0.9);
|
||||
}
|
||||
|
||||
.rule-head {
|
||||
padding: 12px 14px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid var(--panel-line);
|
||||
}
|
||||
|
||||
.rule-summary-button {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 34px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rule-index {
|
||||
display: inline-grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #182230;
|
||||
color: #fff;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.rule-title-group strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: var(--panel-ink);
|
||||
font-size: 15px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.summary-pill,
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 220px;
|
||||
min-height: 28px;
|
||||
padding: 0 9px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 800;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.summary-pill {
|
||||
background: #fff;
|
||||
color: #475467;
|
||||
border: 1px solid var(--panel-border);
|
||||
}
|
||||
|
||||
.status-pill[data-tone='success'] {
|
||||
color: #067647;
|
||||
background: #eaf7f0;
|
||||
}
|
||||
|
||||
.status-pill[data-tone='warning'] {
|
||||
color: var(--warn);
|
||||
background: #fff4e5;
|
||||
}
|
||||
|
||||
.status-pill[data-tone='muted'] {
|
||||
color: #475467;
|
||||
background: #eef2f6;
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
min-height: 28px;
|
||||
padding: 0 9px;
|
||||
color: var(--accent-strong);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.rule-body {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.rule-pane {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fbfcfe;
|
||||
}
|
||||
|
||||
.pane-heading {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.switch-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.switch-tile,
|
||||
.switch-field {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.switch-tile {
|
||||
min-height: 72px;
|
||||
padding: 11px;
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.switch-tile > span {
|
||||
color: #344054;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.rule-footer {
|
||||
align-items: center;
|
||||
color: var(--panel-muted);
|
||||
}
|
||||
|
||||
.empty-block,
|
||||
.message-box,
|
||||
.loading-band {
|
||||
padding: 14px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--panel-muted);
|
||||
}
|
||||
|
||||
.empty-block--soft,
|
||||
.loading-band {
|
||||
border: 1px dashed rgba(31, 42, 55, 0.18);
|
||||
background: #f8fafc;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.message-box {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.message-box--error {
|
||||
border-color: rgba(180, 35, 24, 0.22);
|
||||
background: #fff5f4;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.message-box--warning {
|
||||
border-color: rgba(181, 71, 8, 0.2);
|
||||
background: #fff8eb;
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.field-block :deep(.el-input-number),
|
||||
.field-block :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-input__wrapper),
|
||||
.admin-panel :deep(.el-textarea__inner),
|
||||
.admin-panel :deep(.el-select__wrapper) {
|
||||
min-height: 36px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 1px var(--panel-line) inset;
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-input__wrapper:hover),
|
||||
.admin-panel :deep(.el-textarea__inner:hover),
|
||||
.admin-panel :deep(.el-select__wrapper:hover) {
|
||||
box-shadow: 0 0 0 1px rgba(15, 107, 95, 0.38) inset;
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-input__wrapper.is-focus),
|
||||
.admin-panel :deep(.el-textarea__inner:focus),
|
||||
.admin-panel :deep(.el-select__wrapper.is-focused) {
|
||||
box-shadow:
|
||||
0 0 0 1px var(--accent) inset,
|
||||
0 0 0 3px rgba(15, 107, 95, 0.12);
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-input-number .el-input__wrapper) {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-input-number__decrease),
|
||||
.admin-panel :deep(.el-input-number__increase) {
|
||||
border-color: var(--panel-line);
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-switch.is-checked .el-switch__core) {
|
||||
border-color: var(--accent);
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.lookup-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.field-span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.sample-main {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-main,
|
||||
.section-heading,
|
||||
.rules-heading,
|
||||
.rule-head,
|
||||
.pane-heading,
|
||||
.rule-footer {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hero-actions,
|
||||
.toolbar-actions,
|
||||
.sample-metrics,
|
||||
.rule-head-meta {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.status-strip,
|
||||
.lookup-grid,
|
||||
.cols-4,
|
||||
.cols-3,
|
||||
.switch-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.file-status,
|
||||
.field-span-2 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.sample-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero-card,
|
||||
.work-section {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.status-strip,
|
||||
.lookup-grid,
|
||||
.cols-4,
|
||||
.cols-3,
|
||||
.switch-grid,
|
||||
.sample-main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-actions :deep(.el-button),
|
||||
.toolbar-actions :deep(.el-button),
|
||||
.sample-import-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
从 admin-config-pages.css 继承的共享结构样式，本页仅覆盖主题
|
||||
============================================================ */
|
||||
|
||||
/* ---------- 主题覆写：标题颜色 ---------- */
|
||||
.panel-header h1,
|
||||
.panel-header-copy h1,
|
||||
.section-title-row h3 {
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.panel-header p,
|
||||
.panel-header-copy p,
|
||||
.section-title-row p {
|
||||
color: #64748b;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：chip 标签 (蓝色) ---------- */
|
||||
.header-tag,
|
||||
.mini-stat-chip,
|
||||
.overview-note {
|
||||
color: #175cd3;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：卡片圆角 ---------- */
|
||||
.overview-card,
|
||||
.table-card,
|
||||
.empty-block,
|
||||
.error-copy {
|
||||
border-radius: 20px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.overview-file code {
|
||||
background: rgba(15, 23, 42, 0.05);
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：概览统计 ---------- */
|
||||
.overview-stat {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.overview-stat span {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.overview-stat strong {
|
||||
color: #1d3555;
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
|
||||
/* ---------- 查询工具栏 (本页特有) ---------- */
|
||||
.lookup-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 1fr) 110px 130px 180px;
|
||||
gap: 12px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
/* ---------- 字段块 ---------- */
|
||||
.field-block span {
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.field-help,
|
||||
.toolbar-hint,
|
||||
.cell-subtle {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.field-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* ---------- 文本输入 (蓝色聚焦环) ---------- */
|
||||
.text-input {
|
||||
min-height: 36px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(86, 108, 138, 0.22);
|
||||
background: #fff;
|
||||
color: #1d3555;
|
||||
outline: none;
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.text-input:focus {
|
||||
border-color: rgba(15, 93, 216, 0.42);
|
||||
box-shadow: 0 0 0 4px rgba(15, 93, 216, 0.08);
|
||||
}
|
||||
|
||||
.text-input--readonly,
|
||||
.text-input:disabled {
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.textarea-input {
|
||||
min-height: 72px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：校验/错误 ---------- */
|
||||
.validation-banner,
|
||||
.binding-inline-error {
|
||||
background: #fff5f4;
|
||||
border: 1px solid rgba(180, 35, 24, 0.14);
|
||||
color: #b42318;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.error-copy {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：表格 ---------- */
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 11px 10px;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.cell-stack strong {
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
/* ---------- 主题覆写：绑定卡片 ---------- */
|
||||
.binding-card {
|
||||
border-radius: 16px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.binding-title-row {
|
||||
color: #1d3555;
|
||||
}
|
||||
|
||||
.binding-subtle {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.binding-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
color: #1d3555;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.binding-collapsed-preview {
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.checkbox-line {
|
||||
color: #1d3555;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.binding-actions {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.toolbar-hint {
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.empty-inline {
|
||||
padding: 14px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---------- 映射编辑 (本页特有) ---------- */
|
||||
.mapping-editor {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.mapping-panel {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
|
||||
.mapping-panel--external {
|
||||
background: rgba(239, 246, 255, 0.72);
|
||||
}
|
||||
|
||||
.mapping-panel--internal {
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
border-color: rgba(15, 93, 216, 0.16);
|
||||
}
|
||||
|
||||
.mapping-panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.mapping-panel-head strong {
|
||||
color: #1d3555;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mapping-panel-head span {
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.mapping-grid,
|
||||
.mapping-extra {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 12px;
|
||||
}
|
||||
|
||||
.mapping-arrow {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #175cd3;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mapping-arrow span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 30px;
|
||||
min-width: 54px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(15, 93, 216, 0.08);
|
||||
border: 1px solid rgba(15, 93, 216, 0.14);
|
||||
}
|
||||
|
||||
.mapping-extra {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed rgba(86, 108, 138, 0.18);
|
||||
}
|
||||
|
||||
/* ---------- mini-stat-chip 交互态 (本页特有) ---------- */
|
||||
.mini-stat-chip--button {
|
||||
border: 1px solid rgba(15, 93, 216, 0.12);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.mini-stat-chip--active {
|
||||
border-color: rgba(15, 93, 216, 0.32);
|
||||
background: rgba(15, 93, 216, 0.14);
|
||||
}
|
||||
|
||||
.overview-label {
|
||||
color: #64748b;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
/* ---------- Element Plus 蓝色主题覆盖 ---------- */
|
||||
.admin-panel :deep(.el-button) {
|
||||
min-height: 34px;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.admin-panel :deep(.el-button--primary) {
|
||||
--el-button-bg-color: #3a91f7;
|
||||
--el-button-border-color: #3a91f7;
|
||||
--el-button-hover-bg-color: #0f5dd8;
|
||||
--el-button-hover-border-color: #0f5dd8;
|
||||
}
|
||||
|
||||
/* ---------- 响应式 ---------- */
|
||||
@media (max-width: 900px) {
|
||||
.overview-stats,
|
||||
.lookup-toolbar,
|
||||
.binding-grid,
|
||||
.mapping-editor {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.mapping-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.field-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.panel-header,
|
||||
.section-title-row,
|
||||
.section-header-tools,
|
||||
.binding-actions,
|
||||
.binding-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.overview-stats,
|
||||
.lookup-toolbar,
|
||||
.binding-grid,
|
||||
.mapping-editor,
|
||||
.mapping-grid,
|
||||
.mapping-extra {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.field-wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user