dsh-data-domain-knowledge 0.1.0-alpha.1

package/src/client/architecture.css

@@ -0,0 +1,191 @@
+/* =====================================================================
+   Agent 概览：一张 AntV 架构图 + 画布内的详情浮层
+   ---------------------------------------------------------------------
+   0025 之前这里住的是回字形 / 阶段带那套 DOM 图，类名已全部删除。
+   0026 之前画布上方有一条 flex 工具条（图例 + 提示 + 统计 + 全屏），栏宽一窄
+   `flex-wrap` 就把全屏按钮甩到第二行 —— 那正是「全屏不在右上角」的来源。
+   0027 之前节点详情是画布**右边的一列**（旧侧栏类名已全部删除）：它把画布挤窄到
+   494px（缩放 0.42，卡片上的字缩到读不出），而且「图」与「这张图上的东西」
+   分成两块表面。现在它是画布内的浮层，侧栏那套类名随之删除。
+   0029 之前画布左上角还压着两行图例（边语义 + 全图状态分布），现在也撤了：
+   读法在带名、卡片状态字与浮层正文里，画布上不留说明板。
+
+   这个文件跟着架构视图走，不并进插件通用 styles.css：它是「一张图 + 一个
+   浮层」的版式，和知识库 / 意图 / 记忆那些卡片页没有共同词汇。
+   ===================================================================== */
+
+/* ---------------------------------------------------------------- 版式 */
+
+/* **一个表面。** 画布拥有边框、圆角、投影；详情浮层浮在它里面，
+   不另起一列、不另起一张卡。 */
+.tita-archStage {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  border: 1px solid var(--tita-line);
+  border-radius: 10px;
+  background: var(--tita-surface);
+  overflow: hidden;
+}
+
+.tita-archStage:fullscreen { border: 0; border-radius: 0; }
+.tita-archStage:fullscreen .tita-archPane { flex: 1 1 auto; min-height: 0; }
+
+/* 画布那一列。**浮层的定位上下文是它**，不是整块表面 —— 否则右上角那排操作
+   会浮到详情浮层头上。 */
+.tita-archPane { position: relative; display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; }
+
+/* ---------------------------------------------------------------- 画布 */
+
+/* 浮层：只剩右上角的操作（缩放档 + 全屏）。0029 撤掉了左上角那两行图例 ——
+   画布上不再压一块半透明说明板，读法改由带名、卡片状态字与浮层正文承担。
+   `nowrap` 仍然保留：将来再有东西浮上来，也不许把操作挤到第二行去。 */
+.tita-archOverlay {
+  position: absolute;
+  z-index: 2;
+  top: 10px;
+  right: 10px;
+  left: 10px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: nowrap;
+  pointer-events: none;
+}
+
+.tita-archOverlayActions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 3px 0; pointer-events: auto; }
+/* 缩放档：两段的分段控件。两段都在，是因为一个来回翻转的按钮说不清「现在是哪一档」。 */
+.tita-archZoom { display: inline-flex; overflow: hidden; border: 1px solid var(--tita-line); border-radius: 7px; background: var(--tita-surface); }
+.tita-archZoomOption { border: 0; background: transparent; padding: 4px 9px; color: var(--tita-ink-muted); font: inherit; font-size: 11px; cursor: pointer; }
+.tita-archZoomOption + .tita-archZoomOption { border-left: 1px solid var(--tita-line); }
+.tita-archZoomOption:hover { background: var(--tita-surface-muted); color: var(--tita-ink); }
+.tita-archZoomOn { background: var(--tita-surface-muted); color: var(--tita-ink); font-weight: 600; }
+
+/* 画布容器：**画布永远是设计尺寸，缩放由板上的 transform 承担**。
+   这张画布设计宽 1172px、高 1132px（三条链路 + 一条问题域带），宿主右侧栏只有
+   380–840px。所以外层不去「适配」画布，而是按缩放比把整块板缩下来：`fit` 档下板宽
+   正好等于栏宽（没有可滚的余量），`1:1` 档下板保持设计尺寸、由滚动条承载。
+   缩放比由组件按设计常量算出（`CANVAS_WIDTH/HEIGHT`），不写进 CSS，避免两处各写一份。 */
+.tita-archScroll { width: 100%; min-width: 0; overflow: auto; background: var(--tita-surface); }
+.tita-archStage:fullscreen .tita-archScroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  /* 全屏下 `fit` 档两边都可能有余量，居中；`safe` 保证 1:1 档溢出时左上角不被裁掉。 */
+  display: flex;
+  align-items: safe center;
+  justify-content: safe center;
+}
+.tita-archBoard { min-width: 0; flex: 0 0 auto; }
+.tita-archCanvas { width: 100%; height: 100%; min-width: 0; }
+
+/* 画布里的卡片与问题域牌子都是 G6 的 HTML 节点；选中态由 updateNodeData 换
+   innerHTML，这里只补 hover 反馈，否则鼠标移到卡片上看不出它可点。 */
+.tita-archStage .tita-archCard { cursor: pointer; }
+.tita-archStage .tita-archCard:hover { border-color: var(--tita-primary) !important; box-shadow: 0 0 0 3px var(--tita-primary-soft) !important; }
+.tita-archStage .tita-archCardOn { cursor: default; }
+.tita-archStage .tita-archPlate { cursor: pointer; }
+.tita-archStage .tita-archPlate:hover { border-color: var(--tita-primary) !important; box-shadow: 0 0 0 3px var(--tita-primary-soft) !important; }
+.tita-archStage .tita-archPlateOn { cursor: default; }
+
+/* ---------------------------------------------------------------- 详情浮层 */
+
+/* 浮层的高度取「板高 - 顶部留白」与「视口上限」的较小值：`1:1` 档下板高有 1132px，
+   如果浮层跟着板高长，它的下半截会落到宿主可视区外面去。 */
+.tita-archInspector {
+  position: absolute;
+  z-index: 3;
+  top: 58px;
+  right: 10px;
+  display: flex;
+  width: min(360px, calc(100% - 20px));
+  height: min(calc(var(--arch-board-h, 600px) - 68px), 76vh);
+  flex-direction: column;
+  border: 1px solid var(--tita-line);
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--tita-surface) 97%, transparent);
+  box-shadow: 0 12px 28px rgba(16, 24, 40, .13);
+  backdrop-filter: blur(3px);
+  overflow: hidden;
+}
+
+/* 窄到放不下两列时，浮层改成底部抽屉：它不再盖住左上角的图例与右上角的
+   缩放 / 全屏 —— 那两个控件是「怎么看这张图」的全部入口，盖住它们就等于把人锁在浮层里。 */
+@container (max-width: 620px) {
+  .tita-archInspector {
+    top: auto;
+    right: 10px;
+    left: 10px;
+    width: auto;
+    height: min(52%, 420px);
+  }
+}
+
+/* ---------------------------------------------------------------- 节点 / 问题域面板 */
+
+.tita-archPanel {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  background: var(--tita-surface);
+  overflow: hidden;
+}
+
+.tita-archPanelHead { display: flex; flex: 0 0 auto; align-items: flex-start; gap: 9px; border-bottom: 1px solid var(--tita-line); padding: 11px 12px 10px; }
+.tita-archPanelIcon { display: inline-flex; flex: 0 0 auto; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid var(--tita-line); border-radius: 7px; background: var(--tita-surface-muted); color: var(--tita-ink); }
+.tita-archPanelHeadCopy { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
+.tita-archPanelTitleRow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
+.tita-archPanelTitleRow h3 { margin: 0; color: var(--tita-ink); font-size: 13.5px; font-weight: 650; }
+.tita-archPanelHeadCopy p { margin: 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.5; }
+/* 链路归属：一枚小圆点 + 链路名。颜色由行内 style 给（链路身份色在 model.ts 里）。 */
+.tita-archPanelLane { display: inline-flex; align-items: center; gap: 5px; color: var(--tita-ink-muted); font-size: 10px; }
+.tita-archPanelLane > i { width: 6px; height: 6px; border-radius: 999px; }
+
+.tita-archPanelBody { display: grid; min-width: 0; overflow-y: auto; }
+.tita-archPanelSection { display: grid; gap: 8px; border-top: 1px solid var(--tita-line); padding: 12px; }
+.tita-archPanelSection:first-child { border-top: 0; }
+.tita-archPanelSectionHead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+.tita-archPanelSectionHead h4 { margin: 0; color: var(--tita-ink); font-size: 11.5px; font-weight: 650; }
+.tita-archPanelEyebrow { color: var(--tita-ink-faint); font-size: 9.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
+.tita-archPanelText { margin: 0; color: var(--tita-ink-muted); font-size: 11.5px; line-height: 1.72; }
+/* 状态说明块：用「整圈细边框 + 浅底」而不是左侧粗色条。左侧粗色条是
+   AI 生成界面的典型指纹，而且它并不比一圈细边框多传递任何信息。 */
+.tita-archPanelNote { margin: 0; border: 1px solid var(--tita-line); border-radius: 7px; background: var(--tita-surface-muted); padding: 7px 9px; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.65; }
+
+.tita-archPanelFlow { display: grid; gap: 4px; border: 1px solid var(--tita-line); border-radius: 8px; background: var(--tita-surface); padding: 8px 9px; color: var(--tita-ink); }
+.tita-archPanelFlow > span { display: grid; gap: 1px; font-size: 11px; }
+.tita-archPanelFlow small { color: var(--tita-ink-faint); font-size: 9.5px; font-weight: 650; letter-spacing: .06em; }
+.tita-archPanelFlow > svg { color: var(--tita-ink-faint); }
+
+.tita-archPanelSteps { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
+.tita-archPanelStep { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 7px; align-items: start; }
+.tita-archPanelStep > svg { margin-top: 2px; color: var(--tita-tone-green); }
+.tita-archPanelStep > span { display: grid; gap: 1px; min-width: 0; }
+.tita-archPanelStep b { color: var(--tita-ink); font-size: 11.5px; font-weight: 600; }
+.tita-archPanelStep small { color: var(--tita-ink-muted); font-size: 10.5px; line-height: 1.55; }
+.tita-archPanelStepTodo > svg { color: var(--tita-ink-faint); }
+.tita-archPanelStepTodo b { color: var(--tita-ink-muted); }
+
+.tita-archPanelMetrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
+.tita-archPanelMetric { display: grid; gap: 2px; border: 1px solid var(--tita-line); border-radius: 7px; background: var(--tita-surface); padding: 7px 9px; }
+.tita-archPanelMetric small { color: var(--tita-ink-faint); font-size: 9.5px; font-weight: 600; letter-spacing: .03em; }
+.tita-archPanelMetric b { color: var(--tita-ink); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
+
+.tita-archPanelRecords { display: grid; gap: 0; margin: 0; }
+.tita-archPanelRecords > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--tita-line); padding: 6px 0; }
+.tita-archPanelRecords > div:last-child { border-bottom: 0; }
+.tita-archPanelRecords dt { color: var(--tita-ink-muted); font-size: 10.5px; }
+.tita-archPanelRecords dd { margin: 0; color: var(--tita-ink); font-size: 11px; font-weight: 600; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+
+.tita-archPanelHint { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.6; }
+.tita-archPanelHint > svg { flex: 0 0 auto; margin-top: 2px; }
+.tita-archPanelActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+
+/* 机制标签：可点的跳到对应节点，没有落地的就是一枚静态标签 + 「未落地」徽标。
+   两种都在，因为「这个域现在靠什么跑」和「它还想靠什么」是两件事。 */
+.tita-archPanelChips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
+.tita-archPanelChip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--tita-line); border-radius: 999px; background: var(--tita-surface); color: var(--tita-ink-muted); padding: 2px 4px 2px 9px; font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; transition: border-color 140ms ease, color 140ms ease, background 140ms ease; }
+.tita-archPanelChip:hover { border-color: var(--tita-primary-line); background: var(--tita-primary-soft); color: var(--tita-primary); }
+.tita-archPanelChip:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: 1px; }
+.tita-archPanelChipOff { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--tita-line); border-radius: 999px; color: var(--tita-ink-faint); padding: 2px 8px; font-size: 10.5px; }