uni-oaview 1.5.2 → 1.6.0

package/components/oa-vconsole/network.vue

@@ -58,6 +58,7 @@
   }
 
   interface NetworkLog {
+    type: 'request' | 'uploadFile' | 'downloadFile';
     request: NetworkLogRequest;
     response?: NetworkLogResponse;
     startTime: number;
@@ -132,8 +133,15 @@
     return networkLogDetailMap.value.get(id) ?? null;
   };
 
-  const upsertLogs = (logs: NetworkLog[]) => {
-    const nextLogs = logs.slice(-MAX_NETWORK_LOGS);
+  // 使用类型守卫过滤出 HTTP 日志
+  const isHttpLog = (log: any): log is NetworkLog => {
+    return log && log.type !== 'websocket';
+  };
+
+  const upsertLogs = (logs: any[]): void => {
+    // 过滤出非 websocket 的日志
+    const httpLogs = logs.filter(isHttpLog);
+    const nextLogs = httpLogs.slice(-MAX_NETWORK_LOGS);
     const detailMap = networkLogDetailMap.value;
 
     const nextMetas: NetworkLogMeta[] = [];
@@ -162,7 +170,7 @@
 
   upsertLogs(getNetworkLogs());
 
-  const stop = networkSubject.subscribe((data: NetworkLog[]) => {
+  const stop = networkSubject.subscribe((data: any[]): void => {
     upsertLogs(data);
   });
 

package/components/oa-vconsole/oa-vconsole.vue

@@ -37,6 +37,9 @@
           <Audio />
         </template>
         <template v-if="current === 7">
+          <Websocket />
+        </template>
+        <template v-if="current === 8">
           <DevTools />
         </template>
       </view>
@@ -65,10 +68,11 @@
   import Console from './console.vue';
   import System from './system.vue';
   import Audio from './audio.vue';
+  import Websocket from './websocket.vue';
   import DevTools from './dev-tools.vue';
 
   const popupRef = ref<any>();
-  const list = ref(['console', 'network', 'event', 'error', 'storage', 'system', 'audio', 'dev-tools']);
+  const list = ref(['console', 'network', 'event', 'error', 'storage', 'system', 'audio', 'websocket', 'dev-tools']);
   const current = ref(0);
 
   const handleTabClick = (index: number) => {

package/components/oa-vconsole/websocket.vue

@@ -0,0 +1,281 @@
+<template>
+  <uni-collapse ref="collapseRef" v-model="activeNames">
+    <uni-collapse-item
+      v-for="meta in websocketLogMetas"
+      :key="meta.id"
+      :name="meta.id"
+      :title="meta.title"
+      :class="{
+        'uni-collapse-item-error': meta.isError,
+        'uni-collapse-item-connecting': meta.isConnecting,
+      }"
+    >
+      <view style="font-size: 10px; padding: 10px 15px">
+        <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+          <text :selectable="true" style="font-weight: bolder">URL：</text>
+          {{ meta.url }}
+        </view>
+        <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+          <text :selectable="true" style="font-weight: bolder">状态：</text>
+          {{ meta.status }}
+        </view>
+        <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+          <text :selectable="true" style="font-weight: bolder">消息统计：</text>
+          发送 {{ meta.sendCount }}，接收 {{ meta.receiveCount }}，共 {{ meta.messageTotal }} 条
+        </view>
+        <template v-if="isExpanded(meta.id)">
+          <view v-if="meta.protocols" style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+            <text :selectable="true" style="font-weight: bolder">协议：</text>
+            {{ meta.protocols }}
+          </view>
+          <view
+            v-if="getWebsocketLogDetail(meta.id)?.request?.header"
+            style="word-break: break-all; padding: 8px 0; margin-bottom: 10px"
+          >
+            <text :selectable="true" style="font-weight: bolder">请求头：</text>
+            <awesome-display-info :log="getWebsocketLogDetail(meta.id)?.request?.header" />
+          </view>
+          <view
+            v-if="meta.isError && getWebsocketLogDetail(meta.id)?.errorInfo"
+            style="word-break: break-all; padding: 8px 0; margin-bottom: 10px"
+          >
+            <text :selectable="true" style="font-weight: bolder; color: red">错误信息：</text>
+            <awesome-display-info :log="getWebsocketLogDetail(meta.id)?.errorInfo" />
+          </view>
+          <view
+            v-if="getMessageList(meta.id).length > 0"
+            style="word-break: break-all; padding: 8px 0; margin-bottom: 10px"
+          >
+            <text :selectable="true" style="font-weight: bolder">
+              消息列表（共 {{ meta.messageTotal }} 条，显示最近 100 条）：
+            </text>
+            <view
+              v-for="(msg, index) in getMessageList(meta.id)"
+              :key="index"
+              style="padding: 4px 0; font-size: 9px; color: #666"
+            >
+              <text :selectable="true">
+                [{{ formatTime(msg.time) }}] [{{ msg.type === 'send' ? '发送' : '接收' }}] {{ msg.size }}B
+              </text>
+              <view
+                v-if="msg.dataPreview"
+                style="margin-top: 2px; padding: 4px; background-color: #f5f5f5; border-radius: 2px"
+              >
+                {{ msg.dataPreview }}
+              </view>
+            </view>
+          </view>
+        </template>
+      </view>
+    </uni-collapse-item>
+  </uni-collapse>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
+  import awesomeDisplayInfo from './awesome-display-info.vue';
+  import { websocketSubject, getWebsocketLogs } from 'uniapp-log-sdk';
+
+  interface MessageRecord {
+    type: 'send' | 'receive';
+    data: string | ArrayBuffer;
+    time: number;
+    size: number;
+  }
+
+  interface WebsocketLog {
+    type: 'websocket';
+    connectionId: string;
+    request: {
+      url: string;
+      header?: unknown;
+      protocols?: string[];
+    };
+    response?: unknown;
+    messages: MessageRecord[];
+    stats: {
+      messageTotal: number;
+      messageSendCount: number;
+      messageReceiveCount: number;
+      droppedMessageCount: number;
+    };
+    startTime: number;
+    endTime: number;
+    openTime: number;
+    status: 'connecting' | 'open' | 'closed' | 'error';
+    errorInfo?: unknown;
+  }
+
+  interface WebsocketLogMeta {
+    id: string;
+    title: string;
+    url: string;
+    status: string;
+    messageTotal: number;
+    sendCount: number;
+    receiveCount: number;
+    protocols?: string;
+    duration: string;
+    isError: boolean;
+    isConnecting: boolean;
+  }
+
+  const MAX_WEBSOCKET_LOGS = 50;
+  const MESSAGE_PREVIEW_LENGTH = 100;
+
+  const collapseRef = ref<{ resize?: () => void } | null>(null);
+  const activeNames = ref<string[] | string>([]);
+
+  const websocketLogDetailMap = shallowRef<Map<string, WebsocketLog>>(new Map());
+  const websocketLogMetas = ref<WebsocketLogMeta[]>([]);
+
+  const formatTime = (timestamp: number): string => {
+    const date = new Date(timestamp);
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    const milliseconds = String(date.getMilliseconds()).padStart(3, '0');
+    return `${hours}:${minutes}:${seconds}.${milliseconds}`;
+  };
+
+  const buildWebsocketLogId = (log: WebsocketLog): string => {
+    // 使用 connectionId 作为唯一标识，避免同 URL 多连接的混淆
+    return log.connectionId;
+  };
+
+  const getMessagePreview = (data: string | ArrayBuffer): string => {
+    if (typeof data === 'string') {
+      return data.length > MESSAGE_PREVIEW_LENGTH ? data.substring(0, MESSAGE_PREVIEW_LENGTH) + '...' : data;
+    }
+    return `[ArrayBuffer(${data.byteLength})]`;
+  };
+
+  const buildMetaFromLog = (log: WebsocketLog): WebsocketLogMeta => {
+    const { startTime, endTime, request, status, stats, errorInfo } = log;
+    const timeStr = formatTime(startTime);
+    const duration = endTime && startTime ? `${((endTime - startTime) / 1000).toFixed(2)}s` : 'pending';
+    const isError = status === 'error' || (errorInfo !== null && errorInfo !== undefined);
+    const isConnecting = status === 'connecting';
+    const protocolStr = request?.protocols?.join(',') || '';
+
+    return {
+      id: buildWebsocketLogId(log),
+      title: `[${timeStr}] ${request?.url}；${duration}；${status}`,
+      url: request?.url ?? '',
+      status,
+      messageTotal: stats.messageTotal,
+      sendCount: stats.messageSendCount,
+      receiveCount: stats.messageReceiveCount,
+      protocols: protocolStr,
+      duration,
+      isError,
+      isConnecting,
+    };
+  };
+
+  const getActiveNameList = (): string[] => {
+    const value = activeNames.value;
+    return Array.isArray(value) ? value : value ? [value] : [];
+  };
+
+  const isExpanded = (id: string): boolean => getActiveNameList().includes(id);
+
+  const getWebsocketLogDetail = (id: string): WebsocketLog | null => {
+    return websocketLogDetailMap.value.get(id) ?? null;
+  };
+
+  const getMessageList = (id: string): Array<MessageRecord & { dataPreview: string }> => {
+    const log = getWebsocketLogDetail(id);
+    if (!log) return [];
+    return log.messages.map((msg) => ({
+      ...msg,
+      dataPreview: getMessagePreview(msg.data),
+    }));
+  };
+
+  const upsertLogs = (logs: WebsocketLog[]) => {
+    const nextLogs = logs.slice(-MAX_WEBSOCKET_LOGS);
+    const detailMap = websocketLogDetailMap.value;
+
+    const nextMetas: WebsocketLogMeta[] = [];
+    for (const log of nextLogs) {
+      const id = buildWebsocketLogId(log);
+      detailMap.set(id, log);
+      nextMetas.push(buildMetaFromLog(log));
+    }
+
+    websocketLogMetas.value = nextMetas;
+
+    // 清理 detailMap，避免无限增长
+    const keepIds = new Set(nextMetas.map((m) => m.id));
+    for (const key of detailMap.keys()) {
+      if (!keepIds.has(key)) detailMap.delete(key);
+    }
+
+    // 清理 activeNames（如果展开项已被裁剪掉）
+    const currentActive = activeNames.value;
+    if (Array.isArray(currentActive)) {
+      if (currentActive.length) activeNames.value = currentActive.filter((id) => keepIds.has(id));
+    } else if (currentActive && !keepIds.has(currentActive)) {
+      activeNames.value = '';
+    }
+  };
+
+  upsertLogs(getWebsocketLogs());
+
+  const stop = websocketSubject.subscribe((data: WebsocketLog[]) => {
+    upsertLogs(data);
+  });
+
+  // 展开项变化时刷新 collapse 高度缓存（小程序端必须手动调用，否则内容高度可能为 0）
+  watch(
+    () => getActiveNameList().join('|'),
+    () => {
+      // #ifdef MP
+      nextTick(() => collapseRef.value?.resize?.());
+      // #endif
+    },
+  );
+
+  // 列表更新时，如果有已展开项（内容高度可能变化），同步刷新高度缓存
+  watch(
+    () => websocketLogMetas.value,
+    () => {
+      // #ifdef MP
+      if (getActiveNameList().length) nextTick(() => collapseRef.value?.resize?.());
+      // #endif
+    },
+    { deep: false },
+  );
+
+  onBeforeUnmount(() => {
+    stop?.unsubscribe();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .uni-collapse-content {
+    font-size: 12px;
+  }
+  ::v-deep {
+    .uni-collapse-item__title-text {
+      white-space: normal !important;
+      overflow: visible !important;
+      text-overflow: clip !important;
+      line-height: normal !important;
+      word-break: break-all !important;
+      font-size: 10px;
+      font-weight: normal;
+    }
+    .uni-collapse-item-error {
+      .uni-collapse-item__title-text {
+        color: red !important;
+      }
+    }
+    .uni-collapse-item-connecting {
+      .uni-collapse-item__title-text {
+        color: #f90 !important;
+      }
+    }
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uni-oaview",
-  "version": "1.5.02",
+  "version": "1.6.00",
   "description": "uniapp小程序组件库",
   "main": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
@@ -51,13 +51,13 @@
     "rollup-plugin-typescript2": "^0.27.2",
     "rollup-plugin-vue": "^6.0.0",
     "typescript": "^4.0.2",
-    "uniapp-log-sdk": "^1.7.2"
+    "uniapp-log-sdk": "^1.8.0"
   },
   "peerDependencies": {
     "@dcloudio/uni-ui": "^1.5.11",
     "@vueuse/core": "^9.12.0",
     "dayjs": "1.11.7",
-    "uniapp-log-sdk": "^1.7.2"
+    "uniapp-log-sdk": "^1.8.0"
   },
   "dependencies": {
     "element-china-area-data": "5.0.2"