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

<template>
  <div :class="prefixCls" class="financial-wealth-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="toolbar-actions">
        <div class="filter-actions">
          <Button type="primary" :loading="queryLoading" @click="handleSearch">查询</Button>
          <Button @click="handleReset">重置</Button>
        </div>
        <div class="extra-actions">
          <Button @click="openKeywordModal">关键词配置</Button>
        </div>
      </div>
    </div>

    <ConfigManageModal
      :open="keywordModalOpen"
      title="关键词管理"
      :width="960"
      wrapClassName="financial-keyword-modal"
      summary="支持关键词与标签双字段维护，统一当前页面筛选口径"
      :refresh-loading="keywordLoading"
      :table-height="420"
      :total="keywordData.length"
      :current="keywordPagination.current"
      :total-pages="keywordTotalPages"
      :page-size="keywordPagination.pageSize"
      :page-size-options="pageSizeOptions"
      :jump-page="keywordJumpPage"
      @update:open="handleKeywordModalChange"
      @update:jumpPage="handleKeywordJumpPageInput"
      @create="openKeywordEditor()"
      @prev-page="handleKeywordPrevPage"
      @next-page="handleKeywordNextPage"
      @page-size-change="handleKeywordPageSizeChange"
      @jump-page="handleKeywordJumpPage"
    >
      <template #default="{ tableMaxHeight }">
        <BasicTable
          :columns="keywordColumns"
          :data-source="keywordPagedData"
          :loading="keywordLoading"
          :pagination="false"
          :show-table-setting="false"
          :table-setting="{ size: true, setting: true, redo: false, fullScreen: false }"
          :can-resize="true"
          :max-height="tableMaxHeight"
          row-key="rowKey"
        >
          <template #keywordAction="{ record }">
            <TableAction :actions="getKeywordActions(record)" />
          </template>
        </BasicTable>
      </template>
    </ConfigManageModal>

    <ConfigEditorModal
      v-model:open="keywordEditorOpen"
      :title="keywordEditorTitle"
      :confirmLoading="keywordSaving"
      wrapClassName="financial-keyword-editor-modal"
      @ok="handleSaveKeyword"
      @cancel="closeKeywordEditor"
    >
      <Form layout="vertical" class="keyword-form">
        <Form.Item
          label="关键字"
          :validate-status="keywordFormErrors.financialKey ? 'error' : ''"
          :help="keywordFormErrors.financialKey"
        >
          <Input v-model:value="keywordForm.financialKey" :maxlength="100" placeholder="请输入关键字" allow-clear />
        </Form.Item>
        <Form.Item label="标签" :validate-status="keywordFormErrors.tag ? 'error' : ''" :help="keywordFormErrors.tag">
          <Input v-model:value="keywordForm.tag" :maxlength="100" placeholder="请输入标签" allow-clear />
        </Form.Item>
      </Form>
    </ConfigEditorModal>

    <div class="content-panel">
      <div class="table-card">
        <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="columns"
              :data-source="tableData"
              :loading="queryLoading"
              :pagination="false"
              :show-table-setting="false"
              :table-setting="{ size: true, setting: true, redo: false, fullScreen: false }"
              :can-resize="true"
              :is-can-resize-parent="true"
              :resize-height-offset="32"
              row-key="rowKey"
            >
              <template #action="{ record }">
                <Button type="link" size="small" @click="handleViewDetail(record)">查看详情</Button>
              </template>
            </BasicTable>
          </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>

    <TransRecordModal
      v-model:open="transRecordModalOpen"
      :base-query="transRecordBaseQuery"
      :hide-technical-id-columns="true"
    />
  </div>
</template>

<script lang="ts" setup name="ViewsFinancialWealthIndex">
  import { computed, onMounted, reactive, ref } from 'vue';
  import dayjs, { Dayjs } from 'dayjs';
  import { Button, DatePicker, Form, Input, Select } from 'ant-design-vue';
  import AnalysisPagination from '@jeesite/core/components/AnalysisPagination/src/AnalysisPagination.vue';
  import { EmptyState } from '@jeesite/core/components/EmptyState';
  import { BasicTable, TableAction } from '@jeesite/core/components/Table';
  import { useAnalysisRefreshPrompt } from '@jeesite/core/hooks/web/useAnalysisRefreshPrompt';
  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import { useTableSkill } from '@jeesite/core/hooks/web/useTableSkill';
  import ConfigManageModal from '@jeesite/core/components/AnalysisConfigModal/src/ConfigManageModal.vue';
  import ConfigEditorModal from '@jeesite/core/components/AnalysisConfigModal/src/ConfigEditorModal.vue';
  import { mergeDetailDateRange, pickDetailValue } from '@jeesite/core/utils/detailQuery';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import { getPersonOptions } from '@jeesite/person/api/personApi';
  import TransRecordModal from '../components/TransRecordModal.vue';
  import {
    createOrUpdateFinancialKey,
    deleteFinancialKey,
    listFinancialKeys,
    statFirstTransFinancial,
  } from '@jeesite/trans/api/transApi';
  import type { TransFinancialDTO, TransFinancialKey } from '@jeesite/trans/api/types/dto';
  import type { TransFinancialQuery, TransRecordQuery } from '@jeesite/trans/api/types/query';

  interface KeywordRow extends TransFinancialKey {
    rowKey: number | string;
    rowNo: number;
  }

  interface KeywordFormState {
    id?: string | number;
    financialKey: string;
    tag: string;
  }

  interface FinancialRow {
    rowKey: number | string;
    rowNo: number;
    personName: string;
    personCardNo: string;
    otherName: string;
    otherCardNo: string;
    transDateTime: string;
    transSummary: string;
    remark: string;
    raw: TransFinancialDTO;
  }

  const DEFAULT_SORT_KEY = 'transDateTime';
  const DEFAULT_SORT_ORDER = 'DESC' as const;

  const { prefixCls } = useDesign('financial-wealth');
  const { queryLoading, runWithQueryLoading } = useTableSkill();
  const { createMessage } = useMessage();
  const RangePicker = DatePicker.RangePicker;
  type RangeValue = [Dayjs, Dayjs] | null;

  const filters = ref({
    target: [] as string[],
    dateRange: null as RangeValue,
  });

  const keywordModalOpen = ref(false);
  const keywordEditorOpen = ref(false);
  const keywordLoading = ref(false);
  const keywordSaving = ref(false);
  const keywordData = ref<KeywordRow[]>([]);
  const keywordJumpPage = ref('1');
  const keywordPagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
  });
  const tableData = ref<FinancialRow[]>([]);
  const hasSearched = ref(false);
  const { syncAnalysisDataRefreshState } = useAnalysisRefreshPrompt({
    refresh: () => fetchTable(),
    hasData: () => hasSearched.value && tableData.value.length > 0,
  });
  const targetOptions = ref<Array<{ label: string; value: string }>>([]);
  const jumpPage = ref('1');
  const transRecordModalOpen = ref(false);
  const transRecordBaseQuery = ref<Partial<TransRecordQuery>>({});

  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 pagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
    total: 0,
  });

  const keywordForm = reactive<KeywordFormState>({
    id: undefined,
    financialKey: '',
    tag: '',
  });

  const keywordFormErrors = reactive({
    financialKey: '',
    tag: '',
  });

  const keywordEditorTitle = computed(() => (keywordForm.id ? '编辑关键词' : '新建关键词'));
  const keywordTotalPages = computed(() => {
    if (!keywordData.value.length) return 1;
    return Math.max(1, Math.ceil(keywordData.value.length / keywordPagination.value.pageSize));
  });
  const keywordPagedData = computed(() => {
    const start = (keywordPagination.value.current - 1) * keywordPagination.value.pageSize;
    const end = start + keywordPagination.value.pageSize;
    return keywordData.value.slice(start, end);
  });
  const totalPages = computed(() => {
    if (!pagination.value.total) return 1;
    return Math.max(1, Math.ceil(pagination.value.total / pagination.value.pageSize));
  });
  const pageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({
    label: value,
    value: Number(value),
  }));

  const columns = [
    { title: '序号', dataIndex: 'rowNo', key: 'rowNo', width: 80, align: 'center' },
    { title: '本方姓名', dataIndex: 'personName', key: 'personName', width: 120, align: 'center' },
    { title: '本方卡号', dataIndex: 'personCardNo', key: 'personCardNo', width: 180, align: 'center' },
    { title: '对方姓名', dataIndex: 'otherName', key: 'otherName', width: 120, align: 'center' },
    { title: '对方卡号', dataIndex: 'otherCardNo', key: 'otherCardNo', width: 180, align: 'center' },
    { title: '交易时间', dataIndex: 'transDateTime', key: 'transDateTime', width: 180, align: 'center' },
    { title: '交易摘要', dataIndex: 'transSummary', key: 'transSummary', width: 360 },
    { title: '备注', dataIndex: 'remark', key: 'remark', width: 160, align: 'center' },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 100,
      align: 'center',
      fixed: 'right',
      slots: { customRender: 'action' },
    },
  ];

  const keywordColumns = [
    { title: '序号', dataIndex: 'rowNo', key: 'rowNo', width: 80, align: 'center' },
    { title: '关键字', dataIndex: 'financialKey', key: 'financialKey', width: 320, align: 'left' },
    { title: '标签', dataIndex: 'tag', key: 'tag', width: 240, align: 'center' },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 160,
      align: 'center',
      slots: { customRender: 'keywordAction' },
    },
  ];

  const getKeywordActions = (record: KeywordRow) => [
    {
      label: '编辑',
      onClick: () => openKeywordEditor(record),
    },
    {
      label: '删除',
      color: 'error' as const,
      popConfirm: {
        title: '是否确认删除该关键字？',
        confirm: () => handleDeleteKeyword(record),
      },
    },
  ];

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

  const normalizeFinancialList = (resp: any): TransFinancialDTO[] => {
    if (Array.isArray(resp)) return resp;
    if (Array.isArray(resp?.records)) return resp.records;
    if (Array.isArray(resp?.data?.records)) return resp.data.records;
    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;
    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 mapKeywordRows = (list: TransFinancialKey[]): KeywordRow[] =>
    list.map((item, index) => ({
      ...item,
      rowKey: item.id ?? `financial-key-${index}`,
      rowNo: index + 1,
    }));

  const mapFinancialRows = (list: TransFinancialDTO[]): FinancialRow[] =>
    list.map((item, index) => ({
      rowKey: item.id ?? `financial-row-${pagination.value.current}-${index}`,
      rowNo: (pagination.value.current - 1) * pagination.value.pageSize + index + 1,
      personName: item.personName || '-',
      personCardNo: item.personCardNo || '-',
      otherName: item.otherName || '-',
      otherCardNo: item.otherCardNo || '-',
      transDateTime: item.transDateTime || '-',
      transSummary: item.transSummary || '-',
      remark: item.remark || '-',
      raw: item,
    }));

  const getSortTimestamp = (value?: string) => {
    if (!value) return 0;
    const timestamp = dayjs(value).valueOf();
    return Number.isFinite(timestamp) ? timestamp : 0;
  };

  const sortFinancialList = (list: TransFinancialDTO[]) =>
    [...list].sort((left, right) => {
      const leftTime = getSortTimestamp(left.transDateTime);
      const rightTime = getSortTimestamp(right.transDateTime);
      if (rightTime !== leftTime) return rightTime - leftTime;

      return String(left.personName || left.personCardNo || '').localeCompare(
        String(right.personName || right.personCardNo || ''),
      );
    });

  const buildQuery = (): TransFinancialQuery => {
    const range = filters.value.dateRange as RangeValue;
    return {
      page: pagination.value.current,
      limit: pagination.value.pageSize,
      startDate: range?.[0] ? dayjs(range[0]).format('YYYY-MM-DD') : undefined,
      endDate: range?.[1] ? dayjs(range[1]).format('YYYY-MM-DD') : undefined,
      personNames: (() => {
        const personNames = normalizeSelectedTargets(filters.value.target);
        return personNames.length ? personNames : undefined;
      })(),
      orderKey: DEFAULT_SORT_KEY,
      sort: DEFAULT_SORT_ORDER,
    };
  };

  const buildTransRecordBaseQuery = (record: FinancialRow): Partial<TransRecordQuery> => {
    const currentQuery = buildQuery();
    const transDate = record.raw.transDateTime ? dayjs(record.raw.transDateTime).format('YYYY-MM-DD') : undefined;
    const { startDate, endDate } = mergeDetailDateRange(
      {
        startDate: currentQuery.startDate,
        endDate: currentQuery.endDate,
      },
      {
        startDate: transDate,
        endDate: transDate,
      },
    );

    return {
      personName: pickDetailValue(record.raw.personName, currentQuery.personNames?.[0]),
      personCardNo: pickDetailValue(record.raw.personCardNo),
      otherName: pickDetailValue(record.raw.otherName),
      otherCardNo: pickDetailValue(record.raw.otherCardNo),
      startDate,
      endDate,
    };
  };

  const resetKeywordForm = () => {
    keywordForm.id = undefined;
    keywordForm.financialKey = '';
    keywordForm.tag = '';
    keywordFormErrors.financialKey = '';
    keywordFormErrors.tag = '';
  };

  const loadKeywordList = async (showSuccessMessage = false) => {
    keywordLoading.value = true;
    try {
      const resp = await listFinancialKeys();
      keywordData.value = mapKeywordRows(normalizeKeywordList(resp));
      keywordPagination.value.current = 1;
      keywordJumpPage.value = '1';
      if (showSuccessMessage) {
        createMessage.success('关键词列表已刷新');
      }
    } catch (error) {
      keywordData.value = [];
      keywordPagination.value.current = 1;
      keywordJumpPage.value = '1';
      createMessage.warning('获取关键词失败');
    } finally {
      keywordLoading.value = false;
    }
  };
  const handleKeywordPrevPage = () => {
    if (keywordPagination.value.current <= 1) return;
    keywordPagination.value.current -= 1;
    keywordJumpPage.value = String(keywordPagination.value.current);
  };
  const handleKeywordNextPage = () => {
    if (keywordPagination.value.current >= keywordTotalPages.value) return;
    keywordPagination.value.current += 1;
    keywordJumpPage.value = String(keywordPagination.value.current);
  };
  const handleKeywordPageSizeChange = (value: string | number) => {
    keywordPagination.value.pageSize = Number(value);
    keywordPagination.value.current = 1;
    keywordJumpPage.value = '1';
  };
  const handleKeywordJumpPage = () => {
    const next = Number(keywordJumpPage.value);
    if (!Number.isInteger(next) || next < 1) {
      createMessage.warning('请输入正确页码');
      keywordJumpPage.value = String(keywordPagination.value.current);
      return;
    }

    keywordPagination.value.current = Math.min(next, keywordTotalPages.value);
    keywordJumpPage.value = String(keywordPagination.value.current);
  };
  const handleKeywordJumpPageInput = (value: string) => {
    keywordJumpPage.value = value;
  };

  const openKeywordModal = async () => {
    keywordModalOpen.value = true;
    await loadKeywordList();
  };

  const handleKeywordModalChange = async (open: boolean) => {
    keywordModalOpen.value = open;
    if (open && !keywordData.value.length) {
      await loadKeywordList();
    }
  };

  const openKeywordEditor = (record?: KeywordRow) => {
    resetKeywordForm();
    if (record) {
      keywordForm.id = record.id !== undefined && record.id !== null ? String(record.id) : undefined;
      keywordForm.financialKey = record.financialKey || '';
      keywordForm.tag = record.tag || '';
    }
    keywordEditorOpen.value = true;
  };

  const closeKeywordEditor = () => {
    keywordEditorOpen.value = false;
    resetKeywordForm();
  };

  const validateKeywordForm = () => {
    const financialKey = keywordForm.financialKey.trim();
    const tag = keywordForm.tag.trim();

    keywordFormErrors.financialKey = financialKey ? '' : '请输入关键字';
    keywordFormErrors.tag = tag ? '' : '请输入标签';

    if (!financialKey || !tag) return false;

    keywordForm.financialKey = financialKey;
    keywordForm.tag = tag;
    return true;
  };

  const handleSaveKeyword = async () => {
    if (!validateKeywordForm()) return;

    keywordSaving.value = true;
    try {
      await createOrUpdateFinancialKey({
        id: keywordForm.id,
        financialKey: keywordForm.financialKey,
        tag: keywordForm.tag,
      });
      createMessage.success(keywordForm.id ? '关键词更新成功' : '关键词新增成功');
      keywordEditorOpen.value = false;
      resetKeywordForm();
      await loadKeywordList();
    } catch (error) {
      createMessage.warning(keywordForm.id ? '关键词更新失败' : '关键词新增失败');
    } finally {
      keywordSaving.value = false;
    }
  };

  const handleDeleteKeyword = async (record: KeywordRow) => {
    if (!record.id) {
      createMessage.warning('缺少关键词ID，无法删除');
      return;
    }

    try {
      await deleteFinancialKey(String(record.id));
      createMessage.success('关键词删除成功');
      await loadKeywordList();
    } catch (error) {
      createMessage.warning('关键词删除失败');
    }
  };

  const fetchTable = async () => {
    await runWithQueryLoading(async () => {
      const resp = await statFirstTransFinancial(buildQuery());
      const list = sortFinancialList(normalizeFinancialList(resp));
      tableData.value = mapFinancialRows(list);
      pagination.value.total = normalizeTotal(resp, list.length);
      hasSearched.value = true;
      syncAnalysisDataRefreshState(list.length > 0);

      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;
      jumpPage.value = String(pagination.value.current);
    });
  };

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

  const handleReset = async () => {
    filters.value = {
      target: [],
      dateRange: null,
    };
    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 handleViewDetail = (record: FinancialRow) => {
    transRecordBaseQuery.value.id = record.raw.id || undefined;
    transRecordModalOpen.value = true;
  };

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

  onMounted(async () => {
    await fetchTargetOptions();
  });
</script>

<style lang="less">
  @import '../styles/trans-analysis-table-ui.less';
  @prefix-cls: ~'jeesite-financial-wealth';

  .@{prefix-cls}.financial-wealth-page {
    .analysis-page-frame();

    .filter-input {
      width: 180px;
    }

    .filter-date {
      width: 360px;
    }

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

    .filter-actions {
      display: flex;
      gap: 8px;
    }

    .extra-actions {
      display: flex;
    }

    .content-panel {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .table-card {
      .analysis-card-shell();
      flex: 1 1 auto;
    }

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

    .table-wrapper .ant-table-wrapper {
      height: 100%;
      min-height: 0;
    }

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

    .table-wrapper .ant-spin-container,
    .table-wrapper .ant-table,
    .table-wrapper .ant-table-container {
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .table-wrapper .ant-table-body {
      max-height: 100% !important;
    }

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

    .table-wrapper .ant-table-cell {
      font-size: 12px;
    }

    .pagination-input {
      width: 48px;
    }

    .keyword-form {
      padding-top: 8px;
    }

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

    @media screen and (max-width: 992px) {
      .toolbar-actions {
        width: 100%;
        margin-left: 0;
      }

      .filter-input,
      .filter-date {
        width: 100%;
      }

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