vue3-smart-table 0.0.1

package/README.md

@@ -0,0 +1,285 @@
+# CX-SmartTable v0.0.1 使用文档
+
+## 概览
+
+`SmartTable` 是一个 **基于 Vue 3 + Element Plus** 的高可复用表格组件，面向 **中后台系统** 场景设计，强调：
+
+- 配置驱动（columns 即 schema）
+- 权限解耦（不依赖 store / 登录体系）
+- 操作列智能显示（无可见按钮 → 整列隐藏）
+- 列显隐持久化（方案 A：只缓存 visible）
+- 单元格渲染器体系（renderer 插件化）
+
+---
+
+## 目录结构
+
+```txt
+SmartTable/
+├─ column/
+│  ├─ index.vue            # TableColumn 子组件
+│  └─ renderer.ts          # renderer 注册中心
+├─ hooks/
+│  ├─ useOperationColumn.ts # 操作列按钮可见性 / 宽度逻辑
+│  └─ useTableColumns.ts    # 列显隐缓存（只缓存 visible）
+├─ index.vue               # SmartTable 主组件
+├─ types.ts                # ColumnConfig / ButtonConfig 类型
+└─ README.md
+```
+
+---
+
+## 1. SmartTable Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| data | `any[]` | `[]` | 表格数据 |
+| columns | `ColumnConfig[]` | `[]` | 列配置（支持 v-model:columns） |
+| rowKey | `string` | `'id'` | 行唯一 key |
+| loading | `boolean` | `false` | loading 状态 |
+| permissions | `string[]` | `[]` | 当前用户权限列表 |
+| pageKey | `string` | - | 列缓存 pageKey（可选） |
+| userId | `string \| number` | - | 列缓存 userId（可选） |
+
+> 其余属性将 **透传给 el-table**。
+
+---
+
+## 2. ColumnConfig 列配置
+
+```ts
+export interface ColumnConfig<R = any> {
+  type?: 'selection' | 'index' | 'operation'
+  key?: string
+  label?: string
+
+  visible?: boolean
+  inControl?: boolean
+
+  render?: string
+  editable?: boolean
+  editType?: 'input' | 'number' | 'select'
+
+  renderProps?: Record<string, any>
+  columnProps?: Record<string, any>
+  formatter?: (value: any, row: R) => any
+
+  /** operation 专用 */
+  buttons?: ButtonConfig<R>[]
+  maxbtn?: number
+
+  /** 内部字段（SmartTable 自动注入） */
+  __rows?: R[]
+}
+```
+
+### 设计约定
+
+- `selection / index / operation` 为 **核心列**
+- 核心列必须：`inControl = false`
+- 普通列通过 `visible` 控制显示 / 隐藏
+
+---
+
+## 3. 操作列 ButtonConfig
+
+```ts
+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
+}
+```
+
+### 操作列显示规则
+
+> **整个操作列是否显示 = 是否存在“至少一个行 + 至少一个按钮可见”**
+
+- 按钮无权限 → 不显示
+- `visible(row) === false` → 不显示
+- **所有行所有按钮都不可见 → 整列隐藏**
+- 避免出现「空白操作列」
+
+---
+
+## 4. 内置 Renderer
+
+| renderer | 说明 |
+| --- | --- |
+| `html` | 原生 HTML（ellipsis） |
+| `copy` | 可复制文本（hover 显示按钮 + ElMessage） |
+| `img` | 图片预览 |
+| `dict` | 字典映射 |
+| `map` | key-value 映射 |
+| `formatter` | 自定义格式化 |
+| `editable` | 可编辑单元格（input / number / select） |
+| `icon` | iconfont / svg / url |
+
+### copy 示例
+
+```ts
+{
+  key: 'username',
+  label: '用户名',
+  render: 'copy'
+}
+```
+
+特性：
+- hover 显示复制按钮
+- 复制成功 / 失败统一使用 `ElMessage`
+
+---
+### img 示例
+```ts
+{
+  key: 'avatar',
+  label: '头像',
+  render: 'img',
+  renderProps: { style: 'width:50px;height:50px' }
+}
+
+```
+- 支持图片预览
+- 可传入 previewSrcList、fit、style 等 renderProps
+
+### map 示例
+
+```ts
+const providerMap =  {
+  aa: 'xxx',
+  bb: 'xxxx',
+  cc: 'xxxxxx'
+}
+{ 
+  visible: true, 
+  key: "status", 
+  label: "状态", 
+  render: "map",
+  renderProps: {
+    options: providerMap,
+  },
+  columnProps: { width: 80, sortable: true}
+},
+
+```
+- 根据值映射显示文本
+- 不匹配则显示空字符串
+
+### dict 示例
+
+```ts
+const Enables = [
+  { label: '启用', value: 1, listClass: 'primary' },
+  { label: '禁用', value: 0, listClass: 'warning' }
+]
+
+{ 
+  key: "status", 
+  label: "状态", 
+  visible: true, 
+  render: "dict",
+  renderProps: {
+    options: Enables,
+  },
+  columnProps: { width: 80, sortable: true}
+},
+```
+---
+- 支持多选值
+- 可通过 showValue 显示未匹配的值
+- 可自定义 tag 类型（listClass）
+
+### formatter 示例
+```ts
+{
+  key: 'price',
+  label: '价格',
+  render: 'formatter',
+  formatter: (val) => `$${val}`
+}
+```
+- 使用自定义函数格式化显示内容
+
+### editable 渲染器
+
+```ts
+{
+  key: 'age',
+  label: '年龄',
+  render: 'editable',
+  editable: true,
+  editType: 'number',
+  renderProps: { min: 0, max: 120 }
+}
+```
+- 支持类型：input / number / select
+- 支持事件：
+  - cellChange(row, key) 值变化
+  - cellBlur(row, key) 失去焦点
+  - cellEnter(row, key) 回车事件（input）
+### icon 示例
+```ts
+{
+  key: 'icon',
+  label: '图标',
+  render: 'icon',
+  renderProps: { style: 'color:red;font-size:24px' }
+}
+```
+- 支持网络图片 URL
+- 支持 svg 字符串
+- 支持 iconfont class
+## 5. useTableColumns（列显隐缓存）
+
+### 设计原则
+
+- ✅ **顺序永远以 defaultColumns 为准**
+- ✅ **只缓存 visible**
+- ❌ 不缓存 render / action / 函数
+- ❌ 不侵入 store / 登录体系
+
+```ts
+const { columns } = useTableColumns(defaultColumns, {
+  pageKey: 'user-list',
+  userId: currentUserId
+})
+```
+
+- `userId` / `pageKey` **由调用方决定**
+- 不传则不启用缓存
+
+---
+
+## 6. 使用示例
+
+```vue
+<SmartTable
+  :data="tableData"
+  v-model:columns="columns"
+  :permissions="userPermissions"
+  :user-id="userId"
+  page-key="user-list"
+  @cellChange="onCellChange"
+/>
+```
+
+## 7. 设计边界说明
+
+- SmartTable **不关心权限系统如何实现**
+- permission 只是 string 比对
+- renderer 只负责 UI，不处理权限
+- 操作列是否显示由 SmartTable 统一决策
+
+
+
+
+
+

package/dist/vue3-smart-table.cjs.js

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),C=require("element-plus"),V=e.defineComponent({__name:"input",props:{row:{},col:{},onCellBlur:{type:Function},onCellEnter:{type:Function}},setup(n){const t=n,l=e.ref(t.row[t.col.key]);e.watch(l,s=>{t.row[t.col.key]=s});const r=()=>{var s;return(s=t.onCellBlur)==null?void 0:s.call(t,t.row,t.col)},o=()=>{var s;return(s=t.onCellEnter)==null?void 0:s.call(t,t.row,t.col)};return(s,c)=>{const m=e.resolveComponent("el-input");return e.openBlock(),e.createBlock(m,e.mergeProps({modelValue:l.value,"onUpdate:modelValue":c[0]||(c[0]=d=>l.value=d)},{placeholder:"",size:"small",clearable:!0,...n.col.renderProps},{onBlur:r,onKeyup:e.withKeys(o,["enter"])}),null,16,["modelValue"])}}}),F=e.defineComponent({__name:"inputNumber",props:{row:{},col:{},onCellChange:{type:Function},onCellBlur:{type:Function},onCellEnter:{type:Function}},setup(n){const t=n,l=e.ref(t.row[t.col.key]);e.watch(l,s=>{var c;t.row[t.col.key]=s,(c=t.onCellChange)==null||c.call(t,t.row,t.col)});const r=()=>{var s;return(s=t.onCellBlur)==null?void 0:s.call(t,t.row,t.col)},o=()=>{var s;return(s=t.onCellEnter)==null?void 0:s.call(t,t.row,t.col)};return(s,c)=>{const m=e.resolveComponent("el-input-number");return e.openBlock(),e.createBlock(m,e.mergeProps({modelValue:l.value,"onUpdate:modelValue":c[0]||(c[0]=d=>l.value=d)},{min:0,max:99999,controls:!1,size:"small",...n.col.renderProps},{onBlur:r,onKeyup:e.withKeys(o,["enter"])}),null,16,["modelValue"])}}}),A=e.defineComponent({__name:"select",props:{row:{},col:{},onCellChange:{type:Function},onCellBlur:{type:Function},onCellEnter:{type:Function}},setup(n){const t=n,l=e.ref(t.row[t.col.key]);e.watch(l,c=>{t.row[t.col.key]=c});const r=()=>{var c;return(c=t.onCellChange)==null?void 0:c.call(t,t.row,t.col)},o=()=>{var c;return(c=t.onCellBlur)==null?void 0:c.call(t,t.row,t.col)},s=()=>{var c;return(c=t.onCellEnter)==null?void 0:c.call(t,t.row,t.col)};return(c,m)=>{const d=e.resolveComponent("el-option"),i=e.resolveComponent("el-select");return e.openBlock(),e.createBlock(i,e.mergeProps({modelValue:l.value,"onUpdate:modelValue":m[0]||(m[0]=f=>l.value=f)},{placeholder:"请选择",size:"small",clearable:!0,...n.col.renderProps},{onChange:r,onBlur:o,onKeyup:e.withKeys(s,["enter"])}),{default:e.withCtx(()=>{var f;return[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(((f=n.col.renderProps)==null?void 0:f.options)||[],u=>(e.openBlock(),e.createBlock(d,{key:u.value,label:u.label,value:u.value},null,8,["label","value"]))),128))]}),_:1},16,["modelValue"])}}}),w=n=>e.defineComponent({props:["row","col","onCellChange","onCellBlur","onCellEnter","onClick"],setup(t){return()=>e.h(n,t)}});function K(n){return typeof n.formatter=="function"}function O(){return{input:w(V),"input-number":w(F),select:w(A),button:n=>{const t=n.col.renderProps||{};return e.h(C.ElButton,{type:t.type||"primary",...t,onClick:()=>{var l;return(l=n.onClick)==null?void 0:l.call(n,n.row,n.col)}},()=>t.label||n.row[n.col.key])},link:n=>{const t=n.col.renderProps||{};return e.h("a",{href:t.href||"#",target:t.blank?"_blank":"_self",style:t.style||"color:#409EFF;cursor:pointer;",onClick:l=>{var r;l.preventDefault(),(r=n.onClick)==null||r.call(n,n.row,n.col)}},t.label||n.row[n.col.key])},html:n=>{var t;return e.h("div",{class:"line-clamp-2",innerHTML:n.row[n.col.key]??"",...((t=n.col)==null?void 0:t.renderProps)||{}})},copy:n=>{const t=n.row[n.col.key]??"";return e.h("div",{class:"copy-wrapper",style:"position: relative; display: inline-block;"},[e.h("span",{class:"copy-text line-clamp-1",style:"padding-right: 20px;"},t),e.h("span",{class:"copy-btn",style:`
+                position: absolute;
+                right: 0;
+                top: 50%;
+                transform: translateY(-50%);
+                cursor: pointer;
+                display: none;
+                font-size: 12px;
+                color: #409EFF;
+                user-select: none;
+              `,onClick:()=>{if(t)try{if(navigator.clipboard&&navigator.clipboard.writeText)navigator.clipboard.writeText(t).then(()=>{C.ElMessage.success("复制成功")}).catch(()=>{C.ElMessage.error("复制失败")});else{const l=document.createElement("textarea");l.value=t,l.style.position="fixed",l.style.opacity="0",document.body.appendChild(l),l.select();const r=document.execCommand("copy");document.body.removeChild(l),r?C.ElMessage.success("复制成功"):C.ElMessage.error("复制失败")}}catch{C.ElMessage.error("复制失败")}}},"📋")])},img:n=>{var r;const t=n.row[n.col.key]??"",l=((r=n.col)==null?void 0:r.renderProps)||{};return e.h(C.ElImage,{src:t,previewSrcList:(l==null?void 0:l.previewSrcList)??(Array.isArray(t)?t:[t]),fit:"contain",style:"width:80px;height:80px",...l})},dict:n=>{const t=n.row[n.col.key],l=n.col.renderProps||{},r=l.options??[],o=l.showValue??!1;if(t==null||t==="")return"";const s=Array.isArray(t)?t.map(String):[String(t)],c=r.filter(i=>s.includes(String(i.value))),m=s.filter(i=>!r.some(f=>String(f.value)===i)),d=c.map((i,f)=>e.h(C.ElTag,{key:i.value,type:i.listClass,class:i.cssClass,disableTransitions:!0},{default:()=>i.label+" "}));return o&&m.length>0&&d.push(e.h("span",{},m.join(" "))),e.h("div",{},d)},map:n=>{var r;const t=n.row[n.col.key],l=((r=n.col.renderProps)==null?void 0:r.options)??{};return t!=null?l[t]??"":""},formatter:n=>{var o;const{col:t,row:l}=n,r=l[t.key];return K(t)?(o=t.formatter)==null?void 0:o.call(t,r,l):r??""},icon:n=>{const t=n.row[n.col.key]??"",l=n.col.renderProps||{};return t?/^https?:\/\//.test(t)?e.h(C.ElImage,{src:t,previewSrcList:[t],fit:"contain",style:"width:40px;height:40px",...l}):/^\s*<svg[\s\S]*<\/svg>\s*$/.test(t)?e.h("div",{innerHTML:t,style:`width:40px;height:40px;display:inline-block;${l.style||""}`,...l}):e.h("i",{class:t,style:`font-size:20px;${l.style||""}`,...l}):""}}}function M(n,t=10,l=[]){const o="*:*:*",s=a=>{if(!a)return!0;const p=Array.isArray(a)?a:[a];return l.some(y=>y===o||p.includes(y))},c=e.computed(()=>n.some(a=>s(a.permission))),m=e.computed(()=>n.filter(p=>s(p.permission)).slice(0,t).reduce((p,y)=>p+(y.width??55),0)),d=(a,p)=>s(a.permission)&&(a.visible?a.visible(p):!0),i=a=>n.filter(y=>d(y,a)).slice(0,t).reduce((y,_)=>y+(_.width??55),0);return{hasAnyButton:c,optWidth:m,hasAnyVisibleButton:a=>a!=null&&a.length?a.some(p=>n.some(y=>d(y,p))):!1,getMaxOptWidth:a=>a!=null&&a.length?a.reduce((p,y)=>Math.max(p,i(y)),0):m.value,getVisibleButtons:a=>n.filter(p=>d(p,a)).slice(0,t)}}const I=e.defineComponent({__name:"index",props:{col:{type:Object,required:!0},permissions:{type:Array,default:()=>[]}},emits:["cellBlur","cellEnter","cellChange","cellClick"],setup(n,{emit:t}){const l=n,r=t,{col:o}=e.toRefs(l),s=(h,k)=>r("cellChange",h,k),c=(h,k)=>r("cellBlur",h,k),m=(h,k)=>r("cellEnter",h,k),d=(h,k)=>r("cellClick",h,k),i=O(),{hasAnyButton:f,hasAnyVisibleButton:u,optWidth:g,getMaxOptWidth:a,getVisibleButtons:p}=M(o.value.buttons||[],o.value.maxbtn??10,l.permissions||[]),y=e.computed(()=>(o.value.buttons||[]).length?(o.value.__rows||[]).length?u(o.value.__rows||[]):f.value:!1),_=e.computed(()=>o.value.__rows?a(o.value.__rows):g.value);function P(h){return!(h.type==="selection"||h.type==="index"||h.type==="operation"&&!y.value||h.visible===!1)}return(h,k)=>{const b=e.resolveComponent("el-table-column"),S=e.resolveComponent("el-button");return e.unref(o).type==="selection"?(e.openBlock(),e.createBlock(b,e.mergeProps({key:0,type:"selection"},e.unref(o).columnProps),null,16)):e.unref(o).type==="index"?(e.openBlock(),e.createBlock(b,e.mergeProps({key:1,type:"index",label:e.unref(o).label||"#",align:"center"},e.unref(o).columnProps),null,16,["label"])):e.unref(o).type==="operation"&&y.value?(e.openBlock(),e.createBlock(b,e.mergeProps({key:2,label:e.unref(o).label||"操作",align:"center"},{...e.unref(o).columnProps,width:_.value}),{default:e.withCtx(({row:v})=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p)(v),B=>(e.openBlock(),e.createBlock(S,{key:B.label,type:B.type||"primary",link:"",onClick:N=>B.action(v)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(B.label),1)]),_:2},1032,["type","onClick"]))),128))]),_:1},16,["label"])):P(e.unref(o))?(e.openBlock(),e.createBlock(b,e.mergeProps({key:3,prop:e.unref(o).key,label:e.unref(o).label,align:"center"},e.unref(o).columnProps||{}),{default:e.withCtx(({row:v})=>[e.unref(o).render&&e.unref(i)[e.unref(o).render]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(i)[e.unref(o).render]),{key:0,row:v,col:e.unref(o),onCellChange:s,onCellBlur:c,onCellEnter:m,onClick:d},null,40,["row","col"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(v[e.unref(o).key]),1)],64))]),_:1},16,["prop","label"])):e.createCommentVNode("",!0)}}}),T="table_columns_";function $(n,t){return`${T}${n}_${t}`}function x(n,t){if(!(t!=null&&t.length))return n;const l=new Map(t.map(r=>[r.key,r]));return n.map(r=>{const o=l.get(r.key);return o?{...r,visible:typeof o.visible=="boolean"?o.visible:r.visible}:r})}function W(n,t){const{pageKey:l,userId:r,storage:o=localStorage}=t||{},c=r?$(r,l||""):null,m=c?o.getItem(c):null,d=e.ref(x(n,m?JSON.parse(m):[]));return e.watch(d,i=>{if(!c)return;const f=i.map(u=>({key:u.key,visible:u.visible,columnOpts:u.columnOpts}));o.setItem(c,JSON.stringify(f))},{deep:!0}),{columns:d,setColumns(i){d.value=x(n,i),c&&o.setItem(c,JSON.stringify(i))},resetColumns(){d.value=n,c&&o.removeItem(c)}}}const D=e.defineComponent({__name:"index",props:{data:{type:Array,default:()=>[]},columns:{type:Array,default:()=>[]},pageKey:String,rowKey:{type:String,default:"id"},loading:{type:Boolean,default:!1},permissions:{type:Array,default:()=>[]},userId:{type:[String,Number],default:""}},emits:["update:columns","cellChange","cellBlur","cellEnter","cell-click"],setup(n,{expose:t,emit:l}){const r=n,o=l,{columns:s}=W(r.columns,{pageKey:r.pageKey??"",userId:r.userId??""});e.watch(s,u=>o("update:columns",u),{deep:!0,immediate:!0});const c=(u,g)=>o("cellChange",u,g),m=(u,g)=>{o("cellBlur",u,g)},d=(u,g)=>{console.log("enter"),o("cellEnter",u,g)},i=(u,g)=>{g&&o("cell-click",u,g)},f=e.ref();return t({tableRef:f}),(u,g)=>{const a=e.resolveComponent("el-table"),p=e.resolveDirective("loading");return e.withDirectives((e.openBlock(),e.createBlock(a,e.mergeProps({ref_key:"tableRef",ref:f},u.$attrs,{data:n.data,"row-key":n.rowKey,class:"smart-table"}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),y=>(e.openBlock(),e.createBlock(I,{key:y.key,col:y,permissions:n.permissions,onCellChange:c,onCellBlur:m,onCellEnter:d,onCellClick:i},null,8,["col","permissions"]))),128))]),_:1},16,["data","row-key"])),[[p,n.loading]])}}}),L=(n,t)=>{const l=n.__vccOpts||n;for(const[r,o]of t)l[r]=o;return l},E=L(D,[["__scopeId","data-v-338b77db"]]);exports.SmartTable=E;exports.default=E;

package/dist/vue3-smart-table.css

@@ -0,0 +1 @@
+.copy-wrapper:hover .copy-btn{display:inline-block!important}.smart-table[data-v-338b77db]{width:100%}

package/dist/vue3-smart-table.es.js

@@ -0,0 +1,518 @@
+import { defineComponent as B, ref as V, watch as S, resolveComponent as w, createBlock as b, openBlock as f, mergeProps as _, withKeys as M, withCtx as P, createElementBlock as O, Fragment as K, renderList as T, h as g, computed as $, toRefs as U, createCommentVNode as j, unref as d, createTextVNode as D, toDisplayString as N, resolveDynamicComponent as H, resolveDirective as q, withDirectives as X } from "vue";
+import { ElImage as L, ElTag as Y, ElMessage as E, ElButton as G } from "element-plus";
+const Q = /* @__PURE__ */ B({
+  __name: "input",
+  props: {
+    row: {},
+    col: {},
+    onCellBlur: { type: Function },
+    onCellEnter: { type: Function }
+  },
+  setup(t) {
+    const e = t, n = V(e.row[e.col.key]);
+    S(n, (c) => {
+      e.row[e.col.key] = c;
+    });
+    const r = () => {
+      var c;
+      return (c = e.onCellBlur) == null ? void 0 : c.call(e, e.row, e.col);
+    }, l = () => {
+      var c;
+      return (c = e.onCellEnter) == null ? void 0 : c.call(e, e.row, e.col);
+    };
+    return (c, o) => {
+      const y = w("el-input");
+      return f(), b(y, _({
+        modelValue: n.value,
+        "onUpdate:modelValue": o[0] || (o[0] = (u) => n.value = u)
+      }, { placeholder: "", size: "small", clearable: !0, ...t.col.renderProps }, {
+        onBlur: r,
+        onKeyup: M(l, ["enter"])
+      }), null, 16, ["modelValue"]);
+    };
+  }
+}), Z = /* @__PURE__ */ B({
+  __name: "inputNumber",
+  props: {
+    row: {},
+    col: {},
+    onCellChange: { type: Function },
+    onCellBlur: { type: Function },
+    onCellEnter: { type: Function }
+  },
+  setup(t) {
+    const e = t, n = V(e.row[e.col.key]);
+    S(n, (c) => {
+      var o;
+      e.row[e.col.key] = c, (o = e.onCellChange) == null || o.call(e, e.row, e.col);
+    });
+    const r = () => {
+      var c;
+      return (c = e.onCellBlur) == null ? void 0 : c.call(e, e.row, e.col);
+    }, l = () => {
+      var c;
+      return (c = e.onCellEnter) == null ? void 0 : c.call(e, e.row, e.col);
+    };
+    return (c, o) => {
+      const y = w("el-input-number");
+      return f(), b(y, _({
+        modelValue: n.value,
+        "onUpdate:modelValue": o[0] || (o[0] = (u) => n.value = u)
+      }, { min: 0, max: 99999, controls: !1, size: "small", ...t.col.renderProps }, {
+        onBlur: r,
+        onKeyup: M(l, ["enter"])
+      }), null, 16, ["modelValue"]);
+    };
+  }
+}), ee = /* @__PURE__ */ B({
+  __name: "select",
+  props: {
+    row: {},
+    col: {},
+    onCellChange: { type: Function },
+    onCellBlur: { type: Function },
+    onCellEnter: { type: Function }
+  },
+  setup(t) {
+    const e = t, n = V(e.row[e.col.key]);
+    S(n, (o) => {
+      e.row[e.col.key] = o;
+    });
+    const r = () => {
+      var o;
+      return (o = e.onCellChange) == null ? void 0 : o.call(e, e.row, e.col);
+    }, l = () => {
+      var o;
+      return (o = e.onCellBlur) == null ? void 0 : o.call(e, e.row, e.col);
+    }, c = () => {
+      var o;
+      return (o = e.onCellEnter) == null ? void 0 : o.call(e, e.row, e.col);
+    };
+    return (o, y) => {
+      const u = w("el-option"), a = w("el-select");
+      return f(), b(a, _({
+        modelValue: n.value,
+        "onUpdate:modelValue": y[0] || (y[0] = (h) => n.value = h)
+      }, { placeholder: "请选择", size: "small", clearable: !0, ...t.col.renderProps }, {
+        onChange: r,
+        onBlur: l,
+        onKeyup: M(c, ["enter"])
+      }), {
+        default: P(() => {
+          var h;
+          return [
+            (f(!0), O(K, null, T(((h = t.col.renderProps) == null ? void 0 : h.options) || [], (i) => (f(), b(u, {
+              key: i.value,
+              label: i.label,
+              value: i.value
+            }, null, 8, ["label", "value"]))), 128))
+          ];
+        }),
+        _: 1
+      }, 16, ["modelValue"]);
+    };
+  }
+}), W = (t) => B({
+  props: ["row", "col", "onCellChange", "onCellBlur", "onCellEnter", "onClick"],
+  setup(e) {
+    return () => g(t, e);
+  }
+});
+function te(t) {
+  return typeof t.formatter == "function";
+}
+function ne() {
+  return {
+    input: W(Q),
+    "input-number": W(Z),
+    select: W(ee),
+    button: (t) => {
+      const e = t.col.renderProps || {};
+      return g(G, {
+        type: e.type || "primary",
+        ...e,
+        onClick: () => {
+          var n;
+          return (n = t.onClick) == null ? void 0 : n.call(t, t.row, t.col);
+        }
+      }, () => e.label || t.row[t.col.key]);
+    },
+    link: (t) => {
+      const e = t.col.renderProps || {};
+      return g("a", {
+        href: e.href || "#",
+        target: e.blank ? "_blank" : "_self",
+        style: e.style || "color:#409EFF;cursor:pointer;",
+        onClick: (n) => {
+          var r;
+          n.preventDefault(), (r = t.onClick) == null || r.call(t, t.row, t.col);
+        }
+      }, e.label || t.row[t.col.key]);
+    },
+    html: (t) => {
+      var e;
+      return g("div", {
+        class: "line-clamp-2",
+        innerHTML: t.row[t.col.key] ?? "",
+        ...((e = t.col) == null ? void 0 : e.renderProps) || {}
+      });
+    },
+    copy: (t) => {
+      const e = t.row[t.col.key] ?? "";
+      return g(
+        "div",
+        {
+          class: "copy-wrapper",
+          style: "position: relative; display: inline-block;"
+        },
+        [
+          g("span", {
+            class: "copy-text line-clamp-1",
+            style: "padding-right: 20px;"
+          }, e),
+          g(
+            "span",
+            {
+              class: "copy-btn",
+              style: `
+                position: absolute;
+                right: 0;
+                top: 50%;
+                transform: translateY(-50%);
+                cursor: pointer;
+                display: none;
+                font-size: 12px;
+                color: #409EFF;
+                user-select: none;
+              `,
+              onClick: () => {
+                if (e)
+                  try {
+                    if (navigator.clipboard && navigator.clipboard.writeText)
+                      navigator.clipboard.writeText(e).then(() => {
+                        E.success("复制成功");
+                      }).catch(() => {
+                        E.error("复制失败");
+                      });
+                    else {
+                      const n = document.createElement("textarea");
+                      n.value = e, n.style.position = "fixed", n.style.opacity = "0", document.body.appendChild(n), n.select();
+                      const r = document.execCommand("copy");
+                      document.body.removeChild(n), r ? E.success("复制成功") : E.error("复制失败");
+                    }
+                  } catch {
+                    E.error("复制失败");
+                  }
+              }
+            },
+            "📋"
+            // 复制图标，可用 Element Plus 图标替换
+          )
+        ]
+      );
+    },
+    img: (t) => {
+      var r;
+      const e = t.row[t.col.key] ?? "", n = ((r = t.col) == null ? void 0 : r.renderProps) || {};
+      return g(L, {
+        src: e,
+        previewSrcList: (n == null ? void 0 : n.previewSrcList) ?? (Array.isArray(e) ? e : [e]),
+        fit: "contain",
+        style: "width:80px;height:80px",
+        ...n
+      });
+    },
+    dict: (t) => {
+      const e = t.row[t.col.key], n = t.col.renderProps || {}, r = n.options ?? [], l = n.showValue ?? !1;
+      if (e == null || e === "") return "";
+      const c = Array.isArray(e) ? e.map(String) : [String(e)], o = r.filter((a) => c.includes(String(a.value))), y = c.filter((a) => !r.some((h) => String(h.value) === a)), u = o.map((a, h) => g(
+        Y,
+        { key: a.value, type: a.listClass, class: a.cssClass, disableTransitions: !0 },
+        { default: () => a.label + " " }
+      ));
+      return l && y.length > 0 && u.push(g("span", {}, y.join(" "))), g("div", {}, u);
+    },
+    map: (t) => {
+      var r;
+      const e = t.row[t.col.key], n = ((r = t.col.renderProps) == null ? void 0 : r.options) ?? {};
+      return e != null ? n[e] ?? "" : "";
+    },
+    formatter: (t) => {
+      var l;
+      const { col: e, row: n } = t, r = n[e.key];
+      return te(e) ? (l = e.formatter) == null ? void 0 : l.call(e, r, n) : r ?? "";
+    },
+    icon: (t) => {
+      const e = t.row[t.col.key] ?? "", n = t.col.renderProps || {};
+      return e ? /^https?:\/\//.test(e) ? g(L, {
+        src: e,
+        previewSrcList: [e],
+        fit: "contain",
+        style: "width:40px;height:40px",
+        ...n
+      }) : /^\s*<svg[\s\S]*<\/svg>\s*$/.test(e) ? g("div", {
+        innerHTML: e,
+        style: `width:40px;height:40px;display:inline-block;${n.style || ""}`,
+        ...n
+      }) : g("i", {
+        class: e,
+        // val 直接当 className
+        style: `font-size:20px;${n.style || ""}`,
+        ...n
+      }) : "";
+    }
+  };
+}
+function le(t, e = 10, n = []) {
+  const l = "*:*:*", c = (s) => {
+    if (!s) return !0;
+    const m = Array.isArray(s) ? s : [s];
+    return n.some(
+      (p) => p === l || m.includes(p)
+    );
+  }, o = $(() => t.some((s) => c(s.permission))), y = $(() => t.filter((m) => c(m.permission)).slice(0, e).reduce(
+    (m, p) => m + (p.width ?? 55),
+    0
+  )), u = (s, m) => c(s.permission) && (s.visible ? s.visible(m) : !0), a = (s) => t.filter((p) => u(p, s)).slice(0, e).reduce(
+    (p, I) => p + (I.width ?? 55),
+    0
+  );
+  return {
+    hasAnyButton: o,
+    optWidth: y,
+    hasAnyVisibleButton: (s) => s != null && s.length ? s.some(
+      (m) => t.some((p) => u(p, m))
+    ) : !1,
+    getMaxOptWidth: (s) => s != null && s.length ? s.reduce(
+      (m, p) => Math.max(m, a(p)),
+      0
+    ) : y.value,
+    getVisibleButtons: (s) => t.filter((m) => u(m, s)).slice(0, e)
+  };
+}
+const re = /* @__PURE__ */ B({
+  __name: "index",
+  props: {
+    col: { type: Object, required: !0 },
+    permissions: { type: Array, default: () => [] }
+  },
+  emits: ["cellBlur", "cellEnter", "cellChange", "cellClick"],
+  setup(t, { emit: e }) {
+    const n = t, r = e, { col: l } = U(n), c = (v, k) => r("cellChange", v, k), o = (v, k) => r("cellBlur", v, k), y = (v, k) => r("cellEnter", v, k), u = (v, k) => r("cellClick", v, k), a = ne(), {
+      hasAnyButton: h,
+      hasAnyVisibleButton: i,
+      optWidth: C,
+      getMaxOptWidth: s,
+      getVisibleButtons: m
+    } = le(
+      l.value.buttons || [],
+      l.value.maxbtn ?? 10,
+      n.permissions || []
+    ), p = $(() => (l.value.buttons || []).length ? (l.value.__rows || []).length ? i(l.value.__rows || []) : h.value : !1), I = $(() => l.value.__rows ? s(l.value.__rows) : C.value);
+    function z(v) {
+      return !(v.type === "selection" || v.type === "index" || v.type === "operation" && !p.value || v.visible === !1);
+    }
+    return (v, k) => {
+      const A = w("el-table-column"), J = w("el-button");
+      return d(l).type === "selection" ? (f(), b(A, _({
+        key: 0,
+        type: "selection"
+      }, d(l).columnProps), null, 16)) : d(l).type === "index" ? (f(), b(A, _({
+        key: 1,
+        type: "index",
+        label: d(l).label || "#",
+        align: "center"
+      }, d(l).columnProps), null, 16, ["label"])) : d(l).type === "operation" && p.value ? (f(), b(A, _({
+        key: 2,
+        label: d(l).label || "操作",
+        align: "center"
+      }, {
+        ...d(l).columnProps,
+        width: I.value
+      }), {
+        default: P(({ row: x }) => [
+          (f(!0), O(K, null, T(d(m)(x), (F) => (f(), b(J, {
+            key: F.label,
+            type: F.type || "primary",
+            link: "",
+            onClick: (ue) => F.action(x)
+          }, {
+            default: P(() => [
+              D(N(F.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["type", "onClick"]))), 128))
+        ]),
+        _: 1
+      }, 16, ["label"])) : z(d(l)) ? (f(), b(A, _({
+        key: 3,
+        prop: d(l).key,
+        label: d(l).label,
+        align: "center"
+      }, d(l).columnProps || {}), {
+        default: P(({ row: x }) => [
+          d(l).render && d(a)[d(l).render] ? (f(), b(H(d(a)[d(l).render]), {
+            key: 0,
+            row: x,
+            col: d(l),
+            onCellChange: c,
+            onCellBlur: o,
+            onCellEnter: y,
+            onClick: u
+          }, null, 40, ["row", "col"])) : (f(), O(K, { key: 1 }, [
+            D(N(x[d(l).key]), 1)
+          ], 64))
+        ]),
+        _: 1
+      }, 16, ["prop", "label"])) : j("", !0);
+    };
+  }
+}), oe = "table_columns_";
+function ce(t, e) {
+  return `${oe}${t}_${e}`;
+}
+function R(t, e) {
+  if (!(e != null && e.length)) return t;
+  const n = new Map(
+    e.map((r) => [r.key, r])
+  );
+  return t.map((r) => {
+    const l = n.get(r.key);
+    return l ? {
+      ...r,
+      visible: typeof l.visible == "boolean" ? l.visible : r.visible
+    } : r;
+  });
+}
+function se(t, e) {
+  const {
+    pageKey: n,
+    userId: r,
+    storage: l = localStorage
+  } = e || {}, o = r ? ce(r, n || "") : null, y = o ? l.getItem(o) : null, u = V(
+    R(
+      t,
+      y ? JSON.parse(y) : []
+    )
+  );
+  return S(
+    u,
+    (a) => {
+      if (!o) return;
+      const h = a.map((i) => ({
+        key: i.key,
+        visible: i.visible,
+        columnOpts: i.columnOpts
+      }));
+      l.setItem(
+        o,
+        JSON.stringify(h)
+      );
+    },
+    { deep: !0 }
+  ), {
+    /** 当前列配置（响应式） */
+    columns: u,
+    /**
+     * 主动设置列配置
+     * 常用于：列设置弹窗 / 拖拽排序完成
+     */
+    setColumns(a) {
+      u.value = R(
+        t,
+        a
+      ), o && l.setItem(
+        o,
+        JSON.stringify(a)
+      );
+    },
+    /**
+     * 重置为默认列配置
+     */
+    resetColumns() {
+      u.value = t, o && l.removeItem(o);
+    }
+  };
+}
+const ae = /* @__PURE__ */ B({
+  __name: "index",
+  props: {
+    data: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    // v-model:columns
+    pageKey: String,
+    rowKey: { type: String, default: "id" },
+    loading: { type: Boolean, default: !1 },
+    permissions: {
+      type: Array,
+      default: () => []
+    },
+    userId: {
+      /** 当前用户标识（可选，用于列缓存） */
+      type: [String, Number],
+      default: ""
+    }
+  },
+  emits: [
+    "update:columns",
+    "cellChange",
+    "cellBlur",
+    "cellEnter",
+    "cell-click"
+  ],
+  setup(t, { expose: e, emit: n }) {
+    const r = t, l = n, { columns: c } = se(r.columns, {
+      pageKey: r.pageKey ?? "",
+      userId: r.userId ?? ""
+    });
+    S(
+      c,
+      (i) => l("update:columns", i),
+      { deep: !0, immediate: !0 }
+    );
+    const o = (i, C) => l("cellChange", i, C), y = (i, C) => {
+      l("cellBlur", i, C);
+    }, u = (i, C) => {
+      console.log("enter"), l("cellEnter", i, C);
+    }, a = (i, C) => {
+      C && l("cell-click", i, C);
+    }, h = V();
+    return e({
+      tableRef: h
+    }), (i, C) => {
+      const s = w("el-table"), m = q("loading");
+      return X((f(), b(s, _({
+        ref_key: "tableRef",
+        ref: h
+      }, i.$attrs, {
+        data: t.data,
+        "row-key": t.rowKey,
+        class: "smart-table"
+      }), {
+        default: P(() => [
+          (f(!0), O(K, null, T(d(c), (p) => (f(), b(re, {
+            key: p.key,
+            col: p,
+            permissions: t.permissions,
+            onCellChange: o,
+            onCellBlur: y,
+            onCellEnter: u,
+            onCellClick: a
+          }, null, 8, ["col", "permissions"]))), 128))
+        ]),
+        _: 1
+      }, 16, ["data", "row-key"])), [
+        [m, t.loading]
+      ]);
+    };
+  }
+}), ie = (t, e) => {
+  const n = t.__vccOpts || t;
+  for (const [r, l] of e)
+    n[r] = l;
+  return n;
+}, me = /* @__PURE__ */ ie(ae, [["__scopeId", "data-v-338b77db"]]);
+export {
+  me as SmartTable,
+  me as default
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "vue3-smart-table",
+  "version": "0.0.1",
+  "description": "基于 Vue 3 + Element Plus 的高可复用表格组件",
+  "main": "dist/vue3-smart-table.cjs.js",
+  "module": "dist/vue3-smart-table.es.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "vue3",
+    "element-plus",
+    "table",
+    "smart-table"
+  ],
+  "author": "xiechen",
+  "license": "MIT",
+  "scripts": {
+    "build": "vue-tsc --noEmit && vite build",
+    "dev:demo": "cd demo && vite",
+    "preview:demo": "vite preview demo"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.9.0",
+    "vue": "3.5.13"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.2",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue-jsx": "^5.1.2",
+    "element-plus": "^2.9.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.4.1",
+    "vue": "^3.5.25",
+    "vue-tsc": "^3.1.8"
+  },
+  "dependencies": {
+    "vue-router": "^4.6.4"
+  }
+}