feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/index.module.less

@@ -0,0 +1,114 @@
+/* stylelint-disable declaration-no-important */
+.tool-wrap {
+  min-height: 100%;
+  padding-bottom: 20px;
+  background-color: #f7f7fa;
+
+  :global {
+    .semi-table-row-head {
+      font-size: 12px;
+      color: var(
+        --light-usage-text-color-text-1,
+        rgb(28 29 35 / 80%)
+      ) !important;
+    }
+
+    .semi-steps-item-title-text {
+      font-size: 14px;
+    }
+
+    .semi-table-row.semi-table-row-expanded:last-child {
+      .semi-table-row-cell {
+        border-bottom: 1px solid transparent;
+      }
+    }
+  }
+
+  .header {
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid rgb(29 28 35 / 8%);
+
+    .simple-title {
+      display: flex;
+      align-items: center;
+      height: 32px;
+
+      .title {
+        flex: 1;
+
+        margin-left: 12px;
+
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 32px;
+        color: #1d1c23;
+      }
+    }
+
+    .preview-header {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+
+      .simple-title .title {
+        margin-left: 0;
+      }
+    }
+
+    .breadcrumb {
+      margin-bottom: 24px;
+    }
+  }
+
+  .content {
+    padding: 36px 0 30px;
+  }
+
+  .modal-steps {
+    width: 1008px;
+    margin: 0 auto;
+  }
+
+  .form-wrap {
+    margin: 42px auto 0;
+
+    :global {
+      .semi-form-vertical .semi-form-field:last-child {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  .tool-footer {
+    width: calc(100% - 200px);
+    min-width: 1008px;
+    margin: 0 auto;
+    text-align: right;
+
+    &.step-one {
+      max-width: 1008px;
+      margin: 0 auto;
+    }
+
+    .error-msg {
+      padding: 8px 24px;
+
+      font-size: 14px;
+      line-height: 16px;
+      color: #f93920;
+      text-align: left;
+
+      .link {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 16px;
+        color: #4d53e8;
+      }
+    }
+
+    .footer-content {
+      padding-top: 24px;
+    }
+  }
+}

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/index.tsx

@@ -0,0 +1,354 @@
+/*
+ * 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.
+ */
+ 
+/* eslint-disable @coze-arch/max-line-per-function */
+
+import { type FC, useEffect, useState } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import { cloneDeep } from 'lodash-es';
+import { useUpdateEffect } from 'ahooks';
+import { usePluginStore } from '@coze-studio/bot-plugin-store';
+import {
+  REPORT_EVENTS,
+  REPORT_EVENTS as ReportEventNames,
+} from '@coze-arch/report-events';
+import { useErrorHandler } from '@coze-arch/logger';
+import { Spin, Collapse } from '@coze-arch/coze-design';
+import { CustomError } from '@coze-arch/bot-error';
+import {
+  type APIParameter,
+  type PluginAPIInfo,
+  DebugExampleStatus,
+  type UpdateAPIResponse,
+} from '@coze-arch/bot-api/plugin_develop';
+import { PluginDevelopApi } from '@coze-arch/bot-api';
+import { addDepthAndValue } from '@coze-agent-ide/bot-plugin-tools/pluginModal/utils';
+import { type RenderEnhancedComponentProps } from '@coze-agent-ide/bot-plugin-tools/pluginModal/types';
+import { setEditToolExampleValue } from '@coze-agent-ide/bot-plugin-tools/example/utils';
+
+import { useContentResponse } from './use-content-response';
+import { useContentRequest } from './use-content-request';
+import { useContentBaseInfo } from './use-content-baseinfo';
+import { useContentBaseMore } from './use-content-base-more';
+import { ToolHeader } from './tool-header';
+
+import s from './index.module.less';
+
+export interface ToolDetailPageProps
+  extends Partial<RenderEnhancedComponentProps> {
+  toolID: string;
+  onDebugSuccessCallback?: () => void;
+}
+
+// 页面-编辑插件API
+export const ToolDetailPage: FC<ToolDetailPageProps> = ({
+  toolID,
+  onDebugSuccessCallback,
+  renderDescComponent,
+  renderParamsComponent,
+}) => {
+  //捕获错误信息，跳转统一落地页
+  const capture = useErrorHandler();
+  const [editVersion, setEditVersion] = useState<number>();
+  //插件-API详情
+  const [apiInfo, setApiInfo] = useState<PluginAPIInfo>();
+  const [debugApiInfo, setDebugApiInfo] = useState<PluginAPIInfo>();
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const {
+    canEdit,
+    init,
+    pluginInfo,
+    updatedInfo,
+    wrapWithCheckLock,
+    unlockPlugin,
+    spaceID,
+    pluginID,
+    updatePluginInfoByImmer,
+    version,
+  } = usePluginStore(
+    useShallow(store => ({
+      canEdit: store.canEdit,
+      init: store.init,
+      pluginInfo: store.pluginInfo,
+      updatedInfo: store.updatedInfo,
+      wrapWithCheckLock: store.wrapWithCheckLock,
+      unlockPlugin: store.unlockPlugin,
+      spaceID: store.spaceID,
+      pluginID: store.pluginId,
+      updatePluginInfoByImmer: store.updatePluginInfoByImmer,
+      version: store.version,
+    })),
+  );
+
+  const handleSuccess = (baseResData: UpdateAPIResponse) => {
+    updatePluginInfoByImmer(draft => {
+      if (!draft) {
+        return;
+      }
+      draft.edit_version = baseResData?.edit_version;
+    });
+  };
+
+  // 重置 request 参数
+  const resetRequestParams = (data: PluginAPIInfo) => {
+    const requestParams = cloneDeep(data.request_params as APIParameter[]);
+    if (
+      data?.debug_example_status === DebugExampleStatus.Enable &&
+      data?.debug_example?.req_example
+    ) {
+      setEditToolExampleValue(
+        requestParams,
+        JSON.parse((data as PluginAPIInfo)?.debug_example?.req_example ?? '{}'),
+      );
+    }
+    addDepthAndValue(requestParams);
+    return requestParams;
+  };
+
+  // 设置接口信息（回显和置空）
+  const handleInit = async (useloading = false) => {
+    setApiInfo({
+      ...apiInfo,
+      debug_example_status: DebugExampleStatus.Disable,
+    });
+    useloading && setLoading(true);
+    try {
+      const {
+        api_info = [],
+        msg,
+        edit_version,
+      } = await PluginDevelopApi.GetPluginAPIs({
+        plugin_id: pluginID,
+        api_ids: [toolID],
+        preview_version_ts: version,
+      });
+
+      if (api_info.length > 0) {
+        const apiInfoTemp = api_info.length > 0 ? api_info[0] : {};
+        // debug 的数据 如果有 example 需要回显 入参数据额外处理
+        setDebugApiInfo({
+          ...apiInfoTemp,
+          request_params: resetRequestParams(apiInfoTemp),
+        });
+        // 给对象增加层级标识
+        addDepthAndValue(apiInfoTemp.request_params);
+        addDepthAndValue(apiInfoTemp.response_params);
+        setApiInfo(apiInfoTemp);
+        setEditVersion(edit_version);
+      } else {
+        capture(
+          new CustomError(
+            ReportEventNames.responseValidation,
+            msg || 'GetPluginAPIs error',
+          ),
+        );
+      }
+    } catch (error) {
+      capture(
+        new CustomError(
+          REPORT_EVENTS.PluginInitError,
+          // @ts-expect-error -- linter-disable-autofix
+          `plugin init error: ${error.message}`,
+        ),
+      );
+    }
+    useloading && setLoading(false);
+  };
+
+  // 1.基本信息
+  const {
+    isBaseInfoDisabled,
+    header: baseInfoHeader,
+    itemKey: baseInfoItemKey,
+    extra: baseInfoExtra,
+    content: baseInfoContent,
+    classNameWrap: baseInfoClassNameWrap,
+  } = useContentBaseInfo({
+    space_id: spaceID,
+    plugin_id: pluginID,
+    tool_id: toolID,
+    apiInfo,
+    canEdit,
+    handleInit,
+    wrapWithCheckLock,
+    editVersion,
+    renderDescComponent,
+  });
+
+  // 2 更多设置
+  const {
+    isBaseMoreDisabled,
+    header: baseMoreHeader,
+    itemKey: baseMoreItemKey,
+    extra: baseMoreExtra,
+    content: baseMoreContent,
+    classNameWrap: baseMoreClassNameWrap,
+  } = useContentBaseMore({
+    plugin_id: pluginID,
+    pluginInfo,
+    tool_id: toolID,
+    apiInfo,
+    canEdit,
+    handleInit,
+    wrapWithCheckLock,
+    editVersion,
+    space_id: spaceID,
+    onSuccess: handleSuccess,
+  });
+
+  // 3.设置 request
+  const {
+    isRequestParamsDisabled,
+    itemKey: requestItemKey,
+    header: requestHeader,
+    extra: requestExtra,
+    content: requestContent,
+    classNameWrap: requestClassNameWrap,
+  } = useContentRequest({
+    apiInfo,
+    plugin_id: pluginID,
+    tool_id: toolID,
+    pluginInfo,
+    canEdit,
+    handleInit,
+    wrapWithCheckLock,
+    editVersion,
+    spaceID,
+    onSuccess: handleSuccess,
+    renderParamsComponent,
+  });
+
+  // 4.设置 response
+  const {
+    isResponseParamsDisabled,
+    itemKey: responseItemKey,
+    header: responseHeader,
+    extra: responseExtra,
+    content: responseContent,
+    classNameWrap: responseClassNameWrap,
+  } = useContentResponse({
+    apiInfo,
+    plugin_id: pluginID,
+    tool_id: toolID,
+    editVersion,
+    pluginInfo,
+    canEdit,
+    handleInit,
+    wrapWithCheckLock,
+    debugApiInfo,
+    setDebugApiInfo,
+    spaceID,
+    onSuccess: handleSuccess,
+    renderParamsComponent,
+  });
+
+  const collapseItems = [
+    {
+      header: baseInfoHeader,
+      itemKey: baseInfoItemKey,
+      extra: baseInfoExtra,
+      content: baseInfoContent,
+      classNameWrap: baseInfoClassNameWrap,
+    },
+    {
+      header: baseMoreHeader,
+      itemKey: baseMoreItemKey,
+      extra: baseMoreExtra,
+      content: baseMoreContent,
+      classNameWrap: baseMoreClassNameWrap,
+    },
+    {
+      header: requestHeader,
+      itemKey: requestItemKey,
+      extra: requestExtra,
+      content: requestContent,
+      classNameWrap: requestClassNameWrap,
+    },
+    {
+      header: responseHeader,
+      itemKey: responseItemKey,
+      extra: responseExtra,
+      content: responseContent,
+      classNameWrap: responseClassNameWrap,
+    },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      await init();
+      handleInit(true);
+    })();
+    return () => {
+      unlockPlugin();
+    };
+  }, []);
+
+  // 预览状态解锁，如果有一步为编辑态，则不解锁
+  useUpdateEffect(() => {
+    if (
+      !isBaseInfoDisabled ||
+      !isRequestParamsDisabled ||
+      !isResponseParamsDisabled ||
+      !isBaseMoreDisabled
+    ) {
+      return;
+    }
+    unlockPlugin();
+  }, [
+    isBaseInfoDisabled,
+    isRequestParamsDisabled,
+    isResponseParamsDisabled,
+    isBaseMoreDisabled,
+  ]);
+
+  return !loading ? (
+    <div className={s.toolWrap}>
+      <ToolHeader
+        space_id={spaceID}
+        plugin_id={pluginID}
+        unlockPlugin={unlockPlugin}
+        tool_id={toolID}
+        pluginInfo={pluginInfo}
+        updatedInfo={updatedInfo}
+        apiInfo={apiInfo}
+        editVersion={editVersion || 0}
+        canEdit={canEdit}
+        debugApiInfo={debugApiInfo}
+        onDebugSuccessCallback={onDebugSuccessCallback}
+      />
+      <Collapse
+        keepDOM={true}
+        defaultActiveKey={collapseItems.map(item => item.itemKey)}
+      >
+        {collapseItems.map((item, index) => (
+          <Collapse.Panel
+            className={item.classNameWrap}
+            header={item.header}
+            itemKey={item.itemKey}
+            extra={item.extra}
+            key={`${index}collapse`}
+          >
+            {item.content}
+          </Collapse.Panel>
+        ))}
+      </Collapse>
+    </div>
+  ) : (
+    <Spin size="large" spinning style={{ height: '100%', width: '100%' }} />
+  );
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/tool-header.tsx

@@ -0,0 +1,146 @@
+/*
+ * 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 { useMemo, type FC } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { useFlags } from '@coze-arch/bot-flags';
+import {
+  type GetPluginInfoResponse,
+  type GetUpdatedAPIsResponse,
+  type PluginAPIInfo,
+  PluginType,
+} from '@coze-arch/bot-api/plugin_develop';
+import { IconChevronLeft } from '@douyinfe/semi-icons';
+import { usePluginNavigate } from '@coze-studio/bot-plugin-store';
+import { Button, IconButton, Tooltip } from '@coze-arch/coze-design';
+
+import { OauthButtonAction } from '@/components/oauth-action';
+
+import { useContentDebug } from './use-content-debug';
+
+import s from './index.module.less';
+
+interface ToolHeaderProps {
+  space_id: string;
+  plugin_id: string;
+  unlockPlugin: () => void;
+  tool_id: string;
+  pluginInfo?: GetPluginInfoResponse & { plugin_id?: string };
+  updatedInfo?: GetUpdatedAPIsResponse;
+  apiInfo?: PluginAPIInfo;
+  editVersion: number;
+  canEdit: boolean;
+  debugApiInfo?: PluginAPIInfo;
+  onDebugSuccessCallback?: () => void;
+}
+
+const ToolHeader: FC<ToolHeaderProps> = ({
+  space_id,
+  plugin_id,
+  unlockPlugin,
+  tool_id,
+  pluginInfo,
+  updatedInfo,
+  apiInfo,
+  editVersion,
+  canEdit,
+  debugApiInfo,
+  onDebugSuccessCallback,
+}) => {
+  const resourceNavigate = usePluginNavigate();
+
+  const [FLAGS] = useFlags();
+  const goBack = () => {
+    resourceNavigate.toResource?.('plugin', plugin_id);
+    unlockPlugin();
+  };
+
+  // 管理模拟集
+  const handleManageMockset = () => {
+    resourceNavigate.mocksetList?.(tool_id);
+  };
+
+  const mocksetDisabled = useMemo(
+    () =>
+      pluginInfo?.plugin_type === PluginType.LOCAL ||
+      !pluginInfo?.published ||
+      (pluginInfo?.status &&
+        updatedInfo?.created_api_names &&
+        Boolean(updatedInfo.created_api_names.includes(apiInfo?.name || ''))),
+    [pluginInfo, updatedInfo, apiInfo],
+  );
+
+  const { modalContent: debugModalContent } = useContentDebug({
+    debugApiInfo,
+    canEdit,
+    space_id: space_id || '',
+    plugin_id: plugin_id || '',
+    tool_id: tool_id || '',
+    unlockPlugin,
+    editVersion,
+    pluginInfo,
+    onDebugSuccessCallback,
+  });
+
+  return (
+    <div className={s.header}>
+      <div className={s['simple-title']}>
+        {/* <UIBreadcrumb
+          showTooltip={{
+            width: '160px',
+            opts: {
+              style: { wordBreak: 'break-word' },
+            },
+          }}
+          pluginInfo={pluginInfo?.meta_info}
+          pluginToolInfo={apiInfo}
+          compact={false}
+          className={s.breadcrumb}
+        /> */}
+        <IconButton
+          icon={<IconChevronLeft style={{ color: 'rgba(29, 28, 35, 0.6)' }} />}
+          onClick={goBack}
+          size="small"
+          color="secondary"
+        />
+        <span className={s.title}>{I18n.t('plugin_edit_tool_title')}</span>
+        <OauthButtonAction />
+        {/* 社区版暂不支持该功能 */}
+        {FLAGS['bot.devops.plugin_mockset'] ? (
+          <Tooltip
+            style={{ display: mocksetDisabled ? 'block' : 'none' }}
+            content={I18n.t('unreleased_plugins_tool_cannot_create_mockset')}
+            position="left"
+            trigger="hover"
+          >
+            <Button
+              onClick={handleManageMockset}
+              disabled={mocksetDisabled}
+              color="primary"
+              style={{ marginRight: 8 }}
+            >
+              {I18n.t('manage_mockset')}
+            </Button>
+          </Tooltip>
+        ) : null}
+        {canEdit ? debugModalContent : null}
+      </div>
+    </div>
+  );
+};
+
+export { ToolHeader };

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/use-content-base-more.tsx

@@ -0,0 +1,140 @@
+/*
+ * 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 } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { IconEdit } from '@coze-arch/bot-icons';
+import {
+  type UpdateAPIResponse,
+  type GetPluginInfoResponse,
+  type PluginAPIInfo,
+} from '@coze-arch/bot-api/plugin_develop';
+import { useBaseMore } from '@coze-agent-ide/bot-plugin-tools/useBaseMore';
+import { REQUESTNODE } from '@coze-agent-ide/bot-plugin-tools/pluginModal/config';
+import { Button } from '@coze-arch/coze-design';
+
+import { SecurityCheckFailed } from '@/components/check_failed';
+
+interface UseContentBaseInfoProps {
+  plugin_id: string;
+  pluginInfo?: GetPluginInfoResponse & { plugin_id?: string };
+  tool_id: string;
+  apiInfo?: PluginAPIInfo;
+  space_id: string;
+  canEdit: boolean;
+  handleInit: (loading?: boolean) => Promise<void>;
+  wrapWithCheckLock: (fn: () => void) => () => Promise<void>;
+  editVersion?: number;
+  onSuccess?: (params: UpdateAPIResponse) => void;
+}
+
+export const useContentBaseMore = ({
+  plugin_id,
+  pluginInfo,
+  tool_id,
+  apiInfo,
+  space_id,
+  canEdit,
+  handleInit,
+  wrapWithCheckLock,
+  editVersion,
+  onSuccess,
+}: UseContentBaseInfoProps) => {
+  // 是否显示安全检查失败信息
+  const [showSecurityCheckFailedMsg, setShowSecurityCheckFailedMsg] =
+    useState(false);
+  const [isBaseMoreDisabled, setIsBaseMoreDisabled] = useState(true);
+
+  // 基本信息
+  const { baseInfoNode, submitBaseInfo } = useBaseMore({
+    pluginId: plugin_id || '',
+    pluginMeta: pluginInfo?.meta_info || {},
+    apiId: tool_id,
+    baseInfo: apiInfo,
+    showModal: false,
+    disabled: isBaseMoreDisabled,
+    showSecurityCheckFailedMsg,
+    setShowSecurityCheckFailedMsg,
+    editVersion,
+    pluginType: pluginInfo?.plugin_type,
+    spaceId: space_id,
+    onSuccess,
+  });
+
+  return {
+    isBaseMoreDisabled,
+    header: I18n.t('project_plugin_setup_metadata_more_info'),
+    itemKey: 'baseMore',
+    extra: (
+      <>
+        {showSecurityCheckFailedMsg ? (
+          <SecurityCheckFailed step={REQUESTNODE} />
+        ) : null}
+        {!isBaseMoreDisabled && (
+          <Button
+            color="primary"
+            className="mr-2"
+            onClick={e => {
+              e.stopPropagation();
+              setIsBaseMoreDisabled(true);
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_cancel')}
+          </Button>
+        )}
+        {canEdit && !isBaseMoreDisabled ? (
+          <Button
+            onClick={async e => {
+              e.stopPropagation();
+              const status = await submitBaseInfo();
+              // 更新成功后进入下一步
+              if (status) {
+                handleInit();
+              }
+              setIsBaseMoreDisabled(true);
+            }}
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_save')}
+          </Button>
+        ) : null}
+        {canEdit && isBaseMoreDisabled ? (
+          <Button
+            icon={<IconEdit className="!pr-0" />}
+            color="primary"
+            className="!bg-transparent !coz-fg-secondary"
+            onClick={e => {
+              const el = document.querySelector(
+                '.plugin-tool-detail-baseMore .semi-collapsible-wrapper',
+              ) as HTMLElement;
+              if (parseInt(el?.style?.height) !== 0) {
+                e.stopPropagation();
+              }
+              wrapWithCheckLock(() => {
+                setIsBaseMoreDisabled(false);
+              })();
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_edit')}
+          </Button>
+        ) : null}
+      </>
+    ),
+    content: baseInfoNode,
+    classNameWrap: 'plugin-tool-detail-baseMore',
+  };
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/use-content-baseinfo.tsx

@@ -0,0 +1,133 @@
+/*
+ * 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 } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { type PluginAPIInfo } from '@coze-arch/bot-api/plugin_develop';
+import { IconEdit } from '@coze-arch/bot-icons';
+import { useBaseInfo } from '@coze-agent-ide/bot-plugin-tools/useBaseInfo';
+import { type RenderEnhancedComponentProps } from '@coze-agent-ide/bot-plugin-tools/pluginModal/types';
+import { STARTNODE } from '@coze-agent-ide/bot-plugin-tools/pluginModal/config';
+import { Button } from '@coze-arch/coze-design';
+
+import { SecurityCheckFailed } from '@/components/check_failed';
+
+interface UseContentBaseInfoProps
+  extends Pick<Partial<RenderEnhancedComponentProps>, 'renderDescComponent'> {
+  space_id: string;
+  plugin_id: string;
+  tool_id: string;
+  apiInfo?: PluginAPIInfo;
+  canEdit: boolean;
+  handleInit: (loading?: boolean) => Promise<void>;
+  wrapWithCheckLock: (fn: () => void) => () => Promise<void>;
+  editVersion?: number;
+}
+export const useContentBaseInfo = ({
+  space_id,
+  plugin_id,
+  tool_id,
+  apiInfo,
+  canEdit,
+  handleInit,
+  wrapWithCheckLock,
+  editVersion,
+  renderDescComponent,
+}: UseContentBaseInfoProps) => {
+  // 是否显示安全检查失败信息
+  const [showSecurityCheckFailedMsg, setShowSecurityCheckFailedMsg] =
+    useState(false);
+  const [isBaseInfoDisabled, setIsBaseInfoDisabled] = useState(true);
+
+  // 基本信息
+  const { baseInfoNode, submitBaseInfo } = useBaseInfo({
+    pluginId: plugin_id || '',
+    apiId: tool_id,
+    baseInfo: apiInfo,
+    showModal: false,
+    disabled: isBaseInfoDisabled,
+    showSecurityCheckFailedMsg,
+    setShowSecurityCheckFailedMsg,
+    editVersion,
+    space_id,
+    renderEnhancedComponent: renderDescComponent,
+  });
+
+  return {
+    isBaseInfoDisabled,
+    header: I18n.t('Create_newtool_s1_title'),
+    itemKey: 'baseInfo',
+    extra: (
+      <>
+        {showSecurityCheckFailedMsg ? (
+          <SecurityCheckFailed step={STARTNODE} />
+        ) : null}
+        {!isBaseInfoDisabled && (
+          <Button
+            color="primary"
+            className="mr-2"
+            onClick={e => {
+              e.stopPropagation();
+              setIsBaseInfoDisabled(true);
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_cancel')}
+          </Button>
+        )}
+        {canEdit && !isBaseInfoDisabled ? (
+          <Button
+            onClick={async e => {
+              e.stopPropagation();
+              const status = await submitBaseInfo();
+              // 更新成功后进入下一步
+              if (status) {
+                handleInit();
+              }
+              setIsBaseInfoDisabled(true);
+            }}
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_save')}
+          </Button>
+        ) : null}
+
+        {canEdit && isBaseInfoDisabled ? (
+          <Button
+            icon={<IconEdit className="!pr-0" />}
+            color="primary"
+            className="!bg-transparent !coz-fg-secondary"
+            onClick={e => {
+              const el = document.querySelector(
+                '.plugin-tool-detail-baseInfo .semi-collapsible-wrapper',
+              ) as HTMLElement;
+              if (parseInt(el?.style?.height) !== 0) {
+                e.stopPropagation();
+              }
+              wrapWithCheckLock(() => {
+                setIsBaseInfoDisabled(false);
+              })();
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_edit')}
+          </Button>
+        ) : null}
+      </>
+    ),
+    content: baseInfoNode,
+    classNameWrap: 'plugin-tool-detail-baseInfo',
+  };
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/use-content-debug.tsx

@@ -0,0 +1,130 @@
+/*
+ * 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 } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import {
+  type GetPluginInfoResponse,
+  type PluginAPIInfo,
+} from '@coze-arch/bot-api/plugin_develop';
+import { usePluginNavigate } from '@coze-studio/bot-plugin-store';
+import { type STATUS } from '@coze-agent-ide/bot-plugin-tools/pluginModal/types';
+import { Debug } from '@coze-agent-ide/bot-plugin-tools/pluginModal/debug';
+import { useDebugFooter } from '@coze-agent-ide/bot-plugin-tools/example/useDebugFooter';
+import { IconCozPlayFill } from '@coze-arch/coze-design/icons';
+import { Button, Modal } from '@coze-arch/coze-design';
+
+interface UseContentDebugProps {
+  debugApiInfo?: PluginAPIInfo;
+  pluginInfo?: GetPluginInfoResponse & { plugin_id?: string };
+  canEdit: boolean;
+  space_id: string;
+  plugin_id: string;
+  tool_id: string;
+  unlockPlugin: () => void;
+  editVersion?: number;
+  onDebugSuccessCallback?: () => void;
+}
+
+export const useContentDebug = ({
+  debugApiInfo,
+  canEdit,
+  plugin_id,
+  tool_id,
+  unlockPlugin,
+  editVersion,
+  pluginInfo,
+  onDebugSuccessCallback,
+}: UseContentDebugProps) => {
+  const resourceNavigate = usePluginNavigate();
+
+  const [dugStatus, setDebugStatus] = useState<STATUS | undefined>();
+  const [visible, setVisible] = useState(false);
+  const [loading] = useState<boolean>(false);
+
+  const { debugFooterNode, setDebugExample, debugExample } = useDebugFooter({
+    apiInfo: debugApiInfo,
+    loading,
+    dugStatus,
+    btnLoading: false,
+    nextStep: () => {
+      resourceNavigate.toResource?.('plugin', plugin_id);
+
+      unlockPlugin();
+    },
+    editVersion,
+  });
+
+  return {
+    itemKey: 'tool_debug',
+    header: I18n.t('Create_newtool_s4_debug'),
+    extra: <>{canEdit ? debugFooterNode : null}</>,
+    content:
+      debugApiInfo && tool_id ? (
+        <Debug
+          pluginType={pluginInfo?.plugin_type}
+          disabled={false} // 是否可调试
+          setDebugStatus={setDebugStatus}
+          pluginId={String(plugin_id)}
+          apiId={String(tool_id)}
+          apiInfo={debugApiInfo as PluginAPIInfo}
+          pluginName={String(pluginInfo?.meta_info?.name)}
+          setDebugExample={setDebugExample}
+          debugExample={debugExample}
+        />
+      ) : (
+        <></>
+      ),
+    modalContent: (
+      <>
+        {debugApiInfo && tool_id ? (
+          <Button
+            onClick={() => {
+              setVisible(true);
+            }}
+            icon={<IconCozPlayFill />}
+            color="highlight"
+          >
+            {I18n.t('project_plugin_testrun')}
+          </Button>
+        ) : null}
+        <Modal
+          title={I18n.t('project_plugin_testrun')}
+          width={1000}
+          visible={visible}
+          onOk={() => setVisible(false)}
+          onCancel={() => setVisible(false)}
+          closeOnEsc={true}
+          footer={debugFooterNode}
+        >
+          <Debug
+            pluginType={pluginInfo?.plugin_type}
+            disabled={false} // 是否可调试
+            setDebugStatus={setDebugStatus}
+            pluginId={String(plugin_id)}
+            apiId={String(tool_id)}
+            apiInfo={debugApiInfo as PluginAPIInfo}
+            pluginName={String(pluginInfo?.meta_info?.name)}
+            setDebugExample={setDebugExample}
+            debugExample={debugExample}
+            onSuccessCallback={onDebugSuccessCallback}
+          />
+        </Modal>
+      </>
+    ),
+  };
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/use-content-request.tsx

@@ -0,0 +1,146 @@
+/*
+ * 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 } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { IconEdit } from '@coze-arch/bot-icons';
+import {
+  PluginType,
+  type UpdateAPIResponse,
+  type GetPluginInfoResponse,
+  type PluginAPIInfo,
+} from '@coze-arch/bot-api/plugin_develop';
+import { useRequestParams } from '@coze-agent-ide/bot-plugin-tools/useRequestParams';
+import { type RenderEnhancedComponentProps } from '@coze-agent-ide/bot-plugin-tools/pluginModal/types';
+import { RESPONSENODE } from '@coze-agent-ide/bot-plugin-tools/pluginModal/config';
+import { Button } from '@coze-arch/coze-design';
+
+import { SecurityCheckFailed } from '@/components/check_failed';
+
+interface UseContentRequestProps
+  extends Pick<Partial<RenderEnhancedComponentProps>, 'renderParamsComponent'> {
+  apiInfo?: PluginAPIInfo;
+  plugin_id: string;
+  tool_id: string;
+  pluginInfo?: GetPluginInfoResponse & { plugin_id?: string };
+  canEdit: boolean;
+  handleInit: () => Promise<void>;
+  wrapWithCheckLock: (fn: () => void) => () => Promise<void>;
+  editVersion?: number;
+  spaceID: string;
+  onSuccess?: (params: UpdateAPIResponse) => void;
+}
+
+export const useContentRequest = ({
+  apiInfo,
+  plugin_id,
+  tool_id,
+  pluginInfo,
+  canEdit,
+  handleInit,
+  wrapWithCheckLock,
+  editVersion,
+  spaceID,
+  onSuccess,
+  renderParamsComponent,
+}: UseContentRequestProps) => {
+  // 是否显示安全检查失败信息
+  const [showSecurityCheckFailedMsg, setShowSecurityCheckFailedMsg] =
+    useState(false);
+  const [isRequestParamsDisabled, setIsRequestParamsDisabled] = useState(true);
+  // 设置请求参数
+  const { requestParamsNode, submitRequestParams, nlTool } = useRequestParams({
+    apiInfo,
+    pluginId: plugin_id || '',
+    requestParams: apiInfo?.request_params,
+    apiId: tool_id,
+    disabled: isRequestParamsDisabled,
+    showSecurityCheckFailedMsg,
+    setShowSecurityCheckFailedMsg,
+    editVersion,
+    functionName:
+      pluginInfo?.plugin_type === PluginType.LOCAL
+        ? apiInfo?.function_name
+        : undefined,
+    spaceID,
+    onSuccess,
+    renderEnhancedComponent: renderParamsComponent,
+  });
+  return {
+    isRequestParamsDisabled,
+    itemKey: 'request',
+    header: I18n.t('Create_newtool_s2'),
+    extra: (
+      <>
+        {showSecurityCheckFailedMsg ? (
+          <SecurityCheckFailed step={RESPONSENODE} />
+        ) : null}
+        {!isRequestParamsDisabled ? nlTool : null}
+        {!isRequestParamsDisabled ? (
+          <Button
+            onClick={e => {
+              e.stopPropagation();
+              setIsRequestParamsDisabled(true);
+            }}
+            color="primary"
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_cancel')}
+          </Button>
+        ) : null}
+        {canEdit && !isRequestParamsDisabled ? (
+          <Button
+            onClick={async e => {
+              e.stopPropagation();
+              const status = await submitRequestParams();
+              // 更新成功后进入下一步
+              if (status) {
+                handleInit();
+                setIsRequestParamsDisabled(true);
+              }
+            }}
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_save')}
+          </Button>
+        ) : null}
+        {canEdit && isRequestParamsDisabled ? (
+          <Button
+            icon={<IconEdit className="!pr-0" />}
+            color="primary"
+            className="!bg-transparent !coz-fg-secondary"
+            onClick={e => {
+              const el = document.querySelector(
+                '.plugin-tool-detail-request .semi-collapsible-wrapper',
+              ) as HTMLElement;
+              if (parseInt(el?.style?.height) !== 0) {
+                e.stopPropagation();
+              }
+              wrapWithCheckLock(() => {
+                setIsRequestParamsDisabled(false);
+              })();
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_edit')}
+          </Button>
+        ) : null}
+      </>
+    ),
+    content: requestParamsNode,
+    classNameWrap: 'plugin-tool-detail-request',
+  };
+};

frontend/packages/agent-ide/bot-plugin/entry/src/components/plugin-tool-detail/use-content-response.tsx

@@ -0,0 +1,173 @@
+/*
+ * 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.
+ */
+ 
+/* eslint-disable complexity */
+
+import { useEffect, useState } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { IconEdit } from '@coze-arch/bot-icons';
+import {
+  PluginType,
+  type GetPluginInfoResponse,
+  type PluginAPIInfo,
+  DebugExampleStatus,
+  type UpdateAPIResponse,
+} from '@coze-arch/bot-api/plugin_develop';
+import { useResponseParams } from '@coze-agent-ide/bot-plugin-tools/useResponseParams';
+import { type RenderEnhancedComponentProps } from '@coze-agent-ide/bot-plugin-tools/pluginModal/types';
+import { RESPONSENODE } from '@coze-agent-ide/bot-plugin-tools/pluginModal/config';
+import { Button } from '@coze-arch/coze-design';
+
+import { OauthButtonAction } from '@/components/oauth-action';
+import { SecurityCheckFailed } from '@/components/check_failed';
+
+interface UseContentResponseProps
+  extends Pick<Partial<RenderEnhancedComponentProps>, 'renderParamsComponent'> {
+  apiInfo?: PluginAPIInfo;
+  plugin_id: string;
+  tool_id: string;
+  editVersion?: number;
+  pluginInfo?: GetPluginInfoResponse & { plugin_id?: string };
+  canEdit: boolean;
+  handleInit: (loading?: boolean) => Promise<void>;
+  wrapWithCheckLock: (fn: () => void) => () => Promise<void>;
+  debugApiInfo?: PluginAPIInfo;
+  setDebugApiInfo: (apiInfo: PluginAPIInfo) => void;
+  spaceID: string;
+  onSuccess?: (params: UpdateAPIResponse) => void;
+}
+
+export const useContentResponse = ({
+  apiInfo,
+  plugin_id,
+  tool_id,
+  editVersion,
+  pluginInfo,
+  canEdit,
+  handleInit,
+  wrapWithCheckLock,
+  debugApiInfo,
+  setDebugApiInfo,
+  spaceID,
+  onSuccess,
+  renderParamsComponent,
+}: UseContentResponseProps) => {
+  // 是否显示安全检查失败信息
+  const [showSecurityCheckFailedMsg, setShowSecurityCheckFailedMsg] =
+    useState(false);
+  const [isResponseParamsDisabled, setIsResponseParamsDisabled] =
+    useState(true);
+  // 第三步，设置相应参数的hooks组件
+  const { responseParamsNode, submitResponseParams, extra } = useResponseParams(
+    {
+      apiInfo,
+      pluginId: plugin_id || '',
+      responseParams: apiInfo?.response_params,
+      requestParams: apiInfo?.request_params,
+      apiId: tool_id || '',
+      disabled: isResponseParamsDisabled,
+      showSecurityCheckFailedMsg,
+      setShowSecurityCheckFailedMsg,
+      editVersion,
+      pluginType: pluginInfo?.plugin_type,
+      functionName:
+        pluginInfo?.plugin_type === PluginType.LOCAL
+          ? apiInfo?.function_name
+          : undefined,
+      spaceID,
+      onSuccess,
+      renderEnhancedComponent: renderParamsComponent,
+    },
+  );
+
+  // 处理 debug 时 example数据先显示后隐藏的问题
+  useEffect(() => {
+    if (!isResponseParamsDisabled) {
+      setDebugApiInfo({
+        ...debugApiInfo,
+        debug_example: {},
+        debug_example_status: DebugExampleStatus.Disable,
+      });
+    }
+  }, [isResponseParamsDisabled]);
+
+  return {
+    isResponseParamsDisabled,
+    header: I18n.t('Create_newtool_s3_Outputparameters'),
+    itemKey: 'response',
+    extra: (
+      <>
+        {showSecurityCheckFailedMsg ? (
+          <SecurityCheckFailed step={RESPONSENODE} />
+        ) : null}
+        {!isResponseParamsDisabled && canEdit ? <OauthButtonAction /> : null}
+        {!isResponseParamsDisabled ? extra : null}
+        {!isResponseParamsDisabled ? (
+          <Button
+            onClick={e => {
+              e.stopPropagation();
+              setIsResponseParamsDisabled(true);
+            }}
+            color="primary"
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_cancel')}
+          </Button>
+        ) : null}
+        {canEdit && !isResponseParamsDisabled ? (
+          <Button
+            onClick={async e => {
+              e.stopPropagation();
+              const status = await submitResponseParams();
+              // 更新成功后进入下一步
+              if (status) {
+                handleInit();
+                setIsResponseParamsDisabled(true);
+              }
+            }}
+            className="mr-2"
+          >
+            {I18n.t('project_plugin_setup_metadata_save')}
+          </Button>
+        ) : null}
+
+        {canEdit && isResponseParamsDisabled ? (
+          <Button
+            icon={<IconEdit className="!pr-0" />}
+            color="primary"
+            className="!bg-transparent !coz-fg-secondary"
+            onClick={e => {
+              const el = document.querySelector(
+                '.plugin-tool-detail-response .semi-collapsible-wrapper',
+              ) as HTMLElement;
+              if (parseInt(el?.style?.height) !== 0) {
+                e.stopPropagation();
+              }
+              wrapWithCheckLock(() => {
+                setIsResponseParamsDisabled(false);
+              })();
+            }}
+          >
+            {I18n.t('project_plugin_setup_metadata_edit')}
+          </Button>
+        ) : null}
+      </>
+    ),
+    content: responseParamsNode,
+    classNameWrap: 'plugin-tool-detail-response',
+  };
+};