feat: 支持使用记录的响应数据来创建接口

client/src/ApiDetail.jsx

@@ -190,7 +190,7 @@ const ApiDetail = (() => {
           <Capture cb={captureCb} captureImg={state.captureImg} />
           <Swagger httpData={state.httpData} />
           <ApiHistory apiId={state.httpData.apiId} api0={state.httpData.api0} />
-          <WebApi httpData={state.httpData} />
+          <WebApi simpleInfo={state.simpleInfo} httpData={state.httpData} />
           <div className={`optionsPreViewRes ${state.captureImg && `show`}`}>
             {state.captureImg && <img className="captureImg" src={state.captureImg} alt="captureImg"/>}
           </div>

client/src/ApiDetailCom/WebApi.jsx

@@ -30,7 +30,7 @@ const {
   UserOutlined,
 } = icons
 
-function FixedResponse({httpData}) {
+function FixedResponse({httpData, simpleInfo}) {
   const [state, setState] = useState({ // 默认值
     replayDone: true, // 是否重放结束
   });
@@ -42,7 +42,48 @@ function FixedResponse({httpData}) {
   } = ReactRouterDOM
   const history = useHistory()
 
-  function fn() {
+  function historyData() {
+    setState(preState => ({...preState, replayDone: false}))
+    const method = httpData.method
+    const apiId = httpData.apiId
+    const bodyText = httpData.data.res.bodyText
+    const headers = httpData.data.res.lineHeaders.headers
+    const extensionName = simpleInfo.extensionName
+
+    if(extensionName !== `json`) {
+      message.error(`暂不支持 ${extensionName} 格式的数据`)
+      return false
+    }
+
+    const str = [
+      `(req, res) => {`,
+      `res.set(${JSON.stringify({
+        ...headers,
+
+        // 删除调试地址, 因为它在请求时会重新生成
+        [window.serverConfig.apiInHeader]: undefined,
+        [window.serverConfig.apiInHeader + `-remote`]: undefined,
+      }, null, 2)})`,
+      `res.json(${bodyText})`,
+      `}`,
+    ].join(`\n`)
+    console.log(str)
+    http.patch(`${cfg.baseURL}/api/studio/`, {
+      setPath: [`paths`, path, method, `responses`, 200, `example`],
+      data: {
+        useDataType: `custom`,
+        custom: str,
+      }
+    }
+    ).then(res => {
+      message.info(`设置成功`)
+      setTimeout(() => {
+        window.location.reload()
+      }, 500)
+    })
+  }
+
+  function historyId() {
     setState(preState => ({...preState, replayDone: false}))
     const method = httpData.method
     const apiId = httpData.apiId
@@ -63,9 +104,8 @@ function FixedResponse({httpData}) {
 
   function handleMenuClick(e) {
     const handle = {
-      fixed() {
-        fn()
-      },
+      historyData,
+      historyId,
       switch() {
         http.post(`${cfg.baseURL}/api/changeWebApiStatus/`, {api: `${httpData.method} ${httpData.api}`}).then(res => {
           message.info(`操作成功`)
@@ -83,9 +123,10 @@ function FixedResponse({httpData}) {
 
   const menu = (
     <Menu onClick={handleMenuClick}>
-      <Menu.Item key="fixed">
-        {showTitle(`使用此记录`, `总是以这条记录的响应作为此接口的返回值, 这将自动创建或修改接口.`)}
-      </Menu.Item>
+      <Menu.SubMenu key="history" title={showTitle(`使用此记录`, `总是以这条记录的响应作为此接口的返回值, 这将自动创建或修改接口`)}>
+        <Menu.Item key="historyData">{showTitle(`使用数据`, `复制此记录的响应数据来创建接口`)}</Menu.Item>
+        <Menu.Item key="historyId">{showTitle(`使用ID`, `仅使用ID来响应 httpData/request 目录中对应的数据`)}</Menu.Item>
+      </Menu.SubMenu>
       <Menu.Item key="switch" disabled={!httpData.webApi}>
         {(httpData.webApi || {}).disable ? `启用` : `禁用`}
       </Menu.Item>

doc/dev/todo.md

@@ -4,7 +4,7 @@
 - [ ] doc: 如何更新 replayPort 返回的数据?
   - 如果代理服务是 9000, 使用同样的参数再请求一下 9000 端口即可, 因为重放时的数据默认会从最新的请求记录中获取
 ## 功能
-- [ ] feat: 支持使用某个请求记录中的值作为 webApi 的值, 而不是 id 引用
+- [x] feat: 支持使用记录的响应数据来创建接口
   - 因为 id 引用的是 httpHistory 目录中的内容, 但此目录通常又不方便上传到版本控制系统, 所以把请求记录的值直接转换为 webApi, 可方便的多人共享或复用已有的数据.
 - [ ] feat: 支持自定义多个重放时要更新的 header
   - 有些授权字段不一定是 authorization, 可能是其他的一个或多个字段, 这时候可以通过 config.updateHeader 来配置. 重发请求或者在 swagger 界面测试请求时, 都会更新指定的 header 后再发送请求.