zy-react-library 1.0.0 → 1.0.2

package/components/Map/MapSelector.d.ts

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+
+export interface MapSelectorProps {
+  /** 是否显示弹窗 */
+  visible: boolean;
+  /** 关闭弹窗回调 */
+  onClose: () => void;
+  /** 经度值 */
+  longitude?: number | string;
+  /** 纬度值 */
+  latitude?: number | string;
+  /** 确认选择回调 */
+  onConfirm?: (longitude: number | string, latitude: number | string) => void;
+}
+
+declare const MapSelector: FC<MapSelectorProps>;
+
+export default MapSelector;

package/components/Map/MapSelector.js

@@ -0,0 +1,204 @@
+import { Button, Col, Form, Input, Modal, Row, Spin } from "antd";
+import { useEffect, useRef, useState } from "react";
+
+const MapSelector = ({
+                       visible,
+                       onClose,
+                       longitude,
+                       latitude,
+                       onConfirm, // 新增确认回调
+                     }) => {
+  const mapContainerRef = useRef(null);
+  const mapInstanceRef = useRef(null);
+  const [loading, setLoading] = useState(false);
+  const [currentLongitude, setCurrentLongitude] = useState(longitude || "");
+  const [currentLatitude, setCurrentLatitude] = useState(latitude || "");
+  const [localSearch, setLocalSearch] = useState("");
+
+  // 当外部经纬度变化时，更新内部状态
+  useEffect(() => {
+    setCurrentLongitude(longitude || "");
+    setCurrentLatitude(latitude || "");
+  }, [longitude, latitude]);
+
+  // 初始化地图
+  const initMap = async () => {
+    if (!window.BMapGL) {
+      console.error("BMapGL is not loaded");
+      return;
+    }
+
+    setLoading(true);
+
+    // 确保DOM已经渲染
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    if (mapContainerRef.current) {
+      // 只有在没有地图实例时才创建新地图
+      if (!mapInstanceRef.current) {
+        const map = new window.BMapGL.Map(mapContainerRef.current);
+        mapInstanceRef.current = map;
+
+        map.centerAndZoom(
+          new window.BMapGL.Point(
+            longitude || "119.69457721306945",
+            latitude || "39.940504336846665",
+          ),
+          16,
+        );
+
+        map.enableScrollWheelZoom(true);
+
+        // 如果有初始坐标，添加标记
+        if (longitude && latitude) {
+          const point = new window.BMapGL.Point(longitude, latitude);
+          const marker = new window.BMapGL.Marker(point);
+          map.addOverlay(marker);
+        }
+
+        // 添加点击事件
+        map.addEventListener("click", (event) => {
+          map.clearOverlays();
+          const point = new window.BMapGL.Point(event.latlng.lng, event.latlng.lat);
+          const marker = new window.BMapGL.Marker(point);
+          map.addOverlay(marker);
+          setCurrentLatitude(event.latlng.lat);
+          setCurrentLongitude(event.latlng.lng);
+        });
+      }
+
+      setLoading(false);
+    }
+  };
+
+  // 搜索功能
+  const handleLocalSearch = () => {
+    if (localSearch && mapInstanceRef.current) {
+      const local = new window.BMapGL.LocalSearch(mapInstanceRef.current, {
+        renderOptions: { map: mapInstanceRef.current },
+      });
+      local.search(localSearch);
+    }
+  };
+
+  // 关闭弹窗
+  const handleClose = () => {
+    setLocalSearch("");
+    if (onClose)
+      onClose();
+  };
+
+  // 确认选择
+  const handleConfirm = () => {
+    if (onConfirm) {
+      onConfirm(currentLongitude, currentLatitude);
+    }
+    handleClose();
+  };
+
+  // 监听visible变化
+  useEffect(() => {
+    let initTimer;
+
+    if (visible) {
+      // 延迟初始化地图，确保DOM完全渲染
+      initTimer = setTimeout(() => {
+        initMap();
+      }, 100);
+    }
+
+    return () => {
+      if (initTimer) {
+        clearTimeout(initTimer);
+      }
+    };
+  }, [visible]);
+
+  const handleAfterClose = () => {
+    if (mapInstanceRef.current) {
+      try {
+        mapInstanceRef.current.clearOverlays();
+        mapInstanceRef.current.destroy();
+        mapInstanceRef.current = null;
+      }
+      catch (e) {
+        console.warn("Error destroying map on unmount:", e);
+      }
+      mapInstanceRef.current = null;
+    }
+  };
+
+  // 组件卸载时清理地图
+  useEffect(() => {
+    return () => {
+      handleAfterClose();
+    };
+  }, []);
+
+  return (
+    <Modal
+      open={visible}
+      title="坐标"
+      onCancel={handleClose}
+      onOk={handleConfirm}
+      width={800}
+      destroyOnHidden={false}
+      afterClose={handleAfterClose}
+    >
+      <Form labelAlign="right" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+        <Row gutter={24}>
+          <Col span={12}>
+            <Form.Item label="关键字搜索">
+              <Input
+                value={localSearch}
+                onChange={e => setLocalSearch(e.target.value)}
+                allowClear
+              />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item label=" " colon={false}>
+              <Button type="primary" onClick={handleLocalSearch}>
+                搜索
+              </Button>
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row gutter={24}>
+          <Col span={12}>
+            <Form.Item label="经度">
+              <Input disabled value={currentLongitude} />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item label="纬度">
+              <Input disabled value={currentLatitude} />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+      <div
+        ref={mapContainerRef}
+        style={{ width: "100%", height: "500px", position: "relative" }}
+      >
+        <Spin size="large" tip="地图正在加载中..." spinning={loading}>
+          <div style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            zIndex: 1000,
+          }}
+          />
+        </Spin>
+      </div>
+    </Modal>
+  );
+};
+
+export default MapSelector;

package/components/Map/index.d.ts

@@ -0,0 +1,16 @@
+import type { FC } from "react";
+
+export interface MapProps {
+  /** 经度属性名，默认 longitude */
+  longitudeProps?: string;
+  /** 纬度属性名，默认 latitude */
+  latitudeProps?: string;
+  /** 经纬度变化回调 */
+  onConfirm?: (longitude: number | string, latitude: number | string) => void;
+  /** 经纬度是否必填，默认 true */
+  required?: boolean;
+}
+
+declare const Map: FC<MapProps>;
+
+export default Map;

package/components/Map/index.js

@@ -0,0 +1,61 @@
+import { Button, Col, Form, Input, Row } from "antd";
+import { useState } from "react";
+import MapSelector from "./MapSelector";
+
+const Map = (props) => {
+  const {
+    longitudeProps = "longitude",
+    latitudeProps = "latitude",
+    onConfirm,
+    required = true,
+  } = props;
+
+  const form = Form.useFormInstance();
+  const [mapVisible, setMapVisible] = useState(false);
+  const [currentLongitude, setCurrentLongitude] = useState(form.getFieldValue(longitudeProps) || "");
+  const [currentLatitude, setCurrentLatitude] = useState(form.getFieldValue(latitudeProps) || "");
+
+  const handleMapConfirm = (longitudeValue, latitudeValue) => {
+    setCurrentLongitude(longitudeValue);
+    setCurrentLatitude(latitudeValue);
+    form.setFieldsValue({
+      [longitudeProps]: longitudeValue,
+      [latitudeProps]: latitudeValue,
+    });
+    onConfirm?.(longitudeValue, latitudeValue);
+    setMapVisible(false);
+  };
+
+  return (
+    <>
+      <Row gutter={24}>
+        <Col span={12}>
+          <Form.Item label="经度" name={longitudeProps} style={{ flex: 1 }} rules={[{ required, message: "请选择经度" }]}>
+            <Input disabled />
+          </Form.Item>
+        </Col>
+        <Col span={12}>
+          <div style={{ display: "flex" }}>
+            <Form.Item label="纬度" name={latitudeProps} style={{ flex: 1 }} rules={[{ required, message: "请选择纬度" }]}>
+              <Input disabled />
+            </Form.Item>
+            <Form.Item label=" " colon={false}>
+              <Button type="primary" onClick={() => setMapVisible(true)}>
+                点击定位
+              </Button>
+            </Form.Item>
+          </div>
+        </Col>
+      </Row>
+      <MapSelector
+        visible={mapVisible}
+        onClose={() => setMapVisible(false)}
+        longitude={currentLongitude}
+        latitude={currentLatitude}
+        onConfirm={handleMapConfirm}
+      />
+    </>
+  );
+};
+
+export default Map;

package/components/Pdf/index.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, FC } from "react";
+
+export interface PdfProps {
+  /** pdf 文件地址 */
+  file: string;
+  /** 是否显示弹窗 */
+  visible?: boolean;
+  /** 关闭弹窗的方法 */
+  onCancel?: () => void;
+  /** 是否使用内联模式，true为不使用弹窗，默认为false */
+  inline?: boolean;
+  /** 内联模式下的样式 */
+  style?: CSSProperties;
+}
+
+declare const Pdf: FC<PdfProps>;
+
+export default Pdf;

package/components/Pdf/index.js

@@ -0,0 +1,84 @@
+import { Button, message, Modal, Spin } from "antd";
+import { useState } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import { getFileUrl } from "../../utils/index";
+
+function Pdf(props) {
+  const {
+    visible = false,
+    onCancel,
+    file,
+    inline = false,
+    style = {},
+  } = props;
+
+  const fileUrl = getFileUrl();
+  const [numPages, setNumPages] = useState(0);
+  const [pdfWidth, setPdfWidth] = useState(600);
+  const [loading, setLoading] = useState(true);
+
+  pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+    "pdfjs-dist/build/pdf.worker.min.mjs",
+    import.meta.url,
+  ).toString();
+
+  const onDocumentLoadSuccess = ({ numPages }) => {
+    setNumPages(numPages);
+    setLoading(false);
+  };
+
+  const onDocumentLoadError = () => {
+    setLoading(false);
+    message.error("加载 PDF 文件失败");
+    if (onCancel)
+      onCancel();
+  };
+
+  const onPageLoadSuccess = ({ width }) => {
+    setPdfWidth(width);
+  };
+
+  // 内联模式的PDF内容
+  const renderPdfContent = () => (
+    <>
+      {loading && (
+        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "80vh" }}>
+          <Spin size="large" />
+        </div>
+      )}
+      <div style={{ height: "88vh", overflowY: "auto", padding: "24px", ...style }}>
+        <Document
+          file={fileUrl + file}
+          onLoadSuccess={onDocumentLoadSuccess}
+          onLoadError={onDocumentLoadError}
+        >
+          {
+            Array.from({ length: numPages }).map((el, index) => (
+              <Page key={`page_${index + 1}`} pageNumber={index + 1} onLoadSuccess={onPageLoadSuccess} />
+            ))
+          }
+        </Document>
+      </div>
+    </>
+  );
+
+  // 如果是内联模式，直接返回PDF内容
+  if (inline) {
+    return renderPdfContent();
+  }
+
+  // 默认弹窗模式
+  return (
+    <Modal
+      open={visible}
+      width={pdfWidth + 100}
+      title="PDF预览"
+      onCancel={onCancel}
+      footer={<Button onClick={onCancel}>关闭</Button>}
+    >
+      {renderPdfContent()}
+    </Modal>
+  );
+}
+
+export default Pdf;

package/components/PreviewPdf/index.d.ts

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+
+export interface PreviewPdfProps {
+  /** 文件列表，和 name、url 冲突 */
+  files?: Record<string, any>[];
+  /** 文件名字段名，传入 files 时会优先查找是否存在 name、fileName  */
+  nameKey?: string;
+  /** 文件路径字段名，传入 files 时会优先查找是否存在 filePath */
+  urlKey?: string;
+  /** 单个文件名，和 files 冲突 */
+  name?: string;
+  /** 单个文件路径，和 files 冲突 */
+  url?: string;
+}
+
+declare const PreviewPdf: FC<PreviewPdfProps>;
+
+export default PreviewPdf;

package/components/PreviewPdf/index.js

@@ -0,0 +1,76 @@
+import { Button, Space } from "antd";
+import { useState } from "react";
+import Pdf from "../Pdf";
+
+const PreviewPdf = (props) => {
+  const {
+    files = [],
+    nameKey = "",
+    urlKey = "",
+    name = "",
+    url = "",
+  } = props;
+
+  const [visible, setVisible] = useState(false);
+  const [src, setSrc] = useState("");
+
+  const previewPdf = (src) => {
+    setVisible(true);
+    setSrc(src);
+  };
+
+  const onCancel = () => {
+    setVisible(false);
+    setSrc("");
+  };
+
+  // 单个文件预览模式
+  if (files.length === 0 && name && url) {
+    return (
+      <>
+        <Space>
+          <span>{name}</span>
+          <Button type="primary" size="small" onClick={() => previewPdf(url)}>
+            预览
+          </Button>
+        </Space>
+        <Pdf
+          visible={visible}
+          file={src}
+          onCancel={onCancel}
+        />
+      </>
+    );
+  }
+
+  // 多文件预览模式
+  if (files.length > 0 && !name && !url) {
+    return (
+      <>
+        {files.map(item => (
+          <div key={item.filePath || item[urlKey]} style={{ marginTop: 5 }}>
+            <Space>
+              <span>{item.name || item.fileName || item[nameKey]}</span>
+              <Button
+                type="primary"
+                size="small"
+                onClick={() => previewPdf(item.filePath || item[urlKey])}
+              >
+                预览
+              </Button>
+            </Space>
+          </div>
+        ))}
+        <Pdf
+          visible={visible}
+          file={src}
+          onCancel={onCancel}
+        />
+      </>
+    );
+  }
+
+  return null;
+};
+
+export default PreviewPdf;

package/components/Table/index.js

@@ -11,7 +11,7 @@ function TablePro(props) {
   const storeIndex = props.storeIndex || `${window.process.env.app.antd["ant-prefix"]}_${Math.random().toString(36).substring(2)}`;
   function calcColumns() {
     showIndex && columns.unshift(getIndexColumn(props.pagination));
-    return columns.map(item => ({ ...item, align: useAlignCenter ? "center" : "left" }));
+    return columns.map(item => ({ align: useAlignCenter ? "center" : "left", ...item }));
   }
   return <Table storeIndex={storeIndex} columns={calcColumns()} {...restProps} />;
 }

package/hooks/useTable/index.d.ts

@@ -13,7 +13,7 @@ export interface UseTableOptions<TData extends Data, TParams extends Params> ext
   /** 是否使用存储查询条件，默认是 */
   useStorageQueryCriteria?: boolean;
   /** 额外参数 */
-  params?: FormValues | (() => FormValues);
+  params?: Record<string, any> | (() => Record<string, any>);
   /** 表单数据转换函数，在每次请求之前调用，接收当前搜索的表单项，要求返回一个对象 */
   transform?: (formData: FormValues) => FormValues;
   /** 回调函数 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",
@@ -28,6 +28,7 @@
     "antd": "^5.27.6",
     "dayjs": "^1.11.18",
     "lodash-es": "^4.17.21",
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "react-pdf": "^10.2.0"
   }
 }