@h-ai/ui 0.1.0-alpha.10

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

@@ -0,0 +1,402 @@
+<!--
+  =============================================================================
+  @h-ai/ui - FileUpload 组件
+  =============================================================================
+  文件上传组件，支持签名 URL 直传和多文件上传
+
+  使用 Svelte 5 Runes ($props, $state, $derived)
+  使用 primitives 组件：Progress, IconButton
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { FileUploadProps, UploadFile } from '../types.js'
+  import { uiM } from '../../../messages.js'
+  import { cn, generateId } from '../../../utils.js'
+  import BareInput from '../../primitives/BareInput.svelte'
+  import IconButton from '../../primitives/IconButton.svelte'
+  import Progress from '../../primitives/Progress.svelte'
+
+  const SAFE_HTTP_URL_REGEX = /^https?:\/\//i
+
+  const {
+    accept = '*',
+    maxSize = 10 * 1024 * 1024, // 10MB
+    maxFiles = 1,
+    multiple = false,
+    disabled = false,
+    uploadUrl = '',
+    presignUrl = '',
+    headers = {},
+    autoUpload = true,
+    showList = true,
+    dragDrop = true,
+    class: className = '',
+    onchange,
+    onupload,
+    onerror,
+    onremove,
+  }: FileUploadProps = $props()
+
+  let files = $state<UploadFile[]>([])
+  let isDragging = $state(false)
+  let inputElement = $state<HTMLInputElement | undefined>(undefined)
+
+  const containerClass = $derived(
+    cn(
+      'file-upload',
+      disabled && 'opacity-50 pointer-events-none',
+      className,
+    ),
+  )
+
+  const dropzoneClass = $derived(
+    cn(
+      'border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer',
+      isDragging ? 'border-primary bg-primary/10' : 'border-base-300 hover:border-primary',
+    ),
+  )
+
+  // 格式化文件大小
+  function formatSize(bytes: number): string {
+    if (bytes === 0)
+      return '0 B'
+    const k = 1024
+    const sizes = ['B', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
+  }
+
+  // 验证文件
+  function validateFile(file: File): string | null {
+    if (file.size > maxSize) {
+      return `${uiM('file_upload_size_exceeded')} ${formatSize(maxSize)}）`
+    }
+
+    if (accept !== '*') {
+      const acceptedTypes = accept.split(',').map(t => t.trim())
+      const fileType = file.type
+      const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`
+
+      const isAccepted = acceptedTypes.some((type) => {
+        if (type.startsWith('.')) {
+          return fileExt === type.toLowerCase()
+        }
+        if (type.endsWith('/*')) {
+          return fileType.startsWith(type.replace('/*', '/'))
+        }
+        return fileType === type
+      })
+
+      if (!isAccepted) {
+        return uiM('file_upload_unsupported_type')
+      }
+    }
+
+    return null
+  }
+
+  // 添加文件
+  async function addFiles(fileList: FileList | null) {
+    if (!fileList)
+      return
+
+    const newFiles: UploadFile[] = []
+
+    for (const file of Array.from(fileList)) {
+      if (files.length + newFiles.length >= maxFiles) {
+        onerror?.(`${uiM('file_upload_max_files_exceeded')} ${maxFiles} ${uiM('file_upload_files_unit')}`)
+        break
+      }
+
+      const error = validateFile(file)
+
+      const uploadFile: UploadFile = {
+        id: generateId('file'),
+        file,
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        state: error ? 'error' : 'pending',
+        progress: 0,
+        error: error || undefined,
+      }
+
+      newFiles.push(uploadFile)
+    }
+
+    files = [...files, ...newFiles]
+    onchange?.(files)
+
+    // 自动上传
+    if (autoUpload) {
+      for (const file of newFiles.filter(f => f.state === 'pending')) {
+        await uploadFile(file)
+      }
+    }
+  }
+
+  // 上传单个文件
+  async function uploadFile(uploadFile: UploadFile) {
+    if (!uploadUrl && !presignUrl) {
+      uploadFile.error = uiM('file_upload_no_url')
+      uploadFile.state = 'error'
+      return
+    }
+
+    uploadFile.state = 'uploading'
+    files = [...files]
+
+    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 { url } = await presignResponse.json()
+        if (!SAFE_HTTP_URL_REGEX.test(url)) {
+          throw new Error(uiM('file_upload_get_url_failed'))
+        }
+        targetUrl = url
+      }
+
+      // 上传文件
+      const xhr = new XMLHttpRequest()
+
+      await new Promise<void>((resolve, reject) => {
+        xhr.upload.onprogress = (e) => {
+          if (e.lengthComputable) {
+            uploadFile.progress = Math.round((e.loaded / e.total) * 100)
+            files = [...files]
+          }
+        }
+
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            uploadFile.state = 'success'
+            uploadFile.progress = 100
+            try {
+              uploadFile.response = JSON.parse(xhr.responseText)
+            }
+            catch {
+              uploadFile.response = xhr.responseText
+            }
+            resolve()
+          }
+          else {
+            reject(new Error(`${uiM('file_upload_failed')}: ${xhr.statusText}`))
+          }
+        }
+
+        xhr.onerror = () => reject(new Error(uiM('file_upload_network_error')))
+
+        xhr.open('PUT', targetUrl!)
+        xhr.setRequestHeader('Content-Type', uploadFile.type || 'application/octet-stream')
+
+        for (const [key, value] of Object.entries(headers)) {
+          xhr.setRequestHeader(key, value)
+        }
+
+        xhr.send(uploadFile.file)
+      })
+
+      onupload?.(uploadFile)
+    }
+    catch (error) {
+      uploadFile.state = 'error'
+      uploadFile.error = error instanceof Error ? error.message : uiM('file_upload_failed')
+      onerror?.(uploadFile.error)
+    }
+
+    files = [...files]
+  }
+
+  // 移除文件
+  function removeFile(id: string) {
+    const file = files.find(f => f.id === id)
+    if (file) {
+      files = files.filter(f => f.id !== id)
+      onremove?.(file)
+      onchange?.(files)
+    }
+  }
+
+  // 重试上传
+  async function retryUpload(id: string) {
+    const file = files.find(f => f.id === id)
+    if (file && file.state === 'error') {
+      file.state = 'pending'
+      file.error = undefined
+      file.progress = 0
+      files = [...files]
+      await uploadFile(file)
+    }
+  }
+
+  // 拖拽处理
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault()
+    if (dragDrop) {
+      isDragging = true
+    }
+  }
+
+  function handleDragLeave() {
+    isDragging = false
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault()
+    isDragging = false
+    if (dragDrop) {
+      addFiles(e.dataTransfer?.files || null)
+    }
+  }
+
+  function handleClick() {
+    inputElement?.click()
+  }
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    addFiles(e.currentTarget.files)
+    e.currentTarget.value = ''
+  }
+
+  /** 手动触发上传 */
+  export async function upload() {
+    for (const file of files.filter(f => f.state === 'pending')) {
+      await uploadFile(file)
+    }
+  }
+
+  /** 清空文件列表 */
+  export function clear() {
+    files = []
+    onchange?.(files)
+  }
+</script>
+
+<div class={containerClass}>
+  <!-- 上传区域 -->
+  <div
+    class={dropzoneClass}
+    role='button'
+    tabindex='0'
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
+    ondrop={handleDrop}
+    onclick={handleClick}
+    onkeydown={e => e.key === 'Enter' && handleClick()}
+  >
+    <BareInput
+      type='file'
+      class='hidden'
+      bind:inputRef={inputElement}
+      {accept}
+      {multiple}
+      {disabled}
+      onchange={handleChange}
+    />
+
+    <div class='flex flex-col items-center gap-2'>
+      <svg xmlns='http://www.w3.org/2000/svg' class='h-12 w-12 text-base-content/30' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12' />
+      </svg>
+      <div class='text-base-content/70'>
+        {#if dragDrop}
+          <span>{uiM('file_upload_drag_hint')}</span>
+        {/if}
+        <span class='text-primary'>{uiM('file_upload_click_to_select')}</span>
+      </div>
+      <div class='text-xs text-base-content/50'>
+        {#if accept !== '*'}
+          {uiM('file_upload_supported_formats')} {accept}，
+        {/if}
+        {uiM('file_upload_max_size')} {formatSize(maxSize)}
+        {#if maxFiles > 1}
+          ，{uiM('file_upload_max_files_hint')} {maxFiles} {uiM('file_upload_files_unit')}
+        {/if}
+      </div>
+    </div>
+  </div>
+
+  <!-- 文件列表 -->
+  {#if showList && files.length > 0}
+    <div class='mt-4 space-y-2'>
+      {#each files as file (file.id)}
+        <div class='flex items-center gap-3 p-3 bg-base-200 rounded-lg'>
+          <!-- 文件图标 -->
+          <div class='text-base-content/50'>
+            <svg xmlns='http://www.w3.org/2000/svg' class='h-8 w-8' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' />
+            </svg>
+          </div>
+
+          <!-- 文件信息 -->
+          <div class='flex-1 min-w-0'>
+            <div class='flex items-center gap-2'>
+              <span class='truncate font-medium'>{file.name}</span>
+              <span class='text-xs text-base-content/50'>{formatSize(file.size)}</span>
+            </div>
+
+            {#if file.state === 'uploading'}
+              <div class='mt-1'>
+                <Progress value={file.progress} max={100} size='xs' />
+                <span class='text-xs text-base-content/50'>{file.progress}%</span>
+              </div>
+            {:else if file.state === 'error'}
+              <div class='text-xs text-error mt-1'>{file.error}</div>
+            {:else if file.state === 'success'}
+              <div class='text-xs text-success mt-1'>{uiM('file_upload_success')}</div>
+            {/if}
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class='flex gap-1'>
+            {#if file.state === 'error'}
+              <IconButton
+                size='xs'
+                variant='ghost'
+                label={uiM('file_upload_retry')}
+                onclick={() => retryUpload(file.id)}
+              >
+                {#snippet children()}
+                  <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' />
+                  </svg>
+                {/snippet}
+              </IconButton>
+            {/if}
+            <IconButton
+              size='xs'
+              variant='ghost'
+              label={uiM('file_upload_remove')}
+              onclick={() => removeFile(file.id)}
+            >
+              {#snippet children()}
+                <svg xmlns='http://www.w3.org/2000/svg' class='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+                  <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12' />
+                </svg>
+              {/snippet}
+            </IconButton>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,7 @@
+import type { FileUploadProps } from '../types.js';
+declare const FileUpload: import("svelte").Component<FileUploadProps, {
+    upload: () => Promise<void>;
+    clear: () => void;
+}, "">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

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

@@ -0,0 +1,287 @@
+<!--
+  =============================================================================
+  @h-ai/ui - ImageUpload 组件
+  =============================================================================
+  图片上传组件，支持预览
+
+  使用 Svelte 5 Runes ($props, $state, $derived)
+  使用 primitives 组件：IconButton, Spinner
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { ImageUploadProps } from '../types.js'
+  import { uiM } from '../../../messages.js'
+  import { cn } from '../../../utils.js'
+  import BareInput from '../../primitives/BareInput.svelte'
+  import IconButton from '../../primitives/IconButton.svelte'
+  import Spinner from '../../primitives/Spinner.svelte'
+
+  const SAFE_HTTP_URL_REGEX = /^https?:\/\//i
+
+  let {
+    value = $bindable(''),
+    accept = 'image/*',
+    maxSize = 5 * 1024 * 1024, // 5MB
+    disabled = false,
+    uploadUrl = '',
+    presignUrl = '',
+    headers = {},
+    placeholder,
+    aspectRatio = '',
+    width = '',
+    height = '',
+    class: className = '',
+    onchange,
+    onerror,
+  }: ImageUploadProps = $props()
+
+  let loading = $state(false)
+  let inputElement = $state<HTMLInputElement | undefined>(undefined)
+  let previewUrl = $state('')
+
+  // 当 value 变化时更新预览
+  $effect(() => {
+    previewUrl = value
+  })
+
+  const containerClass = $derived(
+    cn(
+      'image-upload relative overflow-hidden rounded-lg border-2 border-dashed transition-colors',
+      !disabled && 'cursor-pointer hover:border-primary',
+      disabled && 'opacity-50 cursor-not-allowed',
+      previewUrl ? 'border-transparent' : 'border-base-300',
+      className,
+    ),
+  )
+
+  const containerStyle = $derived(
+    [
+      width && `width: ${width}`,
+      height && `height: ${height}`,
+      aspectRatio && `aspect-ratio: ${aspectRatio}`,
+      !width && !height && !aspectRatio && 'width: 200px; height: 200px',
+    ].filter(Boolean).join('; '),
+  )
+
+  // 格式化文件大小
+  function formatSize(bytes: number): string {
+    if (bytes === 0)
+      return '0 B'
+    const k = 1024
+    const sizes = ['B', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
+  }
+
+  // 验证文件
+  function validateFile(file: File): string | null {
+    if (file.size > maxSize) {
+      return `${uiM('image_upload_size_exceeded')} ${formatSize(maxSize)}）`
+    }
+
+    if (!file.type.startsWith('image/')) {
+      return uiM('image_upload_invalid_type')
+    }
+
+    return null
+  }
+
+  // 上传文件
+  async function uploadFile(file: File) {
+    loading = true
+
+    // 释放旧的 Blob URL
+    if (previewUrl && previewUrl.startsWith('blob:')) {
+      URL.revokeObjectURL(previewUrl)
+    }
+
+    try {
+      // 先创建本地预览
+      previewUrl = URL.createObjectURL(file)
+
+      if (!uploadUrl && !presignUrl) {
+        // 没有上传地址，只做本地预览
+        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,
+      })
+
+      if (!response.ok) {
+        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
+      // 释放 Blob URL（已有最终 URL）
+      if (previewUrl && previewUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(previewUrl)
+      }
+      previewUrl = finalUrl
+      onchange?.(finalUrl)
+    }
+    catch (error) {
+      const message = error instanceof Error ? error.message : uiM('image_upload_failed')
+      onerror?.(message)
+      // 清除预览
+      previewUrl = ''
+      value = ''
+    }
+    finally {
+      loading = false
+    }
+  }
+
+  function handleClick() {
+    if (!disabled) {
+      inputElement?.click()
+    }
+  }
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    const file = e.currentTarget.files?.[0]
+    if (file) {
+      const error = validateFile(file)
+      if (error) {
+        onerror?.(error)
+        return
+      }
+      uploadFile(file)
+    }
+    e.currentTarget.value = ''
+  }
+
+  function handleRemove(e: MouseEvent) {
+    e.stopPropagation()
+    value = ''
+    previewUrl = ''
+    onchange?.('')
+  }
+</script>
+
+<div
+  class={containerClass}
+  style={containerStyle}
+  role='button'
+  tabindex='0'
+  onclick={handleClick}
+  onkeydown={e => e.key === 'Enter' && handleClick()}
+>
+  <BareInput
+    type='file'
+    class='hidden'
+    bind:inputRef={inputElement}
+    {accept}
+    {disabled}
+    onchange={handleChange}
+  />
+
+  {#if previewUrl}
+    <!-- 预览图 -->
+    <img
+      src={previewUrl}
+      alt={uiM('image_upload_preview_alt')}
+      class='w-full h-full object-cover'
+    />
+
+    <!-- 遮罩层 -->
+    {#if !disabled}
+      <div class='absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center gap-2'>
+        {#if loading}
+          <Spinner size='md' class='text-white' />
+        {:else}
+          <IconButton
+            size='sm'
+            variant='ghost'
+            label={uiM('image_upload_change')}
+            onclick={handleClick}
+            class='text-white'
+          >
+            {#snippet children()}
+              <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z' />
+              </svg>
+            {/snippet}
+          </IconButton>
+          <IconButton
+            size='sm'
+            variant='ghost'
+            label={uiM('image_upload_delete')}
+            onclick={handleRemove}
+            class='text-white'
+          >
+            {#snippet children()}
+              <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16' />
+              </svg>
+            {/snippet}
+          </IconButton>
+        {/if}
+      </div>
+    {/if}
+  {:else}
+    <!-- 占位符 -->
+    <div class='w-full h-full flex flex-col items-center justify-center text-base-content/50 p-4'>
+      {#if loading}
+        <Spinner size='lg' />
+      {:else}
+        <svg xmlns='http://www.w3.org/2000/svg' class='h-12 w-12 mb-2' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+          <path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z' />
+        </svg>
+        <span class='text-sm text-center'>{placeholder || uiM('image_upload_placeholder')}</span>
+        <span class='text-xs mt-1'>{uiM('image_upload_max_size_hint')} {formatSize(maxSize)}</span>
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { ImageUploadProps } from '../types.js';
+declare const ImageUpload: import("svelte").Component<ImageUploadProps, {}, "value">;
+type ImageUpload = ReturnType<typeof ImageUpload>;
+export default ImageUpload;