vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{NetworkList → DevTool/components/NetworkList}/NetworkIntercept.vue

@@ -1,93 +1,88 @@
-<template>
-  <view class="network-intercept" :style="customStyle">
-    <view class="network-intercept-control">
-      <DevToolTitle>{{ t('network.btnIntercept') }}</DevToolTitle>
-      <CircularButton
-        style="margin-left: auto"
-        text="+"
-        @click="emit('openConfig')"
-      />
-      <CircularButton
-        style="margin-left: 6px"
-        text="×"
-        @click="emit('close')"
-      />
-    </view>
-    <VirtualList
-      class="network-intercept-list"
-      :data="interceptNetworkList"
-      :pageSize="15"
-      :height="contentHeight - 32 - 32"
-      v-if="interceptNetworkList && interceptNetworkList.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"
-        >
-          <InterceptItem
-            :network="item"
-            @openConfig="emit('openConfig', $event)"
-            @remove="emit('remove', $event)"
-          />
-        </AutoSize>
-      </template>
-    </VirtualList>
-    <Empty v-else />
-  </view>
-</template>
-<script lang="ts" setup>
-import type { DevTool } from '../../type';
-import CircularButton from '../CircularButton/index.vue';
-import DevToolTitle from '../DevToolTitle/index.vue';
-import InterceptItem from './InterceptItem.vue';
-import VirtualList from '../VirtualList/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
-import Empty from '../Empty/index.vue';
-import { useI18n } from '../../i18n';
-
-const { t } = useI18n();
-
-const _props = defineProps<{
-  zIndex?: number;
-  interceptNetworkList?: DevTool.NetworkItem[];
-  contentHeight: number;
-  customStyle?: Record<string, any>;
-}>();
-const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'remove', value: DevTool.NetworkItem): void;
-  (e: 'openConfig', value?: DevTool.NetworkItem): void;
-}>();
-</script>
-<style lang="scss" scoped>
-.network-intercept {
-  position: fixed;
-  width: 100vw;
-  height: 100%;
-  top: 0;
-  left: 0;
-
-  /* #ifdef H5 || APP-PLUS */
-  padding: 50px 0;
-
-  /* #endif */
-
-  overflow: auto;
-  background-color: var(--dev-tool-bg3-color);
-  box-sizing: border-box;
-}
-
-.network-intercept-control {
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-</style>
+<template>
+  <view class="network-intercept" :style="customStyle">
+    <view class="network-intercept-control">
+      <DevToolTitle>{{ t('network.btnIntercept') }}</DevToolTitle>
+      <CircularButton
+        style="margin-left: auto"
+        text="+"
+        @click="emit('openConfig')" />
+      <CircularButton
+        style="margin-left: 6px"
+        text="×"
+        @click="emit('close')" />
+    </view>
+    <VirtualList
+      class="network-intercept-list"
+      :data="interceptNetworkList"
+      :pageSize="15"
+      :height="contentHeight - 32 - 32"
+      v-if="interceptNetworkList && interceptNetworkList.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">
+          <InterceptItem
+            :network="item"
+            @openConfig="emit('openConfig', $event)"
+            @remove="emit('remove', $event)" />
+        </AutoSize>
+      </template>
+    </VirtualList>
+    <Empty v-else />
+  </view>
+</template>
+<script lang="ts" setup>
+import type { DevTool } from '../../../../type';
+import CircularButton from '../../../components/CircularButton/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import InterceptItem from './InterceptItem.vue';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
+import Empty from '../../../components/Empty/index.vue';
+import { useI18n } from '../../../../i18n';
+
+const { t } = useI18n();
+
+const _props = defineProps<{
+  zIndex?: number;
+  interceptNetworkList?: DevTool.NetworkItem[];
+  contentHeight: number;
+  customStyle?: Record<string, any>;
+}>();
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'remove', value: DevTool.NetworkItem): void;
+  (e: 'openConfig', value?: DevTool.NetworkItem): void;
+}>();
+</script>
+<style lang="scss" scoped>
+.network-intercept {
+  position: fixed;
+  width: 100vw;
+  height: 100%;
+  top: 0;
+  left: 0;
+
+  /* #ifdef H5 || APP-PLUS */
+  padding: 50px 0;
+
+  /* #endif */
+
+  overflow: auto;
+  background-color: var(--dev-tool-bg3-color);
+  box-sizing: border-box;
+}
+
+.network-intercept-control {
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+</style>

package/dist/v3/{NetworkList → DevTool/components/NetworkList}/NetworkItem.vue

@@ -1,167 +1,163 @@
-<template>
-  <!-- eslint-disable vue/no-v-html, vue/no-v-text-v-html-on-component -->
-  <view class="network-item">
-    <view class="network-url-row">
-      <Tag mode="error" style="margin-right: 6px" v-if="network?.intercepted">
-        {{ t('network.interceptedShort') }}
-      </Tag>
-      <Tag mode="info">{{ network.method }}</Tag>
-
-      <view
-        class="network-url"
-        v-html="network.url"
-        @click="emit('openDetail')"
-      >
-      </view>
-
-      <Tag mode="main" class="network-detail-icon" @click.stop="emit('resend')">
-        {{ t('network.resend') }}
-      </Tag>
-    </view>
-    <view class="network-info">
-      <Tag :mode="tagMode">{{ network.status }}</Tag>
-      <view>{{ network.time }}</view>
-      <view>{{ network.size }}</view>
-      <view>
-        {{ sortMap?.[props.currentNetworkSort] ?? '一' }}
-        {{ t('common.startTime') }}:
-        {{
-          network.startTime
-            ? formatDate(network.startTime, 'HH:mm:ss:SS')
-            : '--:--:--:---'
-        }}
-      </view>
-      <view>
-        {{ t('common.endTime') }}:
-        {{
-          network.endTime
-            ? formatDate(network.endTime, 'HH:mm:ss:SS')
-            : '--:--:--:---'
-        }}
-      </view>
-    </view>
-    <view
-      class="network-time-line"
-      :style="`width: ${network.width}; left: ${network.left};`"
-    ></view>
-
-    <view class="network-sponsor"
-      >{{ t('network.sponsor') }}：{{ network?.sponsor }}</view
-    >
-    <view
-      :class="`network-stock ${isUseDevSource ? 'network-stock-link' : ''}`"
-      @click.stop="emit('openCode', network.stack)"
-    >
-      {{ network?.stack }}
-    </view>
-  </view>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { sortMap } from './const';
-import Tag from '../Tag/index.vue';
-import { formatDate, isMockWX } from '../../utils';
-import type { DevTool } from '../../type';
-import { useI18n } from '../../i18n';
-
-const { t } = useI18n();
-
-const props = defineProps<{
-  network: DevTool.NetworkItem;
-  currentNetworkSort: -1 | 1;
-  zIndex?: number;
-  mode?: string;
-  useDevSource?: boolean;
-}>();
-
-const emit = defineEmits<{
-  (e: 'openDetail'): void;
-  (e: 'resend'): void;
-  (e: 'openCode', value?: string): void;
-}>();
-
-// last url 高亮异常
-// const lastUrl = computed(() => {
-//   const start = props.network.url.lastIndexOf('/');
-//   return props.network.url.slice(start + 1);
-// });
-
-const isUseDevSource = computed(() => {
-  return (
-    !isMockWX(props?.network?.stack ?? '') &&
-    props.mode === 'development' &&
-    props.useDevSource
-  );
-});
-
-const tagMode = computed(() => {
-  const status = props.network.status;
-  return status === 'pending'
-    ? 'info'
-    : /[4,5]\d{2,}/.test(status + '') || status === 'error'
-      ? 'error'
-      : 'success';
-});
-</script>
-<style scoped>
-.network-item {
-  padding: 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  font-size: var(--dev-tool-base-font-size);
-}
-
-.network-url-row {
-  display: flex;
-  align-items: center;
-}
-
-.network-url {
-  margin-left: 6px;
-  flex: 1;
-  max-width: 300px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-decoration: underline;
-}
-
-.network-url > rich-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.network-detail-icon {
-  margin-left: auto;
-}
-
-.network-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 4px;
-  color: var(--dev-tool-text-color);
-  transition: color 0.3s;
-}
-
-.network-time-line {
-  position: relative;
-  margin-top: 10px;
-  height: 2px;
-  min-width: 6px;
-  background-color: var(--dev-tool-time-line-color);
-}
-
-.network-sponsor {
-  text-align: right;
-}
-
-.network-stock {
-  text-align: right;
-  overflow-wrap: break-word;
-}
-
-.network-stock-link {
-  text-decoration: underline;
-}
-</style>
+<template>
+  <!-- eslint-disable vue/no-v-html, vue/no-v-text-v-html-on-component -->
+  <view class="network-item">
+    <view class="network-url-row">
+      <Tag mode="error" style="margin-right: 6px" v-if="network?.intercepted">
+        {{ t('network.interceptedShort') }}
+      </Tag>
+      <Tag mode="info">{{ network.method }}</Tag>
+
+      <view
+        class="network-url"
+        v-html="network.url"
+        @click="emit('openDetail')"></view>
+
+      <Tag mode="main" class="network-detail-icon" @click.stop="emit('resend')">
+        {{ t('network.resend') }}
+      </Tag>
+    </view>
+    <view class="network-info">
+      <Tag :mode="tagMode">{{ network.status }}</Tag>
+      <view>{{ network.time }}</view>
+      <view>{{ network.size }}</view>
+      <view>
+        {{ sortMap?.[props.currentNetworkSort] ?? '一' }}
+        {{ t('common.startTime') }}:
+        {{
+          network.startTime
+            ? formatDate(network.startTime, 'HH:mm:ss:SS')
+            : '--:--:--:---'
+        }}
+      </view>
+      <view>
+        {{ t('common.endTime') }}:
+        {{
+          network.endTime
+            ? formatDate(network.endTime, 'HH:mm:ss:SS')
+            : '--:--:--:---'
+        }}
+      </view>
+    </view>
+    <view
+      class="network-time-line"
+      :style="`width: ${network.width}; left: ${network.left};`"></view>
+
+    <view class="network-sponsor">
+      {{ t('network.sponsor') }}：{{ network?.sponsor }}
+    </view>
+    <view
+      :class="`network-stock ${isUseDevSource ? 'network-stock-link' : ''}`"
+      @click.stop="emit('openCode', network.stack)">
+      {{ network?.stack }}
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { sortMap } from './const';
+import Tag from '../../../components/Tag/index.vue';
+import { formatDate, isMockWX } from '../../../../utils';
+import type { DevTool } from '../../../../type';
+import { useI18n } from '../../../../i18n';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  network: DevTool.NetworkItem;
+  currentNetworkSort: -1 | 1;
+  zIndex?: number;
+  mode?: string;
+  useDevSource?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'openDetail'): void;
+  (e: 'resend'): void;
+  (e: 'openCode', value?: string): void;
+}>();
+
+// last url 高亮异常
+// const lastUrl = computed(() => {
+//   const start = props.network.url.lastIndexOf('/');
+//   return props.network.url.slice(start + 1);
+// });
+
+const isUseDevSource = computed(() => {
+  return (
+    !isMockWX(props?.network?.stack ?? '') &&
+    props.mode === 'development' &&
+    props.useDevSource
+  );
+});
+
+const tagMode = computed(() => {
+  const status = props.network.status;
+  return status === 'pending'
+    ? 'info'
+    : /[4,5]\d{2,}/.test(status + '') || status === 'error'
+      ? 'error'
+      : 'success';
+});
+</script>
+<style scoped>
+.network-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.network-url-row {
+  display: flex;
+  align-items: center;
+}
+
+.network-url {
+  margin-left: 6px;
+  flex: 1;
+  max-width: 300px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: underline;
+}
+
+.network-url > rich-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.network-detail-icon {
+  margin-left: auto;
+}
+
+.network-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+  color: var(--dev-tool-text-color);
+  transition: color 0.3s;
+}
+
+.network-time-line {
+  position: relative;
+  margin-top: 10px;
+  height: 2px;
+  min-width: 6px;
+  background-color: var(--dev-tool-time-line-color);
+}
+
+.network-sponsor {
+  text-align: right;
+}
+
+.network-stock {
+  text-align: right;
+  overflow-wrap: break-word;
+}
+
+.network-stock-link {
+  text-decoration: underline;
+}
+</style>