The docked panel and the table say where you are

web/src/pages/Graph.tsx

@@ -2803,7 +2803,13 @@ function EntityPanel({
       )}
 
       {/* 视图切换：Relations（一张表，过去的折在组尾）| History（记录轴）| Derived */}
-      <div className="px-4 pt-3">
+      {/* **左边比头部多一档**（24 而不是 16）。两个盒子本来都从 px-4 起，可
+          分段控件自己还有一圈内距（p-1 加按钮的 px-2），于是「Relations」四个字
+          落在 29，而标题「OpenAI」落在 35——标题前面是色点加 gap，正好差 6px，
+          看着就是这一排比标题往左漏出去一截。加一档之后字落在 37，压回标题上。
+          这一条只给这里：本体页那条是 `fill` 的整条，与下面正文同宽，
+          它的左缘该跟正文对齐，不跟标题对齐 */}
+      <div className="pl-6 pr-4 pt-3">
         <Segmented
           size="sm"
           value={view}
@@ -2998,6 +3004,10 @@ function FactSection({
           <span className="u-num">{count}</span>
         </span>
       </Row>
+      {/* **箭头与标题里那个箭头排成一列**（实测都在 40.7）。一度改成 pl-8 想让
+          行"挂"在标题下面，结果两个箭头差开 8px，看着就是没对齐——而它们是
+          同一个方向记号（→ 出边 / ← 入边），同一个记号本来就该成列。
+          层级由前面那个折叠三角表示（在 18.7），不必再靠缩进说第二遍 */}
       {open && <div className="pl-6">{children}</div>}
     </div>
   );

web/src/pages/Ontology.tsx

@@ -538,6 +538,9 @@ export function Ontology() {
           {view === "table" ? (
             <OntologyTables
               loading={loading}
+              selected={
+                sel?.kind === "class" || sel?.kind === "relation" ? sel : null
+              }
               entityTypes={entity_types}
               relationTypes={relation_types}
               onOpenClass={(t) => setSel({ kind: "class", id: t.id })}
@@ -823,7 +826,7 @@ function DockedPanel({
     <div
       // 与图谱页的实体面板同一副壳：同宽（w-96）、同一个顶部起点（给顶上那排
       // 药丸让位），同一个头部解剖。两页并排看是同一件东西
-      className={`${exiting ? "u-dock-out" : "u-dock-in"} glass-strong absolute top-14 right-3 bottom-3 w-96 z-10 rounded-overlay shadow-2xl flex flex-col`}
+      className={`${exiting ? "u-dock-out" : "u-dock-in"} glass-strong absolute top-3 right-3 bottom-3 w-96 z-10 rounded-overlay shadow-2xl flex flex-col`}
     >
       <div className="shrink-0 flex items-start justify-between gap-2 px-4 py-4 border-b border-line">
         <div className="min-w-0">{header}</div>

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 (
     <div className="h-full relative">
       {/* 图例 + 取景 + 未限定关系入口。没有搜索框——找东西走左栏 */}
-      <div className="absolute left-3 right-3 top-3 z-10 flex items-start gap-2 pointer-events-none">
+      {/* 图例这一排与右侧停靠面板**顶对齐**（都从 top-3 起）：从前面板压在
+          top-14，右半边空出一条 56px 的带子，看着像没对齐。
+          面板开着时这一排的右缘让出面板那一列（见 .u-canvas-chrome-docked），
+          否则窄窗口下图例会钻到面板底下 */}
+      <div
+        className={cn(
+          "absolute left-3 right-3 top-3 z-10 flex items-start gap-2 pointer-events-none",
+          (selected?.kind === "class" || selected?.kind === "relation") &&
+            "u-canvas-chrome-docked",
+        )}
+      >
         <div className="pointer-events-auto flex flex-wrap gap-2">
           {/* 静态图例：几种边各自的说法，不是可切换的过滤器——本体的边远比
               实例图少，藏一种边省下的空间不值得多一层交互。
@@ -1048,16 +1059,28 @@ export function OntologySchemaGraph({
               {unscopedPop.open && (
                 <div
                   ref={unscopedPop.panelRef}
-                  className="u-menu-glass absolute left-0 top-0 z-50 w-64 overflow-hidden rounded-overlay p-2 shadow-2xl"
+                  className="u-menu-glass absolute left-0 top-0 z-50 w-72 overflow-hidden rounded-overlay shadow-2xl"
                 >
-                  <Pill className="mb-2 w-full" onClick={() => unscopedPop.close()}>
-                    {S.ontology.schemaUnscoped(schema.unscoped.length)}
-                    <X size={11} className="ml-auto text-ink-2" />
-                  </Pill>
-                  <p className="px-2 pb-2 text-fine leading-relaxed text-ink-2">
+                  {/* 与库切换器、告警面板、图谱页的类图例同一副解剖：第一行就是
+                      触发它的那个胶囊自己，三角翻上去，点它收回；**没有浮在角上的
+                      关闭叉**——「哪儿展开的就从哪儿收回去」。
+                      从前这里是一枚带 × 的胶囊，跟同一个产品里其余弹层都不像 */}
+                  <div
+                    onClick={() => unscopedPop.close()}
+                    className="u-row-shell flex cursor-pointer items-center gap-3 border-b border-line px-4 py-3"
+                  >
+                    <span className="min-w-0 flex-1 truncate text-body font-medium text-ink">
+                      {S.ontology.schemaUnscoped(schema.unscoped.length)}
+                    </span>
+                    <ChevronDown
+                      size={12}
+                      className="shrink-0 rotate-180 text-ink-2"
+                    />
+                  </div>
+                  <p className="border-b border-line px-4 py-2 text-fine leading-relaxed text-ink-2">
                     {S.ontology.schemaUnscopedHint}
                   </p>
-                  <div className="flex max-h-64 flex-col overflow-y-auto">
+                  <div className="u-scroll flex max-h-64 flex-col overflow-y-auto p-2">
                     {schema.unscoped.map((r) => (
                       <Row
                         key={r.id}

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({
       </THead>
       <TBody>
         {paged.map(({ t, depth }) => (
-          <Tr key={t.id} interactive onClick={() => onOpen(t)}>
+          <Tr
+            key={t.id}
+            interactive
+            active={t.id === selectedId}
+            onClick={() => onOpen(t)}
+          >
             <Td>
               <span
                 className="flex items-center gap-2"
@@ -314,11 +322,13 @@ function PropertiesTable({
   relations,
   types,
   filter,
+  selectedId,
   onOpen,
 }: {
   relations: RelationTypeView[];
   types: EntityTypeView[];
   filter: string;
+  selectedId: string | null;
   onOpen: (r: RelationTypeView) => void;
 }) {
   const [sort, setSort] = useState<Sort>(null);
@@ -365,7 +375,12 @@ function PropertiesTable({
       </THead>
       <TBody>
         {paged.map((r) => (
-          <Tr key={r.id} interactive onClick={() => onOpen(r)}>
+          <Tr
+            key={r.id}
+            interactive
+            active={r.id === selectedId}
+            onClick={() => onOpen(r)}
+          >
             <Td>
               <span className="flex items-center gap-2">
                 <span className="truncate">{r.label}</span>
@@ -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}
           />
         )}

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，一列排下来比真表矮一截、密一截。

web/src/ui/table.tsx

@@ -38,17 +38,25 @@ export function TBody({
 
 export function Tr({
   interactive,
+  active,
   className,
   ...props
 }: HTMLAttributes<HTMLTableRowElement> & {
   /** 可点的行：指针停上变面，光标变手 */
   interactive?: boolean;
+  /** 选中的那一行。**用 `u-nav-active`，与左栏的行同一个记号**——它是
+   *  hover 那一档面的两倍（0.09 对 0.045）再加白字，所以「我选中的」与
+   *  「我正指着的」分得开；两者用同一副样子的话，一旦指到别的行，屏幕上
+   *  就有两行长得一样 */
+  active?: boolean;
 }) {
   return (
     <tr
+      aria-current={active ? "true" : undefined}
       className={cn(
         "border-b border-line",
         interactive && "cursor-pointer transition-colors duration-fast hover:bg-surface-2",
+        active && "u-nav-active",
         className,
       )}
       {...props}