labull-framework 0.1.4__tar.gz → 0.1.4.2__tar.gz

{labull_framework-0.1.4/labull_framework.egg-info → labull_framework-0.1.4.2}/PKG-INFO

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

{labull_framework-0.1.4 → labull_framework-0.1.4.2}/labull_framework/canvas/data.py

@@ -88,46 +88,6 @@ def _brief_line(obj: Any) -> str:
     return brief.splitlines()[0].strip() if brief else ''
 
 
-def _type_of(field: Any) -> str:
-    """Django 字段 → **库里那一列的真实类型**（画布右侧那个小字）。
-
-    🔴 这里只回答"数据库里长什么样"；"这个字段在 Django 里是什么"由 `_kind_of` 回答。
-       两者刻意分开：`FileField` 在库里就是一列 varchar，而人关心的是"这是个文件字段"。
-    """
-    from django.db import models
-
-    mapping = (
-        (models.BigAutoField, 'bigint'),
-        (models.BigIntegerField, 'bigint'),
-        (models.AutoField, 'integer'),
-        (models.IntegerField, 'integer'),
-        (models.SmallIntegerField, 'integer'),
-        (models.PositiveIntegerField, 'integer'),
-        (models.BooleanField, 'boolean'),
-        (models.DateField, 'date'),
-        (models.DateTimeField, 'timestamp'),
-        (models.TimeField, 'time'),
-        (models.DurationField, 'interval'),
-        (models.DecimalField, 'numeric'),
-        (models.FloatField, 'real'),
-        (models.JSONField, 'jsonb'),
-        (models.UUIDField, 'uuid'),
-        (models.BinaryField, 'bytea'),
-        (models.FileField, 'varchar'),
-        (models.ImageField, 'varchar'),
-        (models.EmailField, 'varchar'),
-        (models.URLField, 'varchar'),
-        (models.SlugField, 'varchar'),
-        (models.GenericIPAddressField, 'inet'),
-        (models.CharField, 'varchar'),
-        (models.TextField, 'text'),
-    )
-    for cls, name in mapping:
-        if isinstance(field, cls):
-            return name
-    return 'text'
-
-
 def _kind_of(field: Any) -> str:
     """Django 字段的**种类**（画布左侧那个彩色小标：枚举 / 文件 / 关联 / 金额 …）。
 
@@ -344,30 +304,57 @@ def shape() -> dict[str, list[dict[str, Any]]]:
 
 
 def _type_of(field: Any) -> str:
-    """Django 字段 → 契约里那几种类型之一。
+    """Django 字段 → 契约里那几种类型之一（画布右侧那个小字：`varchar` / `text` / `bigint` …）。
+
+    🔴 这里只回答"**库里那一列**长什么样"；"这个字段在 Django 里是什么"由 `_kind_of` 回答。
+       两者刻意分开：`FileField` 在库里就是一列 varchar ⇒ 这里回 `varchar`，
+       而画布左边那个彩色小标由 `kind` 说了算（`文件` / `图片`）。
+
+    ⚠️ **顺序有意义**，写反了不报错、只是悄悄归错档：
+       · `DateTimeField` 是 `DateField` 的子类 ⇒ `created_at` 会报成 `date`（真踩过）；
+       · `ImageField` 是 `FileField` 的子类、`EmailField` 是 `CharField` 的子类 ⇒ 具体的写在前面。
 
-    🔴 文件列**没有单独的类型**：`FileField` 在库里就是一列 varchar，所以按 `text` 报。
+    🔴 这个函数在本文件里**只能有一份**：曾经在下面又写了一份把这份整个遮掉，
+       于是 `FileField` 报成 `text`、`DateTimeField` 报成 `date` —— 而两份代码看着都"挺对"。
     """
     from django.db import models
 
+    # 关联列：这张表里那一列的类型 = **对端主键**那一列的类型（`order_id` 是 bigint，不是 text）。
+    # ⚠️ 多对多在这一层没有自己的列（列在中间表上），而 `shape()` 也不会把 m2m 送到这里来。
+    target = getattr(field, 'target_field', None)
+    if target is not None and target is not field and not getattr(field, 'many_to_many', False):
+        return _type_of(target)
+
     mapping = (
-        (models.BigAutoField, 'bigint'),
+        (models.BigAutoField, 'bigint'),            # 子类链：BigAutoField ⊂ BigIntegerField ⊂ IntegerField
         (models.BigIntegerField, 'bigint'),
+        (models.SmallIntegerField, 'integer'),
+        (models.PositiveIntegerField, 'integer'),
         (models.AutoField, 'integer'),
         (models.IntegerField, 'integer'),
-        (models.SmallIntegerField, 'integer'),
         (models.BooleanField, 'boolean'),
+        (models.DateTimeField, 'timestamp'),        # 🔴 必须排在 DateField 前面（否则 created_at 报成 date）
         (models.DateField, 'date'),
-        (models.DateTimeField, 'timestamp'),
+        (models.TimeField, 'time'),
+        (models.DurationField, 'interval'),
         (models.DecimalField, 'numeric'),
         (models.FloatField, 'real'),
         (models.JSONField, 'jsonb'),
+        (models.UUIDField, 'uuid'),
+        (models.BinaryField, 'bytea'),
+        (models.GenericIPAddressField, 'inet'),
+        # 下面这一档在库里都是 varchar —— 包括"文件字段"（它只是 varchar + 上传逻辑）
+        (models.ImageField, 'varchar'),             # 🔴 必须排在 FileField 前面
+        (models.FileField, 'varchar'),
+        (models.EmailField, 'varchar'),
+        (models.URLField, 'varchar'),
+        (models.SlugField, 'varchar'),
+        (models.CharField, 'varchar'),
+        (models.TextField, 'text'),
     )
     for cls, name in mapping:
         if isinstance(field, cls):
             return name
-    if isinstance(field, (models.CharField, models.SlugField)):
-        return 'varchar'
     return 'text'
 
 

{labull_framework-0.1.4 → labull_framework-0.1.4.2}/labull_framework/canvas/static/canvas.css

@@ -168,6 +168,44 @@ body {
   z-index: 2;
 }
 
+/* ── 左边那条车道：硬边界 + 跨模块总线（见 canvas.js 的 `boundaryLayer()`） ──────
+ * 🔴 边界是**硬**的：`applyView()` 夹住平移，过不去；所以它必须看得见，
+ *    否则"怎么拖都拖不动"会像页面卡住了。
+ * 🔴 边界**左边**那一块铺一层很淡的底：那是"没有内容、也过不去"的区域。 */
+.boundary-line {
+  stroke: var(--line);
+  stroke-width: 1.5;
+  stroke-dasharray: 7 5;
+}
+.boundary-rail {
+  stroke: var(--line);
+  stroke-width: 1;
+  stroke-dasharray: 2 4;
+  opacity: .9;
+}
+.boundary-outside { fill: var(--ink); opacity: .04; }
+.boundary-label {
+  fill: var(--muted);
+  font-size: 11px;
+  user-select: none;
+}
+.boundary-label.is-rail { opacity: .85; }
+/* 跨模块那条线：走法是"横 → 沿总线竖 → 横"，与其他线的斜直连一眼能分开 */
+.edge.cross-module { stroke-linecap: square; }
+/* 跨模块"出／进本模块"的那截短线（对端在别的模块里，卡片没画出来）：
+ * 🔴 画成**点线**：与实线（真的连到了对端）区分开 —— 一眼看出"这条是走到边界为止的"。
+ *    ⚠️ 与只读那条（`5 4` 虚线）也不同，免得两种含义糊在一起。 */
+.edge.cross-module.is-stub { stroke-dasharray: 1 3; }
+/* 跨模块的关联名放在总线右边那条空道上（框与直连那套同一个样式，只是位置固定） */
+.edge-name.cross-module { text-anchor: middle; }
+/* 短线（对端在别的模块）那几条的标签：**左对齐**放在线上方（见 canvas.js 里那段说明） */
+.edge-name.cross-module.is-stub { text-anchor: start; }
+/* 跨模块短线在总线那一头的"端帽"：表示接上了总线，而不是线断了 */
+.edge-cap { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
+.edge-cap.is-added { stroke: var(--added); }
+.edge-cap.is-modified { stroke: var(--modified); }
+.edge-cap.is-deleted { stroke: var(--deleted); }
+
 /* 🔴 **默认是黑的**（用户明确要求）：连线只有在"这条关联相对基线动过"时才上色 ——
  *    没动过的线不该抢眼，颜色留给"变了的东西"（与卡片、字段行那三档同一套 token）。 */
 .edge {
@@ -280,9 +318,11 @@ body {
 
 /* ── 一张表的卡片 ─────────────────────────────────────────────────────── */
 
+/* 🔴 卡片宽度：去掉「库类型」那一列之后只需要 **340px**（字段名 150 + 种类 80 + 备注 110）——
+ *    三列宽都是写死的（见 `card()` 里那份 `<colgroup>`），所以宽度必须跟它对齐。 */
 .table {
   position: absolute;
-  width: 320px;
+  width: 340px;
   background: var(--card);
   border: 1px solid var(--line);
   border-radius: 10px;
@@ -292,16 +332,30 @@ body {
 }
 .table:hover { box-shadow: 0 2px 4px rgb(15 23 42 / 8%), 0 12px 32px rgb(15 23 42 / 8%); }
 
-/* 三态：**整块染底色** + 表头加深 + 左侧一道色条。
- * 🔴 底色是主判据、色条是辅助：一眼扫过去先看到"哪几张表变了"，再看左条确认是加还是删。 */
+/* 三态：**只有"整张表是新的 / 没了"才整块染底色**（`added` / `deleted`）。
+ * 🔴 `modified`（表里**有**字段或关联变过）**不再染色**（用户明确要的：
+ *    "只有那个字段或者关联变色，而不是整个表变色"）—— 逐行 / 逐条线在下面单独上色，
+ *    卡片标题旁只挂一个灰的「改 N」，用来在几十张表里找得到是哪张。
+ * 🔴 新的表为什么仍然整卡染：基线里根本没有这张表，逐列差异无从谈起，
+ *    不染的话"新表"这件事就完全没提示了（它的每一行也会跟着标成 added）。 */
 .table.added { border-color: color-mix(in srgb, var(--added) 45%, var(--line)); background: var(--tint-added); }
-.table.modified { border-color: color-mix(in srgb, var(--modified) 45%, var(--line)); background: var(--tint-modified); }
 .table.deleted { border-color: color-mix(in srgb, var(--deleted) 40%, var(--line)); background: var(--tint-deleted); opacity: .78; }
 .table.added > .head { background: var(--tint-added-strong); box-shadow: inset 3px 0 0 var(--added); }
-.table.modified > .head { background: var(--tint-modified-strong); box-shadow: inset 3px 0 0 var(--modified); }
 .table.deleted > .head { background: var(--tint-deleted-strong); box-shadow: inset 3px 0 0 var(--deleted); }
-/* 没变过的表保持素白（否则"变了"这件事就不显眼了） */
-.table:not(.added):not(.modified):not(.deleted) > .head { background: var(--head); }
+/* 没变过的表（含"改过"那种）保持素白：颜色留给真的变了的那几行 / 那几条线 */
+.table:not(.added):not(.deleted) > .head { background: var(--head); }
+
+/* 标题旁那个灰计数：表里有几处变过（**不是颜色**，只是个索引） */
+.diff-count {
+  margin-left: 8px;
+  padding: 1px 6px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 11px;
+  font-family: ui-monospace, Consolas, monospace;
+  vertical-align: 1px;
+}
 
 .table.is-flash { animation: flash 1.2s ease; }
 @keyframes flash {
@@ -367,47 +421,43 @@ body {
 .note p { margin: 0 0 6px; font-size: 13px; }
 
 /* ── 字段行 ──────────────────────────────────────────────────────────────
- * 🔴 这里用 **CSS grid** 而不是 `<table>` 的自动布局：字段行要支持"列序翻转"
- *    （字段名优先 ⇄ 备注优先），而 CSS 的 `order` 对 `<td>` **不生效**
- *    （真踩过：按钮文案变了、表格一个格子都没动）。grid 里 `order` 是正经生效的。
- *    `<table>` / `<tr>` / `<td>` 只是保留下来当语义与 DOM 结构，显示全部走 grid。
- * 🔴 每个轨道都要写**最小可用宽**（`minmax(min-content, …)`）而不是 `minmax(0, …)`：
- *    后者允许把列压到 0 宽，几列就叠在一起了（真踩过：备注优先时 `created_at` 与"时间"重合）。
- *    挤压时宁可横向溢出，也不能把两列画在同一个位置。
+ * 🔴 用**真表格布局 + 固定的列宽**（`table-layout: fixed` + `card()` 写的那份 `<colgroup>`）：
+ *    列宽固定 ⇒ 每行的四列天然对齐（用户要的「每个字段的每个列都能够对齐」），
+ *    而且**长备注不会把别的列挤走**（用户要的「行宽可以固定，有需要用户会自己点开看」）——
+ *    备注那一格只显示一行、超出用 `…` 截断，想看全文点那一行（`tr.detail` 里有整段）。
+ *    原来"每个字段一行、各自一个 grid"的写法连对齐都做不到（列宽按每一行自己的内容算）。
+ *    （也试过"整张表一个 grid + `display: contents`"：轨道共用了，但自动排布会被跨列的
+ *      detail 行带偏 —— 实测 `customer` 那行的备注格跑到了第一列。所以用表格布局。）
+ * 🔴 列序翻转（备注优先 ⇄ 字段名优先）**不靠 CSS 的 `order`**（`<td>` 上根本不生效，
+ *    那是 grid 才有的），改由 `fieldRow()` **按当前模式决定 append 顺序**，宽度也跟着换一套。
  */
-table.cols { display: grid; width: 100%; }
-table.cols tbody { display: grid; }
-table.cols tr.field {
-  display: grid;
-  grid-template-columns:
-    minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto) minmax(0, 1fr);
-  align-items: stretch;
-}
-table.cols tr.detail { display: none; grid-template-columns: 1fr; }
-table.cols tr.field.is-open + tr.detail { display: grid; }
-table.cols tr.detail > td { grid-column: 1 / -1; }
+table.cols { width: 100%; table-layout: fixed; border-collapse: collapse; }
+table.cols tr.detail { display: none; }
+table.cols tr.field.is-open + tr.detail { display: table-row; }
+table.cols tr.detail > td { padding: 6px 10px 10px 22px; white-space: normal; }
+/* 「关联字段（外键列）」那一组默认**合上**（要再打开，见 `card()` 里那个 toggle 行） */
+table.cols tbody[hidden] { display: none; }
+table.cols tr.fk-toggle > td {
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 11.5px;
+  border-top: 1px dashed var(--line);
+}
+table.cols tr.fk-toggle .caret-mini { display: inline-block; font-style: normal; transition: transform .12s; }
+table.cols tr.fk-toggle.is-open .caret-mini { transform: rotate(90deg); }
 
 table.cols td {
-  padding: 4px 10px;
+  padding: 4px 8px;
   border-top: 1px solid var(--line-soft);
   font-size: 12.5px;
-  overflow-wrap: anywhere;
+  /* 🔴 固定列宽 + 一行截断：三列都 nowrap，超了给 `…`（`title` 里挂着全文，鼠标停一下也能看） */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 table.cols tr.field:first-child td { border-top: 0; }
 
-/* 「备注优先」：**备注 | 字段名 | 种类 | 库类型**。
- * 只翻 `order` 不够 —— 列宽也得换，否则备注列还是那条窄缝（等于没翻）。
- * 🔴 备注列给**固定宽**，不给 `fr`：它是这张网格里**唯一**的弹性轨道，
- *    `0.5fr` 和 `9fr` 算出来一样宽（都吃掉全部剩余）—— 真踩过，改了半天没反应。
- *    固定 128px 之后，字段名那一列自然贴到左边，右侧多出来的留白（收窄卡片或拖宽都行）。 */
-#canvas.is-note-first table.cols tr.field {
-  grid-template-columns:
-    116px minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
-  justify-content: start;
-}
-#canvas.is-note-first td.brief { order: -1; }
-/* 备注优先时把卡片放宽一点：四列里有一列是整句说明，320px 是字段名优先那套的宽度。 */
-#canvas.is-note-first .table { width: 380px; }
+/* 备注优先时卡片**不用再放宽**：两种模式都是 400px（列宽固定，见 `.table` 那一段的说明）。 */
 
 /* 一格备注都没有时那个破折号：压暗，别让人以为"这里有内容" */
 td.brief.empty { color: var(--line); }
@@ -453,13 +503,9 @@ td.kind .mark {
 .mark.amber { color: var(--tone-amber); }
 .mark.teal { color: var(--tone-teal); }
 
-td.type {
-  color: var(--muted);
-  text-align: right;
-  white-space: nowrap;
-  font-family: ui-monospace, Consolas, monospace;
-  font-size: 11.5px;
-}
+/* 🔴 「库类型」那一列**去掉了**（用户要的："这些都不需要了"）——
+ *    `bigint` / `text` / `varchar` 这些是"库里怎么存的"，人看的是左边那个"种类"小标
+ *    （整数 / 长文本 / 文件 / 时间…）。真要看库类型时，点开那一行，详情里有。 */
 
 td.brief { color: var(--muted); }
 td.brief.muted { opacity: .75; }
@@ -519,6 +565,13 @@ tr.detail .note-text { color: var(--muted); }
   cursor: pointer;
 }
 .rel:hover { background: #f1f5f9; }
+/* 关联那一行也按"这条动过没有"上色（与画布上那条线同一个判据）：**只染这一行** */
+.rel.is-added { background: var(--tint-added-strong); }
+.rel.is-modified { background: var(--tint-modified-strong); }
+.rel.is-deleted { background: var(--tint-deleted-strong); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--deleted) 55%, transparent); }
+.rel.is-added .rel-name { color: var(--added); }
+.rel.is-modified .rel-name { color: var(--modified); }
+.rel.is-deleted .rel-name { color: var(--deleted); }
 .rel .rel-name { font-family: ui-monospace, Consolas, monospace; }
 .rel .rel-to { margin-left: auto; color: var(--accent); font-size: 12px; }