aldehyde 0.2.490 → 0.2.491

package/src/aldehyde/controls/direct-file-view/index.tsx

@@ -1,147 +1,147 @@
-import React, { useEffect, useState } from 'react'
-import { Button, Col, Image, Row, Space } from 'antd'
-import DrawerFileView from './drawer-file-view'
-import { FieldConfig, CommonFilePath } from "../../tmpl/interface";
-import { DownloadOutlined, PlayCircleOutlined } from '@ant-design/icons';
-import HCService from "../../tmpl/hcservice-v3";
-import Player from "griffith";
-import Units from "../../units";
-
-// 不得已而为之
-const Player1: any = Player;
-
-export interface FileViewProps {
-    fieldConfig: FieldConfig,
-    serverKey?: string,
-    downloadable?: boolean,
-    value: any
-};
-
-interface OssConfig {
-    accessKeySecret: string;
-    bucket: string;
-    endpoint: string;
-    protocol: string;
-}
-
-const Index = (props: FileViewProps) => {
-    const { downloadable = true, fieldConfig: { serverKey }, value } = props;
-    const [filePaths, setFilePaths] = useState<CommonFilePath[]>([]);
-    const [playing, setPlaying] = useState<boolean>(false);
-    const [ossConfig, setOssConfig] = useState<OssConfig>();
-
-    useEffect(() => {
-        if (serverKey) {
-            const { accessKeySecret, bucket, endpoint, protocol } = Units.getExtendServers(serverKey) || {};
-            bucket && endpoint && setOssConfig({ accessKeySecret, bucket, endpoint, protocol });
-        }
-    }, [serverKey]);
-
-    // 处理文件路径,多文件使用,分割
-    const handleFilePaths = (val: string) => {
-        if (!val) {
-            return [];
-        }
-        const filePaths = val.split(",")?.map(url => {
-            // 地址存在关系字段则去掉
-            let lastIndex = url.lastIndexOf("@R@");
-            let temUrl = lastIndex !== -1 ? url.substring(lastIndex + 3) : url;
-            if (url.startsWith("http")) {
-                temUrl = url;
-            } else if (ossConfig) {
-                temUrl = `${ossConfig.protocol || "http"}://${ossConfig.bucket}.${ossConfig.endpoint}/${temUrl}`;
-            } else { // 无oss配置时，使用本地地址
-                temUrl = Units.joinPath(Units.api(serverKey), `/v3/local-files?path=${temUrl}`);
-                const path = HCService.getFileUrl(serverKey, temUrl);
-                const fileName = HCService.getFileNameFrom(url);
-                const contentType = HCService.getFileSuffixFrom(fileName);
-                return { path, contentType, fileName: decodeURIComponent(fileName) };
-            }
-            const item = HCService.toFilePath(temUrl, serverKey);
-            return { ...item, fileName: decodeURIComponent(item.fileName) };
-        }) || [];
-        return filePaths;
-    }
-
-    const handleValue = (val: string | string[]) => {
-        if (!val) {
-            return;
-        }
-        let filePaths = [];
-        if (Array.isArray(val)) { // 兼容数据为数组的情况
-            filePaths = val.map(r => handleFilePaths(r)).flat();
-        } else {
-            filePaths = handleFilePaths(val);
-        }
-        setFilePaths(filePaths);
-    };
-
-    useEffect(() => {
-        handleValue(value);
-    }, [value, ossConfig]);
-
-    const download = (filePath: CommonFilePath) => {
-        const time = new Date().getTime(); // 音视频等文件下载时需要加上时间戳，(音视频播放会占用oss网络通道，导致下载失败)
-        Units.downloadFile(`${filePath.path}?t=${time}`, filePath.fileName);
-    };
-
-    const packFile2Show = (filePath: CommonFilePath) => {
-        if (filePath) {
-            if (["new", "delete"].includes(filePath.valid)) {
-                return filePath.fileName === "new" ? filePath.fileName : undefined;
-            }
-            if (['png', 'jpg', 'jpeg', 'gif', 'PNG', 'JPG', 'JPEG', 'GIF', 'svg', 'SVG'].includes(filePath.contentType)) {
-                return <Image
-                    width={90}
-                    src={filePath.iconPath ? filePath.iconPath : filePath.path}
-                    preview={{ src: filePath.path }}
-                />
-            } else if (['mp4', 'MP4', 'mov', 'MOV', 'avi', 'AVI', 'WMV', 'wmv', "wav", "WAV"].includes(filePath.contentType)) {
-                let sources = {
-                    ld: {
-                        play_url: filePath.path,
-                    }
-                }
-                return (<Row>
-                    {playing ?
-                        <Col style={{ height: '60px', maxWidth: "400px" }} span={downloadable ? 21 : 24}>
-                            <Player1 locale={'zh-Hans'} autoplay={true} sources={sources} id={filePath.fileName} />
-                        </Col> : <Col >
-                            <Button type={"link"} onClick={() => setPlaying(true)}
-                                icon={<PlayCircleOutlined />}>{'播放'}</Button>
-                        </Col>
-                    }
-                    {downloadable ?
-                        <Col span={3} style={{ display: 'flex', alignItems: 'center' }}>
-                            <Button type={'text'} style={{ marginLeft: "2px" }} onClick={() => download(filePath)} icon={<DownloadOutlined />} />
-                        </Col> : null
-                    }
-                </Row>)
-            } else if (['xlsx', 'docx', 'csv', 'webm', 'bmp'].includes(filePath.contentType)) {
-                return <DrawerFileView serverKey={serverKey} filePath={filePath}
-                    downloadable={downloadable}></DrawerFileView>
-            } else if (['pdf', 'txt'].includes(filePath.contentType)) {
-                return <span className='labelcss'>
-                    <Button type={'link'} onClick={() => download(filePath)} size="small" style={{ margin: 0 }}>{filePath.fileName}</Button>
-                    {downloadable ? <Button type={'text'} onClick={() => download(filePath)} size="small"><DownloadOutlined /></Button> : null}
-                </span>
-            } else {
-                return <Space className='labelcss' size={1}>
-                    {downloadable ? <><Button type={'link'} onClick={() => download(filePath)} size="small" style={{ margin: 0 }}>{filePath.fileName}</Button>
-                        <Button type={'text'} onClick={() => download(filePath)} size="small" icon={<DownloadOutlined />}></Button></> :
-                        <Button type={'text'} size="small">{filePath.fileName}</Button>}
-                </Space>
-            }
-        } else {
-            return undefined;
-        }
-    }
-
-    return filePaths.length > 1 ?
-        <Space wrap={true}>
-            {filePaths.map(filePath => packFile2Show(filePath))}
-        </Space> :
-        packFile2Show(filePaths[0]);
-};
-
-export default Index;
+import React, { useEffect, useState } from 'react'
+import { Button, Col, Image, Row, Space } from 'antd'
+import DrawerFileView from './drawer-file-view'
+import { FieldConfig, CommonFilePath } from "../../tmpl/interface";
+import { DownloadOutlined, PlayCircleOutlined } from '@ant-design/icons';
+import HCService from "../../tmpl/hcservice-v3";
+import Player from "griffith";
+import Units from "../../units";
+
+// 不得已而为之
+const Player1: any = Player;
+
+export interface FileViewProps {
+    fieldConfig: FieldConfig,
+    serverKey?: string,
+    downloadable?: boolean,
+    value: any
+};
+
+interface OssConfig {
+    accessKeySecret: string;
+    bucket: string;
+    endpoint: string;
+    protocol: string;
+}
+
+const Index = (props: FileViewProps) => {
+    const { downloadable = true, fieldConfig: { serverKey }, value } = props;
+    const [filePaths, setFilePaths] = useState<CommonFilePath[]>([]);
+    const [playing, setPlaying] = useState<boolean>(false);
+    const [ossConfig, setOssConfig] = useState<OssConfig>();
+
+    useEffect(() => {
+        if (serverKey) {
+            const { accessKeySecret, bucket, endpoint, protocol } = Units.getExtendServers(serverKey) || {};
+            bucket && endpoint && setOssConfig({ accessKeySecret, bucket, endpoint, protocol });
+        }
+    }, [serverKey]);
+
+    // 处理文件路径,多文件使用,分割
+    const handleFilePaths = (val: string) => {
+        if (!val) {
+            return [];
+        }
+        const filePaths = val.split(",")?.map(url => {
+            // 地址存在关系字段则去掉
+            let lastIndex = url.lastIndexOf("@R@");
+            let temUrl = lastIndex !== -1 ? url.substring(lastIndex + 3) : url;
+            if (url.startsWith("http")) {
+                temUrl = url;
+            } else if (ossConfig) {
+                temUrl = `${ossConfig.protocol || "http"}://${ossConfig.bucket}.${ossConfig.endpoint}/${temUrl}`;
+            } else { // 无oss配置时，使用本地地址
+                temUrl = Units.joinPath(Units.api(serverKey), `/v3/local-files?path=${temUrl}`);
+                const path = HCService.getFileUrl(serverKey, temUrl);
+                const fileName = HCService.getFileNameFrom(url);
+                const contentType = HCService.getFileSuffixFrom(fileName);
+                return { path, contentType, fileName: decodeURIComponent(fileName) };
+            }
+            const item = HCService.toFilePath(temUrl, serverKey);
+            return { ...item, fileName: decodeURIComponent(item.fileName) };
+        }) || [];
+        return filePaths;
+    }
+
+    const handleValue = (val: string | string[]) => {
+        if (!val) {
+            return;
+        }
+        let filePaths = [];
+        if (Array.isArray(val)) { // 兼容数据为数组的情况
+            filePaths = val.map(r => handleFilePaths(r)).flat();
+        } else {
+            filePaths = handleFilePaths(val);
+        }
+        setFilePaths(filePaths);
+    };
+
+    useEffect(() => {
+        handleValue(value);
+    }, [value, ossConfig]);
+
+    const download = (filePath: CommonFilePath) => {
+        const time = new Date().getTime(); // 音视频等文件下载时需要加上时间戳，(音视频播放会占用oss网络通道，导致下载失败)
+        Units.downloadFile(`${filePath.path}?t=${time}`, filePath.fileName);
+    };
+
+    const packFile2Show = (filePath: CommonFilePath) => {
+        if (filePath) {
+            if (["new", "delete"].includes(filePath.valid)) {
+                return filePath.fileName === "new" ? filePath.fileName : undefined;
+            }
+            if (['png', 'jpg', 'jpeg', 'gif', 'PNG', 'JPG', 'JPEG', 'GIF', 'svg', 'SVG'].includes(filePath.contentType)) {
+                return <Image
+                    width={90}
+                    src={filePath.iconPath ? filePath.iconPath : filePath.path}
+                    preview={{ src: filePath.path }}
+                />
+            } else if (['mp4', 'MP4', 'mov', 'MOV', 'avi', 'AVI', 'WMV', 'wmv', "wav", "WAV"].includes(filePath.contentType)) {
+                let sources = {
+                    ld: {
+                        play_url: filePath.path,
+                    }
+                }
+                return (<Row>
+                    {playing ?
+                        <Col style={{ height: '60px', maxWidth: "400px" }} span={downloadable ? 21 : 24}>
+                            <Player1 locale={'zh-Hans'} autoplay={true} sources={sources} id={filePath.fileName} />
+                        </Col> : <Col >
+                            <Button type={"link"} onClick={() => setPlaying(true)}
+                                icon={<PlayCircleOutlined />}>{'播放'}</Button>
+                        </Col>
+                    }
+                    {downloadable ?
+                        <Col span={3} style={{ display: 'flex', alignItems: 'center' }}>
+                            <Button type={'text'} style={{ marginLeft: "2px" }} onClick={() => download(filePath)} icon={<DownloadOutlined />} />
+                        </Col> : null
+                    }
+                </Row>)
+            } else if (['xlsx', 'docx', 'csv', 'webm', 'bmp'].includes(filePath.contentType)) {
+                return <DrawerFileView serverKey={serverKey} filePath={filePath}
+                    downloadable={downloadable}></DrawerFileView>
+            } else if (['pdf', 'txt'].includes(filePath.contentType)) {
+                return <span className='labelcss'>
+                    <Button type={'link'} onClick={() => download(filePath)} size="small" style={{ margin: 0 }}>{filePath.fileName}</Button>
+                    {downloadable ? <Button type={'text'} onClick={() => download(filePath)} size="small"><DownloadOutlined /></Button> : null}
+                </span>
+            } else {
+                return <Space className='labelcss' size={1}>
+                    {downloadable ? <><Button type={'link'} onClick={() => download(filePath)} size="small" style={{ margin: 0 }}>{filePath.fileName}</Button>
+                        <Button type={'text'} onClick={() => download(filePath)} size="small" icon={<DownloadOutlined />}></Button></> :
+                        <Button type={'text'} size="small">{filePath.fileName}</Button>}
+                </Space>
+            }
+        } else {
+            return undefined;
+        }
+    }
+
+    return filePaths.length > 1 ?
+        <Space wrap={true}>
+            {filePaths.map(filePath => packFile2Show(filePath))}
+        </Space> :
+        packFile2Show(filePaths[0]);
+};
+
+export default Index;

package/src/aldehyde/controls/direct-upload/index.tsx

@@ -1,141 +1,141 @@
-import React, { useState, useContext, useEffect, useRef } from "react";
-import { Upload as AntdUpload, UploadFile, message, Button } from "antd";
-import { RcFile } from "antd/es/upload";
-import { UploadOutlined } from "@ant-design/icons";
-import OSS from "ali-oss";
-import dayjs from "dayjs";
-import { LocaleContext } from "../../locale/LocaleProvider";
-import Units from "../../units";
-
-const fileNameRegex = /([^\/?#]+)(?:[?#].*)?$/;
-
-export interface UploadProps {
-  disabled?: boolean;
-  value?: string;
-  onChange?: (data: string) => void;
-  id?: string;
-  max?: number;
-  fieldConfig?: { serverKey?: string; };
-}
-
-interface OssConfig {
-  accessKeyId: string;
-  accessKeySecret: string;
-  bucket: string;
-  endpoint: string;
-  protocol: string;
-}
-
-const Index: React.FC<UploadProps> = (props) => {
-  const { onChange, disabled, value, id, fieldConfig: { serverKey }, max: maxCount = 1 } = props;
-  const { translate } = useContext(LocaleContext);
-  const [fileList, setFileList] = useState([]);
-  const clientRef = useRef(null);
-  const [ossConfig, setOssConfig] = useState<OssConfig>();
-
-
-  useEffect(() => {
-    if (serverKey) {
-      const { accessKeyId, accessKeySecret, bucket, endpoint, protocol } = Units.getExtendServers(serverKey) || {};
-      setOssConfig({ accessKeyId, accessKeySecret, bucket, endpoint, protocol });
-      if (accessKeyId && accessKeySecret && bucket && endpoint) {
-        clientRef.current = new OSS({ accessKeyId, accessKeySecret, bucket, endpoint });
-      }
-    }
-  }, [serverKey]);
-
-  // 处理value,上传多文件时，value使用逗号隔开
-  const handleValue = (val: string) => {
-    const urls = val.split(",");
-    const fileList: UploadFile[] = urls.map(url => {
-      const temUrl = url.startsWith("http") ? url : `${ossConfig.protocol || "http"}://${ossConfig.bucket}.${ossConfig.endpoint}/${url}`;
-      const name = temUrl.match(fileNameRegex)?.[1];
-      return { uid: temUrl, name: decodeURIComponent(name || ""), status: 'done', url: temUrl }
-    });
-    setFileList(fileList);
-  }
-
-
-  useEffect(() => {
-    if (ossConfig && value) {
-      handleValue(value);
-    }
-  }, [value, ossConfig])
-
-  // 自定义上传
-  const customRequest = async ({ file, onProgress, onSuccess, onError }: any) => {
-    try {
-      const programCode = Units.programCode();
-      const fileName = `/${programCode}/${dayjs().format("YYYY-MM-DD")}/${file.name}`;
-      // 上传文件到 OSS
-      const result = await clientRef.current.put(fileName, file, {
-        progress: (p) => { onProgress({ percent: p * 100 }); },
-      });
-      onSuccess(result, file);
-      // 返回文件URL
-      return {
-        url: result.url,
-        name: file.name,
-        status: 'done',
-      };
-    } catch (error) {
-      onError(error);
-      console.error(error);
-    }
-  };
-
-  const beforeUpload = async (file: RcFile) => {
-    if (file.size > 200 * 1024 * 1024) {
-      message.error(translate("${超过200M限制 不允许上传~}"), 5);
-      return false;
-    }
-    if (!clientRef.current) {
-      message.error(translate("${请配置OSS服务}"));
-      return false;
-    }
-    return true;
-  }
-
-  const handleChange = async (info) => {
-    switch (info.file.status) {
-      case "done":
-        message.success(`${info.file.name} ${translate("${上传成功}")}`);
-        const url = info.file.response.url;
-        const pathName = new URL(url).pathname.slice(1);
-        onChange(value ? `${value},${pathName}` : pathName);
-        break;
-      case "removed":
-        onChange(fileList.filter(item => item.uid !== info.file.uid).map(item => item.url.startsWith("http") ? new URL(item.url).pathname.slice(1) : item.url).join(","));
-        break;
-      case "error":
-        message.error(`${info.file.name} ${translate("${上传异常}")}`);
-        break;
-      default:
-        break;
-    }
-    setFileList(info.fileList);
-  };
-
-  return (
-    <AntdUpload
-      id={id}
-      maxCount={maxCount}
-      fileList={fileList?.length ? fileList : undefined}
-      disabled={disabled}
-      customRequest={customRequest}
-      beforeUpload={beforeUpload}
-      onChange={handleChange}
-    >
-      {fileList && fileList.length >= maxCount ? (
-        ""
-      ) : (
-        <Button disabled={disabled}>
-          <UploadOutlined />
-          {disabled ? translate("${无需上传}") : translate("${上传文件}")}
-        </Button>
-      )}
-    </AntdUpload>
-  )
-};
-
+import React, { useState, useContext, useEffect, useRef } from "react";
+import { Upload as AntdUpload, UploadFile, message, Button } from "antd";
+import { RcFile } from "antd/es/upload";
+import { UploadOutlined } from "@ant-design/icons";
+import OSS from "ali-oss";
+import dayjs from "dayjs";
+import { LocaleContext } from "../../locale/LocaleProvider";
+import Units from "../../units";
+
+const fileNameRegex = /([^\/?#]+)(?:[?#].*)?$/;
+
+export interface UploadProps {
+  disabled?: boolean;
+  value?: string;
+  onChange?: (data: string) => void;
+  id?: string;
+  max?: number;
+  fieldConfig?: { serverKey?: string; };
+}
+
+interface OssConfig {
+  accessKeyId: string;
+  accessKeySecret: string;
+  bucket: string;
+  endpoint: string;
+  protocol: string;
+}
+
+const Index: React.FC<UploadProps> = (props) => {
+  const { onChange, disabled, value, id, fieldConfig: { serverKey }, max: maxCount = 1 } = props;
+  const { translate } = useContext(LocaleContext);
+  const [fileList, setFileList] = useState([]);
+  const clientRef = useRef(null);
+  const [ossConfig, setOssConfig] = useState<OssConfig>();
+
+
+  useEffect(() => {
+    if (serverKey) {
+      const { accessKeyId, accessKeySecret, bucket, endpoint, protocol } = Units.getExtendServers(serverKey) || {};
+      setOssConfig({ accessKeyId, accessKeySecret, bucket, endpoint, protocol });
+      if (accessKeyId && accessKeySecret && bucket && endpoint) {
+        clientRef.current = new OSS({ accessKeyId, accessKeySecret, bucket, endpoint });
+      }
+    }
+  }, [serverKey]);
+
+  // 处理value,上传多文件时，value使用逗号隔开
+  const handleValue = (val: string) => {
+    const urls = val.split(",");
+    const fileList: UploadFile[] = urls.map(url => {
+      const temUrl = url.startsWith("http") ? url : `${ossConfig.protocol || "http"}://${ossConfig.bucket}.${ossConfig.endpoint}/${url}`;
+      const name = temUrl.match(fileNameRegex)?.[1];
+      return { uid: temUrl, name: decodeURIComponent(name || ""), status: 'done', url: temUrl }
+    });
+    setFileList(fileList);
+  }
+
+
+  useEffect(() => {
+    if (ossConfig && value) {
+      handleValue(value);
+    }
+  }, [value, ossConfig])
+
+  // 自定义上传
+  const customRequest = async ({ file, onProgress, onSuccess, onError }: any) => {
+    try {
+      const programCode = Units.programCode();
+      const fileName = `/${programCode}/${dayjs().format("YYYY-MM-DD")}/${file.name}`;
+      // 上传文件到 OSS
+      const result = await clientRef.current.put(fileName, file, {
+        progress: (p) => { onProgress({ percent: p * 100 }); },
+      });
+      onSuccess(result, file);
+      // 返回文件URL
+      return {
+        url: result.url,
+        name: file.name,
+        status: 'done',
+      };
+    } catch (error) {
+      onError(error);
+      console.error(error);
+    }
+  };
+
+  const beforeUpload = async (file: RcFile) => {
+    if (file.size > 200 * 1024 * 1024) {
+      message.error(translate("${超过200M限制 不允许上传~}"), 5);
+      return false;
+    }
+    if (!clientRef.current) {
+      message.error(translate("${请配置OSS服务}"));
+      return false;
+    }
+    return true;
+  }
+
+  const handleChange = async (info) => {
+    switch (info.file.status) {
+      case "done":
+        message.success(`${info.file.name} ${translate("${上传成功}")}`);
+        const url = info.file.response.url;
+        const pathName = new URL(url).pathname.slice(1);
+        onChange(value ? `${value},${pathName}` : pathName);
+        break;
+      case "removed":
+        onChange(fileList.filter(item => item.uid !== info.file.uid).map(item => item.url.startsWith("http") ? new URL(item.url).pathname.slice(1) : item.url).join(","));
+        break;
+      case "error":
+        message.error(`${info.file.name} ${translate("${上传异常}")}`);
+        break;
+      default:
+        break;
+    }
+    setFileList(info.fileList);
+  };
+
+  return (
+    <AntdUpload
+      id={id}
+      maxCount={maxCount}
+      fileList={fileList?.length ? fileList : undefined}
+      disabled={disabled}
+      customRequest={customRequest}
+      beforeUpload={beforeUpload}
+      onChange={handleChange}
+    >
+      {fileList && fileList.length >= maxCount ? (
+        ""
+      ) : (
+        <Button disabled={disabled}>
+          <UploadOutlined />
+          {disabled ? translate("${无需上传}") : translate("${上传文件}")}
+        </Button>
+      )}
+    </AntdUpload>
+  )
+};
+
 export default Index;