admin-web/src/modules/inbounds/measurement/InboundMeasurementPanel.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { AlertTriangle, Image, RefreshCw, Ruler, Save, Send } from '@lucide/vue'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import { downloadInboundMeasurementImage, getInboundMeasurement, submitInboundMeasurement, updateConfirmedPackageCount } from './api'
import type {
  InboundMeasurementDetail,
  InboundMeasurementItem,
  SaveInboundMeasurementItemRequest,
} from './types'

const props = defineProps<{
  customerId?: string
  tenantId?: string
  inboundId: string
}>()

const emit = defineEmits<{
  changed: []
}>()

interface EditableMeasurementItem extends SaveInboundMeasurementItemRequest {
  itemId: string
  clientKey: string
  serverValues: Pick<InboundMeasurementItem, 'girthCm' | 'unitVolumeCbm' | 'totalWeightKg' | 'totalVolumeCbm' | 'volumeWeightKg'>
}

interface MeasurementFormModel {
  measurementId: string | null
  version: number
  originalDocumentNo: string
  originalGrossWeightKg: number | null
  originalVolumeCbm: number | null
  actualGoodsName: string
  items: EditableMeasurementItem[]
}

const access = useAccessPreviewStore()
const loading = ref(false)
const saving = ref(false)
const submitting = ref(false)
const detail = ref<InboundMeasurementDetail | null>(null)
const loadError = ref<ApiErrorDetails | null>(null)
const operationError = ref<ApiErrorDetails | null>(null)
const conflictDetected = ref(false)
const imagePreviewOpen = ref(false)
const imagePreviewLoading = ref(false)
const imagePreviewUrl = ref('')
const imagePreviewError = ref<ApiErrorDetails | null>(null)
const validationErrors = ref<Record<string, string[]>>({})
const baseline = ref('')
let requestSequence = 0
let itemSequence = 0

const form = reactive<MeasurementFormModel>({
  measurementId: null,
  version: 0,
  originalDocumentNo: '',
  originalGrossWeightKg: null,
  originalVolumeCbm: null,
  actualGoodsName: '',
  items: [],
})

const canView = computed(() => access.can('platform:firstleg:inbound:measure:view'))
const canEdit = computed(() => access.can('platform:firstleg:inbound:measure:edit'))
const canSubmit = computed(() => access.can('platform:firstleg:inbound:measure:submit'))
const customerId = computed(() => props.customerId || props.tenantId || '')
const hasContext = computed(() => Boolean(customerId.value && props.inboundId))
const countEditableProcess = computed(() => ['WAIT_MEASURE', 'MEASURING', 'MEASURE_PENDING', 'MEASURE_REJECTED'].includes(detail.value?.processStatus || ''))
const submitEditableProcess = computed(() => ['WAIT_MEASURE', 'MEASURING', 'MEASURE_REJECTED'].includes(detail.value?.processStatus || ''))
const mayMaintain = computed(() => canEdit.value && countEditableProcess.value && !loading.value && !submitting.value)
const confirmedPackageCount = computed(() => form.items.reduce((sum, item) => sum + (Number.isFinite(item.packageCount) ? item.packageCount : 0), 0))
const expectedPackageCount = computed(() => detail.value?.originalPackageCount ?? null)
const packageCountDifference = computed(() => expectedPackageCount.value == null ? null : confirmedPackageCount.value - expectedPackageCount.value)
const packageCountMatched = computed(() => packageCountDifference.value === null || packageCountDifference.value === 0)
const packageCountDifferenceLabel = computed(() => {
  if (packageCountDifference.value == null) return ''
  return packageCountDifference.value > 0
    ? `超出 ${packageCountDifference.value} 箱`
    : `还差 ${Math.abs(packageCountDifference.value)} 箱`
})
const maySubmit = computed(() => canSubmit.value && submitEditableProcess.value && Boolean(form.measurementId) && packageCountMatched.value && !loading.value && !saving.value)
const snapshot = computed(() => JSON.stringify(form))
const isDirty = computed(() => Boolean(detail.value) && snapshot.value !== baseline.value)
const registrationOpen = computed(() => hasContext.value && canView.value && Boolean(detail.value))
const requiredPermission = computed(() => canEdit.value ? 'platform:firstleg:inbound:measure:edit' : null)
const sourceLabel = computed(() => ({ THIRD_PARTY: '第三方设备', MANUAL: '平台人工', OPENAPI: '第三方设备' }[detail.value?.sourceType || ''] || detail.value?.sourceType || '尚未测量'))
const sourceTagType = computed(() => detail.value?.sourceType === 'MANUAL' ? 'info' : 'primary')

const { captureBaseline } = useUnsavedWorkRegistration({
  key: 'p2-inbound-measurement-editor',
  label: computed(() => `入库单 ${detail.value?.inboundCode || props.inboundId} 的测量草稿`),
  isOpen: registrationOpen,
  model: form,
  requiredPermission,
})

function nextItemKey() {
  itemSequence += 1
  return `measurement-item-${itemSequence}`
}

function editableItem(item: InboundMeasurementItem): EditableMeasurementItem {
  return {
    itemId: String(item.id),
    clientKey: nextItemKey(),
    boxCode: item.boxCode,
    itemNo: item.itemNo,
    boxSpecification: item.boxSpecification,
    packageCount: item.packageCount,
    lengthCm: item.lengthCm,
    widthCm: item.widthCm,
    heightCm: item.heightCm,
    unitWeightKg: item.unitWeightKg,
    intelligentImageFileId: item.intelligentImageFileId == null ? null : String(item.intelligentImageFileId),
    machineNo: item.machineNo,
    measuredAt: item.measuredAt,
    overLimitWarning: item.overLimitWarning,
    outerLengthCm: item.outerLengthCm,
    outerWidthCm: item.outerWidthCm,
    outerHeightCm: item.outerHeightCm,
    remark: item.remark,
    serverValues: {
      girthCm: item.girthCm,
      unitVolumeCbm: item.unitVolumeCbm,
      totalWeightKg: item.totalWeightKg,
      totalVolumeCbm: item.totalVolumeCbm,
      volumeWeightKg: item.volumeWeightKg,
    },
  }
}

function clearForm() {
  form.measurementId = null
  form.version = 0
  form.originalDocumentNo = ''
  form.originalGrossWeightKg = null
  form.originalVolumeCbm = null
  form.actualGoodsName = ''
  form.items.splice(0)
  baseline.value = JSON.stringify(form)
  captureBaseline()
}

function applyDetail(resource: InboundMeasurementDetail) {
  detail.value = resource
  form.measurementId = resource.measurementId == null ? null : String(resource.measurementId)
  form.version = resource.version ?? 0
  form.originalDocumentNo = resource.originalDocumentNo || ''
  form.originalGrossWeightKg = resource.originalGrossWeightKg
  form.originalVolumeCbm = resource.originalVolumeCbm
  form.actualGoodsName = resource.actualGoodsName || ''
  form.items.splice(0, form.items.length, ...resource.items.map(editableItem))
  baseline.value = JSON.stringify(form)
  captureBaseline()
  validationErrors.value = {}
  conflictDetected.value = false
}

async function loadMeasurement() {
  if (!hasContext.value || !canView.value) return
  const sequence = ++requestSequence
  loading.value = true
  loadError.value = null
  operationError.value = null
  try {
    const resource = await getInboundMeasurement(customerId.value, props.inboundId)
    if (sequence !== requestSequence) return
    applyDetail(resource)
  } catch (error) {
    if (sequence !== requestSequence) return
    detail.value = null
    clearForm()
    loadError.value = getApiErrorDetails(error, '测量数据加载失败，请稍后重试')
  } finally {
    if (sequence === requestSequence) loading.value = false
  }
}

async function reloadLatest() {
  if (isDirty.value) {
    try {
      await ElMessageBox.confirm('加载最新版本会丢弃当前尚未保存的修改。确定继续吗？', '重新加载测量数据', {
        type: 'warning',
        confirmButtonText: '加载最新版本',
        cancelButtonText: '继续编辑',
      })
    } catch {
      return
    }
  }
  await loadMeasurement()
}

function validateDraft() {
  const errors: Record<string, string[]> = {}
  const general: string[] = []
  if (!form.items.length) general.push('请至少保留一条实际扫描箱测量记录')
  if (form.items.length > 500) general.push('单个测量批次最多包含 500 条实际扫描箱记录')
  form.items.forEach((item, index) => {
    const itemErrors: string[] = []
    if (!Number.isInteger(item.packageCount) || item.packageCount < 1 || item.packageCount > 1_000_000) itemErrors.push('箱数必须是 1 至 1,000,000 的整数')
    if (itemErrors.length) errors[item.clientKey] = itemErrors.map((message) => `第 ${index + 1} 条：${message}`)
  })
  if (general.length) errors.general = general
  validationErrors.value = errors
  return Object.keys(errors).length === 0
}

function setOperationError(error: unknown, fallback: string) {
  const details = getApiErrorDetails(error, fallback)
  operationError.value = details
  conflictDetected.value = details.code === 'A0409'
    || details.code === 'CONFLICT'
    || details.code === 'HTTP_409'
    || details.message.includes('版本')
    || details.message.includes('并发')
  return details
}

async function saveDraft() {
  if (!mayMaintain.value || !validateDraft()) return
  saving.value = true
  operationError.value = null
  conflictDetected.value = false
  try {
    const originalCounts = new Map((detail.value?.items || []).map((item) => [String(item.id), item.packageCount]))
    const changedItems = form.items.filter((item) => originalCounts.get(item.itemId) !== item.packageCount)
    let version = form.version
    for (const item of changedItems) {
      const saved = await updateConfirmedPackageCount(customerId.value, props.inboundId, item.itemId, {
        measurementVersion: version,
        confirmedPackageCount: item.packageCount,
      })
      version = saved.measurementVersion
    }
    form.version = version
    ElMessage.success('确认箱数已保存，计算结果已由服务端更新')
    await loadMeasurement()
    emit('changed')
  } catch (error) {
    const details = setOperationError(error, '测量草稿保存失败，请检查后重试')
    if (!conflictDetected.value) ElMessage.error(details.message)
  } finally {
    saving.value = false
  }
}

async function submitForReview() {
  if (!maySubmit.value || !form.measurementId) return
  if (isDirty.value) {
    ElMessage.warning('请先保存当前修改，再提交审核')
    return
  }
  try {
    await ElMessageBox.confirm(
      '提交后将校验测量图片和全部称重结果，并由后端准备托盘与库位占用。提交成功后本批次不能继续编辑，设备也不能再覆盖已提交数据。',
      '提交测量审核',
      { type: 'warning', confirmButtonText: '确认提交', cancelButtonText: '取消' },
    )
  } catch {
    return
  }
  submitting.value = true
  operationError.value = null
  conflictDetected.value = false
  try {
    await submitInboundMeasurement(customerId.value, props.inboundId, {
      measurementId: form.measurementId,
      version: form.version,
    })
    ElMessage.success('测量数据已提交审核')
    await loadMeasurement()
    emit('changed')
  } catch (error) {
    const details = setOperationError(error, '测量数据提交失败，请检查图片和称重结果后重试')
    if (!conflictDetected.value) ElMessage.error(details.message)
  } finally {
    submitting.value = false
  }
}

function formatNumber(value: number | null | undefined, maximumFractionDigits = 3) {
  if (value == null || !Number.isFinite(value)) return '—'
  return new Intl.NumberFormat('zh-CN', { maximumFractionDigits }).format(value)
}

function releaseImagePreview() {
  if (imagePreviewUrl.value) URL.revokeObjectURL(imagePreviewUrl.value)
  imagePreviewUrl.value = ''
  imagePreviewError.value = null
}

async function previewImage(fileId: string | null) {
  if (!fileId) return
  releaseImagePreview()
  imagePreviewOpen.value = true
  imagePreviewLoading.value = true
  try {
    const blob = await downloadInboundMeasurementImage(customerId.value, props.inboundId, fileId)
    imagePreviewUrl.value = URL.createObjectURL(blob)
  } catch (error) {
    imagePreviewError.value = getApiErrorDetails(error, '测量图片加载失败')
  } finally {
    imagePreviewLoading.value = false
  }
}

function processStatusLabel(status: string | undefined) {
  return ({
    WAIT_MEASURE: '待测量', MEASURING: '测量中', MEASURE_PENDING: '待审核', MEASURE_REJECTED: '审核驳回',
    WAIT_PRICING: '待计费', FEE_CONFIRMING: '费用确认中', INBOUNDING: '入库中', INBOUNDED: '已入库', VOIDED: '已作废',
  } as Record<string, string>)[status || ''] || status || '—'
}

watch(
  () => [customerId.value, props.inboundId, canView.value] as const,
  () => {
    requestSequence += 1
    detail.value = null
    loadError.value = null
    operationError.value = null
    conflictDetected.value = false
    validationErrors.value = {}
    clearForm()
    if (hasContext.value && canView.value) void loadMeasurement()
  },
  { immediate: true },
)

onBeforeUnmount(releaseImagePreview)
</script>

<template>
  <section class="surface-panel measurement-panel" aria-label="入库测量草稿">
    <header class="panel-heading measurement-panel__heading">
      <div>
        <span class="measurement-panel__icon"><Ruler :size="18" aria-hidden="true" /></span>
        <div>
          <h2>测量与箱规</h2>
          <p>维护箱规原始值；体积、材积重和汇总结果均由服务端计算。</p>
        </div>
      </div>
      <div class="measurement-panel__actions">
        <el-button :loading="loading" :disabled="!hasContext || !canView || saving || submitting" @click="reloadLatest">
          <RefreshCw :size="15" />刷新
        </el-button>
        <el-button v-if="canEdit" type="primary" plain :loading="saving" :disabled="!mayMaintain" @click="saveDraft">
          <Save :size="15" />保存确认箱数
        </el-button>
        <el-button v-if="canSubmit" type="primary" :loading="submitting" :disabled="!maySubmit" @click="submitForReview">
          <Send :size="15" />提交审核
        </el-button>
      </div>
    </header>

    <el-empty v-if="!hasContext" description="请选择所属企业和入库单后维护测量数据" />

    <LoadErrorState
      v-else-if="!canView"
      title="无测量查看权限"
      message="当前账号缺少 platform:firstleg:inbound:measure:view 权限。"
      :show-retry="false"
    />

    <div v-else-if="loading && !detail" class="measurement-skeleton" aria-label="正在加载测量数据">
      <el-skeleton :rows="8" animated />
    </div>

    <LoadErrorState
      v-else-if="loadError && !detail"
      title="测量数据加载失败"
      :message="loadError.message"
      :loading="loading"
      @retry="loadMeasurement"
    >
      <template #details><ApiErrorMeta :details="loadError" /></template>
    </LoadErrorState>

    <template v-else-if="detail">
      <div class="measurement-context">
        <div class="measurement-context__identity">
          <div>
            <strong>{{ detail.inboundCode }}</strong>
            <span>{{ detail.companyName }} · {{ detail.channelName || detail.channelCode || '未设置渠道' }}</span>
          </div>
          <div class="measurement-tags">
            <el-tag :type="sourceTagType" effect="light">{{ sourceLabel }}</el-tag>
            <StatusBadge :status="processStatusLabel(detail.processStatus)" />
            <span>版本 {{ form.version }}</span>
          </div>
        </div>
        <dl class="measurement-metrics">
          <div><dt>订单总箱数</dt><dd>{{ formatNumber(expectedPackageCount, 0) }}</dd></div>
          <div><dt>确认箱数合计</dt><dd>{{ formatNumber(confirmedPackageCount, 0) }}</dd></div>
          <div><dt>实测总毛重</dt><dd>{{ formatNumber(detail.actualGrossWeightKg) }} <small>T.K.GW</small></dd></div>
          <div><dt>实测总体积</dt><dd>{{ formatNumber(detail.actualVolumeCbm, 4) }} <small>T.CBM</small></dd></div>
          <div><dt>实测总材积重</dt><dd>{{ formatNumber(detail.volumeWeightKg) }} <small>KG</small></dd></div>
        </dl>
      </div>

      <el-alert v-if="!countEditableProcess" type="info" :closable="false" show-icon>
        <template #title>当前状态为“{{ processStatusLabel(detail.processStatus) }}”，测量数据仅可查看</template>
        确认箱数只允许在待测量、测量中、待审核或审核驳回状态维护。
      </el-alert>

      <el-alert v-else-if="!canEdit" type="info" :closable="false" show-icon title="当前账号仅可查看测量数据" />

      <el-alert v-if="conflictDetected" type="warning" :closable="false" show-icon class="measurement-alert">
        <template #title>数据版本已变化，当前修改尚未丢失</template>
        <p>{{ operationError?.message }}</p>
        <ApiErrorMeta v-if="operationError" :details="operationError" />
        <el-button size="small" @click="reloadLatest">加载最新版本</el-button>
      </el-alert>
      <el-alert v-else-if="operationError" type="error" :closable="false" show-icon class="measurement-alert">
        <template #title>操作未完成</template>
        <p>{{ operationError.message }}</p>
        <ApiErrorMeta :details="operationError" />
      </el-alert>

      <el-alert v-if="Object.keys(validationErrors).length" type="error" :closable="false" show-icon class="measurement-alert">
        <template #title>请修正测量草稿中的问题</template>
        <ul>
          <li v-for="message in Object.values(validationErrors).flat()" :key="message">{{ message }}</li>
        </ul>
      </el-alert>

      <el-alert v-if="expectedPackageCount !== null && !packageCountMatched" type="warning" :closable="false" show-icon class="measurement-alert">
        <template #title>确认箱数尚未与订单总箱数匹配</template>
        当前已确认 {{ confirmedPackageCount }} 箱，订单总箱数 {{ expectedPackageCount }} 箱，{{ packageCountDifferenceLabel }}。
      </el-alert>

      <form class="measurement-form" @submit.prevent="saveDraft">
        <fieldset :disabled="!mayMaintain || saving">
          <legend class="sr-only">测量草稿</legend>
          <section class="measurement-section">
            <div class="measurement-section__heading">
              <div><h3>原单数据</h3><p>原单值仅用于审核对比，不参与前端计算。</p></div>
            </div>
            <div class="measurement-form-grid">
              <label><span>原单据号码（CKW）</span><el-input :model-value="form.originalDocumentNo || '—'" readonly /></label>
              <label><span>原单据毛重（T.K.GW）</span><el-input :model-value="formatNumber(form.originalGrossWeightKg)" readonly /></label>
              <label><span>原单据总体积（T.CBM）</span><el-input :model-value="formatNumber(form.originalVolumeCbm, 4)" readonly /></label>
              <label><span>实际品名</span><el-input :model-value="form.actualGoodsName || '—'" readonly /></label>
            </div>
          </section>

          <section class="measurement-section measurement-items-section">
            <div class="measurement-section__heading">
              <div><h3>扫描箱测量数据明细</h3><p>每条记录对应一个实际扫描箱；人工只确认该条记录代表的箱数，设备实测值不可在此修改。</p></div>
            </div>

            <el-empty v-if="!form.items.length" description="暂无扫描箱测量数据" />

            <article v-for="(item, index) in form.items" :key="item.clientKey" class="measurement-item" :class="{ 'has-error': validationErrors[item.clientKey]?.length }">
              <header>
                <div><strong>扫描箱 {{ index + 1 }}</strong><span>{{ item.boxCode || '未关联箱号' }} · {{ item.machineNo || '人工录入' }}</span></div>
              </header>
              <div class="measurement-item__grid">
                <label><span>箱号</span><el-input :model-value="item.boxCode || '—'" readonly /></label>
                <label><span>测量长（cm）</span><el-input :model-value="formatNumber(item.lengthCm)" readonly /></label>
                <label><span>测量宽（cm）</span><el-input :model-value="formatNumber(item.widthCm)" readonly /></label>
                <label><span>测量高（cm）</span><el-input :model-value="formatNumber(item.heightCm)" readonly /></label>
                <label><span>确认箱数 *</span><el-input-number v-model="item.packageCount" :min="1" :max="1000000" :step="1" step-strictly controls-position="right" /></label>
                <label><span>每箱毛重（kg）</span><el-input :model-value="formatNumber(item.unitWeightKg)" readonly /></label>
                <label><span>机器编号</span><el-input :model-value="item.machineNo || '—'" readonly /></label>
                <label><span>测量时间</span><el-input :model-value="item.measuredAt ? item.measuredAt.replace('T', ' ') : '—'" readonly /></label>
                <label class="measurement-image-field"><span>当前有效图片</span><el-button :disabled="!item.intelligentImageFileId" @click="previewImage(item.intelligentImageFileId)"><Image :size="15" />{{ item.intelligentImageFileId ? '预览图片' : '暂无图片' }}</el-button></label>
              </div>
              <dl class="measurement-item__results" aria-label="服务端计算结果">
                <div><dt>箱规周长</dt><dd>{{ formatNumber(item.serverValues.girthCm) }} cm</dd></div>
                <div><dt>单箱体积</dt><dd>{{ formatNumber(item.serverValues.unitVolumeCbm, 4) }} CBM</dd></div>
                <div><dt>总毛重</dt><dd>{{ formatNumber(item.serverValues.totalWeightKg) }} KG</dd></div>
                <div><dt>总体积</dt><dd>{{ formatNumber(item.serverValues.totalVolumeCbm, 4) }} CBM</dd></div>
                <div><dt>总材积重</dt><dd>{{ formatNumber(item.serverValues.volumeWeightKg) }} KG</dd></div>
              </dl>
            </article>
          </section>
        </fieldset>
      </form>

      <footer v-if="canEdit || canSubmit" class="measurement-panel__footer">
        <span v-if="isDirty"><AlertTriangle :size="15" />有尚未保存的修改</span>
        <span v-else>当前显示版本 {{ form.version }}</span>
        <div>
          <el-button v-if="canEdit" type="primary" plain :loading="saving" :disabled="!mayMaintain" @click="saveDraft"><Save :size="15" />保存确认箱数</el-button>
          <el-button v-if="canSubmit" type="primary" :loading="submitting" :disabled="!maySubmit" @click="submitForReview"><Send :size="15" />提交审核</el-button>
        </div>
      </footer>

      <el-dialog v-model="imagePreviewOpen" title="当前有效测量图片" width="min(720px, 92vw)" destroy-on-close @closed="releaseImagePreview">
        <div class="measurement-image-preview">
          <el-skeleton v-if="imagePreviewLoading" :rows="5" animated />
          <LoadErrorState v-else-if="imagePreviewError" title="图片加载失败" :message="imagePreviewError.message" :show-retry="false">
            <template #details><ApiErrorMeta :details="imagePreviewError" /></template>
          </LoadErrorState>
          <img v-else-if="imagePreviewUrl" :src="imagePreviewUrl" alt="当前扫描箱测量图片" />
          <el-empty v-else description="暂无可预览图片" />
        </div>
      </el-dialog>
    </template>
  </section>
</template>

<style scoped>
.measurement-panel { overflow: hidden; }
.measurement-panel__heading > div:first-child { display: flex; min-width: 0; align-items: flex-start; gap: 11px; }
.measurement-panel__icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; background: #eef4ff; color: var(--cc-primary); }
.measurement-panel h2, .measurement-panel h3 { margin: 0; color: var(--cc-text); }
.measurement-panel h2 { font-size: 16px; }
.measurement-panel h3 { font-size: 14px; }
.measurement-panel__heading p, .measurement-section__heading p { margin: 4px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.55; }
.measurement-panel__actions, .measurement-panel__footer > div { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.measurement-panel__actions :deep(.el-button), .measurement-panel__footer :deep(.el-button) { margin-left: 0; }
.measurement-skeleton { padding: 24px; }
.measurement-context { padding: 18px 20px; background: #fbfcfe; }
.measurement-context__identity { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.measurement-context__identity > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.measurement-context__identity strong { overflow-wrap: anywhere; color: var(--cc-text); font-size: 15px; }
.measurement-context__identity span { color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
.measurement-tags { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.measurement-tags > span:last-child { color: var(--cc-muted); font-size: 11px; }
.measurement-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 16px 0 0; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
.measurement-metrics > div { min-width: 0; padding: 13px 15px; border-right: 1px solid var(--cc-border); }
.measurement-metrics > div:last-child { border-right: 0; }
.measurement-metrics dt { color: var(--cc-muted); font-size: 11px; }
.measurement-metrics dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 17px; font-weight: 700; }
.measurement-metrics small { color: var(--cc-muted); font-size: 10px; font-weight: 500; }
.measurement-panel > :deep(.el-alert), .measurement-alert { margin: 16px 20px 0; width: auto; }
.measurement-alert p { margin: 5px 0 0; line-height: 1.55; }
.measurement-alert ul { margin: 7px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.65; }
.measurement-alert .el-button { margin-top: 9px; }
.measurement-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.measurement-section { padding: 22px 20px; border-top: 1px solid var(--cc-border); }
.measurement-section__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.measurement-section__heading > div { min-width: 0; }
.measurement-form-grid, .measurement-item__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.measurement-form label, .measurement-item label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #344054; font-size: 12px; font-weight: 650; }
.measurement-form :deep(.el-input-number), .measurement-form :deep(.el-input) { width: 100%; }
.measurement-image-field :deep(.el-button) { width: 100%; margin: 0; }
.measurement-image-preview { display: grid; min-height: 240px; place-items: center; }
.measurement-image-preview img { display: block; width: auto; max-width: 100%; max-height: 68vh; object-fit: contain; }
.measurement-items-section { background: #fafbfc; }
.measurement-item { overflow: hidden; margin-top: 14px; border: 1px solid var(--cc-border); border-radius: 9px; background: #fff; }
.measurement-item.has-error { border-color: var(--el-color-danger-light-5); }
.measurement-item > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; border-bottom: 1px solid var(--cc-border); background: #f8fafc; }
.measurement-item > header > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.measurement-item > header strong { color: var(--cc-text); font-size: 13px; }
.measurement-item > header span { overflow: hidden; color: var(--cc-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.measurement-item__grid { padding: 16px; }
.measurement-item__advanced { margin: 0 16px 16px; border-top: 1px solid var(--cc-border); }
.measurement-item__advanced summary { padding: 12px 0 0; color: var(--cc-primary); font-size: 12px; font-weight: 700; cursor: pointer; }
.measurement-item__advanced .measurement-item__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 0 0; }
.measurement-item__advanced .span-two { grid-column: span 3; }
.measurement-item__results { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--cc-border); background: #fbfcfe; }
.measurement-item__results > div { min-width: 0; padding: 11px 14px; border-right: 1px solid var(--cc-border); }
.measurement-item__results > div:last-child { border-right: 0; }
.measurement-item__results dt { color: var(--cc-muted); font-size: 10px; }
.measurement-item__results dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #344054; font-size: 12px; font-weight: 700; }
.measurement-panel__footer { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 20px; border-top: 1px solid var(--cc-border); background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 22px rgba(15, 23, 42, .05); }
.measurement-panel__footer > span { display: inline-flex; align-items: center; gap: 6px; color: var(--cc-muted); font-size: 12px; }
.measurement-panel__footer > span:has(svg) { color: #b54708; font-weight: 650; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 960px) {
  .measurement-form-grid, .measurement-item__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measurement-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measurement-metrics > div:nth-child(2) { border-right: 0; }
  .measurement-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--cc-border); }
  .measurement-item__results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .measurement-item__results > div:nth-child(3) { border-right: 0; }
  .measurement-item__results > div:nth-child(-n+3) { border-bottom: 1px solid var(--cc-border); }
}

@media (max-width: 720px) {
  .measurement-panel__heading, .measurement-context__identity, .measurement-section__heading, .measurement-panel__footer { align-items: stretch; flex-direction: column; }
  .measurement-panel__actions, .measurement-panel__actions :deep(.el-button), .measurement-panel__footer > div, .measurement-panel__footer :deep(.el-button) { width: 100%; }
  .measurement-panel__actions :deep(.el-button), .measurement-panel__footer :deep(.el-button), .measurement-section__heading :deep(.el-button) { min-height: 44px; }
  .measurement-tags { justify-content: flex-start; }
  .measurement-context, .measurement-section { padding-right: 14px; padding-left: 14px; }
  .measurement-panel > :deep(.el-alert), .measurement-alert { margin-right: 14px; margin-left: 14px; }
  .measurement-form-grid, .measurement-item__grid, .measurement-item__advanced .measurement-item__grid { grid-template-columns: 1fr; }
  .measurement-item__advanced .span-two { grid-column: auto; }
  .measurement-item__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measurement-item__results > div { border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
  .measurement-item__results > div:nth-child(even) { border-right: 0; }
  .measurement-item__results > div:last-child { border-bottom: 0; }
}

@media (max-width: 420px) {
  .measurement-metrics, .measurement-item__results { grid-template-columns: 1fr; }
  .measurement-metrics > div, .measurement-item__results > div { border-right: 0; border-bottom: 1px solid var(--cc-border); }
  .measurement-metrics > div:last-child, .measurement-item__results > div:last-child { border-bottom: 0; }
  .measurement-item > header { align-items: flex-start; }
}
</style>