@h-ai/ui 0.1.0-alpha5

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

@@ -0,0 +1,218 @@
+<!--
+  =============================================================================
+  @h-ai/ui - AvatarUpload 组件
+  =============================================================================
+  头像上传组件（圆形）
+
+  使用 Svelte 5 Runes ($props, $state, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { AvatarUploadProps } from '../types.js'
+  import { uiM } from '../../../messages.js'
+  import { cn } from '../../../utils.js'
+  import BareInput from '../../primitives/BareInput.svelte'
+
+  let {
+    value = $bindable(''),
+    size = 'lg',
+    accept = 'image/*',
+    maxSize = 2 * 1024 * 1024, // 2MB
+    disabled = false,
+    uploadUrl = '',
+    presignUrl = '',
+    headers = {},
+    fallback = '',
+    class: className = '',
+    onchange,
+    onerror,
+  }: AvatarUploadProps = $props()
+
+  let loading = $state(false)
+  let inputElement = $state<HTMLInputElement | undefined>(undefined)
+
+  const sizeClass = $derived({
+    'xs': 'w-8 h-8',
+    'sm': 'w-12 h-12',
+    'md': 'w-16 h-16',
+    'lg': 'w-24 h-24',
+    'xl': 'w-32 h-32',
+    '2xl': 'w-36 h-36',
+    '3xl': 'w-40 h-40',
+    '4xl': 'w-44 h-44',
+  }[size])
+
+  const containerClass = $derived(
+    cn(
+      'avatar-upload relative rounded-full overflow-hidden',
+      !disabled && 'cursor-pointer group',
+      disabled && 'opacity-50 cursor-not-allowed',
+      sizeClass,
+      className,
+    ),
+  )
+
+  // 格式化文件大小
+  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('avatar_upload_size_exceeded')} ${formatSize(maxSize)}）`
+    }
+
+    if (!file.type.startsWith('image/')) {
+      return uiM('avatar_upload_invalid_type')
+    }
+
+    return null
+  }
+
+  // 上传文件
+  async function uploadFile(file: File) {
+    loading = true
+
+    try {
+      if (!uploadUrl && !presignUrl) {
+        // 没有上传地址，创建本地预览
+        value = URL.createObjectURL(file)
+        onchange?.(value)
+        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()
+        targetUrl = data.url
+      }
+
+      // 上传文件
+      const response = await fetch(targetUrl!, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': file.type,
+          ...headers,
+        },
+        body: file,
+      })
+
+      if (!response.ok) {
+        throw new Error(uiM('avatar_upload_failed'))
+      }
+
+      // 获取最终 URL
+      let finalUrl = targetUrl!.split('?')[0]
+
+      try {
+        const data = await response.json()
+        if (data.url) {
+          finalUrl = data.url
+        }
+      }
+      catch {
+      // 响应不是 JSON
+      }
+
+      value = finalUrl
+      onchange?.(finalUrl)
+    }
+    catch (error) {
+      const message = error instanceof Error ? error.message : uiM('avatar_upload_failed')
+      onerror?.(message)
+    }
+    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 = ''
+  }
+</script>
+
+<div
+  class={containerClass}
+  role='button'
+  tabindex='0'
+  onclick={handleClick}
+  onkeydown={e => e.key === 'Enter' && handleClick()}
+>
+  <BareInput
+    type='file'
+    class='hidden'
+    bind:inputRef={inputElement}
+    {accept}
+    {disabled}
+    onchange={handleChange}
+  />
+
+  <!-- 头像图片或占位符 -->
+  <div class='w-full h-full bg-neutral flex items-center justify-center text-neutral-content'>
+    {#if value}
+      <img
+        src={value}
+        alt={uiM('avatar_upload_alt')}
+        class='w-full h-full object-cover'
+      />
+    {:else}
+      <span class='text-2xl font-bold'>
+        {fallback || '?'}
+      </span>
+    {/if}
+  </div>
+
+  <!-- 遮罩层 -->
+  {#if !disabled}
+    <div class='absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center'>
+      {#if loading}
+        <span class='loading loading-spinner text-white'></span>
+      {:else}
+        <svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6 text-white' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+          <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z' />
+          <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 13a3 3 0 11-6 0 3 3 0 016 0z' />
+        </svg>
+      {/if}
+    </div>
+  {/if}
+</div>

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

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

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

@@ -0,0 +1,260 @@
+<!--
+  =============================================================================
+  @h-ai/ui - FileList 组件
+  =============================================================================
+  文件列表展示组件
+
+  使用 Svelte 5 Runes ($props, $state, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { FileItem, FileListProps } from '../types.js'
+  import { uiM } from '../../../messages.js'
+  import { cn } from '../../../utils.js'
+  import Button from '../../primitives/Button.svelte'
+  import IconButton from '../../primitives/IconButton.svelte'
+
+  const {
+    files = [],
+    loading = false,
+    showPreview = true,
+    showDownload = true,
+    showDelete = true,
+    showSize = true,
+    showDate = true,
+    layout = 'list',
+    class: className = '',
+    ondownload,
+    ondelete,
+    onpreview,
+  }: FileListProps = $props()
+
+  let previewFile = $state<FileItem | null>(null)
+
+  const containerClass = $derived(
+    cn(
+      'file-list',
+      layout === 'grid' && 'grid grid-cols-2 md:grid-cols-4 gap-4',
+      layout === 'list' && 'space-y-2',
+      className,
+    ),
+  )
+
+  // 格式化文件大小
+  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 formatDate(date: Date | string): string {
+    const d = typeof date === 'string' ? new Date(date) : date
+    return d.toLocaleDateString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  // 获取文件图标
+  function getFileIcon(type: string): string {
+    if (type.startsWith('image/'))
+      return '🖼️'
+    if (type.startsWith('video/'))
+      return '🎬'
+    if (type.startsWith('audio/'))
+      return '🎵'
+    if (type.includes('pdf'))
+      return '📄'
+    if (type.includes('word') || type.includes('document'))
+      return '📝'
+    if (type.includes('excel') || type.includes('spreadsheet'))
+      return '📊'
+    if (type.includes('zip') || type.includes('rar') || type.includes('archive'))
+      return '📦'
+    return '📁'
+  }
+
+  // 是否可预览
+  function canPreview(file: FileItem): boolean {
+    return file.type.startsWith('image/') || file.type.startsWith('video/') || file.type === 'application/pdf'
+  }
+
+  function handlePreview(file: FileItem) {
+    if (onpreview) {
+      onpreview(file)
+    }
+    else {
+      previewFile = file
+    }
+  }
+
+  function handleDownload(file: FileItem) {
+    ondownload?.(file)
+  }
+
+  function handleDelete(file: FileItem) {
+    ondelete?.(file)
+  }
+
+  function closePreview() {
+    previewFile = null
+  }
+</script>
+
+{#if loading}
+  <div class='flex justify-center py-8'>
+    <span class='loading loading-spinner loading-lg'></span>
+  </div>
+{:else if files.length === 0}
+  <div class='text-center py-8 text-base-content/50'>
+    <svg xmlns='http://www.w3.org/2000/svg' class='h-16 w-16 mx-auto mb-4 opacity-30' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+      <path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z' />
+    </svg>
+    <p>{uiM('file_list_no_files')}</p>
+  </div>
+{:else}
+  <div class={containerClass}>
+    {#each files as file (file.id)}
+      {#if layout === 'grid'}
+        <!-- 网格布局 -->
+        <div class='card bg-base-200 overflow-hidden'>
+          {#if file.type.startsWith('image/') && file.url}
+            <figure class='aspect-square bg-base-300'>
+              <img src={file.url} alt={file.name} class='object-cover w-full h-full' />
+            </figure>
+          {:else}
+            <figure class='aspect-square bg-base-300 flex items-center justify-center'>
+              <span class='text-4xl'>{getFileIcon(file.type)}</span>
+            </figure>
+          {/if}
+          <div class='card-body p-3'>
+            <h3 class='card-title text-sm truncate'>{file.name}</h3>
+            {#if showSize}
+              <p class='text-xs text-base-content/50'>{formatSize(file.size)}</p>
+            {/if}
+            <div class='card-actions justify-end mt-2'>
+              {#if showPreview && canPreview(file)}
+                <Button variant='ghost' size='xs' onclick={() => handlePreview(file)}>
+                  {uiM('file_list_preview')}
+                </Button>
+              {/if}
+              {#if showDownload}
+                <Button variant='ghost' size='xs' onclick={() => handleDownload(file)}>
+                  {uiM('file_list_download')}
+                </Button>
+              {/if}
+              {#if showDelete}
+                <Button variant='ghost' size='xs' class='text-error' onclick={() => handleDelete(file)}>
+                  {uiM('file_list_delete')}
+                </Button>
+              {/if}
+            </div>
+          </div>
+        </div>
+      {:else}
+        <!-- 列表布局 -->
+        <div class='flex items-center gap-3 p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors'>
+          <!-- 文件图标/缩略图 -->
+          <div class='w-12 h-12 flex items-center justify-center bg-base-300 rounded'>
+            {#if file.type.startsWith('image/') && file.url}
+              <img src={file.url} alt={file.name} class='w-full h-full object-cover rounded' />
+            {:else}
+              <span class='text-2xl'>{getFileIcon(file.type)}</span>
+            {/if}
+          </div>
+
+          <!-- 文件信息 -->
+          <div class='flex-1 min-w-0'>
+            <h3 class='font-medium truncate'>{file.name}</h3>
+            <div class='flex gap-3 text-xs text-base-content/50'>
+              {#if showSize}
+                <span>{formatSize(file.size)}</span>
+              {/if}
+              {#if showDate && file.updatedAt}
+                <span>{formatDate(file.updatedAt)}</span>
+              {/if}
+            </div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class='flex gap-1'>
+            {#if showPreview && canPreview(file)}
+              <IconButton
+                variant='ghost'
+                size='sm'
+                onclick={() => handlePreview(file)}
+                ariaLabel={uiM('file_list_preview')}
+              >
+                <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='M15 12a3 3 0 11-6 0 3 3 0 016 0z' />
+                  <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z' />
+                </svg>
+              </IconButton>
+            {/if}
+            {#if showDownload}
+              <IconButton
+                variant='ghost'
+                size='sm'
+                onclick={() => handleDownload(file)}
+                ariaLabel={uiM('file_list_download')}
+              >
+                <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' />
+                </svg>
+              </IconButton>
+            {/if}
+            {#if showDelete}
+              <IconButton
+                variant='ghost'
+                size='sm'
+                class='text-error'
+                onclick={() => handleDelete(file)}
+                ariaLabel={uiM('file_list_delete')}
+              >
+                <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='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>
+              </IconButton>
+            {/if}
+          </div>
+        </div>
+      {/if}
+    {/each}
+  </div>
+{/if}
+
+<!-- 预览模态框 -->
+{#if previewFile}
+  <dialog class='modal modal-open' onclick={closePreview}>
+    <div
+      class='modal-box max-w-4xl'
+      role='dialog'
+      tabindex='-1'
+      onclick={e => e.stopPropagation()}
+      onkeydown={e => e.stopPropagation()}
+    >
+      <IconButton variant='ghost' size='sm' class='absolute right-2 top-2' onclick={closePreview} ariaLabel={uiM('file_list_close')}>✕</IconButton>
+      <h3 class='font-bold text-lg mb-4'>{previewFile.name}</h3>
+
+      {#if previewFile.type.startsWith('image/')}
+        <img src={previewFile.url} alt={previewFile.name} class='max-w-full max-h-[70vh] mx-auto' />
+      {:else if previewFile.type.startsWith('video/')}
+        <video src={previewFile.url} controls class='max-w-full max-h-[70vh] mx-auto'>
+          <track kind='captions' />
+        </video>
+      {:else if previewFile.type === 'application/pdf'}
+        <iframe src={previewFile.url} class='w-full h-[70vh]' title={previewFile.name}></iframe>
+      {/if}
+    </div>
+    <form method='dialog' class='modal-backdrop'>
+      <Button>{uiM('file_list_close')}</Button>
+    </form>
+  </dialog>
+{/if}

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

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