Feat(Network): Use curl instead of url as the copy value of a req…

…uest. (issue #410)

CHANGELOG.md

@@ -4,6 +4,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 - `Feat(Log)` Add recycle scrolling and scroll to top/bottom. (PR #570)
 - `Feat(Network)` Add "Start Time" of a request.
+- `Feat(Network)` Use `curl` instead of `url` as the copy value of a request. (issue #410)
 
 
 ## 3.14.7 (2022-09-23)

CHANGELOG_CN.md

@@ -4,6 +4,7 @@
 
 - `Feat(Log)` 新增虚拟滚动列表以提升性能，并支持快速滚动到顶部/底部。 (PR #570)
 - `Feat(Network)` 新增 request 的 "Start Time"（发起时间）。
+- `Feat(Network)` 使用 `curl` 格式作为 request 的复制内容，而非 `url`。 (issue #410)
 
 
 ## 3.14.7 (2022-09-23)

src/network/network.svelte

@@ -4,6 +4,7 @@
   import IconCopy from '../component/iconCopy.svelte';
   import { requestList } from './network.model';
   import Style from './network.less';
+  import type { VConsoleNetworkRequestItem } from './requestItem';
 
   let reqCount = 0;
   const updateReqCount = (list: typeof $requestList) => {
@@ -15,6 +16,15 @@
   const onTapPreview = (reqId: string) => {
     $requestList[reqId].actived = !$requestList[reqId].actived;
   };
+  const onCopyCurl = (req: VConsoleNetworkRequestItem) => {
+    let curl = `curl -X ${req.method}`;
+    if (typeof req.postData === 'string') {
+      curl += ` -d '${req.postData}'`;
+    } else if (typeof req.postData === 'object' && req.postData !== null) {
+      curl += ` -d '${tool.safeJSONStringify(req.postData)}'`;
+    }
+    return `${curl} '${req.url}'`;
+  };
 
   onMount(() => {
     Style.use();
@@ -56,7 +66,7 @@
             <dl class="vc-table-row vc-left-border">
               <dt class="vc-table-col vc-table-col-title">
                 General
-                <i class="vc-table-row-icon"><IconCopy content={req.url} /></i>
+                <i class="vc-table-row-icon"><IconCopy handler={onCopyCurl} content={req} /></i>
               </dt>
             </dl>
             <div class="vc-table-row vc-left-border vc-small">