vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/NetworkList/NetworkSend.vue

@@ -1,154 +1,134 @@
 <template>
   <view class="network-send" :style="customStyle">
     <view class="network-send-control">
-      <DevToolTitle>发起请求</DevToolTitle>
+      <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>超时时间(ms)</DevToolTitle>
+        <DevToolTitle>{{ t('network.timeout') }}</DevToolTitle>
       </view>
       <input
         class="network-input"
         :value="state.timeout"
-        @input="onChangeState($event, 'timeout')"
-      />
+        @input="onChangeState($event, 'timeout')" />
       <view class="network-send-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="network-send-control">
-        <DevToolTitle>请求头</DevToolTitle>
+        <DevToolTitle>{{ t('network.requestHeaders') }}</DevToolTitle>
         <CircularButton
           style="margin-left: auto"
           text="＋"
-          @click="onAddHeader"
-        />
+          @click="onAddHeader" />
       </view>
 
       <view class="network-header-list">
         <checkbox-group
           v-if="headerList.length > 0"
-          @change="onChangeHeaderChecked"
-        >
+          @change="onChangeHeaderChecked">
           <view
             class="network-header-item"
             v-for="(item, index) in headerList"
-            :key="item.id"
-          >
+            :key="item.id">
             <checkbox color="#9254de" :checked="item.checked" />
             <input
               class="network-input"
-              placeholder="请输入请求头名称"
-              placeholderStyle="font-size: 12px"
+              :placeholder="t('network.placeholderHeaderName')"
               :value="item.key"
-              @input="onChangeHeader($event, 'key', index)"
-            />
+              @input="onChangeHeader($event, 'key', index)" />
             <input
               class="network-input"
-              placeholder="请输入请求头值"
-              placeholderStyle="font-size: 12px"
+              :placeholder="t('network.placeholderHeaderValue')"
               :value="item.value"
-              @input="onChangeHeader($event, 'value', index)"
-            />
+              @input="onChangeHeader($event, 'value', index)" />
             <CircularButton
               style="margin-left: 6px"
               text="一"
-              @click="onDeleteHeader(item)"
-            />
+              @click="onDeleteHeader(item)" />
           </view>
         </checkbox-group>
 
-        <view class="network-empty" v-else> 暂无请求头 </view>
+        <view class="network-empty" v-else>
+          {{ t('network.noRequestHeaders') }}
+        </view>
       </view>
-      <DevToolTitle>请求地址</DevToolTitle>
+      <DevToolTitle>{{ t('network.requestUrl') }}</DevToolTitle>
       <textarea
-        placeholder="请输入请求地址"
-        placeholderStyle="font-size: 12px"
+        :placeholder="t('network.placeholderUrl')"
         class="network-textarea"
         :value="state.url"
-        @input="onChangeUrl"
-      />
+        @input="onChangeUrl" />
       <view class="form-error-message">
-        {{ hasUrl ? '' : '请输入请求地址' }}
+        {{ hasUrl ? '' : t('network.toastEnterUrl') }}
       </view>
 
       <view class="network-send-control">
-        <DevToolTitle>请求参数(query)</DevToolTitle>
+        <DevToolTitle>{{ t('network.requestParams') }}</DevToolTitle>
         <CircularButton
           style="margin-left: auto"
           text="＋"
-          @click="onAddQuery"
-        />
+          @click="onAddQuery" />
       </view>
       <view class="network-param-list">
         <checkbox-group
           v-if="queryList.length > 0"
-          @change="onChangeQueryChecked"
-        >
+          @change="handleQueryCheckedChange">
           <view
             class="network-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="network-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="network-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="network-empty" v-else> 暂无请求参数 </view>
+        <view class="network-empty" v-else>
+          {{ t('network.emptyParams') }}
+        </view>
       </view>
 
       <template v-if="!noBodyRequestMethods.includes(state.method)">
         <view class="network-send-control">
-          <DevToolTitle>请求体(body)</DevToolTitle>
+          <DevToolTitle>{{ t('network.requestBody') }}</DevToolTitle>
         </view>
 
         <textarea
-          placeholder="请输入请求体"
+          :placeholder="t('network.placeholderBody')"
           class="network-textarea"
-          placeholderStyle="font-size: 12px"
           :value="state.bodyText"
-          @input="onChangeState($event, 'bodyText')"
-        />
+          @input="onChangeState($event, 'bodyText')" />
       </template>
     </scroll-view>
     <view class="network-send-buttons">
@@ -156,26 +136,30 @@
         size="mini"
         :disabled="!isFinished"
         class="network-send-button"
-        @click="emit('openDetail', network)"
-      >
-        详情
+        @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 { ref, reactive, onMounted } from 'vue';
+import { computed, ref, reactive, onMounted } from 'vue';
 import CircularButton from '../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[];
@@ -187,67 +171,43 @@ const emit = defineEmits<{
   (e: 'openDetail', 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;
-  bodyText: string;
-  timeout: number;
-}>({
-  method: 'GET',
-  url: 'http://192.168.0.1:8080/a?a=123',
-  bodyText: '',
-  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 headerList = 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://192.168.0.1:8080/a?a=123',
+    bodyText: '',
+    timeout: 3 * 1000,
+  });
 
-const queryList = reactive<PB[]>([
+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',
@@ -258,7 +218,7 @@ const queryList = reactive<PB[]>([
 
 const isFinished = ref(false);
 
-const network = reactive<DevTool.NetworkItem>({
+const currentNetwork = reactive<DevTool.NetworkItem>({
   index: 0,
   url: '',
   name: '',
@@ -284,39 +244,15 @@ const network = reactive<DevTool.NetworkItem>({
   sponsor: 'dev_tool',
 });
 
-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 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);
-  queryList.splice(0, queryList.length, ...list);
+  setQueryList(list);
 }
 
 function onReset() {
@@ -325,8 +261,8 @@ function onReset() {
   state.method = 'GET';
   state.url = '';
   state.bodyText = '';
-  headerList.splice(0, headerList.length, ...defaultHeader);
-  queryList.splice(0, queryList.length);
+  setHeaderList(defaultHeader);
+  setQueryList([]);
 }
 
 function onClose() {
@@ -338,7 +274,7 @@ function onSend() {
   if (!state.url) {
     hasUrl.value = false;
     uni.showToast({
-      title: '请输入请求地址',
+      title: t('network.toastEnterUrl'),
       icon: 'none',
     });
     return;
@@ -346,7 +282,7 @@ function onSend() {
   hasUrl.value = true;
 
   const header = arrayToObject(headerList);
-  const query = arrayToUrlParams(queryList);
+  const query = arrayToUrlParams(queryList.filter((q) => q.checked));
 
   const requestOptions: UniNamespace.RequestOptions = {
     url: state.url,
@@ -362,7 +298,7 @@ function onSend() {
   if (noBodyRequestMethods.includes(state.method)) {
     // 不支持携带 body 参数
     requestOptions.data = {};
-    state.url = parseListToUrl(queryList);
+    state.url = parseListToUrl(state.url, queryList);
   } else {
     // 支持 url 中携带参数
 
@@ -377,9 +313,9 @@ function onSend() {
       try {
         const bodyJson = JSON.parse(state.bodyText);
         requestOptions.data = bodyJson;
-      } catch (error) {
+      } catch (_error) {
         uni.showToast({
-          title: '请求体请输入正确的JSON格式',
+          title: t('network.toastBodyJson'),
           icon: 'none',
         });
         return;
@@ -390,7 +326,7 @@ function onSend() {
   isFinished.value = false;
 
   uni.showLoading({
-    title: '发送中...',
+    title: t('network.sending'),
     mask: true,
   });
 
@@ -398,35 +334,36 @@ function onSend() {
   const lastSlashIndex = baseUrl.lastIndexOf('/');
   const name = lastSlashIndex !== -1 ? baseUrl.slice(lastSlashIndex + 1) : '';
 
-  network.startTime = Date.now();
+  currentNetwork.startTime = Date.now();
 
   uni.request({
     ...requestOptions,
     complete: (res: any) => {
       // 赋值结果
-      network.url = requestOptions.url;
-      network.name = name;
-      network.method = requestOptions.method as string;
-      network.payload = requestOptions.data
+      currentNetwork.url = requestOptions.url;
+      currentNetwork.name = name;
+      currentNetwork.method = requestOptions.method as string;
+      currentNetwork.payload = requestOptions.data
         ? JSON.stringify(requestOptions.data)
         : '';
-      network.endTime = Date.now();
-      network.status = res.statusCode ?? 'error';
-      const diff = network.endTime - network.startTime;
-      network.time = diff < 1000 ? diff + 'ms' : diff / 1000 + 's';
+      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;
-      network.size = len > 1024 ? (len / 1024).toFixed(2) + 'k' : len + 'b';
-      network.response = res;
-      network.headers.requestHeader = objectToArray(
+      currentNetwork.size =
+        len > 1024 ? (len / 1024).toFixed(2) + 'k' : len + 'b';
+      currentNetwork.response = res;
+      currentNetwork.headers.requestHeader = objectToArray(
         requestOptions?.header ?? {},
       );
-      network.headers.responseHeader = objectToArray(res.header ?? {});
+      currentNetwork.headers.responseHeader = objectToArray(res.header ?? {});
 
-      network.intercepted =
+      currentNetwork.intercepted =
         props.interceptNetworkList?.some((item) => {
           const key = `${item.method?.toUpperCase()}|${item.url?.split('?')[0]}`;
-          const curKey = `${network.method?.toUpperCase()}|${network.url?.split('?')[0]}`;
+          const curKey = `${currentNetwork.method?.toUpperCase()}|${currentNetwork.url?.split('?')[0]}`;
           return key === curKey;
         }) ?? false;
 
@@ -434,7 +371,7 @@ function onSend() {
       uni.hideLoading();
       isFinished.value = true;
       uni.showToast({
-        title: '请求完成，点击左下角详情进行查看结果',
+        title: t('network.toastRequestSuccess'),
         icon: 'none',
       });
     },
@@ -446,114 +383,14 @@ function onChangeRequestMethod(e: any) {
   state.method = method;
 }
 
-function onDeleteHeader(item: any) {
-  const index = headerList.findIndex((i) => i.id === item.id);
-  headerList.splice(index, 1);
-}
-
-function onAddHeader() {
-  const id = Date.now().toString();
-  headerList.push({
-    id,
-    key: '',
-    value: '',
-    checked: false,
-  });
-}
-
-function onChangeHeaderChecked(e: any) {
-  const list = e.detail?.value ?? [];
-  headerList.forEach((q) => {
-    q.checked = list?.includes(q.id);
-  });
-}
-
-function onChangeHeader(e: any, key: 'key' | 'value', index: number) {
-  headerList[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,
-  });
-}
-function onChangeQueryChecked(e: any) {
-  const list = e.detail?.value ?? [];
-  queryList.forEach((q) => {
-    q.checked = list?.includes(q.id);
-  });
-
-  state.url = parseListToUrl(queryList);
-}
-
 function onChangeQuery(e: any, key: 'key' | 'value', index: number) {
-  queryList[index][key] = e.detail.value;
-
-  state.url = parseListToUrl(queryList);
+  onChangeQueryItem(index, key, e.detail.value);
+  state.url = parseListToUrl(state.url, 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>,
-  );
+function handleQueryCheckedChange(e: any) {
+  onChangeQueryChecked(e);
+  state.url = parseListToUrl(state.url, queryList);
 }
 
 /**
@@ -577,9 +414,9 @@ function handleResendNetwork() {
       };
     }) ?? [];
 
-  headerList.splice(0, headerList.length, ...requestHeaders);
+  setHeaderList(requestHeaders);
 
-  queryList.splice(0, queryList.length);
+  setQueryList([]);
 
   //  解析参数
   if (noBodyRequestMethods.includes(state.method)) {
@@ -592,7 +429,7 @@ function handleResendNetwork() {
 
       const list = unionArrayByKey(urlParams, payloadParams, 'key');
 
-      queryList.splice(0, queryList.length, ...list);
+      setQueryList(list);
     }
   } else {
     // 参数在 query 中
@@ -600,7 +437,7 @@ function handleResendNetwork() {
       const urlParams = objectToArray(
         urlParamsToObject(props.network.url.split('?')?.[1] ?? ''),
       );
-      queryList.splice(0, queryList.length, ...urlParams);
+      setQueryList(urlParams);
     }
     state.bodyText = JSON.stringify(props.network.payload);
   }
@@ -620,14 +457,16 @@ 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;
 }
+
 .network-send-form {
   height: calc(100% - 32px - 42px);
   overflow: auto;
@@ -652,15 +491,14 @@ onMounted(() => {
   align-items: center;
   width: 25%;
   margin-bottom: 6px;
-  font-size: 12px;
 }
 
 .network-input {
   padding: 0 6px;
   height: 24px;
-  font-size: 12px;
   border: 1px solid var(--dev-tool-border-color);
 }
+
 .network-textarea {
   padding: 6px;
   width: 100%;
@@ -668,6 +506,7 @@ onMounted(() => {
   font-size: 12px;
   border: 1px solid var(--dev-tool-border-color);
 }
+
 .form-error-message {
   padding: 0 6px;
   height: 24px;
@@ -699,15 +538,18 @@ onMounted(() => {
   position: sticky;
   display: flex;
   justify-content: space-between;
+
   /* gap: 6px; */
   width: 100%;
   margin-top: 12px;
   background-color: var(--dev-tool-bg3-color);
 }
+
 .network-send-button {
   width: 100%;
   margin-right: 6px;
 }
+
 .network-send-button-last {
   width: 100%;
 }