ykxmz/_build/fix_admin_mobile.py

# -*- coding: utf-8 -*-
"""修管理页的窄屏（手机）显示。

问题：
    1. 窄屏下每个 td 是 flex 布局，左边用 ::before 显示 data-l 标签，
       但我压根没给 td 加 data-l —— 所以左边全是空白。
    2. 右边的值（配对码、流量）被挤出屏幕截断了。

修法：
    1. 给每个 td 补 data-l="设备/配对码/状态/..."
    2. 窄屏布局改成：标签左、值右、允许换行；给值加 min-width:0
       和 word-break，别让它把容器撑破。
    3. 设备名那一行单独占满，不要挤在 flex 里。
"""
from __future__ import annotations

import ast
import sys
from pathlib import Path

RELAY = Path(r"C:\Users\shu\Desktop\deepseekagent\LanRemote\relay" r"\relay.py")

# ---------------- 1. 给 td 补 data-l ----------------

ROW_OLD = '''                f'<td class=name>'
                f'<span class="dot {"on" if online else "off"}"></span>'
                f'{_esc(device["name"])}<div class=sub2>'
                f'{_esc(device["deviceId"])}</div></td>'
                f'<td><code>{_esc(device["code"])}</code></td>'
                f'<td>{badge}</td>'
                f'<td>{device["idleSeconds"]}s</td>'
                f'<td>{device["queuedToClient"]} / {device["queuedToAgent"]}</td>'
                f'<td class=num>{_kb(device["bytesIn"])} / {_kb(device["bytesOut"])}</td>'
                '<td class=ops><button class="btn del" '''

ROW_NEW = '''                # data-l 是给窄屏用的：表格变成卡片时，
                # 每个值前面用 ::before 显示这个标签（见 CSS 的 @media）
                f'<td class=name data-l="设备">'
                f'<span class="dot {"on" if online else "off"}"></span>'
                f'<span class=v>{_esc(device["name"])}</span>'
                f'<div class=sub2>{_esc(device["deviceId"])}</div></td>'
                f'<td data-l="配对码"><code>{_esc(device["code"])}</code></td>'
                f'<td data-l="状态">{badge}</td>'
                f'<td data-l="空闲">{device["idleSeconds"]}s</td>'
                f'<td data-l="待发(表/机)">{device["queuedToClient"]} / '
                f'{device["queuedToAgent"]}</td>'
                f'<td class=num data-l="流量(入/出)">'
                f'{_kb(device["bytesIn"])} / {_kb(device["bytesOut"])}</td>'
                '<td class=ops><button class="btn del" '''

# ---------------- 2. 窄屏 CSS 重写 ----------------

MEDIA_OLD = ''' @media (max-width:720px){{
   .wrap{{padding:16px 12px 32px}}
   .meta{{margin-left:0;text-align:left;width:100%}}
   thead{{display:none}}
   tbody tr{{display:block;border-bottom:1px solid var(--border);
     padding:12px 14px;position:relative}}
   tbody tr:last-child{{border-bottom:none}}
   tbody td{{display:flex;justify-content:space-between;gap:12px;
     border:none;padding:4px 0;text-align:right}}
   tbody td::before{{content:attr(data-l);color:var(--dim);font-size:12px;
     text-align:left;flex:none}}
   td.pickcell{{position:absolute;right:12px;top:12px;width:auto;
     padding:0}}
   td.pickcell::before{{content:''}}
   td.name{{display:block;text-align:left;padding-right:30px}}
   td.name::before{{content:''}}
   td.ops{{justify-content:flex-end;padding-top:8px}}
   td.ops::before{{content:''}}
   td.empty{{display:block}}
   td.empty::before{{content:''}}
 }}'''

MEDIA_NEW = ''' @media (max-width:720px){{
   .wrap{{padding:16px 12px 32px}}
   .meta{{margin-left:0;text-align:left;width:100%}}
   .stats{{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}}
   .stat{{padding:11px 13px}}
   .stat .n{{font-size:21px}}
   .urlrow{{flex-direction:column;align-items:stretch}}
   .url{{min-width:0;font-size:13px}}
   thead{{display:none}}
   tbody tr{{display:block;border-bottom:1px solid var(--border);
     padding:12px 14px 14px;position:relative}}
   tbody tr:last-child{{border-bottom:none}}
   /* 每个值一行：左边标签、右边值。
      min-width:0 + overflow-wrap 是关键 ——
      少了它，长配对码/流量会把容器撑破、右边的值被截掉。 */
   tbody td{{display:flex;justify-content:space-between;align-items:baseline;
     gap:14px;border:none;padding:3px 0;text-align:right;
     min-width:0;overflow-wrap:anywhere}}
   tbody td::before{{content:attr(data-l);color:var(--dim);font-size:12px;
     text-align:left;flex:none}}
   tbody td>*{{min-width:0}}
   /* 设备名占满整行，不参与"标签/值"那一套 */
   td.name{{display:block;text-align:left;padding:0 32px 8px 0}}
   td.name::before{{content:'';display:none}}
   td.name .v{{font-size:15px}}
   td.pickcell{{position:absolute;right:12px;top:12px;width:auto;
     padding:0;min-width:0}}
   td.pickcell::before{{content:'';display:none}}
   td.ops{{justify-content:flex-end;padding-top:10px;margin-top:4px;
     border-top:1px solid #21262d}}
   td.ops::before{{content:'';display:none}}
   td.empty{{display:block;text-align:center}}
   td.empty::before{{content:'';display:none}}
 }}'''


def main() -> int:
    text = RELAY.read_text(encoding="utf-8")
    ok = True

    if 'data-l="配对码"' in text:
        print("  行里的 data-l 已经在")
    elif ROW_OLD in text:
        text = text.replace(ROW_OLD, ROW_NEW, 1)
        print("  行里补上 data-l 标签")
    else:
        print("  [失败] 行锚点没找到")
        ok = False

    if "min-width:0;overflow-wrap:anywhere" in text:
        print("  窄屏 CSS 已经改过")
    elif MEDIA_OLD in text:
        text = text.replace(MEDIA_OLD, MEDIA_NEW, 1)
        print("  窄屏 CSS 重写（修截断 + 显示标签）")
    else:
        print("  [失败] 窄屏 CSS 锚点没找到")
        ok = False

    RELAY.write_text(text, encoding="utf-8", newline="\n")
    ast.parse(text)
    print("  relay.py 语法 OK")
    return 0 if ok else 1


if __name__ == "__main__":
    sys.exit(main())