3. 交互式看板前端框架选型

科学计算看板的核心诉求与普通业务报表不同：它既要承载数值计算结果、参数扫描、实时曲线，又要允许用户通过控件反向驱动计算。前端框架的选择直接决定了后续开发效率、部署方式和可维护性。本节先建立四个主流框架的对比坐标，再给出可落地的选型依据，最后搭建一个可运行的最小看板骨架。

四个框架的定位差异

Plotly Dash 基于 Flask + React，采用“回调（callback）”模型：每个交互控件声明输入与输出，框架负责前后端通信。它的优势是布局自由度高、组件生态成熟、适合多页面与复杂联动，代价是回调链需要显式设计，状态管理在大型应用中要额外规划。

Streamlit 采用“脚本重跑”模型：用户每次操作，整个脚本自上而下重新执行，控件返回值即当前状态。开发速度极快，几十行即可出图，适合探索性分析与原型；但细粒度布局控制较弱，复杂多步交互需要借助 session_state 管理，长计算需配合缓存装饰器。

Panel 构建在 Bokeh 之上，主打“参数化对象 + 响应式绑定”，对 HoloViews、hvPlot 等科学可视化生态整合最好，适合需要多视图联动、大数据量渲染和 notebook 与独立应用双形态的场景，学习曲线相对陡。

Bokeh 是底层绘图与交互库，提供 ColumnDataSource 与 CustomJS 等机制，控制力最强，但需要自行搭建布局、控件与服务端逻辑，开发成本最高，通常作为 Panel 的底座而非直接选型对象。

选型依据：从需求反推框架

选型不应从“哪个框架流行”出发，而应从四个维度反推：交互复杂度（是否需要多控件联动、跨图筛选、多页面）、计算负载（是否需要缓存、异步、后台任务）、可视化生态（是否依赖 HoloViews、Matplotlib、Plotly 等特定库）、交付形态（内网服务、单机脚本、notebook 嵌入还是静态导出）。

一个实用的判断顺序是：若看板以“参数调节 + 即时重算 + 少量图表”为主，且开发周期短，选 Streamlit；若需要多标签页、跨图联动、用户权限与较正式的部署，选 Dash；若数据量大、需要多视图共享同一数据源并做联动缩放，选 Panel；只有在需要深度定制前端行为、且团队具备前端能力时，才直接使用 Bokeh。

搭建第一个可运行骨架（以 Streamlit 为例）

下面给出一个最小但完整的骨架：左侧参数面板控制阻尼比 ζ 与固有频率 ωₙ，右侧实时绘制二阶系统阶跃响应。示例参数为教学假设值，非实测数据。

import numpy as np
import streamlit as st
import plotly.graph_objects as go

st.set_page_config(page_title="二阶系统响应看板", layout="wide")
st.title("二阶系统阶跃响应")

with st.sidebar:
    zeta = st.slider("阻尼比 ζ", 0.05, 1.5, 0.3, 0.05)
    wn = st.slider("固有频率 ωₙ (rad/s)", 0.5, 10.0, 2.0, 0.5)

@st.cache_data
def step_response(zeta, wn, t_end=10.0, n=800):
    t = np.linspace(0, t_end, n)
    if zeta < 1:
        wd = wn * np.sqrt(1 - zeta**2)
        y = 1 - np.exp(-zeta*wn*t) * (
            np.cos(wd*t) + zeta/np.sqrt(1-zeta**2)*np.sin(wd*t))
    else:
        y = 1 - np.exp(-wn*t) * (1 + wn*t)
    return t, y

t, y = step_response(zeta, wn)
fig = go.Figure(go.Scatter(x=t, y=y, mode="lines", name="y(t)"))
fig.add_hline(y=1.0, line_dash="dash", line_color="gray")
fig.update_layout(xaxis_title="时间 t (s)", yaxis_title="输出 y(t)",
                  yaxis_range=[0, 2.2], height=460)
st.plotly_chart(fig, use_container_width=True)
st.caption(f"当前 ζ={zeta}, ωₙ={wn}；超调量约 {max(0,(y.max()-1)*100):.1f}%")

运行方式为在终端执行 streamlit run app.py，浏览器自动打开本地页面。骨架中有三个关键点值得注意：其一，@st.cache_data 把纯计算函数缓存起来，参数不变时不会重复计算，这是 Streamlit 应对长计算的标准手段；其二，控件返回值直接作为函数入参，脚本重跑时状态自然恢复，无需手动维护；其三，用 st.caption 把关键指标（超调量）直接回显，形成“调参—观察—判断”的闭环。

骨架验证与判断依据

骨架跑通后，用三个检查点确认它具备继续扩展的基础：拖动 ζ 从 0.3 到 0.05，曲线应出现明显振荡且超调量上升，说明控件到计算的链路正确；把 ωₙ 从 2 调到 8，响应应整体加快、峰值时间前移，说明参数语义传递无误；重复拖动同一参数，页面应无卡顿，说明缓存生效。若出现图表不刷新，优先检查控件变量是否在绘图前被重新赋值；若出现计算缓慢，检查缓存装饰器是否遗漏或函数参数是否包含不可哈希对象。