feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/studio/mockset-editor-adapter/src/components/mockset-editor/index.module.less

@@ -0,0 +1,99 @@
+.mock-tab-container {
+  position: relative;
+  height: 100%;
+}
+
+.editor-with-header {
+  height: calc(100% - 48px);
+}
+
+.mock-tab {
+  cursor: pointer;
+
+  position: relative;
+
+  display: inline-block;
+
+  width: 32px;
+  height: 32px;
+  margin-right: 12px;
+
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 30px;
+  color: var(--semi-color-text-0);
+  text-align: center;
+
+  background: white;
+  border: 1px solid var(--semi-color-border);
+  border-radius: 4px;
+}
+
+.mock-tab_active {
+  color: var(--semi-color-primary);
+  background: white;
+  border-color: var(--semi-color-primary);
+}
+
+.mock-tab-error {
+  position: absolute;
+  top: -7px;
+  right: -7px;
+
+  & svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.mock-tab-header {
+  height: 32px;
+  margin-bottom: 12px;
+}
+
+.mock-tab-mask {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: calc(100% - 48px);
+
+  background-color: rgba(var(--semi-white), 0.8);
+  border: 1px solid transparent;
+  border-radius: 8px;
+
+
+  & span {
+    margin-top: 8px;
+    font-size: 16px;
+    line-height: 24px;
+    color: var(--semi-color-text-3);
+  }
+}
+
+.mock-tab-panels {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.mock-tab-panel_visible {
+  visibility: visible;
+}
+
+.mock-tab-panel_invisible {
+  visibility: hidden;
+}
+
+.mock-tab-panel_absolute {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}

frontend/packages/studio/mockset-editor-adapter/src/components/mockset-editor/index.tsx

@@ -0,0 +1,139 @@
+/*
+ * 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 {
+  useState,
+  useRef,
+  type ForwardedRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+
+import classNames from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import { Toast } from '@coze-arch/bot-semi';
+import { MAX_SUBMIT_LENGTH, calcStringSize } from '@coze-studio/mockset-shared';
+import {
+  type EditorActions,
+  MockDataEditor,
+  type MockDataEditorMarkerInfo,
+  type MockDataEditorProps,
+} from '@coze-studio/mockset-editor';
+
+import s from './index.module.less';
+
+export interface MocksetEditorProps
+  extends Omit<MockDataEditorProps, 'onValidate'> {
+  onValidate?: (isValid: boolean[]) => void;
+  isCreateScene?: boolean;
+  onGenerationStatusChange?: (value: boolean) => void;
+
+  environment: {
+    spaceId?: string;
+    mockSetId?: string;
+    basicParams: unknown;
+  };
+}
+
+interface EditDataConfig {
+  current: number;
+  valid: boolean[];
+  data: string[];
+}
+
+export interface EditorAreaActions {
+  getValue: () => string[];
+  forceStartGenerate?: (...params: unknown[]) => void;
+}
+
+export const MocksetEditor = forwardRef(
+  (props: MocksetEditorProps, ref: ForwardedRef<EditorAreaActions>) => {
+    const {
+      onValidate,
+      mockInfo,
+      environment,
+      isCreateScene,
+      className,
+      ...rest
+    } = props;
+    const editorsRef = useRef<(EditorActions | null)[]>([]);
+
+    const [currentEditConfig, setCurrentEditConfig] = useState<EditDataConfig>({
+      current: 0,
+      valid: [true],
+      data: mockInfo.mergedResultExample ? [mockInfo.mergedResultExample] : [],
+    });
+
+    const validateHandler = (
+      markers: MockDataEditorMarkerInfo[],
+      index: number,
+    ) => {
+      const isDataValid = currentEditConfig.valid.slice();
+      isDataValid[index] = !markers.length;
+      setCurrentEditConfig({
+        ...currentEditConfig,
+        valid: isDataValid,
+      });
+      onValidate?.(isDataValid);
+    };
+
+    const pasteHandler = (index: number) => {
+      const value = editorsRef.current[index]?.getValue();
+      const size = value ? calcStringSize(value) : 0;
+      if (size > MAX_SUBMIT_LENGTH) {
+        Toast.error(I18n.t('mockset_toast_data_size_limit'));
+        return false;
+      }
+    };
+
+    const getValue = () =>
+      editorsRef.current
+        ?.slice(0, currentEditConfig.data.length)
+        .map(editor => editor?.getValue() || '');
+
+    useImperativeHandle(ref, () => ({
+      getValue,
+    }));
+
+    return (
+      <div className={classNames(className, s['mock-tab-container'])}>
+        <div className={s['mock-tab-panels']}>
+          {currentEditConfig.data.map((item, index) => (
+            <MockDataEditor
+              key={index}
+              className={classNames(
+                index === currentEditConfig.current
+                  ? s['mock-tab-panel_visible']
+                  : s['mock-tab-panel_invisible'],
+                index === 0
+                  ? s['mock-tab-panel_static']
+                  : s['mock-tab-panel_absolute'],
+              )}
+              mockInfo={{
+                ...mockInfo,
+                mergedResultExample: item,
+              }}
+              ref={ele => (editorsRef.current[index] = ele)}
+              onValidate={markers => validateHandler(markers, index)}
+              onEditorPaste={() => pasteHandler(index)}
+              {...rest}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  },
+);

frontend/packages/studio/mockset-editor-adapter/src/index.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 {
+  MocksetEditor,
+  type MocksetEditorProps,
+  type EditorAreaActions,
+} from './components/mockset-editor';

frontend/packages/studio/mockset-editor-adapter/src/typings.d.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />