@svadmin/lite 0.26.0 → 0.30.1

package/dist/components/LiteImportPreviewValidator.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  interface ValidationError {
+    row: number;
+    col: string;
+    value: string;
+    message: string;
+  }
+
+  interface Props {
+    title?: string;
+    totalRows?: number;
+    validRows?: number;
+    errors?: ValidationError[];
+    class?: string;
+  }
+
+  let {
+    title = '导入数据预检与错误定位',
+    totalRows = 100,
+    validRows = 98,
+    errors = [
+      { row: 14, col: 'mobile_phone', value: '138000', message: '手机号格式非法，必须为11位国内有效号码' },
+      { row: 42, col: 'email', value: 'invalid-email', message: '电子邮箱格式不合规' }
+    ],
+    class: className = '',
+  }: Props = $props();
+
+  const errorCount = $derived(errors.length);
+</script>
+
+<div
+  class="lite-preview-validator {className}"
+  data-svadmin-component="LiteImportPreviewValidator"
+  role="region"
+  aria-label="Import Preview Validator"
+>
+  <header class="lite-validator-header">
+    <h4 class="lite-validator-title">{title}</h4>
+    <div class="lite-stats-wrap">
+      <span class="lite-stat-total">总记录: {totalRows}</span>
+      <span class="lite-stat-valid">合格: {validRows}</span>
+      {#if errorCount > 0}
+        <span class="lite-stat-err">异常: {errorCount}</span>
+      {/if}
+    </div>
+  </header>
+
+  <div class="lite-validator-body">
+    {#if errorCount === 0}
+      <div class="lite-valid-notice">
+        ✓ 所有导入记录校验通过，未发现格式或必填项异常。
+      </div>
+    {:else}
+      <div class="lite-errors-list">
+        <div class="lite-err-notice">
+          发现 {errorCount} 处数据格式异常，建议修正后重新上传或选择忽略错误行入库。
+        </div>
+        <table class="lite-errors-table">
+          <thead>
+            <tr>
+              <th>数据行号</th>
+              <th>异常列</th>
+              <th>当前取值</th>
+              <th>失败原因说明</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each errors as err (err.row + err.col)}
+              <tr>
+                <td class="font-mono">第 {err.row} 行</td>
+                <td><code>{err.col}</code></td>
+                <td class="lite-err-val">{err.value}</td>
+                <td class="lite-err-msg">{err.message}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .lite-preview-validator {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-validator-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-validator-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-stats-wrap { display: flex; font-size: 11px; font-weight: 500; }
+  .lite-stats-wrap > * + * { margin-left: 8px; }
+  .lite-stat-total { color: #4e5969; }
+  .lite-stat-valid { color: #00b42a; }
+  .lite-stat-err { color: #f53f3f; }
+  .lite-validator-body { padding: 12px 14px; }
+  .lite-valid-notice {
+    padding: 10px;
+    background: #e8ffea;
+    color: #00b42a;
+    border-radius: 4px;
+    font-weight: 500;
+  }
+  .lite-err-notice {
+    padding: 8px 10px;
+    background: #ffece8;
+    color: #f53f3f;
+    border-radius: 4px;
+    font-size: 11px;
+    margin-bottom: 10px;
+  }
+  .lite-errors-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
+  .lite-errors-table th {
+    padding: 6px 10px;
+    background: #f2f3f5;
+    border-bottom: 1px solid #e5e6eb;
+    color: #4e5969;
+  }
+  .lite-errors-table td {
+    padding: 6px 10px;
+    border-bottom: 1px solid #f2f3f5;
+  }
+  .font-mono { font-family: monospace; font-weight: 600; }
+  code { font-family: monospace; color: #165dff; }
+  .lite-err-val { color: #f53f3f; font-family: monospace; }
+  .lite-err-msg { color: #4e5969; }
+</style>

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

@@ -0,0 +1,16 @@
+interface ValidationError {
+    row: number;
+    col: string;
+    value: string;
+    message: string;
+}
+interface Props {
+    title?: string;
+    totalRows?: number;
+    validRows?: number;
+    errors?: ValidationError[];
+    class?: string;
+}
+declare const LiteImportPreviewValidator: import("svelte").Component<Props, {}, "">;
+type LiteImportPreviewValidator = ReturnType<typeof LiteImportPreviewValidator>;
+export default LiteImportPreviewValidator;

package/dist/components/LiteJsonViewer.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  interface Props {
+    data: unknown;
+    initialDepth?: number;
+    title?: string;
+    class?: string;
+  }
+
+  let {
+    data,
+    initialDepth = 2,
+    title,
+    class: className = '',
+  }: Props = $props();
+
+  const formattedJson = $derived.by(() => {
+    try {
+      return JSON.stringify(data, null, 2);
+    } catch {
+      return String(data);
+    }
+  });
+
+  const itemCount = $derived.by(() => {
+    if (typeof data === 'object' && data !== null) {
+      return Array.isArray(data) ? `${data.length} items` : `${Object.keys(data).length} keys`;
+    }
+    return typeof data;
+  });
+</script>
+
+<div
+  class="lite-json-viewer {className}"
+  data-svadmin-component="LiteJsonViewer"
+  data-initial-depth={initialDepth}
+  role="region"
+  aria-label={title ?? 'JSON Viewer'}
+>
+  {#if title}
+    <header class="lite-json-header">
+      <h4 class="lite-json-title">{title}</h4>
+      <span class="lite-json-meta">{itemCount}</span>
+    </header>
+  {/if}
+
+  <div class="lite-json-body">
+    <div class="lite-json-details">
+      <div class="lite-json-summary">
+        <span>Payload Tree ({itemCount})</span>
+      </div>
+      <pre class="lite-json-code"><code>{formattedJson}</code></pre>
+    </div>
+  </div>
+</div>
+
+<style>
+  .lite-json-viewer {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #f7f8fa;
+    font-family: monospace;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-json-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    border-bottom: 1px solid #e5e6eb;
+    background: #ffffff;
+  }
+  .lite-json-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-json-meta { font-size: 11px; color: #86909c; }
+  .lite-json-body { padding: 10px 12px; max-height: 400px; overflow: auto; }
+  .lite-json-summary { cursor: pointer; color: #165dff; font-weight: 500; margin-bottom: 6px; outline: none; }
+  .lite-json-code {
+    margin: 0;
+    padding: 8px;
+    background: #ffffff;
+    border: 1px solid #e5e6eb;
+    border-radius: 4px;
+    color: #1d2129;
+    white-space: pre-wrap;
+    word-break: break-all;
+    line-height: 1.5;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    data: unknown;
+    initialDepth?: number;
+    title?: string;
+    class?: string;
+}
+declare const LiteJsonViewer: import("svelte").Component<Props, {}, "">;
+type LiteJsonViewer = ReturnType<typeof LiteJsonViewer>;
+export default LiteJsonViewer;

package/dist/components/LiteKeyboardShortcutsModal.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  export interface LiteShortcutItem {
+    label: string;
+    keys: string[];
+    category?: string;
+  }
+
+  interface Props {
+    shortcuts?: LiteShortcutItem[];
+    title?: string;
+    class?: string;
+  }
+
+  let {
+    shortcuts = [
+      { label: '全局搜索 / 命令面板', keys: ['Ctrl', 'K'], category: '导航' },
+      { label: '保存当前表单', keys: ['Ctrl', 'S'], category: '编辑' },
+      { label: '打开快捷键向导', keys: ['?'], category: '系统' },
+    ],
+    title = '快捷键总览',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-shortcuts-card {className}"
+  data-svadmin-component="LiteKeyboardShortcutsModal"
+  role="region"
+  aria-label={title}
+>
+  <h4 class="lite-shortcuts-title">{title}</h4>
+  <table class="lite-shortcuts-table">
+    <tbody>
+      {#each shortcuts as item, idx (idx)}
+        <tr class="lite-shortcut-row">
+          <td class="lite-shortcut-label">{item.label}</td>
+          <td class="lite-shortcut-keys">
+            {#each item.keys as k, kIdx (kIdx)}
+              <kbd class="lite-kbd">{k}</kbd>
+            {/each}
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .lite-shortcuts-card { border: 1px solid #e5e6eb; border-radius: 8px; background: #ffffff; padding: 16px; }
+  .lite-shortcuts-title { font-size: 14px; font-weight: 600; margin: 0 0 12px 0; color: #1d2129; }
+  .lite-shortcuts-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+  .lite-shortcut-row td { padding: 6px 8px; border-bottom: 1px solid #f2f3f5; }
+  .lite-shortcut-label { color: #1d2129; font-weight: 500; }
+  .lite-shortcut-keys { text-align: right; }
+  .lite-kbd { font-family: monospace; font-size: 11px; background: #f2f3f5; border: 1px solid #e5e6eb; border-radius: 4px; padding: 2px 6px; color: #4e5969; margin-left: 4px; }
+</style>

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

@@ -0,0 +1,13 @@
+export interface LiteShortcutItem {
+    label: string;
+    keys: string[];
+    category?: string;
+}
+interface Props {
+    shortcuts?: LiteShortcutItem[];
+    title?: string;
+    class?: string;
+}
+declare const LiteKeyboardShortcutsModal: import("svelte").Component<Props, {}, "">;
+type LiteKeyboardShortcutsModal = ReturnType<typeof LiteKeyboardShortcutsModal>;
+export default LiteKeyboardShortcutsModal;

package/dist/components/LiteKpiCard.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface TargetProgress {
+    current: number;
+    target: number;
+    label?: string;
+  }
+
+  interface Props {
+    title: string;
+    value: number | string;
+    prefix?: string;
+    suffix?: string;
+    subtitle?: string;
+    trendText?: string;
+    trendDirection?: 'up' | 'down' | 'neutral';
+    targetProgress?: TargetProgress;
+    sparklineData?: number[];
+    alertStatus?: 'normal' | 'warning' | 'danger';
+    alertMessage?: string;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    title,
+    value,
+    prefix = '',
+    suffix = '',
+    subtitle,
+    trendText,
+    trendDirection = 'neutral',
+    targetProgress,
+    sparklineData,
+    alertStatus = 'normal',
+    alertMessage,
+    class: className = '',
+    actions,
+    children,
+  }: Props = $props();
+
+  const formattedValue = $derived(
+    typeof value === 'number' ? value.toLocaleString('en-US') : String(value)
+  );
+
+  const progressPercent = $derived.by(() => {
+    if (!targetProgress || targetProgress.target <= 0) return 0;
+    const pct = (targetProgress.current / targetProgress.target) * 100;
+    return Math.max(0, Math.min(100, Math.round(pct)));
+  });
+
+  const sparklinePoints = $derived.by(() => {
+    if (!sparklineData || sparklineData.length < 2) return '';
+    const min = Math.min(...sparklineData);
+    const max = Math.max(...sparklineData);
+    const range = max - min || 1;
+    const width = 100;
+    const height = 30;
+    const padding = 2;
+
+    return sparklineData
+      .map((val, idx) => {
+        const x = padding + (idx / (sparklineData.length - 1)) * (width - padding * 2);
+        const y = height - padding - ((val - min) / range) * (height - padding * 2);
+        return `${x.toFixed(1)},${y.toFixed(1)}`;
+      })
+      .join(' ');
+  });
+</script>
+
+<div
+  class="lite-kpi-card lite-kpi-card-{alertStatus} {className}"
+  data-svadmin-component="LiteKpiCard"
+  role="region"
+  aria-label={title}
+>
+  <header class="lite-kpi-card-header">
+    <div class="lite-kpi-card-title-group">
+      <h4 class="lite-kpi-card-title">{title}</h4>
+      {#if subtitle}
+        <span class="lite-kpi-card-subtitle">{subtitle}</span>
+      {/if}
+    </div>
+    {#if actions}
+      <div class="lite-kpi-card-actions">{@render actions()}</div>
+    {/if}
+  </header>
+
+  <div class="lite-kpi-card-body">
+    <div class="lite-kpi-card-metric">
+      {#if prefix}<span class="lite-kpi-card-prefix">{prefix}</span>{/if}
+      <span class="lite-kpi-card-value">{formattedValue}</span>
+      {#if suffix}<span class="lite-kpi-card-suffix">{suffix}</span>{/if}
+    </div>
+
+    {#if trendText}
+      <div class="lite-kpi-card-trend lite-kpi-card-trend-{trendDirection}">
+        {#if trendDirection === 'up'}↑{:else if trendDirection === 'down'}↓{/if}
+        <span>{trendText}</span>
+      </div>
+    {/if}
+
+    {#if sparklinePoints}
+      <div class="lite-kpi-card-sparkline">
+        <svg viewBox="0 0 100 30" class="lite-kpi-sparkline-svg" aria-hidden="true">
+          <polyline points={sparklinePoints} fill="none" stroke="currentColor" stroke-width="2" />
+        </svg>
+      </div>
+    {/if}
+  </div>
+
+  {#if targetProgress}
+    <div class="lite-kpi-card-progress">
+      <div class="lite-kpi-progress-label">
+        <span>{targetProgress.label ?? 'Target progress'}</span>
+        <span class="lite-kpi-progress-pct">{progressPercent}%</span>
+      </div>
+      <div class="lite-kpi-progress-track">
+        <div class="lite-kpi-progress-bar" style="width: {progressPercent}%;"></div>
+      </div>
+    </div>
+  {/if}
+
+  {#if alertMessage && alertStatus !== 'normal'}
+    <div class="lite-kpi-card-alert lite-kpi-alert-{alertStatus}" role="alert">
+      <span>{alertMessage}</span>
+    </div>
+  {/if}
+
+  {#if children}
+    <div class="lite-kpi-card-extra">{@render children()}</div>
+  {/if}
+</div>
+
+<style>
+  .lite-kpi-card {
+    border: 1px solid #e5e6eb;
+    border-radius: 8px;
+    padding: 16px;
+    background: #ffffff;
+    box-sizing: border-box;
+  }
+  .lite-kpi-card-warning { border-color: #ffc766; background: #fffdf5; }
+  .lite-kpi-card-danger { border-color: #ffd8d2; background: #fff7f6; }
+  .lite-kpi-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
+  .lite-kpi-card-title { margin: 0; font-size: 13px; font-weight: 600; color: #4e5969; }
+  .lite-kpi-card-subtitle { font-size: 11px; color: #86909c; display: block; margin-top: 2px; }
+  .lite-kpi-card-body { display: flex; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
+  .lite-kpi-card-body > * + * { margin-left: 8px; }
+  .lite-kpi-card-metric { font-family: monospace; font-size: 24px; font-weight: 700; color: #1d2129; }
+  .lite-kpi-card-prefix, .lite-kpi-card-suffix { font-size: 13px; font-weight: 400; color: #86909c; margin: 0 2px; }
+  .lite-kpi-card-trend { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; }
+  .lite-kpi-card-trend > * + * { margin-left: 2px; }
+  .lite-kpi-card-trend-up { color: #00b42a; background: #e8ffea; }
+  .lite-kpi-card-trend-down { color: #f53f3f; background: #ffece8; }
+  .lite-kpi-card-trend-neutral { color: #4e5969; background: #f2f3f5; }
+  .lite-kpi-card-sparkline { margin-left: auto; width: 80px; height: 24px; color: #165dff; }
+  .lite-kpi-sparkline-svg { width: 100%; height: 100%; display: block; }
+  .lite-kpi-card-progress { margin-top: 8px; }
+  .lite-kpi-progress-label { display: flex; justify-content: space-between; font-size: 11px; color: #86909c; margin-bottom: 4px; }
+  .lite-kpi-progress-track { height: 4px; background: #f2f3f5; border-radius: 2px; overflow: hidden; }
+  .lite-kpi-progress-bar { height: 100%; background: #165dff; border-radius: 2px; }
+  .lite-kpi-card-alert { margin-top: 10px; padding: 6px 10px; border-radius: 4px; font-size: 12px; }
+  .lite-kpi-alert-warning { background: #fff7e8; color: #d46b08; border: 1px solid #ffd591; }
+  .lite-kpi-alert-danger { background: #fff1f0; color: #cf1322; border: 1px solid #ffa39e; }
+  .lite-kpi-card-extra { margin-top: 10px; border-top: 1px solid #f2f3f5; padding-top: 8px; }
+</style>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+interface TargetProgress {
+    current: number;
+    target: number;
+    label?: string;
+}
+interface Props {
+    title: string;
+    value: number | string;
+    prefix?: string;
+    suffix?: string;
+    subtitle?: string;
+    trendText?: string;
+    trendDirection?: 'up' | 'down' | 'neutral';
+    targetProgress?: TargetProgress;
+    sparklineData?: number[];
+    alertStatus?: 'normal' | 'warning' | 'danger';
+    alertMessage?: string;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+}
+declare const LiteKpiCard: import("svelte").Component<Props, {}, "">;
+type LiteKpiCard = ReturnType<typeof LiteKpiCard>;
+export default LiteKpiCard;

package/dist/components/LiteLiveStreamLogViewer.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  interface LogItem {
+    id: string;
+    timestamp: string;
+    level: string;
+    message: string;
+  }
+
+  interface Props {
+    title?: string;
+    logs?: LogItem[];
+    class?: string;
+  }
+
+  let {
+    title = '实时日志控制台',
+    logs = [
+      { id: '1', timestamp: '08:45:10', level: 'INFO', message: '[Gateway] Inbound HTTP POST /api/v1/orders/create (200 OK)' },
+      { id: '2', timestamp: '08:45:11', level: 'WARN', message: '[Redis] Cache miss on key "session:usr_9901"' },
+      { id: '3', timestamp: '08:45:12', level: 'ERROR', message: '[NotificationService] Third-party SMS webhook timed out' }
+    ],
+    class: className = '',
+  }: Props = $props();
+
+  function getLevelColor(lvl: string): string {
+    if (lvl === 'ERROR') return '#f53f3f';
+    if (lvl === 'WARN') return '#ff7d00';
+    return '#165dff';
+  }
+</script>
+
+<div
+  class="lite-log-viewer {className}"
+  data-svadmin-component="LiteLiveStreamLogViewer"
+  role="region"
+  aria-label="Live Stream Log Viewer"
+>
+  <header class="lite-log-header">
+    <h4 class="lite-log-title">{title}</h4>
+    <span class="lite-log-count">{logs.length} 条日志记录</span>
+  </header>
+
+  <div class="lite-log-console">
+    {#each logs as log (log.id)}
+      <div class="lite-log-line font-mono">
+        <span class="lite-log-time">{log.timestamp}</span>
+        <span class="lite-log-badge" style="color: {getLevelColor(log.level)};">[{log.level}]</span>
+        <span class="lite-log-msg">{log.message}</span>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .lite-log-viewer {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-log-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-log-count { font-size: 11px; color: #86909c; }
+  .lite-log-console {
+    background: #1e293b;
+    color: #f8fafc;
+    padding: 12px 14px;
+    font-size: 11px;
+    overflow-x: auto;
+  }
+  .lite-log-line { line-height: 1.6; }
+  .font-mono { font-family: monospace; }
+  .lite-log-time { color: #94a3b8; margin-right: 6px; }
+  .lite-log-badge { font-weight: 700; margin-right: 6px; }
+  .lite-log-msg { color: #f8fafc; }
+</style>

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

@@ -0,0 +1,14 @@
+interface LogItem {
+    id: string;
+    timestamp: string;
+    level: string;
+    message: string;
+}
+interface Props {
+    title?: string;
+    logs?: LogItem[];
+    class?: string;
+}
+declare const LiteLiveStreamLogViewer: import("svelte").Component<Props, {}, "">;
+type LiteLiveStreamLogViewer = ReturnType<typeof LiteLiveStreamLogViewer>;
+export default LiteLiveStreamLogViewer;