uni-oaview 1.3.0 → 1.4.0

package/components/oa-vconsole/audio.vue

@@ -0,0 +1,196 @@
+<template>
+  <uni-collapse ref="collapseRef" v-model="activeNames">
+    <uni-collapse-item
+      v-for="meta in audioLogMetas"
+      :key="meta.id"
+      :title="meta.title"
+      :class="{
+        'uni-collapse-item-error': meta.isError,
+      }"
+    >
+      <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">实例ID：</text>
+          {{ meta.instanceId }}
+        </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>
+            {{ meta.src || '-' }}
+          </view>
+          <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+            <text :selectable="true" style="font-weight: bolder">时长：</text>
+            {{ meta.duration > 0 ? meta.duration.toFixed(2) : '-' }}s
+          </view>
+          <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+            <text :selectable="true" style="font-weight: bolder">当前位置：</text>
+            {{ meta.currentTime.toFixed(2) }}s
+          </view>
+          <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+            <text :selectable="true" style="font-weight: bolder">操作：</text>
+            {{ meta.action }}
+          </view>
+          <view style="word-break: break-all; padding: 8px 0">
+            <text :selectable="true" style="font-weight: bolder">详情：</text>
+            <awesome-display-info :log="getAudioLogDetail(meta.id)?.data" />
+          </view>
+        </template>
+      </view>
+    </uni-collapse-item>
+  </uni-collapse>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick, onBeforeUnmount, ref, shallowRef } from 'vue';
+  import awesomeDisplayInfo from './awesome-display-info.vue';
+  import { audioSubject, getAudioLogs } from 'uniapp-log-sdk';
+
+  interface AudioLog {
+    id: number;
+    type: string;
+    src: string;
+    action: string;
+    data?: any;
+    timestamp: number;
+    duration: number;
+    currentTime: number;
+    paused: boolean;
+  }
+
+  interface AudioLogMeta {
+    id: string;
+    title: string;
+    instanceId: number;
+    src: string;
+    duration: number;
+    currentTime: number;
+    action: string;
+    isError: boolean;
+  }
+
+  const MAX_AUDIO_LOGS = 100;
+
+  const collapseRef = ref<{ resize?: () => void } | null>(null);
+  const activeNames = ref<string[] | string>([]);
+
+  const audioLogDetailMap = shallowRef<Map<string, AudioLog>>(new Map());
+  const audioLogMetas = ref<AudioLogMeta[]>([]);
+
+  const formatTime = (timestamp: number): string => {
+    const date = new Date(timestamp);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    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 `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
+  };
+
+  const buildAudioLogId = (log: AudioLog): string => {
+    return `${log.id}-${log.timestamp}`;
+  };
+
+  const buildMetaFromLog = (log: AudioLog): AudioLogMeta => {
+    const { id, src, duration, currentTime, action, timestamp, data } = log;
+    const timeStr = formatTime(timestamp);
+    const isError = action === 'error';
+    return {
+      id: buildAudioLogId(log),
+      title: `[${timeStr}] ${action} - ${src || '(未指定)'} [${duration > 0 ? duration.toFixed(2) : '-'}s]`,
+      instanceId: id,
+      src,
+      duration,
+      currentTime,
+      action,
+      isError,
+    };
+  };
+
+  const getActiveNameList = (): string[] => {
+    const value = activeNames.value;
+    return Array.isArray(value) ? value : value ? [value] : [];
+  };
+
+  const isExpanded = (id: string): boolean => getActiveNameList().includes(id);
+
+  const getAudioLogDetail = (id: string): AudioLog | null => {
+    return audioLogDetailMap.value.get(id) ?? null;
+  };
+
+  const upsertLogs = (logs: AudioLog[]) => {
+    const nextLogs = logs.slice(-MAX_AUDIO_LOGS);
+    const detailMap = audioLogDetailMap.value;
+
+    const nextMetas: AudioLogMeta[] = [];
+    for (const log of nextLogs) {
+      const id = buildAudioLogId(log);
+      detailMap.set(id, log);
+      nextMetas.push(buildMetaFromLog(log));
+    }
+
+    audioLogMetas.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(getAudioLogs());
+
+  const stop = audioSubject.subscribe((data: AudioLog[]) => {
+    upsertLogs(data);
+  });
+
+  // 展开项变化时刷新 collapse 高度缓存（小程序端必须手动调用，否则内容高度可能为 0）
+  const unwatch = ref(() => {});
+  unwatch.value = (() => {
+    let lastActiveNames = getActiveNameList().join('|');
+    return () => {
+      const currentActiveNames = getActiveNameList().join('|');
+      if (currentActiveNames !== lastActiveNames) {
+        // #ifdef MP
+        nextTick(() => collapseRef.value?.resize?.());
+        // #endif
+        lastActiveNames = currentActiveNames;
+      }
+    };
+  })();
+
+  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;
+      }
+    }
+  }
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <uni-popup ref="popupRef" background-color="#fff">
+  <uni-popup class="oa-debug-popup" ref="popupRef" background-color="none">
     <view style="height: 500px; background-color: white; width: 100vw">
       <scroll-view scroll-x class="tab-scroll" :show-scrollbar="false">
         <view class="tab-container">
@@ -34,6 +34,9 @@
           <System />
         </template>
         <template v-if="current === 6">
+          <Audio />
+        </template>
+        <template v-if="current === 7">
           <DevTools />
         </template>
       </view>
@@ -61,10 +64,11 @@
   import Storage from './storage.vue';
   import Console from './console.vue';
   import System from './system.vue';
+  import Audio from './audio.vue';
   import DevTools from './dev-tools.vue';
 
   const popupRef = ref<any>();
-  const list = ref(['console', 'network', 'event', 'error', 'storage', 'system', 'dev-tools']);
+  const list = ref(['console', 'network', 'event', 'error', 'storage', 'system', 'audio', 'dev-tools']);
   const current = ref(0);
 
   const handleTabClick = (index: number) => {
@@ -98,11 +102,14 @@
 </script>
 
 <style lang="scss" scoped>
+  .oa-debug-popup {
+    z-index: 10000 !important;
+  }
   .debug-button {
     width: 40px;
     height: 40px;
     position: fixed;
-    z-index: 1000;
+    z-index: 10000;
     border-radius: 50%;
     display: flex;
     justify-content: center;

package/package.json

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