vite-uni-dev-tool 0.0.22 → 0.0.23

package/dist/v3/WebSocket/WebSocketDetail.vue

@@ -0,0 +1,258 @@
+<template>
+  <view class="web-socket-list-container" :style="{ zIndex: zIndex }">
+    <view class="web-socket-detail-control">
+      <DevToolTitle style="margin-right: 16px"> 套接字详情 </DevToolTitle>
+      <Tag
+        mode="info"
+        v-for="item in selectItems"
+        :active="item.value === currentSelect"
+        :key="item.value"
+        @click="onSelect(item)"
+      >
+        {{ item.label }}
+      </Tag>
+      <CircularButton style="margin-left: auto" text="×" @click="onClose" />
+    </view>
+
+    <view class="web-socket-data" v-if="currentSelect === 'base'">
+      <DevToolTitle> 常规 </DevToolTitle>
+      <view class="web-socket-detail-item">
+        <view>请求地址:</view>
+        <view>{{ ws.url }}</view>
+      </view>
+
+      <view class="web-socket-detail-item">
+        <view>请求方法:</view>
+        <Tag mode="info">{{ ws.method }}</Tag>
+      </view>
+
+      <DevToolTitle>请求头</DevToolTitle>
+      <template v-if="ws.headers && ws.headers?.length > 0">
+        <view
+          class="web-socket-detail-item"
+          v-for="item in ws.headers"
+          :key="item.key"
+        >
+          <view>{{ item.key }}: </view>
+          {{ item.value }}
+        </view>
+      </template>
+      <Empty v-else />
+    </view>
+    <template v-if="currentSelect === 'message'">
+      <view class="web-socket-detail-control">
+        <DevToolTitle>消息列表</DevToolTitle>
+        <Tag mode="clear" style="margin-left: auto" @click="emit('clear', ws)">
+          清除
+        </Tag>
+      </view>
+
+      <view class="web-socket-data-list">
+        <template v-if="ws.message && ws.message.length > 0">
+          <view
+            v-for="item in ws.message"
+            :key="item.time"
+            :class="`web-socket-data-item web-socket-data-item-${item.status}`"
+            @click="onClick(item)"
+          >
+            <view class="web-socket-data-time">
+              {{ item.type === 'send' ? '↑' : '↓' }}
+              {{ formatDate(item.time, 'HH:mm:ss') }}
+            </view>
+            <view class="web-socket-data-content">
+              {{ item.data }}
+            </view>
+          </view>
+        </template>
+        <Empty v-else text="暂无消息" />
+      </view>
+
+      <!-- <textarea
+        :value="sendText"
+        class="web-socket-textarea"
+        placeholder="请输入消息"
+        placeholderStyle="font-size: 12px"
+        @change="onChangeText"
+      />
+      <button class="web-socket-send-button" size="mini">发送</button> -->
+    </template>
+  </view>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Tag from '../Tag/index.vue';
+import CircularButton from '../CircularButton/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import Empty from '../Empty/index.vue';
+import { formatDate } from '../../utils/index';
+import type { DevTool } from '../../type';
+
+defineProps<{ ws: DevTool.WS; zIndex?: number }>();
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'clear', value: DevTool.WS): void;
+}>();
+
+const selectItems = [
+  {
+    label: 'base',
+    value: 'base',
+  },
+  {
+    label: 'message',
+    value: 'message',
+  },
+];
+const currentSelect = ref('base');
+
+const sendText = ref('');
+
+function onSelect(item: { label: string; value: string }) {
+  currentSelect.value = item.value;
+}
+function onClose() {
+  emit('close');
+}
+
+function onClick(item: {
+  status: 'success' | 'error';
+  data: string;
+  time: number;
+}) {
+  uni.setClipboardData({
+    data: JSON.stringify(item),
+    success() {
+      uni.showToast({
+        title: '复制成功',
+        icon: 'none',
+      });
+    },
+    fail() {
+      uni.showToast({
+        title: '复制失败',
+        icon: 'none',
+      });
+    },
+  });
+}
+
+function onChangeText(e: any) {
+  sendText.value = e.detail.value;
+  console.log(' sendText.value: ', sendText.value);
+}
+</script>
+<style>
+.web-socket-list-container {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1001;
+  top: 0;
+  left: 0;
+  padding: 0 16px;
+  /* #ifdef H5 */
+  padding: 50px 16px;
+  /* #endif */
+
+  background-color: var(--dev-tool-bg3-color);
+
+  box-sizing: border-box;
+}
+
+.web-socket-detail-control {
+  display: flex;
+  align-items: center;
+  /* margin-bottom: 4px; */
+  height: 32px;
+  border-bottom: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.web-socket-detail-control :deep(.tag) {
+  margin-right: 16px;
+}
+.web-socket-detail-control :deep(.tag):last-child {
+  margin-right: 0;
+}
+
+.web-socket-list-title {
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+}
+
+.web-socket-data {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+
+.web-socket-detail-item {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+  word-break: break-all;
+  font-size: 12px;
+}
+
+.web-socket-detail-item > view:first-child {
+  white-space: nowrap;
+  margin-right: 8px;
+  color: var(--dev-tool-info-color);
+}
+
+.web-socket-url {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+
+  white-space: wrap;
+  word-break: break-all;
+}
+
+.web-socket-data-item {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+  font-size: 12px;
+}
+.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;
+}
+
+.web-socket-data-list {
+  /* height: calc(100% - 32px - 32px - 130px); */
+  height: calc(100% - 32px - 32px);
+  overflow: auto;
+}
+
+.web-socket-textarea {
+  padding: 6px;
+  height: 80px;
+  width: 100%;
+  font-size: 12px;
+  border: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+.web-socket-send-button {
+  margin-top: 12px;
+  width: 100%;
+  color: #fff;
+  background-color: var(--dev-tool-main-color);
+}
+</style>

package/dist/v3/WebSocket/WebSocketItem.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="websocket-item">
-    <view class="websocket-url-row">
-      <Tag mode="info" v-if="ws.readyState === 'connection'">con</Tag>
+    <view class="websocket-url-row" @click="emit('openDetail', ws)">
+      <Tag mode="info" v-if="ws.readyState === 'connection'">connection</Tag>
       <Tag mode="success" v-if="ws.readyState === 'open'">open</Tag>
       <Tag
         mode="warn"
@@ -13,49 +13,33 @@
       <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 }}
+        {{ 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>
+        {{
+          ws?.message?.[ws.message.length - 1]?.time
+            ? formatDate(
+                ws?.message?.[ws.message.length - 1]?.time,
+                'HH:mm:ss:SS',
+              )
+            : '--:--:--:---'
+        }}
+      </view>
     </view>
-
-    <WebSocketList
-      v-if="showDetail"
-      :ws="ws"
-      :zIndex="zIndex"
-      @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; zIndex?: number }>();
-const showDetail = ref(false);
 
-function onClose() {
-  showDetail.value = false;
-}
+const emit = defineEmits<{ (e: 'openDetail', value: DevTool.WS): void }>();
 </script>
 <style scoped>
 .websocket-item {

package/dist/v3/WebSocket/index.vue

@@ -30,7 +30,11 @@
           :index="start + index"
           :key="start + index"
         >
-          <WebSocketItem :ws="item" :zIndex="zIndex" />
+          <WebSocketItem
+            :ws="item"
+            :zIndex="zIndex"
+            @openDetail="emit('openDetail', $event)"
+          />
         </AutoSize>
         <Empty v-if="!wsList || wsList.length === 0" />
       </template>
@@ -57,6 +61,7 @@ const emit = defineEmits<{
   (e: 'choose', type: string): void;
   (e: 'update:modelValue', value: string): void;
   (e: 'search', value: string): void;
+  (e: 'openDetail', value: DevTool.WS): void;
 }>();
 const webSocketFilter = [
   {

package/package.json

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

package/dist/v3/WebSocket/WebSocketList.vue

@@ -1,161 +0,0 @@
-<template>
-  <view class="web-socket-list-container" :style="{ zIndex: zIndex }">
-    <view class="web-socket-top">
-      请求url:
-
-      <CircularButton style="margin-left: auto" text="×" @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 CircularButton from '../CircularButton/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>