@h-ai/ui 0.1.0-alpha.53 → 0.1.0-alpha.55

package/README.md

@@ -273,6 +273,10 @@ components/
 
 #### Crypto 加密展示（3 个）
 
+输入变化立即清空 `encryptedValue`，只有当前输入的成功结果会回填；清空、回调替换和卸载均使旧请求失效。失败显示内置错误提示且密文保持为空；表单应仅在当前密文非空时提交需要加密的输入。
+
+`EncryptedInput` 必须由调用方通过 `onencrypt` 接入真实加密服务，`algorithm` 仅用于说明该服务所用算法。未配置回调时组件明确提示不可用，不生成密文；没有 Base64 等编码回退。
+
 | 组件               | 描述     | 主要属性                                                |
 | ------------------ | -------- | ------------------------------------------------------- |
 | `EncryptedInput`   | 加密输入 | `value`, `encryptedValue`, `algorithm`, `showEncrypted` |

package/dist/components/scenes/crypto/EncryptedInput.svelte

@@ -57,26 +57,34 @@
 
   const dataAttributes = $derived(getDataAttributes(restProps))
   let showValue = $state(false)
+  let encryptionError = $state(false)
 
-  // 模拟加密（实际应该调用 crypto 服务）
-  function encrypt(text: string): string {
-    return btoa(text)
-  }
+  // 输入、回调或组件生命周期变化时，旧请求立即失效。
+  $effect(() => {
+    const input = value
+    const encrypt = onencrypt
+    encryptedValue = ''
+    encryptionError = false
+    if (!input || !encrypt)
+      return
+    let active = true
+    const isCurrent = () => active && value === input && onencrypt === encrypt
+    void Promise.resolve().then(() => encrypt(input)).then((encrypted) => {
+      if (isCurrent())
+        encryptedValue = encrypted
+    }).catch(() => {
+      if (isCurrent())
+        encryptionError = true
+    })
+    return () => {
+      active = false
+    }
+  })
 
   function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
     value = e.currentTarget.value
 
-    if (value && onencrypt) {
-      onencrypt(value).then((encrypted) => {
-        encryptedValue = encrypted
-      })
-    }
-    else if (value) {
-      encryptedValue = encrypt(value)
-    }
-    else {
-      encryptedValue = ''
-    }
+    encryptedValue = ''
 
     oninput?.(e)
   }
@@ -97,6 +105,12 @@
 </script>
 
 <div {...dataAttributes} class='encrypted-input space-y-2 {className}'>
+  {#if encryptionError}
+    <p role='alert' class='text-sm text-error'>{uiM('encrypted_input_failed')}</p>
+  {/if}
+  {#if !onencrypt}
+    <p role='status' class='text-sm text-warning'>{uiM('encrypted_input_unavailable')}</p>
+  {/if}
   <!-- 输入框 -->
   <div class='relative'>
     <Input

package/dist/messages/en-US.json

@@ -48,6 +48,8 @@
   "encrypted_input_hide": "Hide",
   "encrypted_input_result": "Encrypted",
   "encrypted_input_copy": "Copy",
+  "encrypted_input_failed": "Encryption failed. Edit the input to retry.",
+  "encrypted_input_unavailable": "Encryption is not configured. No ciphertext will be generated.",
   "image_upload_placeholder": "Click to upload image",
   "image_upload_max_size_hint": "Max:",
   "image_upload_size_exceeded": "Image size exceeds limit (max",

package/dist/messages/zh-CN.json

@@ -48,6 +48,8 @@
   "encrypted_input_hide": "隐藏",
   "encrypted_input_result": "已加密",
   "encrypted_input_copy": "复制",
+  "encrypted_input_failed": "加密失败，请重新输入后重试。",
+  "encrypted_input_unavailable": "未配置加密功能，当前输入不会生成密文。",
   "image_upload_placeholder": "点击上传图片",
   "image_upload_max_size_hint": "最大：",
   "image_upload_size_exceeded": "图片大小超出限制（最大",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.53",
+  "version": "0.1.0-alpha.55",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -38,6 +38,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "engines": {
+    "node": ">=22.12.0"
+  },
   "peerDependencies": {
     "svelte": "^5.55.9"
   },
@@ -52,7 +55,7 @@
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.53"
+    "@h-ai/core": "0.1.0-alpha.55"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",