vue2-client 1.17.39 → 1.17.40

package/src/components/STable/index.js

@@ -1,771 +1,771 @@
-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
-    }
-  },
-  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
-    }
-  }),
-  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.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
-
-    if (this.pageMaxSize) {
-      this.pageSize = this.pageMaxSize
-    }
-
-    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 = pagination?.pageSize || this.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) {
-      const isRowKeySequence = this.rowKey === '序号'
-      const currentRowKey = isRowKeySequence ? index : record[this.rowKey]
-
-      // 如果点击的是已选中的行，则取消选中；否则选中该行
-      if (this.clickedRowKey === currentRowKey) {
-        this.clickedRowKey = null
-        this.$emit('rowClick', null) // 传递 null 表示取消选中
-      } else {
-        this.clickedRowKey = currentRowKey
-        this.$emit('rowClick', 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: () => this.handleRowClick(record, index),
-          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}
-              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} 项`}
-              default-current={this.localPagination.current}
-              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)
-  }
-}
+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
+    }
+  },
+  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
+    }
+  }),
+  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.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
+
+    if (this.pageMaxSize) {
+      this.pageSize = this.pageMaxSize
+    }
+
+    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 = pagination?.pageSize || this.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) {
+      const isRowKeySequence = this.rowKey === '序号'
+      const currentRowKey = isRowKeySequence ? index : record[this.rowKey]
+
+      // 如果点击的是已选中的行，则取消选中；否则选中该行
+      if (this.clickedRowKey === currentRowKey) {
+        this.clickedRowKey = null
+        this.$emit('rowClick', null) // 传递 null 表示取消选中
+      } else {
+        this.clickedRowKey = currentRowKey
+        this.$emit('rowClick', 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: () => this.handleRowClick(record, index),
+          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}
+              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} 项`}
+              default-current={this.localPagination.current}
+              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)
+  }
+}