vite-uni-dev-tool 0.0.15 → 0.0.17

package/dist/v3/NetworkList/const.d.ts

@@ -0,0 +1,5 @@
+export declare const sortMap: {
+    '-1': string;
+    '1': string;
+};
+//# sourceMappingURL=const.d.ts.map

package/dist/v3/NetworkList/const.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../dev/v3/NetworkList/const.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;CAGnB,CAAC"}

package/dist/v3/NetworkList/const.ts

@@ -0,0 +1,4 @@
+export const sortMap = {
+  '-1': ' ↑ ',
+  '1': ' ↓ ',
+};

package/dist/v3/NetworkList/index.vue

@@ -7,15 +7,20 @@
         @search="emit('search', $event)"
         @update:modelValue="emit('update:modelValue', $event)"
       />
-      <Tag
-        v-for="item in networkFilterItems"
-        :mode="item.mode"
-        :key="item.value"
-        :active="item.value === currentNetworkType"
-        @click="onChoose(item.value)"
-      >
-        {{ item.label }}
+
+      <FilterSelect
+        readonly
+        :modelValue="currentNetworkType"
+        :options="networkFilterItems"
+        @change="onChoose($event.value)"
+      />
+
+      <Tag mode="clear" @click="onSort">
+        &nbsp;{{ sortMap?.[currentNetworkSort] ?? '一' }}&nbsp;
       </Tag>
+
+      <Tag mode="clear" @click="onOpenSend"> 发起 </Tag>
+      <Tag mode="clear" @click="onChoose('clear')"> 清除 </Tag>
     </view>
 
     <VirtualListPro
@@ -30,11 +35,30 @@
           :index="start + index"
           :key="start + index"
         >
-          <NetworkItem :network="item" :zIndex="zIndex" />
+          <NetworkItem
+            :network="item"
+            :zIndex="zIndex"
+            :currentNetworkSort="currentNetworkSort"
+            :mode="mode"
+            :useDevSource="useDevSource"
+            @openDetail="onOpenDetail(item)"
+            @resend="onResend(item)"
+            @openCode="emit('openCode', $event)"
+          />
         </AutoSize>
         <Empty v-if="!networkList || networkList.length === 0" />
       </template>
     </VirtualListPro>
+
+    <!-- 请求详情 -->
+    <NetworkDetail
+      v-if="showDetail"
+      :network="network"
+      @close="onCloseDetail"
+    />
+
+    <!-- 发起请求 -->
+    <NetworkSend v-if="showSend" :network="network" @close="onCloseSend" />
   </view>
 </template>
 <script lang="ts" setup>
@@ -42,22 +66,31 @@ 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 type { DevTool } from '../../type';
 import VirtualListPro from '../VirtualListPro/index.vue';
 import AutoSize from '../VirtualListPro/AutoSize.vue';
-import { onMounted, ref } from 'vue';
+import NetworkSend from './NetworkSend.vue';
+import NetworkDetail from './NetworkDetail.vue';
+import { sortMap } from './const';
+import { onMounted, ref, reactive } from 'vue';
 
-defineProps<{
+const props = defineProps<{
   currentNetworkType: string;
+  currentNetworkSort: -1 | 1;
   networkList: DevTool.NetworkItem[];
   modelValue: string;
   zIndex?: number;
+  mode?: string;
+  useDevSource?: boolean;
 }>();
 
 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: 'openCode', value?: string): void;
 }>();
 const networkFilterItems = [
   {
@@ -66,37 +99,55 @@ const networkFilterItems = [
     mode: 'all',
   },
   {
-    label: 'get',
+    label: 'GET',
     value: 'GET',
     mode: 'info',
   },
   {
-    label: 'post',
+    label: 'POST',
     value: 'POST',
     mode: 'info',
   },
   {
-    label: 'put',
+    label: 'PUT',
     value: 'PUT',
     mode: 'info',
   },
   {
-    label: 'del',
+    label: 'DELETE',
     value: 'DELETE',
     mode: 'info',
   },
   {
-    label: 'error',
+    label: 'Error',
     value: 'error',
     mode: 'error',
   },
-  {
-    label: '清除',
-    value: 'clear',
-    mode: 'clear',
-  },
 ];
 
+const showSend = ref(false);
+
+const showDetail = ref(false);
+
+const emptyNetwork = {
+  index: 0,
+  url: '',
+  name: '',
+  method: '',
+  status: '',
+  time: '',
+  startTime: 0,
+  endTime: 0,
+  size: '',
+  headers: {
+    requestHeader: [],
+    responseHeader: [],
+  },
+  response: '',
+  payload: undefined,
+};
+const network = reactive<DevTool.NetworkItem>({ ...emptyNetwork });
+
 function onChoose(type: string) {
   emit('choose', type);
 }
@@ -106,6 +157,38 @@ onMounted(() => {
   const { windowHeight } = uni.getWindowInfo();
   height.value = windowHeight - 32 - 32;
 });
+
+function onOpenSend() {
+  showSend.value = true;
+}
+
+function onCloseSend() {
+  showSend.value = false;
+
+  Object.assign(network, emptyNetwork);
+}
+
+function onOpenDetail(ni: DevTool.NetworkItem) {
+  showDetail.value = true;
+
+  Object.assign(network, emptyNetwork);
+  Object.assign(network, ni);
+}
+function onCloseDetail() {
+  showDetail.value = false;
+}
+
+function onResend(ni: DevTool.NetworkItem) {
+  showSend.value = true;
+
+  Object.assign(network, emptyNetwork);
+  Object.assign(network, ni);
+}
+
+function onSort() {
+  const sort = props.currentNetworkSort === 1 ? -1 : 1;
+  emit('sort', sort);
+}
 </script>
 <style scoped>
 .network-content {

package/dist/v3/SettingList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="setting-content">
     <view class="setting-item">
-      <DevToolTitle>DevTool(v0.0.12-vue3)</DevToolTitle>
+      <DevToolTitle>DevTool(v0.0.16-vue3)</DevToolTitle>
       <view class="setting-item-content">
         <view class="setting-row">
           <view>显示调试按钮：</view>

package/dist/v3/SourceCode/index.vue

@@ -6,7 +6,7 @@
         style="width: 100%"
         @search="onSearch"
       />
-      <CloseButton style="margin-left: auto" @click="onClose" />
+      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
     </view>
     <view class="dev-tool-code-title">{{ fileName }}</view>
     <scroll-view
@@ -36,7 +36,7 @@
 <script lang="ts" setup>
 import { computed, ref, nextTick, onMounted } from 'vue';
 import FilterInput from '../FilterInput/index.vue';
-import CloseButton from '../CloseButton/index.vue';
+import CircularButton from '../CircularButton/index.vue';
 import Empty from '../Empty/index.vue';
 import { escapeHTML, hightLight, isAndroid, parseStock } from '../../utils';
 
@@ -91,6 +91,9 @@ function getCode(url: string, i: number = 0) {
 
     allUrl = props.sourceFileServers?.[i] + '/src/' + url;
   }
+  if (props.sourceFileServers && props.sourceFileServers?.length < index) {
+    return;
+  }
 
   uni.showLoading({ mask: true });
   uni.request({
@@ -146,6 +149,7 @@ function getSourceCodeDev(url: string) {
     uni?.__dev__console?.log('[DevTool] url 处理异常');
     return;
   }
+  index = 0;
 
   getCode(url, index);
 }
@@ -173,16 +177,25 @@ onMounted(() => {
 <style scoped>
 .dev-tool-code {
   position: fixed;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1001;
   top: 0;
   left: 0;
+  z-index: 1001;
   padding: 0 16px;
+  /* #ifdef H5 */
+  padding: 50px 16px;
+  /* #endif */
 
-  background-color: var(--dev-tool-bg2-color);
-  box-sizing: border-box;
+  /* #ifdef MP-WEIXIN */
+  /* padding-bottom:30px; */
+  /* #endif */
+
+  width: 100vw;
+  height: 100vh;
+  font-size: 14px;
   color: var(--dev-tool-text-color);
+  box-sizing: border-box;
+  transition: color 0.3s;
+  background-color: var(--dev-tool-bg3-color);
 }
 
 .dev-tool-code-control {
@@ -190,13 +203,14 @@ onMounted(() => {
   align-items: center;
   gap: 12px;
   height: 32px;
+  box-sizing: border-box;
   border-bottom: 1px solid var(--dev-tool-border-color);
   box-sizing: border-box;
 }
 
 .dev-tool-code-title {
   height: 32px;
-  line-height: 32px;
+  line-height: 30px;
   margin-bottom: 4px;
   border-bottom: 1px solid var(--dev-tool-border-color);
   box-sizing: border-box;

package/dist/v3/StorageList/index.vue

@@ -24,7 +24,11 @@
             <view>key: </view>
             <view v-html="item._oldKey" />
           </view>
-          <CloseButton style="margin-left: auto" @click="onRemove(item.key)" />
+          <CircularButton
+            style="margin-left: auto"
+            text="×"
+            @click="onRemove(item.key)"
+          />
         </view>
 
         <JsonPretty
@@ -45,7 +49,7 @@
 import Tag from '../Tag/index.vue';
 import JsonPretty from '../JsonPretty/index.vue';
 import Empty from '../Empty/index.vue';
-import CloseButton from '../CloseButton/index.vue';
+import CircularButton from '../CircularButton/index.vue';
 import FilterInput from '../FilterInput/index.vue';
 import type { DevTool } from '../../type';
 const props = defineProps<{
@@ -62,10 +66,7 @@ const emit = defineEmits<{
   (e: 'search', value: string): void;
 }>();
 
-function onUpdateData(
-  data: DevTool.StorageItem,
-  item: DevTool.StorageItem,
-) {
+function onUpdateData(data: DevTool.StorageItem, item: DevTool.StorageItem) {
   const tempList = JSON.parse(JSON.stringify(props.storageList));
   const index = props.storageList.findIndex(
     (store) => store.key === item._oldKey,

package/dist/v3/Tabs/index.vue

@@ -24,14 +24,14 @@
     </scroll-view>
     <view class="tabs-extra">
       <slot name="extra"></slot>
-      <CloseButton style="margin: 0 16px" @click="onClose" />
+      <CircularButton style="margin: 0 16px" text="×" @click="onClose" />
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import CloseButton from '../CloseButton/index.vue';
+import CircularButton from '../CircularButton/index.vue';
 // const activeKey = ref("Console");
 const props = defineProps<{
   modelValue: number;

package/dist/v3/UniEvent/UniEventItem.vue

@@ -19,27 +19,17 @@
 
     <view
       :class="`uni-event-item-right ${isUseDevSource ? 'link' : ''}`"
-      @click="onStackClick"
+      @click="emit('openCode', eventItem.stack)"
     >
       {{ eventItem.stack }}
     </view>
-
-    <SourceCode
-      v-if="openCode && eventItem.stack"
-      :url="eventItem.stack"
-      :sourceFileServers="sourceFileServers"
-      :mode="mode"
-      :zIndex="zIndex"
-      @close="onCloseCode"
-    />
   </view>
 </template>
 <script lang="ts" setup>
 import Tag from '../Tag/index.vue';
-import SourceCode from '../SourceCode/index.vue';
 import type { DevTool } from '../../type';
-import { computed, ref } from 'vue';
-import { isAndroid, isMockWX } from '../../utils';
+import { computed } from 'vue';
+import { isMockWX } from '../../utils';
 
 const props = defineProps<{
   eventItem: DevTool.EventItem;
@@ -49,7 +39,9 @@ const props = defineProps<{
   zIndex?: number;
 }>();
 
-const openCode = ref(false);
+const emit = defineEmits<{
+  (e: 'openCode', value?: string): void;
+}>();
 
 const isUseDevSource = computed(() => {
   return (
@@ -58,46 +50,6 @@ const isUseDevSource = computed(() => {
     props.useDevSource
   );
 });
-
-const isWXLink = computed(() => {
-  console.log('props?.eventItem: ', props?.eventItem);
-  console.log('props.mode: ', props.mode);
-  return (
-    isMockWX(props?.eventItem?.stack ?? '') || props.mode !== 'development'
-  );
-});
-
-function onStackClick() {
-  if (isWXLink.value) {
-    uni.showToast({
-      icon: 'none',
-      title: '[DevTool] 请在小程序真机调试模式下查看源码',
-    });
-    return;
-  }
-
-  if (!isUseDevSource.value) {
-    return;
-  }
-
-  if (isAndroid()) {
-    if (props.sourceFileServers && props.sourceFileServers.length > 0) {
-      openCode.value = true;
-    } else {
-      uni.showToast({
-        icon: 'none',
-        title: '[DevTool] sourceFileServers 配置异常',
-      });
-      uni?.__dev__console?.log('[DevTool] sourceFileServers 配置异常');
-    }
-  } else {
-    openCode.value = true;
-  }
-}
-
-function onCloseCode() {
-  openCode.value = false;
-}
 </script>
 
 <style scoped>

package/dist/v3/UniEvent/index.vue

@@ -42,6 +42,7 @@
         :useDevSource="useDevSource"
         :sourceFileServers="sourceFileServers"
         :zIndex="zIndex"
+        @openCode="emit('openCode', $event)"
       />
       <Empty v-if="!eventList || eventList.length === 0"> </Empty>
     </view>
@@ -65,6 +66,7 @@ defineProps<{
 
 const emit = defineEmits<{
   (e: 'clear'): void;
+  (e: 'openCode', value?: string): void;
 }>();
 </script>
 <style scoped>

package/dist/v3/UploadList/UploadDetail.vue

@@ -11,7 +11,7 @@
         {{ item.label }}
       </Tag>
 
-      <CloseButton style="margin-left: auto" @click="onClose" />
+      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
     </view>
 
     <view class="upload-detail-header" v-if="currentSelect === 'header'">
@@ -80,7 +80,7 @@ import { ref, computed } from 'vue';
 import JsonPretty from '../JsonPretty/index.vue';
 import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
-import CloseButton from '../CloseButton/index.vue';
+import CircularButton from '../CircularButton/index.vue';
 import type { DevTool } from '../../type';
 const props = defineProps<{ upload: DevTool.UploadItem; zIndex?: number }>();
 const emit = defineEmits<{ (e: 'close'): void }>();

package/dist/v3/WebSocket/WebSocketList.vue

@@ -3,7 +3,7 @@
     <view class="web-socket-top">
       请求url:
 
-      <CloseButton style="margin-left: auto" @click="onClose" />
+      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
     </view>
     <view class="web-socket-url">
       {{ ws.url }}
@@ -44,7 +44,7 @@
 </template>
 <script setup lang="ts">
 import Tag from '../Tag/index.vue';
-import CloseButton from '../CloseButton/index.vue';
+import CircularButton from '../CircularButton/index.vue';
 import { formatDate } from '../../utils/index';
 import type { DevTool } from '../../type';
 

package/package.json

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