@svadmin/lite 0.26.0 → 0.30.1

package/dist/components/LiteAuditTrailInspector.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  export interface AuditEventItem {
+    id: string;
+    timestamp: string;
+    actor: { name: string; ip?: string; role?: string };
+    action: string;
+    actionLabel: string;
+    resource: string;
+    severity?: 'info' | 'warning' | 'critical';
+    status: 'success' | 'failure' | 'blocked';
+    traceId?: string;
+  }
+
+  interface Props {
+    events?: AuditEventItem[];
+    title?: string;
+    class?: string;
+  }
+
+  let {
+    events = [
+      {
+        id: 'evt-aud-1091',
+        timestamp: '2026-11-12 10:24:18',
+        actor: { name: '李思远 (运营主管)', ip: '192.168.10.42', role: 'SecOps Auditor' },
+        action: 'tenant_switch',
+        actionLabel: '切换工作区租户',
+        resource: 'TenantContext',
+        severity: 'info',
+        status: 'success',
+        traceId: 'trc-9821-fa44-a1',
+      },
+      {
+        id: 'evt-aud-1090',
+        timestamp: '2026-11-12 09:58:30',
+        actor: { name: '赵宏 (财务总监)', ip: '10.8.0.12', role: 'Finance Admin' },
+        action: 'permission_grant',
+        actionLabel: '跨组织提权审批',
+        resource: 'RolePermission',
+        severity: 'critical',
+        status: 'success',
+        traceId: 'trc-8820-cb91-e4',
+      },
+    ],
+    title = '全局操作审计追踪中心 (SSR 降级表格)',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-audit-inspector {className}"
+  data-svadmin-component="LiteAuditTrailInspector"
+  role="region"
+  aria-label="Audit Trail Inspector"
+>
+  <header class="lite-audit-header">
+    <div class="lite-audit-title-row">
+      <span class="lite-shield-icon">🛡️</span>
+      <h4 class="lite-audit-title">{title}</h4>
+    </div>
+    <span class="lite-audit-count">共 {events.length} 条审计日志</span>
+  </header>
+
+  <div class="lite-audit-table-wrap">
+    <table class="lite-audit-table">
+      <thead>
+        <tr>
+          <th>时间</th>
+          <th>操作人</th>
+          <th>动作与资源</th>
+          <th>级别</th>
+          <th>执行状态</th>
+          <th>追踪链路</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each events as evt (evt.id)}
+          <tr>
+            <td class="font-mono">{evt.timestamp}</td>
+            <td>
+              <span class="lite-actor-name">{evt.actor.name}</span>
+              {#if evt.actor.ip}<span class="lite-actor-ip font-mono">({evt.actor.ip})</span>{/if}
+            </td>
+            <td>
+              <span class="lite-action-label">{evt.actionLabel}</span>
+              <span class="lite-target-res">[{evt.resource}]</span>
+            </td>
+            <td>
+              <span
+                class="lite-sev-badge"
+                class:lite-sev-critical={evt.severity === 'critical'}
+                class:lite-sev-warning={evt.severity === 'warning'}
+                class:lite-sev-info={evt.severity === 'info'}
+              >
+                {evt.severity ?? 'info'}
+              </span>
+            </td>
+            <td>
+              <span
+                class="lite-status-badge"
+                class:lite-status-blocked={evt.status === 'blocked'}
+                class:lite-status-success={evt.status === 'success'}
+              >
+                {evt.status}
+              </span>
+            </td>
+            <td class="font-mono text-muted">{evt.traceId ?? '-'}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  .lite-audit-inspector {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-audit-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-audit-title-row { display: flex; align-items: center; }
+  .lite-shield-icon { font-size: 14px; margin-right: 6px; }
+  .lite-audit-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-audit-count { font-size: 11px; color: #86909c; }
+  .lite-audit-table-wrap { overflow-x: auto; }
+  .lite-audit-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    text-align: left;
+  }
+  .lite-audit-table th, .lite-audit-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f2f3f5;
+  }
+  .lite-audit-table th { background: #fafafa; font-weight: 600; color: #4e5969; font-size: 11px; }
+  .font-mono { font-family: monospace; font-size: 11px; }
+  .text-muted { color: #86909c; }
+  .lite-actor-name { font-weight: 500; color: #1d2129; }
+  .lite-actor-ip { font-size: 10px; color: #86909c; margin-left: 4px; }
+  .lite-action-label { font-weight: 500; color: #165dff; }
+  .lite-target-res { font-size: 10px; color: #86909c; margin-left: 4px; }
+  .lite-sev-badge {
+    font-size: 10px;
+    padding: 1px 4px;
+    border-radius: 2px;
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+  .lite-sev-critical { background: #ffece8; color: #f53f3f; }
+  .lite-sev-warning { background: #fff7e8; color: #ff7d00; }
+  .lite-sev-info { background: #e8f3ff; color: #165dff; }
+  .lite-status-badge { font-size: 11px; font-weight: 500; }
+  .lite-status-success { color: #00b42a; }
+  .lite-status-blocked { color: #f53f3f; font-weight: 600; }
+</style>

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

@@ -0,0 +1,23 @@
+export interface AuditEventItem {
+    id: string;
+    timestamp: string;
+    actor: {
+        name: string;
+        ip?: string;
+        role?: string;
+    };
+    action: string;
+    actionLabel: string;
+    resource: string;
+    severity?: 'info' | 'warning' | 'critical';
+    status: 'success' | 'failure' | 'blocked';
+    traceId?: string;
+}
+interface Props {
+    events?: AuditEventItem[];
+    title?: string;
+    class?: string;
+}
+declare const LiteAuditTrailInspector: import("svelte").Component<Props, {}, "">;
+type LiteAuditTrailInspector = ReturnType<typeof LiteAuditTrailInspector>;
+export default LiteAuditTrailInspector;

package/dist/components/LiteBillingInvoiceDrawer.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  interface BillItem {
+    name: string;
+    amount: string | number;
+  }
+
+  interface Props {
+    invoiceNo?: string;
+    period?: string;
+    totalAmount?: string | number;
+    status?: string;
+    items?: BillItem[];
+    downloadUrl?: string;
+    class?: string;
+  }
+
+  let {
+    invoiceNo = 'INV-202611-001',
+    period = '2026-10',
+    totalAmount = '¥12,500',
+    status = 'paid',
+    items = [
+      { name: 'SaaS Monthly License', amount: '¥10,000' },
+      { name: 'Extra Storage Usage', amount: '¥2,500' },
+    ],
+    downloadUrl,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-invoice-card {className}"
+  data-svadmin-component="LiteBillingInvoiceDrawer"
+  role="region"
+  aria-label="Billing Invoice Details"
+>
+  <header class="lite-inv-header">
+    <div>
+      <span class="lite-inv-no">账单 #{invoiceNo}</span>
+      <span class="lite-inv-period">({period})</span>
+    </div>
+    <span class="lite-inv-status lite-status-{status.toLowerCase()}">{status.toUpperCase()}</span>
+  </header>
+
+  <div class="lite-inv-body">
+    <div class="lite-inv-total">
+      <span class="lite-total-label">结算总金额:</span>
+      <strong class="lite-total-val">{totalAmount}</strong>
+    </div>
+
+    {#if items.length > 0}
+      <ul class="lite-inv-items">
+        {#each items as item (item.name)}
+          <li>
+            <span>{item.name}</span>
+            <span class="lite-item-amt">{item.amount}</span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
+    {#if downloadUrl}
+      <div class="lite-inv-action">
+        <a href={downloadUrl} class="lite-inv-download">下载发票 (PDF)</a>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .lite-invoice-card {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-inv-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-inv-no { font-weight: 700; font-family: monospace; color: #1d2129; }
+  .lite-inv-period { color: #86909c; font-size: 11px; margin-left: 4px; }
+  .lite-inv-status { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; font-family: monospace; }
+  .lite-status-paid { background: #e8ffea; color: #00b42a; }
+  .lite-status-pending { background: #fff7e8; color: #ff7d00; }
+  .lite-inv-body { padding: 12px 14px; }
+  .lite-inv-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed #e5e6eb; }
+  .lite-total-label { color: #4e5969; }
+  .lite-total-val { font-size: 16px; color: #165dff; font-family: monospace; }
+  .lite-inv-items { list-style: none; margin: 0 0 10px; padding: 0; }
+  .lite-inv-items li { display: flex; justify-content: space-between; padding: 4px 0; color: #4e5969; font-size: 11px; }
+  .lite-item-amt { font-family: monospace; font-weight: 600; color: #1d2129; }
+  .lite-inv-action { text-align: right; margin-top: 8px; }
+  .lite-inv-download { display: inline-block; padding: 4px 10px; background: #165dff; color: #ffffff; text-decoration: none; border-radius: 4px; font-weight: 500; font-size: 11px; }
+</style>

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/LiteContextMenu.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  export interface LiteContextMenuItem {
+    key: string;
+    label: string;
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    divider?: boolean;
+    href?: string;
+  }
+
+  interface Props {
+    items: LiteContextMenuItem[];
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    items = [],
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-context-menu-wrapper {className}"
+  data-svadmin-component="LiteContextMenu"
+>
+  <div class="lite-context-target">
+    {#if children}{@render children()}{/if}
+  </div>
+
+  {#if items.length > 0}
+    <ul class="lite-context-menu-list" role="menu">
+      {#each items as item (item.key)}
+        {#if item.divider}
+          <li class="lite-context-divider" role="separator"></li>
+        {:else}
+          <li
+            class="lite-context-item"
+            class:lite-context-danger={item.danger}
+            class:lite-context-disabled={item.disabled}
+            role="menuitem"
+          >
+            {#if item.href && !item.disabled}
+              <a href={item.href} class="lite-context-link">
+                <span>{item.label}</span>
+                {#if item.shortcut}<kbd>{item.shortcut}</kbd>{/if}
+              </a>
+            {:else}
+              <span class="lite-context-label">{item.label}</span>
+              {#if item.shortcut}<kbd>{item.shortcut}</kbd>{/if}
+            {/if}
+          </li>
+        {/if}
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .lite-context-menu-wrapper {
+    position: relative;
+    display: block;
+  }
+  .lite-context-menu-list {
+    margin: 8px 0 0;
+    padding: 4px;
+    list-style: none;
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+    display: inline-flex;
+    flex-wrap: wrap;
+  }
+  .lite-context-menu-list > * + * { margin-left: 4px; }
+  .lite-context-divider {
+    width: 1px;
+    height: 16px;
+    background: #e5e6eb;
+    align-self: center;
+    margin: 0 4px;
+  }
+  .lite-context-item {
+    font-size: 12px;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 8px;
+    color: #1d2129;
+    background: #f7f8fa;
+  }
+  .lite-context-item > * + * { margin-left: 6px; }
+  .lite-context-link {
+    color: inherit;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+  }
+  .lite-context-link > * + * { margin-left: 6px; }
+  .lite-context-danger { color: #f53f3f; background: #ffece8; }
+  .lite-context-disabled { opacity: 0.5; pointer-events: none; }
+  kbd {
+    font-size: 10px;
+    font-family: monospace;
+    background: #e5e6eb;
+    padding: 1px 4px;
+    border-radius: 3px;
+    color: #4e5969;
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+export interface LiteContextMenuItem {
+    key: string;
+    label: string;
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    divider?: boolean;
+    href?: string;
+}
+interface Props {
+    items: LiteContextMenuItem[];
+    class?: string;
+    children?: Snippet;
+}
+declare const LiteContextMenu: import("svelte").Component<Props, {}, "">;
+type LiteContextMenu = ReturnType<typeof LiteContextMenu>;
+export default LiteContextMenu;