@h-ai/ui 0.1.0-alpha.34 → 0.1.0-alpha.36

package/dist/components/scenes/crud/crud-types.d.ts

@@ -44,6 +44,10 @@ export interface CrudPaginationConfig {
     showJumper?: boolean;
     /** 是否显示总数（默认 true） */
     showTotal?: boolean;
+    /** 是否显示页码信息文案（默认 true；紧凑视图可关闭） */
+    showPageInfo?: boolean;
+    /** 是否显示首页 / 末页跳转按钮（默认 true；紧凑视图可仅保留上一页 / 下一页） */
+    showFirstLast?: boolean;
 }
 /** CrudPage 初始列表数据（由 +page.server.ts load 返回） */
 export interface CrudPageData<T = Record<string, unknown>> {

package/dist/components/scenes/index.d.ts

@@ -6,6 +6,7 @@
  */
 export * from './ai/index.js';
 export * from './app/index.js';
+export * from './charts/index.js';
 export * from './crud/index.js';
 export * from './crypto/index.js';
 export * from './error/index.js';

package/dist/components/scenes/index.js

@@ -8,6 +8,8 @@
 export * from './ai/index.js';
 // App 应用级场景组件
 export * from './app/index.js';
+// Chart 图表场景组件
+export * from './charts/index.js';
 // CRUD 场景组件
 export * from './crud/index.js';
 // Crypto 场景组件

package/dist/components/scenes/storage/AvatarUpload.svelte

@@ -23,9 +23,7 @@
     accept = 'image/*',
     maxSize = 2 * 1024 * 1024, // 2MB
     disabled = false,
-    uploadUrl = '',
-    presignUrl = '',
-    headers = {},
+    uploadHandler,
     fallback = '',
     class: className = '',
     onchange,
@@ -37,6 +35,7 @@
   let loading = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
   let localPreviewUrl: string | null = $state(null)
+  let activeUpload: AbortController | null = null
 
   const sizeClass = $derived({
     'xs': 'w-8 h-8',
@@ -102,6 +101,7 @@
 
   $effect(() => {
     return () => {
+      activeUpload?.abort()
       if (localPreviewUrl) {
         URL.revokeObjectURL(localPreviewUrl)
         localPreviewUrl = null
@@ -111,91 +111,41 @@
 
   // 上传文件
   async function uploadFile(file: File) {
+    activeUpload?.abort()
+    const controller = new AbortController()
+    activeUpload = controller
     loading = true
 
     try {
-      if (!uploadUrl && !presignUrl) {
-        // 没有上传地址，创建本地预览
+      if (!uploadHandler) {
+        // 未提供上传处理器时，仅保留本地预览。
         replaceAvatarValue(URL.createObjectURL(file))
         return
       }
 
-      let targetUrl = uploadUrl
-
-      // 如果配置了签名 URL，先获取
-      if (presignUrl) {
-        const presignResponse = await fetch(presignUrl, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            ...headers,
-          },
-          body: JSON.stringify({
-            filename: file.name,
-            contentType: file.type,
-            size: file.size,
-          }),
-        })
-
-        if (!presignResponse.ok) {
-          throw new Error(uiM('avatar_upload_get_url_failed'))
-        }
-
-        const data = await presignResponse.json()
-        if (typeof data?.url !== 'string' || !SAFE_HTTP_URL_REGEX.test(data.url)) {
-          throw new Error(uiM('avatar_upload_get_url_failed'))
-        }
-        targetUrl = data.url
-      }
-
-      // 上传文件
-      const response = await fetch(targetUrl!, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': file.type,
-          ...headers,
-        },
-        body: file,
+      const result = await uploadHandler(file, {
+        signal: controller.signal,
+        onProgress: () => {},
       })
-
-      if (!response.ok) {
+      if (!result.url || !isSafePreviewUrl(result.url)) {
         throw new Error(uiM('avatar_upload_failed'))
       }
 
-      // 获取最终 URL
-      let finalUrl = targetUrl!.split('?')[0]
-      let responseUrl: string | undefined
-
-      try {
-        const data = await response.clone().json()
-        if (typeof data?.url === 'string') {
-          responseUrl = data.url
-        }
-      }
-      catch {
-      // 响应不是 JSON
-      }
-
-      if (responseUrl) {
-        if (!isSafePreviewUrl(responseUrl)) {
-          throw new Error(uiM('avatar_upload_failed'))
-        }
-
-        finalUrl = responseUrl
-      }
-
-      if (!isSafePreviewUrl(finalUrl)) {
-        throw new Error(uiM('avatar_upload_failed'))
-      }
-
-      replaceAvatarValue(finalUrl)
+      replaceAvatarValue(result.url)
     }
     catch (error) {
+      // 被后续选择替换的请求不得覆盖新请求的 loading 状态或触发旧错误提示。
+      if (activeUpload !== controller) {
+        return
+      }
       const message = error instanceof Error ? error.message : uiM('avatar_upload_failed')
       onerror?.(message)
     }
     finally {
-      loading = false
+      if (activeUpload === controller) {
+        activeUpload = null
+        loading = false
+      }
     }
   }
 

package/dist/components/scenes/storage/FileUpload.svelte

@@ -2,7 +2,7 @@
   =============================================================================
   @h-ai/ui - FileUpload 组件
   =============================================================================
-  文件上传组件，支持签名 URL 直传和多文件上传
+  文件上传组件，负责文件选择、校验、进度与列表展示
 
   使用 Svelte 5 Runes ($props, $state, $derived)
   使用 primitives 组件：Progress, IconButton
@@ -18,7 +18,6 @@
   import IconButton from '../../primitives/IconButton.svelte'
   import Progress from '../../primitives/Progress.svelte'
 
-  const SAFE_HTTP_URL_REGEX = /^https?:\/\//i
   const MAX_PARALLEL_UPLOADS = 3
 
   const {
@@ -27,9 +26,7 @@
     maxFiles = 1,
     multiple = false,
     disabled = false,
-    uploadUrl = '',
-    presignUrl = '',
-    headers = {},
+    uploadHandler,
     autoUpload = true,
     showList = true,
     dragDrop = true,
@@ -45,7 +42,7 @@
   let files = $state<UploadFile[]>([])
   let isDragging = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
-  const activeRequests = new SvelteMap<string, XMLHttpRequest>()
+  const activeRequests = new SvelteMap<string, AbortController>()
 
   const containerClass = $derived(
     cn(
@@ -101,20 +98,16 @@
     return null
   }
 
-  function registerActiveRequest(fileId: string, xhr: XMLHttpRequest): void {
-    activeRequests.set(fileId, xhr)
+  function registerActiveRequest(fileId: string, controller: AbortController): void {
+    activeRequests.set(fileId, controller)
   }
 
-  function clearActiveRequest(fileId: string, xhr?: XMLHttpRequest): void {
+  function clearActiveRequest(fileId: string, controller?: AbortController): void {
     const current = activeRequests.get(fileId)
-    if (!current || (xhr && current !== xhr)) {
+    if (!current || (controller && current !== controller)) {
       return
     }
 
-    current.upload.onprogress = null
-    current.onload = null
-    current.onerror = null
-    current.onabort = null
     activeRequests.delete(fileId)
   }
 
@@ -124,8 +117,8 @@
       return
     }
 
-    clearActiveRequest(fileId, current)
     current.abort()
+    activeRequests.delete(fileId)
   }
 
   function abortAllActiveRequests(): void {
@@ -198,89 +191,32 @@
 
   // 上传单个文件
   async function uploadFile(uploadFile: UploadFile) {
-    if (!uploadUrl && !presignUrl) {
-      uploadFile.error = uiM('file_upload_no_url')
-      uploadFile.state = 'error'
+    if (!uploadHandler) {
       return
     }
 
     uploadFile.state = 'uploading'
     files = [...files]
 
-    let xhr: XMLHttpRequest | undefined
+    const controller = new AbortController()
+    registerActiveRequest(uploadFile.id, controller)
 
     try {
-      let targetUrl = uploadUrl
-
-      // 如果配置了签名 URL，先获取
-      if (presignUrl) {
-        const presignResponse = await fetch(presignUrl, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            ...headers,
-          },
-          body: JSON.stringify({
-            filename: uploadFile.name,
-            contentType: uploadFile.type,
-            size: uploadFile.size,
-          }),
-        })
-
-        if (!presignResponse.ok) {
-          throw new Error(uiM('file_upload_get_url_failed'))
-        }
+      const result = await uploadHandler(uploadFile.file, {
+        signal: controller.signal,
+        onProgress(progress) {
+          uploadFile.progress = Math.max(0, Math.min(100, Math.round(progress)))
+          files = [...files]
+        },
+      })
 
-        const { url } = await presignResponse.json()
-        if (!SAFE_HTTP_URL_REGEX.test(url)) {
-          throw new Error(uiM('file_upload_get_url_failed'))
-        }
-        targetUrl = url
+      if (controller.signal.aborted) {
+        return
       }
 
-      // 上传文件
-      xhr = new XMLHttpRequest()
-      registerActiveRequest(uploadFile.id, xhr)
-      const activeXhr = xhr
-
-      await new Promise<void>((resolve, reject) => {
-        activeXhr.upload.onprogress = (e) => {
-          if (e.lengthComputable) {
-            uploadFile.progress = Math.round((e.loaded / e.total) * 100)
-            files = [...files]
-          }
-        }
-
-        activeXhr.onload = () => {
-          if (activeXhr.status >= 200 && activeXhr.status < 300) {
-            uploadFile.state = 'success'
-            uploadFile.progress = 100
-            try {
-              uploadFile.response = JSON.parse(activeXhr.responseText)
-            }
-            catch {
-              uploadFile.response = activeXhr.responseText
-            }
-            resolve()
-          }
-          else {
-            reject(new Error(`${uiM('file_upload_failed')}: ${activeXhr.statusText}`))
-          }
-        }
-
-        activeXhr.onerror = () => reject(new Error(uiM('file_upload_network_error')))
-        activeXhr.onabort = () => reject(new DOMException('Upload aborted', 'AbortError'))
-
-        activeXhr.open('PUT', targetUrl!)
-        activeXhr.setRequestHeader('Content-Type', uploadFile.type || 'application/octet-stream')
-
-        for (const [key, value] of Object.entries(headers)) {
-          activeXhr.setRequestHeader(key, value)
-        }
-
-        activeXhr.send(uploadFile.file)
-      })
-
+      uploadFile.state = 'success'
+      uploadFile.progress = 100
+      uploadFile.response = result.response ?? result.url
       onupload?.(uploadFile)
     }
     catch (error) {
@@ -293,7 +229,7 @@
       onerror?.(uploadFile.error)
     }
     finally {
-      clearActiveRequest(uploadFile.id, xhr)
+      clearActiveRequest(uploadFile.id, controller)
     }
 
     files = [...files]

package/dist/components/scenes/storage/ImageUpload.svelte

@@ -18,15 +18,14 @@
   import Spinner from '../../primitives/Spinner.svelte'
 
   const SAFE_HTTP_URL_REGEX = /^https?:\/\//i
+  const SAFE_RELATIVE_URL_REGEX = /^(?:\/(?!\/)|\.\.?\/)/
 
   let {
     value = $bindable(''),
     accept = 'image/*',
     maxSize = 5 * 1024 * 1024, // 5MB
     disabled = false,
-    uploadUrl = '',
-    presignUrl = '',
-    headers = {},
+    uploadHandler,
     placeholder,
     aspectRatio = '',
     width = '',
@@ -40,6 +39,8 @@
   const dataAttributes = $derived(getDataAttributes(restProps))
   let loading = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
+  let activeUpload: AbortController | null = null
+  let localPreviewUrl: string | null = null
   let previewUrl = $derived(value)
 
   const containerClass = $derived(
@@ -84,100 +85,80 @@
     return null
   }
 
+  function isSafePreviewUrl(url: string): boolean {
+    return SAFE_HTTP_URL_REGEX.test(url) || SAFE_RELATIVE_URL_REGEX.test(url)
+  }
+
+  $effect(() => {
+    return () => {
+      activeUpload?.abort()
+      if (localPreviewUrl)
+        URL.revokeObjectURL(localPreviewUrl)
+    }
+  })
+
   // 上传文件
   async function uploadFile(file: File) {
+    activeUpload?.abort()
+    const controller = new AbortController()
+    activeUpload = controller
     loading = true
 
     // 释放旧的 Blob URL
-    if (previewUrl && previewUrl.startsWith('blob:')) {
-      URL.revokeObjectURL(previewUrl)
+    if (localPreviewUrl) {
+      URL.revokeObjectURL(localPreviewUrl)
+      localPreviewUrl = null
     }
 
     try {
       // 先创建本地预览
-      previewUrl = URL.createObjectURL(file)
+      localPreviewUrl = URL.createObjectURL(file)
+      previewUrl = localPreviewUrl
 
-      if (!uploadUrl && !presignUrl) {
-        // 没有上传地址，只做本地预览
+      if (!uploadHandler) {
+        // 未提供上传处理器时，仅保留本地预览。
         value = previewUrl
         onchange?.(previewUrl)
         return
       }
 
-      let targetUrl = uploadUrl
-
-      // 如果配置了签名 URL，先获取
-      if (presignUrl) {
-        const presignResponse = await fetch(presignUrl, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            ...headers,
-          },
-          body: JSON.stringify({
-            filename: file.name,
-            contentType: file.type,
-            size: file.size,
-          }),
-        })
-
-        if (!presignResponse.ok) {
-          throw new Error(uiM('image_upload_get_url_failed'))
-        }
-
-        const data = await presignResponse.json()
-        targetUrl = data.url
-      }
-
-      // 安全检查：验证上传 URL 协议
-      if (targetUrl && !SAFE_HTTP_URL_REGEX.test(targetUrl)) {
-        throw new Error(uiM('image_upload_failed'))
-      }
-
-      // 上传文件
-      const response = await fetch(targetUrl!, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': file.type,
-          ...headers,
-        },
-        body: file,
+      const result = await uploadHandler(file, {
+        signal: controller.signal,
+        onProgress: () => {},
       })
-
-      if (!response.ok) {
+      if (!result.url || !isSafePreviewUrl(result.url)) {
         throw new Error(uiM('image_upload_failed'))
       }
 
-      // 获取最终 URL
-      let finalUrl = targetUrl!.split('?')[0] // 移除签名参数
-
-      try {
-        const data = await response.json()
-        if (data.url) {
-          finalUrl = data.url
-        }
-      }
-      catch {
-      // 响应不是 JSON，使用 targetUrl
-      }
-
-      value = finalUrl
+      value = result.url
       // 释放 Blob URL（已有最终 URL）
-      if (previewUrl && previewUrl.startsWith('blob:')) {
-        URL.revokeObjectURL(previewUrl)
+      if (localPreviewUrl) {
+        URL.revokeObjectURL(localPreviewUrl)
+        localPreviewUrl = null
       }
-      previewUrl = finalUrl
-      onchange?.(finalUrl)
+      previewUrl = result.url
+      onchange?.(result.url)
     }
     catch (error) {
+      // 被后续选择替换的请求不得覆盖新请求的预览与 loading 状态。
+      if (activeUpload !== controller) {
+        return
+      }
       const message = error instanceof Error ? error.message : uiM('image_upload_failed')
       onerror?.(message)
       // 清除预览
+      if (localPreviewUrl) {
+        URL.revokeObjectURL(localPreviewUrl)
+        localPreviewUrl = null
+      }
       previewUrl = ''
       value = ''
     }
     finally {
-      loading = false
+      if (activeUpload === controller) {
+        activeUpload = null
+        loading = false
+      }
     }
   }
 
@@ -202,6 +183,11 @@
 
   function handleRemove(e: MouseEvent) {
     e.stopPropagation()
+    activeUpload?.abort()
+    if (localPreviewUrl) {
+      URL.revokeObjectURL(localPreviewUrl)
+      localPreviewUrl = null
+    }
     value = ''
     previewUrl = ''
     onchange?.('')

package/dist/components/scenes/types.d.ts

@@ -335,6 +335,26 @@ export interface UploadFile {
     /** 上传响应 */
     response?: unknown;
 }
+/** 上传处理器上下文 */
+export interface UploadHandlerContext {
+    /** 组件销毁、文件移除或重试时触发的取消信号 */
+    signal: AbortSignal;
+    /** 汇报 0-100 的上传进度 */
+    onProgress: (progress: number) => void;
+}
+/** 上传处理结果 */
+export interface UploadHandlerResult {
+    /** 可展示的最终文件 URL（图片/头像上传必须返回） */
+    url?: string;
+    /** 业务层原始响应（回传到 UploadFile.response） */
+    response?: unknown;
+}
+/**
+ * 应用层上传处理器。
+ *
+ * UI 组件只管理选择、校验、进度和预览；签名 URL、认证头与上传协议由应用服务层实现。
+ */
+export type UploadHandler = (file: File, context: UploadHandlerContext) => Promise<UploadHandlerResult>;
 /**
  * 文件上传属性
  */
@@ -349,12 +369,8 @@ export interface FileUploadProps extends DataAttributes {
     multiple?: boolean;
     /** 是否禁用 */
     disabled?: boolean;
-    /** 上传地址 */
-    uploadUrl?: string;
-    /** 签名 URL 地址 */
-    presignUrl?: string;
-    /** 请求头 */
-    headers?: Record<string, string>;
+    /** 应用层上传处理器；未提供时组件仅选择文件并保持 pending */
+    uploadHandler?: UploadHandler;
     /** 是否自动上传 */
     autoUpload?: boolean;
     /** 是否显示文件列表 */
@@ -432,12 +448,8 @@ export interface ImageUploadProps extends DataAttributes {
     maxSize?: number;
     /** 是否禁用 */
     disabled?: boolean;
-    /** 上传地址 */
-    uploadUrl?: string;
-    /** 签名 URL 地址 */
-    presignUrl?: string;
-    /** 请求头 */
-    headers?: Record<string, string>;
+    /** 应用层上传处理器；未提供时仅生成本地预览 */
+    uploadHandler?: UploadHandler;
     /** 占位文本 */
     placeholder?: string;
     /** 宽高比 */
@@ -467,12 +479,8 @@ export interface AvatarUploadProps extends DataAttributes {
     maxSize?: number;
     /** 是否禁用 */
     disabled?: boolean;
-    /** 上传地址 */
-    uploadUrl?: string;
-    /** 签名 URL 地址 */
-    presignUrl?: string;
-    /** 请求头 */
-    headers?: Record<string, string>;
+    /** 应用层上传处理器；未提供时仅生成本地预览 */
+    uploadHandler?: UploadHandler;
     /** 默认文字（没有图片时显示） */
     fallback?: string;
     /** 自定义类名 */

package/dist/internal/icon-safety.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 校验 IconButton 字符串图标是否属于保守的内联 SVG 子集。
+ *
+ * 字符串入口只服务由应用代码内置的简单 path/circle 等图标。涉及链接、外部资源、
+ * CSS、动画或可执行事件的 SVG 一律拒绝；复杂图标应使用 Svelte Snippet。
+ */
+export declare function sanitizeInlineSvg(markup: string): string;

package/dist/internal/icon-safety.js

@@ -0,0 +1,33 @@
+const unsafeSvgElements = new Set([
+    'a',
+    'script',
+    'style',
+    'foreignobject',
+    'iframe',
+    'object',
+    'embed',
+    'link',
+    'meta',
+    'image',
+    'use',
+    'animate',
+    'animatemotion',
+    'animatetransform',
+    'set',
+]);
+/**
+ * 校验 IconButton 字符串图标是否属于保守的内联 SVG 子集。
+ *
+ * 字符串入口只服务由应用代码内置的简单 path/circle 等图标。涉及链接、外部资源、
+ * CSS、动画或可执行事件的 SVG 一律拒绝；复杂图标应使用 Svelte Snippet。
+ */
+export function sanitizeInlineSvg(markup) {
+    const trimmed = markup.trim();
+    if (!trimmed || !/^<svg(?:\s[^>]*)?>[\s\S]*<\/svg>$/i.test(trimmed))
+        return '';
+    const hasUnsafeElement = [...trimmed.matchAll(/<\s*([a-z][\w-]*)\b/gi)]
+        .some(([, tagName]) => tagName && unsafeSvgElements.has(tagName.toLowerCase()));
+    const hasUnsafeAttribute = /\s(?:on[a-z]+|style|href|xlink:href|src)\s*=/i.test(trimmed);
+    const hasExternalReference = /url\s*\(|@import|javascript:|vbscript:|data:text\/html|<\s*!/i.test(trimmed);
+    return hasUnsafeElement || hasUnsafeAttribute || hasExternalReference ? '' : trimmed;
+}

package/dist/messages/en-US.json

@@ -25,6 +25,8 @@
   "combobox_remove": "Remove",
   "data_table_actions": "Actions",
   "data_table_empty": "No data",
+  "chart_loading": "Loading chart",
+  "chart_empty": "No data",
   "confirm_title": "Confirm",
   "confirm_message": "Are you sure you want to proceed?",
   "confirm_ok": "Confirm",
@@ -49,7 +51,6 @@
   "image_upload_max_size_hint": "Max:",
   "image_upload_size_exceeded": "Image size exceeds limit (max",
   "image_upload_invalid_type": "Please select an image file",
-  "image_upload_get_url_failed": "Failed to get upload URL",
   "image_upload_failed": "Upload failed",
   "image_upload_preview_alt": "Preview",
   "image_upload_change": "Change image",
@@ -62,9 +63,6 @@
   "file_upload_files_unit": "files",
   "file_upload_success": "Upload successful",
   "file_upload_failed": "Upload failed",
-  "file_upload_network_error": "Network error",
-  "file_upload_no_url": "No upload URL configured",
-  "file_upload_get_url_failed": "Failed to get upload URL",
   "file_upload_size_exceeded": "File size exceeds limit (max",
   "file_upload_unsupported_type": "Unsupported file type",
   "file_upload_max_files_exceeded": "Maximum upload limit:",
@@ -78,7 +76,6 @@
   "avatar_upload_alt": "Avatar",
   "avatar_upload_size_exceeded": "Image size exceeds limit (max",
   "avatar_upload_invalid_type": "Please select an image file",
-  "avatar_upload_get_url_failed": "Failed to get upload URL",
   "avatar_upload_failed": "Upload failed",
   "user_profile_avatar": "Avatar",
   "user_profile_username": "Username",