@jiangood/open-admin 3.1.6 → 3.1.8

package/src/layouts/admin/index.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import {Layout, Menu, Skeleton, Watermark} from 'antd';
+import {ConfigProvider, Layout, Menu, Skeleton, Watermark} from 'antd';
 
 import "./index.less"
-import {HttpClient, NamedIcon, PageUtils, GlobalData, TreeUtils, history, Link, ARTICLE_HEADER_LEFT, OrgSwitcher} from "../../framework";
+import {HttpClient, NamedIcon, PageUtils, GlobalData, TreeUtils, history, Link, ARTICLE_HEADER_LEFT, OrgSwitcher, getSiderThemeConfig, getLayoutMode, EventBus} from "../../framework";
 
 import { HeaderRight } from "./HeaderRight";
 import { TabLayout } from "./TabLayout";
+import { SinglePageLayout } from "./SinglePageLayout";
 const {Header, Sider, Content} = Layout;
 /**
  * 带菜单的布局，主要处理布局宇框架结构
@@ -30,9 +31,13 @@ export default class AdminLayout extends React.Component {
         siteInfo: {},
 
         headerLeftArticles: [],
+
+        layoutMode: getLayoutMode(),
     }
 
 
+    unsubscribeLayout = null;
+
     componentDidMount() {
         // 判断是否手机端，自动收起菜单
 
@@ -45,6 +50,16 @@ export default class AdminLayout extends React.Component {
 
         const siteArticles = GlobalData.getSiteArticles();
         this.setState({headerLeftArticles: siteArticles[ARTICLE_HEADER_LEFT] || []})
+
+        this.unsubscribeLayout = EventBus.on('layoutChange', () => {
+            this.setState({layoutMode: getLayoutMode()});
+        })
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribeLayout) {
+            this.unsubscribeLayout();
+        }
     }
 
 
@@ -60,7 +75,7 @@ export default class AdminLayout extends React.Component {
                 if (item.type === 'divider') {
                     return
                 }
-                item.icon = <NamedIcon name={item.icon || 'AppstoreOutlined'} style={{fontSize: 12}}/>
+                item.icon = <NamedIcon name={item.icon || 'AppstoreOutlined'} style={{fontSize: 16}}/>
             })
 
             const {topMenus} = this.classifyMenus(menuTree);
@@ -97,7 +112,7 @@ export default class AdminLayout extends React.Component {
             this.setState({menuLoading: false})
         })
     }
-    actionRef = React.createRef() // NOSONAR: React ref 由父组件通过 ref 访问
+    actionRef = React.createRef()
 
     classifyMenus = (menuTree) => {
         const topMenus = [];
@@ -119,7 +134,7 @@ export default class AdminLayout extends React.Component {
             const defaultGroup = {
                 key: '_default_group',
                 label: '业务模块',
-                icon: <NamedIcon name="AppstoreOutlined" style={{fontSize: 12}}/>,
+                icon: <NamedIcon name="AppstoreOutlined" style={{fontSize: 16}}/>,
                 children: leafRootNodes,
                 type: 'directory',
             };
@@ -189,23 +204,26 @@ export default class AdminLayout extends React.Component {
         const {siteInfo, loginInfo} = this.state
 
 return <Layout className='main-layout'>
-             <Sider id='left-sider'
-                   width={180}
-                   collapsible
-                   breakpoint={'md'}
-             >
-                <div className='sider-header'>
-                    <button type="button" className='logo-img'
-                            onClick={() => history.push('/')}>
-                        <img src="./logo.png" alt='logo'/>
-                    </button>
-                    <h3 className='hide-on-mobile'>
-                        <Link to="/" style={{color: 'rgba(255,255,255,0.85)'}}>{siteInfo.title}</Link>
-                    </h3>
-                </div>
-                {this.renderLeftMenu()}
-
-            </Sider>
+             {/* 侧栏单独套暗色算法，使分割线/边框在深色底上可见，并按预设覆盖侧栏底色 */}
+             <ConfigProvider theme={getSiderThemeConfig()}>
+                 <Sider id='left-sider'
+                        width={180}
+                        collapsible
+                        breakpoint={'md'}
+                 >
+                    <div className='sider-header'>
+                        <button type="button" className='logo-img'
+                                onClick={() => history.push('/')}>
+                            <img src="./logo.png" alt={siteInfo.title || '首页'}/>
+                        </button>
+                        <h3 className='hide-on-mobile'>
+                            <Link to="/" style={{color: 'var(--oa-sider-text, rgba(255,255,255,0.85))'}}>{siteInfo.title}</Link>
+                        </h3>
+                    </div>
+                    {this.renderLeftMenu()}
+
+                </Sider>
+             </ConfigProvider>
 
             <Layout style={{flex: 1, overflow: 'hidden'}}>
                 <Header className='header'>
@@ -250,16 +268,18 @@ return <Layout className='main-layout'>
     }
 
     renderCenterContent = () => {
-        const {siteInfo, loginInfo} = this.state
+        const {siteInfo, loginInfo, layoutMode} = this.state
         // 即使菜单为空也直接显示页面内容，不要一直显示 Skeleton
-        const tabPageRenderNode = <TabLayout pathMenuMap={this.state.pathMenuMap}/>;
+        const contentNode = layoutMode === 'single'
+            ? <SinglePageLayout/>
+            : <TabLayout pathMenuMap={this.state.pathMenuMap}/>;
         if (siteInfo.waterMark === true) {
             return <Watermark content={[loginInfo.name, loginInfo.account]}>
-                {tabPageRenderNode}
+                {contentNode}
             </Watermark>
         }
 
-        return tabPageRenderNode
+        return contentNode
     };
 }
 

package/src/layouts/admin/index.less

@@ -6,16 +6,45 @@
     height: 48px;
     display: flex;
     align-items: center;
-    background-color: #fff;
-    border-bottom: 1px solid #e8e8e8;
+    min-width: 0;
+    background-color: var(--oa-color-bg-container, #fff);
+    border-bottom: 1px solid var(--oa-color-border, #e8e8e8);
+
+    /* 顶栏文字按钮：一级菜单左侧入口与右侧入口统一交互态 */
+    .item {
+      display: inline-flex;
+      align-items: center;
+      height: 100%;
+      padding: 0 0.5rem;
+      cursor: pointer;
+      color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
+      white-space: nowrap;
+      flex-shrink: 0;
+      background: none;
+      border: none;
+      font: inherit;
+
+      &:hover {
+        background: var(--oa-color-fill, rgba(0, 0, 0, 0.06));
+        color: var(--primary-color, #1677ff);
+      }
+    }
 
     .top-nav {
       flex: 1;
+      min-width: 0;
       display: flex;
       align-items: center;
       margin: 0;
       height: 100%;
-      overflow: hidden;
+      /* 一级菜单过多时横向滚动，避免被裁切 */
+      overflow-x: auto;
+      overflow-y: hidden;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        height: 0;
+      }
 
       .top-nav-item {
         display: inline-flex;
@@ -24,7 +53,7 @@
         padding: 0 16px;
         height: 100%;
         cursor: pointer;
-        color: rgba(0, 0, 0, 0.65);
+        color: var(--oa-color-text-secondary, rgba(0, 0, 0, 0.65));
         transition: color 0.2s;
         white-space: nowrap;
         background: none;
@@ -32,36 +61,27 @@
         font: inherit;
 
         &:hover {
-          color: var(--primary-color, var(--primary-color, #1961AC));
+          color: var(--primary-color, #1677ff);
+          background: var(--oa-color-fill, rgba(0, 0, 0, 0.06));
         }
 
         &.active {
-          color: var(--primary-color, var(--primary-color, #1961AC));
-          box-shadow: inset 0 -2px 0 var(--primary-color, var(--primary-color, #1961AC));
+          color: var(--primary-color, #1677ff);
+          box-shadow: inset 0 -2px 0 var(--primary-color, #1677ff);
         }
       }
     }
 
+    /* 组织切换等固定宽度控件不被压缩 */
+    .ant-select {
+      flex-shrink: 0;
+    }
+
     .header-right {
       line-height: 36px;
       display: flex;
       align-items: center;
       flex-shrink: 0;
-
-      .item {
-        display: inline-flex;
-        align-items: center;
-        padding: 0 0.5rem;
-        cursor: pointer;
-        background: none;
-        border: none;
-        font: inherit;
-
-        &:hover {
-          background: var(--primary-color-hover, #4990CD);
-          color: white; /* NOSONAR: 主题色悬停态，对比度由主题色决定 */
-        }
-      }
     }
 
   }
@@ -75,7 +95,11 @@
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 12px 16px;
+      /* 与顶栏同高，保证 logo 基线与一级菜单对齐 */
+      height: 48px;
+      padding: 0 16px;
+      /* 底边线：与右侧顶栏/标签栏分隔线连成一线；色值由侧栏文字变量派生，避免硬编码 */
+      border-bottom: 1px solid color-mix(in srgb, var(--oa-sider-text, rgba(255, 255, 255, 0.85)) 14%, transparent);
 
       .logo-img {
         height: 36px;
@@ -95,10 +119,25 @@
         margin: 0;
         font-size: 14px;
         line-height: 1;
+        /* 允许在 flex 中收缩，长站点名省略号截断而不溢出侧栏 */
+        min-width: 0;
+        overflow: hidden;
         white-space: nowrap;
+
+        a {
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
     }
 
+    /* 折叠态：logo 居中，去掉左侧内边距 */
+    &.ant-layout-sider-collapsed .sider-header {
+      justify-content: center;
+      padding-inline: 0;
+    }
+
     &.ant-layout-sider-collapsed .sider-header h3 {
       display: none;
     }
@@ -109,9 +148,14 @@
       scrollbar-width: thin;
       scrollbar-color: unset;
 
+      /* 菜单分隔线：加大上下间距，让不同菜单分组更清晰 */
+      .ant-menu-item-divider {
+        margin-block: 8px;
+      }
+
       .ant-menu-submenu-selected {
         &>div {
-          color: white;
+          color: var(--oa-sider-text, rgba(255, 255, 255, 0.85));
         }
       }
 

package/src/layouts/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import {ConfigProvider, Modal} from "antd";
+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, PageFrame, PageLoading, PageUtils, history, getThemeConfig, setThemeColors, EventBus} from "../framework";
+import {ErrorBoundary, GlobalData, HttpClient, PageFrame, PageLoading, PageUtils, history, getThemeConfig, getThemeMode, setThemeColors, setMessageApi, EventBus} from "../framework";
 import type {ThemeColors} from "../framework";
 
 import AdminLayout from "./admin"
@@ -25,6 +25,16 @@ export interface HeaderExtraContext {
     loginInfo: { id: string; name: string; account: string };
 }
 
+/** 将 App 上下文的 message 实例注入框架，使提示跟随 ConfigProvider 主题（含暗色） */
+function MessageBridge() {
+    const {message} = App.useApp();
+    React.useEffect(() => {
+        setMessageApi(message);
+        return () => setMessageApi();
+    }, [message]);
+    return null;
+}
+
 interface LayoutsProps {
     headerExtra?: (context: HeaderExtraContext) => React.ReactNode;
     showOrgSwitcher?: (context: HeaderExtraContext) => boolean;
@@ -38,11 +48,14 @@ export class Layouts extends React.Component<LayoutsProps> {
         siteInfoLoaded: false,
         loginChecked: false,
         loginExpiredVisible: false,
+        themeMode: getThemeMode(),
+        themeVersion: 0,
     };
 
     unlisten: (() => void) | null = null;
     unsubscribeLoginExpired: (() => void) | null = null;
     unsubscribeLogoutSuccess: (() => void) | null = null;
+    unsubscribeTheme: (() => void) | null = null;
 
     constructor(props: LayoutsProps) {
         super(props);
@@ -111,6 +124,12 @@ export class Layouts extends React.Component<LayoutsProps> {
         this.unsubscribeLogoutSuccess = EventBus.on('logoutSuccess', () => {
             this.setState({loginChecked: false});
         });
+        this.unsubscribeTheme = EventBus.on('themeChange', () => {
+            this.setState(prevState => ({
+                themeMode: getThemeMode(),
+                themeVersion: prevState.themeVersion + 1,
+            }));
+        });
         this.loadData();
     }
 
@@ -130,6 +149,9 @@ export class Layouts extends React.Component<LayoutsProps> {
         if (this.unsubscribeLogoutSuccess) {
             this.unsubscribeLogoutSuccess();
         }
+        if (this.unsubscribeTheme) {
+            this.unsubscribeTheme();
+        }
     }
 
     render() {
@@ -142,8 +164,11 @@ export class Layouts extends React.Component<LayoutsProps> {
         return (
             <ErrorBoundary minimal>
                 <ConfigProvider {...baseConfigProps} theme={getThemeConfig()}>
-                    {this.renderContent(showPageFrame, ready, pathname, search)}
-                    {this.renderLoginExpiredModal()}
+                    <App component={false}>
+                        <MessageBridge/>
+                        {this.renderContent(showPageFrame, ready, pathname, search)}
+                        {this.renderLoginExpiredModal()}
+                    </App>
                 </ConfigProvider>
             </ErrorBoundary>
         );

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

@@ -26,13 +26,13 @@ export default class ArticlePage extends React.Component {
         const {article, loading} = this.state
 
         if (loading) {
-            return <Page title="加载中...">
+            return <Page>
                 <div>加载中...</div>
             </Page>
         }
 
         if (!article) {
-            return <Page title="文章不存在">
+            return <Page>
                 <div>文章不存在或已禁用</div>
             </Page>
         }

package/src/pages/article/article.less

@@ -1,19 +1,19 @@
 .oa-article {
   max-width: 800px;
   margin: 0 auto;
-  background: #fff;
+  background: var(--oa-color-bg-container, #fff);
   padding: 24px 32px;
   border-radius: 4px;
   font-size: 15px;
   line-height: 1.8;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
   word-wrap: break-word;
 
   .oa-article-title {
     text-align: center;
     padding-bottom: 16px;
     margin-bottom: 16px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--oa-color-border, #eee);
 
     h1 {
       font-size: 26px;
@@ -23,7 +23,7 @@
     }
 
     .oa-article-meta {
-      color: #999;
+      color: var(--oa-color-text-tertiary, #999);
       font-size: 13px;
       display: flex;
       justify-content: center;
@@ -64,19 +64,19 @@
   }
 
   a {
-    color: #1677ff;
+    color: var(--primary-color, #1677ff);
   }
 
   blockquote {
     margin: 0 0 16px;
     padding: 8px 16px;
-    border-left: 4px solid #e8e8e8;
-    background: #fafafa;
-    color: #666;
+    border-left: 4px solid var(--oa-color-border, #e8e8e8);
+    background: var(--oa-color-fill, #fafafa);
+    color: var(--oa-color-text-secondary, #666);
   }
 
   pre {
-    background: #f6f8fa;
+    background: var(--oa-color-fill, #f6f8fa);
     padding: 12px 16px;
     border-radius: 4px;
     overflow-x: auto;
@@ -84,7 +84,7 @@
   }
 
   code {
-    background: #f6f8fa;
+    background: var(--oa-color-fill, #f6f8fa);
     padding: 2px 4px;
     border-radius: 3px;
     font-size: 90%;
@@ -102,19 +102,19 @@
   }
 
   th, td {
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--oa-color-border, #e0e0e0);
     padding: 8px 12px;
     text-align: left;
   }
 
   th {
-    background: #f5f5f5;
+    background: var(--oa-color-fill, #f5f5f5);
     font-weight: 600;
   }
 
   hr {
     border: none;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--oa-color-border, #eee);
     margin: 24px 0;
   }
 

package/src/pages/index.jsx

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

package/src/pages/public/login.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {Button, Form, Input, message} from 'antd';
-import {LockOutlined, UserOutlined, WarningOutlined} from '@ant-design/icons';
-import {EventBus, HttpClient, GlobalData, history} from "../../framework";
+import {Button, Form, Input} from 'antd';
+import {LockOutlined, SafetyCertificateOutlined, UserOutlined, WarningOutlined} from '@ant-design/icons';
+import {EventBus, HttpClient, GlobalData, getMessageApi, history} from "../../framework";
 
 import "./login.less"
 
@@ -20,7 +20,7 @@ function postLogin(values, query, success, error) {
         success?.(rs)
     }).catch(e => {
         console.error('[Login] 登录失败:', e);
-        message.error(HttpClient.errToMsg(e))
+        getMessageApi().error(HttpClient.errToMsg(e))
         error?.(e)
     })
 }
@@ -36,7 +36,9 @@ export default class LoginPage extends React.Component {
 
     state = {
         logging: false,
-        siteInfo: {}
+        siteInfo: {},
+        /* logo.png 缺失或加载失败时，回退到矢量标记，避免首屏出现破损图 */
+        logoError: false
     }
 
     componentDidMount() {
@@ -51,7 +53,7 @@ export default class LoginPage extends React.Component {
             this.setState({siteInfo: rs.data})
         }).catch(() => {
             console.error('[Login] 加载站点信息失败');
-            message.error('加载站点信息失败，请刷新页面重试')
+            getMessageApi().error('加载站点信息失败，请刷新页面重试')
         })
     }
 
@@ -62,7 +64,7 @@ export default class LoginPage extends React.Component {
         } catch (e) {
             console.error('[Login] 密码编码失败:', e);
             this.setState({logging: false})
-            message.error('密码含不支持字符，请联系管理员重置')
+            getMessageApi().error('密码含不支持字符，请联系管理员重置')
             return
         }
         postLogin(values, this.props.location?.query, () => {
@@ -73,8 +75,6 @@ export default class LoginPage extends React.Component {
     }
 
     render() {
-        const {siteInfo} = this.state
-
         const pageStyle = {
             backgroundImage: `url("./login_bg.jpg")`
         }
@@ -82,7 +82,7 @@ export default class LoginPage extends React.Component {
         return (
             <section className='login-page' style={pageStyle}>
                 <div className="login-content">
-                    <h1>{siteInfo.title}</h1>
+                    {this.renderBrand()}
                     {this.getForm()}
                     {this.renderFormBottom()}
                 </div>
@@ -90,6 +90,20 @@ export default class LoginPage extends React.Component {
         );
     }
 
+    renderBrand() {
+        const {siteInfo = {}, logoError} = this.state
+        return (
+            <div className="login-brand">
+                <span className="login-brand-logo">
+                    {logoError
+                        ? <SafetyCertificateOutlined/>
+                        : <img src="./logo.png" alt="" onError={() => this.setState({logoError: true})}/>}
+                </span>
+                {siteInfo.title && <h1>{siteInfo.title}</h1>}
+            </div>
+        )
+    }
+
     getForm = () => {
         const form = (
             <Form
@@ -101,15 +115,15 @@ export default class LoginPage extends React.Component {
                 colon={false}
             >
                 <Form.Item name="username" rules={[{required: true, message: '请输入用户名!'}]}>
-                    <Input size='large' prefix={<UserOutlined/>} placeholder="用户名" autoComplete="off"/>
+                    <Input size='large' prefix={<UserOutlined/>} placeholder="用户名" autoComplete="username"/>
                 </Form.Item>
                 <Form.Item name="password" rules={[{required: true, message: '请输入密码!'}]}>
-                    <Input autoComplete="off" prefix={<LockOutlined/>} type="password" placeholder="密码"
+                    <Input.Password autoComplete="current-password" prefix={<LockOutlined/>} placeholder="密码"
                            size='large'
                     />
                 </Form.Item>
 
-                <Form.Item style={{marginTop: 10}}>
+                <Form.Item className="login-submit">
                     <Button loading={this.state.logging} type="primary" htmlType="submit"
                             block size='large'>
                         登录
@@ -125,10 +139,10 @@ export default class LoginPage extends React.Component {
     };
 
     renderFormBottom() {
-        const siteInfo = this.state.siteInfo;
+        const siteInfo = this.state.siteInfo || {};
         if (siteInfo.loginBoxBottomTip) {
             return (
-                <div style={{color: 'white', marginTop: 50, fontSize: '14px', textAlign: 'center'}}>
+                <div className="login-bottom-tip">
                     <WarningOutlined/> {siteInfo.loginBoxBottomTip}
                 </div>
             )