vue3-smart-table 0.0.4 → 1.0.0

package/src/components/SmartTable/config.ts

@@ -0,0 +1,131 @@
+/**
+ * 全局配置管理
+ */
+import type { SmartTableConfig } from './types'
+import { getRendererManager } from './renderer'
+
+/**
+ * 默认配置
+ */
+const defaultConfig: SmartTableConfig = {
+  defaultPagination: {
+    page: 1,
+    size: 10,
+    total: 0
+  },
+  defaultTableProps: {},
+  defaultColumnProps: {},
+  theme: {
+    primaryColor: '#409EFF',
+    successColor: '#67C23A',
+    warningColor: '#E6A23C',
+    dangerColor: '#F56C6C',
+    infoColor: '#909399'
+  }
+}
+
+/**
+ * 全局配置类
+ */
+class ConfigManager {
+  private config: SmartTableConfig = { ...defaultConfig }
+
+  /**
+   * 获取所有配置
+   */
+  getConfig(): SmartTableConfig {
+    return { ...this.config }
+  }
+
+  /**
+   * 设置配置
+   */
+  setConfig(config: Partial<SmartTableConfig>): void {
+    this.config = this.mergeConfig(this.config, config)
+
+    // 如果有自定义渲染器，自动注册
+    if (config.renderers) {
+      const manager = getRendererManager()
+      manager.registerMultiple(config.renderers)
+    }
+  }
+
+  /**
+   * 获取特定配置项
+   */
+  get<K extends keyof SmartTableConfig>(key: K): SmartTableConfig[K] {
+    return this.config[key]
+  }
+
+  /**
+   * 重置为默认配置
+   */
+  reset(): void {
+    this.config = { ...defaultConfig }
+  }
+
+  /**
+   * 深度合并配置
+   */
+  private mergeConfig(target: any, source: any): any {
+    const result = { ...target }
+
+    for (const key in source) {
+      if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+        result[key] = this.mergeConfig(target[key] || {}, source[key])
+      } else {
+        result[key] = source[key]
+      }
+    }
+
+    return result
+  }
+}
+
+/**
+ * 全局配置管理器单例
+ */
+let globalConfigManager: ConfigManager | null = null
+
+/**
+ * 获取全局配置管理器
+ */
+export function getConfigManager(): ConfigManager {
+  if (!globalConfigManager) {
+    globalConfigManager = new ConfigManager()
+  }
+  return globalConfigManager
+}
+
+/**
+ * 安装插件（用于 Vue.use()）
+ */
+export interface SmartTablePlugin {
+  install: (options?: SmartTableConfig) => void
+}
+
+/**
+ * 创建插件实例
+ */
+export function createSmartTablePlugin(defaultOptions?: SmartTableConfig): SmartTablePlugin {
+  return {
+    install(options?: SmartTableConfig) {
+      const manager = getConfigManager()
+      const config = { ...defaultOptions, ...options }
+      if (config) {
+        manager.setConfig(config)
+      }
+    }
+  }
+}
+
+/**
+ * 全局配置快捷方法
+ */
+export function setSmartTableConfig(config: Partial<SmartTableConfig>): void {
+  getConfigManager().setConfig(config)
+}
+
+export function getSmartTableConfig(): SmartTableConfig {
+  return getConfigManager().getConfig()
+}

package/src/components/SmartTable/hooks/useOperationColumn.ts

@@ -0,0 +1,136 @@
+import { computed } from 'vue'
+
+import { ButtonConfig } from "../types"
+/**
+ * useOperationColumn
+ *
+ * 操作列专用逻辑 Hook，负责：
+ * 1. 根据权限判断操作列是否需要显示
+ * 2. 计算操作列宽度（支持按钮自定义宽度）
+ * 3. 支持行级 visible 配置
+ * @param buttonConfigs 操作列按钮配置
+ * @param maxbtn        操作列最多显示按钮数量（超过的不参与宽度计算）
+ * @param userPermissions 当前用户权限列表
+ */
+export function useOperationColumn(
+  buttonConfigs: ButtonConfig[],
+  maxbtn = 10,
+  userPermissions: string[] = []
+) {
+  /** 默认按钮宽度 */
+  const defaultWidth = 60
+
+  /** 超级权限标识 */
+  const all_permission = '*:*:*'
+
+  /** --------------------------
+   * 权限判断
+   * -------------------------- */
+
+  /**
+   * 判断是否具备按钮权限
+   *
+   * 规则：
+   * - permission 未配置 ⇒ 永远有权限
+   * - permission 为 string | string[] ⇒ 与用户权限匹配
+   */
+  const hasPermi = (value?: string | string[]) => {
+    if (!value) return true
+
+    const permArray = Array.isArray(value) ? value : [value]
+    return userPermissions.some(
+      p => p === all_permission || permArray.includes(p)
+    )
+  }
+
+  /** --------------------------
+   * 仅基于权限（不考虑行级 visible）
+   * 适用于：表格未加载数据时的判断
+   * -------------------------- */
+
+  /**
+   * 是否至少存在一个有权限的按钮
+   * 用于判断操作列是否需要渲染
+   */
+  const hasAnyButton = computed(() => {
+    return buttonConfigs.some(btn => hasPermi(btn.permission))
+  })
+
+  /**
+   * 操作列宽度（仅基于权限）
+   * 用于无行数据时的兜底宽度计算
+   */
+  const optWidth = computed(() => {
+    const permittedBtns = buttonConfigs
+      .filter(btn => hasPermi(btn.permission))
+      .slice(0, maxbtn)
+
+    return permittedBtns.reduce(
+      (sum, btn) => sum + (btn.width ?? defaultWidth),
+      0
+    )
+  })
+
+  /** --------------------------
+   * 权限 + 行级 visible
+   * -------------------------- */
+
+  /**
+   * 判断某个按钮在某一行是否可见
+   */
+  const isButtonVisible = (btn: ButtonConfig, row: any) => {
+    return (
+      hasPermi(btn.permission) &&
+      (btn.visible ? btn.visible(row) : true)
+    )
+  }
+
+  /**
+   * 单行操作列宽度
+   */
+  const optRowWidth = (row: any) => {
+    const visibleBtns = buttonConfigs
+      .filter(btn => isButtonVisible(btn, row))
+      .slice(0, maxbtn)
+
+    return visibleBtns.reduce(
+      (sum, btn) => sum + (btn.width ?? defaultWidth),
+      0
+    )
+  }
+
+  /**
+   * 遍历所有行，获取最大操作列宽度
+   */
+  const getMaxOptWidth = (rows: any[]) => {
+    if (!rows?.length) return optWidth.value
+    return rows.reduce(
+      (max, row) => Math.max(max, optRowWidth(row)),
+      0
+    )
+  }
+
+  /**
+   * 判断是否至少有一行存在可见按钮
+   */
+  const hasAnyVisibleButton = (rows: any[]) => {
+    if (!rows?.length) return false
+    return rows.some(row =>
+      buttonConfigs.some(btn => isButtonVisible(btn, row))
+    )
+  }
+
+  const getVisibleButtons = (row: any) => {
+    return buttonConfigs
+      .filter(btn => isButtonVisible(btn, row))
+      .slice(0, maxbtn)
+  }
+
+  return {
+    hasAnyButton,
+    optWidth,
+    hasAnyVisibleButton,
+    getMaxOptWidth,
+    getVisibleButtons
+  }
+}

package/src/components/SmartTable/hooks/useTableColumns.ts

@@ -0,0 +1,143 @@
+import { ref, watch } from 'vue'
+
+
+/**
+ * 合并默认列配置和缓存配置
+ *
+ * 设计原则：
+ * 1️⃣ 列顺序：以 defaultColumns 为准
+ * 2️⃣ 列增减：以 defaultColumns 为准
+ * 3️⃣ 缓存只覆盖用户可配置字段（如 visible）
+ */
+function mergeColumns(
+  defaultColumns: any[],
+  cacheColumns: Array<{ key: string; visible?: boolean }>
+) {
+  if (!cacheColumns?.length) return defaultColumns
+
+  // 建立 key => cache 映射表，提升查找效率
+  const cacheMap = new Map(
+    cacheColumns.map(c => [c.key, c])
+  )
+
+  return defaultColumns.map(col => {
+    const cacheCol = cacheMap.get(col.key)
+
+    // 只允许缓存覆盖「可配置字段」
+    if (!cacheCol) return col
+
+    return {
+      ...col,
+      visible:
+        typeof cacheCol.visible === 'boolean'
+          ? cacheCol.visible
+          : col.visible
+    }
+  })
+}
+
+
+/**
+ * useTableColumns
+ *
+ * 表格列管理 Hook
+ *
+ * 职责：
+ * - 管理表格列顺序
+ * - 管理列显示 / 隐藏
+ * - 持久化用户配置
+ */
+export function useTableColumns(
+  defaultColumns: any[],
+  options?: {
+    /** 缓存唯一标识 */
+    cacheKey?: string
+    /** 存储介质，默认 localStorage */
+    storage?: Storage
+  }
+) {
+
+  /** 解构参数并设置默认值 */
+  const { cacheKey, storage = localStorage } = options || {}
+
+  /**
+   * 如果没有 cacheKey，则不启用缓存
+   * （例如公共页面、未登录页面）
+   * 从缓存中读取列配置
+   */
+  const cache = cacheKey ? storage.getItem(cacheKey) : null
+
+  /**
+   * 响应式列配置
+   * 初始化时合并默认列和缓存列
+   */
+  const columns = ref(
+    mergeColumns(
+      defaultColumns,
+      cache ? JSON.parse(cache) : []
+    )
+  )
+
+  /**
+   * 监听列变化，自动写入缓存
+   */
+  watch(
+    columns,
+    (newVal: any) => {
+      if (!cacheKey) return
+
+      /**
+       * ⚠️ 只保存“轻量配置”
+       * 避免把 render / action / 函数序列化进 localStorage
+       */
+      const lightColumns = newVal.map((col: any) => ({
+        key: col.key,
+        visible: col.visible,
+        columnOpts: col.columnOpts
+      }))
+
+      storage.setItem(
+        cacheKey,
+        JSON.stringify(lightColumns)
+      )
+    },
+    { deep: true }
+  )
+
+  /**
+   * 对外暴露的 API
+   */
+  return {
+    /** 当前列配置（响应式） */
+    columns,
+
+    /**
+     * 主动设置列配置
+     * 常用于：列设置弹窗 / 拖拽排序完成
+     */
+    setColumns(newColumns: any[]) {
+      columns.value = mergeColumns(
+        defaultColumns,
+        newColumns
+      )
+
+      if (cacheKey) {
+        storage.setItem(
+          cacheKey,
+          JSON.stringify(newColumns)
+        )
+      }
+    },
+
+    /**
+     * 重置为默认列配置
+     */
+    resetColumns() {
+      columns.value = defaultColumns
+
+      if (cacheKey) {
+        storage.removeItem(cacheKey)
+      }
+    }
+  }
+}

package/src/components/SmartTable/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-table ref="tableRef"
+    v-bind="$attrs"
+    :data="data"
+    :row-key="rowKey"
+    class="smart-table"
+    v-loading="loading">
+    <TableColumn 
+      v-for="col in cachedColumns" 
+      :key="col.key" 
+      :col="col" 
+      :permissions="permissions"
+      :pagination="pagination"
+      @cell-change="handleCellChange"
+      @cell-blur="handleCellBlur"
+      @cell-enter="handleCellEnter"
+      @cell-click="handleCellClick">
+      <template v-for="col in cachedColumns" #[col.key]="slotProps">
+        <slot :name="col.key" v-bind="slotProps" />
+      </template>
+    </TableColumn>
+  </el-table>
+</template>
+
+<script setup lang="ts" name="SmartTable">
+  import { PropType, ref, watch } from 'vue'
+  import TableColumn from './column/index.vue'
+  import type { BaseColumn, ColumnConfig } from './types'
+  import { useTableColumns } from "./hooks/useTableColumns"
+
+  const props = defineProps({
+    data: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    rowKey: { type: String, default: 'id' },
+    loading: { type: Boolean, default: false },
+    permissions: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    cacheKey: String,
+    pagination: { type: Object, default: () => ({}) },
+
+  })
+  
+  const emit = defineEmits([
+    'update:columns',
+    'cellChange',
+    'cellBlur',
+    'cellEnter',
+    'cell-click',
+  ])
+
+  // ------------------ columns 处理 ------------------
+  const { columns: cachedColumns } = useTableColumns(props.columns, {
+    cacheKey: props.cacheKey ?? '',
+  })
+  watch(
+    cachedColumns,
+    (val: ColumnConfig[]) => emit("update:columns", val),
+    { deep: true, immediate: true },
+  )
+
+  // ----------------事件封装 ------------------
+  const handleCellChange = (row: any, key: string) => emit('cellChange', row, key)
+  const handleCellBlur = (row: any, key: string) => {
+    emit('cellBlur', row, key)
+  }
+  const handleCellEnter = (row: any, key: string) => {
+    console.log('enter')
+    emit('cellEnter', row, key)
+  }
+  
+  // SmartTable
+  const handleCellClick = (row: any, col: any) => {
+    if(!col) return
+    emit('cell-click', row, col)
+  }
+
+  // el-table
+  const tableRef = ref();
+  defineExpose({
+    tableRef,
+  });
+
+</script>
+
+<style scoped>
+  .smart-table {
+    width: 100%;
+  }
+</style>

package/src/components/SmartTable/renderer.ts

@@ -0,0 +1,173 @@
+/**
+ * SmartTable 内部渲染器管理系统
+ * 移动到组件内部，保证组件的自包含性
+ */
+import { defineComponent, h, Component } from 'vue'
+import type { Renderer } from './types'
+
+/**
+ * 渲染器注册表接口
+ */
+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[]
+}
+
+/**
+ * 渲染器管理器类
+ */
+class RendererManager implements RendererRegistry {
+  private renderers: Map<string, Renderer> = new Map()
+
+  register(name: string, renderer: Renderer): void {
+    if (this.renderers.has(name)) {
+      // 批量注册时不警告，只在单独注册时警告
+      if (process.env.NODE_ENV === 'development') {
+        console.debug(`[SmartTable] Renderer "${name}" already registered, skipping.`)
+      }
+    }
+    this.renderers.set(name, renderer)
+  }
+
+  registerMultiple(renderers: Record<string, Renderer>): void {
+    Object.entries(renderers).forEach(([name, renderer]) => {
+      if (!this.renderers.has(name)) {
+        this.renderers.set(name, renderer)
+      }
+    })
+  }
+
+  get(name: string): Renderer | undefined {
+    return this.renderers.get(name)
+  }
+
+  has(name: string): boolean {
+    return this.renderers.has(name)
+  }
+
+  unregister(name: string): boolean {
+    return this.renderers.delete(name)
+  }
+
+  clear(): void {
+    this.renderers.clear()
+  }
+
+  names(): string[] {
+    return Array.from(this.renderers.keys())
+  }
+}
+
+/**
+ * 全局渲染器管理器单例
+ */
+let globalRendererManager: RendererManager | null = null
+
+/**
+ * 获取渲染器管理器
+ */
+export function getRendererManager(): RendererManager {
+  if (!globalRendererManager) {
+    globalRendererManager = new RendererManager()
+  }
+  return globalRendererManager
+}
+
+/**
+ * 包装 SFC 组件为渲染器
+ */
+export function wrapSFCComponent(comp: Component): Renderer {
+  return defineComponent({
+    props: ['row', 'col', 'onCellChange', 'onCellBlur', 'onCellEnter', 'onClick'],
+    setup(props) {
+      return () => h(comp, props)
+    }
+  })
+}
+
+/**
+ * 创建函数式渲染器
+ */
+export function createFunctionalRenderer(
+  render: (props: {
+    row: any
+    col: any
+    onCellChange?: (row: any, col: any) => void
+    onCellBlur?: (row: any, col: any) => void
+    onCellEnter?: (row: any, col: any) => void
+    onClick?: (row: any, col: any) => void
+  }) => any
+): Renderer {
+  return defineComponent({
+    props: ['row', 'col', 'onCellChange', 'onCellBlur', 'onCellEnter', 'onClick'],
+    setup(props) {
+      return () => render(props)
+    }
+  })
+}
+
+/**
+ * 验证渲染器配置
+ * 在开发环境下验证 renderProps 的正确性
+ */
+export function validateRendererProps(
+  rendererName: string,
+  renderProps: Record<string, any> | undefined
+): void {
+  if (process.env.NODE_ENV !== 'production' && renderProps) {
+    switch (rendererName) {
+      case 'dict':
+        if (!renderProps.options || !Array.isArray(renderProps.options)) {
+          console.warn(
+            `[SmartTable] 'dict' renderer requires 'options' array, received:`,
+            renderProps.options
+          )
+        }
+        break
+
+      case 'select':
+        if (!renderProps.options || !Array.isArray(renderProps.options)) {
+          console.warn(
+            `[SmartTable] 'select' renderer requires 'options' array, received:`,
+            renderProps.options
+          )
+        } else if (renderProps.options.length === 0) {
+          console.warn(`[SmartTable] 'select' renderer 'options' array is empty`)
+        }
+        break
+
+      case 'map':
+        if (!renderProps.options || typeof renderProps.options !== 'object') {
+          console.warn(
+            `[SmartTable] 'map' renderer requires 'options' object, received:`,
+            renderProps.options
+          )
+        }
+        break
+
+      case 'link':
+        if (!renderProps.href || typeof renderProps.href !== 'string') {
+          console.warn(
+            `[SmartTable] 'link' renderer requires 'href' string, received:`,
+            renderProps.href
+          )
+        }
+        break
+
+      case 'input-number':
+        if (renderProps.min !== undefined && renderProps.max !== undefined) {
+          if (renderProps.min > renderProps.max) {
+            console.warn(
+              `[SmartTable] 'input-number' renderer: min (${renderProps.min}) should not be greater than max (${renderProps.max})`
+            )
+          }
+        }
+        break
+    }
+  }
+}