@svadmin/lite 0.26.0 → 0.30.1

package/dist/components/LiteAbacPolicyMatrix.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  export interface AbacPolicyRule {
+    id: string;
+    name: string;
+    resource: string;
+    effect: 'allow' | 'mask' | 'require_mfa' | 'deny';
+    priority: number;
+    enabled: boolean;
+  }
+
+  interface Props {
+    title?: string;
+    rules?: AbacPolicyRule[];
+    class?: string;
+  }
+
+  let {
+    title = '企业级 ABAC 访问控制策略矩阵 (SSR 静态列表)',
+    rules = [
+      { id: 'r1', name: '财务大额调拨审批放行', resource: 'TreasuryPayment', effect: 'allow', priority: 100, enabled: true },
+      { id: 'r2', name: '普通专员薪酬资产脱敏', resource: 'EmployeeCompensation', effect: 'mask', priority: 85, enabled: true },
+      { id: 'r3', name: '非工作时段审计库阻断', resource: 'AuditArchiveStore', effect: 'deny', priority: 95, enabled: true },
+      { id: 'r4', name: '大批量导出强制提权', resource: 'BatchDataExport', effect: 'require_mfa', priority: 90, enabled: true },
+    ],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-abac-matrix {className}"
+  data-svadmin-component="LiteAbacPolicyMatrix"
+  role="region"
+  aria-label="ABAC Policy Matrix"
+>
+  <header class="lite-abac-header">
+    <div class="lite-abac-title-row">
+      <span class="lite-abac-icon">🛡️</span>
+      <h4 class="lite-abac-title">{title}</h4>
+    </div>
+    <span class="lite-abac-count">共 {rules.length} 条策略规则</span>
+  </header>
+
+  <div class="lite-abac-table-wrap">
+    <table class="lite-abac-table">
+      <thead>
+        <tr>
+          <th>规则名称</th>
+          <th>目标资源</th>
+          <th>裁决效应</th>
+          <th>优先级</th>
+          <th>状态</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each rules as r (r.id)}
+          <tr>
+            <td class="lite-r-name">{r.name}</td>
+            <td class="font-mono text-muted">{r.resource}</td>
+            <td>
+              <span
+                class="lite-r-effect"
+                class:lite-eff-allow={r.effect === 'allow'}
+                class:lite-eff-mask={r.effect === 'mask'}
+                class:lite-eff-mfa={r.effect === 'require_mfa'}
+                class:lite-eff-deny={r.effect === 'deny'}
+              >
+                {r.effect}
+              </span>
+            </td>
+            <td class="font-mono">{r.priority}</td>
+            <td>
+              <span class="lite-status-txt">{r.enabled ? '已启用' : '已停用'}</span>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  .lite-abac-matrix {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-abac-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-abac-title-row { display: flex; align-items: center; }
+  .lite-abac-icon { font-size: 14px; margin-right: 6px; }
+  .lite-abac-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-abac-count { font-size: 11px; color: #86909c; }
+  .lite-abac-table-wrap { overflow-x: auto; }
+  .lite-abac-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    text-align: left;
+  }
+  .lite-abac-table th, .lite-abac-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f2f3f5;
+  }
+  .lite-abac-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-r-name { font-weight: 500; color: #1d2129; }
+  .lite-r-effect {
+    font-size: 10px;
+    font-weight: 600;
+    padding: 1px 5px;
+    border-radius: 2px;
+    text-transform: uppercase;
+  }
+  .lite-eff-allow { background: #e8ffea; color: #00b42a; }
+  .lite-eff-mask { background: #e8f3ff; color: #165dff; }
+  .lite-eff-mfa { background: #fff7e8; color: #ff7d00; }
+  .lite-eff-deny { background: #ffece8; color: #f53f3f; }
+  .lite-status-txt { font-size: 11px; color: #4e5969; }
+</style>

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

@@ -0,0 +1,16 @@
+export interface AbacPolicyRule {
+    id: string;
+    name: string;
+    resource: string;
+    effect: 'allow' | 'mask' | 'require_mfa' | 'deny';
+    priority: number;
+    enabled: boolean;
+}
+interface Props {
+    title?: string;
+    rules?: AbacPolicyRule[];
+    class?: string;
+}
+declare const LiteAbacPolicyMatrix: import("svelte").Component<Props, {}, "">;
+type LiteAbacPolicyMatrix = ReturnType<typeof LiteAbacPolicyMatrix>;
+export default LiteAbacPolicyMatrix;

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

@@ -0,0 +1,103 @@
+<script lang="ts">
+  interface Props {
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    url?: string;
+    curl?: string;
+    responseStatus?: number;
+    class?: string;
+  }
+
+  let {
+    method = 'GET',
+    url = '/api/v1/orders',
+    curl = 'curl -X GET "/api/v1/orders"',
+    responseStatus = 200,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-api-playground {className}"
+  data-svadmin-component="LiteApiPlayground"
+  role="region"
+  aria-label="API Playground"
+>
+  <header class="lite-api-header">
+    <span class="lite-api-title">API 调试工作台 (SSR 静态探针)</span>
+    <span class="lite-api-method lite-method-{method.toLowerCase()}">{method}</span>
+  </header>
+
+  <div class="lite-api-body">
+    <div class="lite-api-request-bar">
+      <span class="lite-api-method-badge">{method}</span>
+      <code class="lite-api-url">{url}</code>
+    </div>
+
+    <div class="lite-api-curl-box">
+      <span class="lite-curl-label">终端 cURL 命令:</span>
+      <pre class="lite-curl-code"><code>{curl}</code></pre>
+    </div>
+
+    {#if responseStatus}
+      <div class="lite-api-res-badge">
+        <span>预估状态: HTTP {responseStatus} OK</span>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .lite-api-playground {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-api-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-api-title { font-weight: 600; color: #1d2129; }
+  .lite-api-method { font-size: 11px; font-family: monospace; font-weight: 700; }
+  .lite-method-get { color: #165dff; }
+  .lite-method-post { color: #00b42a; }
+  .lite-api-body { padding: 12px; }
+  .lite-api-request-bar {
+    display: flex;
+    align-items: center;
+    padding: 6px 10px;
+    background: #f7f8fa;
+    border: 1px solid #e5e6eb;
+    border-radius: 4px;
+    font-family: monospace;
+  }
+  .lite-api-method-badge { font-weight: 700; color: #165dff; }
+  .lite-api-url { color: #1d2129; word-break: break-all; }
+  .lite-api-curl-box { margin-top: 10px; }
+  .lite-curl-label { color: #86909c; font-size: 11px; }
+  .lite-curl-code {
+    margin: 4px 0 0;
+    padding: 8px;
+    background: #f7f8fa;
+    border: 1px solid #e5e6eb;
+    border-radius: 4px;
+    font-family: monospace;
+    font-size: 11px;
+    color: #1d2129;
+    white-space: pre-wrap;
+  }
+  .lite-api-res-badge {
+    margin-top: 10px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background: #e8ffea;
+    color: #00b42a;
+    font-family: monospace;
+    font-weight: 600;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    url?: string;
+    curl?: string;
+    responseStatus?: number;
+    class?: string;
+}
+declare const LiteApiPlayground: import("svelte").Component<Props, {}, "">;
+type LiteApiPlayground = ReturnType<typeof LiteApiPlayground>;
+export default LiteApiPlayground;

package/dist/components/LiteApprovalChainBuilder.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  interface ApprovalNode {
+    id: string;
+    title: string;
+    approver: string;
+    status: 'passed' | 'current' | 'pending';
+    mode?: 'serial' | 'parallel';
+  }
+
+  interface Props {
+    title?: string;
+    nodes?: ApprovalNode[];
+    class?: string;
+  }
+
+  let {
+    title = '业务审批流链条',
+    nodes = [
+      { id: 'n1', title: '发起申请', approver: '经办人 (王立)', status: 'passed' },
+      { id: 'n2', title: '部门负责人初审', approver: '业务主管 (张明)', status: 'passed' },
+      { id: 'n3', title: '财务合规复核', approver: '财务审计组', status: 'current', mode: 'parallel' },
+      { id: 'n4', title: '总经理终审', approver: '决策层审批人', status: 'pending' }
+    ],
+    class: className = '',
+  }: Props = $props();
+
+  function getNodeStyle(st: string): { badge: string; color: string; bg: string } {
+    switch (st) {
+      case 'passed': return { badge: '✓ 已通过', color: '#00b42a', bg: '#e8ffea' };
+      case 'current': return { badge: '● 进行中', color: '#165dff', bg: '#e8f3ff' };
+      default: return { badge: '○ 待审批', color: '#86909c', bg: '#f2f3f5' };
+    }
+  }
+</script>
+
+<div
+  class="lite-approval-chain {className}"
+  data-svadmin-component="LiteApprovalChainBuilder"
+  role="region"
+  aria-label="Approval Chain"
+>
+  <header class="lite-chain-header">
+    <h4 class="lite-chain-title">{title}</h4>
+    <span class="lite-chain-total">{nodes.length} 级审批节点</span>
+  </header>
+
+  <div class="lite-chain-list">
+    {#each nodes as node, idx (node.id)}
+      {@const st = getNodeStyle(node.status)}
+      <div class="lite-chain-step">
+        <div class="lite-step-index">{idx + 1}</div>
+        <div class="lite-step-content">
+          <div class="lite-step-top">
+            <span class="lite-step-name">{node.title}</span>
+            <span class="lite-step-badge" style="color: {st.color}; background: {st.bg};">
+              {st.badge}
+            </span>
+          </div>
+          <div class="lite-step-approver">
+            审批人: {node.approver}
+            {#if node.mode === 'parallel'}
+              <span class="lite-step-mode">或签 / 会签</span>
+            {/if}
+          </div>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .lite-approval-chain {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-chain-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-chain-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-chain-total { font-size: 11px; color: #86909c; }
+  .lite-chain-list { padding: 12px 14px; }
+  .lite-chain-step {
+    display: flex;
+    align-items: flex-start;
+    padding-bottom: 12px;
+    margin-bottom: 12px;
+    border-bottom: 1px dashed #e5e6eb;
+  }
+  .lite-chain-step:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+  .lite-step-index {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #165dff;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    font-weight: 700;
+  }
+  .lite-step-content { flex: 1; }
+  .lite-step-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
+  .lite-step-name { font-weight: 600; color: #1d2129; font-size: 12px; }
+  .lite-step-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 3px; }
+  .lite-step-approver { font-size: 11px; color: #4e5969; }
+  .lite-step-mode { font-size: 10px; color: #86909c; margin-left: 6px; background: #f2f3f5; padding: 1px 4px; border-radius: 2px; }
+</style>

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

@@ -0,0 +1,15 @@
+interface ApprovalNode {
+    id: string;
+    title: string;
+    approver: string;
+    status: 'passed' | 'current' | 'pending';
+    mode?: 'serial' | 'parallel';
+}
+interface Props {
+    title?: string;
+    nodes?: ApprovalNode[];
+    class?: string;
+}
+declare const LiteApprovalChainBuilder: import("svelte").Component<Props, {}, "">;
+type LiteApprovalChainBuilder = ReturnType<typeof LiteApprovalChainBuilder>;
+export default LiteApprovalChainBuilder;

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;