@svadmin/lite 0.26.0 → 0.27.0

package/dist/components/LiteAnnouncementBanner.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  type BannerTone = 'info' | 'warning' | 'error' | 'success';
+
+  interface Props {
+    message: string;
+    tone?: BannerTone;
+    countdownText?: string;
+    actionText?: string;
+    actionHref?: string;
+    class?: string;
+  }
+
+  let {
+    message,
+    tone = 'warning',
+    countdownText,
+    actionText,
+    actionHref,
+    class: className = '',
+  }: Props = $props();
+
+  const iconChar = $derived.by(() => {
+    switch (tone) {
+      case 'info':
+        return 'ℹ';
+      case 'success':
+        return '✓';
+      case 'error':
+        return '✕';
+      case 'warning':
+      default:
+        return '⚠';
+    }
+  });
+</script>
+
+<aside
+  class="lite-announcement-banner lite-banner-{tone} {className}"
+  data-svadmin-component="LiteAnnouncementBanner"
+  role="alert"
+>
+  <div class="lite-banner-body">
+    <span class="lite-banner-icon" aria-hidden="true">{iconChar}</span>
+    <span class="lite-banner-message">{message}</span>
+
+    {#if countdownText}
+      <span class="lite-banner-countdown">{countdownText}</span>
+    {/if}
+
+    {#if actionText}
+      {#if actionHref}
+        <a href={actionHref} class="lite-banner-action">{actionText}</a>
+      {:else}
+        <span class="lite-banner-action">{actionText}</span>
+      {/if}
+    {/if}
+  </div>
+</aside>
+
+<style>
+  .lite-announcement-banner {
+    padding: 8px 16px;
+    border-bottom: 1px solid transparent;
+    font-size: 13px;
+    box-sizing: border-box;
+  }
+  .lite-banner-info { background: #e8f3ff; color: #165dff; border-color: #bedaff; }
+  .lite-banner-warning { background: #fff7e8; color: #d46b08; border-color: #ffd591; }
+  .lite-banner-error { background: #fff1f0; color: #cf1322; border-color: #ffa39e; }
+  .lite-banner-success { background: #e8ffea; color: #00b42a; border-color: #aff0b5; }
+  .lite-banner-body { display: flex; align-items: center; flex-wrap: wrap; }
+  .lite-banner-body > * + * { margin-left: 8px; }
+  .lite-banner-icon { font-weight: 700; font-size: 14px; }
+  .lite-banner-message { font-weight: 500; flex: 1; min-width: 200px; }
+  .lite-banner-countdown {
+    font-family: monospace;
+    font-size: 11px;
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.05);
+    font-weight: 600;
+  }
+  .lite-banner-action {
+    text-decoration: underline;
+    font-weight: 600;
+    color: inherit;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+type BannerTone = 'info' | 'warning' | 'error' | 'success';
+interface Props {
+    message: string;
+    tone?: BannerTone;
+    countdownText?: string;
+    actionText?: string;
+    actionHref?: string;
+    class?: string;
+}
+declare const LiteAnnouncementBanner: import("svelte").Component<Props, {}, "">;
+type LiteAnnouncementBanner = ReturnType<typeof LiteAnnouncementBanner>;
+export default LiteAnnouncementBanner;

package/dist/components/LiteAsyncExportModal.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  interface ExportCol {
+    key: string;
+    label: string;
+  }
+
+  interface Props {
+    open?: boolean;
+    action?: string;
+    resourceName?: string;
+    columns?: ExportCol[];
+    class?: string;
+  }
+
+  let {
+    open = true,
+    action = '/api/export',
+    resourceName = 'Records',
+    columns = [],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+{#if open}
+  <section
+    class="lite-export-modal {className}"
+    data-svadmin-component="LiteAsyncExportModal"
+    aria-label="Export {resourceName}"
+  >
+    <header class="lite-export-header">
+      <h3 class="lite-export-title">Export {resourceName}</h3>
+    </header>
+
+    <form method="POST" action={action} class="lite-export-form">
+      <div class="lite-export-group">
+        <label for="lite-export-filename">File Name</label>
+        <input type="text" id="lite-export-filename" name="filename" value="{resourceName}-Export" />
+      </div>
+
+      <div class="lite-export-group">
+        <span class="lite-export-label">Format</span>
+        <div class="lite-export-radios">
+          <label><input type="radio" name="format" value="xlsx" checked /> Excel (.xlsx)</label>
+          <label><input type="radio" name="format" value="csv" /> CSV (.csv)</label>
+          <label><input type="radio" name="format" value="json" /> JSON (.json)</label>
+        </div>
+      </div>
+
+      {#if columns.length > 0}
+        <div class="lite-export-group">
+          <span class="lite-export-label">Columns</span>
+          <div class="lite-export-columns">
+            {#each columns as col (col.key)}
+              <label class="lite-export-col-item">
+                <input type="checkbox" name="columns" value={col.key} checked />
+                <span>{col.label}</span>
+              </label>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      <div class="lite-export-actions">
+        <button type="submit" class="lite-export-submit">Start Export</button>
+      </div>
+    </form>
+  </section>
+{/if}
+
+<style>
+  .lite-export-modal {
+    border: 1px solid #e5e6eb;
+    border-radius: 8px;
+    padding: 16px;
+    background: #ffffff;
+    max-width: 480px;
+    box-sizing: border-box;
+  }
+  .lite-export-header { margin-bottom: 12px; }
+  .lite-export-title { margin: 0; font-size: 15px; color: #1d2129; font-weight: 600; }
+  .lite-export-group { margin-bottom: 12px; font-size: 13px; }
+  .lite-export-group label, .lite-export-label { display: block; margin-bottom: 4px; font-weight: 500; color: #4e5969; }
+  .lite-export-group input[type="text"] {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 6px 10px;
+    border: 1px solid #e5e6eb;
+    border-radius: 4px;
+  }
+  .lite-export-radios { display: flex; margin-top: 4px; }
+  .lite-export-radios > * + * { margin-left: 12px; }
+  .lite-export-columns {
+    display: flex;
+    flex-wrap: wrap;
+    max-height: 140px;
+    overflow-y: auto;
+    padding: 6px;
+    background: #f7f8fa;
+    border-radius: 4px;
+  }
+  .lite-export-col-item { display: flex; align-items: center; width: 50%; font-size: 12px; }
+  .lite-export-col-item > * + * { margin-left: 6px; }
+  .lite-export-actions { margin-top: 16px; display: flex; justify-content: flex-end; }
+  .lite-export-submit {
+    padding: 7px 16px;
+    background: #165dff;
+    color: #ffffff;
+    border: 0;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 500;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+interface ExportCol {
+    key: string;
+    label: string;
+}
+interface Props {
+    open?: boolean;
+    action?: string;
+    resourceName?: string;
+    columns?: ExportCol[];
+    class?: string;
+}
+declare const LiteAsyncExportModal: import("svelte").Component<Props, {}, "">;
+type LiteAsyncExportModal = ReturnType<typeof LiteAsyncExportModal>;
+export default LiteAsyncExportModal;

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;

package/dist/components/LiteDualApprovalGate.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    actionTitle: string;
+    requiredRole?: string;
+    formAction?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    actionTitle,
+    requiredRole = '合规主管',
+    formAction = '/approval/verify',
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-dual-approval {className}"
+  data-svadmin-component="LiteDualApprovalGate"
+>
+  <div class="lite-approval-header">
+    <span class="lite-approval-badge">双人联签 (Two-Person Rule)</span>
+    <h3 class="lite-approval-title">{actionTitle}</h3>
+    <p class="lite-approval-desc">特权高危操作，须由第二位具备 [{requiredRole}] 权限的主管输入口令核验。</p>
+  </div>
+
+  {#if children}{@render children()}{/if}
+
+  <form action={formAction} method="POST" class="lite-approval-form">
+    <div class="lite-form-row">
+      <label for="lite-rev-id" class="lite-label">复核人工号</label>
+      <input id="lite-rev-id" name="reviewerId" type="text" required class="lite-input" placeholder="输入工号" />
+    </div>
+    <div class="lite-form-row">
+      <label for="lite-rev-sec" class="lite-label">复核人口令/2FA</label>
+      <input id="lite-rev-sec" name="secret" type="password" required class="lite-input" placeholder="输入独立核验口令" />
+    </div>
+    <button type="submit" class="lite-approval-btn">确认双人联签并执行</button>
+  </form>
+</div>
+
+<style>
+  .lite-dual-approval { border: 1px solid #fbbbb0; background: #fffdfc; border-radius: 8px; padding: 20px; }
+  .lite-approval-badge { display: inline-block; font-size: 11px; font-weight: 600; color: #f53f3f; background: #ffece8; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; }
+  .lite-approval-title { font-size: 16px; font-weight: 700; color: #1d2129; margin: 0 0 6px 0; }
+  .lite-approval-desc { font-size: 12px; color: #86909c; margin: 0 0 16px 0; }
+  .lite-approval-form { display: flex; flex-direction: column; }
+  .lite-approval-form > * + * { margin-top: 12px; }
+  .lite-form-row { display: flex; flex-direction: column; }
+  .lite-form-row > * + * { margin-top: 4px; }
+  .lite-label { font-size: 12px; font-weight: 600; color: #4e5969; }
+  .lite-input { height: 32px; border: 1px solid #e5e6eb; border-radius: 4px; padding: 0 10px; font-size: 12px; }
+  .lite-approval-btn { height: 34px; background: #f53f3f; color: #fff; border: none; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    actionTitle: string;
+    requiredRole?: string;
+    formAction?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const LiteDualApprovalGate: import("svelte").Component<Props, {}, "">;
+type LiteDualApprovalGate = ReturnType<typeof LiteDualApprovalGate>;
+export default LiteDualApprovalGate;

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;