@hsu-react/ui 0.0.1

package/src/components/FilePreview/_hooks/useXlsxData.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { read, WorkBook } from "xlsx";
+
+interface UseXlsxDataProps {
+  fileType?: string;
+  fileUrl?: string;
+}
+
+/**
+ * 加载并解析 xlsx 文件
+ */
+export function useXlsxData({ fileType, fileUrl }: UseXlsxDataProps) {
+  const [xlsxData, setXlsxData] = useState<WorkBook | undefined>(undefined);
+
+  useEffect(() => {
+    if (fileType === "xlsx" && fileUrl) {
+      fetch(fileUrl)
+        .then((res) => res.arrayBuffer())
+        .then((buffer) => {
+          const workbook = read(buffer);
+          setXlsxData(workbook);
+        });
+    }
+  }, [fileType, fileUrl]);
+
+  return xlsxData;
+}

package/src/components/FilePreview/_utils/index.ts

@@ -0,0 +1,2 @@
+export { FilePreviewTypeArr } from "./types";
+export type { FilePreviewType } from "./types";

package/src/components/FilePreview/_utils/types.ts

@@ -0,0 +1,23 @@
+export type FilePreviewType =
+  | "mp4"
+  | "pdf"
+  | "jpg"
+  | "jpeg"
+  | "png"
+  | "gif"
+  | "txt"
+  | "md"
+  | "xlsx"
+  | string;
+
+export const FilePreviewTypeArr: string[] = [
+  "mp4",
+  "pdf",
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+  "txt",
+  "md",
+  "xlsx",
+];

package/src/components/FilePreview/index.md

@@ -0,0 +1,17 @@
+---
+nav: 组件
+group:
+  title: 数据展示
+  order: 4
+title: FilePreview 文件预览
+---
+
+# FilePreview 文件预览
+
+> `FilePreview` 组件。完整 API 见源码类型定义，下方为基础用法。
+
+## 引入
+
+```ts
+import { FilePreview } from "@hsu-react/ui";
+```

package/src/components/FilePreview/index.module.less

@@ -0,0 +1,89 @@
+.FilePreview {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+  padding: 0px 1rem;
+
+  background-color: rgba(0, 0, 0, 0.45);
+
+  z-index: 1200;
+
+  .close {
+    position: absolute;
+    right: 32px;
+    top: 32px;
+    z-index: 999;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 45px;
+    height: 45px;
+
+    border-radius: 50%;
+
+    background-color: rgba(0, 0, 0, 0.1);
+
+    color: #fff;
+    font-size: 20px;
+
+    cursor: pointer;
+
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .video {
+    width: 100%;
+    max-width: 1300px;
+    max-height: 90%;
+  }
+
+  .ppt {
+    width: 100%;
+    max-width: 1300px;
+    height: 90%;
+    max-height: fit-content;
+
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+
+    width: 100%;
+    max-width: 1300px;
+    height: 90%;
+    max-height: fit-content;
+    padding: 20px;
+
+    border-radius: 4px;
+
+    background-color: #fff;
+
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: #fff;
+    }
+  }
+}

package/src/components/FilePreview/index.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import PdfPreview from "./_components/PdfPreview";
+import VideoPreview from "./_components/VideoPreview";
+import TextPreview from "./_components/TextPreview";
+import MarkdownPreview from "./_components/MarkdownPreview";
+import ImagePreview from "./_components/ImagePreview";
+import XlsxPreview from "./_components/XlsxPreview";
+import { useXlsxData } from "./_hooks";
+import { FilePreviewType, FilePreviewTypeArr } from "./_utils";
+
+export type { FilePreviewType };
+export { FilePreviewTypeArr };
+
+interface FilePreviewProps {
+  fileUrl?: string;
+  fileType?: FilePreviewType;
+  fileName?: string;
+  open?: boolean;
+  onClose?: () => void;
+  text?: string;
+  className?: string;
+  pagination?: boolean;
+}
+
+const FilePreview: React.FC<FilePreviewProps> = (props) => {
+  const { fileUrl, fileType, open, onClose, text, className, pagination } =
+    props;
+  const xlsxData = useXlsxData({ fileType, fileUrl });
+
+  if (!open) {
+    return null;
+  }
+
+  switch (fileType) {
+    case "mp4": {
+      return (
+        <VideoPreview
+          fileUrl={fileUrl}
+          onClose={onClose}
+          className={className}
+        />
+      );
+    }
+    case "pdf": {
+      return (
+        <PdfPreview
+          fileUrl={fileUrl}
+          open={open}
+          onClose={onClose}
+          className={className}
+          pagination={pagination}
+        />
+      );
+    }
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif": {
+      return (
+        <ImagePreview
+          fileUrl={fileUrl}
+          onClose={onClose}
+          className={className}
+        />
+      );
+    }
+    case "txt": {
+      return (
+        <TextPreview text={text} onClose={onClose} className={className} />
+      );
+    }
+    case "md": {
+      return (
+        <MarkdownPreview text={text} onClose={onClose} className={className} />
+      );
+    }
+    case "xlsx": {
+      return (
+        <XlsxPreview
+          xlsxData={xlsxData}
+          onClose={onClose}
+          className={className}
+        />
+      );
+    }
+    default: {
+      return null;
+    }
+  }
+};
+
+export default FilePreview;

package/src/components/FlexFill/index.md

@@ -0,0 +1,17 @@
+---
+nav: 组件
+group:
+  title: 布局
+  order: 2
+title: FlexFill 自适应填充
+---
+
+# FlexFill 自适应填充
+
+> `FlexFill` 组件。完整 API 见源码类型定义，下方为基础用法。
+
+## 引入
+
+```ts
+import { FlexFill } from "@hsu-react/ui";
+```

package/src/components/FlexFill/index.tsx

@@ -0,0 +1,38 @@
+import React, { CSSProperties } from "react";
+
+interface VarCSSProperties {
+  [key: string]: string | number;
+}
+
+type FlexFillCSSProperties = VarCSSProperties & CSSProperties;
+
+interface FProps {
+  width?: string;
+  className?: string;
+  style?: FlexFillCSSProperties;
+}
+
+const FlexFill: React.FC<FProps> = (props) => {
+  const { width, className, style } = props;
+
+  return (
+    <>
+      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]?.map((item) => {
+        return (
+          <div
+            key={item}
+            style={{
+              display: "inline-block",
+              width: width ?? "100%",
+              height: "0.1px",
+              ...style,
+            }}
+            className={className}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export default FlexFill;

package/src/components/Form/DrawerForm/index.module.less

@@ -0,0 +1,51 @@
+.DrawerForm {
+  .ant-drawer-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    cursor: default;
+
+    > span {
+      display: flex;
+      align-items: center;
+      column-gap: 5px;
+
+      font-weight: normal;
+
+      opacity: 0.5;
+
+      cursor: pointer;
+    }
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    align-items: center;
+
+    .form {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 2%;
+      row-gap: 20px;
+
+      width: 100%;
+
+      .formItem {
+        width: calc((100% - 2%) / 2);
+      }
+    }
+
+    .btns {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+
+      .ant-btn-icon {
+        font-size: 16px;
+      }
+    }
+  }
+}

package/src/components/Form/DrawerForm/index.tsx

@@ -0,0 +1,135 @@
+import Button, { ButtonProps } from "../../Button";
+import { Drawer, DrawerProps, Form, FormInstance } from "antd";
+import FormItem, {
+  PlaceholderDict,
+  PlaceholderDictEn,
+  FormItemProps,
+} from "../../FormItem";
+import React, { useEffect } from "react";
+
+import Icon from "../../Icon";
+import { ItemContainerProps } from "../../FormItem/ItemContainer";
+import classNames from "classnames";
+import styles from "./index.module.less";
+import useLabelWidth from "../../../hooks/useLabelWidth";
+import usePermissions from "../../../hooks/usePermissions";
+
+export type ExtraFormItem = React.ReactElement<ItemContainerProps>;
+
+export interface DrawerFormProps extends Omit<DrawerProps, "onClose"> {
+  formItems?: FormItemProps[];
+  extraFormItems?: ExtraFormItem[];
+  externalForm?: FormInstance;
+  value?: Record<string, unknown>;
+  hasPermi?: string[];
+  buttonGroup?: ButtonProps[];
+  onClose?: () => void;
+  reset?: boolean;
+}
+
+const DrawerForm: React.FC<DrawerFormProps> = (props) => {
+  const {
+    formItems,
+    extraFormItems,
+    externalForm,
+    className,
+    value,
+    open,
+    hasPermi,
+    buttonGroup = [],
+    onClose,
+    reset = true,
+    title,
+    ...drawerConfig
+  } = props;
+  const { header, body, footer, mask, content, wrapper } =
+    drawerConfig.classNames ?? {};
+  const [form] = Form.useForm(externalForm);
+  const [labelWidth] = useLabelWidth(formItems);
+  const { permitted } = usePermissions(hasPermi);
+
+  useEffect(() => {
+    if (!value || !form || !open || !reset) return;
+    form.resetFields();
+    form.setFieldsValue(value);
+  }, [form, value, open, reset]);
+
+  const _onClose = () => {
+    onClose?.();
+    if (!form || !reset) return;
+    form.resetFields();
+  };
+
+  if (!permitted) {
+    return null;
+  }
+
+  return (
+    <Drawer
+      open={open}
+      className={classNames(styles.DrawerForm, className)}
+      classNames={{
+        header: `${header ?? ""}`,
+        body: `${styles.body} ${body ?? ""}`,
+        footer: `${footer ?? ""}`,
+        mask: `${mask ?? ""}`,
+        content: `${content ?? ""}`,
+        wrapper: `${wrapper ?? ""}`,
+      }}
+      width={500}
+      closable={false}
+      title={
+        <>
+          {title}
+          <span className={styles.close} onClick={_onClose}>
+            <Icon icon="icon-park-outline:right-c" />
+            收起
+          </span>
+        </>
+      }
+      {...drawerConfig}
+    >
+      <Form form={form} className={styles.form}>
+        {formItems?.map((item) => (
+          <FormItem
+            key={item.name}
+            requiredMsg={
+              (item.name as string)?.endsWith("En")
+                ? `${PlaceholderDictEn[item.type]} ${item.name}`
+                : `${PlaceholderDict[item.type]}${item.label}`
+            }
+            labelWidth={item.layout === "horizontal" ? labelWidth : undefined}
+            className={classNames(styles.formItem, item.className)}
+            {...item}
+          />
+        ))}
+        {extraFormItems?.map((item) => {
+          item = {
+            ...item,
+            key: item.props.name,
+            props: {
+              labelWidth:
+                item.props.layout === "horizontal" ? labelWidth : undefined,
+              ...item.props,
+            },
+          };
+
+          return item;
+        })}
+      </Form>
+      {buttonGroup?.length && (
+        <div className={styles.btns}>
+          {buttonGroup?.map((btn) => {
+            return (
+              <Button key={btn.title} {...btn} className={styles.btn}>
+                {btn.title}
+              </Button>
+            );
+          })}
+        </div>
+      )}
+    </Drawer>
+  );
+};
+
+export default DrawerForm;

package/src/components/Form/ImportForm/index.module.less

@@ -0,0 +1,10 @@
+.ImportForm {
+  .body {
+    height: max-content;
+    min-height: max-content;
+  }
+
+  .form {
+    padding: 12px 0px;
+  }
+}

package/src/components/Form/ImportForm/index.tsx

@@ -0,0 +1,129 @@
+import { Form, notification } from "antd";
+import FormItem, {
+  PlaceholderDict,
+  PlaceholderDictEn,
+  FormItemProps,
+} from "../../FormItem";
+
+import React from "react";
+import { UploadProps } from "../../FormItem/FormUpload";
+import { downloadFile } from "hsu-utils";
+import { get } from "../../../request";
+import { observer } from "mobx-react-lite";
+import styles from "./index.module.less";
+import useLabelWidth from "../../../hooks/useLabelWidth";
+import usePermissions from "../../../hooks/usePermissions";
+import Modal, { ModalProps } from "../../Modal";
+import { FileRes } from "../../../request";
+
+export interface ImportFormProps extends Omit<ModalProps, "onCancel" | "onOk"> {
+  open?: boolean;
+  title?: string;
+  onCancel?: () => void;
+  uploadAction?: string;
+  template?: string;
+  templateName?: string;
+  hasPermi?: string[];
+  formClassName?: string;
+  formItemClassName?: string;
+  uploadProps?: UploadProps;
+}
+
+const ImportForm: React.FC<ImportFormProps> = observer((props) => {
+  const {
+    open,
+    uploadAction,
+    template,
+    templateName = "",
+    className,
+    classNames = {},
+    formClassName,
+    formItemClassName,
+    hasPermi,
+    uploadProps,
+    ...modalConfig
+  } = props;
+  const { header, body, footer, mask, content, wrapper } = classNames;
+  const { permitted } = usePermissions(hasPermi);
+
+  const onExport = () => {
+    if (!template) return;
+    get<FileRes>(template, { responseType: "arraybuffer" }).then((res) => {
+      downloadFile(res.data.data, res.data.filename || templateName);
+    });
+  };
+
+  const formItems: FormItemProps[] = [
+    {
+      type: "FILE",
+      label: "上传文件",
+      name: "file",
+      extra: template ? (
+        <a
+          onClick={(e) => {
+            e.preventDefault();
+            onExport();
+          }}
+        >
+          点击下载导入模板
+        </a>
+      ) : undefined,
+      componentProps: {
+        accept: ".xlsx",
+        onUploadSuccess: () => {
+          notification.success({ message: "导入成功" });
+        },
+        maxCount: 1,
+        inline: true,
+        action: uploadAction,
+        showUploadList: false,
+        ...uploadProps,
+      },
+    },
+  ];
+
+  const [labelWidth] = useLabelWidth(formItems);
+
+  if (!permitted) {
+    return null;
+  }
+
+  return (
+    <Modal
+      open={open}
+      centered
+      className={`${styles.ImportForm} ${className ?? ""}`}
+      width={600}
+      classNames={{
+        header: `${header ?? ""}`,
+        body: `${styles.body} ${body ?? ""}`,
+        footer: `${footer ?? ""}`,
+        mask: `${mask ?? ""}`,
+        content: `${content ?? ""}`,
+        wrapper: `${wrapper ?? ""}`,
+      }}
+      maskClosable={false}
+      footer={false}
+      {...modalConfig}
+    >
+      <Form className={`${styles.form} ${formClassName ?? ""}`}>
+        {formItems?.map((item) => (
+          <FormItem
+            key={item.name}
+            requiredMsg={
+              item.requiredMsg ??
+              ((item.name as string)?.endsWith("En")
+                ? `${PlaceholderDictEn[item.type]} ${item.name}`
+                : `${PlaceholderDict[item.type]}${item.label}`)
+            }
+            labelWidth={labelWidth}
+            className={`${formItemClassName} ${item.className}`}
+            {...item}
+          />
+        ))}
+      </Form>
+    </Modal>
+  );
+});
+
+export default ImportForm;