@svadmin/lite 0.27.0 → 0.30.1

package/dist/components/LiteSqlConsole.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  interface Column {
+    name: string;
+    type?: string;
+  }
+
+  interface Props {
+    title?: string;
+    query?: string;
+    columns?: Column[];
+    rows?: Record<string, string | number | null>[];
+    rowCount?: number;
+    executionTimeMs?: number;
+    class?: string;
+  }
+
+  let {
+    title = 'SQL 只读查询控制台',
+    query = 'SELECT id, tenant_id, name, created_at FROM sys_tenants LIMIT 10;',
+    columns = [
+      { name: 'id', type: 'uuid' },
+      { name: 'tenant_id', type: 'varchar' },
+      { name: 'name', type: 'varchar' },
+      { name: 'created_at', type: 'timestamp' }
+    ],
+    rows = [
+      { id: '1a2b-3c4d', tenant_id: 't_enterprise', name: '上海华东研发中心', created_at: '2026-11-10 10:00:00' },
+      { id: '5e6f-7g8h', tenant_id: 't_standard', name: '北京华北创新科技', created_at: '2026-11-11 14:30:00' }
+    ],
+    rowCount = 2,
+    executionTimeMs = 12,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-sql-console {className}"
+  data-svadmin-component="LiteSqlConsole"
+  role="region"
+  aria-label="SQL Console"
+>
+  <header class="lite-sql-header">
+    <div class="lite-sql-title-wrap">
+      <span class="lite-sql-tag">READONLY</span>
+      <h4 class="lite-sql-title">{title}</h4>
+    </div>
+    <span class="lite-sql-stats">{rowCount} 行记录 · 耗时 {executionTimeMs}ms</span>
+  </header>
+
+  <div class="lite-sql-query-box">
+    <code>{query}</code>
+  </div>
+
+  <div class="lite-sql-table-wrap">
+    <table class="lite-sql-table">
+      <thead>
+        <tr>
+          {#each columns as col (col)}
+            <th>{col.name} <span class="lite-sql-col-type">({col.type ?? 'text'})</span></th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each rows as row, rIdx (rIdx)}
+          <tr>
+            {#each columns as col (col)}
+              <td>{row[col.name] ?? 'NULL'}</td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  .lite-sql-console {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-sql-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-sql-title-wrap { display: flex; align-items: center; }
+  .lite-sql-title-wrap > * + * { margin-left: 8px; }
+  .lite-sql-tag {
+    font-size: 10px;
+    font-weight: 700;
+    color: #165dff;
+    background: #e8f3ff;
+    padding: 2px 6px;
+    border-radius: 4px;
+  }
+  .lite-sql-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-sql-stats { font-size: 11px; color: #86909c; font-family: monospace; }
+  .lite-sql-query-box {
+    padding: 10px 14px;
+    background: #272e3b;
+    color: #f2f3f5;
+    font-family: monospace;
+    font-size: 11px;
+    overflow-x: auto;
+  }
+  .lite-sql-table-wrap { overflow-x: auto; }
+  .lite-sql-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
+  .lite-sql-table th {
+    padding: 8px 12px;
+    background: #f2f3f5;
+    border-bottom: 1px solid #e5e6eb;
+    color: #4e5969;
+    font-weight: 600;
+  }
+  .lite-sql-col-type { font-size: 10px; color: #86909c; font-weight: normal; }
+  .lite-sql-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f2f3f5;
+    color: #1d2129;
+    font-family: monospace;
+  }
+</style>

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

@@ -0,0 +1,16 @@
+interface Column {
+    name: string;
+    type?: string;
+}
+interface Props {
+    title?: string;
+    query?: string;
+    columns?: Column[];
+    rows?: Record<string, string | number | null>[];
+    rowCount?: number;
+    executionTimeMs?: number;
+    class?: string;
+}
+declare const LiteSqlConsole: import("svelte").Component<Props, {}, "">;
+type LiteSqlConsole = ReturnType<typeof LiteSqlConsole>;
+export default LiteSqlConsole;

package/dist/components/LiteSystemCapacityForecastCard.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  interface Props {
+    resourceName?: string;
+    currentUsage?: number;
+    hardLimit?: number;
+    unit?: string;
+    estimatedDaysRemaining?: number;
+    class?: string;
+  }
+
+  let {
+    resourceName = 'PostgreSQL 云数据库存储空间',
+    currentUsage = 920,
+    hardLimit = 1000,
+    unit = 'GB',
+    estimatedDaysRemaining = 14,
+    class: className = '',
+  }: Props = $props();
+
+  const pct = $derived(hardLimit > 0 ? Math.min(100, Math.round((currentUsage / hardLimit) * 100)) : 0);
+</script>
+
+<div
+  class="lite-capacity-card {className}"
+  data-svadmin-component="LiteSystemCapacityForecastCard"
+  role="region"
+  aria-label="System Capacity Forecast"
+>
+  <header class="lite-cap-header">
+    <div>
+      <span class="lite-cap-label">容量趋势预测</span>
+      <h4 class="lite-cap-name">{resourceName}</h4>
+    </div>
+    <span class="lite-cap-countdown">预计 {estimatedDaysRemaining} 天后达上限</span>
+  </header>
+
+  <div class="lite-cap-body">
+    <div class="lite-cap-metrics">
+      <span class="lite-cap-val font-mono">{currentUsage}</span>
+      <span class="lite-cap-max">/ {hardLimit} {unit} ({pct}%)</span>
+    </div>
+    <div class="lite-cap-track">
+      <div
+        class="lite-cap-bar"
+        class:lite-bar-warn={pct >= 75 && pct < 90}
+        class:lite-bar-danger={pct >= 90}
+        style="width: {pct}%;"
+      ></div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .lite-capacity-card {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-cap-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-cap-label { font-size: 10px; color: #86909c; }
+  .lite-cap-name { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-cap-countdown {
+    font-size: 10px;
+    font-weight: 600;
+    color: #f53f3f;
+    background: #ffece8;
+    padding: 2px 6px;
+    border-radius: 3px;
+  }
+  .lite-cap-body { padding: 12px 14px; }
+  .lite-cap-metrics { margin-bottom: 6px; font-size: 12px; }
+  .lite-cap-val { font-size: 18px; font-weight: 700; color: #1d2129; }
+  .font-mono { font-family: monospace; }
+  .lite-cap-max { color: #86909c; margin-left: 4px; }
+  .lite-cap-track { height: 6px; background: #f2f3f5; border-radius: 3px; overflow: hidden; }
+  .lite-cap-bar { height: 100%; background: #165dff; border-radius: 3px; }
+  .lite-bar-warn { background: #ff7d00; }
+  .lite-bar-danger { background: #f53f3f; }
+</style>

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

@@ -0,0 +1,11 @@
+interface Props {
+    resourceName?: string;
+    currentUsage?: number;
+    hardLimit?: number;
+    unit?: string;
+    estimatedDaysRemaining?: number;
+    class?: string;
+}
+declare const LiteSystemCapacityForecastCard: import("svelte").Component<Props, {}, "">;
+type LiteSystemCapacityForecastCard = ReturnType<typeof LiteSystemCapacityForecastCard>;
+export default LiteSystemCapacityForecastCard;

package/dist/components/LiteSystemHealthCheckDashboard.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  interface ServiceItem {
+    id: string;
+    name: string;
+    endpoint: string;
+    status: 'healthy' | 'degraded' | 'unhealthy';
+    latencyMs: number;
+    details?: string;
+  }
+
+  interface Props {
+    title?: string;
+    environment?: string;
+    version?: string;
+    services?: ServiceItem[];
+    class?: string;
+  }
+
+  let {
+    title = '系统链路健康自检大盘',
+    environment = 'production-east-01',
+    version = 'v2.8.4-enterprise',
+    services = [
+      { id: 's1', name: 'PostgreSQL 主数据库集群', endpoint: 'db.internal.svc:5432', status: 'healthy', latencyMs: 3, details: '连接池活跃度 18/100' },
+      { id: 's2', name: 'Redis 分布式缓存与锁', endpoint: 'redis-master.internal:6379', status: 'healthy', latencyMs: 1, details: '命中率 99.4%' },
+      { id: 's3', name: 'MinIO / S3 企业对象存储', endpoint: 's3.oss-cn-shanghai.internal', status: 'healthy', latencyMs: 18, details: '读写探测成功' },
+      { id: 's4', name: 'SupaAuth / SSO 统一鉴权', endpoint: 'auth.svadmin.internal/v1', status: 'healthy', latencyMs: 12, details: 'JWT 验签通畅' },
+      { id: 's5', name: 'RabbitMQ 异步事件消息队列', endpoint: 'mq-node1.cluster.internal:5672', status: 'degraded', latencyMs: 145, details: '死信队列堆积 42 条' }
+    ],
+    class: className = '',
+  }: Props = $props();
+
+  const healthyCount = $derived(services.filter(s => s.status === 'healthy').length);
+  const avgLatency = $derived(
+    services.length > 0 ? Math.round(services.reduce((a, b) => a + b.latencyMs, 0) / services.length) : 0
+  );
+</script>
+
+<div
+  class="lite-health-dash {className}"
+  data-svadmin-component="LiteSystemHealthCheckDashboard"
+  role="region"
+  aria-label="System Health Dashboard"
+>
+  <header class="lite-health-header">
+    <div>
+      <h4 class="lite-health-title">{title}</h4>
+      <span class="lite-health-meta">环境: {environment} · 版本: {version}</span>
+    </div>
+    <div class="lite-health-kpi">
+      <span class="lite-kpi-pill">健康组件: <strong>{healthyCount}/{services.length}</strong></span>
+      <span class="lite-kpi-pill">平均延时: <strong class="font-mono">{avgLatency}ms</strong></span>
+    </div>
+  </header>
+
+  <div class="lite-health-table-wrap">
+    <table class="lite-health-table">
+      <thead>
+        <tr>
+          <th>服务组件名称</th>
+          <th>连接端点</th>
+          <th>链路状态</th>
+          <th>往返延时</th>
+          <th>检测指标详情</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each services as s (s.id)}
+          <tr>
+            <td class="lite-td-srvname">{s.name}</td>
+            <td class="lite-td-endpoint font-mono">{s.endpoint}</td>
+            <td>
+              <span
+                class="lite-status-pill"
+                class:lite-pill-healthy={s.status === 'healthy'}
+                class:lite-pill-warn={s.status === 'degraded'}
+                class:lite-pill-err={s.status === 'unhealthy'}
+              >
+                {s.status === 'healthy' ? '运行健康' : s.status === 'degraded' ? '性能亚健康' : '链路故障'}
+              </span>
+            </td>
+            <td class="lite-td-latency font-mono">{s.latencyMs} ms</td>
+            <td class="lite-td-detail">{s.details ?? '—'}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  .lite-health-dash {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-health-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-health-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-health-meta { font-size: 11px; color: #86909c; display: block; margin-top: 2px; }
+  .lite-health-kpi { display: flex; }
+  .lite-health-kpi > * + * { margin-left: 8px; }
+  .lite-kpi-pill { font-size: 11px; background: #ffffff; border: 1px solid #e5e6eb; padding: 2px 8px; border-radius: 4px; color: #4e5969; }
+  .lite-kpi-pill strong { color: #165dff; }
+  .lite-health-table-wrap { overflow-x: auto; }
+  .lite-health-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
+  .lite-health-table th {
+    padding: 8px 12px;
+    background: #f2f3f5;
+    border-bottom: 1px solid #e5e6eb;
+    color: #4e5969;
+    font-weight: 600;
+  }
+  .lite-health-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f2f3f5;
+    color: #1d2129;
+  }
+  .lite-td-srvname { font-weight: 600; }
+  .font-mono { font-family: monospace; }
+  .lite-td-endpoint { color: #4e5969; }
+  .lite-status-pill {
+    display: inline-block;
+    padding: 1px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 600;
+  }
+  .lite-pill-healthy { background: #e8ffea; color: #00b42a; }
+  .lite-pill-warn { background: #fff7e8; color: #ff7d00; }
+  .lite-pill-err { background: #ffece8; color: #f53f3f; }
+  .lite-td-latency { font-weight: 600; }
+  .lite-td-detail { color: #86909c; }
+</style>

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

@@ -0,0 +1,18 @@
+interface ServiceItem {
+    id: string;
+    name: string;
+    endpoint: string;
+    status: 'healthy' | 'degraded' | 'unhealthy';
+    latencyMs: number;
+    details?: string;
+}
+interface Props {
+    title?: string;
+    environment?: string;
+    version?: string;
+    services?: ServiceItem[];
+    class?: string;
+}
+declare const LiteSystemHealthCheckDashboard: import("svelte").Component<Props, {}, "">;
+type LiteSystemHealthCheckDashboard = ReturnType<typeof LiteSystemHealthCheckDashboard>;
+export default LiteSystemHealthCheckDashboard;

package/dist/components/LiteTableAggregationFooter.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  interface AggItem {
+    label: string;
+    subtotal: string | number;
+    grandTotal: string | number;
+  }
+
+  interface Props {
+
+    aggregations?: AggItem[];
+    selectedCount?: number;
+    totalCount?: number;
+    class?: string;
+  }
+
+  let {
+
+    aggregations = [
+      { label: '订单总金额 (¥)', subtotal: '¥ 128,450.00', grandTotal: '¥ 1,489,200.00' },
+      { label: '已结算税额 (¥)', subtotal: '¥ 11,560.50', grandTotal: '¥ 134,028.00' },
+      { label: '商品总件数', subtotal: '450 件', grandTotal: '5,200 件' }
+    ],
+    selectedCount = 12,
+    totalCount = 140,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-agg-footer {className}"
+  data-svadmin-component="LiteTableAggregationFooter"
+  role="region"
+  aria-label="Table Aggregation Footer"
+>
+  <div class="lite-agg-left">
+    <span class="lite-agg-selection">已选 <strong class="lite-count">{selectedCount}</strong> 项 / 共 {totalCount} 条记录</span>
+  </div>
+
+  <div class="lite-agg-right">
+    {#each aggregations as agg (agg.label)}
+      <div class="lite-agg-cell">
+        <span class="lite-agg-label">{agg.label}</span>
+        <div class="lite-agg-vals">
+          <span class="lite-val-sub">选中小计: <strong>{agg.subtotal}</strong></span>
+          <span class="lite-val-total">全表合计: <strong>{agg.grandTotal}</strong></span>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .lite-agg-footer {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #f7f8fa;
+    padding: 10px 14px;
+    font-size: 11px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .lite-agg-footer > * + * { margin-left: 12px; }
+  .lite-agg-left { color: #4e5969; }
+  .lite-count { color: #165dff; }
+  .lite-agg-right { display: flex; align-items: center; flex-wrap: wrap; }
+  .lite-agg-right > * + * { margin-left: 16px; }
+  .lite-agg-cell { display: flex; flex-direction: column; text-align: right; }
+  .lite-agg-cell > * + * { margin-top: 2px; }
+  .lite-agg-label { font-size: 10px; color: #86909c; font-weight: 500; }
+  .lite-agg-vals { display: flex; font-family: monospace; font-size: 11px; }
+  .lite-agg-vals > * + * { margin-left: 10px; }
+  .lite-val-sub strong { color: #165dff; }
+  .lite-val-total strong { color: #1d2129; }
+</style>

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

@@ -0,0 +1,14 @@
+interface AggItem {
+    label: string;
+    subtotal: string | number;
+    grandTotal: string | number;
+}
+interface Props {
+    aggregations?: AggItem[];
+    selectedCount?: number;
+    totalCount?: number;
+    class?: string;
+}
+declare const LiteTableAggregationFooter: import("svelte").Component<Props, {}, "">;
+type LiteTableAggregationFooter = ReturnType<typeof LiteTableAggregationFooter>;
+export default LiteTableAggregationFooter;

package/dist/components/LiteTenantContextSwitcher.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  export interface TenantRole {
+    id: string;
+    name: string;
+    isPrimary?: boolean;
+  }
+
+  export interface TenantItem {
+    id: string;
+    name: string;
+    code?: string;
+    type?: 'group' | 'subsidiary' | 'division' | 'store' | 'workspace';
+    logo?: string;
+    tier?: 'free' | 'pro' | 'enterprise';
+    roles?: (TenantRole | string)[];
+    status?: 'active' | 'suspended' | 'trial';
+    memberCount?: number;
+    description?: string;
+    parentId?: string;
+  }
+
+  interface Props {
+    currentTenantId?: string;
+    tenants?: TenantItem[];
+    userRole?: string;
+    class?: string;
+  }
+
+  let {
+    currentTenantId = 'tenant-corp-01',
+    tenants = [
+      { id: 'tenant-corp-01', name: '星谷数智总集团', code: 'HQ-GLOBAL', type: 'group', tier: 'enterprise' },
+      { id: 'tenant-east-02', name: '华东大区创新科技中心', code: 'DIV-EAST', type: 'subsidiary', tier: 'enterprise' },
+    ],
+    userRole = '全局系统主管',
+    class: className = '',
+  }: Props = $props();
+
+  const currentTenant = $derived(
+    tenants.find((t) => t.id === currentTenantId) ?? tenants[0]
+  );
+</script>
+
+<div
+  class="lite-tenant-switcher {className}"
+  data-svadmin-component="LiteTenantContextSwitcher"
+  role="region"
+  aria-label="Tenant Context Switcher"
+>
+  <div class="lite-tenant-trigger">
+    <div class="lite-tenant-badge">
+      <span class="lite-tenant-icon">🏢</span>
+    </div>
+    <div class="lite-tenant-info">
+      <div class="lite-tenant-name-row">
+        <span class="lite-tenant-name">{currentTenant?.name ?? '当前租户'}</span>
+        {#if currentTenant?.tier}
+          <span class="lite-tier-tag">{currentTenant.tier}</span>
+        {/if}
+      </div>
+      <span class="lite-tenant-code">{currentTenant?.code ?? userRole}</span>
+    </div>
+    <span class="lite-caret">▼</span>
+  </div>
+
+  <div class="lite-tenant-noscript-list">
+    <span class="lite-list-title">可用组织与工作区 (SSR 降级静态展示):</span>
+    <ul class="lite-tenants-ul">
+      {#each tenants as t (t.id)}
+        <li class="lite-tenant-li" class:lite-tenant-active={t.id === currentTenantId}>
+          <span class="lite-tenant-bullet">•</span>
+          <span class="lite-tenant-li-name">{t.name}</span>
+          {#if t.code}<span class="lite-tenant-li-code">({t.code})</span>{/if}
+          {#if t.id === currentTenantId}<span class="lite-active-mark">[当前]</span>{/if}
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>
+
+<style>
+  .lite-tenant-switcher {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+    padding: 8px 12px;
+  }
+  .lite-tenant-trigger {
+    display: flex;
+    align-items: center;
+    padding-bottom: 8px;
+    border-bottom: 1px dashed #e5e6eb;
+  }
+  .lite-tenant-badge {
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    background: #f2f3f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    margin-right: 8px;
+  }
+  .lite-tenant-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .lite-tenant-name-row {
+    display: flex;
+    align-items: center;
+  }
+  .lite-tenant-name-row > * + * { margin-left: 6px; }
+  .lite-tenant-name {
+    font-weight: 600;
+    color: #1d2129;
+    margin-right: 6px;
+  }
+  .lite-tier-tag {
+    font-size: 9px;
+    background: #e8f3ff;
+    color: #165dff;
+    padding: 1px 4px;
+    border-radius: 2px;
+    text-transform: uppercase;
+  }
+  .lite-tenant-code {
+    font-size: 10px;
+    color: #86909c;
+  }
+  .lite-caret {
+    font-size: 10px;
+    color: #86909c;
+    margin-left: 8px;
+  }
+  .lite-tenant-noscript-list {
+    margin-top: 6px;
+    font-size: 11px;
+    color: #4e5969;
+  }
+  .lite-list-title {
+    font-size: 10px;
+    color: #86909c;
+  }
+  .lite-tenants-ul {
+    list-style: none;
+    padding: 0;
+    margin: 4px 0 0;
+  }
+  .lite-tenant-li {
+    display: flex;
+    align-items: center;
+    padding: 2px 0;
+  }
+  .lite-tenant-bullet {
+    margin-right: 4px;
+  }
+  .lite-tenant-li-code {
+    margin-left: 4px;
+  }
+  .lite-active-mark {
+    margin-left: 4px;
+    font-size: 10px;
+    color: #165dff;
+  }
+  .lite-tenant-active {
+    color: #165dff;
+    font-weight: 600;
+  }
+</style>