Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6d836b3

Browse files
feat(暗黑模式): 🚀 优化暗黑模式页面
1 parent 009ae28 commit 6d836b3

File tree

12 files changed

+48
-25
lines changed

12 files changed

+48
-25
lines changed

‎src/components/layouts/components/Header/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ function Head() {
9797
};
9898

9999
return (
100-
<Header className="header flx-justify-between bottom-shadow">
100+
<Header className="header flx-justify-between">
101101
<Button
102102
type="text"
103103
icon={isCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
@@ -145,7 +145,7 @@ function Head() {
145145
{/* 个人信息 */}
146146
<p className="username ellipsis">Yangzi</p>
147147
<Dropdown menu={{ items }} trigger={["hover"]} placement="bottom" arrow>
148-
<Avatar className="icon" style={{ backgroundColor: token.colorPrimary }} icon={<UserOutlined />} />
148+
<Avatar className="icon avatar" style={{ backgroundColor: token.colorPrimary }} icon={<UserOutlined />} />
149149
</Dropdown>
150150
</div>
151151
<ThemeComp open={open} close={close}></ThemeComp>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.theme {
2+
.theme-color {
3+
color: var(--yz-font-color);
4+
}
5+
}

‎src/components/layouts/components/theme/index.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
55

66
import { useDispatch, useSelector } from "@/store";
77
import { setIsDark, setTheme, setThemeMode } from "@/store/module/global";
8+
import "./index.less";
89

910
type props = {
1011
open: boolean;
@@ -33,36 +34,37 @@ const ThemeComp = (props: props) => {
3334
setColorHex("#a855f7");
3435
};
3536

36-
const { themeMode } = useSelector(state => state.global);
37+
const { themeMode, isDark } = useSelector(state => state.global);
3738
const changeTheme = (checked: boolean, mode: "" | "gray" | "week") => {
3839
checked ? dispatch(setThemeMode(mode)) : dispatch(setThemeMode(""));
3940
};
4041

4142
return (
4243
<>
43-
<Drawer title="主题配置🎨" placement="right" onClose={onClose} open={open}>
44+
<Drawer className="theme"title="主题配置🎨" placement="right" onClose={onClose} open={open}>
4445
<div className="flx-justify-between">
45-
<p className="base-color">主题颜色:</p>
46+
<p className="theme-color">主题颜色:</p>
4647
<ColorPicker format={formatHex} showText value={themeVal} onFormatChange={setFormatHex} onChange={setColorHex} />
4748
</div>
4849
<div className="flx-justify-between" style={{ marginTop: "20px" }}>
49-
<p className="base-color">重置主题:</p>
50+
<p className="theme-color">重置主题:</p>
5051
<Button type="primary" style={{ backgroundColor: "#a855f7" }} onClick={resetTheme}>
5152
重置
5253
</Button>
5354
</div>
5455
<div className="flx-justify-between" style={{ marginTop: "20px" }}>
55-
<p className="base-color">暗黑模式:</p>
56+
<p className="theme-color">暗黑模式:</p>
5657
<Switch
5758
checkedChildren={<>🌞</>}
5859
unCheckedChildren={<>🌜</>}
60+
defaultChecked={isDark}
5961
onChange={checked => {
6062
dispatch(setIsDark(checked));
6163
}}
6264
/>
6365
</div>
6466
<div className="flx-justify-between" style={{ marginTop: "20px" }}>
65-
<p className="base-color">灰色模式:</p>
67+
<p className="theme-color">灰色模式:</p>
6668
<Switch
6769
checkedChildren={<CheckOutlined />}
6870
unCheckedChildren={<CloseOutlined />}
@@ -71,7 +73,7 @@ const ThemeComp = (props: props) => {
7173
/>
7274
</div>
7375
<div className="flx-justify-between" style={{ marginTop: "20px" }}>
74-
<p className="base-color">色弱模式:</p>
76+
<p className="theme-color">色弱模式:</p>
7577
<Switch
7678
checkedChildren={<CheckOutlined />}
7779
unCheckedChildren={<CloseOutlined />}

‎src/components/layouts/index.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.layout {
22
height: 100%;
3+
overflow: hidden;
34
.logo {
45
display: flex;
56
align-items: center;
@@ -25,6 +26,7 @@
2526
z-index: 10;
2627
padding: 0;
2728
background-color: var(--yz-background-color);
29+
border-bottom: 1px solid var(--yz-border-color);
2830
.func-box {
2931
padding: 0 20px;
3032
.username {
@@ -39,6 +41,9 @@
3941
color: var(--yz-svg-color);
4042
cursor: pointer;
4143
}
44+
.avatar {
45+
color: #ffffff;
46+
}
4247
}
4348
}
4449
.content-stage {

‎src/style/common.less‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,14 +68,12 @@
6868

6969
/* scroll bar */
7070
::-webkit-scrollbar {
71-
width: 8px;
72-
height: 8px;
73-
background-color: #ffffff;
71+
width: 6px;
72+
height: 6px;
7473
}
7574
::-webkit-scrollbar-thumb {
76-
background-color: #dddee0;
75+
background-color: var(--yz-border-color-dark);
7776
border-radius: 20px;
78-
box-shadow: inset 0 0 0 #ffffff;
7977
}
8078

8179
/* card 卡片样式 */

‎src/style/dark.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,9 @@ html.dark {
55
--yz-login-font-color: #e5eaf3;
66
--yz-login-bg-color: #141414b2;
77
--yz-svg-color: rgb(255 255 255 / 85%);
8+
--yz-font-color-2: #a3a6ad;
9+
--yz-border-color-dark: #414243;
10+
.opacity-bg {
11+
opacity: 0.8;
12+
}
813
}

‎src/style/light.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,7 @@ html {
33
--yz-font-color: #323232;
44
--yz-login-font-color: #323232;
55
--yz-svg-color: #323233;
6+
--yz-font-color-2: #666666;
7+
--yz-border-color: #e4e7ed;
8+
--yz-border-color-dark: #dcdfe6;
69
}

‎src/views/dashboard/index.less‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
padding: 24px 0;
66
overflow: hidden;
77
cursor: pointer;
8-
background-color: #ffffff;
8+
background-color: var(--yz-background-color);
9+
border: 1px solid var(--yz-border-color);
910
border-radius: 8px;
1011
.num-icon {
1112
width: 60px;
@@ -35,12 +36,12 @@
3536
display: block;
3637
font-size: 20px;
3738
font-weight: bold;
38-
color: #323233;
39+
color: var(--yz-font-color);
3940
}
4041
.title {
4142
display: block;
4243
font-size: 12px;
43-
color: #666666;
44+
color: var(--yz-font-color-2);
4445
}
4546
}
4647
}
@@ -51,14 +52,16 @@
5152
& > div {
5253
height: 100%;
5354
overflow: hidden;
54-
background: #ffffff;
55+
background: var(--yz-background-color);
5556
border-radius: 8px;
5657
}
5758
.pie-content {
5859
width: 40%;
60+
border: 1px solid var(--yz-border-color);
5961
}
6062
.prod-content {
6163
width: 60%;
6264
margin-right: 24px;
65+
border: 1px solid var(--yz-border-color);
6366
}
6467
}

‎src/views/dashboard/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ function Dashboard() {
9393
{topData.map(item => {
9494
return (
9595
<Col className="gutter-row" span={6} key={item.key}>
96-
<div className="top-num shadow flx-center">
96+
<div className="top-num flx-center opacity-bg">
9797
{item.render()}
9898
<div className="num-text">
9999
<span className="num">{item.num}+</span>
@@ -107,18 +107,18 @@ function Dashboard() {
107107

108108
{/* <div style={{ width: "100%", height: "500px" }} ref={pieChart}></div> */}
109109
<div className="chart-content flx-center">
110-
<div className="prod-content shadow">
110+
<div className="prod-content">
111111
<ProductChart />
112112
</div>
113-
<div className="pie-content shadow">
113+
<div className="pie-content">
114114
<PieChart />
115115
</div>
116116
</div>
117117
<div className="chart-content flx-center">
118-
<div className="prod-content shadow p-20">
118+
<div className="prod-content p-20">
119119
<TableComp />
120120
</div>
121-
<div className="pie-content shadow">
121+
<div className="pie-content">
122122
<GaugeChart />
123123
</div>
124124
</div>

‎src/views/errPage/index.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
flex-direction: column;
33
width: 100%;
44
height: 100%;
5+
background-color: var(--yz-background-color);
56
.title {
67
font-size: 24px;
8+
color: var(--yz-font-color);
79
}
810
.button {
911
margin-top: 20px;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /