vite-uni-dev-tool 1.0.0 → 1.1.0

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

@@ -1,296 +1,287 @@
-<template>
-  <view class="network-detail" :style="customStyle">
-    <view class="network-detail-control">
-      <DevToolTitle> {{ t('network.requestDetail') }} </DevToolTitle>
-      <Tag
-        mode="info"
-        v-for="item in translatedSelectItems"
-        :active="item.value === currentSelect"
-        :key="item.value"
-        customStyle="margin-left: 16px"
-        @click="onSelect(item)"
-      >
-        {{ item.label }}
-      </Tag>
-      <CircularButton
-        style="margin-left: auto"
-        text="×"
-        @click="emit('close')"
-      />
-    </view>
-
-    <scroll-view
-      scroll-y
-      class="network-detail-base"
-      :style="{ height: contentHeight - 32 + 'px' }"
-      v-if="currentSelect === 'base'"
-      @touchmove.stop
-    >
-      <!-- 
-     @touchmove.stop
-     [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
-     -->
-      <DevToolTitle> {{ t('network.general') }} </DevToolTitle>
-      <view class="net-detail-item">
-        <view class="net-detail-item-key">{{ t('network.requestUrl') }}:</view>
-        <view class="net-detail-url" @click="onClickUrl">
-          {{ network.url }}
-        </view>
-      </view>
-      <view class="net-detail-item">
-        <view class="net-detail-item-key">{{ t('network.method') }}:</view>
-        <Tag mode="info">{{ network.method }}</Tag>
-      </view>
-      <view class="net-detail-item">
-        <view class="net-detail-item-key">{{ t('network.statusCode') }}:</view>
-        {{ network.status }}
-
-        <Tag v-if="network.intercepted" mode="error" style="margin-left: 6px">
-          {{ t('network.intercepted') }}
-        </Tag>
-      </view>
-      <view class="net-detail-item">
-        <view class="net-detail-item-key">{{ t('common.startTime') }}:</view>
-        {{
-          network.startTime
-            ? formatDate(network.startTime, 'HH:mm:ss:SS')
-            : '--:--:--'
-        }}
-      </view>
-      <view class="net-detail-item">
-        <view class="net-detail-item-key">{{ t('common.endTime') }}:</view>
-        {{
-          network.endTime
-            ? formatDate(network.endTime, 'HH:mm:ss:SS')
-            : '--:--:--'
-        }}
-      </view>
-      <view class="net-detail-item">
-        <view class="net-detail-item-key">{{ t('network.duration') }}:</view>
-        {{ network.time ?? '--' }}
-      </view>
-      <view class="net-detail-item">
-        <view class="net-detail-item-key">{{ t('network.size') }}:</view>
-        {{ network.size ?? '--' }}
-      </view>
-
-      <view class="net-detail-item">
-        <view class="net-detail-item-key">{{ t('network.sponsor') }}:</view>
-        {{ network.sponsor }}
-      </view>
-
-      <DevToolTitle>{{ t('network.requestHeaders') }}</DevToolTitle>
-      <template v-if="network.headers.requestHeader.length > 0">
-        <view
-          class="net-detail-item"
-          v-for="item in network.headers.requestHeader"
-          :key="item.key"
-        >
-          <view class="net-detail-item-key">{{ item.key }}:</view>
-          {{ item.value }}
-        </view>
-      </template>
-      <view v-else>
-        <Empty :text="t('network.noRequestHeaders')" />
-      </view>
-
-      <DevToolTitle>{{ t('network.responseHeaders') }}</DevToolTitle>
-      <template v-if="network.headers.responseHeader.length > 0">
-        <view
-          class="net-detail-item"
-          v-for="item in network.headers.responseHeader"
-          :key="item.key"
-        >
-          <view class="net-detail-item-key">{{ item.key }}:</view>
-          {{ item.value }}
-        </view>
-      </template>
-      <view v-else>
-        <Empty :text="t('network.noResponseHeaders')" />
-      </view>
-    </scroll-view>
-    <template v-if="currentSelect === 'payload'">
-      <template v-if="payload?.type === 'object'">
-        <JsonPretty
-          virtual
-          :data="payload.value"
-          :height="contentHeight - 32"
-          :nodeSelectable="() => false"
-          :pathCollapsible="() => false"
-        />
-      </template>
-      <view
-        v-else-if="payload?.type === 'string'"
-        class="network-detail-payload"
-      >
-        {{ payload.value }}
-      </view>
-      <Empty v-else />
-    </template>
-
-    <template v-if="currentSelect === 'response'">
-      <template v-if="response?.type === 'object'">
-        <JsonPretty
-          virtual
-          :data="response.value"
-          :height="contentHeight - 32"
-          :nodeSelectable="() => false"
-          :pathCollapsible="() => false"
-        />
-      </template>
-      <view
-        v-else-if="response?.type === 'string'"
-        class="network-detail-payload"
-      >
-        {{ response.value }}
-      </view>
-      <Empty v-else />
-    </template>
-  </view>
-</template>
-<script lang="ts" setup>
-import { ref, computed } from 'vue';
-import JsonPretty from '../JsonPretty/index.vue';
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import CircularButton from '../CircularButton/index.vue';
-import DevToolTitle from '../DevToolTitle/index.vue';
-import type { DevTool } from '../../type';
-import { formatDate } from '../../utils';
-import { useI18n } from '../../i18n';
-
-const { t } = useI18n();
-const props = defineProps<{
-  network: DevTool.NetworkItem;
-  zIndex?: number;
-  contentHeight: number;
-  customStyle?: Record<string, any>;
-}>();
-const emit = defineEmits<{ (e: 'close'): void }>();
-const translatedSelectItems = computed(() => [
-  {
-    label: t('common.base'),
-    value: 'base',
-  },
-  {
-    label: t('common.payload'),
-    value: 'payload',
-  },
-  {
-    label: t('common.response'),
-    value: 'response',
-  },
-]);
-
-const currentSelect = ref('base');
-
-const payload = computed(() => {
-  try {
-    if (props.network.payload) {
-      return {
-        value: JSON.parse(props.network.payload),
-        type: 'object',
-      };
-    }
-    return {
-      value: {},
-      type: 'empty',
-    };
-  } catch (_error) {
-    return {
-      value: props.network.payload,
-      type: props.network.payload ? 'string' : 'empty',
-    };
-  }
-});
-
-const response = computed(() => {
-  try {
-    if (props.network.response) {
-      return {
-        value: JSON.parse(JSON.stringify(props.network.response)),
-        type: 'object',
-      };
-    }
-    return {
-      value: {},
-      type: 'empty',
-    };
-  } catch (_error) {
-    return {
-      value: props.network.response,
-      type: props.network.response ? 'string' : 'empty',
-    };
-  }
-});
-
-function onSelect(item: { label: string; value: string }) {
-  currentSelect.value = item.value;
-}
-
-function onClickUrl() {
-  uni.setClipboardData({
-    data: props.network.url,
-    success() {
-      uni.showToast({
-        title: t('common.copySuccess'),
-        icon: 'none',
-      });
-    },
-    fail() {
-      uni.showToast({
-        title: t('common.copyFail'),
-        icon: 'none',
-      });
-    },
-  });
-}
-</script>
-<style scoped>
-.network-detail {
-  position: fixed;
-  width: 100vw;
-  height: 100%;
-  top: 0;
-  left: 0;
-  padding: 0 16px;
-  background-color: var(--dev-tool-bg3-color);
-  box-sizing: border-box;
-}
-
-.network-detail-control {
-  display: flex;
-  align-items: center;
-
-  /* margin-bottom: 4px; */
-  height: 32px;
-  border-bottom: 1px solid transparent;
-  box-sizing: border-box;
-}
-
-.net-detail-url {
-  text-decoration: underline;
-}
-
-.net-detail-item {
-  display: flex;
-  align-items: center;
-  min-height: 28px;
-  word-break: break-all;
-}
-
-.network-detail-base {
-  overflow: auto;
-}
-
-.net-detail-item-key {
-  white-space: nowrap;
-  margin-right: 8px;
-  color: var(--dev-tool-info-color);
-}
-
-.network-detail-payload {
-  word-break: break-all;
-  max-width: 100%;
-}
-</style>
+<template>
+  <view class="network-detail" :style="customStyle">
+    <view class="network-detail-control">
+      <DevToolTitle>{{ t('network.requestDetail') }}</DevToolTitle>
+      <Tag
+        mode="info"
+        v-for="item in translatedSelectItems"
+        :active="item.value === currentSelect"
+        :key="item.value"
+        customStyle="margin-left: 16px"
+        @click="onSelect(item)">
+        {{ item.label }}
+      </Tag>
+      <CircularButton
+        style="margin-left: auto"
+        text="×"
+        @click="emit('close')" />
+    </view>
+
+    <scroll-view
+      scroll-y
+      class="network-detail-base"
+      :style="{ height: contentHeight - 32 + 'px' }"
+      v-if="currentSelect === 'base'"
+      @touchmove.stop>
+      <!-- 
+     @touchmove.stop
+     [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
+     -->
+      <DevToolTitle>{{ t('network.general') }}</DevToolTitle>
+      <view class="net-detail-item">
+        <view class="net-detail-item-key">{{ t('network.requestUrl') }}:</view>
+        <view class="net-detail-url" @click="onClickUrl">
+          {{ network.url }}
+        </view>
+      </view>
+      <view class="net-detail-item">
+        <view class="net-detail-item-key">{{ t('network.method') }}:</view>
+        <Tag mode="info">{{ network.method }}</Tag>
+      </view>
+      <view class="net-detail-item">
+        <view class="net-detail-item-key">{{ t('network.statusCode') }}:</view>
+        {{ network.status }}
+
+        <Tag v-if="network.intercepted" mode="error" style="margin-left: 6px">
+          {{ t('network.intercepted') }}
+        </Tag>
+      </view>
+      <view class="net-detail-item">
+        <view class="net-detail-item-key">{{ t('common.startTime') }}:</view>
+        {{
+          network.startTime
+            ? formatDate(network.startTime, 'HH:mm:ss:SS')
+            : '--:--:--'
+        }}
+      </view>
+      <view class="net-detail-item">
+        <view class="net-detail-item-key">{{ t('common.endTime') }}:</view>
+        {{
+          network.endTime
+            ? formatDate(network.endTime, 'HH:mm:ss:SS')
+            : '--:--:--'
+        }}
+      </view>
+      <view class="net-detail-item">
+        <view class="net-detail-item-key">{{ t('network.duration') }}:</view>
+        {{ network.time ?? '--' }}
+      </view>
+      <view class="net-detail-item">
+        <view class="net-detail-item-key">{{ t('network.size') }}:</view>
+        {{ network.size ?? '--' }}
+      </view>
+
+      <view class="net-detail-item">
+        <view class="net-detail-item-key">{{ t('network.sponsor') }}:</view>
+        {{ network.sponsor }}
+      </view>
+
+      <DevToolTitle>{{ t('network.requestHeaders') }}</DevToolTitle>
+      <template v-if="network.headers.requestHeader.length > 0">
+        <view
+          class="net-detail-item"
+          v-for="item in network.headers.requestHeader"
+          :key="item.key">
+          <view class="net-detail-item-key">{{ item.key }}:</view>
+          {{ item.value }}
+        </view>
+      </template>
+      <view v-else>
+        <Empty :text="t('network.noRequestHeaders')" />
+      </view>
+
+      <DevToolTitle>{{ t('network.responseHeaders') }}</DevToolTitle>
+      <template v-if="network.headers.responseHeader.length > 0">
+        <view
+          class="net-detail-item"
+          v-for="item in network.headers.responseHeader"
+          :key="item.key">
+          <view class="net-detail-item-key">{{ item.key }}:</view>
+          {{ item.value }}
+        </view>
+      </template>
+      <view v-else>
+        <Empty :text="t('network.noResponseHeaders')" />
+      </view>
+    </scroll-view>
+    <template v-if="currentSelect === 'payload'">
+      <template v-if="payload?.type === 'object'">
+        <JsonPretty
+          virtual
+          :data="payload.value"
+          :height="contentHeight - 32"
+          :nodeSelectable="() => false"
+          :pathCollapsible="() => false" />
+      </template>
+      <view
+        v-else-if="payload?.type === 'string'"
+        class="network-detail-payload">
+        {{ payload.value }}
+      </view>
+      <Empty v-else />
+    </template>
+
+    <template v-if="currentSelect === 'response'">
+      <template v-if="response?.type === 'object'">
+        <JsonPretty
+          virtual
+          :data="response.value"
+          :height="contentHeight - 32"
+          :nodeSelectable="() => false"
+          :pathCollapsible="() => false" />
+      </template>
+      <view
+        v-else-if="response?.type === 'string'"
+        class="network-detail-payload">
+        {{ response.value }}
+      </view>
+      <Empty v-else />
+    </template>
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import JsonPretty from '../../../components/JsonPretty/index.vue';
+import Tag from '../../../components/Tag/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import type { DevTool } from '../../../../type';
+import { formatDate } from '../../../../utils';
+import { useI18n } from '../../../../i18n';
+
+const { t } = useI18n();
+const props = defineProps<{
+  network: DevTool.NetworkItem;
+  zIndex?: number;
+  contentHeight: number;
+  customStyle?: Record<string, any>;
+}>();
+const emit = defineEmits<{ (e: 'close'): void }>();
+const translatedSelectItems = computed(() => [
+  {
+    label: t('common.base'),
+    value: 'base',
+  },
+  {
+    label: t('common.payload'),
+    value: 'payload',
+  },
+  {
+    label: t('common.response'),
+    value: 'response',
+  },
+]);
+
+const currentSelect = ref('base');
+
+const payload = computed(() => {
+  try {
+    if (props.network.payload) {
+      return {
+        value: JSON.parse(props.network.payload),
+        type: 'object',
+      };
+    }
+    return {
+      value: {},
+      type: 'empty',
+    };
+  } catch (_error) {
+    return {
+      value: props.network.payload,
+      type: props.network.payload ? 'string' : 'empty',
+    };
+  }
+});
+
+const response = computed(() => {
+  try {
+    if (props.network.response) {
+      return {
+        value: JSON.parse(JSON.stringify(props.network.response)),
+        type: 'object',
+      };
+    }
+    return {
+      value: {},
+      type: 'empty',
+    };
+  } catch (_error) {
+    return {
+      value: props.network.response,
+      type: props.network.response ? 'string' : 'empty',
+    };
+  }
+});
+
+function onSelect(item: { label: string; value: string }) {
+  currentSelect.value = item.value;
+}
+
+function onClickUrl() {
+  uni.setClipboardData({
+    data: props.network.url,
+    success() {
+      uni.showToast({
+        title: t('common.copySuccess'),
+        icon: 'none',
+      });
+    },
+    fail() {
+      uni.showToast({
+        title: t('common.copyFail'),
+        icon: 'none',
+      });
+    },
+  });
+}
+</script>
+<style scoped>
+.network-detail {
+  position: fixed;
+  width: 100vw;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding: 0 16px;
+  background-color: var(--dev-tool-bg3-color);
+  box-sizing: border-box;
+}
+
+.network-detail-control {
+  display: flex;
+  align-items: center;
+
+  /* margin-bottom: 4px; */
+  height: 32px;
+  border-bottom: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.net-detail-url {
+  text-decoration: underline;
+}
+
+.net-detail-item {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+  word-break: break-all;
+}
+
+.network-detail-base {
+  overflow: auto;
+}
+
+.net-detail-item-key {
+  white-space: nowrap;
+  margin-right: 8px;
+  color: var(--dev-tool-info-color);
+}
+
+.network-detail-payload {
+  word-break: break-all;
+  max-width: 100%;
+}
+</style>