Skip to content

Commit

Permalink
fix: 【basic-layouts】各个模式下颜色调整
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChenlingasMx
ChenlingasMx committed Aug 22, 2023
1 parent 569e0fb commit 1f208f1
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 98 deletions.
6 changes: 3 additions & 3 deletions packages/antdp/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/245037617-542a3c87-9ce8-4ea9-ab79-fd588f6723d4.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

Expand Down
14 changes: 7 additions & 7 deletions packages/basic-layouts/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand All @@ -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 {
Expand Down Expand Up @@ -74,7 +74,7 @@ body {

.antdp-basic-layouts-header-body img {
display: inline-block;
height: 32px;
height: 28px;
vertical-align: middle;
}

Expand Down Expand Up @@ -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;
Expand All @@ -115,7 +115,7 @@ body {

.antdp-global-title img {
display: inline-block;
height: 32px;
height: 28px;
vertical-align: middle;
}

Expand Down
98 changes: 49 additions & 49 deletions packages/basic-layouts/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 (
<AuthorizedConfigProvider {...newData}>
<LayoutsProvider {...props}>
Expand All @@ -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'],
},
},
}}
>
<Layout
className={`antdp-basic-layouts antdp-basic-layouts-${theme} ${props.className}`}
className={`antdp-basic-layouts ${props.className}`}
style={style}
>
{render}
Expand Down
163 changes: 124 additions & 39 deletions packages/basic-layouts/src/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
*
Expand Down Expand Up @@ -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)',
},
}
}
}

0 comments on commit 1f208f1

Please sign in to comment.