@jiangood/open-admin 3.0.8 → 3.0.10

package/package.json

@@ -48,5 +48,5 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui"
   },
-  "version": "3.0.8"
+  "version": "3.0.10"
 }

package/src/framework/config/index.ts

@@ -1 +1,2 @@
-export { getThemeConfig, getToken } from './themeConfig'
+export { getThemeConfig, getToken, setThemeColors } from './themeConfig'
+export type { ThemeColors } from './themeConfig'

package/src/framework/config/themeConfig.ts

@@ -3,37 +3,60 @@ import type { ThemeConfig } from 'antd';
 
 const { getDesignToken } = theme;
 
+export interface ThemeColors {
+    colorPrimary?: string;
+    colorSuccess?: string;
+    colorWarning?: string;
+    colorError?: string;
+    colorBgLayout?: string;
+}
+
+export const DEFAULT_COLORS: Required<ThemeColors> = {
+    colorPrimary: '#1961AC',
+    colorSuccess: '#52c41a',
+    colorWarning: '#faad14',
+    colorError: '#ff4d4f',
+    colorBgLayout: '#f5f5f5',
+};
+
+let overrideColors: Partial<ThemeColors> | null = null;
 let cachedConfig: ThemeConfig | null = null;
 let cachedToken: Record<string, any> | null = null;
 
 function buildConfig(): ThemeConfig {
-  const token: Record<string, any> = { borderRadius: 4 };
-  const components: Record<string, any> = {
-    Layout: { headerBg: 'white', triggerHeight: 32 },
-  };
-
-  try {
-    const env = import.meta.env;
-    if (env.VITE_THEME_PRIMARY_COLOR) token.colorPrimary = env.VITE_THEME_PRIMARY_COLOR;
-    if (env.VITE_THEME_SUCCESS_COLOR) token.colorSuccess = env.VITE_THEME_SUCCESS_COLOR;
-    if (env.VITE_THEME_WARNING_COLOR) token.colorWarning = env.VITE_THEME_WARNING_COLOR;
-    if (env.VITE_THEME_ERROR_COLOR) token.colorError = env.VITE_THEME_ERROR_COLOR;
-    if (env.VITE_THEME_BACKGROUND_COLOR) token.colorBgLayout = env.VITE_THEME_BACKGROUND_COLOR;
-  } catch (e) {}
-
-  return { token, components };
+    const token: Record<string, any> = { borderRadius: 4, ...DEFAULT_COLORS, ...overrideColors };
+    const components: Record<string, any> = {
+        Layout: { headerBg: 'white', triggerHeight: 32 },
+    };
+
+    return { token, components };
+}
+
+function syncCssVars(token: Record<string, any>) {
+    if (typeof document === 'undefined') return;
+    const el = document.documentElement;
+    el.style.setProperty('--primary-color', token.colorPrimary);
+    el.style.setProperty('--primary-color-hover', token.colorPrimaryHover || token.colorPrimary);
+}
+
+/** 由 Layouts 在渲染前调用，传入业务侧颜色覆盖；不传则恢复默认主题 */
+export function setThemeColors(colors?: Partial<ThemeColors>) {
+    overrideColors = colors || null;
+    cachedConfig = null;
+    cachedToken = null;
+    syncCssVars(getToken());
 }
 
 export function getThemeConfig(): ThemeConfig {
-  if (!cachedConfig) {
-    cachedConfig = buildConfig();
-  }
-  return cachedConfig;
+    if (!cachedConfig) {
+        cachedConfig = buildConfig();
+    }
+    return cachedConfig;
 }
 
 export function getToken(): Record<string, any> {
-  if (!cachedToken) {
-    cachedToken = getDesignToken(getThemeConfig());
-  }
-  return cachedToken;
+    if (!cachedToken) {
+        cachedToken = getDesignToken(getThemeConfig());
+    }
+    return cachedToken;
 }

package/src/layouts/admin/HeaderRight.jsx

@@ -1,6 +1,6 @@
 import {Avatar, Dropdown, Modal} from "antd";
 import React from "react";
-import {DeviceUtils, HttpUtils, PageUtils, GlobalData, getToken, history, ARTICLE_HEADER_AVATAR_DROPDOWN, ARTICLE_HEADER_RIGHT} from "../../framework";
+import {DeviceUtils, HttpUtils, PageUtils, GlobalData, getToken, history, EventBus, ARTICLE_HEADER_AVATAR_DROPDOWN, ARTICLE_HEADER_RIGHT} from "../../framework";
 
 export class HeaderRight extends React.Component {
 
@@ -100,6 +100,7 @@ export class HeaderRight extends React.Component {
                    onCancel={() => this.setState({alertVisible: false})}
                    onOk={() => {
                        this.setState({alertVisible: false});
+                        EventBus.emit('logoutSuccess');
                         history.replace('/public/login')
                     }}>
                  退出登录成功
@@ -109,6 +110,7 @@ export class HeaderRight extends React.Component {
                    onOk={() => {
                        this.setState({confirmVisible: false});
                        localStorage.clear();
+                       EventBus.emit('logoutSuccess');
                        history.replace('/public/login')
                    }}>
                 退出登录失败，是否清空缓存

package/src/layouts/index.tsx

@@ -6,20 +6,20 @@ import 'dayjs/locale/zh-cn';
 import {history, PageFrame} from "../framework";
 
 import AdminLayout from "./admin"
-import {HttpUtils, PageLoading, PageUtils, GlobalData, getThemeConfig, EventBus} from "../framework";
+import {HttpUtils, PageLoading, PageUtils, GlobalData, getThemeConfig, setThemeColors, EventBus} from "../framework";
 import {ErrorBoundary} from "../framework";
+import type {ThemeColors} from "../framework";
 
 import '../style/global.less'
 import './index.less'
 
 dayjs.locale('zh-cn');
 
-const configProps = {
+const baseConfigProps = {
     input: {autoComplete: 'off'},
     form: {validateMessages: {required: '必填项'}, colon: false},
     button: {autoInsertSpace: false},
     locale: zhCN,
-    theme: getThemeConfig(),
 };
 
 export interface HeaderExtraContext {
@@ -30,6 +30,8 @@ export interface HeaderExtraContext {
 interface LayoutsProps {
     headerExtra?: (context: HeaderExtraContext) => React.ReactNode;
     showOrgSwitcher?: (context: HeaderExtraContext) => boolean;
+    /** 主题颜色覆盖，不传使用框架默认主题 */
+    colors?: Partial<ThemeColors>;
 }
 
 export class Layouts extends React.Component<LayoutsProps> {
@@ -42,6 +44,12 @@ export class Layouts extends React.Component<LayoutsProps> {
 
     unlisten: (() => void) | null = null;
     unsubscribeLoginExpired: (() => void) | null = null;
+    unsubscribeLogoutSuccess: (() => void) | null = null;
+
+    constructor(props: LayoutsProps) {
+        super(props);
+        setThemeColors(props.colors);
+    }
 
     onLocationChange = ({location}: { location: typeof history.location }) => {
         this.setState({location});
@@ -101,6 +109,9 @@ export class Layouts extends React.Component<LayoutsProps> {
                 this.setState({loginExpiredVisible: true});
             }
         });
+        this.unsubscribeLogoutSuccess = EventBus.on('logoutSuccess', () => {
+            this.setState({loginChecked: false});
+        });
         this.loadData();
     }
 
@@ -117,6 +128,9 @@ export class Layouts extends React.Component<LayoutsProps> {
         if (this.unsubscribeLoginExpired) {
             this.unsubscribeLoginExpired();
         }
+        if (this.unsubscribeLogoutSuccess) {
+            this.unsubscribeLogoutSuccess();
+        }
     }
 
     render() {
@@ -128,7 +142,7 @@ export class Layouts extends React.Component<LayoutsProps> {
 
         return (
             <ErrorBoundary minimal>
-                <ConfigProvider {...configProps}>
+                <ConfigProvider {...baseConfigProps} theme={getThemeConfig()}>
                     {showPageFrame ? <PageFrame url={pathname + search}/> : ready ? <AdminLayout headerExtra={this.props.headerExtra} showOrgSwitcher={this.props.showOrgSwitcher} loginInfo={GlobalData.getLoginInfo()}/> : (
                         <PageLoading messages={[
                             !siteInfoLoaded && '加载站点信息...',
@@ -146,7 +160,7 @@ export class Layouts extends React.Component<LayoutsProps> {
             <Modal open={this.state.loginExpiredVisible} title="确认操作" okText="确定"
                    onCancel={() => this.setState({loginExpiredVisible: false})}
                    onOk={() => {
-                       this.setState({loginExpiredVisible: false});
+                       this.setState({loginExpiredVisible: false, loginChecked: false});
                        PageUtils.redirectToLogin();
                    }}>
                 登录已过期，请重新登录

package/src/pages/userCenter/index.jsx

@@ -43,7 +43,7 @@ export default class extends React.Component {
 
             <Card title="个人信息"
                   style={{marginBottom: 16}}
-                  extra={<Button onClick={() => this.setState({changePwdOpen: true})}>修改密码</Button>}>
+                  extra={<Button type="primary" danger onClick={() => this.setState({changePwdOpen: true})}>修改密码</Button>}>
                 <Descriptions column={2} size="middle">
                     <Descriptions.Item label="用户名称">{info.name}</Descriptions.Item>
                     <Descriptions.Item label="账号">{info.account}</Descriptions.Item>