ospp: first implementation

.eslintignore

@@ -6,3 +6,4 @@ lib
 tests
 
 *.js
+*.vue

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>

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>

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>
+

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>

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>

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>