vue3-element-plus-app-chu 0.0.13 → 0.0.15

package/src/view/dcps/forecast/index.vue

@@ -1,66 +1,1012 @@
+<script lang="ts">
+import type { ForecastRow as ForecastRowType } from './typs'
+
+/**
+ * 列表记录缓存。
+ * 详情和修改接口没有返回全部字段，路由跳转前暂存列表记录，用于补齐页面展示和表单回填。
+ * 直接打开或刷新详情地址时没有缓存，页面会按预报流水号单独请求详情。
+ */
+const rows = new Map<string, ForecastRowType>()
+
+const rememberForecastRow = (row: ForecastRowType) => {
+  const predRefNo = row.predRefNo?.trim()
+  if (predRefNo) rows.set(predRefNo, row)
+}
+
+const recallForecastRow = (predRefNo?: string): ForecastRowType | null => {
+  const key = predRefNo?.trim()
+  return key ? rows.get(key) ?? null : null
+}
+</script>
+
 <script setup lang="ts">
-import { ref } from 'vue'
-import ForecastListView from './components/ForecastListView.vue'
-import ForecastEditorView from './components/ForecastEditorView.vue'
-import ForecastDetailView from './components/ForecastDetailView.vue'
-import type { ForecastEditorMode, ForecastRow } from './typs'
+import { computed, onActivated, onBeforeUnmount, reactive, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import API from './api'
+import { ArtDataTable, type ColumnOption, type PaginationOptions, type TableSettings } from '@/components/table'
+import type {
+  ApiResponse,
+} from '@/utils/request'
+import type {
+  ForecastCreateBody,
+  ForecastDetail,
+  ForecastDetailFields,
+  ForecastEditBody,
+  ForecastFilters,
+  ForecastFormValues,
+  ForecastListBody,
+  ForecastRow,
+} from './typs'
 
-defineOptions({ name: 'DigitalRmbForecastPage' })
+defineOptions({ name: 'DcpsForecastPage' })
 
 /**
- * 页面外壳：列表、新增、修改和详情都在当前路由内切换，
- * 项目未引入路由库，切换方式与侧边菜单一致。
+ * 预报页面：列表、新增/修改、详情共用一个入口文件。
+ * 路由通过 mode 区分页面形态：create/edit 为表单页，detail 为详情页，缺省为列表。
  */
-const view = ref<'list' | 'editor' | 'detail'>('list')
-const editorMode = ref<ForecastEditorMode>('create')
-const activeRow = ref<ForecastRow | null>(null) // 修改和详情使用的列表记录。
-const listRef = ref<InstanceType<typeof ForecastListView> | null>(null)
+const props = defineProps<{
+  mode?: 'create' | 'edit' | 'detail' // 页面形态；缺省为列表页。
+  predRefNo?: string // 修改、详情模式的预报流水号，来自路由参数。
+  tranDate?: string // 新增模式的默认交易日期，格式为 YYYYMMDD。
+}>()
 
-const openCreate = () => {
-  editorMode.value = 'create'
-  activeRow.value = null
-  view.value = 'editor'
+const router = useRouter()
+const isEditor = computed(() => props.mode === 'create' || props.mode === 'edit')
+const isDetail = computed(() => props.mode === 'detail')
+
+// ---------- 页面内工具函数 ----------
+
+/** 列表查询结果：当前页记录和符合条件的总条数。 */
+interface ForecastPage {
+  data: ForecastRow[] // 当前页的预报记录。
+  total: number // 符合查询条件的总记录数。
+}
+
+/** 校验公共响应头；retCode 不是 00000 时按服务端提示或 fallback 抛错。 */
+const ensureSuccess = <T,>(response: ApiResponse<T>, fallback: string): T | null => {
+  if (response?.head?.retCode !== '00000') {
+    throw new Error(response?.head?.retMsg?.trim() || fallback)
+  }
+  return response.body
+}
+
+/** 提取可展示的错误信息；无法识别时给出统一提示。 */
+const getErrorMessage = (error: unknown): string => {
+  if (error instanceof Error && error.message.trim()) return error.message
+  if (typeof error === 'string' && error.trim()) return error
+  return '操作失败，请稍后重试'
+}
+
+/** 业务日期始终按上海时区生成，不依赖浏览器所在时区，格式为 YYYYMMDD。 */
+const getToday = (): string => {
+  const parts = new Intl.DateTimeFormat('en-CA', {
+    timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit',
+  }).formatToParts(new Date())
+  const read = (type: Intl.DateTimeFormatPartTypes) => parts.find((part) => part.type === type)?.value || ''
+  return read('year') + read('month') + read('day')
+}
+
+/** 判断是否为合法的 YYYYMMDD 日期。 */
+const isValidDate = (value: string): boolean => {
+  if (!/^\d{8}$/.test(value)) return false
+  const year = Number(value.slice(0, 4))
+  const month = Number(value.slice(4, 6))
+  const day = Number(value.slice(6, 8))
+  if (year < 1 || month < 1 || month > 12 || day < 1) return false
+  const leap = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)
+  const monthDays = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+  return day <= (monthDays[month - 1] || 0)
+}
+
+/** 把 YYYYMMDD 格式化为 YYYY-MM-DD 展示；空值显示横线，其他格式保留原文。 */
+const formatDate = (value?: string): string => {
+  const text = value?.trim() || ''
+  if (!text) return '—'
+  return isValidDate(text) ? `${text.slice(0, 4)}-${text.slice(4, 6)}-${text.slice(6, 8)}` : text
+}
+
+/** 只接受十进制文本和合法千分位；保留全部小数位，避免改变输入精度。 */
+const normalizeAmount = (value: string): string => {
+  let text = value.trim()
+  if (text.includes(',')) {
+    if (!/^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/.test(text)) return ''
+    text = text.replace(/,/g, '')
+  }
+  const match = /^([+-]?)(\d*)(?:\.(\d*))?$/.exec(text)
+  if (!match || (!match[2] && !match[3])) return ''
+  const integer = (match[2] || '0').replace(/^0+(?=\d)/, '')
+  const fraction = match[3] || ''
+  const negative = match[1] === '-' && /[1-9]/.test(integer + fraction)
+  return `${negative ? '-' : ''}${integer}${fraction ? `.${fraction}` : ''}`
+}
+
+/** 千分位展示至少两位小数，超过两位的小数原样保留，不做浮点数转换或舍入。 */
+const formatAmount = (value?: string): string => {
+  const original = value?.trim() || ''
+  if (!original) return '—'
+  const normalized = normalizeAmount(original)
+  if (!normalized) return original
+  const negative = normalized.startsWith('-')
+  const [integer = '0', fraction = ''] = (negative ? normalized.slice(1) : normalized).split('.')
+  const grouped = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return `${negative ? '-' : ''}${grouped}.${fraction.padEnd(2, '0')}`
+}
+
+/** 按统一小数位数转为 BigInt，任意长度的十进制金额都可精确比较。 */
+const compareAmounts = (left: string, right: string): number => {
+  const leftText = normalizeAmount(left)
+  const rightText = normalizeAmount(right)
+  if (!leftText || !rightText) {
+    if (!leftText && !rightText) return 0
+    return leftText ? -1 : 1
+  }
+  const parts = (text: string) => {
+    const negative = text.startsWith('-')
+    const [integer = '0', fraction = ''] = (negative ? text.slice(1) : text).split('.')
+    return { negative, integer, fraction }
+  }
+  const a = parts(leftText)
+  const b = parts(rightText)
+  const precision = Math.max(a.fraction.length, b.fraction.length)
+  const toInteger = (amount: ReturnType<typeof parts>) =>
+    BigInt(amount.integer + amount.fraction.padEnd(precision, '0')) * (amount.negative ? -1n : 1n)
+  const aValue = toInteger(a)
+  const bValue = toInteger(b)
+  return aValue < bValue ? -1 : aValue > bValue ? 1 : 0
 }
+
+/** 新增和导入使用的表单初始值；日期默认取当天。 */
+const createFormValues = (): ForecastFormValues => {
+  const today = getToday()
+  return {
+    billDate: '', billNo: '', busiType: '', clientName: '', clientType: '',
+    competAcct: '', competName: '', custInfoSeq: '', groundBranch: '', groundBranchName: '',
+    linkMan: '', payChannel: '', payDirec: '', phoneNo: '', predAmt: '', predDate: today,
+    predName: '', predOrgName: '', purpose: '', remark: '', tranDate: today,
+  }
+}
+
+/**
+ * 校验表单；新增校验全部必填项，修改只校验已填写的字段。
+ * @param values 表单值。
+ * @param mode create 为新增，edit 为修改。
+ * @returns 错误提示文本，空字符串表示校验通过。
+ */
+const validateForm = (values: ForecastFormValues, mode: 'create' | 'edit' = 'create'): string => {
+  const requiredFields = [
+    ['clientName', '客户名称'], ['payDirec', '收支方向'], ['busiType', '业务类型'],
+    ['payChannel', '支付渠道'], ['groundBranch', '落地机构'],
+  ] as const
+  if (mode === 'create') {
+    for (const [key, label] of requiredFields) {
+      if (!values[key].trim()) return `请填写${label}`
+    }
+  }
+  for (const [key, label] of [['tranDate', '交易日期'], ['predDate', '预报日期']] as const) {
+    const date = values[key].trim()
+    if ((date || mode === 'create') && !isValidDate(date)) return `${label}须为有效日期，格式为 YYYYMMDD`
+  }
+  if (values.billDate.trim() && !isValidDate(values.billDate.trim())) {
+    return '出票日须为有效日期，格式为 YYYYMMDD'
+  }
+  if (values.predAmt.trim() || mode === 'create') {
+    const amount = normalizeAmount(values.predAmt)
+    if (!amount || amount.startsWith('-') || (amount.split('.')[1]?.length || 0) > 2) {
+      return '预报金额须为非负金额，最多保留两位小数'
+    }
+  }
+  return ''
+}
+
+/** 读取详情并与列表记录合并：详情没有的字段由同一条列表记录补充。 */
+const fetchDetail = async (row: ForecastRow): Promise<ForecastDetail> => {
+  if (!row.predRefNo?.trim()) throw new Error('预报流水号缺失，无法读取详情')
+  const body = ensureSuccess<any>(await API.getDetailApi({ predRefNo: row.predRefNo }), '读取预报详情失败')
+  if (!body || !Object.keys(body).length) throw new Error('服务端未返回预报详情')
+  if (body.predRefNo && body.predRefNo !== row.predRefNo) throw new Error('返回的预报流水号与当前记录不一致')
+  const definedBody = Object.fromEntries(Object.entries(body).filter(([, value]) => value !== undefined && value !== null))
+  return { ...row, ...definedBody } as ForecastDetail
+}
+
+/** 校验列表响应并取出当前页数据；列表缺失或总条数无效时抛出可提示的错误。 */
+const readPage = (body: ForecastListBody | null): ForecastPage => {
+  if (!body || !Array.isArray(body.resultList)) throw new Error('查询结果缺少预报列表，请联系服务端确认返回数据')
+  const totalText = String(body.totalCount ?? body.resultList.length)
+  const total = Number(totalText)
+  if (!/^\d+$/.test(totalText) || !Number.isSafeInteger(total)) throw new Error('查询返回的总条数无效')
+  return { data: body.resultList, total }
+}
+
+let disposed = false
+onBeforeUnmount(() => { disposed = true })
+
+// ---------- 列表页 ----------
+
+type ListMutation = 'delete' | null
+const createFilters = (): ForecastFilters => ({
+  tranDate: getToday(), clientName: '', competName: '', payDirec: '', busiType: '', payChannel: '',
+  groundBranch: '', predStatus: '', verifyStatus: '', startTransAmt: '', endTransAmt: '', sortRule: '',
+})
+const listFilters = ref(createFilters())
+let listAppliedQuery: ForecastFilters = { ...listFilters.value }
+// 重复输入项共用一份配置，依次为字段、名称；输入框较窄，占位文案统一使用简短提示。
+const listTextFilters = [
+  ['clientName', '客户名称'],
+  ['competName', '交易对手名称'],
+  ['payDirec', '收支方向'],
+  ['busiType', '业务类型'],
+  ['payChannel', '支付渠道'],
+  ['groundBranch', '落地机构'],
+  ['predStatus', '预报状态'],
+  ['verifyStatus', '核销状态'],
+  ['sortRule', '排序规则'],
+] as const
+const listRows = ref<ForecastRow[]>([])
+const listSelectedRows = ref<ForecastRow[]>([])
+const listPagination = reactive({ current: 1, size: 15, total: 0 })
+const listPaginationOptions: PaginationOptions = { align: 'right', pageSizes: [15, 30, 50, 100], background: false }
+const listTableSettings = ref<TableSettings>({ size: 'small', stripe: true, border: true, headerBackground: true })
+const listShowSearchBar = ref(true)
+const listLoading = ref(false)
+const listQueryError = ref('')
+const listMutation = ref<ListMutation>(null)
+const listBusy = computed(() => listMutation.value !== null)
+const listTableRef = ref<InstanceType<typeof ArtDataTable> | null>(null)
+let listRequestId = 0
+
+const listHasReference = (row: ForecastRow) => Boolean(row.predRefNo?.trim())
+const listTextColumn = (prop: keyof ForecastRow, label: string, width: number, visible = true): ColumnOption<ForecastRow> => ({
+  prop, label, width, visible, showOverflowTooltip: true,
+  formatter: (row) => row[prop]?.trim() || '—',
+})
+const listColumns: ColumnOption<ForecastRow>[] = [
+  { type: 'selection', width: 42, fixed: 'left', selectable: listHasReference },
+  { type: 'globalIndex', label: '序号', width: 60, align: 'center' },
+  { ...listTextColumn('predRefNo', '预报流水号', 190), useSlot: true, slotName: 'reference' },
+  { ...listTextColumn('tranDate', '交易日期', 110), formatter: (row) => formatDate(row.tranDate) },
+  listTextColumn('clientName', '客户名称', 180),
+  listTextColumn('payDirec', '收支方向', 95),
+  listTextColumn('busiType', '业务类型', 110),
+  listTextColumn('payChannel', '支付渠道', 110),
+  { prop: 'predAmt', label: '预报金额（元）', width: 180, align: 'right', useSlot: true, slotName: 'amount' },
+  { prop: 'verifyAmt', label: '已核销金额（元）', width: 180, align: 'right', useSlot: true, slotName: 'verifiedAmount' },
+  listTextColumn('competName', '交易对手名称', 180),
+  listTextColumn('groundBranch', '落地机构', 160),
+  listTextColumn('predStatus', '预报状态', 100),
+  listTextColumn('verifyStatus', '核销状态', 100),
+  listTextColumn('competAcct', '交易对手账号', 190, false),
+  listTextColumn('clientType', '客户类型', 100, false),
+  listTextColumn('groundBranchCode', '落地机构代码', 150, false),
+  { ...listTextColumn('predDate', '预报日期', 110, false), formatter: (row) => formatDate(row.predDate) },
+  listTextColumn('predCode', '预报人员编号', 130, false),
+  listTextColumn('standardName', '标准名称', 150, false),
+  { key: 'actions', label: '操作', width: 165, fixed: 'right', align: 'center', useSlot: true },
+]
+
+const clearListSelection = () => {
+  listSelectedRows.value = []
+  listTableRef.value?.getElTable()?.clearSelection()
+}
+
+// 请求序号防止旧响应覆盖新结果；页码越界时最多补查一次。
+const loadList = async () => {
+  if (disposed) return
+  const currentId = ++listRequestId
+  const query = { ...listAppliedQuery }
+  const pageSize = listPagination.size
+  let pageIndex = listPagination.current
+  listLoading.value = true
+  listQueryError.value = ''
+  clearListSelection()
+  try {
+    for (let attempt = 0; attempt < 2; attempt += 1) {
+      const response = await API.queryListApi({ ...query, opType: 'query', pageIndex, pageSize })
+      if (disposed || currentId !== listRequestId) return
+      const page = readPage(ensureSuccess(response, '预报查询失败'))
+      const lastPage = Math.max(1, Math.ceil(page.total / pageSize))
+      if (pageIndex > lastPage && attempt === 0) {
+        pageIndex = lastPage
+        continue
+      }
+      listPagination.current = pageIndex
+      listPagination.total = page.total
+      listRows.value = page.data
+      return
+    }
+  } catch (error) {
+    if (disposed || currentId !== listRequestId) return
+    listRows.value = []
+    listPagination.total = 0
+    listQueryError.value = getErrorMessage(error)
+  } finally {
+    if (!disposed && currentId === listRequestId) listLoading.value = false
+  }
+}
+
+// 新查询从第一页开始；重置后复用同一查询流程。
+const searchList = () => {
+  if (listBusy.value) return
+  const next = Object.fromEntries(Object.entries(listFilters.value).map(([key, value]) => [key, String(value ?? '').trim()])) as ForecastFilters
+  if (!/^\d{8}$/.test(next.tranDate)) return void ElMessage.warning('请选择交易日期')
+  for (const key of ['startTransAmt', 'endTransAmt'] as const) {
+    if (!next[key]) continue
+    const normalized = normalizeAmount(next[key])
+    if (!/^\d+(?:\.\d{1,2})?$/.test(normalized)) return void ElMessage.warning('金额范围请输入非负数，最多保留两位小数')
+    next[key] = normalized
+  }
+  if (next.startTransAmt && next.endTransAmt && compareAmounts(next.startTransAmt, next.endTransAmt) > 0) {
+    return void ElMessage.warning('起始金额不能大于截止金额')
+  }
+  listAppliedQuery = next
+  listPagination.current = 1
+  void loadList()
+}
+const resetListFilters = () => {
+  listFilters.value = createFilters()
+  searchList()
+}
+// 更新分页；current 为目标页码，size 为每页条数，切换条数时 current 传入 1。
+const changeListPage = (current: number, size = listPagination.size) => {
+  if (listBusy.value) return
+  listPagination.current = current
+  listPagination.size = size
+  void loadList()
+}
+
+// 行内操作交给路由页面处理，这里只校验记录是否可用；整行记录用于补齐详情接口没有返回的字段。
 const openEdit = (row: ForecastRow) => {
-  editorMode.value = 'edit'
-  activeRow.value = row
-  view.value = 'editor'
+  if (listBusy.value || !listHasReference(row)) return
+  const predRefNo = row.predRefNo?.trim()
+  if (!predRefNo) return
+  rememberForecastRow(row)
+  void router.push({ name: 'forecast-edit', params: { predRefNo } })
 }
 const openDetail = (row: ForecastRow) => {
-  activeRow.value = row
-  view.value = 'detail'
+  if (listBusy.value || !listHasReference(row)) return
+  const predRefNo = row.predRefNo?.trim()
+  if (!predRefNo) return
+  rememberForecastRow(row)
+  void router.push({ name: 'forecast-detail', params: { predRefNo } })
 }
-// 返回列表时保留列表页状态；保存成功后回到列表并重新查询。
-const backToList = () => { view.value = 'list' }
-const onSaved = () => {
-  backToList()
-  void listRef.value?.refresh()
+const openCreate = () => {
+  if (listBusy.value) return
+  const tranDate = listAppliedQuery.tranDate
+  void router.push({ name: 'forecast-create', query: tranDate ? { tranDate } : {} })
 }
+
+async function deleteRecords(records: ForecastRow[]) {
+  if (listBusy.value || !records.length) return
+  const references = [...new Set(records.map((row) => row.predRefNo?.trim()).filter((value): value is string => Boolean(value)))]
+  if (!references.length) return void ElMessage.warning('选中记录缺少预报流水号')
+  listMutation.value = 'delete'
+  try {
+    await ElMessageBox.confirm(`确认删除选中的 ${references.length} 条预报记录？删除后将重新查询列表。`, '删除预报', {
+      confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning', distinguishCancelAndClose: true,
+    })
+    if (disposed) return
+    ensureSuccess(await API.deleteApi(references), '删除预报失败')
+    if (disposed) return
+    ElMessage.success('删除请求已处理')
+    await loadList()
+  } catch (error) {
+    if (!disposed && error !== 'cancel' && error !== 'close') ElMessage.error(getErrorMessage(error))
+  } finally {
+    if (!disposed) listMutation.value = null
+  }
+}
+
+// 列表页由 KeepAlive 缓存；每次回到列表时重新查询，保留筛选条件和分页。
+onActivated(() => {
+  if (!isEditor.value && !isDetail.value) void loadList()
+})
+
+// ---------- 新增 / 修改页 ----------
+
+type FieldKey = Exclude<keyof ForecastFormValues, 'custRefSeq'>
+type EditorField = {
+  key: FieldKey
+  label: string
+  kind?: 'date' | 'amount' | 'textarea'
+  placeholder?: string
+  createOnly?: boolean
+}
+
+const editorMode = computed<'create' | 'edit'>(() => props.mode === 'edit' ? 'edit' : 'create')
+
+/** 修改时允许提交的字段；与新增接口保持同一组业务字段。 */
+const editableFields = [
+  'billNo', 'busiType', 'clientName', 'clientType', 'competAcct', 'competName', 'groundBranch',
+  'groundBranchName', 'linkMan', 'payChannel', 'payDirec', 'phoneNo', 'predAmt', 'predDate',
+  'purpose', 'remark', 'tranDate',
+] as const
+
+const fieldGroups: { title: string; fields: EditorField[] }[] = [
+  {
+    title: '基本预报',
+    fields: [
+      { key: 'tranDate', label: '交易日期', kind: 'date' },
+      { key: 'predDate', label: '预报日期', kind: 'date' },
+      { key: 'predAmt', label: '预报金额（元）', kind: 'amount', placeholder: '请输入金额，最多两位小数' },
+      { key: 'payDirec', label: '收支方向代码', placeholder: '请输入收支方向代码' },
+      { key: 'busiType', label: '业务类型代码', placeholder: '请输入业务类型代码' },
+      { key: 'payChannel', label: '支付渠道代码', placeholder: '请输入支付渠道代码' },
+      { key: 'clientName', label: '客户名称' },
+      { key: 'clientType', label: '客户类型代码', placeholder: '请输入客户类型代码' },
+    ],
+  },
+  {
+    title: '机构与客户',
+    fields: [
+      { key: 'groundBranch', label: '落地机构代码' },
+      { key: 'groundBranchName', label: '落地机构名称' },
+      { key: 'competName', label: '交易对手名称' },
+      { key: 'competAcct', label: '交易对手账号' },
+      { key: 'custInfoSeq', label: '客户信息流水号' },
+      { key: 'linkMan', label: '联系人' },
+      { key: 'phoneNo', label: '联系电话' },
+    ],
+  },
+  {
+    title: '其他信息',
+    fields: [
+      { key: 'predName', label: '预报人员姓名', createOnly: true },
+      { key: 'predOrgName', label: '预报机构名称', createOnly: true },
+      { key: 'billNo', label: '票号' },
+      { key: 'billDate', label: '出票日期', kind: 'date' },
+      { key: 'purpose', label: '用途', kind: 'textarea' },
+      { key: 'remark', label: '备注', kind: 'textarea' },
+    ],
+  },
+]
+
+const form = reactive<ForecastFormValues>(createFormValues())
+const formError = ref('')
+const editorLoading = ref(false) // 读取修改前的原始数据。
+const submitting = ref(false) // 提交新增或修改。
+const loadError = ref('')
+const initialValues = ref<Partial<ForecastFormValues>>({})
+const requiredFields = new Set<FieldKey>(['clientName', 'payDirec', 'busiType', 'payChannel', 'groundBranch', 'tranDate', 'predDate', 'predAmt'])
+const editorDisabled = computed(() => editorLoading.value || submitting.value)
+const editorPredRefNo = computed(() => props.predRefNo?.trim() || '')
+const editorTitle = computed(() => editorMode.value === 'create' ? '新增数字人民币头寸预报' : '修改数字人民币头寸预报')
+const visibleGroups = computed(() => fieldGroups.map(group => ({
+  ...group,
+  fields: group.fields.filter(field => !field.createOnly || editorMode.value === 'create'),
+})))
+
+const initialFieldValue = (key: FieldKey) => {
+  if (key === 'custInfoSeq') return initialValues.value.custInfoSeq ?? initialValues.value.custRefSeq
+  return initialValues.value[key]
+}
+
+// 修改模式下接口没有返回的字段留空保存，避免用空值覆盖服务端已有内容。
+const isMissingField = (key: FieldKey) => editorMode.value === 'edit' && initialFieldValue(key) === undefined
+
+const fieldPlaceholder = (field: EditorField) => {
+  if (isMissingField(field.key)) return '未返回，留空保留原值'
+  if (field.kind === 'date') return '请选择日期'
+  return field.placeholder || `请输入${field.label}`
+}
+
+// 新增模式带出默认日期；修改模式只回填接口返回的字段。
+const initializeForm = () => {
+  const nextValues = createFormValues()
+  if (editorMode.value === 'create') {
+    nextValues.tranDate = props.tranDate || getToday()
+    nextValues.predDate = getToday()
+  } else {
+    for (const key of Object.keys(nextValues) as FieldKey[]) {
+      const value = initialFieldValue(key)
+      if (value !== undefined) nextValues[key] = value
+    }
+  }
+  delete nextValues.custRefSeq
+  Object.assign(form, nextValues)
+  formError.value = ''
+}
+
+// 详情接口没有的字段由同一条列表记录补充，这里只挑选可提交的字符串字段。
+const buildInitialValues = (detail: ForecastDetail): Partial<ForecastFormValues> => {
+  const initial: Partial<ForecastFormValues> = {}
+  for (const key of editableFields) {
+    const value = detail[key as keyof ForecastDetail]
+    if (typeof value === 'string') initial[key] = value
+  }
+  if (detail.groundBranchCode) initial.groundBranch = detail.groundBranchCode
+  if (detail.billSignDate !== undefined) initial.billDate = detail.billSignDate
+  const customerFields = detail as ForecastDetailFields
+  const customerReference = customerFields.custRefSeq ?? customerFields.custInfoSeq
+  if (typeof customerReference === 'string') initial.custInfoSeq = customerReference
+  return initial
+}
+
+// 修改模式先读取原始数据，再回填表单；读取失败时停留在页面提示原因。
+const loadEditorDetail = async () => {
+  if (editorMode.value !== 'edit') return
+  if (!editorPredRefNo.value) {
+    loadError.value = '预报流水号缺失，无法修改'
+    return
+  }
+  editorLoading.value = true
+  loadError.value = ''
+  try {
+    const cachedRow = recallForecastRow(editorPredRefNo.value)
+    const detailRow: ForecastRow = { ...cachedRow, predRefNo: editorPredRefNo.value }
+    initialValues.value = buildInitialValues(await fetchDetail(detailRow))
+    if (disposed) return
+    initializeForm()
+  } catch (error) {
+    if (!disposed) loadError.value = getErrorMessage(error)
+  } finally {
+    if (!disposed) editorLoading.value = false
+  }
+}
+
+// 新增或修改页每次进入都重新初始化（页面实例由 KeepAlive 缓存）。
+onActivated(() => {
+  if (!isEditor.value) return
+  if (editorMode.value === 'create') initializeForm()
+  else void loadEditorDetail()
+})
+
+watch(form, () => { formError.value = '' }, { deep: true })
+
+const backToList = () => void router.replace({ name: 'forecast' })
+
+// 日期控件清空时可能产生 null，提交前统一回到协议要求的字符串。
+const submit = async () => {
+  if (editorDisabled.value || loadError.value) return
+  const values = Object.fromEntries(Object.entries(form).map(([key, value]) => [key, String(value ?? '').trim()])) as ForecastFormValues
+  formError.value = validateForm(values, editorMode.value)
+  if (!formError.value && editorMode.value === 'edit') {
+    const clearedField = fieldGroups.flatMap(group => group.fields).find(field =>
+      requiredFields.has(field.key) && initialFieldValue(field.key)?.trim() && !values[field.key],
+    )
+    if (clearedField) formError.value = `请填写${clearedField.label}`
+  }
+  if (formError.value) return
+
+  submitting.value = true
+  try {
+    if (editorMode.value === 'create') {
+      const body: ForecastCreateBody = {}
+      for (const [key, value] of Object.entries(values)) {
+        if (key !== 'custRefSeq' && value?.trim()) Object.assign(body, { [key]: value.trim() })
+      }
+      if (body.predAmt) body.predAmt = normalizeAmount(body.predAmt)
+      ensureSuccess(await API.addApi(body), '新增预报失败')
+    } else {
+      if (!editorPredRefNo.value) throw new Error('预报流水号缺失，无法修改')
+      const body: ForecastEditBody = { predRefSeq: editorPredRefNo.value }
+      for (const key of [...editableFields, 'billDate'] as const) {
+        const value = values[key]?.trim() || ''
+        if (Object.hasOwn(initialValues.value, key) || value) Object.assign(body, { [key]: value })
+      }
+      const customerReference = values.custRefSeq?.trim() || values.custInfoSeq.trim()
+      if (Object.hasOwn(initialValues.value, 'custInfoSeq') || Object.hasOwn(initialValues.value, 'custRefSeq') || customerReference) {
+        body.custRefSeq = customerReference
+      }
+      if (body.predAmt) body.predAmt = normalizeAmount(body.predAmt)
+      ensureSuccess(await API.editApi(body), '修改预报失败')
+    }
+    if (disposed) return
+    ElMessage.success(editorMode.value === 'create' ? '新增请求已处理' : '修改请求已处理')
+    await router.replace({ name: 'forecast' })
+  } catch (error) {
+    if (!disposed) ElMessage.error(getErrorMessage(error))
+  } finally {
+    if (!disposed) submitting.value = false
+  }
+}
+
+// ---------- 详情页 ----------
+
+type DetailField = { key: keyof ForecastDetail; label: string; kind?: 'date' | 'amount' | 'status' }
+
+const detailGroups: { title: string; fields: DetailField[] }[] = [
+  {
+    title: '预报信息',
+    fields: [
+      { key: 'predRefNo', label: '预报流水号' },
+      { key: 'predDate', label: '预报日期', kind: 'date' },
+      { key: 'tranDate', label: '交易日期', kind: 'date' },
+      { key: 'predAmt', label: '预报金额（元）', kind: 'amount' },
+      { key: 'predCode', label: '预报人员编号' },
+      { key: 'standardName', label: '标准名称' },
+      { key: 'predStatus', label: '预报状态代码', kind: 'status' },
+      { key: 'verifyStatus', label: '核销状态代码', kind: 'status' },
+      { key: 'verifyAmt', label: '已核销金额（元）', kind: 'amount' },
+      { key: 'edusFlag', label: '释放状态代码', kind: 'status' },
+    ],
+  },
+  {
+    title: '业务与客户',
+    fields: [
+      { key: 'busiType', label: '业务类型代码' },
+      { key: 'payDirec', label: '收支方向代码' },
+      { key: 'payChannel', label: '支付渠道代码' },
+      { key: 'clientName', label: '客户名称' },
+      { key: 'clientType', label: '客户类型代码' },
+      { key: 'competName', label: '交易对手名称' },
+      { key: 'competAcct', label: '交易对手账号' },
+    ],
+  },
+  {
+    title: '机构与票据',
+    fields: [
+      { key: 'groundBranch', label: '落地机构' },
+      { key: 'groundBranchCode', label: '机构代码' },
+      { key: 'groundBranchName', label: '落地机构名称' },
+      { key: 'billNo', label: '票号' },
+      { key: 'billSignDate', label: '出票日期', kind: 'date' },
+    ],
+  },
+]
+
+const detail = ref<ForecastDetail | null>(null)
+const detailLoading = ref(false)
+const detailError = ref('')
+const detailPredRefNo = computed(() => props.predRefNo?.trim() || '')
+const detailTitle = computed(() => detailPredRefNo.value ? `预报详情 · ${detailPredRefNo.value}` : '数字人民币头寸预报详情')
+const detailRow = computed<ForecastRow>(() => ({ ...recallForecastRow(detailPredRefNo.value), predRefNo: detailPredRefNo.value }))
+
+const openEditFromDetail = () => {
+  const predRefNo = detailPredRefNo.value
+  if (!predRefNo) return
+  const row = recallForecastRow(predRefNo)
+  if (row) rememberForecastRow(row)
+  void router.push({ name: 'forecast-edit', params: { predRefNo } })
+}
+
+const displayValue = (field: DetailField) => {
+  const value = detail.value?.[field.key]
+  if (value === undefined || value === null || value === '') return '—'
+  if (field.kind === 'amount') return formatAmount(value)
+  if (field.kind === 'date') return formatDate(value)
+  return String(value)
+}
+
+const loadDetail = async () => {
+  if (detailLoading.value || !detailPredRefNo.value) return
+  detailLoading.value = true
+  detail.value = null
+  detailError.value = ''
+  try {
+    const result = await fetchDetail(detailRow.value)
+    if (!disposed) detail.value = result
+  } catch (requestError) {
+    if (!disposed) detailError.value = getErrorMessage(requestError)
+  } finally {
+    if (!disposed) detailLoading.value = false
+  }
+}
+
+// 详情页每次进入都按预报流水号读取最新数据（页面实例由 KeepAlive 缓存）。
+onActivated(() => {
+  if (isDetail.value) void loadDetail()
+})
 </script>
 
 <template>
-  <!-- 列表页保持挂载，返回后筛选条件、分页和滚动位置不变。 -->
-  <ForecastListView
-    v-show="view === 'list'"
-    ref="listRef"
-    @create="openCreate"
-    @edit="openEdit"
-    @detail="openDetail"
-  />
-  <ForecastEditorView
-    v-if="view === 'editor'"
-    :key="`${editorMode}-${activeRow?.predRefNo ?? 'new'}`"
-    :mode="editorMode"
-    :row="activeRow"
-    :tran-date="listRef?.getQueryDate()"
-    @back="backToList"
-    @saved="onSaved"
-  />
-  <ForecastDetailView
-    v-else-if="view === 'detail'"
-    :key="activeRow?.predRefNo"
-    :row="activeRow!"
-    @back="backToList"
-    @edit="openEdit"
-  />
+  <!-- 新增 / 修改页 -->
+  <main v-if="isEditor" class="page-shell">
+    <el-card class="shell-header" shadow="never" :body-style="{ padding: '10px' }">
+      <div class="shell-heading">
+        <el-button class="shell-back" :disabled="submitting" @click="backToList">
+          <svg class="shell-back-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M14 5l-7 7 7 7" />
+          </svg>
+          返回列表
+        </el-button>
+        <h1 class="shell-title">{{ editorTitle }}</h1>
+      </div>
+    </el-card>
+    <el-card class="editor-card" shadow="never" :body-style="{ padding: '12px 16px' }">
+      <div class="editor-body">
+        <div v-loading="editorLoading" class="editor-scroll">
+          <el-alert v-if="loadError" class="editor-load-error" :title="loadError" type="error" show-icon :closable="false">
+            <el-button link type="primary" :disabled="editorDisabled" @click="loadEditorDetail">重新加载</el-button>
+            <el-button link type="primary" :disabled="editorDisabled" @click="backToList">返回列表</el-button>
+          </el-alert>
+          <template v-else>
+            <p class="editor-note">金额单位为元，方向、业务类型、支付渠道和客户类型按业务代码填写。</p>
+            <el-form :model="form" size="small" label-position="top" :disabled="editorDisabled" @submit.prevent="submit">
+              <section v-for="group in visibleGroups" :key="group.title" class="editor-group" :aria-label="group.title">
+                <h3>{{ group.title }}</h3>
+                <div class="editor-fields">
+                  <el-form-item
+                    v-for="field in group.fields"
+                    :key="field.key"
+                    :prop="field.key"
+                    :required="editorMode === 'create' && requiredFields.has(field.key)"
+                    :class="{ 'editor-field--wide': field.kind === 'textarea' }"
+                  >
+                    <template #label>
+                      <span>{{ field.label }}</span>
+                      <span v-if="isMissingField(field.key)" class="field-unavailable">未返回</span>
+                    </template>
+                    <el-date-picker
+                      v-if="field.kind === 'date'"
+                      v-model="form[field.key]"
+                      type="date"
+                      format="YYYY-MM-DD"
+                      value-format="YYYYMMDD"
+                      :placeholder="fieldPlaceholder(field)"
+                      :editable="false"
+                      clearable
+                    />
+                    <el-input
+                      v-else-if="field.kind === 'textarea'"
+                      v-model="form[field.key]"
+                      type="textarea"
+                      :rows="2"
+                      :placeholder="fieldPlaceholder(field)"
+                      resize="vertical"
+                    />
+                    <el-input
+                      v-else
+                      v-model="form[field.key]"
+                      :inputmode="field.kind === 'amount' ? 'decimal' : 'text'"
+                      :placeholder="fieldPlaceholder(field)"
+                      clearable
+                      autocomplete="off"
+                    />
+                  </el-form-item>
+                </div>
+              </section>
+            </el-form>
+          </template>
+        </div>
+
+        <div class="editor-footer">
+          <p v-if="formError" class="editor-error" role="alert" aria-live="polite">{{ formError }}</p>
+          <span v-else class="editor-tip">{{ editorMode === 'create' ? '带 * 的字段为新增必填项。' : '留空的字段表示不修改该字段的原值。' }}</span>
+          <el-space :size="8">
+            <el-button :disabled="submitting" @click="backToList">返回列表</el-button>
+            <el-button type="primary" :disabled="editorDisabled || !!loadError" :loading="submitting" @click="submit">
+              {{ editorMode === 'create' ? '新增预报' : '保存修改' }}
+            </el-button>
+          </el-space>
+        </div>
+      </div>
+    </el-card>
+  </main>
+
+  <!-- 详情页 -->
+  <main v-else-if="isDetail" class="page-shell">
+    <el-card class="shell-header" shadow="never" :body-style="{ padding: '10px' }">
+      <div class="shell-heading">
+        <el-button class="shell-back" :disabled="detailLoading" @click="backToList">
+          <svg class="shell-back-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M14 5l-7 7 7 7" />
+          </svg>
+          返回列表
+        </el-button>
+        <h1 class="shell-title">{{ detailTitle }}</h1>
+        <el-button v-if="detail" type="primary" :disabled="detailLoading" @click="openEditFromDetail">修改预报</el-button>
+      </div>
+    </el-card>
+    <el-card class="detail-card" shadow="never" :body-style="{ padding: '12px 16px' }">
+      <div v-loading="detailLoading" class="detail-scroll">
+        <div v-if="detailError" class="detail-error" role="alert">
+          <el-alert :title="detailError" type="error" :closable="false" show-icon />
+          <el-button size="small" :disabled="detailLoading" @click="loadDetail">重新加载</el-button>
+        </div>
+        <div v-else-if="detail" class="detail-content">
+          <!-- group 为当前详情分组，fields 中的每项对应一个字段。 -->
+          <section v-for="group in detailGroups" :key="group.title" class="detail-group" :aria-label="group.title">
+            <h3>{{ group.title }}</h3>
+            <dl class="detail-fields">
+              <div v-for="field in group.fields" :key="field.key" class="detail-field">
+                <dt>{{ field.label }}</dt>
+                <dd :class="{ 'detail-amount': field.kind === 'amount', 'detail-status': field.kind === 'status' }">{{ displayValue(field) }}</dd>
+              </div>
+            </dl>
+          </section>
+        </div>
+        <el-empty v-else-if="!detailLoading" description="暂无预报详情" :image-size="64" />
+      </div>
+    </el-card>
+  </main>
+
+  <!-- 列表页 -->
+  <main v-else class="dcps-page">
+    <!-- 查询条件：紧凑排列为一整行，控件尺寸跟随表格设置，卡片内边距为 10px，点击查询生效。 -->
+    <el-card v-show="listShowSearchBar" class="forecast-search" shadow="never" :body-style="{ padding: '10px' }">
+      <el-form class="filter-form" :model="listFilters" :size="listTableSettings.size" label-position="top" @submit.prevent="searchList">
+        <el-form-item class="filter-date" label="交易日期" required>
+          <el-date-picker v-model="listFilters.tranDate" type="date" format="YYYY-MM-DD" value-format="YYYYMMDD" :clearable="false" :editable="false" />
+        </el-form-item>
+        <!-- label 为查询字段名称，输入框较窄，占位文案统一为简短提示。 -->
+        <el-form-item v-for="[key, label] in listTextFilters" :key="key" :label="label">
+          <el-input v-model="listFilters[key]" placeholder="请输入" :maxlength="200" clearable />
+        </el-form-item>
+        <el-form-item class="filter-amount" label="起始金额（元）">
+          <el-input v-model="listFilters.startTransAmt" placeholder="不限制" inputmode="decimal" :maxlength="40" clearable />
+        </el-form-item>
+        <el-form-item class="filter-amount" label="截止金额（元）">
+          <el-input v-model="listFilters.endTransAmt" placeholder="不限制" inputmode="decimal" :maxlength="40" clearable />
+        </el-form-item>
+        <el-space class="filter-actions" :size="8">
+          <el-button :disabled="listBusy" @click="resetListFilters">重置</el-button>
+          <el-button type="primary" native-type="submit" :loading="listLoading" :disabled="listBusy">查询</el-button>
+        </el-space>
+      </el-form>
+    </el-card>
+
+    <el-alert v-if="listQueryError" :title="listQueryError" type="error" show-icon :closable="false">
+      <el-button link type="primary" :disabled="listBusy" @click="loadList">重新查询</el-button>
+    </el-alert>
+
+    <div class="forecast-table-region">
+      <ArtDataTable
+        ref="listTableRef"
+        v-model:settings="listTableSettings"
+        v-model:show-search-bar="listShowSearchBar"
+        class="forecast-table"
+        fill
+        title="预报记录"
+        toolbar-layout="search,refresh,size,fullscreen,columns,settings"
+        :data="listRows"
+        :columns="listColumns"
+        :loading="listLoading || listBusy"
+        :pagination="listPagination"
+        :pagination-options="listPaginationOptions"
+        row-key="predRefNo"
+        :empty-text="listQueryError ? '查询失败，请重新查询' : '暂无符合条件的预报记录'"
+        @selection-change="(selection: ForecastRow[]) => listSelectedRows = selection"
+        @pagination:current-change="changeListPage"
+        @pagination:size-change="(size: number) => changeListPage(1, size)"
+        @refresh="!listBusy && loadList()"
+        @row-dblclick="openDetail"
+      >
+        <template #toolbar-left>
+          <div class="table-actions">
+            <el-button type="primary" :disabled="listBusy" @click="openCreate">新增预报</el-button>
+            <!-- 导入、导出由后端接口完成，按钮先保留页面入口，不在前端拼装文件。 -->
+            <el-button :disabled="listBusy">导入</el-button>
+            <el-button :disabled="listBusy || listLoading || !listRows.length">导出</el-button>
+            <el-button type="danger" plain :disabled="listBusy || listLoading || !listSelectedRows.length" @click="deleteRecords(listSelectedRows)">
+              批量删除<span v-if="listSelectedRows.length">（{{ listSelectedRows.length }}）</span>
+            </el-button>
+          </div>
+        </template>
+        <template #reference="{ row }">
+          <el-button v-if="listHasReference(row)" link type="primary" :disabled="listBusy" @click.stop="openDetail(row)" @dblclick.stop>
+            {{ row.predRefNo }}
+          </el-button>
+          <span v-else>—</span>
+        </template>
+        <template #amount="{ row }"><span class="amount-cell">{{ formatAmount(row.predAmt) }}</span></template>
+        <template #verifiedAmount="{ row }"><span class="amount-cell">{{ formatAmount(row.verifyAmt) }}</span></template>
+        <template #actions="{ row }">
+          <div class="row-actions" @dblclick.stop>
+            <el-button link type="primary" :disabled="listBusy || !listHasReference(row)" @click.stop="openDetail(row)">详情</el-button>
+            <el-button link type="primary" :disabled="listBusy || !listHasReference(row)" @click.stop="openEdit(row)">修改</el-button>
+            <el-button link type="danger" :disabled="listBusy || !listHasReference(row)" @click.stop="deleteRecords([row])">删除</el-button>
+          </div>
+        </template>
+      </ArtDataTable>
+    </div>
+  </main>
 </template>
+
+<style scoped>
+/* ---------- 列表页 ---------- */
+/* 页面先扣除宿主占用高度，再使用 flex 分配剩余高度，让列表内部滚动并保留分页。 */
+.dcps-page {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  height: calc(100vh - var(--dpcs-host-layout-height));
+  height: calc(100dvh - var(--dpcs-host-layout-height));
+  min-width: 0;
+  min-height: 0;
+  padding: 5px;
+  overflow: hidden;
+  background: var(--el-bg-color-page, #f7f8fa);
+}
+/* 筛选项压成一行，等分剩余宽度，窗口过窄时才换行并限制高度，为列表保留空间。 */
+.forecast-search {
+  flex: 0 0 auto;
+  max-height: min(42dvh, 360px);
+  overflow-y: auto;
+}
+.filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 6px; }
+.filter-form :deep(.el-form-item) { flex: 1 1 76px; min-width: 76px; margin: 0; }
+/* 日期和金额输入框内容更长，给出略大的基准宽度，剩余空间再由各列均分。 */
+.filter-form :deep(.filter-date) { flex: 1.5 0 116px; }
+.filter-form :deep(.filter-amount) { flex: 1.2 0 92px; }
+.filter-form :deep(.el-form-item__label) { height: auto; margin-bottom: 4px; padding: 0; font-size: 12px; line-height: 16px; }
+.filter-form :deep(.el-date-editor) { width: 100%; min-width: 0; }
+.filter-actions { flex: 0 0 auto; }
+.forecast-table-region { flex: 1; min-width: 0; min-height: 0; }
+.forecast-table { padding: 10px; }
+.table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.table-actions :deep(.el-button + .el-button), .row-actions :deep(.el-button + .el-button) { margin-left: 0; }
+.row-actions { display: flex; justify-content: center; gap: 10px; }
+.amount-cell { color: var(--el-text-color-primary); font-variant-numeric: tabular-nums; }
+@media (max-width: 640px) {
+  .filter-form :deep(.el-form-item) { flex-basis: 100%; }
+  .table-actions { gap: 5px; }
+}
+
+/* ---------- 新增 / 修改、详情页外壳 ---------- */
+/* 与列表页面一致：扣除宿主占用高度后，把剩余空间分给内容区，内容区内部滚动。 */
+.page-shell {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  height: calc(100vh - var(--dpcs-host-layout-height));
+  height: calc(100dvh - var(--dpcs-host-layout-height));
+  min-width: 0;
+  min-height: 0;
+  padding: 5px;
+  overflow: hidden;
+  background: var(--el-bg-color-page, #f7f8fa);
+}
+.shell-header { flex: 0 0 auto; }
+.shell-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
+.shell-back :deep(.el-button + .el-button) { margin-left: 0; }
+.shell-back-icon { width: 15px; height: 15px; margin-right: 4px; }
+.shell-title { margin: 0; color: var(--el-text-color-primary); font-size: 16px; font-weight: 600; line-height: 22px; }
+
+/* ---------- 新增 / 修改页 ---------- */
+.editor-card { flex: 1; min-height: 0; min-width: 0; }
+.editor-body { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 10px; }
+.editor-scroll { flex: 1; min-height: 0; padding-right: 2px; overflow-y: auto; }
+.editor-load-error { margin-bottom: 12px; }
+.editor-note { margin: 0 0 12px; color: var(--el-text-color-secondary); font-size: 12px; line-height: 1.6; }
+.editor-group + .editor-group { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--el-border-color-lighter); }
+.editor-group h3 { margin: 0 0 12px; color: var(--el-text-color-primary); font-size: 13px; font-weight: 600; line-height: 18px; }
+.editor-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 18px; }
+.editor-fields :deep(.el-form-item) { min-width: 0; margin-bottom: 14px; }
+.editor-fields :deep(.el-form-item__label) { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; padding: 0; line-height: 20px; }
+.editor-fields :deep(.el-date-editor.el-input) { width: 100%; }
+.editor-field--wide { grid-column: 1 / -1; }
+.field-unavailable { color: var(--el-text-color-secondary); font-size: 11px; font-weight: 400; }
+.editor-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--el-border-color-lighter); }
+.editor-tip { color: var(--el-text-color-secondary); font-size: 12px; }
+.editor-error { margin: 0; padding: 6px 10px; border: 1px solid var(--el-color-danger-light-7); border-radius: 4px; background: var(--el-color-danger-light-9); color: var(--el-color-danger); font-size: 12px; line-height: 1.6; }
+
+@media (max-width: 1400px) {
+  .editor-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 1000px) {
+  .editor-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 600px) {
+  .editor-fields { grid-template-columns: minmax(0, 1fr); }
+  .editor-field--wide { grid-column: auto; }
+}
+
+/* ---------- 详情页 ---------- */
+.detail-card { flex: 1; min-height: 0; min-width: 0; }
+.detail-scroll { height: 100%; padding-right: 2px; overflow-y: auto; }
+/* 与授权详情一致：分组标题在左，字段按四列排布，窗口变窄后逐级减少列数。 */
+.detail-content { display: grid; gap: 8px; font-size: 13px; line-height: 1.4; }
+.detail-group { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 8px; padding: 12px; border: 1px solid var(--el-border-color-lighter); border-radius: 8px; }
+.detail-group h3 { margin: 4px 0 0; padding-left: 8px; border-left: 3px solid var(--el-color-primary); color: var(--el-text-color-primary); font-size: 14px; line-height: 20px; }
+.detail-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
+.detail-field { min-width: 0; padding: 8px 12px; border-radius: 6px; background: var(--el-fill-color-lighter); }
+.detail-field dt { color: var(--el-text-color-secondary); font-size: 12px; }
+.detail-field dd { margin: 2px 0 0; color: var(--el-text-color-primary); font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
+.detail-amount { font-variant-numeric: tabular-nums; }
+.detail-status { color: #000; }
+.detail-error { display: grid; justify-items: start; gap: 12px; }
+
+@media (max-width: 1400px) {
+  .detail-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 1024px) {
+  .detail-group { grid-template-columns: minmax(0, 1fr); }
+  .detail-group h3 { margin-top: 0; }
+  .detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 640px) {
+  .detail-fields { grid-template-columns: minmax(0, 1fr); }
+}
+</style>