vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/NetworkList/hooks/useNetworkForm.ts

@@ -0,0 +1,86 @@
+import { reactive, ref } from 'vue';
+import { urlParamsToObject, objectToArray, arrayToUrlParams } from '../utils';
+import type { PB } from '../utils';
+
+export function useKeyValueList(initialList: PB[] = []) {
+  const list = reactive<PB[]>([...initialList]);
+
+  function onAdd() {
+    list.push({
+      id: Date.now().toString() + Math.random().toString(36).substring(2, 9),
+      key: '',
+      value: '',
+      checked: false,
+    });
+  }
+
+  function onDelete(item: PB) {
+    const index = list.findIndex((i) => i.id === item.id);
+    if (index > -1) {
+      list.splice(index, 1);
+    }
+  }
+
+  function onChangeChecked(e: any) {
+    const checkedIds = e.detail?.value ?? [];
+    list.forEach((item) => {
+      item.checked = checkedIds.includes(item.id);
+    });
+  }
+
+  function onChangeValue(index: number, key: 'key' | 'value', value: string) {
+    if (list[index]) {
+      list[index][key] = value;
+    }
+  }
+
+  function setList(newList: PB[]) {
+    list.splice(0, list.length, ...newList);
+  }
+
+  return {
+    list,
+    onAdd,
+    onDelete,
+    onChangeChecked,
+    onChangeValue,
+    setList,
+  };
+}
+
+export function useNetworkState(initialState: any) {
+  const state = reactive({ ...initialState });
+  const hasUrl = ref(true);
+
+  function onChangeState(e: any, key: string) {
+    state[key] = e.detail.value;
+  }
+
+  function parseUrlToList(url: string) {
+    if (url.includes('?')) {
+      const query = url.split('?')[1];
+      const queryObject = urlParamsToObject(query);
+      return objectToArray(queryObject);
+    }
+    return [];
+  }
+
+  function parseListToUrl(url: string, list: PB[]) {
+    const baseUrl = url.split('?')[0] || '';
+    if (list.length === 0) {
+      return baseUrl;
+    } else {
+      const checkedList = list.filter((q) => q.checked);
+      if (checkedList.length === 0) return baseUrl;
+      return baseUrl + '?' + arrayToUrlParams(checkedList);
+    }
+  }
+
+  return {
+    state,
+    hasUrl,
+    onChangeState,
+    parseUrlToList,
+    parseListToUrl,
+  };
+}

package/dist/v3/NetworkList/index.vue

@@ -1,44 +1,47 @@
 <template>
   <view class="network-content">
     <view class="network-control">
+      <DevToolTitle>{{ t('common.network') }}</DevToolTitle>
       <FilterInput
         :modelValue="modelValue"
-        placeholder="查询url"
+        :placeholder="t('setting.network.searchUrl')"
         @search="emit('search', $event)"
-        @update:modelValue="emit('update:modelValue', $event)"
-      />
+        @update:modelValue="emit('update:modelValue', $event)" />
 
-      <FilterSelect
+      <Pick
         readonly
         :modelValue="currentNetworkType"
         :options="networkFilterItems"
-        @change="onChoose($event.value)"
-      />
+        @change="onChoose($event.value)" />
 
       <Tag mode="clear" @click="onSort">
         &nbsp;{{ sortMap?.[currentNetworkSort] ?? '一' }}&nbsp;
       </Tag>
 
-      <Tag mode="error" @click="emit('openIntercept')"> 拦截 </Tag>
-      <Tag mode="primary" @click="emit('openSend')"> 发起 </Tag>
-      <Tag mode="clear" @click="onChoose('clear')"> 清除 </Tag>
+      <Tag mode="error" @click="emit('openIntercept')">
+        {{ t('setting.network.btnIntercept') }}
+      </Tag>
+      <Tag mode="primary" @click="emit('openSend')">
+        {{ t('setting.network.send') }}
+      </Tag>
+      <Tag mode="clear" @click="onChoose('clear')">
+        {{ t('common.clear') }}
+      </Tag>
     </view>
 
-    <VirtualListPro
+    <VirtualList
       :data="networkList"
       :pageSize="15"
       :height="contentHeight - 32 - 32"
       className="network-list"
-      v-if="networkList.length > 0"
-    >
+      v-if="networkList.length > 0">
       <template v-slot="{ list, start, itemsHeight, onSizeChange }">
         <AutoSize
           v-for="(item, index) in list"
           :index="start + index"
           :key="start + index"
           :itemsHeight="itemsHeight"
-          :onSizeChange="onSizeChange"
-        >
+          :onSizeChange="onSizeChange">
           <NetworkItem
             :network="item"
             :zIndex="zIndex"
@@ -47,11 +50,10 @@
             :useDevSource="useDevSource"
             @openDetail="emit('openDetail', item)"
             @resend="emit('openSend', item)"
-            @openCode="emit('openCode', $event)"
-          />
+            @openCode="emit('openCode', $event)" />
         </AutoSize>
       </template>
-    </VirtualListPro>
+    </VirtualList>
     <Empty v-else />
   </view>
 </template>
@@ -60,13 +62,17 @@ import Tag from '../Tag/index.vue';
 import NetworkItem from './NetworkItem.vue';
 import Empty from '../Empty/index.vue';
 import FilterInput from '../FilterInput/index.vue';
-import FilterSelect from '../FilterSelect/index.vue';
+import Pick from '../Pick/index.vue';
 import type { DevTool } from '../../type';
-import VirtualListPro from '../VirtualListPro/index.vue';
-import AutoSize from '../VirtualListPro/AutoSize.vue';
+import VirtualList from '../VirtualList/index.vue';
+import AutoSize from '../VirtualList/AutoSize.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
 
 import { sortMap } from './const';
-import { onMounted, ref } from 'vue';
+import { useI18n } from '../../i18n';
+import { computed } from 'vue';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   currentNetworkType: string;
@@ -89,9 +95,9 @@ const emit = defineEmits<{
   (e: 'openDetail', value?: DevTool.NetworkItem): void;
   (e: 'openIntercept'): void;
 }>();
-const networkFilterItems = [
+const networkFilterItems = computed(() => [
   {
-    label: '全部',
+    label: t('common.all'),
     value: 'all',
     mode: 'all',
   },
@@ -120,7 +126,7 @@ const networkFilterItems = [
     value: 'error',
     mode: 'error',
   },
-];
+]);
 
 function onChoose(type: string) {
   emit('choose', type);
@@ -136,9 +142,11 @@ function onSort() {
   height: 100%;
   font-size: var(--dev-tool-base-font-size);
 }
+
 .network-list {
   height: calc(100% - 32px);
 }
+
 .network-control {
   display: flex;
   align-items: center;

package/dist/v3/NetworkList/utils.ts

@@ -0,0 +1,101 @@
+export type PB = {
+  id: string;
+  key: string;
+  value: string;
+  checked: boolean;
+};
+
+export 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' },
+];
+
+export const noBodyRequestMethods = ['GET', 'HEAD', 'PATCH', 'OPTIONS'];
+
+export const defaultHeader: PB[] = [
+  {
+    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,
+  },
+];
+
+export function arrayToObject(arr: PB[]) {
+  return arr.reduce(
+    (acc, cur) => {
+      if (cur.checked) {
+        acc[cur.key] = cur.value;
+      }
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+}
+
+export function objectToArray<T extends Record<string, any>>(obj: T): PB[] {
+  return Object.entries(obj).map(([key, value], index) => ({
+    id: `${Date.now()}-${index}`,
+    key,
+    value: typeof value === 'object' ? JSON.stringify(value) : String(value),
+    checked: true,
+  }));
+}
+
+export function arrayToUrlParams(arr: PB[]) {
+  return arr
+    .map((item) => `${item.key}=${encodeURIComponent(item.value)}`)
+    ?.join('&');
+}
+
+export function urlParamsToObject(urlParams: string) {
+  if (!urlParams) return {};
+  return urlParams.split('&').reduce(
+    (acc, cur) => {
+      const [key, value] = cur.split('=');
+      if (key) {
+        acc[key] = decodeURIComponent(value || '');
+      }
+      return acc;
+    },
+    {} as Record<string, any>,
+  );
+}
+
+export 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());
+}