@jiangood/open-admin 2.5.8 → 3.0.0

package/src/layouts/admin/index.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import {Layout, Menu, Skeleton, Watermark} from 'antd';
 
-import {history, Link} from 'umi';
 import "./index.less"
-import {HttpUtils, NamedIcon, PageUtils, GlobalData, ThemeUtils, TreeUtils} from "../../framework";
+import {HttpUtils, NamedIcon, PageUtils, GlobalData, TreeUtils, history, Link, ARTICLE_HEADER_LEFT} from "../../framework";
 
 import { HeaderRight } from "./HeaderRight";
-import { TabPageRender } from "./TabPageRender";
+import { TabLayout } from "./TabLayout";
 const {Header, Sider, Content} = Layout;
 /**
  * 带菜单的布局，主要处理布局宇框架结构
@@ -30,6 +29,7 @@ export default class extends React.Component {
 
         siteInfo: {},
 
+        headerLeftArticles: [],
     }
 
 
@@ -42,6 +42,9 @@ export default class extends React.Component {
         this.setState({siteInfo, loginInfo})
 
         this.initMenu()
+
+        const siteArticles = GlobalData.getSiteArticles();
+        this.setState({headerLeftArticles: siteArticles[ARTICLE_HEADER_LEFT] || []})
     }
 
 
@@ -172,7 +175,7 @@ export default class extends React.Component {
     render() {
         const {siteInfo, loginInfo} = this.state
 
-        return <Layout className='main-layout' style={{'--primary-color': ThemeUtils.getColor("primary-color"), '--primary-color-click': ThemeUtils.getColor("primary-color-click")}}>
+return <Layout className='main-layout'>
              <Sider id='left-sider'
                    width={180}
                    collapsible
@@ -191,6 +194,10 @@ export default class extends React.Component {
             <Layout style={{flex: 1, overflow: 'hidden'}}>
                 <Header className='header'>
                     {this.renderTopMenu()}
+                    {this.state.headerLeftArticles.map(a => (
+                        <div key={a.code} className='item' style={{cursor: 'pointer', padding: '0 12px', whiteSpace: 'nowrap'}}
+                             onClick={() => PageUtils.open('/article/' + a.code, a.title)}>{a.title}</div>
+                    ))}
                     <HeaderRight/>
                 </Header>
 
@@ -221,7 +228,7 @@ export default class extends React.Component {
     renderCenterContent = () => {
         const {siteInfo, loginInfo} = this.state
         // 即使菜单为空也直接显示页面内容，不要一直显示 Skeleton
-        const tabPageRenderNode = <TabPageRender pathMenuMap={this.state.pathMenuMap}/>;
+        const tabPageRenderNode = <TabLayout pathMenuMap={this.state.pathMenuMap}/>;
         if (siteInfo.waterMark === true) {
             return <Watermark content={[loginInfo.name, loginInfo.account]}>
                 {tabPageRenderNode}

package/src/layouts/admin/index.less

@@ -7,6 +7,7 @@
     display: flex;
     align-items: center;
     background-color: #fff;
+    border-bottom: 1px solid #e8e8e8;
 
     .top-nav {
       flex: 1;
@@ -45,11 +46,13 @@
       flex-shrink: 0;
 
       .item {
+        display: inline-flex;
+        align-items: center;
         padding: 0 0.5rem;
         cursor: pointer;
 
         &:hover {
-          background: var(--primary-color-click, #124B93);
+          background: var(--primary-color-hover, #4990CD);
           color: white;
         }
       }
@@ -105,88 +108,7 @@
     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: var(--primary-color, #1961AC);
-        }
-
-        &.active {
-          color: var(--primary-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%;
-        }
-      }
-    }
+    flex: 1;
   }
 }
 

package/src/layouts/index.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import {ConfigProvider, Modal} from "antd";
+import zhCN from 'antd/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import {history, PageFrame} from "../framework";
+
+import AdminLayout from "./admin"
+import {HttpUtils, PageLoading, PageUtils, GlobalData, getThemeConfig, EventBus} from "../framework";
+import {ErrorBoundary} from "../framework";
+
+import '../style/global.less'
+import './index.less'
+
+dayjs.locale('zh-cn');
+
+const configProps = {
+    input: {autoComplete: 'off'},
+    form: {validateMessages: {required: '必填项'}, colon: false},
+    button: {autoInsertSpace: false},
+    locale: zhCN,
+    theme: getThemeConfig(),
+};
+
+export class Layouts extends React.Component {
+    state = {
+        location: history.location,
+        siteInfoLoaded: false,
+        loginChecked: false,
+        loginExpiredVisible: false,
+    };
+
+    unlisten: (() => void) | null = null;
+    unsubscribeLoginExpired: (() => void) | null = null;
+
+    onLocationChange = ({location}: { location: typeof history.location }) => {
+        this.setState({location});
+    };
+
+    getPageType(pathname): 'public' | 'standalone' | 'protected' {
+        if (pathname === '/' || pathname === '/index') return 'protected';
+        if (pathname.startsWith('/public/')) return 'public';
+        if (pathname.startsWith('/standalone/')) return 'standalone';
+        return 'protected';
+    }
+
+    loadData() {
+        const {siteInfoLoaded, loginChecked} = this.state;
+        const pageType = this.getPageType(this.state.location.pathname);
+
+        if (!siteInfoLoaded) {
+            this.loadSiteInfo();
+        }
+
+        if ((pageType === 'protected' || pageType === 'standalone') && !loginChecked) {
+            this.loadLoginInfo();
+        }
+    }
+
+    loadSiteInfo() {
+        HttpUtils.get("/admin/public/site-info").then(data => {
+            GlobalData.setSiteInfo(data);
+            this.setState({siteInfoLoaded: true});
+        }).catch(() => {
+            console.error('[Layout] 加载站点信息失败');
+        });
+    }
+
+    loadLoginInfo() {
+        HttpUtils.get('/admin/public/login-info').then(data => {
+            GlobalData.setDictInfo(data.dictInfo);
+            GlobalData.setLoginInfo(data.loginInfo);
+            GlobalData.setSiteArticles(data.siteArticles);
+
+            if (data.needUpdatePwd) {
+                history.push('/standalone/forceUpdatePwd');
+                return;
+            }
+
+            this.setState({loginChecked: true});
+        }).catch(() => {
+            console.error('[Layout] 初始化应用失败');
+            PageUtils.redirectToLogin();
+        });
+    }
+
+    componentDidMount() {
+        this.unlisten = history.listen(this.onLocationChange);
+        this.unsubscribeLoginExpired = EventBus.on('loginExpired', () => {
+            if (!this.state.loginExpiredVisible) {
+                this.setState({loginExpiredVisible: true});
+            }
+        });
+        this.loadData();
+    }
+
+    componentDidUpdate(prevProps: {}, prevState: typeof this.state) {
+        if (this.state.location !== prevState.location) {
+            this.loadData();
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+        if (this.unsubscribeLoginExpired) {
+            this.unsubscribeLoginExpired();
+        }
+    }
+
+    render() {
+        const {location, siteInfoLoaded, loginChecked} = this.state;
+        const {pathname, search} = location;
+        const ready = siteInfoLoaded && loginChecked;
+        const pageType = this.getPageType(pathname);
+        const showPageFrame = pageType === 'public' || (pageType === 'standalone' && ready);
+
+        return (
+            <ErrorBoundary minimal>
+                <ConfigProvider {...configProps}>
+                    {showPageFrame ? <PageFrame url={pathname + search}/> : ready ? <AdminLayout/> : (
+                        <PageLoading messages={[
+                            !siteInfoLoaded && '加载站点信息...',
+                            !loginChecked && '检查登录中...',
+                        ].filter(Boolean)}/>
+                    )}
+                    {this.renderLoginExpiredModal()}
+                </ConfigProvider>
+            </ErrorBoundary>
+        );
+    }
+
+    renderLoginExpiredModal() {
+        return (
+            <Modal open={this.state.loginExpiredVisible} title="确认操作" okText="确定"
+                   onCancel={() => this.setState({loginExpiredVisible: false})}
+                   onOk={() => {
+                       this.setState({loginExpiredVisible: false});
+                       PageUtils.redirectToLogin();
+                   }}>
+                登录已过期，请重新登录
+            </Modal>
+        );
+    }
+}
+
+export default Layouts;

package/src/main.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+import routes from 'virtual:open-admin/routes';
+import {registerRoutes} from './framework';
+import App from './layouts';
+
+registerRoutes(routes);
+createRoot(document.getElementById('root')).render(<App/>);

package/src/pages/account/changePassword.jsx

@@ -1,26 +1,22 @@
 import React from "react";
 import {Button, Form, Input, Modal} from "antd";
-import {history} from 'umi'
-import {HttpUtils} from "../../framework";
+import {HttpUtils, history} from "../../framework";
 
 export default class extends React.Component {
 
+    state = {
+        successModalOpen: false,
+    };
 
     onFinish = (values) => {
         HttpUtils.post('admin/userCenter/update-pwd', values).then(() => {
-            Modal.success({
-                title: '提示',
-                content: '修改密码成功',
-                onOk: () => {
-                    history.push('/login')
-                }
-            })
+            this.setState({successModalOpen: true});
         })
     }
 
     validator = (rule, value) => {
         return new Promise((resolve, reject) => {
-            HttpUtils.get("admin/sysUser/pwd-strength", {password: value}).then(response => {
+            HttpUtils.get("admin/sysUser/pwd-strength", {password: value}, {showError: false}).then(response => {
                 const rs = response.data
                 if (!rs.success) {
                     reject(rs.message)
@@ -33,6 +29,14 @@ export default class extends React.Component {
 
     render() {
         return <div>
+            <Modal open={this.state.successModalOpen} title="提示" okText="确定"
+                   onCancel={() => this.setState({successModalOpen: false})}
+                   onOk={() => {
+                       this.setState({successModalOpen: false});
+                       history.push('/public/login');
+                   }}>
+                修改密码成功
+            </Modal>
 
             <Form onFinish={this.onFinish} style={{maxWidth: 400}}>
 

package/src/pages/article/$code.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import {HttpUtils, Page} from "../../framework";
+
+export default class extends React.Component {
+
+    state = {
+        article: null,
+        loading: true,
+    }
+
+    componentDidMount() {
+        const code = this.props.params?.code
+        if (code) {
+            HttpUtils.get('admin/article/getByCode', {code}).then(rs => {
+                this.setState({article: rs, loading: false})
+            }).catch(() => {
+                this.setState({loading: false})
+            })
+        } else {
+            this.setState({loading: false})
+        }
+    }
+
+    render() {
+        const {article, loading} = this.state
+
+        if (loading) {
+            return <Page title="加载中...">
+                <div>加载中...</div>
+            </Page>
+        }
+
+        if (!article) {
+            return <Page title="文章不存在">
+                <div>文章不存在或已禁用</div>
+            </Page>
+        }
+
+        return <Page title={article.title}>
+            <div dangerouslySetInnerHTML={{__html: article.content}}/>
+        </Page>
+    }
+}

package/src/pages/index.jsx

@@ -2,8 +2,10 @@ import React from "react";
 import {Card} from "antd";
 import {Page} from "../framework";
 
-export default function () {
-    return <Page title="首页" description="欢迎使用本系统">
-        <Card>欢迎使用本系统</Card>
-    </Page>
+export default class extends React.Component {
+    render() {
+        return <Page title="首页" description="欢迎使用本系统">
+            <Card>欢迎使用本系统</Card>
+        </Page>
+    }
 }

package/src/pages/{login.jsx → public/login.jsx}

@@ -1,26 +1,23 @@
 import React from 'react';
 import {Button, Form, Input, message} from 'antd';
 import {LockOutlined, UserOutlined, WarningOutlined} from '@ant-design/icons';
-import {history} from 'umi';
-import {EventBus, HttpUtils, PageUtils, GlobalData} from "../framework";
+import {EventBus, HttpUtils, GlobalData, history} from "../../framework";
 
 import "./login.less"
 
-function getRedirect() {
-    let redirect = PageUtils.currentParams()['redirect'];
-    if (redirect) {
-        redirect = decodeURIComponent(redirect)
-    } else {
+function getRedirect(query) {
+    let redirect = query?.redirect;
+    if (!redirect) {
         redirect = '/'
     }
     return redirect;
 }
 
-function postLogin(values) {
+function postLogin(values, query) {
     return new Promise((resolve, reject) => {
         HttpUtils.post('/admin/auth/login', values).then(rs => {
             EventBus.emit('loginSuccess')
-            history.push(getRedirect())
+            history.push(getRedirect(query))
             resolve(rs)
         }).catch(e => {
             console.error('[Login] 登录失败:', e);
@@ -63,7 +60,7 @@ export default class extends React.Component {
     submit = values => {
         this.setState({logging: true})
         values.password = encodePassword(values.password)
-        postLogin(values).finally(() => {
+        postLogin(values, this.props.location?.query).finally(() => {
             this.setState({logging: false})
         })
     }

package/src/pages/public/test.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import {Page} from "../../framework";
+import {Button, message, Modal, Space} from "antd";
+
+export default class extends React.Component {
+
+    state = {
+        modalOpen:false
+    }
+
+    render() {
+        return <Page title="测试组件">
+
+            <Space>
+           <Button type={"primary"} onClick={()=>{message.info('你好，李白！')}} >message.info</Button>
+
+            <Button danger onClick={()=>{Modal.info({content:'你好，李白！'})}} >modal.info</Button>
+
+                <Button  onClick={()=>{this.setState({modalOpen:true})}} >modal.组件</Button>
+
+            </Space>
+
+            <Modal title='modal组件' open={this.state.modalOpen} onCancel={()=>this.setState({modalOpen:false})}>
+                内容内容
+            </Modal>
+
+
+        </Page>
+    }
+}

package/src/pages/{forceUpdatePwd.jsx → standalone/forceUpdatePwd.jsx}

@@ -1,50 +1,21 @@
 import React from "react";
 import {Button, Form, Input, message} from "antd";
-import {history} from 'umi'
-import {HttpUtils, PageUtils, GlobalData} from "../framework";
+import {HttpUtils, history} from "../../framework";
 
 export default class extends React.Component {
 
-    state = {
-        checking: true
-    }
-
-    async componentDidMount() {
-        try {
-            const rs = await HttpUtils.get('/admin/public/user-info', null, {showError: false});
-            if (!rs.login) {
-                PageUtils.redirectToLogin();
-                return;
-            }
-            GlobalData.setLoginInfo(rs.loginInfo);
-            this.setState({checking: false});
-        } catch (e) {
-            PageUtils.redirectToLogin();
-        }
-    }
-
     onFinish = (values) => {
         HttpUtils.post('admin/userCenter/update-pwd', values).then(() => {
             message.success('修改密码成功，请重新登录');
-            history.push('/login');
+            history.push('/public/login');
         })
     }
 
     validator = (rule, value) => {
-        return new Promise((resolve, reject) => {
-            HttpUtils.get("admin/sysUser/pwd-strength", {password: value}).then(response => {
-                const rs = response.data
-                if (!rs.success) {
-                    reject(rs.message)
-                }
-                resolve()
-            })
-        })
+        return HttpUtils.get("admin/sysUser/pwd-strength", {password: value}, {showError: false})
     }
 
     render() {
-        if (this.state.checking) return null;
-
         return (
             <div style={{
                 display: 'flex',