@jiangood/open-admin 1.0.0

package/src/framework/field-components/system/OrgTree.tsx

@@ -0,0 +1,61 @@
+import {Alert, Skeleton, Tree} from 'antd';
+import React from 'react';
+import * as Icons from '@ant-design/icons';
+import {HttpUtils} from "../../utils";
+
+
+export  class OrgTree  extends React.Component<any, any> {
+
+    state = {
+        treeDataLoading: true,
+        treeData: [],
+
+        currentOrgId: null
+    }
+
+
+    componentDidMount() {
+        HttpUtils.get('admin/sysOrg/deptTree').then(tree => {
+            this.setState({treeData: tree,treeDataLoading: false})
+        })
+    }
+
+
+    onSelectOrg = orgIds => {
+        let orgId = orgIds[0] || null;
+        this.props.onChange(orgId)
+    }
+
+
+    render() {
+        let {treeData, treeDataLoading} = this.state
+        if (treeDataLoading) {
+            return <Skeleton title='加载中...'/>
+        }
+
+        if (treeData.length === 0) {
+            return <Alert type={"warning"} message={'组织机构数据为空'}>
+            </Alert>
+        }
+
+        return <Tree
+            treeData={treeData}
+            defaultExpandAll
+            onSelect={this.onSelectOrg}
+            showIcon
+            blockNode
+            icon={item=>{
+                const icon =  Icons[item.iconName]
+                if(icon){
+                    return React.createElement(icon)
+                }
+            }}
+        >
+        </Tree>
+    }
+
+
+}
+
+
+

package/src/framework/field-components/system/RoleTree.tsx

@@ -0,0 +1,53 @@
+import {Skeleton, Tree} from 'antd';
+import React from 'react';
+import {SolutionOutlined} from '@ant-design/icons';
+import {HttpUtils} from "../../utils";
+
+
+export  class RoleTree  extends React.Component<any, any> {
+
+    state = {
+        treeDataLoading: true,
+        treeData: [],
+
+        currentOrgId: null
+    }
+
+
+    componentDidMount() {
+        HttpUtils.get('admin/sysRole/bizTree').then(tree => {
+            this.setState({treeData: tree,treeDataLoading: false})
+        })
+    }
+
+    onSelect = keys => {
+        let orgId = keys[0] || null;
+        this.props.onSelect(orgId)
+    }
+
+
+    render() {
+        let {treeData, treeDataLoading} = this.state
+        if (treeDataLoading) {
+            return <Skeleton title='加载中...'/>
+        }
+
+
+        return <Tree
+            treeData={treeData}
+            defaultExpandAll
+            onSelect={this.onSelect}
+            showIcon
+            blockNode
+            icon={item=>{
+               return <SolutionOutlined />
+            }}
+        >
+        </Tree>
+    }
+
+
+}
+
+
+

package/src/framework/field-components/system/index.ts

@@ -0,0 +1,2 @@
+export * from './OrgTree';
+export * from './RoleTree';

package/src/framework/index.ts

@@ -0,0 +1,5 @@
+export * from './components'
+export * from './utils'
+export * from './field-components'
+export * from './view-components'
+export * from './pages'

package/src/framework/pages/LoginPage.d.ts

@@ -0,0 +1,16 @@
+import React, {ReactNode} from "react";
+
+export interface LoginPageProps {
+
+    /**
+     * 表单渲染
+     * @param origForm 原始表单
+     */
+    formRender?: (originalForm: ReactNode) => ReactNode
+
+
+}
+
+export class LoginPage extends React.Component<LoginPageProps, any> {
+}
+

package/src/framework/pages/LoginPage.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {Button, Form, Input, message, Space} from 'antd';
+import {LockOutlined, SafetyCertificateOutlined, UserOutlined, WarningOutlined} from '@ant-design/icons';
+import "./LoginPage.less"
+import {MessageUtils, SysUtils} from "../utils";
+import {JSEncrypt} from "jsencrypt";
+import {LoginPageUtils} from "./LoginPageUtils";
+
+
+export class LoginPage extends React.Component {
+
+
+    state = {
+        logging: false,
+
+        siteInfo: {},
+        random: Math.random()
+    }
+
+    async componentDidMount() {
+        console.log('渲染登录页面')
+
+
+        if (localStorage.length === 0) {
+            MessageUtils.alert('站点数据缺失，刷新当前页面...')
+            window.location.reload()
+            return
+        }
+
+        const siteInfo = SysUtils.getSiteInfo()
+        this.setState({siteInfo})
+    }
+
+
+    submit = values => {
+        this.setState({logging: true})
+
+        const pubkey = this.state.siteInfo.rsaPublicKey;
+        if (!pubkey) {
+            message.error("未获取密钥，请刷新浏览器再试")
+            return
+        }
+        // 对密码加密
+        const crypt = new JSEncrypt();
+        crypt.setPublicKey(pubkey);
+        values.password = crypt.encrypt(values.password)
+
+        LoginPageUtils.postLogin(values).finally(()=>{
+            this.setState({logging: false})
+        })
+    }
+
+
+    render() {
+        const {siteInfo} = this.state
+
+        const pageStyle = {}
+        if (siteInfo.loginBackground) {
+            let url = 'admin/sysFile/preview/' + siteInfo.loginBackground;
+            pageStyle.backgroundImage = 'url("' + url + '")'
+        }
+
+        return (
+            <section className='login-page' style={pageStyle}>
+                <div className="login-content">
+                    <h1>{siteInfo.title}</h1>
+                    {this.getForm(siteInfo)}
+
+                    {this.renderFormBottom()}
+
+                </div>
+            </section>
+        );
+    }
+
+
+    getForm = siteInfo => {
+
+
+        const form = <Form
+            name="normal_login"
+            className="login-form"
+            initialValues={{remember: true}}
+            onFinish={this.submit}
+            requiredMark={false}
+            colon={false}
+        >
+
+            <Form.Item name="username" rules={[{required: true, message: '请输入用户名!'}]}>
+                <Input size='large' prefix={<UserOutlined/>} placeholder="用户名" autoComplete="off"/>
+            </Form.Item>
+            <Form.Item name="password" rules={[{required: true, message: '请输入密码!'}]}>
+                <Input autoComplete="off" prefix={<LockOutlined/>} type="password" placeholder="密码"
+                       size='large'
+                />
+            </Form.Item>
+
+
+            {siteInfo.captcha && <Form.Item name='captchaCode' rules={[{required: true}]}>
+                <Space style={{alignItems: 'center'}}>
+                    <Input size='large' placeholder='验证码' prefix={<SafetyCertificateOutlined/>}/>
+                    <img height={36}
+                         width={100}
+                         src={"/admin/auth/captchaImage?_random=" + this.state.random}
+                         onClick={() => {
+                             this.setState({random: Math.random()})
+                         }}></img>
+                </Space>
+            </Form.Item>}
+
+
+            <Form.Item style={{marginTop: 10}}>
+                <Button loading={this.state.logging} type="primary" htmlType="submit"
+                        block size='large'>
+                    登录
+                </Button>
+            </Form.Item>
+        </Form>;
+
+        if(this.props.formRender){
+            return this.props.formRender(form);
+        }
+        return form;
+    };
+
+    renderFormBottom() {
+        let siteInfo = this.state.siteInfo;
+        if (siteInfo.loginBoxBottomTip) {
+            return <div style={{color: 'white', marginTop: 50, fontSize: '14px', textAlign: 'center'}}>
+                <WarningOutlined/> {siteInfo.loginBoxBottomTip}
+            </div>
+        }
+    }
+
+}

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]
+*/