vite-uni-dev-tool 0.0.17 → 0.0.19

package/README.md

@@ -197,6 +197,16 @@ optimizeDeps: {
 
 ## 更新日志
 
+### 0.0.19
+
+- 修复 VirtualListPro 向上滚动
+
+### 0.0.18
+
+- Network Send 兼容微信小程序
+- Network Send 去除部分传参格式
+- 部分样式兼容 暗夜模式
+
 ### 0.0.17
 
 - v3增加网络请求排序

package/dist/v2/VirtualListPro/index.vue

@@ -164,43 +164,22 @@ export default {
       }
     },
     // 更新可视区域数据
-    updateVisitableData(direction) {
-      let tempList = [...this.visitableData];
+    updateVisitableData() {
+      const tempList = [...this.visitableData];
       const pageSize = this.pageSize;
       const current = this.current;
 
-      if (direction === 'down') {
-        // 向下滚动：移除最前面的一页，添加新的一页
-        tempList.splice(0, pageSize);
-        const start = pageSize * current;
-        let end = pageSize * (current + 1);
-        end = end > this.dataSource.length ? this.dataSource.length : end;
-        const newData = this.dataSource.slice(start, end);
-        tempList.push(...newData);
-      } else {
-        // 向上滚动：移除最后面的多余数据，添加前面的一页
-        // 将最末尾的部分进行隐藏
-        const delCount =
-          tempList.length - pageSize > 0
-            ? pageSize
-            : tempList.length - pageSize;
+      // 计算新的起始和结束索引
 
-        tempList.splice(pageSize, delCount);
+      const currentSub1 = current - 1 < 0 ? 0 : current - 1;
+      const currentAdd1 = current + 1;
 
-        // 处理上一页内容
-        let start = pageSize * (current - 1);
+      const startIndex = currentSub1 * pageSize;
+      const endIndex = Math.min(currentAdd1 * pageSize, data.length);
 
-        start = start < 0 ? 0 : start;
+      // 更新可见数据
 
-        const end = pageSize * current;
-
-        if (end < 0) return;
-
-        const newData = this.dataSource.slice(start, end);
-        tempList.unshift(...newData);
-      }
-
-      this.visitableData = tempList;
+      this.visitableData = tempList.slice(startIndex, endIndex);
     },
     // 更新总高度（累加已加载项的高度）
     updateCurrentHeight() {

package/dist/v3/AppInfo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="app-info-content">
-    <JsonPretty v-if="showJson" :data="appInfo" />
+    <JsonPretty v-if="showJson" :data="appInfo" :theme="theme" />
     <Empty v-else />
   </view>
 </template>
@@ -10,6 +10,7 @@ import JsonPretty from '../JsonPretty/index.vue';
 import Empty from '../Empty/index.vue';
 const props = defineProps<{
   appInfo: Record<string, any>;
+  theme?: string;
 }>();
 
 const showJson = computed(() => {

package/dist/v3/DevToolWindow/index.vue

@@ -118,6 +118,7 @@
           v-if="swiperShow(8)"
           v-model:storage-list="storageList"
           v-model="searchStorage"
+          :theme="theme"
           @choose="onStorageChoose"
           @remove="onStorageRemove"
           @diff-value="onChangeStorage"
@@ -128,6 +129,7 @@
         <VuexList
           v-if="swiperShow(9)"
           v-model:vuexList="vuexList"
+          :theme="theme"
           @diff-value="onChangeVuex"
         />
       </swiper-item>
@@ -135,20 +137,33 @@
         <PiniaList
           v-if="swiperShow(10)"
           v-model:pinia-list="piniaList"
+          :theme="theme"
           @diff-value="onChangePinia"
         />
       </swiper-item>
       <swiper-item>
-        <WindowInfo v-if="swiperShow(11)" :windowInfo="windowInfo" />
+        <WindowInfo
+          v-if="swiperShow(11)"
+          :windowInfo="windowInfo"
+          :theme="theme"
+        />
       </swiper-item>
       <swiper-item>
-        <DeviceInfo v-if="swiperShow(12)" :deviceInfo="deviceInfo" />
+        <DeviceInfo
+          v-if="swiperShow(12)"
+          :deviceInfo="deviceInfo"
+          :theme="theme"
+        />
       </swiper-item>
       <swiper-item>
-        <SystemInfo v-if="swiperShow(13)" :systemInfo="systemInfo" />
+        <SystemInfo
+          v-if="swiperShow(13)"
+          :systemInfo="systemInfo"
+          :theme="theme"
+        />
       </swiper-item>
       <swiper-item>
-        <AppInfo v-if="swiperShow(14)" :appInfo="appInfo" />
+        <AppInfo v-if="swiperShow(14)" :appInfo="appInfo" :theme="theme" />
       </swiper-item>
       <swiper-item>
         <SettingList
@@ -379,7 +394,7 @@ const activeTab = ref(0);
 const tabScrollLeft = ref(0);
 const currentConsoleType = ref('all');
 const currentNetworkType = ref('all');
-const currentNetworkSort = ref(1);
+const currentNetworkSort = ref<-1 | 1>(1);
 const currentUploadType = ref('all');
 const currentWebSocketType = ref('all');
 
@@ -1122,7 +1137,7 @@ function onCloseCode() {
   openCode.value = false;
   stack.value = '';
 }
-function onOpenCode(value: string) {
+function onOpenCode(value?: string) {
   if (!value) return;
 
   stack.value = value;
@@ -1216,7 +1231,7 @@ function onOpenCode(value: string) {
   --dev-tool-active-bg-color: #f0f0f0;
   --dev-tool-time-line-color: #9254de;
 }
-.dev-tool-window-dart {
+.dev-tool-window-dark {
   --dev-tool-bg-color: rgba(0, 0, 0, 0.8);
   --dev-tool-bg2-color: rgba(43, 43, 43, 0.8);
   --dev-tool-bg3-color: rgba(43, 43, 43, 0.999);

package/dist/v3/DeviceInfo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="device-info-content">
-    <JsonPretty :data="deviceInfo" v-if="showJson" />
+    <JsonPretty :data="deviceInfo" v-if="showJson" :theme="theme" />
     <Empty v-else />
   </view>
 </template>
@@ -10,6 +10,7 @@ import Empty from '../Empty/index.vue';
 import JsonPretty from '../JsonPretty/index.vue';
 const props = defineProps<{
   deviceInfo: Record<string, any>;
+  theme?: string;
 }>();
 
 const showJson = computed(() => {

package/dist/v3/FilterSelect/index.vue

@@ -95,6 +95,7 @@ function onSelect(item: { label: string; value: any }) {
   align-items: center;
   padding: 0 8px;
   width: 100%;
+  min-width: 100px;
   height: 24px;
 
   border-radius: 4px;

package/dist/v3/JsonPretty/index.vue

@@ -472,5 +472,7 @@ onUnmounted(() => {
 
 .dark {
   /* 深色主题样式 */
+  --json-pretty-color-nil: #bfcbd9;
+  --json-pretty-color-undefined: var(--json-pretty-color-nil);
 }
 </style>

package/dist/v3/NetworkList/NetworkDetail.vue

@@ -154,6 +154,7 @@ function onClose() {
   position: fixed;
   width: 100vw;
   height: 100%;
+  z-index: 5;
   /* z-index: 1001; */
   top: 0;
   left: 0;

package/dist/v3/NetworkList/NetworkItem.vue

@@ -142,7 +142,7 @@ const isUseDevSource = computed(() => {
 
 .network-stock {
   text-align: right;
-  word-wrap: break-all;
+  word-wrap: break-word;
 }
 .network-stock-link {
   text-decoration: underline;

package/dist/v3/NetworkList/NetworkSend.vue

@@ -1,6 +1,14 @@
 <template>
   <view class="network-send" :style="{ zIndex: zIndex }">
     <view class="network-send-form">
+      <view class="network-send-control">
+        <DevToolTitle>超时时间</DevToolTitle>
+      </view>
+      <input
+        class="network-input"
+        :value="state.timeout"
+        @input="onChangeState($event, 'timeout')"
+      />
       <view class="network-send-control">
         <DevToolTitle>请求方式</DevToolTitle>
         <CircularButton style="margin-left: auto" text="×" @click="onClose" />
@@ -8,7 +16,7 @@
       <radio-group class="radio-group" @change="onChangeRequestMethod">
         <label
           class="radio-group-item"
-          v-for="(item, index) in requestMethods"
+          v-for="item in requestMethods"
           :key="item.value"
         >
           <radio
@@ -21,17 +29,6 @@
           <view>{{ item.name }}</view>
         </label>
       </radio-group>
-      <DevToolTitle>请求地址</DevToolTitle>
-      <input
-        placeholder="请输入请求地址"
-        placeholderStyle="font-size: 12px"
-        class="network-input"
-        v-model="state.url"
-      />
-      <view class="form-error-message">
-        {{ hasUrl ? '' : '请输入请求地址' }}
-      </view>
-
       <view class="network-send-control">
         <DevToolTitle>请求头</DevToolTitle>
         <CircularButton
@@ -42,7 +39,10 @@
       </view>
 
       <view class="network-header-list">
-        <template v-if="headerList.length > 0">
+        <checkbox-group
+          v-if="headerList.length > 0"
+          @change="onChangeHeaderChecked"
+        >
           <view
             class="network-header-item"
             v-for="(item, index) in headerList"
@@ -50,16 +50,18 @@
           >
             <checkbox :checked="item.checked" />
             <input
-              v-model="item.key"
               class="network-input"
               placeholder="请输入请求头名称"
               placeholderStyle="font-size: 12px"
+              :value="item.key"
+              @input="onChangeHeader($event, 'key', index)"
             />
             <input
-              v-model="item.value"
               class="network-input"
               placeholder="请输入请求头值"
               placeholderStyle="font-size: 12px"
+              :value="item.value"
+              @input="onChangeHeader($event, 'value', index)"
             />
             <CircularButton
               style="margin-left: 6px"
@@ -67,10 +69,21 @@
               @click="onDeleteHeader(item)"
             />
           </view>
-        </template>
+        </checkbox-group>
 
         <view class="network-empty" v-else> 暂无请求头 </view>
       </view>
+      <DevToolTitle>请求地址</DevToolTitle>
+      <textarea
+        placeholder="请输入请求地址"
+        placeholderStyle="font-size: 12px"
+        class="network-textarea"
+        :value="state.url"
+        @input="onChangeUrl"
+      />
+      <view class="form-error-message">
+        {{ hasUrl ? '' : '请输入请求地址' }}
+      </view>
 
       <view class="network-send-control">
         <DevToolTitle>请求参数(query)</DevToolTitle>
@@ -92,16 +105,18 @@
           >
             <checkbox :checked="item.checked" :value="item.id" />
             <input
-              v-model="item.key"
               class="network-input"
               placeholder="请输入参数名称"
               placeholderStyle="font-size: 12px"
+              :value="item.key"
+              @input="onChangeQuery($event, 'key', index)"
             />
             <input
-              v-model="item.value"
               class="network-input"
               placeholder="请输入参数值"
               placeholderStyle="font-size: 12px"
+              :value="item.value"
+              @input="onChangeQuery($event, 'value', index)"
             />
             <CircularButton
               text="一"
@@ -114,83 +129,18 @@
         <view class="network-empty" v-else> 暂无请求参数 </view>
       </view>
 
-      <template v-if="state.method === 'POST' || state.method === 'PUT'">
+      <template v-if="!noBodyRequestMethods.includes(state.method)">
         <view class="network-send-control">
           <DevToolTitle>请求体(body)</DevToolTitle>
-          <CircularButton
-            v-if="
-              state.bodyType == 'form-data' ||
-              state.bodyType == 'x-www-form-urlencoded'
-            "
-            style="margin-left: auto"
-            text="＋"
-            @click="onAddBody"
-          />
-        </view>
-
-        <radio-group class="radio-group" @change="onChangeBodyType">
-          <label
-            class="radio-group-item"
-            v-for="(item, index) in bodyTypes"
-            :key="item.value"
-          >
-            <radio
-              size
-              style="transform: scale(0.8)"
-              :value="item.value"
-              :checked="item.value === state.bodyType"
-            />
-
-            <view>{{ item.name }}</view>
-          </label>
-        </radio-group>
-
-        <view
-          class="network-body-data"
-          v-if="
-            state.bodyType == 'form-data' ||
-            state.bodyType == 'x-www-form-urlencoded'
-          "
-        >
-          <template v-if="bodyList.length > 0">
-            <checkbox-group
-              class="network-body-data-item"
-              v-for="(item, index) in bodyList"
-              :key="item.id"
-              @change="onChangeBodyChecked"
-            >
-              <checkbox v-model="item.checked" />
-              <input
-                v-model="item.key"
-                class="network-input"
-                placeholder="请输入参数名称"
-                placeholderStyle="font-size: 12px"
-              />
-              <input
-                v-model="item.value"
-                class="network-input"
-                placeholder="请输入参数值"
-                placeholderStyle="font-size: 12px"
-              />
-              <CircularButton
-                text="一"
-                style="margin-left: 6px"
-                @click="onDeleteBody(item)"
-              />
-            </checkbox-group>
-          </template>
-
-          <view class="network-empty" v-else> 暂无请求参数 </view>
         </view>
 
         <textarea
-          v-else-if="state.bodyType == 'Raw text'"
-          v-model="state.bodyText"
           placeholder="请输入请求体"
-          class="network-body-textarea"
+          class="network-textarea"
           placeholderStyle="font-size: 12px"
+          :value="state.bodyText"
+          @input="onChangeState($event, 'bodyText')"
         />
-        <view class="network-empty" v-else> 暂无请求参数 </view>
       </template>
 
       <view class="network-send-buttons">
@@ -211,12 +161,11 @@
 </template>
 <script lang="ts" setup>
 import { ref, reactive, onMounted } from 'vue';
-
 import CircularButton from '../CircularButton/index.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
 import NetworkDetail from './NetworkDetail.vue';
 import type { DevTool } from '../../type';
-import { isObject, isString } from '../../utils';
+
 const props = defineProps<{ network: DevTool.NetworkItem; zIndex?: number }>();
 
 const emit = defineEmits<{ (e: 'close'): void }>();
@@ -231,25 +180,18 @@ const requestMethods = [
   { name: 'HEAD', value: 'HEAD' },
 ];
 
-const bodyTypes = [
-  { name: 'none', value: 'none' },
-  { name: 'form-data', value: 'form-data' },
-  { name: 'x-www-form-urlencoded', value: 'x-www-form-urlencoded' },
-  { name: 'Raw text', value: 'Raw text' },
-];
-
 const hasUrl = ref(true);
 
 const state = reactive<{
   method: any;
-  bodyType: any;
   url: string;
   bodyText: string;
+  timeout: number;
 }>({
   method: 'GET',
-  bodyType: 'none',
-  url: '192.168.0.1:8080/a?a=123',
+  url: 'http://192.168.0.1:8080/a?a=123',
   bodyText: '',
+  timeout: 60 * 1000,
 });
 
 const defaultHeader = [
@@ -274,34 +216,28 @@ const defaultHeader = [
   {
     id: 4,
     key: 'Content-Type',
-    value: 'application/x-www-form-urlencoded',
+    value: 'application/json; charset=utf-8',
     checked: true,
   },
 ];
 
-const headerList = reactive([...defaultHeader]);
-
-const defaultQuery = [
-  {
-    id: 1,
-    key: 'name',
-    value: '',
-    checked: false,
-  },
-];
+type PB = {
+  id: number;
+  key: string;
+  value: string;
+  checked: boolean;
+};
 
-const queryList = reactive([...defaultQuery]);
+const headerList = reactive([...defaultHeader]);
 
-const defaultBody = [
+const queryList = reactive<PB[]>([
   {
     id: 1,
-    key: 'name',
-    value: '',
-    checked: false,
+    key: 'a',
+    value: '123',
+    checked: true,
   },
-];
-
-const bodyList = reactive([...defaultBody]);
+]);
 
 const isFinished = ref(false);
 
@@ -325,6 +261,41 @@ const network = reactive<DevTool.NetworkItem>({
   payload: undefined,
 });
 
+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);
+}
+
 function onDetail() {
   showDetail.value = true;
 }
@@ -337,12 +308,10 @@ function onReset() {
   isFinished.value = false;
   hasUrl.value = true;
   state.method = 'GET';
-  state.bodyType = 'none';
   state.url = '';
   state.bodyText = '';
   headerList.splice(0, headerList.length, ...defaultHeader);
-  queryList.splice(0, queryList.length, ...defaultQuery);
-  bodyList.splice(0, bodyList.length);
+  queryList.splice(0, queryList.length);
 }
 
 function onClose() {
@@ -362,51 +331,43 @@ function onSend() {
   hasUrl.value = true;
 
   const header = arrayToObject(headerList);
-  const query = arrayToObject(queryList);
-
-  const body = arrayToObject(bodyList);
-  const formData = new FormData();
+  const query = arrayToUrlParams(queryList);
 
   const requestOptions: UniNamespace.RequestOptions = {
     url: state.url,
     method: state.method,
-    timeout: 60 * 1000,
+    timeout: state.timeout,
     header,
   };
 
-  console.log('state: ', state);
+  if (noBodyRequestMethods.includes(state.method)) {
+    // 不支持携带 body 参数
+    requestOptions.data = {};
+    state.url = parseListToUrl(queryList);
+  } else {
+    // 支持 url 中携带参数
 
-  if (state.bodyType === 'form-data') {
-    for (const key in body) {
-      formData.append(key, body[key]);
+    if (state.url.includes('?')) {
+      requestOptions.url = state.url + '&' + query;
+    } else {
+      requestOptions.url = state.url + '?' + query;
     }
-    requestOptions.data = formData;
-  } else if (state.bodyType === 'x-www-form-urlencoded') {
-    const urlencoded = objectToUrlParams(body);
-    requestOptions.data = urlencoded;
-  } else if (state.bodyType === 'Raw text') {
-    try {
-      const bodyJson = JSON.parse(state.bodyText);
-      requestOptions.data = bodyJson;
-    } catch (error) {
-      uni.showToast({
-        title: '请求体请输入正确的JSON格式',
-        icon: 'none',
-      });
-      return;
+
+    // 支持携带 body 参数
+    if (state.bodyText?.trim()) {
+      try {
+        const bodyJson = JSON.parse(state.bodyText);
+        requestOptions.data = bodyJson;
+      } catch (error) {
+        uni.showToast({
+          title: '请求体请输入正确的JSON格式',
+          icon: 'none',
+        });
+        return;
+      }
     }
-  } else {
-    console.log('------------state: ', state);
-    const urlQuery = urlParamsToObject(state.url.split('?')?.[1] ?? '');
-    console.log('urlQuery: ', urlQuery);
-    requestOptions.data = {
-      ...query,
-      ...urlQuery,
-    };
   }
 
-  console.log('requestOptions: ', requestOptions);
-
   isFinished.value = false;
 
   uni.showLoading({
@@ -465,56 +426,6 @@ function onSend() {
 function onChangeRequestMethod(e: any) {
   const method = e.detail.value;
   state.method = method;
-
-  if (method === 'POST' || method === 'PUT') {
-    bodyList.splice(0, bodyList.length);
-    state.bodyType = 'none';
-  }
-}
-
-function onChangeBodyType(e: any) {
-  const bodyType = e.detail.value;
-  state.bodyType = bodyType;
-  const ctIndex = headerList.findIndex((h) =>
-    ['Content-Type', 'Content-type', 'content-Type', 'content-type'].includes(
-      h.key,
-    ),
-  );
-
-  if (bodyType === 'form-data' || bodyType === 'x-www-form-urlencoded') {
-    if (ctIndex === -1) {
-      headerList.push({
-        id: Date.now(),
-        key: 'Content-Type',
-        value: 'application/x-www-form-urlencoded',
-        checked: true,
-      });
-    } else {
-      headerList[ctIndex].checked = true;
-      headerList[ctIndex].value = 'application/x-www-form-urlencoded';
-    }
-  } else {
-    bodyList.splice(0, bodyList.length);
-
-    if (ctIndex === -1) {
-      headerList.push({
-        id: Date.now(),
-        key: 'Content-Type',
-        value: 'application/json;charset:utf-8;',
-        checked: true,
-      });
-    } else {
-      headerList[ctIndex].checked = true;
-      headerList[ctIndex].value = 'application/json;charset:utf-8;';
-    }
-  }
-}
-
-function onChangeBodyChecked(e: any) {
-  const list = e.detail?.value ?? [];
-  bodyList.forEach((h) => {
-    list?.includes(h.id) ? (h.checked = true) : (h.checked = false);
-  });
 }
 
 function onDeleteHeader(item: any) {
@@ -532,6 +443,17 @@ function onAddHeader() {
   });
 }
 
+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);
@@ -548,23 +470,16 @@ function onAddQuery() {
 function onChangeQueryChecked(e: any) {
   const list = e.detail?.value ?? [];
   queryList.forEach((q) => {
-    list?.includes(q.id) ? (q.checked = true) : (q.checked = false);
+    q.checked = list?.includes(q.id);
   });
-}
 
-function onDeleteBody(item: any) {
-  const index = bodyList.findIndex((i) => i.id === item.id);
-  bodyList.splice(index, 1);
+  state.url = parseListToUrl(queryList);
 }
 
-function onAddBody() {
-  const id = Date.now();
-  bodyList.push({
-    id,
-    key: '',
-    value: '',
-    checked: false,
-  });
+function onChangeQuery(e: any, key: 'key' | 'value', index: number) {
+  queryList[index][key] = e.detail.value;
+
+  state.url = parseListToUrl(queryList);
 }
 
 function arrayToObject(arr: any[]) {
@@ -591,14 +506,25 @@ function objectToUrlParams(obj: any) {
     .join('&');
 }
 
-function formDataToObject(data: Record<string, any>) {
-  const obj: Record<string, any> = {};
-  for (const key in data) {
-    if (data.hasOwnProperty(key)) {
-      obj[key] = data[key];
+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 obj;
+  });
+  return Array.from(map.values());
 }
 
 function urlParamsToObject(urlParams: string) {
@@ -635,74 +561,30 @@ function handleResendNetwork() {
 
   headerList.splice(0, headerList.length, ...requestHeaders);
 
-  // 查找 Content-Type 头部
-  const contentType = requestHeaders.find((h) =>
-    ['Content-Type', 'content-type', 'Content-type', 'content-Type'].includes(
-      h.key,
-    ),
-  )?.value;
-
   queryList.splice(0, queryList.length);
 
-  // 参数在 query 中
-  if (props.network.url.includes('?')) {
-    queryList.splice(
-      0,
-      queryList.length,
-      ...objectToArray(
+  //  解析参数
+  if (noBodyRequestMethods.includes(state.method)) {
+    // 参数在 query 中
+    if (props.network.url.includes('?')) {
+      const urlParams = objectToArray(
         urlParamsToObject(props.network.url.split('?')?.[1] ?? ''),
-      ),
-    );
-  }
-
-  // 根据 Content-Type 设置请求体类型和内容
-  if (contentType?.includes('application/json')) {
-    if (state.method === 'GET' || state.method === 'DELETE') {
-      state.bodyType = 'none';
-
-      // 参数在 payload 中
-      if (props.network.payload) {
-        queryList.splice(
-          queryList.length,
-          0,
-          ...objectToArray(urlParamsToObject(props.network.payload)),
-        );
-      }
-    } else {
-      state.bodyType = 'Raw text';
-      try {
-        state.bodyText = isString(props.network.payload)
-          ? props.network.payload
-          : JSON.stringify(props.network.payload);
-      } catch (error) {
-        console.error('Failed to parse payload as JSON:', error);
+      );
+      const payloadParams = objectToArray(props.network.payload);
 
-        state.bodyText = '请求体非JSON格式';
+      const list = unionArrayByKey(urlParams, payloadParams, 'key');
 
-        uni.showToast({
-          title: '请求体JSON格式错误',
-          icon: 'none',
-        });
-      }
-    }
-  } else if (contentType?.includes('application/x-www-form-urlencoded')) {
-    if (isString(props.network.payload)) {
-      state.bodyType = 'x-www-form-urlencoded';
-      const payloadObject = urlParamsToObject(props.network.payload);
-      bodyList.splice(0, bodyList.length, ...objectToArray(payloadObject));
-    } else {
-      state.bodyType = 'form-data';
-      // 对于非字符串负载，尝试转换为对象形式
-      const payloadObject = props.network.payload
-        ? isObject(props.network.payload)
-          ? props.network.payload
-          : formDataToObject(props.network.payload)
-        : {};
-      bodyList.splice(0, bodyList.length, ...objectToArray(payloadObject));
+      queryList.splice(0, queryList.length, ...list);
     }
   } else {
-    // 默认为无请求体 无法解析请求体
-    state.bodyType = 'none';
+    // 参数在 query 中
+    if (props.network.url.includes('?')) {
+      const urlParams = objectToArray(
+        urlParamsToObject(props.network.url.split('?')?.[1] ?? ''),
+      );
+      queryList.splice(0, queryList.length, ...urlParams);
+    }
+    state.bodyText = JSON.stringify(props.network.payload);
   }
 }
 
@@ -759,7 +641,7 @@ onMounted(() => {
   font-size: 12px;
   border: 1px solid var(--dev-tool-border-color);
 }
-.network-body-textarea {
+.network-textarea {
   padding: 6px;
   width: 100%;
   box-sizing: border-box;

package/dist/v3/NetworkList/index.vue

@@ -89,7 +89,7 @@ const emit = defineEmits<{
   (e: 'choose', type: string): void;
   (e: 'update:modelValue', value: string): void;
   (e: 'search', value: string): void;
-  (e: 'sort', sort: -1 | 0 | 1): void;
+  (e: 'sort', sort: -1 | 1): void;
   (e: 'openCode', value?: string): void;
 }>();
 const networkFilterItems = [

package/dist/v3/PiniaList/index.vue

@@ -1,10 +1,11 @@
 <template>
   <view class="pinia-content">
     <JsonPretty
-      :data="piniaList"
-      showLength
       editable
+      showLength
       v-if="showJson"
+      :data="piniaList"
+      :theme="theme"
       @update:data="onUpdateData"
       @nodeClick="onNodeClick"
     />
@@ -17,9 +18,9 @@ import JsonPretty from '../JsonPretty/index.vue';
 import Empty from '../Empty/index.vue';
 import { getValueByPath } from '../../utils';
 
-
 const props = defineProps<{
   piniaList: Record<string, any>;
+  theme?: string;
 }>();
 const emit = defineEmits<{
   (e: 'update:piniaList', data: Record<string, any>): void;
@@ -46,7 +47,7 @@ function onUpdateData(data: Record<string, any>) {
 
     emit('update:piniaList', data);
     emit('diffValue', {
-      [keys]: newData
+      [keys]: newData,
     });
   } catch (error) {
     console.log('error: ', error);

package/dist/v3/SettingList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="setting-content">
     <view class="setting-item">
-      <DevToolTitle>DevTool(v0.0.16-vue3)</DevToolTitle>
+      <DevToolTitle>DevTool(v0.0.19-vue3)</DevToolTitle>
       <view class="setting-item-content">
         <view class="setting-row">
           <view>显示调试按钮：</view>
@@ -65,9 +65,9 @@
           <view
             class="setting-item-theme setting-theme-dark"
             :class="{
-              'setting-theme-active': theme === 'dart',
+              'setting-theme-active': theme === 'dark',
             }"
-            @click="emit('changeTheme', 'dart')"
+            @click="emit('changeTheme', 'dark')"
           ></view>
         </view>
       </view>

package/dist/v3/StorageList/index.vue

@@ -38,6 +38,7 @@
           }"
           showLength
           editable
+          :theme="theme"
           @update:data="onUpdateData($event, item)"
         />
       </view>
@@ -55,6 +56,7 @@ import type { DevTool } from '../../type';
 const props = defineProps<{
   storageList: DevTool.StorageItem[];
   modelValue: string;
+  theme?: string;
 }>();
 
 const emit = defineEmits<{

package/dist/v3/SystemInfo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="system-content">
-    <JsonPretty :data="systemInfo" showLength v-if="showJson" />
+    <JsonPretty showLength :theme="theme" :data="systemInfo" v-if="showJson" />
     <Empty v-else />
   </view>
 </template>
@@ -10,6 +10,7 @@ import JsonPretty from '../JsonPretty/index.vue';
 import Empty from '../Empty/index.vue';
 const props = defineProps<{
   systemInfo: Record<string, any>;
+  theme?: string;
 }>();
 const showJson = computed(() => {
   try {

package/dist/v3/VirtualListPro/index.vue

@@ -76,7 +76,7 @@ const state = reactive<{
   scrollTop: number;
 }>({
   height: 0,
-  current: 1,
+  current: 0,
   visitableData: [],
   currentHeight: 0,
   scrollTop: 0,
@@ -118,51 +118,20 @@ watch(
 );
 
 /** 向上滚动和向下滚动 */
-function updateVisitableData(direction: 'up' | 'down') {
-  let tempList = [...state.visitableData];
+function updateVisitableData() {
+  const { pageSize, data } = props;
+  const { current } = state;
 
-  if (direction === 'down') {
-    // 将最前面的内容进行隐藏
-    tempList.splice(0, props.pageSize);
+  // 计算新的起始和结束索引
 
-    // 处理下一页内容
-    const start = props.pageSize * state.current;
-    let end = props.pageSize * (state.current + 1);
+  const currentSub1 = current - 1 < 0 ? 0 : current - 1;
+  const currentAdd1 = current + 1;
 
-    if (start >= props.data.length) {
-      return;
-    }
+  const startIndex = currentSub1 * pageSize;
+  const endIndex = Math.min(currentAdd1 * pageSize, data.length);
 
-    if (end > props.data.length) {
-      end = props.data.length;
-    }
-
-    const newData = props.data.slice(start, end);
-
-    tempList.push(...newData);
-  } else {
-    // 将最末尾的部分进行隐藏
-    const delCount =
-      tempList.length - props.pageSize > 0
-        ? props.pageSize
-        : tempList.length - props.pageSize;
-
-    tempList.splice(props.pageSize, delCount);
-
-    // 处理上一页内容
-    let start = props.pageSize * (state.current - 1);
-
-    const end = props.pageSize * state.current;
-
-    if (end < 0) return;
-
-    if (start < 0) {
-      start = 0;
-    }
-    const newData = props.data.slice(start, end);
-    tempList.unshift(...newData);
-  }
-  state.visitableData = tempList;
+  // 更新可见数据
+  state.visitableData = data.slice(startIndex, endIndex);
 }
 
 /** 计算合并的高度 */
@@ -179,7 +148,7 @@ function onScrollToLower() {
   if ((state.current + 1) * props.pageSize < props.data.length) {
     state.current++;
 
-    updateVisitableData('down');
+    updateVisitableData();
 
     updateCurrentHeight();
   }
@@ -194,7 +163,7 @@ function onScroll(e: { detail: { scrollTop: number } }) {
   ) {
     state.current--;
 
-    updateVisitableData('up');
+    updateVisitableData();
 
     updateCurrentHeight();
   }
@@ -213,7 +182,7 @@ function onBackTop() {
   nextTick(() => {
     state.current = 1;
     state.currentHeight = 0;
-    updateVisitableData('up');
+    updateVisitableData();
 
     toView.value = '';
   });

package/dist/v3/VuexList/index.vue

@@ -1,10 +1,11 @@
 <template>
   <view class="vuex-content">
     <JsonPretty
-      :data="vuexList"
-      showLength
       editable
+      showLength
       v-if="showJson"
+      :data="vuexList"
+      :theme="theme"
       @update:data="onUpdateData"
       @nodeClick="onNodeClick"
     />
@@ -17,6 +18,7 @@ import JsonPretty from '../JsonPretty/index.vue';
 import Empty from '../Empty/index.vue';
 const props = defineProps<{
   vuexList: Record<string, any>;
+  theme?: string;
 }>();
 const emit = defineEmits<{
   (e: 'update:vuexList', data: Record<string, any>): void;

package/dist/v3/WindowInfo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="window-info-content">
-    <JsonPretty v-if="showJson" :data="windowInfo" />
+    <JsonPretty v-if="showJson" :data="windowInfo" :theme="theme" />
     <Empty v-else />
   </view>
 </template>
@@ -11,6 +11,7 @@ import JsonPretty from '../JsonPretty/index.vue';
 import Empty from '../Empty/index.vue';
 const props = defineProps<{
   windowInfo: Record<string, any>;
+  theme?: string;
 }>();
 
 const showJson = computed(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-uni-dev-tool",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试",
   "keywords": [
     "vite",