@svadmin/lite 0.27.0 → 0.30.1

package/dist/components/LiteBillingInvoiceDrawer.svelte.d.ts

@@ -0,0 +1,16 @@
+interface BillItem {
+    name: string;
+    amount: string | number;
+}
+interface Props {
+    invoiceNo?: string;
+    period?: string;
+    totalAmount?: string | number;
+    status?: string;
+    items?: BillItem[];
+    downloadUrl?: string;
+    class?: string;
+}
+declare const LiteBillingInvoiceDrawer: import("svelte").Component<Props, {}, "">;
+type LiteBillingInvoiceDrawer = ReturnType<typeof LiteBillingInvoiceDrawer>;
+export default LiteBillingInvoiceDrawer;

package/dist/components/LiteChartAnnotationOverlay.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  export interface ChartAnnotationItem {
+    id: string;
+    label: string;
+    type?: string;
+    timestamp?: string;
+    valueLabel?: string;
+    colorTone?: string;
+  }
+
+  interface Props {
+    title?: string;
+    annotations?: ChartAnnotationItem[];
+    class?: string;
+  }
+
+  let {
+    title = '业务大事件与异常指标标记层 (SSR 静态列表)',
+    annotations = [
+      { id: 'a1', label: 'v2.4.0 核心版本全量发布', type: 'release', timestamp: '2026-11-10 14:00', valueLabel: 'QPS +35%', colorTone: 'primary' },
+      { id: 'a2', label: '华东大区机房瞬态抖动', type: 'incident', timestamp: '2026-11-11 03:15', valueLabel: '延迟 120ms', colorTone: 'destructive' },
+      { id: 'a3', label: '双十一运营大促高峰开幕', type: 'event', timestamp: '2026-11-11 20:00', valueLabel: '成交 ¥18M', colorTone: 'warning' },
+    ],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-chart-annotation {className}"
+  data-svadmin-component="LiteChartAnnotationOverlay"
+  role="region"
+  aria-label="Chart Annotation Overlay"
+>
+  <header class="lite-ann-header">
+    <div class="lite-ann-title-row">
+      <span class="lite-ann-icon">🏷️</span>
+      <h4 class="lite-ann-title">{title}</h4>
+    </div>
+    <span class="lite-ann-count">共 {annotations.length} 个事件标记</span>
+  </header>
+
+  <div class="lite-ann-body">
+    <div class="lite-ann-timeline">
+      {#each annotations as ann (ann.id)}
+        <div class="lite-ann-item">
+          <div class="lite-ann-dot" class:lite-dot-warn={ann.colorTone === 'warning'} class:lite-dot-danger={ann.colorTone === 'destructive'}></div>
+          <div class="lite-ann-content">
+            <div class="lite-ann-main-row">
+              <span class="lite-ann-label">{ann.label}</span>
+              {#if ann.valueLabel}<span class="lite-ann-val font-mono">[{ann.valueLabel}]</span>{/if}
+            </div>
+            {#if ann.timestamp}<span class="lite-ann-time font-mono">{ann.timestamp}</span>{/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .lite-chart-annotation {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-ann-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-ann-title-row { display: flex; align-items: center; }
+  .lite-ann-icon { font-size: 14px; margin-right: 6px; }
+  .lite-ann-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-ann-count { font-size: 11px; color: #86909c; }
+  .lite-ann-body { padding: 12px 14px; }
+  .lite-ann-timeline { display: flex; flex-direction: column; }
+  .lite-ann-item { display: flex; align-items: flex-start; margin-bottom: 8px; }
+  .lite-ann-item:last-child { margin-bottom: 0; }
+  .lite-ann-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #165dff;
+    margin-top: 4px;
+    margin-right: 8px;
+    shrink: 0;
+  }
+  .lite-dot-warn { background: #ff7d00; }
+  .lite-dot-danger { background: #f53f3f; }
+  .lite-ann-content { flex: 1; display: flex; flex-direction: column; }
+  .lite-ann-main-row { display: flex; align-items: center; }
+  .lite-ann-label { font-weight: 500; color: #1d2129; margin-right: 6px; }
+  .lite-ann-val { font-size: 10px; color: #165dff; font-weight: 600; }
+  .font-mono { font-family: monospace; }
+  .lite-ann-time { font-size: 10px; color: #86909c; }
+</style>

package/dist/components/LiteChartAnnotationOverlay.svelte.d.ts

@@ -0,0 +1,16 @@
+export interface ChartAnnotationItem {
+    id: string;
+    label: string;
+    type?: string;
+    timestamp?: string;
+    valueLabel?: string;
+    colorTone?: string;
+}
+interface Props {
+    title?: string;
+    annotations?: ChartAnnotationItem[];
+    class?: string;
+}
+declare const LiteChartAnnotationOverlay: import("svelte").Component<Props, {}, "">;
+type LiteChartAnnotationOverlay = ReturnType<typeof LiteChartAnnotationOverlay>;
+export default LiteChartAnnotationOverlay;

package/dist/components/LiteColumnMappingTable.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  interface MappingPair {
+    sourceCol: string;
+    targetField: string;
+    required?: boolean;
+    sampleVal?: string;
+  }
+
+  interface Props {
+    title?: string;
+    mappings?: MappingPair[];
+    class?: string;
+  }
+
+  let {
+    title = '字段映射与模式转换',
+    mappings = [
+      { sourceCol: '用户姓名', targetField: 'full_name', required: true, sampleVal: '张伟' },
+      { sourceCol: '手机联系方式', targetField: 'mobile_phone', required: true, sampleVal: '13800138000' },
+      { sourceCol: '所属部门', targetField: 'department_id', required: false, sampleVal: '技术研发部' },
+      { sourceCol: '入职日期', targetField: 'joined_at', required: false, sampleVal: '2026-03-01' }
+    ],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-col-mapping {className}"
+  data-svadmin-component="LiteColumnMappingTable"
+  role="region"
+  aria-label="Column Mapping Table"
+>
+  <header class="lite-mapping-header">
+    <h4 class="lite-mapping-title">{title}</h4>
+    <span class="lite-mapping-count">{mappings.length} 个字段映射</span>
+  </header>
+
+  <div class="lite-mapping-table-wrap">
+    <table class="lite-mapping-table">
+      <thead>
+        <tr>
+          <th>文件原始列名</th>
+          <th>映射目标字段</th>
+          <th>必填约束</th>
+          <th>数据样本</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each mappings as m (m.sourceCol)}
+          <tr>
+            <td class="font-bold">{m.sourceCol}</td>
+            <td><code class="lite-field-code">{m.targetField}</code></td>
+            <td>
+              {#if m.required}
+                <span class="lite-tag-req">必填</span>
+              {:else}
+                <span class="lite-tag-opt">可选</span>
+              {/if}
+            </td>
+            <td class="lite-sample-text">{m.sampleVal ?? '—'}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  .lite-col-mapping {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-mapping-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-mapping-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-mapping-count { font-size: 11px; color: #86909c; }
+  .lite-mapping-table-wrap { overflow-x: auto; }
+  .lite-mapping-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
+  .lite-mapping-table th {
+    padding: 8px 12px;
+    background: #f2f3f5;
+    border-bottom: 1px solid #e5e6eb;
+    color: #4e5969;
+    font-weight: 600;
+  }
+  .lite-mapping-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f2f3f5;
+    color: #1d2129;
+  }
+  .font-bold { font-weight: 600; }
+  .lite-field-code { font-family: monospace; font-size: 11px; color: #165dff; background: #e8f3ff; padding: 2px 5px; border-radius: 3px; }
+  .lite-tag-req { font-size: 10px; color: #f53f3f; background: #ffece8; padding: 1px 4px; border-radius: 3px; font-weight: 500; }
+  .lite-tag-opt { font-size: 10px; color: #86909c; background: #f2f3f5; padding: 1px 4px; border-radius: 3px; }
+  .lite-sample-text { color: #86909c; font-family: monospace; }
+</style>

package/dist/components/LiteColumnMappingTable.svelte.d.ts

@@ -0,0 +1,14 @@
+interface MappingPair {
+    sourceCol: string;
+    targetField: string;
+    required?: boolean;
+    sampleVal?: string;
+}
+interface Props {
+    title?: string;
+    mappings?: MappingPair[];
+    class?: string;
+}
+declare const LiteColumnMappingTable: import("svelte").Component<Props, {}, "">;
+type LiteColumnMappingTable = ReturnType<typeof LiteColumnMappingTable>;
+export default LiteColumnMappingTable;

package/dist/components/LiteDashboardGridLayout.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  export interface DashboardGridItem {
+    id: string;
+    title: string;
+    w: number;
+    h: number;
+    widgetType?: string;
+    metricValue?: string | number;
+  }
+
+  interface Props {
+    title?: string;
+    items?: DashboardGridItem[];
+    class?: string;
+  }
+
+  let {
+    title = '智能动态业务大屏 (SSR 静态栅格)',
+    items = [
+      { id: 'w1', title: '核心营收 (GMV)', w: 4, h: 2, widgetType: 'kpi', metricValue: '¥48.2M' },
+      { id: 'w2', title: '活跃企业租户', w: 4, h: 2, widgetType: 'kpi', metricValue: '1,420 家' },
+      { id: 'w3', title: '网关 SLA', w: 4, h: 2, widgetType: 'kpi', metricValue: '99.98%' },
+    ],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-dashboard-grid {className}"
+  data-svadmin-component="LiteDashboardGridLayout"
+  role="region"
+  aria-label="Dashboard Grid Layout"
+>
+  <header class="lite-dash-header">
+    <div class="lite-dash-title-row">
+      <span class="lite-dash-icon">📊</span>
+      <h4 class="lite-dash-title">{title}</h4>
+    </div>
+    <span class="lite-dash-count">共 {items.length} 个小部件 (静态排版)</span>
+  </header>
+
+  <div class="lite-dash-grid-body">
+    {#each items as item (item.id)}
+      <div class="lite-dash-widget" style="width: calc({(item.w / 12) * 100}% - 10px);">
+        <div class="lite-widget-header">
+          <span class="lite-widget-title">{item.title}</span>
+          <span class="lite-widget-span">{item.w}x{item.h} 栅格</span>
+        </div>
+        {#if item.metricValue}
+          <div class="lite-widget-val font-mono">{item.metricValue}</div>
+        {:else}
+          <div class="lite-widget-placeholder">小部件数据预览 (SSR 静态占位)</div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .lite-dashboard-grid {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-dash-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-dash-title-row { display: flex; align-items: center; }
+  .lite-dash-icon { font-size: 14px; margin-right: 6px; }
+  .lite-dash-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-dash-count { font-size: 11px; color: #86909c; }
+  .lite-dash-grid-body {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -5px;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+  .lite-dash-widget {
+    box-sizing: border-box;
+    margin: 5px;
+    border: 1px solid #f2f3f5;
+    border-radius: 4px;
+    background: #fafafa;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .lite-widget-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+  }
+  .lite-widget-title { font-weight: 600; color: #1d2129; font-size: 11px; }
+  .lite-widget-span { font-size: 9px; color: #86909c; background: #ffffff; padding: 1px 4px; border: 1px solid #e5e6eb; border-radius: 2px; }
+  .lite-widget-val { font-size: 18px; font-weight: 700; color: #165dff; }
+  .font-mono { font-family: monospace; }
+  .lite-widget-placeholder { font-size: 11px; color: #86909c; }
+</style>

package/dist/components/LiteDashboardGridLayout.svelte.d.ts

@@ -0,0 +1,16 @@
+export interface DashboardGridItem {
+    id: string;
+    title: string;
+    w: number;
+    h: number;
+    widgetType?: string;
+    metricValue?: string | number;
+}
+interface Props {
+    title?: string;
+    items?: DashboardGridItem[];
+    class?: string;
+}
+declare const LiteDashboardGridLayout: import("svelte").Component<Props, {}, "">;
+type LiteDashboardGridLayout = ReturnType<typeof LiteDashboardGridLayout>;
+export default LiteDashboardGridLayout;

package/dist/components/LiteDashboardLayoutStorage.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  export interface DashboardPreset {
+    id: string;
+    name: string;
+    description?: string;
+    isDefault?: boolean;
+    role?: string;
+    itemsCount?: number;
+  }
+
+  interface Props {
+    presets?: DashboardPreset[];
+    currentPresetId?: string;
+    class?: string;
+  }
+
+  let {
+    presets = [
+      { id: 'p1', name: '高管经营全景大屏', description: '重点监控季度 GMV 与 SLA', isDefault: true, role: 'CEO', itemsCount: 4 },
+      { id: 'p2', name: '财务月结与对账大屏', description: '聚焦大额采购单与资金划转', isDefault: false, role: 'CFO', itemsCount: 3 },
+    ],
+    currentPresetId = 'p1',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-layout-storage {className}"
+  data-svadmin-component="LiteDashboardLayoutStorage"
+  role="region"
+  aria-label="Dashboard Layout Storage"
+>
+  <div class="lite-storage-header">
+    <span class="lite-storage-icon">📁</span>
+    <span class="lite-storage-title">大屏排版预设方案库 (SSR 静态列表)</span>
+  </div>
+
+  <div class="lite-presets-list">
+    {#each presets as p (p.id)}
+      <div class="lite-preset-card" class:lite-preset-active={p.id === currentPresetId}>
+        <div class="lite-preset-title-row">
+          <span class="lite-preset-name">{p.name}</span>
+          {#if p.isDefault}<span class="lite-preset-badge">默认</span>{/if}
+          {#if p.id === currentPresetId}<span class="lite-preset-active-tag">[当前激活]</span>{/if}
+        </div>
+        {#if p.description}<p class="lite-preset-desc">{p.description}</p>{/if}
+        <div class="lite-preset-footer">
+          <span>角色: {p.role ?? '通用'}</span>
+          <span>{p.itemsCount ?? 4} 个小部件</span>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .lite-layout-storage {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+    padding: 10px 14px;
+  }
+  .lite-storage-header { display: flex; align-items: center; font-weight: 600; color: #1d2129; margin-bottom: 8px; }
+  .lite-storage-icon { font-size: 14px; margin-right: 6px; }
+  .lite-presets-list { display: flex; flex-direction: column; }
+  .lite-preset-card {
+    border: 1px solid #f2f3f5;
+    background: #fafafa;
+    border-radius: 4px;
+    padding: 8px 10px;
+    margin-bottom: 6px;
+  }
+  .lite-preset-card:last-child {
+    margin-bottom: 0;
+  }
+  .lite-preset-active {
+    border-color: #165dff;
+    background: #e8f3ff;
+  }
+  .lite-preset-title-row { display: flex; align-items: center; }
+  .lite-preset-name { font-weight: 600; color: #1d2129; margin-right: 6px; }
+  .lite-preset-badge { font-size: 9px; background: #ffffff; color: #165dff; padding: 1px 4px; border: 1px solid #165dff; border-radius: 2px; margin-right: 6px; }
+  .lite-preset-active-tag { font-size: 10px; color: #165dff; font-weight: 600; }
+  .lite-preset-desc { font-size: 11px; color: #86909c; margin: 4px 0; }
+  .lite-preset-footer { display: flex; justify-content: space-between; font-size: 10px; color: #86909c; }
+</style>

package/dist/components/LiteDashboardLayoutStorage.svelte.d.ts

@@ -0,0 +1,16 @@
+export interface DashboardPreset {
+    id: string;
+    name: string;
+    description?: string;
+    isDefault?: boolean;
+    role?: string;
+    itemsCount?: number;
+}
+interface Props {
+    presets?: DashboardPreset[];
+    currentPresetId?: string;
+    class?: string;
+}
+declare const LiteDashboardLayoutStorage: import("svelte").Component<Props, {}, "">;
+type LiteDashboardLayoutStorage = ReturnType<typeof LiteDashboardLayoutStorage>;
+export default LiteDashboardLayoutStorage;

package/dist/components/LiteDataImportDropzone.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  interface Props {
+    title?: string;
+    acceptedFormats?: string[];
+    maxFileSizeMb?: number;
+    sampleTemplateUrl?: string;
+    class?: string;
+  }
+
+  let {
+    title = '批量数据上传与导入',
+    acceptedFormats = ['.csv', '.xlsx', '.json'],
+    maxFileSizeMb = 50,
+    sampleTemplateUrl = '#',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-import-dropzone {className}"
+  data-svadmin-component="LiteDataImportDropzone"
+  role="region"
+  aria-label="Data Import Dropzone"
+>
+  <header class="lite-dropzone-header">
+    <h4 class="lite-dropzone-title">{title}</h4>
+    <a href={sampleTemplateUrl} class="lite-template-link">下载标准模板文件</a>
+  </header>
+
+  <div class="lite-dropzone-body">
+    <form class="lite-upload-form" method="POST" enctype="multipart/form-data">
+      <div class="lite-drop-area">
+        <div class="lite-drop-icon">📁</div>
+        <div class="lite-drop-text">选择或拖拽导入数据文件至此</div>
+        <div class="lite-drop-hint">支持格式: {acceptedFormats.join('、')}，单个文件上限 {maxFileSizeMb}MB</div>
+        <div class="lite-native-file-input">
+          <input type="file" name="import_file" accept={acceptedFormats.join(',')} />
+        </div>
+      </div>
+      <div class="lite-form-actions">
+        <button type="submit" class="lite-submit-btn">开始解析导入</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<style>
+  .lite-import-dropzone {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-dropzone-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-dropzone-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-template-link { font-size: 11px; color: #165dff; text-decoration: none; font-weight: 500; }
+  .lite-template-link:hover { text-decoration: underline; }
+  .lite-dropzone-body { padding: 14px; }
+  .lite-drop-area {
+    border: 2px dashed #c9cdd4;
+    border-radius: 6px;
+    padding: 24px;
+    text-align: center;
+    background: #fafbfc;
+  }
+  .lite-drop-icon { font-size: 24px; margin-bottom: 8px; }
+  .lite-drop-text { font-size: 13px; font-weight: 600; color: #1d2129; margin-bottom: 4px; }
+  .lite-drop-hint { font-size: 11px; color: #86909c; margin-bottom: 12px; }
+  .lite-native-file-input input { font-size: 11px; }
+  .lite-form-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
+  .lite-submit-btn {
+    background: #165dff;
+    color: #ffffff;
+    border: none;
+    border-radius: 4px;
+    padding: 6px 14px;
+    font-size: 11px;
+    font-weight: 500;
+    cursor: pointer;
+  }
+</style>

package/dist/components/LiteDataImportDropzone.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: string;
+    acceptedFormats?: string[];
+    maxFileSizeMb?: number;
+    sampleTemplateUrl?: string;
+    class?: string;
+}
+declare const LiteDataImportDropzone: import("svelte").Component<Props, {}, "">;
+type LiteDataImportDropzone = ReturnType<typeof LiteDataImportDropzone>;
+export default LiteDataImportDropzone;

package/dist/components/LiteDataLineageGraph.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  interface LineageItem {
+    id: string;
+    name: string;
+    type: string;
+    owner: string;
+    rows?: string;
+  }
+
+  interface Props {
+    title?: string;
+    nodes?: LineageItem[];
+    class?: string;
+  }
+
+  let {
+    title = '数据全链路血缘溯源',
+    nodes = [
+      { id: '1', name: 'src_erp_orders', type: '源数据表', owner: 'ERP 业务库', rows: '1.2M 行' },
+      { id: '2', name: 'dwd_orders_cleaned', type: 'ETL 清洗', owner: 'Flink 流清洗' },
+      { id: '3', name: 'dws_finance_monthly', type: '财务数仓宽表', owner: '财务数仓宽表', rows: '120K 行' },
+      { id: '4', name: '上市公司经营报表', type: '消费报表', owner: '经营分析大屏' }
+    ],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-lineage-graph {className}"
+  data-svadmin-component="LiteDataLineageGraph"
+  role="region"
+  aria-label="Data Lineage Graph"
+>
+  <header class="lite-lineage-header">
+    <h4 class="lite-lineage-title">{title}</h4>
+    <span class="lite-lineage-count">{nodes.length} 个血缘节点</span>
+  </header>
+
+  <div class="lite-lineage-body">
+    {#each nodes as node, idx (node.id)}
+      <div class="lite-lineage-step">
+        <div class="lite-step-num">{idx + 1}</div>
+        <div class="lite-step-info">
+          <div class="lite-step-top">
+            <span class="lite-step-name font-mono">{node.name}</span>
+            <span class="lite-step-type">{node.type}</span>
+          </div>
+          <div class="lite-step-owner">归属: {node.owner} {#if node.rows}· {node.rows}{/if}</div>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .lite-lineage-graph {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-lineage-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-lineage-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-lineage-count { font-size: 11px; color: #86909c; }
+  .lite-lineage-body { padding: 12px 14px; }
+  .lite-lineage-step {
+    display: flex;
+    align-items: flex-start;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px dashed #e5e6eb;
+  }
+  .lite-lineage-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
+  .lite-step-num {
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    border-radius: 50%;
+    background: #165dff;
+    color: #ffffff;
+    font-size: 10px;
+    font-weight: 700;
+    margin-right: 10px;
+  }
+  .lite-step-info { flex: 1; }
+  .lite-step-top { display: flex; justify-content: space-between; align-items: center; }
+  .lite-step-name { font-weight: 600; color: #1d2129; }
+  .font-mono { font-family: monospace; }
+  .lite-step-type { font-size: 10px; background: #e8f3ff; color: #165dff; padding: 1px 6px; border-radius: 3px; }
+  .lite-step-owner { font-size: 11px; color: #86909c; margin-top: 2px; }
+</style>