@jzg223/design-runtime 0.0.1 → 0.1.0-rc.2

package/dist/style.css

@@ -22,6 +22,77 @@
   padding: 32px 0;
   color: var(--design-platform-muted);
 }
+/**
+ * 主题变量的**应用级兜底**（:root 上的默认值）。
+ *
+ * 为什么要有它：主题是"外部文件"（public/theme/*.css，发布后还能替换/遗漏）。
+ * 万一 theme 目录没部署、或某个自定义主题只写了一部分变量，看板必须还能"看得清"，
+ * 而不是白屏/透明一片。这里的值刻意朴素（单一深蓝底 + 白字 + 8 色调色板）。
+ *
+ * 优先级（由低到高）：本文件(:root)  <  主题 CSS([data-board-theme="x"]，挂在舞台元素上)  <  部件级配置(内联样式)
+ * —— CSS 变量的继承规则天然如此：**离元素更近的声明赢**，所以舞台上的主题值会盖住这里的默认值。
+ */
+:root {
+  --brd-scheme: dark;
+
+  --brd-bg: #070c18;
+  --brd-decor: none;
+
+  /* 布局部件（容器）的面板：主题没给就退成"半透明深蓝 + 轻投影" */
+  --brd-panel-bg: rgba(10, 22, 42, 0.9);
+  --brd-panel-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.35);
+
+  /* 内容部件（非容器）的内边距：与内置主题保持一致，主题没给也不会贴边 */
+  --brd-body-pad: 15px;
+  --brd-watermark: rgba(255, 255, 255, 0.07);
+
+  --brd-text: #eaf2ff;
+  --brd-sub: rgba(200, 216, 240, 0.72);
+  --brd-line: rgba(140, 170, 220, 0.18);
+  /* 表格线：行线与表头线同源，"要么都有、要么都没有" */
+  --brd-table-line-w: 1px;
+  --brd-table-line: rgba(140, 170, 220, 0.28);
+  --brd-table-head-line: var(--brd-table-line);
+  --brd-table-col-line: 0 none;
+  --brd-head: rgba(255, 255, 255, 0.045);
+  --brd-hover: rgba(140, 170, 220, 0.1);
+  --brd-stripe: rgba(140, 170, 220, 0.045);
+
+  --brd-accent: #4d8dff;
+  --brd-accent2: #22d3ee;
+  --brd-glow: rgba(77, 141, 255, 0.5);
+  --brd-glow-soft: rgba(77, 141, 255, 0.12);
+  --brd-top: rgba(150, 205, 255, 0.8);
+  --brd-num-glow: none;
+  --brd-chip: rgba(10, 22, 42, 0.92);
+  --brd-radius: 0px;
+
+  --brd-tooltip-bg: rgba(9, 17, 31, 0.94);
+  --brd-tooltip-border: rgba(96, 150, 232, 0.32);
+
+  /* 运行时工具栏（右上角那条）：兜底按深色主题给 */
+  --brd-toolbar-bg: rgba(20, 32, 50, 0.55);
+  --brd-toolbar-border: rgba(120, 170, 230, 0.25);
+  --brd-toolbar-text: #cfe3ff;
+  --brd-toolbar-input-bg: rgba(10, 20, 34, 0.6);
+  --brd-toolbar-show: rgba(200, 220, 255, 0.35);
+
+  /* DataV 边框配色：第二条默认 transparent（关掉"沿边流动的光带"，四条边才一致） */
+  --brd-frame-1: var(--brd-accent);
+  --brd-frame-2: var(--brd-accent2);
+  /* DataV 装饰部件配色：保持双色 */
+  --brd-deco-1: var(--brd-accent);
+  --brd-deco-2: var(--brd-accent2);
+
+  --brd-chart-1: #4d8dff;
+  --brd-chart-2: #22d3ee;
+  --brd-chart-3: #a78bfa;
+  --brd-chart-4: #fbbf24;
+  --brd-chart-5: #fb7185;
+  --brd-chart-6: #34d399;
+  --brd-chart-7: #38bdf8;
+  --brd-chart-8: #f472b6;
+}
 
 .embed-list[data-v-0524a510] {
   width: 100%;
@@ -214,6 +285,1002 @@
   color: rgba(0, 0, 0, 0.45);
 }
 
+.drb-chart[data-v-ab9edc2c] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+.drb-chart__error[data-v-ab9edc2c] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: center;
+  color: #ff9f9f;
+  background: rgba(255, 80, 80, 0.08);
+}
+.part-body[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  /* 内边距不在元素上写死，也不在 JS 里内联：值来自主题变量 --brd-body-pad（兜底见 src/styles/theme-fallback.css），
+     而且**只给卡片类部件**（见下面 .has-body-pad）。box-sizing 必须是 border-box，
+     否则 width:100% + padding 会撑出父框 30px。 */
+  box-sizing: border-box;
+}
+/* 卡片类部件（kpi/图表/表格/交叉表/进度/筛选）才吃主题的内容内边距：
+   文本、播报、按钮、图片、视频、web元素、装饰都不吃（它们要么只有一行字，要么本来就该铺满） */
+.part-body.has-body-pad[data-v-16075a7b] {
+  padding: var(--brd-body-pad, 0px);
+}
+/* 边框/容器：标题要骑在框线上，不能裁切（见 bodyClass 注释） */
+.part-body.ov-visible[data-v-16075a7b] {
+  overflow: visible;
+}
+/* ---------------------------------------------------------------------------
+   布局部件（容器）的面板：**底色与投影取自主题变量**（public/theme/*.css 的 --brd-panel-bg /
+   --brd-panel-shadow，兜底值在 src/styles/theme-fallback.css）。
+   这样"换个主题 = 全看板的容器样式一起变"，不需要每个部件单独设置；
+   某个容器想跟主题不一样时，在部件设置里显式配底色/投影（内联样式优先于这里）。
+
+   其余装饰（科技感）：两个开关各自独立（部件设置 → 装饰）
+     dec-glass  = 上沿一道渐变高光 + 内侧一圈微光（面板"浮起来"）
+     dec-corner = 四角切角（8 条 1px 渐变拼出 4 个 L 形，不额外加 DOM）
+   ⚠️ 只给容器（.is-panel）；数据类部件不画这些（规范见 schema.js 的 CONTAINER_DECOR）。
+   ⚠️ 必须 pointer-events:none —— 否则会挡住子部件的点击/拖拽。
+   ⚠️ 装饰用伪元素叠上去，面板底色是元素自身的 background（在伪元素之下）。
+   --------------------------------------------------------------------------- */
+.part-body.is-panel[data-v-16075a7b] {
+  background: var(--brd-panel-bg, transparent);
+  box-shadow: var(--brd-panel-shadow, none);
+  /* 容器本来就没有 has-body-pad 类，这里只是把话说明白：容器的内边距是它自己的配置 */
+  padding: 0;
+  /* 内容压在装饰之上 */
+  /* DataV 边框：铺满整块、不吃事件；它的 SVG 自己会按父容器尺寸自适应 */
+  /* ---- 边框预设 1：四角 L 形括号（默认，最轻）---- */
+  /* ---- 边框预设 2：切角描边（DataV border-box 的味道）----
+     4 条直边（去掉两端的切角长度）+ 4 个 45° 斜线，全部用 1px 渐变拼出来，不引 SVG/DOM。
+     切角长度固定 16px，所以面板宽窄变化时斜角大小不变（用 SVG + preserveAspectRatio 会变形）。 */
+  /* ---- 边框预设 3：整圈细描边 + 沿上边流动的光带 ---- */
+  /* 流光：一条 30% 宽的高光沿上边来回跑（纯 CSS，别用 JS 定时器去改样式） */
+}
+.part-body.is-panel[data-v-16075a7b] > * {
+  position: relative;
+  z-index: 1;
+}
+.part-body.is-panel > .datav-frame[data-v-16075a7b] {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+.part-body.is-panel.dec-glass[data-v-16075a7b]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: linear-gradient(90deg, transparent 0%, var(--brd-top, #9cd) 22%, var(--brd-top, #9cd) 78%, transparent 100%) 0 0/100% 1px no-repeat, radial-gradient(120% 60% at 50% 0%, var(--brd-glow-soft, transparent) 0%, transparent 70%);
+}
+.part-body.is-panel.bd-corner[data-v-16075a7b]::after {
+  content: '';
+  position: absolute;
+  inset: 6px;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.75;
+  background: linear-gradient(var(--brd-accent), var(--brd-accent)) left top / 14px 1px no-repeat, linear-gradient(var(--brd-accent), var(--brd-accent)) left top / 1px 14px no-repeat, linear-gradient(var(--brd-accent), var(--brd-accent)) right top / 14px 1px no-repeat, linear-gradient(var(--brd-accent), var(--brd-accent)) right top / 1px 14px no-repeat, linear-gradient(var(--brd-accent), var(--brd-accent)) left bottom / 14px 1px no-repeat, linear-gradient(var(--brd-accent), var(--brd-accent)) left bottom / 1px 14px no-repeat, linear-gradient(var(--brd-accent), var(--brd-accent)) right bottom / 14px 1px no-repeat, linear-gradient(var(--brd-accent), var(--brd-accent)) right bottom / 1px 14px no-repeat;
+}
+.part-body.is-panel.bd-cut[data-v-16075a7b]::after {
+  content: '';
+  position: absolute;
+  inset: 5px;
+  z-index: 0;
+  pointer-events: none;
+  --c: var(--brd-accent, #4d8dff);
+  --cut: 16px;
+  background: linear-gradient(var(--c), var(--c)) center top / calc(100% - var(--cut) * 2) 1px no-repeat, /* 下边 */ linear-gradient(var(--c), var(--c)) center bottom / calc(100% - var(--cut) * 2) 1px no-repeat, /* 左边 */ linear-gradient(var(--c), var(--c)) left center / 1px calc(100% - var(--cut) * 2) no-repeat, /* 右边 */ linear-gradient(var(--c), var(--c)) right center / 1px calc(100% - var(--cut) * 2) no-repeat, /* 四个 45° 斜切角（在小方块里画一条对角线） */ linear-gradient(45deg, transparent calc(50% - 0.5px), var(--c) calc(50% - 0.5px), var(--c) calc(50% + 0.5px), transparent calc(50% + 0.5px)) left top / var(--cut) var(--cut) no-repeat, linear-gradient(-45deg, transparent calc(50% - 0.5px), var(--c) calc(50% - 0.5px), var(--c) calc(50% + 0.5px), transparent calc(50% + 0.5px)) right top / var(--cut) var(--cut) no-repeat, linear-gradient(-45deg, transparent calc(50% - 0.5px), var(--c) calc(50% - 0.5px), var(--c) calc(50% + 0.5px), transparent calc(50% + 0.5px)) left bottom / var(--cut) var(--cut) no-repeat, linear-gradient(45deg, transparent calc(50% - 0.5px), var(--c) calc(50% - 0.5px), var(--c) calc(50% + 0.5px), transparent calc(50% + 0.5px)) right bottom / var(--cut) var(--cut) no-repeat;
+}
+.part-body.is-panel.bd-glow[data-v-16075a7b]::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: var(--brd-radius, 0px);
+  border: 1px solid var(--brd-accent, #4d8dff);
+  opacity: 0.55;
+  box-shadow: 0 0 18px -4px var(--brd-glow, transparent), inset 0 0 22px -10px var(--brd-glow, transparent);
+}
+.part-body.is-panel.bd-glow > .glass-run[data-v-16075a7b] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 2px;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.part-body.is-panel.bd-glow > .glass-run[data-v-16075a7b]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -30%;
+  width: 30%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, var(--brd-top, #9cd), transparent);
+  animation: brd-run-16075a7b 4.5s linear infinite;
+}
+@keyframes brd-run-16075a7b {
+0% {
+    left: -30%;
+}
+100% {
+    left: 100%;
+}
+}
+.part-empty[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--brd-sub, rgba(140, 150, 165, 0.9));
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-align: center;
+}
+.kpi[data-v-16075a7b] {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+}
+/* 指标卡标题：过长要省略号，不能顶出卡片被硬切；前面挂一根发光小竖条（科技感） */
+.kpi-title[data-v-16075a7b] {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.kpi-title[data-v-16075a7b]::before {
+  content: '';
+  flex: 0 0 auto;
+  width: 3px;
+  height: 12px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, var(--brd-accent2, #4d8dff), var(--brd-accent, #4d8dff));
+  box-shadow: 0 0 10px var(--brd-glow, transparent);
+}
+.kpi-value[data-v-16075a7b] {
+  display: flex;
+  align-items: baseline;
+  /* 大屏指标卡：数字要够大、字距收紧、等宽数字（翻页/刷新时不会左右跳）+ 辉光 */
+}
+.kpi-value .num[data-v-16075a7b] {
+  font-size: 38px;
+  line-height: 1.05;
+  letter-spacing: -0.01em;
+  text-shadow: var(--brd-num-glow, none);
+}
+.kpi-value .unit[data-v-16075a7b] {
+  margin-left: 6px;
+  font-size: 13px;
+  font-weight: 400;
+  opacity: 0.62;
+}
+.part-table-wrap[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+}
+/* 表格右上角的导出按钮：悬停才明显，避免干扰大屏观感 */
+.part-toolbar[data-v-16075a7b] {
+  position: absolute;
+  right: 8px;
+  top: 6px;
+  z-index: 3;
+  color: var(--brd-sub, rgba(200, 220, 255, 0.45));
+  cursor: pointer;
+  font-size: 13px;
+}
+.part-toolbar[data-v-16075a7b]:hover {
+  color: var(--brd-accent, #4fa8ff);
+}
+.part-table th.sortable[data-v-16075a7b] {
+  cursor: pointer;
+  user-select: none;
+}
+/* 有自定义列宽时：colgroup 给出各列宽度（显式宽度作为该列**最小宽度**生效，所以拖列宽照样变宽）。
+   宽度本身由 tableStyle 计算：
+     · 所有列都拖过 ⇒ max(100%, 合计)  —— 真的超宽才让容器横向滚动
+     · 只拖了部分列 ⇒ 不写宽度，按 100% 排
+   ⚠️ 以前这里写死 `width: max-content; min-width: 100%`：纵向滚动条占掉十几像素后
+   max-content 就比可视宽度大一点 ⇒ 凭空多出一条横向滚动条（用户报过）。
+   ⚠️ 也不要同时用 table-layout:fixed —— 它和 max-content 一起会让浏览器把列宽按比例压缩。 */
+.part-table.fixed[data-v-16075a7b] {
+  width: 100%;
+}
+.part-table th .sort-mark[data-v-16075a7b] {
+  margin-left: 4px;
+  font-size: 10px;
+  color: var(--brd-accent, #4fa8ff);
+}
+/* 表头右边缘的列宽拖拽把手。
+   ⚠️ 宽度必须够、且**大部分要落在本单元格内**：原来 width:7px / right:-3px 时，
+   真正能被命中的只有格子内的 4px（伸到格子外的 3px 会被右邻 th 盖住），
+   命中点稍一取整就落到右邻表头上，表现成"拖列宽没反应"（验收脚本就栽在这 0.5px 上）。 */
+.part-table th .col-resizer[data-v-16075a7b] {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  width: 11px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 2;
+}
+.part-table th.group-head[data-v-16075a7b] {
+  text-align: center;
+  /* 分组表头的竖线也走"列线"变量（整条声明形式，默认不声明 ⇒ 不画） */
+  border-left: var(--brd-table-col-line, 0 none);
+}
+.agg-list[data-v-16075a7b] {
+  margin: 0 0 8px;
+}
+.agg-list .agg-del[data-v-16075a7b] {
+  margin-left: 6px;
+  color: #ff7875;
+  cursor: pointer;
+}
+.part-table[data-v-16075a7b] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+  color: inherit;
+  /* ⚠️ 必须 fixed 布局（不是为了好看，是为了"不凭空出横向滚动条"）：
+     auto 布局下 `white-space: nowrap` 的单元格最小宽度 = 整行文字宽度，
+     几个长文本列加起来必然超过卡片 ⇒ 表格撑破容器、冒出横向滚动条（交叉表列短所以没这问题）。
+     fixed 布局严格按 colgroup 给宽度（列宽由 colWidthOf 决定：拖过的用拖的值、数值列 110px、
+     文本列 auto 平分），超出的文字用省略号截断 ⇒ 表格始终等于容器宽度。
+     真把某列拖得很宽时，tableStyle 会写 max(100%, 合计) ⇒ 那时才横向滚动（那是合理的）。 */
+  table-layout: fixed;
+  /* 列分隔线：**整条声明**形式的变量，默认 `0 none` ＝ 压根不声明右边框。
+     ⚠️ 不能写成 `border-right: 1px solid var(--brd-table-col-line, transparent)`：
+     那会给每个单元格留一条 1px 的透明边框，在 border-collapse 下这 1px 不涂背景 ⇒
+     露出底下的画布，成了"表头左右两条若隐若现的缝"（用户反馈"四条边颜色不一样"的一半原因）。
+     想要整张网格：主题里写 --brd-table-col-line: 1px solid rgba(...)。 */
+}
+.part-table th[data-v-16075a7b] {
+  position: sticky;
+  top: 0;
+  /* 表头去掉"整块灰底"，改成"极淡的底 + 一条细分割线"（现代表格观感） */
+  background: var(--brd-head, rgba(120, 150, 190, 0.18));
+  backdrop-filter: blur(6px);
+  padding: 8px 10px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: var(--brd-sub, inherit);
+  white-space: nowrap;
+  /* fixed 布局下超出的文字要截断（配合省略号），否则会被硬切、看着像 bug */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* 表头下沿线：用 **inset 阴影**而不是 border —— sticky + border-collapse 下 border 会被表头裁/滚动时丢，
+       阴影跟着单元格走。
+       颜色＝--brd-table-head-line（默认取 --brd-table-line，与表体行线同色；想更突出就在主题里单独给色）。
+       注：2026-09 试过"表头画整圈四边"，用户看完要求"还是原来的效果" ⇒ 恢复成只有下边一条。 */
+  box-shadow: inset 0 calc(-1 * var(--brd-table-line-w, 1px)) 0 var(--brd-table-head-line, var(--brd-table-line, var(--brd-line, transparent)));
+}
+.part-table td[data-v-16075a7b] {
+  padding: 7px 10px;
+  /* 单元格一律居中（用户要求；原来是"维度列左、度量列右"）——统一在 CSS 里给，
+       模板里的内联 text-align 全部去掉，否则内联会盖掉这里（踩过：表头 .group-head 的居中就被内联盖掉过）。 */
+  text-align: center;
+  /* 行分隔线：与表头线同一套主题变量 ⇒ "要么都有、要么都没有" */
+  border-bottom: var(--brd-table-line-w, 1px) solid var(--brd-table-line, var(--brd-line, rgba(140, 160, 190, 0.16)));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.part-table th[data-v-16075a7b]:not(:last-child),
+.part-table td[data-v-16075a7b]:not(:last-child) {
+  border-right: var(--brd-table-col-line, 0 none);
+}
+.part-table tbody tr[data-v-16075a7b] {
+  transition: background 0.15s;
+}
+.part-table tbody tr[data-v-16075a7b]:hover {
+  background: var(--brd-hover, rgba(140, 160, 190, 0.1));
+}
+.part-table.stripe tbody tr[data-v-16075a7b]:nth-child(even) {
+  background: var(--brd-stripe, rgba(140, 160, 190, 0.08));
+}
+.part-table.bordered th[data-v-16075a7b],
+.part-table.bordered td[data-v-16075a7b] {
+  border: var(--brd-table-line-w, 1px) solid var(--brd-table-line, rgba(140, 160, 190, 0.22));
+}
+.part-table.cross[data-v-16075a7b] {
+  /* 合计行上方那条线：跟行线同一套变量（保持"要么都有、要么都没有"） */
+}
+.part-table.cross .row-head[data-v-16075a7b] {
+  font-weight: 600;
+  position: sticky;
+  left: 0;
+  background: var(--brd-line, rgba(120, 150, 190, 0.1));
+}
+.part-table.cross .total[data-v-16075a7b] {
+  font-weight: 600;
+  background: var(--brd-line, rgba(120, 150, 190, 0.1));
+}
+.part-table.cross .grand[data-v-16075a7b] {
+  background: var(--brd-line, rgba(120, 150, 190, 0.2));
+}
+.part-table.cross tfoot td[data-v-16075a7b] {
+  border-top: var(--brd-table-line-w, 1px) solid var(--brd-table-head-line, var(--brd-table-line, var(--brd-line)));
+}
+.part-text[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow: hidden;
+}
+.part-text span[data-v-16075a7b] {
+  display: block;
+  width: 100%;
+}
+.part-text.ov-ellipsis[data-v-16075a7b] {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.part-text.ov-ellipsis span[data-v-16075a7b] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.part-text.ov-shrink span[data-v-16075a7b] {
+  word-break: break-word;
+}
+/* DataV 装饰部件：铺满即可（组件内部用 autoResize 按父容器尺寸自适应） */
+.part-decoration[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  min-height: 16px;
+}
+.part-image[data-v-16075a7b],
+.part-iframe[data-v-16075a7b],
+.part-video[data-v-16075a7b],
+.part-carousel[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+}
+.part-image img[data-v-16075a7b],
+.part-iframe img[data-v-16075a7b],
+.part-video img[data-v-16075a7b],
+.part-carousel img[data-v-16075a7b],
+.part-image iframe[data-v-16075a7b],
+.part-iframe iframe[data-v-16075a7b],
+.part-video iframe[data-v-16075a7b],
+.part-carousel iframe[data-v-16075a7b],
+.part-image video[data-v-16075a7b],
+.part-iframe video[data-v-16075a7b],
+.part-video video[data-v-16075a7b],
+.part-carousel video[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.part-border[data-v-16075a7b],
+.part-container[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+/* 容器内的子部件区：铺满容器内框。
+   ⚠️ 内边距**不在元素上写 padding**（用户：'part-children 的 padding 属性去掉'）：
+   值由 `.part-body` 上的 `--brd-child-pad` 下发，唯一真源是"部件设置 → 容器 → 内边距"（schema.paddingOf）。
+   写死一份的话，改了配置也看不出区别，排查时还以为是这里在起作用。 */
+.part-children[data-v-16075a7b] {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  padding: var(--brd-child-pad, 0px);
+}
+/* 绝对定位模式：原点 = 内框左上角（absolute 子元素不受 padding 影响，留 padding 反而误导），
+   子级的 x/y 就按这个原点算，和 schema 里的换算公式一致 */
+.part-children.is-free[data-v-16075a7b] {
+  padding: 0;
+}
+/* 移动端堆叠：上面让出标题让位（原来是内联 paddingTop = 内边距 + 标题让位） */
+.part-children.is-stacked[data-v-16075a7b] {
+  padding-top: calc(var(--brd-child-pad, 0px) + var(--brd-title-reserve, 0px));
+}
+/* 设计模式下，**选中的容器**把"内容区"画成虚线（内容区 = 内边距以内那块，子级该待的地方）。
+   outline + 负 offset 正好压到内边距内沿，不用额外 DOM。
+   有了它，"子级跨满却戳出容器"这种几何问题一眼可见
+   （用户反馈："设计模式下 container 内包了 text，text 的区域好像超出了 container 的范围"）。 */
+.part-children.is-active[data-v-16075a7b] {
+  outline: 1px dashed rgba(24, 144, 255, 0.55);
+  outline-offset: calc(-1 * var(--brd-child-pad, 0px));
+}
+/* ---------------------------------------------------------------------------
+   设计模式的"抓取环"（只在 design 且容器有子级时渲染，见模板）
+   - 4 条透明点击带贴在容器边缘：子级铺满容器时，容器自己几乎没地方可点（内边距还会被画布缩放再缩小），
+     点这圈带子就能选中容器；
+   - 宽度用 `--board-hit`（由设计器按画布缩放算好，恒定 ~8 **屏幕**像素；画布缩到 0.5 时逻辑宽度自动翻倍）；
+   - 尺寸不参与布局（absolute）⇒ 不影响"所见即所得"；
+   - 悬停给一点点淡蓝提示，能看出"这里可以点选容器"。
+   ⚠️ 它们压在子级之上（z-index 5），所以"贴着容器边缘的那 8px"点不到子级 —— 想选子级点它的中间，
+      或者用左侧图层面板 / 部件设置里的「所属容器」。
+   --------------------------------------------------------------------------- */
+.hit[data-v-16075a7b] {
+  position: absolute;
+  z-index: 5;
+  cursor: move;
+}
+.hit[data-v-16075a7b]:hover {
+  background: rgba(24, 144, 255, 0.14);
+}
+.hit-t[data-v-16075a7b] {
+  left: 0;
+  right: 0;
+  top: 0;
+  height: var(--board-hit, 8px);
+}
+.hit-b[data-v-16075a7b] {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--board-hit, 8px);
+}
+.hit-l[data-v-16075a7b] {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--board-hit, 8px);
+}
+.hit-r[data-v-16075a7b] {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: var(--board-hit, 8px);
+}
+/* 面板标题（静态边框/自由容器）：两种样式（部件设置 → 面板 → 标题样式）
+     chip（默认）= 胶囊，贴在面板上沿的框内（left 24 让开左上角的切角标记；偏移可调，见 titleOffsetOf）
+     bar          = 框内顶部一条标题栏（高度见 schema.TITLE_BAR_HEIGHT，子级区自动让位） */
+.border-title[data-v-16075a7b],
+.container-title[data-v-16075a7b] {
+  position: absolute;
+  left: 24px;
+  top: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  color: var(--brd-text, inherit);
+  background: var(--brd-chip, rgba(7, 12, 24, 0.9));
+  border-radius: 8px;
+  max-width: calc(100% - 28px);
+  /* span 上做省略号：flex 容器自身的 text-overflow 对匿名文本项不生效（实测） */
+  /* bar：整条铺满、贴顶、带渐变底与下沿强调线 */
+}
+.border-title .pt-text[data-v-16075a7b],
+.container-title .pt-text[data-v-16075a7b] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.border-title[data-v-16075a7b]::before,
+.container-title[data-v-16075a7b]::before {
+  content: '';
+  flex: 0 0 auto;
+  width: 3px;
+  height: 12px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, var(--brd-accent2, #4d8dff), var(--brd-accent, #4d8dff));
+  box-shadow: 0 0 10px var(--brd-glow, transparent);
+}
+.border-title.ts-bar[data-v-16075a7b],
+.container-title.ts-bar[data-v-16075a7b] {
+  left: 0;
+  right: 0;
+  top: 0;
+  max-width: none;
+  height: 34px;
+  padding: 0 12px;
+  border-radius: 0;
+  background: linear-gradient(180deg, var(--brd-glow-soft, rgba(120, 170, 255, 0.12)), transparent);
+  box-shadow: inset 0 -1px 0 var(--brd-accent, transparent);
+  font-size: 14px;
+}
+.container-title[data-v-16075a7b] {
+  background: transparent;
+}
+.container-title.ts-bar[data-v-16075a7b] {
+  background: linear-gradient(180deg, var(--brd-glow-soft, rgba(120, 170, 255, 0.12)), transparent);
+}
+.part-tabs[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.tab-head[data-v-16075a7b] {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid rgba(140, 160, 190, 0.3);
+}
+.tab-item[data-v-16075a7b] {
+  padding: 4px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  opacity: 0.75;
+}
+.tab-item.active[data-v-16075a7b] {
+  opacity: 1;
+  font-weight: 600;
+  border-bottom: 2px solid currentColor;
+}
+.tab-body[data-v-16075a7b] {
+  flex: 1;
+  overflow: auto;
+  padding: 8px;
+}
+/* 有子部件时 tab 体就是一套子栅格：内边距同样来自"容器内边距"配置（CSS 变量在 .part-body 上），
+   不在元素上写死、也不写死在这里 */
+.tab-body.is-grid[data-v-16075a7b] {
+  padding: var(--brd-child-pad, 0px);
+}
+/* 移动端堆叠：上面还要让出标题让位 */
+.tab-body.is-stacked[data-v-16075a7b] {
+  padding-top: calc(var(--brd-child-pad, 0px) + var(--brd-title-reserve, 0px));
+}
+/* 绝对定位模式下：padding 对 absolute 子元素不生效，坐标原点就是内框左上角，
+   所以这里不能留 padding，否则子级位置与换算公式对不上 */
+.tab-body.is-free[data-v-16075a7b] {
+  padding: 0;
+}
+.tab-content[data-v-16075a7b] {
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+.part-carousel[data-v-16075a7b] {
+  position: relative;
+}
+.carousel-item[data-v-16075a7b] {
+  position: absolute;
+  inset: 0;
+  transition: opacity 0.5s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.carousel-title[data-v-16075a7b] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 4px 10px;
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.35);
+  color: #fff;
+}
+.carousel-dots[data-v-16075a7b] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 6px;
+  text-align: center;
+}
+.carousel-dots span[data-v-16075a7b] {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  margin: 0 3px;
+  background: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+}
+.carousel-dots span.active[data-v-16075a7b] {
+  background: #fff;
+}
+.part-marquee[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.marquee-inner[data-v-16075a7b] {
+  white-space: nowrap;
+  animation-name: board-marquee-16075a7b;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  padding-left: 100%;
+  font-size: inherit;
+}
+@keyframes board-marquee-16075a7b {
+0% {
+    transform: translateX(0);
+}
+100% {
+    transform: translateX(-100%);
+}
+}
+.part-progress[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.pg-head[data-v-16075a7b] {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  margin-bottom: 6px;
+  opacity: 0.9;
+}
+.pg-bar[data-v-16075a7b] {
+  height: 10px;
+  border-radius: 6px;
+  background: rgba(140, 160, 190, 0.25);
+  overflow: hidden;
+}
+.pg-fill[data-v-16075a7b] {
+  height: 100%;
+  border-radius: 6px;
+  background: currentColor;
+  transition: width 0.4s;
+}
+.part-button[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* 导航：**只做布局**（排列/点击区/尺寸变量），斜切卡片、下划光带、选中态配色全部由主题 CSS
+   （.part-nav.nav-\3c style> .nav-item / .nav-item.is-active）负责 —— 框架不写死视觉，换肤才有效。 */
+.part-nav[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.part-nav .nav-item[data-v-16075a7b] {
+  width: var(--nav-item-w, 120px);
+  height: var(--nav-item-h, 34px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  /* 字号/字体走继承：部件设置里的 text.fontSize / fontFamily 挂在 .part-nav 上，
+     写死 15px 会把设计稿的 22px 菜单字盖掉（踩过：005 导航条字变小了一号） */
+  font-size: inherit;
+  font-family: inherit;
+  color: inherit;
+  line-height: 1;
+  white-space: nowrap;
+}
+.part-nav .nav-item .nav-text[data-v-16075a7b] {
+  padding: 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* 绝对定位模式：菜单项沿设计稿的斜切板各就各位（等宽流式排布对不上设计稿） */
+.part-nav.is-absolute[data-v-16075a7b] {
+  display: block;
+  position: relative;
+}
+.part-nav.is-absolute .nav-item[data-v-16075a7b] {
+  position: absolute;
+}
+.part-nav.is-absolute .nav-item .nav-text[data-v-16075a7b] {
+  padding: 0;
+}
+.btn[data-v-16075a7b] {
+  padding: 6px 18px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  border: 1px solid currentColor;
+  background: rgba(120, 170, 230, 0.18);
+  color: inherit;
+}
+.btn[data-v-16075a7b]:hover {
+  background: rgba(120, 170, 230, 0.32);
+}
+.btn.btn-primary[data-v-16075a7b] {
+  background: rgba(58, 160, 255, 0.85);
+  color: #fff;
+  border-color: transparent;
+}
+.btn.btn-ghost[data-v-16075a7b] {
+  background: transparent;
+}
+.part-filter[data-v-16075a7b] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.filter-label[data-v-16075a7b] {
+  font-size: 12px;
+  opacity: 0.85;
+  white-space: nowrap;
+}
+.filter-input[data-v-16075a7b] {
+  flex: 1;
+  height: 26px;
+  padding: 0 8px;
+  font-size: 12px;
+  color: inherit;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(140, 160, 190, 0.4);
+  border-radius: 3px;
+  outline: none;
+}
+.filter-input option[data-v-16075a7b] {
+  color: #1f2d3d;
+}
+.board-view[data-v-16c3c220] {
+  /* 舞台铺满**容器**（不是视口）：独立窗口预览时 #app 是 100%，两者等价；
+     在宿主页签里 100vw 会比页签宽（左侧还有页签栏）⇒ 横向溢出，故一律用百分比。 */
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+/* 舞台底纹：radial 光晕 + 44px 细网格（值来自主题的 --brd-decor）。
+   用伪元素而不是叠在 background 上，因为画布/舞台还会被设置纯色底或背景图。 */
+.board-view[data-v-16c3c220]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: var(--brd-decor, none);
+  opacity: 0.9;
+}
+.board-scroll[data-v-16c3c220] {
+  width: 100%;
+  height: 100%;
+}
+.board-canvas[data-v-16c3c220] {
+  overflow: hidden;
+  /* 画布的默认文字色＝主题的正文色。⚠️ 这里原来写死 #fff：
+     浅色主题（极光白）下"继承它的文字"（表格、播报、没显式设色的部件）就是白底白字
+     —— 用户切到极光白后反馈"字体颜色看不清"的一半原因就在这里。 */
+  color: var(--brd-text, #fff);
+}
+/* 画布自己的底纹（板子设了纯色底时，舞台那层的底纹会被盖住 ⇒ 这里再铺一层）。
+   z-index:0 + 部件自身 z-index≥1，所以部件永远在底纹之上。 */
+.board-canvas[data-v-16c3c220]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: var(--brd-decor, none);
+}
+.view-part[data-v-16c3c220] {
+  position: absolute;
+}
+.watermark[data-v-16c3c220] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 60px;
+  /* 水印：浅色主题下白水印看不见 ⇒ 也跟着主题（浅色主题给了深色低透明） */
+  color: var(--brd-watermark, rgba(255, 255, 255, 0.07));
+  transform: rotate(-24deg);
+  pointer-events: none;
+}
+.board-toolbar[data-v-16c3c220] {
+  position: absolute;
+  right: 16px;
+  top: 12px;
+  z-index: 100;
+  /* 工具栏配色也走主题变量：深色主题是"深底浅字"，浅色主题（极光白）必须反过来，
+     否则在白底上看不清（用户切到极光白后反馈"字体颜色要调整"）。
+     默认值＝原来的深色样式，所以不设这些变量的主题观感不变。 */
+  background: var(--brd-toolbar-bg, rgba(20, 32, 50, 0.55));
+  border: 1px solid var(--brd-toolbar-border, rgba(120, 170, 230, 0.25));
+  border-radius: 4px;
+  color: var(--brd-toolbar-text, #cfe3ff);
+  padding: 4px 10px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  opacity: 0.25;
+  transition: opacity 0.2s;
+  /* 手机：默认不透明（原来 opacity .25 在触屏上几乎看不见，也点不准），图标与间距放大 */
+}
+.board-toolbar[data-v-16c3c220]:hover {
+  opacity: 1;
+}
+.board-toolbar .tb-lang[data-v-16c3c220] {
+  background: var(--brd-toolbar-input-bg, rgba(10, 20, 34, 0.6));
+  color: inherit;
+  border: 1px solid var(--brd-toolbar-border, rgba(120, 170, 230, 0.3));
+  border-radius: 3px;
+  font-size: 12px;
+  height: 22px;
+  outline: none;
+}
+.board-toolbar .tb-lang option[data-v-16c3c220] {
+  color: #1f2d3d;
+}
+.board-toolbar .tb-params[data-v-16c3c220] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 46vw;
+  overflow: hidden;
+}
+.board-toolbar .tb-params .ant-tag[data-v-16c3c220] {
+  margin: 0;
+  font-size: 11px;
+}
+.board-toolbar .tb-params .tb-clear[data-v-16c3c220] {
+  color: #4fa8ff;
+  cursor: pointer;
+  font-size: 11px;
+}
+.board-toolbar i[data-v-16c3c220] {
+  cursor: pointer;
+  font-size: 15px;
+}
+.board-toolbar i[data-v-16c3c220]:hover {
+  color: #4fa8ff;
+}
+.board-toolbar.is-mobile[data-v-16c3c220] {
+  opacity: 1;
+  left: 8px;
+  right: 8px;
+  top: 8px;
+  /* ⚠️ 不换行：换行会让工具栏变成两行（≈80px），而画布只留了 44px 顶部内边距 ⇒
+       第一行内容被压在工具栏下面（截图里标题被切掉一半）。窄屏就让看板名省略号收缩。 */
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 6px 8px;
+}
+.board-toolbar.is-mobile .tb-title[data-v-16c3c220] {
+  font-size: 13px;
+  margin-right: auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.board-toolbar.is-mobile .tb-params[data-v-16c3c220] {
+  max-width: 100%;
+  order: 3;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.board-toolbar.is-mobile i[data-v-16c3c220] {
+  font-size: 20px;
+  padding: 2px 4px;
+  flex: 0 0 auto;
+}
+.board-toolbar.is-mobile .tb-lang[data-v-16c3c220] {
+  height: 26px;
+  flex: 0 0 auto;
+}
+.board-toolbar.is-mobile .tb-ops[data-v-16c3c220] {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.board-toolbar.is-hidden[data-v-16c3c220] {
+  display: none;
+}
+.show-toolbar[data-v-16c3c220] {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  z-index: 100;
+  color: var(--brd-toolbar-show, rgba(200, 220, 255, 0.35));
+  cursor: pointer;
+  font-size: 16px;
+}
+.show-toolbar[data-v-16c3c220]:hover {
+  color: var(--brd-accent, #4fa8ff);
+}
+.board-empty[data-v-16c3c220] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 40%;
+  text-align: center;
+  color: var(--brd-sub, #8fa4bf);
+}
+.board-empty i[data-v-16c3c220] {
+  font-size: 42px;
+}
+.board-empty p[data-v-16c3c220] {
+  margin-top: 12px;
+}
+
+/* 工具栏按钮 / 参数 chip / 空态图标（替代 antd 1.x 的 a-icon / a-tag） */
+.board-empty__icon[data-v-16c3c220] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--brd-sub, #8fa4bf);
+  border: 2px solid currentcolor;
+  border-radius: 50%;
+}
+.tb-btn[data-v-16c3c220] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+}
+.tb-btn[data-v-16c3c220]:hover {
+  color: var(--brd-accent, #4fa8ff);
+  background: rgba(120, 170, 230, 0.12);
+}
+.tb-param[data-v-16c3c220] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 6px;
+  font-size: 11px;
+  line-height: 18px;
+  color: #e6f0ff;
+  background: rgba(77, 141, 255, 0.22);
+  border: 1px solid rgba(120, 170, 230, 0.45);
+  border-radius: 3px;
+}
+.tb-param__x[data-v-16c3c220] {
+  cursor: pointer;
+  font-style: normal;
+  opacity: 0.7;
+}
+.tb-param__x[data-v-16c3c220]:hover {
+  opacity: 1;
+}
+
 /**
  * 只用自有 class（`dr-` 前缀）做布局微调。
  * ⚠ 不要写 `:deep(.ant-*)` 去改宿主的组件内部样式 —— 那会和宿主的主题定制打架，