@gant-lowcode/plugin-code-generator 1.0.10 → 2.0.0

package/lib/components/code-gen-result/index.js

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CodeGenResult = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _empty = _interopRequireDefault(require("antd/lib/empty"));
+var _message2 = _interopRequireDefault(require("antd/lib/message"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+var _fileSaver = _interopRequireDefault(require("file-saver"));
+var _jszip = _interopRequireDefault(require("jszip"));
+var _index = require("../sources-view/index");
+require("./index.less");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+// import { CodeGenPreview } from "../code-gen-preview/index";
+
+var CodeGenResult = exports.CodeGenResult = /*#__PURE__*/(0, _react.forwardRef)(function CodeGenResult(_ref, ref) {
+  var result = _ref.result,
+    schema = _ref.schema;
+  var _useState = (0, _react.useState)({
+      expandedKeys: ["sources", "preview"]
+    }),
+    paneState = _useState[0],
+    setPaneState = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    gravityCode = _useState2[0],
+    setGravityCode = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    refresh = _useState3[0],
+    setRefresh = _useState3[1];
+  (0, _react.useEffect)(function () {
+    console.log("--result, schema", result, schema);
+    setGravityCode(convertCodeGenResult(result, schema));
+  }, [result]);
+  var codeZip = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var zip;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            zip = new _jszip["default"]();
+            Object.values((gravityCode === null || gravityCode === void 0 ? void 0 : gravityCode.modules) || {}).forEach(function (file) {
+              zip.file(file.fpath.replace(/^\/+/, ""), file.code);
+            });
+            _context.next = 4;
+            return zip.generateAsync({
+              type: "blob"
+            });
+          case 4:
+            return _context.abrupt("return", _context.sent);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function codeZip() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      codeZip: codeZip
+    };
+  });
+  if (!result) {
+    return null;
+  }
+  var handleDownloadSources = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(e) {
+      var content;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            e.preventDefault();
+            e.stopPropagation();
+            _context2.next = 5;
+            return codeZip();
+          case 5:
+            content = _context2.sent;
+            _fileSaver["default"].saveAs(content, "gant-lowcode-generated-sources.zip");
+            _context2.next = 13;
+            break;
+          case 9:
+            _context2.prev = 9;
+            _context2.t0 = _context2["catch"](0);
+            console.log("failed to download sources: ", _context2.t0);
+            _message2["default"].error("下载失败！");
+          case 13:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 9]]);
+    }));
+    return function handleDownloadSources(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  console.log("--gravityCode", gravityCode);
+
+  // const items: TabsProps["items"] = [
+  //   {
+  //     key: "sources",
+  //     label: (
+  //       <span>
+  //         出码生成的源代码{" "}
+  //         <a href="javascript:void(0)" onClick={handleDownloadSources}>
+  //           导出/下载 zip 包
+  //         </a>
+  //       </span>
+  //     ),
+  //     children: gravityCode != null && (
+  //       <SourcesView code={gravityCode} onCodeChange={setGravityCode} />
+  //     ),
+  //   },
+  //   {
+  //     key: "preview",
+  //     label: (
+  //       <span>
+  //         在线预览{" "}
+  //         <a
+  //           href="#refresh"
+  //           onClick={(e) => {
+  //             e.preventDefault();
+  //             e.stopPropagation();
+  //             setRefresh(Date.now());
+  //           }}
+  //         >
+  //           刷新
+  //         </a>
+  //       </span>
+  //     ),
+  //     children: (
+  //       <div
+  //         className="code-gen-result-gravity-demo"
+  //         style={{ height: "100%" }}
+  //       >
+  //         <CodeGenPreview
+  //           code={gravityCode}
+  //           height={"100%"}
+  //           refresh={refresh}
+  //         />
+  //       </div>
+  //     ),
+  //   },
+  // ];
+
+  // return <Tabs className="code-gen-tabs" items={items} />;
+
+  if (!gravityCode) return /*#__PURE__*/_react["default"].createElement(_empty["default"], null);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "code-gen-source-view"
+  }, /*#__PURE__*/_react["default"].createElement(_index.SourcesView, {
+    code: gravityCode,
+    onCodeChange: setGravityCode
+  }));
+});
+function convertCodeGenResult(result, schema) {
+  var schemaFiles = {
+    "/.project-schema.json": {
+      fpath: "/.project-schema.json",
+      code: JSON.stringify(schema, null, 2) + "\n"
+    }
+  };
+  if (!result || !Array.isArray(result) || !result.length) {
+    return {
+      type: "demo",
+      modules: schemaFiles
+    };
+  }
+  var code = {
+    type: "demo",
+    modules: result.reduce(function (acc, file) {
+      var _extends2;
+      return (0, _extends3["default"])({}, acc, (_extends2 = {}, _extends2["/" + file.pathName] = {
+        fpath: "/" + file.pathName,
+        code: file.content,
+        entry: undefined,
+        packagejson: ["package.json"].includes(file.pathName) ? 1 : undefined
+      }, _extends2));
+    }, {})
+  };
+  var foundEntry = false;
+
+  // 设置入口文件
+  ["index.js", "index.ts", "index.tsx", "app.js", "app.ts", "app.tsx"].forEach(function (fileName) {
+    if (!foundEntry) {
+      var filePath = "/src/" + fileName;
+      if (code.modules[filePath]) {
+        foundEntry = true;
+        if (fileName === "index.js") {
+          code.modules[filePath].entry = 1;
+        } else {
+          code.modules["/src/index.js"] = {
+            fpath: "/src/index.js",
+            entry: 1,
+            code: "import \"./" + fileName.replace(/\.\w+$/, "") + "\""
+          };
+        }
+      }
+    }
+  });
+  if (!foundEntry) {
+    console.warn("Failed to find entry file for demo.");
+  }
+
+  // 补充 schema 文件
+  // Object.assign(code.modules, schemaFiles);
+
+  return code;
+}

package/lib/components/code-gen-result/index.less

@@ -0,0 +1,20 @@
+.code-gen-tabs {
+  height: 100%;
+
+  .ant-tabs-nav {
+    margin: 0;
+  }
+  .ant-tabs-content, .ant-tabs-tabpane {
+    height: 100%;
+  }
+}
+
+.code-gen-source-view {
+  height: 100%;
+}
+
+.source-view-header {
+  position: absolute;
+  top: 18px;
+  right: 20px;
+}

package/lib/components/codesandbox-preview/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { CodeGenPreviewProps } from "../code-gen-preview/index";
+import "./index.less";
+export declare function CodeSandboxPreview({ code, height }: CodeGenPreviewProps): JSX.Element;

package/lib/components/codesandbox-preview/index.js

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CodeSandboxPreview = CodeSandboxPreview;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _spin = _interopRequireDefault(require("antd/lib/spin"));
+var _alert = _interopRequireDefault(require("antd/lib/alert"));
+var _button = _interopRequireDefault(require("antd/lib/button"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _fixPreviewCode = require("../code-gen-preview/fixPreviewCode");
+require("./index.less");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+// 使用 CodeSandbox 来进行预览
+// @see https://codesandbox.io/docs/api#get-request
+function CodeSandboxPreview(_ref) {
+  var code = _ref.code,
+    height = _ref.height;
+  var parameters = (0, _react.useMemo)(function () {
+    var files = {};
+    if (code && code.modules) {
+      var fixedCode = (0, _fixPreviewCode.fixPreviewCode)(code);
+      if (fixedCode) {
+        Object.values(fixedCode.modules).forEach(function (file) {
+          var _file$fpath;
+          files[file === null || file === void 0 ? void 0 : (_file$fpath = file.fpath) === null || _file$fpath === void 0 ? void 0 : _file$fpath.slice(1)] = {
+            isBinary: false,
+            content: file.code
+          };
+        });
+      }
+
+      // 入口文件需要顺便引入下样式
+      files["src/index.js"] = {
+        isBinary: false,
+        content: "\n          // \u76EE\u524D\u9700\u8981\u5355\u72EC\u5F15\u5165\u4E0B\u6837\u5F0F\u6587\u4EF6\n          import \"@alifd/next/dist/next.css\";\n          import \"@alifd/pro-layout/dist/AlifdProLayout.css\";\n\n          // \u5F15\u5165\u5165\u53E3\u6587\u4EF6\n          import './app';\n"
+      };
+    }
+    return {
+      files: files,
+      template: "create-react-app"
+    };
+  }, [code]);
+  var _useState = (0, _react.useState)({
+      parameters: parameters,
+      sandboxId: "",
+      isCreating: false,
+      hasError: false,
+      error: null
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  (0, _react.useEffect)(function () {
+    if (state.parameters !== parameters || state.sandboxId === "retry" || !state.sandboxId) {
+      var hasCanceled = false;
+      setState(function (prev) {
+        return (0, _extends2["default"])({}, prev, {
+          hasError: false,
+          code: code,
+          parameters: parameters,
+          isCreating: true
+        });
+      });
+      (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var sandboxId;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return createCodeSandbox(parameters);
+            case 3:
+              sandboxId = _context.sent;
+              if (!hasCanceled) {
+                setState(function (prev) {
+                  return (0, _extends2["default"])({}, prev, {
+                    hasError: false,
+                    isCreating: false,
+                    sandboxId: sandboxId
+                  });
+                });
+              }
+              _context.next = 10;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              if (!hasCanceled) {
+                setState(function (prev) {
+                  return (0, _extends2["default"])({}, prev, {
+                    hasError: true,
+                    error: _context.t0,
+                    isCreating: false
+                  });
+                });
+              }
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }))();
+      return function () {
+        hasCanceled = true;
+      };
+    }
+    return function () {};
+  }, [parameters, state.sandboxId, state.parameters]);
+  var handleRetry = function handleRetry() {
+    setState(function (prev) {
+      return (0, _extends2["default"])({}, prev, {
+        hasError: false,
+        sandboxId: "retry"
+      });
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "code-gen-plugin-code-sandbox-preview",
+    style: {
+      height: height
+    },
+    "data-code-sandbox-id": state.sandboxId
+  }, function () {
+    if (state.hasError) {
+      return /*#__PURE__*/_react["default"].createElement(_alert["default"], {
+        message: "\u751F\u6210 CodeSandbox \u9884\u89C8\u5E94\u7528\u5931\u8D25",
+        description: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, "\u8BE6\u7EC6\u9519\u8BEF\uFF1A", "" + (state.error || "网络开小差了")), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+          onClick: handleRetry
+        }, "\u91CD\u65B0\u5C1D\u8BD5\u4E0B")))
+      });
+    }
+    return state.sandboxId ? /*#__PURE__*/_react["default"].createElement("iframe", {
+      src: "https://codesandbox.io/embed/" + state.sandboxId + "?autoresize=1&fontsize=14&hidenavigation=1&theme=dark&view=preview",
+      title: "CodeSandbox Preview",
+      allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",
+      sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+    }) : /*#__PURE__*/_react["default"].createElement(_spin["default"], {
+      spinning: true,
+      tip: "\u6B63\u5728\u751F\u6210 CodeSandbox \u9884\u89C8\u5E94\u7528..."
+    });
+  }());
+}
+function createCodeSandbox(_x) {
+  return _createCodeSandbox.apply(this, arguments);
+}
+function _createCodeSandbox() {
+  _createCodeSandbox = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(parameters) {
+    var res, json, _ref3, sandbox_id;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          if (Object.entries((parameters === null || parameters === void 0 ? void 0 : parameters.files) || {}).length) {
+            _context2.next = 2;
+            break;
+          }
+          return _context2.abrupt("return", "");
+        case 2:
+          _context2.next = 4;
+          return fetch("https://codesandbox.io/api/v1/sandboxes/define?json=1", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Accept: "application/json"
+            },
+            body: JSON.stringify(parameters)
+          });
+        case 4:
+          res = _context2.sent;
+          if (res.ok) {
+            _context2.next = 7;
+            break;
+          }
+          throw new Error("\u521B\u5EFA CodeSandbox \u5931\u8D25\uFF0C\u9519\u8BEF\u7801\uFF1A" + res.status + " " + res.statusText);
+        case 7:
+          _context2.next = 9;
+          return res.json()["catch"](function (err) {
+            throw new Error("\u521B\u5EFA CodeSandbox \u5931\u8D25\uFF0C\u670D\u52A1\u5F02\u5E38(" + ((err === null || err === void 0 ? void 0 : err.message) || err || "未知异常") + ")");
+          });
+        case 9:
+          json = _context2.sent;
+          _ref3 = json || {}, sandbox_id = _ref3.sandbox_id;
+          if (!(!sandbox_id || typeof sandbox_id !== "string")) {
+            _context2.next = 13;
+            break;
+          }
+          throw new Error("\u521B\u5EFA CodeSandbox \u5931\u8D25\uFF0C\u670D\u52A1\u54CD\u5E94\u5F02\u5E38");
+        case 13:
+          return _context2.abrupt("return", sandbox_id);
+        case 14:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _createCodeSandbox.apply(this, arguments);
+}

package/lib/components/codesandbox-preview/index.less

@@ -0,0 +1,18 @@
+.code-gen-plugin-code-sandbox-preview {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  justify-items: center;
+  height: 100%;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    border: 0;
+    border-radius: 0;
+    overflow: hidden;
+  }
+}

package/lib/components/file-tree/index.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { CodeModules } from "../../types";
+import "./index.less";
+interface FileTreeProps {
+    modules: CodeModules;
+    onSelect?(key: string): void;
+    selectedKeys?: string[];
+}
+export declare const FileTree: (props: FileTreeProps) => JSX.Element;
+declare type TreeNode = {
+    id: string;
+    label: string;
+    folder: boolean;
+    depth: number;
+    expanded: boolean;
+};
+export declare function createFlattenTree(data: Record<string, {
+    fpath: string;
+    code: string;
+}>, expandedKeys: string[]): TreeNode[];
+export {};

package/lib/components/file-tree/index.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.FileTree = void 0;
+exports.createFlattenTree = createFlattenTree;
+var _react = _interopRequireWildcard(require("react"));
+var _reactWindow = require("react-window");
+var _reactVirtualizedAutoSizer = _interopRequireDefault(require("react-virtualized-auto-sizer"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _stringNaturalCompare = _interopRequireDefault(require("string-natural-compare"));
+var _index = require("../file-type-icon/index");
+require("./index.less");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var FILE_TYPES_ICON_MAP = {
+  js: "js",
+  jsx: "jsx",
+  ts: "ts",
+  tsx: "ts",
+  json: "json",
+  scss: "scss",
+  css: "css",
+  less: "less",
+  tsconfig: "tsconfig",
+  html: "html"
+};
+function getFileIcon(file) {
+  var type = FILE_TYPES_ICON_MAP[(file || "").split(".").pop() || ""] || "text";
+  return /*#__PURE__*/_react["default"].createElement(_index.FileTypeIcon, {
+    type: type
+  });
+}
+var Row = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var data = _ref.data,
+    index = _ref.index,
+    style = _ref.style;
+  var flattenedData = data.flattenedData,
+    onOpen = data.onOpen,
+    onSelect = data.onSelect,
+    selectedKeys = data.selectedKeys;
+  var node = flattenedData[index];
+  var left = node.depth * 20;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("tree-node", {
+      "tree-node-selected": selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(node.id)
+    }),
+    style: style,
+    onClick: function onClick() {
+      return onOpen(node);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("tree-item", {
+      "tree-folder": node.folder,
+      "tree-item-expanded": node.expanded,
+      "tree-item-open": !node.expanded
+    }),
+    onClick: function onClick(e) {
+      return onSelect(e, node);
+    },
+    style: {
+      left: left + "px",
+      width: "calc(100% - " + left + "px)"
+    }
+  }, !node.folder && getFileIcon(node.label), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "label-name"
+  }, node.label)));
+}, _reactWindow.areEqual);
+var getItemData = (0, _memoizeOne["default"])(function (onOpen, onSelect, flattenedData, selectedKeys) {
+  return {
+    onOpen: onOpen,
+    onSelect: onSelect,
+    flattenedData: flattenedData,
+    selectedKeys: selectedKeys
+  };
+});
+var FileTree = exports.FileTree = function FileTree(props) {
+  var modules = props.modules,
+    _props$selectedKeys = props.selectedKeys,
+    selectedKeys = _props$selectedKeys === void 0 ? [] : _props$selectedKeys;
+  var _useState = (0, _react.useState)([]),
+    openedNodeIds = _useState[0],
+    setOpenedNodeIds = _useState[1];
+  var onOpen = function onOpen(node) {
+    if (!node.folder) return;
+    !node.expanded ? setOpenedNodeIds([].concat(openedNodeIds, [node.id])) : setOpenedNodeIds(openedNodeIds.filter(function (id) {
+      return id !== node.id;
+    }));
+  };
+  var onSelect = function onSelect(e, node) {
+    var _props$onSelect;
+    //e.stopPropagation();
+    if (node.folder) return;
+    (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 ? void 0 : _props$onSelect.call(props, node.id);
+  };
+  var flattenedData = createFlattenTree(modules, openedNodeIds);
+  var itemData = getItemData(onOpen, onSelect, flattenedData, selectedKeys);
+  return /*#__PURE__*/_react["default"].createElement(_reactVirtualizedAutoSizer["default"], null, function (_ref2) {
+    var height = _ref2.height,
+      width = _ref2.width;
+    return /*#__PURE__*/_react["default"].createElement(_reactWindow.FixedSizeList, {
+      className: "code-file-tree",
+      height: height,
+      itemCount: flattenedData.length,
+      itemSize: 22,
+      width: width,
+      itemKey: function itemKey(index) {
+        return flattenedData[index].id;
+      },
+      itemData: itemData
+    }, Row);
+  });
+};
+function createFlattenTree(data, expandedKeys) {
+  var flatTree = [];
+  var filePaths = Object.keys(data);
+  // console.log(JSON.parse(JSON.stringify(filePaths)))
+  // filePaths.sort((a, b) => {
+  //   // 检查字符串a是否包含斜杠
+  //   const hasSlashA = a.substring(1).lastIndexOf('/');
+  //   // 检查字符串b是否包含斜杠
+  //   const hasSlashB = b.substring(1).lastIndexOf('/');
+  //   console.log('---a', hasSlashA)
+  //   console.log('---b', hasSlashB)
+  //   // 如果a包含斜杠，而b不包含，则a应该排在b之后
+  //   if (hasSlashA > -1 && hasSlashB > -1) {
+  //     return hasSlashB - hasSlashA;
+  //   }
+
+  //   return naturalCompare(a, b, {
+  //     caseInsensitive: true,
+  //   }); // 包含斜杠的字符串按字典顺序排序
+  // });
+  // console.log(filePaths)
+  filePaths.forEach(function (key) {
+    var parts = key.split("/");
+    var fileNames = [];
+    var _loop = function _loop() {
+      var path = parts.slice(0, i).join("/");
+      var expanded = expandedKeys.includes(path);
+      if (path && !flatTree.some(function (node) {
+        return node.id === path;
+      })) {
+        fileNames.push({
+          id: path,
+          label: parts[i - 1] || "/",
+          // 当前层的名称
+          folder: i < parts.length,
+          // 如果不是最后一层，则为文件夹
+          depth: i - 1,
+          // 层级深度，从 0 开始
+          expanded: expanded // 默认展开
+        });
+      }
+      if (expanded) return 1; // break
+    };
+    for (var i = 1; i <= parts.length; i++) {
+      if (_loop()) break;
+    }
+    // console.log('--fileNames', fileNames);
+    fileNames.sort(function (a, b) {
+      return (0, _stringNaturalCompare["default"])(a.id, b.id, {
+        caseInsensitive: true
+      });
+    });
+    flatTree.push.apply(flatTree, fileNames);
+  });
+  return flatTree;
+}