@zjlab-fe/data-hub-ui 0.21.6 → 0.22.0

package/es/components/FileUploader/utils/fileDB/deleteObjectStore.js

@@ -0,0 +1,25 @@
+import { __awaiter } from 'tslib';
+import { CURRENT_DATABASE_CONNECTION, DATABASE_NAME } from './index.js';
+
+function deleteObjectStore(storeName) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const newVersion = CURRENT_DATABASE_CONNECTION.version + 1;
+        CURRENT_DATABASE_CONNECTION.close();
+        return new Promise((resolve, reject) => {
+            const openRequest = window.indexedDB.open(DATABASE_NAME, newVersion);
+            openRequest.onupgradeneeded = () => {
+                const db = openRequest.result;
+                if (db.objectStoreNames.contains(storeName)) {
+                    db.deleteObjectStore(storeName);
+                }
+            };
+            openRequest.onsuccess = () => {
+                openRequest.result.close();
+                resolve();
+            };
+            openRequest.onerror = () => reject(openRequest.error);
+        });
+    });
+}
+
+export { deleteObjectStore };

package/es/components/FileUploader/utils/fileDB/index.js

@@ -0,0 +1,77 @@
+import 'tslib';
+
+/**
+ * IndexedDB 是一个底层的 API，用于在客户端存储大量的结构化数据。
+ * 它是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。
+ *
+ * 事务是一组原子性的数据库操作，具有以下特点(ACID):
+ * 1. 原子性(Atomicity): 事务中的所有操作要么全部成功，要么全部失败回滚
+ * 2. 一致性(Consistency): 事务执行前后数据库必须处于一致状态
+ * 3. 隔离性(Isolation): 多个事务并发执行时不会相互影响
+ * 4. 持久性(Durability): 事务一旦提交，其结果就是永久性的
+ *
+ * 一致状态（Consistency）是指数据库在事务执行前后都必须满足预定的规则和约束条件，保持数据的完整性和有效性。
+ *
+ * 在 IndexedDB 中:
+ * - 所有数据操作都必须在事务中进行
+ * - 事务可以是只读或读写的
+ * - 事务有自动提交和回滚机制
+ * - 事务具有作用域，只能访问指定的对象仓库
+ *
+ * 基本概念:
+ * - Database: 数据库
+ * - ObjectStore: 对象仓库，类似于关系型数据库中的表
+ * - Index: 索引，用于加快数据检索
+ * - Transaction: 事务，确保数据操作的原子性
+ * - Cursor: 游标，用于遍历数据
+ *
+ * 主要 API:
+ * 1. 打开数据库:
+ *    const request = indexedDB.open(dbName, version)
+ *
+ * 2. 创建对象仓库:
+ *    db.createObjectStore(storeName, { keyPath: 'id' })
+ *
+ * 3. 事务操作:
+ *    const transaction = db.transaction([storeName], 'readwrite')
+ *    const store = transaction.objectStore(storeName)
+ *
+ * 4. 数据操作:
+ *    - 添加: store.add(data)
+ *    - 获取: store.get(key)
+ *    - 更新: store.put(data)
+ *    - 删除: store.delete(key)
+ *
+ * 5. 索引操作:
+ *    - 创建: store.createIndex(indexName, keyPath)
+ *    - 使用: store.index(indexName).get(value)
+ *
+ * KeyPath 说明:
+ * - keyPath 是对象仓库中用于唯一标识记录的属性路径
+ * - 它类似于关系型数据库中的主键(Primary Key)
+ * - keyPath 可以是:
+ *   1. 简单字符串: { keyPath: 'id' }
+ *      示例数据: { id: 1, name: 'file1' }
+ *
+ *   2. 点符号路径: { keyPath: 'user.id' }
+ *      示例数据: { user: { id: 1 }, name: 'file1' }
+ *
+ *   3. 数组路径: { keyPath: ['userId', 'timestamp'] }
+ *      示例数据: { userId: 1, timestamp: 123456, name: 'file1' }
+ *
+ * - 如果不指定 keyPath，可以使用自动生成的键:
+ *   db.createObjectStore(storeName, { autoIncrement: true })
+ *
+ * - keyPath 的值必须是:
+ *   - 唯一的
+ *   - 非空的
+ *   - 可以是数字、字符串或日期类型
+ *   - 不能是数组或对象类型（除非是复合键）
+ */
+const DATABASE_NAME = 'uploadStore';
+let CURRENT_DATABASE_CONNECTION;
+function updateUploadsDatabase(db) {
+    CURRENT_DATABASE_CONNECTION = db;
+}
+
+export { CURRENT_DATABASE_CONNECTION, DATABASE_NAME, updateUploadsDatabase };

package/es/components/FileUploader/utils/fileDB/openDBAndRetrieveData.js

@@ -0,0 +1,90 @@
+import { DATABASE_NAME, updateUploadsDatabase, CURRENT_DATABASE_CONNECTION } from './index.js';
+import { retrieveExistingData } from './retrieveExistingData.js';
+
+/**
+ * IndexedDB 数据库操作说明：
+ *
+ * 1. 版本升级机制
+ *    - 每个数据库都有一个版本号，用于管理数据库结构的变化
+ *    - 当需要修改数据库结构（如添加/删除对象仓库）时，必须升级数据库版本
+ *    - 版本号必须递增，不能降级或重用相同版本号
+ *
+ * 2. 升级流程
+ *    - 首先关闭现有数据库连接
+ *    - 使用新版本号打开数据库，触发 onupgradeneeded 事件
+ *    - 在 onupgradeneeded 事件中进行数据库结构修改（这是唯一可以修改数据库结构的地方）
+ *
+ * 3. 注意事项
+ *    - 升级过程中需要处理各种错误情况（如被阻塞、升级失败等）
+ *    - 需要监听 versionchange 事件，确保数据库连接正确关闭
+ *    - 建议在升级完成后重新检查对象仓库是否创建成功
+ *
+ * 4. 事件执行顺序
+ *    - 当打开数据库时：
+ *      a. 如果数据库不需要升级：直接触发 onsuccess
+ *      b. 如果数据库需要升级：
+ *         1. 先触发 onupgradeneeded（在此事件中修改数据库结构）
+ *         2. 再触发 onsuccess（表示数据库打开成功）
+ *    - 错误处理：
+ *      - onerror：在任何阶段发生错误时触发
+ *      - onblocked：当其他标签页正在使用旧版本数据库时触发
+ */
+function openDBAndRetrieveData(storeName) {
+    return new Promise((resolve, reject) => {
+        if (CURRENT_DATABASE_CONNECTION) {
+            retrieveData(storeName);
+        }
+        else {
+            createDatabaseConnection(storeName);
+        }
+        function createDatabaseConnection(storeName) {
+            try {
+                const openRequest = window.indexedDB.open(DATABASE_NAME);
+                openRequest.onsuccess = () => {
+                    updateUploadsDatabase(openRequest.result);
+                    retrieveData(storeName);
+                };
+                openRequest.onerror = () => reject(Error(`打开数据库失败: ${openRequest.error}`));
+                openRequest.onblocked = () => reject(Error(`数据库被阻塞: ${openRequest.error}`));
+                openRequest.onupgradeneeded = () => console.info('openRequest.onupgradeneeded(SHOULD NOT BE CALLED)');
+            }
+            catch (ex) {
+                console.warn(`打开数据库时发生异常: ${ex.message}`, ex);
+                reject(ex);
+            }
+        }
+        function retrieveData(storeName) {
+            if (CURRENT_DATABASE_CONNECTION.objectStoreNames.contains(storeName)) {
+                retrieveExistingData(storeName).then(resolve).catch(reject);
+            }
+            else {
+                triggerDatabaseUpgrade(storeName);
+            }
+        }
+        function triggerDatabaseUpgrade(storeName) {
+            const newVersion = CURRENT_DATABASE_CONNECTION.version + 1;
+            CURRENT_DATABASE_CONNECTION.close();
+            const openRequest = window.indexedDB.open(DATABASE_NAME, newVersion);
+            openRequest.onerror = () => reject(Error(`打开数据库失败: ${openRequest.error}`));
+            openRequest.onblocked = () => reject(Error(`数据库被阻塞: ${openRequest.error}`));
+            openRequest.onsuccess = () => console.info('openRequest.onsuccess 在 triggerDatabaseUpgrade 中被触发');
+            openRequest.onupgradeneeded = () => {
+                updateUploadsDatabase(openRequest.result);
+                try {
+                    openRequest.result.createObjectStore(storeName, {});
+                    openRequest.result.onversionchange = (event) => {
+                        if (event.newVersion === null) {
+                            openRequest.result.close();
+                        }
+                    };
+                    resolve([]);
+                }
+                catch (ex) {
+                    reject(Error(`升级数据库异常: ${ex.message}`));
+                }
+            };
+        }
+    });
+}
+
+export { openDBAndRetrieveData };

package/es/components/FileUploader/utils/fileDB/retrieveExistingData.js

@@ -0,0 +1,49 @@
+import { CURRENT_DATABASE_CONNECTION } from './index.js';
+
+/**
+ * IDBDatabase.transaction 使用说明:
+ * - 用于创建一个事务，以便在 IndexedDB 数据库中执行一系列的操作。
+ * - 语法: const transaction = db.transaction(storeNames, mode);
+ *   - `storeNames`: 字符串或字符串数组，表示要访问的对象仓库名称。
+ *   - `mode`: 事务模式，'readonly' 或 'readwrite'，默认 'readonly'。
+ * - 事务模式:
+ *   - `readonly`: 只能读取数据。
+ *   - `readwrite`: 可以进行读写操作。
+ * - 注意:
+ *   - 事务只能访问在创建时指定的对象仓库。
+ *   - 事务在所有操作完成后会自动提交，失败则回滚。
+ *   - 事务和请求都有各自的事件处理程序。
+ *
+ * objectStore.openCursor 使用说明:
+ * - 游标的遍历是异步的，使用事件驱动机制:
+ *   - `onsuccess` 事件在游标初始化/游标成功移动到一条记录时触发。
+ *   - 当游标指向一条记录时，可以访问该记录的 key 和 value。
+ *   - 调用 cursor.continue() 会将游标移动到下一条记录，并再次触发 onsuccess 事件。
+ *   - 这个过程会一直持续，直到游标遍历完所有记录。当游标遍历完所有记录时，`onsuccess` 事件中 `cursor.result` 为 `null`，此时解析 Promise。
+ */
+function retrieveExistingData(storeName) {
+    return new Promise(function (resolve, reject) {
+        try {
+            const transaction = CURRENT_DATABASE_CONNECTION.transaction(storeName, 'readonly');
+            const objectStore = transaction.objectStore(storeName);
+            const files = [];
+            const cursor = objectStore.openCursor();
+            cursor.onsuccess = () => {
+                const cursorResult = cursor.result;
+                if (cursorResult) {
+                    files.push(cursorResult.value);
+                    cursorResult.continue();
+                }
+                else {
+                    resolve(files);
+                }
+            };
+            cursor.onerror = () => console.warn(`retrieveExistingData 中游标操作失败 - 错误代码: ${cursor.error}`);
+        }
+        catch (ex) {
+            reject(Error(`retrieveExistingData 中执行事务或打开游标时发生异常 - ${ex.message}`));
+        }
+    });
+}
+
+export { retrieveExistingData };

package/es/components/FileUploader/utils/modalConfig.css.js

@@ -0,0 +1,20 @@
+var style = document.createElement('style');
+style.textContent = `.zjlab-fe-data-hub-ui-modal .ant-modal-title,
+  .zjlab-fe-data-hub-ui-modal .ant-modal-confirm-title {
+    font-family: AlibabaPuHuiTi-3-65-Medium
+}
+  .zjlab-fe-data-hub-ui-modal .ant-modal-title,
+  .zjlab-fe-data-hub-ui-modal .ant-modal-confirm-title {
+    font-size: 1.125rem;
+    line-height: 1.75rem
+}
+  .zjlab-fe-data-hub-ui-modal .ant-modal-title,
+  .zjlab-fe-data-hub-ui-modal .ant-modal-confirm-title {
+    font-weight: 400
+}
+  .zjlab-fe-data-hub-ui-modal .ant-modal-title,
+  .zjlab-fe-data-hub-ui-modal .ant-modal-confirm-title {
+    line-height: 1.5rem
+}
+`;
+document.head.appendChild(style);

package/es/components/FileUploader/utils/modalConfig.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { Flex } from 'antd';
+
+const confirmModalConfig = {
+    icon: null,
+    centered: true,
+    closable: true,
+    styles: {
+        mask: { backgroundColor: 'rgba(0, 0, 0, 0.6)' },
+        body: { marginTop: '24px', textAlign: 'center' },
+        content: { padding: '20px 20px 16px 20px', borderRadius: '10px' },
+    },
+    footer(originNode) {
+        return (jsx(Flex, { justify: "center", align: "center", children: originNode }));
+    },
+    className: 'zjlab-fe-data-hub-ui-modal',
+};
+const modalConfig = {
+    width: 600,
+    centered: true,
+    closable: true,
+    styles: {
+        body: { display: 'flow-root' },
+        footer: { textAlign: 'center' },
+        header: { marginBlockEnd: '16px' },
+        mask: { backgroundColor: 'rgba(0, 0, 0, 0.6)' },
+        content: { padding: '20px 20px 16px 20px', borderRadius: '10px' },
+    },
+    className: 'zjlab-fe-data-hub-ui-file-uploader zjlab-fe-data-hub-ui-modal',
+};
+
+export { confirmModalConfig, modalConfig };

package/es/components/FileUploader/utils/retrieveAllFiles.js

@@ -0,0 +1,70 @@
+import { __awaiter } from 'tslib';
+
+/**
+ * 文件系统 API 中，FileSystemEntry 是表示文件系统中的条目（项目）的基础接口, 它可以是文件或目录,主要有两种类型的 Entry：
+ * 1. FileSystemFileEntry（文件条目）代表一个文件, 可以通过 file() 方法获取实际的 File 对象
+ * 2. FileSystemDirectoryEntry（目录条目）代表一个文件夹/目录, 可以包含其他文件或目录, 可以通过 createReader() 方法读取目录内容
+ */
+function retrieveFilesFromEntry(item_1, directory_1, acceptList_1) {
+    return __awaiter(this, arguments, void 0, function* (item, directory, acceptList, fileNameWithLocation = '') {
+        if (isDirectoryEntry(item)) {
+            if (!directory)
+                return []; // 如果不允许处理目录,则返回空数组
+            return handleDirectory(item, acceptList);
+        }
+        if (isFileEntry(item)) {
+            if (item.name.includes('.DS_Store'))
+                return []; // 忽略 .DS_Store 文件
+            return handleFile(item, acceptList, fileNameWithLocation);
+        }
+        return []; // 如果既不是文件也不是目录,返回空数组，理论上不会执行
+    });
+}
+function handleDirectory(directory, acceptList) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const entries = yield retrieveEntriesInDirectory(directory);
+        const filePromises = entries.map((entry) => retrieveFilesFromEntry(entry, true, acceptList, entry.fullPath));
+        const results = yield Promise.allSettled(filePromises);
+        return results
+            .filter((result) => result.status === 'fulfilled')
+            .flatMap((result) => result.value);
+    });
+}
+function retrieveEntriesInDirectory(directory) {
+    return new Promise((resolve, reject) => {
+        const reader = directory.createReader();
+        reader.readEntries(resolve, reject);
+    });
+}
+function handleFile(fileEntry, acceptList, fileNameWithLocation) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const file = yield getFile(fileEntry);
+        if (!isAcceptableFile(file, acceptList)) {
+            return [];
+        }
+        return [formatFile(file, fileNameWithLocation)];
+    });
+}
+function getFile(fileEntry) {
+    return new Promise((resolve, reject) => {
+        fileEntry.file(resolve, reject);
+    });
+}
+function isAcceptableFile(file, acceptList) {
+    if (acceptList.size === 0)
+        return true; // 如果 acceptList 为空,接受所有文件
+    const extendName = file.name.split('.').pop() || '';
+    return acceptList.has(`.${extendName}`);
+}
+function formatFile(file, fileNameWithLocation) {
+    const blob = file.slice(0, file.size, file.type);
+    return new File([blob], fileNameWithLocation.slice(1) || file.name, { type: file.type });
+}
+function isDirectoryEntry(entry) {
+    return entry.isDirectory;
+}
+function isFileEntry(entry) {
+    return entry.isFile;
+}
+
+export { retrieveFilesFromEntry as retrieveAllFiles };

package/es/components/FileUploader/utils/splitFileIntoChunk.js

@@ -0,0 +1,15 @@
+function splitFileIntoChunk(file) {
+    const { uploadUrls, chunkSize, raw } = file;
+    const fileSize = raw.size;
+    return uploadUrls.map(({ partNum, uploadUrl }) => {
+        const start = partNum * chunkSize;
+        const end = Math.min((partNum + 1) * chunkSize, fileSize);
+        const chunk = raw.slice(start, end);
+        return {
+            url: { partNum, uploadUrl },
+            chunk,
+        };
+    });
+}
+
+export { splitFileIntoChunk };

package/es/components/SDK-modal/document-link.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { documentLink, documentLinkAnchor } from './index.module.scss.js';
+
+function DocumentationLink({ link, locale }) {
+    return (jsxs("span", { className: documentLink, children: [locale['documentPrefix'], jsx("a", { href: link, target: "_blank", rel: "noopener noreferrer", className: documentLinkAnchor, children: locale['documentLinkText'] })] }));
+}
+
+export { DocumentationLink as default };

package/es/components/SDK-modal/index.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { createRoot } from 'react-dom/client';
+import InnerModal from './inner-modal.js';
+
+function showSDKModal(config) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    let root = createRoot(container);
+    const destroy = () => {
+        var _a;
+        (_a = config.onClose) === null || _a === void 0 ? void 0 : _a.call(config);
+        root === null || root === void 0 ? void 0 : root.unmount();
+        root = null;
+        container.remove();
+    };
+    root.render(jsx(InnerModal, { open: true, onClose: destroy, SDKCode: config.SDKCode, loadSDK: config.loadSDK, title: config.title, subTitle: config.subTitle, modalConfig: config.modalConfig, documentLink: config.documentLink, locale: config.locale }));
+    return { destroy };
+}
+function SDKModalComponent(props) {
+    return jsx(InnerModal, Object.assign({}, props));
+}
+const SDKModal = SDKModalComponent;
+SDKModal.show = showSDKModal;
+
+export { SDKModal as default, showSDKModal };

package/es/components/SDK-modal/index.module.scss.js

@@ -0,0 +1,49 @@
+var style = document.createElement('style');
+style.textContent = `.index-module__modal___P--8v .ant-modal-title {
+  font-size: 18px;
+  line-height: 24px;
+  font-family: "AlibabaPuHuiTi-3-65-Medium";
+  font-weight: 400;
+}
+
+.index-module__codeBlock___QOg38 {
+  padding: 16px;
+  border-radius: 4px;
+  margin: 8px 0;
+  position: relative;
+  min-height: 56px;
+  background-color: #f3f4f6 !important;
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+}
+
+.index-module__loading___JWS7C {
+  width: 100%;
+}
+
+.index-module__errorText___YBeKO {
+  color: #f43f5e;
+}
+
+.index-module__codeContent___BmCSu {
+  max-width: 41rem;
+}
+
+.index-module__documentLink___PX-ly {
+  display: block;
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.index-module__documentLinkAnchor___HAHYt {
+  margin-left: 4px;
+  color: #1775fe;
+}
+
+.index-module__documentLinkAnchor___HAHYt:hover {
+  color: #1775fe;
+}`;
+document.head.appendChild(style);
+var codeBlock = "index-module__codeBlock___QOg38";var loading = "index-module__loading___JWS7C";var errorText = "index-module__errorText___YBeKO";var codeContent = "index-module__codeContent___BmCSu";var documentLink = "index-module__documentLink___PX-ly";var documentLinkAnchor = "index-module__documentLinkAnchor___HAHYt";
+
+export { codeBlock, codeContent, documentLink, documentLinkAnchor, errorText, loading };

package/es/components/SDK-modal/inner-modal.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Modal, Spin, Flex, Button } from 'antd';
+import { memo, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Copy from '../copy/index.js';
+import DocumentationLink from './document-link.js';
+import { getLocale } from './locale/translations.js';
+import { codeBlock, loading, errorText, codeContent } from './index.module.scss.js';
+
+const defaultModalConfig = {
+    width: 600,
+    centered: true,
+    closable: true,
+    styles: {
+        body: { display: 'flow-root' },
+        footer: { textAlign: 'center' },
+        header: { marginBlockEnd: '16px' },
+        mask: { backgroundColor: 'rgba(0, 0, 0, 0.6)' },
+        content: { padding: '20px 20px 16px 20px', borderRadius: '10px' },
+    },
+};
+var InnerModal = memo(function InnerModal({ open, onClose, SDKCode, loadSDK, title, subTitle, modalConfig, documentLink, locale, }) {
+    const [code, setCode] = useState('');
+    const [loading$1, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const resolvedLocale = getLocale(locale);
+    useEffect(() => {
+        if (!open) {
+            setCode('');
+            setError('');
+            setLoading(false);
+            return;
+        }
+        if (SDKCode !== undefined) {
+            setCode(SDKCode);
+            return;
+        }
+        if (loadSDK) {
+            setCode('');
+            setError('');
+            setLoading(true);
+            loadSDK()
+                .then((result) => {
+                setCode(result);
+            })
+                .catch((err) => {
+                var _a;
+                setError((_a = err === null || err === void 0 ? void 0 : err.message) !== null && _a !== void 0 ? _a : String(err));
+            })
+                .finally(() => {
+                setLoading(false);
+            });
+        }
+    }, [open, SDKCode, loadSDK]);
+    const mergedConfig = Object.assign(Object.assign({}, defaultModalConfig), modalConfig);
+    return (jsxs(Modal, Object.assign({}, mergedConfig, { open: open, title: title, onCancel: onClose, footer: jsx(Button, { type: "primary", onClick: onClose, children: resolvedLocale['confirm'] }), children: [subTitle && jsx("div", { children: subTitle }), jsx(Spin, { spinning: loading$1, className: classNames(codeBlock, loading) }), !loading$1 && (jsx(Flex, { align: "start", justify: "space-between", className: codeBlock, children: error ? (jsx("span", { className: errorText, children: error })) : (jsxs(Fragment, { children: [jsx("div", { className: codeContent, dangerouslySetInnerHTML: { __html: code.replace(/\n/g, '<br>') } }), jsx(Copy, { text: code, showFeedback: true })] })) })), documentLink && jsx(DocumentationLink, { link: documentLink, locale: resolvedLocale })] })));
+});
+
+export { InnerModal as default };

package/es/components/SDK-modal/locale/translations.js

@@ -0,0 +1,17 @@
+const localeMap = {
+    zh: {
+        confirm: '知道了',
+        documentPrefix: '详细操作请参考',
+        documentLinkText: '使用文档',
+    },
+    en: {
+        confirm: 'Got it',
+        documentPrefix: 'For more details, see',
+        documentLinkText: 'Documentation',
+    },
+};
+function getLocale(lang = 'zh') {
+    return localeMap[lang];
+}
+
+export { getLocale };

package/es/components/apply-perm-modal/index.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Flex, Button, Modal } from 'antd';
+import { noModalWrap, title, content, footer, permModal, permFunModal } from './index.module.scss.js';
+import { isPublicNetwork } from '@zjlab-fe/util';
+
+const okText = {
+    zh: '申请',
+    en: 'Apply',
+};
+const cancelText = {
+    zh: '取消',
+    en: 'Cancel',
+};
+const titleText = {
+    zh: '提示',
+    en: 'Notice',
+};
+const contentText = {
+    zh: '抱歉，您没有此功能权限，请点击申请',
+    en: 'Sorry, you do not have permission to use this function, please click apply',
+};
+const applyUrl = (isPublic) => isPublic
+    ? 'https://alidocs.dingtalk.com/notable/share/form/v01ZWGl05mv1P2a0n34_dv19yqvsgs3oebp3pcjys_1qX0QQ0'
+    : 'https://alidocs.dingtalk.com/notable/share/form/v01Q35O8510LgZgBl9V_dv19yqvsgs3oebp3pcjys_1qX0QQ0';
+/**
+ * 申请权限弹窗
+ * @param locale {string} 语言 'zh' | 'en'，默认zh
+ * @param open {boolean} 是否展示弹窗
+ * @param noModal {boolean} 是否以非弹窗形式展示
+ * @param onCancel {function} 取消回调
+ * @returns
+ */
+function ApplyPermModal(props) {
+    const { locale = 'zh', noModal = false } = props;
+    const handleApply = () => window.open(applyUrl(isPublicNetwork()), '_blank');
+    if (noModal) {
+        return (jsxs(Flex, { vertical: true, align: "center", gap: 8, className: noModalWrap, children: [jsx("div", { className: title, children: titleText[locale] }), jsx("div", { className: content, children: contentText[locale] }), jsx(Flex, { className: footer, children: jsx(Button, { type: "primary", onClick: handleApply, children: okText[locale] }) })] }));
+    }
+    return (jsx(Modal, Object.assign({}, props, { title: titleText[locale], onOk: handleApply, okText: okText[locale], cancelText: cancelText[locale], wrapClassName: permModal, width: 400, children: contentText[locale] })));
+}
+ApplyPermModal.confirm = (props) => {
+    const { locale = 'zh' } = props || {};
+    const handleApply = () => window.open(applyUrl(isPublicNetwork()), '_blank');
+    const modal = Modal.confirm(Object.assign(Object.assign({}, props), { open: true, title: titleText[locale], content: contentText[locale], onOk: handleApply, okText: okText[locale], cancelText: cancelText[locale] }));
+    modal.update({
+        icon: null,
+        closable: true,
+        width: 400,
+        wrapClassName: `${permFunModal}`,
+    });
+};
+
+export { ApplyPermModal as default };