vue2-client 1.22.2 → 1.22.3

package/.history/src/components/STable/index_20260409155138.js

@@ -0,0 +1,806 @@
+import T from 'ant-design-vue/es/table/Table'
+import get from 'lodash.get'
+import { mapState } from 'vuex'
+import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
+
+export default {
+  data () {
+    return {
+      clickedRowKey: null,
+      hoveredRowKey: null, // 跟踪鼠标悬浮的行
+      needTotalList: [],
+
+      selectedRows: [],
+      selectedRowKeys: [],
+
+      localLoading: false,
+      localDataSource: [],
+      localPagination: Object.assign({}, this.pagination),
+
+      sortField: undefined,
+      sortOrder: undefined,
+      pageNum: 1,
+      pageSize: 10,
+      pageSizeOptions: ['10', '20', '30', '40'],
+    }
+  },
+  props: Object.assign({}, T.props, {
+    rowKey: {
+      type: [String, Function],
+      default: 'key'
+    },
+    data: {
+      type: Function,
+      required: true
+    },
+    setScrollYHeight: {
+      type: Function,
+      required: true
+    },
+    showSizeChanger: {
+      type: Boolean,
+      default: true
+    },
+    showSummary: {
+      type: Boolean,
+      default: false
+    },
+    selectRowMode: {
+      type: String,
+      default: 'default'
+    },
+    size: {
+      type: String,
+      default: 'default'
+    },
+    /**
+     * alert: {
+     *   show: true,
+     *   clear: Function
+     * }
+     */
+    alert: {
+      type: [Object, Boolean],
+      default: null
+    },
+    rowSelection: {
+      type: Object,
+      default: null
+    },
+    /** @Deprecated */
+    showAlertInfo: {
+      type: Boolean,
+      default: false
+    },
+    showPagination: {
+      type: [String, Boolean],
+      default: 'auto'
+    },
+    // 是否隐藏翻页，如果隐藏，彻底不显示翻译
+    hidePagination: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示表头已选择部分
+    showSelected: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * enable page URI mode
+     *
+     * e.g:
+     * /users/1
+     * /users/2
+     * /users/3?queryParam=test
+     * ...
+     */
+    pageURI: {
+      type: Boolean,
+      default: false
+    },
+    // 最大分页大小，如果设置则使用该值作为分页大小并隐藏分页组件
+    pageMaxSize: {
+      type: Number,
+      default: null
+    },
+    // 是否使用自定义分页样式
+    customPagination: {
+      type: Boolean,
+      default: false
+    },
+    // 行样式函数，用于控制每行的样式类型
+    rowStyleFunction: {
+      type: [Function, String],
+      default: null
+    },
+    // 默认查询的当页行数
+    defaultPageSize: {
+      type: Number,
+      default: 10
+    },
+    pageSizeArray: {
+      type: Array,
+      default: () => ['10', '20', '30', '40']
+    }
+  }),
+  computed: {
+    ...mapState('setting', ['theme']), // 添加 theme 到计算属性
+
+    // 计算点击行的背景色，使用 10% 透明度
+    clickedRowColor () {
+      const themeColor = this.$store.state.setting.theme.color
+      return this.hexToRgba(themeColor || '#1890ff', 0.1)
+    }
+  },
+  watch: {
+    'localPagination.current' (val) {
+      this.pageURI && this.$router.push({
+        ...this.$route,
+        name: this.$route.name,
+        params: Object.assign({}, this.$route.params, {
+          pageNo: val
+        })
+      })
+      // change pagination, reset total data
+      this.needTotalList = this.initTotalList(this.columns)
+      if (this.selectRowMode === 'default') {
+        this.selectedRowKeys = []
+        this.selectedRows = []
+      }
+    },
+    pageNum (val) {
+      Object.assign(this.localPagination, {
+        current: val
+      })
+    },
+    pageSize (val) {
+      Object.assign(this.localPagination, {
+        pageSize: val
+      })
+    },
+    showSizeChanger (val) {
+      Object.assign(this.localPagination, {
+        showSizeChanger: val
+      })
+    },
+    pageMaxSize: {
+      handler (val) {
+        if (val && !this.defaultPageSize) {
+          this.pageSize = val
+          // 更新 localPagination
+          if (this.localPagination) {
+            Object.assign(this.localPagination, {
+              pageSize: val
+            })
+          }
+        }
+      },
+      immediate: true
+    }
+  },
+  created () {
+    const { pageNo } = this.$route.params
+    const localPageNum = this.pageURI && (pageNo && parseInt(pageNo)) || this.pageNum
+
+    // 优先使用 defaultPageSize，其次才使用 pageMaxSize（向后兼容）
+    if (this.defaultPageSize) {
+      this.pageSize = this.defaultPageSize
+    }
+    // 即将删除的过期属性
+    if (this.pageMaxSize) {
+      this.pageSize = this.pageMaxSize
+    }
+    // 新增属性-分页选项
+    if (this.pageSizeArray && this.pageSizeArray.length) {
+      this.pageSizeOptions = this.pageSizeArray
+    }
+
+    this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
+      current: localPageNum,
+      pageSize: this.pageSize,
+      showSizeChanger: this.showSizeChanger
+    }) || false
+    this.needTotalList = this.initTotalList(this.columns)
+    // this.loadData()
+  },
+  methods: {
+    /**
+     * 表格重新加载方法
+     * 如果参数为 true, 则强制刷新到第一页
+     * @param Boolean bool
+     */
+    refresh (bool = false) {
+      bool && (this.localPagination = Object.assign({}, {
+        current: 1, pageSize: this.pageSize
+      }))
+      this.loadData()
+    },
+    /**
+     * 加载数据方法
+     * @param {Object} pagination 分页选项器
+     * @param {Object} filters 过滤条件
+     * @param {Object} sorter 排序条件
+     */
+    loadData (pagination, filters, sorter) {
+      this.localLoading = true
+      // 暂存排序方式，避免 refresh 之后排序失效
+      if (sorter && sorter.field) {
+        this.sortField = sorter.field
+      }
+      if (sorter && sorter.order) {
+        this.sortOrder = sorter.order
+      }
+
+      // 确定 pageSize
+      let finalPageSize = this.pageSize
+      if (this.showPagination === false) {
+        // 当 showPagination 为 false 时，优先使用传入的 pageSize
+        finalPageSize = this.defaultPageSize || pagination?.pageSize
+      } else if (pagination && pagination.pageSize) {
+        finalPageSize = pagination.pageSize
+      } else if (this.localPagination && this.localPagination.pageSize) {
+        finalPageSize = this.localPagination.pageSize
+      }
+
+      const parameter = Object.assign({
+          querySummary: !pagination && this.showSummary, // 分页查询的情况不重新获取汇总数据
+          pageNo: (pagination && pagination.current) ||
+            this.showPagination && this.localPagination.current || this.pageNum,
+          pageSize: finalPageSize
+        },
+        (this.sortField && { sortField: this.sortField }) || {},
+        (this.sortOrder && { sortOrder: this.sortOrder }) || {},
+        { ...filters }
+      )
+
+      // 在加载新数据前，将当前数据传递给父组件
+      if (this.localDataSource && this.localDataSource.length > 0) {
+        // 变化前的数据: oldData, 分页信息: pagination, 过滤条件: filters, 排序信息: sorter
+        this.$emit('beforeDataChange', {
+          oldData: this.localDataSource,
+          pagination: this.localPagination,
+          filters: filters,
+          sorter: sorter
+        })
+      }
+
+      const result = this.data(parameter)
+      // 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data
+      // eslint-disable-next-line
+      if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
+        result.then(r => {
+          this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
+            current: r.pageNo, // 返回结果中的当前分页数
+            total: r.totalCount, // 返回结果中的总记录数
+            showSizeChanger: this.showSizeChanger,
+            pageSize: finalPageSize
+          }) || false
+          // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
+          if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) {
+            this.localPagination.current--
+            this.loadData()
+            return
+          }
+
+          // 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = 'auto' 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小
+          // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
+          try {
+            if ((['auto'].includes(this.showPagination) && r.totalCount <= (r.pageNo * this.localPagination.pageSize))) {
+              this.localPagination.hideOnSinglePage = true
+            }
+          } catch (e) {
+            this.localPagination = false
+          }
+          this.localDataSource = r.data // 返回结果中的数组数据
+          this.localLoading = false
+          // 清除选中行状态（翻页或重新查询时）
+          this.clickedRowKey = null
+          this.setScrollYHeight({ type: 'default' })
+        }, () => {
+          this.localLoading = false
+          this.setScrollYHeight({ type: 'default' })
+        })
+      }
+    },
+    setLocalDataSource (data) {
+      this.localDataSource = data
+    },
+    initTotalList (columns) {
+      const totalList = []
+      columns && columns instanceof Array && columns.forEach(column => {
+        if (column.needTotal) {
+          totalList.push({
+            ...column,
+            total: 0
+          })
+        }
+      })
+      return totalList
+    },
+    /**
+     * 用于更新已选中的列表数据 total 统计
+     * @param selectedRowKeys
+     * @param selectedRows
+     */
+    updateSelect (selectedRowKeys, selectedRows) {
+      this.selectedRows = selectedRows
+      this.selectedRowKeys = selectedRowKeys
+      const list = this.needTotalList
+      this.needTotalList = list.map(item => {
+        return {
+          ...item,
+          total: selectedRows.reduce((sum, val) => {
+            const total = sum + parseInt(get(val, item.dataIndex))
+            return isNaN(total) ? 0 : total
+          }, 0)
+        }
+      })
+    },
+    /**
+     * 清空 table 已选中项
+     */
+    clearSelected () {
+      if (this.rowSelection) {
+        this.rowSelection.onChange([], [])
+        this.updateSelect([], [])
+      }
+    },
+    /**
+     * 处理交给 table 使用者去处理 clear 事件时，内部选中统计同时调用
+     * @param callback
+     * @returns {*}
+     */
+    renderClear (callback) {
+      if (this.selectedRowKeys.length <= 0) return null
+      return (
+        <a style="margin-left: 24px" onClick={() => {
+          callback()
+          this.clearSelected()
+        }}>清空</a>
+      )
+    },
+    renderAlert () {
+      // 绘制统计列数据
+      const needTotalItems = this.needTotalList.map((item) => {
+        return (<span style="margin-right: 12px">
+          {item.title}总计 <a
+          style="font-weight: 600">{!item.customRender ? item.total : item.customRender(item.total)}</a>
+        </span>)
+      })
+
+      // 绘制 清空 按钮
+      const clearItem = (typeof this.alert.clear === 'boolean' && this.alert.clear) ? (
+        this.renderClear(this.clearSelected)
+      ) : (typeof this.alert.clear === 'function') ? (
+        this.renderClear(this.alert.clear)
+      ) : null
+
+      // 绘制 alert 组件
+      return (
+        <a-alert showIcon={true} style={{ marginBottom: '8px', fontSize: '14px' }}>
+          <template slot="message">
+            <span style="margin-right: 12px;">已选择: <a style="font-weight: 600">{this.selectedRows.length}</a></span>
+            {needTotalItems}
+            {clearItem}
+          </template>
+        </a-alert>
+      )
+    },
+    onExpand (expanded, record) {
+      this.$emit('expand', expanded, record)
+    },
+    handleRowClick (record, index, event, options = {}) {
+      const { forceSelect = false, emitRowClick = true } = options
+      const isRowKeySequence = this.rowKey === '序号'
+      const currentRowKey = isRowKeySequence ? index : record[this.rowKey]
+      const isDoubleClick = event && event.detail > 1
+      const isSameRow = this.clickedRowKey === currentRowKey
+
+      if (forceSelect || isDoubleClick) {
+        this.clickedRowKey = currentRowKey
+        emitRowClick && this.$emit('rowClick', record)
+        return
+      }
+
+      // 如果点击的是已选中的行，则取消选中；否则选中该行
+      if (isSameRow) {
+        this.clickedRowKey = null
+        emitRowClick && this.$emit('rowClick', null) // 传递 null 表示取消选中
+      } else {
+        this.clickedRowKey = currentRowKey
+        emitRowClick && this.$emit('rowClick', record)
+      }
+    },
+    handleRowDoubleClick (record, index, event) {
+      this.handleRowClick(record, index, event, { forceSelect: true })
+      this.$emit('rowDblClick', record)
+    },
+    handleRowMouseEnter (record, index) {
+      if (this.rowKey === '序号') {
+        this.hoveredRowKey = index
+      } else {
+        this.hoveredRowKey = record[this.rowKey]
+      }
+      this.$emit('rowMouseEnter', record, index)
+    },
+    handleRowMouseLeave (record, index) {
+      this.hoveredRowKey = null
+      this.$emit('rowMouseLeave', record, index)
+    },
+    hexToRgba (hex, alpha = 1) {
+      try {
+        const r = parseInt(hex.slice(1, 3), 16)
+        const g = parseInt(hex.slice(3, 5), 16)
+        const b = parseInt(hex.slice(5, 7), 16)
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`
+      } catch (e) {
+        return '#e6f7ff'
+      }
+    },
+    // 获取行样式类型
+    getRowStyleType (record, index) {
+      if (this.rowStyleFunction) {
+        try {
+          // 如果是函数对象，直接执行
+          if (typeof this.rowStyleFunction === 'function') {
+            return this.rowStyleFunction(record, index)
+          }
+          // 如果是字符串函数，使用executeStrFunctionByContext执行
+          if (typeof this.rowStyleFunction === 'string') {
+            return executeStrFunctionByContext(this, this.rowStyleFunction, [record, index])
+          }
+        } catch (e) {
+          console.warn('Row style function error:', e)
+          return 'info'
+        }
+      }
+      return 'info'
+    },
+    // 根据行样式类型和是否激活获取背景色
+    // isActive: 是否处于 hover 或 selected 状态
+    getRowBgColor (styleType, isActive = false) {
+      const colorMap = {
+        success: {
+          normal: 'rgba(82, 196, 26, 0.2)',
+          active: 'rgba(82, 196, 26, 0.2)'
+        },
+        warning: {
+          normal: 'rgba(250, 173, 20, 0.1)',
+          active: 'rgba(250, 173, 20, 0.2)'
+        },
+        error: {
+          normal: 'rgba(245, 34, 47, 0.1)',
+          active: 'rgba(245, 34, 47, 0.2)'
+        },
+        danger: {
+          normal: 'rgba(245, 34, 47, 0.1)',
+          active: 'rgba(245, 34, 47, 0.2)'
+        },
+        magic: {
+          normal: 'rgba(114, 46, 209, 0.1)',
+          active: 'rgba(114, 46, 209, 0.2)'
+        },
+        warn: {
+          normal: 'rgba(250, 173, 20, 0.1)',
+          active: 'rgba(250, 173, 20, 0.2)'
+        },
+        info: {
+          normal: '',
+          active: 'rgba(24, 144, 255, 0.2)'
+        }
+      }
+
+      const colors = colorMap[styleType] || colorMap.info
+      return isActive ? colors.active : colors.normal
+    },
+    // 获取行样式颜色（根据当前行的 hover 和 selected 状态）
+    getRowStyleClass (record, index) {
+      const isRowKeySequence = this.rowKey === '序号'
+      const currentRowKey = isRowKeySequence ? index : record[this.rowKey]
+
+      // 判断是否是选中行或悬浮行
+      const isActive = this.clickedRowKey === currentRowKey || this.hoveredRowKey === currentRowKey
+
+      // 获取行样式类型
+      const styleType = this.getRowStyleType(record, index)
+
+      // 返回对应颜色
+      return this.getRowBgColor(styleType, isActive)
+    },
+  },
+
+  render () {
+    const props = {}
+    const localKeys = Object.keys(this.$data)
+    const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert
+
+    Object.keys(T.props).forEach(k => {
+      const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
+      if (localKeys.includes(localKey)) {
+        props[k] = this[localKey]
+        return props[k]
+      }
+      if (k === 'rowSelection') {
+        if (showAlert && this.rowSelection) {
+          // 如果需要使用alert，则重新绑定 rowSelection 事件
+          props[k] = {
+            ...this.rowSelection,
+            selectedRows: this.selectedRows,
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: (selectedRowKeys, selectedRows) => {
+              this.updateSelect(selectedRowKeys, selectedRows)
+              typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
+            }
+          }
+          return props[k]
+        } else if (!this.rowSelection) {
+          // 如果没打算开启 rowSelection 则清空默认的选择项
+          props[k] = null
+          return props[k]
+        }
+      }
+      this[k] && (props[k] = this[k])
+      return props[k]
+    })
+    // 取消原有的分页组件 产品设计分页组件和汇总在一行 重新分页逻辑
+    props.pagination = false
+
+    // 使用 rowClassName 实现响应式行样式
+    props.rowClassName = (record, index) => {
+      const isRowKeySequence = this.rowKey === '序号'
+      const currentRowKey = isRowKeySequence ? index : record[this.rowKey]
+
+      const classes = []
+
+      // 判断是否是选中行（点击状态）
+      if (this.clickedRowKey === currentRowKey) {
+        classes.push('row-clicked')
+      }
+
+      // 添加行样式类型（用于不同的颜色主题）
+      const styleType = this.getRowStyleType(record, index)
+      classes.push(`row-style-${styleType}`)
+
+      return classes.join(' ')
+    }
+
+    // 在 props 中添加自定义行事件
+    props.customRow = (record, index) => {
+      return {
+        on: {
+          click: (event) => this.handleRowClick(record, index, event),
+          dblclick: (event) => this.handleRowDoubleClick(record, index, event),
+          mouseenter: () => this.handleRowMouseEnter(record, index),
+          mouseleave: () => this.handleRowMouseLeave(record, index)
+        }
+      }
+    }
+    // 自定义底部汇总插槽组件
+    const pagination = (
+      !!this.showPagination && <a-row type={'flex'} justify={'start'} style={{ marginTop: '8px' }}>
+        <a-col flex="1" style={{
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'start',
+          boxSizing: 'border-box',
+          paddingRight: '2rem'
+        }}>
+          {this.$slots.fixedfooter}
+        </a-col>
+        <a-col flex="0 0">
+          {this.customPagination ? (
+            <div class="custom-pagination-container">
+              {/* 首页按钮 */}
+              <div
+                class={['custom-pagination-btn', { disabled: this.localPagination.current === 1 }]}
+                onClick={() => {
+                  if (this.localPagination.current > 1) {
+                    this.pageSize = this.localPagination.pageSize
+                    this.pageNum = 1
+                    this.loadData({
+                      current: 1,
+                      pageSize: this.localPagination.pageSize
+                    })
+                  }
+                }}
+              >
+                <span class="custom-pagination-icon icon-rotate-right">⌅</span>
+              </div>
+
+              {/* 上一页按钮 */}
+              <div
+                class={['custom-pagination-btn', { disabled: this.localPagination.current === 1 }]}
+                onClick={() => {
+                  if (this.localPagination.current > 1) {
+                    this.pageSize = this.localPagination.pageSize
+                    this.pageNum = this.localPagination.current - 1
+                    this.loadData({
+                      current: this.localPagination.current - 1,
+                      pageSize: this.localPagination.pageSize
+                    })
+                  }
+                }}
+              >
+                &lt;
+              </div>
+
+              {/* 当前页按钮 */}
+              <div class="custom-pagination-btn active">
+                {this.localPagination.current}
+              </div>
+
+              {/* 下一页按钮 */}
+              <div
+                class={['custom-pagination-btn', { disabled: this.localPagination.current === ((this.localPagination && this.localPagination.pageSize) ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1))) : 0) || !((this.localPagination && this.localPagination.pageSize) ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1))) : 0) }]}
+                onClick={() => {
+                  const totalPages = (this.localPagination && this.localPagination.pageSize)
+                    ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1)))
+                    : 0
+                  if (totalPages > 0 && this.localPagination.current < totalPages) {
+                    this.pageSize = this.localPagination.pageSize
+                    this.pageNum = this.localPagination.current + 1
+                    this.loadData({
+                      current: this.localPagination.current + 1,
+                      pageSize: this.localPagination.pageSize
+                    })
+                  }
+                }}
+              >
+                &gt;
+              </div>
+
+              {/* 末页按钮 */}
+              <div
+                class={['custom-pagination-btn', { disabled: this.localPagination.current === ((this.localPagination && this.localPagination.pageSize) ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1))) : 0) || !((this.localPagination && this.localPagination.pageSize) ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1))) : 0) }]}
+                onClick={() => {
+                  const totalPages = (this.localPagination && this.localPagination.pageSize)
+                    ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1)))
+                    : 0
+                  if (totalPages > 0 && this.localPagination.current < totalPages) {
+                    this.pageSize = this.localPagination.pageSize
+                    this.pageNum = totalPages
+                    this.loadData({
+                      current: totalPages,
+                      pageSize: this.localPagination.pageSize
+                    })
+                  }
+                }}
+              >
+                <span class="custom-pagination-icon icon-rotate-left">⌅</span>
+              </div>
+
+              {/* 分页信息 */}
+              <div class="custom-pagination-info">
+                共{(this.localPagination && this.localPagination.pageSize)
+                  ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1)))
+                  : 0}页, {(this.localPagination && typeof this.localPagination.total !== 'undefined') ? this.localPagination.total : 0}条
+              </div>
+            </div>
+          ) : (
+            <a-pagination
+              total={this.localPagination.total}
+              pageSize={this.localPagination.pageSize}
+              current={this.localPagination.current}
+              pageSizeOptions={this.pageSizeOptions}
+              onChange={(page, pageSize) => {
+                this.pageSize = pageSize
+                this.pageNum = page
+                this.loadData({
+                  current: page,
+                  pageSize: pageSize
+                })
+              }
+              }
+              onShowSizeChange={(page, pageSize) => {
+                this.pageSize = pageSize
+                this.pageNum = page
+                this.loadData({
+                  current: page,
+                  pageSize: pageSize
+                })
+              }
+              }
+              show-total={(total, range) => range[0] === range[1] ? `${range[0]} | 共 ${total} 项` : `${range[0]}-${range[1]} | 共 ${total} 项`}
+              showSizeChanger={this.localPagination.showSizeChanger}/>
+          )}
+        </a-col>
+      </a-row>
+    )
+    const table = (
+      <a-table {...{ props, scopedSlots: { ...this.$scopedSlots } }} onChange={this.loadData}
+               onExpand={(expanded, record) => this.onExpand(expanded, record)}>
+        {Object.keys(this.$slots).map(name => (<template slot={name}>{this.$slots[name]}</template>))}
+      </a-table>
+    )
+    return (
+      <div class="table-wrapper">
+        {showAlert && this.showSelected && this.selectRowMode === 'default' ? this.renderAlert() : null}
+        {table}
+        {!this.hidePagination ? pagination : null}
+      </div>
+    )
+  }
+}
+
+// 添加自定义分页样式
+const customPaginationStyles = `
+<style>
+.custom-pagination-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.custom-pagination-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #fafafa;
+  color: #5D5C5C;
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  user-select: none;
+}
+
+.custom-pagination-btn:hover {
+  border-color: #0057FE;
+  color: #0057FE;
+}
+
+.custom-pagination-btn.active {
+  background: #0057FE;
+  border-color: #0057FE;
+  color: #fff;
+}
+
+.custom-pagination-btn.disabled {
+  background: #f5f5f5;
+  border-color: #d9d9d9;
+  color: #bfbfbf;
+  cursor: not-allowed;
+}
+
+.custom-pagination-btn.disabled:hover {
+  border-color: #d9d9d9;
+  color: #bfbfbf;
+}
+
+.custom-pagination-info {
+  margin-left: 16px;
+  color: #666;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+/* 自定义图标与旋转方向 */
+.custom-pagination-icon {
+  display: inline-block;
+  line-height: 1;
+  transform-origin: center;
+}
+.icon-rotate-left {
+  transform: rotate(90deg);
+}
+.icon-rotate-right {
+  transform: rotate(-90deg);
+}
+</style>
+`
+
+// 将样式注入到页面
+if (typeof document !== 'undefined') {
+  const styleId = 'custom-pagination-styles'
+  if (!document.getElementById(styleId)) {
+    const styleElement = document.createElement('style')
+    styleElement.id = styleId
+    styleElement.textContent = customPaginationStyles.replace('<style>', '').replace('</style>', '')
+    document.head.appendChild(styleElement)
+  }
+}