@jiangood/springboot-admin-starter 0.0.1

package/src/layouts/admin/index.jsx

@@ -0,0 +1,174 @@
+// 全局路由
+
+import React from 'react';
+import {Badge, Layout, Menu, Watermark} from 'antd';
+
+import {history, Link} from 'umi';
+import "./index.less"
+import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons';
+import {HttpUtil, isMobileDevice, NamedIcon, PageUtil, SysUtil, theme, TreeUtil} from "../../framework";
+
+import HeaderRight from "./HeaderRight";
+import TabPageRender from "./TabPageRender";
+
+const {Header, Footer, Sider, Content} = Layout;
+/**
+ * 带菜单的布局，主要处理布局宇框架结构
+ */
+export default class extends React.Component {
+
+    state = {
+        loginInfo: {},
+
+        menuTree: [],
+        pathMenuMap: {},
+
+
+        currentMenuKey: null,
+
+
+        collapsed: false,
+        siteInfo: {},
+        isMobileDevice: false,
+    }
+
+    tabPageRenderRef = React.createRef()
+
+
+    componentDidMount() {
+        console.log('Admin Layout didMount')
+        // 判断是否手机端，自动收起菜单
+        if (isMobileDevice()) {
+            this.setState({collapsed: true, isMobileDevice: true})
+        }
+
+        let siteInfo = SysUtil.getSiteInfo();
+        const loginInfo = SysUtil.getLoginInfo()
+        this.setState({siteInfo,loginInfo})
+
+        this.initMenu()
+    }
+
+
+    initMenu = () => {
+        HttpUtil.get('admin/menuInfo').then(info => {
+            const {menuTree, pathMenuMap, menuMap} = info
+
+            let pathname = PageUtil.currentPathname();
+
+            TreeUtil.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()
+
+    toggleCollapsed = (v) => {
+        this.setState({collapsed: v})
+    }
+    loadBadge = menuMap => {
+        for (let id in menuMap) {
+            const item = menuMap[id]
+            const {messageCountUrl} = item;
+            if(!messageCountUrl){
+                continue
+            }
+            HttpUtil.get(messageCountUrl).then(rs => {
+                const {menuTree} = this.state
+                const menu = TreeUtil.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'>
+
+                    <img className='logo-img' src={siteInfo.logoUrl} onClick={() => history.push('/')} alt='logo'/>
+                    <h3 className='hide-on-mobile'>
+                        <Link to="/" style={{color: theme["primary-color"]}}>{siteInfo.title} </Link>
+                    </h3>
+
+                </div>
+                <HeaderRight/>
+            </Header>
+
+            <Layout style={{height: '100%'}}>
+                <Sider id='left-sider'
+                       collapsible
+                       collapsed={this.state.collapsed}
+                       onCollapse={(value) => this.toggleCollapsed(value)}
+                       trigger={null}>
+
+                    <div style={{
+                        color: 'white', fontSize: 16, cursor: "pointer", margin: 12
+                    }} title='收起/展开' onClick={() => this.toggleCollapsed(!this.state.collapsed)}>
+                        {this.state.collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
+                    </div>
+
+                    <Menu items={this.state.menuTree}
+                          theme='dark'
+                          mode="inline"
+                          className='left-menu'
+                          onClick={({key, item}) => {
+                              let {path, id} = item.props;
+                              this.setState({currentMenuKey: id})
+                              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 ref={this.tabPageRenderRef} 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,64 @@
+.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: 0;
+      }
+    }
+  }
+}

package/src/layouts/index.jsx

@@ -0,0 +1,163 @@
+import AdminLayout from "./admin"
+import React from "react";
+
+import {ConfigProvider} from "antd";
+import '@ant-design/v5-patch-for-react-19';
+
+import {history, Outlet, withRouter} from "umi";
+import zhCN from 'antd/locale/zh_CN';
+import {ArrUtil, HttpUtil, MsgBoxComponent, PageLoading, PageUtil, SysUtil, theme} from "../framework";
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+import '../style/global.less'
+import './index.less'
+
+dayjs.locale('zh-cn');
+
+/**
+ * 属性列表：
+ *
+ * logo: 自定义的logo图片
+ *
+ */
+
+// 不需要登录的页面
+const SIMPLE_URLS = ['/login', '/test']
+
+class _Layouts extends React.Component {
+
+
+    state = {
+        siteInfoLoading: true,
+        loginInfoFinish: false
+    }
+
+
+    componentDidMount() {
+        HttpUtil.get("/admin/public/site-info").then(rs => {
+            SysUtil.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;
+        return ArrUtil.contains(SIMPLE_URLS, pathname)
+    }
+
+    loadLoginInfo = () => {
+        if (this.isSimplePage() || this.state.loginInfoFinish) {
+            return;
+        }
+
+        HttpUtil.get('admin/public/checkLogin')
+            .then(rs => {
+                const {needUpdatePwd, dictTree, loginInfo} = rs
+                SysUtil.setDictInfo(dictTree)
+                SysUtil.setLoginInfo(loginInfo)
+                if (!needUpdatePwd) {
+                    this.setState({loginInfoFinish: true});
+                    return;
+                }
+
+                if (needUpdatePwd) {
+                    PageUtil.open('/userCenter/ChangePassword', '修改密码')
+                    return;
+                }
+            })
+            .catch(async () => {
+                PageUtil.redirectToLogin()
+            })
+    }
+
+
+
+
+    renderContent = () => {
+        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}/>
+    };
+
+
+    render() {
+        return <ConfigProvider
+            input={{autoComplete: 'off'}}
+            form={{
+                validateMessages: {
+                    required: '必填项'
+                }, colon: false
+            }}
+            button={{
+                autoInsertSpace: false
+            }}
+            locale={zhCN}
+            theme={{
+                token: {
+                    colorPrimary: theme["primary-color"],
+                    colorSuccess: theme["success-color"],
+                    colorWarning: theme["warning-color"],
+                    colorError: theme["error-color"],
+                    borderRadius: 4,
+
+                },
+                components: {
+                    Menu: {
+                        darkItemBg: theme["primary-color"],
+                        darkPopupBg: theme["primary-color"],
+                        darkItemSelectedBg: theme["primary-color-click"],
+                        darkItemHoverBg: theme["primary-color-hover"],
+                        darkSubMenuItemBg: theme["primary-color"]
+                    },
+                    Layout: {
+                        siderBg: theme["primary-color"],
+                        triggerBg: theme["primary-color-click"],
+                        headerBg: 'white',
+                        triggerHeight: 32
+                    },
+                }
+            }}>
+
+            {this.renderContent()}
+
+            {this.renderGlobalComponent()}
+        </ConfigProvider>
+    }
+
+
+    renderGlobalComponent() {
+        console.log('渲染全局组件')
+        return <div className='global-component'>
+            <MsgBoxComponent/>
+        </div>
+    }
+}
+
+export const Layouts = withRouter(_Layouts);
+export default Layouts
+export * from './PageRender'

package/src/layouts/index.less

@@ -0,0 +1,45 @@
+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;
+  }
+
+}
+
+.ant-modal-content {
+  padding: 0 !important;
+  .ant-modal-header{
+    padding: 16px 24px;
+    border-bottom: 1px solid rgba(0,0,0,.06) !important;
+    margin-bottom: 0 !important;
+
+    .ant-modal-title {
+      font-weight: 500 !important;
+
+    }
+  }
+
+  .ant-modal-body {
+    padding: 24px !important;
+  }
+  .ant-modal-footer {
+    padding: 10px 16px;
+    border-top: 1px solid rgba(0,0,0,.06) !important;
+  }
+
+}
+

package/src/loading.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import {Spin} from "antd";
+import {theme} from "./framework";
+
+export default class extends React.Component {
+    render() {
+        return <div
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                background: theme["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/api/accessLog/index.jsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import {HttpUtil, Page, ProTable} from "../../../framework";
+
+
+export default class extends React.Component {
+
+
+
+  columns = [
+
+    {
+      title: '接口名称',
+      dataIndex: 'name',
+
+
+
+
+    },
+
+    {
+      title: '接口',
+      dataIndex: 'action',
+
+
+
+
+    },
+
+      {
+          title: 'requestId',
+          dataIndex: 'requestId',
+
+      },
+
+    {
+      title: '请求数据',
+      dataIndex: 'requestData',
+
+
+
+
+    },
+
+    {
+      title: '响应数据',
+      dataIndex: 'responseData',
+
+
+
+
+    },
+
+    {
+      title: 'ip',
+      dataIndex: 'ip',
+
+
+
+
+    },
+
+    {
+      title: 'ipLocation',
+      dataIndex: 'ipLocation',
+
+
+
+
+    },
+
+    {
+      title: '执行时间',
+      dataIndex: 'executionTime',
+
+
+
+
+    },
+
+    {
+      title: '接口账户',
+      dataIndex: 'accountName',
+
+
+
+
+    },
+
+
+  ]
+
+
+
+  render() {
+    return <Page>
+      <ProTable
+          request={(params) => HttpUtil.pageData('admin/apiAccessLog/page', params)}
+          columns={this.columns}
+      />
+
+
+    </Page>
+
+
+  }
+}
+
+