perf:修改部分服务端回调为浏览器端回调，提高性能

Author: insistence

dash-fastapi-frontend/callbacks/app_c.py

@@ -64,14 +64,17 @@ def get_primary_color(_, custom_color):
     return dash.no_update
 
 
-@app.callback(
+app.clientside_callback(
+    '''
+    (system_color, custom_color) => {
+        if (custom_color) {
+            return custom_color;
+        }
+        return system_color;
+    }
+    ''',
     Output('app-config-provider', 'primaryColor'),
     [Input('system-app-primary-color-container', 'data'),
      Input('custom-app-primary-color-container', 'data')],
     prevent_initial_call=True
 )
-def render_app_primary_color(system_color, custom_color):
-    if custom_color:
-        return custom_color
-
-    return system_color

dash-fastapi-frontend/callbacks/forget_c.py

@@ -121,75 +121,82 @@ def login_auth(nClicks, username, password, password_again, input_captcha, sessi
 
 @app.callback(
     [Output('message-code-count-down', 'delay'),
-     Output('get-message-code', 'disabled'),
+     Output('get-message-code', 'disabled', allow_duplicate=True),
      Output('sms_code-session_id-container', 'data'),
      Output('global-message-container', 'children', allow_duplicate=True)],
-    [Input('get-message-code', 'nClicks'),
-     Input('message-code-count-down', 'countdown')],
+    Input('get-message-code', 'nClicks'),
     [State('forget-username', 'value'),
      State('sms_code-session_id-container', 'data')],
     prevent_initial_call=True
 )
-def message_countdown(nClicks, countdown, username, session_id):
+def message_countdown(nClicks, username, session_id):
     if nClicks:
 
-        if dash.ctx.triggered_id == 'get-message-code':
-
-            try:
-                if username:
-                    send_result = send_message_api(dict(user_name=username, session_id=session_id))
-                    if send_result.get('code') == 200:
-
-                        return [
-                            120,
-                            True,
-                            send_result.get('data').get('session_id'),
-                            fuc.FefferyFancyMessage(send_result.get('message'), type='success')
-                        ]
-                    else:
-
-                        return [
-                            dash.no_update,
-                            False,
-                            dash.no_update,
-                            fuc.FefferyFancyMessage(send_result.get('message'), type='error')
-                        ]
+        try:
+            if username:
+                send_result = send_message_api(dict(user_name=username, session_id=session_id))
+                if send_result.get('code') == 200:
 
+                    return [
+                        120,
+                        True,
+                        send_result.get('data').get('session_id'),
+                        fuc.FefferyFancyMessage(send_result.get('message'), type='success')
+                    ]
                 else:
+
                     return [
                         dash.no_update,
                         False,
                         dash.no_update,
-                        fuc.FefferyFancyMessage('请输入用户名', type='error')
+                        fuc.FefferyFancyMessage(send_result.get('message'), type='error')
                     ]
 
-            except Exception as e:
-
+            else:
                 return [
                     dash.no_update,
                     False,
                     dash.no_update,
-                    fuc.FefferyFancyMessage(str(e), type='error')
+                    fuc.FefferyFancyMessage('请输入用户名', type='error')
                 ]
 
-        if dash.ctx.triggered_id == 'message-code-count-down':
-            if countdown:
-                return [
-                    dash.no_update, True, dash.no_update, dash.no_update
-                ]
+        except Exception as e:
 
-            return dash.no_update, False, dash.no_update, dash.no_update
+            return [
+                dash.no_update,
+                False,
+                dash.no_update,
+                fuc.FefferyFancyMessage(str(e), type='error')
+            ]
 
     return [dash.no_update] * 4
 
 
-@app.callback(
-    Output('get-message-code', 'children'),
+app.clientside_callback(
+    '''
+    (countdown) => {
+        if (countdown) {
+            return true;
+        }
+        return false;
+    }
+    ''',
+    Output('get-message-code', 'disabled', allow_duplicate=True),
     Input('message-code-count-down', 'countdown'),
     prevent_initial_call=True
 )
-def update_button_content(countdown):
-    if countdown:
-        return f"获取中{countdown}s"
 
-    return "获取验证码"
+
+app.clientside_callback(
+    '''
+    (countdown) => {
+         if (countdown) {
+            return `获取中${countdown}s`
+         }
+         return '获取验证码'
+    }
+    ''',
+    Output('get-message-code', 'children'),
+    Input('message-code-count-down', 'countdown'),
+    prevent_initial_call=True
+)

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

@@ -1,17 +1,19 @@
-import dash
 from dash.dependencies import Input, Output
 
 from server import app
 
 
 # url-pathname控制currentKey回调
-@app.callback(
+app.clientside_callback(
+    '''
+    (data) => {
+        if (data) {
+            return data['current_key'];
+        }
+        return window.dash_clientside.no_update;
+    }
+    ''',
     Output('index-side-menu', 'currentKey'),
     Input('current-key-container', 'data'),
     prevent_initial_call=True
 )
-def pathname_update_current_key(data):
-    if data:
-        return data['current_key']
-
-    return dash.no_update

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

@@ -9,37 +9,38 @@
 
 
 # 页首右侧个人中心选项卡回调
-@app.callback(
+app.clientside_callback(
+    '''
+    (nClicks, clickedKey) => {
+        if (clickedKey == '退出登录') {
+            return [
+                window.dash_clientside.no_update,
+                true,
+                false
+            ];
+        } else if (clickedKey == '个人资料') {
+            return [
+                '/user/profile',
+                false,
+                false
+            ];
+        } else if ( clickedKey == '布局设置') {
+            return [
+                window.dash_clientside.no_update,
+                false,
+                true
+            ]
+        }
+        return window.dash_clientside.no_update;
+     }
+    ''',
     [Output('dcc-url', 'pathname', allow_duplicate=True),
      Output('logout-modal', 'visible'),
      Output('layout-setting-drawer', 'visible')],
     Input('index-header-dropdown', 'nClicks'),
     State('index-header-dropdown', 'clickedKey'),
     prevent_initial_call=True
 )
-def index_dropdown_click(nClicks, clickedKey):
-    if clickedKey == '退出登录':
-        return [
-            dash.no_update,
-            True,
-            False
-        ]
-
-    elif clickedKey == '个人资料':
-        return [
-            '/user/profile',
-            False,
-            False
-        ]
-
-    elif clickedKey == '布局设置':
-        return [
-            dash.no_update,
-            False,
-            True
-        ]
-
-    return [dash.no_update] * 3
 
 
 # 退出登录回调
@@ -65,27 +66,35 @@ def logout_confirm(okCounts):
 
 
 # 全局页面重载回调
-@app.callback(
+app.clientside_callback(
+    '''
+    (nClicks) => {
+        return true;
+    }
+    ''',
     Output('trigger-reload-output', 'reload'),
     Input('index-reload', 'nClicks'),
     prevent_initial_call=True
 )
-def reload_page(nClicks):
-    return True
 
 
 # 布局设置回调
-@app.callback(
+app.clientside_callback(
+    '''
+    (visible, custom_color) => {
+        if (visible) {
+            if (custom_color) {
+                return custom_color;
+            }
+        }
+        return window.dash_clientside.no_update;
+    }
+    ''',
     Output('hex-color-picker', 'color', allow_duplicate=True),
     Input('layout-setting-drawer', 'visible'),
     State('custom-app-primary-color-container', 'data'),
     prevent_initial_call=True
 )
-def init_hex_color_picker(visible, custom_color):
-    if visible:
-        if custom_color:
-            return custom_color
-    return dash.no_update
 
 
 @app.callback(

dash-fastapi-frontend/callbacks/monitor_c/cache_c/control_c.py

@@ -3,16 +3,18 @@
 from server import app
 
 
-@app.callback(
+app.clientside_callback(
+    '''
+    (n_intervals, data) => {
+        return [data, true];
+    }
+    ''',
     [Output('echarts-data-container', 'data'),
      Output('init-echarts-interval', 'disabled')],
     Input('init-echarts-interval', 'n_intervals'),
     State('init-echarts-data-container', 'data'),
     prevent_initial_call=True
 )
-def init_echarts(n_intervals, data):
-
-    return [data, True]
 
 
 app.clientside_callback(

dash-fastapi-frontend/callbacks/monitor_c/job_c/job_c.py

@@ -108,32 +108,42 @@ def get_job_table_data(search_click, refresh_click, pagination, operations, job_
     return [dash.no_update] * 5
 
 
-@app.callback(
+app.clientside_callback(
+    '''
+    (reset_click) => {
+        if (reset_click) {
+            return [null, null, null, {'type': 'reset'}]
+        }
+        return window.dash_clientside.no_update;
+    }
+    ''',
     [Output('job-job_name-input', 'value'),
      Output('job-job_group-select', 'value'),
      Output('job-status-select', 'value'),
      Output('job-operations-store', 'data')],
     Input('job-reset', 'nClicks'),
     prevent_initial_call=True
 )
-def reset_job_query_params(reset_click):
-    if reset_click:
-        return [None, None, None, {'type': 'reset'}]
-
-    return [dash.no_update] * 4
 
 
-@app.callback(
+app.clientside_callback(
+    '''
+    (hidden_click, hidden_status) => {
+        if (hidden_click) {
+            return [
+                !hidden_status,
+                hidden_status ? '隐藏搜索' : '显示搜索'
+            ]
+        }
+        return window.dash_clientside.no_update;
+    }
+    ''',
     [Output('job-search-form-container', 'hidden'),
      Output('job-hidden-tooltip', 'title')],
     Input('job-hidden', 'nClicks'),
     State('job-search-form-container', 'hidden'),
     prevent_initial_call=True
 )
-def hidden_job_search_form(hidden_click, hidden_status):
-    if hidden_click:
-        return [not hidden_status, '隐藏搜索' if hidden_status else '显示搜索']
-    return [dash.no_update] * 2
 
 
 @app.callback(