@jiangood/open-admin 2.4.7 → 2.5.0

package/src/.umi-production/core/route.tsx

@@ -19,20 +19,18 @@ if (process.env.NODE_ENV === 'development') {
 import React from 'react';
 
 export async function getRoutes() {
-  const routes = {"404":{"path":"*","id":"404","parentId":"@@/global-layout"},"userCenter/ChangePassword":{"path":"userCenter/ChangePassword","id":"userCenter/ChangePassword","parentId":"@@/global-layout"},"system/user/UserPerm":{"path":"system/user/UserPerm","id":"system/user/UserPerm","parentId":"@@/global-layout"},"system/manual/index":{"path":"system/manual","id":"system/manual/index","parentId":"@@/global-layout"},"userCenter/message":{"path":"userCenter/message","id":"userCenter/message","parentId":"@@/global-layout"},"system/dict/index":{"path":"system/dict","id":"system/dict/index","parentId":"@@/global-layout"},"system/file/index":{"path":"system/file","id":"system/file/index","parentId":"@@/global-layout"},"system/role/index":{"path":"system/role","id":"system/role/index","parentId":"@@/global-layout"},"system/user/index":{"path":"system/user","id":"system/user/index","parentId":"@@/global-layout"},"userCenter/manual":{"path":"userCenter/manual","id":"userCenter/manual","parentId":"@@/global-layout"},"system/job/index":{"path":"system/job","id":"system/job/index","parentId":"@@/global-layout"},"system/log/index":{"path":"system/log","id":"system/log/index","parentId":"@@/global-layout"},"system/org/index":{"path":"system/org","id":"system/org/index","parentId":"@@/global-layout"},"system/role/perm":{"path":"system/role/perm","id":"system/role/perm","parentId":"@@/global-layout"},"userCenter/index":{"path":"userCenter","id":"userCenter/index","parentId":"@@/global-layout"},"about":{"path":"about","id":"about","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"login":{"path":"login","id":"login","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const;
+  const routes = {"404":{"path":"*","id":"404","parentId":"@@/global-layout"},"userCenter/ChangePassword":{"path":"userCenter/ChangePassword","id":"userCenter/ChangePassword","parentId":"@@/global-layout"},"system/user/UserPerm":{"path":"system/user/UserPerm","id":"system/user/UserPerm","parentId":"@@/global-layout"},"userCenter/message":{"path":"userCenter/message","id":"userCenter/message","parentId":"@@/global-layout"},"system/dict/index":{"path":"system/dict","id":"system/dict/index","parentId":"@@/global-layout"},"system/file/index":{"path":"system/file","id":"system/file/index","parentId":"@@/global-layout"},"system/role/index":{"path":"system/role","id":"system/role/index","parentId":"@@/global-layout"},"system/user/index":{"path":"system/user","id":"system/user/index","parentId":"@@/global-layout"},"system/job/index":{"path":"system/job","id":"system/job/index","parentId":"@@/global-layout"},"system/log/index":{"path":"system/log","id":"system/log/index","parentId":"@@/global-layout"},"system/org/index":{"path":"system/org","id":"system/org/index","parentId":"@@/global-layout"},"system/role/perm":{"path":"system/role/perm","id":"system/role/perm","parentId":"@@/global-layout"},"userCenter/index":{"path":"userCenter","id":"userCenter/index","parentId":"@@/global-layout"},"about":{"path":"about","id":"about","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"login":{"path":"login","id":"login","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const;
   return {
     routes,
     routeComponents: {
 '404': React.lazy(() => import(/* webpackChunkName: "src__pages__404" */'../../../src/pages/404.jsx')),
 'userCenter/ChangePassword': React.lazy(() => import(/* webpackChunkName: "src__pages__userCenter__ChangePassword" */'../../../src/pages/userCenter/ChangePassword.jsx')),
 'system/user/UserPerm': React.lazy(() => import(/* webpackChunkName: "src__pages__system__user__UserPerm" */'../../../src/pages/system/user/UserPerm.jsx')),
-'system/manual/index': React.lazy(() => import(/* webpackChunkName: "src__pages__system__manual__index" */'../../../src/pages/system/manual/index.jsx')),
 'userCenter/message': React.lazy(() => import(/* webpackChunkName: "src__pages__userCenter__message" */'../../../src/pages/userCenter/message.jsx')),
 'system/dict/index': React.lazy(() => import(/* webpackChunkName: "src__pages__system__dict__index" */'../../../src/pages/system/dict/index.jsx')),
 'system/file/index': React.lazy(() => import(/* webpackChunkName: "src__pages__system__file__index" */'../../../src/pages/system/file/index.jsx')),
 'system/role/index': React.lazy(() => import(/* webpackChunkName: "src__pages__system__role__index" */'../../../src/pages/system/role/index.jsx')),
 'system/user/index': React.lazy(() => import(/* webpackChunkName: "src__pages__system__user__index" */'../../../src/pages/system/user/index.jsx')),
-'userCenter/manual': React.lazy(() => import(/* webpackChunkName: "src__pages__userCenter__manual" */'../../../src/pages/userCenter/manual.jsx')),
 'system/job/index': React.lazy(() => import(/* webpackChunkName: "src__pages__system__job__index" */'../../../src/pages/system/job/index.jsx')),
 'system/log/index': React.lazy(() => import(/* webpackChunkName: "src__pages__system__log__index" */'../../../src/pages/system/log/index.jsx')),
 'system/org/index': React.lazy(() => import(/* webpackChunkName: "src__pages__system__org__index" */'../../../src/pages/system/org/index.jsx')),

package/src/framework/components/ContextMenu/index.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react';
+
+interface ContextMenuItem {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    danger?: boolean;
+    disabled?: boolean;
+    divider?: boolean;
+}
+
+interface ContextMenuProps {
+    x: number;
+    y: number;
+    items: ContextMenuItem[];
+    onClick: (info: { key: string }) => void;
+    onClose: () => void;
+}
+
+export const ContextMenu: React.FC<ContextMenuProps> = ({ x, y, items, onClick, onClose }) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handler = (e: MouseEvent) => {
+            if (ref.current && !ref.current.contains(e.target as Node)) {
+                onClose();
+            }
+        };
+        const timer = setTimeout(() => {
+            document.addEventListener('mousedown', handler);
+        }, 0);
+        return () => {
+            clearTimeout(timer);
+            document.removeEventListener('mousedown', handler);
+        };
+    }, [onClose]);
+
+    return (
+        <div
+            ref={ref}
+            style={{
+                position: 'fixed',
+                left: x,
+                top: y,
+                zIndex: 1050,
+                background: '#fff',
+                borderRadius: 4,
+                padding: '4px 0',
+                minWidth: 120,
+                boxShadow: '0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)',
+            }}
+        >
+            {items.map(item => (
+                item.divider ? (
+                    <div key={item.key} style={{ height: 1, background: '#f0f0f0', margin: '4px 0' }} />
+                ) : (
+                    <div
+                        key={item.key}
+                        onClick={() => {
+                            if (!item.disabled) {
+                                onClick({ key: item.key });
+                                onClose();
+                            }
+                        }}
+                        style={{
+                            padding: '5px 12px',
+                            fontSize: 13,
+                            cursor: item.disabled ? 'not-allowed' : 'pointer',
+                            color: item.danger ? '#ff4d4f' : item.disabled ? '#rgba(0,0,0,0.25)' : '#333',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 8,
+                            background: 'transparent',
+                            transition: 'background 0.15s',
+                            userSelect: 'none',
+                        }}
+                        onMouseEnter={(e) => {
+                            if (!item.disabled) e.currentTarget.style.background = '#f5f5f5';
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.background = 'transparent';
+                        }}
+                    >
+                        {item.icon && <span style={{ fontSize: 14, lineHeight: 1 }}>{item.icon}</span>}
+                        <span>{item.label}</span>
+                    </div>
+                )
+            ))}
+        </div>
+    );
+};

package/src/framework/components/Page/index.less

@@ -1,10 +1,23 @@
-.tmgg-page {
+.oa-page {
   width: 100%;
-
-  // header 48 footer 43, tab 36
   height: 100%;
-
   overflow: auto;
+  background-color: #f5f7fa;
+
+  .oa-page-header {
+    margin-bottom: 16px;
+
+    .oa-page-header-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
 
-  background-color: white;
-}
+    .oa-page-header-left {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+}

package/src/framework/components/Page/index.tsx

@@ -1,16 +1,23 @@
 import React from "react";
+import { Typography } from "antd";
 import './index.less'
 import {ThemeUtils} from "../../utils";
+import { ButtonList } from "../system/ButtonList";
 
 interface PageProps {
     padding?: boolean;
     backgroundGray?: boolean;
     debug?: boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
     children?: React.ReactNode;
 }
 
-export const Page: React.FC<PageProps> = ({ padding = true, backgroundGray = false, debug = false, children }) => {
+export const Page: React.FC<PageProps> = ({ padding = true, backgroundGray = false, debug = false, title, description, actions, children }) => {
+    const hasHeader = title != null;
     const style: React.CSSProperties = {};
+
     if (padding) {
         style.padding = 16;
     }
@@ -21,7 +28,20 @@ export const Page: React.FC<PageProps> = ({ padding = true, backgroundGray = fal
         style.backgroundColor = 'rgba(255, 0, 0, 0.08)';
     }
 
-    return <div className={'tmgg-page'} style={style}>
+    return <div className={'oa-page'} style={style}>
+        {hasHeader && (
+            <div className="oa-page-header">
+                <div className="oa-page-header-top">
+                    <div className="oa-page-header-left">
+                        <div>
+                            {title && <Typography.Title level={5} style={{ margin: 0 }}>{title}</Typography.Title>}
+                            {description && <div><Typography.Text type="secondary">{description}</Typography.Text></div>}
+                        </div>
+                    </div>
+                    {actions && <ButtonList>{actions}</ButtonList>}
+                </div>
+            </div>
+        )}
         {children}
     </div>
-};
+};

package/src/framework/components/ProTable/index.less

@@ -1,14 +1,65 @@
-.tmgg-pro-table{
-  .search-form {
-    .ant-form-item {
-      margin: 0;
+.oa-pro-table {
+    .filter-bar {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 12px 20px;
+        align-items: center;
+        padding: 16px 20px;
+        background: #fff;
+        border: 1px solid #e8e8e8;
+        border-radius: 6px;
+        margin-bottom: 16px;
+
+        .ant-form-item {
+            margin: 0;
+
+            .ant-form-item-row {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                flex-direction: row;
+            }
+
+            .ant-form-item-label {
+                flex-shrink: 0;
+                overflow: visible;
+                padding: 0;
+                white-space: nowrap;
+
+                label {
+                    font-size: 13px;
+                    color: #666;
+                }
+            }
+
+            .ant-form-item-control {
+                flex: 1;
+            }
+        }
+
+        .filter-actions {
+            grid-column: -2 / -1;
+            display: flex;
+            gap: 8px;
+            justify-content: flex-end;
+        }
+
+        .span-2 {
+            grid-column: span 2;
+        }
+    }
+
+    .pro-table-wrapper {
+        background: #fff;
+        border: 1px solid #e8e8e8;
+        border-radius: 6px;
     }
 
-    .form-item-double-width {
-      .ant-form-item-control {
-        flex: 0 0 480px;
-      }
+    .pro-table-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 8px;
     }
-  }
 }
 

package/src/framework/components/ProTable/index.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import {Button, Form, Table} from 'antd';
-import {SearchOutlined} from "@ant-design/icons";
 
-import { Toolbar } from './components/ToolBar';
 import {StringUtils} from "../../utils";
 
 import './index.less'
@@ -47,7 +45,6 @@ export class ProTable extends React.Component {
             this.state.pageSize = props.defaultPageSize
         }
         this.id = StringUtils.random(32)
-        this.showToolbarSearch = this.props.showToolbarSearch
     }
 
     formRef = React.createRef()
@@ -122,23 +119,17 @@ export class ProTable extends React.Component {
             columns,
             rowSelection,
             rowKey = "id",
-            toolbarOptions,
         } = this.props
 
 
-        return <div className={'tmgg-pro-table '} id={this.id}>
+        return <div className={'oa-pro-table '} id={this.id}>
             {this.renderForm()}
-                {toolbarOptions !== false && <Toolbar
-                    actionRef={actionRef}
-                    toolBarRender={this.getToolBarRenderNode(toolBarRender)}
-
-                    onRefresh={() => this.loadData()}
-                    onSearch={this.onSearch}
-                    loading={this.state.loading}
-                    params={this.state.params}
-                    showSearch={this.showToolbarSearch}
-                    changeFormValues={this.changeFormValues}
-                />}
+            <div className="pro-table-wrapper">
+                {toolBarRender && <div className="pro-table-toolbar">
+                    <div className="pro-table-toolbar-left">
+                        {this.getToolBarRenderNode(toolBarRender)}
+                    </div>
+                </div>}
 
 
                 <Table
@@ -167,45 +158,37 @@ export class ProTable extends React.Component {
                     }}
 
                     footer={this.state.extData.summary ? () => this.state.extData.summary : null}
-                    bordered={this.props.bordered}
+                    bordered={this.props.bordered ?? false}
                 />
+            </div>
         </div>
 
     }
 
 
     renderForm = () => {
-        if (!this.props.children) {
-            return
-        }
-        if (this.props["searchFormItemsRender"]) {
-            throw new Error('不再支持 searchFormItemsRender，请直接放到ProTable的子节点')
-        }
-
-        return <div style={{marginBottom: '16px'}}>
-                <Form
-                    layout="inline"
-                    onFinish={(values) => this.onSearch(values)}
-                    ref={(instance) => {
-                        this.formRef.current = instance;
-                        if (this.props.formRef != null) {
-                            this.props.formRef.current = instance;
-                        }
-                    }}
-                    style={{gap: '8px 0px'}}
-                    labelCol={{flex: '80px'}}
-                    wrapperCol={{flex: '200px'}}
-                    className='search-form'
-                >
-
-                    {this.props.children}
-                    <div style={{marginLeft: '16px'}}>
-                        <Button type='primary' htmlType="submit" icon={<SearchOutlined/>}> 查询
-                        </Button>
-                    </div>
-
-                </Form>
-        </div>;
+        if (!this.props.children) return
+
+        return (
+            <Form
+                className="filter-bar"
+                style={{gridTemplateColumns: `repeat(${this.props.searchColumns ?? 4}, 1fr)`}}
+                onFinish={(values) => this.onSearch(values)}
+                ref={(instance) => {
+                    this.formRef.current = instance;
+                    if (this.props.formRef) this.props.formRef.current = instance;
+                }}
+            >
+                {this.props.children}
+                <div className="filter-actions">
+                    <Button type='primary' htmlType="submit">查询</Button>
+                    <Button onClick={() => {
+                        this.formRef.current?.resetFields();
+                        this.formRef.current?.submit();
+                    }}>重置</Button>
+                </div>
+            </Form>
+        )
     };
 
     getToolBarRenderNode(toolBarRender) {

package/src/framework/components/index.ts

@@ -7,6 +7,7 @@ export * from './LinkButton'
 export * from './Gap'
 export * from './Page'
 export * from './ValueType'
+export * from './ContextMenu'
 export * from './OrgTree'
 export * from './RoleTree'
 export * from './ViewRange'

package/src/framework/fields/FieldTableSelect/index.tsx

@@ -50,7 +50,6 @@ export class FieldTableSelect extends React.Component {
                         }}>选择</Button>;
                 }
             }]}
-            showToolbarSearch
             request={(params) => {
                 params.selected = this.props.value;
                 return HttpUtils.get(this.props.url, params);

package/src/layouts/admin/HeaderRight.jsx

@@ -1,5 +1,5 @@
 import {Badge, Dropdown} from "antd";
-import {NotificationOutlined, QuestionCircleOutlined, SettingOutlined, UserOutlined} from "@ant-design/icons";
+import {NotificationOutlined, SettingOutlined, UserOutlined} from "@ant-design/icons";
 import React from "react";
 import {history} from "umi";
 import {DeviceUtils, HttpUtils, MessageUtils,  PageUtils, SysUtils} from "../../framework";
@@ -62,11 +62,6 @@ export class HeaderRight extends React.Component {
                 </Badge>
             </div>
 
-            <div className='item' title='操作手册' onClick={() => PageUtils.open('/userCenter/manual', '操作手册')}>
-                <QuestionCircleOutlined />
-            </div>
-
-
             <div className='item'>
 
                 <Dropdown menu={{

package/src/layouts/admin/TabPageRender.jsx

@@ -1,7 +1,7 @@
 import React, {useState, useEffect, useRef} from "react";
 import {history} from "umi";
 import {PageRender} from "../PageRender";
-import {UrlUtils} from "../../framework";
+import {UrlUtils, ContextMenu} from "../../framework";
 
 const MAX_TABS = 20;
 
@@ -17,6 +17,7 @@ function getLabel(pathname, search, pathMenuMap) {
 export function TabPageRender({pathMenuMap}) {
     const [tabs, setTabs] = useState([]);
     const [activeKey, setActiveKey] = useState(null);
+    const [contextMenu, setContextMenu] = useState(null);
     const accessOrderRef = useRef([]);
     const lastClickTimeRef = useRef({});
     const activeKeyRef = useRef(activeKey);
@@ -56,7 +57,7 @@ export function TabPageRender({pathMenuMap}) {
         const {pathname, search} = history.location;
         const key = pathname + (search || '');
         recordAccess(key);
-        setTabs([{key, label: getLabel(pathname, search, pathMenuMap), closable: false, content: <PageRender pathname={pathname}/>}]);
+        setTabs([{key, label: getLabel(pathname, search, pathMenuMap), closable: true, content: <PageRender pathname={pathname}/>}]);
         setActiveKey(key);
 
         return unlisten;
@@ -79,46 +80,83 @@ export function TabPageRender({pathMenuMap}) {
         return () => document.removeEventListener('close-page-event', handler);
     }, []);
 
+    const handleTabRefresh = (key) => {
+        setTabs(prev => {
+            const idx = prev.findIndex(t => t.key === key);
+            if (idx === -1) return prev;
+            const originalContent = prev[idx].content;
+            const next = [...prev];
+            next[idx] = {...next[idx], content: '刷新中...'};
+            requestAnimationFrame(() => {
+                setTabs(prev2 => {
+                    const idx2 = prev2.findIndex(t => t.key === key);
+                    if (idx2 === -1) return prev2;
+                    const next2 = [...prev2];
+                    next2[idx2] = {...next2[idx2], content: originalContent};
+                    return next2;
+                });
+            });
+            return next;
+        });
+    };
+
     const handleTabClick = (key) => {
         const now = Date.now();
         const last = lastClickTimeRef.current[key] || 0;
         lastClickTimeRef.current[key] = now;
         if (now - last < 300) {
-            // Double click → refresh
-            setTabs(prev => {
-                const idx = prev.findIndex(t => t.key === key);
-                if (idx === -1) return prev;
-                const originalContent = prev[idx].content;
-                const next = [...prev];
-                next[idx] = {...next[idx], content: '刷新中...'};
-                requestAnimationFrame(() => {
-                    setTabs(prev2 => {
-                        const idx2 = prev2.findIndex(t => t.key === key);
-                        if (idx2 === -1) return prev2;
-                        const next2 = [...prev2];
-                        next2[idx2] = {...next2[idx2], content: originalContent};
-                        return next2;
-                    });
-                });
-                return next;
-            });
+            handleTabRefresh(key);
         } else if (key !== activeKey) {
             history.push(key);
         }
     };
 
-    const handleClose = (key, e) => {
-        e.stopPropagation();
+    const closeTab = (key) => {
         setTabs(prev => {
             const next = prev.filter(t => t.key !== key);
             accessOrderRef.current = accessOrderRef.current.filter(k => k !== key);
-            if (key === activeKeyRef.current && next.length > 0) {
+            if (next.length === 0) {
+                history.push('/');
+            } else if (key === activeKeyRef.current) {
                 history.push(next[next.length - 1].key);
             }
             return next;
         });
     };
 
+    const handleClose = (key, e) => {
+        e.stopPropagation();
+        closeTab(key);
+    };
+
+    const handleTabContextMenu = (e, key) => {
+        e.preventDefault();
+        setContextMenu({x: e.clientX, y: e.clientY, tabKey: key});
+    };
+
+    const handleContextMenuClick = ({key: actionKey}) => {
+        const {tabKey} = contextMenu;
+        setContextMenu(null);
+        if (actionKey === 'refresh') {
+            handleTabRefresh(tabKey);
+        } else if (actionKey === 'close') {
+            closeTab(tabKey);
+        } else if (actionKey === 'closeOthers') {
+            setTabs(prev => {
+                const next = prev.filter(t => t.key === tabKey || !t.closable);
+                accessOrderRef.current = [tabKey];
+                if (tabKey !== activeKeyRef.current) {
+                    history.push(tabKey);
+                }
+                return next;
+            });
+        } else if (actionKey === 'closeAll') {
+            accessOrderRef.current = [];
+            setTabs([]);
+            setTimeout(() => history.push('/'), 0);
+        }
+    };
+
     if (tabs.length === 0) return null;
 
     return (
@@ -129,6 +167,7 @@ export function TabPageRender({pathMenuMap}) {
                         key={tab.key}
                         className={'oa-tab' + (tab.key === activeKey ? ' active' : '')}
                         onClick={() => handleTabClick(tab.key)}
+                        onContextMenu={(e) => handleTabContextMenu(e, tab.key)}
                     >
                         <span className="oa-tab-label">{tab.label}</span>
                         {tab.closable && tabs.length > 1 && (
@@ -137,6 +176,24 @@ export function TabPageRender({pathMenuMap}) {
                     </div>
                 ))}
             </div>
+            {contextMenu && (() => {
+                const tab = tabs.find(t => t.key === contextMenu.tabKey);
+                const closableCount = tabs.filter(t => t.closable).length;
+                return (
+                    <ContextMenu
+                        x={contextMenu.x}
+                        y={contextMenu.y}
+                        items={[
+                            {key: 'refresh', label: '刷新'},
+                            {key: 'close', label: '关闭', disabled: !tab?.closable},
+                            {key: 'closeOthers', label: '关闭其他', disabled: tabs.length <= 1},
+                            {key: 'closeAll', label: '关闭全部', disabled: closableCount === 0},
+                        ]}
+                        onClick={handleContextMenuClick}
+                        onClose={() => setContextMenu(null)}
+                    />
+                );
+            })()}
             <div className="oa-tabs-content">
                 {tabs.map(tab => (
                     <div

package/src/layouts/admin/index.jsx

@@ -3,11 +3,10 @@ import {Badge, Layout, Menu, Skeleton, Watermark} from 'antd';
 
 import {history, Link} from 'umi';
 import "./index.less"
-import {ErrorBoundary, Gap, HttpUtils, NamedIcon, PageUtils, SysUtils, ThemeUtils, TreeUtils} from "../../framework";
+import {ErrorBoundary, HttpUtils, NamedIcon, PageUtils, SysUtils, ThemeUtils, TreeUtils} from "../../framework";
 
 import { HeaderRight } from "./HeaderRight";
 import { TabPageRender } from "./TabPageRender";
-
 const {Header, Sider, Content} = Layout;
 /**
  * 带菜单的布局，主要处理布局宇框架结构
@@ -112,7 +111,6 @@ export default class extends React.Component {
             const defaultGroup = {
                 key: '_default_group',
                 label: '业务模块',
-                title: '业',
                 icon: <NamedIcon name="AppstoreOutlined" style={{fontSize: 12}}/>,
                 children: leafRootNodes,
                 type: 'directory',
@@ -197,30 +195,26 @@ export default class extends React.Component {
         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")}}>
-            <Header className='header'>
-                <div className='header-left'>
-                    {siteInfo.showLogo !== false && siteInfo.logoUrl &&
-                        <img className='logo-img' src={siteInfo.logoUrl} onClick={() => history.push('/')} alt='logo'/>}
+             <Sider id='left-sider'
+                   width={180}
+                   collapsible
+                   breakpoint={'md'}
+             >
+                <div className='sider-header'>
+                    <img className='logo-img' src="./logo.svg" onClick={() => history.push('/')} alt='logo'/>
                     <h3 className='hide-on-mobile'>
-                        <Link to="/" style={{color: ThemeUtils.getColor("primary-color")}}>{siteInfo.title} </Link>
+                        <Link to="/" style={{color: 'rgba(255,255,255,0.85)'}}>{siteInfo.title}</Link>
                     </h3>
-
                 </div>
-                {this.renderTopMenu()}
-                <HeaderRight/>
-            </Header>
-
-            <Layout style={{flex: 1, overflow: 'hidden'}}>
-                <Sider id='left-sider'
-                       collapsible
-                       breakpoint={'md'}
-                >
-                    <Gap/>
-
+                {this.renderLeftMenu()}
 
-                    {this.renderLeftMenu()}
+            </Sider>
 
-                </Sider>
+            <Layout style={{flex: 1, overflow: 'hidden'}}>
+                <Header className='header'>
+                    {this.renderTopMenu()}
+                    <HeaderRight/>
+                </Header>
 
                 <Content id='admin-layout-content'>
                     <ErrorBoundary>