vite-uni-dev-tool 0.0.13 → 0.0.15

package/dist/v3/WebSocket/WebSocketList.vue

@@ -0,0 +1,161 @@
+<template>
+  <view class="web-socket-list-container" :style="{ zIndex: zIndex }">
+    <view class="web-socket-top">
+      请求url:
+
+      <CloseButton style="margin-left: auto" @click="onClose" />
+    </view>
+    <view class="web-socket-url">
+      {{ ws.url }}
+    </view>
+
+    <view class="web-socket-data">
+      <view class="web-socket-title"
+        >请求方式：<Tag mode="info"> {{ ws.method }} </Tag></view
+      >
+      <view class="web-socket-title">请求头：</view>
+      <view
+        class="header-detail-item"
+        v-for="item in ws.headers"
+        :key="item.key"
+      >
+        <view>{{ item.key }}: </view>
+        {{ item.value }}
+      </view>
+
+      <view class="web-socket-title">消息列表：</view>
+      <view class="web-socket-data-list">
+        <view
+          v-for="item in ws.message"
+          :key="item.time"
+          :class="`web-socket-data-item web-socket-data-item-${item.type}`"
+          @click="onClick(item)"
+        >
+          <view class="web-socket-data-time"
+            >{{ formatDate(item.time, 'HH:mm:ss') }}
+          </view>
+          <view class="web-socket-data-content">
+            {{ item.data }}
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import Tag from '../Tag/index.vue';
+import CloseButton from '../CloseButton/index.vue';
+import { formatDate } from '../../utils/index';
+import type { DevTool } from '../../type';
+
+defineProps<{ ws: DevTool.WS; zIndex?: number }>();
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+function onClose() {
+  emit('close');
+}
+
+function onClick(item: {
+  type: 'success' | 'error';
+  data: string;
+  time: number;
+}) {
+  uni.setClipboardData({
+    data: JSON.stringify(item),
+    success() {
+      uni.showToast({
+        title: '复制成功',
+        icon: 'none',
+      });
+    },
+    fail() {
+      uni.showToast({
+        title: '复制失败',
+        icon: 'none',
+      });
+    },
+  });
+}
+</script>
+<style>
+.web-socket-list-container {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1001;
+  top: 0;
+  left: 0;
+  padding: 0 16px;
+
+  background-color: var(--dev-tool-bg2-color);
+  box-sizing: border-box;
+}
+.web-socket-list-title {
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+}
+
+.web-socket-data {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+
+.web-socket-url {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+
+  white-space: wrap;
+  word-break: break-all;
+}
+
+.web-socket-top {
+  display: flex;
+  align-items: center;
+  height: 32px;
+
+  border-bottom: 1px solid transparent;
+  box-sizing: border-box;
+}
+.web-socket-title {
+  display: flex;
+  align-items: center;
+}
+.header-detail-item {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+  word-break: break-all;
+}
+.header-detail-item > view:first-child {
+  white-space: nowrap;
+  margin-right: 8px;
+  color: var(--dev-tool-info-color);
+}
+
+.web-socket-data-item {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+}
+.web-socket-data-item-error {
+  background-color: var(--dev-tool-error-bg-color);
+}
+.web-socket-data-item-success {
+  background-color: var(--dev-tool-success-bg-color);
+}
+.web-socket-data-time {
+  /* margin-right: 16px; */
+  padding: 0 6px;
+  flex-shrink: 0;
+  color: var(--dev-tool-info-color);
+}
+.web-socket-data-content {
+  padding: 6px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+</style>

package/dist/v3/WebSocket/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <view class="websocket-content">
+    <view class="websocket-control">
+      <FilterInput
+        :modelValue="modelValue"
+        placeholder="查询url"
+        @search="emit('search', $event)"
+        @update:modelValue="emit('update:modelValue', $event)"
+      />
+      <Tag
+        v-for="item in webSocketFilter"
+        :mode="item.mode"
+        :key="item.value"
+        :active="item.value === currentWebSocketType"
+        @click="onChoose(item.value)"
+      >
+        {{ item.label }}
+      </Tag>
+    </view>
+
+    <VirtualListPro
+      :data="wsList"
+      :pageSize="10"
+      :height="height"
+      className="websocket-list"
+    >
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <WebSocketItem :ws="item" :zIndex="zIndex" />
+        </AutoSize>
+        <Empty v-if="!wsList || wsList.length === 0" />
+      </template>
+    </VirtualListPro>
+  </view>
+</template>
+<script lang="ts" setup>
+import WebSocketItem from './WebSocketItem.vue';
+import Tag from '../Tag/index.vue';
+import Empty from '../Empty/index.vue';
+import FilterInput from '../FilterInput/index.vue';
+import type { DevTool } from '../../type';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+import { onMounted, ref } from 'vue';
+
+defineProps<{
+  wsList: DevTool.WS[];
+  currentWebSocketType: string;
+  modelValue: string;
+  zIndex?: number;
+}>();
+const emit = defineEmits<{
+  (e: 'choose', type: string): void;
+  (e: 'update:modelValue', value: string): void;
+  (e: 'search', value: string): void;
+}>();
+const webSocketFilter = [
+  {
+    label: '全部',
+    value: 'all',
+    mode: 'all',
+  },
+  {
+    label: 'con',
+    value: 'connection',
+    mode: 'info',
+  },
+  {
+    label: 'open',
+    value: 'open',
+    mode: 'success',
+  },
+  {
+    label: 'close',
+    value: 'close',
+    mode: 'warn',
+  },
+  {
+    label: 'error',
+    value: 'error',
+    mode: 'error',
+  },
+  {
+    label: '清除',
+    value: 'clear',
+    mode: 'clear',
+  },
+];
+
+function onChoose(type: string) {
+  emit('choose', type);
+}
+
+const height = ref(0);
+onMounted(() => {
+  const { windowHeight } = uni.getWindowInfo();
+  height.value = windowHeight - 32 - 32;
+});
+</script>
+<style scoped>
+.websocket-content {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.websocket-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;
+}
+.websocket-list {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+</style>

package/dist/v3/WindowInfo/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <view class="window-info-content">
+    <JsonPretty v-if="showJson" :data="windowInfo" />
+    <Empty v-else />
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import JsonPretty from '../JsonPretty/index.vue';
+
+import Empty from '../Empty/index.vue';
+const props = defineProps<{
+  windowInfo: Record<string, any>;
+}>();
+
+const showJson = computed(() => {
+  try {
+    const str = JSON.stringify(props.windowInfo);
+    if (typeof props.windowInfo === 'object' && (str === '' || str === '{}')) {
+      return false;
+    }
+    return true;
+  } catch (error) {
+    return false;
+  }
+});
+</script>
+<style scoped>
+.window-info-content {
+  padding: 16px;
+  font-size: var(--dev-tool-base-font-size);
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-uni-dev-tool",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试",
   "keywords": [
     "vite",