@yidun/antd-super-table 0.0.1

package/README.md

@@ -0,0 +1,605 @@
+# Antd Super Table 组件
+
+## 介绍
+
+Antd Super Table 是一个基于 Ant Design Vue 的高级表格组件，提供了丰富的功能特性：
+
+- 🔍 灵活的查询条件配置
+- 📊 强大的表格列配置
+- 🎯 场景管理功能
+- ⚡️ 高性能渲染
+- 🛠 可定制的表格配置
+
+## 安装
+
+```bash
+npm install @yidun/antd-super-table
+```
+
+## 基础用法
+
+```vue
+<template>
+  <SuperTable
+    :form-items="formItems"
+    :columns="columns"
+    :request="onRequest"
+  />
+</template>
+
+<script setup lang="ts">
+import SuperTable from 'antd-super-table'
+import type { SuperTableFormItem, SuperTableColumn } from 'antd-super-table'
+
+// 定义查询条件
+const formItems: SuperTableFormItem[] = [
+  {
+    type: 'input',
+    key: 'name',
+    label: '姓名',
+  },
+]
+
+// 定义表格列
+const columns: SuperTableColumn[] = [
+  {
+    type: 'text',
+    key: 'name',
+    title: '姓名',
+  },
+]
+
+// 定义请求函数
+const onRequest = async (params: Record<string, any>) => {
+  const res = await api.getList(params)
+  return {
+    list: res.data,
+    total: res.total,
+  }
+}
+</script>
+```
+
+## 查询场景配置
+
+默认启用场景，场景相关的配置存储在localStorage中
+
+| 属性名           | 类型    | 默认值  | 说明                                |
+| ---------------- | ------- | ------- | ----------------------------------- |
+| sceneType        | string  | ''      | 场景对应的标识                      |
+| enableScene      | boolean | `true`  | 是否启用场景管理                    |
+| sceneStorageType | string  | `local` | 场景存储位置，可选 `local` 或 `api` |
+| sceneRequestUrl  | string  | `''`    | 场景存储的api地址                   |
+| defaultScene     | array   |         | 默认场景配置                        |
+
+## 查询条件配置
+
+### 支持的输入类型
+
+- 文本输入框 (input)
+- 组合输入框 (inputGroup)
+- 数字输入框 (inputNumber)
+- 数字范围输入框 (inputNumberRange)
+- 选择器 (select)
+- 日期选择器 (datePicker)
+- 日期范围选择器 (rangePicker)
+- 级联选择 (cascader)
+- 树形选择 (treeSelect)
+- 自定义组件 (custom)
+
+### 完整示例
+
+```typescript
+import dayjs from 'dayjs'
+import { Switch } from 'ant-design-vue'
+
+export const createFormItems = () => {
+  return [
+    {
+      key: 'input', // 唯一标识
+      type: 'input', // 类型
+      label: '输入框',
+      name: 'input', // 字段名称
+      fixed: true,
+    },
+    {
+      key: 'inputGroup',
+      type: 'inputGroup',
+      label: '输入框组',
+      name: 'inputGroup',
+      fixed: true,
+      addonBeforeProps: {
+        style: {
+          width: '40%',
+        },
+        options: [
+          {
+            label: '大于',
+            value: '>',
+          },
+          {
+            label: '小于',
+            value: '<',
+          },
+          {
+            label: '大于等于',
+            value: '>=',
+          },
+          {
+            label: '小于等于',
+            value: '<=',
+          },
+        ],
+      },
+      value: {
+        select: '<=',
+        value: 999,
+      },
+    },
+    {
+      key: 'inputNumber',
+      type: 'inputNumber',
+      label: '数字输入框',
+      name: 'inputNumber',
+      fixed: true,
+    },
+    {
+      key: 'inputNumberRange',
+      type: 'inputNumberRange',
+      label: '数字范围输入',
+      name: 'inputNumberRange',
+      fixed: true,
+      props: {
+        min: 0,
+        max: 100,
+        placeholder: ['最小值', '最大值'],
+      },
+    },
+    {
+      key: 'select',
+      type: 'select',
+      label: '单选',
+      name: 'select',
+      fixed: true,
+      props: {
+        options: Array.from({ length: 3 }).map((_, index) => ({
+          label: `选项-${index + 1}`,
+          value: index,
+        })),
+      },
+    },
+    {
+      key: 'multipleSelect',
+      type: 'select',
+      label: '多选',
+      name: 'multipleSelect',
+      props: {
+        mode: 'multiple',
+        options: Array.from({ length: 10 }).map((_, index) => ({
+          label: `选项-${index + 1}`,
+          value: index,
+        })),
+      },
+    },
+    {
+      key: 'date',
+      type: 'datePicker',
+      label: '日期',
+      name: 'date',
+      props: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm',
+        presets: [
+          { label: 'Yesterday', value: dayjs().add(-1, 'd') },
+          { label: 'Last Week', value: dayjs().add(-7, 'd') },
+          { label: 'Last Month', value: dayjs().add(-1, 'month') },
+        ],
+      },
+    },
+    {
+      key: 'rangePicker',
+      type: 'rangePicker',
+      label: '时间范围',
+      name: 'rangePicker',
+      props: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm',
+        presets: [
+          { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
+          { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
+          { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
+          { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
+        ],
+      },
+    },
+    {
+      key: 'component',
+      type: 'component',
+      label: '自定义组件',
+      name: 'component',
+      component: Switch,
+      modelPropName: 'checked', // 默认通过v-model:value绑定数据，可通过modelPropName自定义修改，最终效果为v-model:[modelPropName]
+      showLabel: false, // 是否显示label，默认为true
+    },
+  ]
+}
+```
+
+## 表格列配置
+
+### 支持的列类型
+
+- 文本 (text)
+- 图片 (image)
+- 标签 (tag)
+- 按钮 (button)
+- 链接 (link)
+- 自定义 (component)
+- 排序 (sort)
+
+内置解析类型，均支持在一个单元格内展示多个节点，超出最大个数后会展示更多按钮，点击更多按钮可展开查看所有数据，所以可以扩展出文本列表、图片列表、按钮列表、标签列表等展示形式
+
+### 完整示例
+
+```typescript
+import { Input } from 'ant-design-vue'
+
+/**
+ * @description 初始化表单配置，操作类方法可通过参数传递进来
+ * @param { object } options 一些提供给表格内置组件使用的扩展
+ *
+ * */
+export const createTableColumns = (options: {
+  onDelete: (record: Record<string, any>) => void
+}) => {
+  return [
+    {
+      key: 'text',
+      title: '文本',
+      type: 'text', // 默认类型为text，可不填
+      content: 'text',
+      width: 150,
+    },
+    {
+      key: 'textList',
+      title: '文本列表',
+      content: 'textList',
+      width: 150,
+    },
+    {
+      key: 'image',
+      type: 'image',
+      title: '图片',
+      content: 'imageSrc',
+    },
+    {
+      key: 'tag',
+      type: 'tag',
+      title: '标签',
+      width: 120,
+      content() {
+        return {
+          label: '标签',
+          color: 'blue',
+        }
+      },
+    },
+    {
+      key: 'tagList',
+      type: 'tag',
+      title: '标签列表',
+      width: 200,
+      content() {
+        return [
+          {
+            label: '色情',
+            color: 'red',
+          },
+          {
+            label: '违禁',
+            color: 'blue',
+          },
+          {
+            label: '暴恐',
+            color: '#f00',
+          },
+          {
+            label: '涉政',
+            color: 'pink',
+          },
+        ]
+      },
+    },
+    {
+      key: 'button',
+      type: 'button',
+      title: '按钮',
+      content() {
+        return {
+          label: '查看配置',
+          onClick() {
+            window.open(location.href)
+          },
+        }
+      },
+    },
+    {
+      key: 'link',
+      type: 'link',
+      title: '链接',
+      content() {
+        return {
+          label: '查看详情',
+          to: location.href,
+        }
+      },
+    },
+    {
+      key: 'custom',
+      title: '自定义组件',
+      type: 'component',
+      component: Input,
+      width: 200,
+      props: {
+        placeholder: '请输入',
+        style: {
+          width: '120px',
+        },
+        onChange() {
+          console.log('change')
+        },
+      },
+    },
+    {
+      key: 'actions',
+      type: 'button',
+      title: '操作',
+      fixed: 'right',
+      width: 200,
+      content() {
+        return [
+          {
+            label: '编辑',
+          },
+          {
+            label: '删除',
+            onClick: options.onDelete,
+          },
+
+          {
+            label: '详情',
+            onClick() {
+              window.open(location.href)
+            },
+          },
+          {
+            label: '上线',
+          },
+          {
+            label: '下线',
+          },
+        ]
+      },
+    },
+  ]
+}
+```
+
+###
+
+## 对外提供的方法
+
+## API
+
+### Props
+
+| 参数         | 说明         | 类型                                                                       | 默认值                     |
+| ------------ | ------------ | -------------------------------------------------------------------------- | -------------------------- |
+| formItems    | 查询条件配置 | `SuperTableFormItem[]`                                                     | `[]`                       |
+| columns      | 表格列配置   | `SuperTableColumn[]`                                                       | `[]`                       |
+| request      | 数据请求函数 | `(params: Record<string, any>) => Promise<{ list: any[], total: number }>` | -                          |
+| sceneType    | 场景类型     | `string`                                                                   | -                          |
+| loading      | 加载状态     | `boolean`                                                                  | `false`                    |
+| pagination   | 分页配置     | `boolean                                                                   | TablePaginationConfig`     |
+| rowKey       | 行数据的 key | `string                                                                    | ((record: any) => string)` |
+| rowSelection | 行选择配置   | `TableRowSelection`                                                        | -                          |
+
+### Events
+
+| 事件名           | 说明           | 回调参数                                                   |
+| ---------------- | -------------- | ---------------------------------------------------------- |
+| search           | 搜索事件       | `(params: Record<string, any>) => void`                    |
+| reset            | 重置事件       | `() => void`                                               |
+| change           | 表格变化事件   | `(pagination, filters, sorter) => void`                    |
+| selection-change | 选择项变化事件 | `(selectedRowKeys: string[], selectedRows: any[]) => void` |
+
+### Methods
+
+| 方法名         | 说明         | 参数                            |
+| -------------- | ------------ | ------------------------------- |
+| reload         | 重新加载数据 | `(resetPage?: boolean) => void` |
+| reset          | 重置查询条件 | `() => void`                    |
+| clearSelection | 清空选择项   | `() => void`                    |
+
+## Interface
+
+### 表格列类型
+
+```typescript
+/** 表格列对应的type类型 */
+export type SuperTableColumnType =
+  | 'text'
+  | 'link'
+  | 'button'
+  | 'tag'
+  | 'image'
+  | 'component'
+  | 'sort'
+
+/** 表格列配置 */
+export interface SuperTableColumn {
+  /** 列对应key */
+  key: string
+
+  /** 展示类型 text: 文本 button: 按钮 link: 链接 tag: 标签 component：自定义组件 */
+  type?: SuperTableColumnType | ((row: TableDataItem, index: number) => SuperTableColumnType)
+
+  /** 标题 */
+  title: string
+
+  /** 标题对应的提示信息 */
+  titleTooltip?: string | ((row: TableDataItem, index: number) => string)
+
+  /** 表格内容 */
+  content?: string | ((row: TableDataItem, index: number) => any)
+
+  /** 表格内容对应的提示信息 */
+  tooltip?: string | boolean | ((row: TableDataItem, index: number) => string)
+
+  /** 表格内容解析自定义组件 */
+  component?: Component
+
+  /** 表格内容解析用到的组件组件对应的props */
+  props?: Record<string, any> | ((row: TableDataItem, index: number) => Record<string, any>)
+
+  /** 是否可复制 */
+  copyable?: boolean
+
+  /** 是否超出显示省略号 */
+  ellipsis?: boolean
+
+  /** 是否可见 */
+  visible?: boolean
+
+  /** 宽度 */
+  width?: number
+}
+```
+
+### 查询条件类型
+
+```typescript
+/** 查询表单项对应的type类型 */
+export type SuperTableFormItemType =
+  | 'input'
+  | 'inputGroup'
+  | 'inputNumber'
+  | 'inputNumberRange'
+  | 'select'
+  | 'treeSelect'
+  | 'cascader'
+  | 'datePicker'
+  | 'rangePicker'
+  | 'component'
+
+/** 查询条件配置 */
+export interface SuperTableFormItem {
+  /** 查询详类型 */
+  type: SuperTableFormItemType
+
+  /** 查询项对应的字段名称 */
+  name: string
+
+  /** 绑定数据时v-model对应的name，默认value */
+  modelPropName?: string
+
+  /** 查询项label */
+  label: string
+
+  /** 传递给查询详的props */
+  props?: Record<string, any>
+
+  /** 选项值 */
+  value?: any
+
+  /** 自定义组件 */
+  component?: Component
+
+  /** 查询项宽度系数 */
+  span?: number
+
+  /** 是否显示 */
+  visible?: boolean
+
+  /** 带select前缀的组合输入框配置 */
+  addonBeforeProps?: SelectProps
+
+  /** 改变时保持静默，不要触发搜索*/
+  quiet?: boolean
+
+  /** 是否展示label，默认展示 */
+  showLabel?: boolean
+
+  /** 固定选项，不允许删除，高级搜索时一定会默认展示 */
+  fixed?: boolean
+
+  /** 默认选中，开启后表现为
+   * 1. 高级搜索弹窗打开时会默认选中对应的搜索项
+   * 2. 没有配置默认场景时，会根据选中的项目生成一个默认场景 */
+  selected?: boolean
+}
+```
+
+### 场景管理类型
+
+```typescript
+/** 查询场景 */
+export interface SuperTableQueryScene {
+  /** 场景唯一标识 */
+  code: string
+
+  /** 场景名称 */
+  name: string
+
+  /** 配置类型 */
+  type?: string
+
+  /** 配置详情 */
+  value?: string
+
+  /** 查询项列表 */
+  items: SuperTableQuerySceneItem[]
+
+  /** 是否是私有配置 */
+  asPrivate?: boolean
+
+  /** 是否是自定义场景 */
+  isCustom?: boolean
+}
+
+/** 场景中保存的查询条件配置 */
+export interface SuperTableQuerySceneItem {
+  /** 字段名称 */
+  name: string
+
+  /** 字段类型 */
+  type: string
+
+  /** 字段值 */
+  value: any
+}
+
+/** 默认场景配置 */
+export interface DefaultSceneConfig {
+  /** 场景名称 */
+  name?: string
+
+  /** 场景唯一表示，多个自定义场景时必填 */
+  code?: string
+
+  /** 查询项列表 */
+  items: {
+    /** 字段名称 */
+    name: string
+    /** 字段值 */
+    value: any
+  }[]
+}
+```
+
+## 注意事项
+
+1. 组件依赖于 Ant Design Vue，请确保项目中已安装相关依赖
+2. TypeScript 项目需要在 `tsconfig.json` 中配置类型声明文件路径
+3. 自定义组件需要通过 `component` 属性传入，并确保组件已全局注册或局部引入
+4. 场景管理功能需要配置 `sceneType` 属性，并实现相关的存储接口

package/dist/antd-super-table.css

@@ -0,0 +1 @@
+._ellipsisElement_6fog1_1{width:100%;overflow:hidden;display:flex}._ellipsisElement_6fog1_1 ._elementItem_6fog1_6{min-width:0}._ellipsisElementHasGap_6fog1_10{gap:8px}._flexWrap_6fog1_14{flex-wrap:wrap}._ellipsisTag_6fog1_18{cursor:pointer}._imageEllipsisTag_6fog1_22{line-height:30px;min-width:32px;padding:0;text-align:center}._ellipsisList_6fog1_29{max-width:500px;display:flex;gap:8px;flex-wrap:wrap}._tableCellContent_1chn7_1 ._antTypographyEllipsis_1chn7_1{width:100%}._tableCellContent_1chn7_1 ._draggableIcon_1chn7_4{cursor:grab}._textListItem_1chn7_8{width:100%;margin-bottom:4px}._configBtn_1rypj_1{position:absolute;z-index:999;right:0;top:12px}._tableConfig_1rypj_8{width:260px}._tableConfig_1rypj_8 ._tableConfigHead_1rypj_11{padding:8px 16px}._tableConfig_1rypj_8 ._tableConfigContent_1rypj_14{padding:8px 0;height:300px;overflow:auto}._tableConfig_1rypj_8 ._tableConfigContent_1rypj_14 ._columnList_1rypj_19 ._columnItem_1rypj_19{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 16px}._tableConfig_1rypj_8 ._tableConfigContent_1rypj_14 ._columnList_1rypj_19 ._columnItem_1rypj_19 ._columnItemContent_1rypj_26{flex:1;cursor:pointer}._tableConfig_1rypj_8 ._tableConfigContent_1rypj_14 ._columnList_1rypj_19 ._columnItem_1rypj_19 ._dragIcon_1rypj_30{cursor:grab}._tableConfig_1rypj_8 ._tableConfigContent_1rypj_14 ._columnList_1rypj_19 ._columnItem_1rypj_19 ._dragIconDisabled_1rypj_33{cursor:not-allowed}._tableConfig_1rypj_8 ._tableConfigContent_1rypj_14 ._columnList_1rypj_19 ._columnItem_1rypj_19 ._dragHandle_1rypj_36{cursor:grab}._tableConfig_1rypj_8 ._tableConfigContent_1rypj_14 ._emptyText_1rypj_39{line-height:200px;text-align:center}._tableConfig_1rypj_8 ._tableConfigFoot_1rypj_43{display:flex;align-items:center;justify-content:flex-end;border-top:1px solid #d9d9d9;padding:8px 16px}.pro-table-config-popover .ant-popover-inner-content{padding:0}._dynamicList_1woe5_1{list-style:none;padding:0;margin:0}._dynamicList_1woe5_1 ._dynamicListItem_1woe5_6{display:flex;align-items:center;gap:16px;padding:8px;background-color:#fff}._dynamicList_1woe5_1 ._dynamicListItem_1woe5_6 ._dynamicListItemContent_1woe5_13{flex:1;min-width:0}._dynamicList_1woe5_1 ._dynamicListItem_1woe5_6 ._actionsIcons_1woe5_17{display:flex;align-items:center}._dynamicList_1woe5_1 ._dynamicListItem_1woe5_6 ._actionsIcons_1woe5_17 ._dragIcon_1woe5_21{cursor:grab}._dynamicList_1woe5_1 ._dynamicListItem_1woe5_6:last-child{border-bottom:none;margin-bottom:16px}._inputGroup_eukv3_1,._inputNumberGroup_149g6_1{width:100%}._inputNumberGroup_149g6_1 ._inputNumberGroupContent_149g6_4{width:100%;display:flex;align-items:center}._inputNumberGroup_149g6_1 ._inputNumber_149g6_1{width:unset!important;flex:1}._inputNumberGroup_149g6_1 ._startInputNumber_149g6_13{border-top-right-radius:0;border-bottom-right-radius:0;border-right-color:transparent}._inputNumberGroup_149g6_1 ._startInputNumber_149g6_13:focus,._inputNumberGroup_149g6_1 ._startInputNumber_149g6_13:hover{border-right-color:#1677ff}._inputNumberGroup_149g6_1 ._endInputNumber_149g6_21{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:transparent}._inputNumberGroup_149g6_1 ._endInputNumber_149g6_21:focus,._inputNumberGroup_149g6_1 ._endInputNumber_149g6_21:hover{border-left-color:#1677ff}._inputNumberGroup_149g6_1 ._divider_149g6_29{display:inline-block;padding:0 8px;line-height:30px;border-top:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9}._formFieldItem_1imun_1{display:flex;align-items:center;min-width:0}._inputGroup_1imun_7{width:unset}._formFieldItemLabel_1imun_11{padding-left:8px;padding-right:8px;background-color:transparent!important;text-align:center;cursor:default!important;border-right:none!important}._customItemLabel_1imun_20{font-size:14px;padding-right:8px;color:#000000e0}.super-table-input-group{width:100%}.super-table-input-group .super-table-filter-form-item-label+.ant-input,.super-table-input-group .super-table-filter-form-item-label+.ant-input-number,.super-table-input-group .super-table-filter-form-item-label+.ant-select .ant-select-selector,.super-table-input-group .super-table-filter-form-item-label+.ant-picker,.super-table-input-group .super-table-filter-form-item-label+.ant-input-group{border-left-color:transparent!important}.super-table-input-group .super-table-filter-form-item-label+.ant-input:focus,.super-table-input-group .super-table-filter-form-item-label+.ant-input:hover,.super-table-input-group .super-table-filter-form-item-label+.ant-input-number:focus,.super-table-input-group .super-table-filter-form-item-label+.ant-input-number:hover,.super-table-input-group .super-table-filter-form-item-label+.ant-select .ant-select-selector:focus,.super-table-input-group .super-table-filter-form-item-label+.ant-select .ant-select-selector:hover,.super-table-input-group .super-table-filter-form-item-label+.ant-picker:focus,.super-table-input-group .super-table-filter-form-item-label+.ant-picker:hover,.super-table-input-group .super-table-filter-form-item-label+.ant-input-group:focus,.super-table-input-group .super-table-filter-form-item-label+.ant-input-group:hover{border-left-color:#1677ff!important}.super-table-input-group .super-table-filter-form-item-label+.ant-input-group .ant-input{border-left-color:transparent!important}.super-table-input-group .super-table-filter-form-item-label+.ant-input-group .ant-input:focus,.super-table-input-group .super-table-filter-form-item-label+.ant-input-group .ant-input:hover{border-left-color:#1677ff!important;border-right-color:#1677ff!important}.super-table-input-group .super-table-filter-form-item-label+.ant-input-group .ant-select .ant-select-selector{border-start-start-radius:0!important;border-end-start-radius:0!important;border-left-color:transparent!important;border-right-color:transparent!important}.super-table-input-group .super-table-filter-form-item-label+.ant-input-group .ant-select .ant-select-selector:focus,.super-table-input-group .super-table-filter-form-item-label+.ant-input-group .ant-select .ant-select-selector:hover{border-left-color:#1677ff!important;border-right-color:#1677ff!important}.super-table-input-group .input-number-group .ant-input-number:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:transparent!important}.super-table-input-group .input-number-group .ant-input-number:first-child:focus,.super-table-input-group .input-number-group .ant-input-number:first-child:hover{border-left-color:#1677ff!important}._sceneForm_njdgy_1 ._queryFieldItem_njdgy_1{display:flex;align-items:center;gap:8px;min-width:0}._sceneForm_njdgy_1 ._queryFieldItem_njdgy_1 ._fieldSelect_njdgy_7{width:200px}._sceneForm_njdgy_1 ._queryFieldItem_njdgy_1 ._fieldComponent_njdgy_10{flex:1;min-width:0}._sceneList_3nrgr_1{max-height:50vh;overflow:auto}._sceneList_3nrgr_1 ._sceneListHead_3nrgr_5{background-color:#fafafa}._sceneList_3nrgr_1 ._sceneListItem_3nrgr_8{border-top:1px solid #d9d9d9;transition:all .3s;background-color:#fff}._sceneList_3nrgr_1 ._sceneListItem_3nrgr_8:hover{background-color:#f9f9f9}._sceneList_3nrgr_1 ._col_3nrgr_16{padding:12px 16px}._dragIcon_3nrgr_20{cursor:grab}._searchParams_1vdwi_1{flex:1;margin:12px 0}._superTable_1rx9j_1{background-color:#fff;padding:20px 24px}._superTable_1rx9j_1 ._superTableHeader_1rx9j_5{display:flex;gap:16px;border-bottom:1px solid #d9d9d9}._superTable_1rx9j_1 ._superTableHeader_1rx9j_5 ._searchForm_1rx9j_10{flex:1;padding-bottom:12px}._superTable_1rx9j_1 ._superTableHeader_1rx9j_5 ._searchForm_1rx9j_10 ._sceneSelect_1rx9j_14{width:240px}._superTable_1rx9j_1 ._tableWrapper_1rx9j_17 ._toolbar_1rx9j_17{padding-bottom:12px;display:flex;align-items:flex-start;justify-content:flex-end;gap:16px}._superTable_1rx9j_1 ._tableWrapper_1rx9j_17 ._toolbar_1rx9j_17 ._actionBtns_1rx9j_24{display:flex;align-items:center;gap:8px}._superTable_1rx9j_1 ._tableWrapper_1rx9j_17 ._toolbar_1rx9j_17 ._tableHeadWrapper_1rx9j_29{flex:1}._superTable_1rx9j_1 ._tableWrapper_1rx9j_17 ._tableContent_1rx9j_32{position:relative}._superTable_1rx9j_1 ._tableWrapper_1rx9j_17 ._headerCell_1rx9j_35{display:flex;align-items:center;gap:4px}._superTable_1rx9j_1 ._tableWrapper_1rx9j_17 ._headerCell_1rx9j_35 ._headerCellText_1rx9j_40{flex:1}._superTable_1rx9j_1 ._tableWrapper_1rx9j_17 ._headerCell_1rx9j_35 ._headerCellTooltipIcon_1rx9j_43{cursor:pointer}._sceneOpBtnWrapper_1rx9j_47{border-top:1px solid #d9d9d9;padding-top:8px}._sceneOpBtnWrapper_1rx9j_47 ._sceneOpBtn_1rx9j_47{text-align:left}