diff --git a/.eslintignore b/.eslintignore
index 290e587..4e12bc4 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,3 +6,4 @@ lib
 tests
 
 *.js
+*.vue
diff --git a/client/PluginStatus.vue b/client/PluginStatus.vue
new file mode 100644
index 0000000..06ccea6
--- /dev/null
+++ b/client/PluginStatus.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {inject} from 'vue';
+import {formatSize} from "./size";
+import {useRpc} from "@cordisjs/client";
+
+const rpc = useRpc();
+const current: any = inject('manager.settings.current')
+</script>
+
+<template>
+  <div class="flex flex-gap-4 flex-col">
+    <div class="flex flex-gap-2">
+      <div>HTTP <span style="color:green">GET</span> 请求</div>
+      <div> {{ rpc['stats']?.[current.value.path]?.getCount ?? 0 }} 个 ↑{{formatSize(rpc['stats']?.[current.value.path]?.getCount ?? 0)}} ↓{{formatSize(rpc['stats']?.[current.value.path]?.getCount ?? 0)}}</div>
+    </div>
+    <div class="flex flex-gap-2">
+      <div>HTTP <span style="color:red">POST</span> 请求</div>
+      <div> {{ rpc['stats']?.[current.value.path]?.postCount ?? 0 }} 个 ↑{{formatSize(rpc['stats']?.[current.value.path]?.postUpload ?? 0)}} ↓{{formatSize(rpc['stats']?.[current.value.path]?.postDownload ?? 0)}}</div>
+    </div>
+
+    <div class="flex flex-gap-2">
+      <div>HTTP 其他 请求</div>
+      <div> {{ rpc['stats']?.[current.value.path]?.otherCount ?? 0 }} 个 ↑{{formatSize(rpc['stats']?.[current.value.path]?.otherUpload ?? 0)}} ↓{{formatSize(rpc['stats']?.[current.value.path]?.otherDownload ?? 0)}}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/client/components/CaptureButton.vue b/client/components/CaptureButton.vue
new file mode 100644
index 0000000..d0c26c2
--- /dev/null
+++ b/client/components/CaptureButton.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {inject} from "vue"
+import Button from "primevue/button";
+import {send, useRpc} from "@cordisjs/client";
+import type {HttpSummary} from "../../src/data";
+
+const model = useRpc<HttpSummary>();
+const toast : (severity:string, summary:string, detail:string)=>void = inject("toast");
+async function startCapture(){
+  if(!await send('http/capture.start'))
+    return;
+  toast("success","操作成功","HTTP 请求捕获已开始");
+}
+
+async function stopCapture(){
+  if(!await send('http/capture.stop'))
+    return;
+  toast("success","操作成功","HTTP 请求捕获已停止");
+}
+</script>
+<template>
+  <Button icon="pi pi-camera" class="mr-2" severity="secondary" size="small" text v-tooltip.bottom="'捕获 HTTP 请求'"
+          v-if="!model.captureEnabled" @click="startCapture()"/>
+  <Button icon="pi pi-stop" class="mr-2" severity="secondary" size="small" text v-tooltip.bottom="'捕获 HTTP 请求'"
+          v-else @click="stopCapture()"/>
+</template>
diff --git a/client/components/CaptureListMenu.vue b/client/components/CaptureListMenu.vue
new file mode 100644
index 0000000..0cab116
--- /dev/null
+++ b/client/components/CaptureListMenu.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Button from "primevue/button";
+import CaptureButton from "./CaptureButton.vue";
+import {send} from "@cordisjs/client";
+async function clearCapture(){
+  if(!await send('http/capture.clear'))
+    return;
+}
+</script>
+
+<template>
+  <CaptureButton/>
+  <Button icon="pi pi-trash" class="mr-2" severity="secondary" size="small" text v-tooltip.bottom="'清空捕获的请求'" @click="clearCapture"/>
+</template>
+
diff --git a/client/components/HttpTools.vue b/client/components/HttpTools.vue
new file mode 100644
index 0000000..03d8504
--- /dev/null
+++ b/client/components/HttpTools.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import MainMenu from "./MainMenu.vue";
+import RequestList from "./RequestList.vue";
+import Splitter from "primevue/splitter";
+import SplitterPanel from "primevue/splitterpanel";
+import HttpEditor from "./editors/HttpEditor.vue";
+import {ref,computed,watch} from "vue";
+import {useRpc} from '@cordisjs/client'
+const model = useRpc<any>();
+const capturedRequests = computed(()=>([
+  {
+    label: '捕获',
+    type: 'capture',
+    items: model.value?.capture.filter(t=>!t.originalRequest).map(t=>({...t, type:'capture'})) ?? [],
+    menu: CaptureListMenu
+  }
+]))
+const userRequests = computed(()=>([
+  {
+    label: '用户',
+    type: 'user',
+    items: model.value?.user.map(t=>({...t, type:'user'})) ?? [],
+  },
+  {
+    label: '历史',
+    type: 'capture',
+    items: model.value?.capture.filter(t=>t.originalRequest).map(t=>({...t, type:'capture'})) ?? [],
+  }
+]))
+import Toast from "primevue/toast";
+import {provide} from 'vue'
+import {useToast} from "primevue/usetoast";
+import HttpEditorProxy from "./editors/HttpEditorProxy.vue";
+import CaptureListMenu from "./CaptureListMenu.vue";
+const toast = useToast()
+provide('toast',(severity:"success" | "info" | "warn" | "error" | "secondary" | "contrast", summary:string, detail:string)=>{
+  toast.add({
+    severity: severity,
+    summary: summary,
+    detail: detail,
+    life: 5000
+  })
+})
+
+const current = ref();
+const currentModel = ref();
+const mode = ref();
+const proxyHandler = ref();
+
+const unsaved = ref();
+provide('request_list', model);
+</script>
+
+<template>
+  <div style="display: flex;flex-direction: column;flex: 1 1 0">
+    <Toast />
+    <MainMenu v-model:mode="mode" v-model="current" :unsaved="unsaved" @save="()=>proxyHandler.save()"/>
+    <div style="display: flex;flex-direction: row;flex: 1 1 0;overflow: hidden;">
+      <Splitter style="flex: 1 1 0;width: 100%">
+        <SplitterPanel :size="20" style="min-width: 300px">
+          <RequestList :requests="mode == 'capture' ? capturedRequests : userRequests" v-model="current"/>
+        </SplitterPanel>
+        <SplitterPanel :size="80">
+          <HttpEditorProxy
+            v-if="current"
+            v-model="current"
+            v-model:mode="mode"
+            :requests="mode == 'capture' ? capturedRequests : userRequests"
+            v-model:unsaved="unsaved"
+            ref="proxyHandler"
+          />
+        </SplitterPanel>
+      </Splitter>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/client/components/MainMenu.vue b/client/components/MainMenu.vue
new file mode 100644
index 0000000..1c5b5f8
--- /dev/null
+++ b/client/components/MainMenu.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import {watch,ref,defineProps, defineEmits} from "vue"
+import {send} from "@cordisjs/client";
+
+import Toolbar from "primevue/toolbar";
+import Button from "primevue/button";
+import SplitButton from "primevue/splitbutton";
+import type {HttpSummary} from "../../src/data";
+import CaptureButton from "./CaptureButton.vue";
+import SelectButton from "primevue/selectbutton";
+import Uploader from "./Uploader.vue";
+import Popover from "primevue/popover";
+
+const props = defineProps<{
+  unsaved: boolean
+}>();
+
+const model = defineModel<any>();
+
+const mode = defineModel<string>('mode');
+
+const emit = defineEmits(['save']);
+
+watch(mode, (value)=>{
+  if(value != 'capture' && value != 'test'){
+    mode.value = 'capture';
+  }
+},{immediate:true})
+
+const pop = ref<any>()
+
+
+async function sendRequest(){
+  await send('http/request.make', {requestId: model.value.id})
+}
+
+function createRequest(){
+  send('http/request.create', {
+    host:"",
+    method:"GET",
+    url:"",
+    path:"",
+    requestHeaders:{},
+    requestBody:""
+  });
+}
+</script>
+<template>
+
+  <Toolbar>
+    <template #start>
+      <Button icon="pi pi-plus" class="mr-2" severity="secondary" text v-tooltip.bottom="'创建 HTTP 请求'" @click="createRequest"/>
+      <Button icon="pi pi-upload" severity="secondary" text v-tooltip.bottom="'上传已有 HTTP 请求'" @click="(e)=>pop.toggle(e)"/>
+      <Popover ref="pop" style="padding: 0">
+        <Uploader/>
+      </Popover>
+      <CaptureButton v-if="mode == 'capture'"/>
+      <div v-else style="width: 3rem"></div>
+    </template>
+
+    <template #center>
+      <SelectButton v-model="mode" :options="[{name:'捕获模式', value:'capture'},{name:'测试模式', value: 'test'}]" optionLabel="name" optionValue="value" :allowEmpty="false" aria-labelledby="basic" />
+    </template>
+
+    <template #end>
+      <template v-if="model">
+        <Button label="发送" size="large" v-if="!props.unsaved && mode != 'capture'" @click="sendRequest"></Button>
+        <Button label="保存" size="large" v-else @click="emit('save')"></Button>
+      </template>
+      <span v-else style="height:2.75rem;width: 4rem"></span>
+    </template>
+  </Toolbar>
+</template>
diff --git a/client/components/RequestList.vue b/client/components/RequestList.vue
new file mode 100644
index 0000000..90e727a
--- /dev/null
+++ b/client/components/RequestList.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import ListBox from "primevue/listbox";
+import Tag from 'primevue/tag';
+import InputText from "primevue/inputtext";
+import InputGroup from "primevue/inputgroup";
+import Button from "primevue/button";
+import IconField from "primevue/iconfield";
+import InputIcon from "primevue/inputicon";
+import ContextMenu from "primevue/contextmenu";
+
+import {computed,ref,watch,defineModel} from 'vue'
+import {getHttpMethodColor} from "./editors/http/colors";
+import {send} from '@cordisjs/client'
+
+const model = defineModel<any>();
+const props = defineProps<{
+  requests?: any
+}>()
+
+const menu = ref<{show:(event:any)=>void}>(null);
+const menuModel = ([
+  {
+    label: '删除',
+    icon: 'pi pi-trash',
+    command: ()=>{
+      send('http/request.delete', itemRightClicked.value)
+    }
+  },
+  {
+    label: '下载',
+    icon: 'pi pi-download',
+    command: ()=>{
+      send('http/request', itemRightClicked.value).then((data)=>{
+        let blob = new Blob([JSON.stringify(data)]);
+        let objectURL = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = objectURL;
+        link.download = "request.json";
+        link.click();
+      })
+    }
+  }
+]);
+
+const listBoxOptions = computed(()=>props.requests)
+
+const itemRightClicked = ref(null);
+
+function displayMenu(event, item){
+  itemRightClicked.value = item;
+  menu.value.show(event);
+}
+
+const filter = ref<string>("");
+
+function useFilter(request:any){
+    if(filter.value.length == 0)
+      return true;
+    if(request.host && request.host.includes(filter.value)){
+      return true;
+    }
+    if(request.path && request.path.includes(filter.value)){
+      return true;
+    }
+    if(request.path && request.host && (request.host + request.path).includes(filter.value)){
+      return true;
+    }
+    return false;
+}
+const filteredOptions = computed(()=>{
+  return listBoxOptions.value.map(t=>({...t,items:t.items.filter(item=>useFilter(item))}));
+})
+</script>
+
+<template>
+  <div style="height: 100%;width: 100%">
+    <div style="margin:4px">
+      <InputGroup style="width: 100%">
+        <IconField style="width: 100%">
+          <InputIcon class="pi pi-search" />
+          <InputText v-model="filter" type="text" placeholder="输入过滤器" style="width: 100%"/>
+        </IconField>
+        <Button icon="pi pi-filter"></Button>
+      </InputGroup>
+    </div>
+    <ListBox
+      v-model="model"
+      :options="filteredOptions"
+      :dataKey="(o)=>o.type + '.' + o.id"
+      optionGroupLabel="label"
+      optionGroupChildren="items"
+      class="p-w-4 p-rb"
+      :virtualScrollerOptions="{ itemSize: 64 }"
+      listStyle="height:calc(100% - 20px)"
+    >
+      <template #optiongroup="slotProps">
+        <div style="display: flex; flex-direction: row">
+          <div>{{ slotProps.option.label }} ({{slotProps.option?.items?.length ?? 0}})</div>
+          <div style="flex:1"></div>
+          <div v-if="slotProps.option.menu">
+            <component :is="slotProps.option.menu"></component>
+          </div>
+        </div>
+      </template>
+      <template #option="slotProps">
+        <div @contextmenu="(e)=>displayMenu(e,{id:slotProps.option.id, type: slotProps.option.type})" style="width: 100%">
+          <div style="display: flex; flex-direction: row;">
+            <Tag
+              :value="slotProps.option.method?.toUpperCase()"
+              :severity="getHttpMethodColor(slotProps.option.method)"
+              style="font-size: 12px;padding:0.2rem 0.4rem"
+            ></Tag>
+            <div style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">
+              {{
+                (slotProps.option.path ?
+                  (slotProps.option.path.startsWith('/') ?
+                    slotProps.option.path : '/'+slotProps.option.path)
+                  : '/'
+                )
+              }}</div>
+          </div>
+          <span style="font-size:12px">{{ slotProps.option?.host ?? 'localhost' }}</span>
+        </div>
+      </template>
+    </ListBox>
+  </div>
+  <ContextMenu ref="menu" :model="menuModel"/>
+</template>
+
+<style scoped>
+.p-w-4{
+  width: 100%;
+}
+.p-rb{
+  border: none;
+  border-right: 1px solid var(--p-listbox-border-color);
+  border-radius: 0;
+  box-shadow: none;
+  height:100%;
+}
+</style>
+
+<style>
+.p-virtualscroller::-webkit-scrollbar{
+  width: 6px;
+  height:6px;
+}
+
+.p-virtualscroller::-webkit-scrollbar-thumb{
+  background: #cccccc;
+}
+
+.p-rb > .p-listbox-list-container > .p-virtualscroller > .p-virtualscroller-content > .p-listbox-option-group{
+  height:48px !important;
+}
+</style>
diff --git a/client/components/Uploader.vue b/client/components/Uploader.vue
new file mode 100644
index 0000000..5f6141d
--- /dev/null
+++ b/client/components/Uploader.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useToast } from "primevue/usetoast";
+import FileUpload from "primevue/fileupload";
+import ProgressBar from "primevue/progressbar";
+import Button from "primevue/button";
+import Badge from "primevue/badge";
+import {send} from "@cordisjs/client";
+const toast = useToast();
+
+const totalSize = ref(0);
+const totalSizePercent = ref(0);
+const files = ref([]);
+const uploading = ref([]);
+const uploadedFiles = ref([]);
+
+const onRemoveTemplatingFile = (file, removeFileCallback, index) => {
+  removeFileCallback(index);
+  totalSize.value -= parseInt(formatSize(file.size));
+  totalSizePercent.value = totalSize.value / 10;
+};
+
+const onSelectedFiles = (event) => {
+  files.value = event.files;
+  files.value.forEach((file) => {
+    totalSize.value += parseInt(formatSize(file.size));
+  });
+};
+
+
+
+const onTemplatedUpload = (data) => {
+  console.info("UPLOADED");
+  // toast.add({ severity: "info", summary: "Success", detail: "File Uploaded", life: 3000 });
+  console.info(data);
+};
+
+const formatSize = (bytes) => {
+  const k = 1024;
+  const dm = 3;
+  const sizes = ['B','kB','MB','GB','TB','PB'];
+
+  if (bytes === 0) {
+    return `0 ${sizes[0]}`;
+  }
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+  return `${formattedSize} ${sizes[i]}`;
+};
+
+function uploadRequestToServer(event:{files:File[]}){
+  console.info(event);
+  uploading.value.push(...event.files);
+  uploadAll(event.files);
+}
+
+function uploadAll(files:File[]){
+  files.forEach((f)=>{
+    f.text().then((text)=>{
+      return send('http/request.create', JSON.parse(text));
+    }).then(()=>{
+      const uploadIndex = uploading.value.findIndex(uf=>uf.name == f.name);
+      if(uploadIndex != -1){
+        uploading.value.splice(uploadIndex, 1);
+      }
+      uploadedFiles.value.push(f);
+    })
+  })
+}
+</script>
+
+<template>
+    <div style="width: 30rem">
+      <FileUpload name="uploadedRequest[]" customUpload @uploader="uploadRequestToServer" @upload="onTemplatedUpload($event)" :multiple="true" accept="application/json" :maxFileSize="1000000" @select="onSelectedFiles">
+        <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
+          <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
+            <div class="flex gap-2">
+              <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
+              <Button @click="uploadCallback()" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
+              <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
+            </div>
+          </div>
+        </template>
+        <template #content="{ files, removeUploadedFileCallback, removeFileCallback }">
+          <div class="flex flex-col gap-8 pt-4">
+            <div v-if="files.length > 0">
+              <h5>Pending</h5>
+              <div class="flex flex-wrap gap-4">
+                <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-row border border-surface items-center gap-4">
+                  <span class="font-semibold text-ellipsis max-w-30 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                  <span>{{ formatSize(file.size) }}</span>
+                  <Badge value="Pending" severity="warn" />
+                  <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
+                </div>
+              </div>
+            </div>
+            <div v-if="uploading.length > 0">
+              <h5>Uploading</h5>
+              <div class="flex flex-wrap gap-4">
+                <div v-for="(file, index) of uploading" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                  <div class="flex flex-row gap-4">
+                    <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                    <div>{{ formatSize(file.size) }}</div>
+                    <div>0%</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-if="uploadedFiles.length > 0">
+              <h5>Completed</h5>
+              <div class="flex flex-wrap gap-4">
+                <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-row border border-surface items-center gap-4">
+                  <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                  <div>{{ formatSize(file.size) }}</div>
+                  <Badge value="Completed" class="mt-4" severity="success" />
+                  <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template #empty>
+          <div class="flex items-center justify-center flex-col">
+            <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
+            <p class="mt-6 mb-0">拖拽文件到此处以上传</p>
+          </div>
+        </template>
+      </FileUpload>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/client/components/editors/HttpEditor.vue b/client/components/editors/HttpEditor.vue
new file mode 100644
index 0000000..55534f3
--- /dev/null
+++ b/client/components/editors/HttpEditor.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import Tabs from "primevue/tabs";
+import Tab from "primevue/tab";
+import TabPanel from "primevue/tabpanel";
+import TabPanels from "primevue/tabpanels";
+import TabList from "primevue/tablist";
+import InputGroup from "primevue/inputgroup";
+import Select from "primevue/select";
+import InputNumber from "primevue/inputnumber";
+import InputGroupAddon from "primevue/inputgroupaddon";
+import HttpRequestEditor from "./http/HttpRequestEditor.vue";
+import HttpResponsePreviewer from "./http/HttpResponsePreviewer.vue";
+import InputText from "primevue/inputtext";
+import {computed, defineModel, ref, watch, inject} from 'vue'
+import {getHttpMethodColor} from "./http/colors";
+import Tag from "primevue/tag";
+
+const model = defineModel<any>('request');
+
+const props = defineProps<{
+  response: any
+}>();
+
+const identifier = defineModel<any>('identifier');
+
+const method = computed({
+  get(){
+    return model.value.method?.toUpperCase()
+  },
+  set(value){
+    model.value.method = value.toLowerCase();
+  },
+})
+
+const tabs = ref("0");
+
+const update = inject<(s:any)=>void>('setRequestModel');
+
+watch(identifier, (identifier)=>{
+  if(identifier.originalRequest)
+    tabs.value = "1";
+  else
+    tabs.value = "0";
+},{immediate:true});
+
+watch(tabs, (value)=>{
+  if(value === "1" && !identifier.value.originalRequest){
+
+  }else if(value === "0" && identifier.value.originalRequest){
+    update({id:identifier.value.originalRequest, type:'user'})
+  }
+})
+
+</script>
+
+<template>
+  <div style="display: flex;flex-direction: column;gap: 5px;overflow: hidden;height: 100%">
+    <div style="padding: 8px 20px;">
+      <InputGroup>
+        <Select
+          style="width: 200px!important;flex:unset"
+          placeholder="请求方法"
+          size="large"
+          v-model="method"
+          :options="['GET','POST','PUT','PATCH','UPDATE','DELETE','OPTIONS']"
+        >
+          <template #value="slotProps">
+            <Tag
+              :value="slotProps.value?.toUpperCase()"
+              :severity="getHttpMethodColor(slotProps.value)"
+              style="font-size: 12px;padding:0.2rem 0.4rem"
+            ></Tag>
+          </template>
+        </Select>
+        <InputText placeholder="URL" size="large" v-model="model.url"/>
+      </InputGroup>
+    </div>
+    <Tabs style="flex: 1 1 0;overflow: hidden;" v-model:value="tabs">
+      <TabList>
+        <Tab value="0">请求</Tab>
+        <Tab value="1">响应</Tab>
+        <Tab value="2">选项</Tab>
+      </TabList>
+      <TabPanels style="padding: 0;flex:1;display: flex;overflow: hidden;width: 100%">
+        <TabPanel value="0" style="padding: 1rem;flex:1;width: 100%">
+          <HttpRequestEditor v-model="model"/>
+        </TabPanel>
+        <TabPanel value="1" style="padding: 0;flex:1;display: flex;width: 100%">
+          <HttpResponsePreviewer v-model:identifier="identifier" v-model="props.response" v-if="tabs == '1'"/>
+        </TabPanel>
+        <TabPanel value="2">
+
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </div>
+
+</template>
+
+<style scoped>
+  .text-splitter:before{
+    content: '|';
+  }
+</style>
diff --git a/client/components/editors/HttpEditorProxy.vue b/client/components/editors/HttpEditorProxy.vue
new file mode 100644
index 0000000..c166937
--- /dev/null
+++ b/client/components/editors/HttpEditorProxy.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import {nextTick, ref, watch, provide} from 'vue'
+import Skeleton from "primevue/skeleton";
+import HttpEditor from "./HttpEditor.vue";
+import {send} from '@cordisjs/client'
+import {Field} from "minato";
+
+const model = defineModel<{
+    id: number,
+    type: string,
+    stopRefresh?:boolean,
+    originalRequest?: number
+  }>()
+
+  const props = defineProps<{
+    requests: any
+  }>();
+
+  const int = ref(false);
+  setInterval(()=>int.value = !int.value,1000);
+
+  const data = ref();
+
+  const changed = defineModel<boolean>('unsaved');
+  const mode = defineModel<string>('mode');
+
+  const response_data = ref();
+
+  async function fetchData(type:string, id:number, originalRequest?: number){
+    const request = await send('http/request',{type, id: id});
+    response_data.value = null;
+    if(originalRequest){
+      data.value = await send('http/request', {type: 'user', id:originalRequest});
+    }else data.value = null;
+    if(request){
+      if(!data.value)
+        data.value = request;
+      else
+        response_data.value = request;
+      nextTick(()=>{
+        changed.value = false;
+      });
+    }
+  }
+
+  watch(model,(val, oldVal)=>{
+
+
+    if(val?.type == oldVal?.type && val?.id == oldVal?.id){
+      return;
+    }
+
+    if(val.stopRefresh){
+      val.stopRefresh = false;
+      return;
+    }
+
+    if(!val)
+      return;
+
+    const realRequestId = val.originalRequest ?? val.id;
+    const realRequestType = val.originalRequest ? 'user' : val.type;
+
+    const oldRequestId = oldVal?.originalRequest ?? oldVal?.id;
+    const oldRequestType = oldVal?.originalRequest ? 'user' : oldVal?.type;
+
+    /* if(realRequestId == oldRequestId && realRequestType == oldRequestType){
+      return;
+    } */
+
+    data.value = null;
+
+    fetchData(val.type, val.id, val.originalRequest);
+  },{immediate:true})
+
+  watch(data,()=>{
+    changed.value = true;
+  },{deep:true})
+
+  watch(props,(props)=>{
+    const request = props.requests;
+    const category = request.find(category=>category.type == model.value.type);
+    if(!category){
+      model.value = null;
+      return;
+    }
+    const req = category.items.find(req=>req.id == model.value.id);
+    if(!req){
+      model.value = null;
+      return;
+    }
+  })
+
+  let savingTimeout : NodeJS.Timeout | number | false = false;
+
+
+  watch(changed,(value)=>{
+    if(value && savingTimeout === false){
+      savingTimeout = setTimeout(()=>{
+        savingTimeout = false;
+        changed.value = false;
+        save();
+      }, 3000);
+    }else if(!value && savingTimeout !== false){
+      clearTimeout(savingTimeout);
+      savingTimeout = false;
+    }
+  })
+
+  async function save(){
+    if(!data.value)
+      return;
+    if(model.value.type != 'user' && !model.value.originalRequest){
+      const request = await send('http/request.create', data.value);
+      if(!request){
+        alert("保存失败!");
+        changed.value = true;
+      }else{
+        mode.value = 'test';
+        model.value = { id:request, type: 'user' };
+      }
+    } else {
+      const request = await send('http/request.save', {
+        ...data.value,
+        ...(model.value.originalRequest ? {
+          id: model.value.originalRequest
+        } : {})
+      });
+    }
+  }
+  provide('setRequestModel', (request:{id:number, type:string})=>{
+    model.value = request;
+  })
+
+  defineExpose({
+    save(){
+      return save();
+    }
+  })
+</script>
+
+<template>
+  <HttpEditor v-if="data" v-model:request="data" :response="response_data ?? data" v-model:identifier="model"/>
+  <div style="flex:1;display: flex;flex-direction: column" v-else>
+    <div style="display: flex;flex-direction: column;gap: 5px">
+      <div style="padding: 8px 20px;">
+        <Skeleton height="2.5rem" width="100%"></Skeleton>
+      </div>
+    </div>
+    <div style="padding-left: 20px;padding-top:0.4rem">
+      <Skeleton height="1rem" width="24rem" borderRadius="16px"></Skeleton>
+    </div>
+    <Skeleton height="2.5rem" width="16rem" style="margin-top:1rem;margin-left:1.4rem"></Skeleton>
+    <div style="margin: 1.4rem;flex:1">
+      <Skeleton height="100%" width="100%"/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/client/components/editors/http/HttpRequestEditor.vue b/client/components/editors/http/HttpRequestEditor.vue
new file mode 100644
index 0000000..516c3b5
--- /dev/null
+++ b/client/components/editors/http/HttpRequestEditor.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import {computed,ref} from 'vue'
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import Button from "primevue/button";
+import Textarea from "primevue/textarea";
+import InputText from "primevue/inputtext";
+import AutoComplete from "primevue/autocomplete";
+import CommonHeaders from "./headers.json";
+
+const model = defineModel<any>();
+
+const headers = computed(()=>[
+    ...Object.entries(model.value?.requestHeaders ?? {}).map(([key,value])=>({
+    key, value
+  })),
+  {key:'',value:''}
+]);
+
+const editingRows = ref([])
+
+function onRowEditSave(event){
+  if(!model.value)
+    return
+  if(!model.value.requestHeaders)
+    model.value.requestHeaders = {};
+  if(event.data.key == event.newData.key){
+    model.value.requestHeaders[event.data.key] =  event.newData.value;
+  }else{
+    delete model.value.requestHeaders[event.data.key];
+    model.value.requestHeaders[event.newData.key] = event.newData.value;
+  }
+}
+
+const requestBody = computed({
+  get(){
+    return model.value.requestBody ? atob(model.value.requestBody) : ""
+  },
+  set(v){
+    model.value.requestBody = btoa(v)
+  }
+})
+
+const searchHeaderResult = ref();
+
+function searchHeaders(event:{query:string}){
+  const query = event.query.toLowerCase();
+  searchHeaderResult.value = CommonHeaders.filter(t=>t.toLowerCase().includes(query))
+}
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column;gap: 30px">
+    <div>
+      <div style="display: flex; flex-direction: row;">
+        <div style="padding-bottom: 10px; font-size:18px">HTTP 请求头</div>
+        <div style="flex:1"></div>
+      </div>
+      <DataTable :value="headers" editMode="row" @row-edit-save="onRowEditSave"
+                 :pt="{
+        table: { style: 'min-width: 50rem' },
+        column: {
+            bodycell: ({ state }) => ({
+                style:  state['d_editing']&&'padding-top: 0.75rem; padding-bottom: 0.75rem'
+            })
+        }
+    }" v-model:editingRows="editingRows"
+      >
+        <Column header="Key" field="key" headerStyle="width: 20rem">
+          <template #editor="{ data, field }">
+            <AutoComplete v-model="data[field]" fluid :suggestions="searchHeaderResult" @complete="searchHeaders"/>
+          </template>
+        </Column>
+        <Column header="Value" field="value" headerStyle="width: 20rem">
+          <template #editor="{ data, field }">
+            <InputText v-model="data[field]" fluid />
+          </template>
+        </Column>
+        <Column :rowEditor="true" style="width: 1rem;" bodyStyle="text-align:center"></Column>
+
+        <Column field="delete" header="" style="width: 1rem;">
+          <template #body="{data}">
+            <Button v-if="data['key']" icon="pi pi-trash" severity="danger" text rounded aria-label="Remove" @click="()=>delete model.requestHeaders[data['key']]"/>
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+    <div>
+      <div style="display: flex; flex-direction: row;">
+        <div style="padding-bottom: 10px; font-size:18px">HTTP 请求体</div>
+        <div style="flex:1"></div>
+      </div>
+      <Textarea autoResize rows="10" cols="30" style="width: 100%" v-model="requestBody"/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/client/components/editors/http/HttpResponsePreviewer.vue b/client/components/editors/http/HttpResponsePreviewer.vue
new file mode 100644
index 0000000..1c06844
--- /dev/null
+++ b/client/components/editors/http/HttpResponsePreviewer.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import {ref,computed,watch} from "vue";
+import Menu from "primevue/menu";
+import {MenuItem} from "primevue/menuitem";
+import History from "./response/History.vue";
+import StackTrace from "./response/StackTrace.vue";
+import ResponseHeader from "./response/ResponseHeader.vue";
+import ScrollPanel from "primevue/scrollpanel";
+import ResponseBody from "./response/ResponseBody.vue";
+import Timing from "./response/Timing.vue";
+
+const model = defineModel();
+
+const identifier = defineModel<any>('identifier');
+
+const isUser = computed(()=>identifier.value.type != 'capture' || identifier.value.originalRequest);
+
+const current = ref(isUser.value ? "history" : 'header');
+
+const hasChildren = ref(false);
+
+const hasChildrenComputed = computed(()=>hasChildren.value || identifier.value.type == 'capture')
+
+const menuData = computed(()=>(
+  [
+    ...(isUser.value ? [{
+      label: '历史记录',
+      icon: 'pi pi-history',
+      name: 'history'
+    }] : []),
+    ...(hasChildrenComputed.value ? [{
+      label: '响应头',
+      icon: 'pi pi-inbox',
+      name: 'header'
+    },
+    {
+      label: '响应体',
+      icon: 'pi pi-file',
+      name: 'body'
+    },
+    {
+      label: '计时',
+      icon: 'pi pi-clock',
+      name: 'timing'
+    },
+    {
+      label: '堆栈追踪',
+      icon: 'pi pi-align-justify',
+      name: 'stack'
+    }
+  ] : [])
+
+  ]));
+const items = computed(
+  () => menuData.value.map(entry=>current.value == entry.name ? {...entry,class: 'k-h-active'} : {
+    ...entry,
+    command: ()=>current.value = entry.name
+  }));
+</script>
+
+<template>
+  <div class="flex" style="flex:1">
+    <Menu :model="items" style="height: 100%; border-left: none;border-top:none;border-bottom: none;border-radius: 0">
+      <template #item="{ item, props }">
+        <a v-ripple class="flex items-center" v-bind="props.action">
+          <span :class="item.icon" />
+          <span>{{ item.label }}</span>
+          <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+        </a>
+      </template>
+    </Menu>
+    <div class="flex-1 flex">
+      <div style="height: 100%;width: 100%">
+        <ScrollPanel style="height: 100%;width: 100%">
+          <ResponseHeader v-if="current == 'header' && hasChildrenComputed" v-model="model"/>
+          <ResponseBody v-else-if="current == 'body' && hasChildrenComputed" v-model="model"/>
+          <History v-else-if="current == 'history'" :identifier="identifier" :response="model" v-model:historySelected="hasChildren"/>
+          <StackTrace v-else-if="current == 'stack' && hasChildrenComputed" v-model="model"/>
+          <Timing v-else-if="current == 'timing' && hasChildrenComputed" v-model="model"/>
+        </ScrollPanel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
+
+<style>
+.k-h-active .p-menu-item-content{
+  background: var(--p-listbox-option-selected-background)!important;
+}
+</style>
diff --git a/client/components/editors/http/colors.ts b/client/components/editors/http/colors.ts
new file mode 100644
index 0000000..aa25cda
--- /dev/null
+++ b/client/components/editors/http/colors.ts
@@ -0,0 +1,18 @@
+export function getHttpMethodColor(method: string): string {
+  switch (method?.toLowerCase()) {
+    case 'get':
+      return 'info'
+    case 'post':
+      return 'success'
+    case 'put':
+    case 'delete':
+      return 'danger'
+    case 'head':
+    case 'options':
+      return 'contrast'
+    case 'patch':
+      return 'warn'
+    default:
+      return 'secondary'
+  }
+}
diff --git a/client/components/editors/http/headers.json b/client/components/editors/http/headers.json
new file mode 100644
index 0000000..4917efa
--- /dev/null
+++ b/client/components/editors/http/headers.json
@@ -0,0 +1,13 @@
+[
+  "Authentication",
+  "Accept",
+  "Accept-Language",
+  "Accept-Encoding",
+  "User-Agent",
+  "Connection",
+  "Upgrade-Insecure-Requests",
+  "Referer",
+  "Cache-Control",
+  "Cookie",
+  "Range"
+]
diff --git a/client/components/editors/http/response/History.vue b/client/components/editors/http/response/History.vue
new file mode 100644
index 0000000..c2527a0
--- /dev/null
+++ b/client/components/editors/http/response/History.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import ColumnGroup from 'primevue/columngroup';
+import Row from 'primevue/row';
+import {ref,watch, inject, computed, onMounted} from 'vue'
+
+const props = defineProps<{
+  identifier: any
+}>();
+
+const request_list = inject<any>('request_list');
+
+const currentHistory = defineModel<any>('response');
+const historySelected = defineModel<any>('historySelected')
+const requests = computed(()=>{
+  return request_list.value?.capture?.filter(t=>t.originalRequest == props.identifier.id || (props.identifier.originalRequest && t.originalRequest == props.identifier?.originalRequest)) ?? []
+})
+const update = inject<(s:any)=>void>('setRequestModel');
+onMounted(()=>{
+  watch([currentHistory, requests],([history,_])=>{
+    if(history == null || !history.originalRequest){
+      currentHistory.value = requests.value?.[0]
+      if(!currentHistory.value){
+        historySelected.value = false;
+        return;
+      }
+      historySelected.value = true;
+      update({id:currentHistory.value?.id, type:'capture', originalRequest:currentHistory.value.originalRequest})
+    }
+    if(currentHistory.value?.originalRequest){
+      historySelected.value = true;
+    }
+  },{immediate:true})
+})
+const currentRequest = computed({
+  get(){
+    return currentHistory.value
+  },
+  set(value){
+    // currentHistory.value = value
+    update?.({'type':'capture','id':value?.id,'originalRequest':value?.originalRequest})
+  }
+})
+</script>
+
+<template>
+  <DataTable v-model:selection="currentRequest" :value="requests" selectionMode="single" metaKeySelection dataKey="id" tableStyle="min-width: 50rem">
+    <Column field="time" header="发送时间">
+      <template #body="data">
+        {{ new Date(data.data.startTime) }}
+      </template>
+    </Column>
+    <Column field="method" header="方法"></Column>
+    <Column field="url" header="URL">
+      <template #body="data">
+        {{data.data.host}}{{data.data.path}}
+      </template>
+    </Column>
+  </DataTable>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/client/components/editors/http/response/ResponseBody.vue b/client/components/editors/http/response/ResponseBody.vue
new file mode 100644
index 0000000..b43f3d2
--- /dev/null
+++ b/client/components/editors/http/response/ResponseBody.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import {computed} from 'vue'
+const model = defineModel<any>()
+
+const body = computed(()=>atob(model.value?.responseBody ?? ''))
+</script>
+
+<template>
+  <div style="padding: 20px">
+    <pre>{{ body }}</pre>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/client/components/editors/http/response/ResponseHeader.vue b/client/components/editors/http/response/ResponseHeader.vue
new file mode 100644
index 0000000..596b074
--- /dev/null
+++ b/client/components/editors/http/response/ResponseHeader.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {computed} from 'vue'
+import Column from "primevue/column";
+import DataTable from "primevue/datatable";
+
+const model = defineModel<any>();
+
+const headers = computed(()=>Object.entries(model.value?.responseHeaders ?? {}).map(t=>({
+  name:t[0],
+  value:t[1]
+})))
+</script>
+
+<template>
+  <div>
+    <DataTable :value="headers">
+      <Column field="name" header="Name"></Column>
+      <Column field="value" header="Value"></Column>
+    </DataTable>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/client/components/editors/http/response/StackTrace.vue b/client/components/editors/http/response/StackTrace.vue
new file mode 100644
index 0000000..d0c30ec
--- /dev/null
+++ b/client/components/editors/http/response/StackTrace.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import {computed} from 'vue'
+
+const model = defineModel<any>();
+const stackTrace = computed(()=>model.value.stackTrace);
+
+const stack = computed(()=>stackTrace.value.split('\n').filter((t,i)=>i>0).map(t=>({name:t})))
+</script>
+
+<template>
+  <DataTable :value="stack">
+    <Column field="name" header="Name"></Column>
+  </DataTable>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/client/components/editors/http/response/Timing.vue b/client/components/editors/http/response/Timing.vue
new file mode 100644
index 0000000..cbd5548
--- /dev/null
+++ b/client/components/editors/http/response/Timing.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  const model = defineModel<any>();
+</script>
+
+<template>
+  <div style="padding: 20px">
+    请求耗时: {{ model?.endTime - model?.startTime }} ms
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/client/components/hooks.ts b/client/components/hooks.ts
new file mode 100644
index 0000000..485a8a8
--- /dev/null
+++ b/client/components/hooks.ts
@@ -0,0 +1,3 @@
+export interface Hooks{
+
+}
diff --git a/client/index.ts b/client/index.ts
new file mode 100644
index 0000000..5509f01
--- /dev/null
+++ b/client/index.ts
@@ -0,0 +1,34 @@
+import { Context } from '@cordisjs/client'
+import Page from './index.vue'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+
+// @ts-ignore
+import Aura from '@primevue/themes/aura'
+import 'primeicons/primeicons.css'
+import ToastService from 'primevue/toastservice'
+import PluginStatus from "./PluginStatus.vue";
+export default (ctx: Context, config: any) => {
+  // 此 Context 非彼 Context
+  // 我们只是在前端同样实现了一套插件逻辑
+  ctx.page({
+    name: 'HTTP Tools',
+    path: '/http-tools',
+    component: Page,
+  })
+
+  ctx.app.use(PrimeVue, {
+    theme: {
+      preset: Aura,
+    },
+  })
+  ctx.app.use(ToastService)
+
+  ctx.app.directive('tooltip', Tooltip)
+
+  ctx.slot({
+    type: 'plugin-details',
+    component: PluginStatus,
+    order: -500,
+  })
+}
diff --git a/client/index.vue b/client/index.vue
new file mode 100644
index 0000000..edb1d55
--- /dev/null
+++ b/client/index.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Button from "primevue/button";
+import HttpTools from "./components/HttpTools.vue";
+</script>
+
+<template>
+  <div class="k-http-tools-page">
+    <HttpTools/>
+  </div>
+</template>
+
+<style scoped>
+  .k-http-tools-page{
+    display: flex;
+    flex-direction: column;
+    padding-left: var(--activity-width);
+    width: 100%;
+    height: calc(100vh - var(--footer-height));
+    overflow: hidden;
+  }
+</style>
+
+<style>
+#app,body,html{
+  height:100%;
+  overflow: hidden;
+}
+</style>
diff --git a/client/size.ts b/client/size.ts
new file mode 100644
index 0000000..b07b178
--- /dev/null
+++ b/client/size.ts
@@ -0,0 +1,15 @@
+export const SizeFormat = ['', 'K', 'M', 'G', 'T']
+
+export function formatSize(number: number) {
+  return $formatSize(number, 0) + 'B'
+}
+
+function $formatSize(number: number, scale: number) {
+  if (scale >= SizeFormat.length) {
+    return number + 'T'
+  }
+  if (number < 1024) {
+    return number + SizeFormat[scale]
+  }
+  return $formatSize(number / 1024, scale + 1)
+}
diff --git a/client/tsconfig.json b/client/tsconfig.json
new file mode 100644
index 0000000..5fafe90
--- /dev/null
+++ b/client/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "rootDir": ".",
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "types": [
+      "@koishijs/client/global"
+    ],
+  },
+  "include": [".","../src"],
+  "references": [
+    {
+      "path": "../tsconfig.json",
+    },
+  ]
+}
diff --git a/package.json b/package.json
index 6cf985a..f0f106a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "koishi-plugin-http-tools",
-  "version": "0.0.0",
+  "name": "cordis-plugin-http-tools",
+  "version": "0.0.1",
   "description": "HTTP Tools for Koishi",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -33,7 +33,7 @@
     "network",
     "api"
   ],
-  "koishi": {
+  "cordis": {
     "service": {
       "required": [
         "http"
@@ -45,17 +45,24 @@
     "lint": "eslint --ext=ts --cache"
   },
   "devDependencies": {
+    "@cordisjs/client": "^0.1.12",
     "@cordisjs/eslint-config": "^1.1.1",
+    "@cordisjs/plugin-http": "^0.6.3",
+    "@primevue/themes": "^4.0.4",
     "@types/node": "^20.11.30",
     "atsc": "^2.0.1",
+    "cordis": "^3.17.9",
     "esbuild": "^0.18.20",
     "esbuild-register": "^3.5.0",
     "eslint": "^8.57.0",
-    "koishi": "^4.17.5",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.0.4",
     "typescript": "^5.4.3",
     "yml-register": "^1.2.5"
   },
   "peerDependencies": {
-    "koishi": "^4.17.5"
+    "@cordisjs/plugin-http": "^0.6.2",
+    "@cordisjs/plugin-webui": "^0.1.12",
+    "cordis": "^3.17.9"
   }
 }
diff --git a/src/api.ts b/src/api.ts
new file mode 100644
index 0000000..997a88b
--- /dev/null
+++ b/src/api.ts
@@ -0,0 +1,69 @@
+import { Context } from 'cordis'
+import {} from '@cordisjs/plugin-webui'
+import { Request } from './storage'
+
+declare module '@cordisjs/plugin-webui' {
+  interface Events {
+    'http/capture.start'(): any
+    'http/capture.stop'(): any
+    'http/capture.clear'(): any
+    'http/request'(param: {type: string; id: number}): Promise<Request | undefined>
+    'http/request.create'(request: Request): Promise<number | undefined>
+    'http/request.save'(request: Request): Promise<number | undefined>
+    'http/request.delete'(request: any): Promise<void>
+    'http/request.make'(param: {requestId: number}): Promise<number|string>
+  }
+}
+
+export namespace HttpApi{
+  export function apply(ctx: Context) {
+    ctx.webui.addListener('http/capture.start', () => {
+      ctx['http/data'].enableCapture()
+    })
+
+    ctx.webui.addListener('http/capture.stop', () => {
+      ctx['http/data'].disableCapture()
+    })
+
+    ctx.webui.addListener('http/capture.clear', () => {
+      ctx['http/data'].clearCapture()
+    })
+
+    ctx.webui.addListener('http/request', async (param) => {
+      return serializeBinary(await ctx['http/data'].getRequest(param.type, param.id))
+    })
+
+    ctx.webui.addListener('http/request.create', async (request) => {
+      delete request['id']
+      return await ctx['http/data'].createRequest(deserializeBinary(request))
+    })
+
+    ctx.webui.addListener('http/request.save', async (request) => {
+      return await ctx['http/data'].saveRequest(deserializeBinary(request))
+    })
+
+    ctx.webui.addListener('http/request.delete', async (requestInfo) => {
+      return await ctx['http/data'].deleteRequest(requestInfo)
+    })
+
+    ctx.webui.addListener('http/request.make', async (param) => {
+      return await ctx['http/data'].doRequest(param.requestId)
+    })
+
+    function serializeBinary(request: Request): Request {
+      return {
+        ...request,
+        requestBody: request?.requestBody ? Buffer.from(request.requestBody as ArrayBuffer).toString('base64') : undefined,
+        responseBody: request?.responseBody ? Buffer.from(request.responseBody as ArrayBuffer).toString('base64') : undefined,
+      }
+    }
+
+    function deserializeBinary(request: Request): Request {
+      return {
+        ...request,
+        requestBody: request?.requestBody ? Buffer.from(request.requestBody as string, 'base64') as Buffer : undefined,
+        responseBody: request?.responseBody ? Buffer.from(request.responseBody as string, 'base64') as Buffer : undefined,
+      }
+    }
+  }
+}
diff --git a/src/capture.ts b/src/capture.ts
new file mode 100644
index 0000000..d91da32
--- /dev/null
+++ b/src/capture.ts
@@ -0,0 +1,155 @@
+import { Context } from 'cordis'
+import { HTTP } from '@cordisjs/plugin-http'
+import { Symbols } from './symbols'
+import { PluginRecord } from './data'
+
+export namespace HttpToolCaptureModule{
+
+  export function createRecordFromSnapshot(url: string, init: RequestInit, config: HTTP.Config): Partial<PluginRecord> {
+    const record: Partial<PluginRecord> = {}
+    switch (init.method?.toLowerCase()) {
+      case 'get':
+        record.getCount = 1
+        record.getUploadSize = ('HTTP/1.1 GET ' + url + '\n' + JSON.stringify(config.headers)).length
+        record.getDownloadSize = 0
+        break
+      case 'post':
+        record.postCount = 1
+        record.postUploadSize = ('HTTP/1.1 GET ' + url + '\n' + JSON.stringify(config.headers)).length
+        record.postDownloadSize = 0
+        break
+      default:
+        record.otherCount = 1
+        record.otherCount = ('HTTP/1.1 GET ' + url + '\n' + JSON.stringify(config.headers)).length
+        record.otherCount = 0
+    }
+
+    return record
+  }
+
+  function createRecordFromResponse(method?: string, size?: number): Partial<PluginRecord> {
+    switch (method?.toLowerCase()) {
+      case 'get':
+        return { getDownloadSize: size }
+      case 'post':
+        return { postDownloadSize: size }
+      default:
+        return { otherDownloadSize: size }
+    }
+  }
+  export function apply(ctx: Context) {
+    ctx.on('http/fetch-init', function (this: HTTP, url: URL, init: RequestInit, config: HTTP.Config) {
+      const thatContext = this?.ctx;
+      (function () {
+        try {
+          if (thatContext == null) { return }
+          const locatedPath = ctx.loader.locate(thatContext)
+          if (locatedPath == null || locatedPath.length === 0) {
+            return
+          }
+          ctx['http/data'].updatePluginRecord(locatedPath[0], createRecordFromSnapshot(url.toString(), init, config))
+        } catch (e) {}
+      })()
+      if (!ctx['http/data'].captureEnabled && !(Symbols.request in config)) { return }
+      const stackTrace = new Error()
+      const body = serializeBody(init)
+      ctx['http/data'].capture(init, {
+        method: init.method ?? 'GET',
+        requestHeaders: config.headers ?? {},
+        host: url.host,
+        path: url.pathname,
+        startTime: Date.now(),
+        url: url.toString(),
+        requestBody: ('then' in body) ? null : body,
+        originalRequest: config[Symbols.request],
+        stackTrace: stackTrace.stack,
+      })
+    })
+    ctx.on('http/after-fetch', (data) => {
+      const endTime = Date.now()
+      if (data.result) {
+        const thatContext = this?.ctx;
+        (function () {
+          try {
+            if (thatContext == null) { return }
+            const locatedPath = ctx.loader.locate(thatContext)
+            if (locatedPath == null || locatedPath.length === 0) {
+              return
+            }
+            ctx['http/data'].updatePluginRecord(locatedPath[0], createRecordFromResponse(data.init.method, data.result.length))
+          } catch (e) {}
+        })()
+
+        ctx['http/data'].fillCapture(data.init, {
+          responseCode: data.result.status,
+          responseStatus: data.result.statusText,
+          responseHeaders: Object.fromEntries((() => {
+            const h = []
+            data.result.headers.forEach((value, key) => h.push([key, value]))
+            return h
+          })()),
+          responseBody: null,
+          endTime,
+        })
+        data.result.clone().arrayBuffer().then((body) => {
+          ctx['http/data'].fillCapture(data.init, {
+            responseBody: body,
+          })
+        })
+      } else if (ctx.http.isError(data.error)) {
+        ctx['http/data'].fillCapture(data.init, {
+          responseCode: -1,
+          responseStatus: data.error.code,
+          endTime,
+        })
+      } else {
+        ctx['http/data'].fillCapture(data.init, {
+          responseCode: -1,
+          responseStatus: 'E_UNKNOWN',
+          endTime,
+        })
+      }
+    })
+  }
+
+  function serializeBody(requestInit?: RequestInit): ArrayBuffer | Promise<ArrayBuffer> {
+    if (!requestInit || !requestInit.body) {
+      return new ArrayBuffer(0)
+    }
+    if (requestInit.body instanceof ReadableStream) {
+      const [originalStream, forkStream] = requestInit.body.tee()
+      requestInit.body = originalStream
+      return forkStream.getReader().read().then(t => t.value).then(
+        (value) => {
+          if (!value) { return new ArrayBuffer(0) }
+          if (value instanceof ArrayBuffer) { return value }
+          if (typeof value === 'string') {
+            return encodeTextToBuffer(value)
+          }
+        },
+      )
+    }
+    if (requestInit.body instanceof Blob) {
+      return requestInit.body.arrayBuffer()
+    }
+    if (requestInit.body instanceof FormData) {
+      return encodeFormData(requestInit.body)!
+    }
+    if (requestInit.body instanceof URLSearchParams) {
+      return encodeTextToBuffer(requestInit.body.toString())
+    }
+    if (typeof requestInit.body === 'string') {
+      return encodeTextToBuffer(requestInit.body)
+    }
+    return new ArrayBuffer(0)
+  }
+
+  const textEncoder = new TextEncoder()
+  function encodeTextToBuffer(str: string): ArrayBuffer {
+    return textEncoder.encode(str)
+  }
+
+  function encodeFormData(body: FormData): ArrayBuffer | null {
+    return null
+  }
+}
diff --git a/src/data.ts b/src/data.ts
new file mode 100644
index 0000000..2456d88
--- /dev/null
+++ b/src/data.ts
@@ -0,0 +1,234 @@
+import { RequestSummary } from './type'
+import { Context, Service } from 'cordis'
+import { Request } from './storage'
+import { Entry } from '@cordisjs/plugin-webui'
+import { remove } from 'cosmokit'
+import { Symbols } from './symbols'
+import {} from '@cordisjs/loader'
+
+export interface HttpSummary{
+    user: RequestSummary[]
+    capture: RequestSummary[]
+    captureEnabled: boolean
+}
+declare module 'cordis'{
+    interface Context{
+        'http/data': HttpDataService
+    }
+}
+export interface PluginRecord{
+  id: string
+  getCount: number
+  getDownloadSize: number
+  getUploadSize: number
+  postCount: number
+  postDownloadSize: number
+  postUploadSize: number
+  otherCount: number
+  otherDownloadSize: number
+  otherUploadSize: number
+}
+export class HttpDataService extends Service {
+  entry: Entry<HttpSummary>
+  constructor(ctx: Context, config: {entry: Entry<HttpSummary>}) {
+    super(ctx, 'http/data')
+    this.entry = config.entry
+  }
+
+  async start() {
+    await this.loadSummary()
+    this.entry.refresh()
+  }
+
+  userSummary: RequestSummary[] = []
+
+  capturedSummary: RequestSummary[] = []
+
+  captured: Request[] = []
+
+  historySummary: RequestSummary[] = []
+
+  history: Request[] = []
+
+  historyMapper: Map<Request, Request> = new Map()
+
+  initMap: WeakMap<RequestInit, Request> = new WeakMap()
+
+  captureEnabled: boolean = true
+
+  idCounter: number = 0
+
+  pluginRecords: Record<string, PluginRecord> = {}
+
+  async loadSummary() {
+    this.userSummary = await this.ctx.database.get('requests', {}, [
+      'id', 'method', 'path', 'host', 'originalRequest',
+    ])
+  }
+
+  getSummary() {
+    return {
+      user: this.userSummary,
+      capture: this.capturedSummary,
+      history: this.historySummary,
+      captureEnabled: this.captureEnabled,
+    }
+  }
+
+  capture(init: object, request: Request) {
+    request.id = this.idCounter++
+    this.captured.unshift(request)
+    const data = {
+      host: request.host,
+      method: request.method,
+      id: request.id,
+      path: request.path,
+      startTime: request.startTime,
+      originalRequest: request.originalRequest,
+    }
+    this.initMap.set(init, request)
+    this.capturedSummary.unshift(data)
+    this.entry?.refresh()
+  }
+
+  enableCapture() {
+    this.captureEnabled = true
+    this.entry?.patch({ captureEnabled: true })
+  }
+
+  disableCapture() {
+    this.captureEnabled = false
+    this.entry?.patch({ captureEnabled: false })
+  }
+
+  clearCapture() {
+    this.captured = []
+    this.capturedSummary = []
+    this.entry?.refresh()
+  }
+
+  async getRequest(type: string, id: number) {
+    if (type === 'capture') {
+      return this.captured.find((request) => request.id === id)
+    }
+    if (type === 'user') {
+      return (await this.ctx.database.get('requests', { id }))?.[0]
+    }
+  }
+
+  async createRequest(request: Request) {
+    let url: URL | null = null
+    try {
+      url = new URL(request.url)
+    } catch (e) {}
+    request.host = url?.host ?? ''
+    request.path = url?.pathname ?? '/'
+    const resp = (await this.ctx.database.create('requests', request))
+    if (!resp) { return }
+    this.userSummary.push({
+      host: resp.host,
+      method: resp.method,
+      id: resp.id,
+      path: resp.path,
+      startTime: resp.startTime,
+    })
+    this.entry?.refresh()
+    return resp?.id
+  }
+
+  async saveRequest(request: Request) {
+    if (!request.id) { return }
+    let url: URL | null = null
+    try {
+      url = new URL(request.url)
+    } catch (e) {}
+    request.host = url?.host ?? ''
+    request.path = url?.pathname ?? '/'
+    const id = request.id
+    delete request['id']
+    const resp = (await this.ctx.database.set('requests', id, request))
+    if (!resp) { return }
+    const summary = this.userSummary.find((summary) => summary.id === id)
+    summary.host = request.host
+    summary.method = request.method
+    summary.id = id
+    summary.path = request.path
+    summary.startTime = request.startTime
+    this.entry?.refresh()
+    return resp?.matched
+  }
+
+  async deleteRequest(requestInfo: {type: string; id: number}) {
+    if (requestInfo.type === 'user') {
+      const summary = this.userSummary.find((summary) => summary.id === requestInfo.id)
+      if (summary) {
+        remove(this.userSummary, summary)
+      }
+      await this.ctx.database.remove('requests', requestInfo.id)
+      this.entry?.refresh()
+    }
+    if (requestInfo.type === 'capture') {
+      const summary = this.capturedSummary.find((summary) => summary.id === requestInfo.id)
+      if (summary) {
+        remove(this.capturedSummary, summary)
+      }
+      const request = this.captured.find((request) => request.id === requestInfo.id)
+      remove(this.captured, request)
+      this.entry?.refresh()
+    }
+  }
+
+  fillCapture(init: object, request: Partial<Request>) {
+    const targetObject = this.initMap.get(init)
+    if (!targetObject) { return }
+    Object.assign(targetObject, request)
+    this.entry?.refresh()
+  }
+
+  async doRequest(requestId: number) {
+    const request: Request = (await this.ctx.database.get('requests', requestId))?.[0]
+    if (!request) {
+      throw new Error('Not found')
+    }
+
+    try {
+      await this.ctx.http(request.url, {
+        method: request.method,
+        data: request.requestBody,
+        headers: request.requestHeaders,
+        [Symbols.request]: requestId,
+      } as any)
+    } catch (e) {}
+    return 0
+  }
+
+  updatePluginRecord(pluginId: string, record: Partial<PluginRecord>) {
+    let original = this.pluginRecords[pluginId]
+    if (!original) {
+      original = {
+        id: pluginId,
+        getCount: 0,
+        getDownloadSize: 0,
+        getUploadSize: 0,
+        postCount: 0,
+        postDownloadSize: 0,
+        postUploadSize: 0,
+        otherCount: 0,
+        otherDownloadSize: 0,
+        otherUploadSize: 0,
+      }
+    }
+
+    if (record.getCount) original.getCount += record.getCount
+    if (record.getDownloadSize) original.getDownloadSize += record.getDownloadSize
+    if (record.getUploadSize) original.getUploadSize += record.getUploadSize
+    if (record.postCount) original.postCount += record.postCount
+    if (record.postDownloadSize) original.postDownloadSize += record.postDownloadSize
+    if (record.postUploadSize) original.postUploadSize += record.postUploadSize
+    if (record.otherCount) original.otherCount += record.otherCount
+    if (record.otherDownloadSize) original.otherDownloadSize += record.otherDownloadSize
+    if (record.otherUploadSize) original.otherUploadSize += record.otherUploadSize
+
+    this.pluginRecords[pluginId] = original
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index e69de29..15bba62 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -0,0 +1,29 @@
+import { Context } from 'cordis'
+import { Entry } from '@cordisjs/plugin-webui'
+import { HttpToolsStorage } from './storage'
+import { HttpToolCaptureModule } from './capture'
+import { HttpDataService, HttpSummary } from './data'
+import { HttpApi } from './api'
+
+export const inject = {
+  required: ['webui', 'database'],
+}
+
+export function apply(ctx: Context) {
+  ctx.plugin(HttpToolsStorage)
+  let entry: Entry<HttpSummary> = null
+  entry = ctx.webui.addEntry<HttpSummary>({
+    base: import.meta.url,
+    dev: '../client/index.ts',
+    prod: [
+      '../dist/index.js',
+      '../dist/style.css',
+    ],
+  }, () => ctx.get('http/data')?.getSummary())
+  ctx.plugin(HttpDataService, { entry })
+
+  ctx.inject(['http/data'], (ctx) => {
+    ctx.plugin(HttpApi)
+    ctx.plugin(HttpToolCaptureModule)
+  })
+}
diff --git a/src/storage.ts b/src/storage.ts
new file mode 100644
index 0000000..700d5a1
--- /dev/null
+++ b/src/storage.ts
@@ -0,0 +1,47 @@
+import { RequestSummary } from './type'
+import { Context } from 'cordis'
+import {} from 'minato'
+
+export interface Request extends RequestSummary{
+  url: string
+  requestHeaders: Record<string, any>
+  requestBody: ArrayBuffer | string
+  responseHeaders?: Record<string, any>
+  responseBody?: ArrayBuffer | string
+  stackTrace?: string
+  endTime?: number
+}
+
+declare module 'minato'{
+  interface Tables{
+    requests: Request
+  }
+}
+
+export namespace HttpToolsStorage{
+  export function apply(ctx: Context) {
+    ctx.database.extend('requests', {
+      id: 'unsigned',
+      method: 'string',
+      url: 'string',
+      host: 'string',
+      path: 'string',
+      requestHeaders: 'json',
+      requestBody: 'binary',
+      responseCode: 'integer',
+      responseStatus: 'string',
+      responseHeaders: 'json',
+      responseBody: 'binary',
+      startTime: 'unsigned',
+      endTime: 'unsigned',
+      originalRequest: {
+        type: 'unsigned',
+        nullable: true,
+      },
+      stackTrace: 'text',
+    }, {
+      primary: 'id',
+      autoInc: true,
+    })
+  }
+}
diff --git a/src/symbols.ts b/src/symbols.ts
new file mode 100644
index 0000000..1d98aa5
--- /dev/null
+++ b/src/symbols.ts
@@ -0,0 +1,3 @@
+export namespace Symbols{
+  export const request = Symbol('request')
+}
diff --git a/src/type.ts b/src/type.ts
new file mode 100644
index 0000000..ec70d4e
--- /dev/null
+++ b/src/type.ts
@@ -0,0 +1,13 @@
+export interface RequestSummary{
+  id?: number
+  method: string
+  host: string
+  path: string
+
+  responseCode?: number
+  responseStatus?: string
+  timeCost?: number
+
+  startTime?: number
+  originalRequest?: number
+}
diff --git a/tsconfig.json b/tsconfig.json
index 4afda64..44c980b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,13 +4,13 @@
     "outDir": "lib",
     "rootDir": "src",
     "target": "es2022",
-    "module": "commonjs",
+    "module": "esnext",
     "declaration": true,
     "composite": true,
     "incremental": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "strictBindCallApply": true,
     "jsx": "react-jsx",
     "jsxImportSource": "@satorijs/element",