vite-uni-dev-tool 1.1.0 → 1.2.0

package/dist/v3/DevTool/components/TransferList/TransferDetail.vue

@@ -1,268 +1,268 @@
-<template>
-  <view class="transfer-detail" :style="customStyle">
-    <view class="transfer-detail-control">
-      <DevToolTitle style="margin-right: 16px">
-        {{ t('transfer.detailTitle') }}
-      </DevToolTitle>
-
-      <Tag
-        v-for="item in translatedSelectItems"
-        :active="currentSelect === item.value"
-        :mode="item.mode"
-        :key="item.value"
-        @click="onSelect(item)">
-        {{ item.label }}
-      </Tag>
-
-      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
-    </view>
-
-    <view
-      class="transfer-detail-header"
-      :style="{ height: contentHeight - 32 + 'px' }"
-      v-if="currentSelect === 'header'">
-      <DevToolTitle>{{ t('network.general') }}</DevToolTitle>
-      <view class="transfer-detail-item">
-        <view class="transfer-detail-item-key">
-          {{ t('network.requestUrl') }}:
-        </view>
-        <view class="transfer-detail-url" @click="onClickUrl">
-          {{ item.url }}
-        </view>
-      </view>
-      <view class="transfer-detail-item">
-        <view class="transfer-detail-item-key">{{ t('network.method') }}:</view>
-        <Tag mode="info">
-          {{ type === 'upload' ? ((item as any).method ?? 'POST') : 'GET' }}
-        </Tag>
-      </view>
-      <view class="transfer-detail-item">
-        <view class="transfer-detail-item-key">{{ t('common.status') }}:</view>
-        <Tag mode="info">{{ t(`common.${item.status}`) }}</Tag>
-      </view>
-      <view
-        class="transfer-detail-item"
-        v-if="type === 'download' && (item as any).filePath">
-        <view class="transfer-detail-item-key">
-          {{ t('download.filePath') }}:
-        </view>
-        <view>{{ (item as any).filePath }}</view>
-      </view>
-
-      <DevToolTitle>{{ t('network.requestHeaders') }}</DevToolTitle>
-      <template
-        v-if="
-          item?.headers &&
-          item?.headers?.requestHeader &&
-          item?.headers?.requestHeader?.length > 0
-        ">
-        <view
-          class="transfer-detail-item"
-          v-for="h in item?.headers?.requestHeader"
-          :key="h.key">
-          <view class="transfer-detail-item-key">{{ h.key }}:</view>
-          {{ h.value }}
-        </view>
-      </template>
-      <Empty v-else />
-    </view>
-
-    <template v-if="currentSelect === 'formdata'">
-      <template v-if="formData?.type === 'object'">
-        <JsonPretty
-          virtual
-          :data="formData.value"
-          :nodeSelectable="() => false"
-          :pathCollapsible="() => false"
-          :height="contentHeight - 32" />
-      </template>
-      <view
-        v-else-if="formData?.type === 'string'"
-        class="transfer-detail-payload">
-        {{ formData.value }}
-      </view>
-      <Empty v-else />
-    </template>
-
-    <template v-if="currentSelect === 'response'">
-      <template v-if="response?.type === 'object'">
-        <JsonPretty
-          virtual
-          :data="response.value"
-          :nodeSelectable="() => false"
-          :pathCollapsible="() => false"
-          :height="contentHeight - 32" />
-      </template>
-      <view
-        v-else-if="response?.type === 'string'"
-        class="transfer-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 { useI18n } from '../../../../i18n';
-
-const { t } = useI18n();
-const props = defineProps<{
-  item: DevTool.TransferItem;
-  type: 'upload' | 'download';
-  zIndex?: number;
-  contentHeight: number;
-  customStyle?: Record<string, any>;
-}>();
-const emit = defineEmits<{ (e: 'close'): void }>();
-const translatedSelectItems = computed(() => {
-  const items = [
-    {
-      label: t('common.header'),
-      value: 'header',
-      mode: 'info',
-    },
-    {
-      label: t('common.response'),
-      value: 'response',
-      mode: 'info',
-    },
-  ];
-
-  if (props.type === 'upload') {
-    items.splice(1, 0, {
-      label: t('common.formData'),
-      value: 'formdata',
-      mode: 'info',
-    });
-  }
-  return items;
-});
-
-const currentSelect = ref('header');
-
-const formData = computed(() => {
-  if (props.type !== 'upload') return { value: {}, type: 'empty' };
-  const uploadItem = props.item as DevTool.TransferItem;
-  try {
-    if (uploadItem.formData) {
-      return {
-        value: JSON.parse(JSON.stringify(uploadItem.formData)),
-        type: 'object',
-      };
-    }
-    return {
-      value: {},
-      type: 'empty',
-    };
-  } catch (_error) {
-    return {
-      value: JSON.parse(JSON.stringify(uploadItem.formData)),
-      type: 'object',
-    };
-  }
-});
-
-const response = computed(() => {
-  try {
-    if (props.item.response) {
-      return {
-        value: JSON.parse(JSON.stringify(props.item.response)),
-        type: 'object',
-      };
-    }
-    return {
-      value: {},
-      type: 'empty',
-    };
-  } catch (_error) {
-    return {
-      value: props.item.response,
-      type: props.item.response ? 'string' : 'empty',
-    };
-  }
-});
-
-function onSelect(item: { label: string; value: string }) {
-  currentSelect.value = item.value;
-}
-
-function onClose() {
-  emit('close');
-}
-
-function onClickUrl() {
-  uni.setClipboardData({
-    data: props.item.url ?? '',
-    success() {
-      uni.showToast({
-        title: t('common.copySuccess'),
-        icon: 'none',
-      });
-    },
-    fail() {
-      uni.showToast({
-        title: t('common.copyFail'),
-        icon: 'none',
-      });
-    },
-  });
-}
-</script>
-<style>
-.transfer-detail {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1001;
-  top: 0;
-  left: 0;
-  padding: 0 16px;
-
-  /* #ifdef H5 || APP-PLUS */
-  padding: 50px 16px;
-
-  /* #endif */
-  background-color: var(--dev-tool-bg3-color);
-  box-sizing: border-box;
-  transition: background-color 0.3s;
-}
-
-.transfer-detail-control {
-  display: flex;
-  align-items: center;
-  margin-bottom: 4px;
-  gap: 12px;
-  height: 32px;
-  border-bottom: 1px solid transparent;
-  box-sizing: border-box;
-}
-
-.transfer-detail-item {
-  display: flex;
-  align-items: center;
-  min-height: 28px;
-  word-break: break-all;
-}
-
-.transfer-detail-url {
-  text-decoration: underline;
-}
-
-.transfer-detail-item-key {
-  white-space: nowrap;
-  margin-right: 8px;
-  color: var(--dev-tool-info-color);
-}
-
-.transfer-detail-payload {
-  word-break: break-all;
-  max-width: 100%;
-}
-</style>
+<template>
+  <view class="transfer-detail" :style="customStyle">
+    <view class="transfer-detail-control">
+      <DevToolTitle style="margin-right: 16px">
+        {{ t('transfer.detailTitle') }}
+      </DevToolTitle>
+
+      <Tag
+        v-for="item in translatedSelectItems"
+        :active="currentSelect === item.value"
+        :mode="item.mode"
+        :key="item.value"
+        @click="onSelect(item)">
+        {{ item.label }}
+      </Tag>
+
+      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
+    </view>
+
+    <view
+      class="transfer-detail-header"
+      :style="{ height: contentHeight - 32 + 'px' }"
+      v-if="currentSelect === 'header'">
+      <DevToolTitle>{{ t('network.general') }}</DevToolTitle>
+      <view class="transfer-detail-item">
+        <view class="transfer-detail-item-key">
+          {{ t('network.requestUrl') }}:
+        </view>
+        <view class="transfer-detail-url" @click="onClickUrl">
+          {{ item.url }}
+        </view>
+      </view>
+      <view class="transfer-detail-item">
+        <view class="transfer-detail-item-key">{{ t('network.method') }}:</view>
+        <Tag mode="info">
+          {{ type === 'upload' ? ((item as any).method ?? 'POST') : 'GET' }}
+        </Tag>
+      </view>
+      <view class="transfer-detail-item">
+        <view class="transfer-detail-item-key">{{ t('common.status') }}:</view>
+        <Tag mode="info">{{ t(`common.${item.status}`) }}</Tag>
+      </view>
+      <view
+        class="transfer-detail-item"
+        v-if="type === 'download' && (item as any).filePath">
+        <view class="transfer-detail-item-key">
+          {{ t('download.filePath') }}:
+        </view>
+        <view>{{ (item as any).filePath }}</view>
+      </view>
+
+      <DevToolTitle>{{ t('network.requestHeaders') }}</DevToolTitle>
+      <template
+        v-if="
+          item?.headers &&
+          item?.headers?.requestHeader &&
+          item?.headers?.requestHeader?.length > 0
+        ">
+        <view
+          class="transfer-detail-item"
+          v-for="h in item?.headers?.requestHeader"
+          :key="h.key">
+          <view class="transfer-detail-item-key">{{ h.key }}:</view>
+          {{ h.value }}
+        </view>
+      </template>
+      <Empty v-else />
+    </view>
+
+    <template v-if="currentSelect === 'formdata'">
+      <template v-if="formData?.type === 'object'">
+        <JsonPretty
+          virtual
+          :data="formData.value"
+          :nodeSelectable="() => false"
+          :pathCollapsible="() => false"
+          :height="contentHeight - 32" />
+      </template>
+      <view
+        v-else-if="formData?.type === 'string'"
+        class="transfer-detail-payload">
+        {{ formData.value }}
+      </view>
+      <Empty v-else />
+    </template>
+
+    <template v-if="currentSelect === 'response'">
+      <template v-if="response?.type === 'object'">
+        <JsonPretty
+          virtual
+          :data="response.value"
+          :nodeSelectable="() => false"
+          :pathCollapsible="() => false"
+          :height="contentHeight - 32" />
+      </template>
+      <view
+        v-else-if="response?.type === 'string'"
+        class="transfer-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 { useI18n } from '../../../../i18n';
+
+const { t } = useI18n();
+const props = defineProps<{
+  item: DevTool.TransferItem;
+  type: 'upload' | 'download';
+  zIndex?: number;
+  contentHeight: number;
+  customStyle?: Record<string, any>;
+}>();
+const emit = defineEmits<{ (e: 'close'): void }>();
+const translatedSelectItems = computed(() => {
+  const items = [
+    {
+      label: t('common.header'),
+      value: 'header',
+      mode: 'info',
+    },
+    {
+      label: t('common.response'),
+      value: 'response',
+      mode: 'info',
+    },
+  ];
+
+  if (props.type === 'upload') {
+    items.splice(1, 0, {
+      label: t('common.formData'),
+      value: 'formdata',
+      mode: 'info',
+    });
+  }
+  return items;
+});
+
+const currentSelect = ref('header');
+
+const formData = computed(() => {
+  if (props.type !== 'upload') return { value: {}, type: 'empty' };
+  const uploadItem = props.item as DevTool.TransferItem;
+  try {
+    if (uploadItem.formData) {
+      return {
+        value: JSON.parse(JSON.stringify(uploadItem.formData)),
+        type: 'object',
+      };
+    }
+    return {
+      value: {},
+      type: 'empty',
+    };
+  } catch (_error) {
+    return {
+      value: JSON.parse(JSON.stringify(uploadItem.formData)),
+      type: 'object',
+    };
+  }
+});
+
+const response = computed(() => {
+  try {
+    if (props.item.response) {
+      return {
+        value: JSON.parse(JSON.stringify(props.item.response)),
+        type: 'object',
+      };
+    }
+    return {
+      value: {},
+      type: 'empty',
+    };
+  } catch (_error) {
+    return {
+      value: props.item.response,
+      type: props.item.response ? 'string' : 'empty',
+    };
+  }
+});
+
+function onSelect(item: { label: string; value: string }) {
+  currentSelect.value = item.value;
+}
+
+function onClose() {
+  emit('close');
+}
+
+function onClickUrl() {
+  uni.setClipboardData({
+    data: props.item.url ?? '',
+    success() {
+      uni.showToast({
+        title: t('common.copySuccess'),
+        icon: 'none',
+      });
+    },
+    fail() {
+      uni.showToast({
+        title: t('common.copyFail'),
+        icon: 'none',
+      });
+    },
+  });
+}
+</script>
+<style>
+.transfer-detail {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1001;
+  top: 0;
+  left: 0;
+  padding: 0 16px;
+
+  /* #ifdef H5 || APP-PLUS */
+  padding: 50px 16px;
+
+  /* #endif */
+  background-color: var(--dev-tool-bg3-color);
+  box-sizing: border-box;
+  transition: background-color 0.3s;
+}
+
+.transfer-detail-control {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  gap: 12px;
+  height: 32px;
+  border-bottom: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.transfer-detail-item {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+  word-break: break-all;
+}
+
+.transfer-detail-url {
+  text-decoration: underline;
+}
+
+.transfer-detail-item-key {
+  white-space: nowrap;
+  margin-right: 8px;
+  color: var(--dev-tool-info-color);
+}
+
+.transfer-detail-payload {
+  word-break: break-all;
+  max-width: 100%;
+}
+</style>