vue3-smart-table 1.0.2 → 1.0.3

package/src/components/SmartTable/renderers/index.ts

@@ -0,0 +1,307 @@
+/**
+ * 内置渲染器集合
+ * 可以按需引入或批量注册
+ */
+import { h } from 'vue'
+import { ElButton, ElTag, ElImage, ElMessage } from 'element-plus'
+import { DocumentCopy, CopyDocument } from '@element-plus/icons-vue'
+import type { ColumnConfig } from '../types'
+import { getValueByPath } from '../utils/path'
+import { wrapSFCComponent, createFunctionalRenderer } from '../renderer'
+import EditableInput from './input.vue'
+import EditableNumber from './inputNumber.vue'
+import EditableSelect from './select.vue'
+
+/**
+ * 包装 SFC 组件
+ */
+const input = wrapSFCComponent(EditableInput)
+const inputNumber = wrapSFCComponent(EditableNumber)
+const select = wrapSFCComponent(EditableSelect)
+
+/**
+ * button 渲染器
+ */
+const button = createFunctionalRenderer((props) => {
+  const rp = props.col.renderProps || {}
+  const val = getValueByPath(props.row, props.col.key)
+  return h(ElButton as any, {
+    type: rp.type || 'primary',
+    ...rp,
+    onClick: () => props.onClick?.(props.row, props.col)
+  }, () => rp.label || val)
+})
+
+/**
+ * link 渲染器
+ */
+const link = createFunctionalRenderer((props) => {
+  const rp = props.col.renderProps || {}
+  const val = getValueByPath(props.row, props.col.key)
+  return h('a', {
+    href: rp.href || '#',
+    target: rp.blank ? '_blank' : '_self',
+    style: rp.style || 'color:#409EFF;cursor:pointer;',
+  }, rp.label || val)
+})
+
+/**
+ * html 渲染器
+ */
+const html = createFunctionalRenderer((props) => {
+  const val = getValueByPath(props.row, props.col.key)
+  return h('div', {
+    class: 'line-clamp-2',
+    innerHTML: val ?? '',
+    ...(props.col?.renderProps || {})
+  })
+})
+
+/**
+ * copy 渲染器
+ */
+const copy = createFunctionalRenderer((props) => {
+  const val = getValueByPath(props.row, props.col.key) ?? ''
+  const rp = props.col.renderProps ?? {}
+  const butStyle = {
+    'position': 'absolute',
+    'right': '-5px',
+    'top': '50%',
+    'transform': 'translateY(-50%)',
+    'cursor': 'pointer',
+    'display': 'none',
+    'font-size': '12px',
+    'color': rp.iconColor || '#409EFF',
+    'user-select': 'none'
+  }
+  return h('div', {
+      class: 'st_copy_wrapper',
+      style: 'width: 100%; position: relative; display: inline-block;'
+    },
+    [
+      h('span', {
+        class: 'st_copy_text line-clamp-1',
+        style: 'padding-right: 10px; display: block;',
+      }, val),
+      val && h('span', {
+        class: 'st_copy_btn',
+        style: butStyle,
+        title: rp.copyTitle || '复制',
+        onClick: () => {
+          if (!val) return
+          try {
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+              navigator.clipboard.writeText(val).then(() => {
+                ElMessage.success(rp.successText ?? '复制成功')
+              }).catch(() => {
+                ElMessage.error(rp.errorText ?? '复制失败')
+              })
+            } else {
+              const textarea = document.createElement('textarea')
+              textarea.value = val
+              textarea.style.position = 'fixed'
+              textarea.style.opacity = '0'
+              document.body.appendChild(textarea)
+              textarea.select()
+              const successful = document.execCommand('copy')
+              document.body.removeChild(textarea)
+
+              if (successful) {
+                ElMessage.success(rp.successText ?? '复制成功')
+              } else {
+                ElMessage.error(rp.errorText ?? '复制失败')
+              }
+            }
+          } catch (err) {
+            ElMessage.error(rp.errorText ?? '复制失败')
+          }
+        }
+      }, [h(DocumentCopy, {
+        style: 'width: 1em; height: 1em;'
+      })])
+    ].filter(Boolean)
+  )
+})
+
+/**
+ * img 渲染器
+ */
+const img = createFunctionalRenderer((props) => {
+  const val = getValueByPath(props.row, props.col.key) ?? ''
+  const rp = props.col?.renderProps || {}
+
+  const getImageList = () => {
+    if (!val) return []
+    if (Array.isArray(val)) {
+      return val.filter(item => item && typeof item === 'string')
+    }
+    return [val]
+  }
+
+  const imageList = getImageList()
+
+  if (imageList.length === 0) {
+    return rp.placeholder || ''
+  }
+
+  const defaultStyle = {
+    width: rp.width || '80px',
+    height: rp.height || '80px',
+    marginRight: imageList.length > 1 ? '4px' : '0',
+    ...(rp.style || {})
+  }
+
+  if (imageList.length === 1) {
+    return h(ElImage, {
+      src: imageList[0],
+      previewSrcList: rp.previewSrcList || imageList,
+      fit: rp.fit || 'contain',
+      style: defaultStyle,
+      ...rp
+    })
+  }
+
+  return h('div',
+    {
+      class: 'st_img_wrapper',
+      style: 'display: flex; align-items: center; position: relative'
+    },
+    [
+      h(ElImage, {
+        src: imageList[0],
+        previewSrcList: rp.previewSrcList || imageList,
+        fit: rp.fit || 'contain',
+        style: defaultStyle,
+        ...rp
+      }),
+      imageList.length > 1 && h('span', {
+        class: 'st_img_total',
+        style: `position: absolute; top: 0; right: 0; `,
+        title: `${imageList.length}`
+      }, [h(CopyDocument, { style: `width: 1em; height: 1em; ` })])
+    ]
+  )
+})
+
+/**
+ * dict 渲染器
+ */
+const dict = createFunctionalRenderer((props) => {
+  const val = getValueByPath(props.row, props.col.key) ?? ''
+  const rp = props.col.renderProps || {}
+  const options = rp.options ?? []
+  const showValue = rp.showValue ?? false
+
+  if (val === null || val === undefined || val === '') return ''
+
+  const values = Array.isArray(val) ? val.map(String) : [String(val)]
+  const matchedOptions = options.filter((opt: any) => values.includes(String(opt.value)))
+  const unmatched = values.filter(v => !options.some((opt: any) => String(opt.value) === v))
+
+  const children = matchedOptions.map((item: any, _index: number) => {
+    return h(
+      ElTag,
+      { key: item.value, type: item.listClass, class: item.cssClass, disableTransitions: true },
+      { default: () => item.label + ' ' }
+    )
+  })
+
+  if (showValue && unmatched.length > 0) {
+    children.push(h('span', {}, unmatched.join(' ')))
+  }
+
+  return h('div', {}, children)
+})
+
+/**
+ * map 渲染器
+ */
+const map = createFunctionalRenderer((props) => {
+  const val = getValueByPath(props.row, props.col.key) ?? ''
+  const options = (props.col.renderProps?.options ?? {}) as Record<string, any>
+  return val != null ? options[val] ?? '' : ''
+})
+
+/**
+ * formatter 渲染器
+ */
+export function isDataColumn(
+  col: ColumnConfig
+): col is any {
+  return typeof (col as any).formatter === 'function'
+}
+
+const formatter = createFunctionalRenderer((props) => {
+  const { col, row } = props
+  const val = getValueByPath(props.row, props.col.key) ?? ''
+  if (isDataColumn(col)) {
+    return col.formatter?.(val, row)
+  }
+  return val ?? ''
+})
+
+/**
+ * icon 渲染器
+ */
+const icon = createFunctionalRenderer((props) => {
+  const val = getValueByPath(props.row, props.col.key) ?? ''
+  const rp = props.col.renderProps || {}
+  if (!val) return ''
+  // 判断网络图片
+  if (/^https?:\/\//.test(val)) {
+    return h(ElImage, {
+      src: val,
+      previewSrcList: [val],
+      fit: 'contain',
+      style: 'width:40px;height:40px',
+      ...rp
+    })
+  }
+  // 判断 svg 源码
+  if (/^\s*<svg[\s\S]*<\/svg>\s*$/.test(val)) {
+    return h('div', {
+      innerHTML: val,
+      style: `width:40px;height:40px;display:inline-block;${rp.style || ''}`,
+      ...rp
+    })
+  }
+  // 默认当作 iconfont
+  return h('i', {
+    class: val,
+    style: `font-size:20px;${rp.style || ''}`,
+    ...rp
+  })
+})
+
+/**
+ * 所有内置渲染器
+ */
+export const builtInRenderers = {
+  input,
+  'input-number': inputNumber,
+  select,
+  button,
+  link,
+  html,
+  copy,
+  img,
+  dict,
+  map,
+  formatter,
+  icon,
+}
+
+/**
+ * 安装所有内置渲染器
+ */
+export function registerBuiltInRenderers(registry: { registerMultiple: (renderers: Record<string, any>) => void }) {
+  registry.registerMultiple(builtInRenderers)
+}
+
+/**
+ * 创建默认渲染器集合（兼容旧 API）
+ * @deprecated 建议使用插件化架构
+ */
+export function createRenderer() {
+  return builtInRenderers
+}

package/src/components/SmartTable/renderers/input.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-input
+    v-model="value"
+    v-bind="{ placeholder: '', size: 'small', clearable: true, ...col.renderProps }"
+    @blur="onBlur"
+    @keyup.enter="onEnter"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { ColumnConfig } from '../types'
+import { getValueByPath, setValueByPath } from '../utils/path'
+
+interface Props {
+  readonly row: any
+  readonly col: ColumnConfig
+  onCellBlur?: (row: any, col: ColumnConfig) => void
+  onCellEnter?: (row: any, col: ColumnConfig) => void
+}
+
+const props = defineProps<Props>()
+const value = ref(getValueByPath(props.row, props.col.key))
+
+watch(value, (v) => {
+  setValueByPath(props.row, props.col.key, v)
+})
+
+const onBlur = () => props.onCellBlur?.(props.row, props.col)
+const onEnter = () => props.onCellEnter?.(props.row, props.col)
+</script>

package/src/components/SmartTable/renderers/inputNumber.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-input-number
+    v-model="value"
+    v-bind="{ min: 0, max: 99999, controls: false, size: 'small', ...col.renderProps }"
+    @blur="onBlur"
+    @keyup.enter="onEnter"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { ColumnConfig } from '../types'
+import { getValueByPath, setValueByPath } from '../utils/path'
+
+interface Props {
+  readonly row: any
+  readonly col: ColumnConfig
+  onCellChange?: (row: any, col: ColumnConfig) => void
+  onCellBlur?: (row: any, col: ColumnConfig) => void
+  onCellEnter?: (row: any, col: ColumnConfig) => void
+}
+
+const props = defineProps<Props>()
+const value = ref(getValueByPath(props.row, props.col.key))
+
+watch(value, (v) => {
+  setValueByPath(props.row, props.col.key, v)
+  props.onCellChange?.(props.row, props.col)
+})
+
+const onBlur = () => props.onCellBlur?.(props.row, props.col)
+const onEnter = () => props.onCellEnter?.(props.row, props.col)
+</script>

package/src/components/SmartTable/renderers/select.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-select
+    v-model="value"
+    v-bind="{ placeholder: '请选择', size: 'small', clearable: true, ...col.renderProps }"
+    @change="onChange"
+    @blur="onBlur"
+    @keyup.enter="onEnter"
+  >
+    <el-option
+      v-for="opt in col.renderProps?.options || []"
+      :key="opt.value"
+      :label="opt.label"
+      :value="opt.value"
+    />
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { ColumnConfig } from '../types'
+import { getValueByPath, setValueByPath } from '../utils/path'
+
+interface Props {
+  readonly row: any
+  readonly col: ColumnConfig
+  onCellChange?: (row: any, col: ColumnConfig) => void
+  onCellBlur?: (row: any, col: ColumnConfig) => void
+  onCellEnter?: (row: any, col: ColumnConfig) => void
+}
+
+const props = defineProps<Props>()
+const value = ref(getValueByPath(props.row, props.col.key))
+
+watch(value, (v) => {
+  setValueByPath(props.row, props.col.key, v)
+})
+
+const onChange = () => props.onCellChange?.(props.row, props.col)
+const onBlur = () => props.onCellBlur?.(props.row, props.col)
+const onEnter = () => props.onCellEnter?.(props.row, props.col)
+</script>

package/src/components/SmartTable/types.ts

@@ -0,0 +1,229 @@
+import type { ButtonProps, TableColumnCtx } from 'element-plus'
+import { DefaultRow } from 'element-plus/es/components/table/src/table/defaults'
+import type { Component } from 'vue'
+
+// 导出验证函数类型
+export type { validateRendererProps } from './renderer'
+
+/* ======================= 基础工具类型 ======================= */
+
+/** 支持额外参数（Element Plus 透传 props） */
+export type WithRestProps<T> = T & {
+  [key: string]: any
+}
+
+/* ======================= 渲染器系统 ======================= */
+
+/** Renderer 组件类型 */
+export type Renderer = Component
+
+/** 渲染器注册表接口 */
+export interface RendererRegistry {
+  register(name: string, renderer: Renderer): void
+  registerMultiple(renderers: Record<string, Renderer>): void
+  get(name: string): Renderer | undefined
+  has(name: string): boolean
+  unregister(name: string): boolean
+  clear(): void
+  names(): string[]
+}
+
+/** 全局配置接口 */
+export interface SmartTableConfig {
+  /** 自定义渲染器 */
+  renderers?: Record<string, Renderer>
+  /** 默认分页配置 */
+  defaultPagination?: {
+    page?: number
+    size?: number
+    total?: number
+  }
+  /** 默认表格属性 */
+  defaultTableProps?: Record<string, any>
+  /** 默认列属性 */
+  defaultColumnProps?: Record<string, any>
+}
+
+/* ======================= 操作列按钮 ======================= */
+
+export interface ButtonConfig<R = any> {
+  permission?: string | string[]
+  label: string
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  action: (row: R) => void
+  visible?: (row: R) => boolean
+  width?: number
+}
+
+/* ======================= Renderer ======================= */
+
+export type RendererName =
+  | 'html'
+  | 'copy'
+  | 'img'
+  | 'dict'
+  | 'map'
+  | 'formatter'
+  | 'icon'
+  | 'input'
+  | 'input-number'
+  | 'select'
+  | 'button'
+  | 'link'
+  | 'slot'
+  
+/** renderer 对应的 renderProps */
+export interface RendererPropsMap {
+  html: WithRestProps<{
+    style?: string
+    class?: string
+  }>
+
+  copy: WithRestProps<{
+    /** 复制按钮图标颜色 */
+    iconColor?: string
+    /** 复制按钮提示文本 */
+    copyTitle?: string
+    /** 复制成功提示 */
+    successText?: string
+    /** 复制失败提示 */
+    errorText?: string
+  }>
+
+  img: WithRestProps<{
+    /** 图片宽度 */
+    width?: string | number
+    /** 图片高度 */
+    height?: string | number
+    /** 图片适应方式 */
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
+    /** 预览图片列表 */
+    previewSrcList?: string[]
+    /** 无图片时的占位文本 */
+    placeholder?: string
+    /** 自定义样式 */
+    style?: string
+  }>
+
+  dict: WithRestProps<{
+    /** 字典配置 */
+    options: Array<{
+      label: string
+      value: string | number
+      listClass?: string
+      cssClass?: string
+    }>
+    /** 是否显示未匹配的值 */
+    showValue?: boolean
+  }>
+
+  map: WithRestProps<{
+    /** key-value 映射 */
+    options: Record<string | number, any>
+  }>
+
+  formatter: never  // formatter 使用 ColumnConfig.formatter 函数
+
+  icon: WithRestProps<{
+    /** 自定义样式 */
+    style?: string
+    /** 图标大小（像素） */
+    size?: number
+    /** 自定义类名 */
+    class?: string
+  }>
+
+  input: WithRestProps<{
+    /** 占位文本 */
+    placeholder?: string
+    /** 输入框尺寸 */
+    size?: 'small' | 'default' | 'large'
+    /** 是否可清空 */
+    clearable?: boolean
+  }>
+
+  'input-number': WithRestProps<{
+    /** 最小值 */
+    min?: number
+    /** 最大值 */
+    max?: number
+    /** 步长 */
+    step?: number
+    /** 精度 */
+    precision?: number
+    /** 输入框尺寸 */
+    size?: 'small' | 'default' | 'large'
+    /** 是否显示增减按钮 */
+    controls?: boolean
+  }>
+
+  select: WithRestProps<{
+    /** 选项配置 */
+    options: Array<{
+      label: string
+      value: string | number
+    }>
+    /** 占位文本 */
+    placeholder?: string
+    /** 选择器尺寸 */
+    size?: 'small' | 'default' | 'large'
+    /** 是否可清空 */
+    clearable?: boolean
+  }>
+
+  button: WithRestProps<ButtonProps & {
+    /** 按钮文本 */
+    label?: string
+    /** 自定义样式 */
+    style?: string
+    /** 自定义类名 */
+    class?: string
+  }>
+
+  link: WithRestProps<{
+    /** 链接文本 */
+    label?: string
+    /** 链接地址 */
+    href: string
+    /** 是否新窗口打开 */
+    blank?: boolean
+    /** 自定义样式 */
+    style?: string
+    /** 自定义类名 */
+    class?: string
+  }>
+}
+
+/* ======================= 列类型 ======================= */
+
+export type ColumnType =
+  | 'default'
+  | 'selection'
+  | 'index'
+  | 'operation'
+
+/* ======================= ColumnConfig ======================= */
+export interface BaseColumn<R extends DefaultRow> {
+  key: keyof R & string
+  label?: string
+  visible?: boolean
+  inControl?: boolean
+  columnProps?: Partial<TableColumnCtx<R>>
+  render?: RendererName   
+  slot?: string           // 插槽名称，默认用 key
+  renderProps?: Partial<RendererPropsMap[keyof RendererPropsMap]>
+  buttons?: ButtonConfig<R>[]   // operation 列专用
+  maxbtn?: number               // operation 列专用
+  __rows?: R[]                  // operation 列内部使用
+}
+
+export interface SelectionColumn<R extends DefaultRow> extends BaseColumn<R> { type: 'selection' }
+export interface IndexColumn<R extends DefaultRow> extends BaseColumn<R> { type: 'index' }
+export interface OperationColumn<R extends DefaultRow> extends BaseColumn<R> { type: 'operation'; buttons: ButtonConfig<R>[] }
+export interface DataColumn<R extends DefaultRow> extends BaseColumn<R> { type?: 'default'; formatter?: (value: any, row: R) => any }
+
+export type ColumnConfig<R extends DefaultRow = any> =
+  | SelectionColumn<R>
+  | IndexColumn<R>
+  | OperationColumn<R>
+  | DataColumn<R>

package/src/components/SmartTable/utils/path.ts

@@ -0,0 +1,29 @@
+/**
+ * 安全获取对象深层属性
+ * 支持 a.b.c / a.0.b
+ */
+export function getValueByPath(obj: any, path?: string) {
+    if (!obj || !path) return undefined
+    return path.split('.').reduce((acc, key) => acc?.[key], obj)
+  }
+  
+  /**
+   * 安全设置对象深层属性（用于可编辑表格）
+   */
+  export function setValueByPath(
+    obj: any,
+    path: string,
+    value: any
+  ) {
+    if (!obj || !path) return
+    const keys = path.split('.')
+    const lastKey = keys.pop()!
+  
+    const target = keys.reduce((acc, key) => {
+      if (!acc[key]) acc[key] = {}
+      return acc[key]
+    }, obj)
+  
+    target[lastKey] = value
+  }
+  

package/src/index.ts

@@ -0,0 +1,38 @@
+/**
+ * Vue3 Smart Table - 主入口文件
+ *
+ * 基于 Vue 3 + Element Plus 的高可复用表格组件库
+ */
+import SmartTable from './components/SmartTable/index.vue'
+
+// 导出类型
+export * from './components/SmartTable/types'
+
+// 导出核心功能（从 SmartTable 内部导出）
+export {
+  getRendererManager,
+  wrapSFCComponent,
+  createFunctionalRenderer,
+  validateRendererProps
+} from './components/SmartTable/renderer'
+
+export {
+  setSmartTableConfig,
+  getSmartTableConfig
+} from './components/SmartTable/config'
+
+// 导出内置渲染器
+export {
+  builtInRenderers,
+  registerBuiltInRenderers,
+  createRenderer
+} from './components/SmartTable/renderers'
+
+// 导出类型工具
+export { defineColumn } from './types/enhanced'
+
+// 导出主组件
+export { SmartTable }
+
+// 默认导出
+export default SmartTable