vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/NetworkList/InterceptConfig.vue

@@ -1,266 +1,227 @@
 <template>
   <view class="intercept-config" :style="customStyle">
     <view class="intercept-config-control">
-      <DevToolTitle>拦截规则配置</DevToolTitle>
+      <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">
-        tips:
-        拦截请求，发送请求之前将采用输入的请求头和请求参数，返回响应头和响应参数。会真实发起一次请求(真实请求可能失败)，更改最后的响应结果。
+        {{ t('network.tipsIntercept') }}
       </view>
       <view class="intercept-config-control">
-        <DevToolTitle>超时时间(ms)</DevToolTitle>
+        <DevToolTitle>{{ t('network.timeout') }}</DevToolTitle>
       </view>
       <input
         class="intercept-input"
         :value="state.timeout"
-        @input="onChangeState($event, 'timeout')"
-      />
+        @input="onChangeState($event, 'timeout')" />
       <view class="intercept-config-tip">
-        tips: 防止请求不存在，请求时长异常
+        {{ t('network.tipsTimeout') }}
       </view>
       <view class="intercept-config-control">
-        <DevToolTitle>响应状态</DevToolTitle>
+        <DevToolTitle>{{ t('network.responseStatus') }}</DevToolTitle>
       </view>
       <input
         class="intercept-input"
         :value="state.status"
-        @input="onChangeState($event, 'status')"
-      />
+        @input="onChangeState($event, 'status')" />
       <view class="intercept-config-control">
-        <DevToolTitle>请求方式</DevToolTitle>
+        <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"
-        >
+          :key="item.value">
           <radio
             size
             style="transform: scale(0.8)"
-            color="#9254de"
+            :color="themeColor"
             :value="item.value"
-            :checked="item.value === state.method"
-          />
+            :checked="item.value === state.method" />
 
           <view>{{ item.name }}</view>
         </label>
       </radio-group>
 
       <view class="intercept-config-control">
-        <DevToolTitle>请求头</DevToolTitle>
+        <DevToolTitle>{{ t('network.requestHeaders') }}</DevToolTitle>
         <CircularButton
           style="margin-left: auto"
           text="＋"
-          @click="onAddRequestHeader"
-        />
+          @click="onAddRequestHeader" />
       </view>
 
       <view class="intercept-header-list">
         <checkbox-group
           v-if="requestHeaderList.length > 0"
           key="requestHeaderList"
-          @change="onChangeRequestHeaderChecked"
-        >
+          @change="onChangeRequestHeaderChecked">
           <view
             class="intercept-header-item"
             v-for="(item, index) in requestHeaderList"
-            :key="item.id"
-          >
+            :key="item.id">
             <checkbox
-              color="#9254de"
+              :color="themeColor"
               :value="item.id"
-              :checked="item.checked"
-            />
+              :checked="item.checked" />
             <input
               class="intercept-input"
-              placeholder="请输入请求头名称"
-              placeholderStyle="font-size: 12px"
+              :placeholder="t('network.placeholderHeaderName')"
               :value="item.key"
-              @input="onChangeRequestHeader($event, 'key', index)"
-            />
+              @input="onChangeRequestHeader($event, 'key', index)" />
             <input
               class="intercept-input"
-              placeholder="请输入请求头值"
-              placeholderStyle="font-size: 12px"
+              :placeholder="t('network.placeholderHeaderValue')"
               :value="item.value"
-              @input="onChangeRequestHeader($event, 'value', index)"
-            />
+              @input="onChangeRequestHeader($event, 'value', index)" />
             <CircularButton
               style="margin-left: 6px"
               text="一"
-              @click="onDeleteRequestHeader(item)"
-            />
+              @click="onDeleteRequestHeader(item)" />
           </view>
         </checkbox-group>
 
-        <view class="intercept-empty" v-else> 暂无请求头 </view>
+        <view class="intercept-empty" v-else>
+          {{ t('network.noRequestHeaders') }}
+        </view>
       </view>
 
       <view class="intercept-config-control">
-        <DevToolTitle>响应头</DevToolTitle>
+        <DevToolTitle>{{ t('network.responseHeaders') }}</DevToolTitle>
         <CircularButton
           style="margin-left: auto"
           text="＋"
-          @click="onAddResponseHeader"
-        />
+          @click="onAddResponseHeader" />
       </view>
 
       <view class="intercept-header-list">
         <checkbox-group
           v-if="responseHeaderList.length > 0"
           key="responseHeaderList"
-          @change="onChangeResponseHeaderChecked"
-        >
+          @change="onChangeResponseHeaderChecked">
           <view
             class="intercept-header-item"
             v-for="(item, index) in responseHeaderList"
-            :key="item.id"
-          >
+            :key="item.id">
             <checkbox
-              color="#9254de"
+              :color="themeColor"
               :value="item.id"
-              :checked="item.checked"
-            />
+              :checked="item.checked" />
             <input
               class="intercept-input"
-              placeholder="请输入响应头名称"
-              placeholderStyle="font-size: 12px"
+              :placeholder="t('network.placeholderRespHeaderName')"
               :value="item.key"
-              @input="onChangeResponseHeader($event, 'key', index)"
-            />
+              @input="onChangeResponseHeader($event, 'key', index)" />
             <input
               class="intercept-input"
-              placeholder="请输入响应头值"
-              placeholderStyle="font-size: 12px"
+              :placeholder="t('network.placeholderRespHeaderValue')"
               :value="item.value"
-              @input="onChangeResponseHeader($event, 'value', index)"
-            />
+              @input="onChangeResponseHeader($event, 'value', index)" />
             <CircularButton
               style="margin-left: 6px"
               text="一"
-              @click="onDeleteResponseHeader(item)"
-            />
+              @click="onDeleteResponseHeader(item)" />
           </view>
         </checkbox-group>
 
-        <view class="intercept-empty" v-else> 暂无响应头 </view>
+        <view class="intercept-empty" v-else>
+          {{ t('network.noResponseHeaders') }}
+        </view>
       </view>
-      <DevToolTitle>请求地址</DevToolTitle>
+      <DevToolTitle>{{ t('network.requestUrl') }}</DevToolTitle>
       <textarea
-        placeholder="请输入请求地址"
-        placeholderStyle="font-size: 12px"
+        :placeholder="t('network.placeholderUrl')"
         class="intercept-textarea"
         :value="state.url"
-        @input="onChangeUrl"
-      />
+        @input="onChangeUrl" />
       <view class="form-error-message">
-        {{ hasUrl ? '' : '请输入请求地址' }}
+        {{ hasUrl ? '' : t('network.toastEnterUrl') }}
       </view>
 
       <view class="intercept-config-control">
-        <DevToolTitle>请求参数(query)</DevToolTitle>
+        <DevToolTitle>{{ t('network.requestParams') }}</DevToolTitle>
         <CircularButton
           style="margin-left: auto"
           text="＋"
-          @click="onAddQuery"
-        />
+          @click="onAddQuery" />
       </view>
       <view class="intercept-param-list">
         <checkbox-group
           v-if="queryList.length > 0"
-          @change="onChangeQueryChecked"
-        >
+          @change="handleQueryCheckedChange">
           <view
             class="intercept-param-item"
             v-for="(item, index) in queryList"
-            :key="item.id"
-          >
+            :key="item.id">
             <checkbox
-              color="#9254de"
+              :color="themeColor"
               :checked="item.checked"
-              :value="item.id"
-            />
+              :value="item.id" />
             <input
               class="intercept-input"
-              placeholder="请输入参数名称"
-              placeholderStyle="font-size: 12px"
+              :placeholder="t('network.placeholderParamName')"
               :value="item.key"
-              @input="onChangeQuery($event, 'key', index)"
-            />
+              @input="onChangeQuery($event, 'key', index)" />
             <input
               class="intercept-input"
-              placeholder="请输入参数值"
-              placeholderStyle="font-size: 12px"
+              :placeholder="t('network.placeholderParamValue')"
               :value="item.value"
-              @input="onChangeQuery($event, 'value', index)"
-            />
+              @input="onChangeQuery($event, 'value', index)" />
             <CircularButton
               text="一"
               style="margin-left: 6px"
-              @click="onDeleteQuery(item)"
-            />
+              @click="onDeleteQuery(item)" />
           </view>
         </checkbox-group>
 
-        <view class="intercept-empty" v-else> 暂无请求参数 </view>
+        <view class="intercept-empty" v-else>
+          {{ t('network.emptyParams') }}
+        </view>
       </view>
 
       <template v-if="!noBodyRequestMethods.includes(state.method)">
         <view class="intercept-config-control">
-          <DevToolTitle>请求体(request body)</DevToolTitle>
+          <DevToolTitle>{{ t('network.requestBody') }}</DevToolTitle>
         </view>
 
         <textarea
-          placeholder="请输入请求体"
+          :placeholder="t('network.placeholderBody')"
           class="intercept-textarea"
-          placeholderStyle="font-size: 12px"
           :value="state.bodyText"
-          @input="onChangeState($event, 'bodyText')"
-        />
+          @input="onChangeState($event, 'bodyText')" />
       </template>
 
       <view class="intercept-config-control">
-        <DevToolTitle>响应体(response body)</DevToolTitle>
+        <DevToolTitle>{{ t('network.responseBody') }}</DevToolTitle>
       </view>
       <textarea
-        placeholder="请输入响应体"
+        :placeholder="t('network.placeholderRespBody')"
         class="intercept-textarea"
-        placeholderStyle="font-size: 12px"
         :value="state.responseText"
-        @input="onChangeState($event, 'responseText')"
-      />
+        @input="onChangeState($event, 'responseText')" />
     </scroll-view>
     <view class="intercept-config-buttons">
-      <!-- <button
-        size="mini"
-        :disabled="!isFinished"
-        @click="emit('openDetail', network)"
-      >
-        详情
-      </button>
-      <button size="mini" @click="onReset">重置</button>
-      <button size="mini" @click="onSend">发送</button> -->
-      <button
-        size="mini"
-        style="width: 100%; background-color: #9254de; color: #fff"
-        @click="onConfirm"
-      >
-        保存配置
-      </button>
+      <SettingButton @click="onConfirm">
+        {{ t('network.saveConfig') }}
+      </SettingButton>
     </view>
   </view>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue';
+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>;
@@ -272,73 +233,54 @@ const emit = defineEmits<{
   (e: 'confirm', v: DevTool.NetworkItem): void;
 }>();
 
-const requestMethods = [
-  { name: 'GET', value: 'GET' },
-  { name: 'POST', value: 'POST' },
-  { name: 'PUT', value: 'PUT' },
-  { name: 'DELETE', value: 'DELETE' },
-  { name: 'PATCH', value: 'PATCH' },
-  { name: 'OPTIONS', value: 'OPTIONS' },
-  { name: 'HEAD', value: 'HEAD' },
-];
-
-const hasUrl = ref(true);
-
-const state = reactive<{
-  method: any;
-  url: string;
-  status: number | string;
-  bodyText: string;
-  responseText: string;
-  timeout: number;
-}>({
-  method: 'GET',
-  url: 'http://mock.view-uni-dev-tool/a?a=123',
-  status: 200,
-  bodyText: '',
-  responseText: '',
-  timeout: 3 * 1000,
-});
-
-const defaultHeader = [
-  {
-    id: '1',
-    key: 'Accept',
-    value: '*/*',
-    checked: false,
-  },
-  {
-    id: '2',
-    key: 'Accept-Language',
-    value: 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
-    checked: false,
-  },
-  {
-    id: '3',
-    key: 'Cache-Control',
-    value: 'no-cache',
-    checked: false,
-  },
-  {
-    id: '4',
-    key: 'Content-Type',
-    value: 'application/json; charset=utf-8',
-    checked: true,
-  },
-];
-
-type PB = {
-  id: string;
-  key: string;
-  value: string;
-  checked: boolean;
-};
-
-const requestHeaderList = reactive([...defaultHeader]);
-
-const responseHeaderList = reactive([...defaultHeader]);
+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 queryList = reactive<PB[]>([
+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',
@@ -349,39 +291,11 @@ const queryList = reactive<PB[]>([
 
 const isFinished = ref(false);
 
-const noBodyRequestMethods = ['GET', 'HEAD', 'PATCH', 'OPTIONS'];
-
-function onChangeState(e: any, key: keyof typeof state) {
-  state[key] = e.detail.value as never;
-}
-
-function parseUrlToList(url: string) {
-  if (url.includes('?')) {
-    const query = url.split('?')[1];
-    const queryObject = urlParamsToObject(query);
-    const list = objectToArray(queryObject);
-
-    return list;
-  }
-  return [];
-}
-
-function parseListToUrl(list: PB[]) {
-  const baseUrl = state.url.split('?')[0] || '';
-  if (list.length === 0) {
-    return baseUrl;
-  } else {
-    return (
-      baseUrl + '?' + arrayToUrlParams(queryList?.filter((q) => q.checked))
-    );
-  }
-}
-
 function onChangeUrl(e: any) {
   const url = e.detail.value;
   state.url = url;
   const list = parseUrlToList(url);
-  queryList.splice(0, queryList.length, ...list);
+  setQueryList(list);
 }
 
 function onReset() {
@@ -390,8 +304,8 @@ function onReset() {
   state.method = 'GET';
   state.url = '';
   state.bodyText = '';
-  responseHeaderList.splice(0, responseHeaderList.length, ...defaultHeader);
-  queryList.splice(0, queryList.length);
+  setResponseHeaderList(defaultHeader);
+  setQueryList([]);
 }
 
 function onClose() {
@@ -403,7 +317,7 @@ function onConfirm() {
   if (!state.url) {
     hasUrl.value = false;
     uni.showToast({
-      title: '请输入请求地址',
+      title: t('network.toastEnterUrl'),
       icon: 'none',
     });
     return;
@@ -411,7 +325,7 @@ function onConfirm() {
   hasUrl.value = true;
 
   const responseHeader = arrayToObject(responseHeaderList);
-  const query = arrayToUrlParams(queryList);
+  const query = arrayToUrlParams(queryList.filter((q) => q.checked));
 
   const baseUrl = state.url?.split('?')[0] || '';
   const lastSlashIndex = baseUrl.lastIndexOf('/');
@@ -424,7 +338,7 @@ function onConfirm() {
     url: state.url,
     method: state.method,
     timeout: state.timeout,
-    status: state.status,
+    status: state.status as string,
     time: '',
     startTime: 0,
     endTime: 0,
@@ -435,7 +349,7 @@ function onConfirm() {
     },
     response: {
       data: '',
-      statusCode: state.status,
+      statusCode: Number(state.status),
       header: responseHeader,
       cookies: [],
       errMsg: 'request:ok',
@@ -461,9 +375,9 @@ function onConfirm() {
       try {
         const bodyJson = JSON.parse(state.bodyText);
         interceptConfig.payload = bodyJson;
-      } catch (error) {
+      } catch (_error) {
         uni.showToast({
-          title: '请求体请输入正确的JSON格式',
+          title: t('network.toastBodyJson'),
           icon: 'none',
         });
         return;
@@ -475,9 +389,9 @@ function onConfirm() {
     try {
       const bodyJson = JSON.parse(state.responseText);
       interceptConfig.response.data = bodyJson;
-    } catch (error) {
+    } catch (_error) {
       uni.showToast({
-        title: '响应体请输入正确的JSON格式',
+        title: t('network.toastRespJson'),
         icon: 'none',
       });
       return;
@@ -486,7 +400,7 @@ function onConfirm() {
 
   uni.showToast({
     icon: 'none',
-    title: '保存成功',
+    title: t('network.toastSaveSuccess'),
   });
 
   emit('confirm', interceptConfig);
@@ -498,147 +412,22 @@ function onChangeRequestMethod(e: any) {
   state.method = method;
 }
 
-function onDeleteResponseHeader(item: any) {
-  const index = responseHeaderList.findIndex((i) => i.id === item.id);
-  responseHeaderList.splice(index, 1);
-}
-
-function onDeleteRequestHeader(item: any) {
-  const index = requestHeaderList.findIndex((i) => i.id === item.id);
-  requestHeaderList.splice(index, 1);
-}
-
-function onAddRequestHeader() {
-  const id = Date.now()?.toString();
-  requestHeaderList.push({
-    id,
-    key: '',
-    value: '',
-    checked: false,
-  });
-}
-function onChangeRequestHeaderChecked(e: any) {
-  const list = e.detail?.value ?? [];
-
-  Object.assign(
-    requestHeaderList,
-    requestHeaderList.map((item) => {
-      return { ...item, checked: list?.includes(item.id) };
-    }),
-  );
-}
-
 function onChangeRequestHeader(e: any, key: 'key' | 'value', index: number) {
-  requestHeaderList[index][key] = e.detail.value;
-}
-
-function onAddResponseHeader() {
-  const id = Date.now()?.toString();
-  responseHeaderList.push({
-    id,
-    key: '',
-    value: '',
-    checked: false,
-  });
-}
-
-function onChangeResponseHeaderChecked(e: any) {
-  const list = e.detail?.value ?? [];
-
-  Object.assign(
-    responseHeaderList,
-    responseHeaderList.map((item) => {
-      return { ...item, checked: list?.includes(item.id) };
-    }),
-  );
+  onChangeRequestHeaderItem(index, key, e.detail.value);
 }
 
 function onChangeResponseHeader(e: any, key: 'key' | 'value', index: number) {
-  responseHeaderList[index][key] = e.detail.value;
-}
-
-function onDeleteQuery(item: any) {
-  const index = queryList.findIndex((i) => i.id === item.id);
-  queryList.splice(index, 1);
-}
-function onAddQuery() {
-  const id = Date.now()?.toString();
-  queryList.push({
-    id,
-    key: '',
-    value: '',
-    checked: false,
-  });
+  onChangeResponseHeaderItem(index, key, e.detail.value);
 }
-function onChangeQueryChecked(e: any) {
-  const list = e.detail?.value ?? [];
-  queryList.forEach((q) => {
-    q.checked = list?.includes(q.id);
-  });
 
-  state.url = parseListToUrl(queryList);
+function handleQueryCheckedChange(e: any) {
+  onChangeQueryChecked(e);
+  state.url = parseListToUrl(state.url, queryList);
 }
 
 function onChangeQuery(e: any, key: 'key' | 'value', index: number) {
-  queryList[index][key] = e.detail.value;
-
-  state.url = parseListToUrl(queryList);
-}
-
-function arrayToObject(arr: any[]) {
-  return arr.reduce((acc, cur) => {
-    if (cur.checked) {
-      acc[cur.key] = cur.value;
-    }
-    return acc;
-  }, {});
-}
-
-function objectToArray<T extends Record<string, any>>(obj: T) {
-  return Object.entries(obj).map(([key, value]) => ({
-    id: Date.now().toString(),
-    key,
-    value,
-    checked: true,
-  }));
-}
-
-function objectToUrlParams(obj: any) {
-  return Object.keys(obj)
-    .map((key) => `${key}=${encodeURIComponent(obj[key])}`)
-    .join('&');
-}
-
-function arrayToUrlParams(arr: any[]) {
-  return arr
-    .map((item) => `${item.key}=${encodeURIComponent(item.value)}`)
-    ?.join('&');
-}
-
-function unionArrayByKey<T>(arr1: T[], arr2: T[], key: keyof T): T[] {
-  const map = new Map();
-  arr1.forEach((item) => {
-    map.set(item?.[key], item);
-  });
-  arr2.forEach((item) => {
-    if (map.has(item?.[key])) {
-      map.set(item?.[key], { ...map.get(item?.[key]), ...item });
-    } else {
-      map.set(item?.[key], item);
-    }
-  });
-  return Array.from(map.values());
-}
-
-function urlParamsToObject(urlParams: string) {
-  return urlParams.split('&').reduce(
-    (acc, cur) => {
-      const [key, value] = cur.split('=');
-      acc[key] = value;
-      return acc;
-    },
-    {} as Record<string, any>,
-  );
+  onChangeQueryItem(index, key, e.detail.value);
+  state.url = parseListToUrl(state.url, queryList);
 }
 
 /**
@@ -651,7 +440,7 @@ function handleInterceptConfig() {
   // 设置基础请求信息
   state.url = props.network.url;
   state.method = props.network.method?.toUpperCase() ?? 'GET';
-  state.status = props.network.status;
+  state.status = props.network.status as string;
 
   // 初始化请求头
   const requestHeaders =
@@ -663,7 +452,7 @@ function handleInterceptConfig() {
       };
     }) ?? [];
 
-  requestHeaderList.splice(0, requestHeaderList.length, ...requestHeaders);
+  setRequestHeaderList(requestHeaders);
 
   const responseHeaders =
     props.network.headers?.responseHeader?.map((item, index) => {
@@ -674,9 +463,9 @@ function handleInterceptConfig() {
       };
     }) ?? [];
 
-  responseHeaderList.splice(0, responseHeaderList.length, ...responseHeaders);
+  setResponseHeaderList(responseHeaders);
 
-  queryList.splice(0, queryList.length);
+  setQueryList([]);
 
   //  解析参数
   if (noBodyRequestMethods.includes(state.method)) {
@@ -689,7 +478,7 @@ function handleInterceptConfig() {
 
       const list = unionArrayByKey(urlParams, payloadParams, 'key');
 
-      queryList.splice(0, queryList.length, ...list);
+      setQueryList(list);
     }
   } else {
     // 参数在 query 中
@@ -697,7 +486,7 @@ function handleInterceptConfig() {
       const urlParams = objectToArray(
         urlParamsToObject(props.network.url.split('?')?.[1] ?? ''),
       );
-      queryList.splice(0, queryList.length, ...urlParams);
+      setQueryList(urlParams);
     }
     state.bodyText = JSON.stringify(props.network.payload);
   }
@@ -705,8 +494,8 @@ function handleInterceptConfig() {
   if (props.network.response?.data) {
     try {
       state.responseText = JSON.stringify(props.network.response.data);
-    } catch (error) {
-      state.responseText = props.network.response.data;
+    } catch (_error) {
+      state.responseText = props.network.response.data as string;
     }
   }
 }
@@ -725,19 +514,21 @@ onMounted(() => {
   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: 12px;
+  font-size: var(--dev-tool-tips-font-size);
   color: var(--dev-tool-info-color);
 }
+
 .intercept-config-form {
   height: calc(100% - 32px - 42px);
   overflow: auto;
@@ -762,23 +553,21 @@ onMounted(() => {
   align-items: center;
   width: 25%;
   margin-bottom: 6px;
-
-  font-size: 12px;
 }
 
 .intercept-input {
   padding: 0 6px;
   height: 24px;
-  font-size: 12px;
   border: 1px solid var(--dev-tool-border-color);
 }
+
 .intercept-textarea {
   padding: 6px;
   width: 100%;
   box-sizing: border-box;
-  font-size: 12px;
   border: 1px solid var(--dev-tool-border-color);
 }
+
 .form-error-message {
   padding: 0 6px;
   height: 24px;
@@ -810,6 +599,7 @@ onMounted(() => {
   position: sticky;
   display: flex;
   justify-content: space-between;
+
   /* gap: 6px; */
   width: 100%;
   margin-top: 12px;