@svadmin/lite 0.26.0 → 0.30.1

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+  interface Props {
+    companyName?: string;
+    sealTitle?: string;
+    serialNumber?: string;
+    class?: string;
+  }
+
+  let {
+    companyName = '上海创智多租户研发网络科技有限公司',
+    sealTitle = '电子审批专用章',
+    serialNumber = '3101040098214',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-seal-stamp {className}"
+  data-svadmin-component="LiteElectronicSealStamp"
+  role="img"
+  aria-label="{companyName} {sealTitle}"
+>
+  <div class="lite-seal-circle">
+    <div class="lite-seal-company">{companyName}</div>
+    <div class="lite-seal-star">★</div>
+    <div class="lite-seal-title">{sealTitle}</div>
+    <div class="lite-seal-serial font-mono">{serialNumber}</div>
+  </div>
+</div>
+
+<style>
+  .lite-seal-stamp {
+    display: inline-block;
+    padding: 8px;
+    transform: rotate(-5deg);
+  }
+  .lite-seal-circle {
+    width: 140px;
+    height: 140px;
+    border: 3px solid #f53f3f;
+    border-radius: 50%;
+    color: #f53f3f;
+    text-align: center;
+    box-sizing: border-box;
+    padding: 8px 6px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .lite-seal-company { font-size: 9px; font-weight: bold; line-height: 1.1; }
+  .lite-seal-star { font-size: 22px; line-height: 1; }
+  .lite-seal-title { font-size: 11px; font-weight: bold; letter-spacing: 1px; }
+  .lite-seal-serial { font-size: 8px; font-family: monospace; letter-spacing: 1px; }
+  .font-mono { font-family: monospace; }
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    companyName?: string;
+    sealTitle?: string;
+    serialNumber?: string;
+    class?: string;
+}
+declare const LiteElectronicSealStamp: import("svelte").Component<Props, {}, "">;
+type LiteElectronicSealStamp = ReturnType<typeof LiteElectronicSealStamp>;
+export default LiteElectronicSealStamp;

package/dist/components/LiteEnvVariableEditor.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  interface EnvItem {
+    key: string;
+    value: string;
+    isSecret?: boolean;
+    scope?: string;
+  }
+
+  interface Props {
+    title?: string;
+    environment?: string;
+    variables?: EnvItem[];
+    class?: string;
+  }
+
+  let {
+    title = '环境变量与配置字典',
+    environment = 'production',
+    variables = [
+      { key: 'DATABASE_URL', value: 'postgresql://postgres:******@db.cluster:5432/main', isSecret: true, scope: 'server' },
+      { key: 'REDIS_HOST', value: 'redis-master.internal', isSecret: false, scope: 'all' },
+      { key: 'STORAGE_BUCKET_NAME', value: 'corp-assets-prod', isSecret: false, scope: 'server' },
+      { key: 'OIDC_CLIENT_SECRET', value: 'sec_live_9941a8******', isSecret: true, scope: 'auth' }
+    ],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-env-editor {className}"
+  data-svadmin-component="LiteEnvVariableEditor"
+  role="region"
+  aria-label="Environment Variable Editor"
+>
+  <header class="lite-env-header">
+    <div>
+      <h4 class="lite-env-title">{title}</h4>
+      <span class="lite-env-env-tag">环境: {environment}</span>
+    </div>
+    <span class="lite-env-count">{variables.length} 项环境变量</span>
+  </header>
+
+  <div class="lite-env-list">
+    {#each variables as v (v.key)}
+      <div class="lite-env-item">
+        <div class="lite-env-key-wrap">
+          <code class="lite-env-key">{v.key}</code>
+          {#if v.isSecret}
+            <span class="lite-env-badge-secret">加密机密</span>
+          {/if}
+          {#if v.scope}
+            <span class="lite-env-badge-scope">{v.scope}</span>
+          {/if}
+        </div>
+        <div class="lite-env-val-wrap">
+          <code class="lite-env-value">{v.isSecret ? '●●●●●●●●●●●●' : v.value}</code>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .lite-env-editor {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-env-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-env-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-env-env-tag { font-size: 11px; color: #165dff; font-weight: 600; display: block; margin-top: 2px; }
+  .lite-env-count { font-size: 11px; color: #86909c; }
+  .lite-env-list { padding: 8px 14px; }
+  .lite-env-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid #f2f3f5;
+  }
+  .lite-env-item:last-child { border-bottom: none; }
+  .lite-env-key-wrap { display: flex; align-items: center; }
+  .lite-env-key-wrap > * + * { margin-left: 6px; }
+  .lite-env-key { font-weight: 600; color: #1d2129; font-family: monospace; font-size: 11px; }
+  .lite-env-badge-secret {
+    font-size: 10px;
+    padding: 1px 4px;
+    border-radius: 3px;
+    background: #ffece8;
+    color: #f53f3f;
+    font-weight: 500;
+  }
+  .lite-env-badge-scope {
+    font-size: 10px;
+    padding: 1px 4px;
+    border-radius: 3px;
+    background: #f2f3f5;
+    color: #4e5969;
+  }
+  .lite-env-value {
+    color: #4e5969;
+    font-family: monospace;
+    font-size: 11px;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+interface EnvItem {
+    key: string;
+    value: string;
+    isSecret?: boolean;
+    scope?: string;
+}
+interface Props {
+    title?: string;
+    environment?: string;
+    variables?: EnvItem[];
+    class?: string;
+}
+declare const LiteEnvVariableEditor: import("svelte").Component<Props, {}, "">;
+type LiteEnvVariableEditor = ReturnType<typeof LiteEnvVariableEditor>;
+export default LiteEnvVariableEditor;

package/dist/components/LiteFormulaField.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  interface Props {
+    label?: string;
+    formula?: string;
+    value?: number | string | null;
+    prefix?: string;
+    suffix?: string;
+    class?: string;
+  }
+
+  let {
+    label = 'Formula Field',
+    formula = 'a * b',
+    value = 0,
+    prefix = '',
+    suffix = '',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-formula-field {className}"
+  data-svadmin-component="LiteFormulaField"
+>
+  <div class="lite-formula-header">
+    <span class="lite-formula-label">{label}</span>
+    <span class="lite-formula-badge">f(x): {formula}</span>
+  </div>
+  <div class="lite-formula-box">
+    {#if prefix}<span class="lite-formula-prefix">{prefix}</span>{/if}
+    <span class="lite-formula-val">{value ?? '0.00'}</span>
+    {#if suffix}<span class="lite-formula-suffix">{suffix}</span>{/if}
+  </div>
+</div>
+
+<style>
+  .lite-formula-field { margin-bottom: 12px; font-size: 12px; }
+  .lite-formula-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
+  .lite-formula-label { font-weight: 600; color: #4e5969; }
+  .lite-formula-badge { font-family: monospace; font-size: 11px; background: #e8f3ff; color: #165dff; padding: 1px 6px; border-radius: 4px; }
+  .lite-formula-box { background: #f7f8fa; border: 1px solid #e5e6eb; border-radius: 4px; padding: 6px 10px; font-family: monospace; font-weight: 600; color: #1d2129; }
+  .lite-formula-prefix { margin-right: 4px; color: #86909c; }
+  .lite-formula-suffix { margin-left: 4px; color: #86909c; }
+</style>

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

@@ -0,0 +1,11 @@
+interface Props {
+    label?: string;
+    formula?: string;
+    value?: number | string | null;
+    prefix?: string;
+    suffix?: string;
+    class?: string;
+}
+declare const LiteFormulaField: import("svelte").Component<Props, {}, "">;
+type LiteFormulaField = ReturnType<typeof LiteFormulaField>;
+export default LiteFormulaField;

package/dist/components/LiteGeoScatterMap.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  interface RegionItem {
+    id: string;
+    name: string;
+    value: number;
+    status?: 'normal' | 'warning' | 'critical' | 'highlight';
+    subtext?: string;
+  }
+
+  interface Props {
+    title?: string;
+    metricLabel?: string;
+    regions?: RegionItem[];
+    class?: string;
+  }
+
+  let {
+    title = '业务地域空间分布与负载排行',
+    metricLabel = '并发连接数',
+    regions = [
+      { id: 'east', name: '华东大区 (上海/江浙)', value: 4820, status: 'highlight', subtext: '含5个超级算力中心' },
+      { id: 'north', name: '华北大区 (京津冀)', value: 4120, status: 'normal', subtext: '主核心控制节点' },
+      { id: 'south', name: '华南大区 (广深/港澳)', value: 3650, status: 'normal', subtext: '跨境核心中继集群' },
+      { id: 'southwest', name: '西南大区 (成渝/云贵)', value: 3100, status: 'warning', subtext: '水冷水电高能效算力' },
+      { id: 'central', name: '华中大区 (两湖/河南)', value: 2450, status: 'normal', subtext: '灾备冷备存储仓' }
+    ],
+    class: className = '',
+  }: Props = $props();
+
+  const maxVal = $derived(Math.max(...regions.map(r => r.value), 1));
+</script>
+
+<div
+  class="lite-geo-map {className}"
+  data-svadmin-component="LiteGeoScatterMap"
+  role="region"
+  aria-label="Geo Distribution Map"
+>
+  <header class="lite-geo-header">
+    <div>
+      <h4 class="lite-geo-title">{title}</h4>
+      <span class="lite-geo-metric">指标基准: {metricLabel}</span>
+    </div>
+  </header>
+
+  <div class="lite-geo-body">
+    <div class="lite-geo-list">
+      {#each regions as r, idx (r.id)}
+        {@const pct = Math.round((r.value / maxVal) * 100)}
+        <div class="lite-geo-item">
+          <div class="lite-item-top">
+            <div class="lite-item-left">
+              <span class="lite-rank-num" class:lite-rank-top={idx === 0}>{idx + 1}</span>
+              <span class="lite-region-name">{r.name}</span>
+            </div>
+            <span class="lite-region-val font-mono">{r.value.toLocaleString()}</span>
+          </div>
+          <div class="lite-track">
+            <div
+              class="lite-bar"
+              class:lite-bar-warn={r.status === 'warning'}
+              class:lite-bar-danger={r.status === 'critical'}
+              style="width: {pct}%;"
+            ></div>
+          </div>
+          {#if r.subtext}
+            <div class="lite-item-sub">{r.subtext}</div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .lite-geo-map {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-geo-header {
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-geo-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-geo-metric { font-size: 11px; color: #86909c; display: block; margin-top: 2px; }
+  .lite-geo-body { padding: 12px 14px; }
+  .lite-geo-item { margin-bottom: 12px; }
+  .lite-geo-item:last-child { margin-bottom: 0; }
+  .lite-item-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
+  .lite-item-left { display: flex; align-items: center; }
+  .lite-item-left > * + * { margin-left: 8px; }
+  .lite-rank-num {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    text-align: center;
+    border-radius: 3px;
+    background: #f2f3f5;
+    color: #4e5969;
+    font-size: 10px;
+    font-weight: 700;
+  }
+  .lite-rank-top { background: #165dff; color: #ffffff; }
+  .lite-region-name { font-weight: 600; color: #1d2129; font-size: 12px; }
+  .lite-region-val { font-size: 12px; font-weight: 700; color: #165dff; }
+  .font-mono { font-family: monospace; }
+  .lite-track { height: 6px; background: #f2f3f5; border-radius: 3px; overflow: hidden; }
+  .lite-bar { height: 100%; background: #165dff; border-radius: 3px; }
+  .lite-bar-warn { background: #ff7d00; }
+  .lite-bar-danger { background: #f53f3f; }
+  .lite-item-sub { font-size: 11px; color: #86909c; margin-top: 3px; }
+</style>

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

@@ -0,0 +1,16 @@
+interface RegionItem {
+    id: string;
+    name: string;
+    value: number;
+    status?: 'normal' | 'warning' | 'critical' | 'highlight';
+    subtext?: string;
+}
+interface Props {
+    title?: string;
+    metricLabel?: string;
+    regions?: RegionItem[];
+    class?: string;
+}
+declare const LiteGeoScatterMap: import("svelte").Component<Props, {}, "">;
+type LiteGeoScatterMap = ReturnType<typeof LiteGeoScatterMap>;
+export default LiteGeoScatterMap;

package/dist/components/LiteHmacSignatureCalculator.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  interface Props {
+    secret?: string;
+    payload?: string;
+    algorithm?: string;
+    signature?: string;
+    class?: string;
+  }
+
+  let {
+    secret = 'whsec_sample_secret',
+    payload = '{"test":true}',
+    algorithm = 'SHA-256',
+    signature = '7b5a8e0f9c2d1b4a6e8f3c5d7a9b0e2f4a6c8e0d2b4f6a8c0e2d4f6a8c0e2d4f',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-hmac-calculator {className}"
+  data-svadmin-component="LiteHmacSignatureCalculator"
+  role="region"
+  aria-label="HMAC Signature Calculator"
+>
+  <header class="lite-hmac-header">
+    <span class="lite-hmac-title">HMAC 签名现场计算器 (SSR)</span>
+    <span class="lite-hmac-algo">HMAC-{algorithm}</span>
+  </header>
+
+  <div class="lite-hmac-body">
+    <div class="lite-hmac-row">
+      <span class="lite-hmac-label">密钥:</span>
+      <code class="lite-hmac-val">{secret}</code>
+    </div>
+
+    <div class="lite-hmac-row">
+      <span class="lite-hmac-label">待签载荷:</span>
+      <code class="lite-hmac-val">{payload}</code>
+    </div>
+
+    <div class="lite-hmac-result">
+      <span class="lite-hmac-label">签名结果 (Hex):</span>
+      <div class="lite-hmac-sig">{signature}</div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .lite-hmac-calculator {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-hmac-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-hmac-title { font-weight: 600; color: #1d2129; }
+  .lite-hmac-algo { font-size: 10px; font-family: monospace; background: #e8f3ff; color: #165dff; padding: 1px 6px; border-radius: 3px; }
+  .lite-hmac-body { padding: 12px; }
+  .lite-hmac-row { display: flex; margin-bottom: 8px; font-family: monospace; }
+  .lite-hmac-row > * + * { margin-left: 8px; }
+  .lite-hmac-label { color: #86909c; min-width: 60px; font-family: sans-serif; }
+  .lite-hmac-val { color: #1d2129; word-break: break-all; }
+  .lite-hmac-result { margin-top: 8px; }
+  .lite-hmac-sig {
+    margin-top: 4px;
+    padding: 8px;
+    background: #f7f8fa;
+    border: 1px solid #e5e6eb;
+    border-radius: 4px;
+    font-family: monospace;
+    font-weight: 700;
+    color: #165dff;
+    word-break: break-all;
+    font-size: 11px;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    secret?: string;
+    payload?: string;
+    algorithm?: string;
+    signature?: string;
+    class?: string;
+}
+declare const LiteHmacSignatureCalculator: import("svelte").Component<Props, {}, "">;
+type LiteHmacSignatureCalculator = ReturnType<typeof LiteHmacSignatureCalculator>;
+export default LiteHmacSignatureCalculator;