• IanShaw027's avatar
    feat(ops): 优化仪表盘Header响应式布局与指标展示 · e4bc9f6f
    IanShaw027 authored
    **响应式优化**:
    - 添加flex-wrap支持窄屏时间选择器自动换行
    - 当前QPS/TPS在窄屏时自动换行,避免溢出
    - 时间按钮在窄屏使用更小字号和间距(9px/1.5px)
    - 当前数值使用响应式字体(xl→sm:2xl)
    
    **指标展示优化**:
    1. 请求卡片:
       - 标题简化:总请求 → 请求
       - 字段调整:请求 → 请求数
       - 移除:平均延迟、平均首字延迟(避免冗余)
    
    2. 延迟和TTFT卡片:
       - 布局:grid → flex-wrap(自适应布局)
       - 指标不换行:添加whitespace-nowrap
       - 最小宽度:min-w-[60px]保证可读性
       - 单位内联:名称、数值、单位在同一行(P95: 123 ms)
       - 自动换行:整个指标项作为整体换行
    
    **效果**:
    - 窄屏:所有元素自动适配,无溢出
    - 宽屏:充分利用空间,清晰展示
    - 灵活布局:根据容器宽度自动调整指标排列
    e4bc9f6f
OpsDashboardHeader.vue 54 KB