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

<template>
  <div ref="monthRegularPageRef" :class="prefixCls" class="month-regular-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>
        <Input v-model:value="filters.otherName" class="filter-input" placeholder="请输入对方姓名" allow-clear />
      </div>
      <div class="filter-item">
        <span class="filter-label">对方卡号:</span>
        <Input v-model:value="filters.otherCardNo" class="filter-input" placeholder="请输入对方卡号" allow-clear />
      </div>
      <div class="filter-item">
        <span class="filter-label">连续转账月数:</span>
        <Input v-model:value="filters.monthValue" class="filter-input" :status="monthValueStatus" />
      </div>
      <div class="filter-item">
        <span class="filter-label">金额范围:</span>
        <Input v-model:value="filters.amountMin" class="filter-mini" placeholder="" :status="amountMinStatus" />
        <span class="filter-label">至</span>
        <Input v-model:value="filters.amountMax" class="filter-mini" placeholder="" :status="amountMaxStatus" />
      </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="summary-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
              class="month-regular-summary-table"
              :columns="columns"
              :data-source="tableData"
              :pagination="false"
              :show-table-setting="false"
              :can-resize="true"
              :is-can-resize-parent="true"
              :resize-height-offset="32"
              :rowClassName="rowClassName"
              row-key="id"
              @register="handleMonthRegularTableRegister"
              @row-click="handleRowClick"
            />
          </div>
        </div>

        <div v-if="hasSearched" class="pagination-bar">
          <AnalysisPagination
            :total="total"
            :current="pagination.current"
            :page-size="pagination.pageSize"
            :page-size-options="pageSizeOptions"
            :loading="queryLoading"
            @change="handlePaginationChange"
          />
        </div>
      </div>

      <div class="trend-panel">
        <div class="panel-header">
          <div>
            <div class="panel-title">每月转账趋势</div>
            <div class="panel-desc">查看当前选中对象的每月交易趋势，点击柱状图可查看当月交易记录。</div>
          </div>
        </div>
        <div class="trend-chart-shell">
          <div v-show="!trendVisible" class="trend-empty">
            <EmptyState variant="compact" title="暂无趋势数据" :description="trendEmptyDescription" :min-height="220" />
          </div>
          <div v-show="trendVisible" ref="chartRef" class="trend-chart"></div>
        </div>
      </div>
    </div>

    <TransRecordModal v-model:open="recordModalOpen" :base-query="recordModalBaseQuery" />
  </div>
</template>
<script lang="ts" setup name="ViewsMonthRegularIndex">
  import { computed, nextTick, onMounted, onUnmounted, ref, Ref } from 'vue';
  import { Select, Input, Button } from 'ant-design-vue';
  import AnalysisPagination from '@jeesite/core/components/AnalysisPagination/src/AnalysisPagination.vue';
  import dayjs from 'dayjs';
  import { BasicTable } from '@jeesite/core/components/Table';
  import { createTableContext } from '@jeesite/core/components/Table/src/hooks/useTableContext';
  import { EmptyState } from '@jeesite/core/components/EmptyState';
  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
  import { useECharts } from '@jeesite/core/hooks/web/useECharts';
  import { useAnalysisRefreshPrompt } from '@jeesite/core/hooks/web/useAnalysisRefreshPrompt';
  import TransRecordModal from '../components/TransRecordModal.vue';
  import { useTableSkill } from '@jeesite/core/hooks/web/useTableSkill';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import { pickDetailValue } from '@jeesite/core/utils/detailQuery';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import { statFirstTransContinuous, statSecondTransContinuous } from '@jeesite/trans/api/transApi';
  import { getPersonOptions } from '@jeesite/person/api/personApi';
  import type { EChartsOption } from 'echarts';
  import type { TransContinuousDTO } from '@jeesite/trans/api/types/dto';
  import type { TransContinuousQuery, TransRecordQuery } from '@jeesite/trans/api/types/query';

  const { prefixCls } = useDesign('month-regular');
  const { queryLoading, runWithQueryLoading } = useTableSkill();
  const { createMessage } = useMessage();
  const monthRegularPageRef = ref<HTMLElement | null>(null);
  const monthRegularTableAction = ref<any>(null);

  const createDefaultFilters = () => ({
    target: [] as string[],
    otherName: '',
    otherCardNo: '',
    monthValue: '2',
    amountMin: '1000',
    amountMax: '10000',
  });

  const filters = ref(createDefaultFilters());

  const pagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
  });

  const total = ref(0);
  const jumpPage = ref('1');
  const tableData = ref<any[]>([]);
  const hasSearched = ref(false);
  const { syncAnalysisDataRefreshState } = useAnalysisRefreshPrompt({
    refresh: () => fetchTable(),
    hasData: () => hasSearched.value && tableData.value.length > 0,
  });

  const recordModalOpen = ref(false);
  const recordModalBaseQuery = ref<Partial<TransRecordQuery>>({});
  const lastSearchQuery = ref<TransContinuousQuery | null>(null);
  const trendRawList = ref<TransContinuousDTO[]>([]);
  const trendVisible = ref(false);
  const selectedRow = ref<any | null>(null);
  const DEFAULT_SORT_KEY = 'pairTotalTrans';
  const DEFAULT_SORT_ORDER = 'DESC' as const;

  const targetOptions = ref<Array<{ label: string; value: string }>>([]);
  const positiveIntegerPattern = /^[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 pageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({
    label: value,
    value,
  }));

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

  const normalizedMonthValue = computed(() => String(filters.value.monthValue ?? '').trim());
  const normalizedAmountMin = computed(() => String(filters.value.amountMin ?? '').trim());
  const normalizedAmountMax = computed(() => String(filters.value.amountMax ?? '').trim());

  const monthValueStatus = computed<'error' | undefined>(() => {
    if (!normalizedMonthValue.value) return undefined;
    return positiveIntegerPattern.test(normalizedMonthValue.value) ? undefined : 'error';
  });

  const amountMinStatus = computed<'error' | undefined>(() => {
    if (!normalizedAmountMin.value) return undefined;
    return normalizePositiveAmountText(normalizedAmountMin.value) === null ? 'error' : undefined;
  });

  const amountMaxStatus = computed<'error' | undefined>(() => {
    if (!normalizedAmountMax.value) return undefined;
    return normalizePositiveAmountText(normalizedAmountMax.value) === null ? 'error' : undefined;
  });

  const trendEmptyDescription = computed(() => {
    if (!tableData.value.length) {
      return '当前筛选条件下暂无定期规律记录，请调整筛选条件后重试';
    }
    if (selectedRow.value) {
      return '当前选中记录暂无每月转账趋势';
    }
    return '请选择上方列表中的一行记录查看趋势';
  });

  const columns = [
    { title: '持续月数', dataIndex: 'months', key: 'months', width: 120 },
    { title: '本方姓名', dataIndex: 'selfName', key: 'selfName', width: 140 },
    { title: '对方姓名', dataIndex: 'otherName', key: 'otherName', width: 140 },
    { title: '对方卡号', dataIndex: 'otherCard', key: 'otherCard', width: 200 },
    { title: '共交易次数', dataIndex: 'count', key: 'count', width: 140 },
  ];

  const handleMonthRegularTableRegister = (action: any) => {
    monthRegularTableAction.value = action;
  };

  const getMonthRegularTableColumns = (...args: any[]) => monthRegularTableAction.value?.getColumns?.(...args) || [];

  createTableContext({
    wrapRef: monthRegularPageRef,
    getBindValues: computed(() => ({
      columns,
      showIndexColumn: true,
      rowSelection: undefined,
      isTreeTable: false,
    })),
    getDefaultRowSelection: () => monthRegularTableAction.value?.getDefaultRowSelection?.(),
    getColumns: getMonthRegularTableColumns,
    getCacheColumns: () => monthRegularTableAction.value?.getCacheColumns?.() || [],
    setColumns: (nextColumns: any) => monthRegularTableAction.value?.setColumns?.(nextColumns),
    setProps: (props: any) => monthRegularTableAction.value?.setProps?.(props),
  } as any);

  const normalizeList = (resp: any): TransContinuousDTO[] => {
    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 t = resp?.total ?? resp?.data?.total ?? resp?.count ?? resp?.data?.count ?? resp?.data?.records?.length;
    return Number.isFinite(Number(t)) ? Number(t) : listLen;
  };

  const normalizeMonthDate = (monthLike?: string, isEnd = false) => {
    if (!monthLike) return undefined;
    const normalized = String(monthLike).slice(0, 7);
    if (!/^\d{4}-\d{2}$/.test(normalized)) return undefined;
    const date = dayjs(`${normalized}-01`);
    return isEnd ? date.endOf('month').format('YYYY-MM-DD') : date.startOf('month').format('YYYY-MM-DD');
  };

  const mapRow = (item: TransContinuousDTO, index: number) => ({
    id: (pagination.value.current - 1) * pagination.value.pageSize + index + 1,
    months: `${item.pairContMonthCount ?? 0}个月`,
    selfName: item.personName || '-',
    otherName: item.otherName || '-',
    otherCard: item.otherCardNo || '-',
    count: String(item.pairTotalTrans ?? 0),
    countValue: Number(item.pairTotalTrans ?? 0) || 0,
    raw: item,
  });

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

      const leftMonthCount = Number(left.pairContMonthCount ?? 0) || 0;
      const rightMonthCount = Number(right.pairContMonthCount ?? 0) || 0;
      if (rightMonthCount !== leftMonthCount) return rightMonthCount - leftMonthCount;

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

  const normalizePositiveIntegerInput = (value?: string) => {
    const next = String(value ?? '').trim();
    if (!next) return undefined;
    if (!positiveIntegerPattern.test(next)) return null;
    const parsed = Number(next);
    return Number.isFinite(parsed) ? parsed : null;
  };

  const normalizePositiveAmountText = (value?: string): string | undefined | null => {
    const next = String(value ?? '').trim();
    const amountForCheck = next.replace(/,/g, '');
    if (!amountForCheck) return undefined;
    if (!positiveIntegerPattern.test(amountForCheck)) return null;
    return next;
  };

  const getActiveSearchQuery = () => {
    if (lastSearchQuery.value) return { ...lastSearchQuery.value };
    return buildQuery();
  };

  const buildRecordModalBaseQuery = (item?: Partial<TransContinuousDTO>): Partial<TransRecordQuery> | null => {
    const query = getActiveSearchQuery();
    if (!query) return null;

    return {
      personName: pickDetailValue(
        item?.personName,
        selectedRow.value?.raw?.personName,
        normalizeSelectedTargets(filters.value.target)[0],
      ),
      otherName: pickDetailValue(item?.otherName, selectedRow.value?.raw?.otherName, query.otherName),
      otherCardNo: pickDetailValue(
        item?.otherCardNo,
        selectedRow.value?.raw?.otherCardNo,
        selectedRow.value?.raw?.otherCardNos,
        query.otherCardNo,
      ),
      personCardNo: pickDetailValue(item?.personCardNo),
      startDate: normalizeMonthDate(item?.continuousStartMonth, false),
      endDate: normalizeMonthDate(item?.continuousEndMonth, true),
      minTransMoney: query.minTransMoney,
      maxTransMoney: query.maxTransMoney,
    };
  };

  const buildQuery = (): TransContinuousQuery | null => {
    const monthVal = normalizePositiveIntegerInput(filters.value.monthValue);
    const minTransMoney = normalizePositiveAmountText(filters.value.amountMin);
    const maxTransMoney = normalizePositiveAmountText(filters.value.amountMax);

    if (monthVal === null || monthVal === undefined) {
      createMessage.warning('连续转账月数请输入大于 0 的整数');
      return null;
    }

    if (minTransMoney === null || maxTransMoney === null) {
      createMessage.warning('金额范围请输入大于 0 的整数');
      return null;
    }

    if (
      minTransMoney !== undefined &&
      maxTransMoney !== undefined &&
      Number(minTransMoney.replace(/,/g, '')) > Number(maxTransMoney.replace(/,/g, ''))
    ) {
      createMessage.warning('金额范围起始值不能大于结束值');
      return null;
    }

    const query: TransContinuousQuery = {
      page: pagination.value.current,
      limit: pagination.value.pageSize,
      monthVal,
      minTransMoney,
      maxTransMoney,
      orderKey: DEFAULT_SORT_KEY,
      sort: DEFAULT_SORT_ORDER,
    };

    const personNames = normalizeSelectedTargets(filters.value.target);
    const otherName = String(filters.value.otherName ?? '').trim();
    const otherCardNo = String(filters.value.otherCardNo ?? '').trim();
    query.personNames = personNames.length ? personNames : undefined;
    query.otherName = otherName || undefined;
    query.otherCardNo = otherCardNo || undefined;
    return query;
  };

  const fetchTable = async () => {
    const query = buildQuery();
    if (!query) return;

    await runWithQueryLoading(async () => {
      const resp = await statFirstTransContinuous(query);
      const list = sortSummaryList(normalizeList(resp));
      tableData.value = list.map(mapRow);
      total.value = normalizeTotal(resp, list.length);
      hasSearched.value = true;
      lastSearchQuery.value = { ...query };
      syncAnalysisDataRefreshState(list.length > 0);

      const current = Number((resp as any)?.data?.current || pagination.value.current);
      const size = Number((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;
      jumpPage.value = String(pagination.value.current);

      if (tableData.value.length) {
        selectedRow.value = tableData.value[0];
        await handleViewDetail(selectedRow.value, false);
      } else {
        selectedRow.value = null;
        trendRawList.value = [];
        trendVisible.value = false;
        clearTrendChart();
      }
    });
  };

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);

  let bindChartClickTimer: ReturnType<typeof setTimeout> | null = null;

  const clearChartClickTimer = () => {
    if (bindChartClickTimer) {
      clearTimeout(bindChartClickTimer);
      bindChartClickTimer = null;
    }
  };

  const clearTrendChart = () => {
    clearChartClickTimer();
    const instance = getInstance();
    instance?.off('click');
    instance?.clear();
  };

  const bindChartClick = (retry = 0) => {
    const instance = getInstance();
    if (!instance) {
      if (retry < 6) {
        clearChartClickTimer();
        bindChartClickTimer = setTimeout(() => bindChartClick(retry + 1), 80);
      }
      return;
    }

    instance.off('click');
    instance.on('click', (params: any) => {
      const idx = Number(params?.dataIndex);
      if (!Number.isInteger(idx) || idx < 0 || idx >= trendRawList.value.length) return;

      const item = trendRawList.value[idx];
      const baseQuery = buildRecordModalBaseQuery(item);
      if (!baseQuery) return;
      recordModalBaseQuery.value = baseQuery;
      recordModalOpen.value = true;
    });
  };

  const renderTrendChart = (list: TransContinuousDTO[]) => {
    trendRawList.value = list;
    if (!list.length) {
      trendVisible.value = false;
      clearTrendChart();
      return;
    }

    const labels = list.map((item) => {
      const startMonth = String(item.continuousStartMonth || '')
        .slice(0, 7)
        .replace('-', '.');
      const endMonth = String(item.continuousEndMonth || '')
        .slice(0, 7)
        .replace('-', '.');
      return `${startMonth} ~ ${endMonth}`;
    });

    const options: EChartsOption = {
      tooltip: {
        trigger: 'axis',
        confine: true,
        extraCssText: 'max-width: 320px; white-space: normal; word-break: break-word;',
        formatter: (params: any) => {
          const index = params[0].dataIndex;
          const item = list[index];
          return `
            <div style="padding: 8px;">
              <div style="font-weight: bold; margin-bottom: 4px;">${labels[index]}</div>
              <div>交易次数：${item.pairTotalTrans || 0}</div>
              <div>交易总金额：${item.pairTotalAmount || 0}</div>
              <div>持续月数：${item.pairContMonthCount || 0}</div>
            </div>
          `;
        },
      },
      xAxis: {
        type: 'category',
        data: labels,
        axisTick: { show: false },
        axisLine: { lineStyle: { color: '#d1d5db' } },
      },
      yAxis: {
        type: 'value',
        axisTick: { show: false },
        splitLine: { lineStyle: { color: '#e5e7eb' } },
      },
      grid: {
        left: '2%',
        right: '2%',
        top: '12%',
        bottom: '8%',
        outerBoundsMode: 'same',
        outerBoundsContain: 'axisLabel',
      },
      series: [
        {
          data: list.length ? list.map((item) => Number(item.pairTotalTrans || 0)) : [0],
          type: 'bar',
          barWidth: 18,
          itemStyle: { color: '#94a3b8', borderRadius: [6, 6, 0, 0] },
          label: {
            show: true,
            position: 'top',
            color: '#6b7280',
            fontSize: 12,
          },
        },
      ],
    };
    setOptions(options);
    clearChartClickTimer();
    bindChartClickTimer = setTimeout(() => bindChartClick(), 80);
  };

  const handleViewDetail = async (record: any, showMessage = true) => {
    const query = getActiveSearchQuery();
    if (!query) return;

    try {
      selectedRow.value = record;
      const personName = record?.raw?.personName || normalizeSelectedTargets(filters.value.target)[0];
      const selectedOtherName = pickDetailValue(record?.raw?.otherName, query.otherName);
      const selectedOtherCardNo = pickDetailValue(
        record?.raw?.otherCardNo,
        record?.raw?.otherCardNos,
        query.otherCardNo,
      );
      const resp = await statSecondTransContinuous({
        ...query,
        page: 1,
        limit: 200,
        personName,
        personNames: personName ? [personName] : undefined,
        otherName: selectedOtherName,
        otherCardNo: selectedOtherCardNo,
      });
      const list = normalizeList(resp);
      trendRawList.value = list.map((item) => ({
        ...item,
        personName: record?.raw?.personName || item.personName,
        otherName: selectedOtherName || item.otherName,
        otherCardNo: selectedOtherCardNo || item.otherCardNo,
      }));
      if (!trendRawList.value.length) {
        trendVisible.value = false;
        clearTrendChart();
        return;
      }

      const wasTrendHidden = !trendVisible.value;
      trendVisible.value = true;
      if (wasTrendHidden) {
        await nextTick();
      }
      renderTrendChart(trendRawList.value);
      if (showMessage) {
        createMessage.success('已更新每月转账趋势，点击柱状图可查看交易记录');
      }
    } catch (error) {
      trendRawList.value = [];
      trendVisible.value = false;
      clearTrendChart();
      createMessage.warning('连续交易第二层接口调用失败');
    }
  };

  const handleRowClick = async (record: any) => {
    await handleViewDetail(record, false);
  };

  const rowClassName = (record: any) => {
    return selectedRow.value && selectedRow.value.id === record.id ? 'summary-row-selected' : '';
  };

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

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

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

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

  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 fetchTable();
  };

  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 fetchTable();
  };

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

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

  onUnmounted(() => {
    clearChartClickTimer();
    const instance = getInstance();
    instance?.off('click');
  });
</script>
<style lang="less">
  @import '../styles/trans-analysis-table-ui.less';

  @prefix-cls: ~'jeesite-month-regular';

  .@{prefix-cls}.month-regular-page {
    .analysis-page-frame();

    .filter-input {
      width: 180px;
    }

    .filter-mini {
      width: 88px;
    }

    .filter-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }

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

    .summary-panel,
    .trend-panel {
      .analysis-card-shell();
    }

    .summary-panel {
      flex: 0 0 calc((100% - 2px) * 0.56);
      max-height: calc((100% - 2px) * 0.56);
    }

    .trend-panel {
      flex: 1 1 calc((100% - 2px) * 0.44);
      max-height: calc((100% - 2px) * 0.44);
    }

    .summary-panel .month-regular-summary-table .ant-table-wrapper {
      padding: 0;
    }

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

    .table-wrapper .month-regular-summary-table > div:first-child {
      display: none;
    }

    .table-wrapper .month-regular-summary-table > .ant-table-wrapper {
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
    }

    .trend-chart-shell {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .trend-empty {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed #d7e3f4;
      border-radius: 12px;
      background: #fafcff;
    }

    .trend-chart {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
    }

    :deep(.ant-select-selector),
    :deep(.ant-input),
    :deep(.ant-btn) {
      border-radius: 8px;
    }

    @media screen and (max-width: 992px) {
      .summary-panel,
      .trend-panel {
        flex: 1 1 auto;
        max-height: none;
      }

      .filter-actions {
        width: 100%;
        margin-left: 0;
      }

      .filter-input {
        width: 100%;
      }
    }
  }
</style>