@svadmin/lite 0.26.0 → 0.30.1

package/dist/components/LiteTenantQuotasMatrix.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  interface QuotaItem {
+    id: string;
+    resourceName: string;
+    used: number;
+    limit: number;
+    unit: string;
+    status?: 'normal' | 'warning' | 'exhausted';
+  }
+
+  interface Props {
+    tenantName?: string;
+    tierName?: string;
+    quotas?: QuotaItem[];
+    class?: string;
+  }
+
+  let {
+    tenantName = '上海创智多租户研发中心',
+    tierName = '旗舰尊享版 (Enterprise Tier)',
+    quotas = [
+      { id: 'q1', resourceName: 'API 请求吞吐', used: 840000, limit: 1000000, unit: 'req/天', status: 'normal' },
+      { id: 'q2', resourceName: '分布式对象存储', used: 480, limit: 500, unit: 'GB', status: 'warning' },
+      { id: 'q3', resourceName: '组织席位数', used: 120, limit: 120, unit: '席位', status: 'exhausted' },
+      { id: 'q4', resourceName: 'AI 智能算力点', used: 3200, limit: 10000, unit: '点', status: 'normal' }
+    ],
+    class: className = '',
+  }: Props = $props();
+
+  function calcPct(u: number, l: number): number {
+    if (l <= 0) return 0;
+    return Math.min(100, Math.round((u / l) * 100));
+  }
+</script>
+
+<div
+  class="lite-tenant-quotas {className}"
+  data-svadmin-component="LiteTenantQuotasMatrix"
+  role="region"
+  aria-label="Tenant Quotas Matrix"
+>
+  <header class="lite-quotas-header">
+    <div>
+      <h4 class="lite-quotas-tenant">{tenantName}</h4>
+      <span class="lite-quotas-tier">{tierName}</span>
+    </div>
+  </header>
+
+  <div class="lite-quotas-grid">
+    {#each quotas as q (q.id)}
+      {@const pct = calcPct(q.used, q.limit)}
+      <div class="lite-quota-card">
+        <div class="lite-card-top">
+          <span class="lite-card-name">{q.resourceName}</span>
+          <span class="lite-card-usage">{q.used.toLocaleString()} / {q.limit.toLocaleString()} {q.unit}</span>
+        </div>
+        <div class="lite-card-track">
+          <div
+            class="lite-card-bar"
+            class:lite-bar-warn={pct >= 85 && pct < 100}
+            class:lite-bar-danger={pct >= 100}
+            style="width: {pct}%;"
+          ></div>
+        </div>
+        <div class="lite-card-bottom">
+          <span class="lite-card-pct">{pct}% 已用</span>
+          {#if pct >= 100}
+            <span class="lite-card-state text-danger">已达硬配额上限</span>
+          {:else if pct >= 85}
+            <span class="lite-card-state text-warn">接近用量预警线</span>
+          {:else}
+            <span class="lite-card-state text-ok">配额容量充裕</span>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .lite-tenant-quotas {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-quotas-header {
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-quotas-tenant { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-quotas-tier { font-size: 11px; color: #165dff; font-weight: 500; display: block; margin-top: 2px; }
+  .lite-quotas-grid { padding: 12px 14px; overflow: hidden; }
+  .lite-quotas-grid .lite-quota-card { float: left; width: calc(50% - 6px); margin: 0 12px 12px 0; box-sizing: border-box; }
+  .lite-quotas-grid .lite-quota-card:nth-child(2n) { margin-right: 0; }
+  @media (max-width: 640px) { .lite-quotas-grid .lite-quota-card { float: none; width: 100%; margin-right: 0; } }
+  .lite-quota-card {
+    border: 1px solid #f2f3f5;
+    border-radius: 4px;
+    padding: 10px;
+    background: #fafbfc;
+  }
+  .lite-card-top { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 11px; }
+  .lite-card-name { font-weight: 600; color: #1d2129; }
+  .lite-card-usage { font-family: monospace; color: #4e5969; }
+  .lite-card-track { height: 6px; background: #e5e6eb; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
+  .lite-card-bar { height: 100%; background: #165dff; border-radius: 3px; }
+  .lite-bar-warn { background: #ff7d00; }
+  .lite-bar-danger { background: #f53f3f; }
+  .lite-card-bottom { display: flex; justify-content: space-between; font-size: 10px; }
+  .lite-card-pct { font-family: monospace; font-weight: 600; color: #1d2129; }
+  .text-danger { color: #f53f3f; font-weight: 600; }
+  .text-warn { color: #ff7d00; font-weight: 600; }
+  .text-ok { color: #00b42a; }
+</style>

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

@@ -0,0 +1,17 @@
+interface QuotaItem {
+    id: string;
+    resourceName: string;
+    used: number;
+    limit: number;
+    unit: string;
+    status?: 'normal' | 'warning' | 'exhausted';
+}
+interface Props {
+    tenantName?: string;
+    tierName?: string;
+    quotas?: QuotaItem[];
+    class?: string;
+}
+declare const LiteTenantQuotasMatrix: import("svelte").Component<Props, {}, "">;
+type LiteTenantQuotasMatrix = ReturnType<typeof LiteTenantQuotasMatrix>;
+export default LiteTenantQuotasMatrix;

package/dist/components/LiteTextDiffViewer.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  interface Props {
+    oldText?: string;
+    newText?: string;
+    oldTitle?: string;
+    newTitle?: string;
+    class?: string;
+  }
+
+  let {
+    oldText = '',
+    newText = '',
+    oldTitle = 'Baseline',
+    newTitle = 'Current',
+    class: className = '',
+  }: Props = $props();
+
+  interface DiffEntry {
+    type: 'same' | 'add' | 'del';
+    lineNo: number;
+    text: string;
+  }
+
+  const diffEntries = $derived.by<DiffEntry[]>(() => {
+    const oldLines = oldText.split(/\r?\n/u);
+    const newLines = newText.split(/\r?\n/u);
+    const result: DiffEntry[] = [];
+
+    let lineCounter = 1;
+    let i = 0;
+    let j = 0;
+
+    while (i < oldLines.length && j < newLines.length) {
+      if (oldLines[i] === newLines[j]) {
+        result.push({ type: 'same', lineNo: lineCounter++, text: oldLines[i] ?? '' });
+        i++;
+        j++;
+      } else {
+        result.push({ type: 'del', lineNo: lineCounter++, text: oldLines[i] ?? '' });
+        result.push({ type: 'add', lineNo: lineCounter++, text: newLines[j] ?? '' });
+        i++;
+        j++;
+      }
+    }
+    while (i < oldLines.length) {
+      result.push({ type: 'del', lineNo: lineCounter++, text: oldLines[i] ?? '' });
+      i++;
+    }
+    while (j < newLines.length) {
+      result.push({ type: 'add', lineNo: lineCounter++, text: newLines[j] ?? '' });
+      j++;
+    }
+
+    return result;
+  });
+</script>
+
+<div
+  class="lite-text-diff {className}"
+  data-svadmin-component="LiteTextDiffViewer"
+  role="region"
+  aria-label="Text Diff"
+>
+  <header class="lite-diff-header">
+    <span class="lite-diff-title">{oldTitle} ↔ {newTitle}</span>
+  </header>
+
+  <div class="lite-diff-body">
+    <table class="lite-diff-table">
+      <tbody>
+        {#each diffEntries as entry (entry.lineNo)}
+          <tr class="lite-diff-row lite-diff-{entry.type}">
+            <td class="lite-diff-line-no">{entry.lineNo}</td>
+            <td class="lite-diff-sign">
+              {#if entry.type === 'add'}+{/if}
+              {#if entry.type === 'del'}-{/if}
+            </td>
+            <td class="lite-diff-content">{entry.text}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  .lite-text-diff {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-family: monospace;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-diff-header {
+    padding: 8px 12px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+    font-weight: 600;
+    color: #4e5969;
+  }
+  .lite-diff-body { max-height: 400px; overflow: auto; }
+  .lite-diff-table { width: 100%; border-collapse: collapse; }
+  .lite-diff-row td { padding: 2px 6px; }
+  .lite-diff-line-no { width: 40px; text-align: right; color: #86909c; user-select: none; border-right: 1px solid #f2f3f5; }
+  .lite-diff-sign { width: 20px; text-align: center; font-weight: 700; user-select: none; }
+  .lite-diff-content { white-space: pre-wrap; word-break: break-all; }
+  .lite-diff-add { background: #e8ffea; color: #00b42a; }
+  .lite-diff-del { background: #ffece8; color: #f53f3f; }
+  .lite-diff-same { color: #1d2129; }
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    oldText?: string;
+    newText?: string;
+    oldTitle?: string;
+    newTitle?: string;
+    class?: string;
+}
+declare const LiteTextDiffViewer: import("svelte").Component<Props, {}, "">;
+type LiteTextDiffViewer = ReturnType<typeof LiteTextDiffViewer>;
+export default LiteTextDiffViewer;

package/dist/components/LiteThreadedCommentDrawer.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  export interface LiteComment {
+    id: string;
+    author: string;
+    content: string;
+    createdAt: string;
+  }
+
+  interface Props {
+    comments?: LiteComment[];
+    title?: string;
+    action?: string;
+    class?: string;
+  }
+
+  let {
+    comments = [],
+    title = 'Comments',
+    action = '/comments/create',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-comment-box {className}"
+  data-svadmin-component="LiteThreadedCommentDrawer"
+>
+  <h4 class="lite-comment-title">{title}</h4>
+  <ul class="lite-comment-list">
+    {#each comments as c (c.id)}
+      <li class="lite-comment-item">
+        <div class="lite-comment-head">
+          <span class="lite-comment-author">{c.author}</span>
+          <span class="lite-comment-time">{c.createdAt}</span>
+        </div>
+        <p class="lite-comment-content">{c.content}</p>
+      </li>
+    {/each}
+  </ul>
+
+  <form {action} method="POST" class="lite-comment-form">
+    <textarea name="content" required placeholder="Leave a reply..." class="lite-comment-input"></textarea>
+    <button type="submit" class="lite-comment-btn">Submit Reply</button>
+  </form>
+</div>
+
+<style>
+  .lite-comment-box { border: 1px solid #e5e6eb; border-radius: 8px; background: #ffffff; padding: 16px; font-size: 12px; }
+  .lite-comment-title { font-size: 14px; font-weight: 600; margin: 0 0 12px 0; color: #1d2129; }
+  .lite-comment-list { list-style: none; margin: 0 0 16px 0; padding: 0; }
+  .lite-comment-item { border-bottom: 1px solid #f2f3f5; padding: 8px 0; }
+  .lite-comment-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
+  .lite-comment-author { font-weight: 600; color: #1d2129; }
+  .lite-comment-time { color: #86909c; font-size: 11px; }
+  .lite-comment-content { margin: 0; color: #4e5969; }
+  .lite-comment-form { display: flex; flex-direction: column; }
+  .lite-comment-form > * + * { margin-top: 8px; }
+  .lite-comment-input { height: 60px; border: 1px solid #e5e6eb; border-radius: 4px; padding: 6px 10px; font-size: 12px; }
+  .lite-comment-btn { height: 32px; background: #165dff; color: #fff; border: none; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; }
+</style>

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

@@ -0,0 +1,15 @@
+export interface LiteComment {
+    id: string;
+    author: string;
+    content: string;
+    createdAt: string;
+}
+interface Props {
+    comments?: LiteComment[];
+    title?: string;
+    action?: string;
+    class?: string;
+}
+declare const LiteThreadedCommentDrawer: import("svelte").Component<Props, {}, "">;
+type LiteThreadedCommentDrawer = ReturnType<typeof LiteThreadedCommentDrawer>;
+export default LiteThreadedCommentDrawer;

package/dist/components/LiteTierFeatureComparison.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  interface Tier {
+    key: string;
+    name: string;
+    price: string;
+    isCurrent?: boolean;
+  }
+
+  interface Feature {
+    name: string;
+    values: Record<string, boolean | string>;
+  }
+
+  interface Props {
+    tiers?: Tier[];
+    features?: Feature[];
+    class?: string;
+  }
+
+  let {
+    tiers = [
+      { key: 'starter', name: 'Starter', price: '$29/mo', isCurrent: true },
+      { key: 'pro', name: 'Pro', price: '$99/mo' },
+    ],
+    features = [
+      { name: 'Multi-tenant', values: { starter: true, pro: true } },
+      { name: 'Seats', values: { starter: '5', pro: '50' } },
+      { name: 'Dedicated support', values: { starter: false, pro: true } },
+    ],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-tier-comparison {className}"
+  data-svadmin-component="LiteTierFeatureComparison"
+  role="region"
+  aria-label="Tier Feature Comparison"
+>
+  <table class="lite-tier-table">
+    <thead>
+      <tr>
+        <th class="lite-tier-feat-th">功能特性</th>
+        {#each tiers as t (t.key)}
+          <th class="lite-tier-th">
+            <span class="lite-tier-name">{t.name}</span>
+            <span class="lite-tier-price">{t.price}</span>
+            {#if t.isCurrent}
+              <span class="lite-tier-current">当前套餐</span>
+            {/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each features as feat (feat.name)}
+        <tr>
+          <td class="lite-tier-feat-td">{feat.name}</td>
+          {#each tiers as t (t.key)}
+            {@const val = feat.values[t.key]}
+            <td class="lite-tier-val-td">
+              {#if val === true}
+                <span class="lite-check">✓</span>
+              {:else if val === false}
+                <span class="lite-dash">—</span>
+              {:else}
+                <span class="lite-val-text">{val}</span>
+              {/if}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .lite-tier-comparison {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    overflow-x: auto;
+    font-size: 12px;
+  }
+  .lite-tier-table { width: 100%; border-collapse: collapse; }
+  .lite-tier-table th, .lite-tier-table td { padding: 8px 12px; border-bottom: 1px solid #e5e6eb; }
+  .lite-tier-feat-th { text-align: left; color: #4e5969; font-weight: 600; width: 40%; }
+  .lite-tier-th { text-align: center; background: #f7f8fa; width: 30%; }
+  .lite-tier-name { display: block; font-weight: 700; color: #1d2129; }
+  .lite-tier-price { display: block; font-family: monospace; color: #165dff; font-weight: 600; margin-top: 2px; }
+  .lite-tier-current { display: inline-block; font-size: 10px; background: #e5e6eb; color: #4e5969; padding: 1px 6px; border-radius: 3px; margin-top: 4px; }
+  .lite-tier-feat-td { color: #1d2129; font-weight: 500; }
+  .lite-tier-val-td { text-align: center; }
+  .lite-check { color: #00b42a; font-weight: 700; }
+  .lite-dash { color: #86909c; }
+  .lite-val-text { font-family: monospace; font-weight: 600; color: #1d2129; }
+</style>

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

@@ -0,0 +1,18 @@
+interface Tier {
+    key: string;
+    name: string;
+    price: string;
+    isCurrent?: boolean;
+}
+interface Feature {
+    name: string;
+    values: Record<string, boolean | string>;
+}
+interface Props {
+    tiers?: Tier[];
+    features?: Feature[];
+    class?: string;
+}
+declare const LiteTierFeatureComparison: import("svelte").Component<Props, {}, "">;
+type LiteTierFeatureComparison = ReturnType<typeof LiteTierFeatureComparison>;
+export default LiteTierFeatureComparison;

package/dist/components/LiteUnsavedChangesGuard.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    hasChanges?: boolean;
+    message?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    hasChanges = false,
+    message = 'You have unsaved changes that may be lost.',
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-unsaved-guard {className}"
+  data-svadmin-component="LiteUnsavedChangesGuard"
+  data-dirty={hasChanges ? 'true' : 'false'}
+>
+  {#if hasChanges}
+    <aside class="lite-unsaved-banner" role="status">
+      <span class="lite-unsaved-icon">⚠️</span>
+      <span class="lite-unsaved-text">{message}</span>
+    </aside>
+  {/if}
+
+  <div class="lite-unsaved-content">
+    {#if children}{@render children()}{/if}
+  </div>
+</div>
+
+<style>
+  .lite-unsaved-guard { display: block; }
+  .lite-unsaved-banner {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background: #fff7e8;
+    border: 1px solid #ffd591;
+    border-radius: 6px;
+    margin-bottom: 12px;
+    font-size: 13px;
+    color: #d46b08;
+  }
+  .lite-unsaved-banner > * + * { margin-left: 8px; }
+  .lite-unsaved-icon { font-size: 14px; }
+  .lite-unsaved-text { font-weight: 500; }
+  .lite-unsaved-content { position: relative; }
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    hasChanges?: boolean;
+    message?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const LiteUnsavedChangesGuard: import("svelte").Component<Props, {}, "">;
+type LiteUnsavedChangesGuard = ReturnType<typeof LiteUnsavedChangesGuard>;
+export default LiteUnsavedChangesGuard;

package/dist/components/LiteWatermarkContainer.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    content?: string | string[];
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    content = 'SVAdmin Lite',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const watermarkText = $derived(
+    Array.isArray(content) ? content.join(' ') : String(content)
+  );
+
+  const encodedSvg = $derived.by(() => {
+    const escaped = watermarkText
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="220" height="120" viewBox="0 0 220 120"><text x="20" y="60" fill="rgba(0,0,0,0.07)" font-family="sans-serif" font-size="12" transform="rotate(-18 110 60)">${escaped}</text></svg>`;
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+  });
+</script>
+
+<div
+  class="lite-watermark-container {className}"
+  data-svadmin-component="LiteWatermarkContainer"
+  style="--lite-watermark-pattern: url('{encodedSvg}');"
+>
+  <div class="lite-watermark-overlay" aria-hidden="true" style="background-image: url('{encodedSvg}');"></div>
+  <div class="lite-watermark-content">
+    {#if children}{@render children()}{/if}
+  </div>
+</div>
+
+<style>
+  .lite-watermark-container {
+    position: relative;
+    overflow: hidden;
+  }
+  .lite-watermark-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9;
+    background-repeat: repeat;
+  }
+  .lite-watermark-content {
+    position: relative;
+    z-index: 1;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    content?: string | string[];
+    class?: string;
+    children?: Snippet;
+}
+declare const LiteWatermarkContainer: import("svelte").Component<Props, {}, "">;
+type LiteWatermarkContainer = ReturnType<typeof LiteWatermarkContainer>;
+export default LiteWatermarkContainer;