vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/TransferList/TransferDetail.vue

@@ -0,0 +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 '../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 { 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>

package/dist/v3/TransferList/TransferItem.vue

@@ -0,0 +1,125 @@
+<template>
+  <!-- eslint-disable vue/no-v-html, vue/no-v-text-v-html-on-component -->
+  <view class="transfer-item">
+    <view class="transfer-url-row" @click="emit('openDetail', item)">
+      <Tag mode="info">{{ type === 'upload' ? 'POST' : 'GET' }}</Tag>
+      <view class="transfer-url" v-html="item.url" />
+    </view>
+    <view class="transfer-info">
+      <view>
+        <Tag
+          v-if="
+            ['pending', 'downloading', 'uploading'].includes(
+              item.status as string,
+            )
+          "
+          :mode="item.status === 'pending' ? 'info' : 'warn'">
+          {{ t(`common.${item.status}`) }}
+        </Tag>
+        <Tag v-if="item.status === 'success'" mode="success">
+          {{ t(`common.${item.status}`) }}
+        </Tag>
+        <Tag v-if="item.status === 'error'" mode="error">
+          {{ t(`common.${item.status}`) }}
+        </Tag>
+      </view>
+      <view class="transfer-progress">
+        {{ item.type === 'upload' ? '↑' : '↓' }}
+        {{ t('common.progress') }}: {{ item.progress }}%
+      </view>
+      <view>
+        {{ t('common.startTime') }}:
+        {{
+          item.startTime
+            ? formatDate(item.startTime, ' HH:mm:ss:SS')
+            : '--:--:--:---'
+        }}
+      </view>
+      <view>
+        {{ t('common.endTime') }}:
+        {{
+          item.endTime
+            ? formatDate(item.endTime, ' HH:mm:ss:SS')
+            : '--:--:--:---'
+        }}
+      </view>
+    </view>
+    <view
+      :class="['transfer-stock', isUseDevSource ? 'transfer-stock-link' : '']"
+      @click.stop="emit('openCode', item.stack)">
+      {{ item?.stack }}
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+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<{
+  item: DevTool.TransferItem;
+  type: 'upload' | 'download';
+  zIndex?: number;
+  mode?: string;
+  useDevSource?: boolean;
+}>();
+const emit = defineEmits<{
+  (e: 'openDetail', value: DevTool.TransferItem): void;
+  (e: 'openCode', value?: string): void;
+}>();
+
+const isUseDevSource = computed(() => {
+  return (
+    !isMockWX(props?.item?.stack ?? '') &&
+    props.mode === 'development' &&
+    props.useDevSource
+  );
+});
+</script>
+<style scoped>
+.transfer-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.transfer-url-row {
+  display: flex;
+  align-items: center;
+  word-break: break-all;
+}
+
+.transfer-url {
+  margin-left: 4px;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: underline;
+}
+
+.transfer-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+  color: var(--dev-tool-text-color);
+}
+
+.transfer-progress {
+  width: 110px;
+}
+
+.transfer-stock {
+  text-align: right;
+  overflow-wrap: break-word;
+}
+
+.transfer-stock-link {
+  text-decoration: underline;
+}
+</style>

package/dist/v3/TransferList/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <view class="transfer-content">
+    <view class="transfer-control">
+      <DevToolTitle customStyle="flex-shrink: 0">
+        {{ t('transfer.title') }}
+      </DevToolTitle>
+      <FilterInput
+        v-model="modelValue"
+        :placeholder="t('transfer.searchUrl')"
+        customStyle="flex: 1; width: auto;"
+        @search="emit('search', $event)" />
+      <Pick
+        :modelValue="currentType"
+        :options="filterOptions"
+        :readonly="true"
+        :placeholder="t('common.selectStatus')"
+        customStyle="flex: 1; width: auto; "
+        @change="onFilterChange" />
+      <Pick
+        :modelValue="currentCategory"
+        :options="categoryOptions"
+        :readonly="true"
+        :placeholder="t('common.selectType')"
+        customStyle="flex: 1; width: auto;"
+        @change="onCategoryChange" />
+
+      <Tag mode="clear" @click="onChoose('clear')" style="flex-shrink: 0">
+        {{ t('common.clear') }}
+      </Tag>
+    </view>
+    <VirtualList
+      :data="list"
+      :pageSize="15"
+      :height="contentHeight - 32 - 32"
+      className="transfer-list">
+      <template v-slot="{ list: vList, start, itemsHeight, onSizeChange }">
+        <AutoSize
+          v-for="(item, index) in vList"
+          :index="start + index"
+          :key="start + index"
+          :itemsHeight="itemsHeight"
+          :onSizeChange="onSizeChange">
+          <TransferItem
+            :item="item"
+            :type="type"
+            :zIndex="zIndex"
+            :mode="mode"
+            :useDevSource="useDevSource"
+            @openDetail="emit('openDetail', $event)"
+            @openCode="emit('openCode', $event)" />
+        </AutoSize>
+        <Empty v-if="!list || list.length === 0" />
+      </template>
+    </VirtualList>
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import Tag from '../Tag/index.vue';
+import TransferItem from './TransferItem.vue';
+import Empty from '../Empty/index.vue';
+import FilterInput from '../FilterInput/index.vue';
+import Pick from '../Pick/index.vue';
+import type { DevTool } from '../../type';
+import VirtualList from '../VirtualList/index.vue';
+import AutoSize from '../VirtualList/AutoSize.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
+
+const _props = defineProps<{
+  currentType: string;
+  currentCategory?: string;
+  list: DevTool.TransferItem[];
+  type: 'upload' | 'download';
+  mode?: string;
+  zIndex: number;
+  useDevSource?: boolean;
+  contentHeight: number;
+}>();
+
+const modelValue = defineModel<string>('modelValue', { required: true });
+
+const emit = defineEmits<{
+  (e: 'choose', type: string): void;
+  (e: 'chooseCategory', type: string): void;
+  (e: 'search', value: string): void;
+  (e: 'openDetail', value: DevTool.TransferItem): void;
+  (e: 'openCode', value?: string): void;
+}>();
+
+const categoryOptions = computed(() => {
+  return [
+    {
+      label: t('common.all'),
+      value: 'all',
+      mode: 'all',
+    },
+    {
+      label: t('common.upload'),
+      value: 'upload',
+      mode: 'warn',
+    },
+    {
+      label: t('common.download'),
+      value: 'download',
+      mode: 'warn',
+    },
+  ];
+});
+
+const filterItems = computed(() => {
+  const items = [
+    {
+      label: t('common.all'),
+      value: 'all',
+      mode: 'all',
+    },
+    {
+      label: t('common.pending'),
+      value: 'pending',
+      mode: 'info',
+    },
+    {
+      label: t('common.success'),
+      value: 'success',
+      mode: 'success',
+    },
+    {
+      label: t('common.error'),
+      value: 'error',
+      mode: 'error',
+    },
+    {
+      label: t('common.clear'),
+      value: 'clear',
+      mode: 'clear',
+    },
+  ];
+
+  return items;
+});
+
+function onChoose(type: string) {
+  emit('choose', type);
+}
+
+const filterOptions = computed(() => {
+  return filterItems.value.filter((item) => item.value !== 'clear');
+});
+
+function onFilterChange(item: { label: string; value: any }) {
+  emit('choose', item.value);
+}
+
+function onCategoryChange(item: { label: string; value: any }) {
+  emit('chooseCategory', item.value);
+}
+</script>
+<style scoped>
+.transfer-content {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.transfer-list {
+  height: calc(100% - 32px);
+}
+
+.transfer-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+</style>

package/dist/v3/UniEvent/UniEventItem.vue

@@ -69,6 +69,7 @@ const isUseDevSource = computed(() => {
   text-align: right;
   word-break: break-all;
 }
+
 .link {
   cursor: pointer;
   text-decoration: underline;