@jiangood/open-admin 1.0.0-beta.5

package/src/framework/pages/LoginPage.less

@@ -0,0 +1,53 @@
+.login-page {
+  background-size: cover;
+  background-image: url("/admin/public/login_bg.jpg");
+  background-repeat: no-repeat;
+  background-position: bottom;
+
+  width: 100vw;
+  height: 100vh;
+
+
+  .login-content {
+    padding: 40px;
+    background: #15184b44;
+    width: 350px;
+    position: fixed;
+    right: 15%;
+    top: 20%;
+
+    .ant-form-item-label > label{
+      color: white !important;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .login-page {
+    padding-top: 30%;
+
+    .login-content {
+      width: calc(100% - 100px);
+      padding: 24px;
+      position: static;
+      margin: 0 auto;
+    }
+  }
+}
+
+
+.login-form {
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+
+
+
+.login-page h1 {
+  margin-bottom: 50px;
+  text-align: center;
+  color: white !important;
+  font-size: x-large;
+}
+

package/src/framework/pages/LoginPageUtils.ts

@@ -0,0 +1,36 @@
+import {history} from 'umi';
+import {EventBusUtils, HttpUtils, PageUtils} from "../utils";
+/**
+ * 将登录页面的公共方法提取出来，方便自定义登录页面时使用
+ */
+export class LoginPageUtils {
+
+
+    static postLogin(values) {
+        return new Promise((resolve, reject) => {
+            console.log('开始登录')
+            HttpUtils.postForm('/admin/auth/login', values).then(rs => {
+                console.log('登录结果', rs)
+                EventBusUtils.emit('loginSuccess')
+                let redirect = LoginPageUtils.getRedirect();
+                history.push(redirect)
+                resolve(rs)
+            }).catch(e => {
+                console.log('登录错误', e)
+                reject(e)
+            })
+        })
+
+    }
+
+    static getRedirect() {
+        let redirect = PageUtils.currentParams()['redirect'];
+        if (redirect) {
+            console.log('重定向参数', redirect)
+            redirect = decodeURIComponent(redirect)
+        }else {
+            redirect = '/'
+        }
+        return redirect;
+    }
+}

package/src/framework/pages/index.ts

@@ -0,0 +1,2 @@
+export * from './LoginPage'
+export * from './LoginPageUtils'

package/src/framework/utils/ArrUtils.ts

@@ -0,0 +1,229 @@
+/**
+ * 数组工具类
+ * 提供了一系列对数组进行操作的静态方法。
+ */
+export class ArrUtils {
+
+    /**
+     * 检查数组是否包含某个元素。
+     * @param arr 目标数组。
+     * @param item 要检查的元素。
+     * @returns 如果包含则返回 true，否则返回 false。
+     */
+    static contains<T>(arr: T[], item: T): boolean {
+        return arr.indexOf(item) !== -1;
+    }
+
+    /**
+     * 检查数组是否包含至少一个指定的元素。
+     * 注意：原始实现中的 this.contains(item) 逻辑错误，已修正为检查 arr 是否包含 item。
+     *
+     * @param arr 目标数组。
+     * @param items 要检查的一个或多个元素。
+     * @returns 如果包含任意一个元素则返回 true，否则返回 false。
+     */
+    static containsAny<T>(arr: T[], ...items: T[]): boolean {
+        for (const item of items) {
+            // 这里调用自身的静态方法
+            if (ArrUtils.contains(arr, item)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * 在数组末尾添加一个元素。
+     * @param arr 目标数组。
+     * @param item 要添加的元素。
+     */
+    static add<T>(arr: T[], item: T): void {
+        arr.push(item);
+    }
+
+    /**
+     * 在数组的指定索引处添加一个元素。
+     * @param arr 目标数组。
+     * @param index 插入位置的索引。
+     * @param item 要添加的元素。
+     */
+    static addAt<T>(arr: T[], index: number, item: T): void {
+        arr.splice(index, 0, item);
+    }
+
+    /**
+     * 将另一个数组的所有元素追加到目标数组的尾部。
+     * @param arr 目标数组。
+     * @param items 要追加的元素数组。
+     */
+    static addAll<T>(arr: T[], items: T[]): void {
+        // 使用 ES6 的 spread 运算符或 push.apply 效率更高
+        arr.push(...items);
+    }
+
+    /**
+     * 移除数组指定索引处的元素。
+     * @param arr 目标数组。
+     * @param index 要移除元素的索引。
+     */
+    static removeAt<T>(arr: T[], index: number): void {
+        if (index >= 0 && index < arr.length) {
+            arr.splice(index, 1);
+        }
+    }
+
+    /**
+     * 移除数组中第一个匹配的元素。
+     * @param arr 目标数组。
+     * @param item 要移除的元素。
+     */
+    static remove<T>(arr: T[], item: T): void {
+        const index = arr.indexOf(item);
+        if (index !== -1) {
+            // 这里调用自身的静态方法
+            ArrUtils.removeAt(arr, index);
+        }
+    }
+
+    /**
+     * 清空数组。
+     * @param arr 目标数组。
+     */
+    static clear<T>(arr: T[]): void {
+        arr.length = 0;
+    }
+
+    /**
+     * 截取数组的一个子集。
+     * @param arr 目标数组。
+     * @param fromIndex 开始索引（包含）。
+     * @param toIndex 结束索引（不包含）。
+     * @returns 截取后的新数组。
+     */
+    static sub<T>(arr: T[], fromIndex?: number, toIndex?: number): T[] {
+    return arr.slice(fromIndex, toIndex);
+}
+
+/**
+ * 交换数组中两个元素的位置。
+ * @param arr 目标数组。
+ * @param item1 元素1。
+ * @param item2 元素2。
+ */
+static swap<T>(arr: T[], item1: T, item2: T): void {
+    const index1 = arr.indexOf(item1);
+    const index2 = arr.indexOf(item2);
+
+    if (index1 !== -1 && index2 !== -1) {
+    // 使用解构赋值进行交换，更简洁
+    [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
+}
+}
+
+/**
+ * 在数组的指定索引处插入一个元素（与 addAt 相同，保留以兼容原 API）。
+ * @param arr 目标数组。
+ * @param index 插入位置的索引。
+ * @param item 要插入的元素。
+ */
+static insert<T>(arr: T[], index: number, item: T): void {
+    ArrUtils.addAt(arr, index, item);
+}
+
+/**
+ * 如果元素不存在于数组中，则将其添加到数组末尾。
+ * @param arr 目标数组。
+ * @param item 要添加的元素。
+ */
+static pushIfNotExist<T>(arr: T[], item: T): void {
+    if (!ArrUtils.contains(arr, item)) {
+    arr.push(item);
+}
+}
+
+/**
+ * 将新数组中的所有元素添加到目标数组的末尾。
+ * @param arr 目标数组。
+ * @param newArr 要添加的元素数组。
+ */
+static pushAll<T>(arr: T[], newArr: T[]): void {
+    ArrUtils.addAll(arr, newArr);
+}
+
+/**
+ * 获取对象数组中某一属性值最大的对象。
+ * 使用泛型 K 约束 key 必须是 T 的属性，并确保属性值可以进行数值比较。
+ *
+ * @param arr 对象数组。
+ * @param key 用于比较的属性名。
+ * @returns 属性值最大的对象，如果数组为空则返回 undefined。
+ */
+static maxBy<T extends Record<K, any>, K extends keyof T>(
+    arr: T[],
+    key: K
+): T | undefined {
+    if (arr == null || arr.length === 0) {
+        return undefined;
+    }
+
+    let maxElement: T | undefined = undefined;
+    let maxValue: number = -Infinity;
+
+    for (const element of arr) {
+        // 运行时类型检查（虽然 TS 层面已约束 K，但值可能不是数字）
+        const value = element[key];
+
+        // 确保比较的是数字类型
+        if (typeof value === 'number' && value > maxValue) {
+            maxValue = value;
+            maxElement = element;
+        } else if (typeof value !== 'number') {
+            // 可选：如果遇到非数字，可以跳过或根据需求抛出错误/记录警告
+            // console.warn(`Element with key ${String(key)} has non-numeric value: ${value}`);
+        }
+    }
+
+    return maxElement;
+}
+
+/**
+ * 对数组进行去重。
+ * @param arr 目标数组。
+ * @returns 去重后的新数组。
+ */
+static unique<T>(arr: T[]): T[] {
+    return [...new Set(arr)];
+}
+}
+
+// 示例用法（可选）
+/*
+interface User {
+    id: number;
+    score: number;
+    name: string;
+}
+
+const users: User[] = [
+    { id: 1, score: 90, name: 'Alice' },
+    { id: 2, score: 95, name: 'Bob' },
+    { id: 3, score: 88, name: 'Charlie' },
+];
+
+const maxUser = ArrUtil.maxBy(users, 'score');
+console.log(maxUser); // { id: 2, score: 95, name: 'Bob' }
+
+const numbers = [1, 2, 2, 3, 4, 1];
+const uniqueNumbers = ArrUtil.unique(numbers);
+console.log(uniqueNumbers); // [1, 2, 3, 4]
+
+let list = [10, 20];
+ArrUtil.register(list, 30);
+console.log(list); // [10, 20, 30]
+
+ArrUtil.remove(list, 20);
+console.log(list); // [10, 30]
+
+ArrUtil.addAll(list, [40, 50]);
+console.log(list); // [10, 30, 40, 50]
+*/

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
+        })
+    }
+}