vite-uni-dev-tool 0.0.1

package/dev/components/Tag/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <view
+    :class="`tag tag-${mode} ${active ? 'tag-active' : ''}`"
+    @click="onClick"
+  >
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+defineProps<{
+  mode:
+    | 'primary'
+    | 'warn'
+    | 'success'
+    | 'error'
+    | 'info'
+    | 'log'
+    | 'main'
+    | 'clear'
+    | string;
+  active?: boolean;
+}>();
+const emit = defineEmits<{ (e: 'click', event: MouseEvent): void }>();
+function onClick(event: MouseEvent) {
+  emit('click', event);
+}
+</script>
+<style scoped>
+.tag {
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  width: min-content;
+  height: 24px;
+  color: #fff;
+  border-radius: 4px;
+  white-space: nowrap;
+  box-sizing: border-box;
+  font-size: var(--dev-tool-tag-font-size);
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.tag-log {
+  color: #000;
+  background-color: var(--dev-tool-border-color);
+  border: 1px solid var(--dev-tool-border-color);
+}
+.tag-info {
+  color: #000;
+  background-color: var(--dev-tool-normal-bg-color);
+  border: 1px solid var(--dev-tool-normal-bg-color);
+}
+.tag-warn {
+  background-color: var(--dev-tool-warn-color);
+  border: 1px solid var(--dev-tool-warn-color);
+}
+.tag-success {
+  background-color: var(--dev-tool-success-color);
+  border: 1px solid var(--dev-tool-success-color);
+}
+.tag-error {
+  background-color: var(--dev-tool-error-color);
+  border: 1px solid var(--dev-tool-error-color);
+}
+.tag-main {
+  background-color: var(--dev-tool-main-color);
+  color: #fff;
+  border: 1px solid var(--dev-tool-main-color);
+}
+
+.tag-primary {
+  color: #fff;
+  background-color: #0958d9;
+  border: 1px solid #0958d9;
+}
+.tag-clear {
+  color: #0958d9;
+  border: 1px solid #0958d9;
+}
+.tag-all {
+  color: #000;
+  border: 1px solid #000;
+}
+
+.tag-active {
+  border-color: var(--dev-tool-main-color);
+  color: var(--dev-tool-main-color);
+}
+</style>

package/dev/components/UploadList/UploadDetail.vue

@@ -0,0 +1,208 @@
+<template>
+  <view class="upload-detail">
+    <view class="upload-detail-control">
+      <Tag
+        v-for="item in selectItems"
+        :active="currentSelect === item.value"
+        :mode="item.mode"
+        :key="item.value"
+        @click="onSelect(item)"
+      >
+        {{ item.label }}
+      </Tag>
+
+      <CloseButton style="margin-left: auto" @click="onClose" />
+    </view>
+
+    <view class="upload-detail-header" v-if="currentSelect === 'header'">
+      <view class="upload-detail-title">常规</view>
+      <view class="net-detail-item">
+        <view>请求url:</view>
+        <view>{{ upload.url }}</view>
+      </view>
+      <view class="net-detail-item">
+        <view>请求方法:</view>
+        <Tag mode="info">{{ upload.method ?? 'POST' }}</Tag>
+      </view>
+      <view class="net-detail-item">
+        <view>状态代码:</view>
+        <Tag mode="info">{{ upload.status }}</Tag>
+      </view>
+      <view class="upload-detail-title">请求头</view>
+      <view
+        class="net-detail-item"
+        v-for="item in upload?.headers?.requestHeader"
+        :key="item.key"
+      >
+        <view>{{ item.key }}:</view>
+        {{ item.value }}
+      </view>
+      <!-- <view class="upload-detail-title">响应头</view>
+      <view
+        class="net-detail-item"
+        v-for="item in upload?.headers?.responseHeader"
+        :key="item.key"
+      >
+        <view>{{ item.key }}:</view>
+        {{ item.value }}
+      </view> -->
+    </view>
+
+    <template v-if="currentSelect === 'formdata'">
+      <template v-if="formData?.type === 'object'">
+        <JsonPretty :data="formData.value" />
+      </template>
+      <view
+        v-else-if="formData?.type === 'string'"
+        class="upload-detail-payload"
+      >
+        {{ formData.value }}
+      </view>
+      <Empty v-else />
+    </template>
+
+    <template v-if="currentSelect === 'response'">
+      <template v-if="response?.type === 'object'">
+        <JsonPretty :data="response.value" virtual />
+      </template>
+      <view
+        v-else-if="response?.type === 'string'"
+        class="upload-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 CloseButton from '../CloseButton/index.vue';
+import type { DevTool } from '../../type';
+const props = defineProps<{ upload: DevTool.UploadItem }>();
+const emit = defineEmits<{ (e: 'close'): void }>();
+const selectItems = [
+  {
+    label: 'header',
+    value: 'header',
+    mode: 'info',
+  },
+  {
+    label: 'formdata',
+    value: 'formdata',
+    mode: 'info',
+  },
+  {
+    label: 'response',
+    value: 'response',
+    mode: 'info',
+  },
+];
+const currentSelect = ref('header');
+
+const formData = computed(() => {
+  try {
+    if (props.upload.formData) {
+      return {
+        value: JSON.parse(JSON.stringify(props.upload.formData)),
+        type: 'object',
+      };
+    }
+    return {
+      value: {},
+      type: 'empty',
+    };
+  } catch (error) {
+    return {
+      value: JSON.parse(JSON.stringify(props.upload.formData)),
+      type: 'object',
+    };
+  }
+});
+
+const response = computed(() => {
+  try {
+    if (props.upload.response) {
+      return {
+        value: JSON.parse(JSON.stringify(props.upload.response)),
+        type: 'object',
+      };
+    }
+    return {
+      value: {},
+      type: 'empty',
+    };
+  } catch (error) {
+    return {
+      value: props.upload.response,
+      type: props.upload.response ? 'string' : 'empty',
+    };
+  }
+});
+
+function onSelect(item: { label: string; value: string }) {
+  currentSelect.value = item.value;
+}
+
+function onClose() {
+  emit('close');
+}
+</script>
+<style>
+.upload-detail {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  padding: 0 16px;
+  /* #ifdef H5 */
+  padding: 50px 16px;
+  /* #endif */
+
+  background-color: rgba(255, 255, 255, 0.95);
+  box-sizing: border-box;
+}
+.upload-detail .upload-detail-control {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  gap: 12px;
+  height: 32px;
+  border-bottom: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.upload-detail .upload-detail-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  border-radius: 50%;
+  border: 1px solid #000;
+  box-sizing: border-box;
+}
+
+.upload-detail .upload-detail-header .net-detail-item {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+  word-break: break-all;
+}
+.upload-detail .upload-detail-header .net-detail-item > view:first-child {
+  white-space: nowrap;
+  margin-right: 8px;
+  color: #616161;
+}
+.upload-detail .upload-detail-payload {
+  word-break: break-all;
+  max-width: 100%;
+}
+</style>

package/dev/components/UploadList/UploadItem.vue

@@ -0,0 +1,111 @@
+<template>
+  <view class="upload-item">
+    <view class="upload-url-row">
+      <Tag mode="info">POST</Tag>
+      <view class="upload-url" v-html="upload.url" />
+      <Tag
+        mode="main"
+        class="upload-detail-icon"
+        @click="showDetail = !showDetail"
+        >详情</Tag
+      >
+    </view>
+    <view class="upload-info">
+      <view>
+        <Tag v-if="upload.status === 'pending'" mode="info">
+          {{ upload.status }}
+        </Tag>
+        <Tag v-if="upload.status === 'uploading'" mode="warn">
+          {{ upload.status }}
+        </Tag>
+        <Tag v-if="upload.status === 'success'" mode="success">
+          {{ upload.status }}
+        </Tag>
+        <Tag v-if="upload.status === 'error'" mode="error">
+          {{ upload.status }}
+        </Tag>
+      </view>
+      <view>进度: {{ upload.progress }}%</view>
+      <view>
+        开始:
+        {{ upload.startTime ? formatDate(upload.startTime, ' HH:mm:ss') : '-' }}
+      </view>
+      <view>
+        结束:
+        {{ upload.endTime ? formatDate(upload.endTime, ' HH:mm:ss') : '-' }}
+      </view>
+    </view>
+  </view>
+  <!-- <Transition name="slide-fade"> -->
+  <UploadDetail v-if="showDetail" :upload="upload" @close="onClose" />
+  <!-- </Transition> -->
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import Tag from '../Tag/index.vue';
+import UploadDetail from './UploadDetail.vue';
+import { formatDate } from '../../utils';
+import type { DevTool } from '../../type';
+defineProps<{
+  upload: DevTool.UploadItem;
+}>();
+const showDetail = ref(false);
+
+function onClose() {
+  showDetail.value = false;
+}
+</script>
+<style scoped>
+.upload-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  font-size: var(--dev-tool-base-font-size);
+}
+.upload-item .upload-url-row {
+  display: flex;
+  align-items: center;
+  word-break: break-all;
+}
+.websocket-item .websocket-url-row .websocket-url {
+  margin-left: 4px;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.upload-item .upload-url-row .upload-detail-icon {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.upload-url {
+  margin-left: 4px;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.upload-item .upload-url-row .upload-detail-active {
+  transform: rotate(135deg);
+}
+.upload-item .upload-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+  color: #616161;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.8s ease-out;
+}
+.slide-fade-leave-active {
+  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(20px);
+  opacity: 0;
+}
+</style>

package/dev/components/UploadList/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <view class="upload-content">
+    <view class="upload-control">
+      <FilterInput
+        :modelValue="modelValue"
+        placeholder="查询url"
+        @search="emit('search', $event)"
+        @update:modelValue="emit('update:modelValue', $event)"
+      />
+      <Tag
+        v-for="item in uploadFilterItems"
+        :mode="item.mode"
+        :key="item.value"
+        :active="item.value === currentUploadType"
+        @click="onChoose(item.value)"
+      >
+        {{ item.label }}
+      </Tag>
+    </view>
+    <view class="upload-list">
+      <UploadItem v-for="item in uploadList" :upload="item" :key="item.index" />
+      <Empty v-if="!uploadList || uploadList.length === 0" />
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import Tag from '../Tag/index.vue';
+import UploadItem from './UploadItem.vue';
+import Empty from '../Empty/index.vue';
+import FilterInput from '../FilterInput/index.vue';
+import type { DevTool } from '../../type';
+defineProps<{
+  currentUploadType: string;
+  uploadList: DevTool.UploadItem[];
+  modelValue: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'choose', type: string): void;
+  (e: 'update:modelValue', value: string): void;
+  (e: 'search', value: string): void;
+}>();
+const uploadFilterItems = [
+  {
+    label: '全部',
+    value: 'all',
+    mode: 'all',
+  },
+  {
+    label: 'pending',
+    value: 'pending',
+    mode: 'info',
+  },
+  {
+    label: 'success',
+    value: 'success',
+    mode: 'success',
+  },
+  {
+    label: 'error',
+    value: 'error',
+    mode: 'error',
+  },
+  {
+    label: '清除',
+    value: 'clear',
+    mode: 'clear',
+  },
+];
+
+function onChoose(type: string) {
+  emit('choose', type);
+}
+</script>
+<style scoped>
+.upload-content {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+.upload-list {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+.upload-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+</style>

package/dev/components/VuexList/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <view class="vuex-content">
+    <JsonPretty
+      :data="vuexList"
+      showLength
+      editable
+      v-if="showJson"
+      @update:data="onUpdateData"
+      @nodeClick="onNodeClick"
+    />
+    <Empty v-else />
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import JsonPretty from '../JsonPretty/index.vue';
+import Empty from '../Empty/index.vue';
+const props = defineProps<{
+  vuexList: Record<string, any>;
+}>();
+const emit = defineEmits<{
+  (e: 'update:vuexList', data: Record<string, any>): void;
+  (e: 'diffValue', value: any): void;
+}>();
+const showJson = computed(() => {
+  try {
+    const str = JSON.stringify(props.vuexList);
+    if (typeof props.vuexList === 'object' && (str === '' || str === '{}')) {
+      return false;
+    }
+    return true;
+  } catch (error) {
+    return false;
+  }
+});
+
+let currentSelect: any;
+function onUpdateData(data: Record<string, any>) {
+  const firstKey = currentSelect?.path.split('.')?.slice(1)?.[0];
+  emit('update:vuexList', data);
+  emit('diffValue', {
+    [firstKey]: data[firstKey]
+  });
+}
+function onNodeClick(node: any) {
+  currentSelect = node;
+}
+</script>
+<style scoped>
+.vuex-content {
+  padding: 16px;
+  font-size: var(--dev-tool-base-font-size);
+}
+</style>

package/dev/components/WebSocket/WebSocketItem.vue

@@ -0,0 +1,98 @@
+<template>
+  <view class="websocket-item">
+    <view class="websocket-url-row">
+      <Tag mode="info" v-if="ws.readyState === 'connection'">con</Tag>
+      <Tag mode="success" v-if="ws.readyState === 'open'">open</Tag>
+      <Tag
+        mode="warn"
+        v-if="ws.readyState === 'closing' || ws.readyState === 'closed'"
+      >
+        close
+      </Tag>
+
+      <Tag mode="error" v-if="ws.readyState === 'error'">error</Tag>
+
+      <view class="websocket-url" v-html="ws.url" />
+
+      <Tag
+        mode="main"
+        class="websocket-detail-icon"
+        @click="showDetail = !showDetail"
+      >
+        详情
+      </Tag>
+    </view>
+    <view class="websocket-info">
+      <view class="websocket-info-last">
+        {{ ws?.message?.[ws.message.length - 1]?.data }}
+      </view>
+
+      <view>{{
+        ws?.message?.[ws.message.length - 1].time
+          ? formatDate(ws?.message?.[ws.message.length - 1].time, 'HH:mm:ss')
+          : '-'
+      }}</view>
+    </view>
+
+    <WebSocketList v-if="showDetail" :ws="ws" @close="onClose" />
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import Tag from '../Tag/index.vue';
+import WebSocketList from './WebSocketList.vue';
+import { formatDate } from '../../utils';
+import type { DevTool } from '../../type';
+
+defineProps<{ ws: DevTool.WS }>();
+const showDetail = ref(false);
+
+function onClose() {
+  showDetail.value = false;
+}
+</script>
+<style scoped>
+.websocket-item {
+  padding: 16px;
+
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  font-size: var(--dev-tool-base-font-size);
+}
+.websocket-item .websocket-url-row {
+  display: flex;
+  align-items: center;
+  word-break: break-all;
+}
+
+.websocket-item .websocket-url-row .websocket-url {
+  margin-left: 4px;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.websocket-item .websocket-url-row .websocket-detail-icon {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.websocket-item .websocket-url-row .websocket-detail-active {
+  transform: rotate(135deg);
+}
+.websocket-item .websocket-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+  color: #616161;
+}
+
+.websocket-item .websocket-info .websocket-info-last {
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>