iter(e05): 新增 divider 分隔线组件

packages/skin/ui/src/divider.ts

@@ -0,0 +1,11 @@
+import { h } from '@ui-arch/frame';
+import type { DividerProps } from './types.js';
+
+/*** 分隔线：水平/垂直两种方向，可带居中文案标签，dashed 切虚线 ***/
+export function divider(props: DividerProps): HTMLDivElement {
+  const cls = ['ua-divider', props.vertical ? 'ua-divider-vertical' : '', props.dashed ? 'ua-divider-dashed' : ''].filter(Boolean).join(' ');
+  const line = props.label && !props.vertical
+    ? h('div', { class: cls, role: 'separator', 'aria-label': props.label }, h('span', { class: 'ua-divider-label' }, props.label))
+    : h('div', { class: cls, role: 'separator', 'aria-label': props.label }); // 垂直或无标签：纯线条
+  return line as HTMLDivElement;
+}

packages/skin/ui/src/index.ts

@@ -27,6 +27,7 @@ export { tabs } from './tabs.js';
 export { stepper } from './stepper.js';
 export { rate } from './rate.js';
 export { empty } from './empty.js';
+export { divider } from './divider.js';
 export { modal } from './modal.js';
 export { drawer } from './drawer.js';
 export { form, formItem } from './form.js';

packages/skin/ui/src/types.ts

@@ -204,6 +204,13 @@ export interface EmptyProps {
   action?: unknown;     // 操作区内容（常见为按钮）；缺省不渲染
 }
 
+/*** 分隔线入参 ***/
+export interface DividerProps {
+  label?: string;   // 居中文案标签；缺省纯线条
+  vertical?: boolean; // 是否垂直分隔线（用于行内工具栏）；缺省水平
+  dashed?: boolean;   // 是否虚线；缺省实线
+}
+
 /*** 徽标入参 ***/
 export interface BadgeProps {
   label: string; // 徽标文案

packages/skin/ui/ua.manifest.json

@@ -41,6 +41,7 @@
       "stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳",
       "rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配",
       "empty(props)：空状态占位，title/description 可选，action 放操作区",
+      "divider(props)：分隔线，水平/垂直两种方向，可带居中文案标签，dashed 切虚线",
       "modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区",
       "drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭",
       "form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit",
@@ -1081,6 +1082,34 @@
           "action 传入 DOM（如 ghost 按钮）引导用户下一步操作"
         ]
       },
+      {
+        "id": "divider",
+        "title": "分隔线 Divider",
+        "demo": "sec-divider",
+        "props": [
+          {
+            "n": "label",
+            "t": "string",
+            "d": "居中文案标签；缺省纯线条"
+          },
+          {
+            "n": "vertical",
+            "t": "boolean",
+            "d": "是否垂直分隔线（用于行内工具栏）；缺省水平"
+          },
+          {
+            "n": "dashed",
+            "t": "boolean",
+            "d": "是否虚线；缺省实线"
+          }
+        ],
+        "example": "divider({ label: '更多信息' }) / divider({ vertical: true })",
+        "steps": [
+          "在区块之间插入 divider 划分内容层次",
+          "传 label 在水平线上显示居中文案，如「更多信息」",
+          "工具栏内用 vertical: true 的行内竖线，dashed: true 切虚线弱化分隔感"
+        ]
+      },
       {
         "id": "pagination",
         "title": "分页器 Pagination",

packages/skin/ui/ui.css

@@ -843,6 +843,46 @@ button.ua-step-dot:hover {
   margin-top: var(--ua-space-1);
 }
 
+/* —— 分隔线 —— */
+.ua-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--ua-space-3);
+  margin: var(--ua-space-3) 0;
+}
+.ua-divider::before,
+.ua-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--ua-color-border);
+}
+.ua-divider-dashed::before,
+.ua-divider-dashed::after {
+  background: none;
+  border-top: 1px dashed var(--ua-color-border);
+}
+.ua-divider-label {
+  font-size: var(--ua-font-size-sm);
+  color: var(--ua-color-text-muted);
+  white-space: nowrap;
+}
+.ua-divider-vertical {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 20px;
+  margin: 0 var(--ua-space-2);
+}
+.ua-divider-vertical::before,
+.ua-divider-vertical::after {
+  content: none; /* 垂直线：单线无伪元素 */
+}
+.ua-divider-vertical.ua-divider-dashed {
+  background: none;
+  border-left: 1px dashed var(--ua-color-border); /* 垂直虚线走边框 */
+}
+
 /* —— 徽标 —— */
 .ua-badge {
   display: inline-block;