vite-uni-dev-tool 1.1.0 → 1.2.0

package/dist/v3/DevTool/components/NetworkList/NetworkSend.vue

@@ -1,589 +1,589 @@
-<template>
-  <view class="network-send" :style="customStyle">
-    <view class="network-send-control">
-      <DevToolTitle>{{ t('network.sendRequest') }}</DevToolTitle>
-      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
-    </view>
-    <scroll-view scroll-y class="network-send-form">
-      <view class="network-send-control">
-        <DevToolTitle>{{ t('network.timeout') }}</DevToolTitle>
-      </view>
-      <input
-        class="network-input"
-        :value="state.timeout"
-        @input="onChangeState($event, 'timeout')" />
-      <view class="network-send-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="network-send-control">
-        <DevToolTitle>{{ t('network.requestHeaders') }}</DevToolTitle>
-        <CircularButton
-          style="margin-left: auto"
-          text="＋"
-          @click="onAddHeader" />
-      </view>
-
-      <view class="network-header-list">
-        <checkbox-group
-          v-if="headerList.length > 0"
-          @change="onChangeHeaderChecked">
-          <view
-            class="network-header-item"
-            v-for="(item, index) in headerList"
-            :key="item.id">
-            <checkbox color="#9254de" :checked="item.checked" />
-            <input
-              class="network-input"
-              :placeholder="t('network.placeholderHeaderName')"
-              :value="item.key"
-              @input="onChangeHeader($event, 'key', index)" />
-            <input
-              class="network-input"
-              :placeholder="t('network.placeholderHeaderValue')"
-              :value="item.value"
-              @input="onChangeHeader($event, 'value', index)" />
-            <CircularButton text="一" @click="onDeleteHeader(item)" />
-          </view>
-        </checkbox-group>
-
-        <view class="network-empty" v-else>
-          {{ t('network.noRequestHeaders') }}
-        </view>
-      </view>
-      <DevToolTitle>{{ t('network.requestUrl') }}</DevToolTitle>
-      <textarea
-        :placeholder="t('network.placeholderUrl')"
-        class="network-textarea"
-        :value="state.url"
-        @input="onChangeUrl" />
-      <view class="form-error-message">
-        {{ hasUrl ? '' : t('network.toastEnterUrl') }}
-      </view>
-
-      <view class="network-send-control">
-        <DevToolTitle>{{ t('network.requestParams') }}</DevToolTitle>
-        <CircularButton
-          style="margin-left: auto"
-          text="＋"
-          @click="onAddQuery" />
-      </view>
-      <view class="network-param-list">
-        <checkbox-group
-          v-if="queryList.length > 0"
-          @change="handleQueryCheckedChange">
-          <view
-            class="network-param-item"
-            v-for="(item, index) in queryList"
-            :key="item.id">
-            <checkbox
-              :color="themeColor"
-              :checked="item.checked"
-              :value="item.id" />
-            <input
-              class="network-input"
-              :placeholder="t('network.placeholderParamName')"
-              :value="item.key"
-              @input="onChangeQuery($event, 'key', index)" />
-            <input
-              class="network-input"
-              :placeholder="t('network.placeholderParamValue')"
-              :value="item.value"
-              @input="onChangeQuery($event, 'value', index)" />
-            <CircularButton text="一" @click="onDeleteQuery(item)" />
-          </view>
-        </checkbox-group>
-
-        <view class="network-empty" v-else>
-          {{ t('network.emptyParams') }}
-        </view>
-      </view>
-
-      <template v-if="!noBodyRequestMethods.includes(state.method)">
-        <view class="network-send-control">
-          <DevToolTitle>{{ t('network.requestBody') }}</DevToolTitle>
-        </view>
-
-        <textarea
-          :placeholder="t('network.placeholderBody')"
-          class="network-textarea"
-          :value="state.bodyText"
-          @input="onChangeState($event, 'bodyText')" />
-      </template>
-    </scroll-view>
-    <view class="network-send-buttons">
-      <button
-        size="mini"
-        :disabled="!isFinished"
-        class="network-send-button"
-        @click="emit('openDetail', currentNetwork)">
-        {{ t('network.detail') }}
-      </button>
-      <button size="mini" class="network-send-button" @click="onReset">
-        {{ t('network.reset') }}
-      </button>
-      <button size="mini" class="network-send-button-last" @click="onSend">
-        {{ t('network.send') }}
-      </button>
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import { computed, ref, reactive, onMounted } from 'vue';
-import CircularButton from '../../../components/CircularButton/index.vue';
-import DevToolTitle from '../DevToolTitle/index.vue';
-import type { DevTool } from '../../../../type';
-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;
-  interceptNetworkList?: DevTool.NetworkItem[];
-  customStyle?: Record<string, any>;
-}>();
-
-const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'openDetail', 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://192.168.0.1:8080/a?a=123',
-    bodyText: '',
-    timeout: 3 * 1000,
-  });
-
-const {
-  list: headerList,
-  onAdd: onAddHeader,
-  onDelete: onDeleteHeader,
-  onChangeChecked: onChangeHeaderChecked,
-  onChangeValue: onChangeHeaderItem,
-  setList: setHeaderList,
-} = 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);
-
-const currentNetwork = reactive<DevTool.NetworkItem>({
-  index: 0,
-  url: '',
-  name: '',
-  method: '',
-  status: '',
-  time: '',
-  startTime: 0,
-  endTime: 0,
-  size: '',
-  headers: {
-    requestHeader: [],
-    responseHeader: [],
-  },
-  response: {
-    data: undefined,
-    statusCode: 0,
-    header: {},
-    cookies: [],
-    errMsg: '',
-  },
-  payload: undefined,
-  intercepted: false,
-  sponsor: 'dev_tool',
-});
-
-function onChangeHeader(e: any, key: 'key' | 'value', index: number) {
-  onChangeHeaderItem(index, key, e.detail.value);
-}
-
-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 = '';
-  setHeaderList(defaultHeader);
-  setQueryList([]);
-}
-
-function onClose() {
-  emit('close');
-  onReset();
-}
-
-function onSend() {
-  if (!state.url) {
-    hasUrl.value = false;
-    uni.showToast({
-      title: t('network.toastEnterUrl'),
-      icon: 'none',
-    });
-    return;
-  }
-  hasUrl.value = true;
-
-  const header = arrayToObject(headerList);
-  const query = arrayToUrlParams(queryList.filter((q) => q.checked));
-
-  const requestOptions: UniNamespace.RequestOptions = {
-    url: state.url,
-    method: state.method,
-    timeout: state.timeout,
-    header: {
-      ...header,
-      /** 标记请求发起人 devTool */
-      'dev-tool-sponsor': Date.now(),
-    },
-  };
-
-  if (noBodyRequestMethods.includes(state.method)) {
-    // 不支持携带 body 参数
-    requestOptions.data = {};
-    state.url = parseListToUrl(state.url, queryList);
-  } else {
-    // 支持 url 中携带参数
-
-    if (state.url.includes('?')) {
-      requestOptions.url = state.url + '&' + query;
-    } else {
-      requestOptions.url = state.url + '?' + query;
-    }
-
-    // 支持携带 body 参数
-    if (state.bodyText?.trim()) {
-      try {
-        const bodyJson = JSON.parse(state.bodyText);
-        requestOptions.data = bodyJson;
-      } catch (_error) {
-        uni.showToast({
-          title: t('network.toastBodyJson'),
-          icon: 'none',
-        });
-        return;
-      }
-    }
-  }
-
-  isFinished.value = false;
-
-  uni.showLoading({
-    title: t('network.sending'),
-    mask: true,
-  });
-
-  const baseUrl = requestOptions.url?.split('?')[0] || '';
-  const lastSlashIndex = baseUrl.lastIndexOf('/');
-  const name = lastSlashIndex !== -1 ? baseUrl.slice(lastSlashIndex + 1) : '';
-
-  currentNetwork.startTime = Date.now();
-
-  uni.request({
-    ...requestOptions,
-    complete: (res: any) => {
-      // 赋值结果
-      currentNetwork.url = requestOptions.url;
-      currentNetwork.name = name;
-      currentNetwork.method = requestOptions.method as string;
-      currentNetwork.payload = requestOptions.data
-        ? JSON.stringify(requestOptions.data)
-        : '';
-      currentNetwork.endTime = Date.now();
-      currentNetwork.status = res.statusCode ?? 'error';
-      const diff = currentNetwork.endTime - currentNetwork.startTime;
-      currentNetwork.time = diff < 1000 ? diff + 'ms' : diff / 1000 + 's';
-      const len =
-        res?.header?.['Content-Length'] || res?.header?.['content-length'] || 0;
-      currentNetwork.size =
-        len > 1024 ? (len / 1024).toFixed(2) + 'k' : len + 'b';
-      currentNetwork.response = res;
-      currentNetwork.headers.requestHeader = objectToArray(
-        requestOptions?.header ?? {},
-      );
-      currentNetwork.headers.responseHeader = objectToArray(res.header ?? {});
-
-      currentNetwork.intercepted =
-        props.interceptNetworkList?.some((item) => {
-          const key = `${item.method?.toUpperCase()}|${item.url?.split('?')[0]}`;
-          const curKey = `${currentNetwork.method?.toUpperCase()}|${currentNetwork.url?.split('?')[0]}`;
-          return key === curKey;
-        }) ?? false;
-
-      // 完成
-      uni.hideLoading();
-      isFinished.value = true;
-      uni.showToast({
-        title: t('network.toastRequestSuccess'),
-        icon: 'none',
-      });
-    },
-  });
-}
-
-function onChangeRequestMethod(e: any) {
-  const method = e.detail.value;
-  state.method = method;
-}
-
-function onChangeQuery(e: any, key: 'key' | 'value', index: number) {
-  onChangeQueryItem(index, key, e.detail.value);
-  state.url = parseListToUrl(state.url, queryList);
-}
-
-function handleQueryCheckedChange(e: any) {
-  onChangeQueryChecked(e);
-  state.url = parseListToUrl(state.url, queryList);
-}
-
-/**
- * 处理重发参数
- */
-function handleResendNetwork() {
-  // 如果没有网络数据或尚未开始，则直接返回
-  if (!props.network || props.network.startTime === 0) return;
-
-  // 设置基础请求信息
-  state.url = props.network.url;
-  state.method = props.network.method?.toUpperCase() ?? 'GET';
-
-  // 初始化请求头
-  const requestHeaders =
-    props.network.headers?.requestHeader?.map((item, index) => {
-      return {
-        ...item,
-        checked: true,
-        id: index.toString(),
-      };
-    }) ?? [];
-
-  setHeaderList(requestHeaders);
-
-  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);
-  }
-}
-
-onMounted(() => {
-  handleResendNetwork();
-});
-</script>
-
-<style scoped>
-.network-send {
-  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;
-}
-
-.network-send-form {
-  height: calc(100% - 32px - 56px);
-  overflow: auto;
-}
-
-.network-send-control {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  height: 32px;
-  border-bottom: 1px solid transparent;
-  box-sizing: border-box;
-}
-
-.network-send-control:first-child {
-  margin-top: 0;
-}
-
-.radio-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 0; /* Add gap between rows if wrapped */
-}
-
-.radio-group-item {
-  display: flex;
-  align-items: center;
-  width: 25%;
-  font-size: 14px;
-}
-
-.network-input {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0 8px;
-  height: 24px;
-  font-size: 14px;
-  border-radius: 4px;
-  border: 1px solid var(--dev-tool-border-color);
-  background-color: transparent;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  color: var(--dev-tool-text-color, inherit);
-}
-
-.network-input:focus {
-  border-color: var(--dev-tool-primary-color, #9254de);
-  box-shadow: 0 0 0 2px rgb(146 84 222 / 10%);
-}
-
-.network-textarea {
-  padding: 8px;
-  width: 100%;
-  box-sizing: border-box;
-  font-size: 14px;
-  border-radius: 4px;
-  border: 1px solid var(--dev-tool-border-color);
-  background-color: transparent;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  color: var(--dev-tool-text-color, inherit);
-  min-height: 80px;
-}
-
-.network-textarea:focus {
-  border-color: var(--dev-tool-primary-color, #9254de);
-  box-shadow: 0 0 0 2px rgb(146 84 222 / 10%);
-}
-
-.form-error-message {
-  padding: 4px 6px;
-  height: 24px;
-  line-height: 24px;
-  color: #ff4d4f; /* softer red */
-  font-size: 12px;
-}
-
-.network-header-list,
-.network-param-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.network-header-item,
-.network-param-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.network-header-item .network-input,
-.network-param-item .network-input {
-  flex: 1;
-  min-width: 0; /* Prevents flex item from overflowing */
-}
-
-.network-empty {
-  color: var(--dev-tool-info-color);
-  text-align: center;
-  padding: 12px 0;
-  font-size: 13px;
-}
-
-.network-body-data-item {
-  display: flex;
-  align-items: center;
-}
-
-.network-send-buttons {
-  position: sticky;
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  margin-top: 16px;
-  padding-bottom: 16px;
-  background-color: var(--dev-tool-bg3-color);
-}
-
-.network-send-button,
-.network-send-button-last {
-  flex: 1;
-  margin: 0 !important; /* override default margin */
-  border-radius: 6px;
-}
-</style>
+<template>
+  <view class="network-send" :style="customStyle">
+    <view class="network-send-control">
+      <DevToolTitle>{{ t('network.sendRequest') }}</DevToolTitle>
+      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
+    </view>
+    <scroll-view scroll-y class="network-send-form">
+      <view class="network-send-control">
+        <DevToolTitle>{{ t('network.timeout') }}</DevToolTitle>
+      </view>
+      <input
+        class="network-input"
+        :value="state.timeout"
+        @input="onChangeState($event, 'timeout')" />
+      <view class="network-send-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="network-send-control">
+        <DevToolTitle>{{ t('network.requestHeaders') }}</DevToolTitle>
+        <CircularButton
+          style="margin-left: auto"
+          text="＋"
+          @click="onAddHeader" />
+      </view>
+
+      <view class="network-header-list">
+        <checkbox-group
+          v-if="headerList.length > 0"
+          @change="onChangeHeaderChecked">
+          <view
+            class="network-header-item"
+            v-for="(item, index) in headerList"
+            :key="item.id">
+            <checkbox color="#9254de" :checked="item.checked" />
+            <input
+              class="network-input"
+              :placeholder="t('network.placeholderHeaderName')"
+              :value="item.key"
+              @input="onChangeHeader($event, 'key', index)" />
+            <input
+              class="network-input"
+              :placeholder="t('network.placeholderHeaderValue')"
+              :value="item.value"
+              @input="onChangeHeader($event, 'value', index)" />
+            <CircularButton text="一" @click="onDeleteHeader(item)" />
+          </view>
+        </checkbox-group>
+
+        <view class="network-empty" v-else>
+          {{ t('network.noRequestHeaders') }}
+        </view>
+      </view>
+      <DevToolTitle>{{ t('network.requestUrl') }}</DevToolTitle>
+      <textarea
+        :placeholder="t('network.placeholderUrl')"
+        class="network-textarea"
+        :value="state.url"
+        @input="onChangeUrl" />
+      <view class="form-error-message">
+        {{ hasUrl ? '' : t('network.toastEnterUrl') }}
+      </view>
+
+      <view class="network-send-control">
+        <DevToolTitle>{{ t('network.requestParams') }}</DevToolTitle>
+        <CircularButton
+          style="margin-left: auto"
+          text="＋"
+          @click="onAddQuery" />
+      </view>
+      <view class="network-param-list">
+        <checkbox-group
+          v-if="queryList.length > 0"
+          @change="handleQueryCheckedChange">
+          <view
+            class="network-param-item"
+            v-for="(item, index) in queryList"
+            :key="item.id">
+            <checkbox
+              :color="themeColor"
+              :checked="item.checked"
+              :value="item.id" />
+            <input
+              class="network-input"
+              :placeholder="t('network.placeholderParamName')"
+              :value="item.key"
+              @input="onChangeQuery($event, 'key', index)" />
+            <input
+              class="network-input"
+              :placeholder="t('network.placeholderParamValue')"
+              :value="item.value"
+              @input="onChangeQuery($event, 'value', index)" />
+            <CircularButton text="一" @click="onDeleteQuery(item)" />
+          </view>
+        </checkbox-group>
+
+        <view class="network-empty" v-else>
+          {{ t('network.emptyParams') }}
+        </view>
+      </view>
+
+      <template v-if="!noBodyRequestMethods.includes(state.method)">
+        <view class="network-send-control">
+          <DevToolTitle>{{ t('network.requestBody') }}</DevToolTitle>
+        </view>
+
+        <textarea
+          :placeholder="t('network.placeholderBody')"
+          class="network-textarea"
+          :value="state.bodyText"
+          @input="onChangeState($event, 'bodyText')" />
+      </template>
+    </scroll-view>
+    <view class="network-send-buttons">
+      <button
+        size="mini"
+        :disabled="!isFinished"
+        class="network-send-button"
+        @click="emit('openDetail', currentNetwork)">
+        {{ t('network.detail') }}
+      </button>
+      <button size="mini" class="network-send-button" @click="onReset">
+        {{ t('network.reset') }}
+      </button>
+      <button size="mini" class="network-send-button-last" @click="onSend">
+        {{ t('network.send') }}
+      </button>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed, ref, reactive, onMounted } from 'vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import type { DevTool } from '../../../../type';
+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;
+  interceptNetworkList?: DevTool.NetworkItem[];
+  customStyle?: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'openDetail', 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://192.168.0.1:8080/a?a=123',
+    bodyText: '',
+    timeout: 3 * 1000,
+  });
+
+const {
+  list: headerList,
+  onAdd: onAddHeader,
+  onDelete: onDeleteHeader,
+  onChangeChecked: onChangeHeaderChecked,
+  onChangeValue: onChangeHeaderItem,
+  setList: setHeaderList,
+} = 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);
+
+const currentNetwork = reactive<DevTool.NetworkItem>({
+  index: 0,
+  url: '',
+  name: '',
+  method: '',
+  status: '',
+  time: '',
+  startTime: 0,
+  endTime: 0,
+  size: '',
+  headers: {
+    requestHeader: [],
+    responseHeader: [],
+  },
+  response: {
+    data: undefined,
+    statusCode: 0,
+    header: {},
+    cookies: [],
+    errMsg: '',
+  },
+  payload: undefined,
+  intercepted: false,
+  sponsor: 'dev_tool',
+});
+
+function onChangeHeader(e: any, key: 'key' | 'value', index: number) {
+  onChangeHeaderItem(index, key, e.detail.value);
+}
+
+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 = '';
+  setHeaderList(defaultHeader);
+  setQueryList([]);
+}
+
+function onClose() {
+  emit('close');
+  onReset();
+}
+
+function onSend() {
+  if (!state.url) {
+    hasUrl.value = false;
+    uni.showToast({
+      title: t('network.toastEnterUrl'),
+      icon: 'none',
+    });
+    return;
+  }
+  hasUrl.value = true;
+
+  const header = arrayToObject(headerList);
+  const query = arrayToUrlParams(queryList.filter((q) => q.checked));
+
+  const requestOptions: UniNamespace.RequestOptions = {
+    url: state.url,
+    method: state.method,
+    timeout: state.timeout,
+    header: {
+      ...header,
+      /** 标记请求发起人 devTool */
+      'dev-tool-sponsor': Date.now(),
+    },
+  };
+
+  if (noBodyRequestMethods.includes(state.method)) {
+    // 不支持携带 body 参数
+    requestOptions.data = {};
+    state.url = parseListToUrl(state.url, queryList);
+  } else {
+    // 支持 url 中携带参数
+
+    if (state.url.includes('?')) {
+      requestOptions.url = state.url + '&' + query;
+    } else {
+      requestOptions.url = state.url + '?' + query;
+    }
+
+    // 支持携带 body 参数
+    if (state.bodyText?.trim()) {
+      try {
+        const bodyJson = JSON.parse(state.bodyText);
+        requestOptions.data = bodyJson;
+      } catch (_error) {
+        uni.showToast({
+          title: t('network.toastBodyJson'),
+          icon: 'none',
+        });
+        return;
+      }
+    }
+  }
+
+  isFinished.value = false;
+
+  uni.showLoading({
+    title: t('network.sending'),
+    mask: true,
+  });
+
+  const baseUrl = requestOptions.url?.split('?')[0] || '';
+  const lastSlashIndex = baseUrl.lastIndexOf('/');
+  const name = lastSlashIndex !== -1 ? baseUrl.slice(lastSlashIndex + 1) : '';
+
+  currentNetwork.startTime = Date.now();
+
+  uni.request({
+    ...requestOptions,
+    complete: (res: any) => {
+      // 赋值结果
+      currentNetwork.url = requestOptions.url;
+      currentNetwork.name = name;
+      currentNetwork.method = requestOptions.method as string;
+      currentNetwork.payload = requestOptions.data
+        ? JSON.stringify(requestOptions.data)
+        : '';
+      currentNetwork.endTime = Date.now();
+      currentNetwork.status = res.statusCode ?? 'error';
+      const diff = currentNetwork.endTime - currentNetwork.startTime;
+      currentNetwork.time = diff < 1000 ? diff + 'ms' : diff / 1000 + 's';
+      const len =
+        res?.header?.['Content-Length'] || res?.header?.['content-length'] || 0;
+      currentNetwork.size =
+        len > 1024 ? (len / 1024).toFixed(2) + 'k' : len + 'b';
+      currentNetwork.response = res;
+      currentNetwork.headers.requestHeader = objectToArray(
+        requestOptions?.header ?? {},
+      );
+      currentNetwork.headers.responseHeader = objectToArray(res.header ?? {});
+
+      currentNetwork.intercepted =
+        props.interceptNetworkList?.some((item) => {
+          const key = `${item.method?.toUpperCase()}|${item.url?.split('?')[0]}`;
+          const curKey = `${currentNetwork.method?.toUpperCase()}|${currentNetwork.url?.split('?')[0]}`;
+          return key === curKey;
+        }) ?? false;
+
+      // 完成
+      uni.hideLoading();
+      isFinished.value = true;
+      uni.showToast({
+        title: t('network.toastRequestSuccess'),
+        icon: 'none',
+      });
+    },
+  });
+}
+
+function onChangeRequestMethod(e: any) {
+  const method = e.detail.value;
+  state.method = method;
+}
+
+function onChangeQuery(e: any, key: 'key' | 'value', index: number) {
+  onChangeQueryItem(index, key, e.detail.value);
+  state.url = parseListToUrl(state.url, queryList);
+}
+
+function handleQueryCheckedChange(e: any) {
+  onChangeQueryChecked(e);
+  state.url = parseListToUrl(state.url, queryList);
+}
+
+/**
+ * 处理重发参数
+ */
+function handleResendNetwork() {
+  // 如果没有网络数据或尚未开始，则直接返回
+  if (!props.network || props.network.startTime === 0) return;
+
+  // 设置基础请求信息
+  state.url = props.network.url;
+  state.method = props.network.method?.toUpperCase() ?? 'GET';
+
+  // 初始化请求头
+  const requestHeaders =
+    props.network.headers?.requestHeader?.map((item, index) => {
+      return {
+        ...item,
+        checked: true,
+        id: index.toString(),
+      };
+    }) ?? [];
+
+  setHeaderList(requestHeaders);
+
+  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);
+  }
+}
+
+onMounted(() => {
+  handleResendNetwork();
+});
+</script>
+
+<style scoped>
+.network-send {
+  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;
+}
+
+.network-send-form {
+  height: calc(100% - 32px - 56px);
+  overflow: auto;
+}
+
+.network-send-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 32px;
+  border-bottom: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.network-send-control:first-child {
+  margin-top: 0;
+}
+
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 0; /* Add gap between rows if wrapped */
+}
+
+.radio-group-item {
+  display: flex;
+  align-items: center;
+  width: 25%;
+  font-size: 14px;
+}
+
+.network-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 8px;
+  height: 24px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid var(--dev-tool-border-color);
+  background-color: transparent;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  color: var(--dev-tool-text-color, inherit);
+}
+
+.network-input:focus {
+  border-color: var(--dev-tool-primary-color, #9254de);
+  box-shadow: 0 0 0 2px rgb(146 84 222 / 10%);
+}
+
+.network-textarea {
+  padding: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid var(--dev-tool-border-color);
+  background-color: transparent;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  color: var(--dev-tool-text-color, inherit);
+  min-height: 80px;
+}
+
+.network-textarea:focus {
+  border-color: var(--dev-tool-primary-color, #9254de);
+  box-shadow: 0 0 0 2px rgb(146 84 222 / 10%);
+}
+
+.form-error-message {
+  padding: 4px 6px;
+  height: 24px;
+  line-height: 24px;
+  color: #ff4d4f; /* softer red */
+  font-size: 12px;
+}
+
+.network-header-list,
+.network-param-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.network-header-item,
+.network-param-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.network-header-item .network-input,
+.network-param-item .network-input {
+  flex: 1;
+  min-width: 0; /* Prevents flex item from overflowing */
+}
+
+.network-empty {
+  color: var(--dev-tool-info-color);
+  text-align: center;
+  padding: 12px 0;
+  font-size: 13px;
+}
+
+.network-body-data-item {
+  display: flex;
+  align-items: center;
+}
+
+.network-send-buttons {
+  position: sticky;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  margin-top: 16px;
+  padding-bottom: 16px;
+  background-color: var(--dev-tool-bg3-color);
+}
+
+.network-send-button,
+.network-send-button-last {
+  flex: 1;
+  margin: 0 !important; /* override default margin */
+  border-radius: 6px;
+}
+</style>