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

package/README.md

@@ -150,7 +150,7 @@ components/
 | `Spinner`        | 加载动画     | `size`, `variant`                                                  |
 | `Progress`       | 进度条       | `value`, `max`, `variant`, `striped`, `animated`                   |
 
-### 组合组件 Compounds（33 个）
+### 组合组件 Compounds（36 个）
 
 #### 表单
 
@@ -212,10 +212,10 @@ components/
 | 组件         | 描述     | 主要属性                                     |
 | ------------ | -------- | -------------------------------------------- |
 | `Tabs`       | 标签页   | `items`, `active`, `type`, `size`            |
-| `Pagination` | 分页（统一 table 风格） | `page`, `total`, `pageSize`, `showTotal`, `showJumper`, `showSizeChanger` |
+| `Pagination` | 分页（统一 table 风格） | `page`, `total`, `pageSize`, `showTotal`, `showJumper`, `showSizeChanger`, `showPageInfo`, `showFirstLast` |
 | `Breadcrumb` | 面包屑   | `items`, `separator`                         |
 | `Steps`      | 步骤条   | `items`, `current`, `direction`, `clickable` |
-| `Dropdown`   | 下拉菜单 | `items`, `trigger`, `position`               |
+| `Dropdown`   | 下拉菜单 | `items`, `trigger`, `triggerClass`, `position` |
 | `Tooltip`    | 提示     | `content`, `position`, `delay`               |
 
 #### 状态占位
@@ -232,7 +232,7 @@ components/
 | ------------ | -------- | ------------------------------------------- |
 | `PageHeader` | 页面头部 | `title`, `description`，支持 `actions` 插槽 |
 
-### 场景组件 Scenes（33 个）
+### 场景组件 Scenes（34 个）
 
 #### App 应用级（7 个）
 
@@ -264,11 +264,13 @@ components/
 
 | 组件           | 描述     | 主要属性                                                 |
 | -------------- | -------- | -------------------------------------------------------- |
-| `FileUpload`   | 文件上传 | `accept`, `maxSize`, `maxFiles`, `multiple`, `uploadUrl` |
-| `ImageUpload`  | 图片上传 | `value`, `accept`, `maxSize`, `aspectRatio`              |
-| `AvatarUpload` | 头像上传 | `value`, `size`, `maxSize`, `fallback`                   |
+| `FileUpload`   | 文件上传 | `accept`, `maxSize`, `maxFiles`, `multiple`, `uploadHandler` |
+| `ImageUpload`  | 图片上传 | `value`, `accept`, `maxSize`, `aspectRatio`, `uploadHandler` |
+| `AvatarUpload` | 头像上传 | `value`, `size`, `maxSize`, `fallback`, `uploadHandler`      |
 | `FileList`     | 文件列表 | `files`, `layout`, `showDelete`, `showDownload`          |
 
+上传组件不内置 presign、请求头或 PUT/POST 协议。应用层通过 `uploadHandler(file, { signal, onProgress })` 调用自己的 service，并返回 `{ url?, response? }`；图片和头像上传需要返回可展示的 `url`。未提供 handler 时，`FileUpload` 只选择文件，图片/头像组件只生成本地预览。
+
 #### Crypto 加密展示（3 个）
 
 | 组件               | 描述     | 主要属性                                                |
@@ -352,7 +354,7 @@ components/
 > - 抽屉：`form.drawerSize` 选预设尺寸，`form.drawerWidth` 传任意 CSS 宽度（优先级更高）。
 > - 弹窗：`form.modalSize` 选预设尺寸，`form.modalWidth` / `form.modalHeight` 传任意 CSS 尺寸。
 >
-> `pagination` 配置分页栏（始终显示）：`showSizeChanger`、`pageSizeOptions`、`showJumper`、`showTotal` 默认开启。
+> `pagination` 配置分页栏（始终显示）：`showSizeChanger`、`pageSizeOptions`、`showJumper`、`showTotal` 默认开启；紧凑视图可用 `showPageInfo` 关闭页码文案、`showFirstLast` 关闭首页 / 末页按钮。
 >
 > `density` 配置列表密度：`'normal'`（默认）或 `'compact'`（紧凑）。它只影响列表行、行内操作、分页与创建/编辑/详情表单元素，不影响页头与筛选栏。
 

package/dist/components/compounds/Dropdown.svelte

@@ -13,6 +13,7 @@
     position = 'bottom',
     align = 'start',
     class: className = '',
+    triggerClass = '',
     onselect,
     children,
     ...restProps
@@ -61,6 +62,7 @@
   <BareButton
     tabindex={0}
     role='button'
+    class={triggerClass}
     onclick={toggleDropdown}
     onkeydown={e => e.key === 'Enter' && toggleDropdown()}
   >

package/dist/components/compounds/Modal.svelte

@@ -28,8 +28,6 @@
   }: ModalProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
-  // modalElement 持有 overlay 容器引用；不再依赖原生 `<dialog>`，改用 fixed + z-index 叠加。
-  let modalElement: HTMLDivElement | undefined = $state()
 
   // 标题区仅在显式提供标题或自定义 header 时出现；
   // 仅需关闭按钮的场景改为右上角悬浮按钮，避免业务侧额外占一整行头部。
@@ -93,27 +91,9 @@
     onclose?.()
   }
 
-  function handleDialogClick(event: MouseEvent) {
-    if (event.target === event.currentTarget && closeOnBackdrop) {
-      handleClose()
-    }
-  }
-
-  function handleViewportKeydown(event: KeyboardEvent) {
-    if (
-      event.target === event.currentTarget
-      && closeOnBackdrop
-      && (event.key === 'Enter' || event.key === ' ')
-    ) {
-      event.preventDefault()
-      handleClose()
-    }
-  }
-
 </script>
 
 <div {...dataAttributes}
-     bind:this={modalElement}
      class='hai-modal'
      style:display={open ? '' : 'none'}
      aria-hidden={open ? undefined : 'true'}
@@ -124,11 +104,19 @@
 >
   <div
     class='hai-modal__viewport'
-    tabindex='-1'
-    aria-label={uiM('common_close')}
-    onclick={handleDialogClick}
-    onkeydown={handleViewportKeydown}
   >
+    {#if closeOnBackdrop}
+      <button
+        type='button'
+        class='hai-modal__backdrop'
+        aria-label={uiM('common_close')}
+        tabindex='-1'
+        onclick={handleClose}
+      ></button>
+    {:else}
+      <div class='hai-modal__backdrop' aria-hidden='true'></div>
+    {/if}
+
     <div class={modalBoxClass} style={panelStyle}>
       {#if hasFloatingClose}
         <button
@@ -230,12 +218,22 @@
     place-items: center;
     padding: clamp(1rem, 2.6vw, 2rem);
     pointer-events: auto;
+  }
+
+  .hai-modal__backdrop {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
     background: rgb(15 23 42 / 0.26);
     background: color-mix(in srgb, var(--color-base-content) 15%, transparent);
     backdrop-filter: blur(2px);
   }
 
   .hai-modal__panel {
+    z-index: 1;
     width: var(--hai-modal-width, min(100%, 44rem));
     max-width: min(100%, calc(100vw - clamp(2rem, 5.2vw, 4rem)));
     height: var(--hai-modal-height, auto);

package/dist/components/compounds/Pagination.svelte

@@ -24,6 +24,8 @@
     showTotal = true,
     showJumper = false,
     showSizeChanger = false,
+    showPageInfo = true,
+    showFirstLast = true,
     pageSizeOptions = [10, 20, 50, 100],
     labels = {},
     class: className = '',
@@ -113,21 +115,27 @@
       </div>
     {/if}
 
-    <span class={tableTextClass}>{pageInfoText}</span>
+    {#if showPageInfo}
+      <span class={tableTextClass}>{pageInfoText}</span>
+    {/if}
 
     <div class='flex items-center gap-1'>
-      <BareButton class={navBtnClass} disabled={page === 1} onclick={() => goToPage(1)} ariaLabel='First page'>
-        <span class={cn('icon-[tabler--chevrons-left]', navIconClass)}></span>
-      </BareButton>
+      {#if showFirstLast}
+        <BareButton class={navBtnClass} disabled={page === 1} onclick={() => goToPage(1)} ariaLabel='First page'>
+          <span class={cn('icon-[tabler--chevrons-left]', navIconClass)}></span>
+        </BareButton>
+      {/if}
       <BareButton class={navBtnClass} disabled={page === 1} onclick={() => goToPage(page - 1)} ariaLabel='Previous page'>
         <span class={cn('icon-[tabler--chevron-left]', navIconClass)}></span>
       </BareButton>
       <BareButton class={navBtnClass} disabled={page === totalPages} onclick={() => goToPage(page + 1)} ariaLabel='Next page'>
         <span class={cn('icon-[tabler--chevron-right]', navIconClass)}></span>
       </BareButton>
-      <BareButton class={navBtnClass} disabled={page === totalPages} onclick={() => goToPage(totalPages)} ariaLabel='Last page'>
-        <span class={cn('icon-[tabler--chevrons-right]', navIconClass)}></span>
-      </BareButton>
+      {#if showFirstLast}
+        <BareButton class={navBtnClass} disabled={page === totalPages} onclick={() => goToPage(totalPages)} ariaLabel='Last page'>
+          <span class={cn('icon-[tabler--chevrons-right]', navIconClass)}></span>
+        </BareButton>
+      {/if}
     </div>
 
     {#if showJumper}

package/dist/components/compounds/Tabs.svelte

@@ -62,6 +62,7 @@
   {#each items as item (item.key)}
     <BareButton
       role='tab'
+      ariaSelected={active === item.key}
       class={cn('tab', active === item.key && 'tab-active')}
       disabled={item.disabled}
       onclick={() => handleSelect(item.key)}

package/dist/components/primitives/IconButton.svelte

@@ -9,11 +9,9 @@
 -->
 <script lang='ts'>
   import type { DataAttributes, IconButtonProps } from '../../types.js'
+  import { sanitizeInlineSvg } from '../../internal/icon-safety.js'
   import { cn, getDataAttributes, getSizeClass, getVariantClass } from '../../utils.js'
 
-  const SAFE_INLINE_SVG_REGEX = /^<svg[\s\S]*<\/svg>$/i
-  const UNSAFE_INLINE_SVG_REGEX = /<\s*(?:script|foreignObject|iframe|object|embed|link|meta|img)\b|\son[a-z]+\s*=|(?:href|xlink:href)\s*=\s*['"]\s*(?:javascript:|vbscript:|data:text\/html)/i
-
   const {
     icon,
     label = '',
@@ -72,18 +70,6 @@
     onclick?.(e)
   }
 
-  function sanitizeInlineSvg(markup: string): string {
-    const trimmed = markup.trim()
-    if (!trimmed) {
-      return ''
-    }
-
-    if (!SAFE_INLINE_SVG_REGEX.test(trimmed) || UNSAFE_INLINE_SVG_REGEX.test(trimmed)) {
-      return ''
-    }
-
-    return trimmed
-  }
 </script>
 
 {#if tooltip}

package/dist/components/primitives/Select.svelte

@@ -112,6 +112,8 @@
       document.addEventListener('click', handleClickOutside)
       return () => document.removeEventListener('click', handleClickOutside)
     }
+
+    return undefined
   })
 
   // 计算下拉层位置（fixed，基于触发器视口坐标；空间不足时向上翻转）

package/dist/components/scenes/crud/CrudPage.svelte

@@ -161,6 +161,8 @@
   const paginationShowSizeChanger = $derived(pagination.showSizeChanger !== false)
   const paginationShowJumper = $derived(pagination.showJumper !== false)
   const paginationShowTotal = $derived(pagination.showTotal !== false)
+  const paginationShowPageInfo = $derived(pagination.showPageInfo !== false)
+  const paginationShowFirstLast = $derived(pagination.showFirstLast !== false)
   const paginationPageSizeOptions = $derived(pagination.pageSizeOptions ?? [10, 20, 50, 100])
 
   // 视图状态
@@ -500,6 +502,8 @@
         showTotal={paginationShowTotal}
         showJumper={paginationShowJumper}
         showSizeChanger={paginationShowSizeChanger}
+        showPageInfo={paginationShowPageInfo}
+        showFirstLast={paginationShowFirstLast}
         pageSizeOptions={paginationPageSizeOptions}
         onchange={handlePageChange}
         onpagesizechange={handlePageSizeChange}

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/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

@@ -51,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",
@@ -64,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:",
@@ -80,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",

package/dist/messages/zh-CN.json

@@ -51,7 +51,6 @@
   "image_upload_max_size_hint": "最大：",
   "image_upload_size_exceeded": "图片大小超出限制（最大",
   "image_upload_invalid_type": "请选择图片文件",
-  "image_upload_get_url_failed": "获取上传地址失败",
   "image_upload_failed": "上传失败",
   "image_upload_preview_alt": "预览",
   "image_upload_change": "更换图片",
@@ -64,9 +63,6 @@
   "file_upload_files_unit": "个文件",
   "file_upload_success": "上传成功",
   "file_upload_failed": "上传失败",
-  "file_upload_network_error": "网络错误",
-  "file_upload_no_url": "未配置上传地址",
-  "file_upload_get_url_failed": "获取上传地址失败",
   "file_upload_size_exceeded": "文件大小超出限制（最大",
   "file_upload_unsupported_type": "不支持的文件类型",
   "file_upload_max_files_exceeded": "最多上传：",
@@ -80,7 +76,6 @@
   "avatar_upload_alt": "头像",
   "avatar_upload_size_exceeded": "图片大小超出限制（最大",
   "avatar_upload_invalid_type": "请选择图片文件",
-  "avatar_upload_get_url_failed": "获取上传地址失败",
   "avatar_upload_failed": "上传失败",
   "user_profile_avatar": "头像",
   "user_profile_username": "用户名",

package/dist/types.d.ts

@@ -599,6 +599,10 @@ export interface PaginationProps extends DataAttributes {
     showJumper?: boolean;
     /** 是否显示每页条数选择器 */
     showSizeChanger?: boolean;
+    /** 是否显示页码信息文案（如「第 1 / 5 页」，默认 true；紧凑视图可关闭） */
+    showPageInfo?: boolean;
+    /** 是否显示首页 / 末页跳转按钮（默认 true；紧凑视图可仅保留上一页 / 下一页） */
+    showFirstLast?: boolean;
     /** 每页条数候选项（配合 showSizeChanger，默认 [10, 20, 50, 100]） */
     pageSizeOptions?: number[];
     /** i18n 文案配置 */
@@ -727,6 +731,8 @@ export interface DropdownProps extends DataAttributes {
     align?: Alignment;
     /** 自定义类名 */
     class?: string;
+    /** 触发按钮类名 */
+    triggerClass?: string;
     /** 选择事件 */
     onselect?: (key: string) => void;
     /** 触发元素插槽 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.35",
+  "version": "0.1.0-alpha.36",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -52,7 +52,7 @@
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.35"
+    "@h-ai/core": "0.1.0-alpha.36"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",