From 1f208f1f41d2b2656d3c3f0859666042fff1e446 Mon Sep 17 00:00:00 2001 From: ChenlingasMx <42308734@qq.com> Date: Tue, 22 Aug 2023 10:46:24 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E3=80=90basic-layouts=E3=80=91=E5=90=84?= =?UTF-8?q?=E4=B8=AA=E6=A8=A1=E5=BC=8F=E4=B8=8B=E9=A2=9C=E8=89=B2=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/antdp/README.md | 6 +- packages/basic-layouts/src/index.css | 14 +-- packages/basic-layouts/src/index.tsx | 98 ++++++++-------- packages/basic-layouts/src/utils.tsx | 163 ++++++++++++++++++++------- 4 files changed, 183 insertions(+), 98 deletions(-) diff --git a/packages/antdp/README.md b/packages/antdp/README.md index 139687d8b..c00665677 100644 --- a/packages/antdp/README.md +++ b/packages/antdp/README.md @@ -6,11 +6,11 @@ Ant Design Project 一个基于 [antd](https://github.com/ant-design/ant-design/) 和 [umi](https://github.com/umijs/umi) 的初始级别项目，集成路由、[`dva`](https://github.com/dvajs/dva)(Redux)、选项卡等特性，用于简化 [antd 5.x +](https://github.com/ant-design/ant-design) 的部分使用。 -[![Ant Design Project](https://user-images.githubusercontent.com/59959718/244599964-eb494b03-7de0-43ea-a896-cb42c3b32d5e.png)](https://stackblitz.com/github/antdpro/antdp/tree/master/examples/antdp-base?embed=1&hideNavigation=0&hidedevtools=0) +[![Ant Design Project](https://user-images.githubusercontent.com/59959718/262203847-d1612c3c-a37e-47fa-8282-dba85a8366be.png)](https://stackblitz.com/github/antdpro/antdp/tree/master/examples/antdp-base?embed=1&hideNavigation=0&hidedevtools=0) - +[![Ant Design Project](https://user-images.githubusercontent.com/59959718/262203891-ba31a1c0-84ad-42ae-8e0f-447b81ab9439.png)](https://stackblitz.com/github/antdpro/antdp/tree/master/examples/antdp-base?embed=1&hideNavigation=0&hidedevtools=0) -[![Ant Design Project](https://user-images.githubusercontent.com/59959718/245037507-28d13b4b-cc18-4f7d-a0e2-2cbd4c8ef2eb.png)](https://stackblitz.com/github/antdpro/antdp/tree/master/examples/antdp-base?embed=1&hideNavigation=0&hidedevtools=0) +[![Ant Design Project](https://user-images.githubusercontent.com/59959718/262203911-58268a5b-a948-4909-87cc-bd6b4a6b8d1f.png)](https://stackblitz.com/github/antdpro/antdp/tree/master/examples/antdp-base?embed=1&hideNavigation=0&hidedevtools=0) ### Features diff --git a/packages/basic-layouts/src/index.css b/packages/basic-layouts/src/index.css index c143b26c5..eb1a0cea6 100644 --- a/packages/basic-layouts/src/index.css +++ b/packages/basic-layouts/src/index.css @@ -15,7 +15,7 @@ body { box-sizing: border-box; min-height: 100%; background-color: var(--primary-slider-bg); - box-shadow: 2px 0 6px var(--primary-shadow); + box-shadow: 2px 0 8px var(--primary-shadow); overflow: auto; z-index: 99; .ant-layout-sider-trigger{ @@ -32,12 +32,12 @@ body { padding: 0 !important; margin: 0; background-color: var(--primary-header-bg) !important; - line-height: 42px !important; - height: 42px !important; + line-height: 48px !important; + height: 48px !important; display: flex; position: relative; box-sizing: border-box; - box-shadow: 0 0 6px 0 var(--primary-shadow); + box-shadow: 0px 1 4px 0 rgba(15, 28, 41, 0.08); z-index: 100; } .antdp-basic-layouts-header-breadcrumb { @@ -74,7 +74,7 @@ body { .antdp-basic-layouts-header-body img { display: inline-block; - height: 32px; + height: 28px; vertical-align: middle; } @@ -105,7 +105,7 @@ body { display: inline-block; margin: 0 0 0 12px; font-weight: 600; - font-size: 20px; + font-size: 18px; vertical-align: middle; animation: fade-in; animation-duration: 0.3s; @@ -115,7 +115,7 @@ body { .antdp-global-title img { display: inline-block; - height: 32px; + height: 28px; vertical-align: middle; } diff --git a/packages/basic-layouts/src/index.tsx b/packages/basic-layouts/src/index.tsx index da6b6c47f..f1e9c1326 100644 --- a/packages/basic-layouts/src/index.tsx +++ b/packages/basic-layouts/src/index.tsx @@ -8,7 +8,7 @@ import './index.css'; import { BasicLayoutsProps, LayoutModel } from './interface'; import Message from './Message'; import SiderMenus from './Sider'; -import { themeColor } from './utils'; +import { defaultThemeColors } from './utils'; export * from './Breadcrumb'; export { default as Breadcrumb } from './Breadcrumb'; export * from './Content'; @@ -122,27 +122,29 @@ const BasicLayouts = (props: BasicLayoutsProps) => { const style = { ['--primary-slider-bg']: token?.menu?.colorMenuBackground || - themeColor[theme]['--primary-slider-bg'], + defaultThemeColors(layout)[theme]['--primary-slider-bg'], ['--primary-slider-trigger-border']: token?.menu?.triggerColor || - themeColor[theme]['--primary-slider-trigger-border'], + defaultThemeColors(layout)[theme]['--primary-slider-trigger-border'], ['--primary-sider-trigger-text-color']: token?.menu?.triggerTextColor || - themeColor[theme]['--primary-sider-trigger-text-color'], + defaultThemeColors(layout)[theme]['--primary-sider-trigger-text-color'], ['--primary-header-bg']: token?.header?.colorHeaderBackground || - themeColor[theme]['--primary-header-bg'], + defaultThemeColors(layout)[theme]['--primary-header-bg'], ['--primary-header-text-color']: token?.header?.headerTextColor || - themeColor[theme]['--primary-header-text-color'], + defaultThemeColors(layout)[theme]['--primary-header-text-color'], ['--primary-shadow']: - token?.shadowColor || themeColor[theme]['--primary-shadow'], + token?.shadowColor || + defaultThemeColors(layout)[theme]['--primary-shadow'], ['--primary-title-text-color']: - token?.titleColor || themeColor[theme]['--primary-title-text-color'], + token?.titleColor || + defaultThemeColors(layout)[theme]['--primary-title-text-color'], ['--primary-content-bg']: - token?.contentBackground || themeColor[theme]['--primary-content-bg'], + token?.contentBackground || + defaultThemeColors(layout)[theme]['--primary-content-bg'], } as any; - return ( @@ -155,49 +157,47 @@ const BasicLayouts = (props: BasicLayoutsProps) => { colorBgHeader: 'transparent', colorBgBody: 'transparent', }, - Menu: token - ? { - itemBg: - token?.menu?.colorMenuBackground || - themeColor[theme]['--primary-slider-bg'], - subMenuItemBg: - token?.menu?.colorMenuBackground || - themeColor[theme]['--primary-slider-bg'], - itemBorderRadius: 4, - itemSelectedBg: - token?.menu?.colorBgMenuItemSelected || - themeColor[theme]['itemSelectedBg'], - colorItemBgSelected: - token?.menu?.colorBgMenuItemSelected || - themeColor[theme]['colorItemBgSelected'], - itemActiveBg: - token?.menu?.colorBgMenuItemHover || - themeColor[theme]['itemActiveBg'], - horizontalItemSelectedBg: - token?.menu?.colorBgMenuItemSelected || - themeColor[theme]['horizontalItemSelectedBg'], - colorActiveBarWidth: 0, - colorActiveBarHeight: 0, - colorActiveBarBorderSize: 0, - itemColor: - token?.menu?.colorTextMenu || - themeColor[theme]['itemColor'], - itemHoverColor: - token?.menu?.colorTextMenuActive || - themeColor[theme]['itemHoverColor'], - itemSelectedColor: - token?.menu?.colorTextMenuSelected || - themeColor[theme]['itemSelectedColor'], - colorBgElevated: - token?.menu?.colorBgMenuItemCollapsedElevated || - themeColor[theme]['colorBgElevated'], - } - : undefined, + Menu: { + itemBg: + token?.menu?.colorMenuBackground || + defaultThemeColors(layout)[theme]['--primary-slider-bg'], + subMenuItemBg: + token?.menu?.colorMenuBackground || + defaultThemeColors(layout)[theme]['--primary-slider-bg'], + itemBorderRadius: 4, + itemSelectedBg: + token?.menu?.colorBgMenuItemSelected || + defaultThemeColors(layout)[theme]['itemSelectedBg'], + colorItemBgSelected: + token?.menu?.colorBgMenuItemSelected || + defaultThemeColors(layout)[theme]['colorItemBgSelected'], + itemActiveBg: + token?.menu?.colorBgMenuItemHover || + defaultThemeColors(layout)[theme]['itemActiveBg'], + horizontalItemSelectedBg: + token?.menu?.colorBgMenuItemSelected || + defaultThemeColors(layout)[theme]['horizontalItemSelectedBg'], + colorActiveBarWidth: 0, + colorActiveBarHeight: 0, + colorActiveBarBorderSize: 0, + itemColor: + token?.menu?.colorTextMenu || + defaultThemeColors(layout)[theme]['itemColor'], + itemHoverColor: + token?.menu?.colorTextMenuActive || + defaultThemeColors(layout)[theme]['itemHoverColor'], + itemSelectedColor: + token?.menu?.colorTextMenuSelected || + defaultThemeColors(layout)[theme]['itemSelectedColor'], + colorBgElevated: + token?.menu?.colorBgMenuItemCollapsedElevated || + defaultThemeColors(layout)[theme]['colorBgElevated'], + }, }, }} > {render} diff --git a/packages/basic-layouts/src/utils.tsx b/packages/basic-layouts/src/utils.tsx index 75db48ac3..a1fa3ce6d 100644 --- a/packages/basic-layouts/src/utils.tsx +++ b/packages/basic-layouts/src/utils.tsx @@ -5,7 +5,7 @@ import { IntlShape } from 'react-intl/lib/src/types'; import { NavLink } from 'react-router-dom'; // @ts-ignore import { matchRoutes } from '@umijs/max'; -import { HandleMenuProps, RouterMenu } from './interface'; +import { HandleMenuProps, RouterMenu,LayoutModel } from './interface'; /** * @@ -371,41 +371,126 @@ export const getSiderMenus = (menus: RouterMenu[] = [], isSider = false) => { return loop(menus); }; -export const themeColor = { - light: { - '--primary-slider-bg': '#fff', - '--primary-header-bg': '#fff', - '--primary-shadow': '#9393930d', - '--primary-slider-trigger-border': 'rgba(0,0,0,.06)', - '--primary-sider-trigger-text-color': '#1d1d1d', - '--primary-header-text-color': '#1d1d1d', - '--primary-title-text-color': '#1d1d1d', - '--primary-content-bg': '#f5f5f5', - 'itemSelectedBg': '#e6f7ff', - 'colorItemBgSelected': 'rgba(0, 0, 0, 0.06)', - 'itemActiveBg': '#e6f7ff', - 'horizontalItemSelectedBg': 'rgba(0, 0, 0, 0.06)', - 'itemColor': 'rgba(0, 0, 0, 0.65)', - 'itemHoverColor': 'rgba(0, 0, 0, 0.85)', - 'itemSelectedColor': 'rgb(24, 144, 255)', - 'colorBgElevated': '#fff', - }, - dark: { - '--primary-slider-bg': '#1d1d1d', - '--primary-header-bg': '#1d1d1d', - '--primary-shadow': '#001529', - '--primary-slider-trigger-border': '#fff', - '--primary-sider-trigger-text-color': '#fff', - '--primary-header-text-color': '#fff', - '--primary-title-text-color': '#fff', - '--primary-content-bg': '#1d1d1d', - 'itemSelectedBg': 'rgb(24, 144, 255)', - 'colorItemBgSelected': '#fff', - 'itemActiveBg': '#fff', - 'horizontalItemSelectedBg': '#fff', - 'itemColor': 'rgba(229, 224, 216, 0.85)', - 'itemHoverColor': 'rgba(229, 224, 216, 0.85)', - 'itemSelectedColor': '#fff', - 'colorBgElevated': 'rgba(229, 224, 216, 0.85)', - }, -}; + +export const defaultThemeColors = (layout?:LayoutModel) : any =>{ + if(layout === 'slider'){ + return { + light: { + '--primary-slider-bg': 'rgb(36, 37, 37)', + '--primary-header-bg': '#fff', + '--primary-shadow': 'rgba(29,35,41,.05)', + '--primary-slider-trigger-border': '#fff', + '--primary-sider-trigger-text-color': '#fff', + '--primary-header-text-color': 'rgb(36, 37, 37)', + '--primary-title-text-color': '#fff', + '--primary-content-bg': '#f5f5f5', + 'itemSelectedBg': 'rgb(24, 144, 255)', + 'colorItemBgSelected': '#fff', + 'itemActiveBg': '#fff', + 'horizontalItemSelectedBg': '#fff', + 'itemColor': 'rgba(229, 224, 216, 0.85)', + 'itemHoverColor': 'rgba(229, 224, 216, 0.85)', + 'itemSelectedColor': '#fff', + 'colorBgElevated': 'rgba(229, 224, 216, 0.85)', + }, + dark: { + '--primary-slider-bg': 'rgb(36, 37, 37)', + '--primary-header-bg': 'rgb(36, 37, 37)', + '--primary-shadow': 'rgba(13, 13, 13, 0.65)', + '--primary-slider-trigger-border': '#fff', + '--primary-sider-trigger-text-color': '#fff', + '--primary-header-text-color': '#fff', + '--primary-title-text-color': '#fff', + '--primary-content-bg': '#1d1d1d', + 'itemSelectedBg': 'rgb(24, 144, 255)', + 'colorItemBgSelected': '#fff', + 'itemActiveBg': '#fff', + 'horizontalItemSelectedBg': '#fff', + 'itemColor': 'rgba(229, 224, 216, 0.85)', + 'itemHoverColor': 'rgba(229, 224, 216, 0.85)', + 'itemSelectedColor': '#fff', + 'colorBgElevated': 'rgba(229, 224, 216, 0.85)', + }, + } + } + if(layout === 'topleft'){ + return { + light: { + '--primary-slider-bg': '#fff', + '--primary-header-bg': '#fff', + '--primary-shadow': 'rgba(0,21,41,.12)', + '--primary-slider-trigger-border': 'rgba(0,0,0,.06)', + '--primary-sider-trigger-text-color': '#1d1d1d', + '--primary-header-text-color': '#1d1d1d', + '--primary-title-text-color': '#1d1d1d', + '--primary-content-bg': '#f5f5f5', + 'itemSelectedBg': '#e6f7ff', + 'colorItemBgSelected': 'rgba(0, 0, 0, 0.06)', + 'itemActiveBg': '#e6f7ff', + 'horizontalItemSelectedBg': 'rgba(0, 0, 0, 0.06)', + 'itemColor': 'rgba(0, 0, 0, 0.65)', + 'itemHoverColor': 'rgba(0, 0, 0, 0.85)', + 'itemSelectedColor': 'rgb(24, 144, 255)', + 'colorBgElevated': '#fff', + }, + dark: { + '--primary-slider-bg': 'rgb(36, 37, 37)', + '--primary-header-bg': 'rgb(36, 37, 37)', + '--primary-shadow': 'rgba(13, 13, 13, 0.65)', + '--primary-slider-trigger-border': '#fff', + '--primary-sider-trigger-text-color': '#fff', + '--primary-header-text-color': '#fff', + '--primary-title-text-color': '#fff', + '--primary-content-bg': '#1d1d1d', + 'itemSelectedBg': 'rgb(24, 144, 255)', + 'colorItemBgSelected': 'rgb(36, 37, 37)', + 'itemActiveBg': '#fff', + 'horizontalItemSelectedBg': 'rgb(36, 37, 37)', + 'itemColor': 'rgba(229, 224, 216, 0.85)', + 'itemHoverColor': 'rgba(229, 224, 216, 0.85)', + 'itemSelectedColor': '#fff', + 'colorBgElevated': 'rgba(229, 224, 216, 0.85)', + }, + } + } + if(layout === 'mix'){ + return { + light: { + '--primary-slider-bg': '#fff', + '--primary-header-bg': 'rgb(36, 37, 37)', + '--primary-shadow': 'rgba(0,21,41,.08)', + '--primary-slider-trigger-border': 'rgba(0,0,0,.06)', + '--primary-sider-trigger-text-color': 'rgb(36, 37, 37)', + '--primary-header-text-color': '#fff', + '--primary-title-text-color': '#fff', + '--primary-content-bg': '#f5f5f5', + 'itemSelectedBg': '#e6f7ff', + 'colorItemBgSelected': 'rgba(0, 0, 0, 0.06)', + 'itemActiveBg': '#e6f7ff', + 'horizontalItemSelectedBg': 'rgba(0, 0, 0, 0.06)', + 'itemColor': 'rgba(0, 0, 0, 0.65)', + 'itemHoverColor': 'rgba(0, 0, 0, 0.85)', + 'itemSelectedColor': 'rgb(24, 144, 255)', + 'colorBgElevated': '#fff', + }, + dark: { + '--primary-slider-bg': 'rgb(36, 37, 37)', + '--primary-header-bg': 'rgb(15, 28, 41)', + '--primary-shadow': 'rgba(13, 13, 13, 0.65)', + '--primary-slider-trigger-border': '#fff', + '--primary-sider-trigger-text-color': '#fff', + '--primary-header-text-color': '#fff', + '--primary-title-text-color': '#fff', + '--primary-content-bg': '#1d1d1d', + 'itemSelectedBg': 'rgb(24, 144, 255)', + 'colorItemBgSelected': '#fff', + 'itemActiveBg': '#fff', + 'horizontalItemSelectedBg': '#fff', + 'itemColor': 'rgba(229, 224, 216, 0.85)', + 'itemHoverColor': 'rgba(229, 224, 216, 0.85)', + 'itemSelectedColor': '#fff', + 'colorBgElevated': 'rgba(229, 224, 216, 0.85)', + }, + } + } +} \ No newline at end of file