refactoring

Resolve #7779

packages/client/src/components/taskmanager.api-window.vue

@@ -0,0 +1,72 @@
+<template>
+<XWindow ref="window"
+	:initial-width="370"
+	:initial-height="450"
+	:can-resize="true"
+	@close="$refs.window.close()"
+	@closed="$emit('closed')"
+>
+	<template #header>Req Viewer</template>
+
+	<div class="rlkneywz">
+		<MkTab v-model="tab" style="border-bottom: solid 0.5px var(--divider);">
+			<option value="req">Request</option>
+			<option value="res">Response</option>
+		</MkTab>
+
+		<code v-if="tab === 'req'" class="_monospace">{{ reqStr }}</code>
+		<code v-if="tab === 'res'" class="_monospace">{{ resStr }}</code>
+	</div>
+</XWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import * as JSON5 from 'json5';
+import XWindow from '@/components/ui/window.vue';
+import MkTab from '@/components/tab.vue';
+
+export default defineComponent({
+	components: {
+		XWindow,
+		MkTab,
+	},
+
+	props: {
+		req: {
+			required: true,
+		}
+	},
+
+	emits: ['closed'],
+
+	data() {
+		return {
+			tab: 'req',
+			reqStr: JSON5.stringify(this.req.req, null, '\t'),
+			resStr: JSON5.stringify(this.req.res, null, '\t'),
+		}
+	},
+
+	methods: {
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.rlkneywz {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	> code {
+		display: block;
+		flex: 1;
+		padding: 8px;
+		overflow: auto;
+		font-size: 0.9em;
+		tab-size: 2;
+		white-space: pre;
+	}
+}
+</style>