uni-oaview 1.2.1 → 1.2.3

package/components/oa-confirm/oa-confirm.vue

@@ -72,7 +72,7 @@
       margin-top: 16px;
       color: rgba(25, 36, 44, 1);
       font-family: PingFang SC;
-      font-weight: 600;
+      font-weight: bold;
       font-size: 16px;
     }
     & > .content {

package/components/oa-modal-wrapper/oa-modal-wrapper.vue

@@ -77,8 +77,9 @@
           ref="contentRef"
           :is="currentModal.component"
           v-bind="currentModal.props"
-          @close="(result: any) => closeCurrentModal(result)"
-          @update="(props: any) => updateCurrentModalProps(props)"
+          v-on="computedEventHandlers"
+          @handle-submit="handleSubmit"
+          @close="(reason?: any) => closeCurrentModal(undefined, false, reason || 'cancel')"
         />
       </view>
     </view>
@@ -90,6 +91,7 @@
   import { onShow, onHide } from '@dcloudio/uni-app';
   import { OPEN_MODAL, CLOSE_MODAL, UPDATE_MODAL } from '../../constants';
   import type { Component } from 'vue';
+  import type { ModalBaseEvents, ModalCloseReason, ModalOptions } from '../../src/utils/create-modal';
 
   interface ModalHeaderOptions {
     /** 是否显示头部 */
@@ -116,35 +118,13 @@
     submitProps?: Record<string, any>;
   }
 
-  interface ModalOptions {
-    /** 弹框类型：center(中间) | top(顶部) | bottom(底部) | left(左侧) | right(右侧) */
-    type?: 'center' | 'top' | 'bottom' | 'left' | 'right';
-    /** 点击蒙层是否关闭弹框（已废弃，使用 isMaskClick） */
-    maskClick?: boolean;
-    /** 点击蒙层是否关闭弹框 */
-    isMaskClick?: boolean;
-    /** 是否开启打开/关闭动画 */
-    animation?: boolean;
-    /** 是否适配底部安全区 */
-    safeArea?: boolean;
-    /** 弹框背景色 */
-    backgroundColor?: string;
-    /** 蒙层背景色，默认 'rgba(0, 0, 0, 0.4)' */
-    maskBackgroundColor?: string;
-    /** 弹框圆角，默认 '16px 16px 0 0' */
-    borderRadius?: string;
-    /** 头部配置 */
-    header?: ModalHeaderOptions;
-    /** 弹框标题（当 header.title 不存在时使用） */
-    title?: string;
-    /** 内容区是否显示内边距，默认 true */
-    contentPadding?: boolean;
-    /** 内容区最大高度 */
-    maxHeight?: string;
-    /** 是否显示蒙层，默认 true */
-    showMask?: boolean;
-    /** 头部操作按钮点击回调 */
-    onHeaderAction?: (action: string, modalId: string) => void;
+  interface ModalComponentRef {
+    /** 提交方法（可选） */
+    submit?: () => Promise<any> | any;
+    /** 验证方法（可选） */
+    validate?: () => Promise<boolean>;
+    /** 重置方法（可选） */
+    reset?: () => void;
   }
 
   interface ModalInstance {
@@ -158,13 +138,36 @@
   const MAX_MODALS = 5;
   const modalStack = ref<ModalInstance[]>([]);
   const popupRef = ref<any>(null);
-  const contentRef = ref<{ submit: () => Promise<any> | any } | null>(null);
+  const contentRef = ref<ModalComponentRef | null>(null);
   const isPageAlive = ref(false);
   const isClosing = ref(false);
   const isH5 = ref(false);
 
   const currentModal = computed(() => modalStack.value[modalStack.value.length - 1] || null);
 
+  /**
+   * 计算动态事件处理器
+   * 将 options.events 中的事件处理函数动态绑定到组件
+   */
+  const computedEventHandlers = computed(() => {
+    const handlers: Record<string, Function> = {};
+
+    if (currentModal.value?.options.events) {
+      Object.entries(currentModal.value.options.events).forEach(([eventName, handler]) => {
+        if (typeof handler === 'function') {
+          handlers[eventName] = handler;
+        }
+      });
+    }
+
+    // 向后兼容：onHeaderAction 和 onClose 回调
+    if (currentModal.value?.options.onHeaderAction) {
+      handlers.onHeaderAction = currentModal.value.options.onHeaderAction;
+    }
+
+    return handlers;
+  });
+
   onShow(() => {
     isPageAlive.value = true;
     isH5.value = process.env.UNI_PLATFORM === 'h5';
@@ -182,7 +185,7 @@
     return options.header?.show !== false;
   };
 
-  const containerStyle = (options: ModalOptions) => {
+  const containerStyle = (options: ModalOptions): Record<string, string> => {
     const style: Record<string, string> = {};
     if (options.maxHeight) {
       style.maxHeight = options.maxHeight;
@@ -190,7 +193,7 @@
     return style;
   };
 
-  const bodyStyle = (options: ModalOptions) => {
+  const bodyStyle = (options: ModalOptions): Record<string, string> => {
     const style: Record<string, string> = {};
     if (options.contentPadding !== false) {
       style.padding = '16px';
@@ -232,7 +235,7 @@
     });
   };
 
-  const closeCurrentModal = (result?: any) => {
+  const closeCurrentModal = (result?: any, fromSubmit = false, closeReason: ModalCloseReason = 'cancel') => {
     if (!currentModal.value || isClosing.value) return;
 
     isClosing.value = true;
@@ -247,7 +250,21 @@
       const index = modalStack.value.findIndex((m) => m.id === modal.id);
       if (index !== -1) {
         const removed = modalStack.value.splice(index, 1)[0];
-        removed?.resolve?.(result);
+
+        // 触发 onClose 事件（兼容旧的回调方式）
+        if (modal.options.onClose) {
+          modal.options.onClose(closeReason);
+        }
+
+        // 如果有 events.onClose，也触发（新的事件方式）
+        if (modal.options.events?.onClose) {
+          modal.options.events.onClose(closeReason);
+        }
+
+        // 只有 submit 时才 resolve 触发 Promise
+        if (fromSubmit) {
+          removed?.resolve?.(result);
+        }
       }
       isClosing.value = false;
 
@@ -260,16 +277,15 @@
     }, 320);
   };
 
-  const updateCurrentModalProps = (newProps: Record<string, any>) => {
-    if (currentModal.value) {
-      Object.assign(currentModal.value.props, newProps);
-    }
-  };
-
   const handleHeaderAction = (action: string) => {
     if (currentModal.value?.options.onHeaderAction) {
       currentModal.value.options.onHeaderAction(action, currentModal.value.id);
     }
+
+    // 新的事件方式
+    if (currentModal.value?.options.events?.onHeaderAction) {
+      currentModal.value.options.events.onHeaderAction(action, currentModal.value.id);
+    }
   };
 
   const handleSubmit = async () => {
@@ -287,7 +303,7 @@
           return;
         }
 
-        closeCurrentModal(result);
+        closeCurrentModal(result, true, 'submit');
       } catch (error) {
         console.error('Submit failed:', error);
       } finally {
@@ -300,12 +316,12 @@
     if (process.env.NODE_ENV === 'development') {
       console.warn('[oa-modal-wrapper] 内容组件未暴露 submit 方法，弹窗将直接关闭');
     }
-    closeCurrentModal();
+    closeCurrentModal(undefined, true, 'submit');
   };
 
   const onPopupChange = (e: any) => {
     if (!e.show && !isClosing.value) {
-      closeCurrentModal();
+      closeCurrentModal(undefined, false, 'mask');
     }
   };
 
@@ -326,7 +342,7 @@
         popupRef.value.close();
       }
     } else if (id === currentModal.value?.id) {
-      closeCurrentModal(result);
+      closeCurrentModal(result, false, 'cancel');
     }
   };
 
@@ -334,7 +350,7 @@
     if (!isPageAlive.value) return;
     const { id, props } = params;
     if (id === currentModal.value?.id) {
-      updateCurrentModalProps(props);
+      Object.assign(currentModal.value.props, props);
     }
   };
 
@@ -345,7 +361,7 @@
   defineExpose({
     closeTopModal: () => {
       if (currentModal.value) {
-        closeCurrentModal();
+        closeCurrentModal(undefined, false, 'header');
         return true;
       }
       return false;
@@ -422,7 +438,7 @@
 
   .header-title {
     font-size: 16px;
-    font-weight: 600;
+    font-weight: bold;
     color: #19242c;
     line-height: 22px;
   }

package/components/oa-toast/oa-toast.vue

@@ -74,7 +74,7 @@
       margin-top: 16px;
       color: rgba(25, 36, 44, 1);
       font-family: PingFang SC;
-      font-weight: 600;
+      font-weight: bold;
       font-size: 16px;
     }
     & > .content {

package/components/oa-vconsole/awesome-display-info.vue

@@ -8,10 +8,10 @@
 
 <script lang="ts" setup>
   import { formatJson } from './utils';
-  defineProps({
-    log: {
-      type: [Object, String, Boolean, Number, Array],
-      required: true,
-    },
-  });
+
+  interface Props {
+    log: any;
+  }
+
+  defineProps<Props>();
 </script>

package/components/oa-vconsole/console.vue

@@ -10,7 +10,10 @@
 <script lang="ts" setup>
   import { onBeforeUnmount, ref } from 'vue';
   import { consoleSubject, getConsoleLogs } from 'uniapp-log-sdk';
-  const logConvert = (items: any[]) =>
+
+  const MAX_CONSOLE_LOGS = 500;
+
+  const logConvert = (items: any[]): string =>
     items.reduce((prev, current, index) => {
       try {
         prev +=
@@ -18,14 +21,18 @@
             ? JSON.stringify(current)
             : current + '' + (index === items.length - 1 ? '' : ',');
       } catch (e) {
-        prev + current;
+        prev += current;
       }
       return prev;
     }, '');
-  const consoleLogs = ref<string[]>(getConsoleLogs().map(logConvert));
+
+  const consoleLogs = ref<string[]>(getConsoleLogs().slice(-MAX_CONSOLE_LOGS).map(logConvert));
+
   const stop = consoleSubject.subscribe((data: any) => {
-    consoleLogs.value = data.map(logConvert);
+    const converted = data.slice(-MAX_CONSOLE_LOGS).map(logConvert);
+    consoleLogs.value = converted;
   });
+
   onBeforeUnmount(() => {
     stop?.unsubscribe();
   });

package/components/oa-vconsole/error.vue

@@ -11,10 +11,26 @@
 <script lang="ts" setup>
   import { ref, onBeforeUnmount } from 'vue';
   import { errorSubject, getErrorLogs } from 'uniapp-log-sdk';
-  const errorLogs = ref<Record<string, any>[]>([...new Set(getErrorLogs()?.map((item) => item.join(';')))]);
+
+  const MAX_ERROR_LOGS = 100;
+
+  const errorLogs = ref<Record<string, any>[]>([
+    ...new Set(
+      getErrorLogs()
+        ?.slice(-MAX_ERROR_LOGS)
+        .map((item: any) => item.join(';')),
+    ),
+  ]);
+
   const stop = errorSubject.subscribe((data: Record<string, any>[]) => {
-    errorLogs.value = [...new Set(data?.map((item) => item.join(';')))];
+    const unique = [...new Set(data?.map((item: any) => item.join(';')))];
+    if (unique.length > MAX_ERROR_LOGS) {
+      errorLogs.value = unique.slice(-MAX_ERROR_LOGS);
+    } else {
+      errorLogs.value = unique;
+    }
   });
+
   onBeforeUnmount(() => {
     stop?.unsubscribe();
   });

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

@@ -18,17 +18,35 @@
   import { ref, onBeforeUnmount } from 'vue';
   import awesomeDisplayInfo from './awesome-display-info.vue';
   import { nativeEventSubject, getNativeEventLogs } from 'uniapp-log-sdk';
-  const nativeEventLogs = ref<Record<string, any>[]>(getNativeEventLogs());
-  const stop = nativeEventSubject.subscribe((data) => {
-    nativeEventLogs.value = data;
+
+  interface NativeEventLog {
+    key: string;
+    params: any;
+    response: any;
+    startTime: number;
+    endTime: number;
+  }
+
+  const MAX_NATIVE_EVENT_LOGS = 50;
+
+  const nativeEventLogs = ref<NativeEventLog[]>(getNativeEventLogs().slice(-MAX_NATIVE_EVENT_LOGS));
+
+  const stop = nativeEventSubject.subscribe((data: NativeEventLog[]) => {
+    if (data.length > MAX_NATIVE_EVENT_LOGS) {
+      nativeEventLogs.value = data.slice(-MAX_NATIVE_EVENT_LOGS);
+    } else {
+      nativeEventLogs.value = data;
+    }
   });
-  const getTitle = (log: any) => {
+
+  const getTitle = (log: NativeEventLog): string => {
     const { startTime, endTime, key } = log;
     if (startTime && endTime) {
       return `${key}；${(endTime - startTime) / 1000}s`;
     }
     return key;
   };
+
   onBeforeUnmount(() => {
     stop?.unsubscribe();
   });

package/components/oa-vconsole/network.vue

@@ -1,25 +1,27 @@
 <template>
   <uni-collapse>
     <uni-collapse-item
-      v-for="log in networkLogs"
+      v-for="(log, index) in networkLogs"
       :title="getTitle(log)"
       :key="log.request.url + log.response?.data?.errno"
-      :class="{ 'uni-collapse-item-failed': log.response?.statusCode !== 200 || log.response?.data?.errno !== 0 }"
+      :class="{
+        'uni-collapse-item-failed': log.response && (log.response.statusCode !== 200 || log.response.data?.errno !== 0),
+      }"
     >
-      <view style="font-size: 10px">
-        <view style="word-break: break-all; padding: 0 15px">
+      <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: 0 15px">
+        <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: 0 15px">
+        <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: 0 15px">
+        <view style="word-break: break-all; padding: 8px 0">
           <text :selectable="true" style="font-weight: bolder">响应数据：</text>
           <awesome-display-info :log="log.response" />
         </view>
@@ -32,17 +34,45 @@
   import { ref, onBeforeUnmount } from 'vue';
   import awesomeDisplayInfo from './awesome-display-info.vue';
   import { networkSubject, getNetworkLogs } from 'uniapp-log-sdk';
-  const networkLogs = ref<{ request: any; response: any; startTime: number; endTime: number }[]>(getNetworkLogs());
-  const stop = networkSubject.subscribe((data) => {
-    networkLogs.value = data;
+
+  interface NetworkLog {
+    request: any;
+    response: any;
+    startTime: number;
+    endTime: number;
+  }
+
+  const MAX_NETWORK_LOGS = 100;
+
+  const networkLogs = ref<NetworkLog[]>(getNetworkLogs().slice(-MAX_NETWORK_LOGS));
+
+  const stop = networkSubject.subscribe((data: NetworkLog[]) => {
+    if (data.length > MAX_NETWORK_LOGS) {
+      networkLogs.value = data.slice(-MAX_NETWORK_LOGS);
+    } else {
+      networkLogs.value = data;
+    }
   });
-  const getTitle = (log: any) => {
+
+  const getTitle = (log: NetworkLog): string => {
     const { startTime, endTime, request } = log;
-    if (startTime && endTime) {
-      return `${request.url}；${(endTime - startTime) / 1000}s`;
-    }
-    return request.url;
+    const timeStr = formatTime(startTime);
+    const duration = endTime && startTime ? `${((endTime - startTime) / 1000).toFixed(2)}s` : 'pending';
+    return `[${timeStr}] ${request.url}；${duration}`;
   };
+
+  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}`;
+  };
+
   onBeforeUnmount(() => {
     stop?.unsubscribe();
   });

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

@@ -5,7 +5,7 @@
         styleType="text"
         :values="list"
         :current="current"
-        @clickItem="(e:any) => (current = e.currentIndex)"
+        @clickItem="handleTabClick"
       ></uni-segmented-control>
       <view style="height: calc(100% - 48px); overflow-y: auto; padding: 8px">
         <template v-if="current === 0">
@@ -51,24 +51,38 @@
   import Storage from './storage.vue';
   import Console from './console.vue';
   import System from './system.vue';
-  const popupRef = ref();
+
+  interface SegmentedControlClickEvent {
+    currentIndex: number;
+  }
+
+  const popupRef = ref<any>();
   const list = ref(['console', 'network', 'event', 'error', 'storage', 'system']);
   const current = ref(0);
+
+  const handleTabClick = (e: SegmentedControlClickEvent) => {
+    current.value = e.currentIndex;
+  };
+
   const openDebug = () => {
     popupRef.value?.open('bottom');
   };
+
   const bottom = ref(200);
   const right = ref(10);
-  let pageX: number, pageY: number;
+  let pageX: number;
+  let pageY: number;
+
   const start = (e: any) => {
-    let page = e.changedTouches[0];
+    const page = e.changedTouches[0];
     pageX = page.pageX;
     pageY = page.pageY;
   };
+
   const move = (e: any) => {
-    let page = e.changedTouches[0];
-    let x = page.pageX - pageX;
-    let y = page.pageY - pageY;
+    const page = e.changedTouches[0];
+    const x = page.pageX - pageX;
+    const y = page.pageY - pageY;
     pageX = page.pageX;
     pageY = page.pageY;
     right.value = right.value - x;

package/components/oa-vconsole/storage.vue

@@ -8,17 +8,45 @@
   </uni-collapse>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, onBeforeUnmount } from 'vue';
   import awesomeDisplayInfo from './awesome-display-info.vue';
-  const storageLogs = ref<Record<string, any>[]>([]);
+
+  interface StorageItem {
+    key: string;
+    data: any;
+  }
+
+  const MAX_STORAGE_ITEMS = 50;
+
+  // 标记组件是否已挂载（用于防止异步回调导致的内存泄漏）
+  let isComponentMounted = true;
+
+  const storageLogs = ref<StorageItem[]>([]);
+
+  // 组件卸载时标记
+  onBeforeUnmount(() => {
+    isComponentMounted = false;
+  });
+
   uni.getStorageInfo({
     success: function (res) {
-      res.keys?.forEach((key) => {
+      // 如果组件已卸载，直接返回，防止内存泄漏
+      if (!isComponentMounted) return;
+
+      const keys = res.keys || [];
+      const displayKeys = keys.slice(-MAX_STORAGE_ITEMS);
+
+      displayKeys.forEach((key) => {
         storageLogs.value.push({
           key,
           data: uni.getStorageSync(key),
         });
       });
+
+      // 如果有省略的 key，在列表开头显示提示
+      if (keys.length > MAX_STORAGE_ITEMS) {
+        console.warn(`[Storage] 共有 ${keys.length} 个存储项，仅显示最近 ${MAX_STORAGE_ITEMS} 个`);
+      }
     },
   });
 </script>

package/components/oa-vconsole/utils.ts

@@ -1,9 +1,19 @@
-export const formatJson = (data: any, indent = 0) => {
+const MAX_DEPTH = 10;
+const MAX_ARRAY_LENGTH = 10;
+const MAX_STRING_LENGTH = 300;
+
+interface RichTextNode {
+  type: string;
+  text: string;
+}
+
+export const formatJson = (data: any, indent = 0): RichTextNode[] => {
   const indentStr = ' '.repeat(indent);
 
-  // 防止死循环，限制最大递归深度
-  if (indent > 100) {
-    return [{ type: 'text', text: 'Error: Maximum recursion depth exceeded.' }];
+  // 防止死循环，限制最大递归深度（indent 每层增加 4，所以深度 = indent / 4）
+  const currentDepth = Math.floor(indent / 4);
+  if (currentDepth > MAX_DEPTH) {
+    return [{ type: 'text', text: '...' }];
   }
 
   if (Array.isArray(data)) {
@@ -15,32 +25,46 @@ export const formatJson = (data: any, indent = 0) => {
   }
 };
 
-const formatArray = (data: any[], indent: number, indentStr: string) => {
+const formatArray = (data: any[], indent: number, indentStr: string): RichTextNode[] => {
   if (data.length === 0) {
     return [{ type: 'text', text: '[]' }];
   }
 
-  let formatted = [{ type: 'text', text: '[\n' }];
-  data.forEach((item, index) => {
-    formatted.push({ type: 'text', text: indentStr + ' '.repeat(2) });
-    formatted.push(...formatJson(item, indent + 2));
-    if (index < data.length - 1) {
+  let formatted: RichTextNode[] = [{ type: 'text', text: '[\n' }];
+
+  // 如果数组长度超过限制，只显示前 MAX_ARRAY_LENGTH 个
+  const displayLength = Math.min(data.length, MAX_ARRAY_LENGTH);
+  const hasOmitted = data.length > MAX_ARRAY_LENGTH;
+
+  data.slice(0, displayLength).forEach((item, index) => {
+    formatted.push({ type: 'text', text: indentStr + ' '.repeat(4) });
+    formatted.push(...formatJson(item, indent + 4));
+    if (index < displayLength - 1) {
       formatted.push({ type: 'text', text: ',\n' });
     } else {
       formatted.push({ type: 'text', text: '\n' });
     }
   });
+
+  // 如果有省略的元素，显示提示
+  if (hasOmitted) {
+    formatted.push({
+      type: 'text',
+      text: indentStr + `... (共 ${data.length} 个，显示 ${displayLength} 个)\n`,
+    });
+  }
+
   formatted.push({ type: 'text', text: indentStr + ']' });
 
   return formatted;
 };
 
-const formatObject = (data: Record<string, any>, indent: number, indentStr: string) => {
-  let formatted = [{ type: 'text', text: '{\n' }];
+const formatObject = (data: Record<string, any>, indent: number, indentStr: string): RichTextNode[] => {
+  let formatted: RichTextNode[] = [{ type: 'text', text: '{\n' }];
   const keys = Object.keys(data);
   keys.forEach((key, index) => {
-    formatted.push({ type: 'text', text: indentStr + ' '.repeat(2) + key + ': ' });
-    formatted.push(...formatJson(data[key], indent + 2));
+    formatted.push({ type: 'text', text: indentStr + ' '.repeat(4) + key + ': ' });
+    formatted.push(...formatJson(data[key], indent + 4));
     if (index < keys.length - 1) {
       formatted.push({ type: 'text', text: ',\n' });
     }
@@ -50,8 +74,17 @@ const formatObject = (data: Record<string, any>, indent: number, indentStr: stri
   return formatted;
 };
 
-const formatPrimitive = (data: any) => {
+const formatPrimitive = (data: any): RichTextNode[] => {
   if (typeof data === 'string') {
+    // 字符串超过长度限制时截断
+    if (data.length > MAX_STRING_LENGTH) {
+      return [
+        {
+          type: 'text',
+          text: `"${data.slice(0, MAX_STRING_LENGTH)}..." (长度 ${data.length})`,
+        },
+      ];
+    }
     return [{ type: 'text', text: `"${data}"` }];
   } else {
     return [{ type: 'text', text: String(data) }];

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _mp_rt1_vue___Ref from 'vue';
-import { Component, App } from 'vue';
+import { Component, Plugin } from 'vue';
 
 /**
  * 上报APP启动小程序的时候的入参
@@ -74,6 +74,18 @@ declare function createDebounceFn(callback: (...params: any[]) => void, time: nu
  */
 declare function getTempFilePathForCookie(url: string, cookie?: string): Promise<string>;
 
+/** 弹框关闭原因类型 */
+type ModalCloseReason = 'submit' | 'cancel' | 'mask' | 'header';
+/** 基础事件接口 - 所有弹框都应该支持 */
+interface ModalBaseEvents {
+    /** 弹框关闭时触发 */
+    onClose?: (reason: ModalCloseReason) => void;
+}
+/** 头部事件接口 */
+interface ModalHeaderEvents {
+    /** 头部操作按钮点击回调 */
+    onHeaderAction?: (action: string, modalId: string) => void;
+}
 interface ModalHeaderOptions {
     /** 是否显示头部 */
     show?: boolean;
@@ -98,7 +110,7 @@ interface ModalHeaderOptions {
     /** 提交按钮的属性 */
     submitProps?: Record<string, any>;
 }
-interface ModalOptions {
+interface ModalOptions<E extends ModalBaseEvents = ModalBaseEvents> {
     /** 弹框类型：center(中间) | top(顶部) | bottom(底部) | left(左侧) | right(右侧) */
     type?: 'center' | 'top' | 'bottom' | 'left' | 'right';
     /** 点击蒙层是否关闭弹框（已废弃，使用 isMaskClick） */
@@ -125,16 +137,22 @@ interface ModalOptions {
     maxHeight?: string;
     /** 是否显示蒙层，默认 true */
     showMask?: boolean;
-    /** 头部操作按钮点击回调 */
+    /** 内容组件的事件回调对象 */
+    events?: E & Record<string, (...args: any[]) => void>;
+    /** 头部操作按钮点击回调（已废弃，使用 events.onHeaderAction） */
     onHeaderAction?: (action: string, modalId: string) => void;
+    /** 弹框关闭回调（已废弃，使用 events.onClose） */
+    onClose?: (reason?: ModalCloseReason) => void;
 }
-interface CreateModalReturn {
-    /** 订阅弹框关闭事件，获取返回结果 */
-    subscribe: (callback: (result: any) => void) => CreateModalReturn;
+interface CreateModalReturn<E extends ModalBaseEvents = ModalBaseEvents> extends Promise<any> {
+    /** 监听特定事件 */
+    on<K extends keyof E>(event: K, callback: E[K] extends (...args: infer Args) => void ? (...args: Args) => void : never): this;
+    /** 订阅弹框关闭事件，获取返回结果（向后兼容） */
+    subscribe(callback: (result: any) => void): this;
     /** 关闭弹框 */
-    close: (result?: any) => void;
+    close(result?: any): void;
     /** 更新弹框内容组件的 props */
-    updateProps: (props: Record<string, any>) => void;
+    updateProps(props: Record<string, any>): void;
     /** Promise then 方法 */
     then: Promise<any>['then'];
     /** Promise catch 方法 */
@@ -143,12 +161,32 @@ interface CreateModalReturn {
 /**
  * 函数式打开弹框
  * @param component 弹框内容组件
- * @param options 弹框配置
+ * @param options 弹框配置和内容组件属性
  * @returns 弹框控制器
+ *
+ * @example
+ * ```ts
+ * interface UserFormEvents extends ModalBaseEvents {
+ *   onValidationError?: (errors: Record<string, string>) => void
+ *   onFieldChange?: (field: string, value: any) => void
+ * }
+ *
+ * createModal<UserFormEvents>(UserForm, {
+ *   title: '编辑用户',
+ *   props: { userId: '123' },
+ *   events: {
+ *     onValidationError: (errors) => console.log(errors),
+ *     onFieldChange: (field, value) => console.log(field, value),
+ *     onClose: (reason) => console.log('关闭原因:', reason)
+ *   }
+ * })
+ *   .on('onValidationError', (errors) => { ... })
+ *   .then((result) => console.log('最终结果:', result))
+ * ```
  */
-declare function createModal(component: Component, options?: ModalOptions & {
+declare function createModal<E extends ModalBaseEvents = ModalBaseEvents>(component: Component, options?: ModalOptions<E> & {
     props?: Record<string, any>;
-}): CreateModalReturn;
+}): CreateModalReturn<E>;
 /**
  * 关闭所有弹框
  */
@@ -281,9 +319,7 @@ declare function useCookieTempFileUrl(url: string): {
     tempUrl: _mp_rt1_vue___Ref<string>;
 };
 
-declare const _default: {
-    install: (app: App<Element>) => void;
-};
+declare const plugin: Plugin;
 /**
  * 向客户端获取数据
  * @param eventName  事件名称
@@ -293,4 +329,4 @@ declare const _default: {
  */
 declare function getDataByApp(eventName: string, params: Record<string, any>, immediate?: boolean): Promise<any>;
 
-export { CreateModalReturn, Message, MessageBox, ModalHeaderOptions, ModalOptions, RouteMethodName, VersionCheckRuntimeOptions, VersionCheckRuntimeState, VersionCheckSource, VersionCheckTriggerContext, closeAllModals, compareVersions, createDebounceFn, createModal, createVersionCheckRuntime, _default as default, getAppVersion, getDataByApp, getTempFilePathForCookie, isCurrentVersionHigher, sendLaunchAppParamsLog, useCookieTempFileUrl, versionCheckRuntime };
+export { CreateModalReturn, Message, MessageBox, ModalBaseEvents, ModalCloseReason, ModalHeaderEvents, ModalHeaderOptions, ModalOptions, RouteMethodName, VersionCheckRuntimeOptions, VersionCheckRuntimeState, VersionCheckSource, VersionCheckTriggerContext, closeAllModals, compareVersions, createDebounceFn, createModal, createVersionCheckRuntime, plugin as default, getAppVersion, getDataByApp, getTempFilePathForCookie, isCurrentVersionHigher, sendLaunchAppParamsLog, useCookieTempFileUrl, versionCheckRuntime };

package/dist/index.esm.js

@@ -741,8 +741,28 @@ function __rest(s, e) {
 /**
  * 函数式打开弹框
  * @param component 弹框内容组件
- * @param options 弹框配置
+ * @param options 弹框配置和内容组件属性
  * @returns 弹框控制器
+ *
+ * @example
+ * ```ts
+ * interface UserFormEvents extends ModalBaseEvents {
+ *   onValidationError?: (errors: Record<string, string>) => void
+ *   onFieldChange?: (field: string, value: any) => void
+ * }
+ *
+ * createModal<UserFormEvents>(UserForm, {
+ *   title: '编辑用户',
+ *   props: { userId: '123' },
+ *   events: {
+ *     onValidationError: (errors) => console.log(errors),
+ *     onFieldChange: (field, value) => console.log(field, value),
+ *     onClose: (reason) => console.log('关闭原因:', reason)
+ *   }
+ * })
+ *   .on('onValidationError', (errors) => { ... })
+ *   .then((result) => console.log('最终结果:', result))
+ * ```
  */
 function createModal(component) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -751,6 +771,7 @@ function createModal(component) {
   var promise = new Promise(function (resolve, reject) {
     promiseResolve = resolve;
   });
+  var eventListeners = new Map();
   var props = options.props,
     modalOptions = __rest(options, ["props"]);
   // 发送打开事件
@@ -764,6 +785,13 @@ function createModal(component) {
     }
   });
   return {
+    on: function on(event, callback) {
+      if (!eventListeners.has(event)) {
+        eventListeners.set(event, new Set());
+      }
+      eventListeners.get(event).add(callback);
+      return this;
+    },
     subscribe: function subscribe(callback) {
       promise.then(function (result) {
         return callback === null || callback === void 0 ? void 0 : callback(result);
@@ -3887,7 +3915,7 @@ var install = function install(app) {
     }
   });
 };
-var index = {
+var plugin = {
   install: install
 };
 /**
@@ -3920,4 +3948,4 @@ function getDataByApp(eventName, params) {
   });
 }
 
-export { Message, MessageBox, closeAllModals, compareVersions, createDebounceFn, createModal, createVersionCheckRuntime, index as default, getAppVersion, getDataByApp, getTempFilePathForCookie, isCurrentVersionHigher, sendLaunchAppParamsLog, useCookieTempFileUrl, versionCheckRuntime };
+export { Message, MessageBox, closeAllModals, compareVersions, createDebounceFn, createModal, createVersionCheckRuntime, plugin as default, getAppVersion, getDataByApp, getTempFilePathForCookie, isCurrentVersionHigher, sendLaunchAppParamsLog, useCookieTempFileUrl, versionCheckRuntime };

package/package.json

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

package/src/index.ts

@@ -1,10 +1,10 @@
-import { App } from 'vue';
+import type { App, Plugin } from 'vue';
 
 import { sendLaunchAppParamsLog } from './utils';
 export * from './utils';
 export * from './composables';
 
-const install = (app: App<Element>) => {
+const install = (app: App) => {
   app.mixin({
     onLaunch(params: any) {
       sendLaunchAppParamsLog(params);
@@ -12,10 +12,12 @@ const install = (app: App<Element>) => {
   });
 };
 
-export default {
+const plugin: Plugin = {
   install,
 };
 
+export default plugin;
+
 /**
  * 向客户端获取数据
  * @param eventName  事件名称

package/src/utils/create-modal.ts

@@ -1,6 +1,21 @@
 import type { Component } from 'vue';
 import { OPEN_MODAL, CLOSE_MODAL, UPDATE_MODAL } from '../../constants';
 
+/** 弹框关闭原因类型 */
+export type ModalCloseReason = 'submit' | 'cancel' | 'mask' | 'header';
+
+/** 基础事件接口 - 所有弹框都应该支持 */
+export interface ModalBaseEvents {
+  /** 弹框关闭时触发 */
+  onClose?: (reason: ModalCloseReason) => void;
+}
+
+/** 头部事件接口 */
+export interface ModalHeaderEvents {
+  /** 头部操作按钮点击回调 */
+  onHeaderAction?: (action: string, modalId: string) => void;
+}
+
 export interface ModalHeaderOptions {
   /** 是否显示头部 */
   show?: boolean;
@@ -26,7 +41,7 @@ export interface ModalHeaderOptions {
   submitProps?: Record<string, any>;
 }
 
-export interface ModalOptions {
+export interface ModalOptions<E extends ModalBaseEvents = ModalBaseEvents> {
   /** 弹框类型：center(中间) | top(顶部) | bottom(底部) | left(左侧) | right(右侧) */
   type?: 'center' | 'top' | 'bottom' | 'left' | 'right';
   /** 点击蒙层是否关闭弹框（已废弃，使用 isMaskClick） */
@@ -53,19 +68,33 @@ export interface ModalOptions {
   maxHeight?: string;
   /** 是否显示蒙层，默认 true */
   showMask?: boolean;
-  /** 头部操作按钮点击回调 */
+  /** 内容组件的事件回调对象 */
+  events?: E & Record<string, (...args: any[]) => void>;
+  /** 头部操作按钮点击回调（已废弃，使用 events.onHeaderAction） */
   onHeaderAction?: (action: string, modalId: string) => void;
+  /** 弹框关闭回调（已废弃，使用 events.onClose） */
+  onClose?: (reason?: ModalCloseReason) => void;
 }
 
-export interface CreateModalReturn {
-  /** 订阅弹框关闭事件，获取返回结果 */
-  subscribe: (callback: (result: any) => void) => CreateModalReturn;
+export interface CreateModalReturn<E extends ModalBaseEvents = ModalBaseEvents> extends Promise<any> {
+  /** 监听特定事件 */
+  on<K extends keyof E>(
+    event: K,
+    callback: E[K] extends (...args: infer Args) => void ? (...args: Args) => void : never,
+  ): this;
+
+  /** 订阅弹框关闭事件，获取返回结果（向后兼容） */
+  subscribe(callback: (result: any) => void): this;
+
   /** 关闭弹框 */
-  close: (result?: any) => void;
+  close(result?: any): void;
+
   /** 更新弹框内容组件的 props */
-  updateProps: (props: Record<string, any>) => void;
+  updateProps(props: Record<string, any>): void;
+
   /** Promise then 方法 */
   then: Promise<any>['then'];
+
   /** Promise catch 方法 */
   catch: Promise<any>['catch'];
 }
@@ -73,13 +102,33 @@ export interface CreateModalReturn {
 /**
  * 函数式打开弹框
  * @param component 弹框内容组件
- * @param options 弹框配置
+ * @param options 弹框配置和内容组件属性
  * @returns 弹框控制器
+ *
+ * @example
+ * ```ts
+ * interface UserFormEvents extends ModalBaseEvents {
+ *   onValidationError?: (errors: Record<string, string>) => void
+ *   onFieldChange?: (field: string, value: any) => void
+ * }
+ *
+ * createModal<UserFormEvents>(UserForm, {
+ *   title: '编辑用户',
+ *   props: { userId: '123' },
+ *   events: {
+ *     onValidationError: (errors) => console.log(errors),
+ *     onFieldChange: (field, value) => console.log(field, value),
+ *     onClose: (reason) => console.log('关闭原因:', reason)
+ *   }
+ * })
+ *   .on('onValidationError', (errors) => { ... })
+ *   .then((result) => console.log('最终结果:', result))
+ * ```
  */
-export function createModal(
+export function createModal<E extends ModalBaseEvents = ModalBaseEvents>(
   component: Component,
-  options: ModalOptions & { props?: Record<string, any> } = {},
-): CreateModalReturn {
+  options: ModalOptions<E> & { props?: Record<string, any> } = {},
+): CreateModalReturn<E> {
   const id = `modal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
   let promiseResolve: (value: any) => void;
@@ -90,6 +139,8 @@ export function createModal(
     promiseReject = reject;
   });
 
+  const eventListeners = new Map<string, Set<Function>>();
+
   const { props, ...modalOptions } = options;
 
   // 发送打开事件
@@ -104,6 +155,14 @@ export function createModal(
   });
 
   return {
+    on(event: string, callback: Function) {
+      if (!eventListeners.has(event)) {
+        eventListeners.set(event, new Set());
+      }
+      eventListeners.get(event)!.add(callback);
+      return this;
+    },
+
     subscribe(callback: (result: any) => void) {
       promise.then((result) => callback?.(result));
       return this;
@@ -119,7 +178,7 @@ export function createModal(
 
     then: promise.then.bind(promise),
     catch: promise.catch.bind(promise),
-  };
+  } as CreateModalReturn<E>;
 }
 
 /**