labull-framework 0.1.0__py3-none-any.whl

labull_framework/canvas/static/canvas.css

@@ -0,0 +1,487 @@
+/* schema canvas 的外观。
+ *
+ * 🔴 这一页**不引任何前端主题**（它要在"只装了后端"的项目里也能看）——
+ *    所以颜色在这里自成一套，只用 CSS 变量收口，方便改。
+ * 🔴 版式是 ER 图那一套：**稀疏画布 + 绝对定位的卡片**（不是等宽网格），
+ *    表头一行带状态色，字段一行四栏（名字 / 种类 / 库类型 / 备注）。
+ */
+
+:root {
+  --bg: #eef1f5;
+  --card: #fff;
+  --line: #d8dee6;
+  --line-soft: #eef1f5;
+  --head: #f4f7fa;
+  --text: #1f2933;
+  --muted: #6b7280;
+  --added: #15803d;
+  --modified: #b45309;
+  --deleted: #b91c1c;
+  --accent: #2563eb;
+  /* 三态的底色（🔴 整块 / 整行染色，而不是只描一圈边 —— 一屏几十列时边线看不出是哪一行变了） */
+  --tint-added: #e8f6ec;
+  --tint-added-strong: #d5efdd;
+  --tint-modified: #fdf3e0;
+  --tint-modified-strong: #fbe8c8;
+  --tint-deleted: #fdeaea;
+  --tint-deleted-strong: #f9d9d9;
+  /* 字段种类的颜色（与 canvas.js 里 KIND 的 tone 一一对应）*/
+  --tone-slate: #64748b;
+  --tone-violet: #7c3aed;
+  --tone-blue: #2563eb;
+  --tone-green: #15803d;
+  --tone-amber: #b45309;
+  --tone-teal: #0f766e;
+}
+
+* { box-sizing: border-box; }
+
+html, body { height: 100%; }
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── 顶部两条 ─────────────────────────────────────────────────────────── */
+
+.bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 9px 16px;
+  background: #1f2937;
+  color: #fff;
+}
+
+.brand { font-weight: 600; letter-spacing: .3px; }
+.git { color: #9ca3af; font-size: 13px; }
+.git b { color: #fde68a; font-family: ui-monospace, Consolas, monospace; }
+.stat { color: #9ca3af; font-size: 13px; }
+.grow { flex: 1; }
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  background: var(--card);
+  border-bottom: 1px solid var(--line);
+}
+
+.toolbar button, .toolbar select {
+  font: inherit;
+  padding: 4px 12px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--card);
+  color: var(--text);
+  cursor: pointer;
+}
+.toolbar button:hover, .toolbar select:hover { border-color: var(--accent); color: var(--accent); }
+
+.legend { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
+.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
+.sw.added { background: var(--added); }
+.sw.modified { background: var(--modified); }
+.sw.deleted { background: var(--deleted); }
+
+.alert {
+  margin: 10px 16px 0;
+  padding: 8px 12px;
+  border: 1px solid var(--modified);
+  border-left-width: 3px;
+  border-radius: 6px;
+  background: #fffbeb;
+  color: var(--modified);
+}
+.alert.is-error { border-color: var(--deleted); background: #fef2f2; color: var(--deleted); }
+
+/* ── 画布 ─────────────────────────────────────────────────────────────── */
+
+#viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; }
+
+#canvas { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
+#canvas.is-panning { cursor: grabbing; }
+
+/* 🔴 缩放 / 平移作用在 `.surface` 上，卡片与连线都在它里面 ——
+ *    分两个容器各缩一次的话，线与卡片很快就错位，而这一页的价值就是"线和卡片对得上"。 */
+.surface { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
+/* 卡片绝对定位的参照层。
+ * 🔴 **宽高必须自己撑开**：里面全是绝对定位的卡片（还有绝对定位的 SVG），
+ *    普通块级盒会塌成 0 宽 —— 而 SVG 是 `width: 100%`，宽度 0 的 SVG 里一个字都画不出来，
+ *    症状是"线全都消失、卡片还在"（真踩过）。`fit-content` + 高度由 canvas.js 设。 */
+.layer {
+  position: relative;
+  width: fit-content;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.zoom-group { display: inline-flex; align-items: center; gap: 4px; }
+.zoom-value {
+  min-width: 44px;
+  color: var(--muted);
+  font-size: 12px;
+  font-family: ui-monospace, Consolas, monospace;
+  text-align: center;
+  user-select: none;
+}
+
+/* 点关联键名 / 字段提示时那个看备注的小浮层（`position: fixed`，位置由 canvas.js 夹在窗口内） */
+.edge-note {
+  position: fixed;
+  z-index: 200;
+  max-width: 22rem;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--card);
+  color: var(--text);
+  box-shadow: 0 8px 24px rgb(15 23 42 / 18%);
+}
+.edge-note h4 { margin: 0 0 4px; font-size: 12px; font-family: ui-monospace, Consolas, monospace; }
+.edge-note p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.6; }
+.edge-note small { color: var(--muted); font-size: 11px; }
+
+/* ── 表与表之间的连线 ─────────────────────────────────────────────────── */
+/* 🔴 线要画在卡片**上面**（`z-index: 2`，卡片是 1）：卡片里有 `<table>`，单元格各自会做
+ *    层叠上下文 —— 线画在下面时，端点那两枚基数圆会被字段行**盖住**（真踩过：
+ *    量出来 `document.elementFromPoint(圆心)` 是 `TD.name`，圆明明画了却看不见）。
+ * 🔴 `pointer-events: none` 是必须的：SVG 铺满整个画布，吃事件的话卡片就点不动、拖不动了；
+ *    线自己那点可点区域由 `.edge { pointer-events: stroke }` 单独放开。 */
+.edges {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.edge {
+  fill: none;
+  stroke: var(--tone-green);
+  stroke-width: 1.6;
+  stroke-linejoin: round;
+  pointer-events: stroke;
+  transition: stroke-width .12s;
+}
+.edge.violet { stroke: var(--tone-violet); }
+/* 反向（只读）那一侧画虚一点：库里没有这一列，不该看起来跟真外键一模一样 */
+.edge.is-readonly { stroke-dasharray: 5 4; }
+/* 悬停卡片上那一行关联时，这条线加粗、并给它一圈白底（压在别的线上也看得清） */
+.edge.is-hot {
+  stroke-width: 3;
+  filter: drop-shadow(0 0 2px rgb(255 255 255 / 90%));
+}
+
+/* 箭头是**开口的 `>`**（不是实心三角）：两条线靠得近时实心块会把线头糊成一团，
+ * 开口箭仍看得出方向、也不遮住后面的东西。所以这里是描边、不是填充。
+ * 🔴 比线本身**粗一点**：这个大小下（线 1.6 / 箭头 2.2）开口的夹角才看得出来是 `>`，
+ *    与线同粗细时它会糊成一个小实心疙瘩（真踩过）。 */
+.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` / `*`**，落在方块边界附近（线的两端）。
+ * 🔴 圆填白、描边走线的颜色：它压在白卡 / 绿卡 / 黄卡上都读得出来 ——
+ *    卡片底色恰恰是"变了没有"的判据，标记不能靠底色来分辨。 */
+.cardinality { pointer-events: none; }
+.cardinality circle { fill: var(--card); stroke: var(--tone-green); stroke-width: 1.8; }
+.cardinality text {
+  fill: var(--tone-green);
+  font-size: 10px;
+  font-weight: 700;
+  text-anchor: middle;
+  dominant-baseline: middle;
+  font-family: ui-monospace, Consolas, monospace;
+  paint-order: stroke;
+  stroke: var(--card);
+  stroke-width: 2.5px;
+  stroke-linejoin: round;
+}
+/* `*` 那个字比 `1` 宽，给大一号才在同一个圆里好看。
+ * ⚠️ 两个圆**都是实线**：一开始给 `*` 画了虚线想区分"多"，用户明确要求实心圆，就去掉了
+ *    （`1` 与 `*` 的字形本身已经够区分；实线圆看起来也更干净）。 */
+.cardinality.is-many text { font-size: 16px; }
+
+/* 关联键的名字：标在**线的正中间**。
+ * 🔴 `dominant-baseline: middle` 是必须的：`y` 默认是**基线**，配合上面那句旋转，
+ *    不写它文字就会整体偏到线的一侧。`paint-order: stroke` 再描一圈卡片色，
+ *    线从字底下穿过时也读得清。 */
+.edge-name {
+  fill: var(--muted);
+  font-size: 10.5px;
+  font-family: ui-monospace, Consolas, monospace;
+  text-anchor: middle;
+  dominant-baseline: middle;
+  paint-order: stroke;
+  stroke: var(--card);
+  stroke-width: 3.5px;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+/* 有关联备注时才可点（点开看备注）—— 鼠标形状是唯一的提示，所以只给能点的那些加。 */
+.edge-name.has-note { pointer-events: auto; cursor: pointer; }
+.edge-name.has-note:hover { fill: var(--accent); }
+
+.empty { margin: 40px; color: var(--muted); }
+
+/* ── 一张表的卡片 ─────────────────────────────────────────────────────── */
+
+.table {
+  position: absolute;
+  width: 320px;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 6%), 0 8px 24px rgb(15 23 42 / 4%);
+  overflow: hidden;
+  transition: box-shadow .15s, border-color .15s;
+}
+.table:hover { box-shadow: 0 2px 4px rgb(15 23 42 / 8%), 0 12px 32px rgb(15 23 42 / 8%); }
+
+/* 三态：**整块染底色** + 表头加深 + 左侧一道色条。
+ * 🔴 底色是主判据、色条是辅助：一眼扫过去先看到"哪几张表变了"，再看左条确认是加还是删。 */
+.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.is-flash { animation: flash 1.2s ease; }
+@keyframes flash {
+  0%, 100% { box-shadow: 0 1px 2px rgb(15 23 42 / 6%), 0 8px 24px rgb(15 23 42 / 4%); }
+  30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent), 0 12px 32px rgb(15 23 42 / 12%); }
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px;
+  background: var(--head);
+  border-bottom: 1px solid var(--line);
+  cursor: pointer;
+  user-select: none;
+}
+.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; }
+.title .mod { color: var(--muted); font-size: 11px; }
+
+.caret { color: var(--muted); font-size: 11px; transition: transform .15s; }
+.table.is-open .caret { transform: rotate(180deg); }
+
+/* 🔴 收起 ≠ 只剩标题：**字段表照常显示**（ER 图不该点开才看得到列）。
+ *    收起只是把"备注全文 / 字段详情 / 关联"收起来，并且把那行短备注截成一行。 */
+.table:not(.is-open) .note,
+.table:not(.is-open) .rels,
+.table:not(.is-open) tr.detail { display: none; }
+.table:not(.is-open) .brief {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.table.is-open .brief { white-space: normal; }
+
+.brief {
+  margin: 0;
+  padding: 6px 12px;
+  color: var(--muted);
+  font-size: 12px;
+  border-bottom: 1px dashed var(--line);
+}
+
+/* ── 展开之后的内容 ───────────────────────────────────────────────────── */
+
+.note { padding: 10px 12px 4px; border-bottom: 1px solid var(--line-soft); }
+.note h4, .rels h4 {
+  margin: 0 0 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: none;
+}
+.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.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 td {
+  padding: 4px 10px;
+  border-top: 1px solid var(--line-soft);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+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; }
+
+/* 一格备注都没有时那个破折号：压暗，别让人以为"这里有内容" */
+td.brief.empty { color: var(--line); }
+
+/* 🔴 逐列差异：**整行**染底色（不是只给列名那个格子）——
+ *    人扫一眼是"哪一行"在变，不是"哪一列"，只染一格反而更难找。 */
+tr.field.is-added > td { background: var(--tint-added-strong); }
+tr.field.is-modified > td { background: var(--tint-modified-strong); }
+tr.field.is-deleted > td { background: var(--tint-deleted-strong); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--deleted) 55%, transparent); }
+/* 展开的详情那一行跟着它上面那一行的颜色，别在中间裂一道白 */
+tr.field.is-added + tr.detail > td { background: var(--tint-added); }
+tr.field.is-modified + tr.detail > td { background: var(--tint-modified); }
+tr.field.is-deleted + tr.detail > td { background: var(--tint-deleted); }
+/* 悬停时压深一点，但不要盖掉"变了"这件事 */
+tr.field.has-detail:hover > td { filter: brightness(.97); }
+
+td.name { font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }
+td.name .tag {
+  margin-left: 5px;
+  padding: 0 4px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-family: inherit;
+  vertical-align: 1px;
+}
+.tag.pk { background: #fef3c7; color: #92400e; }
+.tag.fk { background: #dcfce7; color: #166534; }
+.tag.uq { background: #e0e7ff; color: #3730a3; }
+
+td.kind { white-space: nowrap; color: var(--muted); }
+td.kind .mark {
+  display: inline-block;
+  width: 16px;
+  text-align: center;
+  margin-right: 4px;
+  font-style: normal;
+  font-family: ui-monospace, Consolas, monospace;
+}
+.mark.slate { color: var(--tone-slate); }
+.mark.violet { color: var(--tone-violet); }
+.mark.blue { color: var(--tone-blue); }
+.mark.green { color: var(--tone-green); }
+.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;
+}
+
+td.brief { color: var(--muted); }
+td.brief.muted { opacity: .75; }
+
+/* 可点开的字段行 */
+tr.field.has-detail { cursor: pointer; }
+tr.field.has-detail::after { content: ""; }
+/* 展开箭头：用负边距把它塞进名字格**左边那点空隙**里（不额外占宽）。
+ * 🔴 备注优先时名字格跑到第二列，那个负边距会落进行中间 ⇒ 得给名字格让出左边距，
+ *    箭头才贴着行首（真踩过：箭头飘在"客户名 | ▸ name"中间）。 */
+tr.field.has-detail td.name::before {
+  content: "▸";
+  display: inline-block;
+  width: 10px;
+  margin-left: -10px;
+  color: var(--muted);
+  font-size: 10px;
+}
+tr.field.is-open td.name::before { content: "▾"; }
+#canvas.is-note-first tr.field td.name { padding-left: 22px; }
+#canvas.is-note-first tr.field.has-detail td.name::before { margin-left: -12px; }
+
+tr.detail td {
+  padding: 6px 10px 10px 22px;
+  background: #f8fafc;
+  border-top: 1px solid var(--line-soft);
+  color: var(--text);
+  font-size: 12.5px;
+}
+tr.detail p { margin: 0 0 4px; }
+tr.detail code {
+  padding: 0 4px;
+  border-radius: 4px;
+  background: #eef2f7;
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 11.5px;
+}
+tr.detail .muted { color: var(--muted); }
+tr.detail .note-text { color: var(--muted); }
+
+/* ── 关联 ─────────────────────────────────────────────────────────────── */
+
+.rels { padding: 8px 12px 10px; border-top: 1px solid var(--line-soft); }
+.rel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 3px 6px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--text);
+  font: inherit;
+  font-size: 12.5px;
+  text-align: left;
+  cursor: pointer;
+}
+.rel:hover { background: #f1f5f9; }
+.rel .rel-name { font-family: ui-monospace, Consolas, monospace; }
+.rel .rel-to { margin-left: auto; color: var(--accent); font-size: 12px; }
+
+/* ── 底部提示 ─────────────────────────────────────────────────────────── */
+
+.hint {
+  margin: 0;
+  padding: 6px 16px;
+  color: var(--muted);
+  font-size: 12px;
+  background: var(--card);
+  border-top: 1px solid var(--line);
+}