@jzg223/design-runtime 0.0.0-stage → 0.0.1

package/dist/style.css

@@ -0,0 +1,1220 @@
+/**
+ * 库自带样式入口（构建时抽成 dist/style.css，宿主 `import '@hcm/design-platform/style.css'` 引一次）
+ *
+ * 只放「不依赖宿主主题」的最小底座：设计令牌 + 少数公共类。
+ * 具体组件的样式走各自 SFC 的 scoped，避免和宿主的 antd/Tailwind 打架。
+ */
+
+:root {
+  --design-platform-radius: 6px;
+  --design-platform-gap: 8px;
+  --design-platform-muted: rgb(0 0 0 / 45%);
+}
+
+.design-platform-muted {
+  color: var(--design-platform-muted);
+}
+
+.design-platform-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 0;
+  color: var(--design-platform-muted);
+}
+
+.embed-list[data-v-0524a510] {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 标题行：无边框无内边距。行高向列表页工具条看齐：常规尺寸按钮(32px) + 上下留白，
+   标题与工具条垂直居中，与下方列表区保持 8px 间距 */
+.embed-list__head[data-v-0524a510] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 46px;
+  margin-bottom: 8px;
+  padding: 0 5px;
+}
+.embed-list__title[data-v-0524a510] {
+  flex: 1;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.5;
+  color: hsl(var(--foreground, 240 10% 3.9%));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.embed-list__tools[data-v-0524a510] {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* 工具按钮内 lucide 图标：默认 24px 偏大，缩为 14px 并与文字对齐（同列表页工具条） */
+.embed-list__tools .ant-btn svg[data-v-0524a510] {
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
+  vertical-align: -2px;
+}
+.embed-list__tip[data-v-0524a510] {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 12px;
+  color: hsl(var(--foreground, 240 10% 3.9%) / 55%);
+}
+
+/* 数据区：固定高度、内部滚动（无边框、无内边距） */
+.embed-list__body[data-v-0524a510] {
+  width: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+.embed-list__loading[data-v-0524a510],
+.embed-list__error[data-v-0524a510] {
+  padding: 12px 0;
+  text-align: center;
+}
+.embed-list__error .ant-alert[data-v-0524a510] {
+  text-align: left;
+}
+
+/* vxe 在固定高度数据区内滚动：让 grid 撑满 body（设计端高度经 v-bind 注入） */
+.embed-list__body[data-v-0524a510] {
+  height: var(--v09d39f07);
+}
+
+/* 表单单元格外框规则 .form-table td{border:1px solid #d9d9d9} 会级联到内嵌列表的 vxe 表格 td，
+   导致内容行被画上 1px 全框线。内嵌列表区内一律去掉 td 边框（与列表页 design-table 无外框一致） */
+.embed-list[data-v-0524a510] .vxe-table--render-default td {
+  border: none !important;
+}
+.embed-list[data-v-0524a510] .vxe-grid {
+  height: 100% !important;
+  min-height: 0;
+  padding: 0 !important;
+}
+.embed-list[data-v-0524a510] .bg-card {
+  height: 100% !important;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 0 !important;
+}
+.embed-list[data-v-0524a510] .vxe-grid--layout-body-wrapper,
+.embed-list[data-v-0524a510] .vxe-grid--layout-body-content-wrapper,
+.embed-list[data-v-0524a510] .vxe-grid--table-container,
+.embed-list[data-v-0524a510] .vxe-grid--table-wrapper {
+  min-height: 0;
+}
+
+/* ========== 横向滚动条可见性 ==========
+   嵌入列表是固定高度布局（listHeight px，数字 height 进 vxe 固定布局），正文滚动容器
+   .vxe-table--body-inner-wrapper 的原生滚动条会落在可视区内 → 直接启用原生条即可
+   （自定义 ::-webkit-scrollbar 样式可绕过系统「自动隐藏滚动条」强制常显），
+   并隐藏 vxe 浮层 handle（.vxe-table--scroll-x-virtual / -y-virtual）防双条。 */
+.embed-list[data-v-0524a510] .vxe-table--body-inner-wrapper {
+  scrollbar-width: auto !important;
+  -ms-overflow-style: auto !important;
+}
+.embed-list[data-v-0524a510] .vxe-table--body-inner-wrapper::-webkit-scrollbar {
+  display: block !important;
+  width: 12px;
+  height: 12px;
+}
+.embed-list[data-v-0524a510] .vxe-table--body-inner-wrapper::-webkit-scrollbar-track {
+  background: hsl(var(--background-deep, 240 5% 96%));
+  border-radius: 6px;
+}
+.embed-list[data-v-0524a510] .vxe-table--body-inner-wrapper::-webkit-scrollbar-thumb {
+  background: hsl(var(--foreground, 240 10% 3.9%) / 45%);
+  border-radius: 6px;
+}
+.embed-list[data-v-0524a510] .vxe-table--body-inner-wrapper::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--foreground, 240 10% 3.9%) / 65%);
+}
+.embed-list[data-v-0524a510] .vxe-table--scroll-x-virtual,
+.embed-list[data-v-0524a510] .vxe-table--scroll-y-virtual {
+  visibility: hidden !important;
+}
+
+.org-select[data-v-227d414b] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #fff;
+  transition: border-color 0.2s;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.org-select[data-v-227d414b]:hover {
+  border-color: #40a9ff;
+}
+.org-select--disabled[data-v-227d414b] {
+  background: #f5f5f5;
+  cursor: not-allowed;
+}
+.org-select__input[data-v-227d414b] {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  padding: 4px 11px;
+  height: 30px;
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.88);
+  background: transparent;
+  cursor: pointer;
+}
+.org-select__input[data-v-227d414b]:disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.org-select__suffix[data-v-227d414b] {
+  flex: none;
+  color: #bfbfbf;
+  margin-right: 10px;
+  font-size: 14px;
+}
+.org-select__clear[data-v-227d414b] {
+  flex: none;
+  color: #bfbfbf;
+  cursor: pointer;
+  margin-right: 4px;
+  padding: 0 4px;
+}
+.org-select__clear[data-v-227d414b]:hover {
+  color: #888;
+}
+
+/* 选中项长文字省略，避免撑开单元格/列宽 */
+.select-field[data-v-3f1bb602] .ant-select-selection-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.splitline-title[data-v-0127fd50] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+}
+.splitline-title .anticon[data-v-0127fd50] {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+/**
+ * 只用自有 class（`dr-` 前缀）做布局微调。
+ * ⚠ 不要写 `:deep(.ant-*)` 去改宿主的组件内部样式 —— 那会和宿主的主题定制打架，
+ * 而且 antd 内部类名在版本之间可能变。这条已写进 README「设计约束」。
+ */
+.dr-api-switch[data-v-c33a122a] {
+  vertical-align: middle;
+}
+
+.dev-state-button[data-v-d72f4e96] {
+  position: absolute;
+  left: 10px;
+  /* top 由 props.top 控制（默认 10，嵌套时下移避免与父组件按钮重叠） */
+  z-index: 60;
+}
+
+/* 弹窗内设计器快捷入口：目标配置 + 编辑/设计 */
+.dev-state-button__designer[data-v-d72f4e96] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+  margin-bottom: 12px;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  background: #fafafa;
+}
+.dev-state-button__designer-label[data-v-d72f4e96] {
+  font-size: 12px;
+  color: var(--ant-color-text-secondary, #666);
+}
+.dev-state-button__designer-label code[data-v-d72f4e96] {
+  color: #1890ff;
+}
+.dev-state-button__fab[data-v-d72f4e96] {
+  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
+}
+.dev-state-button__toolbar[data-v-d72f4e96] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.dev-state-button__tip[data-v-d72f4e96] {
+  font-size: 12px;
+  color: var(--ant-color-text-quaternary, #999);
+}
+.dev-state-button__head[data-v-d72f4e96] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+.dev-state-button__tabs[data-v-d72f4e96] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+.dev-state-button__content[data-v-d72f4e96] {
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  padding: 8px 12px;
+}
+.dev-state-button__label[data-v-d72f4e96] {
+  font-size: 12px;
+  color: var(--ant-color-text-secondary, #666);
+}
+.dev-state-button__pre[data-v-d72f4e96] {
+  max-height: 60vh;
+  overflow: auto;
+  margin: 0;
+  padding: 12px;
+  border-radius: 6px;
+  background: #f6f8fa;
+  font-size: 12px;
+  line-height: 1.6;
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.dev-state-button__empty[data-v-d72f4e96] {
+  padding: 24px 0;
+  text-align: center;
+  color: var(--ant-color-text-quaternary, #999);
+}
+
+/* ===== 表达式计算 ===== */
+.dev-state-button__expr-input[data-v-d72f4e96] {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.dev-state-button__expr-textarea[data-v-d72f4e96] {
+  flex: 1;
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
+  font-size: 12px;
+}
+.dev-state-button__expr-hint[data-v-d72f4e96] {
+  margin-bottom: 8px;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--ant-color-text-quaternary, #999);
+}
+.dev-state-button__expr-hint code[data-v-d72f4e96] {
+  color: #1890ff;
+}
+
+/* 作用域切换（组件提供第二个作用域时出现）：并排两枚小按钮 + 前缀说明 */
+.dev-state-button__scope-switch[data-v-d72f4e96] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+.dev-state-button__scope-switch-label[data-v-d72f4e96] {
+  font-size: 12px;
+  color: var(--ant-color-text-secondary, #666);
+}
+.dev-state-button__scope[data-v-d72f4e96] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 8px;
+  padding: 6px 12px;
+  margin-bottom: 12px;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  background: #fafafa;
+}
+.dev-state-button__scope-label[data-v-d72f4e96] {
+  font-size: 12px;
+  color: var(--ant-color-text-secondary, #666);
+}
+
+/* 作用域变量 chip：link 按钮去内边距，视觉上像 tag 且可点击插入 */
+.dev-state-button__scope-chip[data-v-d72f4e96] {
+  height: auto;
+  padding: 0;
+  font-size: 12px;
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
+}
+.dev-state-button__scope-empty[data-v-d72f4e96] {
+  font-size: 12px;
+  color: var(--ant-color-text-quaternary, #999);
+}
+.dev-state-button__expr-empty[data-v-d72f4e96] {
+  padding: 24px 0;
+  text-align: center;
+  color: var(--ant-color-text-quaternary, #999);
+}
+.dev-state-button__expr-error[data-v-d72f4e96] {
+  border: 1px solid #ffccc7;
+  border-radius: 6px;
+  padding: 8px 12px;
+  background: #fff2f0;
+}
+.dev-state-button__expr-error .dev-state-button__head[data-v-d72f4e96] {
+  font-size: 12px;
+  color: #cf1322;
+}
+.dev-state-button__type[data-v-d72f4e96] {
+  margin-left: 6px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: #f0f0f0;
+  color: #666;
+  font-size: 11px;
+}
+.dev-state-button__warn[data-v-d72f4e96] {
+  margin-left: 6px;
+  color: #d46b08;
+  font-size: 11px;
+}
+
+/* 只用自有 class（design-platform- 前缀）—— 不改宿主 antd 内部样式，见 README「设计约束」 */
+.dr-flow-status[data-v-ddccf2b2] {
+  vertical-align: middle;
+}
+
+.design-table[data-v-cd209f75] {
+  height: 100%;
+  width: 100%;
+  /* 开发模式悬浮按钮的定位锚点 */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+/* 工具条：与标题同一行——标题靠左(插件默认按钮区)，本区整体靠右对齐 */
+.design-table__toolbar[data-v-cd209f75] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-left: auto;
+}
+.design-table__sys-btns[data-v-cd209f75] {
+  flex-shrink: 0;
+}
+/* 工具栏与表格之间加细分隔，行高协调 */
+.design-table[data-v-cd209f75] .vxe-toolbar {
+  border-bottom: 1px solid hsl(var(--border, 240 5% 84%));
+  margin-bottom: 10px;
+  padding-bottom: 4px;
+}
+/* 标题：自定义 #table-title —— 小图标 + 14px/600 文字 */
+.design-table__title[data-v-cd209f75] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: hsl(var(--foreground, 240 10% 3.9%));
+}
+.design-table__title svg[data-v-cd209f75] {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+/* 系统/工具按钮内的图标：lucide svg 默认 24px 偏大，统一缩为 14px 并对齐 */
+.design-table__toolbar .ant-btn svg[data-v-cd209f75] {
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
+  vertical-align: -2px;
+}
+/* vxe 字体图标：inline 元素用 font-size 控制大小 */
+.design-table .ant-btn i.vxe-icon[data-v-cd209f75] {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1;
+  margin-right: 4px;
+  vertical-align: -2px;
+}
+/* vxe 原生操作按钮已由自渲染按钮替代（仅剩 custom 的默认图标，一并隐藏，列设置走 toggleCustom 面板） */
+.design-table[data-v-cd209f75] .vxe-tools--operate {
+  display: none !important;
+}
+/* 方案B：灰底画布 + 两块白卡 —— 上=查询表单，下=标题工具栏+列表(表格/分页)同卡；
+   卡间灰缝 t2=8px；body 卡不加 overflow，保证分页可见 */
+.design-table[data-v-cd209f75] .bg-card {
+  background: hsl(var(--background-deep, 240 5% 96%));
+}
+.design-table[data-v-cd209f75] .vxe-grid {
+  padding: 0 !important;
+}
+/* 上卡=查询表单区：vxe-grid 无论是否配置查询表单都会渲染 .vxe-grid--layout-header-wrapper
+   （默认布局 headKeys=['Form'] 恒渲染），未配置表单时内容为空，若不处理会露出一块空白白卡。
+   故仅在 searchFormOptions 就绪（has-search-form）时给白卡样式并显示；否则整块隐藏，
+   只保留下方「工具栏+列表」白卡。 */
+.design-table[data-v-cd209f75] .vxe-grid--layout-header-wrapper {
+  display: none;
+}
+.design-table.has-search-form[data-v-cd209f75] .vxe-grid--layout-header-wrapper {
+  display: block;
+  background: hsl(var(--background, 0 0% 100%));
+  border-radius: 6px;
+  margin-bottom: 8px;
+  padding: 8px;
+}
+.design-table[data-v-cd209f75] .vxe-grid--layout-body-wrapper {
+  background: hsl(var(--background, 0 0% 100%));
+  border-radius: 6px;
+  padding: 8px;
+  min-height: 0;
+}
+/* 允许向下收缩：内部各层都放开最小高度（只放 min-height，不改结构） */
+.design-table[data-v-cd209f75] .vxe-grid--layout-body-content-wrapper,
+.design-table[data-v-cd209f75] .vxe-grid--table-container,
+.design-table[data-v-cd209f75] .vxe-grid--table-wrapper {
+  min-height: 0;
+}
+/* 全屏态：铺满视口（类 vxe zoom 的整体放大效果） */
+.design-table.is-fullscreen[data-v-cd209f75] {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--ant-color-bg-container, #fff);
+  padding: 8px;
+}
+/* 内容超高时允许整块滚动，避免底部 pager 被外层 overflow:hidden 裁掉 */
+/* 自适应高度链：design-table(flex column) → 灰底画布.bg-card(flex:1) → vxe-grid(100%)，
+   使列表卡占满剩余高度、表格内部滚动、分页固定在卡底部 */
+.design-table[data-v-cd209f75] .bg-card {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.design-table[data-v-cd209f75] .vxe-grid {
+  flex: 1;
+  min-height: 0;
+  height: 100% !important;
+}
+
+/* ========== 横向滚动条可见性（原生条方案） ==========
+   vxe 默认把横向条画在表格底缘浮层(.vxe-table--scroll-x-virtual)上，受布局裁剪会落进分页区。
+   配合上方「数字高度固定布局」修正后，正文底与裁剪框对齐，正文滚动容器
+   .vxe-table--body-inner-wrapper 的原生滚动条会落在可视区底缘：直接启用原生条
+   （自定义 ::-webkit-scrollbar 可绕过系统「自动隐藏滚动条」强制常显），并隐藏 vxe 浮层防双条。
+   条样式：12px、thumb 前景色 45%（hover 65%），与嵌入列表(embedded-list)同款。 */
+.design-table[data-v-cd209f75] .vxe-table--body-inner-wrapper {
+  scrollbar-width: auto !important;
+  -ms-overflow-style: auto !important;
+}
+.design-table[data-v-cd209f75] .vxe-table--body-inner-wrapper::-webkit-scrollbar {
+  display: block !important;
+  width: 12px;
+  height: 12px;
+}
+.design-table[data-v-cd209f75] .vxe-table--body-inner-wrapper::-webkit-scrollbar-track {
+  background: hsl(var(--background-deep, 240 5% 96%));
+  border-radius: 6px;
+}
+.design-table[data-v-cd209f75] .vxe-table--body-inner-wrapper::-webkit-scrollbar-thumb {
+  background: hsl(var(--foreground, 240 10% 3.9%) / 45%);
+  border-radius: 6px;
+}
+.design-table[data-v-cd209f75] .vxe-table--body-inner-wrapper::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--foreground, 240 10% 3.9%) / 65%);
+}
+.design-table[data-v-cd209f75] .vxe-table--scroll-x-virtual,
+.design-table[data-v-cd209f75] .vxe-table--scroll-y-virtual {
+  visibility: hidden !important;
+}
+.flex-center[data-v-cd209f75] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.design-form-table-wrapper[data-v-52abdc9f] {
+  width: 100%;
+  overflow-x: auto;
+}
+.form-table[data-v-52abdc9f] {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.form-table[data-v-52abdc9f] td {
+  padding: 6px 10px;
+  vertical-align: middle;
+  word-break: break-all;
+  overflow: hidden;
+  border: 1px solid #d9d9d9;
+}
+.form-table[data-v-52abdc9f] .form-td-label {
+  /* 柔和淡蓝底（很浅的蓝灰，避免整列色块太重） */
+  background-color: #f7f9fc;
+  font-weight: 500;
+  font-size: 14px;
+  color: #333;
+}
+.form-table[data-v-52abdc9f] .form-td-field {
+  background-color: #fff;
+}
+.form-table[data-v-52abdc9f] .form-td-splitline {
+  background-color: #fff;
+  border: none !important;
+  padding: 8px 0 4px;
+}
+.form-table[data-v-52abdc9f] .form-td-splitline .ant-divider {
+  /* 分割线上下留白（适中），便于与其他字段区分 */
+  margin: 8px 0;
+}
+
+/* antd divider 默认线色 rgba(5,5,5,0.06) 几乎看不见，加深到明确可见；
+   带文字的 divider 线条在 .ant-divider-rail-start/-end 元素上（非 ::before/::after），
+   无文字的线条在根元素 .ant-divider.ant-divider-rail 上 */
+.form-table[data-v-52abdc9f] .form-td-splitline .ant-divider-rail-start,
+.form-table[data-v-52abdc9f] .form-td-splitline .ant-divider-rail-end {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+.form-table[data-v-52abdc9f] .form-td-splitline .ant-divider.ant-divider-rail {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+.form-table-empty[data-v-52abdc9f] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  color: #999;
+}
+.form-table[data-v-52abdc9f] td.form-td-required {
+  /* 必填字段：浅红底区分（替代红色 *）——恢复原方式 */
+  background-color: #fff1f0;
+}
+
+/* 必填的 label 格：保持淡蓝底不铺红底（避免红蓝冲突刺眼），改用红色文字区分 */
+.form-table[data-v-52abdc9f] td.form-td-label.form-td-required {
+  background-color: #f7f9fc;
+  color: #cf1322;
+}
+.field-cell[data-v-52abdc9f] {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+/* 条件门内容容器：只为挂 v-show（显示条件）而存在，本身不加任何视觉样式，
+   避免改动字段格/标签格/分割线原有的盒子关系 */
+.cell-cond-body[data-v-52abdc9f] {
+  min-width: 0;
+}
+
+/* 条件隐藏格的占位提示（渲染条件/显示条件不满足）：小灰标签 + 鼠标移入 Tooltip 说明原因。
+   样式与 .cell-remark 同族（浅灰、细边框、圆角），保证「隐藏」不会看起来像「坏了」 */
+.cell-cond-hidden[data-v-52abdc9f] {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 18px;
+  padding: 0 6px;
+  font-size: 11px;
+  line-height: 1;
+  color: #bfbfbf;
+  white-space: nowrap;
+  cursor: help;
+  user-select: none;
+  border: 1px dashed #d9d9d9;
+  border-radius: 9px;
+  background-color: #fafafa;
+}
+.cell-cond-hidden[data-v-52abdc9f]:hover {
+  color: #8c8c8c;
+  border-color: #bfbfbf;
+}
+
+/* 标签格（无 name）也要能带备注图标：整块作为一行渲染，图标跟在文字后面 */
+.cell-text[data-v-52abdc9f] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 备注说明图标（cell.remark 有值才渲染）：单元格最右侧的小问号，鼠标移入由 Tooltip 显示说明 */
+.cell-remark[data-v-52abdc9f] {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  margin-left: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  color: #8c8c8c;
+  cursor: help;
+  user-select: none;
+  border: 1px solid currentcolor;
+  border-radius: 50%;
+}
+.cell-remark[data-v-52abdc9f]:hover {
+  color: #1890ff;
+}
+
+/* 内嵌列表单元格：通栏、内容不被固定行高/溢出裁剪约束；无边框内边距（与单元格齐平） */
+/* 未迁入的内嵌列表：明确提示，不占位成输入框 */
+.cell-embedded-missing[data-v-52abdc9f] {
+  padding: 8px;
+  color: var(--design-platform-muted, rgb(0 0 0 / 45%));
+  font-size: 12px;
+  border: 1px dashed var(--design-platform-danger, #ff4d4f);
+  border-radius: 6px;
+}.form-table[data-v-52abdc9f] td.form-td-embedded-list {
+  background-color: #fff;
+  overflow: visible;
+  padding: 0;
+  vertical-align: top;
+}
+
+.design-form[data-v-b3ade916] {
+  /* width: 100%; 加上不适合，就是要表单自己的宽度 */
+  /* 开发模式悬浮按钮的定位锚点 */
+  position: relative;
+}
+.form-title[data-v-b3ade916] {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+/* 工具条：表单下方白底区域，按钮靠右 */
+.design-form-toolbar[data-v-b3ade916] {
+  margin-top: 12px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  background: var(--ant-color-bg-elevated, #fff);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.flex-center[data-v-b3ade916] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.design-comb[data-v-902e3400] {
+  /* width: 100%; */
+  height: 100%;
+  /* 开发模式悬浮按钮的定位锚点 */
+  position: relative;
+}
+
+/* 工具条：组合视图顶部白底区域，按钮靠右；固定自身高度不参与伸缩（否则内容 100% + 工具条叠加超出卡片产生双滚动条） */
+.design-comb-toolbar[data-v-902e3400] {
+  flex: none;
+  margin-bottom: 12px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  background: var(--ant-color-bg-elevated, #fff);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* 卡片 + 内容区高度撑满：body 改 flex 列——工具条占自身高度，内容区（flat/tabs）flex:1 占剩余高度，
+   避免「内容 100% + 工具条高度」叠加超出卡片，产生内外双滚动条 */
+.design-comb__card[data-v-902e3400] {
+  height: 100%;
+}
+.design-comb__card[data-v-902e3400] .ant-card-body {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 平铺模式：占满剩余高度，内部滚动（唯一滚动条） */
+.design-comb__flat[data-v-902e3400] {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* 组合项：不包盒子（无边框/圆角/底色/固定高度），标题与内容随内容自然排布 */
+.design-comb__flat-item[data-v-902e3400] {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 平铺模式每个目标的标题行：中性浅灰底 + 主题蓝左侧强调条 + 加粗，随内容滚动（不吸顶） */
+.design-comb__flat-title[data-v-902e3400] {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px; /* 标题与下方内容之间的间隔 */
+  padding: 10px 16px;
+  font-size: 15px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.88);
+  background: var(--ant-color-fill-tertiary, #f5f5f5);
+  border-left: 4px solid var(--ant-color-primary, #1677ff);
+  border-top: 1px solid var(--ant-color-border-secondary, #f0f0f0);
+  border-bottom: 1px solid var(--ant-color-border-secondary, #f0f0f0);
+}
+
+/* 平铺模式：pane 填满卡片剩余高度（复用 Tabs 模式的高度链） */
+.design-comb__flat-item .design-comb__pane[data-v-902e3400] {
+  flex: 1;
+  min-height: 0;
+}
+
+/* Tabs 模式（自绘）：左侧页签列 + 右侧内容区，整体撑满卡片剩余高度 */
+.design-comb__tabs[data-v-902e3400] {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+/**
+ * 左侧页签列：普通 div + overflow-y:auto —— 原生滚动/滚轮/滚动条，
+ * 组合项再多也不会出现 antd Tabs 那三个问题（「···更多」折叠 / 滚轮被吃 / 切页签跳回顶部）。
+ */
+.design-comb__tabnav[data-v-902e3400] {
+  flex: 0 0 auto;
+  /* 页签列加宽：140 → 180（长标题少折行、更好点） */
+  width: 180px;
+  min-height: 0;
+  padding: 8px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* 滚到尽头不要把滚动传给页面 */
+  overscroll-behavior: contain;
+  border-right: 1px solid var(--ant-color-border-secondary, #f0f0f0);
+  display: flex;
+  flex-direction: column;
+}
+
+/* 页签列滚动条细一点，别抢视觉 */
+.design-comb__tabnav[data-v-902e3400]::-webkit-scrollbar {
+  width: 6px;
+}
+.design-comb__tabnav[data-v-902e3400]::-webkit-scrollbar-thumb {
+  background: rgb(0 0 0 / 15%);
+  border-radius: 3px;
+}
+
+/* 单个页签：外观对齐 antd left 模式（灰字，激活蓝字 + 左侧指示条 + 浅蓝底） */
+.design-comb__tab[data-v-902e3400] {
+  flex: 0 0 auto;
+  /* 高度调大：8px → 12px 内边距（行高 20 → 单项 44px），更好点 */
+  padding: 12px 14px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  font-size: 14px;
+  line-height: 20px;
+  color: rgb(0 0 0 / 65%);
+  cursor: pointer;
+  word-break: break-all;
+  white-space: normal;
+}
+.design-comb__tab[data-v-902e3400]:hover {
+  color: #1677ff;
+}
+.design-comb__tab--active[data-v-902e3400] {
+  color: #1677ff;
+  font-weight: 500;
+  background: rgb(22 119 255 / 6%);
+  /* 用 inset 阴影当指示条（贴左边缘），避免 border 改变宽度导致文字位移 */
+  box-shadow: inset 3px 0 0 #1677ff;
+}
+
+/* 右侧内容区：占满剩余宽度，内部由 pane 自己滚动 */
+.design-comb__tabbody[data-v-902e3400] {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 单个目标的容器：填满内容区，子组件在内部自适应滚动 */
+.design-comb__pane[data-v-902e3400] {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 表单 / 视图：填满 pane，内容超出时自身滚动。
+   padding=16px：与树形视图右侧关联表单（.design-tree-relation .design-form）保持一致，
+   否则表单项表格会紧贴左侧页签列边缘，label 第一列看起来被"切掉"（2026-10-19 用户反馈） */
+.design-comb__pane[data-v-902e3400] .design-form {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+/* 视图：本身只是容器（内部多半再套 DesignForm/DesignTable），不加内边距避免与子组件叠加 */
+.design-comb__pane[data-v-902e3400] .design-view {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* 表格：填满 pane，由内部 vxe-grid 负责滚动 */
+.design-comb__pane[data-v-902e3400] .design-table {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.flex-center[data-v-902e3400] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 全局开发模式开关：常驻右下角（抬到 56px；各组件的 🐞 按钮在组件左上角，互不重叠） */
+.dev-mode-toggle[data-v-f3f51604] {
+  position: fixed;
+  right: 12px;
+  bottom: 56px;
+  z-index: 500;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 1px solid rgb(0 0 0 / 12%);
+  background: rgb(255 255 255 / 72%);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0.65;
+  transition:
+    opacity 0.2s,
+    background 0.2s,
+    border-color 0.2s;
+}
+.dev-mode-toggle[data-v-f3f51604]:hover {
+  opacity: 1;
+}
+.dev-mode-toggle--on[data-v-f3f51604] {
+  background: #1677ff;
+  border-color: #1677ff;
+  opacity: 1;
+}
+.dev-mode-toggle__label[data-v-f3f51604] {
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+}
+.dev-mode-toggle__dot[data-v-f3f51604] {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 35%);
+}
+.dev-mode-toggle--on .dev-mode-toggle__dot[data-v-f3f51604] {
+  display: none;
+}
+
+.design-search[data-v-ce8cdb6c] {
+  width: 100%;
+  /* 开发模式悬浮按钮的定位锚点 */
+  position: relative;
+}
+.design-search-form[data-v-ce8cdb6c] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 16px;
+  align-items: center;
+}
+.design-search-item[data-v-ce8cdb6c] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.design-search-label[data-v-ce8cdb6c] {
+  flex-shrink: 0;
+  font-size: 14px;
+  color: #333;
+}
+.design-search-field[data-v-ce8cdb6c] {
+  width: 180px;
+}
+
+/* 让各字段组件填满固定宽度 */
+.design-search-field[data-v-ce8cdb6c] .ant-input,
+.design-search-field[data-v-ce8cdb6c] .ant-input-affix-wrapper,
+.design-search-field[data-v-ce8cdb6c] .ant-select,
+.design-search-field[data-v-ce8cdb6c] .ant-picker,
+.design-search-field[data-v-ce8cdb6c] .ant-input-number,
+.design-search-field[data-v-ce8cdb6c] .ant-tree-select {
+  width: 100%;
+}
+.design-search-actions[data-v-ce8cdb6c] {
+  display: flex;
+  gap: 8px;
+}
+.flex-center[data-v-ce8cdb6c] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 撑满父容器并允许内部滚动（宿主原实现用的 Tailwind 类 flex-1 min-h-0 的等价写法） */
+.dr-table-inner[data-v-e9102e0c] {
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.design-tree[data-v-c106575a] {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  /* 开发模式悬浮按钮的定位锚点 */
+  position: relative;
+}
+
+/* 正常渲染主区域：顶部工具条 + 下方 layout */
+.design-tree-main[data-v-c106575a] {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部工具条区域：白底横跨整行，内容靠右 */
+.design-tree-toolbar[data-v-c106575a] {
+  flex-shrink: 0;
+  margin-bottom: 8px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  background: var(--ant-color-bg-elevated, #fff);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.design-tree-layout[data-v-c106575a] {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  /* t1=8px：间隔由分隔条宽度承担，layout 不再额外留 gap */
+  gap: 0;
+}
+
+/* ========== 左侧树面板（宽度由 treeWidth 动态控制，配置默认 260px、可拖拽） ========== */
+.design-tree-panel[data-v-c106575a] {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--ant-color-bg-elevated, #fff);
+  display: flex;
+  flex-direction: column;
+}
+
+/* ========== 分隔条：宽=t1(8px)，兼作树与右侧区域的间隔，按住拖拽调整树宽 ========== */
+.design-tree-resizer[data-v-c106575a] {
+  flex-shrink: 0;
+  align-self: stretch;
+  width: 8px;
+  margin: 0;
+  cursor: col-resize;
+  border-radius: 3px;
+  transition: background 0.15s;
+  user-select: none;
+}
+.design-tree-resizer[data-v-c106575a]:hover,
+.design-tree-resizer[data-v-c106575a]:active {
+  background: var(--ant-color-primary, #1677ff);
+  opacity: 0.35;
+}
+.design-tree-body[data-v-c106575a] {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px;
+}
+
+/* ========== 右侧关联目标 ========== */
+.design-tree-relation[data-v-c106575a] {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--ant-color-bg-elevated, #fff);
+}
+
+/* 表单：填满右侧区域，内容超出时自身滚动（加内边距，让表单内容不贴边） */
+.design-tree-relation[data-v-c106575a] .design-form {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+/* 表格：填满右侧区域，由内部 vxe-grid 负责滚动 */
+.design-tree-relation[data-v-c106575a] .design-table {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 组合视图：填满右侧区域，内部自适应滚动 */
+.design-tree-relation[data-v-c106575a] .design-comb {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ========== 树节点样式 ========== */
+[data-v-c106575a] .design-tree__tree {
+  background: transparent;
+}
+[data-v-c106575a] .design-tree__tree .ant-tree-treenode {
+  border-radius: 6px;
+  margin: 1px 0;
+  padding: 1px 4px;
+  transition: background 0.15s;
+}
+[data-v-c106575a] .design-tree__tree .ant-tree-treenode:hover {
+  background: var(--ant-color-fill-quaternary);
+}
+[data-v-c106575a] .design-tree__tree .ant-tree-node-content-wrapper {
+  border-radius: 4px;
+  font-size: 13px;
+}
+[data-v-c106575a] .design-tree__tree .ant-tree-switcher {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 24px;
+  line-height: 24px;
+}
+[data-v-c106575a] .design-tree__tree .ant-tree-indent-unit {
+  width: 18px;
+}
+
+/* ========== 节点标题 + 数量徽标（2026-10-23；同日调整：右对齐成列 + 提高对比度） ==========
+   右对齐原理：.ant-tree-treenode 本身是 flex 行，把 content-wrapper 和它里面那层 .ant-tree-title
+   都拉满剩余宽度后，标题文本才会占满并省略号截断，徽标靠 margin-left:auto 贴到最右，
+   所有数量落在同一列，方便纵向比较（也不依赖固定宽度，缩进层级下不会错位）。
+   注意：antd 的 .ant-tree-title 默认是 inline（宽度收缩到文字），只给 content-wrapper 设 flex 不够，
+   徽标会紧贴文字后面、每行位置各不相同——看起来像是没对齐 */
+[data-v-c106575a] .design-tree__tree .ant-tree-treenode {
+  width: 100%;
+}
+[data-v-c106575a] .design-tree__tree .ant-tree-node-content-wrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+[data-v-c106575a] .design-tree__tree .ant-tree-title {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+.tree-node-title[data-v-c106575a] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+.tree-node-title__text[data-v-c106575a] {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 数量徽标：灰底 pill + 深色加粗数字（原先浅灰 12px 常规字重在白底上几乎看不见，评审反馈「不明显」）；
+   min-width 让小位数与多位数对齐成一列，等宽数字避免数量刷新时左右抖动 */
+.tree-node-title__count[data-v-c106575a] {
+  flex: none;
+  margin-left: auto;
+  box-sizing: border-box;
+  min-width: 22px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 10px;
+  background: var(--ant-color-fill, rgba(0, 0, 0, 0.15));
+  color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 20px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.flex-center[data-v-c106575a] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 弹窗内容自己滚动：组件可能很高（表格/长表单），别把按钮区顶出屏幕 */
+.dr-modal-custom-host[data-v-edb5039f] {
+  max-height: 70vh;
+  overflow: auto;
+  padding: 4px 2px;
+}
+.dr-modal-custom-missing[data-v-edb5039f] {
+  padding: 16px;
+  color: var(--design-platform-muted, rgb(0 0 0 / 45%));
+}
+
+.modal-hcm-body[data-v-4b3c6924] {
+  max-height: 72vh;
+  overflow: auto;
+  padding: 4px 2px;
+}