@jiangood/open-admin 3.1.6 → 3.1.7

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/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/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>
             )

package/src/pages/public/login.less

@@ -1,4 +1,6 @@
 .login-page {
+  /* 背景图加载前的兜底底色，保证白色文字始终可读 */
+  background-color: #16233f;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: bottom;
@@ -6,47 +8,266 @@
   width: 100vw;
   height: 100vh;
 
-
   .login-content {
-    padding: 40px;
-    background: #15184b44;
-    width: 350px;
+    /* 面板内复用的局部变量，统一玻璃质感与文字层级 */
+    --login-text: rgba(255, 255, 255, 0.94);
+    --login-text-dim: rgba(255, 255, 255, 0.6);
+    --login-hairline: rgba(255, 255, 255, 0.16);
+    --login-field-bg: rgba(255, 255, 255, 0.08);
+    --login-radius: calc(var(--oa-border-radius, 6px) + 10px);
+    --login-field-radius: calc(var(--oa-border-radius, 6px) + 2px);
+
+    box-sizing: border-box;
+    width: 384px;
+    max-width: calc(100vw - 48px);
+    max-height: calc(100vh - 48px);
+    overflow: auto;
     position: fixed;
     right: 15%;
-    top: 20%;
+    /* 垂直居中，矮屏下不再溢出 */
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 40px 36px 30px;
+
+    /* 深色磨砂玻璃：主题深色底（保证层次）+ 顶部主色微光 + backdrop-filter 虚化 */
+    background-color: color-mix(in srgb, var(--oa-sider-bg, #0b1220) 55%, transparent);
+    background-image: linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--primary-color, #1677ff) 16%, transparent) 0%,
+            transparent 140px
+    );
+    backdrop-filter: blur(20px) saturate(140%);
+    -webkit-backdrop-filter: blur(20px) saturate(140%);
+    /* 细描边沿用主题主色；顶边内高光模拟玻璃反光 */
+    border: 1px solid color-mix(in srgb, var(--primary-color, #1677ff) 26%, var(--login-hairline));
+    border-radius: var(--login-radius);
+    box-shadow: 0 24px 64px -20px rgba(0, 0, 0, 0.6),
+    0 4px 16px rgba(0, 0, 0, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.14);
 
-    .ant-form-item-label > label{
-      color: white;
+    animation: login-panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+
+    .ant-form-item-label > label {
+      color: var(--login-text);
+      /* 玻璃更透明后，浅色文字加轻微阴影保证可读性 */
+      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
     }
   }
 }
 
-@media screen and (max-width: 768px) {
-  .login-page {
-    padding-top: 30%;
+/* 面板入场：轻微上浮淡入 */
+@keyframes login-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-50% + 16px));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%);
+  }
+}
 
-    .login-content {
-      width: calc(100% - 100px);
-      padding: 24px;
-      position: static;
-      margin: 0 auto;
+/* 不支持 backdrop-filter 的浏览器：提高底色不透明度，保证白字对比度 */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .login-page .login-content {
+    background-color: color-mix(in srgb, var(--oa-sider-bg, #0b1220) 92%, transparent);
+  }
+}
+
+/* 品牌区：logo + 站点标题，与后台侧栏保持同一品牌识别 */
+.login-brand {
+  margin-bottom: 26px;
+  text-align: center;
+
+  .login-brand-logo {
+    display: grid;
+    place-items: center;
+    width: 56px;
+    height: 56px;
+    margin: 0 auto 14px;
+    border-radius: var(--login-radius);
+    background: color-mix(in srgb, var(--primary-color, #1677ff) 16%, rgba(255, 255, 255, 0.06));
+    border: 1px solid var(--login-hairline);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
+
+    img {
+      width: 38px;
+      height: 38px;
+      object-fit: contain;
+    }
+
+    /* logo 加载失败时回退到此矢量标记 */
+    .anticon {
+      color: var(--login-text);
+      font-size: 26px;
     }
   }
 }
 
+.login-page.login-page h1 {
+  margin: 0;
+  text-align: center;
+  color: var(--login-text);
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  line-height: 1.4;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
+}
 
+/* 表单：占满面板，输入框改为玻璃质感并跟随主题主色聚焦 */
 .login-form {
-  max-width: 300px;
-  margin: 0 auto;
-}
+  width: 100%;
+  margin: 0;
 
+  .ant-form-item {
+    margin-bottom: 18px;
+  }
 
+  .ant-input-affix-wrapper {
+    height: 46px;
+    padding: 0 14px;
+    border-radius: var(--login-field-radius);
+    background-color: var(--login-field-bg);
+    border: 1px solid var(--login-hairline);
+    box-shadow: none;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
 
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.12);
+      border-color: rgba(255, 255, 255, 0.28);
+    }
 
-.login-page.login-page h1 {
-  margin-bottom: 50px;
+    &:focus-within,
+    &.ant-input-affix-wrapper-focused {
+      background-color: rgba(255, 255, 255, 0.14);
+      border-color: var(--primary-color, #1677ff);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #1677ff) 28%, transparent);
+    }
+
+    .ant-input-prefix {
+      margin-inline-end: 10px;
+      color: rgba(255, 255, 255, 0.55);
+      font-size: 16px;
+    }
+
+    /* 密码可见性切换按钮 */
+    .ant-input-suffix {
+      color: rgba(255, 255, 255, 0.55);
+    }
+  }
+
+  .ant-input {
+    color: var(--login-text);
+    font-size: 15px;
+    background: transparent;
+
+    &::placeholder {
+      color: var(--login-text-dim);
+    }
+
+    /* 浏览器自动填充时保持玻璃底与浅色文字 */
+    &:-webkit-autofill {
+      -webkit-text-fill-color: var(--login-text);
+      caret-color: var(--login-text);
+      transition: background-color 9999s ease-out;
+    }
+  }
+
+  .ant-form-item-explain-error {
+    margin-top: 4px;
+    color: color-mix(in srgb, var(--oa-color-error, #ff4d4f) 55%, #fff);
+    font-size: 13px;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  }
+
+  /* 提交按钮：主色渐变 + 悬浮辉光，作为面板唯一强视觉锚点 */
+  .login-submit {
+    margin-bottom: 0;
+
+    .ant-btn-primary {
+      height: 46px;
+      border: none;
+      border-radius: var(--login-field-radius);
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: 0.3em;
+      text-indent: 0.3em;
+      background: linear-gradient(
+              135deg,
+              var(--primary-color, #1677ff),
+              var(--primary-color-hover, #4096ff)
+      );
+      box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--primary-color, #1677ff) 85%, transparent);
+      transition: filter 0.2s, box-shadow 0.2s, transform 0.16s;
+
+      &:hover:not(:disabled) {
+        filter: brightness(1.07);
+        box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--primary-color, #1677ff) 95%, transparent);
+      }
+
+      &:active:not(:disabled) {
+        transform: translateY(1px);
+        filter: brightness(0.98);
+      }
+    }
+  }
+}
+
+/* 校验失败态：描边与文案提亮到深色玻璃上仍可读。
+   多加 .login-page 提升特异性，盖过 antd 聚焦态注入的白底 */
+.login-page .login-form .ant-form-item-has-error {
+  .ant-input-affix-wrapper,
+  .ant-input-affix-wrapper:hover,
+  .ant-input-affix-wrapper:focus,
+  .ant-input-affix-wrapper:focus-within {
+    background-color: color-mix(in srgb, var(--oa-color-error, #ff4d4f) 12%, transparent);
+    border-color: color-mix(in srgb, var(--oa-color-error, #ff4d4f) 70%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--oa-color-error, #ff4d4f) 24%, transparent);
+  }
+
+  .ant-input {
+    background-color: transparent;
+  }
+}
+
+/* 登录框底部提示：与表单之间用分隔线区隔，保持次要文字层级 */
+.login-bottom-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 22px;
+  padding-top: 18px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--login-text-dim);
+  font-size: 13px;
+  line-height: 1.5;
   text-align: center;
-  color: white;
-  font-size: x-large;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
+
+  .anticon {
+    flex: none;
+  }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .login-page .login-content {
+    animation: none;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .login-page {
+    padding-top: 20%;
+
+    .login-content {
+      width: calc(100% - 64px);
+      padding: 28px 22px;
+      position: static;
+      margin: 0 auto;
+      transform: none;
+      animation: none;
+    }
+  }
+}

package/src/pages/standalone/forceUpdatePwd.jsx

@@ -1,12 +1,12 @@
 import React from "react";
-import {Button, Form, Input, message} from "antd";
-import {HttpClient, history} from "../../framework";
+import {Button, Form, Input} from "antd";
+import {getMessageApi, getToken, HttpClient, history} from "../../framework";
 
 export default class ForceUpdatePwdPage extends React.Component {
 
     onFinish = (values) => {
         HttpClient.post('admin/userCenter/update-pwd', values, null).then(() => {
-            message.success('修改密码成功，请重新登录');
+            getMessageApi().success('修改密码成功，请重新登录');
             history.push('/public/login');
         })
     }
@@ -17,24 +17,25 @@ export default class ForceUpdatePwdPage extends React.Component {
         })
 
     render() {
+        const token = getToken();
         return (
             <div style={{
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
                 minHeight: '100vh',
-                background: '#f0f2f5'
+                background: String(token.colorBgLayout)
             }}>
                 <div style={{
-                    background: '#fff',
+                    background: String(token.colorBgContainer),
                     padding: '40px',
                     borderRadius: '8px',
-                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                    boxShadow: String(token.boxShadowSecondary ?? '0 2px 8px rgba(0,0,0,0.1)'),
                     maxWidth: 400,
                     width: '100%'
                 }}>
                     <h2 style={{textAlign: 'center', marginBottom: 24}}>修改密码</h2>
-                    <p style={{textAlign: 'center', color: '#999', marginBottom: 24}}>
+                    <p style={{textAlign: 'center', color: String(token.colorTextTertiary), marginBottom: 24}}>
                         首次登录或密码已被重置，请修改密码后重新登录
                     </p>
                     <Form onFinish={this.onFinish}>