zsjz-ai/ai-frontend/packages/trans/views/largeAmount/index.vue

<template>
  <div :class="prefixCls" class="large-amount-page">
    <div class="page-header">
      <div class="page-title">大额交易</div>
      <div class="page-subtitle">按对象、金额和日期筛选大额交易，并联动查看交易趋势与对应明细。</div>
    </div>

    <div class="filter-bar">
      <div class="filter-item">
        <span class="filter-label">选择对象:</span>
        <Select
          v-model:value="filters.target"
          mode="multiple"
          allow-clear
          max-tag-count="responsive"
          class="filter-input"
          :options="targetOptions"
          placeholder="全部"
        />
      </div>
      <div class="filter-item">
        <span class="filter-label">交易日期:</span>
        <RangePicker v-model:value="filters.dateRange" class="filter-date" />
      </div>
      <div class="filter-item">
        <span class="filter-label">交易次数:</span>
        <Select v-model:value="filters.countOp" class="filter-op" :options="countOpOptions" />
        <Input v-model:value="filters.countValue" class="filter-mini" :status="countValueStatus" />
      </div>
      <div class="filter-item">
        <span class="filter-label">大额范围:</span>
        <Select v-model:value="filters.amountOp" class="filter-op" :options="countOpOptions" />
        <Input v-model:value="filters.amountValue" class="filter-mini" :status="amountValueStatus" />
      </div>
      <div class="filter-item">
        <span class="filter-label">对方姓名:</span>
        <Input v-model:value="filters.otherName" class="filter-input" placeholder="请输入对方姓名" />
      </div>
      <div class="filter-item">
        <span class="filter-label">对方卡号:</span>
        <Input v-model:value="filters.otherCardNo" class="filter-input" placeholder="请输入对方卡号" />
      </div>
      <div class="filter-actions">
        <Button type="primary" :loading="queryLoading" @click="handleSearch">查询</Button>
        <Button @click="handleReset">重置</Button>
      </div>
    </div>

    <div class="content-panel">
      <div class="left-panel">
        <div class="panel-header">
          <div>
            <div class="panel-title">大额交易汇总</div>
            <div class="panel-desc">找出与对象有大额交易记录的人员或卡，点击左侧记录可查看右侧趋势。</div>
          </div>
        </div>
        <div v-if="!hasSearched" class="query-state-panel">
          <EmptyState
            variant="query"
            title="请点击查询"
            description="设置条件精细查询，也可点击查询展示所有信息"
            min-height="100%"
            description-width="min(100%, 420px)"
          />
        </div>
        <div v-else class="table-panel">
          <div class="table-wrapper">
            <BasicTable
              :columns="summaryColumns"
              :data-source="summaryData"
              :pagination="false"
              :show-table-setting="false"
              :table-setting="{ setting: true, size: true, redo: false, fullScreen: false }"
              :can-resize="true"
              :is-can-resize-parent="true"
              :resize-height-offset="32"
              :rowClassName="summaryRowClassName"
              row-key="id"
              @change="handleTableChange"
              @row-click="handleSummaryRowClick"
            />
          </div>
        </div>
        <div v-if="hasSearched" class="pagination-bar">
          <AnalysisPagination
            :total="pagination.total"
            :current="pagination.current"
            :page-size="pagination.pageSize"
            :page-size-options="pageSizeOptions"
            :loading="queryLoading"
            @change="handlePaginationChange"
          />
        </div>
      </div>

      <div class="right-panel">
        <div class="panel-header">
          <div>
            <div class="panel-title">大额交易趋势</div>
            <div class="panel-desc">
              {{
                selectedSummaryRaw
                  ? `查看 ${selectedSummaryRaw.personName || '-'} 的大额交易时间分布`
                  : '请选择左侧汇总数据查看大额交易趋势。'
              }}
            </div>
          </div>
        </div>
        <div class="timeline-panel">
          <div v-if="timelineData.length" class="timeline-summary">
            <div class="timeline-stat-card">
              <div class="timeline-stat-label">活跃日期</div>
              <div class="timeline-stat-value">{{ timelineSummary.days }}</div>
            </div>
            <div class="timeline-stat-card">
              <div class="timeline-stat-label">交易总次数</div>
              <div class="timeline-stat-value">{{ timelineSummary.count }}</div>
            </div>
            <div class="timeline-stat-card emphasis">
              <div class="timeline-stat-label">交易总金额</div>
              <div class="timeline-stat-value">{{ timelineSummary.amount }}</div>
            </div>
          </div>

          <div class="timeline-wrapper">
            <template v-if="timelineData.length">
              <div class="timeline-line"></div>
              <div class="timeline-content">
                <div v-for="item in timelineData" :key="item.key" class="timeline-item">
                  <div class="timeline-date-block">
                    <div class="timeline-date">{{ item.date }}</div>
                  </div>
                  <button type="button" class="timeline-dot-button" @click="handleTimelineClick(item)">
                    <span class="timeline-dot"></span>
                  </button>
                  <div class="timeline-card" @click="handleTimelineClick(item)">
                    <div class="timeline-card-header">
                      <div class="timeline-card-main">
                        <div class="timeline-card-title">当日交易汇总</div>
                        <div class="timeline-card-subtitle">
                          {{ item.otherName || '-' }}
                          <template v-if="item.otherCardNo"> / {{ item.otherCardNo }}</template>
                        </div>
                      </div>
                      <div class="timeline-card-action">查看明细</div>
                    </div>

                    <div class="timeline-tags">
                      <span class="timeline-tag count">交易次数: {{ item.count }}</span>
                      <span class="timeline-tag amount">交易金额: {{ item.amountText }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <div v-else class="timeline-empty">
              <EmptyState
                variant="compact"
                title="暂无趋势数据"
                :description="timelineEmptyDescription"
                :min-height="260"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <TransRecordModal v-model:open="detailOpen" title="交易记录" :base-query="detailBaseQuery" />
  </div>
</template>
<script lang="ts" setup name="ViewsLargeAmountIndex">
  import { computed, onMounted, ref, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import dayjs, { type Dayjs } from 'dayjs';
  import { Select, Input, Button, DatePicker } from 'ant-design-vue';
  import AnalysisPagination from '@jeesite/core/components/AnalysisPagination/src/AnalysisPagination.vue';
  import { BasicTable } from '@jeesite/core/components/Table';
  import { EmptyState } from '@jeesite/core/components/EmptyState';
  import { useAnalysisRefreshPrompt } from '@jeesite/core/hooks/web/useAnalysisRefreshPrompt';
  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
  import { useTableSkill } from '@jeesite/core/hooks/web/useTableSkill';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import {
    COMPARE_OPERATOR_OPTIONS,
    DEFAULT_COMPARE_OPERATOR,
    normalizeCompareOperator,
  } from '@jeesite/core/utils/compareOperator';
  import { mergeDetailDateRange, pickDetailValue } from '@jeesite/core/utils/detailQuery';
  import { statFirstTransBig, statSecondTransBig } from '@jeesite/trans/api/transApi';
  import { getPersonOptions } from '@jeesite/person/api/personApi';
  import type { TransBigDTO } from '@jeesite/trans/api/types/dto';
  import type { TransBigQuery, TransRecordQuery } from '@jeesite/trans/api/types/query';
  import TransRecordModal from '../components/TransRecordModal.vue';

  const { prefixCls } = useDesign('large-amount');
  const { queryLoading, runWithQueryLoading } = useTableSkill();
  const { createMessage } = useMessage();
  const route = useRoute();
  const PAGE_PATH = '/largeAmount/index';
  const RangePicker = DatePicker.RangePicker;
  const DEFAULT_SUMMARY_SORT_KEY = 'transCount';
  const DEFAULT_SUMMARY_SORT_ORDER = 'DESC' as const;
  type RangeValue = [Dayjs, Dayjs] | null;
  type TimelineRow = {
    key: string;
    date: string;
    raw: TransBigDTO;
    count: number;
    amount: number;
    amountText: string;
    otherName: string;
    otherCardNo: string;
  };

  const createDefaultFilters = () => ({
    target: [] as string[],
    dateRange: null as RangeValue,
    countOp: DEFAULT_COMPARE_OPERATOR,
    countValue: '',
    amountOp: DEFAULT_COMPARE_OPERATOR,
    amountValue: '10000',
    otherName: '',
    otherCardNo: '',
    orderKey: DEFAULT_SUMMARY_SORT_KEY,
    sort: DEFAULT_SUMMARY_SORT_ORDER as '' | 'ASC' | 'DESC',
  });

  const filters = ref(createDefaultFilters());

  const selectedRow = ref<number | null>(null);

  const targetOptions = ref<Array<{ label: string; value: string }>>([]);
  const countValuePattern = /^[1-9]\d*$/;

  const normalizeSelectedTargets = (value?: string[] | string | null) => {
    if (Array.isArray(value)) {
      const list = value.map((item) => String(item).trim()).filter(Boolean);
      return list.length ? Array.from(new Set(list)) : [];
    }
    if (!value) return [];
    const list = String(value)
      .split(',')
      .map((item) => item.trim())
      .filter(Boolean);
    return list.length ? Array.from(new Set(list)) : [];
  };

  const countOpOptions = COMPARE_OPERATOR_OPTIONS.filter((o) => o.value === 'GE' || o.value === 'LE');
  const pageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({
    label: value,
    value: Number(value),
  }));

  const summaryColumns = [
    { title: '本方姓名', dataIndex: 'selfName', key: 'selfName', width: 120 },
    { title: '对方姓名/卡号', dataIndex: 'otherName', key: 'otherName', width: 200 },
    {
      title: '大额交易次数',
      dataIndex: 'count',
      key: 'transCount',
      width: 130,
      sorter: true,
      defaultSortOrder: 'descend',
    },
    { title: '交易合计', dataIndex: 'total', key: 'totalTransAmount', width: 140, sorter: true },
  ];

  const summaryData = ref<any[]>([]);
  const timelineData = ref<TimelineRow[]>([]);
  const pagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
    total: 0,
  });
  const jumpPage = ref('1');
  const hasSearched = ref(false);
  const { syncAnalysisDataRefreshState } = useAnalysisRefreshPrompt({
    refresh: () => fetchSummaryTable(),
    hasData: () => hasSearched.value && summaryData.value.length > 0,
  });
  const detailOpen = ref(false);
  const detailBaseQuery = ref<Partial<TransRecordQuery>>({});
  const selectedSummaryRaw = ref<TransBigDTO | null>(null);

  const normalizeList = (resp: any): TransBigDTO[] => {
    if (Array.isArray(resp)) return resp;
    if (Array.isArray(resp?.list)) return resp.list;
    if (Array.isArray(resp?.data)) return resp.data;
    if (Array.isArray(resp?.data?.list)) return resp.data.list;
    if (Array.isArray(resp?.records)) return resp.records;
    if (Array.isArray(resp?.data?.records)) return resp.data.records;
    return [];
  };

  const normalizeTotal = (resp: any, listLen: number) => {
    const total = resp?.total ?? resp?.data?.total ?? resp?.count ?? resp?.data?.count ?? listLen;
    return Number.isFinite(Number(total)) ? Number(total) : listLen;
  };

  const totalPages = computed(() => {
    if (!pagination.value.total) return 1;
    return Math.max(1, Math.ceil(pagination.value.total / pagination.value.pageSize));
  });

  const normalizedCountValue = computed(() => String(filters.value.countValue ?? '').trim());
  const normalizedAmountValue = computed(() => String(filters.value.amountValue ?? '').trim());

  const countValueStatus = computed<'error' | undefined>(() => {
    if (!normalizedCountValue.value) return undefined;
    return countValuePattern.test(normalizedCountValue.value) ? undefined : 'error';
  });

  const amountValueStatus = computed<'error' | undefined>(() => {
    if (!normalizedAmountValue.value) return undefined;
    const parsed = toAmountNumber(normalizedAmountValue.value);
    return parsed > 0 ? undefined : 'error';
  });

  const timelineSummary = computed(() => {
    const count = timelineData.value.reduce((sum, item) => sum + item.count, 0);
    const amount = timelineData.value.reduce((sum, item) => sum + item.amount, 0);
    return {
      days: timelineData.value.length,
      count,
      amount: formatAmount(amount),
    };
  });

  const timelineEmptyDescription = computed(() => {
    if (!summaryData.value.length) {
      return '当前筛选条件下暂无大额交易记录，请调整筛选条件后重试';
    }
    if (selectedSummaryRaw.value) {
      return '当前选中对象暂无按日期聚合的大额交易趋势，可切换左侧其他汇总记录查看';
    }
    return '请先从左侧列表选择一条汇总记录';
  });

  const mapSummaryRow = (item: TransBigDTO, index: number) => ({
    id: (pagination.value.current - 1) * pagination.value.pageSize + index + 1,
    selfName: item.personName || '-',
    otherName: `${item.otherName || '-'}${item.otherCardNo ? ` / ${item.otherCardNo}` : ''}`,
    count: item.transCount ?? 0,
    total: item.totalTransAmount ?? 0,
    raw: item,
  });

  const sortSummaryList = (list: TransBigDTO[]) =>
    [...list].sort((left, right) => {
      const leftCount = Number(left.transCount ?? 0) || 0;
      const rightCount = Number(right.transCount ?? 0) || 0;
      if (rightCount !== leftCount) return rightCount - leftCount;

      const leftAmount = toAmountNumber(left.totalTransAmount);
      const rightAmount = toAmountNumber(right.totalTransAmount);
      if (rightAmount !== leftAmount) return rightAmount - leftAmount;

      return String(left.otherName || left.otherCardNo || '').localeCompare(
        String(right.otherName || right.otherCardNo || ''),
      );
    });

  const toAmountNumber = (value?: string | number | null) => {
    if (value === null || value === undefined || value === '') return 0;
    const normalized = typeof value === 'string' ? value.replace(/,/g, '').trim() : value;
    const parsed = Number(normalized);
    return Number.isFinite(parsed) ? parsed : 0;
  };

  const formatAmount = (value?: string | number | null) => {
    const amount = toAmountNumber(value);
    return amount.toLocaleString('zh-CN', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  };

  const parseTransAgg = (transAgg?: string | null) => {
    if (!transAgg) return { count: 0, totalAmount: 0 };

    return String(transAgg)
      .split(',')
      .map((item) => item.trim())
      .filter(Boolean)
      .reduce(
        (acc, item) => {
          const segments = item.split('_');
          const amountText = segments[segments.length - 1];
          acc.count += 1;
          acc.totalAmount += toAmountNumber(amountText);
          return acc;
        },
        { count: 0, totalAmount: 0 },
      );
  };

  const resolveFilterTransCount = (showMessage = false) => {
    if (!normalizedCountValue.value) return undefined;
    if (countValuePattern.test(normalizedCountValue.value)) {
      return Number(normalizedCountValue.value);
    }

    if (showMessage) {
      createMessage.warning('交易次数请输入大于 0 的整数');
    }

    return null;
  };

  const resolveFilterTransAmount = (showMessage = false) => {
    if (!normalizedAmountValue.value) return undefined;
    const rawValue = normalizedAmountValue.value;
    const parsed = toAmountNumber(rawValue);
    if (parsed > 0) {
      return rawValue;
    }

    if (showMessage) {
      createMessage.warning('交易总额请输入大于 0 的数字');
    }

    return null;
  };

  const buildSummaryQuery = (transCount?: number, transAmount?: string | number): TransBigQuery => {
    const startDate =
      Array.isArray(filters.value.dateRange) && filters.value.dateRange[0]
        ? dayjs(filters.value.dateRange[0]).format('YYYY-MM-DD')
        : undefined;
    const endDate =
      Array.isArray(filters.value.dateRange) && filters.value.dateRange[1]
        ? dayjs(filters.value.dateRange[1]).format('YYYY-MM-DD')
        : undefined;
    const otherName = String(filters.value.otherName || '').trim();
    const otherCardNo = String(filters.value.otherCardNo || '').trim();

    return {
      page: pagination.value.current,
      limit: pagination.value.pageSize,
      startDate,
      endDate,
      personNames: (() => {
        const personNames = normalizeSelectedTargets(filters.value.target);
        return personNames.length ? personNames : undefined;
      })(),
      transCount: Number.isFinite(transCount as number) ? transCount : undefined,
      transCountSymbol:
        transCount !== undefined
          ? normalizeCompareOperator(filters.value.countOp, DEFAULT_COMPARE_OPERATOR)
          : undefined,
      transAmount: transAmount ?? undefined,
      transAmountSymbol:
        transAmount !== undefined
          ? normalizeCompareOperator(filters.value.amountOp, DEFAULT_COMPARE_OPERATOR)
          : undefined,
      otherName: otherName || undefined,
      otherCardNo: otherCardNo || undefined,
      orderKey: filters.value.orderKey || undefined,
      sort: filters.value.sort || undefined,
    };
  };

  const summaryRowClassName = (record: any) => {
    return selectedRow.value === record.id ? 'active-row' : '';
  };

  const handleSummaryRowClick = (record: any) => {
    selectedRow.value = record?.id;
    selectedSummaryRaw.value = record?.raw || null;
    void fetchTimelineData(record?.raw);
  };

  const fetchTimelineData = async (row?: TransBigDTO) => {
    if (!row) {
      timelineData.value = [];
      return;
    }

    const transCount = resolveFilterTransCount(true);
    if (transCount === null) {
      timelineData.value = [];
      return;
    }

    const transAmount = resolveFilterTransAmount(true);
    if (transAmount === null) {
      timelineData.value = [];
      return;
    }

    const startDate =
      Array.isArray(filters.value.dateRange) && filters.value.dateRange[0]
        ? dayjs(filters.value.dateRange[0]).format('YYYY-MM-DD')
        : undefined;
    const endDate =
      Array.isArray(filters.value.dateRange) && filters.value.dateRange[1]
        ? dayjs(filters.value.dateRange[1]).format('YYYY-MM-DD')
        : undefined;
    const personName = row.personName || normalizeSelectedTargets(filters.value.target)[0];

    try {
      const query: TransBigQuery = {
        page: 1,
        limit: 200,
        startDate,
        endDate,
        personName,
        personNames: personName ? [personName] : undefined,
        transCount: Number.isFinite(transCount as number) ? transCount : undefined,
        transCountSymbol:
          transCount !== undefined
            ? normalizeCompareOperator(filters.value.countOp, DEFAULT_COMPARE_OPERATOR)
            : undefined,
        transAmount: transAmount ?? undefined,
        transAmountSymbol:
          transAmount !== undefined
            ? normalizeCompareOperator(filters.value.amountOp, DEFAULT_COMPARE_OPERATOR)
            : undefined,
        otherName: pickDetailValue(row.otherName, String(filters.value.otherName || '').trim()),
        otherCardNo: pickDetailValue(row.otherCardNo, String(filters.value.otherCardNo || '').trim()),
      };
      const resp = await statSecondTransBig(query);

      const list = normalizeList(resp);
      timelineData.value = list.map((item, index) => {
        const aggSummary = parseTransAgg(item.transAgg);
        const currentTransCount = aggSummary.count || Number(item.transCount ?? 0);
        const currentTransAmount = aggSummary.totalAmount || toAmountNumber(item.totalTransAmount);
        const otherName = item.otherName || row.otherName || '-';
        const otherCardNo = item.otherCardNo || row.otherCardNo || '';
        return {
          key: `${item.transDate || 'unknown'}-${otherName}-${otherCardNo}-${index}`,
          date: item.transDate || '-',
          raw: item,
          count: currentTransCount,
          amount: currentTransAmount,
          amountText: formatAmount(currentTransAmount),
          otherName,
          otherCardNo,
        };
      });
    } catch (error) {
      timelineData.value = [];
      createMessage.warning('大额交易第二层接口调用失败');
    }
  };

  const handleTimelineClick = async (item: TimelineRow) => {
    if (!item?.date) return;
    const transCount = resolveFilterTransCount(true);
    if (transCount === null) return;

    const transAmount = resolveFilterTransAmount(true);
    if (transAmount === null) return;

    const selectedDate = dayjs(item.date).isValid() ? dayjs(item.date).format('YYYY-MM-DD') : undefined;
    const currentQuery = buildSummaryQuery(transCount, transAmount);
    const { startDate, endDate } = mergeDetailDateRange(
      {
        startDate: currentQuery.startDate,
        endDate: currentQuery.endDate,
      },
      {
        startDate: selectedDate,
        endDate: selectedDate,
      },
    );

    detailBaseQuery.value = {
      personName: pickDetailValue(selectedSummaryRaw.value?.personName, currentQuery.personNames?.[0]),
      personCardNo: pickDetailValue(selectedSummaryRaw.value?.personCardNo),
      otherName: pickDetailValue(item.raw?.otherName, selectedSummaryRaw.value?.otherName),
      otherCardNo: pickDetailValue(item.raw?.otherCardNo, selectedSummaryRaw.value?.otherCardNo),
      startDate,
      endDate,
      transAmount: currentQuery.transAmount,
      transAmountSymbol: currentQuery.transAmountSymbol,
    };
    detailOpen.value = true;
  };

  const fetchSummaryTable = async () => {
    const transCount = resolveFilterTransCount(true);
    if (transCount === null) return;

    const transAmount = resolveFilterTransAmount(true);
    if (transAmount === null) return;

    await runWithQueryLoading(async () => {
      const resp = await statFirstTransBig(buildSummaryQuery(transCount, transAmount));

      const list = sortSummaryList(normalizeList(resp));
      const current = Number((resp as any)?.current ?? (resp as any)?.data?.current ?? pagination.value.current);
      const size = Number((resp as any)?.size ?? (resp as any)?.data?.size ?? pagination.value.pageSize);
      if (Number.isFinite(current) && current > 0) pagination.value.current = current;
      if (Number.isFinite(size) && size > 0) pagination.value.pageSize = size;

      summaryData.value = list.map(mapSummaryRow);
      pagination.value.total = normalizeTotal(resp, list.length);
      hasSearched.value = true;
      syncAnalysisDataRefreshState(list.length > 0);
      jumpPage.value = String(pagination.value.current);

      if (summaryData.value.length) {
        selectedRow.value = summaryData.value[0].id;
        selectedSummaryRaw.value = summaryData.value[0].raw;
        await fetchTimelineData(summaryData.value[0].raw);
      } else {
        selectedRow.value = null;
        selectedSummaryRaw.value = null;
        timelineData.value = [];
      }
    });
  };

  const handleSearch = async () => {
    pagination.value.current = 1;
    await fetchSummaryTable();
  };

  const handleReset = async () => {
    filters.value = createDefaultFilters();
    pagination.value.current = 1;
    await fetchSummaryTable();
  };

  const handlePrevPage = async () => {
    if (queryLoading.value || pagination.value.current <= 1) return;
    pagination.value.current -= 1;
    await fetchSummaryTable();
  };

  const handleNextPage = async () => {
    if (queryLoading.value || pagination.value.current >= totalPages.value) return;
    pagination.value.current += 1;
    await fetchSummaryTable();
  };

  const handlePaginationChange = async (page: number, pageSize: number) => {
    if (queryLoading.value) return;
    if (pageSize !== pagination.value.pageSize) {
      pagination.value.pageSize = pageSize;
      await handlePageSizeChange();
      return;
    }
    if (page === pagination.value.current - 1) {
      await handlePrevPage();
      return;
    }
    if (page === pagination.value.current + 1) {
      await handleNextPage();
      return;
    }
    if (page === pagination.value.current) return;
    jumpPage.value = String(page);
    await handleJumpPage();
  };

  const handlePageSizeChange = async () => {
    pagination.value.current = 1;
    await fetchSummaryTable();
  };

  const handleJumpPage = async () => {
    const next = Number(jumpPage.value);
    if (!Number.isInteger(next) || next < 1) {
      createMessage.warning('请输入正确页码');
      jumpPage.value = String(pagination.value.current);
      return;
    }
    pagination.value.current = Math.min(next, totalPages.value);
    await fetchSummaryTable();
  };

  const resolveSorterValue = (sorter: any) => {
    if (Array.isArray(sorter)) return sorter[0];
    return sorter;
  };

  const handleTableChange = async (_pagination: any, _filters: any, sorter: any) => {
    const currentSorter = resolveSorterValue(sorter);
    const order = currentSorter?.order;
    const columnKey = String(currentSorter?.columnKey || '');

    filters.value.orderKey = order && columnKey ? columnKey : DEFAULT_SUMMARY_SORT_KEY;
    filters.value.sort = order === 'ascend' ? 'ASC' : order === 'descend' ? 'DESC' : DEFAULT_SUMMARY_SORT_ORDER;
    pagination.value.current = 1;
    await fetchSummaryTable();
  };

  const fetchTargetOptions = async () => {
    try {
      targetOptions.value = await getPersonOptions(false);
    } catch (error) {
      targetOptions.value = [];
    }
  };

  const applyRouteQuery = (targetOptions: Array<{ label: string; value: string }>) => {
    filters.value = createDefaultFilters();

    const personNames = normalizeSelectedTargets(
      (route.query.personNames as string | string[] | null | undefined) ??
        (route.query.personName as string | string[] | null | undefined),
    );
    const otherName = String(route.query.otherName || '').trim();
    const otherCardNo = String(route.query.otherCardNo || '').trim();
    const routeCountValue = String(route.query.countValue || '').trim();
    const routeAmountValue = String(route.query.amountValue || '').trim();

    if (personNames.length) {
      filters.value.target = personNames.map((personName) => {
        const matched = targetOptions.find((item) => String(item.label).trim() === personName);
        return matched ? matched.value : personName;
      });
    }

    if (countValuePattern.test(routeCountValue)) {
      filters.value.countValue = routeCountValue;
      filters.value.countOp = normalizeCompareOperator(String(route.query.countOp || ''), DEFAULT_COMPARE_OPERATOR);
    }

    if (toAmountNumber(routeAmountValue) > 0) {
      filters.value.amountValue = routeAmountValue;
      filters.value.amountOp = normalizeCompareOperator(String(route.query.amountOp || ''), DEFAULT_COMPARE_OPERATOR);
    }
    if (otherName) {
      filters.value.otherName = otherName;
    }
    if (otherCardNo) {
      filters.value.otherCardNo = otherCardNo;
    }

    return !!(personNames.length || otherName || otherCardNo || routeCountValue || routeAmountValue);
  };

  const syncFromRoute = async () => {
    if (route.path !== PAGE_PATH) return;
    if (applyRouteQuery(targetOptions.value)) {
      pagination.value.current = 1;
      await fetchSummaryTable();
    }
  };

  onMounted(async () => {
    await fetchTargetOptions();
    await syncFromRoute();
  });

  watch(
    () => route.fullPath,
    async (next, prev) => {
      if (next === prev) return;
      await syncFromRoute();
    },
  );
</script>
<style lang="less">
  @import '../styles/trans-analysis-table-ui.less';

  @prefix-cls: ~'jeesite-large-amount';

  .@{prefix-cls}.large-amount-page {
    .analysis-page-frame();

    .filter-input {
      width: 180px;
    }

    .filter-mini {
      width: 80px;
    }

    .filter-op {
      width: 84px;
      min-width: 84px;
    }

    .filter-date {
      width: 360px;
    }

    .content-panel {
      display: flex;
      gap: 2px;
    }

    .left-panel {
      flex: 0 0 46%;
      max-width: 46%;
      min-width: 0;
      .analysis-card-shell();
    }

    .right-panel {
      flex: 1;
      min-width: 0;
      .analysis-card-shell();
    }

    .query-state-panel {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 0 0;
    }

    .table-wrapper .jeesite-basic-table {
      height: 100%;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .table-wrapper .ant-table-wrapper,
    .table-wrapper .ant-spin-nested-loading,
    .table-wrapper .ant-spin-container,
    .table-wrapper .ant-table,
    .table-wrapper .ant-table-container {
      height: 100%;
      min-height: 0;
    }

    .table-wrapper .ant-spin-container,
    .table-wrapper .ant-table,
    .table-wrapper .ant-table-container {
      display: flex;
      flex-direction: column;
    }

    .table-wrapper .ant-table-body {
      flex: 1 1 auto;
      min-height: 0;
      max-height: 100% !important;
      overflow: auto !important;
    }

    .table-wrapper .ant-table-body::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .table-wrapper .ant-table-body::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.6);
      border-radius: 999px;
    }

    .table-wrapper .ant-table-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .table-wrapper .ant-table-thead > tr > th {
      background: #f8fafc;
      font-weight: 600;
      color: #374151;
    }

    .table-wrapper .ant-table-tbody > tr > td {
      color: #374151;
    }

    .table-wrapper .ant-table-tbody > tr:hover > td {
      background: #f5f7ff;
    }

    .pagination-input {
      width: 48px;
    }

    .timeline-panel {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .timeline-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      flex: 0 0 auto;
    }

    .timeline-stat-card {
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      background: transparent;
      box-shadow: none;

      &.emphasis {
        border-color: #d7e6fb;
        background: #f8fbff;
      }
    }

    .timeline-stat-label {
      color: #6b7280;
      font-size: 12px;
      line-height: 18px;
    }

    .timeline-stat-value {
      margin-top: 6px;
      color: #111827;
      font-size: 18px;
      font-weight: 600;
      line-height: 26px;
      word-break: break-all;
    }

    .timeline-wrapper {
      flex: 1 1 auto;
      min-height: 0;
      position: relative;
      padding: 10px 0 0 132px;
      overflow: auto;
    }

    .timeline-empty {
      height: 100%;
      min-height: 260px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .timeline-line {
      position: absolute;
      left: 132px;
      top: 10px;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, #dbeafe 0%, #d7dee8 100%);
    }

    .timeline-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 2px 0;
    }

    .timeline-item {
      position: relative;
      min-height: 96px;
    }

    .timeline-date-block {
      position: absolute;
      left: -116px;
      top: 18px;
      width: 88px;
      text-align: right;
    }

    .timeline-date {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      line-height: 20px;
      word-break: break-word;
    }

    .timeline-dot-button {
      position: absolute;
      left: -14px;
      top: 22px;
      width: 24px;
      height: 24px;
      padding: 0;
      border: none;
      background: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
    }

    .timeline-dot {
      width: 12px;
      height: 12px;
      background: #ffffff;
      border: 3px solid #3b82f6;
      border-radius: 50%;
      box-shadow:
        0 0 0 2px #dbeafe,
        0 6px 14px rgba(59, 130, 246, 0.16);
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
    }

    .timeline-item:hover .timeline-dot {
      transform: scale(1.04);
      background: #eff6ff;
      border-color: #2563eb;
      box-shadow:
        0 0 0 2px #bfdbfe,
        0 8px 18px rgba(59, 130, 246, 0.2);
    }

    .timeline-card {
      min-height: 96px;
      margin-left: 20px;
      padding: 10px 0 10px 12px;
      border: 0;
      border-left: 1px solid #dbe3ee;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      cursor: pointer;
      transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
    }

    .timeline-item:hover .timeline-card {
      border-color: #c8d6e5;
      background: rgba(251, 253, 255, 0.72);
      box-shadow: none;
    }

    .timeline-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .timeline-card-main {
      min-width: 0;
      flex: 1 1 auto;
    }

    .timeline-card-title {
      color: #111827;
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
    }

    .timeline-card-subtitle {
      margin-top: 4px;
      color: #6b7280;
      font-size: 12px;
      line-height: 18px;
      word-break: break-all;
    }

    .timeline-card-action {
      flex: 0 0 auto;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid #dbe3ee;
      background: #f8fafc;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      line-height: 18px;
      white-space: nowrap;
    }

    .timeline-tags {
      display: flex;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap;
    }

    .timeline-tag {
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #e5e7eb;

      &.count {
        background: #fffaf5;
        border-color: #f5d7bd;
        color: #c2410c;
      }

      &.amount {
        background: #f8fbff;
        border-color: #d4e3fb;
        color: #1d4ed8;
      }
    }

    @media screen and (max-width: 900px) {
      .content-panel {
        flex-direction: column;
      }

      .left-panel {
        flex-basis: auto;
        max-width: none;
      }
    }

    @media screen and (max-width: 992px) {
      .filter-input,
      .filter-date {
        width: 100%;
      }

      .timeline-summary {
        grid-template-columns: 1fr;
      }

      .timeline-wrapper {
        padding-left: 96px;
        padding-right: 16px;
      }

      .timeline-line {
        left: 96px;
      }

      .timeline-date-block {
        left: -78px;
        width: 56px;
      }

      .timeline-card {
        margin-left: 14px;
        padding: 14px;
      }

      .timeline-card-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .pagination-bar {
        justify-content: flex-start;
      }
    }
  }
</style>