@jiangood/open-admin 2.0.0 → 2.2.4

package/src/layouts/admin/index.less

@@ -1,10 +1,10 @@
 .main-layout {
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
   .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);
@@ -14,6 +14,7 @@
       display: flex;
       align-items: center;
       gap: 8px;
+      flex-shrink: 0;
 
       .logo-img {
         height: 38px;
@@ -21,10 +22,41 @@
       }
     }
 
+    .top-nav {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      margin: 0 16px;
+      height: 100%;
+      overflow: hidden;
+
+      .top-nav-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 0 16px;
+        height: 100%;
+        cursor: pointer;
+        color: rgba(0, 0, 0, 0.65);
+        transition: color 0.2s;
+        white-space: nowrap;
+
+        &:hover {
+          color: #1961AC;
+        }
+
+        &.active {
+          color: #1961AC;
+          box-shadow: inset 0 -2px 0 #1961AC;
+        }
+      }
+    }
+
     .header-right {
       line-height: 36px;
       display: flex;
       align-items: center;
+      flex-shrink: 0;
 
       .item {
         padding: 0 0.5rem;
@@ -59,10 +91,96 @@
   }
 
   #admin-layout-content {
-    .tmgg-layout-tabs {
-      &>.ant-tabs-nav {
-        margin-bottom: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .oa-tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+
+      .oa-tab-bar {
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        flex-shrink: 0;
+        margin-bottom: 0;
+        border-bottom: 1px solid #e8e8e8;
+        background: #fff;
+
+        &::-webkit-scrollbar {
+          height: 0;
+        }
+      }
+
+      .oa-tab {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 0 12px;
+        height: 32px;
+        line-height: 32px;
+        font-size: 13px;
+        cursor: pointer;
+        border-right: 1px solid #e8e8e8;
+        white-space: nowrap;
+        color: rgba(0, 0, 0, 0.65);
+        background: #fafafa;
+        transition: color 0.2s, background 0.2s;
+        position: relative;
+        flex-shrink: 0;
+
+        &:hover {
+          color: #1961AC;
+        }
+
+        &.active {
+          color: #1961AC;
+          background: #fff;
+          font-weight: 500;
+        }
+
+        .oa-tab-label {
+          max-width: 120px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .oa-tab-close {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 16px;
+          height: 16px;
+          font-size: 12px;
+          line-height: 1;
+          border-radius: 50%;
+          color: rgba(0, 0, 0, 0.45);
+
+          &:hover {
+            background: rgba(0, 0, 0, 0.08);
+            color: rgba(0, 0, 0, 0.88);
+          }
+        }
+      }
+
+      .oa-tabs-content {
+        flex: 1;
+        overflow: hidden;
+
+        .oa-tab-pane {
+          height: 100%;
+        }
       }
     }
   }
 }
+
+@media (max-width: 768px) {
+  .top-nav {
+    display: none !important;
+  }
+}

package/src/layouts/index.jsx

@@ -1,185 +1,102 @@
-import React from "react";
-import {ConfigProvider} from "antd";
+import React, {useState, useEffect, useRef} from "react";
+import {App, ConfigProvider} from "antd";
 import zhCN from 'antd/locale/zh_CN';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import {Outlet, withRouter} from "umi";
+import {Outlet, useLocation} from "umi";
 
 import AdminLayout from "./admin"
-import {
-    ArrayUtils,
-    HttpUtils,
-    MessageHolder,
-    PageLoading,
-    PageUtils, StringUtils,
-    SysUtils,
-    ThemeUtils,
-} from "../framework";
-import {Logger} from "../framework/utils/Logger";
+import {HttpUtils, PageLoading, PageUtils, SysUtils, ThemeUtils} from "../framework";
 
 import '../style/global.less'
 import './index.less'
 
 dayjs.locale('zh-cn');
 
-// 不需要登录的页面
-const SIMPLE_URLS = ['/login', '/test']
+// 不需要登录和布局的页面
+const PUBLIC_PAGES = ['/login', '/test']
 
-function checkIsSimplePage(pathname) {
-    if(pathname === '/' || pathname === '/index'){
-        return false;
-    }
-    // 测试页面
-    if(pathname.startsWith("/test/")){
-        return true
-    }
-    return ArrayUtils.contains(SIMPLE_URLS, pathname) ;
+function isPublicPage(pathname, search) {
+    if (pathname === '/' || pathname === '/index') return false;
+    if (pathname.startsWith("/test/")) return true;
+    if (PUBLIC_PAGES.includes(pathname)) return true;
+    if (search && new URLSearchParams(search).has('_noLayout')) return true;
+    return false;
 }
 
-function checkIsPurePage(pathname){
-    if(pathname.startsWith("/test/")){
-        return true
-    }
-    return false
+const configProps = {
+    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,
+            },
+        },
+    },
+};
+
+function initApp() {
+    return Promise.all([
+        HttpUtils.get("/admin/public/site-info"),
+        HttpUtils.get('/admin/public/check-login'),
+    ]).then(([siteInfo, loginRs]) => {
+        SysUtils.setSiteInfo(siteInfo);
+        const {needUpdatePwd, dictInfo, loginInfo} = loginRs;
+        SysUtils.setDictInfo(dictInfo);
+        SysUtils.setLoginInfo(loginInfo);
+        if (needUpdatePwd) {
+            PageUtils.open('/userCenter/ChangePassword', '修改密码');
+            return false;
+        }
+        return true;
+    }).catch(() => {
+        PageUtils.redirectToLogin();
+        return false;
+    });
 }
 
-class _Layouts extends React.Component {
+export function Layouts() {
+    const {pathname, search} = useLocation();
+    const [ready, setReady] = useState(false);
+    const loadedRef = useRef(false);
 
-    log = Logger.getLogger('Layouts')
+    useEffect(() => {
+        if (isPublicPage(pathname)) return;
+        if (loadedRef.current) return;
+        loadedRef.current = true;
+        initApp().then(ok => { if (ok) setReady(true); });
+    }, [pathname]);
 
-    state = {
-        messageHolderInit:false,
-        siteInfoLoading: true,
-        loginInfoFinish: false
+    if (isPublicPage(pathname, search)) {
+        return <ConfigProvider {...configProps}><App><Outlet/></App></ConfigProvider>;
     }
 
-    onMessageHolderFinish = () => {
-        this.loadSiteInfo()
-        this.setState({messageHolderInit:true});
+    if (!ready) {
+        return <ConfigProvider {...configProps}><App><PageLoading message='加载中...'/></App></ConfigProvider>;
     }
 
-
-    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()
-        }
-    }
-
-
-
-    loadLoginInfo = () => {
-        const {pathname} = this.props.location;
-        if (checkIsPurePage(pathname) || checkIsSimplePage(pathname) || this.state.loginInfoFinish) {
-            return;
-        }
-
-        HttpUtils.get('/admin/public/check-login')
-            .then(rs => {
-                const {needUpdatePwd, dictInfo, loginInfo} = rs
-                SysUtils.setDictInfo(dictInfo)
-                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 = () => {
-        const {pathname} = this.props.location;
-
-        if(checkIsPurePage(pathname)){
-            return <Outlet/>
-        }
-
-        if(!this.state.messageHolderInit) {
-            this.log.info('加载message holder...')
-            return <PageLoading message='加载消息组件...'/>
-        }
-
-        const {params = {}} = this.props.location;
-        if (checkIsSimplePage(pathname) || params.hasOwnProperty('_noLayout')) {
-            return <Outlet/>
-        }
-
-
-
-        if (this.state.siteInfoLoading) {
-            return <PageLoading message='加载站点信息...'/>
-        }
-        
-
-
-        if (!this.state.loginInfoFinish) {
-            return <PageLoading message='加载登录信息...'/>
-        }
-
-        return <AdminLayout path={this.state.path} logo={this.props.logo}/>
-    };
+    return <ConfigProvider {...configProps}><App><AdminLayout/></App></ConfigProvider>;
 }
 
-
-export const Layouts = withRouter(_Layouts);
-export default Layouts
-export * from './PageRender'
+export default Layouts;
+export * from './PageRender'

package/src/loading.jsx

@@ -1,18 +1,19 @@
 import React from "react";
-import {Spin} from "antd";
-import {ThemeUtils} from "./framework";
+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>
-    }
-}
+const Loading = () => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100vh',
+      background: ThemeUtils.getColor("background-color")
+    }}
+  >
+    <Spin size='large' />
+  </div>
+);
+
+export default Loading;

package/src/pages/404.jsx

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

package/src/pages/about.jsx

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

package/src/pages/index.jsx

@@ -1,10 +1,9 @@
 import React from "react";
 import {Card} from "antd";
-
+import {Page} from "../framework";
 
 export default function () {
-
-    return <Card>
-        欢迎使用本系统
-    </Card>
+    return <Page>
+        <Card>欢迎使用本系统</Card>
+    </Page>
 }

package/src/pages/login.jsx

@@ -38,14 +38,19 @@ export default class extends React.Component {
     }
 
     async componentDidMount() {
-        if (localStorage.length === 0) {
-            MessageUtils.alert('站点数据缺失，刷新当前页面...')
-            window.location.reload()
+        const siteInfo = SysUtils.getSiteInfo()
+        if (siteInfo && siteInfo.rsaPublicKey) {
+            this.setState({siteInfo})
             return
         }
-
-        const siteInfo = SysUtils.getSiteInfo()
-        this.setState({siteInfo})
+        // localStorage 中无站点信息，从服务端重新加载
+        try {
+            const rs = await HttpUtils.get('/admin/public/site-info')
+            SysUtils.setSiteInfo(rs)
+            this.setState({siteInfo: rs})
+        } catch (e) {
+            message.error('加载站点信息失败，请刷新页面重试')
+        }
     }
 
     submit = values => {
@@ -69,9 +74,11 @@ export default class extends React.Component {
     render() {
         const {siteInfo} = this.state
 
-        const pageStyle = {}
+        const pageStyle = {
+            backgroundImage: `url("${SysUtils.contextPath('/admin/public/login_bg.jpg')}")`
+        }
         if (siteInfo.loginBackground) {
-            const url = 'admin/sysFile/preview/' + siteInfo.loginBackground;
+            const url = SysUtils.contextPath('/admin/sysFile/preview/' + siteInfo.loginBackground);
             pageStyle.backgroundImage = 'url("' + url + '")'
         }
 
@@ -110,7 +117,7 @@ export default class extends React.Component {
                         <Space style={{alignItems: 'center'}}>
                             <Input size='large' placeholder='验证码' prefix={<SafetyCertificateOutlined/>}/>
                             <img height={36} width={100}
-                                 src={"/admin/auth/captcha-image?_random=" + this.state.random}
+                                 src={SysUtils.contextPath("/admin/auth/captcha-image?_random=" + this.state.random)}
                                  onClick={() => this.setState({random: Math.random()})}/>
                         </Space>
                     </Form.Item>

package/src/pages/login.less

@@ -1,6 +1,5 @@
 .login-page {
   background-size: cover;
-  background-image: url("/admin/public/login_bg.jpg");
   background-repeat: no-repeat;
   background-position: bottom;
 

package/src/pages/system/dict/index.jsx

@@ -33,7 +33,9 @@ export default class extends React.Component {
     }
 
     onFinish = values => {
-        HttpUtils.post('admin/dict/save', values).then(rs => {
+        const isNew = !values.id;
+        const url = isNew ? 'admin/dict/create' : 'admin/dict/update';
+        HttpUtils.post(url, values).then(rs => {
             this.setState({formOpen: false})
             this.tableRef.current.reload()
         })
@@ -90,15 +92,11 @@ export default class extends React.Component {
             title: '操作',
             dataIndex: 'option',
             render: (_, record) => {
-                if(!record.id){ // 非数据库定义的不让修改
-                    return
-                }
-
                 return (
                     <ButtonList>
-                        <Button size='small' perm='sysDict:save'
+                        <Button size='small' perm='sys-dict:update'
                                 onClick={() => this.handleEdit(record)}> 编辑 </Button>
-                        <Popconfirm perm='sysDict:delete' title='是否确定删除字典项'
+                        <Popconfirm perm='sys-dict:delete' title='是否确定删除字典项'
                                     onConfirm={() => this.handleDelete(record)}>
                             <Button size='small'>删除</Button>
                         </Popconfirm>
@@ -109,13 +107,13 @@ export default class extends React.Component {
     ]
 
     render() {
-        return <Page padding>
+        return <Page>
             <ProTable
                 rowKey='uid'
                 actionRef={this.tableRef}
                 toolBarRender={() => {
                     return <ButtonList>
-                        <Button perm='sysDict:save' type='primary' onClick={this.handleAdd} >
+                        <Button perm='sys-dict:create' type='primary' onClick={this.handleAdd} >
                             <PlusOutlined/> 新增
                         </Button>
                     </ButtonList>
@@ -126,7 +124,6 @@ export default class extends React.Component {
                 }}
                 columns={this.columns}
                 showToolbarSearch={true}
-                scrollY={500}
             />
             <Modal
                 title='编辑数据字典项'

package/src/pages/system/file/index.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {Button, Form, Input, Modal, Popconfirm} from 'antd'
 import {CloudUploadOutlined} from "@ant-design/icons";
 
-import {ButtonList, FieldDateRange, FieldDictSelect, FieldUploadFile, HttpUtils, ProTable} from "../../../framework";
+import {ButtonList, FieldDateRange, FieldDictSelect, FieldUploadFile, HttpUtils, Page, ProTable, SysUtils} from "../../../framework";
 
 export default class extends React.Component {
 
@@ -59,7 +59,7 @@ export default class extends React.Component {
             title: '预览',
             dataIndex: 'id',
             render(id, record) {
-                const nodes = [<a href={'/admin/sysFile/preview/' + record.id} target='_blank'>预览</a>]
+                const nodes = [<a href={SysUtils.contextPath('/admin/sysFile/preview/' + record.id)} target='_blank'>预览</a>]
 
 
                 if (record.imageUrls?.length > 0) {
@@ -79,7 +79,7 @@ export default class extends React.Component {
             dataIndex: 'option',
             render: (_, record) => (
                 <ButtonList>
-                    <Popconfirm perm='sysFile:delete' title='是否确定删除文件信息'
+                    <Popconfirm perm='sys-file:delete' title='是否确定删除文件信息'
                                 onConfirm={() => this.handleDelete(record)}>
                         <a>删除</a>
                     </Popconfirm>
@@ -89,7 +89,7 @@ export default class extends React.Component {
     ]
 
     render() {
-        return <>
+        return <Page>
             <ProTable
                 actionRef={this.tableRef}
                 toolBarRender={() => {
@@ -140,7 +140,7 @@ export default class extends React.Component {
                 </Form>
             </Modal>
 
-        </>
+        </Page>
     }
 }