@jiangood/open-admin 2.5.9 → 3.0.1

package/src/framework/utils/system/PageUtils.ts

@@ -0,0 +1,49 @@
+import {history} from '../../router';
+import {StringUtils} from "../StringUtils";
+import {UrlUtils} from "../UrlUtils";
+import {EventBus} from "../EventBus";
+
+export class PageUtils {
+    static redirectToLogin(): void {
+        if (PageUtils.currentPathname() === '/public/login') {
+            return;
+        }
+        const url = PageUtils.currentUrl();
+        const encodedUrl = encodeURIComponent(url);
+        history.push(`/public/login?redirect=${encodedUrl}`);
+    }
+
+    static currentParams(): Record<string, string | undefined> {
+        return UrlUtils.getParams();
+    }
+
+    static currentPathname(): string {
+        const path = window.location.hash.substring(1);
+        return StringUtils.subBefore(path, '?');
+    }
+
+    static currentUrl(): string {
+        return window.location.hash.substring(1);
+    }
+
+    static currentPathnameLastPart(): string | undefined {
+        const path = this.currentPathname();
+        return StringUtils.subAfterLast(path, '/') || undefined;
+    }
+
+    static open(path: string, label = '未命名'): void {
+        let targetPath = path;
+        if (label) {
+            targetPath = UrlUtils.setParam(targetPath, '_label', label);
+        }
+        history.push(targetPath);
+    }
+
+    static currentLabel(): string | undefined {
+        return this.currentParams()['_label'];
+    }
+
+    static closeCurrent(): void {
+        EventBus.emit('closePage', PageUtils.currentUrl());
+    }
+}

package/src/framework/utils/system/{PermUtils.js → PermUtils.ts}

@@ -2,14 +2,13 @@ import {GlobalData} from '../../GlobalData';
 import {ArrayUtils} from '../ArrayUtils';
 
 export class PermUtils {
-    static getPermissions() {
-        const info = GlobalData.getLoginInfo();
-        const { permissions } = info;
+    static getPermissions(): string[] {
+        const { permissions } = GlobalData.getLoginInfo();
         if (permissions == null || permissions.length === 0) return [];
         return permissions;
     }
 
-    static hasPermission(perm) {
+    static hasPermission(perm: string | null | undefined): boolean {
         if (perm === null || perm === undefined || perm === '') return false;
         const permissions = PermUtils.getPermissions();
         if (permissions.length === 0) return false;
@@ -17,11 +16,11 @@ export class PermUtils {
         return permissions.indexOf(perm) > -1;
     }
 
-    static isPermitted(p) {
+    static isPermitted(p: string | null | undefined): boolean {
         return PermUtils.hasPermission(p);
     }
 
-    static notPermitted(p) {
+    static notPermitted(p: string | null | undefined): boolean {
         return !PermUtils.isPermitted(p);
     }
 }

package/src/framework/utils/system/index.ts

@@ -2,5 +2,3 @@ export * from './DictUtils'
 export * from './PermUtils'
 export * from './PageUtils'
 export * from './HttpUtils'
-export * from './FormRegistry'
-export * from './ThemeUtils'

package/src/framework/views/ViewBoolean/index.tsx

@@ -1,6 +1,9 @@
+import React from 'react';
 import type {ViewProps} from "../types";
 
-export function ViewBoolean(props: ViewProps<boolean>) {
-    const {value} = props;
-    return value == null ? null : (value ? '是' : '否');
+export class ViewBoolean extends React.Component<ViewProps<boolean>> {
+    render() {
+        const {value} = this.props;
+        return value == null ? null : (value ? '是' : '否');
+    }
 }

package/src/framework/views/ViewFileButton/index.tsx

@@ -1,22 +1,27 @@
 import React from "react";
-import {Button} from "antd";
-import { MessageUtils } from "../../utils";
+import {Button, Modal} from "antd";
 import { ViewFile } from "../ViewFile";
 
 /**
  * 文件按钮查看组件
  */
 export class ViewFileButton extends React.Component {
+    state = { open: false }
+
     render() {
-        const {value, height} = this.props;
+        const {value} = this.props;
         if (!value) {
             return null;
         }
         
-        return <Button type="link" size="small" onClick={()=>{
-            MessageUtils.alert(<ViewFile value={this.props.value} />)
-        }}>
-            查看文件
-        </Button>;
+        return <>
+            <Button type="link" size="small" onClick={() => this.setState({open: true})}>
+                查看文件
+            </Button>
+            <Modal open={this.state.open} title="文件预览" footer={null} width="80vw"
+                   onCancel={() => this.setState({open: false})}>
+                <ViewFile value={this.props.value} />
+            </Modal>
+        </>;
     }
 }

package/src/framework/views/ViewImage/index.tsx

@@ -5,6 +5,11 @@ import {UrlUtils} from '../../utils';
 
 export class ViewImage extends React.Component {
 
+  state = {
+    modalOpen: false,
+    previewUrl: null,
+  };
+
   render() {
     let vs = this.props.value
 
@@ -34,29 +39,29 @@ export class ViewImage extends React.Component {
       urlList.push(UrlUtils.contextPath(v));
     }
 
+    const closeModal = () => this.setState({modalOpen: false});
+
     const imgs = urlList.map((url) => (
       <img
         style={{ display: 'inline-block' }}
         key={url}
         src={url}
-        onClick={() => this.preview(url)}
+        onClick={() => this.setState({modalOpen: true, previewUrl: url})}
         width={60}
         height={60}
       />
     ));
 
-    return imgs;
+    return (
+      <>
+        {imgs}
+        <Modal open={this.state.modalOpen} title="预览图片" width="70vw" footer={null}
+               onCancel={closeModal}>
+          <div style={{maxHeight:'70vh',overflow:'auto'}}>
+            <img src={this.state.previewUrl} style={{maxWidth: '100%'}}/>
+          </div>
+        </Modal>
+      </>
+    );
   }
-
-  preview = (url) => {
-    Modal.info({
-      title: '预览图片',
-      width: '70vw',
-      content: <div style={{maxHeight:'70vh',overflow:'auto'}}>
-        <img src={url}  style={{maxWidth: '100%'}}/>
-      </div>,
-
-    });
-  };
-
 }

package/src/framework/views/ViewRange/index.tsx

@@ -5,11 +5,14 @@ interface ViewRangeProps {
   max?: string;
 }
 
-export const ViewRange: React.FC<ViewRangeProps> = ({ min, max }) => {
-  if ((min == null || min === "") && (max == null || max === "")) {
-    return null;
+export class ViewRange extends React.Component<ViewRangeProps> {
+  render() {
+    const { min, max } = this.props;
+    if ((min == null || min === "") && (max == null || max === "")) {
+      return null;
+    }
+    const showMin = min ?? '未知';
+    const showMax = max ?? '未知';
+    return <>{showMin} - {showMax}</>;
   }
-  const showMin = min ?? '未知';
-  const showMax = max ?? '未知';
-  return <>{showMin} - {showMax}</>;
-};
+}

package/src/framework/views/ViewText/index.tsx

@@ -4,6 +4,10 @@ import {StringUtils} from "../../utils";
 
 export class ViewText extends React.Component {
 
+    state = {
+        modalOpen: false,
+    };
+
     static defaultProps = {
         ellipsis: false,
         maxLength: 15
@@ -23,20 +27,14 @@ export class ViewText extends React.Component {
         const short = StringUtils.ellipsis(value, maxLength);
         return (
             <Tooltip placement="topLeft" title={value}>
-                <span style={{cursor: 'pointer', borderBottom: '1px dashed #d9d9d9'}} onClick={this.showModal}>
+                <span style={{cursor: 'pointer', borderBottom: '1px dashed #d9d9d9'}} onClick={() => this.setState({modalOpen: true})}>
                     {short}
                 </span>
+                <Modal open={this.state.modalOpen} title="长文本内容" width={700} footer={null}
+                       onCancel={() => this.setState({modalOpen: false})}>
+                    <div style={{height: 500, overflowY: 'auto'}}>{value}</div>
+                </Modal>
             </Tooltip>
         );
     }
-
-    showModal = () => {
-        const {value} = this.props;
-        Modal.info({
-            icon: null,
-            title: '长文本内容',
-            content: <div style={{height: 500, overflowY: 'auto'}}>{value}</div>,
-            width: 700
-        });
-    };
 }

package/src/layouts/admin/AdminTabs.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import {CloseOutlined} from '@ant-design/icons';
+import {ContextMenu} from '../../framework';
+import './AdminTabs.less';
+
+export class AdminTabs extends React.Component {
+    state = {
+        contextMenu: null,
+        contextMenuTabKey: null,
+    };
+
+    handleContextMenu = (e, key) => {
+        e.preventDefault();
+        this.setState({
+            contextMenu: {x: e.clientX, y: e.clientY},
+            contextMenuTabKey: key,
+        });
+    };
+
+    handleContextMenuClick = ({key: actionKey}) => {
+        const tabKey = this.state.contextMenuTabKey;
+        this.setState({contextMenu: null});
+        const {onRefresh, onClose, onCloseOthers, onCloseAll} = this.props;
+        if (actionKey === 'refresh') {
+            onRefresh(tabKey);
+        } else if (actionKey === 'close') {
+            onClose(tabKey);
+        } else if (actionKey === 'closeOthers') {
+            onCloseOthers(tabKey);
+        } else if (actionKey === 'closeAll') {
+            onCloseAll();
+        }
+    };
+
+    render() {
+        const {tabs, activeKey, onChange, onClose} = this.props;
+        const {contextMenu} = this.state;
+
+        return (
+            <>
+                <div className="admin-tabs-bar">
+                    {tabs.map(tab => (
+                        <div
+                            key={tab.key}
+                            className={`admin-tab${tab.key === activeKey ? ' active' : ''}`}
+                            onClick={() => onChange(tab.key)}
+                            onContextMenu={e => this.handleContextMenu(e, tab.key)}
+                        >
+                            <span className="admin-tab-label">{tab.label}</span>
+                            {tabs.length > 1 && (
+                                <CloseOutlined
+                                    className="admin-tab-close"
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        onClose(tab.key);
+                                    }}
+                                />
+                            )}
+                        </div>
+                    ))}
+                </div>
+                {contextMenu && (
+                    <ContextMenu
+                        x={contextMenu.x}
+                        y={contextMenu.y}
+                        items={[
+                            {key: 'refresh', label: '刷新'},
+                            {key: 'close', label: '关闭', disabled: tabs.length <= 1},
+                            {key: 'closeOthers', label: '关闭其他', disabled: tabs.length <= 1},
+                            {key: 'closeAll', label: '关闭全部'},
+                        ]}
+                        onClick={this.handleContextMenuClick}
+                        onClose={() => this.setState({contextMenu: null})}
+                    />
+                )}
+            </>
+        );
+    }
+}

package/src/layouts/admin/AdminTabs.less

@@ -0,0 +1,63 @@
+.admin-tabs-bar {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-shrink: 0;
+    border-bottom: 1px solid #e8e8e8;
+    background: #fff;
+
+    &::-webkit-scrollbar {
+        height: 0;
+    }
+
+    .admin-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);
+        }
+
+        &.active {
+            color: var(--primary-color);
+            background: #fff;
+            font-weight: 500;
+        }
+
+        .admin-tab-label {
+            max-width: 120px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .admin-tab-close {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 16px;
+            height: 16px;
+            font-size: 12px;
+            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);
+            }
+        }
+    }
+}

package/src/layouts/admin/HeaderRight.jsx

@@ -1,7 +1,6 @@
-import {Avatar, Dropdown} from "antd";
+import {Avatar, Dropdown, Modal} from "antd";
 import React from "react";
-import {history} from "umi";
-import {DeviceUtils, HttpUtils, MessageUtils, PageUtils, GlobalData, ThemeUtils} from "../../framework";
+import {DeviceUtils, HttpUtils, PageUtils, GlobalData, getToken, history, ARTICLE_HEADER_AVATAR_DROPDOWN, ARTICLE_HEADER_RIGHT} from "../../framework";
 
 export class HeaderRight extends React.Component {
 
@@ -9,6 +8,8 @@ export class HeaderRight extends React.Component {
         isMobileDevice: false,
         dropdownArticles: [],
         headerArticles: [],
+        alertVisible: false,
+        confirmVisible: false,
     };
 
     componentDidMount() {
@@ -21,23 +22,18 @@ export class HeaderRight extends React.Component {
     loadArticles = () => {
         const siteArticles = GlobalData.getSiteArticles();
         this.setState({
-            dropdownArticles: siteArticles['HEADER_AVATAR_DROPDOWN'] || [],
-            headerArticles: siteArticles['HEADER_RIGHT'] || [],
+            dropdownArticles: siteArticles[ARTICLE_HEADER_AVATAR_DROPDOWN] || [],
+            headerArticles: siteArticles[ARTICLE_HEADER_RIGHT] || [],
         })
     }
 
     logout = () => {
         HttpUtils.post('admin/auth/logout').then(async () => {
             localStorage.clear()
-            await MessageUtils.alert('退出登录成功');
-            history.replace('/login')
+            this.setState({alertVisible: true})
         }).catch(async e => {
             console.error('[HeaderRight] 退出登录失败:', e);
-            const confirm = await MessageUtils.confirm('退出登录失败，是否清空缓存');
-            if (confirm) {
-                localStorage.clear();
-                history.replace('/login')
-            }
+            this.setState({confirmVisible: true})
         })
     }
 
@@ -93,12 +89,30 @@ export class HeaderRight extends React.Component {
                 items: menuItems,
             }}>
                 <div className='item' style={{cursor: 'pointer'}}>
-                    <Avatar size="default" style={{backgroundColor: ThemeUtils.getColor('primary-color')}}>
+                    <Avatar size="default" style={{backgroundColor: getToken().colorPrimary}}>
                         {info.name?.charAt(0)}
                     </Avatar>
                     <span style={{marginLeft: 8}}>{info.name}</span>
                 </div>
             </Dropdown>
+
+            <Modal open={this.state.alertVisible} title="提示" okText="确定"
+                   onCancel={() => this.setState({alertVisible: false})}
+                   onOk={() => {
+                       this.setState({alertVisible: false});
+                        history.replace('/public/login')
+                    }}>
+                 退出登录成功
+            </Modal>
+            <Modal open={this.state.confirmVisible} title="确认操作" okText="确定" cancelText="取消"
+                   onCancel={() => this.setState({confirmVisible: false})}
+                   onOk={() => {
+                       this.setState({confirmVisible: false});
+                       localStorage.clear();
+                       history.replace('/public/login')
+                   }}>
+                退出登录失败，是否清空缓存
+            </Modal>
         </div>
     }
 }

package/src/layouts/admin/TabLayout.jsx

@@ -0,0 +1,124 @@
+import React from "react";
+import {history, PageFrame, UrlUtils, EventBus} from "../../framework";
+import {AdminTabs} from "./AdminTabs";
+
+function getLabel(pathname, search, pathMenuMap) {
+    if (pathname === '/') return '首页';
+    const params = UrlUtils.getParams(search);
+    if (params._label) return params._label;
+    const menu = pathMenuMap[pathname];
+    if (menu) return menu.name;
+    return '未命名';
+}
+
+export class TabLayout extends React.Component {
+    constructor(props) {
+        super(props);
+        const initUrl = history.location.pathname + history.location.search;
+        const qIndex = initUrl.indexOf('?');
+        const initPathname = qIndex === -1 ? initUrl : initUrl.substring(0, qIndex);
+        const initSearch = qIndex === -1 ? '' : initUrl.substring(qIndex);
+        const initLabel = getLabel(initPathname, initSearch, props.pathMenuMap);
+        this.state = {
+            tabs: [{key: initUrl, label: initLabel, refreshKey: 0}],
+            activeKey: initUrl,
+        };
+        this.activeKey = initUrl;
+    }
+
+    unlisten = null;
+    unsubscribeClosePage = null;
+
+    openTab = (url) => {
+        const qIndex = url.indexOf('?');
+        const pathname = qIndex === -1 ? url : url.substring(0, qIndex);
+        const search = qIndex === -1 ? '' : url.substring(qIndex);
+        this.setState(prev => ({
+            tabs: prev.tabs.find(t => t.key === url) ? prev.tabs
+                : [...prev.tabs, {key: url, label: getLabel(pathname, search, this.props.pathMenuMap), refreshKey: 0}],
+            activeKey: url,
+        }));
+    };
+
+    closeTab = (key) => {
+        this.setState(prev => {
+            if (!prev.tabs.find(t => t.key === key)) return null;
+            const next = prev.tabs.filter(t => t.key !== key);
+            if (next.length === 0) {
+                setTimeout(() => history.push('/'), 0);
+            } else if (key === this.activeKey) {
+                const fallback = next[next.length - 1].key;
+                setTimeout(() => history.push(fallback), 0);
+            }
+            return {tabs: next};
+        });
+    };
+
+    refreshTab = (key) => {
+        this.setState(prev => ({
+            tabs: prev.tabs.map(t => t.key === key ? {...t, refreshKey: t.refreshKey + 1} : t),
+        }));
+    };
+
+    handleClosePageEvent = (url) => {
+        this.closeTab(url);
+    };
+
+    handleCloseOthers = (key) => {
+        this.setState(prev => ({tabs: prev.tabs.filter(t => t.key === key)}));
+        if (key !== this.activeKey) {
+            history.push(key);
+        }
+    };
+
+    handleCloseAll = () => {
+        this.setState({tabs: []});
+        setTimeout(() => history.push('/'), 0);
+    };
+
+    componentDidMount() {
+        this.unlisten = history.listen(({location}) => {
+            this.openTab(location.pathname + location.search);
+        });
+        this.unsubscribeClosePage = EventBus.on('closePage', this.handleClosePageEvent);
+    }
+
+    componentDidUpdate() {
+        this.activeKey = this.state.activeKey;
+    }
+
+    componentWillUnmount() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+        if (this.unsubscribeClosePage) {
+            this.unsubscribeClosePage();
+        }
+    }
+
+    render() {
+        const {tabs, activeKey} = this.state;
+
+        return (
+            <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
+                <AdminTabs
+                    tabs={tabs.map(t => ({key: t.key, label: t.label}))}
+                    activeKey={activeKey}
+                    onChange={key => history.push(key)}
+                    onClose={this.closeTab}
+                    onRefresh={this.refreshTab}
+                    onCloseOthers={this.handleCloseOthers}
+                    onCloseAll={this.handleCloseAll}
+                />
+                <div style={{flex: 1, overflow: 'hidden'}}>
+                    {tabs.map(t => (
+                        <div key={t.key} style={{display: t.key === activeKey ? 'block' : 'none', height: '100%'}}>
+                            <PageFrame key={t.refreshKey} url={t.key}/>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+}
+

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;
 /**
  * 带菜单的布局，主要处理布局宇框架结构
@@ -45,7 +44,7 @@ export default class extends React.Component {
         this.initMenu()
 
         const siteArticles = GlobalData.getSiteArticles();
-        this.setState({headerLeftArticles: siteArticles['HEADER_LEFT'] || []})
+        this.setState({headerLeftArticles: siteArticles[ARTICLE_HEADER_LEFT] || []})
     }
 
 
@@ -176,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"), '--primary-color-hover': ThemeUtils.getColor("primary-color-hover")}}>
+return <Layout className='main-layout'>
              <Sider id='left-sider'
                    width={180}
                    collapsible
@@ -229,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}