feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/project-ide/framework/src/utils/add-preserved-search-params.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/** 保留的查询参数 */
+const PRESERVED_SEARCH_PARAMS = ['commit_version'];
+
+/**
+ * 给指定 url 添加特定的 search params
+ * @param url 当前 url
+ * @returns
+ */
+export function addPreservedSearchParams(url: string) {
+  if (!url) {
+    return url;
+  }
+
+  const searchParams = new URLSearchParams(window.location.search);
+  const newSearchParams = new URLSearchParams();
+
+  for (const param of PRESERVED_SEARCH_PARAMS) {
+    const value = searchParams.get(param);
+    if (value && !url.includes(`${param}=`)) {
+      newSearchParams.append(param, value);
+    }
+  }
+
+  const separator = url.includes('?') ? '&' : '?';
+  const qs = newSearchParams.toString();
+  return qs ? `${url}${separator}${qs}` : url;
+}

frontend/packages/project-ide/framework/src/utils/custom-layout.ts

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import {
+  type ApplicationShell,
+  createBoxLayout,
+  type BoxLayout,
+  createSplitLayout,
+  SplitPanel,
+  BoxPanel,
+} from '@coze-project-ide/client';
+
+export const customLayout = (
+  shell: ApplicationShell,
+  uiBuilderPanel: BoxPanel,
+): BoxLayout => {
+  const bottomSplitLayout = createSplitLayout([shell.mainPanel], [1], {
+    orientation: 'vertical',
+    spacing: 0,
+  });
+  shell.bottomSplitLayout = bottomSplitLayout;
+  const middleContentPanel = new SplitPanel({ layout: bottomSplitLayout });
+
+  const leftRightSplitLayout = createBoxLayout(
+    [
+      // 左边的不可伸缩 bar
+      shell.primarySidebar,
+      middleContentPanel,
+    ],
+    [0, 1],
+    {
+      direction: 'left-to-right',
+      spacing: 6,
+    },
+  );
+  const mainDockPanel = new BoxPanel({ layout: leftRightSplitLayout });
+
+  const centerLayout = createBoxLayout(
+    [mainDockPanel, uiBuilderPanel, shell.secondarySidebar],
+    [1, 0, 0],
+    {
+      direction: 'left-to-right',
+    },
+  );
+  const centerPanel = new BoxPanel({ layout: centerLayout });
+
+  return createBoxLayout([shell.topPanel, centerPanel], [0, 1], {
+    direction: 'top-to-bottom',
+    spacing: 0,
+  });
+};

frontend/packages/project-ide/framework/src/utils/index.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export { customLayout } from './custom-layout';
+export { withLazyLoad } from './with-lazy-load';
+export {
+  getResourceByPathname,
+  getResourceByURI,
+  getURIByResource,
+  getURIPathByPathname,
+  getURIByPath,
+  getPathnameByURI,
+  compareURI,
+  getURLByURI,
+} from './resource-tools';
+export { addPreservedSearchParams } from './add-preserved-search-params';

frontend/packages/project-ide/framework/src/utils/resource-tools.ts

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { URI } from '@coze-project-ide/client';
+
+import { URI_SCHEME } from '../constants';
+
+/**
+ * 从给定的 url 字符串中解析出 resourceType 和 resourceId;
+ */
+export const getResourceByPathname = (pathname: string) => {
+  let resourceType: undefined | string;
+  let resourceId: undefined | string;
+
+  const regex = /space\/\d+\/project-ide\/\d+\/([^\/]+)(?:\/([^\/]+))?/;
+  const match = pathname.match(regex);
+
+  if (match) {
+    resourceType = match[1];
+    resourceId = match[2];
+  }
+
+  return {
+    resourceType,
+    resourceId,
+  };
+};
+
+export const getURIPathByPathname = (pathname: string) => {
+  const match = pathname.match(/space\/[^/]+\/project-ide\/[^/]+\/(.*)/);
+  return match ? match[1] : null;
+};
+
+/**
+ * 从 uri 上解析 resourceType 和 resourceId
+ */
+export const getResourceByURI = (uri: URI) => {
+  /**
+   * TODO: 这样解析有些粗暴了，后面要调整一下
+   */
+  const resourceType = uri.path.dir.base;
+  const resourceId = uri.path.base;
+
+  return {
+    resourceType,
+    resourceId,
+  };
+};
+
+export const getPathnameByURI = (uri: URI) => uri.path.toString();
+
+/**
+ * 根据 resourceType 和 resourceId 生成 URI
+ */
+export const getURIByResource = (
+  resourceType: string,
+  resourceId: string,
+  query?: string,
+) =>
+  new URI(
+    `${URI_SCHEME}:///${resourceType}/${resourceId}${query ? `?${query}` : ''}`,
+  );
+
+export const getURIByPath = (path: string) =>
+  new URI(`${URI_SCHEME}:///${path}`);
+
+/**
+ * 将 uri 转化为 url
+ */
+export const getURLByURI = (uri: URI) =>
+  `${uri.path.toString()}${uri.query ? `${uri.query}` : ''}${
+    uri.fragment ? `#${uri.fragment}` : ''
+  }`;
+
+/**
+ * 执行 URI 比对，完全一致返回 true，否则返回 false
+ */
+export const compareURI = (uri1?: URI, uri2?: URI) => {
+  if (!uri1 || !uri2) {
+    return false;
+  }
+  return uri1.toString() === uri2.toString();
+};

frontend/packages/project-ide/framework/src/utils/with-lazy-load.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React, { Suspense, lazy } from 'react';
+
+const withLazyLoad = (
+  importFunc: () => Promise<{ default: React.ComponentType<any> }>,
+  fallback?: React.ReactNode,
+) => {
+  const Component = lazy(importFunc);
+  const LazyComponent = () => (
+    <Suspense fallback={fallback}>
+      <Component />
+    </Suspense>
+  );
+  return LazyComponent;
+};
+
+export { withLazyLoad };