Skip to content

Commit ca54237

Browse files
committed
feat:新增布局设置——主题颜色配置,支持在后端配置默认主题颜色
1 parent 9416a3b commit ca54237

File tree

8 files changed

+203
-9
lines changed

8 files changed

+203
-9
lines changed

dash-fastapi-frontend/app.py

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@
3232
# 注入页面内容挂载点
3333
html.Div(id='app-mount'),
3434

35+
# 注入全局配置容器
36+
fac.AntdConfigProvider(id='app-config-provider'),
37+
3538
# 辅助处理多输入 -> 存储接口返回token校验信息
3639
render_store_container(),
3740

@@ -70,14 +73,15 @@
7073
Output('menu-info-store-container', 'data'),
7174
Output('menu-list-store-container', 'data')],
7275
Input('url-container', 'pathname'),
73-
State('url-container', 'trigger'),
76+
[State('url-container', 'trigger'),
77+
State('token-container', 'data')],
7478
prevent_initial_call=True
7579
)
76-
def router(pathname, trigger):
80+
def router(pathname, trigger, session_token):
7781
# 检查当前会话是否已经登录
7882
token_result = session.get('Authorization')
7983
# 若已登录
80-
if token_result:
84+
if token_result and session_token and token_result == session_token:
8185
try:
8286
current_user_result = get_current_user_info_api()
8387
if current_user_result['code'] == 200:

dash-fastapi-frontend/callbacks/app_c.py

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
from dash.dependencies import Input, Output, State
66
from flask import session, request
77
from server import app, logger
8+
from api.config import query_config_list_api
89

910

1011
# api拦截器——根据api返回编码确定是否强制退出
@@ -45,3 +46,33 @@ def redirect_page(okCounts):
4546
]
4647

4748
return dash.no_update
49+
50+
51+
# 应用初始化主题颜色
52+
@app.callback(
53+
Output('system-app-primary-color-container', 'data'),
54+
Input('app-mount', 'id'),
55+
State('custom-app-primary-color-container', 'data')
56+
)
57+
def get_primary_color(_, custom_color):
58+
if not custom_color:
59+
primary_color_res = query_config_list_api(config_key='sys.index.skinName')
60+
if primary_color_res.get('code') == 200:
61+
primary_color = primary_color_res.get('data')
62+
63+
return primary_color
64+
65+
return dash.no_update
66+
67+
68+
@app.callback(
69+
Output('app-config-provider', 'primaryColor'),
70+
[Input('system-app-primary-color-container', 'data'),
71+
Input('custom-app-primary-color-container', 'data')],
72+
prevent_initial_call=True
73+
)
74+
def render_app_primary_color(system_color, custom_color):
75+
if custom_color:
76+
return custom_color
77+
78+
return system_color

dash-fastapi-frontend/callbacks/layout_c/head_c.py

Lines changed: 83 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import dash
22
from dash import dcc
3+
import feffery_utils_components as fuc
34
from flask import session
45
import time
56
from dash.dependencies import Input, Output, State
@@ -11,7 +12,8 @@
1112
# 页首右侧个人中心选项卡回调
1213
@app.callback(
1314
[Output('dcc-url', 'pathname', allow_duplicate=True),
14-
Output('logout-modal', 'visible')],
15+
Output('logout-modal', 'visible'),
16+
Output('layout-setting-drawer', 'visible')],
1517
Input('index-header-dropdown', 'nClicks'),
1618
State('index-header-dropdown', 'clickedKey'),
1719
prevent_initial_call=True
@@ -20,16 +22,25 @@ def index_dropdown_click(nClicks, clickedKey):
2022
if clickedKey == '退出登录':
2123
return [
2224
dash.no_update,
23-
True
25+
True,
26+
False
2427
]
2528

2629
elif clickedKey == '个人资料':
2730
return [
2831
'/user/profile',
32+
False,
2933
False
3034
]
3135

32-
return [dash.no_update] * 2
36+
elif clickedKey == '布局设置':
37+
return [
38+
dash.no_update,
39+
False,
40+
True
41+
]
42+
43+
return [dash.no_update] * 3
3344

3445

3546
# 退出登录回调
@@ -62,3 +73,72 @@ def logout_confirm(okCounts):
6273
)
6374
def reload_page(nClicks):
6475
return True
76+
77+
78+
# 布局设置回调
79+
@app.callback(
80+
Output('hex-color-picker', 'color', allow_duplicate=True),
81+
Input('layout-setting-drawer', 'visible'),
82+
State('custom-app-primary-color-container', 'data'),
83+
prevent_initial_call=True
84+
)
85+
def init_hex_color_picker(visible, custom_color):
86+
if visible:
87+
if custom_color:
88+
return custom_color
89+
return dash.no_update
90+
91+
92+
@app.callback(
93+
[Output('selected-color-input', 'value'),
94+
Output('selected-color-input', 'style')],
95+
Input('hex-color-picker', 'color'),
96+
State('selected-color-input', 'style'),
97+
prevent_initial_call=True
98+
)
99+
def show_selected_color(pick_color, old_style):
100+
101+
return [
102+
pick_color,
103+
{
104+
**old_style,
105+
'background': pick_color
106+
}
107+
]
108+
109+
110+
@app.callback(
111+
[Output('custom-app-primary-color-container', 'data'),
112+
Output('hex-color-picker', 'color', allow_duplicate=True),
113+
Output('global-message-container', 'children', allow_duplicate=True)],
114+
[Input('save-setting', 'nClicks'),
115+
Input('reset-setting', 'nClicks')],
116+
[State('selected-color-input', 'value'),
117+
State('system-app-primary-color-container', 'data')],
118+
prevent_initial_call=True
119+
)
120+
def save_rest_layout_setting(save_click, reset_click, picked_color, system_color):
121+
if save_click or reset_click:
122+
trigger_id = dash.ctx.triggered_id
123+
if trigger_id == 'save-setting':
124+
125+
return [
126+
picked_color,
127+
dash.no_update,
128+
fuc.FefferyFancyMessage('保存成功', type='success')
129+
]
130+
131+
elif trigger_id == 'reset-setting':
132+
133+
return [
134+
None,
135+
system_color,
136+
fuc.FefferyFancyMessage('重置成功', type='success')
137+
]
138+
139+
return [
140+
dash.no_update,
141+
dash.no_update,
142+
dash.no_update
143+
]
144+

dash-fastapi-frontend/callbacks/login_c.py

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
Output('login-captcha-form-item', 'help'),
1919
Output('login-captcha-image-container', 'n_clicks'),
2020
Output('login-submit', 'loading'),
21+
Output('token-container', 'data'),
2122
Output('redirect-container', 'children', allow_duplicate=True),
2223
Output('global-message-container', 'children', allow_duplicate=True)],
2324
Input('login-submit', 'nClicks'),
@@ -52,6 +53,7 @@ def login_auth(nClicks, username, password, input_captcha, session_id, image_cli
5253
None,
5354
dash.no_update,
5455
True,
56+
token,
5557
dcc.Location(
5658
pathname='/',
5759
id='login-redirect'
@@ -71,6 +73,7 @@ def login_auth(nClicks, username, password, input_captcha, session_id, image_cli
7173
image_click + 1,
7274
False,
7375
None,
76+
None,
7477
None
7578
]
7679

@@ -86,6 +89,7 @@ def login_auth(nClicks, username, password, input_captcha, session_id, image_cli
8689
image_click + 1,
8790
False,
8891
None,
92+
None,
8993
None
9094
]
9195

@@ -101,6 +105,7 @@ def login_auth(nClicks, username, password, input_captcha, session_id, image_cli
101105
image_click + 1,
102106
False,
103107
None,
108+
None,
104109
None
105110
]
106111

@@ -116,6 +121,7 @@ def login_auth(nClicks, username, password, input_captcha, session_id, image_cli
116121
image_click + 1,
117122
False,
118123
None,
124+
None,
119125
None
120126
]
121127

@@ -131,6 +137,7 @@ def login_auth(nClicks, username, password, input_captcha, session_id, image_cli
131137
image_click + 1,
132138
False,
133139
None,
140+
None,
134141
fuc.FefferyFancyMessage(userinfo_result['message'], type='error'),
135142
]
136143
except Exception as e:
@@ -145,6 +152,7 @@ def login_auth(nClicks, username, password, input_captcha, session_id, image_cli
145152
image_click + 1,
146153
False,
147154
None,
155+
None,
148156
fuc.FefferyFancyMessage('接口异常', type='error'),
149157
]
150158

@@ -158,10 +166,11 @@ def login_auth(nClicks, username, password, input_captcha, session_id, image_cli
158166
dash.no_update,
159167
False,
160168
None,
169+
None,
161170
None
162171
]
163172

164-
return [dash.no_update] * 6 + [image_click + 1] + [dash.no_update] * 3
173+
return [dash.no_update] * 6 + [image_click + 1] + [dash.no_update] * 4
165174

166175

167176
@app.callback(

dash-fastapi-frontend/store/store.py

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,15 @@ def render_store_container():
55

66
return html.Div(
77
[
8+
# 应用主题颜色存储容器
9+
dcc.Store(id='system-app-primary-color-container', data='#1890ff'),
10+
dcc.Store(id='custom-app-primary-color-container', storage_type='session'),
811
# 接口校验返回存储容器
912
dcc.Store(id='api-check-token'),
1013
# 接口校验返回存储容器
1114
dcc.Store(id='api-check-result-container'),
1215
# token存储容器
13-
dcc.Store(id='token-container'),
16+
dcc.Store(id='token-container', storage_type='session'),
1417
# 菜单信息存储容器
1518
dcc.Store(id='menu-info-store-container'),
1619
dcc.Store(id='menu-list-store-container'),

dash-fastapi-frontend/utils/request.py

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ def api_request(method: str, url: str, is_headers: bool, params: Optional[dict]
1010
api_url = ApiBaseUrlConfig.BaseUrl + url
1111
method = method.lower().strip()
1212
user_agent = request.headers.get('User-Agent')
13+
authorization = session.get('Authorization') if session.get('Authorization') else ''
1314
if is_headers:
14-
api_headers = {'Authorization': 'Bearer ' + session.get('Authorization'), 'remote_addr': request.remote_addr,
15+
api_headers = {'Authorization': 'Bearer ' + authorization, 'remote_addr': request.remote_addr,
1516
'User-Agent': user_agent}
1617
else:
1718
api_headers = {'remote_addr': request.remote_addr, 'User-Agent': user_agent}

dash-fastapi-frontend/views/layout/__init__.py

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,67 @@ def render_content(menu_info):
3333
# ]
3434
# ),
3535

36+
# 布局设置抽屉
37+
fac.AntdDrawer(
38+
[
39+
fac.AntdText(
40+
'主题颜色',
41+
style={
42+
'fontSize': 16,
43+
'fontWeight': 500
44+
}
45+
),
46+
fuc.FefferyHexColorPicker(
47+
id='hex-color-picker',
48+
color='#1890ff',
49+
showAlpha=True,
50+
style={
51+
'width': '100%',
52+
'marginTop': '10px'
53+
}
54+
),
55+
fac.AntdInput(
56+
id='selected-color-input',
57+
value='#1890ff',
58+
readOnly=True,
59+
style={
60+
'marginTop': '15px',
61+
'background': '#1890ff'
62+
}
63+
),
64+
fac.AntdSpace(
65+
[
66+
fac.AntdButton(
67+
[
68+
fac.AntdIcon(
69+
icon='antd-save'
70+
),
71+
'保存配置',
72+
],
73+
id='save-setting',
74+
type='primary'
75+
),
76+
fac.AntdButton(
77+
[
78+
fac.AntdIcon(
79+
icon='antd-sync'
80+
),
81+
'重置配置',
82+
],
83+
id='reset-setting',
84+
),
85+
],
86+
style={
87+
'marginTop': '15px'
88+
}
89+
)
90+
],
91+
id='layout-setting-drawer',
92+
visible=False,
93+
title='布局设置',
94+
width=320
95+
),
96+
3697
# 退出登录对话框提示
3798
fac.AntdModal(
3899
html.Div(

dash-fastapi-frontend/views/layout/components/head.py

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,11 @@ def render_head_content():
7676
'key': '个人资料',
7777
'icon': 'antd-idcard'
7878
},
79+
{
80+
'title': '布局设置',
81+
'key': '布局设置',
82+
'icon': 'antd-layout'
83+
},
7984
{
8085
'isDivider': True
8186
},

0 commit comments

Comments
 (0)