@jiangood/open-admin 1.0.0

package/src/framework/utils/ColorsUtils.ts

@@ -0,0 +1,378 @@
+/**
+ * forked form https://github.com/quasarframework/quasar
+ */
+
+// 正则表达式用于匹配 rgba 格式的字符串
+const reRGBA = /^rgb(a)?\((\d{1,3}),(\d{1,3}),(\d{1,3}),?([01]?\.?\d*?)?\)$/
+
+/**
+ * RGB 颜色接口
+ * r, g, b 的范围是 [0, 255]
+ * a 的范围是 [0, 100] (百分比)
+ */
+export interface RGB {
+    r: number
+    g: number
+    b: number
+    a?: number // 可选的 alpha (百分比)
+}
+
+/**
+ * HSV 颜色接口
+ * h 的范围是 [0, 360]
+ * s, v 的范围是 [0, 100] (百分比)
+ * a 的范围是 [0, 100] (百分比)
+ */
+export interface HSV {
+    h: number
+    s: number
+    v: number
+    a?: number // 可选的 alpha (百分比)
+}
+
+/**
+ * 颜色工具类，提供颜色相关的转换和操作方法。
+ */
+export class ColorsUtils {
+    /**
+     * 将 RGB 颜色对象转换为十六进制字符串 (包含可选的 alpha 值).
+     * @param color RGB 颜色对象
+     * @returns 十六进制颜色字符串, 如 '#RRGGBB' 或 '#RRGGBBAA'
+     */
+    static rgbToHex (color: RGB): string {
+        let { r, g, b, a } = color
+        const alpha = a !== void 0
+
+        r = Math.round(r)
+        g = Math.round(g)
+        b = Math.round(b)
+
+        if (
+            r > 255
+            || g > 255
+            || b > 255
+            || (alpha && a! > 100)
+        ) {
+            throw new TypeError('Expected 3 numbers below 256 (and optionally one below 100)')
+        }
+
+        const alphaHex = alpha
+            ? (Math.round(255 * a! / 100) | 1 << 8).toString(16).slice(1)
+            : ''
+
+        return '#' + ((b | g << 8 | r << 16) | 1 << 24).toString(16).slice(1) + alphaHex
+    }
+
+    /**
+     * 将 RGB 颜色对象转换为 rgb() 或 rgba() 字符串.
+     * @param color RGB 颜色对象
+     * @returns rgb() 或 rgba() 颜色字符串
+     */
+    static rgbToString (color: RGB): string {
+        const { r, g, b, a } = color
+        return `rgb${a !== void 0 ? 'a' : ''}(${r},${g},${b}${a !== void 0 ? ',' + (a / 100) : ''})`
+    }
+
+    /**
+     * 将十六进制颜色字符串转换为 RGB 颜色对象.
+     * 支持 '#RGB', '#RGBA', '#RRGGBB', '#RRGGBBAA' 格式.
+     * @param hex 十六进制颜色字符串
+     * @returns RGB 颜色对象
+     */
+    static hexToRgb (hex: string): RGB {
+        if (typeof hex !== 'string') {
+            throw new TypeError('Expected a string')
+        }
+
+        hex = hex.replace(/^#/, '')
+
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+        } else if (hex.length === 4) {
+            // 确保 alpha 也被扩展
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]
+        }
+
+        const num = parseInt(hex, 16)
+
+        return hex.length > 6
+            ? { r: num >> 24 & 255, g: num >> 16 & 255, b: num >> 8 & 255, a: Math.round((num & 255) / 2.55) }
+            : { r: num >> 16, g: num >> 8 & 255, b: num & 255 }
+    }
+
+    /**
+     * 将 HSV 颜色对象转换为 RGB 颜色对象.
+     * @param color HSV 颜色对象
+     * @returns RGB 颜色对象
+     */
+    static hsvToRgb (color: HSV): RGB {
+        let r: number = 0, g: number = 0, b: number = 0
+        let { h, s, v, a } = color
+        s = s / 100
+        v = v / 100
+
+        h = h / 360
+        const
+            i = Math.floor(h * 6),
+            f = h * 6 - i,
+            p = v * (1 - s),
+            q = v * (1 - f * s),
+            t = v * (1 - (1 - f) * s)
+
+        switch (i % 6) {
+            case 0:
+                r = v
+                g = t
+                b = p
+                break
+            case 1:
+                r = q
+                g = v
+                b = p
+                break
+            case 2:
+                r = p
+                g = v
+                b = t
+                break
+            case 3:
+                r = p
+                g = q
+                b = v
+                break
+            case 4:
+                r = t
+                g = p
+                b = v
+                break
+            case 5:
+                r = v
+                g = p
+                b = q
+                break
+        }
+
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255),
+            a
+        }
+    }
+
+    /**
+     * 将 RGB 颜色对象转换为 HSV 颜色对象.
+     * @param color RGB 颜色对象
+     * @returns HSV 颜色对象
+     */
+    static rgbToHsv (color: RGB): HSV {
+        const { r, g, b, a } = color
+        const
+            max = Math.max(r, g, b),
+            min = Math.min(r, g, b),
+            d = max - min,
+            s = (max === 0 ? 0 : d / max),
+            v = max / 255
+        let h: number
+
+        switch (max) {
+            case min:
+                h = 0
+                break
+            case r:
+                h = (g - b) + d * (g < b ? 6 : 0)
+                h /= 6 * d
+                break
+            case g:
+                h = (b - r) + d * 2
+                h /= 6 * d
+                break
+            case b:
+                h = (r - g) + d * 4
+                h /= 6 * d
+                break
+            default:
+                h = 0 // 理论上不会走到这里
+        }
+
+        return {
+            h: Math.round(h * 360),
+            s: Math.round(s * 100),
+            v: Math.round(v * 100),
+            a
+        }
+    }
+
+    /**
+     * 将颜色文本 (hex 或 rgb/rgba) 转换为 RGB 颜色对象.
+     * @param str 颜色字符串
+     * @returns RGB 颜色对象
+     */
+    static textToRgb (str: string): RGB {
+        if (typeof str !== 'string') {
+            throw new TypeError('Expected a string')
+        }
+
+        const color = str.replace(/ /g, '')
+
+        const m = reRGBA.exec(color)
+
+        if (m === null) {
+            return this.hexToRgb(color)
+        }
+
+        const rgb: RGB = {
+            r: Math.min(255, parseInt(m[2], 10)),
+            g: Math.min(255, parseInt(m[3], 10)),
+            b: Math.min(255, parseInt(m[4], 10))
+        }
+
+        if (m[1]) {
+            const alpha = parseFloat(m[5])
+            // alpha 值在 [0, 1]，需要转换为 [0, 100]
+            rgb.a = Math.min(1, isNaN(alpha) === true ? 1 : alpha) * 100
+        }
+
+        return rgb
+    }
+
+    /**
+     * 调亮或调暗颜色.
+     * percent > 0 为调亮 (lighten), percent < 0 为调暗 (darken).
+     * @param color 颜色字符串
+     * @param percent 百分比偏移量, 范围通常为 [-100, 100]
+     * @returns 新的十六进制颜色字符串
+     */
+    static lighten (color: string, percent: number): string {
+        if (typeof color !== 'string') {
+            throw new TypeError('Expected a string as color')
+        }
+        if (typeof percent !== 'number') {
+            throw new TypeError('Expected a numeric percent')
+        }
+
+        const rgb = this.textToRgb(color)
+        const
+            t = percent < 0 ? 0 : 255,
+            p = Math.abs(percent) / 100,
+            R = rgb.r,
+            G = rgb.g,
+            B = rgb.b
+
+        return '#' + (
+            0x1000000 + (Math.round((t - R) * p) + R) * 0x10000
+            + (Math.round((t - G) * p) + G) * 0x100
+            + (Math.round((t - B) * p) + B)
+        ).toString(16).slice(1)
+    }
+
+    /**
+     * 计算颜色的亮度 (Luminosity).
+     * @param color 颜色字符串或 RGB 对象
+     * @returns 颜色的亮度值 (0 到 1)
+     */
+    static luminosity (color: string | RGB): number {
+        if (typeof color !== 'string' && (!color || color.r === void 0)) {
+            throw new TypeError('Expected a string or a {r, g, b} object as color')
+        }
+
+        const
+            rgb = typeof color === 'string' ? this.textToRgb(color) : color,
+            r = rgb.r / 255,
+            g = rgb.g / 255,
+            b = rgb.b / 255,
+            // 标准化 R, G, B 值
+            R = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4),
+            G = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4),
+            B = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
+
+        // W3C WCAG 2.0 亮度公式
+        return 0.2126 * R + 0.7152 * G + 0.0722 * B
+    }
+
+    /**
+     * 计算颜色的感知亮度 (Brightness).
+     * @param color 颜色字符串或 RGB 对象
+     * @returns 颜色的感知亮度值 (0 到 255)
+     */
+    static brightness (color: string | RGB): number {
+        if (typeof color !== 'string' && (!color || color.r === void 0)) {
+            throw new TypeError('Expected a string or a {r, g, b} object as color')
+        }
+
+        const rgb = typeof color === 'string'
+            ? this.textToRgb(color)
+            : color
+
+        // 根据人眼感知度的加权平均 (常用公式)
+        return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000
+    }
+
+    /**
+     * 将前景颜色 (fgColor) 混合到背景颜色 (bgColor) 上。
+     * @param fgColor 前景颜色字符串或 RGB 对象
+     * @param bgColor 背景颜色字符串或 RGB 对象
+     * @returns 如果 fgColor 是字符串则返回十六进制字符串，否则返回 RGB 对象
+     */
+    static blend (fgColor: string | RGB, bgColor: string | RGB): string | RGB {
+        if (typeof fgColor !== 'string' && (!fgColor || fgColor.r === void 0)) {
+            throw new TypeError('Expected a string or a {r, g, b[, a]} object as fgColor')
+        }
+
+        if (typeof bgColor !== 'string' && (!bgColor || bgColor.r === void 0)) {
+            throw new TypeError('Expected a string or a {r, g, b[, a]} object as bgColor')
+        }
+
+        const
+            rgb1 = typeof fgColor === 'string' ? this.textToRgb(fgColor) : fgColor,
+            r1 = rgb1.r / 255,
+            g1 = rgb1.g / 255,
+            b1 = rgb1.b / 255,
+            a1 = rgb1.a !== void 0 ? rgb1.a / 100 : 1, // 前景 alpha (0-1)
+            rgb2 = typeof bgColor === 'string' ? this.textToRgb(bgColor) : bgColor,
+            r2 = rgb2.r / 255,
+            g2 = rgb2.g / 255,
+            b2 = rgb2.b / 255,
+            a2 = rgb2.a !== void 0 ? rgb2.a / 100 : 1, // 背景 alpha (0-1)
+
+            // Porter-Duff Over 运算符
+            a = a1 + a2 * (1 - a1), // 混合后的总 alpha
+            r = Math.round(((r1 * a1 + r2 * a2 * (1 - a1)) / a) * 255),
+            g = Math.round(((g1 * a1 + g2 * a2 * (1 - a1)) / a) * 255),
+            b = Math.round(((b1 * a1 + b2 * a2 * (1 - a1)) / a) * 255)
+
+        const ret: RGB = { r, g, b, a: Math.round(a * 100) } // a 转换回 (0-100)
+
+        // 如果前景颜色输入是字符串，则返回十六进制字符串，否则返回 RGB 对象
+        return typeof fgColor === 'string'
+            ? this.rgbToHex(ret)
+            : ret
+    }
+
+    /**
+     * 改变颜色字符串的 alpha 透明度。
+     * @param color 颜色字符串 (如 '#RRGGBB' 或 'rgb(r,g,b)')
+     * @param offset alpha 的偏移量, 范围 [-1, 1]。正值增加透明度，负值减少透明度。
+     * @returns 带有新 alpha 值的十六进制颜色字符串 (#RRGGBBAA)
+     */
+    static changeAlpha (color: string, offset: number): string {
+        if (typeof color !== 'string') {
+            throw new TypeError('Expected a string as color')
+        }
+
+        if (offset === void 0 || offset < -1 || offset > 1) {
+            throw new TypeError('Expected offset to be between -1 and 1')
+        }
+
+        const { r, g, b, a } = this.textToRgb(color)
+        // 当前 alpha (0-1)
+        const alpha = a !== void 0 ? a / 100 : 1 // 如果没有 alpha，默认为 1 (100%)
+
+        // 新的 alpha (0-100)
+        const newAlpha = Math.round(Math.min(1, Math.max(0, alpha + offset)) * 100)
+
+        return this.rgbToHex({
+            r, g, b, a: newAlpha
+        })
+    }
+}

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; // 元素宽度
+    }
+}