@jiangood/springboot-admin-starter 0.0.1

package/src/framework/utils/uid.js

@@ -0,0 +1,76 @@
+/**
+ * Based on the work of https://github.com/jchook/uuid-random
+ */
+
+let
+    buf,
+    bufIdx = 0
+const hexBytes = new Array(256)
+
+// Pre-calculate toString(16) for speed
+for (let i = 0; i < 256; i++) {
+    hexBytes[ i ] = (i + 0x100).toString(16).substring(1)
+}
+
+// Use best available PRNG
+const randomBytes = (() => {
+    // Node & Browser support
+    const lib = typeof crypto !== 'undefined'
+        ? crypto
+        : (
+            typeof window !== 'undefined'
+                ? window.crypto || window.msCrypto
+                : void 0
+        )
+
+    if (lib !== void 0) {
+        if (lib.randomBytes !== void 0) {
+            return lib.randomBytes
+        }
+        if (lib.getRandomValues !== void 0) {
+            return n => {
+                const bytes = new Uint8Array(n)
+                lib.getRandomValues(bytes)
+                return bytes
+            }
+        }
+    }
+
+    return n => {
+        const r = []
+        for (let i = n; i > 0; i--) {
+            r.push(Math.floor(Math.random() * 256))
+        }
+        return r
+    }
+})()
+
+// Buffer random numbers for speed
+// Reduce memory usage by decreasing this number (min 16)
+// or improve speed by increasing this number (try 16384)
+const BUFFER_SIZE = 4096
+
+
+
+export const UidUtil = {
+     uid () {
+    // Buffer some random bytes for speed
+    if (buf === void 0 || (bufIdx + 16 > BUFFER_SIZE)) {
+        bufIdx = 0
+        buf = randomBytes(BUFFER_SIZE)
+    }
+
+    const b = Array.prototype.slice.call(buf, bufIdx, (bufIdx += 16))
+    b[ 6 ] = (b[ 6 ] & 0x0f) | 0x40
+    b[ 8 ] = (b[ 8 ] & 0x3f) | 0x80
+
+    return hexBytes[ b[ 0 ] ] + hexBytes[ b[ 1 ] ]
+        + hexBytes[ b[ 2 ] ] + hexBytes[ b[ 3 ] ] + '-'
+        + hexBytes[ b[ 4 ] ] + hexBytes[ b[ 5 ] ] + '-'
+        + hexBytes[ b[ 6 ] ] + hexBytes[ b[ 7 ] ] + '-'
+        + hexBytes[ b[ 8 ] ] + hexBytes[ b[ 9 ] ] + '-'
+        + hexBytes[ b[ 10 ] ] + hexBytes[ b[ 11 ] ]
+        + hexBytes[ b[ 12 ] ] + hexBytes[ b[ 13 ] ]
+        + hexBytes[ b[ 14 ] ] + hexBytes[ b[ 15 ] ]
+}
+}

package/src/framework/utils/url.js

@@ -0,0 +1,84 @@
+import {StrUtil} from "./str";
+
+export const UrlUtil = {
+    /**
+     * 获取url的参数, 如果不传参数，则使用当前路径
+     * @param url 字符串
+     */
+    getParams(url = null) {
+        if (!url) {
+            url = location.href
+        }
+
+        if (!StrUtil.contains(url, '?')) {
+            return {}
+        }
+
+        const search = StrUtil.subAfter(url, '?')
+
+
+        const params = new URLSearchParams(search);
+
+        const result = {}
+        for (const [key, value] of params.entries()) {
+            result[key] = value;
+        }
+
+        return result
+    },
+
+    /**
+     * 去掉参数的基础url
+     * @param url
+     */
+    getPathname(url) {
+        if (!url) {
+            return null
+        }
+
+        return StrUtil.subBefore(url, '?')
+    },
+
+
+    /**
+     * 将参数对象转换为 url中的
+     * @param params
+     */
+    paramsToSearch(params) {
+        if (!params) {
+            return "";
+        }
+        const buffer = []
+        for (let k in params) {
+            let v = params[k]
+            buffer.push(k + '=' + v);
+        }
+        return buffer.join('&')
+    },
+
+    setParam(url, key, value) {
+        const p = this.getParams(url)
+        p[key] = value;
+        if (value == null) {
+            delete p[key]
+        }
+        return this.getPathname(url) + '?' + this.paramsToSearch(p);
+    },
+
+    /**
+     * @deprecated
+     * @param url
+     * @param key
+     * @param value
+     */
+    replaceParam(url, key, value) {
+        this.setParam(url, key, value)
+    },
+
+    join(path1, path2) {
+        path1 = StrUtil.removeSuffix(path1,"/")
+        path2 =  StrUtil.removePrefix(path2,"/")
+        let path = path1 + "/" + path2;
+        return path;
+    }
+}

package/src/framework/utils/validate.js

@@ -0,0 +1,9 @@
+
+export const ValidateUtil = {
+    isEmail(emailStr) {
+        const reg = /^([\w+\.])+@\w+([.]\w+)+$/;
+        return reg.test(emailStr)
+    }
+}
+
+

package/src/index.js

@@ -0,0 +1,2 @@
+export * from "./layouts"
+export * from "./framework"

package/src/layouts/PageRender.d.ts

@@ -0,0 +1,22 @@
+// @ts-ignore
+import React from "react";
+
+declare type PageRenderProps = {
+
+   /**
+    * 路径 如 /flowable/task/form
+    */
+   pathname: string;
+   /***
+    * 搜索参数 如 /?id=1
+    */
+   search?:string;
+
+   /***
+    *   是否把location信息透传到真正页面
+    */
+   passLocation?: boolean
+};
+
+export class PageRender extends React.Component<PageRenderProps, any> {
+}

package/src/layouts/PageRender.jsx

@@ -0,0 +1,90 @@
+import {matchRoutes, useAppData} from "umi";
+import React from "react";
+import {Result} from "antd";
+import {UrlUtil} from "../framework";
+
+/**
+ * 通过指定 pathname 渲染页面
+ * @param props
+ * 为了规范，接收参数何router保持一致，
+ * pathname： 路径 如 /flowable/task/form
+ * search：搜索参数 如 /?id=1
+ *
+ * passLocation: 是否把location信息透传到真正页面
+ *
+ * @returns {React.JSX.Element|*}
+ * @constructor
+ */
+
+let APP_DATA_CACHE = null
+
+
+/**
+ * 写函数组件主要为了使用hooks
+ * @param props
+ * @returns {Element}
+ * @constructor
+ */
+export  function PageRender(props) {
+    let {pathname, search, passLocation} = props
+
+    let appData = useAppData()
+    if(Object.keys(appData).length === 0){
+        appData = APP_DATA_CACHE
+    }else {
+        APP_DATA_CACHE = appData;
+    }
+
+    return <_PageRender appData={appData}  pathname={pathname} search={search}
+                        passLocation={passLocation}/>
+}
+
+class _PageRender extends React.Component {
+
+    render() {
+        if (this.props.passLocation) {
+            return this.passLocationRender()
+        }
+        return this.defaultRender()
+    }
+
+    passLocationRender = () => {
+        let {pathname, search,  appData} = this.props
+
+        const map = appData.routeComponents
+        const key = pathname.substring(1); // 移除第一个斜杠
+        let componentType = map[key] || map[key + '/index']
+        if (componentType) {
+            let params =search ? UrlUtil.getParams(search): {}
+            const location = {pathname, search, params}
+            return React.createElement(componentType, {location});
+        }
+    };
+
+
+    defaultRender = () => {
+        let {pathname, appData} = this.props
+        let matchArr = matchRoutes(appData.clientRoutes, pathname)
+
+        if (matchArr != null) {
+            if (pathname === '/') {
+                // 匹配结果为1，表示未定义index.jsx ，导致死循环
+                if (matchArr.length === 1) { // 如果项目中没有定义index.jsx
+                    return <Result icon={null} title='未定义首页'></Result>
+                }
+            }
+            // 取最匹配的那个
+            const mathResult = matchArr[matchArr.length - 1].route
+            if(mathResult){
+                return mathResult.element;
+            }
+        }
+
+        // 如果实在找不到页面组件，则404
+        return <Result
+            status={404}
+            title='页面不存在！'
+            subTitle={<div>路由地址：{pathname}</div>}
+        />
+    };
+}

package/src/layouts/admin/HeaderRight.jsx

@@ -0,0 +1,104 @@
+import {Badge, Dropdown} from "antd";
+import {NotificationOutlined, QuestionCircleOutlined, SettingOutlined, UserOutlined} from "@ant-design/icons";
+import React from "react";
+import {history} from "umi";
+import {HttpUtil, isMobileDevice, MsgBox, PageUtil, SysUtil} from "../../framework";
+
+
+const ID = 'header-right';
+export default class HeaderRight extends React.Component {
+
+    state = {
+        isMobileDevice: false
+    };
+
+    componentDidMount() {
+        document.dispatchEvent(new CustomEvent('componentDidMount', {detail: ID}))
+        if (isMobileDevice()) {
+            this.setState({isMobileDevice: true})
+        }
+    }
+
+
+
+    logout = () => {
+        HttpUtil.post('admin/auth/logout').then(async () => {
+            localStorage.clear()
+            await MsgBox.alert('退出登录成功');
+            history.replace('/login')
+        }).catch(async e => {
+            let confirm = await MsgBox.confirm('退出登录失败，是否清空缓存');
+            if (confirm) {
+                localStorage.clear();
+                history.replace('/login')
+            }
+        })
+    }
+
+    userCenter = () => {
+        PageUtil.open('/userCenter', '个人中心')
+    }
+
+    render() {
+        const info = SysUtil.getLoginInfo()
+
+        if (this.state.isMobileDevice) {
+            return <div className='header-right'>
+                <a onClick={this.logout}>退出</a>
+            </div>
+        }
+
+        return <div className='header-right'>
+
+            <div className='item'>
+                <UserOutlined/> {info.name}
+            </div>
+
+
+            <div className='item' onClick={() => PageUtil.open('/userCenter/message', '我的消息')}>
+                <Badge count={info.messageCount} size="small">
+                    <NotificationOutlined/>
+                </Badge>
+            </div>
+
+            <div className='item' title='操作手册' onClick={() => PageUtil.open('/userCenter/manual', '操作手册')}>
+                <QuestionCircleOutlined/>
+            </div>
+
+
+            <div className='item'>
+
+                <Dropdown menu={{
+                    onClick: ({key}) => {
+                        switch (key) {
+                            case 'userCenter':
+                                this.userCenter()
+                                break;
+                            case 'logout':
+                                this.logout();
+                                break;
+                            case 'about':
+                                this.about()
+                                break
+                        }
+                    },
+                    items: [
+                        {key: 'userCenter', label: '个人中心'},
+                        {key: 'about', label: '关于系统'},
+                        {key: 'logout', label: '退出登录'},
+
+                    ]
+                }}><SettingOutlined/>
+
+                </Dropdown>
+
+            </div>
+
+        </div>
+    }
+
+
+    about = () => {
+        history.push("/about")
+    }
+}

package/src/layouts/admin/TabPageRender.jsx

@@ -0,0 +1,158 @@
+import React from "react";
+import {withRouter} from "umi";
+import {Tabs} from "antd";
+import {PageRender} from "../PageRender";
+import {PageUtil} from "../../framework";
+
+class TabPageRender extends React.Component {
+
+    state = {
+        active: null,
+        urlLabelMap: {},
+        tabs: [],
+    }
+
+    componentDidMount() {
+        const url = this.getUrl(this.props)
+        this.onUrlChange(url);
+
+        document.addEventListener('close-page-event', (e)=>{
+            const url = e.detail.url
+            this.onRemove(url)
+        })
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        const url = this.getUrl(this.props)
+        const pUrl = this.getUrl(prevProps)
+
+        if (url !== pUrl) {
+            this.onUrlChange(url);
+        }
+    }
+
+    onUrlChange = url => {
+        const {location} = this.props
+
+        const {pathname, search} = location
+        let {tabs} = this.state
+
+        const old = tabs.find(t => t.key === url)
+        if (old == null) {
+            const cmp = <PageRender pathname={pathname} search={search}/>
+            let label = this.getLabel(pathname);
+            tabs.push({
+                key: url,
+                label: label,
+                children: cmp
+            });
+            this.setState({tabs: [...tabs]})
+        }else {
+            const menu = this.props.pathMenuMap[pathname]
+            if (menu && menu.refreshOnTabClick) {
+                this.refresh(pathname)
+            }
+        }
+
+        this.setState({active: url})
+    };
+
+    getLabel(path) {
+        if (path === '/') {
+            return '首页'
+        }
+        let label = PageUtil.currentLabel();
+
+        if (!label) {
+            const menu = this.props.pathMenuMap[path]
+            if (menu) {
+                return menu.name
+            }
+        }
+
+        return label;
+    }
+
+
+    render() {
+        let {tabs} = this.state
+        if (tabs.length === 0) {
+            return null
+        }
+
+        return <>
+            <Tabs
+                items={tabs}
+                activeKey={this.state.active}
+                onChange={this.onChange}
+                onEdit={this.onRemove}
+
+                hideAdd
+                size='small'
+                type='editable-card'
+                style={{background: 'white'}}
+                rootClassName='tmgg-layout-tabs'
+
+                onTabClick={this.onTabClick}
+
+            >
+            </Tabs>
+        </>
+    }
+
+    lastTabClickTime = 0
+    onTabClick = (key, event) => {
+        let now = new Date().getTime();
+        let doubleClick = now - this.lastTabClickTime < 300;
+        // 双击时刷新
+        if (doubleClick) {
+            this.refresh(key);
+        }
+
+        this.lastTabClickTime = now
+    };
+
+    refresh = key => {
+        const tabs = this.state.tabs;
+        const tab = tabs.find(t => t.key === key)
+        if(tab != null){
+            const old = tab.children
+            if(old != null){
+                console.log('准备刷新：', key)
+                tab.children = '刷新中...'
+                this.setState({tabs}, () => {
+                    console.log('刷新节点', tab)
+                    tab.children = old
+                    this.setState({tabs})
+                })
+            }
+        }
+    };
+
+    onChange = url => {
+        if (url !== this.state.active) {
+            this.props.history.push(url)
+        }
+    };
+
+    onRemove = url => {
+        let {tabs} = this.state
+        tabs = tabs.filter(t => t.key !== url)
+
+        this.setState({tabs})
+        if (tabs.length > 0) {
+            this.setState({active: tabs[tabs.length - 1].key})
+        }
+    };
+
+    getUrl = props => {
+        const {location} = props
+        const {pathname, search} = location
+        return pathname + search;
+    }
+
+}
+
+
+// 让组件有路由相关的参数，如 this.props.location
+export default withRouter(TabPageRender)