From a378a2a6845d31603786cc67c277c931b97ac54f Mon Sep 17 00:00:00 2001 From: WaylandYang Date: Wed, 9 Sep 2026 18:40:46 +0800 Subject: [PATCH 1/5] The docked panel starts where the chrome starts, and reads without hovering Co-Authored-By: Claude Opus 5 Signed-off-by: WaylandYang --- web/src/pages/Ontology.tsx | 2 +- web/src/pages/OntologySchemaGraph.tsx | 41 +++++++++++++++++++++------ web/src/styles.css | 21 +++++++++++--- 3 files changed, 50 insertions(+), 14 deletions(-) diff --git a/web/src/pages/Ontology.tsx b/web/src/pages/Ontology.tsx index 5dc57e252..950a5f533 100644 --- a/web/src/pages/Ontology.tsx +++ b/web/src/pages/Ontology.tsx @@ -823,7 +823,7 @@ function DockedPanel({
{header}
diff --git a/web/src/pages/OntologySchemaGraph.tsx b/web/src/pages/OntologySchemaGraph.tsx index 56d736014..682d47b39 100644 --- a/web/src/pages/OntologySchemaGraph.tsx +++ b/web/src/pages/OntologySchemaGraph.tsx @@ -54,11 +54,12 @@ import { selectedNode, sigmaOptions, } from "./graphCanvas"; -import { Maximize2, X, ZoomIn, ZoomOut } from "lucide-react"; +import { ChevronDown, Maximize2, ZoomIn, ZoomOut } from "lucide-react"; import type { BusinessRule, EntityTypeView, RelationTypeView } from "../api"; import { S } from "../i18n"; import { CanvasLoading, + cn, Pill, Row, ToolButton, @@ -987,7 +988,17 @@ export function OntologySchemaGraph({ return (
{/* 图例 + 取景 + 未限定关系入口。没有搜索框——找东西走左栏 */} -
+ {/* 图例这一排与右侧停靠面板**顶对齐**（都从 top-3 起）：从前面板压在 + top-14，右半边空出一条 56px 的带子，看着像没对齐。 + 面板开着时这一排的右缘让出面板那一列（见 .u-canvas-chrome-docked）， + 否则窄窗口下图例会钻到面板底下 */} +
{/* 静态图例：几种边各自的说法，不是可切换的过滤器——本体的边远比 实例图少，藏一种边省下的空间不值得多一层交互。 @@ -1048,16 +1059,28 @@ export function OntologySchemaGraph({ {unscopedPop.open && (
- unscopedPop.close()}> - {S.ontology.schemaUnscoped(schema.unscoped.length)} - - -

+ {/* 与库切换器、告警面板、图谱页的类图例同一副解剖：第一行就是 + 触发它的那个胶囊自己，三角翻上去，点它收回；**没有浮在角上的 + 关闭叉**——「哪儿展开的就从哪儿收回去」。 + 从前这里是一枚带 × 的胶囊，跟同一个产品里其余弹层都不像 */} +

unscopedPop.close()} + className="u-row-shell flex cursor-pointer items-center gap-3 border-b border-line px-4 py-3" + > + + {S.ontology.schemaUnscoped(schema.unscoped.length)} + + +
+

{S.ontology.schemaUnscopedHint}

-
+
{schema.unscoped.map((r) => ( .u-mark-arrow { } } +/* 画布顶栏（图例那一排）给右侧停靠面板让开一条。 + 面板是 `w-96`（24rem）+ `right-3`（0.75rem），所以这一排的右缘停在 24.75rem： + 窄窗口下图例会**提前换行**，而不是钻到面板底下去。只在面板开着时挂。 + 写成语义类而不是 Tailwind 的任意值，是因为这个数跟着面板的宽度走， + 将来面板改宽了只有这一处要改。 */ +.u-canvas-chrome-docked { + right: 24.75rem; +} + /* 骨架行里装灰条的那一格：撑**一个行高**，而不是灰条自己的高度。 表格的单元格里本来是一行字（8 + 22 + 8 = 38），少了这一层就只有 8 + 16 + 8 = 32，一列排下来比真表矮一截、密一截。 From 598c0b56a575f75e1f52a568e8834d0a6290ec81 Mon Sep 17 00:00:00 2001 From: WaylandYang Date: Wed, 9 Sep 2026 18:52:47 +0800 Subject: [PATCH 2/5] The panel carries enough body to read over a dense graph Co-Authored-By: Claude Opus 5 Signed-off-by: WaylandYang --- web/src/styles.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/web/src/styles.css b/web/src/styles.css index aa9e9b5c4..105239076 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -117,12 +117,14 @@ /* 浮在画布上的那些面：顶栏、导航、时间岛、控件塔、停靠面板、所有弹层。 这个数调过三轮：0.72 像贴了张纸，0.62 太轻（底下的图开始跟面板上的字 抢注意力），一度定在 0.68。 - **0.68 → 0.78**：0.68 那一版是在 backdrop 还没去色时定的。加上 - `saturate(0.3)` 之后透上来的东西变灰了，"像纸"的那种腻感没有了， - 于是可以吃回一些厚度——而 0.68 摆在本体那张密图上，边线仍旧穿字而过。 + **0.68 → 0.78 → 0.86**：0.68 那一版是在 backdrop 还没去色时定的。加上 + `saturate(0.3)` 之后透上来的东西变灰了，"像纸"的那种腻感没有了，于是 + 可以吃回厚度——而 0.68、0.78 摆在本体那张密图上，白边线仍旧穿字而过。 这一层是拿来读的，读不动就不成立；"隐约看得见盖住了什么"由模糊承担， - 不必靠透明度 */ - --u-surface-strong: rgba(10, 10, 10, 0.78); + 不必靠透明度。 + **两页只有这一个数**：图谱页与本体页的停靠面板都是 `glass-strong`， + 所以它们不会各调各的、也不会调着调着就不一样 */ + --u-surface-strong: rgba(10, 10, 10, 0.86); /* 指针停在面上时的实底。**毛玻璃是给"没在看它"的时候用的**—— 半透让浮层不至于把画布切断；可一旦人把指针移进来，他要读的就是面板本身， 这时候背后的图反而是噪声。所以这两档不是审美偏好，是同一块面在 From 78eefe2e1370b9e2d3f2fc5b425fea479a80f6d9 Mon Sep 17 00:00:00 2001 From: WaylandYang Date: Wed, 9 Sep 2026 18:52:47 +0800 Subject: [PATCH 3/5] A table row says when it is the one you picked Co-Authored-By: Claude Opus 5 Signed-off-by: WaylandYang --- web/src/pages/Ontology.tsx | 3 +++ web/src/pages/ontologyTables.tsx | 34 ++++++++++++++++++++++++++++++-- web/src/ui/table.tsx | 8 ++++++++ 3 files changed, 43 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Ontology.tsx b/web/src/pages/Ontology.tsx index 950a5f533..97dcc7f54 100644 --- a/web/src/pages/Ontology.tsx +++ b/web/src/pages/Ontology.tsx @@ -538,6 +538,9 @@ export function Ontology() { {view === "table" ? ( setSel({ kind: "class", id: t.id })} diff --git a/web/src/pages/ontologyTables.tsx b/web/src/pages/ontologyTables.tsx index 2e5bcf5e1..4f1752e5d 100644 --- a/web/src/pages/ontologyTables.tsx +++ b/web/src/pages/ontologyTables.tsx @@ -23,6 +23,7 @@ import { useMemo, useState } from "react"; import { Search } from "lucide-react"; import type { EntityTypeView, RelationTypeView } from "../api"; + import { S } from "../i18n"; import { Chip, @@ -157,12 +158,14 @@ function ClassesTable({ types, attributes, filter, + selectedId, onOpen, onSeeInstances, }: { types: EntityTypeView[]; attributes: RelationTypeView[]; filter: string; + selectedId: string | null; onOpen: (t: EntityTypeView) => void; onSeeInstances: (t: EntityTypeView) => void; }) { @@ -213,7 +216,12 @@ function ClassesTable({ {paged.map(({ t, depth }) => ( - onOpen(t)}> + onOpen(t)} + > void; }) { const [sort, setSort] = useState(null); @@ -365,7 +375,12 @@ function PropertiesTable({ {paged.map((r) => ( - onOpen(r)}> + onOpen(r)} + > {r.label} @@ -499,6 +514,7 @@ export function OntologyTables({ onOpenProperty, onOpenAttribute, onSeeInstances, + selected, loading = false, }: { entityTypes: EntityTypeView[]; @@ -507,6 +523,14 @@ export function OntologyTables({ onOpenProperty: (r: RelationTypeView) => void; onOpenAttribute: (a: RelationTypeView) => void; onSeeInstances: (t: EntityTypeView) => void; + /** 当前选中的那个类或属性。表里要标出来——**点一行开的是右边的面板， + * 行本身不留痕的话，翻两页之后就不知道正在看的是哪一个了**。 + * 只收这两档：页面那个 `Sel` 还含 import / rules / schema 几种， + * 它们跟表里的行没有对应关系，收窄了比整个传下来诚实 */ + selected: + | { kind: "class"; id: string } + | { kind: "relation"; id: string } + | null; /** 本体还没到。控件照常渲染、表身出骨架，**计数与行数一律不报**—— * 这时候它们只会是 0，而 0 是个结论，不是「还不知道」 */ loading?: boolean; @@ -573,6 +597,9 @@ export function OntologyTables({ types={entityTypes} attributes={attributes} filter={filter} + selectedId={ + selected?.kind === "class" ? selected.id : null + } onOpen={onOpenClass} onSeeInstances={onSeeInstances} /> @@ -582,6 +609,9 @@ export function OntologyTables({ relations={relations} types={entityTypes} filter={filter} + selectedId={ + selected?.kind === "relation" ? selected.id : null + } onOpen={onOpenProperty} /> )} diff --git a/web/src/ui/table.tsx b/web/src/ui/table.tsx index 6e2867827..998dbeb75 100644 --- a/web/src/ui/table.tsx +++ b/web/src/ui/table.tsx @@ -38,17 +38,25 @@ export function TBody({ export function Tr({ interactive, + active, className, ...props }: HTMLAttributes & { /** 可点的行：指针停上变面，光标变手 */ interactive?: boolean; + /** 选中的那一行。**用 `u-nav-active`，与左栏的行同一个记号**——它是 + * hover 那一档面的两倍（0.09 对 0.045）再加白字，所以「我选中的」与 + * 「我正指着的」分得开；两者用同一副样子的话，一旦指到别的行，屏幕上 + * 就有两行长得一样 */ + active?: boolean; }) { return ( Date: Wed, 9 Sep 2026 19:24:38 +0800 Subject: [PATCH 4/5] The panel's tabs line up with the name above them Co-Authored-By: Claude Opus 5 Signed-off-by: WaylandYang --- web/src/pages/Graph.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Graph.tsx b/web/src/pages/Graph.tsx index 46e4848bb..5596ca8bd 100644 --- a/web/src/pages/Graph.tsx +++ b/web/src/pages/Graph.tsx @@ -2803,7 +2803,13 @@ function EntityPanel({ )} {/* 视图切换：Relations（一张表，过去的折在组尾）| History（记录轴）| Derived */} -
+ {/* **左边比头部多一档**（24 而不是 16）。两个盒子本来都从 px-4 起，可 + 分段控件自己还有一圈内距（p-1 加按钮的 px-2），于是「Relations」四个字 + 落在 29，而标题「OpenAI」落在 35——标题前面是色点加 gap，正好差 6px， + 看着就是这一排比标题往左漏出去一截。加一档之后字落在 37，压回标题上。 + 这一条只给这里：本体页那条是 `fill` 的整条，与下面正文同宽， + 它的左缘该跟正文对齐，不跟标题对齐 */} +
{count} - {open &&
{children}
} + {/* 比标题再进一档。`pl-6` 时这两行的箭头**落在同一个 x 上**（实测都是 41）： + 标题行自己有 px-2 加一个 16px 的图标位，正好把 24px 的缩进吃光了， + 于是这一节读起来是平的，看不出行是挂在标题下面的。 + 间距只有六档，24 往上就是 32 */} + {open &&
{children}
}
); } From d2577a9d619997b0f39797189174501451d2d4d9 Mon Sep 17 00:00:00 2001 From: WaylandYang Date: Wed, 9 Sep 2026 21:38:38 +0800 Subject: [PATCH 5/5] The direction arrows line up in one column again Co-Authored-By: Claude Opus 5 Signed-off-by: WaylandYang --- web/src/pages/Graph.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/web/src/pages/Graph.tsx b/web/src/pages/Graph.tsx index 5596ca8bd..bc2940341 100644 --- a/web/src/pages/Graph.tsx +++ b/web/src/pages/Graph.tsx @@ -3004,11 +3004,11 @@ function FactSection({ {count} - {/* 比标题再进一档。`pl-6` 时这两行的箭头**落在同一个 x 上**（实测都是 41）： - 标题行自己有 px-2 加一个 16px 的图标位，正好把 24px 的缩进吃光了， - 于是这一节读起来是平的，看不出行是挂在标题下面的。 - 间距只有六档，24 往上就是 32 */} - {open &&
{children}
} + {/* **箭头与标题里那个箭头排成一列**（实测都在 40.7）。一度改成 pl-8 想让 + 行"挂"在标题下面，结果两个箭头差开 8px，看着就是没对齐——而它们是 + 同一个方向记号（→ 出边 / ← 入边），同一个记号本来就该成列。 + 层级由前面那个折叠三角表示（在 18.7），不必再靠缩进说第二遍 */} + {open &&
{children}
}
); }