@jiangood/open-admin 3.1.10 → 3.1.12

package/src/framework/utils/UrlUtils.ts

@@ -26,16 +26,16 @@ export class UrlUtils {
 
     static paramsToSearch(params: Record<string, string | number | boolean | null | undefined> | null | undefined): string {
         if (!params) return "";
-        const buffer: string[] = [];
+        const search = new URLSearchParams();
         for (const k in params) {
             if (Object.hasOwn(params, k)) {
                 const v = params[k];
                 if (v !== null && v !== undefined) {
-                    buffer.push(`${k}=${v}`);
+                    search.append(k, String(v));
                 }
             }
         }
-        return buffer.join('&');
+        return search.toString();
     }
 
     static setParam(url: string, key: string, value: string | number | boolean | null | undefined): string {

package/src/framework/utils/index.ts

@@ -1,4 +1,5 @@
 export * from "./DateUtils";
+export * from "./CronUtils";
 export * from "./ArrayUtils";
 export * from "./UrlUtils"
 export * from "./StringUtils"
@@ -10,6 +11,8 @@ export * from './ObjectUtils'
 export * from './DictUtils'
 export * from './PermUtils'
 export * from './PageUtils'
+export * from './TitleUtils'
 export * from './HttpClient'
 export * from './MessageApi'
 export * from './ModalApi'
+export * from './AvatarUtils'

package/src/layouts/admin/HeaderRight.jsx

@@ -1,7 +1,7 @@
 import {Avatar, Dropdown, Modal} from "antd";
-import {BgColorsOutlined} from "@ant-design/icons";
+import {BgColorsOutlined, FileOutlined, MoonOutlined, ProfileOutlined, SunOutlined, UserOutlined} from "@ant-design/icons";
 import React from "react";
-import {HttpClient, PageUtils, GlobalData, getToken, history, EventBus, ThemeSettings, ARTICLE_HEADER_AVATAR_DROPDOWN, ARTICLE_HEADER_RIGHT} from "../../framework";
+import {HttpClient, PageUtils, GlobalData, history, EventBus, LOGIN_PATH, ThemeSettings, AvatarUtils, ARTICLE_HEADER_AVATAR_DROPDOWN, ARTICLE_HEADER_RIGHT, getThemeMode, toggleThemeMode, getLayoutMode, toggleLayoutMode} from "../../framework";
 
 export class HeaderRight extends React.Component {
 
@@ -13,8 +13,30 @@ export class HeaderRight extends React.Component {
         themeSettingsVisible: false,
     };
 
+    unsubscribeLoginInfo = null;
+    unsubscribeTheme = null;
+    unsubscribeLayout = null;
+
     componentDidMount() {
         this.loadArticles()
+        // 个人中心修改头像/资料后刷新顶栏显示
+        this.unsubscribeLoginInfo = EventBus.on('loginInfoChange', () => this.setState({}))
+        // 明暗切换后刷新太阳/月亮图标（其它入口切换时也能同步）
+        this.unsubscribeTheme = EventBus.on('themeChange', () => this.setState({}))
+        // 布局切换后刷新图标（其它入口切换时也能同步）
+        this.unsubscribeLayout = EventBus.on('layoutChange', () => this.setState({}))
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribeLoginInfo) {
+            this.unsubscribeLoginInfo()
+        }
+        if (this.unsubscribeTheme) {
+            this.unsubscribeTheme()
+        }
+        if (this.unsubscribeLayout) {
+            this.unsubscribeLayout()
+        }
     }
 
     loadArticles = () => {
@@ -36,11 +58,34 @@ export class HeaderRight extends React.Component {
     }
 
     account = () => {
-        PageUtils.open('/userCenter', '个人中心')
+        PageUtils.open('/user-center')
+    }
+
+    openArticle = (code) => {
+        PageUtils.open('/article/' + code)
     }
 
-    openArticle = (code, title) => {
-        PageUtils.open('/article/' + code, title)
+    renderThemeModeToggle = () => {
+        const isDark = getThemeMode() === 'dark';
+        const title = isDark ? '切换到浅色模式' : '切换到深色模式';
+        return (
+            <button type="button" className='item' title={title} aria-label={title}
+                    onClick={() => toggleThemeMode()}>
+                {isDark ? <SunOutlined/> : <MoonOutlined/>}
+            </button>
+        )
+    }
+
+    renderLayoutModeToggle = () => {
+        const isTabs = getLayoutMode() === 'tabs';
+        const title = isTabs ? '切换为单页模式' : '切换为页签模式';
+        const Icon = isTabs ? FileOutlined : ProfileOutlined;
+        return (
+            <button type="button" className='item' title={title} aria-label={title}
+                    onClick={() => toggleLayoutMode()}>
+                <Icon/>
+            </button>
+        )
     }
 
     renderThemeSettings = () => {
@@ -61,6 +106,7 @@ export class HeaderRight extends React.Component {
 
     render() {
         const info = GlobalData.getLoginInfo()
+        const avatarSrc = AvatarUtils.resolve(info.avatar)
         const {dropdownArticles, headerArticles} = this.state
 
         const articleItems = dropdownArticles.map(a => ({
@@ -69,7 +115,7 @@ export class HeaderRight extends React.Component {
         }))
 
         const menuItems = [
-            {key: 'userCenter', label: '个人中心'},
+            {key: 'user-center', label: '个人中心'},
             ...articleItems,
             {key: 'logout', label: '退出登录'},
         ]
@@ -77,31 +123,31 @@ export class HeaderRight extends React.Component {
         return <div className='header-right'>
             {headerArticles.map(a => (
                 <button key={a.code} type="button" className='item'
-                        onClick={() => this.openArticle(a.code, a.title)}>
+                        onClick={() => this.openArticle(a.code)}>
                     {a.title}
                 </button>
             ))}
 
+            {this.renderLayoutModeToggle()}
+
+            {this.renderThemeModeToggle()}
+
             {this.renderThemeSettings()}
 
             <Dropdown menu={{
                 onClick: ({key}) => {
-                    if (key === 'userCenter') {
+                    if (key === 'user-center') {
                         this.account()
                     } else if (key === 'logout') {
                         this.logout();
                     } else if (key.startsWith('article:')) {
-                        const code = key.substring(8)
-                        const article = dropdownArticles.find(a => a.code === code)
-                        this.openArticle(code, article ? article.title : code)
+                        this.openArticle(key.substring(8))
                     }
                 },
                 items: menuItems,
             }}>
                 <div className='item' style={{cursor: 'pointer'}}>
-                    <Avatar size="default" style={{backgroundColor: getToken().colorPrimary}}>
-                        {info.name?.charAt(0)}
-                    </Avatar>
+                    <Avatar size="default" src={avatarSrc || undefined} icon={<UserOutlined/>}/>
                     <span style={{marginLeft: 8}}>{info.name}</span>
                 </div>
             </Dropdown>
@@ -111,7 +157,7 @@ export class HeaderRight extends React.Component {
                    onOk={() => {
                        this.setState({alertVisible: false});
                         EventBus.emit('logoutSuccess');
-                        history.replace('/public/login')
+                        history.replace(LOGIN_PATH)
                     }}>
                  退出登录成功
             </Modal>
@@ -121,7 +167,7 @@ export class HeaderRight extends React.Component {
                        this.setState({confirmVisible: false});
                        localStorage.clear();
                        EventBus.emit('logoutSuccess');
-                       history.replace('/public/login')
+                       history.replace(LOGIN_PATH)
                    }}>
                 退出登录失败，是否清空缓存
             </Modal>

package/src/layouts/admin/SinglePageLayout.jsx

@@ -1,8 +1,8 @@
 import React from "react";
-import {history, PageFrame} from "../../framework";
+import {history, PageFrame, matchRoute, setPageTitle} from "../../framework";
 
 /**
- * 单页布局：不使用标签页，仅渲染当前路由对应页面。
+ * 单页布局：不使用页签，仅渲染当前路由对应页面。
  * 路由变化时按 url 重新挂载 PageFrame，页面状态随之重置。
  */
 export class SinglePageLayout extends React.Component {
@@ -14,6 +14,11 @@ export class SinglePageLayout extends React.Component {
         this.unlisten = history.listen(({location}) => {
             this.setState({location});
         });
+        this.syncDocumentTitle();
+    }
+
+    componentDidUpdate() {
+        this.syncDocumentTitle();
     }
 
     componentWillUnmount() {
@@ -22,6 +27,12 @@ export class SinglePageLayout extends React.Component {
         }
     }
 
+    syncDocumentTitle() {
+        const {pathname} = this.state.location;
+        const label = matchRoute(pathname)?.meta?.title || this.props.pathMenuMap?.[pathname]?.name;
+        setPageTitle(label);
+    }
+
     render() {
         const {pathname, search} = this.state.location;
         const url = pathname + search;

package/src/layouts/admin/TabLayout.jsx

@@ -1,24 +1,39 @@
 import React from "react";
-import {history, PageFrame, UrlUtils, EventBus} from "../../framework";
+import {history, PageFrame, EventBus, matchRoute, setPageTitle} 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;
+function getPathname(url) {
+    const qIndex = url.indexOf('?');
+    return qIndex === -1 ? url : url.substring(0, qIndex);
+}
+
+/** 移除已弃用的 _label 参数，避免旧 URL 产生重复 Tab；其余 query 原样保留 */
+function normalizeUrl(url) {
+    const qIndex = url.indexOf('?');
+    if (qIndex === -1) return url;
+    const params = new URLSearchParams(url.substring(qIndex));
+    if (!params.has('_label')) return url;
+    params.delete('_label');
+    const search = params.toString();
+    return search ? `${url.substring(0, qIndex)}?${search}` : url.substring(0, qIndex);
+}
+
+function getLabel(pathname, pathMenuMap) {
+    if (pathname === '/' || pathname === '/index') return '首页';
+    const route = matchRoute(pathname);
+    // 页面显式声明的标题优先；未声明时回退到后端菜单名
+    if (route?.meta?.title) return route.meta.title;
     const menu = pathMenuMap[pathname];
     if (menu) return menu.name;
+    if (!route) return '页面不存在';
     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);
+        const initUrl = normalizeUrl(history.location.pathname + history.location.search);
+        const initLabel = getLabel(getPathname(initUrl), props.pathMenuMap);
         this.state = {
             tabs: [{key: initUrl, label: initLabel, refreshKey: 0}],
             activeKey: initUrl,
@@ -29,13 +44,11 @@ export class TabLayout extends React.Component {
     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);
+    openTab = (rawUrl) => {
+        const url = normalizeUrl(rawUrl);
         this.setState(prev => ({
             tabs: prev.tabs.some(t => t.key === url) ? prev.tabs
-                : [...prev.tabs, {key: url, label: getLabel(pathname, search, this.props.pathMenuMap), refreshKey: 0}],
+                : [...prev.tabs, {key: url, label: getLabel(getPathname(url), this.props.pathMenuMap), refreshKey: 0}],
             activeKey: url,
         }));
     };
@@ -64,6 +77,13 @@ export class TabLayout extends React.Component {
         this.closeTab(url);
     };
 
+    /** 浏览器标题跟随当前激活标签 */
+    syncDocumentTitle() {
+        const {tabs, activeKey} = this.state;
+        const active = tabs.find(t => t.key === activeKey);
+        setPageTitle(active && active.label !== '未命名' ? active.label : undefined);
+    }
+
     handleCloseOthers = (key) => {
         this.setState(prev => ({tabs: prev.tabs.filter(t => t.key === key)}));
         if (key !== this.activeKey) {
@@ -81,6 +101,7 @@ export class TabLayout extends React.Component {
             this.openTab(location.pathname + location.search);
         });
         this.unsubscribeClosePage = EventBus.on('closePage', this.handleClosePageEvent);
+        this.syncDocumentTitle();
     }
 
     componentDidUpdate(prevProps) {
@@ -89,16 +110,14 @@ export class TabLayout extends React.Component {
         if (this.props.pathMenuMap !== prevProps.pathMenuMap) {
             this.refreshTabLabels();
         }
+        this.syncDocumentTitle();
     }
 
     refreshTabLabels() {
         this.setState(prev => {
             let changed = false;
             const tabs = prev.tabs.map(t => {
-                const qIndex = t.key.indexOf('?');
-                const pathname = qIndex === -1 ? t.key : t.key.substring(0, qIndex);
-                const search = qIndex === -1 ? '' : t.key.substring(qIndex);
-                const label = getLabel(pathname, search, this.props.pathMenuMap);
+                const label = getLabel(getPathname(t.key), this.props.pathMenuMap);
                 if (label === t.label) return t;
                 changed = true;
                 return {...t, label};

package/src/layouts/admin/index.jsx

@@ -37,6 +37,7 @@ export default class AdminLayout extends React.Component {
 
 
     unsubscribeLayout = null;
+    unsubscribeSiteInfo = null;
 
     componentDidMount() {
         // 判断是否手机端，自动收起菜单
@@ -54,12 +55,20 @@ export default class AdminLayout extends React.Component {
         this.unsubscribeLayout = EventBus.on('layoutChange', () => {
             this.setState({layoutMode: getLayoutMode()});
         })
+
+        // 参数设置保存后刷新标题、水印等站点信息
+        this.unsubscribeSiteInfo = EventBus.on('siteInfoChange', () => {
+            this.setState({siteInfo: GlobalData.getSiteInfo()});
+        })
     }
 
     componentWillUnmount() {
         if (this.unsubscribeLayout) {
             this.unsubscribeLayout();
         }
+        if (this.unsubscribeSiteInfo) {
+            this.unsubscribeSiteInfo();
+        }
     }
 
 
@@ -171,7 +180,7 @@ export default class AdminLayout extends React.Component {
         if (!menu) return;
         const {path} = menu;
         this.setState({currentMenuKey: key});
-        PageUtils.open(path, menu.name);
+        PageUtils.open(path);
     }
 
     getActiveTopMenu() {
@@ -233,7 +242,7 @@ return <Layout className='main-layout'>
                     {this.renderTopMenu()}
                     {this.state.headerLeftArticles.map(a => (
                         <button key={a.code} type="button" className='item'
-                                onClick={() => PageUtils.open('/article/' + a.code, a.title)}>{a.title}</button>
+                                onClick={() => PageUtils.open('/article/' + a.code)}>{a.title}</button>
                     ))}
                     {this.props.showOrgSwitcher?.({
                         activeTopMenu: this.getActiveTopMenu(),
@@ -274,7 +283,7 @@ return <Layout className='main-layout'>
         const {siteInfo, loginInfo, layoutMode} = this.state
         // 即使菜单为空也直接显示页面内容，不要一直显示 Skeleton
         const contentNode = layoutMode === 'single'
-            ? <SinglePageLayout/>
+            ? <SinglePageLayout pathMenuMap={this.state.pathMenuMap}/>
             : <TabLayout pathMenuMap={this.state.pathMenuMap}/>;
         if (siteInfo.waterMark === true) {
             return <Watermark content={[loginInfo.name, loginInfo.account]}>

package/src/layouts/index.tsx

@@ -3,8 +3,8 @@ import {App, ConfigProvider, Modal} from "antd";
 import zhCN from 'antd/locale/zh_CN';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import {ErrorBoundary, GlobalData, HttpClient, LOGIN_EXPIRED_REASON_CONCURRENT_LOGIN, PageFrame, PageLoading, PageUtils, history, getThemeConfig, getThemeMode, setThemeColors, setMessageApi, EventBus} from "../framework";
-import type {LoginExpiredPayload, ThemeColors} from "../framework";
+import {ErrorBoundary, GlobalData, HttpClient, LOGIN_EXPIRED_REASON_CONCURRENT_LOGIN, LOGIN_PATH, PageFrame, PageLoading, PageUtils, history, getThemeConfig, getThemeMode, setThemeColors, setMessageApi, EventBus, matchRoute, refreshDocumentTitle, setPageTitle, warnDeprecatedPageLabel, applyServerUiDefaults} from "../framework";
+import type {LoginExpiredPayload, PageLayout, ThemeColors} from "../framework";
 
 import AdminLayout from "./admin"
 
@@ -59,6 +59,7 @@ export class Layouts extends React.Component<LayoutsProps> {
     unsubscribeLoginExpired: (() => void) | null = null;
     unsubscribeLogoutSuccess: (() => void) | null = null;
     unsubscribeTheme: (() => void) | null = null;
+    unsubscribeSiteInfo: (() => void) | null = null;
     /** 本次登录失效弹窗的原因。同步字段（非 state）：同一次失效会并发上报多个 401，setState 异步可能读到旧值 */
     private loginExpiredReason: string = '';
 
@@ -94,22 +95,42 @@ export class Layouts extends React.Component<LayoutsProps> {
         this.setState({loginExpiredVisible: false});
     };
 
-    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';
+    /**
+     * 解析页面登录与布局要求：
+     * 优先使用页面文件导出的 pageMeta；未匹配的路由按目录约定兜底
+     */
+    getPageMeta(pathname: string): {requiresAuth: boolean; layout: PageLayout} {
+        const meta = matchRoute(pathname)?.meta;
+        const isLogin = pathname === LOGIN_PATH;
+        const inPublicDir = pathname.startsWith('/public/');
+        const inStandaloneDir = pathname.startsWith('/standalone/');
+        const requiresAuth = meta?.requiresAuth ?? (isLogin ? false : !inPublicDir);
+        const layout = requiresAuth
+            ? (meta?.layout ?? (inStandaloneDir || isLogin ? 'blank' : 'admin'))
+            : 'blank';
+        return {requiresAuth, layout};
+    }
+
+    /** 公共/standalone 页用 pageMeta.title；admin 页由 TabLayout / SinglePageLayout 设置 */
+    syncDocumentTitle() {
+        const {pathname, search} = this.state.location;
+        if (search && new URLSearchParams(search).has('_label')) {
+            warnDeprecatedPageLabel();
+        }
+        if (this.getPageMeta(pathname).layout === 'blank') {
+            setPageTitle(matchRoute(pathname)?.meta?.title);
+        }
     }
 
     loadData() {
         const {siteInfoLoaded, loginChecked} = this.state;
-        const pageType = this.getPageType(this.state.location.pathname);
+        const {requiresAuth} = this.getPageMeta(this.state.location.pathname);
 
         if (!siteInfoLoaded) {
             this.loadSiteInfo();
         }
 
-        if ((pageType === 'protected' || pageType === 'standalone') && !loginChecked) {
+        if (requiresAuth && !loginChecked) {
             this.loadLoginInfo();
         }
     }
@@ -117,6 +138,8 @@ export class Layouts extends React.Component<LayoutsProps> {
     loadSiteInfo() {
         HttpClient.get("/admin/public/site-info", null, {toastError: false}).then(data => {
             GlobalData.setSiteInfo(data.data);
+            // 参数设置的默认主题/页签模式需在后台布局首次渲染前生效，避免闪一下默认样式
+            applyServerUiDefaults(data.data?.config);
             this.setState({siteInfoLoaded: true});
         }).catch(() => {
             console.error('[Layout] 加载站点信息失败');
@@ -131,7 +154,7 @@ export class Layouts extends React.Component<LayoutsProps> {
 
             if (data.data.needUpdatePwd) {
                 this.setState({loginChecked: true});
-                history.push('/standalone/forceUpdatePwd');
+                history.push('/standalone/force-update-pwd');
                 return;
             }
 
@@ -154,12 +177,22 @@ export class Layouts extends React.Component<LayoutsProps> {
                 themeVersion: prevState.themeVersion + 1,
             }));
         });
+        this.unsubscribeSiteInfo = EventBus.on('siteInfoChange', () => {
+            // 参数设置保存后，未自定义用户即时跟随新的默认主题/页签模式
+            applyServerUiDefaults(GlobalData.getSiteInfo().config);
+            refreshDocumentTitle();
+        });
+        this.syncDocumentTitle();
         this.loadData();
     }
 
     componentDidUpdate(prevProps: LayoutsProps, prevState: typeof this.state) {
         if (this.state.location !== prevState.location) {
             this.loadData();
+            this.syncDocumentTitle();
+        }
+        if (!prevState.siteInfoLoaded && this.state.siteInfoLoaded) {
+            refreshDocumentTitle();
         }
     }
 
@@ -176,6 +209,9 @@ export class Layouts extends React.Component<LayoutsProps> {
         if (this.unsubscribeTheme) {
             this.unsubscribeTheme();
         }
+        if (this.unsubscribeSiteInfo) {
+            this.unsubscribeSiteInfo();
+        }
     }
 
     /**
@@ -194,15 +230,16 @@ export class Layouts extends React.Component<LayoutsProps> {
         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);
+        const {requiresAuth, layout} = this.getPageMeta(pathname);
+        // 公共页直接渲染；standalone 页需登录后渲染；admin 页交给后台布局
+        const showPageFrame = !requiresAuth || (layout === 'blank' && ready);
 
         return (
             <ErrorBoundary minimal>
                 <ConfigProvider {...baseConfigProps} theme={getThemeConfig()}>
                     <App component={false}>
                         <MessageBridge/>
-                        {this.renderContent(showPageFrame, ready, pathname, search)}
+                        {this.renderContent(showPageFrame, ready, layout, pathname, search)}
                         {this.renderLoginExpiredModal()}
                     </App>
                 </ConfigProvider>
@@ -210,11 +247,11 @@ export class Layouts extends React.Component<LayoutsProps> {
         );
     }
 
-    renderContent(showPageFrame: boolean, ready: boolean, pathname: string, search: string) {
+    renderContent(showPageFrame: boolean, ready: boolean, layout: PageLayout, pathname: string, search: string) {
         if (showPageFrame) {
             return <PageFrame url={pathname + search}/>;
         }
-        if (ready) {
+        if (ready && layout === 'admin') {
             return <AdminLayout headerExtra={this.props.headerExtra} showOrgSwitcher={this.props.showOrgSwitcher} loginInfo={GlobalData.getLoginInfo()}/>;
         }
         return <PageLoading messages={[

package/src/pages/404.jsx

@@ -2,6 +2,10 @@ import React from "react";
 import {Result} from "antd";
 import {Page} from "../framework";
 
+export const pageMeta = {
+    title: '页面不存在',
+};
+
 export default class NotFound extends React.Component {
 
     render() {

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

@@ -2,6 +2,10 @@ import React from "react";
 import {HttpClient, Page, UrlUtils} from "../../framework";
 import "./article.less";
 
+export const pageMeta = {
+    title: '文章详情',
+};
+
 export default class ArticlePage extends React.Component {
 
     state = {
@@ -12,7 +16,7 @@ export default class ArticlePage extends React.Component {
     componentDidMount() {
         const code = this.props.params?.code
         if (code) {
-            HttpClient.get('admin/article/getByCode', {code}, {toastError: false}).then(rs => {
+            HttpClient.get('admin/article/get-by-code', {code}, {toastError: false}).then(rs => {
                 this.setState({article: rs.data, loading: false})
             }).catch(() => {
                 this.setState({loading: false})