@jiangood/open-admin 1.0.0

package/src/layouts/admin/index.jsx

@@ -0,0 +1,161 @@
+// 全局路由
+
+import React from 'react';
+import {Badge, Layout, Menu, Watermark} from 'antd';
+
+import {history, Link} from 'umi';
+import "./index.less"
+import {Gap, HttpUtils, NamedIcon, PageUtils, SysUtils, ThemeUtils, TreeUtils} from "../../framework";
+
+import HeaderRight from "./HeaderRight";
+import TabPageRender from "./TabPageRender";
+
+const {Header, Sider, Content} = Layout;
+/**
+ * 带菜单的布局，主要处理布局宇框架结构
+ */
+export default class extends React.Component {
+
+    state = {
+        loginInfo: {},
+
+        menuTree: [],
+        menuMap: {},
+        pathMenuMap: {},
+
+
+        currentMenuKey: null,
+
+
+        siteInfo: {},
+    }
+
+
+    componentDidMount() {
+        console.log('Admin Layout didMount')
+        // 判断是否手机端，自动收起菜单
+
+
+        let siteInfo = SysUtils.getSiteInfo();
+        const loginInfo = SysUtils.getLoginInfo()
+        this.setState({siteInfo, loginInfo})
+
+        this.initMenu()
+    }
+
+
+    initMenu = () => {
+        HttpUtils.get('/admin/menuInfo').then(info => {
+            const {menuTree, pathMenuMap, menuMap} = info
+            this.setState({menuMap})
+
+            let pathname = PageUtils.currentPathname();
+
+            TreeUtils.walk(menuTree, (item) => {
+                item.icon = <NamedIcon name={item.icon || 'AppstoreOutlined'} style={{fontSize: 12}}/>
+            })
+
+            if (pathname !== "" && pathname !== "/") {
+                let menu = pathMenuMap[pathname]
+                if (menu) {
+                    this.setState({currentMenuKey: menu.key})
+                }
+            }
+
+            this.setState({menuTree, pathMenuMap})
+
+            this.loadBadge(menuMap)
+        })
+
+
+    }
+    actionRef = React.createRef()
+
+
+    loadBadge = menuMap => {
+        for (let id in menuMap) {
+            const item = menuMap[id]
+            const {messageCountUrl} = item;
+            if (!messageCountUrl) {
+                continue
+            }
+            HttpUtils.get(messageCountUrl).then(rs => {
+                const {menuTree} = this.state
+                const menu = TreeUtils.findByKey(id, menuTree, 'key')
+                if (menu) {
+                    menu.icon = <Badge dot count={rs} size={"small"}>{menu.icon}</Badge>
+                    this.setState({menuTree: [...menuTree]})
+                }
+
+            })
+        }
+    };
+
+
+    render() {
+        const {siteInfo, loginInfo} = this.state
+
+        return <Layout className='main-layout'>
+            <Header className='header'>
+                <div className='header-left'>
+                    {siteInfo.logoUrl &&
+                        <img className='logo-img' src={siteInfo.logoUrl} onClick={() => history.push('/')} alt='logo'/>}
+                    <h3 className='hide-on-mobile'>
+                        <Link to="/" style={{color: ThemeUtils.getColor("primary-color")}}>{siteInfo.title} </Link>
+                    </h3>
+
+                </div>
+                <HeaderRight/>
+            </Header>
+
+            <Layout style={{height: '100%'}}>
+                <Sider id='left-sider'
+                       collapsible
+                       breakpoint={'md'}
+                >
+                    <Gap/>
+
+
+                    <Menu items={this.state.menuTree}
+                          theme='dark'
+                          mode="inline"
+                          className='left-menu'
+                          onClick={({key}) => {
+                              const menu = this.state.menuMap[key]
+                              let {path} = menu;
+                              this.setState({currentMenuKey: key})
+                              history.push(path)
+                          }}
+                          selectedKeys={[this.state.currentMenuKey]}
+                          inlineIndent={16}
+                    >
+                    </Menu>
+
+                </Sider>
+
+                <Content id='admin-layout-content'>
+                    {this.getContent(loginInfo)}
+                </Content>
+
+            </Layout>
+        </Layout>
+    }
+
+
+    getContent = () => {
+        const {siteInfo, loginInfo} = this.state
+        if (this.state.menuTree.length === 0) { // 加载菜单中
+            return <></>
+        }
+        let tabPageRenderNode = <TabPageRender pathMenuMap={this.state.pathMenuMap}/>;
+        if (siteInfo.waterMark === true) {
+            return <Watermark content={[loginInfo.name, loginInfo.account]}>
+                {tabPageRenderNode}
+            </Watermark>
+        }
+
+        return tabPageRenderNode
+    };
+}
+
+

package/src/layouts/admin/index.less

@@ -0,0 +1,65 @@
+.main-layout {
+  min-height: 100vh;
+  .header {
+    padding: 0 20px;
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgb(233, 237, 240);
+    background-color: rgb(246, 248, 250);
+
+    .header-left {
+
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .logo-img {
+        height: 38px;
+        cursor: pointer;
+      }
+    }
+
+    .header-right {
+      line-height: 36px;
+      display: flex;
+      align-items: center;
+
+      .item {
+        padding: 0 0.5rem;
+        cursor: pointer;
+
+        &:hover {
+          background: #063A69;
+          color: white;
+        }
+      }
+    }
+
+  }
+
+
+  #left-sider {
+    .left-menu {
+      overflow: auto;
+      scrollbar-width: thin;
+      scrollbar-color: unset;
+
+      .ant-menu-submenu-selected {
+        div {
+          color: white !important;
+        }
+      }
+    }
+
+  }
+
+  #admin-layout-content {
+    .tmgg-layout-tabs {
+      &>.ant-tabs-nav {
+        margin-bottom: 8px;
+      }
+    }
+  }
+}

package/src/layouts/index.jsx

@@ -0,0 +1,165 @@
+import AdminLayout from "./admin"
+import React from "react";
+
+import {ConfigProvider} from "antd";
+
+import {Outlet, withRouter} from "umi";
+import zhCN from 'antd/locale/zh_CN';
+import {
+    ArrUtils,
+    HttpUtils,
+    MessageHolder,
+    PageLoading,
+    PageUtils,
+    SysUtils,
+    ThemeUtils,
+} from "../framework";
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+import '../style/global.less'
+import './index.less'
+import {Logger} from "../framework/utils/Logger";
+
+dayjs.locale('zh-cn');
+
+// 不需要登录的页面
+const SIMPLE_URLS = ['/login', '/test']
+
+class _Layouts extends React.Component {
+
+    log = Logger.getLogger('Layouts')
+
+    state = {
+        messageHolderInit:false,
+        siteInfoLoading: true,
+        loginInfoFinish: false
+    }
+
+    onMessageHolderFinish = () => {
+        this.loadSiteInfo()
+        this.setState({messageHolderInit:true});
+    }
+
+
+    loadSiteInfo = () => {
+        HttpUtils.get("/admin/public/site-info").then(rs => {
+            SysUtils.setSiteInfo(rs)
+            this.setState({siteInfoLoading: false})
+            this.loadLoginInfo()
+        })
+    };
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        const pre = prevProps.location.pathname
+        const cur = this.props.location.pathname
+        if (pre !== cur) {
+            this.loadLoginInfo()
+        }
+    }
+
+    isSimplePage() {
+        let {pathname} = this.props.location;
+        let isSimplePage = ArrUtils.contains(SIMPLE_URLS, pathname);
+        console.log('简单页面列表定义', SIMPLE_URLS)
+        console.log('当前页面是否简单页面',pathname,isSimplePage)
+        return isSimplePage
+    }
+
+    loadLoginInfo = () => {
+        if (this.isSimplePage() || this.state.loginInfoFinish) {
+            return;
+        }
+
+        HttpUtils.get('/admin/public/checkLogin')
+            .then(rs => {
+                const {needUpdatePwd, dictMap, loginInfo} = rs
+                SysUtils.setDictInfo(dictMap)
+                SysUtils.setLoginInfo(loginInfo)
+                if (!needUpdatePwd) {
+                    this.setState({loginInfoFinish: true});
+                    return;
+                }
+
+                if (needUpdatePwd) {
+                    PageUtils.open('/userCenter/ChangePassword', '修改密码')
+                    return;
+                }
+            })
+            .catch(async () => {
+                PageUtils.redirectToLogin()
+            })
+    }
+
+    render() {
+        return <ConfigProvider
+            input={{autoComplete: 'off'}}
+            form={{
+                validateMessages: {
+                    required: '必填项'
+                }, colon: false
+            }}
+            button={{
+                autoInsertSpace: false
+            }}
+            locale={zhCN}
+            theme={{
+                token: {
+                    colorPrimary: ThemeUtils.getColor("primary-color"),
+                    colorSuccess: ThemeUtils.getColor("success-color"),
+                    colorWarning: ThemeUtils.getColor("warning-color"),
+                    colorError: ThemeUtils.getColor("error-color"),
+                    borderRadius: 4,
+                },
+                components: {
+                    Menu: {
+                        darkItemBg: ThemeUtils.getColor("primary-color"),
+                        darkPopupBg: ThemeUtils.getColor("primary-color"),
+                        darkItemSelectedBg: ThemeUtils.getColor("primary-color-click"),
+                        darkItemHoverBg: ThemeUtils.getColor("primary-color-hover"),
+                        darkSubMenuItemBg: ThemeUtils.getColor("primary-color")
+                    },
+                    Layout: {
+                        siderBg: ThemeUtils.getColor("primary-color"),
+                        triggerBg: ThemeUtils.getColor("primary-color-click"),
+                        headerBg: 'white',
+                        triggerHeight: 32
+                    }
+                }
+            }}>
+
+            <MessageHolder onFinish={this.onMessageHolderFinish} />
+            {this.renderContent()}
+        </ConfigProvider>
+    }
+
+
+    renderContent = () => {
+        if(!this.state.messageHolderInit) {
+            this.log.info('加载message holder...')
+            return <PageLoading message='加载消息组件...'/>
+        }
+
+        if (this.state.siteInfoLoading) {
+            return <PageLoading message='加载站点信息...'/>
+        }
+        
+        let {params = {}} = this.props.location;
+        console.log('layout: params', params)
+        let simple = this.isSimplePage();
+        if (simple || params.hasOwnProperty('_noLayout')) {
+            return <Outlet/>
+        }
+
+        if (!this.state.loginInfoFinish) {
+            return <PageLoading message='加载登录信息...'/>
+        }
+
+        return <AdminLayout path={this.state.path} logo={this.props.logo}/>
+    };
+}
+
+
+export const Layouts = withRouter(_Layouts);
+export default Layouts
+export * from './PageRender'

package/src/layouts/index.less

@@ -0,0 +1,24 @@
+html,body{
+  margin: 0;
+  padding: 0;
+}
+
+@media print {
+  .no-print {
+    display: none;
+  }
+}
+
+.hide-on-mobile{        //电脑端css
+}
+
+@media (max-width: 767px) {        //移动端css
+
+  .hide-on-mobile{
+    display: none !important;
+  }
+
+}
+
+
+

package/src/loading.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import {Spin} from "antd";
+import {ThemeUtils} from "./framework";
+
+export default class extends React.Component {
+    render() {
+        return <div
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                background: ThemeUtils.getColor("background-color")
+            }}>
+            <Spin size='large'/>
+        </div>
+    }
+}

package/src/pages/404.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import {Result} from "antd";
+
+export default class extends React.Component {
+
+    render() {
+            return  <Result
+                status={404}
+                title='页面不存在'
+            />
+
+    }
+}

package/src/pages/about.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export default class extends React.Component {
+
+
+
+
+    render() {
+        return <>
+            <h1>关于</h1>
+        </>
+
+    }
+}

package/src/pages/index.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import {Card} from "antd";
+import {MessageUtils} from "../framework";
+
+
+export default class extends React.Component {
+
+    state = {}
+
+    componentDidMount() {
+
+    }
+
+    render() {
+
+        return <Card>
+            欢迎使用本系统
+
+
+
+
+        </Card>
+    }
+
+}

package/src/pages/login.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {LoginPage} from "../framework/pages/LoginPage";
+import {Button} from "antd";
+
+
+export default class  extends React.Component {
+
+
+
+
+    render() {
+        return <LoginPage />
+        // 支持自定义
+      // return <LoginPage form={<Button type={"primary"} size='large'>xx登录</Button>} />
+    }
+
+
+
+
+}

package/src/pages/system/api/ApiDoc.jsx

@@ -0,0 +1,144 @@
+import React from "react";
+import {FieldRemoteSelect, HttpUtils, PageUtils} from "../../../framework";
+import {Button, Descriptions, message, Space, Table, Typography} from "antd";
+
+const {Title, Paragraph, Text, Link} = Typography;
+
+export  class ApiDoc extends React.Component {
+
+    state = {
+        url: null,
+        appId: null,
+        apiList: [],
+        frameworkVersion: null,
+        errorList:[]
+    }
+
+    columns = [
+        {dataIndex: 'name', title: '名称', width: 150},
+        {dataIndex: 'type', title: '类型', width: 100},
+        {
+            dataIndex: 'required', title: '必填', width: 100, render: v => {
+                if (v == null) {
+                    return null;
+                }
+                return v ? '是' : '否';
+            }
+        },
+        {dataIndex: 'desc', title: '描述'},
+    ]
+
+    componentDidMount() {
+        const id = PageUtils.currentParams().id
+        this.loadData(id);
+
+        let url = window.location.protocol + '//' + window.location.host
+        this.setState({url})
+    }
+
+    async loadData(id) {
+        const hide = message.loading('加载中...', 0)
+        const rs = await HttpUtils.get('admin/apiAccount/docInfo', {id})
+        this.setState(rs)
+        hide()
+    }
+
+
+
+    render() {
+        const {apiList} = this.state
+        return <div>
+
+            <Space>
+                <FieldRemoteSelect url='admin/apiAccount/accountOptions' placeholder='请选择账号' onChange={v=>this.loadData(v)}/>
+                <Button type='primary' >导出PDF</Button>
+            </Space>
+            <div id='doc-content'>
+                <Title level={1}>接口说明文档</Title>
+
+                <Title level={2}>一、基本信息</Title>
+                <Paragraph>
+                    <Descriptions column={1} bordered size='small'>
+                        <Descriptions.Item label='请求地址'>
+                            {this.state.url}/api/gateway/接口名称
+                        </Descriptions.Item>
+                        <Descriptions.Item label='appId'>
+                            私发
+                        </Descriptions.Item>
+                        <Descriptions.Item label='appSecret'>
+                            私发
+                        </Descriptions.Item>
+                    </Descriptions>
+
+                </Paragraph>
+
+
+                <Paragraph>
+                    <Typography.Text>
+                        <div>
+                            请求使用HTTP POST发送,请求参数也使用json格式
+                        </div>
+                        <div> 响应报文以JSON方式返回</div>
+                    </Typography.Text>
+                </Paragraph>
+
+
+                <Title level={4}>请求头</Title>
+
+                <Table rowKey='name' columns={this.columns} bordered dataSource={[
+                    {name: 'appId', type: 'String', required: true, desc: '账号标识,appId'},
+                    {name: 'timestamp', type: 'String', required: true, desc: '时间戳，当前UNIX时间戳，13位，精确到毫秒'},
+                    {name: 'sign', type: 'String', required: true, desc: '数据签名，appId + appSecret + timestamp拼接后，进行md5摘要，值为32位小写'},
+                ]} size='small' pagination={false}>
+                </Table>
+
+
+
+                <Typography.Title level={4}>公共错误码</Typography.Title>
+                <Table  columns={[
+                    {dataIndex:'code',title:'错误码'},
+                    {dataIndex:'message', title:'错误描述'}
+                ]} rowKey='code' bordered dataSource={this.state.errorList} size='small' pagination={false}>
+                </Table>
+
+                <Typography.Title level={2}>二、接口列表</Typography.Title>
+                {apiList.map((api, index) => {
+                    return <div key={index}>
+                        <Typography.Title level={3}>{ api.name} </Typography.Title>
+                        <p>接口名称： {api.action}</p>
+                        <p>功能描述：{api.desc}</p>
+
+
+                        <Title level={5}>请求参数</Title>
+                        <Table rowKey='name' columns={this.columns} bordered dataSource={api.parameterList}
+                               size='small' pagination={false}>
+                        </Table>
+
+                        <Title level={5}>响应数据</Title>
+                        <Table columns={this.columns} bordered
+                               rowKey={'name'}
+                               dataSource={[
+                            {name: 'code', type: 'int', required: true, desc: '响应码，0表示成功'},
+                            {name: 'message', type: 'String', required: false, desc: '结果提示信息'},
+                            {name: 'data', type: api.returnType, required: false, desc: '返回数据'}
+                        ]} size='small' pagination={false}>
+                        </Table>
+                        {api.returnList != null && api.returnList.length > 0 && <>
+                            <Title level={5}>data 对象 {api.returnType} 说明</Title>
+
+                            <Table columns={this.columns}
+                                   rowKey={'name'}
+                                   bordered
+                                   dataSource={api.returnList} size='small' pagination={false}>
+                            </Table>
+                        </>
+                        }
+
+                    </div>
+                })}
+
+
+            </div>
+        </div>
+    }
+}