vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{NetworkList → DevTool/components/NetworkList}/InterceptConfig.vue

@@ -1,608 +1,624 @@
-<template>
-  <view class="intercept-config" :style="customStyle">
-    <view class="intercept-config-control">
-      <DevToolTitle>{{ t('network.interceptConfig') }}</DevToolTitle>
-      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
-    </view>
-
-    <scroll-view scroll-y class="intercept-config-form">
-      <view class="intercept-config-tip">
-        {{ t('network.tipsIntercept') }}
-      </view>
-      <view class="intercept-config-control">
-        <DevToolTitle>{{ t('network.timeout') }}</DevToolTitle>
-      </view>
-      <input
-        class="intercept-input"
-        :value="state.timeout"
-        @input="onChangeState($event, 'timeout')" />
-      <view class="intercept-config-tip">
-        {{ t('network.tipsTimeout') }}
-      </view>
-      <view class="intercept-config-control">
-        <DevToolTitle>{{ t('network.responseStatus') }}</DevToolTitle>
-      </view>
-      <input
-        class="intercept-input"
-        :value="state.status"
-        @input="onChangeState($event, 'status')" />
-      <view class="intercept-config-control">
-        <DevToolTitle>{{ t('network.requestMethod') }}</DevToolTitle>
-      </view>
-      <radio-group class="radio-group" @change="onChangeRequestMethod">
-        <label
-          class="radio-group-item"
-          v-for="item in requestMethods"
-          :key="item.value">
-          <radio
-            size
-            style="transform: scale(0.8)"
-            :color="themeColor"
-            :value="item.value"
-            :checked="item.value === state.method" />
-
-          <view>{{ item.name }}</view>
-        </label>
-      </radio-group>
-
-      <view class="intercept-config-control">
-        <DevToolTitle>{{ t('network.requestHeaders') }}</DevToolTitle>
-        <CircularButton
-          style="margin-left: auto"
-          text="＋"
-          @click="onAddRequestHeader" />
-      </view>
-
-      <view class="intercept-header-list">
-        <checkbox-group
-          v-if="requestHeaderList.length > 0"
-          key="requestHeaderList"
-          @change="onChangeRequestHeaderChecked">
-          <view
-            class="intercept-header-item"
-            v-for="(item, index) in requestHeaderList"
-            :key="item.id">
-            <checkbox
-              :color="themeColor"
-              :value="item.id"
-              :checked="item.checked" />
-            <input
-              class="intercept-input"
-              :placeholder="t('network.placeholderHeaderName')"
-              :value="item.key"
-              @input="onChangeRequestHeader($event, 'key', index)" />
-            <input
-              class="intercept-input"
-              :placeholder="t('network.placeholderHeaderValue')"
-              :value="item.value"
-              @input="onChangeRequestHeader($event, 'value', index)" />
-            <CircularButton
-              style="margin-left: 6px"
-              text="一"
-              @click="onDeleteRequestHeader(item)" />
-          </view>
-        </checkbox-group>
-
-        <view class="intercept-empty" v-else>
-          {{ t('network.noRequestHeaders') }}
-        </view>
-      </view>
-
-      <view class="intercept-config-control">
-        <DevToolTitle>{{ t('network.responseHeaders') }}</DevToolTitle>
-        <CircularButton
-          style="margin-left: auto"
-          text="＋"
-          @click="onAddResponseHeader" />
-      </view>
-
-      <view class="intercept-header-list">
-        <checkbox-group
-          v-if="responseHeaderList.length > 0"
-          key="responseHeaderList"
-          @change="onChangeResponseHeaderChecked">
-          <view
-            class="intercept-header-item"
-            v-for="(item, index) in responseHeaderList"
-            :key="item.id">
-            <checkbox
-              :color="themeColor"
-              :value="item.id"
-              :checked="item.checked" />
-            <input
-              class="intercept-input"
-              :placeholder="t('network.placeholderRespHeaderName')"
-              :value="item.key"
-              @input="onChangeResponseHeader($event, 'key', index)" />
-            <input
-              class="intercept-input"
-              :placeholder="t('network.placeholderRespHeaderValue')"
-              :value="item.value"
-              @input="onChangeResponseHeader($event, 'value', index)" />
-            <CircularButton
-              style="margin-left: 6px"
-              text="一"
-              @click="onDeleteResponseHeader(item)" />
-          </view>
-        </checkbox-group>
-
-        <view class="intercept-empty" v-else>
-          {{ t('network.noResponseHeaders') }}
-        </view>
-      </view>
-      <DevToolTitle>{{ t('network.requestUrl') }}</DevToolTitle>
-      <textarea
-        :placeholder="t('network.placeholderUrl')"
-        class="intercept-textarea"
-        :value="state.url"
-        @input="onChangeUrl" />
-      <view class="form-error-message">
-        {{ hasUrl ? '' : t('network.toastEnterUrl') }}
-      </view>
-
-      <view class="intercept-config-control">
-        <DevToolTitle>{{ t('network.requestParams') }}</DevToolTitle>
-        <CircularButton
-          style="margin-left: auto"
-          text="＋"
-          @click="onAddQuery" />
-      </view>
-      <view class="intercept-param-list">
-        <checkbox-group
-          v-if="queryList.length > 0"
-          @change="handleQueryCheckedChange">
-          <view
-            class="intercept-param-item"
-            v-for="(item, index) in queryList"
-            :key="item.id">
-            <checkbox
-              :color="themeColor"
-              :checked="item.checked"
-              :value="item.id" />
-            <input
-              class="intercept-input"
-              :placeholder="t('network.placeholderParamName')"
-              :value="item.key"
-              @input="onChangeQuery($event, 'key', index)" />
-            <input
-              class="intercept-input"
-              :placeholder="t('network.placeholderParamValue')"
-              :value="item.value"
-              @input="onChangeQuery($event, 'value', index)" />
-            <CircularButton
-              text="一"
-              style="margin-left: 6px"
-              @click="onDeleteQuery(item)" />
-          </view>
-        </checkbox-group>
-
-        <view class="intercept-empty" v-else>
-          {{ t('network.emptyParams') }}
-        </view>
-      </view>
-
-      <template v-if="!noBodyRequestMethods.includes(state.method)">
-        <view class="intercept-config-control">
-          <DevToolTitle>{{ t('network.requestBody') }}</DevToolTitle>
-        </view>
-
-        <textarea
-          :placeholder="t('network.placeholderBody')"
-          class="intercept-textarea"
-          :value="state.bodyText"
-          @input="onChangeState($event, 'bodyText')" />
-      </template>
-
-      <view class="intercept-config-control">
-        <DevToolTitle>{{ t('network.responseBody') }}</DevToolTitle>
-      </view>
-      <textarea
-        :placeholder="t('network.placeholderRespBody')"
-        class="intercept-textarea"
-        :value="state.responseText"
-        @input="onChangeState($event, 'responseText')" />
-    </scroll-view>
-    <view class="intercept-config-buttons">
-      <SettingButton @click="onConfirm">
-        {{ t('network.saveConfig') }}
-      </SettingButton>
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import { computed, ref, onMounted } from 'vue';
-import CircularButton from '../CircularButton/index.vue';
-import DevToolTitle from '../DevToolTitle/index.vue';
-import type { DevTool } from '../../type';
-import SettingButton from '../SettingButton/index.vue';
-import { useI18n } from '../../i18n';
-import { getThemeMainColor } from '../styles/theme';
-const { t } = useI18n();
-const themeColor = computed(() => getThemeMainColor(props.theme));
-
-const props = defineProps<{
-  theme?: string;
-  network: DevTool.NetworkItem;
-  zIndex?: number;
-  customStyle?: Record<string, any>;
-}>();
-
-const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'openDetail', v: DevTool.NetworkItem): void;
-  (e: 'confirm', v: DevTool.NetworkItem): void;
-}>();
-
-import {
-  requestMethods,
-  noBodyRequestMethods,
-  defaultHeader,
-  arrayToObject,
-  objectToArray,
-  arrayToUrlParams,
-  urlParamsToObject,
-  unionArrayByKey,
-} from './utils';
-import { useKeyValueList, useNetworkState } from './hooks/useNetworkForm';
-
-const { state, hasUrl, onChangeState, parseUrlToList, parseListToUrl } =
-  useNetworkState({
-    method: 'GET',
-    url: 'http://mock.view-uni-dev-tool/a?a=123',
-    status: 200,
-    bodyText: '',
-    responseText: '',
-    timeout: 3 * 1000,
-  });
-
-const {
-  list: requestHeaderList,
-  onAdd: onAddRequestHeader,
-  onDelete: onDeleteRequestHeader,
-  onChangeChecked: onChangeRequestHeaderChecked,
-  onChangeValue: onChangeRequestHeaderItem,
-  setList: setRequestHeaderList,
-} = useKeyValueList(defaultHeader);
-
-const {
-  list: responseHeaderList,
-  onAdd: onAddResponseHeader,
-  onDelete: onDeleteResponseHeader,
-  onChangeChecked: onChangeResponseHeaderChecked,
-  onChangeValue: onChangeResponseHeaderItem,
-  setList: setResponseHeaderList,
-} = useKeyValueList(defaultHeader);
-
-const {
-  list: queryList,
-  onAdd: onAddQuery,
-  onDelete: onDeleteQuery,
-  onChangeChecked: onChangeQueryChecked,
-  onChangeValue: onChangeQueryItem,
-  setList: setQueryList,
-} = useKeyValueList([
-  {
-    id: '1',
-    key: 'a',
-    value: '123',
-    checked: true,
-  },
-]);
-
-const isFinished = ref(false);
-
-function onChangeUrl(e: any) {
-  const url = e.detail.value;
-  state.url = url;
-  const list = parseUrlToList(url);
-  setQueryList(list);
-}
-
-function onReset() {
-  isFinished.value = false;
-  hasUrl.value = true;
-  state.method = 'GET';
-  state.url = '';
-  state.bodyText = '';
-  setResponseHeaderList(defaultHeader);
-  setQueryList([]);
-}
-
-function onClose() {
-  emit('close');
-  onReset();
-}
-
-function onConfirm() {
-  if (!state.url) {
-    hasUrl.value = false;
-    uni.showToast({
-      title: t('network.toastEnterUrl'),
-      icon: 'none',
-    });
-    return;
-  }
-  hasUrl.value = true;
-
-  const responseHeader = arrayToObject(responseHeaderList);
-  const query = arrayToUrlParams(queryList.filter((q) => q.checked));
-
-  const baseUrl = state.url?.split('?')[0] || '';
-  const lastSlashIndex = baseUrl.lastIndexOf('/');
-  const name = lastSlashIndex !== -1 ? baseUrl.slice(lastSlashIndex + 1) : '';
-
-  const interceptConfig: DevTool.NetworkItem = {
-    index: 0,
-
-    name,
-    url: state.url,
-    method: state.method,
-    timeout: state.timeout,
-    status: state.status as string,
-    time: '',
-    startTime: 0,
-    endTime: 0,
-    size: '',
-    headers: {
-      requestHeader: requestHeaderList,
-      responseHeader: responseHeaderList,
-    },
-    response: {
-      data: '',
-      statusCode: Number(state.status),
-      header: responseHeader,
-      cookies: [],
-      errMsg: 'request:ok',
-    },
-    payload: {},
-  };
-
-  if (noBodyRequestMethods.includes(state.method)) {
-    // 不支持携带 body 参数
-
-    interceptConfig.payload = {};
-  } else {
-    // 支持 url 中携带参数
-
-    if (state.url.includes('?')) {
-      interceptConfig.url = state.url + '&' + query;
-    } else {
-      interceptConfig.url = state.url + '?' + query;
-    }
-
-    // 支持携带 body 参数
-    if (state.bodyText?.trim()) {
-      try {
-        const bodyJson = JSON.parse(state.bodyText);
-        interceptConfig.payload = bodyJson;
-      } catch (_error) {
-        uni.showToast({
-          title: t('network.toastBodyJson'),
-          icon: 'none',
-        });
-        return;
-      }
-    }
-  }
-
-  if (state.responseText?.trim()) {
-    try {
-      const bodyJson = JSON.parse(state.responseText);
-      interceptConfig.response.data = bodyJson;
-    } catch (_error) {
-      uni.showToast({
-        title: t('network.toastRespJson'),
-        icon: 'none',
-      });
-      return;
-    }
-  }
-
-  uni.showToast({
-    icon: 'none',
-    title: t('network.toastSaveSuccess'),
-  });
-
-  emit('confirm', interceptConfig);
-  emit('close');
-}
-
-function onChangeRequestMethod(e: any) {
-  const method = e.detail.value;
-  state.method = method;
-}
-
-function onChangeRequestHeader(e: any, key: 'key' | 'value', index: number) {
-  onChangeRequestHeaderItem(index, key, e.detail.value);
-}
-
-function onChangeResponseHeader(e: any, key: 'key' | 'value', index: number) {
-  onChangeResponseHeaderItem(index, key, e.detail.value);
-}
-
-function handleQueryCheckedChange(e: any) {
-  onChangeQueryChecked(e);
-  state.url = parseListToUrl(state.url, queryList);
-}
-
-function onChangeQuery(e: any, key: 'key' | 'value', index: number) {
-  onChangeQueryItem(index, key, e.detail.value);
-  state.url = parseListToUrl(state.url, queryList);
-}
-
-/**
- * 处理规格
- */
-function handleInterceptConfig() {
-  // 如果没有网络数据或尚未开始，则直接返回
-  if (!props.network || !props.network.url) return;
-
-  // 设置基础请求信息
-  state.url = props.network.url;
-  state.method = props.network.method?.toUpperCase() ?? 'GET';
-  state.status = props.network.status as string;
-
-  // 初始化请求头
-  const requestHeaders =
-    props.network.headers?.requestHeader?.map((item, index) => {
-      return {
-        ...item,
-        id: index.toString(),
-        checked: true,
-      };
-    }) ?? [];
-
-  setRequestHeaderList(requestHeaders);
-
-  const responseHeaders =
-    props.network.headers?.responseHeader?.map((item, index) => {
-      return {
-        ...item,
-        id: index.toString(),
-        checked: true,
-      };
-    }) ?? [];
-
-  setResponseHeaderList(responseHeaders);
-
-  setQueryList([]);
-
-  //  解析参数
-  if (noBodyRequestMethods.includes(state.method)) {
-    // 参数在 query 中
-    if (props.network.url.includes('?')) {
-      const urlParams = objectToArray(
-        urlParamsToObject(props.network.url.split('?')?.[1] ?? ''),
-      );
-      const payloadParams = objectToArray(props.network.payload);
-
-      const list = unionArrayByKey(urlParams, payloadParams, 'key');
-
-      setQueryList(list);
-    }
-  } else {
-    // 参数在 query 中
-    if (props.network.url.includes('?')) {
-      const urlParams = objectToArray(
-        urlParamsToObject(props.network.url.split('?')?.[1] ?? ''),
-      );
-      setQueryList(urlParams);
-    }
-    state.bodyText = JSON.stringify(props.network.payload);
-  }
-
-  if (props.network.response?.data) {
-    try {
-      state.responseText = JSON.stringify(props.network.response.data);
-    } catch (_error) {
-      state.responseText = props.network.response.data as string;
-    }
-  }
-}
-
-onMounted(() => {
-  handleInterceptConfig();
-});
-</script>
-
-<style scoped>
-.intercept-config {
-  position: fixed;
-  width: 100vw;
-  height: 100%;
-  z-index: 5;
-  top: 0;
-  left: 0;
-  padding: 0 16px;
-
-  /* #ifdef H5 || APP-PLUS */
-  padding: 50px 16px;
-
-  /* #endif */
-  overflow: auto;
-  background-color: var(--dev-tool-bg3-color);
-  box-sizing: border-box;
-}
-
-.intercept-config-tip {
-  font-size: var(--dev-tool-tips-font-size);
-  color: var(--dev-tool-info-color);
-}
-
-.intercept-config-form {
-  height: calc(100% - 32px - 42px);
-  overflow: auto;
-}
-
-.intercept-config-control {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  height: 32px;
-  border-bottom: 1px solid transparent;
-  box-sizing: border-box;
-}
-
-.radio-group {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.radio-group-item {
-  display: flex;
-  align-items: center;
-  width: 25%;
-  margin-bottom: 6px;
-}
-
-.intercept-input {
-  padding: 0 6px;
-  height: 24px;
-  border: 1px solid var(--dev-tool-border-color);
-}
-
-.intercept-textarea {
-  padding: 6px;
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid var(--dev-tool-border-color);
-}
-
-.form-error-message {
-  padding: 0 6px;
-  height: 24px;
-  line-height: 24px;
-  color: red;
-}
-
-.intercept-header-item {
-  display: flex;
-  align-items: center;
-}
-
-.intercept-empty {
-  color: var(--dev-tool-info-color);
-  text-align: center;
-}
-
-.intercept-param-item {
-  display: flex;
-  align-items: center;
-}
-
-.intercept-body-data-item {
-  display: flex;
-  align-items: center;
-}
-
-.intercept-config-buttons {
-  position: sticky;
-  display: flex;
-  justify-content: space-between;
-
-  /* gap: 6px; */
-  width: 100%;
-  margin-top: 12px;
-  background-color: var(--dev-tool-bg3-color);
-}
-</style>
+<template>
+  <view class="intercept-config" :style="customStyle">
+    <view class="intercept-config-control">
+      <DevToolTitle>{{ t('network.interceptConfig') }}</DevToolTitle>
+      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
+    </view>
+
+    <scroll-view scroll-y class="intercept-config-form">
+      <view class="intercept-config-tip">
+        {{ t('network.tipsIntercept') }}
+      </view>
+      <view class="intercept-config-control">
+        <DevToolTitle>{{ t('network.timeout') }}</DevToolTitle>
+      </view>
+      <input
+        class="intercept-input"
+        :value="state.timeout"
+        @input="onChangeState($event, 'timeout')" />
+      <view class="intercept-config-tip">
+        {{ t('network.tipsTimeout') }}
+      </view>
+      <view class="intercept-config-control">
+        <DevToolTitle>
+          {{ t('network.delay') }}
+        </DevToolTitle>
+      </view>
+      <input
+        class="intercept-input"
+        :value="state.delay"
+        @input="onChangeState($event, 'delay')" />
+      <view class="intercept-config-tip">
+        {{ t('network.tipsDelay') }}
+      </view>
+      <view class="intercept-config-control">
+        <DevToolTitle>{{ t('network.responseStatus') }}</DevToolTitle>
+      </view>
+      <input
+        class="intercept-input"
+        :value="state.status"
+        @input="onChangeState($event, 'status')" />
+      <view class="intercept-config-control">
+        <DevToolTitle>{{ t('network.requestMethod') }}</DevToolTitle>
+      </view>
+      <radio-group class="radio-group" @change="onChangeRequestMethod">
+        <label
+          class="radio-group-item"
+          v-for="item in requestMethods"
+          :key="item.value">
+          <radio
+            size
+            style="transform: scale(0.8)"
+            :color="themeColor"
+            :value="item.value"
+            :checked="item.value === state.method" />
+
+          <view>{{ item.name }}</view>
+        </label>
+      </radio-group>
+
+      <view class="intercept-config-control">
+        <DevToolTitle>{{ t('network.requestHeaders') }}</DevToolTitle>
+        <CircularButton
+          style="margin-left: auto"
+          text="＋"
+          @click="onAddRequestHeader" />
+      </view>
+
+      <view class="intercept-header-list">
+        <checkbox-group
+          v-if="requestHeaderList.length > 0"
+          key="requestHeaderList"
+          @change="onChangeRequestHeaderChecked">
+          <view
+            class="intercept-header-item"
+            v-for="(item, index) in requestHeaderList"
+            :key="item.id">
+            <checkbox
+              :color="themeColor"
+              :value="item.id"
+              :checked="item.checked" />
+            <input
+              class="intercept-input"
+              :placeholder="t('network.placeholderHeaderName')"
+              :value="item.key"
+              @input="onChangeRequestHeader($event, 'key', index)" />
+            <input
+              class="intercept-input"
+              :placeholder="t('network.placeholderHeaderValue')"
+              :value="item.value"
+              @input="onChangeRequestHeader($event, 'value', index)" />
+            <CircularButton
+              style="margin-left: 6px"
+              text="一"
+              @click="onDeleteRequestHeader(item)" />
+          </view>
+        </checkbox-group>
+
+        <view class="intercept-empty" v-else>
+          {{ t('network.noRequestHeaders') }}
+        </view>
+      </view>
+
+      <view class="intercept-config-control">
+        <DevToolTitle>{{ t('network.responseHeaders') }}</DevToolTitle>
+        <CircularButton
+          style="margin-left: auto"
+          text="＋"
+          @click="onAddResponseHeader" />
+      </view>
+
+      <view class="intercept-header-list">
+        <checkbox-group
+          v-if="responseHeaderList.length > 0"
+          key="responseHeaderList"
+          @change="onChangeResponseHeaderChecked">
+          <view
+            class="intercept-header-item"
+            v-for="(item, index) in responseHeaderList"
+            :key="item.id">
+            <checkbox
+              :color="themeColor"
+              :value="item.id"
+              :checked="item.checked" />
+            <input
+              class="intercept-input"
+              :placeholder="t('network.placeholderRespHeaderName')"
+              :value="item.key"
+              @input="onChangeResponseHeader($event, 'key', index)" />
+            <input
+              class="intercept-input"
+              :placeholder="t('network.placeholderRespHeaderValue')"
+              :value="item.value"
+              @input="onChangeResponseHeader($event, 'value', index)" />
+            <CircularButton
+              style="margin-left: 6px"
+              text="一"
+              @click="onDeleteResponseHeader(item)" />
+          </view>
+        </checkbox-group>
+
+        <view class="intercept-empty" v-else>
+          {{ t('network.noResponseHeaders') }}
+        </view>
+      </view>
+      <DevToolTitle>{{ t('network.requestUrl') }}</DevToolTitle>
+      <textarea
+        :placeholder="t('network.placeholderUrl')"
+        class="intercept-textarea"
+        :value="state.url"
+        @input="onChangeUrl" />
+      <view class="form-error-message">
+        {{ hasUrl ? '' : t('network.toastEnterUrl') }}
+      </view>
+
+      <view class="intercept-config-control">
+        <DevToolTitle>{{ t('network.requestParams') }}</DevToolTitle>
+        <CircularButton
+          style="margin-left: auto"
+          text="＋"
+          @click="onAddQuery" />
+      </view>
+      <view class="intercept-param-list">
+        <checkbox-group
+          v-if="queryList.length > 0"
+          @change="handleQueryCheckedChange">
+          <view
+            class="intercept-param-item"
+            v-for="(item, index) in queryList"
+            :key="item.id">
+            <checkbox
+              :color="themeColor"
+              :checked="item.checked"
+              :value="item.id" />
+            <input
+              class="intercept-input"
+              :placeholder="t('network.placeholderParamName')"
+              :value="item.key"
+              @input="onChangeQuery($event, 'key', index)" />
+            <input
+              class="intercept-input"
+              :placeholder="t('network.placeholderParamValue')"
+              :value="item.value"
+              @input="onChangeQuery($event, 'value', index)" />
+            <CircularButton
+              text="一"
+              style="margin-left: 6px"
+              @click="onDeleteQuery(item)" />
+          </view>
+        </checkbox-group>
+
+        <view class="intercept-empty" v-else>
+          {{ t('network.emptyParams') }}
+        </view>
+      </view>
+
+      <template v-if="!noBodyRequestMethods.includes(state.method)">
+        <view class="intercept-config-control">
+          <DevToolTitle>{{ t('network.requestBody') }}</DevToolTitle>
+        </view>
+
+        <textarea
+          :placeholder="t('network.placeholderBody')"
+          class="intercept-textarea"
+          :value="state.bodyText"
+          @input="onChangeState($event, 'bodyText')" />
+      </template>
+
+      <view class="intercept-config-control">
+        <DevToolTitle>{{ t('network.responseBody') }}</DevToolTitle>
+      </view>
+      <textarea
+        :placeholder="t('network.placeholderRespBody')"
+        class="intercept-textarea"
+        :value="state.responseText"
+        @input="onChangeState($event, 'responseText')" />
+    </scroll-view>
+    <view class="intercept-config-buttons">
+      <SettingButton @click="onConfirm">
+        {{ t('network.saveConfig') }}
+      </SettingButton>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed, ref, onMounted } from 'vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import type { DevTool } from '../../../../type';
+import SettingButton from '../SettingButton/index.vue';
+import { useI18n } from '../../../../i18n';
+import { getThemeMainColor } from '../../../styles/theme';
+const { t } = useI18n();
+
+const themeColor = computed(() => getThemeMainColor(props.theme));
+
+const props = defineProps<{
+  theme?: string;
+  network: DevTool.NetworkItem;
+  zIndex?: number;
+  customStyle?: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'openDetail', v: DevTool.NetworkItem): void;
+  (e: 'confirm', v: DevTool.NetworkItem): void;
+}>();
+
+import {
+  requestMethods,
+  noBodyRequestMethods,
+  defaultHeader,
+  arrayToObject,
+  objectToArray,
+  arrayToUrlParams,
+  urlParamsToObject,
+  unionArrayByKey,
+} from './utils';
+import { useKeyValueList, useNetworkState } from './hooks/useNetworkForm';
+
+const { state, hasUrl, onChangeState, parseUrlToList, parseListToUrl } =
+  useNetworkState({
+    method: 'GET',
+    url: 'http://mock.view-uni-dev-tool/a?a=123',
+    status: 200,
+    bodyText: '',
+    responseText: '',
+    timeout: 3 * 1000,
+    delay: 0,
+  });
+
+const {
+  list: requestHeaderList,
+  onAdd: onAddRequestHeader,
+  onDelete: onDeleteRequestHeader,
+  onChangeChecked: onChangeRequestHeaderChecked,
+  onChangeValue: onChangeRequestHeaderItem,
+  setList: setRequestHeaderList,
+} = useKeyValueList(defaultHeader);
+
+const {
+  list: responseHeaderList,
+  onAdd: onAddResponseHeader,
+  onDelete: onDeleteResponseHeader,
+  onChangeChecked: onChangeResponseHeaderChecked,
+  onChangeValue: onChangeResponseHeaderItem,
+  setList: setResponseHeaderList,
+} = useKeyValueList(defaultHeader);
+
+const {
+  list: queryList,
+  onAdd: onAddQuery,
+  onDelete: onDeleteQuery,
+  onChangeChecked: onChangeQueryChecked,
+  onChangeValue: onChangeQueryItem,
+  setList: setQueryList,
+} = useKeyValueList([
+  {
+    id: '1',
+    key: 'a',
+    value: '123',
+    checked: true,
+  },
+]);
+
+const isFinished = ref(false);
+
+function onChangeUrl(e: any) {
+  const url = e.detail.value;
+  state.url = url;
+  const list = parseUrlToList(url);
+  setQueryList(list);
+}
+
+function onReset() {
+  isFinished.value = false;
+  hasUrl.value = true;
+  state.method = 'GET';
+  state.url = '';
+  state.bodyText = '';
+  setResponseHeaderList(defaultHeader);
+  setQueryList([]);
+}
+
+function onClose() {
+  emit('close');
+  onReset();
+}
+
+function onConfirm() {
+  if (!state.url) {
+    hasUrl.value = false;
+    uni.showToast({
+      title: t('network.toastEnterUrl'),
+      icon: 'none',
+    });
+    return;
+  }
+  hasUrl.value = true;
+
+  const responseHeader = arrayToObject(responseHeaderList);
+  const query = arrayToUrlParams(queryList.filter((q) => q.checked));
+
+  const baseUrl = state.url?.split('?')[0] || '';
+  const lastSlashIndex = baseUrl.lastIndexOf('/');
+  const name = lastSlashIndex !== -1 ? baseUrl.slice(lastSlashIndex + 1) : '';
+
+  const interceptConfig: DevTool.NetworkItem = {
+    index: 0,
+
+    name,
+    url: state.url,
+    method: state.method,
+    timeout: state.timeout,
+    delay: state.delay,
+    status: state.status as string,
+    time: '',
+    startTime: 0,
+    endTime: 0,
+    size: '',
+    headers: {
+      requestHeader: requestHeaderList,
+      responseHeader: responseHeaderList,
+    },
+    response: {
+      data: '',
+      statusCode: Number(state.status),
+      header: responseHeader,
+      cookies: [],
+      errMsg: 'request:ok',
+    },
+    payload: {},
+  };
+
+  if (noBodyRequestMethods.includes(state.method)) {
+    // 不支持携带 body 参数
+
+    interceptConfig.payload = {};
+  } else {
+    // 支持 url 中携带参数
+
+    if (state.url.includes('?')) {
+      interceptConfig.url = state.url + '&' + query;
+    } else {
+      interceptConfig.url = state.url + '?' + query;
+    }
+
+    // 支持携带 body 参数
+    if (state.bodyText?.trim()) {
+      try {
+        const bodyJson = JSON.parse(state.bodyText);
+        interceptConfig.payload = bodyJson;
+      } catch (_error) {
+        uni.showToast({
+          title: t('network.toastBodyJson'),
+          icon: 'none',
+        });
+        return;
+      }
+    }
+  }
+
+  if (state.responseText?.trim()) {
+    try {
+      const bodyJson = JSON.parse(state.responseText);
+      interceptConfig.response.data = bodyJson;
+    } catch (_error) {
+      uni.showToast({
+        title: t('network.toastRespJson'),
+        icon: 'none',
+      });
+      return;
+    }
+  }
+
+  uni.showToast({
+    icon: 'none',
+    title: t('network.toastSaveSuccess'),
+  });
+
+  emit('confirm', interceptConfig);
+  emit('close');
+}
+
+function onChangeRequestMethod(e: any) {
+  const method = e.detail.value;
+  state.method = method;
+}
+
+function onChangeRequestHeader(e: any, key: 'key' | 'value', index: number) {
+  onChangeRequestHeaderItem(index, key, e.detail.value);
+}
+
+function onChangeResponseHeader(e: any, key: 'key' | 'value', index: number) {
+  onChangeResponseHeaderItem(index, key, e.detail.value);
+}
+
+function handleQueryCheckedChange(e: any) {
+  onChangeQueryChecked(e);
+  state.url = parseListToUrl(state.url, queryList);
+}
+
+function onChangeQuery(e: any, key: 'key' | 'value', index: number) {
+  onChangeQueryItem(index, key, e.detail.value);
+  state.url = parseListToUrl(state.url, queryList);
+}
+
+/**
+ * 处理规格
+ */
+function handleInterceptConfig() {
+  // 如果没有网络数据或尚未开始，则直接返回
+  if (!props.network || !props.network.url) return;
+
+  // 设置基础请求信息
+  state.url = props.network.url;
+  state.method = props.network.method?.toUpperCase() ?? 'GET';
+  state.status = props.network.status as string;
+  state.delay = props.network.delay ?? 0;
+
+  // 初始化请求头
+  const requestHeaders =
+    props.network.headers?.requestHeader?.map((item, index) => {
+      return {
+        ...item,
+        id: index.toString(),
+        checked: true,
+      };
+    }) ?? [];
+
+  setRequestHeaderList(requestHeaders);
+
+  const responseHeaders =
+    props.network.headers?.responseHeader?.map((item, index) => {
+      return {
+        ...item,
+        id: index.toString(),
+        checked: true,
+      };
+    }) ?? [];
+
+  setResponseHeaderList(responseHeaders);
+
+  setQueryList([]);
+
+  //  解析参数
+  if (noBodyRequestMethods.includes(state.method)) {
+    // 参数在 query 中
+    if (props.network.url.includes('?')) {
+      const urlParams = objectToArray(
+        urlParamsToObject(props.network.url.split('?')?.[1] ?? ''),
+      );
+      const payloadParams = objectToArray(props.network.payload);
+
+      const list = unionArrayByKey(urlParams, payloadParams, 'key');
+
+      setQueryList(list);
+    }
+  } else {
+    // 参数在 query 中
+    if (props.network.url.includes('?')) {
+      const urlParams = objectToArray(
+        urlParamsToObject(props.network.url.split('?')?.[1] ?? ''),
+      );
+      setQueryList(urlParams);
+    }
+    state.bodyText = JSON.stringify(props.network.payload);
+  }
+
+  if (props.network.response?.data) {
+    try {
+      state.responseText = JSON.stringify(props.network.response.data);
+    } catch (_error) {
+      state.responseText = props.network.response.data as string;
+    }
+  }
+}
+
+onMounted(() => {
+  handleInterceptConfig();
+});
+</script>
+
+<style scoped>
+.intercept-config {
+  position: fixed;
+  width: 100vw;
+  height: 100%;
+  z-index: 5;
+  top: 0;
+  left: 0;
+  padding: 0 16px;
+
+  /* #ifdef H5 || APP-PLUS */
+  padding: 50px 16px;
+
+  /* #endif */
+  overflow: auto;
+  background-color: var(--dev-tool-bg3-color);
+  box-sizing: border-box;
+}
+
+.intercept-config-tip {
+  font-size: var(--dev-tool-tips-font-size);
+  color: var(--dev-tool-info-color);
+}
+
+.intercept-config-form {
+  height: calc(100% - 32px - 42px);
+  overflow: auto;
+}
+
+.intercept-config-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 32px;
+  border-bottom: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.radio-group-item {
+  display: flex;
+  align-items: center;
+  width: 25%;
+  margin-bottom: 6px;
+}
+
+.intercept-input {
+  padding: 0 6px;
+  height: 24px;
+  border: 1px solid var(--dev-tool-border-color);
+}
+
+.intercept-textarea {
+  padding: 6px;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--dev-tool-border-color);
+}
+
+.form-error-message {
+  padding: 0 6px;
+  height: 24px;
+  line-height: 24px;
+  color: red;
+}
+
+.intercept-header-item {
+  display: flex;
+  align-items: center;
+}
+
+.intercept-empty {
+  color: var(--dev-tool-info-color);
+  text-align: center;
+}
+
+.intercept-param-item {
+  display: flex;
+  align-items: center;
+}
+
+.intercept-body-data-item {
+  display: flex;
+  align-items: center;
+}
+
+.intercept-config-buttons {
+  position: sticky;
+  display: flex;
+  justify-content: space-between;
+
+  /* gap: 6px; */
+  width: 100%;
+  margin-top: 12px;
+  background-color: var(--dev-tool-bg3-color);
+}
+</style>