@fe-free/file 4.0.5 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @ones-wb/file
 
+## 5.0.0
+
 ## 4.0.5
 
 ## 4.0.4

package/i18next.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'i18next-cli';
+
+export default defineConfig({
+  locales: ['zh-CN', 'en-US'],
+  extract: {
+    primaryLanguage: 'zh-CN',
+    secondaryLanguages: ['en-US'],
+    input: ['./src/**/*.{js,jsx,ts,tsx}', './todo/**/*.{js,jsx,ts,tsx}'],
+    output: './src/locales/{{language}}/{{namespace}}.json',
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/file",
-  "version": "4.0.5",
+  "version": "5.0.0",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -10,17 +10,22 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.4.0",
-    "@ant-design/x": "^1.4.0",
     "classnames": "^2.5.1",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
-    "dayjs": "~1.11.10"
+    "@ant-design/x": "^1.4.0",
+    "dayjs": "~1.11.10",
+    "i18next": "^25.7.2",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next-icu": "^2.4.1",
+    "react": "^19.2.0",
+    "react-i18next": "^16.4.0"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "i18n-extract": "rm -rf ./src/locales/zh-CN && npx i18next-cli extract"
   }
 }

package/todo/import_xlsx/import_xlsx.tsx

@@ -1,159 +0,0 @@
-import type { StepsProps, UploadFile } from 'antd';
-import { Button, Modal, Steps } from 'antd';
-import React, { useCallback, useMemo, useState } from 'react';
-import { StepImport } from './step_import';
-import { StepPreview } from './step_preview';
-import { StepProcess } from './step_process';
-import './style.scss';
-import type { ImportXlsxProps, XlsxDataItem } from './types';
-
-function ImportXlsx(props: ImportXlsxProps) {
-  const { onTemplateDownload, size, onImport, onOk } = props;
-
-  const [current, setCurrent] = useState(0);
-
-  const [fileList, setFileList] = useState<UploadFile[]>([]);
-  const [xlsxData, setXlsxData] = useState<XlsxDataItem[]>([]);
-
-  const [sheetIndex, setSheetIndex] = useState(0);
-  const [headerIndex, setHeaderIndex] = useState(0);
-  const [dataStartIndex, setDataStartIndex] = useState(1);
-
-  const [status, setStatus] = useState<StepsProps['status']>(undefined);
-
-  const sheetData = xlsxData[sheetIndex];
-
-  const uploadData = useMemo(() => {
-    if (!sheetData) {
-      return;
-    }
-
-    return [sheetData.data[headerIndex], ...sheetData.data.slice(dataStartIndex)];
-  }, [dataStartIndex, headerIndex, sheetData]);
-
-  return (
-    <div className="fec-import-xlsx flex h-full flex-col gap-4">
-      <Steps
-        items={[
-          {
-            title: '上传',
-          },
-          {
-            title: '预览',
-          },
-          {
-            title: '数据导入',
-            status,
-          },
-        ]}
-        current={current}
-      />
-      <div className="flex-1 overflow-y-auto">
-        {current === 0 && (
-          <StepImport
-            fileList={fileList}
-            setFileList={setFileList}
-            setXlsxData={setXlsxData}
-            onTemplateDownload={onTemplateDownload}
-            size={size}
-          />
-        )}
-        {current === 1 && (
-          <StepPreview
-            xlsxData={xlsxData}
-            sheetIndex={sheetIndex}
-            setSheetIndex={setSheetIndex}
-            headerIndex={headerIndex}
-            setHeaderIndex={setHeaderIndex}
-            dataStartIndex={dataStartIndex}
-            setDataStartIndex={setDataStartIndex}
-          />
-        )}
-        {current === 2 && (
-          <StepProcess
-            fileList={fileList}
-            status={status}
-            setStatus={setStatus}
-            uploadData={uploadData!}
-            onImport={onImport}
-          />
-        )}
-      </div>
-      <div className="flex justify-end gap-2">
-        {current === 0 && (
-          <>
-            <Button disabled onClick={() => setCurrent(current - 1)}>
-              上一步
-            </Button>
-
-            <Button
-              type="primary"
-              disabled={!fileList.length}
-              onClick={() => setCurrent(current + 1)}
-            >
-              下一步
-            </Button>
-          </>
-        )}
-        {current === 1 && (
-          <>
-            <Button onClick={() => setCurrent(current - 1)}>上一步</Button>
-
-            <Button type="primary" onClick={() => setCurrent(current + 1)}>
-              下一步
-            </Button>
-          </>
-        )}
-        {current === 2 && (
-          <>
-            <Button onClick={() => setCurrent(current - 1)}>上一步</Button>
-
-            <Button disabled={status !== 'finish'} type="primary" onClick={onOk}>
-              导入
-            </Button>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-interface ModalImportXlsxProps extends Omit<ImportXlsxProps, 'onOk'> {
-  children: React.ReactElement;
-}
-function ModalImportXlsx(props: ModalImportXlsxProps) {
-  const [open, setOpen] = useState(false);
-  const { children, ...rest } = props;
-
-  const handleOk = useCallback(() => {
-    setOpen(false);
-  }, []);
-
-  return (
-    <>
-      {open && (
-        <Modal title="批量导入" onCancel={() => setOpen(false)} footer={null} open width={850}>
-          <div className="h-[450px]">
-            <ImportXlsx {...rest} onOk={handleOk} />
-          </div>
-        </Modal>
-      )}
-      {React.cloneElement(children, {
-        onClick: () => {
-          console.log('click');
-          setOpen(true);
-        },
-      })}
-    </>
-  );
-}
-
-function ImportXlsxButton(props: Omit<ModalImportXlsxProps, 'children'>) {
-  return (
-    <ModalImportXlsx {...props}>
-      <Button>批量导入</Button>
-    </ModalImportXlsx>
-  );
-}
-
-export { ImportXlsxButton, ModalImportXlsx };

package/todo/import_xlsx/import_xlsx_file.tsx

@@ -1,89 +0,0 @@
-import { LoadingButton } from '@fe-free/core';
-import type { UploadFile } from 'antd';
-import { Button, Modal } from 'antd';
-import React, { useState } from 'react';
-import { StepImport } from './step_import';
-import './style.scss';
-import type { ImportXlsxFileProps } from './types';
-import { EnumImportType } from './types';
-
-function ImportXlsxFile(props: ImportXlsxFileProps) {
-  const { onTemplateDownload, size, onCancel, onOk, enableImportType } = props;
-
-  const [fileList, setFileList] = useState<UploadFile[]>([]);
-
-  const [importType, setImportType] = useState<EnumImportType>(EnumImportType.FULL);
-
-  return (
-    <div className="fec-import-xlsx flex h-full flex-col gap-4">
-      <div className="flex-1 overflow-y-auto">
-        <StepImport
-          fileList={fileList}
-          setFileList={setFileList}
-          onTemplateDownload={onTemplateDownload}
-          size={size}
-          onImportType={enableImportType ? setImportType : undefined}
-        />
-      </div>
-      <div className="flex justify-end gap-2">
-        <Button onClick={() => onCancel?.()}>取消</Button>
-        <LoadingButton
-          disabled={!fileList.length}
-          type="primary"
-          onClick={() => {
-            if (enableImportType) {
-              onOk({ uploadFile: fileList[0], importType });
-            } else {
-              onOk({ uploadFile: fileList[0] });
-            }
-          }}
-        >
-          导入
-        </LoadingButton>
-      </div>
-    </div>
-  );
-}
-
-interface ModalImportXlsxFileProps extends ImportXlsxFileProps {
-  children: React.ReactElement;
-}
-function ModalImportXlsxFile(props: ModalImportXlsxFileProps) {
-  const [open, setOpen] = useState(false);
-  const { children, onOk, ...rest } = props;
-
-  return (
-    <>
-      {open && (
-        <Modal title="批量导入" onCancel={() => setOpen(false)} footer={null} open>
-          <div>
-            <ImportXlsxFile
-              {...rest}
-              onOk={async (data) => {
-                await onOk(data);
-                setOpen(false);
-              }}
-              onCancel={() => setOpen(false)}
-            />
-          </div>
-        </Modal>
-      )}
-      {React.cloneElement(children, {
-        onClick: () => {
-          console.log('click');
-          setOpen(true);
-        },
-      })}
-    </>
-  );
-}
-
-function ImportXlsxFileButton(props: Omit<ModalImportXlsxFileProps, 'children'>) {
-  return (
-    <ModalImportXlsxFile {...props}>
-      <Button>批量导入</Button>
-    </ModalImportXlsxFile>
-  );
-}
-
-export { ImportXlsxFileButton, ModalImportXlsxFile };

package/todo/import_xlsx/index.tsx

@@ -1,2 +0,0 @@
-export { ImportXlsxButton, ModalImportXlsx } from './import_xlsx';
-export { ImportXlsxFileButton, ModalImportXlsxFile } from './import_xlsx_file';

package/todo/import_xlsx/step_import.tsx

@@ -1,120 +0,0 @@
-import { Attachments } from '@ant-design/x';
-import { xlsxToJSON } from '@fe-free/file';
-import { DeleteOutlined, InboxOutlined } from '@fe-free/icons';
-import type { UploadFile } from 'antd';
-import { App, Button, Radio, Upload } from 'antd';
-import classNames from 'classnames';
-import './style.scss';
-import type { ImportXlsxProps, XlsxDataItem } from './types';
-import { EnumImportType } from './types';
-
-function ItemRender({ file, right }: { file: UploadFile; right?: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-2 rounded-md border border-01">
-      <div className="flex-1">
-        <Attachments.FileCard key={file.name} item={file} />
-      </div>
-      {right}
-    </div>
-  );
-}
-
-function StepImport({
-  fileList,
-  setFileList,
-  setXlsxData,
-  onTemplateDownload,
-  onImportType,
-  size,
-}: {
-  fileList: UploadFile[];
-  setFileList: (fileList: UploadFile[]) => void;
-  setXlsxData?: (xlsxData: XlsxDataItem[]) => void;
-  onTemplateDownload?: ImportXlsxProps['onTemplateDownload'];
-  onImportType?: (importType: EnumImportType) => void;
-  size: ImportXlsxProps['size'];
-}) {
-  const { message } = App.useApp();
-  const mbSize = size && (size / 1024 / 1024).toFixed(1);
-
-  const handleBeforeUpload = async (file: File) => {
-    if (size) {
-      if (file.size > size) {
-        message.error(`文件大小不能超过${mbSize}MB`);
-      }
-    }
-
-    if (setXlsxData) {
-      const xlsxData = await xlsxToJSON(file);
-      setXlsxData(xlsxData);
-    }
-
-    return false;
-  };
-
-  return (
-    <div
-      className={classNames('flex flex-col gap-2', 'fec-import-xlsx', {
-        'fec-import-xlsx-has-file': fileList.length > 0,
-      })}
-    >
-      {onImportType && (
-        <div className="py-4">
-          <Radio.Group
-            defaultValue={EnumImportType.FULL}
-            onChange={(event) => onImportType(event.target.value)}
-          >
-            <Radio value={EnumImportType.FULL}>全量覆盖</Radio>
-            <Radio value={EnumImportType.APPEND}>追加数据</Radio>
-          </Radio.Group>
-        </div>
-      )}
-      <Upload.Dragger
-        accept=".xlsx,.xls,.csv"
-        multiple={false}
-        pastable
-        fileList={fileList}
-        itemRender={(_, file) => (
-          <ItemRender
-            file={file}
-            right={
-              <Button
-                icon={<DeleteOutlined />}
-                type="text"
-                onClick={() => {
-                  setFileList([]);
-                }}
-              />
-            }
-          />
-        )}
-        onChange={(info) => {
-          setFileList(info.fileList);
-        }}
-        beforeUpload={handleBeforeUpload}
-      >
-        <>
-          <p className="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p className="ant-upload-text">点击上传或拖拽文档到这里</p>
-          <p className="ant-upload-hint">
-            上传一份 Excel 格式或者 CSV 格式的文档{mbSize && `，文件大小限制 ${mbSize}MB 以内`}
-          </p>
-        </>
-      </Upload.Dragger>
-
-      {onTemplateDownload && (
-        <div className="flex items-center gap-1">
-          <span>可下载模板，根据指引在模板中编辑</span>
-          <Button type="link" className="px-0" onClick={onTemplateDownload}>
-            下载模板
-          </Button>
-          <span>。</span>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export { ItemRender, StepImport };

package/todo/import_xlsx/step_preview.tsx

@@ -1,106 +0,0 @@
-import { Table } from '@fe-free/core';
-import { Select } from 'antd';
-import { isDate, range } from 'lodash-es';
-import type { XlsxDataItem } from './types';
-
-function StepPreview({
-  xlsxData,
-  sheetIndex,
-  setSheetIndex,
-  headerIndex,
-  setHeaderIndex,
-  dataStartIndex,
-  setDataStartIndex,
-}: {
-  xlsxData: XlsxDataItem[];
-  sheetIndex: number;
-  setSheetIndex: (index: number) => void;
-  headerIndex: number;
-  setHeaderIndex: (index: number) => void;
-  dataStartIndex: number;
-  setDataStartIndex: (index: number) => void;
-}) {
-  const sheetData = xlsxData[sheetIndex] || [];
-
-  const sheetOptions = xlsxData.map((item, index) => ({ label: item.name, value: index }));
-  const lineOptions = range(sheetData.data.length).map((line) => ({
-    label: `第 ${line + 1} 行`,
-    value: line,
-  }));
-
-  const columns = sheetData.data[headerIndex].map((v, index) => {
-    if (isDate(v)) {
-      return {
-        title: v.toString(),
-        dataIndex: index,
-      };
-    }
-
-    return {
-      title: v,
-      dataIndex: index,
-    };
-  });
-
-  const dataSource = sheetData.data.slice(dataStartIndex).map((item, line) => {
-    const result = {
-      id: line,
-    };
-
-    item.forEach((v, index) => {
-      if (isDate(v)) {
-        result[index] = v.toString();
-      } else {
-        result[index] = v;
-      }
-    });
-
-    return result;
-  });
-
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex gap-5">
-        <div className="flex items-center gap-2">
-          导入表
-          <Select
-            options={sheetOptions}
-            value={sheetIndex}
-            onChange={(index) => {
-              setSheetIndex(index);
-              setHeaderIndex(0);
-              setDataStartIndex(1);
-            }}
-            className="w-[150px]"
-          />
-        </div>
-        <div className="flex items-center gap-2">
-          表头
-          <Select
-            options={lineOptions}
-            value={headerIndex}
-            onChange={(index) => {
-              setHeaderIndex(index);
-              setDataStartIndex(index + 1);
-            }}
-            className="w-[150px]"
-          />
-        </div>
-        <div className="flex items-center gap-2">
-          数据起始行
-          <Select
-            options={lineOptions}
-            value={dataStartIndex}
-            onChange={(index) => {
-              setDataStartIndex(index);
-            }}
-            className="w-[150px]"
-          />
-        </div>
-      </div>
-      <Table columns={columns} dataSource={dataSource} pagination={false} />
-    </div>
-  );
-}
-
-export { StepPreview };

package/todo/import_xlsx/step_process.tsx

@@ -1,75 +0,0 @@
-import { LoadingButton } from '@fe-free/core';
-import { CheckOutlined, LoadingOutlined } from '@fe-free/icons';
-import type { StepsProps, UploadFile } from 'antd';
-import { Button } from 'antd';
-import { useEffect } from 'react';
-import { ItemRender } from './step_import';
-import type { ImportXlsxProps } from './types';
-
-function StepProcess({
-  fileList,
-  status,
-  setStatus,
-  uploadData,
-  onImport,
-}: {
-  fileList: UploadFile[];
-  status: StepsProps['status'];
-  setStatus: (status: StepsProps['status']) => void;
-  uploadData: any[][];
-  onImport: ImportXlsxProps['onImport'];
-}) {
-  const handleImport = async () => {
-    setStatus('process');
-    try {
-      const records: Record<string, any>[] = [];
-      const fields = uploadData[0];
-      uploadData.slice(1).forEach((record) => {
-        const recordObj: Record<string, any> = {};
-        record.forEach((cell, index) => {
-          recordObj[fields[index]] = cell;
-        });
-        records.push(recordObj);
-      });
-
-      await onImport(records);
-      setStatus('finish');
-    } catch (error) {
-      setStatus('error');
-      throw error;
-    }
-  };
-
-  let right;
-  if (status === 'process') {
-    right = (
-      <Button icon={<LoadingOutlined />} type="text">
-        导入中
-      </Button>
-    );
-  } else if (status === 'finish') {
-    right = (
-      <Button icon={<CheckOutlined />} type="text">
-        导入完成
-      </Button>
-    );
-  } else if (status === 'error') {
-    right = (
-      <LoadingButton type="text" danger onClick={() => handleImport()}>
-        重新导入
-      </LoadingButton>
-    );
-  }
-
-  useEffect(() => {
-    handleImport();
-  }, []);
-
-  return (
-    <div>
-      <ItemRender file={fileList[0]} right={right} />
-    </div>
-  );
-}
-
-export { StepProcess };

package/todo/import_xlsx/style.scss

@@ -1,12 +0,0 @@
-.fec-import-xlsx {
-  &.fec-import-xlsx-has-file {
-    .ant-upload-drag {
-      display: none;
-    }
-  }
-
-  .ant-attachment-list-card {
-    width: auto;
-    background-color: white;
-  }
-}

package/todo/import_xlsx/types.ts

@@ -1,37 +0,0 @@
-import type { UploadFile } from 'antd';
-
-export enum EnumImportType {
-  FULL = 'Full',
-  APPEND = 'Append',
-}
-
-interface XlsxDataItem {
-  name: string;
-  data: any[][];
-}
-
-interface ImportXlsxProps {
-  /** 点击 下载模板 */
-  onTemplateDownload?: () => void;
-  /** 文件大小限制 */
-  size?: number;
-  /** 导入数据 API */
-  onImport: (data: Record<string, any>[]) => Promise<void>;
-  /** 最后的确认 */
-  onOk: () => void;
-}
-
-interface ImportXlsxFileProps {
-  /** 点击 下载模板 */
-  onTemplateDownload?: () => void;
-  /** 文件大小限制 */
-  size?: number;
-  /** 导入文件 */
-  onOk: (data: { uploadFile: UploadFile; importType?: EnumImportType }) => Promise<void>;
-  /** 取消 */
-  onCancel?: () => void;
-  /** 是否显示导入类型 */
-  enableImportType?: boolean;
-}
-
-export type { ImportXlsxFileProps, ImportXlsxProps, XlsxDataItem };