vue3-smart-table 0.0.4 → 1.0.0

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/styles/theme.css

@@ -0,0 +1,206 @@
+/**
+ * SmartTable 主题样式
+ * 使用 CSS 变量实现主题定制
+ */
+
+:root {
+  /* 默认主题色 - 可通过 CSS 变量覆盖 */
+  --st-primary-color: #409EFF;
+  --st-success-color: #67C23A;
+  --st-warning-color: #E6A23C;
+  --st-danger-color: #F56C6C;
+  --st-info-color: #909399;
+
+  /* 文本颜色 */
+  --st-text-primary: #303133;
+  --st-text-regular: #606266;
+  --st-text-secondary: #909399;
+  --st-text-placeholder: #C0C4CC;
+
+  /* 边框颜色 */
+  --st-border-color: #DCDFE6;
+  --st-border-color-light: #E4E7ED;
+  --st-border-color-lighter: #EBEEF5;
+  --st-border-color-extra-light: #F2F6FC;
+
+  /* 背景颜色 */
+  --st-bg-color: #FFFFFF;
+  --st-bg-color-page: #F2F3F5;
+
+  /* 间距 */
+  --st-spacing-xs: 4px;
+  --st-spacing-sm: 8px;
+  --st-spacing-md: 16px;
+  --st-spacing-lg: 24px;
+  --st-spacing-xl: 32px;
+
+  /* 圆角 */
+  --st-border-radius-sm: 2px;
+  --st-border-radius-md: 4px;
+  --st-border-radius-lg: 8px;
+
+  /* 字体 */
+  --st-font-size-xs: 12px;
+  --st-font-size-sm: 14px;
+  --st-font-size-md: 16px;
+  --st-font-size-lg: 18px;
+
+  /* 阴影 */
+  --st-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --st-box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+  --st-box-shadow-dark: 0 2px 8px rgba(0, 0, 0, .15);
+}
+
+/* ========== 表格样式 ========== */
+.smart-table {
+  --st-table-border-color: var(--st-border-color-lighter);
+  --st-table-header-bg: var(--st-bg-color);
+  --st-table-row-hover-bg: var(--st-border-color-extra-light);
+  --st-table-cell-padding: var(--st-spacing-md);
+}
+
+/* ========== 操作列样式 ========== */
+.st-operation-buttons {
+  display: flex;
+  gap: var(--st-spacing-sm);
+  align-items: center;
+  justify-content: center;
+}
+
+/* ========== 复制按钮样式 ========== */
+.st_copy_wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.st_copy_text {
+  padding-right: 10px;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.st_copy_btn {
+  position: absolute;
+  right: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  display: none;
+  font-size: 12px;
+  color: var(--st-primary-color);
+  user-select: none;
+  transition: all 0.2s;
+}
+
+.st_copy_wrapper:hover .st_copy_btn {
+  display: inline-block !important;
+}
+
+.st_copy_btn:hover {
+  transform: translateY(-50%) scale(1.1);
+}
+
+/* ========== 图片样式 ========== */
+.st_img_wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.st_img_total {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 12px;
+}
+
+/* ========== 文本截断 ========== */
+.line-clamp-1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ========== 可编辑单元格样式 ========== */
+.st-editable-cell {
+  padding: 0;
+}
+
+.st-editable-cell .el-input,
+.st-editable-cell .el-input-number,
+.st-editable-cell .el-select {
+  width: 100%;
+}
+
+/* ========== 加载状态 ========== */
+.st-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+/* ========== 空状态 ========== */
+.st-empty-state {
+  padding: var(--st-spacing-xl);
+  text-align: center;
+  color: var(--st-text-secondary);
+}
+
+.st-empty-state__icon {
+  font-size: 48px;
+  margin-bottom: var(--st-spacing-md);
+  opacity: 0.5;
+}
+
+.st-empty-state__text {
+  font-size: var(--st-font-size-sm);
+}
+
+/* ========== 响应式 ========== */
+@media (max-width: 768px) {
+  .smart-table {
+    font-size: var(--st-font-size-xs);
+  }
+
+  .st-operation-buttons {
+    flex-direction: column;
+    gap: var(--st-spacing-xs);
+  }
+}
+
+/* ========== 深色主题支持 ========== */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --st-text-primary: #E5EAF3;
+    --st-text-regular: #CFD3DC;
+    --st-text-secondary: #A3A6AD;
+    --st-border-color: #4C4D4F;
+    --st-border-color-light: #414243;
+    --st-border-color-lighter: #363637;
+    --st-border-color-extra-light: #2B2B2C;
+    --st-bg-color: #1D1E1F;
+    --st-bg-color-page: #141414;
+  }
+}