diff --git a/web/src/pages/Graph.tsx b/web/src/pages/Graph.tsx index 46e4848b..bc294034 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} + {/* **箭头与标题里那个箭头排成一列**（实测都在 40.7）。一度改成 pl-8 想让 + 行"挂"在标题下面，结果两个箭头差开 8px，看着就是没对齐——而它们是 + 同一个方向记号（→ 出边 / ← 入边），同一个记号本来就该成列。 + 层级由前面那个折叠三角表示（在 18.7），不必再靠缩进说第二遍 */} {open &&
{children}
}
); diff --git a/web/src/pages/Ontology.tsx b/web/src/pages/Ontology.tsx index 5dc57e25..97dcc7f5 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 })} @@ -823,7 +826,7 @@ function DockedPanel({
{header}
diff --git a/web/src/pages/OntologySchemaGraph.tsx b/web/src/pages/OntologySchemaGraph.tsx index 56d73601..682d47b3 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) => ( 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/styles.css b/web/src/styles.css index df0e6a40..10523907 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -115,10 +115,16 @@ --u-fast: 120ms; --u-base: 260ms; /* 浮在画布上的那些面：顶栏、导航、时间岛、控件塔、停靠面板、所有弹层。 - **0.72 → 0.68**：原先几乎是一块实底，浮在图上像贴了张纸，而这一层 - 本该让人隐约看得见它盖住了什么。一度调到 0.62，太轻——底下的图透过来 - 开始跟面板上的字抢注意力，这一层是拿来读的 */ - --u-surface-strong: rgba(10, 10, 10, 0.68); + 这个数调过三轮：0.72 像贴了张纸，0.62 太轻（底下的图开始跟面板上的字 + 抢注意力），一度定在 0.68。 + **0.68 → 0.78 → 0.86**：0.68 那一版是在 backdrop 还没去色时定的。加上 + `saturate(0.3)` 之后透上来的东西变灰了，"像纸"的那种腻感没有了，于是 + 可以吃回厚度——而 0.68、0.78 摆在本体那张密图上，白边线仍旧穿字而过。 + 这一层是拿来读的，读不动就不成立；"隐约看得见盖住了什么"由模糊承担， + 不必靠透明度。 + **两页只有这一个数**：图谱页与本体页的停靠面板都是 `glass-strong`， + 所以它们不会各调各的、也不会调着调着就不一样 */ + --u-surface-strong: rgba(10, 10, 10, 0.86); /* 指针停在面上时的实底。**毛玻璃是给"没在看它"的时候用的**—— 半透让浮层不至于把画布切断；可一旦人把指针移进来，他要读的就是面板本身， 这时候背后的图反而是噪声。所以这两档不是审美偏好，是同一块面在 @@ -1272,6 +1278,15 @@ a:hover > .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，一列排下来比真表矮一截、密一截。 diff --git a/web/src/ui/table.tsx b/web/src/ui/table.tsx index 6e286782..998dbeb7 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 (