@jiangood/open-admin 1.0.0-beta.5

package/src/framework/utils/DateUtils.ts

@@ -0,0 +1,187 @@
+import {StringUtils} from './StringUtils';
+
+export class DateUtils {
+
+    public static convertTypeToFormat(type) {
+        if (type === 'YEAR') {
+            type = 'YYYY'
+        } else if (type === 'YEAR_MONTH') {
+            type = 'YYYY-MM'
+        } else if (type === 'YEAR_QUARTER') {
+            type = 'YYYY-QQ'
+        } else if (type === 'DAY') {
+            type = 'YYYY-MM-DD'
+        }
+        return type;
+    }
+
+    public static year(date: Date): number {
+        return date.getFullYear();
+    }
+
+    /**
+     * 获取月份，自动补0
+     * @param date
+     * @returns {string}
+     */
+    public static month(date: Date): string {
+        const n = date.getMonth() + 1; // （注意月份从0开始，所以要加1）
+        return StringUtils.pad(n, 2);
+    }
+
+    /**
+     * 获取日期，
+     * @param date
+     */
+    public static date(date: Date): string {
+        return StringUtils.pad(date.getDate(), 2);
+    }
+
+    /**
+     * 小时，24进制
+     * @param date
+     * @returns {string}
+     */
+    public static hour(date: Date): string {
+        return StringUtils.pad(date.getHours(), 2);
+    }
+
+    public static minute(date: Date): string {
+        return StringUtils.pad(date.getMinutes(), 2);
+    }
+
+    public static second(date: Date): string {
+        return StringUtils.pad(date.getSeconds(), 2);
+    }
+
+    public static formatDate(d: Date): string {
+        return this.year(d) + '-' + this.month(d) + '-' + this.date(d);
+    }
+
+    public static formatTime(d: Date): string {
+        return this.hour(d) + ':' + this.minute(d) + ':' + this.second(d);
+    }
+
+    public static formatDateTime(d: Date): string {
+        return this.formatDate(d) + ' ' + this.formatTime(d);
+    }
+
+    /**
+     *
+     * @param d
+     * @returns {string} 2020年1月30日
+     */
+    public static formatDateCn(d: Date): string {
+        return this.year(d) + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日';
+    }
+
+    /***
+     当前时间, 如 2022-01-23 11:59:59
+     */
+    public static now(): string {
+        return this.formatDateTime(new Date());
+    }
+
+    /**
+     * 当前日期 ，如 2022-01-23
+     *
+     */
+    public static today(): string {
+        return this.formatDate(new Date());
+    }
+
+    public static thisYear(): number {
+        return this.year(new Date());
+    }
+
+    public static thisMonth(): string {
+        return this.month(new Date());
+    }
+
+    /**
+     * 显示友好时间，如 2小时前，1周前
+     * @param pastDate 日期, 支持Date，String，Number
+     */
+    public static friendlyTime(pastDate: Date | string | number): string | undefined {
+        if (pastDate == null) {
+            return undefined;
+        }
+        if (!(pastDate instanceof Date)) {
+            pastDate = new Date(pastDate);
+        }
+
+        const currentDate = new Date();
+        let elapsedMilliseconds = currentDate.getTime() - pastDate.getTime();
+        const suffix = elapsedMilliseconds > 0 ? '前' : '后';
+        elapsedMilliseconds = Math.abs(elapsedMilliseconds);
+
+        // 计算年、月、日、小时、分钟和秒的差值
+        const elapsedYears = Math.floor(elapsedMilliseconds / (1000 * 60 * 60 * 24 * 365));
+        const elapsedMonths = Math.floor(elapsedMilliseconds / (1000 * 60 * 60 * 24 * 30));
+        const elapsedDays = Math.floor(elapsedMilliseconds / (1000 * 60 * 60 * 24));
+        const elapsedHours = Math.floor(elapsedMilliseconds / (1000 * 60 * 60));
+        const elapsedMinutes = Math.floor(elapsedMilliseconds / (1000 * 60));
+        const elapsedSeconds = Math.floor(elapsedMilliseconds / 1000);
+
+        // 根据差值选择友好的格式
+        if (elapsedYears >= 1) {
+            return `${elapsedYears} 年${suffix}`;
+        }
+        if (elapsedMonths >= 1) {
+            return `${elapsedMonths} 个月${suffix}`;
+        }
+        if (elapsedDays >= 7) {
+            const weeks = Math.floor(elapsedDays / 7);
+            return `${weeks} 周${suffix}`;
+        }
+        if (elapsedDays >= 1) {
+            const days = elapsedDays;
+            return `${days} 天${suffix}`;
+        }
+        if (elapsedHours >= 1) {
+            return `${elapsedHours} 小时${suffix}`;
+        }
+        if (elapsedMinutes >= 1) {
+            return `${elapsedMinutes} 分钟${suffix}`;
+        }
+        return `${elapsedSeconds} 秒${suffix}`;
+    }
+
+    /**
+     * 总共耗时, 如 3分5秒
+     * @param time 数字 （Date.getTime）
+     * @returns {string|null}
+     */
+    public static friendlyTotalTime(time: number | string | null): string | null {
+        if (time == null || time === '-') {
+            return null;
+        }
+
+        let seconds: number;
+        if (typeof time === 'string') {
+            seconds = parseInt(time, 10) / 1000;
+        } else {
+            seconds = time / 1000;
+        }
+
+        seconds = Math.floor(seconds);
+
+        if (seconds < 60) {
+            return seconds + '秒';
+        }
+
+        let min = seconds / 60;
+        seconds = seconds % 60;
+
+        min = Math.floor(min);
+        seconds = Math.floor(seconds);
+
+        return min + '分' + seconds + '秒';
+    }
+
+    public static beginOfMonth(): string {
+        const d = new Date();
+        d.setDate(1);
+        return this.formatDate(d);
+    }
+}

package/src/framework/utils/DeviceUtils.ts

@@ -0,0 +1,46 @@
+/**
+ * 包含了常用的浏览器和网络工具函数。
+ */
+export class DeviceUtils {
+
+    /**
+     * 判断当前设备是否为移动设备 (包括 Windows Phone, Android, iOS)。
+     * @returns {boolean} 如果是移动设备返回 true，否则返回 false。
+     */
+    public static isMobileDevice(): boolean {
+        // 使用可选链操作符来安全地访问 navigator 和 window 上的属性，
+        // 以防在非浏览器环境中运行 (尽管这个函数主要用于浏览器环境)。
+        const userAgent = navigator?.userAgent || navigator?.vendor || (window as any)?.opera || '';
+
+        // 1. Windows Phone 必须放在 Android 之前，因为它的 UA 也可能包含 "Android"
+        if (/windows phone/i.test(userAgent)) {
+            return true;
+        }
+
+        // 2. Android devices
+        if (/android/i.test(userAgent)) {
+            return true;
+        }
+
+        // 3. iOS devices
+        // window.MSStream 检查是为了排除旧版 IE 上的触控设备，确保只检测移动设备。
+        // 对于 TypeScript，需要断言 window.MSStream 可能不存在。
+        if (/iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream) {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * 根据当前页面的协议 (http/https) 和主机名构造 WebSocket 的基础 URL (ws/wss)。
+     * @returns {string} WebSocket 的基础 URL，例如 "ws://localhost:8080" 或 "wss://example.com"。
+     */
+    public static getWebsocketBaseUrl(): string {
+        // 使用 location.protocol 来确定是 ws 还是 wss。
+        const protocol: string = location.protocol === 'http:' ? 'ws:' : 'wss:';
+
+        // location.host 包含主机名和端口号 (如果有)。
+        return `${protocol}//${location.host}`;
+    }
+}

package/src/framework/utils/DomUtils.ts

@@ -0,0 +1,50 @@
+/**
+ * @fileoverview DOM 操作工具类
+ */
+
+/**
+ * 封装了获取元素位置和尺寸的工具方法。
+ */
+export class DomUtils {
+    /**
+     * 获取元素相对于视口的偏移量（top 和 left）。
+     *
+     * @param el 目标 DOM 元素或 window 对象。
+     * @returns 包含 top 和 left 属性的对象。
+     */
+    static offset(el: Element | Window): { top: number; left: number } {
+        if (el === window) {
+            return { top: 0, left: 0 };
+        }
+
+        // 类型断言，确保 el 是 Element 类型，以便调用 getBoundingClientRect
+        const element = el as Element;
+        const { top, left } = element.getBoundingClientRect();
+
+        return { top, left };
+    }
+
+    /**
+     * 获取元素的外部高度（如果是 window，则返回视口高度）。
+     *
+     * @param el 目标 DOM 元素或 window 对象。
+     * @returns 元素的高度（以像素为单位）。
+     */
+    static height(el: Element | Window): number {
+        return el === window
+            ? window.innerHeight // 视口高度
+            : (el as Element).getBoundingClientRect().height; // 元素高度
+    }
+
+    /**
+     * 获取元素的外部宽度（如果是 window，则返回视口宽度）。
+     *
+     * @param el 目标 DOM 元素或 window 对象。
+     * @returns 元素的宽度（以像素为单位）。
+     */
+    static width(el: Element | Window): number {
+        return el === window
+            ? window.innerWidth // 视口宽度
+            : (el as Element).getBoundingClientRect().width; // 元素宽度
+    }
+}

package/src/framework/utils/EventBusUtils.ts

@@ -0,0 +1,144 @@
+/**
+ * 事件总线工具类 (Static Utility Class 模式) - 所有方法和状态均为静态
+ * forked form https://github.com/scottcorgan/tiny-emitter
+ */
+
+// --- 内部类型定义 ---
+
+/** 定义事件回调的结构 */
+interface StaticEventEntry<T extends any[]> {
+    fn: (...args: T) => void;
+    ctx?: any;
+}
+
+/** 定义用于 once 的特殊回调，用于在 off 时查找原始回调 */
+type StaticOnceCallback<T extends any[]> = ((...args: T) => void) & {
+    __callback?: ((...args: T) => void);
+};
+
+/** 定义事件映射的类型 */
+interface StaticEventStack {
+    [key: string]: StaticEventEntry<any[]>[];
+}
+
+/**
+ * 静态事件总线工具类
+ * 所有方法和状态均通过静态属性直接访问。
+ */
+export class EventBusUtils {
+    // 静态内部状态
+    private static __stack: StaticEventStack = {};
+
+    /**
+     * 静态工具类，无需实例化，因此构造函数私有化防止意外创建实例。
+     */
+    private constructor() {
+        // 静态工具类，无须实现
+    }
+
+    /**
+     * 注册事件监听器
+     * @param name 事件名称
+     * @param callback 事件回调函数
+     * @param ctx 回调函数的 this 上下文
+     */
+    public static on<T extends any[] = []>(
+        name: string,
+        callback: (...args: T) => void,
+        ctx?: any
+    ): void { // 静态方法通常不返回 this
+        if (!EventBusUtils.__stack[name]) {
+            EventBusUtils.__stack[name] = [];
+        }
+
+        (EventBusUtils.__stack[name] as StaticEventEntry<T>[]).push({
+            fn: callback as (...args: any[]) => void,
+            ctx
+        });
+    }
+
+    /**
+     * 注册只触发一次的事件监听器
+     * @param name 事件名称
+     * @param callback 事件回调函数
+     * @param ctx 回调函数的 this 上下文
+     */
+    public static once<T extends any[] = []>(
+        name: string,
+        callback: (...args: T) => void,
+        ctx?: any
+    ): void {
+        const listener: StaticOnceCallback<T> = (...args) => {
+            // 触发后立即移除
+            EventBusUtils.off(name, listener as unknown as ((...args: T) => void));
+            callback.apply(ctx, args);
+        };
+
+        // 存储原始回调，方便 off 时查找
+        listener.__callback = callback;
+
+        return EventBusUtils.on(name, listener, ctx);
+    }
+
+    /**
+     * 触发事件
+     * @param name 事件名称
+     * @param args 传递给回调函数的参数
+     */
+    public static emit<T extends any[] = []>(
+        name: string,
+        ...args: T
+    ): void {
+        console.log('触发事件：',name, args)
+        const list = EventBusUtils.__stack[name] as StaticEventEntry<T>[];
+
+        if (list !== undefined) {
+            // 使用 slice(0) 确保在回调中 off 不会影响当前循环
+            list.slice(0).forEach(entry => {
+                entry.fn.apply(entry.ctx, args);
+            });
+        }
+    }
+
+    /**
+     * 移除事件监听器
+     * @param name 事件名称
+     * @param callback 可选：要移除的特定回调函数。如果省略，则移除该事件名的所有监听器。
+     */
+    public static off<T extends any[] = []>(
+        name: string,
+        callback?: ((...args: T) => void)
+    ): void {
+        const list = EventBusUtils.__stack[name];
+
+        if (list === undefined) {
+            return;
+        }
+
+        // 移除所有监听器
+        if (callback === undefined) {
+            delete EventBusUtils.__stack[name];
+            return;
+        }
+
+        // 移除特定监听器
+        const liveEvents = list.filter(
+            entry =>
+                // 排除当前回调
+                entry.fn !== callback &&
+                // 排除 once 包装的回调，通过 __callback 匹配原始回调
+                (entry.fn as StaticOnceCallback<T>).__callback !== callback
+        );
+
+        if (liveEvents.length !== 0) {
+            EventBusUtils.__stack[name] = liveEvents;
+        } else {
+            delete EventBusUtils.__stack[name];
+        }
+    }
+}
+
+/* 推荐的使用方式：直接通过类名调用静态方法 */
+// import { EventBusUtils } from './EventBusUtils';
+// EventBusUtils.on('myStaticEvent', (data) => console.log(data));
+// EventBusUtils.emit('myStaticEvent', { status: 'ok' });

package/src/framework/utils/Logger.ts

@@ -0,0 +1,40 @@
+// logger.js
+export class Logger {
+
+    private readonly module: string;
+
+
+    constructor(module) {
+        this.module = module;
+    }
+
+    public static getLogger(module) {
+        return new Logger(module);
+    }
+
+    debug(...args) {
+        this._log( console.log, args);
+    }
+
+    info(...args) {
+        this._log( console.info, args);
+    }
+
+    warn(...args) {
+        this._log(console.warn, args);
+    }
+
+    error(...args) {
+        this._log(console.error, args);
+    }
+
+    private _log( consoleMethod, args) {
+        const time = new Date().toLocaleTimeString();
+        consoleMethod(`[${time}] [${this.module}] `, ...args);
+    }
+
+
+}
+
+
+

package/src/framework/utils/MessageUtils.tsx

@@ -0,0 +1,170 @@
+import {Form, Input, InputNumber, message, Modal} from 'antd';
+import type {ModalFuncProps} from 'antd/es/modal/interface';
+import React from 'react';
+import {MessageInstance} from "antd/lib/message/interface";
+import {HookAPI} from "antd/lib/modal/useModal";
+import {Logger} from "./Logger";
+
+
+
+/**
+ * 消息工具类 (MsgUtils)
+ * 封装了 Ant Design 的 Modal, message, 和 notification 静态方法
+ */
+export class MessageUtils {
+
+    /**
+     * 弹出 Alert 提示框
+     */
+    static alert(content: any, config?: Omit<ModalFuncProps, 'content' | 'icon' | 'onOk' | 'onCancel'>) {
+        return new Promise(resolve => {
+           this.modalApi.info({
+                title: '提示',
+                content,
+                okText: '确定',
+                onOk: (close)=>{
+                    close()
+                    resolve()
+                },
+                icon: null,
+                ...config,
+            });
+        })
+
+    }
+
+    /**
+     * 弹出 Confirm 确认框
+     */
+    static confirm(content: React.ReactNode, config?: Omit<ModalFuncProps, 'content' | 'icon' | 'onOk' | 'onCancel'>) {
+        return new Promise((resolve) => {
+            this.modalApi.confirm({
+                title: '确认操作',
+                content,
+                okText: '确定',
+                cancelText: '取消',
+                onOk: () => resolve(true),
+                onCancel: () => resolve(false),
+                ...config,
+            });
+        })
+
+    }
+
+    /**
+     * 弹出 Prompt 输入框对话框, 如果默认值是数字, 则使用 InputNumber 输入框
+     */
+    static prompt(message: React.ReactNode, initialValue?: string|number, placeholder?: string, config?: Omit<ModalFuncProps, 'content' | 'title' | 'icon' | 'onOk'>) {
+        const isNumber = typeof initialValue === 'number';
+        return new Promise((resolve) => {
+            const ref = React.createRef()
+            let element:any = isNumber ? <InputNumber placeholder={placeholder}/> : <Input placeholder={placeholder}/>;
+            const content:any = <div>
+                <div style={{marginBottom: 4}}>{message}</div>
+                <Form ref={ref}>
+                    <Form.Item name='inputValue' initialValue={initialValue}>
+                        {element}
+                    </Form.Item>
+                </Form>
+            </div>;
+            this.modalApi.confirm({
+                icon: null,
+                title: '提示',
+                content:content,
+                okText: '确定',
+                cancelText: '取消',
+                onOk: () => {
+                    const form = ref.current;
+                    const values = form.getFieldsValue()
+                    resolve(values.inputValue)
+                },
+                onCancel: () => {
+                    resolve()
+                },
+                ...config,
+            });
+        })
+    }
+
+    // --- Antd message 封装 (全局通知/Loading) ---
+
+    /**
+     * 成功消息
+     */
+    static success(content: String, duration: number = 3) {
+        if(!this.messageApi){
+            alert(content)
+            return
+        }
+        this.messageApi.success(content, duration);
+    }
+
+    /**
+     * 错误消息
+     */
+    static error(content: String, duration: number = 3) {
+        console.log('调用 MessageUtils.error',content)
+        if(!this.messageApi){
+            alert(content)
+            return
+        }
+        this.messageApi.error(content, duration);
+    }
+
+    /**
+     * 警告消息
+     */
+    static warning(content: String, duration: number = 3) {
+        if(!this.messageApi){
+            alert(content)
+            return
+        }
+        this.messageApi.warning(content, duration);
+    }
+
+    /**
+     * 通用消息
+     */
+    static info(content: React.ReactNode, duration: number = 3) {
+        if(!this.messageApi){
+            alert(content)
+            return
+        }
+        this.messageApi.info(content, duration);
+    }
+
+    /**
+     * 弹出 Loading 提示
+     */
+    static loading(content: string = '正在加载...', duration?: number) {
+         duration = duration === undefined ? 0 : duration;
+        return this.messageApi.loading(content, duration);
+    }
+
+    static config(messageApi: MessageInstance, modalApi: HookAPI) {
+        this.messageApi = messageApi;
+        this.modalApi = modalApi;
+        console.log('MessageUtils.config', messageApi, modalApi)
+    }
+
+    private static modalApi:HookAPI = null;
+    private static messageApi:MessageInstance = null;
+}
+
+/**
+ * antd6 推荐使用这个hooks，这里统一设置， 供公共layout使用
+ * @constructor
+ */
+export function MessageHolder(props){
+    const [modalApi, modalContextHolder] = Modal.useModal();
+    const [messageApi, messageContextHolder] = message.useMessage();
+
+    React.useEffect(()=>{
+        Logger.getLogger("MessageHolder").debug('Rendered')
+        MessageUtils.config(messageApi,modalApi);
+        props.onFinish()
+    },[])
+    return <>
+        {modalContextHolder} {messageContextHolder}
+    </>
+}