z-crud-table 0.0.34 → 0.0.36

package/dist/z-crud-table.js

@@ -1,3 +1,4 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.header-cell-content[data-v-ed80fae4]{display:inline-block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crud-table-container[data-v-1bac33d7]{display:flex;flex-direction:column;height:100%;width:100%;min-width:0;min-height:0;overflow:hidden}.search-section-wrapper[data-v-1bac33d7]{flex-shrink:0}.table-content-wrapper[data-v-1bac33d7]{flex:1;min-height:0;overflow:hidden}.pagination-wrapper[data-v-1bac33d7]{flex-shrink:0;padding-top:1rem;display:flex;justify-content:flex-end}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.\\!mr-0{margin-right:0!important}.mb-6{margin-bottom:1.5rem}.mt-2{margin-top:.5rem}.flex{display:flex}.hidden{display:none}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}body{background-color:#f0f2f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;padding:1rem}@media (min-width: 768px){#app{padding:1.5rem}}.crud-container{transition:box-shadow .3s ease-in-out}.crud-container:hover{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.query-form .el-form-item{margin-bottom:0!important}.el-table__expanded-cell{padding:1rem 3.5rem!important;background-color:#f8fafc}.action-buttons>*+*{margin-left:.75rem}.el-dialog__header{border-bottom:none;padding:24px 24px 10px}.el-dialog__title{font-size:1.25rem;font-weight:600}.el-dialog__footer{border-top:none;padding:10px 24px 24px}.el-dialog__body{padding:10px 24px}:root{--large-screen-border-color: rgba(120, 153, 199, 1);--large-screen-text-color: rgba(227, 246, 255, 1);--large-screen-search-bg: rgba(210, 224, 243, .1);--large-screen-button-bg: rgba(38, 120, 255, 1);--large-screen-action-link-color: rgba(39, 233, 255, 1);--large-screen-dialog-bg: #1e293b;--large-screen-hover-bg: rgba(120, 153, 199, .15)}.theme-large-screen{color:var(--large-screen-text-color)}.theme-large-screen .crud-container{background-color:transparent!important;border:none}.theme-large-screen .el-table,.theme-large-screen .el-table__expanded-cell,.theme-large-screen .el-table th.el-table__cell,.theme-large-screen .el-table tr,.theme-large-screen .el-table .el-table__row{background-color:transparent!important;color:var(--large-screen-text-color)}.theme-large-screen .el-table th.el-table__cell{font-weight:600}.theme-large-screen .el-table td.el-table__cell,.theme-large-screen .el-table th.el-table__cell.is-leaf{border-bottom:1px solid var(--large-screen-border-color)}.theme-large-screen .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{background-color:var(--large-screen-hover-bg)!important}.theme-large-screen .el-table--border .el-table__inner-wrapper:after,.theme-large-screen .el-table--border:after,.theme-large-screen .el-table--border:before,.theme-large-screen .el-table__inner-wrapper:before{background-color:var(--large-screen-border-color)}.theme-large-screen .el-form-item__label{color:var(--large-screen-text-color)}.theme-large-screen .query-form .el-input__wrapper,.theme-large-screen .query-form .el-select__wrapper{background-color:var(--large-screen-search-bg);box-shadow:none!important;border:1px solid var(--large-screen-border-color)}.theme-large-screen .el-input__inner{color:var(--large-screen-text-color)}.theme-large-screen .el-button--primary,.theme-large-screen .el-button--success{background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg);color:#fff}.theme-large-screen .el-button--primary:hover,.theme-large-screen .el-button--success:hover{filter:brightness(1.2);background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg)}.theme-large-screen .el-button--danger:not(.is-link){background-color:#f56c6c;border-color:#f56c6c;color:#fff}.theme-large-screen .el-table .el-button.is-link{color:var(--large-screen-action-link-color)}.theme-large-screen .el-table .el-button.is-link:hover{filter:brightness(1.2)}.theme-large-screen .el-pagination{--el-pagination-text-color: var(--large-screen-text-color);--el-pagination-bg-color: transparent;--el-pagination-button-disabled-bg-color: rgba(120, 153, 199, .2);--el-pagination-button-bg-color: rgba(120, 153, 199, .3)}.large-screen-dialog .el-dialog{background-color:var(--el-dialog-bg-color)!important;border-radius:8px}.large-screen-dialog .el-dialog__title,.large-screen-dialog .el-dialog__body{color:var(--large-screen-text-color)}.large-screen-dialog .el-form-item__label{color:var(--large-screen-text-color)!important}.large-screen-dialog .el-input__wrapper,.large-screen-dialog .el-select__wrapper{background-color:#7899c71a!important;border:1px solid var(--large-screen-border-color)!important;box-shadow:none!important}.large-screen-dialog .el-input__inner,.large-screen-dialog .el-radio__label{color:var(--large-screen-text-color)!important}.large-screen-dialog .el-button--primary{background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg);color:#fff}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
 import { getCurrentScope as le, onScopeDispose as ie, computed as x, toValue as G, watch as se, shallowRef as ue, getCurrentInstance as de, onMounted as R, defineComponent as J, ref as z, resolveComponent as b, createElementBlock as v, createBlock as h, openBlock as i, toDisplayString as Q, withCtx as f, createElementVNode as $, reactive as M, resolveDirective as pe, normalizeClass as ce, createCommentVNode as y, createVNode as B, renderSlot as g, Fragment as q, createTextVNode as F, withDirectives as fe, mergeProps as H, renderList as ge, createSlots as me } from "vue";
 import { ElMessage as O, ElMessageBox as ye } from "element-plus";
 import he from "axios";
@@ -143,7 +144,7 @@ const Ce = /* @__PURE__ */ J({
   class: "flex items-center gap-x-2"
 }, $e = {
   key: 1,
-  class: "pagination-wrapper"
+  class: "pagination-wrapper flex justify-end mt-2"
 }, Ne = /* @__PURE__ */ J({
   __name: "CrudTable",
   props: {
@@ -235,8 +236,8 @@ const Ce = /* @__PURE__ */ J({
           const T = new FormData();
           for (const k in a)
             if (Object.prototype.hasOwnProperty.call(a, k)) {
-              const j = a[k];
-              T.append(k, j ?? "");
+              const P = a[k];
+              T.append(k, P ?? "");
             }
           d = T;
         }
@@ -286,7 +287,7 @@ const Ce = /* @__PURE__ */ J({
       }), Object.assign(u, a), N();
     }, Z = (t) => {
       I.value = t;
-    }, P = async (t, o) => {
+    }, j = async (t, o) => {
       let a;
       if (t === "add" ? a = o ? { ...o } : { role: "user" } : a = { ...o }, e.onBeforeOpenDialog) {
         const d = await e.onBeforeOpenDialog(t, a);
@@ -325,14 +326,15 @@ const Ce = /* @__PURE__ */ J({
       // 按当前条件搜索
       handleDelete: V,
       // 手动触发删除
-      openDialog: P,
+      openDialog: j,
       // 手动打开弹窗
       submit: E
       // 手动提交
     }), (t, o) => {
-      const a = b("el-button"), d = b("el-form-item"), T = b("el-form"), k = b("el-table-column"), j = b("el-popconfirm"), oe = b("el-table"), ae = b("el-pagination"), ne = b("el-dialog"), re = pe("loading");
+      const a = b("el-button"), d = b("el-form-item"), T = b("el-form"), k = b("el-table-column"), P = b("el-popconfirm"), oe = b("el-table"), ae = b("el-pagination"), ne = b("el-dialog"), re = pe("loading");
       return i(), v("div", {
-        class: ce([S.value, "crud-table-container"])
+        class: ce([S.value, "crud-table-container"]),
+        style: { "background-color": "#666" }
       }, [
         e.showSearchSection ? (i(), v("div", De, [
           g(t.$slots, "header", {}, void 0, !0),
@@ -382,7 +384,7 @@ const Ce = /* @__PURE__ */ J({
                 e.showNewBtn ? (i(), h(a, {
                   key: 0,
                   type: "success",
-                  onClick: o[0] || (o[0] = (l) => P("add"))
+                  onClick: o[0] || (o[0] = (l) => j("add"))
                 }, {
                   default: f(() => o[6] || (o[6] = [
                     F("新增")
@@ -463,7 +465,7 @@ const Ce = /* @__PURE__ */ J({
                         size: "small",
                         type: "primary",
                         link: "",
-                        onClick: (W) => P("edit", l.row)
+                        onClick: (W) => j("edit", l.row)
                       }, {
                         default: f(() => o[7] || (o[7] = [
                           F("编辑 ")
@@ -471,7 +473,7 @@ const Ce = /* @__PURE__ */ J({
                         _: 2,
                         __: [7]
                       }, 1032, ["onClick"])) : y("", !0),
-                      e.showDeleteButton ? (i(), h(j, {
+                      e.showDeleteButton ? (i(), h(P, {
                         key: 1,
                         title: "确定要删除这条数据吗?",
                         onConfirm: (W) => V([l.row.id]),
@@ -535,7 +537,7 @@ const Ce = /* @__PURE__ */ J({
       ], 2);
     };
   }
-}), je = /* @__PURE__ */ K(Ne, [["__scopeId", "data-v-16b1f280"]]);
+}), Pe = /* @__PURE__ */ K(Ne, [["__scopeId", "data-v-1bac33d7"]]);
 export {
-  je as CrudTable
+  Pe as CrudTable
 };

package/dist/z-crud-table.umd.cjs

@@ -1 +1,2 @@
-(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus"),require("axios")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus","axios"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.ZCrudTable={},u.Vue,u.ElementPlus,u.axios))})(this,function(u,e,b,z){"use strict";const k=z.create({baseURL:"",timeout:1e4});k.interceptors.request.use(l=>{const a=localStorage.getItem("token");return a&&(l.headers.Authorization="Bearer "+a),l},l=>(console.log(l),Promise.reject(l))),k.interceptors.response.use(l=>{const a=l.data;return a.code!==200?(b.ElMessage({message:a.msg||"Error",type:"error",duration:5*1e3}),(a.code===401||a.code===403)&&b.ElMessageBox.confirm("您的登录状态已失效，请重新登录","确认登出",{confirmButtonText:"重新登录",cancelButtonText:"取消",type:"warning"}).then(()=>{localStorage.removeItem("token"),location.reload()}),Promise.reject(new Error(a.msg||"Error"))):a},l=>(console.log("HTTP Error: "+l),b.ElMessage({message:"网络错误，请检查您的网络连接或联系管理员",type:"error",duration:5*1e3}),Promise.reject(l)));function F(l){return e.getCurrentScope()?(e.onScopeDispose(l),!0):!1}const $=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const j=$?window:void 0;function U(l){var a;const p=e.toValue(l);return(a=p==null?void 0:p.$el)!=null?a:p}function q(){const l=e.shallowRef(!1),a=e.getCurrentInstance();return a&&e.onMounted(()=>{l.value=!0},a),l}function M(l){const a=q();return e.computed(()=>(a.value,!!l()))}function W(l,a,p={}){const{window:f=j,...t}=p;let y;const S=M(()=>f&&"ResizeObserver"in f),h=()=>{y&&(y.disconnect(),y=void 0)},x=e.computed(()=>{const m=e.toValue(l);return Array.isArray(m)?m.map(g=>U(g)):[U(m)]}),d=e.watch(x,m=>{if(h(),S.value&&f){y=new ResizeObserver(a);for(const g of m)g&&y.observe(g,t)}},{immediate:!0,flush:"post"}),B=()=>{h(),d()};return F(B),{isSupported:S,stop:B}}const P=e.defineComponent({__name:"TableHeaderWithTooltip",props:{label:{}},setup(l){const a=e.ref(null),p=e.ref(!1),f=()=>{a.value&&(p.value=a.value.scrollWidth>a.value.clientWidth)};return e.onMounted(()=>{f()}),W(a,()=>{f()}),(t,y)=>{const S=e.resolveComponent("el-tooltip");return p.value?(e.openBlock(),e.createBlock(S,{key:1,content:t.label,placement:"top"},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"textRef",ref:a,class:"header-cell-content"},e.toDisplayString(t.label),513)]),_:1},8,["content"])):(e.openBlock(),e.createElementBlock("span",{key:0,ref_key:"textRef",ref:a,class:"header-cell-content"},e.toDisplayString(t.label),513))}}}),A=(l,a)=>{const p=l.__vccOpts||l;for(const[f,t]of a)p[f]=t;return p},Q=A(P,[["__scopeId","data-v-ed80fae4"]]),R={key:0,class:"search-section-wrapper"},I={class:"flex flex-wrap items-center justify-between gap-4 mb-6"},H={class:"flex items-center gap-x-2"},L={class:"flex items-center gap-x-3 action-buttons flex-shrink-0"},G={class:"table-content-wrapper"},Z={key:1},J={key:0,class:"flex items-center gap-x-2"},K={key:1,class:"pagination-wrapper"},X=A(e.defineComponent({__name:"CrudTable",props:{theme:{type:String,default:"default"},customClass:{type:String,default:""},apiUrlQuery:{type:String,required:!0},apiUrlDetail:{type:String,required:!0},apiUrlCreate:{type:String,required:!0},apiUrlUpdate:{type:String,required:!0},apiUrlDelete:{type:String,required:!0},loadingText:{type:String,default:"加载中…"},loadingBackground:{type:String,default:"rgba(0, 0, 0, 0.3)"},showSearchSection:{type:Boolean,default:!0},showSearchActionButtons:{type:Boolean,default:!0},showNewBtn:{type:Boolean,default:!0},columns:{type:Array,default:()=>[]},onBeforeQuery:{type:Function},onAfterQuery:{type:Function},onBeforeOpenDialog:{type:Function},onAfterOpenDialog:{type:Function},onBeforeSubmit:{type:Function},onAfterSubmit:{type:Function},onBeforeDelete:{type:Function},onAfterDelete:{type:Function},showSelectionColumn:{type:Boolean,default:!0},showIndexColumn:{type:Boolean,default:!0},showActionsColumn:{type:Boolean,default:!0},showEditButton:{type:Boolean,default:!0},showDeleteButton:{type:Boolean,default:!0},actionsColumnWidth:{type:[String,Number],default:120},dialogWidth:{type:String,default:"50%"},initialSearchForm:{type:Object,default:()=>({pageNum:1,pageSize:10})},showPagination:{type:Boolean,default:!0},pageSizes:{type:Array,default:()=>[10,20,50,100]},paginationLayout:{type:String,default:"total, sizes, prev, pager, next, jumper"},paginationBackground:{type:Boolean,default:!0},paginationSmall:{type:Boolean,default:!1},paginationHideOnSinglePage:{type:Boolean,default:!1},dialogFormConfig:{type:Array,default:()=>[]},dialogFormRules:{type:Object,default:()=>({})},submitAsFormData:{type:Boolean,default:!1}},emits:["open-dialog","submit","delete"],setup(l,{expose:a,emit:p}){const f=p,t=l,y=e.computed(()=>["crud-table-wrapper",`theme-${t.theme}`,t.customClass]),S=e.computed(()=>t.theme==="large-screen"?"large-screen-dialog":""),h=(o,n)=>o?!0:(b.ElMessage.error(`${n} prop is required.`),!1),x=async(o,n)=>{try{let r={...n};t.onBeforeSubmit&&(r=await t.onBeforeSubmit(r));let c=r;if(t.submitAsFormData){const D=new FormData;for(const w in r)if(Object.prototype.hasOwnProperty.call(r,w)){const V=r[w];D.append(w,V??"")}c=D}if(s.submitting=!0,o==="add"){if(!h(t.apiUrlCreate,"apiUrlCreate"))throw new Error("apiUrlCreate is not configured.");await k.post(t.apiUrlCreate,c),b.ElMessage.success("新增成功")}else{if(!h(t.apiUrlUpdate,"apiUrlUpdate"))throw new Error("apiUrlUpdate is not configured.");await k.put(t.apiUrlUpdate,c),b.ElMessage.success("更新成功")}return t.onAfterSubmit&&t.onAfterSubmit(o,r),f("submit",{mode:o,data:r}),s.visible&&(s.visible=!1),C(),Promise.resolve()}catch(r){return console.error("Submit failed:",r),Promise.reject(r)}finally{s.submitting=!1}},d=e.reactive({pageNum:1,pageSize:10,...t.initialSearchForm}),B=e.ref([]),m=e.ref(0),g=e.ref(!1),T=e.ref([]),s=e.reactive({visible:!1,loading:!1,submitting:!1,mode:"add",data:{},formRef:null}),Y=e.computed(()=>s.mode==="add"?"新增":"编辑");e.computed(()=>{if(s.mode==="add")return t.dialogFormConfig.filter(n=>n.prop!=="id");const o=[...t.dialogFormConfig.filter(n=>n.prop!=="id")];return o.some(n=>n.prop==="id")||o.unshift({type:"input-disabled",prop:"id",label:"用户ID"}),o});const C=async()=>{if(h(t.apiUrlQuery,"apiUrlQuery")){g.value=!0;try{let o={...d};t.onBeforeQuery&&(o=await t.onBeforeQuery(o));const n=await k.get(t.apiUrlQuery,{params:o});if(n&&n.data&&Array.isArray(n.data.rows)&&typeof n.data.total=="number"){let r=n.data.rows;t.onAfterQuery&&(r=await t.onAfterQuery(r)),B.value=r,m.value=n.data.total}else console.warn("API response is not in the expected { data: { rows: [], total: 0 } } format."),B.value=[],m.value=0}catch(o){console.error("Fetch data failed:",o)}finally{g.value=!1}}},_=()=>{d.pageNum=1,C()},v=()=>{const{pageNum:o,pageSize:n,...r}=t.initialSearchForm;Object.keys(d).forEach(c=>{c!=="pageNum"&&c!=="pageSize"&&delete d[c]}),Object.assign(d,r),_()},ee=o=>{T.value=o},N=async(o,n)=>{let r;if(o==="add"?r=n?{...n}:{role:"user"}:r={...n},t.onBeforeOpenDialog){const c=await t.onBeforeOpenDialog(o,r);c&&(r=c)}if(s.mode=o,s.visible=!0,o==="edit"){if(!h(t.apiUrlDetail,"apiUrlDetail"))return;s.loading=!0;try{const c=await k.get(t.apiUrlDetail+"/"+r.id.toString());s.data=c.data.data}finally{s.loading=!1,t.onAfterOpenDialog&&t.onAfterOpenDialog(o,s.data),f("open-dialog",{mode:o,data:s.data})}}else s.data=r,t.onAfterOpenDialog&&t.onAfterOpenDialog(o,s.data),f("open-dialog",{mode:o,data:s.data})},O=async o=>{if(h(t.apiUrlDelete,"apiUrlDelete"))try{if(t.onBeforeDelete&&await t.onBeforeDelete(o)===!1)return;const n=o.join(",");await k.delete(t.apiUrlDelete+"/"+n.toString()),b.ElMessage.success("删除成功"),t.onAfterDelete&&t.onAfterDelete(o),f("delete",o),B.value.length===o.length&&d.pageNum>1&&d.pageNum--,C()}catch(n){console.error("Delete failed",n)}},te=o=>{d.pageSize=o,_()},oe=o=>{d.pageNum=o,C()};return e.onMounted(C),a({refresh:C,search:_,handleDelete:O,openDialog:N,submit:x}),(o,n)=>{const r=e.resolveComponent("el-button"),c=e.resolveComponent("el-form-item"),D=e.resolveComponent("el-form"),w=e.resolveComponent("el-table-column"),V=e.resolveComponent("el-popconfirm"),ne=e.resolveComponent("el-table"),re=e.resolveComponent("el-pagination"),ae=e.resolveComponent("el-dialog"),le=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([y.value,"crud-table-container"])},[t.showSearchSection?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(o.$slots,"header",{},void 0,!0),e.createElementVNode("div",I,[e.createVNode(D,{model:d,class:"query-form flex flex-nowrap items-center gap-x-4",style:{"overflow-x":"auto","padding-bottom":"8px"}},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"query-conditions",{searchForm:d},void 0,!0),e.createVNode(c,{class:"!mr-0 flex-shrink-0"},{default:e.withCtx(()=>[e.createElementVNode("div",H,[e.renderSlot(o.$slots,"query-left",{},void 0,!0),t.showSearchActionButtons?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(r,{type:"primary",onClick:_,loading:g.value},{default:e.withCtx(()=>n[4]||(n[4]=[e.createTextVNode("搜索")])),_:1,__:[4]},8,["loading"]),e.createVNode(r,{onClick:v},{default:e.withCtx(()=>n[5]||(n[5]=[e.createTextVNode("清空")])),_:1,__:[5]})],64)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"query-right",{},void 0,!0)])]),_:3})]),_:3},8,["model"]),e.createElementVNode("div",L,[e.renderSlot(o.$slots,"action-left",{selections:T.value},void 0,!0),e.renderSlot(o.$slots,"add-button-content",{},()=>[t.showNewBtn?(e.openBlock(),e.createBlock(r,{key:0,type:"success",onClick:n[0]||(n[0]=i=>N("add"))},{default:e.withCtx(()=>n[6]||(n[6]=[e.createTextVNode("新增")])),_:1,__:[6]})):e.createCommentVNode("",!0)],!0),e.renderSlot(o.$slots,"action-right",{},void 0,!0)])])])):e.createCommentVNode("",!0),e.createElementVNode("div",G,[e.withDirectives((e.openBlock(),e.createBlock(ne,e.mergeProps({data:B.value,"element-loading-text":t.loadingText,"element-loading-background":t.loadingBackground,onSelectionChange:ee},o.$attrs,{height:"100%",style:{width:"100%"}}),{default:e.withCtx(()=>[t.showSelectionColumn?(e.openBlock(),e.createBlock(w,{key:0,type:"selection",width:"55",fixed:""})):e.createCommentVNode("",!0),t.showIndexColumn?(e.openBlock(),e.createBlock(w,{key:1,type:"index",label:"序号",width:"70",fixed:""})):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,i=>(e.openBlock(),e.createBlock(w,e.mergeProps({key:i.prop,prop:i.prop,label:i.label,width:i.width,sortable:i.sortable||!1},{ref_for:!0},i.attrs),e.createSlots({header:e.withCtx(()=>[i.headerTooltip?(e.openBlock(),e.createBlock(Q,{key:0,label:i.label},null,8,["label"])):(e.openBlock(),e.createElementBlock("span",Z,e.toDisplayString(i.label),1))]),_:2},[i.slot?{name:"default",fn:e.withCtx(E=>[e.renderSlot(o.$slots,i.slot,{row:E.row},void 0,!0)]),key:"0"}:void 0]),1040,["prop","label","width","sortable"]))),128)),t.showActionsColumn?(e.openBlock(),e.createBlock(w,{key:2,label:"操作",width:l.actionsColumnWidth},{default:e.withCtx(i=>[i.row?(e.openBlock(),e.createElementBlock("div",J,[o.$slots.actions?e.renderSlot(o.$slots,"actions",{key:0,row:i.row},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(o.$slots,"action-before-edit",{row:i.row},void 0,!0),t.showEditButton?(e.openBlock(),e.createBlock(r,{key:0,size:"small",type:"primary",link:"",onClick:E=>N("edit",i.row)},{default:e.withCtx(()=>n[7]||(n[7]=[e.createTextVNode("编辑 ")])),_:2,__:[7]},1032,["onClick"])):e.createCommentVNode("",!0),t.showDeleteButton?(e.openBlock(),e.createBlock(V,{key:1,title:"确定要删除这条数据吗?",onConfirm:E=>O([i.row.id]),"confirm-button-text":"确定","cancel-button-text":"取消",width:"200"},{reference:e.withCtx(()=>[e.createVNode(r,{size:"small",type:"danger",link:""},{default:e.withCtx(()=>n[8]||(n[8]=[e.createTextVNode("删除")])),_:1,__:[8]})]),_:2},1032,["onConfirm"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"action-after-delete",{row:i.row},void 0,!0)],64))])):e.createCommentVNode("",!0)]),_:3},8,["width"])):e.createCommentVNode("",!0)]),_:3},16,["data","element-loading-text","element-loading-background"])),[[le,g.value]])]),t.showPagination&&m.value>0?(e.openBlock(),e.createElementBlock("div",K,[e.createVNode(re,{"current-page":d.pageNum,"onUpdate:currentPage":n[1]||(n[1]=i=>d.pageNum=i),"page-size":d.pageSize,"onUpdate:pageSize":n[2]||(n[2]=i=>d.pageSize=i),"page-sizes":t.pageSizes,layout:t.paginationLayout,total:m.value,background:t.paginationBackground,small:t.paginationSmall,"hide-on-single-page":t.paginationHideOnSinglePage,onSizeChange:te,onCurrentChange:oe},null,8,["current-page","page-size","page-sizes","layout","total","background","small","hide-on-single-page"])])):e.createCommentVNode("",!0),e.createVNode(ae,{modelValue:s.visible,"onUpdate:modelValue":n[3]||(n[3]=i=>s.visible=i),title:Y.value,width:t.dialogWidth,"destroy-on-close":!0,"custom-class":S.value},null,8,["modelValue","title","width","custom-class"])],2)}}}),[["__scopeId","data-v-16b1f280"]]);u.CrudTable=X,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.header-cell-content[data-v-ed80fae4]{display:inline-block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crud-table-container[data-v-1bac33d7]{display:flex;flex-direction:column;height:100%;width:100%;min-width:0;min-height:0;overflow:hidden}.search-section-wrapper[data-v-1bac33d7]{flex-shrink:0}.table-content-wrapper[data-v-1bac33d7]{flex:1;min-height:0;overflow:hidden}.pagination-wrapper[data-v-1bac33d7]{flex-shrink:0;padding-top:1rem;display:flex;justify-content:flex-end}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.\\!mr-0{margin-right:0!important}.mb-6{margin-bottom:1.5rem}.mt-2{margin-top:.5rem}.flex{display:flex}.hidden{display:none}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}body{background-color:#f0f2f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;padding:1rem}@media (min-width: 768px){#app{padding:1.5rem}}.crud-container{transition:box-shadow .3s ease-in-out}.crud-container:hover{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.query-form .el-form-item{margin-bottom:0!important}.el-table__expanded-cell{padding:1rem 3.5rem!important;background-color:#f8fafc}.action-buttons>*+*{margin-left:.75rem}.el-dialog__header{border-bottom:none;padding:24px 24px 10px}.el-dialog__title{font-size:1.25rem;font-weight:600}.el-dialog__footer{border-top:none;padding:10px 24px 24px}.el-dialog__body{padding:10px 24px}:root{--large-screen-border-color: rgba(120, 153, 199, 1);--large-screen-text-color: rgba(227, 246, 255, 1);--large-screen-search-bg: rgba(210, 224, 243, .1);--large-screen-button-bg: rgba(38, 120, 255, 1);--large-screen-action-link-color: rgba(39, 233, 255, 1);--large-screen-dialog-bg: #1e293b;--large-screen-hover-bg: rgba(120, 153, 199, .15)}.theme-large-screen{color:var(--large-screen-text-color)}.theme-large-screen .crud-container{background-color:transparent!important;border:none}.theme-large-screen .el-table,.theme-large-screen .el-table__expanded-cell,.theme-large-screen .el-table th.el-table__cell,.theme-large-screen .el-table tr,.theme-large-screen .el-table .el-table__row{background-color:transparent!important;color:var(--large-screen-text-color)}.theme-large-screen .el-table th.el-table__cell{font-weight:600}.theme-large-screen .el-table td.el-table__cell,.theme-large-screen .el-table th.el-table__cell.is-leaf{border-bottom:1px solid var(--large-screen-border-color)}.theme-large-screen .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{background-color:var(--large-screen-hover-bg)!important}.theme-large-screen .el-table--border .el-table__inner-wrapper:after,.theme-large-screen .el-table--border:after,.theme-large-screen .el-table--border:before,.theme-large-screen .el-table__inner-wrapper:before{background-color:var(--large-screen-border-color)}.theme-large-screen .el-form-item__label{color:var(--large-screen-text-color)}.theme-large-screen .query-form .el-input__wrapper,.theme-large-screen .query-form .el-select__wrapper{background-color:var(--large-screen-search-bg);box-shadow:none!important;border:1px solid var(--large-screen-border-color)}.theme-large-screen .el-input__inner{color:var(--large-screen-text-color)}.theme-large-screen .el-button--primary,.theme-large-screen .el-button--success{background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg);color:#fff}.theme-large-screen .el-button--primary:hover,.theme-large-screen .el-button--success:hover{filter:brightness(1.2);background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg)}.theme-large-screen .el-button--danger:not(.is-link){background-color:#f56c6c;border-color:#f56c6c;color:#fff}.theme-large-screen .el-table .el-button.is-link{color:var(--large-screen-action-link-color)}.theme-large-screen .el-table .el-button.is-link:hover{filter:brightness(1.2)}.theme-large-screen .el-pagination{--el-pagination-text-color: var(--large-screen-text-color);--el-pagination-bg-color: transparent;--el-pagination-button-disabled-bg-color: rgba(120, 153, 199, .2);--el-pagination-button-bg-color: rgba(120, 153, 199, .3)}.large-screen-dialog .el-dialog{background-color:var(--el-dialog-bg-color)!important;border-radius:8px}.large-screen-dialog .el-dialog__title,.large-screen-dialog .el-dialog__body{color:var(--large-screen-text-color)}.large-screen-dialog .el-form-item__label{color:var(--large-screen-text-color)!important}.large-screen-dialog .el-input__wrapper,.large-screen-dialog .el-select__wrapper{background-color:#7899c71a!important;border:1px solid var(--large-screen-border-color)!important;box-shadow:none!important}.large-screen-dialog .el-input__inner,.large-screen-dialog .el-radio__label{color:var(--large-screen-text-color)!important}.large-screen-dialog .el-button--primary{background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg);color:#fff}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus"),require("axios")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus","axios"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.ZCrudTable={},u.Vue,u.ElementPlus,u.axios))})(this,function(u,e,b,z){"use strict";const k=z.create({baseURL:"",timeout:1e4});k.interceptors.request.use(l=>{const a=localStorage.getItem("token");return a&&(l.headers.Authorization="Bearer "+a),l},l=>(console.log(l),Promise.reject(l))),k.interceptors.response.use(l=>{const a=l.data;return a.code!==200?(b.ElMessage({message:a.msg||"Error",type:"error",duration:5*1e3}),(a.code===401||a.code===403)&&b.ElMessageBox.confirm("您的登录状态已失效，请重新登录","确认登出",{confirmButtonText:"重新登录",cancelButtonText:"取消",type:"warning"}).then(()=>{localStorage.removeItem("token"),location.reload()}),Promise.reject(new Error(a.msg||"Error"))):a},l=>(console.log("HTTP Error: "+l),b.ElMessage({message:"网络错误，请检查您的网络连接或联系管理员",type:"error",duration:5*1e3}),Promise.reject(l)));function F(l){return e.getCurrentScope()?(e.onScopeDispose(l),!0):!1}const $=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const j=$?window:void 0;function U(l){var a;const p=e.toValue(l);return(a=p==null?void 0:p.$el)!=null?a:p}function q(){const l=e.shallowRef(!1),a=e.getCurrentInstance();return a&&e.onMounted(()=>{l.value=!0},a),l}function M(l){const a=q();return e.computed(()=>(a.value,!!l()))}function W(l,a,p={}){const{window:f=j,...t}=p;let y;const S=M(()=>f&&"ResizeObserver"in f),h=()=>{y&&(y.disconnect(),y=void 0)},x=e.computed(()=>{const m=e.toValue(l);return Array.isArray(m)?m.map(g=>U(g)):[U(m)]}),d=e.watch(x,m=>{if(h(),S.value&&f){y=new ResizeObserver(a);for(const g of m)g&&y.observe(g,t)}},{immediate:!0,flush:"post"}),B=()=>{h(),d()};return F(B),{isSupported:S,stop:B}}const P=e.defineComponent({__name:"TableHeaderWithTooltip",props:{label:{}},setup(l){const a=e.ref(null),p=e.ref(!1),f=()=>{a.value&&(p.value=a.value.scrollWidth>a.value.clientWidth)};return e.onMounted(()=>{f()}),W(a,()=>{f()}),(t,y)=>{const S=e.resolveComponent("el-tooltip");return p.value?(e.openBlock(),e.createBlock(S,{key:1,content:t.label,placement:"top"},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"textRef",ref:a,class:"header-cell-content"},e.toDisplayString(t.label),513)]),_:1},8,["content"])):(e.openBlock(),e.createElementBlock("span",{key:0,ref_key:"textRef",ref:a,class:"header-cell-content"},e.toDisplayString(t.label),513))}}}),A=(l,a)=>{const p=l.__vccOpts||l;for(const[f,t]of a)p[f]=t;return p},Q=A(P,[["__scopeId","data-v-ed80fae4"]]),R={key:0,class:"search-section-wrapper"},I={class:"flex flex-wrap items-center justify-between gap-4 mb-6"},H={class:"flex items-center gap-x-2"},L={class:"flex items-center gap-x-3 action-buttons flex-shrink-0"},G={class:"table-content-wrapper"},Z={key:1},J={key:0,class:"flex items-center gap-x-2"},K={key:1,class:"pagination-wrapper flex justify-end mt-2"},X=A(e.defineComponent({__name:"CrudTable",props:{theme:{type:String,default:"default"},customClass:{type:String,default:""},apiUrlQuery:{type:String,required:!0},apiUrlDetail:{type:String,required:!0},apiUrlCreate:{type:String,required:!0},apiUrlUpdate:{type:String,required:!0},apiUrlDelete:{type:String,required:!0},loadingText:{type:String,default:"加载中…"},loadingBackground:{type:String,default:"rgba(0, 0, 0, 0.3)"},showSearchSection:{type:Boolean,default:!0},showSearchActionButtons:{type:Boolean,default:!0},showNewBtn:{type:Boolean,default:!0},columns:{type:Array,default:()=>[]},onBeforeQuery:{type:Function},onAfterQuery:{type:Function},onBeforeOpenDialog:{type:Function},onAfterOpenDialog:{type:Function},onBeforeSubmit:{type:Function},onAfterSubmit:{type:Function},onBeforeDelete:{type:Function},onAfterDelete:{type:Function},showSelectionColumn:{type:Boolean,default:!0},showIndexColumn:{type:Boolean,default:!0},showActionsColumn:{type:Boolean,default:!0},showEditButton:{type:Boolean,default:!0},showDeleteButton:{type:Boolean,default:!0},actionsColumnWidth:{type:[String,Number],default:120},dialogWidth:{type:String,default:"50%"},initialSearchForm:{type:Object,default:()=>({pageNum:1,pageSize:10})},showPagination:{type:Boolean,default:!0},pageSizes:{type:Array,default:()=>[10,20,50,100]},paginationLayout:{type:String,default:"total, sizes, prev, pager, next, jumper"},paginationBackground:{type:Boolean,default:!0},paginationSmall:{type:Boolean,default:!1},paginationHideOnSinglePage:{type:Boolean,default:!1},dialogFormConfig:{type:Array,default:()=>[]},dialogFormRules:{type:Object,default:()=>({})},submitAsFormData:{type:Boolean,default:!1}},emits:["open-dialog","submit","delete"],setup(l,{expose:a,emit:p}){const f=p,t=l,y=e.computed(()=>["crud-table-wrapper",`theme-${t.theme}`,t.customClass]),S=e.computed(()=>t.theme==="large-screen"?"large-screen-dialog":""),h=(o,n)=>o?!0:(b.ElMessage.error(`${n} prop is required.`),!1),x=async(o,n)=>{try{let r={...n};t.onBeforeSubmit&&(r=await t.onBeforeSubmit(r));let c=r;if(t.submitAsFormData){const D=new FormData;for(const w in r)if(Object.prototype.hasOwnProperty.call(r,w)){const V=r[w];D.append(w,V??"")}c=D}if(s.submitting=!0,o==="add"){if(!h(t.apiUrlCreate,"apiUrlCreate"))throw new Error("apiUrlCreate is not configured.");await k.post(t.apiUrlCreate,c),b.ElMessage.success("新增成功")}else{if(!h(t.apiUrlUpdate,"apiUrlUpdate"))throw new Error("apiUrlUpdate is not configured.");await k.put(t.apiUrlUpdate,c),b.ElMessage.success("更新成功")}return t.onAfterSubmit&&t.onAfterSubmit(o,r),f("submit",{mode:o,data:r}),s.visible&&(s.visible=!1),C(),Promise.resolve()}catch(r){return console.error("Submit failed:",r),Promise.reject(r)}finally{s.submitting=!1}},d=e.reactive({pageNum:1,pageSize:10,...t.initialSearchForm}),B=e.ref([]),m=e.ref(0),g=e.ref(!1),T=e.ref([]),s=e.reactive({visible:!1,loading:!1,submitting:!1,mode:"add",data:{},formRef:null}),Y=e.computed(()=>s.mode==="add"?"新增":"编辑");e.computed(()=>{if(s.mode==="add")return t.dialogFormConfig.filter(n=>n.prop!=="id");const o=[...t.dialogFormConfig.filter(n=>n.prop!=="id")];return o.some(n=>n.prop==="id")||o.unshift({type:"input-disabled",prop:"id",label:"用户ID"}),o});const C=async()=>{if(h(t.apiUrlQuery,"apiUrlQuery")){g.value=!0;try{let o={...d};t.onBeforeQuery&&(o=await t.onBeforeQuery(o));const n=await k.get(t.apiUrlQuery,{params:o});if(n&&n.data&&Array.isArray(n.data.rows)&&typeof n.data.total=="number"){let r=n.data.rows;t.onAfterQuery&&(r=await t.onAfterQuery(r)),B.value=r,m.value=n.data.total}else console.warn("API response is not in the expected { data: { rows: [], total: 0 } } format."),B.value=[],m.value=0}catch(o){console.error("Fetch data failed:",o)}finally{g.value=!1}}},_=()=>{d.pageNum=1,C()},v=()=>{const{pageNum:o,pageSize:n,...r}=t.initialSearchForm;Object.keys(d).forEach(c=>{c!=="pageNum"&&c!=="pageSize"&&delete d[c]}),Object.assign(d,r),_()},ee=o=>{T.value=o},N=async(o,n)=>{let r;if(o==="add"?r=n?{...n}:{role:"user"}:r={...n},t.onBeforeOpenDialog){const c=await t.onBeforeOpenDialog(o,r);c&&(r=c)}if(s.mode=o,s.visible=!0,o==="edit"){if(!h(t.apiUrlDetail,"apiUrlDetail"))return;s.loading=!0;try{const c=await k.get(t.apiUrlDetail+"/"+r.id.toString());s.data=c.data.data}finally{s.loading=!1,t.onAfterOpenDialog&&t.onAfterOpenDialog(o,s.data),f("open-dialog",{mode:o,data:s.data})}}else s.data=r,t.onAfterOpenDialog&&t.onAfterOpenDialog(o,s.data),f("open-dialog",{mode:o,data:s.data})},O=async o=>{if(h(t.apiUrlDelete,"apiUrlDelete"))try{if(t.onBeforeDelete&&await t.onBeforeDelete(o)===!1)return;const n=o.join(",");await k.delete(t.apiUrlDelete+"/"+n.toString()),b.ElMessage.success("删除成功"),t.onAfterDelete&&t.onAfterDelete(o),f("delete",o),B.value.length===o.length&&d.pageNum>1&&d.pageNum--,C()}catch(n){console.error("Delete failed",n)}},te=o=>{d.pageSize=o,_()},oe=o=>{d.pageNum=o,C()};return e.onMounted(C),a({refresh:C,search:_,handleDelete:O,openDialog:N,submit:x}),(o,n)=>{const r=e.resolveComponent("el-button"),c=e.resolveComponent("el-form-item"),D=e.resolveComponent("el-form"),w=e.resolveComponent("el-table-column"),V=e.resolveComponent("el-popconfirm"),ne=e.resolveComponent("el-table"),re=e.resolveComponent("el-pagination"),ae=e.resolveComponent("el-dialog"),le=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([y.value,"crud-table-container"]),style:{"background-color":"#666"}},[t.showSearchSection?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(o.$slots,"header",{},void 0,!0),e.createElementVNode("div",I,[e.createVNode(D,{model:d,class:"query-form flex flex-nowrap items-center gap-x-4",style:{"overflow-x":"auto","padding-bottom":"8px"}},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"query-conditions",{searchForm:d},void 0,!0),e.createVNode(c,{class:"!mr-0 flex-shrink-0"},{default:e.withCtx(()=>[e.createElementVNode("div",H,[e.renderSlot(o.$slots,"query-left",{},void 0,!0),t.showSearchActionButtons?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(r,{type:"primary",onClick:_,loading:g.value},{default:e.withCtx(()=>n[4]||(n[4]=[e.createTextVNode("搜索")])),_:1,__:[4]},8,["loading"]),e.createVNode(r,{onClick:v},{default:e.withCtx(()=>n[5]||(n[5]=[e.createTextVNode("清空")])),_:1,__:[5]})],64)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"query-right",{},void 0,!0)])]),_:3})]),_:3},8,["model"]),e.createElementVNode("div",L,[e.renderSlot(o.$slots,"action-left",{selections:T.value},void 0,!0),e.renderSlot(o.$slots,"add-button-content",{},()=>[t.showNewBtn?(e.openBlock(),e.createBlock(r,{key:0,type:"success",onClick:n[0]||(n[0]=i=>N("add"))},{default:e.withCtx(()=>n[6]||(n[6]=[e.createTextVNode("新增")])),_:1,__:[6]})):e.createCommentVNode("",!0)],!0),e.renderSlot(o.$slots,"action-right",{},void 0,!0)])])])):e.createCommentVNode("",!0),e.createElementVNode("div",G,[e.withDirectives((e.openBlock(),e.createBlock(ne,e.mergeProps({data:B.value,"element-loading-text":t.loadingText,"element-loading-background":t.loadingBackground,onSelectionChange:ee},o.$attrs,{height:"100%",style:{width:"100%"}}),{default:e.withCtx(()=>[t.showSelectionColumn?(e.openBlock(),e.createBlock(w,{key:0,type:"selection",width:"55",fixed:""})):e.createCommentVNode("",!0),t.showIndexColumn?(e.openBlock(),e.createBlock(w,{key:1,type:"index",label:"序号",width:"70",fixed:""})):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,i=>(e.openBlock(),e.createBlock(w,e.mergeProps({key:i.prop,prop:i.prop,label:i.label,width:i.width,sortable:i.sortable||!1},{ref_for:!0},i.attrs),e.createSlots({header:e.withCtx(()=>[i.headerTooltip?(e.openBlock(),e.createBlock(Q,{key:0,label:i.label},null,8,["label"])):(e.openBlock(),e.createElementBlock("span",Z,e.toDisplayString(i.label),1))]),_:2},[i.slot?{name:"default",fn:e.withCtx(E=>[e.renderSlot(o.$slots,i.slot,{row:E.row},void 0,!0)]),key:"0"}:void 0]),1040,["prop","label","width","sortable"]))),128)),t.showActionsColumn?(e.openBlock(),e.createBlock(w,{key:2,label:"操作",width:l.actionsColumnWidth},{default:e.withCtx(i=>[i.row?(e.openBlock(),e.createElementBlock("div",J,[o.$slots.actions?e.renderSlot(o.$slots,"actions",{key:0,row:i.row},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(o.$slots,"action-before-edit",{row:i.row},void 0,!0),t.showEditButton?(e.openBlock(),e.createBlock(r,{key:0,size:"small",type:"primary",link:"",onClick:E=>N("edit",i.row)},{default:e.withCtx(()=>n[7]||(n[7]=[e.createTextVNode("编辑 ")])),_:2,__:[7]},1032,["onClick"])):e.createCommentVNode("",!0),t.showDeleteButton?(e.openBlock(),e.createBlock(V,{key:1,title:"确定要删除这条数据吗?",onConfirm:E=>O([i.row.id]),"confirm-button-text":"确定","cancel-button-text":"取消",width:"200"},{reference:e.withCtx(()=>[e.createVNode(r,{size:"small",type:"danger",link:""},{default:e.withCtx(()=>n[8]||(n[8]=[e.createTextVNode("删除")])),_:1,__:[8]})]),_:2},1032,["onConfirm"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"action-after-delete",{row:i.row},void 0,!0)],64))])):e.createCommentVNode("",!0)]),_:3},8,["width"])):e.createCommentVNode("",!0)]),_:3},16,["data","element-loading-text","element-loading-background"])),[[le,g.value]])]),t.showPagination&&m.value>0?(e.openBlock(),e.createElementBlock("div",K,[e.createVNode(re,{"current-page":d.pageNum,"onUpdate:currentPage":n[1]||(n[1]=i=>d.pageNum=i),"page-size":d.pageSize,"onUpdate:pageSize":n[2]||(n[2]=i=>d.pageSize=i),"page-sizes":t.pageSizes,layout:t.paginationLayout,total:m.value,background:t.paginationBackground,small:t.paginationSmall,"hide-on-single-page":t.paginationHideOnSinglePage,onSizeChange:te,onCurrentChange:oe},null,8,["current-page","page-size","page-sizes","layout","total","background","small","hide-on-single-page"])])):e.createCommentVNode("",!0),e.createVNode(ae,{modelValue:s.visible,"onUpdate:modelValue":n[3]||(n[3]=i=>s.visible=i),title:Y.value,width:t.dialogWidth,"destroy-on-close":!0,"custom-class":S.value},null,8,["modelValue","title","width","custom-class"])],2)}}}),[["__scopeId","data-v-1bac33d7"]]);u.CrudTable=X,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "z-crud-table",
   "private": false,
-  "version": "0.0.34",
+  "version": "0.0.36",
   "type": "module",
   "description": "A powerful and flexible CRUD table component for Vue 3 and Element Plus.",
   "keywords": [
@@ -29,8 +29,7 @@
     "./dist/style.css": "./dist/style.css"
   },
   "files": [
-    "dist",
-    "src/components"
+    "dist"
   ],
   "scripts": {
     "dev": "vite",
@@ -57,6 +56,7 @@
     "tailwindcss": "^3.4.4",
     "typescript": "~5.4.5",
     "vite": "^6.2.4",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-vue-devtools": "^7.7.2",
     "vue": "^3.5.13",

package/dist/z-crud-table.css

@@ -1 +0,0 @@
-.header-cell-content[data-v-ed80fae4]{display:inline-block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crud-table-container[data-v-16b1f280]{display:flex;flex-direction:column;height:100%;width:100%;min-width:0;min-height:0;overflow:hidden}.search-section-wrapper[data-v-16b1f280]{flex-shrink:0}.table-content-wrapper[data-v-16b1f280]{flex:1;min-height:0;overflow:hidden}.pagination-wrapper[data-v-16b1f280]{flex-shrink:0;padding-top:1rem;display:flex;justify-content:flex-end}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.\!mr-0{margin-right:0!important}.mb-6{margin-bottom:1.5rem}.flex{display:flex}.hidden{display:none}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}body{background-color:#f0f2f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;padding:1rem}@media (min-width: 768px){#app{padding:1.5rem}}.crud-container{transition:box-shadow .3s ease-in-out}.crud-container:hover{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.query-form .el-form-item{margin-bottom:0!important}.el-table__expanded-cell{padding:1rem 3.5rem!important;background-color:#f8fafc}.action-buttons>*+*{margin-left:.75rem}.el-dialog__header{border-bottom:none;padding:24px 24px 10px}.el-dialog__title{font-size:1.25rem;font-weight:600}.el-dialog__footer{border-top:none;padding:10px 24px 24px}.el-dialog__body{padding:10px 24px}:root{--large-screen-border-color: rgba(120, 153, 199, 1);--large-screen-text-color: rgba(227, 246, 255, 1);--large-screen-search-bg: rgba(210, 224, 243, .1);--large-screen-button-bg: rgba(38, 120, 255, 1);--large-screen-action-link-color: rgba(39, 233, 255, 1);--large-screen-dialog-bg: #1e293b;--large-screen-hover-bg: rgba(120, 153, 199, .15)}.theme-large-screen{color:var(--large-screen-text-color)}.theme-large-screen .crud-container{background-color:transparent!important;border:none}.theme-large-screen .el-table,.theme-large-screen .el-table__expanded-cell,.theme-large-screen .el-table th.el-table__cell,.theme-large-screen .el-table tr,.theme-large-screen .el-table .el-table__row{background-color:transparent!important;color:var(--large-screen-text-color)}.theme-large-screen .el-table th.el-table__cell{font-weight:600}.theme-large-screen .el-table td.el-table__cell,.theme-large-screen .el-table th.el-table__cell.is-leaf{border-bottom:1px solid var(--large-screen-border-color)}.theme-large-screen .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{background-color:var(--large-screen-hover-bg)!important}.theme-large-screen .el-table--border .el-table__inner-wrapper:after,.theme-large-screen .el-table--border:after,.theme-large-screen .el-table--border:before,.theme-large-screen .el-table__inner-wrapper:before{background-color:var(--large-screen-border-color)}.theme-large-screen .el-form-item__label{color:var(--large-screen-text-color)}.theme-large-screen .query-form .el-input__wrapper,.theme-large-screen .query-form .el-select__wrapper{background-color:var(--large-screen-search-bg);box-shadow:none!important;border:1px solid var(--large-screen-border-color)}.theme-large-screen .el-input__inner{color:var(--large-screen-text-color)}.theme-large-screen .el-button--primary,.theme-large-screen .el-button--success{background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg);color:#fff}.theme-large-screen .el-button--primary:hover,.theme-large-screen .el-button--success:hover{filter:brightness(1.2);background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg)}.theme-large-screen .el-button--danger:not(.is-link){background-color:#f56c6c;border-color:#f56c6c;color:#fff}.theme-large-screen .el-table .el-button.is-link{color:var(--large-screen-action-link-color)}.theme-large-screen .el-table .el-button.is-link:hover{filter:brightness(1.2)}.theme-large-screen .el-pagination{--el-pagination-text-color: var(--large-screen-text-color);--el-pagination-bg-color: transparent;--el-pagination-button-disabled-bg-color: rgba(120, 153, 199, .2);--el-pagination-button-bg-color: rgba(120, 153, 199, .3)}.large-screen-dialog .el-dialog{background-color:var(--el-dialog-bg-color)!important;border-radius:8px}.large-screen-dialog .el-dialog__title,.large-screen-dialog .el-dialog__body{color:var(--large-screen-text-color)}.large-screen-dialog .el-form-item__label{color:var(--large-screen-text-color)!important}.large-screen-dialog .el-input__wrapper,.large-screen-dialog .el-select__wrapper{background-color:#7899c71a!important;border:1px solid var(--large-screen-border-color)!important;box-shadow:none!important}.large-screen-dialog .el-input__inner,.large-screen-dialog .el-radio__label{color:var(--large-screen-text-color)!important}.large-screen-dialog .el-button--primary{background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg);color:#fff}

package/src/components/CrudTable.vue

@@ -1,623 +0,0 @@
-<template>
-  <div :class="wrapperClass" class="crud-table-container">
-
-    <div v-if="props.showSearchSection" class="search-section-wrapper">
-      <slot name="header"></slot>
-      <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
-        <el-form :model="searchForm" class="query-form flex flex-nowrap items-center gap-x-4"
-                 style="overflow-x: auto; padding-bottom: 8px;">
-          <slot name="query-conditions" :search-form="searchForm"></slot>
-          <el-form-item class="!mr-0 flex-shrink-0">
-            <div class="flex items-center gap-x-2">
-              <slot name="query-left"></slot>
-              <template v-if="props.showSearchActionButtons">
-                <el-button type="primary" @click="handleSearch" :loading="loading">搜索</el-button>
-                <el-button @click="handleClearSearch">清空</el-button>
-              </template>
-              <slot name="query-right"></slot>
-            </div>
-          </el-form-item>
-        </el-form>
-        <div class="flex items-center gap-x-3 action-buttons flex-shrink-0">
-          <slot name="action-left" :selections="selections"></slot>
-          <slot name="add-button-content">
-            <el-button v-if="props.showNewBtn" type="success" @click="openDialog('add')">新增</el-button>
-          </slot>
-          <slot name="action-right"></slot>
-        </div>
-      </div>
-    </div>
-
-    <div class="table-content-wrapper">
-      <el-table
-          :data="tableData"
-          v-loading="loading"
-          :element-loading-text="props.loadingText"
-          :element-loading-background="props.loadingBackground"
-          @selection-change="handleSelectionChange"
-          v-bind="$attrs"
-
-          height="100%"
-
-          style="width: 100%;"
-      >
-        <el-table-column v-if="props.showSelectionColumn" type="selection" width="55" fixed/>
-        <el-table-column v-if="props.showIndexColumn" type="index" label="序号" width="70" fixed/>
-        <template v-for="column in props.columns" :key="column.prop">
-          <el-table-column
-              :prop="column.prop"
-              :label="column.label"
-              :width="column.width"
-              :sortable="column.sortable || false"
-              v-bind="column.attrs"
-          >
-            <template #header>
-              <TableHeaderWithTooltip v-if="column.headerTooltip" :label="column.label"/>
-              <span v-else>{{ column.label }}</span>
-            </template>
-
-            <template v-if="column.slot" #default="scope">
-              <slot :name="column.slot" :row="scope.row"></slot>
-            </template>
-          </el-table-column>
-        </template>
-        <el-table-column v-if="props.showActionsColumn" label="操作" :width="actionsColumnWidth">
-          <template #default="scope">
-            <div v-if="scope.row" class="flex items-center gap-x-2">
-              <slot v-if="$slots.actions" name="actions" :row="scope.row"></slot>
-              <template v-else>
-                <slot name="action-before-edit" :row="scope.row"></slot>
-                <el-button v-if="props.showEditButton" size="small" type="primary" link
-                           @click="openDialog('edit', scope.row)">编辑
-                </el-button>
-                <el-popconfirm v-if="props.showDeleteButton" title="确定要删除这条数据吗?"
-                               @confirm="handleDelete([scope.row.id])" confirm-button-text="确定"
-                               cancel-button-text="取消" width="200">
-                  <template #reference>
-                    <el-button size="small" type="danger" link>删除</el-button>
-                  </template>
-                </el-popconfirm>
-                <slot name="action-after-delete" :row="scope.row"></slot>
-              </template>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-
-    <div v-if="props.showPagination && total > 0" class="pagination-wrapper">
-      <el-pagination
-          v-model:current-page="searchForm.pageNum"
-          v-model:page-size="searchForm.pageSize"
-          :page-sizes="props.pageSizes"
-          :layout="props.paginationLayout"
-          :total="total"
-          :background="props.paginationBackground"
-          :small="props.paginationSmall"
-          :hide-on-single-page="props.paginationHideOnSinglePage"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-      />
-    </div>
-
-    <el-dialog v-model="dialog.visible" :title="dialogTitle" :width="props.dialogWidth" :destroy-on-close="true"
-               :custom-class="dialogClass">
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {computed, onMounted, PropType, reactive, ref} from 'vue';
-import {ElMessage} from 'element-plus';
-import DynamicForm from './DynamicForm.vue';
-import request from '@/utils/request';
-import TableHeaderWithTooltip from './TableHeaderWithTooltip.vue';
-
-// --- 1. 组件事件定义 ---
-// 定义组件向外触发的自定义事件，允许父组件监听这些关键操作的完成时机。
-const emit = defineEmits(['open-dialog', 'submit', 'delete']);
-
-// --- 2. 组件属性 (Props) 定义 ---
-// 定义组件接收的所有外部参数，这是组件配置和行为定制的核心。
-const props = defineProps({
-  /**
-   * @description 组件的主题风格
-   * @type {'default' | 'large-screen'}
-   */
-  theme: {type: String as PropType<'default' | 'large-screen'>, default: 'default'},
-  customClass: {type: String, default: ''},
-  // API 相关配置
-  apiUrlQuery: {type: String, required: true},
-  apiUrlDetail: {type: String, required: true},
-  apiUrlCreate: {type: String, required: true},
-  apiUrlUpdate: {type: String, required: true},
-  apiUrlDelete: {type: String, required: true},
-
-  // ✨ [新增] Loading 状态相关配置
-  /**
-   * @description 加载数据时显示的提示文字
-   * @type {String}
-   */
-  loadingText: {
-    type: String,
-    default: '加载中…' // 默认为‘加载中…’
-  },
-  /**
-   * @description 遮罩层的背景色 (CSS color)
-   * @type {String}
-   */
-  loadingBackground: {
-    type: String,
-    default: 'rgba(0, 0, 0, 0.3)' // 默认为 rgba(0, 0, 0, 0.3)
-  },
-
-  showSearchSection: {type: Boolean, default: true},
-
-  // ✨ [新增] 控制搜索/清空按钮的显示
-  showSearchActionButtons: {type: Boolean, default: true},
-
-  // 控制新增按钮
-  showNewBtn: {type: Boolean, default: true},
-
-  // 表格列定义，通过配置数组动态渲染，比 slot 更灵活。
-  columns: {
-    type: Array as PropType<any[]>,
-    default: () => []
-  },
-
-  // 生命周期钩子函数，允许在特定操作前后注入自定义逻辑。
-  onBeforeQuery: {type: Function as PropType<(params: any) => Promise<any> | any>},
-  onAfterQuery: {type: Function as PropType<(data: any[]) => Promise<any[]> | any[]>},
-  onBeforeOpenDialog: {type: Function as PropType<(mode: string, data?: any) => Promise<any> | any>},
-  onAfterOpenDialog: {type: Function as PropType<(mode: string, data: any) => void>},
-  onBeforeSubmit: {type: Function as PropType<(data: any) => Promise<any> | any>},
-  onAfterSubmit: {type: Function as PropType<(mode: string, data: any) => void>},
-  onBeforeDelete: {type: Function as PropType<(ids: number[]) => Promise<boolean> | boolean>},
-  onAfterDelete: {type: Function as PropType<(ids: number[]) => void>},
-
-  // 功能开关，控制UI元素的显示/隐藏。
-  showSelectionColumn: {type: Boolean, default: true},
-  showIndexColumn: {type: Boolean, default: true},
-  showActionsColumn: {type: Boolean, default: true},
-  showEditButton: {type: Boolean, default: true},
-  showDeleteButton: {type: Boolean, default: true},
-
-  // UI 定制化配置
-  actionsColumnWidth: {type: [String, Number], default: 120},
-  dialogWidth: {type: String, default: '50%'},
-  initialSearchForm: {type: Object, default: () => ({pageNum: 1, pageSize: 10})},
-
-  // 分页相关配置
-  showPagination: {type: Boolean, default: true},
-  pageSizes: {type: Array, default: () => [10, 20, 50, 100]},
-  paginationLayout: {type: String, default: 'total, sizes, prev, pager, next, jumper'},
-  paginationBackground: {type: Boolean, default: true},
-  paginationSmall: {type: Boolean, default: false},
-  paginationHideOnSinglePage: {type: Boolean, default: false},
-
-  // 弹窗表单配置
-  dialogFormConfig: {type: Array as () => any[], default: () => []},
-  dialogFormRules: {type: Object, default: () => ({})},
-  /**
-   * @description 是否以 multipart/form-data 格式提交表单。
-   * 适用于需要上传文件的场景。
-   * @type {Boolean}
-   */
-  submitAsFormData: {type: Boolean, default: false},
-});
-
-// --- 3. 动态计算属性 (Computed) ---
-
-// 根据 `theme` prop 动态计算组件根元素的 CSS 类名。
-const wrapperClass = computed(() => ['crud-table-wrapper', `theme-${props.theme}`, props.customClass]);
-// 为大屏主题的弹窗动态添加特定的 CSS 类名。
-const dialogClass = computed(() => props.theme === 'large-screen' ? 'large-screen-dialog' : '');
-
-// --- 4. 内部工具函数 ---
-
-/**
- * @description 验证传入的 URL prop 是否有效，无效则提示错误。
- * @param {string | undefined} url - 待验证的 URL 字符串。
- * @param {string} propName - prop 的名称，用于错误提示。
- * @returns {boolean} - URL 是否有效。
- */
-const validateUrl = (url: string | undefined, propName: string): boolean => {
-  if (!url) {
-    ElMessage.error(`${propName} prop is required.`);
-    return false;
-  }
-  return true;
-};
-
-// [新增] 抽离出核心提交逻辑，并设置为 async
-const submit = async (mode: 'add' | 'edit', data: Record<string, any>) => {
-  try {
-    // 步骤 1: 运行 onBeforeSubmit 钩子
-    let finalData = {...data};
-    if (props.onBeforeSubmit) {
-      finalData = await props.onBeforeSubmit(finalData);
-    }
-
-    // 步骤 2: 根据 submitAsFormData Prop 决定是否转换数据
-    let dataToSend: any = finalData;
-
-    if (props.submitAsFormData) {
-      const formData = new FormData();
-      for (const key in finalData) {
-        if (Object.prototype.hasOwnProperty.call(finalData, key)) {
-          const value = finalData[key];
-          formData.append(key, value ?? '');
-        }
-      }
-      dataToSend = formData;
-    }
-
-    // 步骤 3: 设置提交状态并发起请求
-    dialog.submitting = true;
-    if (mode === 'add') {
-      if (!validateUrl(props.apiUrlCreate, 'apiUrlCreate')) throw new Error('apiUrlCreate is not configured.');
-      await request.post(props.apiUrlCreate, dataToSend);
-      ElMessage.success('新增成功');
-    } else { // edit mode
-      if (!validateUrl(props.apiUrlUpdate, 'apiUrlUpdate')) throw new Error('apiUrlUpdate is not configured.');
-      await request.put(props.apiUrlUpdate, dataToSend);
-      ElMessage.success('更新成功');
-    }
-
-    // 步骤 4: 运行 onAfterSubmit 钩子并触发事件
-    if (props.onAfterSubmit) {
-      props.onAfterSubmit(mode, finalData);
-    }
-    emit('submit', {mode, data: finalData});
-
-    // 步骤 5: 清理并刷新
-    if (dialog.visible) {
-      dialog.visible = false;
-    }
-    fetchData(); // 刷新表格
-    return Promise.resolve(); // 表示成功
-  } catch (error) {
-    console.error('Submit failed:', error);
-    return Promise.reject(error); // 表示失败
-  } finally {
-    dialog.submitting = false; // 无论成功失败，都重置提交状态
-  }
-};
-
-// --- 5. 核心响应式状态 ---
-
-// 搜索表单的数据模型，使用 `initialSearchForm` 进行初始化，并包含分页参数。
-const searchForm = reactive({pageNum: 1, pageSize: 10, ...props.initialSearchForm});
-// 存储从 API 获取的表格数据。
-const tableData = ref([]);
-// 总记录数，用于分页组件。
-const total = ref(0);
-// 控制表格加载状态的 loading 指示器。
-const loading = ref(false);
-// 存储用户在表格中勾选的行数据。
-const selections = ref<any[]>([]);
-// 统一管理新增/编辑弹窗的状态，包括可见性、加载状态、提交状态、模式及表单数据。
-const dialog = reactive<{
-  visible: boolean;
-  loading: boolean;
-  submitting: boolean;
-  mode: 'add' | 'edit';
-  data: Record<string, any>;
-  formRef: any; // 存储 DynamicForm 组件的实例，用于调用其 validate 方法。
-}>({visible: false, loading: false, submitting: false, mode: 'add', data: {}, formRef: null});
-
-// --- 6. 衍生的计算属性 ---
-
-// 根据 `dialog.mode` 动态计算弹窗的标题。
-const dialogTitle = computed(() => (dialog.mode === 'add' ? '新增' : '编辑'));
-
-// 根据弹窗模式动态计算最终传递给 DynamicForm 的配置。
-const finalDialogFormConfig = computed(() => {
-  // 新增模式下，过滤掉 'id' 字段。
-  if (dialog.mode === 'add') return props.dialogFormConfig.filter(item => item.prop !== 'id');
-  // 编辑模式下，确保包含一个禁用的 'id' 输入框以便展示。
-  const editConfig = [...props.dialogFormConfig.filter(item => item.prop !== 'id')];
-  if (!editConfig.some(i => i.prop === 'id')) {
-    editConfig.unshift({type: 'input-disabled', prop: 'id', label: '用户ID'});
-  }
-  return editConfig;
-});
-
-// --- 7.核心业务方法 ---
-
-/**
- * @description 核心数据获取方法，负责请求列表数据并更新表格。
- */
-const fetchData = async () => {
-  // 校验查询 API 是否已配置
-  if (!validateUrl(props.apiUrlQuery, 'apiUrlQuery')) return;
-  loading.value = true;
-  try {
-    // 允许在请求前通过 onBeforeQuery 钩子修改参数
-    let finalParams = {...searchForm};
-    if (props.onBeforeQuery) {
-      finalParams = await props.onBeforeQuery(finalParams);
-    }
-
-    // 发起 GET 请求
-    const res: any = await request.get(props.apiUrlQuery, {params: finalParams});
-
-    // 校验返回数据格式是否符合预期 { data: { rows: [], total: number } }
-    if (res && res.data && Array.isArray(res.data.rows) && typeof res.data.total === 'number') {
-      // 允许在数据渲染前通过 onAfterQuery 钩子格式化数据
-      let processedData = res.data.rows;
-      if (props.onAfterQuery) {
-        processedData = await props.onAfterQuery(processedData);
-      }
-      tableData.value = processedData;
-      total.value = res.data.total;
-    } else {
-      console.warn('API response is not in the expected { data: { rows: [], total: 0 } } format.');
-      tableData.value = [];
-      total.value = 0;
-    }
-  } catch (error) {
-    console.error("Fetch data failed:", error);
-  } finally {
-    // 无论成功或失败，都关闭 loading 状态
-    loading.value = false;
-  }
-};
-
-/**
- * @description 处理“搜索”按钮点击事件，重置到第一页并重新获取数据。
- */
-const handleSearch = () => {
-  searchForm.pageNum = 1;
-  fetchData();
-};
-
-/**
- * @description 处理“清空”按钮点击事件，将搜索条件重置为初始状态。
- */
-const handleClearSearch = () => {
-  const {pageNum, pageSize, ...initialFilters} = props.initialSearchForm;
-  // 清空 searchForm 中除分页外的所有字段
-  Object.keys(searchForm).forEach(key => {
-    if (key !== 'pageNum' && key !== 'pageSize') delete (searchForm as any)[key];
-  });
-  // 合并初始搜索条件
-  Object.assign(searchForm, initialFilters);
-  handleSearch();
-};
-
-/**
- * @description 监听表格的多选框变化，更新 `selections` 状态。
- */
-const handleSelectionChange = (val: any[]) => {
-  selections.value = val;
-};
-
-/**
- * @description 打开新增或编辑弹窗的核心逻辑。
- * @param {'add' | 'edit'} mode - 弹窗模式。
- * @param {object} [rowData] - (编辑模式下) 当前行的数据。
- */
-const openDialog = async (mode: 'add' | 'edit', dataPayload?: any) => {
-  // 1. 定义初始数据变量
-  let initialData;
-  if (mode === 'add') {
-    // 如果是新增模式，且外部传入了数据对象，则使用它；否则使用默认值
-    initialData = dataPayload ? {...dataPayload} : {role: 'user'};
-  } else {
-    // 编辑模式下，dataPayload 就是行数据
-    initialData = {...dataPayload};
-  }
-
-  // 2. onBeforeOpenDialog 钩子仍然可以对 initialData 进行最后修改
-  if (props.onBeforeOpenDialog) {
-    const processedData = await props.onBeforeOpenDialog(mode, initialData);
-    if (processedData) initialData = processedData;
-  }
-
-  dialog.mode = mode;
-  dialog.visible = true;
-
-  // 3. 后续逻辑基本不变
-  if (mode === 'edit') {
-    if (!validateUrl(props.apiUrlDetail, 'apiUrlDetail')) return;
-    dialog.loading = true;
-    try {
-      const res: any = await request.get(props.apiUrlDetail + "/" + initialData.id.toString());
-      dialog.data = res.data.data;
-    } finally {
-      dialog.loading = false;
-      if (props.onAfterOpenDialog) {
-        props.onAfterOpenDialog(mode, dialog.data);
-      }
-      emit('open-dialog', {mode, data: dialog.data});
-    }
-  } else { // 新增模式
-    dialog.data = initialData; // 直接使用处理后的 initialData
-    if (props.onAfterOpenDialog) {
-      props.onAfterOpenDialog(mode, dialog.data);
-    }
-    emit('open-dialog', {mode, data: dialog.data});
-  }
-};
-
-/**
- * @description 处理弹窗中“确定”按钮的点击事件，负责表单校验和数据提交。
- */
-const handleDialogSubmit = async () => {
-  try {
-    if (dialog.formRef) await dialog.formRef.validate();
-
-    let finalData = {...dialog.data};
-    if (props.onBeforeSubmit) {
-      finalData = await props.onBeforeSubmit(finalData);
-    }
-
-    // --- 修改开始 ---
-
-    // 声明一个变量来存储最终要发送的数据
-    let dataToSend: any = finalData;
-
-    // 如果 submitAsFormData prop 为 true，则将数据转换为 FormData
-    if (props.submitAsFormData) {
-
-      const formData = new FormData();
-      for (const key in finalData) {
-        // 确保只添加对象自身的属性
-        if (Object.prototype.hasOwnProperty.call(finalData, key)) {
-          const value = finalData[key];
-          // FormData 可以处理 null, undefined, File 对象等
-          // 这里我们做个简单处理，如果值为 null 或 undefined，转换为空字符串
-          formData.append(key, value ?? '');
-        }
-      }
-      dataToSend = formData;
-      debugger
-
-    }
-
-    // --- 修改结束 ---
-
-    dialog.submitting = true;
-    if (dialog.mode === 'add') {
-      if (!validateUrl(props.apiUrlCreate, 'apiUrlCreate')) return;
-      // 使用 dataToSend 变量进行提交
-      await request.post(props.apiUrlCreate, dataToSend);
-      ElMessage.success('新增成功');
-    } else {
-      if (!validateUrl(props.apiUrlUpdate, 'apiUrlUpdate')) return;
-      // 使用 dataToSend 变量进行提交
-      await request.put(props.apiUrlUpdate, dataToSend);
-      ElMessage.success('更新成功');
-    }
-
-    if (props.onAfterSubmit) {
-      props.onAfterSubmit(dialog.mode, finalData); // 钩子函数仍然传递原始对象
-    }
-    emit('submit', {mode: dialog.mode, data: finalData}); // 事件仍然传递原始对象
-
-    dialog.visible = false;
-    fetchData();
-  } catch (error) {
-    console.log('Submit error or validation failed:', error);
-  } finally {
-    dialog.submitting = false;
-  }
-};
-
-/**
- * @description 处理删除操作，支持单条和批量删除。
- * @param {number[]} ids - 待删除记录的 ID 数组。
- */
-const handleDelete = async (ids: number[]) => {
-  if (!validateUrl(props.apiUrlDelete, 'apiUrlDelete')) return;
-  try {
-    // 允许通过 onBeforeDelete 钩子进行删除前的二次确认，返回 false 可中止删除。
-    if (props.onBeforeDelete) {
-      const canDelete = await props.onBeforeDelete(ids);
-      if (canDelete === false) return;
-    }
-
-    // 发起删除请求
-    const idsString = ids.join(',');
-    await request.delete(props.apiUrlDelete + "/" + idsString.toString());
-    ElMessage.success('删除成功');
-
-    // 触发删除后的钩子和事件
-    if (props.onAfterDelete) {
-      props.onAfterDelete(ids);
-    }
-    emit('delete', ids);
-
-    // 智能分页：如果删除的是当前页的全部数据且不是第一页，则自动跳转到前一页。
-    if (tableData.value.length === ids.length && searchForm.pageNum > 1) {
-      searchForm.pageNum--;
-    }
-    fetchData();
-  } catch (error) {
-    console.error('Delete failed', error);
-  }
-};
-
-// --- 8. 分页相关方法 ---
-
-/**
- * @description 处理每页显示条数（pageSize）变化的事件。
- */
-const handleSizeChange = (val: number) => {
-  searchForm.pageSize = val;
-  handleSearch();
-};
-/**
- * @description 处理当前页码（pageNum）变化的事件。
- */
-const handleCurrentChange = (val: number) => {
-  searchForm.pageNum = val;
-  fetchData();
-};
-
-// --- 9. Vue 生命周期钩子 ---
-
-// 组件挂载完成后，立即执行一次数据获取。
-onMounted(fetchData);
-
-// --- 10. 暴露给父组件的方法 ---
-// 使用 defineExpose 使父组件可以通过 ref 调用这些内部方法，实现更灵活的交互。
-defineExpose({
-  refresh: fetchData, // 刷新表格
-  search: handleSearch, // 按当前条件搜索
-  handleDelete,         // 手动触发删除
-  openDialog,           // 手动打开弹窗
-  submit                // 手动提交
-});
-</script>
-
-<style scoped>
-.crud-table-container {
-  min-width: 0;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.crud-table-container {
-  /* 1. 设置为 Flexbox 容器，并指定垂直方向 */
-  display: flex;
-  flex-direction: column;
-
-  /* 2. 关键：让组件自身高度占满其父容器 */
-  height: 100%;
-  width: 100%;
-
-  /* 3. 防止 flex 子项在内容溢出时撑开自身 (处理横向和纵向溢出) */
-  min-width: 0;
-  min-height: 0;
-
-  /* 4. 确保所有内容都在这个容器内 */
-  overflow: hidden;
-}
-
-.search-section-wrapper {
-  /* 搜索区高度由内容决定，不允许被压缩 */
-  flex-shrink: 0;
-}
-
-.table-content-wrapper {
-  /* 关键：让表格包装器占据所有剩余的垂直空间 */
-  flex: 1;
-
-  /* 关键：同样需要这个来防止子元素（el-table）在某些情况下溢出 */
-  min-height: 0;
-  overflow: hidden; /* 确保 el-table 不会溢出这个容器 */
-}
-
-.pagination-wrapper {
-  /* 分页区高度由内容决定，不允许被压缩 */
-  flex-shrink: 0;
-
-  /* 为分页器添加一些内边距，使其与表格有间距 */
-  padding-top: 1rem;
-  display: flex;
-  justify-content: flex-end;
-}
-</style>

package/src/components/DynamicForm.vue

@@ -1,65 +0,0 @@
-<template>
-  <el-form :model="modelValue" :rules="rules" ref="formRef" v-bind="$attrs">
-    <template v-for="item in formConfig" :key="item.prop">
-      <el-form-item :label="item.label" :prop="item.prop">
-        <el-input
-            v-if="item.type === 'input'"
-            v-model="modelValue[item.prop]"
-            v-bind="item.componentProps"
-        />
-        <el-input
-            v-if="item.type === 'textarea'"
-            type="textarea"
-            v-model="modelValue[item.prop]"
-            v-bind="item.componentProps"
-        />
-        <el-select
-            v-if="item.type === 'select'"
-            v-model="modelValue[item.prop]"
-            v-bind="item.componentProps"
-        >
-          <el-option
-              v-for="option in item.options"
-              :key="option.value"
-              :label="option.label"
-              :value="option.value"
-          />
-        </el-select>
-        <el-radio-group
-            v-if="item.type === 'radio-group'"
-            v-model="modelValue[item.prop]"
-            v-bind="item.componentProps"
-        >
-          <el-radio
-              v-for="option in item.options"
-              :key="option.value"
-              :label="option.value"
-          >{{ option.label }}</el-radio
-          >
-        </el-radio-group>
-        <el-input
-            v-if="item.type === 'input-disabled'"
-            :model-value="modelValue[item.prop]"
-            disabled
-            v-bind="item.componentProps"
-        />
-      </el-form-item>
-    </template>
-  </el-form>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-defineProps<{
-  modelValue: Record<string, any>;
-  formConfig: any[];
-  rules?: Record<string, any>;
-}>();
-
-const formRef = ref<any>(null);
-
-defineExpose({
-  validate: () => formRef.value?.validate(),
-});
-</script>

package/src/components/TableHeaderWithTooltip.vue

@@ -1,56 +0,0 @@
-<template>
-  <span v-if="!isOverflow" ref="textRef" class="header-cell-content">
-    {{ label }}
-  </span>
-  <el-tooltip v-else :content="label" placement="top">
-    <span ref="textRef" class="header-cell-content">
-      {{ label }}
-    </span>
-  </el-tooltip>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-// 引入 @vueuse/core 的 useResizeObserver 来监听元素尺寸变化
-import { useResizeObserver } from '@vueuse/core';
-
-// 接收父组件传来的表头标题
-const props = defineProps<{
-  label: string;
-}>();
-
-// 创建一个 ref 来引用 DOM 元素
-const textRef = ref<HTMLElement | null>(null);
-// 创建一个 ref 来存储是否溢出的状态
-const isOverflow = ref(false);
-
-// 定义一个函数来检查是否溢出
-const checkOverflow = () => {
-  if (textRef.value) {
-    // 关键逻辑：当元素的滚动宽度 > 元素的可见宽度时，即为溢出
-    isOverflow.value = textRef.value.scrollWidth > textRef.value.clientWidth;
-  }
-};
-
-// 在组件挂载后，立即执行一次检查
-onMounted(() => {
-  checkOverflow();
-});
-
-// 使用 useResizeObserver 监听元素的尺寸变化
-// 当浏览器窗口大小改变或列宽被拖动时，会自动重新检查
-useResizeObserver(textRef, () => {
-  checkOverflow();
-});
-</script>
-
-<style scoped>
-/* 确保 span 元素应用了文本溢出的基础样式 */
-.header-cell-content {
-  display: inline-block;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>