mirror of
https://gitcode.com/JianFeeeee/webui4frpc.git
synced 2026-09-19 16:38:31 +00:00
f935cad33f
此前只有一个 max-width:900px 断点（仅缩窄侧栏），手机上 210px 侧栏吃掉 半屏、卡片网格横向溢出、按钮被挤成细条。新增 720px / 380px 两档断点： App.vue（关键） - ≤720px：shell 转竖向，导航从侧栏抽出固定到屏幕底部（图标上/文字下）， 品牌+身份+主题折进顶部窄条；tab 最小 44px 触控高度 - 内容区预留 env(safe-area-inset-bottom)，避开 iOS 手势条 - ≤380px 再压一档：隐藏权限徽标、缩小字号 StatusView - card-grid 的 minmax(320px) 在 375px 屏溢出 → 单列 - KPI 由 auto-fit 改固定两列（auto-fit 窄屏退化单列使四卡拉长），≤380px 单列 - 转发卡 fwd-head 原一行塞 7~8 元素 → 路由占整行、按钮另起一行平分 - 分组标题按钮不再被 margin-left:auto 压扁 ClusterView - 环拓扑改竖向，节点卡占满宽，箭头旋转 90° 指下 - nodeKey（32 位 hex）允许 break-all，不再撑宽容器 - 日志 lg-detail 由 max-width:60%+nowrap 改整行完整显示 SettingsView / UsersView / CanvasView - binary-row、setting-row 竖排；表格卡标题行竖排、操作按钮平分 - 画布 toolbar 按钮换行平铺；vue-flow handle 12px→16px（触控可达） index.html - viewport 加 viewport-fit=cover，这是 env(safe-area-inset-*) 生效前提 验证：tsc --noEmit 通过、npm run build 通过、dist 已重新 embed， 三节点部署后环正常（pending=0，5 条转发 frpc 进程与 topology 归属一致）。