uni-oaview 1.2.4 → 1.3.0

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

@@ -0,0 +1,54 @@
+<template>
+  <view class="dev-tools">
+    <view class="section">
+      <text class="section-title">快捷入口</text>
+      <view class="page-item" @click="handleNavigateToMock">
+        <text class="page-title">Mock 页面</text>
+        <text class="page-path">pages/mock/index</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+  const handleNavigateToMock = () => {
+    uni.navigateTo({ url: '/pages/mock/index' });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .dev-tools {
+    font-size: 12px;
+  }
+
+  .section {
+    margin-bottom: 16px;
+  }
+
+  .section-title {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .page-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 12px 16px;
+    background: #f5f5f5;
+    border-radius: 8px;
+  }
+
+  .page-title {
+    font-weight: 500;
+    color: #333;
+  }
+
+  .page-path {
+    font-size: 10px;
+    color: #999;
+  }
+</style>

package/components/oa-vconsole/network.vue

@@ -1,65 +1,86 @@
 <template>
-  <uni-collapse>
+  <uni-collapse ref="collapseRef" v-model="activeNames">
     <uni-collapse-item
-      v-for="(log, index) in networkLogs"
-      :title="getTitle(log)"
-      :key="log.request.url + log.response?.data?.errno"
+      v-for="meta in networkLogMetas"
+      :key="meta.id"
+      :name="meta.id"
+      :title="meta.title"
       :class="{
-        'uni-collapse-item-failed': log.response && (log.response.statusCode !== 200 || log.response.data?.errno !== 0),
+        'uni-collapse-item-failed': meta.failed,
+        'uni-collapse-item-pending': meta.pending,
       }"
     >
       <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">状态码：</text>
-          {{ log.request.method }} {{ log.response?.statusCode }}
-        </view>
-        <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
-          <text :selectable="true" style="font-weight: bolder">请求头：</text>
-          <awesome-display-info :log="log.request.header" />
-        </view>
-        <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
-          <text :selectable="true" style="font-weight: bolder">请求参数：</text>
-          <awesome-display-info :log="log.request.data" />
-        </view>
-        <view style="word-break: break-all; padding: 8px 0">
-          <text :selectable="true" style="font-weight: bolder">响应数据：</text>
-          <awesome-display-info :log="log.response" />
+          {{ meta.method }} {{ meta.statusCode ?? '-' }}
         </view>
+        <template v-if="isExpanded(meta.id)">
+          <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+            <text :selectable="true" style="font-weight: bolder">请求头：</text>
+            <awesome-display-info :log="getNetworkLogDetail(meta.id)?.request?.header" />
+          </view>
+          <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+            <text :selectable="true" style="font-weight: bolder">请求参数：</text>
+            <awesome-display-info :log="getNetworkLogDetail(meta.id)?.request?.data" />
+          </view>
+          <view style="word-break: break-all; padding: 8px 0">
+            <text :selectable="true" style="font-weight: bolder">响应数据：</text>
+            <awesome-display-info :log="getNetworkLogDetail(meta.id)?.response" />
+          </view>
+        </template>
       </view>
     </uni-collapse-item>
   </uni-collapse>
 </template>
 
 <script lang="ts" setup>
-  import { ref, onBeforeUnmount } from 'vue';
+  import { nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
   import awesomeDisplayInfo from './awesome-display-info.vue';
   import { networkSubject, getNetworkLogs } from 'uniapp-log-sdk';
 
+  interface NetworkLogRequest {
+    url: string;
+    method?: string;
+    header?: unknown;
+    data?: unknown;
+  }
+
+  interface NetworkLogResponseData {
+    errno?: number;
+    [key: string]: unknown;
+  }
+
+  interface NetworkLogResponse {
+    statusCode?: number;
+    data?: NetworkLogResponseData;
+    [key: string]: unknown;
+  }
+
   interface NetworkLog {
-    request: any;
-    response: any;
+    request: NetworkLogRequest;
+    response?: NetworkLogResponse;
     startTime: number;
-    endTime: number;
+    endTime?: number;
   }
 
-  const MAX_NETWORK_LOGS = 100;
+  interface NetworkLogMeta {
+    id: string;
+    title: string;
+    method: string;
+    statusCode: number | null;
+    pending: boolean;
+    failed: boolean;
+  }
 
-  const networkLogs = ref<NetworkLog[]>(getNetworkLogs().slice(-MAX_NETWORK_LOGS));
+  const MAX_NETWORK_LOGS = 100;
 
-  const stop = networkSubject.subscribe((data: NetworkLog[]) => {
-    if (data.length > MAX_NETWORK_LOGS) {
-      networkLogs.value = data.slice(-MAX_NETWORK_LOGS);
-    } else {
-      networkLogs.value = data;
-    }
-  });
+  const collapseRef = ref<{ resize?: () => void } | null>(null);
+  // uni-collapse 的 v-model 在不同模式下可能是 string 或 string[]
+  const activeNames = ref<string[] | string>([]);
 
-  const getTitle = (log: NetworkLog): string => {
-    const { startTime, endTime, request } = log;
-    const timeStr = formatTime(startTime);
-    const duration = endTime && startTime ? `${((endTime - startTime) / 1000).toFixed(2)}s` : 'pending';
-    return `[${timeStr}] ${request.url}；${duration}`;
-  };
+  const networkLogDetailMap = shallowRef<Map<string, NetworkLog>>(new Map());
+  const networkLogMetas = ref<NetworkLogMeta[]>([]);
 
   const formatTime = (timestamp: number): string => {
     const date = new Date(timestamp);
@@ -73,6 +94,99 @@
     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
   };
 
+  const buildNetworkLogId = (log: NetworkLog): string => {
+    const url = log.request?.url ?? '';
+    const method = log.request?.method ?? '';
+    const startTime = log.startTime ?? 0;
+    return `${startTime}|${method}|${url}`;
+  };
+
+  const buildMetaFromLog = (log: NetworkLog): NetworkLogMeta => {
+    const { startTime, endTime, request, response } = log;
+    const timeStr = formatTime(startTime);
+    const duration = endTime && startTime ? `${((endTime - startTime) / 1000).toFixed(2)}s` : 'pending';
+    const statusCode = typeof response?.statusCode === 'number' ? response.statusCode : null;
+    const errno = response?.data?.errno;
+    const pending = !endTime;
+    const failed = !pending && Boolean(response && (statusCode !== 200 || (typeof errno === 'number' && errno !== 0)));
+    const url = request?.url ?? '';
+    const method = request?.method ?? '';
+    return {
+      id: buildNetworkLogId(log),
+      title: `[${timeStr}] ${url}；${duration}`,
+      method,
+      statusCode,
+      pending,
+      failed,
+    };
+  };
+
+  const getActiveNameList = (): string[] => {
+    const value = activeNames.value;
+    return Array.isArray(value) ? value : value ? [value] : [];
+  };
+
+  const isExpanded = (id: string): boolean => getActiveNameList().includes(id);
+
+  const getNetworkLogDetail = (id: string): NetworkLog | null => {
+    return networkLogDetailMap.value.get(id) ?? null;
+  };
+
+  const upsertLogs = (logs: NetworkLog[]) => {
+    const nextLogs = logs.slice(-MAX_NETWORK_LOGS);
+    const detailMap = networkLogDetailMap.value;
+
+    const nextMetas: NetworkLogMeta[] = [];
+    for (const log of nextLogs) {
+      const id = buildNetworkLogId(log);
+      detailMap.set(id, log);
+      nextMetas.push(buildMetaFromLog(log));
+    }
+
+    networkLogMetas.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(getNetworkLogs());
+
+  const stop = networkSubject.subscribe((data: NetworkLog[]) => {
+    upsertLogs(data);
+  });
+
+  // 展开项变化时刷新 collapse 高度缓存（小程序端必须手动调用，否则内容高度可能为 0）
+  watch(
+    () => getActiveNameList().join('|'),
+    () => {
+      // #ifdef MP
+      nextTick(() => collapseRef.value?.resize?.());
+      // #endif
+    },
+  );
+
+  // 列表更新时，如果有已展开项（内容高度可能变化），同步刷新高度缓存
+  watch(
+    () => networkLogMetas.value,
+    () => {
+      // #ifdef MP
+      if (getActiveNameList().length) nextTick(() => collapseRef.value?.resize?.());
+      // #endif
+    },
+    { deep: false },
+  );
+
   onBeforeUnmount(() => {
     stop?.unsubscribe();
   });
@@ -84,11 +198,11 @@
   }
   ::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; /* 允许单词内换行 */
+      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;
     }
@@ -97,5 +211,10 @@
         color: red !important;
       }
     }
+    .uni-collapse-item-pending {
+      .uni-collapse-item__title-text {
+        color: #f90 !important;
+      }
+    }
   }
 </style>

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

@@ -1,12 +1,19 @@
 <template>
   <uni-popup ref="popupRef" background-color="#fff">
     <view style="height: 500px; background-color: white; width: 100vw">
-      <uni-segmented-control
-        styleType="text"
-        :values="list"
-        :current="current"
-        @clickItem="handleTabClick"
-      ></uni-segmented-control>
+      <scroll-view scroll-x class="tab-scroll" :show-scrollbar="false">
+        <view class="tab-container">
+          <view
+            v-for="(item, index) in list"
+            :key="item"
+            class="tab-item"
+            :class="{ active: current === index }"
+            @click="handleTabClick(index)"
+          >
+            <text class="tab-text">{{ item }}</text>
+          </view>
+        </view>
+      </scroll-view>
       <view style="height: calc(100% - 48px); overflow-y: auto; padding: 8px">
         <template v-if="current === 0">
           <Console />
@@ -26,6 +33,9 @@
         <template v-if="current === 5">
           <System />
         </template>
+        <template v-if="current === 6">
+          <DevTools />
+        </template>
       </view>
     </view>
   </uni-popup>
@@ -51,17 +61,14 @@
   import Storage from './storage.vue';
   import Console from './console.vue';
   import System from './system.vue';
-
-  interface SegmentedControlClickEvent {
-    currentIndex: number;
-  }
+  import DevTools from './dev-tools.vue';
 
   const popupRef = ref<any>();
-  const list = ref(['console', 'network', 'event', 'error', 'storage', 'system']);
+  const list = ref(['console', 'network', 'event', 'error', 'storage', 'system', 'dev-tools']);
   const current = ref(0);
 
-  const handleTabClick = (e: SegmentedControlClickEvent) => {
-    current.value = e.currentIndex;
+  const handleTabClick = (index: number) => {
+    current.value = index;
   };
 
   const openDebug = () => {
@@ -103,4 +110,49 @@
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
     background-color: white;
   }
+
+  .tab-scroll {
+    height: 48px;
+    white-space: nowrap;
+  }
+
+  .tab-container {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    padding: 0 8px;
+  }
+
+  .tab-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 6px;
+    height: 100%;
+    flex-shrink: 0;
+    position: relative;
+
+    &.active {
+      .tab-text {
+        color: #007aff;
+        font-weight: 500;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 6px;
+        right: 6px;
+        height: 2px;
+        background-color: #007aff;
+      }
+    }
+  }
+
+  .tab-text {
+    font-size: 14px;
+    color: #666;
+    white-space: nowrap;
+  }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uni-oaview",
-  "version": "1.2.04",
+  "version": "1.3.00",
   "description": "uniapp小程序组件库",
   "main": "dist/index.esm.js",
   "typings": "dist/index.d.ts",