feat: implementations

koishijs · Oct 30, 2024 · 5fc76f5 · 5fc76f5
1 parent 5bc2710
commit 5fc76f5
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 26 deletions.
diff --git a/client/PluginStatus.vue 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/MainMenu.vue b/client/components/MainMenu.vue
@@ -33,12 +33,23 @@ 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 请求'"/>
+      <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/>

diff --git a/client/index.ts b/client/index.ts
@@ -7,6 +7,7 @@ import Tooltip from 'primevue/tooltip'
 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
   // 我们只是在前端同样实现了一套插件逻辑
@@ -24,4 +25,10 @@ export default (ctx: Context, config: any) => {
   ctx.app.use(ToastService)
 
   ctx.app.directive('tooltip', Tooltip)
+
+  ctx.slot({
+    type: 'plugin-details',
+    component: PluginStatus,
+    order: -500,
+  })
 }
diff --git a/client/size.ts 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/src/capture.ts b/src/capture.ts
@@ -1,10 +1,55 @@
 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)
@@ -23,6 +68,18 @@ export namespace HttpToolCaptureModule{
     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,

diff --git a/src/data.ts b/src/data.ts
@@ -16,6 +16,18 @@ declare module 'cordis'{
         '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>}) {
@@ -46,6 +58,8 @@ export class HttpDataService extends Service {
 
   idCounter: number = 0
 
+  pluginRecords: Record<string, PluginRecord> = {}
+
   async loadSummary() {
     this.userSummary = await this.ctx.database.get('requests', {}, [
       'id', 'method', 'path', 'host', 'originalRequest',
@@ -187,4 +201,34 @@ export class HttpDataService extends Service {
     } 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/storage.ts b/src/storage.ts
@@ -12,22 +12,9 @@ export interface Request extends RequestSummary{
   endTime?: number
 }
 
-export interface PluginRecord{
-  id: string
-  requests: number
-  get: number
-  post: number
-  options: number
-  head: number
-  put: number
-  update: number
-  delete: number
-}
-
 declare module 'minato'{
   interface Tables{
     requests: Request
-    request_records: PluginRecord
   }
 }
 
@@ -56,17 +43,5 @@ export namespace HttpToolsStorage{
       primary: 'id',
       autoInc: true,
     })
-
-    ctx.database.extend('request_records', {
-      id: 'string',
-      requests: 'integer',
-      get: 'integer',
-      post: 'integer',
-      options: 'integer',
-      head: 'integer',
-      put: 'integer',
-      update: 'integer',
-      delete: 'integer',
-    })
   }
 }