@jiangood/open-admin 2.5.9 → 3.0.1

package/src/layouts/admin/index.less

@@ -108,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

@@ -1,5 +1,5 @@
 import React from "react";
-import {HttpUtils, Page, PageUtils} from "../../framework";
+import {HttpUtils, Page} from "../../framework";
 
 export default class extends React.Component {
 
@@ -9,7 +9,7 @@ export default class extends React.Component {
     }
 
     componentDidMount() {
-        const code = PageUtils.currentPathnameLastPart()
+        const code = this.props.params?.code
         if (code) {
             HttpUtils.get('admin/article/getByCode', {code}).then(rs => {
                 this.setState({article: rs, loading: false})

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,42 +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 HttpUtils.get("admin/sysUser/pwd-strength", {password: value})
+        return HttpUtils.get("admin/sysUser/pwd-strength", {password: value}, {showError: false})
     }
 
     render() {
-        if (this.state.checking) return null;
-
         return (
             <div style={{
                 display: 'flex',

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

@@ -1,11 +1,12 @@
 import {PlusOutlined} from '@ant-design/icons'
-import {Button, Form, Input, InputNumber, Modal, Popconfirm} from 'antd'
+import {Button, Form, Input, InputNumber, Popconfirm} from 'antd'
 import React from 'react'
 import {
     DictUtils,
     FieldBoolean,
     FieldDictSelect,
     FieldEditor,
+    FormModal,
     HttpUtils,
     Page,
     PermActions,
@@ -17,28 +18,27 @@ const {TextArea} = Input;
 export default class extends React.Component {
 
     state = {
-        formValues: {},
-        formOpen: false,
+        editing: false,
     }
 
-    formRef = React.createRef()
+    modalRef = React.createRef()
     tableRef = React.createRef()
 
     handleAdd = () => {
-        this.setState({formOpen: true, formValues: {}})
+        this.setState({editing: false})
+        this.modalRef.current.open({})
     }
 
     handleEdit = record => {
-        this.setState({formOpen: true, formValues: record})
+        this.setState({editing: true})
+        this.modalRef.current.open(record)
     }
 
-    onFinish = values => {
+    onFinish = async values => {
         const isNew = !values.id;
         const url = isNew ? 'admin/article/create' : 'admin/article/update';
-        HttpUtils.post(url, values).then(rs => {
-            this.setState({formOpen: false})
-            this.tableRef.current.reload()
-        })
+        await HttpUtils.post(url, values)
+        this.tableRef.current.reload()
     }
 
     handleDelete = record => {
@@ -94,59 +94,54 @@ export default class extends React.Component {
         return <Page
             title="文章管理"
             description="管理系统文章，如关于、帮助等页面"
-            actions={<Button perm='article:create' type='primary' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>}
         >
             <ProTable
                 actionRef={this.tableRef}
+                toolBarRender={() => (
+                    <PermActions>
+                        <Button perm='article:create' type='primary' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>
+                    </PermActions>
+                )}
                 request={(params) => HttpUtils.get('admin/article/page', params)}
                 columns={this.columns}
-            >
-                <Form.Item label='编码' name='code'>
-                    <Input/>
+                searchFormRender={() => (
+                    <>
+                        <Form.Item label='编码' name='code'>
+                            <Input/>
+                        </Form.Item>
+                        <Form.Item label='标题' name='title'>
+                            <Input/>
+                        </Form.Item>
+                    </>
+                )}
+            />
+
+            <FormModal ref={this.modalRef} title='文章' width={800} onFinish={this.onFinish}>
+
+                <Form.Item label='编码' name='code' rules={[{required: true}]}>
+                    <Input disabled={this.state.editing}/>
                 </Form.Item>
-                <Form.Item label='标题' name='title'>
+
+                <Form.Item label='标题' name='title' rules={[{required: true}]}>
                     <Input/>
                 </Form.Item>
-            </ProTable>
-
-            <Modal title='文章'
-                   open={this.state.formOpen}
-                   onOk={() => this.formRef.current.submit()}
-                   onCancel={() => this.setState({formOpen: false})}
-                   destroyOnHidden
-                   width={800}
-            >
-                <Form ref={this.formRef} labelCol={{flex: '100px'}}
-                      initialValues={this.state.formValues}
-                      onFinish={this.onFinish}
-                >
-                    <Form.Item name='id' noStyle></Form.Item>
-
-                    <Form.Item label='编码' name='code' rules={[{required: true}]}>
-                        <Input disabled={!!this.state.formValues.id}/>
-                    </Form.Item>
-
-                    <Form.Item label='标题' name='title' rules={[{required: true}]}>
-                        <Input/>
-                    </Form.Item>
-
-                    <Form.Item label='内容' name='content'>
-                        <FieldEditor />
-                    </Form.Item>
-
-                    <Form.Item label='显示位置' name='position' rules={[{required: true}]}>
-                        <FieldDictSelect typeCode='articlePosition'/>
-                    </Form.Item>
-
-                    <Form.Item label='排序' name='seq'>
-                        <InputNumber/>
-                    </Form.Item>
-
-                    <Form.Item label='启用' name='enabled'>
-                        <FieldBoolean/>
-                    </Form.Item>
-                </Form>
-            </Modal>
+
+                <Form.Item label='内容' name='content'>
+                    <FieldEditor />
+                </Form.Item>
+
+                <Form.Item label='显示位置' name='position' rules={[{required: true}]}>
+                    <FieldDictSelect typeCode='articlePosition'/>
+                </Form.Item>
+
+                <Form.Item label='排序' name='seq'>
+                    <InputNumber/>
+                </Form.Item>
+
+                <Form.Item label='启用' name='enabled'>
+                    <FieldBoolean/>
+                </Form.Item>
+            </FormModal>
         </Page>
     }
 }