@icen.ai/ui 0.4.0 → 0.5.0

package/dist/components/stat.css

@@ -3,18 +3,31 @@
  *
  * 完整契约：
  *   <div class="stat-grid [stat-grid--2|stat-grid--3|stat-grid--4]">
- *     <div class="stat-card [.stat-card--interactive]">
+ *     <div class="stat-card [.stat-card--interactive] [.stat-card--horizontal]">
  *       <div class="stat-head">
  *         <span class="stat-label">用户总数</span>
- *         <span class="stat-icon">…svg…</span>             ← 可选
+ *         <span class="stat-icon [.icon--ok|.icon--warn|.icon--bad|.icon--info]>…svg…</span>
  *       </div>
- *       <div class="stat-num [.accent|.warn|.bad|.info]">0</div>
- *       <div class="stat-delta [.up|.down|.flat]">          ← 可选趋势
- *         <svg>…arrow…</svg> +12.4%
- *         <span class="stat-period">比上周</span>
+ *       <div class="stat-body">
+ *         <div class="stat-num [.accent|.warn|.bad|.info]">0</div>
+ *         <div class="stat-delta [.up|.down|.flat]">          ← 可选趋势
+ *           <svg>…arrow…</svg> +12.4%
+ *           <span class="stat-period">比上周</span>
+ *         </div>
+ *       </div>
+ *       <div class="stat-spark">…svg mini chart…</div>         ← 可选：迷你折线/柱状
+ *       <div class="stat-progress">                           ← 可选：进度环
+ *         <svg class="stat-ring" viewBox="0 0 36 36">
+ *           <circle class="stat-ring-track" cx="18" cy="18" r="15.5" />
+ *           <circle class="stat-ring-fill" cx="18" cy="18" r="15.5" style="stroke-dasharray:75,100" />
+ *         </svg>
  *       </div>
  *     </div>
  *   </div>
+ *
+ * .stat-card--horizontal：横向布局（数字在右，标签在左），适合 dashboard 顶栏。
+ * .stat-spark：内嵌迷你折线/柱状图（消费方可引用 chart-sparkline.css 或自绘 SVG）。
+ * .stat-ring：进度环（SVG stroke-dasharray 控制百分比，0-100）。
  */
 
 .stat-grid {
@@ -72,8 +85,19 @@
   background: var(--token-accent-subtle);
   color: var(--token-accent);
 }
+.stat-icon.icon--ok   { background: color-mix(in srgb, var(--token-success) 14%, transparent); color: var(--token-success); }
+.stat-icon.icon--warn { background: color-mix(in srgb, var(--token-warning) 14%, transparent); color: var(--token-warning); }
+.stat-icon.icon--bad  { background: color-mix(in srgb, var(--token-error) 14%, transparent); color: var(--token-error); }
+.stat-icon.icon--info { background: color-mix(in srgb, var(--token-info) 14%, transparent); color: var(--token-info); }
 .stat-icon svg { width: 14px; height: 14px; }
 
+/* ── 内容体（数字 + 趋势） ── */
+.stat-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 .stat-num {
   font-size: 24px;
   font-weight: 700;
@@ -111,3 +135,102 @@
 }
 .stat-card--sm .stat-num { font-size: var(--density-font-size-lg); }
 .stat-card--sm .stat-label { font-size: 10px; }
+
+/* ── 横向布局（dashboard 顶栏：标签左 + 数字右） ── */
+.stat-card--horizontal {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-md);
+}
+.stat-card--horizontal .stat-head {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+.stat-card--horizontal .stat-body {
+  text-align: right;
+  flex-shrink: 0;
+}
+.stat-card--horizontal .stat-delta {
+  justify-content: flex-end;
+}
+
+/* ── 迷你图槽（stat-spark）── */
+.stat-spark {
+  margin-top: var(--density-space-xs);
+  height: 28px;
+  width: 100%;
+}
+.stat-spark svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.stat-card--horizontal .stat-spark {
+  margin-top: 0;
+  width: 80px;
+  flex-shrink: 0;
+}
+
+/* ── 进度环 ── */
+.stat-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: var(--density-space-xs);
+}
+.stat-card--horizontal .stat-progress {
+  margin-top: 0;
+  flex-shrink: 0;
+}
+.stat-ring {
+  width: 48px;
+  height: 48px;
+  transform: rotate(-90deg);
+}
+.stat-ring-track {
+  fill: none;
+  stroke: var(--token-fill-2);
+  stroke-width: 3;
+}
+.stat-ring-fill {
+  fill: none;
+  stroke: var(--token-accent);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-dasharray: 0, 100;
+  transition: stroke-dasharray var(--icen-tx-slow) var(--ease-out);
+}
+.stat-card .stat-ring-fill { stroke: var(--token-accent); }
+
+/* ── 数字带前缀/后缀 ── */
+.stat-num-prefix,
+.stat-num-suffix {
+  font-size: 0.6em;
+  font-weight: 500;
+  color: var(--token-text-faint);
+  margin: 0 1px;
+}
+
+/* ── 加载态骨架 ── */
+.stat-card.is-loading .stat-num,
+.stat-card.is-loading .stat-delta {
+  color: transparent;
+  background: var(--token-fill-2);
+  border-radius: var(--radius-xs);
+  animation: stat-skeleton 1.5s ease-in-out infinite;
+}
+.stat-card.is-loading .stat-num { height: 28px; }
+.stat-card.is-loading .stat-delta { height: 14px; width: 60%; }
+@keyframes stat-skeleton {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .stat-card.is-loading .stat-num,
+  .stat-card.is-loading .stat-delta { animation: none; }
+  .stat-ring-fill { transition: none; }
+}

package/dist/components/steps.css

@@ -133,3 +133,100 @@
 @media (prefers-reduced-motion: reduce) {
   .step-dot, .step-line { transition: none; }
 }
+
+/* ── 纯点变体（无数字/无标签，紧凑进度指示） ── */
+.steps--dots .step-dot {
+  width: 10px;
+  height: 10px;
+  padding: 0;
+  font-size: 0;
+}
+.steps--dots .step-line { top: 20px; }
+.steps--dots .step-title,
+.steps--dots .step-desc { display: none; }
+.steps--dots .step { flex: none; }
+.steps--dots { gap: var(--density-space-xs); }
+
+/* ── 自定义图标槽（step-dot 内放 svg） ── */
+.step-dot-icon {
+  width: 16px;
+  height: 16px;
+}
+.step--finish .step-dot-icon { color: var(--token-on-accent, #fff); }
+.step--process .step-dot-icon { color: var(--token-accent); }
+.step--wait .step-dot-icon { color: var(--token-text-faint); }
+.step--error .step-dot-icon { color: var(--token-error); }
+
+/* ── 可点击步骤 ── */
+.step--clickable {
+  cursor: pointer;
+  transition: opacity var(--icen-tx-fast);
+}
+.step--clickable:hover .step-dot {
+  transform: scale(1.08);
+  box-shadow: var(--icen-ring-soft);
+}
+.step--clickable:hover .step-title {
+  color: var(--token-accent);
+}
+
+/* ── 进度条变体（步骤间的填充进度，非离散连线） ── */
+.steps--progress .step-line {
+  height: 3px;
+  border-radius: var(--radius-full);
+  background: var(--token-fill-2);
+  overflow: hidden;
+}
+.steps--progress .step-line::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--token-accent);
+  transform-origin: left;
+  transform: scaleX(0);
+  transition: transform var(--icen-tx-slow) var(--ease-out);
+}
+.steps--progress .step--finish .step-line::after { transform: scaleX(1); }
+
+/* ── 垂直模式的进度条变体 ── */
+.steps--vertical.steps--progress .step-line::after {
+  transform-origin: top;
+  transform: scaleY(0);
+}
+.steps--vertical.steps--progress .step--finish .step-line::after {
+  transform: scaleY(1);
+}
+
+/* ── 步骤描述富化（可选 icon + text） ── */
+.step-extra {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  justify-content: center;
+}
+.step--error .step-extra { color: var(--token-error); }
+
+/* ── 数字步骤的连接箭头（可选替代纯线条） ── */
+.steps--connected .step-line {
+  height: 0;
+  background: transparent;
+}
+.steps--connected .step-line::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-top: 1px dashed var(--token-outline-soft);
+}
+.steps--connected .step--finish .step-line::before {
+  border-top-style: solid;
+  border-top-color: var(--token-accent);
+}
+
+@media (max-width: 640px) {
+  /* 小屏：横向 steps 变为可横向滚动 */
+  .steps { overflow-x: auto; flex-wrap: nowrap; }
+  .step { min-width: 80px; }
+}

package/dist/components/switch.css

@@ -210,3 +210,145 @@
 .radio-item[aria-checked='true'] .radio-dot::after {
   transform: translate(-50%, -50%) scale(1);
 }
+
+/* ── 开关色彩变体 ── */
+.switch--success[aria-checked='true'] { background: var(--token-success); }
+.switch--warning[aria-checked='true'] { background: var(--token-warning); }
+.switch--danger[aria-checked='true']  { background: var(--token-error); }
+
+/* ── 开关带文字（on/off 文字嵌入） ── */
+.switch--text {
+  --switch-w: 52px;
+}
+.switch--text .switch-thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 700;
+  color: transparent;
+}
+.switch--text[aria-checked='true']::before {
+  content: 'ON';
+  position: absolute;
+  left: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--token-on-accent, #fff);
+}
+.switch--text[aria-checked='false']::before {
+  content: 'OFF';
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--token-text-faint);
+}
+
+/* ── 带标签的开关行 ── */
+.switch-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm) 0;
+}
+.switch-row-label {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-width: 0;
+}
+.switch-row-title {
+  font-size: var(--density-font-size-md);
+  color: var(--token-text);
+}
+.switch-row-desc {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+}
+
+/* ── 勾选行（checkbox + label 组合） ── */
+.checkbox-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--density-space-sm);
+  cursor: pointer;
+}
+.checkbox-row-label {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── 单选卡片（富化版 radio-item，带描述与图标） ── */
+.radio-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  padding: var(--density-space-md);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-surface);
+  cursor: pointer;
+  transition:
+    border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.radio-card:hover {
+  border-color: var(--token-hover-border, color-mix(in srgb, var(--token-accent) 30%, transparent));
+}
+.radio-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+}
+.radio-card.is-selected,
+.radio-card[aria-checked='true'] {
+  border-color: var(--token-accent);
+  background: var(--token-accent-subtle);
+  box-shadow: var(--icen-ring-soft);
+}
+.radio-card:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.radio-card-title {
+  font-size: var(--density-font-size-md);
+  font-weight: 500;
+  color: var(--token-text);
+}
+.radio-card-desc {
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+  line-height: 1.5;
+}
+
+/* 单选卡片网格 */
+.radio-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--density-space-sm);
+}
+
+/* ── 复选框组（多列网格） ── */
+.checkbox-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: var(--density-space-sm);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .switch-thumb { transition: none; }
+  .radio-dot::after { transition: none; }
+  .radio-card { transition: none; }
+}

package/dist/components/table.css

@@ -3,22 +3,30 @@
  *
  * 完整契约：
  *   <div class="table-wrap [table-wrap--bordered]">
- *     <table class="admin-table [admin-table--compact|admin-table--dense]">
+ *     <table class="admin-table [--zebra|--compact|--dense] [--sticky-col]">
+ *       <caption class="table-caption">标题说明</caption>     ← 可选
  *       <thead>
- *         <tr><th [colspan=rowspan]>列名</th>…</tr>
+ *         <tr><th [colspan=rowspan] [data-sort]>列名</th>…</tr>
  *       </thead>
  *       <tbody>
- *         <tr class="row-link [.is-selected]">           ← 整行可点
+ *         <tr class="row-link [.is-selected] [.is-expanded]>           ← 整行可点
+ *           <td class="col-fixed">…</td>                                ← 固定列（sticky-col 模式）
  *           <td>…</td>
  *           <td class="ops"><button class="btn btn-sm">…</button></td>
  *         </tr>
+ *         <tr class="row-expand">                                       ← 展开行（配合 .is-expanded）
+ *           <td colspan="99">…展开详情…</td>
+ *         </tr>
  *       </tbody>
  *       <tfoot><tr><td>合计</td>…</tr></tfoot>
  *     </table>
  *   </div>
  *
  * .table-wrap：窄屏横向滚动（滚动条样式见 base.css）；--bordered 加外边框。
+ * .admin-table--zebra：斑马纹（奇数行底色）。
  * .admin-table--compact：紧凑（cell padding 缩小）；--dense：极紧凑（行高更紧）。
+ * .admin-table--sticky-col：首列水平粘滞（配合 td/th .col-fixed，长表横向滚动时保持可见）。
+ * .row-expand[hidden]：配合 .row-link.is-expanded 控制展开行显隐。
  */
 
 .table-wrap {
@@ -119,3 +127,78 @@
 }
 .admin-table th[data-sort='asc']::after { content: '↑'; opacity: 1; color: var(--token-accent); }
 .admin-table th[data-sort='desc']::after { content: '↓'; opacity: 1; color: var(--token-accent); }
+
+/* ── 斑马纹 ── */
+.admin-table--zebra tbody tr:nth-child(odd) {
+  background: color-mix(in srgb, var(--token-bg-soft) 50%, transparent);
+}
+.admin-table--zebra tbody tr:hover {
+  background: var(--token-surface-strong);
+}
+
+/* ── 表格标题（caption） ── */
+.table-caption {
+  text-align: left;
+  padding: var(--density-space-sm) calc(var(--density-space-md) + 2px);
+  font-size: var(--density-font-size-md);
+  font-weight: 600;
+  color: var(--token-text);
+  caption-side: top;
+}
+
+/* ── 首列粘滞（长表横向滚动时保持可见） ── */
+.admin-table--sticky-col th:first-child,
+.admin-table--sticky-col .col-fixed {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background: var(--token-bg-soft);
+  box-shadow: 2px 0 4px color-mix(in srgb, var(--token-shadow-card-base, rgba(0,0,0,0.06)) 40%, transparent);
+}
+.admin-table--sticky-col tbody td.col-fixed {
+  background: var(--token-surface);
+}
+.admin-table--sticky-col tbody tr:hover td.col-fixed {
+  background: var(--token-surface-strong);
+}
+
+/* ── 展开行 ── */
+.admin-table .row-expand > td {
+  padding: 0 var(--density-space-md);
+  background: var(--token-bg-soft);
+  border-bottom: 1px solid var(--token-line-soft);
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-muted);
+}
+.admin-table .row-expand[hidden] { display: none; }
+/* 展开行的内容容器（使用方可加 padding/动画） */
+.row-expand-content {
+  padding: var(--density-space-sm) 0;
+  animation: row-expand-in var(--icen-tx-fast) var(--ease-out);
+}
+@keyframes row-expand-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── 列宽工具类 ── */
+.admin-table .col-narrow { width: 80px; }
+.admin-table .col-wide { width: 240px; }
+.admin-table .col-action { width: 1%; white-space: nowrap; }
+
+/* ── 行状态色 ── */
+.admin-table tbody tr.row-success { background: color-mix(in srgb, var(--token-success) 6%, transparent); }
+.admin-table tbody tr.row-warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent); }
+.admin-table tbody tr.row-error   { background: color-mix(in srgb, var(--token-error) 6%, transparent); }
+
+/* ── 粘滞表头阴影提示 ── */
+.admin-table thead th {
+  box-shadow: 0 1px 0 var(--token-line);
+}
+
+/* ── 表头分组（rowspan/colspan 样式） ── */
+.admin-table th[rowspan] { vertical-align: bottom; }
+
+@media (prefers-reduced-motion: reduce) {
+  .row-expand-content { animation: none; }
+}

package/dist/components/tabs.css

@@ -108,6 +108,127 @@
   text-align: center;
 }
 
+/* ── 增强 ── */
+
+/* 尺寸变体 */
+.page-tabs--sm .page-tab {
+  padding: var(--density-space-xs) var(--density-space-sm);
+  font-size: var(--density-font-size-sm);
+}
+.page-tabs--lg .page-tab {
+  padding: var(--density-space-md) calc(var(--density-space-md) + 4px);
+  font-size: var(--density-font-size-lg);
+}
+
+/* Tab 带图标 */
+.page-tab-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin-right: 2px;
+}
+
+/* Tab 带徽章/计数 */
+.page-tab-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  margin-left: var(--density-space-xs);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--token-text-faint);
+  background: var(--token-fill-2);
+  border-radius: var(--radius-full);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.page-tab.active .page-tab-badge,
+.page-tab[aria-selected='true'] .page-tab-badge {
+  background: var(--token-accent);
+  color: var(--token-on-accent, #fff);
+}
+
+/* 可关闭 tab */
+.page-tab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: var(--density-space-xs);
+  margin-right: -4px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.page-tab-close:hover {
+  color: var(--token-error);
+  background: var(--token-error-muted);
+}
+.page-tab-close svg { width: 10px; height: 10px; }
+
+/* 分段式 tab（替代底边线，用 segmented 视觉） */
+.page-tabs--segment {
+  display: inline-flex;
+  border-bottom: none;
+  gap: 2px;
+  padding: 2px;
+  background: var(--token-panel);
+  border: 1px solid var(--token-outline-soft);
+  border-radius: var(--radius-md);
+  box-shadow: var(--token-shadow-inset);
+}
+.page-tabs--segment .page-tab {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding: var(--density-space-xs) var(--density-space-md);
+  border-radius: var(--radius-sm);
+}
+.page-tabs--segment .page-tab.active,
+.page-tabs--segment .page-tab[aria-selected='true'] {
+  background: var(--token-accent);
+  color: var(--token-on-accent, #fff);
+  border-bottom-color: transparent;
+  font-weight: 500;
+}
+
+/* 垂直 tab（侧栏式） */
+.page-tabs--vertical {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--token-line-soft);
+  margin-bottom: 0;
+  min-width: 160px;
+}
+.page-tabs--vertical .page-tab {
+  border-bottom: none;
+  border-right: 2px solid transparent;
+  margin-bottom: 0;
+  margin-right: -1px;
+}
+.page-tabs--vertical .page-tab.active,
+.page-tabs--vertical .page-tab[aria-selected='true'] {
+  border-right-color: var(--token-accent);
+  border-bottom-color: transparent;
+}
+
+/* tab 溢出渐变提示（窄屏溢出时右侧渐变遮罩——纯视觉提示，不违反"不滚动"纪律，仍 flex-wrap） */
+.page-tabs--scroll {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.page-tabs--scroll::-webkit-scrollbar { display: none; }
+
 @media (prefers-reduced-motion: reduce) {
-  .page-tab, .admin-tabs a { transition: none; }
+  .page-tab, .admin-tabs a, .page-tab-close { transition: none; }
 }