labull-framework 0.1.1__tar.gz → 0.1.3__tar.gz

{labull_framework-0.1.1/labull_framework.egg-info → labull_framework-0.1.3}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: labull-framework
-Version: 0.1.1
+Version: 0.1.3
 Summary: Labull Framework: a pluggable Django app with Authing OIDC login and magic blocks
 Author: Labull Framework
 License-Expression: MIT

{labull_framework-0.1.1 → labull_framework-0.1.3}/labull_framework/admin.py

@@ -59,5 +59,5 @@ class MagicBlockAdmin(admin.ModelAdmin):
         return None
 
     def has_add_permission(self, request) -> bool:
-        # 块的 uuid 由开发者在前端写死（`<MagicBlockHost uuid="…">`），admin 里"新增"没有意义。
+        # 块的 uuid 由开发者在前端路由表里写死（`MagicBlockPage` 的 `props.uuid`），admin 里"新增"没有意义。
         return False

{labull_framework-0.1.1 → labull_framework-0.1.3}/labull_framework/canvas/data.py

@@ -253,6 +253,27 @@ def _verbose(model: Any) -> str:
     return str(getattr(model._meta, 'verbose_name', '') or '')
 
 
+def m2m_through(field: Any) -> Any:
+    """多对多那条关系**中间表**是哪个模型。
+
+    🔴 正反两侧拿中间表的方式**不一样**，只认一边就会炸（真踩过：`canvasdemo` 的演示表
+       `Course.students` 一加进来，`/canvas` 直接 500）：
+       · **正向**（`ManyToManyField`）：中间表挂在 `field.remote_field.through` 上；
+       · **反向**（`ManyToManyRel`，例如 `Student.courses`）：`field.remote_field` 是**正向那个
+         field 本身**，而它在 Django 里**没有 `through` 属性**（不是 None，是 AttributeError），
+         中间表挂在 `field.through` 上。
+    ⚠️ 老代码写的是 `getattr(field.remote_field, 'through', None)`：反向那一侧拿到 `None`，
+       紧接着 `None._meta` 抛 `AttributeError` —— 而 `auth` 的那几张表恰好在 `SKIP_TABLES` 里、
+       平时又没人写过普通多对多，所以这个坑一直没露出来。`getattr` 的默认值把 AttributeError
+       一起吞了，连报错都指不到真正的原因。
+    """
+    for owner in (getattr(field, 'remote_field', None), field):
+        through = getattr(owner, 'through', None)
+        if through is not None:
+            return through
+    return None
+
+
 def shape() -> dict[str, list[dict[str, Any]]]:
     """当前的模型形状（进程内现算，不需要任何文件）。
 
@@ -270,14 +291,21 @@ def shape() -> dict[str, list[dict[str, Any]]]:
         for field in model._meta.get_fields():
             if getattr(field, 'many_to_many', False):
                 target = field.related_model
-                through = getattr(getattr(field, 'remote_field', None), 'through', None)
+                through = m2m_through(field)
+                # 🔴 "反向那一侧"必须标成 `readonly`：多对多的正反两条都走这个分支，
+                #    而前端是**按"两端表名排序"分组、每组只画正向那条**的。
+                #    老代码这里没给 `readonly` ⇒ 反向那条也进了 forward 组 ⇒ **同一个关系画了两条
+                #    方向相反的线、必然交叉**（用户报的「关联键故意交叉了」就是这个，
+                #    实测 `course -> student` 与 `student -> course` 各画了一条）。
+                #    判定：反向的多对多是一个 `ManyToManyRel`，`auto_created` 为真。
                 relations.append(
                     _relation_of(
                         field,
                         'manyToMany',
                         '*',
                         target,
-                        via=str(getattr(through._meta, 'db_table', '') or '') or None,
+                        via=str(getattr(getattr(through, '_meta', None), 'db_table', '') or '') or None,
+                        readonly=bool(getattr(field, 'auto_created', False)),
                     )
                 )
                 continue
@@ -366,18 +394,74 @@ def payload() -> dict[str, Any]:
     current_tables = current['tables']
     baseline = gitinfo.baseline_tables()
     diff = _diff(baseline, current_tables)
+    relation_diff = _relation_diff(baseline, current_tables)
     return {
         'tables': current_tables,
         'deletedTables': _deleted_tables(baseline, diff['deleted']),
         'diff': diff,
         # 逐列的差异（`表名 → {added, modified, deleted}`）：前端拿它给**整行**上色。
         'fieldDiff': _field_diff(baseline, current_tables),
+        # 逐条**关联**的差异（`表名 → {added, modified, deleted}`，键是关联名）：前端拿它给**连线上色**。
+        'relationDiff': relation_diff,
+        # 🔴 **被删掉的关联**那几条的原文（`表名 → [关联]`）：现在这一份里已经没有了，
+        #    前端要照基线的这一份把红线补画出来 —— 否则关联一删就"少了一根线"，
+        #    看不出是哪两张表之间断的（与 `deletedTables` 同一个道理）。
+        'deletedRelations': _deleted_relations(baseline, relation_diff),
         'git': gitinfo.head(),
         'baseline': 'none' if baseline is None else 'present',
         'layout': read_layout(),
     }
 
 
+def _deleted_relations(
+    baseline: list[dict[str, Any]] | None,
+    relation_diff: dict[str, dict[str, list[str]]],
+) -> dict[str, list[dict[str, Any]]]:
+    """基线里有、现在没有的那些关联（只取真的被删掉的那几个键）。
+
+    🔴 **要把 `targetTable` 补齐**：老契约里的关联只写了 `target`（模型名），没有 `targetTable`
+       （表名）—— 而前端是**按表名**找卡片的。不补的话那条红线找不到对端，会被直接跳过，
+       症状就是"关联删了但图上什么都没少"（与这一条功能想解决的问题正好相反）。
+    """
+    if not baseline or not relation_diff:
+        return {}
+    out: dict[str, list[dict[str, Any]]] = {}
+    for table in baseline:
+        name = str(table.get('table'))
+        removed = (relation_diff.get(name) or {}).get('deleted') or []
+        if not removed:
+            continue
+        old = _relations_of(table)
+        rows = []
+        for key in removed:
+            row = old.get(key)
+            if row is None:
+                continue
+            fixed = dict(row)
+            if not fixed.get('targetTable'):
+                fixed['targetTable'] = _table_name_of(fixed.get('target'))
+            rows.append(fixed)
+        if rows:
+            out[name] = rows
+    return out
+
+
+def _table_name_of(model_name: Any) -> str:
+    """模型名 → **数据库表名**（补老契约缺的那一项）。查不到就回空串，由前端跳过这一条。"""
+    wanted = str(model_name or '')
+    if not wanted:
+        return ''
+    try:
+        from django.apps import apps
+
+        for model in apps.get_models():
+            if model.__name__ == wanted:
+                return str(model._meta.db_table)
+    except Exception:  # noqa: BLE001 —— 补不上就空串，不影响别的
+        return ''
+    return ''
+
+
 def _deleted_tables(baseline: list[dict[str, Any]] | None, deleted: list[str]) -> list[dict[str, Any]]:
     """基线里有、现在没有的那些表（补上新契约才有的键，免得前端到处判空）。"""
     if not baseline or not deleted:
@@ -413,6 +497,10 @@ def _field_diff(baseline: list[dict[str, Any]] | None, current_tables: list[dict
        不需要再逐列标一遍。
     🔴 判据与 `_compare_key()` 同源：**列的类型 / 主键 / 可空 / 唯一变了才算改**，
        备注文案（`brief`）变了不算 —— 否则给某个字段补一句说明，整张表就满屏黄。
+    🔴 **改名按"库里那条记录还在不在"判**（用户明确要求）：
+       · 只改了名字、列还是原来那一列（类型 / 主键 / 可空 / 唯一 都没变）⇒ 算**修改**；
+       · 列被删掉、另外起了一列（形状不一样）⇒ 算**删一列 + 加一列**。
+       配对只按**结构**配（见 `_renames()`）：名字里带 `_id` 那种后缀差异不会影响判断。
     """
     if not baseline:
         return {}
@@ -431,11 +519,60 @@ def _field_diff(baseline: list[dict[str, Any]] | None, current_tables: list[dict
             for key, column in new.items()
             if key in old and _column_key(old[key]) != _column_key(column)
         ]
+        # 改名：把"删掉的"与"新加的"里形状一致的那些配成"修改"。
+        pairs = _renames(
+            [(key, _column_key(old[key])) for key in removed],
+            [(key, _column_key(new[key])) for key in added],
+        )
+        if pairs:
+            gone = {old_key for old_key, _new_key in pairs}
+            fresh = {new_key for _old_key, new_key in pairs}
+            removed = [key for key in removed if key not in gone]
+            added = [key for key in added if key not in fresh]
+            # 🔴 **两边都标上**：基线那一版的名字与现在这一版的名字各标一次 ——
+            #    前端只有"现在这一份"，它按名字查标记，漏掉新名字那一份就整行不亮。
+            for old_key, new_key in pairs:
+                changed.extend([old_key, new_key])
         if added or removed or changed:
-            out[name] = {'added': sorted(added), 'modified': sorted(changed), 'deleted': sorted(removed)}
+            out[name] = {
+                'added': sorted(set(added)),
+                'modified': sorted(set(changed)),
+                'deleted': sorted(set(removed)),
+            }
     return out
 
 
+def _renames(
+    removed: list[tuple[str, Any]],
+    added: list[tuple[str, Any]],
+) -> list[tuple[str, str]]:
+    """把"删掉的"与"新加的"里**形状一模一样**的配成"改名"，回 `[(旧名, 新名)]`。
+
+    🔴 这是"库里那条记录还在不在"的落地判据：形状（类型 / 主键 / 可空 / 唯一）没变
+       ⇒ 那就是**同一列换了个名字** ⇒ 算修改；形状对不上 ⇒ 真的是删一列 + 加一列。
+    🔴 逐个 "吃" 掉（不是一整个签名一把抓）：**同一张表里两根形状一样的列**（很少见但不是没有）
+       才不会把同一个新列配给两个旧列。
+    ⚠️ 顺序取各自在契约里的出现顺序（契约是按库里的列序排的）—— 只影响"谁配谁"，
+       而配错的后果很轻（两个都标成"修改"而不是一红一绿）。
+    """
+    used: set[int] = set()
+    pairs: list[tuple[str, str]] = []
+    for old_key, old_shape in removed:
+        hit = None
+        for index, (new_key, new_shape) in enumerate(added):
+            if index in used or new_shape != old_shape:
+                continue
+            if new_key == old_key:
+                continue  # 同名的不算改名（那种在别处已经处理过了）
+            hit = index
+            break
+        if hit is None:
+            continue
+        used.add(hit)
+        pairs.append((old_key, added[hit][0]))
+    return pairs
+
+
 def _columns_of(table: dict[str, Any]) -> dict[str, dict[str, Any]]:
     """一张表的列（老契约用 `fields`、新契约用 `columns`，两个都认）。"""
     columns = table.get('columns') if isinstance(table.get('columns'), list) else table.get('fields')
@@ -472,6 +609,124 @@ def _compare_key(table: dict[str, Any]) -> Any:
     return (table.get('table') or table.get('name'), shape)
 
 
+def _relation_diff(
+    baseline: list[dict[str, Any]] | None,
+    current_tables: list[dict[str, Any]],
+) -> dict[str, dict[str, list[str]]]:
+    """每一张表的**关联**里哪几条是新增 / 改过 / 删掉的（键是关联名：外键列名或反向关联名）。
+
+    🔴 为什么要它：用户要的是"连线也随增删改变色" —— 而"这一条关联动过没有"这件事
+       前端算不出来（它手里只有现在这一份，没有基线）。判据与逐列那一份同源，只放这一处。
+    🔴 判的是**结构**（指向谁 / 种类 / 基数 / 可空 / 唯一），不是文案：
+       `brief` 改一句话不该让整张图满屏黄 —— 与 `_compare_key()` 的理由完全一样。
+    🔴 没有基线（`None`）时**一条都不报**：否则一张干净的图会被判成"全是新增"。
+    """
+    if not baseline:
+        return {}
+    before = {str(table.get('table')): _relations_of(table) for table in baseline}
+    out: dict[str, dict[str, list[str]]] = {}
+    for table in current_tables:
+        name = str(table.get('table'))
+        old = before.get(name)
+        if old is None:
+            continue  # 新增的表整块标色，不必逐条关联再标一遍
+        new = _relations_of(table)
+        added = [key for key in new if key not in old]
+        removed = [key for key in old if key not in new]
+        changed = [key for key, one in new.items() if key in old and _relation_key(old[key]) != _relation_key(one)]
+        # 关联改名 → 修改，而不是"删一条 + 加一条"：见 `_relation_renames()`。
+        pairs = _relation_renames(old, new, removed, added)
+        if pairs:
+            gone = {old_key for old_key, _new_key in pairs}
+            fresh = {new_key for _old_key, new_key in pairs}
+            removed = [key for key in removed if key not in gone]
+            added = [key for key in added if key not in fresh]
+            for old_key, new_key in pairs:
+                changed.extend([old_key, new_key])
+        if added or removed or changed:
+            out[name] = {
+                'added': sorted(set(added)),
+                'modified': sorted(set(changed)),
+                'deleted': sorted(set(removed)),
+            }
+    return out
+
+
+def _relation_renames(
+    old: dict[str, dict[str, Any]],
+    new: dict[str, dict[str, Any]],
+    removed: list[str],
+    added: list[str],
+) -> list[tuple[str, str]]:
+    """关联改名 ⇒ 配成"修改"，回 `[(旧关联名, 新关联名)]`。
+
+    ⚠️ 配对**只看列名是否一模一样**：列名一样 ⇒ 字段名改了而列没动 ⇒ 改名；
+       列名对不上 ⇒ 那是**另一列**，一律按删 + 加算（用户明确要求）。
+       "形状一致"**不做兜底**：`customer_row_id` → `buyer_id` 这种形状也一样，
+       但它是换了一列，不是改名（真踩过：兜底会把"删了"说成"改了"）。
+    """
+    if not removed or not added:
+        return []
+    pairs: list[tuple[str, str]] = []
+    used: set[str] = set()
+    for old_key in removed:
+        want = (old.get(old_key) or {}).get('column')
+        if not want:
+            continue  # 没有列（反向 / 多对多）⇒ 没有"记录还在不在"可判，按删 + 加
+        for new_key in added:
+            if new_key in used:
+                continue
+            got = (new.get(new_key) or {}).get('column')
+            if got and str(got) == str(want):
+                used.add(new_key)
+                pairs.append((old_key, new_key))
+                break
+    return pairs
+
+
+def _relation_shape(relation: dict[str, Any]) -> Any:
+    """关联的**结构**（不含名字）：指向谁 / 什么种类 / 基数 / 可空 / 唯一。
+
+    ⚠️ 与 `_relation_key()` 是两件事：那一份用来判"同一条关联动过没有"（含指向），
+       这一份留给"光看结构够不够判同一件事"的场合 —— 目前**没有**用它来配改名：
+       改名只认"列名一样"（见 `_relation_renames()`），结构一样但列换了的属于删 + 加。
+    """
+    return (
+        str(relation.get('targetTable') or relation.get('target') or ''),
+        str(relation.get('kind') or ''),
+        str(relation.get('cardinality') or ''),
+        relation.get('null'),
+        relation.get('unique'),
+    )
+
+
+def _relations_of(table: dict[str, Any]) -> dict[str, dict[str, Any]]:
+    """一张表的关联（键 = 关联名：外键列名 / 反向关联名 / 多对多那一侧的名字）。"""
+    rows = table.get('relations')
+    out: dict[str, dict[str, Any]] = {}
+    for row in rows or []:
+        if not isinstance(row, dict):
+            continue
+        key = str(row.get('field') or row.get('targetTable') or '')
+        if key:
+            out[key] = row
+    return out
+
+
+def _relation_key(relation: dict[str, Any]) -> Any:
+    """一条关联**用来比差异的那部分**：指向谁 / 什么种类 / 基数 / 可空 / 唯一。
+
+    ⚠️ 不含 `brief` / `column` 这类展示与实现细节（理由见 `_relation_diff()`）。
+    """
+    return (
+        str(relation.get('targetTable') or relation.get('target') or ''),
+        str(relation.get('kind') or ''),
+        str(relation.get('cardinality') or ''),
+        relation.get('null'),
+        relation.get('unique'),
+    )
+
+
 def _diff(baseline: list[dict[str, Any]] | None, current: list[dict[str, Any]]) -> dict[str, list[str]]:
     """逐表逐列比出加 / 改 / 删。
 

{labull_framework-0.1.1 → labull_framework-0.1.3}/labull_framework/canvas/static/canvas.css

@@ -18,6 +18,8 @@
   --modified: #b45309;
   --deleted: #b91c1c;
   --accent: #2563eb;
+  /* 连线 / 箭头的**默认色**：黑。只有"相对基线动过"的关联才换成上面那三档状态色。 */
+  --ink: #1f2933;
   /* 三态的底色（🔴 整块 / 整行染色，而不是只描一圈边 —— 一屏几十列时边线看不出是哪一行变了） */
   --tint-added: #e8f6ec;
   --tint-added-strong: #d5efdd;
@@ -166,17 +168,30 @@ body {
   z-index: 2;
 }
 
+/* 🔴 **默认是黑的**（用户明确要求）：连线只有在"这条关联相对基线动过"时才上色 ——
+ *    没动过的线不该抢眼，颜色留给"变了的东西"（与卡片、字段行那三档同一套 token）。 */
 .edge {
   fill: none;
-  stroke: var(--tone-green);
+  stroke: var(--ink);
   stroke-width: 1.6;
   stroke-linejoin: round;
   pointer-events: stroke;
   transition: stroke-width .12s;
 }
-.edge.violet { stroke: var(--tone-violet); }
+
+/* 🔴 **按"关联种类"上的色已经全部去掉**（这里原来有一条 `.edge.violet { stroke: var(--tone-violet) }`）。
+ *    理由就是用户定的那条规矩：**整页默认全黑，只有"相对基线动过"才上色**。
+ *    多对多那条线原来默认是紫的（它排在 `.edge` 的黑色**后面**，所以盖掉了默认色）——
+ *    用户一眼就看出来了（「为什么是紫色？」）。
+ *    ⚠️ 老判据只验了普通外键是黑的、没验多对多，所以这条一直漏着；现在 CSS 里不再有种类色。 */
 /* 反向（只读）那一侧画虚一点：库里没有这一列，不该看起来跟真外键一模一样 */
 .edge.is-readonly { stroke-dasharray: 5 4; }
+/* 🔴 关联的增 / 改 / 删：颜色与卡片、字段行的三档完全一致（同一份 token）。
+ * ⚠️ 必须写在 `.edge.violet` / `.edge.is-readonly` **后面**：那几个是按"关联种类"上的色，
+ *    状态色优先级更高（一条新增的多对多线也该是绿的）。 */
+.edge.is-added { stroke: var(--added); stroke-dasharray: none; }
+.edge.is-modified { stroke: var(--modified); stroke-dasharray: none; }
+.edge.is-deleted { stroke: var(--deleted); stroke-dasharray: 6 4; }
 /* 悬停卡片上那一行关联时，这条线加粗、并给它一圈白底（压在别的线上也看得清） */
 .edge.is-hot {
   stroke-width: 3;
@@ -190,44 +205,71 @@ body {
 .arrow { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
 .arrow.green { stroke: var(--tone-green); }
 .arrow.violet { stroke: var(--tone-violet); }
-.arrow.muted { stroke: var(--muted); }
-
-/* 基数：**空心圆里一个 `1` / `*`**，落在方块边界附近（线的两端）。
- * 🔴 圆填白、描边走线的颜色：它压在白卡 / 绿卡 / 黄卡上都读得出来 ——
- *    卡片底色恰恰是"变了没有"的判据，标记不能靠底色来分辨。 */
+.arrow.muted { stroke: var(--ink); }
+/* 关联的增 / 改 / 删：箭头跟着线一起换色（marker 各自一份，见 `edgeDefs()`）。 */
+.arrow.added { stroke: var(--added); }
+.arrow.modified { stroke: var(--modified); }
+.arrow.deleted { stroke: var(--deleted); }
+
+/* 基数：**空心圆里一个 `1` / `*`**，落在方块边界内侧（线的两端）。
+ * 🔴 **默认是黑的**（用户明确要的：整页默认全黑，只有"相对基线动过"的才上色）——
+ *    和线一个口径：没动过的关联，线黑、两端的圈也黑；动了才换色（下面那三条）。
+ * ⚠️ 圆填卡片色（白底把线遮住），所以字上再加一圈卡片色描边才读得清。 */
 .cardinality { pointer-events: none; }
-.cardinality circle { fill: var(--card); stroke: var(--tone-green); stroke-width: 1.8; }
+.cardinality circle { fill: var(--card); stroke: var(--ink); stroke-width: 1.8; }
 .cardinality text {
-  fill: var(--tone-green);
+  fill: var(--ink);
   font-size: 10px;
   font-weight: 700;
   text-anchor: middle;
-  dominant-baseline: middle;
+  /* 🔴 `central` 而不是 `middle`：`middle` 对齐的是**x-height 的中线**，数字会略微偏下；
+   *    `central` 对齐的是**整个 em 框的中线**，`1` 与 `*` 都正好落在圆心上（用户要的"正中间"）。
+   *    ⚠️ 别再往 `y` 上加偏移补偿 —— 那样和这里叠起来就偏了（真踩过）。 */
+  dominant-baseline: central;
   font-family: ui-monospace, Consolas, monospace;
   paint-order: stroke;
   stroke: var(--card);
   stroke-width: 2.5px;
   stroke-linejoin: round;
 }
+/* 只有"这条关联相对基线动过"时才上色 —— 与 `.edge.is-*` / 卡片 / 字段行同一套 token。 */
+.cardinality.is-added circle { stroke: var(--added); }
+.cardinality.is-added text { fill: var(--added); }
+.cardinality.is-modified circle { stroke: var(--modified); }
+.cardinality.is-modified text { fill: var(--modified); }
+.cardinality.is-deleted circle { stroke: var(--deleted); }
+.cardinality.is-deleted text { fill: var(--deleted); }
 /* `*` 那个字比 `1` 宽，给大一号才在同一个圆里好看。
  * ⚠️ 两个圆**都是实线**：一开始给 `*` 画了虚线想区分"多"，用户明确要求实心圆，就去掉了
  *    （`1` 与 `*` 的字形本身已经够区分；实线圆看起来也更干净）。 */
 .cardinality.is-many text { font-size: 16px; }
 
-/* 关联键的名字：标在**线的正中间**。
- * 🔴 `dominant-baseline: middle` 是必须的：`y` 默认是**基线**，配合上面那句旋转，
- *    不写它文字就会整体偏到线的一侧。`paint-order: stroke` 再描一圈卡片色，
- *    线从字底下穿过时也读得清。 */
+/* 🔴 关联名：**一律水平、框高统一**（参考 Mendix 的关联标签）。
+ *    · 字**不按线的角度转**了：斜框有两个毛病 —— 框高会随角度变（AABB 撑大），
+ *      而且斜着不像"钉在线上"；
+ *    · `dominant-baseline: middle` 仍然必须有：`y` 默认是**基线**，不写它字就偏到线的一侧；
+ *    · 那圈 `paint-order: stroke` 的描边**去掉了** —— 现在有框的底色遮线，描边只会在框里多一圈边。
+ *      自关联那个圈上的名字没有框，描边只留给了它（见下面 `.edge-name--self`）。 */
 .edge-name {
   fill: var(--muted);
   font-size: 10.5px;
   font-family: ui-monospace, Consolas, monospace;
   text-anchor: middle;
   dominant-baseline: middle;
+  pointer-events: none;
+}
+/* 自关联那个圈上的名字**没有框**（它挂在圈顶，不在线上），所以这唯一一处保留描边好读。 */
+.edge-name--self {
   paint-order: stroke;
   stroke: var(--card);
   stroke-width: 3.5px;
   stroke-linejoin: round;
+}
+/* 关联标签的黑框（参考 Mendix）：细黑边 + 卡片色底 —— 底把线遮住，字就干净了。 */
+.edge-name-box {
+  fill: var(--card);
+  stroke: var(--ink);
+  stroke-width: 1;
   pointer-events: none;
 }
 /* 有关联备注时才可点（点开看备注）—— 鼠标形状是唯一的提示，所以只给能点的那些加。 */
@@ -280,9 +322,14 @@ body {
 .head:hover { background: #e9eff6; }
 
 .title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
-.title b { font-size: 14px; font-family: ui-monospace, Consolas, monospace; }
-.title .cn { color: var(--text); font-size: 12px; }
+/* 🔴 主名字要**大**（用户明确要的）：卡片上第一眼要能认出这是哪张表，14px 在缩到 40% 之后太小。 */
+.title b { font-size: 16px; font-family: ui-monospace, Consolas, monospace; }
+.title .cn { color: var(--text); font-size: 13px; }
 .title .mod { color: var(--muted); font-size: 11px; }
+/* 🔴 备注模式下两个名字**对调**（见 canvas.js 里算 `primary` / `secondary` 那两行）：
+ *    主位那时是**中文备注名** —— 中文不该走等宽；技术表名退到次位，它才是该等宽的那个。 */
+#canvas.is-note-first .title b { font-family: inherit; }
+#canvas.is-note-first .title .cn { font-family: ui-monospace, Consolas, monospace; }
 
 .caret { color: var(--muted); font-size: 11px; transition: transform .15s; }
 .table.is-open .caret { transform: rotate(180deg); }