iter(g315): 表格支持行展开详情

packages/skin/ui/ui.css

@@ -222,6 +222,35 @@ body.ua-col-resizing {
   width: 36px;
   text-align: center !important;
 }
+/* 展开列：窄一格，按钮本体撑满单元格好点 */
+.ua-cell-expand {
+  width: 36px;
+  text-align: center !important;
+  padding-right: 0 !important;
+}
+.ua-expand-btn {
+  padding: 0 var(--ua-space-05);
+  border: none;
+  background: none;
+  color: var(--ua-color-text-muted);
+  font-size: var(--ua-font-size-md);
+  line-height: var(--ua-leading-none);
+  cursor: pointer;
+  transition: color var(--ua-duration-fast) var(--ua-ease), transform var(--ua-duration-fast) var(--ua-ease);
+}
+.ua-expand-btn:hover {
+  color: var(--ua-color-accent);
+}
+.ua-expand-btn.is-open {
+  color: var(--ua-color-accent);
+  transform: rotate(90deg); /* 箭头转成朝下：开合状态不必靠文字再说一遍 */
+}
+.ua-detail-row td {
+  padding: var(--ua-space-3) var(--ua-space-4);
+  background: var(--ua-color-surface-inset); /* 凹陷底：一眼看出这条是附属信息，不是新的一行数据 */
+  font-size: var(--ua-font-size-sm);
+  white-space: normal; /* 详情多为长文本，允许折行 */
+}
 /* 列对齐：表头与单元格共用，由列定义的 align 决定 */
 .ua-align-center {
   text-align: center;