zy-react-library 1.3.0 → 1.3.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.3.0",
+  "version": "1.3.2",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",

package/components/DragTableBuilder/DragTableBuilder.js

@@ -1 +0,0 @@
-import{useState as e,useCallback as t}from"react";import{message as i,Modal as l,Space as n,Button as o,Row as d,Col as r}from"antd";import{CopyOutlined as a,ExportOutlined as s,Html5Outlined as c,ClearOutlined as p}from"@ant-design/icons";import{DndContext as b}from"../../node_modules/@dnd-kit/core/dist/core.esm";import{arrayMove as h}from"../../node_modules/@dnd-kit/sortable/dist/sortable.esm";import m from"./FieldLibrary.js";import f from"./DropZone.js";import g from"./FieldConfigEditor.js";import u from"./TablePreview.js";import"../../src/components/DragTableBuilder/DragTableBuilder.less";import{jsxs as x,jsx as y}from"react/jsx-runtime";const w=[{type:"text",label:"文本",icon:"T"},{type:"number",label:"数字",icon:"#"},{type:"date",label:"日期",icon:"📅"},{type:"datetime",label:"日期时间",icon:"🕐"},{type:"select",label:"下拉选择",icon:"▼"},{type:"boolean",label:"布尔值",icon:"☑"},{type:"email",label:"邮箱",icon:"✉"},{type:"url",label:"链接",icon:"🔗"},{type:"image",label:"图片",icon:"🖼"},{type:"tag",label:"标签",icon:"🏷"},{type:"progress",label:"进度条",icon:"▓"},{type:"rate",label:"评分",icon:"★"}],v=v=>{const{fieldTypes:k=w,initialFields:C=[],onChange:T,onExport:L,showPreview:$=!0,showLibrary:E=!0,showConfigEditor:j=!0}=v,[I,D]=e(C),[M,R]=e(null),[_,F]=e(!1),H=t(()=>`field_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,[]),O=t(e=>{const{active:t,over:i}=e;if(i&&t.id!==i.id){const e=I.findIndex(e=>e.id===t.id),l=I.findIndex(e=>e.id===i.id),n=h(I,e,l);D(n),T&&T(n)}},[I,T]),U=t(e=>{const t=I.filter(t=>t.id!==e);D(t),T&&T(t)},[I,T]),B=t(e=>{R(e),F(!0)},[]),N=t(e=>{const t=I.map(t=>t.id===e.id?e:t);D(t),F(!1),R(null),T&&T(t),i.success("字段配置已保存")},[I,T]),S=t(()=>{F(!1),R(null)},[]),P=t(()=>{l.confirm({title:"确认清空",content:"确定要清空所有字段吗？",onOk:()=>{D([]),T&&T([]),i.success("已清空所有字段")}})},[T]),z=t(()=>{const e=I.map(e=>({title:e.title,dataIndex:e.dataIndex,width:e.width,align:e.align,fixed:e.fixed,ellipsis:e.ellipsis,sorter:!1!==e.sortable})),t=JSON.stringify(e,null,2);navigator.clipboard.writeText(t).then(()=>{i.success("配置已复制到剪贴板")}).catch(()=>{i.error("复制失败")})},[I]),J=t(()=>{const e=I.map(e=>({title:e.title,dataIndex:e.dataIndex,width:e.width,align:e.align,fixed:e.fixed,ellipsis:e.ellipsis,sorter:!1!==e.sortable}));L?L(e):(console.log("导出的表格配置:",e),i.success("配置已导出到控制台"))},[I,L]),Z=t(()=>{let e=`<table style="width: ${I.reduce((e,t)=>e+(t.width||150),0)}px; border-collapse: collapse; font-size: 13px;">\n`;return e+="  <thead>\n",e+="    <tr>\n",I.forEach(t=>{const i=t.align||"center";e+=`      <th style="width: ${t.width||150}px; text-align: ${i}; padding: 8px 12px; border: 1px solid #f0f0f0; background: #fafafa; font-weight: 600;">${t.title||t.label}</th>\n`}),e+="    </tr>\n",e+="  </thead>\n",e+="  <tbody>\n",e+="    <tr>\n",I.forEach(t=>{const i=t.align||"center";e+=`      <td style="width: ${t.width||150}px; text-align: ${i}; padding: 8px 12px; border: 1px solid #f0f0f0;">数据示例</td>\n`}),e+="    </tr>\n",e+="  </tbody>\n",e+="</table>",e},[I]),q=t(()=>{const e=Z();navigator.clipboard.writeText(e).then(()=>{i.success("HTML代码已复制到剪贴板")}).catch(()=>{i.error("复制失败")})},[Z]),A=t(()=>{const e=Z(),t=new Blob([e],{type:"text/html"}),l=URL.createObjectURL(t),n=document.createElement("a");n.href=l,n.download="table.html",document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(l),i.success("HTML文件已导出")},[Z]),G=t(e=>{const t={id:H(),type:e.type,label:e.label,title:e.label,dataIndex:`field_${I.length+1}`,width:150,align:"center",ellipsis:!0,sortable:!0},l=[...I,t];D(l),T&&T(l),i.success(`已添加${e.label}字段`)},[I,H,T]);return x("div",{className:"drag-table-builder",children:[y("div",{className:"builder-header",children:x(n,{wrap:!0,children:[y(o,{icon:y(a,{}),onClick:z,disabled:0===I.length,children:"复制配置"}),y(o,{icon:y(s,{}),onClick:J,disabled:0===I.length,children:"导出配置"}),y(o,{icon:y(c,{}),onClick:q,disabled:0===I.length,children:"复制HTML"}),y(o,{icon:y(c,{}),onClick:A,disabled:0===I.length,children:"导出HTML"}),y(o,{icon:y(p,{}),onClick:P,disabled:0===I.length,danger:!0,children:"清空"})]})}),y(b,{onDragEnd:O,children:x(d,{gutter:16,children:[E&&y(r,{span:6,children:y(m,{fields:k,onFieldClick:G})}),x(r,{span:E?18:24,children:[y(f,{fields:I,onRemove:U,onEdit:B}),$&&y("div",{style:{marginTop:16},children:y(u,{fields:I})})]})]})}),j&&y(g,{visible:_,field:M,onSave:N,onCancel:S})]})};export{v as default};

package/components/DragTableBuilder/DragTableBuilder.less

@@ -1,8 +0,0 @@
-.drag-table-builder {
-  .builder-header {
-    margin-bottom: 16px;
-    padding: 12px;
-    background: #f5f5f5;
-    border-radius: 6px;
-  }
-}

package/components/DragTableBuilder/DropZone.js

@@ -1 +0,0 @@
-import{DeleteOutlined as e}from"@ant-design/icons";import{SortableContext as i,verticalListSortingStrategy as t,useSortable as n}from"../../node_modules/@dnd-kit/sortable/dist/sortable.esm";import{CSS as s}from"../../node_modules/@dnd-kit/utilities/dist/utilities.esm";import{Card as a,Empty as d}from"antd";import"../../src/components/DragTableBuilder/DropZone.less";import{jsx as o,jsxs as l}from"react/jsx-runtime";const r=({field:i,onRemove:t,onEdit:a})=>{const{attributes:d,listeners:r,setNodeRef:c,transform:m,transition:p,isDragging:f}=n({id:i.id}),h={transform:s.Transform.toString(m),transition:p,opacity:f?.5:1};return o("div",{ref:c,style:h,...d,...r,className:"sortable-field",children:l("div",{className:"field-content",children:[o("span",{className:"drag-handle",children:"⋮⋮"}),o("span",{className:"field-title",children:i.title||i.label}),o("span",{className:"field-dataindex",children:i.dataIndex||"未设置"}),l("div",{className:"field-actions",children:[o("span",{className:"action-btn edit-btn",onClick:e=>{e.stopPropagation(),a(i)},children:"编辑"}),o("span",{className:"action-btn delete-btn",onClick:e=>{e.stopPropagation(),t(i.id)},children:o(e,{})})]})]})})},c=({fields:e,onRemove:n,onEdit:s,children:l})=>o("div",{className:"drop-zone",children:o(a,{title:"表格字段",size:"small",className:"drop-zone-card",children:0===e.length?o(d,{description:"从左侧点击字段添加到此处",image:d.PRESENTED_IMAGE_SIMPLE}):o(i,{items:e.map(e=>e.id),strategy:t,children:o("div",{className:"field-list",children:e.map(e=>o(r,{field:e,onRemove:n,onEdit:s},e.id))})})})});export{c as default};

package/components/DragTableBuilder/DropZone.less

@@ -1,80 +0,0 @@
-.drop-zone {
-  .drop-zone-card {
-    min-height: 400px;
-
-    .field-list {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-  }
-
-  .sortable-field {
-    cursor: move;
-    transition: all 0.3s;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    padding: 8px 12px;
-    background: #fff;
-
-    &:hover {
-      border-color: #1890ff;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .field-content {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-
-      .drag-handle {
-        cursor: move;
-        color: #999;
-        font-size: 12px;
-        letter-spacing: -2px;
-      }
-
-      .field-title {
-        flex: 1;
-        font-weight: 500;
-        color: #333;
-      }
-
-      .field-dataindex {
-        color: #999;
-        font-size: 12px;
-        font-family: monospace;
-      }
-
-      .field-actions {
-        display: flex;
-        gap: 8px;
-        margin-left: auto;
-
-        .action-btn {
-          cursor: pointer;
-          font-size: 12px;
-          padding: 2px 8px;
-          border-radius: 3px;
-          transition: all 0.3s;
-
-          &.edit-btn {
-            color: #1890ff;
-
-            &:hover {
-              background: #e6f7ff;
-            }
-          }
-
-          &.delete-btn {
-            color: #ff4d4f;
-
-            &:hover {
-              background: #fff1f0;
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/components/DragTableBuilder/FieldConfigEditor.js

@@ -1 +0,0 @@
-import{Select as e,Input as l,Form as i,Modal as a,Space as t,InputNumber as r,Switch as d}from"antd";import{useEffect as n}from"react";import"../../src/components/DragTableBuilder/FieldConfigEditor.less";import{jsx as s,jsxs as o}from"react/jsx-runtime";const{Option:c}=e,{TextArea:h}=l,m=({visible:m,field:u,onSave:p,onCancel:x})=>{const[b]=i.useForm();return n(()=>{m&&u&&b.setFieldsValue({title:u.title||u.label||"",dataIndex:u.dataIndex||"",width:u.width||150,align:u.align||"center",fixed:u.fixed||void 0,ellipsis:void 0===u.ellipsis||u.ellipsis,sortable:void 0===u.sortable||u.sortable,render:u.render||""})},[m,u,b]),s(a,{title:"编辑字段配置",open:m,onOk:()=>{b.validateFields().then(e=>{const l={...u,title:e.title,dataIndex:e.dataIndex,width:e.width,align:e.align,fixed:e.fixed||void 0,ellipsis:e.ellipsis,sortable:e.sortable,render:e.render};p(l)})},onCancel:x,width:600,okText:"保存",cancelText:"取消",children:o(i,{form:b,layout:"vertical",className:"field-config-form",children:[s(i.Item,{label:"列标题",name:"title",rules:[{required:!0,message:"请输入列标题"}],children:s(l,{placeholder:"请输入列标题"})}),s(i.Item,{label:"数据字段名",name:"dataIndex",rules:[{required:!0,message:"请输入数据字段名"}],children:s(l,{placeholder:"请输入数据字段名（如：name, age等）"})}),o(t,{style:{width:"100%"},size:"large",children:[s(i.Item,{label:"列宽度",name:"width",initialValue:150,children:s(r,{min:50,max:1e3,style:{width:120}})}),s(i.Item,{label:"对齐方式",name:"align",initialValue:"center",children:o(e,{style:{width:120},children:[s(c,{value:"left",children:"左对齐"}),s(c,{value:"center",children:"居中"}),s(c,{value:"right",children:"右对齐"})]})})]}),o(t,{style:{width:"100%"},size:"large",children:[s(i.Item,{label:"固定列",name:"fixed",children:o(e,{placeholder:"不固定",style:{width:120},allowClear:!0,children:[s(c,{value:"left",children:"左侧固定"}),s(c,{value:"right",children:"右侧固定"})]})}),s(i.Item,{label:"超长省略",name:"ellipsis",valuePropName:"checked",initialValue:!0,children:s(d,{})}),s(i.Item,{label:"可排序",name:"sortable",valuePropName:"checked",initialValue:!0,children:s(d,{})})]}),s(i.Item,{label:"自定义渲染函数（可选）",name:"render",extra:"请输入函数体，如：return text + '元'",children:s(h,{rows:3,placeholder:"可选：输入自定义渲染函数的函数体"})})]})})};export{m as default};

package/components/DragTableBuilder/FieldConfigEditor.less

@@ -1,5 +0,0 @@
-.field-config-form {
-  .ant-form-item {
-    margin-bottom: 16px;
-  }
-}

package/components/DragTableBuilder/FieldLibrary.js

@@ -1 +0,0 @@
-import{Card as l,Tag as e}from"antd";import"../../src/components/DragTableBuilder/FieldLibrary.less";import{jsx as i,jsxs as a}from"react/jsx-runtime";const c=({field:l,onClick:c})=>i("div",{className:"clickable-field",onClick:()=>c(l),children:a(e,{color:"blue",className:"field-tag",children:[l.icon&&i("span",{className:"field-icon",children:l.icon}),i("span",{className:"field-label",children:l.label})]})}),s=({fields:e,onFieldClick:a})=>i("div",{className:"field-library",children:i(l,{title:"字段库",size:"small",className:"field-library-card",children:i("div",{className:"field-list",children:e.map(l=>i(c,{field:l,onClick:a},l.type))})})});export{s as default};

package/components/DragTableBuilder/FieldLibrary.less

@@ -1,37 +0,0 @@
-.field-library {
-  .field-library-card {
-    min-height: 400px;
-
-    .field-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-  }
-
-  .clickable-field {
-    cursor: pointer;
-    transition: all 0.3s;
-
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    }
-
-    .field-tag {
-      margin: 0;
-      padding: 4px 12px;
-      font-size: 14px;
-      cursor: pointer;
-      user-select: none;
-
-      .field-icon {
-        margin-right: 4px;
-      }
-
-      .field-label {
-        font-weight: 500;
-      }
-    }
-  }
-}

package/components/DragTableBuilder/TablePreview.js

@@ -1 +0,0 @@
-import{Card as e,Empty as t}from"antd";import"../../src/components/DragTableBuilder/TablePreview.less";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({fields:a,dataSource:l})=>{const n=l||(0===a.length?[]:Array.from({length:3},(e,t)=>{const r={};return a.forEach(e=>{const i=e.dataIndex;if(i)switch(e.type){case"text":r[i]=`示例文本${t+1}`;break;case"number":r[i]=Math.floor(1e3*Math.random());break;case"date":r[i]="2024-01-01";break;case"datetime":r[i]="2024-01-01 12:00:00";break;case"select":r[i]=t%2==0?"选项1":"选项2";break;case"boolean":r[i]=t%2==0?"是":"否";break;case"email":r[i]=`example${t}@test.com`;break;case"url":r[i]=`https://example.com/${t}`;break;default:r[i]=`数据${t+1}`}}),r})),s=a.reduce((e,t)=>e+(t.width||150),0);return r("div",{className:"table-preview",children:r(e,{title:"表格预览",size:"small",className:"preview-card",children:0===a.length?r(t,{description:"暂无数据，请先添加字段",image:t.PRESENTED_IMAGE_SIMPLE}):r("div",{className:"native-table-container",children:i("table",{className:"native-table",style:{width:s},children:[r("thead",{children:r("tr",{children:a.map(e=>r("th",{style:{width:e.width||150,textAlign:e.align||"center",position:e.fixed?"sticky":"static",left:"left"===e.fixed?0:"auto",right:"right"===e.fixed?0:"auto",zIndex:e.fixed?2:1},children:e.title||e.label},e.id))})}),r("tbody",{children:n.map((e,t)=>r("tr",{children:a.map(i=>{const a=e[i.dataIndex],l=((e,t,r,i)=>{if(e.render)try{return new Function("text","record","index",e.render)(t,r,i)}catch(e){return console.error("渲染函数执行错误:",e),t}return t})(i,a,e,t);return r("td",{style:{width:i.width||150,textAlign:i.align||"center",overflow:!1!==i.ellipsis?"hidden":"visible",textOverflow:!1!==i.ellipsis?"ellipsis":"clip",whiteSpace:!1!==i.ellipsis?"nowrap":"normal"},title:!1!==i.ellipsis?a:void 0,children:l},i.id)})},t))})]})})})})};export{a as default};

package/components/DragTableBuilder/TablePreview.less

@@ -1,69 +0,0 @@
-.table-preview {
-  .preview-card {
-    .native-table-container {
-      overflow-x: auto;
-      overflow-y: auto;
-      max-height: 300px;
-      border: 1px solid #f0f0f0;
-      border-radius: 4px;
-    }
-
-    .native-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 13px;
-      background: #fff;
-
-      thead {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        background: #fafafa;
-      }
-
-      th {
-        padding: 8px 12px;
-        font-weight: 600;
-        color: rgba(0, 0, 0, 0.88);
-        background: #fafafa;
-        border: 1px solid #f0f0f0;
-        white-space: nowrap;
-
-        &[style*="position: sticky"] {
-          background: #fafafa;
-          z-index: 2;
-        }
-      }
-
-      tbody {
-        tr {
-          transition: background 0.3s;
-
-          &:hover {
-            background: #fafafa;
-          }
-
-          &:nth-child(even) {
-            background: #fafafa;
-          }
-
-          &:hover:nth-child(even) {
-            background: #f0f0f0;
-          }
-        }
-      }
-
-      td {
-        padding: 8px 12px;
-        color: rgba(0, 0, 0, 0.88);
-        border: 1px solid #f0f0f0;
-        background: #fff;
-
-        &[style*="position: sticky"] {
-          background: #fff;
-          z-index: 1;
-        }
-      }
-    }
-  }
-}

package/components/DragTableBuilder/index.d.ts

@@ -1,71 +0,0 @@
-import type { FC, ReactNode } from "react";
-import type { ColumnsType } from "antd/es/table";
-
-/**
- * 字段类型定义
- */
-export interface FieldType {
-  /** 字段类型标识 */
-  type: string;
-  /** 字段显示名称 */
-  label: string;
-  /** 字段图标 */
-  icon?: string;
-}
-
-/**
- * 表格字段配置
- */
-export interface TableField {
-  /** 字段唯一标识 */
-  id: string;
-  /** 字段类型 */
-  type: string;
-  /** 字段标签 */
-  label: string;
-  /** 列标题 */
-  title: string;
-  /** 数据字段名 */
-  dataIndex: string;
-  /** 列宽度 */
-  width?: number;
-  /** 对齐方式 */
-  align?: "left" | "center" | "right";
-  /** 固定列 */
-  fixed?: "left" | "right";
-  /** 超长省略 */
-  ellipsis?: boolean;
-  /** 可排序 */
-  sortable?: boolean;
-  /** 自定义渲染函数 */
-  render?: string;
-}
-
-/**
- * DragTableBuilder 组件属性
- */
-export interface DragTableBuilderProps {
-  /** 可用字段类型列表 */
-  fieldTypes?: FieldType[];
-  /** 初始字段列表 */
-  initialFields?: TableField[];
-  /** 字段列表变化回调 */
-  onChange?: (fields: TableField[]) => void;
-  /** 导出配置回调 */
-  onExport?: (config: ColumnsType<any>) => void;
-  /** 是否显示预览区域 */
-  showPreview?: boolean;
-  /** 是否显示字段库 */
-  showLibrary?: boolean;
-  /** 是否显示配置编辑器 */
-  showConfigEditor?: boolean;
-  /** 自定义预览数据 */
-  dataSource?: any[];
-}
-
-/**
- * 拖拽式表格构建器组件
- */
-declare const DragTableBuilder: FC<DragTableBuilderProps>;
-
-export default DragTableBuilder;

package/components/DragTableBuilder/index.js

@@ -1 +0,0 @@
-import r from"./DragTableBuilder.js";export{r as default};