Kaynağa Gözat

style: 放大并对齐文件库卡片

samien 2 ay önce
ebeveyn
işleme
5f717d8cbb
2 değiştirilmiş dosya ile 15 ekleme ve 1 silme
  1. 10 0
      design-qa.md
  2. 5 1
      src/client/components/library/LibraryGrid.vue

+ 10 - 0
design-qa.md

@@ -132,6 +132,16 @@ Chat and group timelines now use the reference cool blue-gray conversation canva
 
 final result: passed
 
+## File-card scale pass
+
+- Source visual truth: current `yaoyao-webui` file-library implementation and user screenshot, using 220px minimum cards, 154px previews, 36px type icons, 13px titles, and 11px metadata.
+- Browser-rendered implementation: `/tmp/hermes-yaoyao-files-large-cards.png`, `/files`, 1280 × 720 CSS viewport, light theme.
+- Measured focused evidence: first live card width `224.5px`, preview height `154px`, title `13px`, metadata `11px`.
+- Typography, spacing, neutral colors, file-type icon scale, Chinese type labels, and real image/video thumbnail behavior now follow the reference proportions. The wider conversation sidebar remains an intentional product difference requested by the user.
+- No actionable P0/P1/P2 findings.
+
+final result: passed
+
 ## File-library layout pass
 
 - Source visual truth: user-supplied Hermes Dashboard file-library screenshots (1645 × 899), showing type tags and a dense document grid.

+ 5 - 1
src/client/components/library/LibraryGrid.vue

@@ -27,6 +27,10 @@ function iconFor(item: UiLibraryItem) {
   return item.kind
 }
 
+function kindLabel(item: UiLibraryItem) {
+  return ({ image: '图片', video: '视频', audio: '音频', pdf: '文档', document: '文档', code: '文档', text: '文档', link: '网页', file: '其他' } as const)[item.kind]
+}
+
 function formatSize(size?: number) {
   if (size === undefined) return ''
   if (size < 1024) return `${size} B`
@@ -60,7 +64,7 @@ function formatDate(value?: string | number | Date) {
         <div class="library-thumb" :class="`library-thumb--${item.kind}`">
           <img v-if="item.kind === 'image' && item.previewUrl" :src="item.previewUrl" :alt="item.name" loading="lazy" />
           <video v-else-if="item.kind === 'video' && item.previewUrl" :src="item.previewUrl" muted preload="metadata" />
-          <span v-else><AppIcon :name="iconFor(item)" :size="36" /><em>{{ item.name.split('.').at(-1)?.slice(0, 5).toUpperCase() }} · {{ item.kind }}</em></span>
+          <span v-else><AppIcon :name="iconFor(item)" :size="36" /><em>{{ item.name.split('.').at(-1)?.slice(0, 5).toUpperCase() }} · {{ kindLabel(item) }}</em></span>
           <div class="library-thumb__actions">
             <button type="button" title="加入输入框" aria-label="加入输入框" @click.stop="emit('addToComposer', item)"><AppIcon name="plus" :size="14" /></button>
             <button v-if="item.sourceSessionId" type="button" title="查看来源" aria-label="查看来源" @click.stop="emit('source', item)"><AppIcon name="external" :size="14" /></button>