Эх сурвалжийг харах

取消文件名加粗并缩小桌面附件样式

Samien 1 сар өмнө
parent
commit
822e12e

+ 10 - 0
design-qa.md

@@ -358,3 +358,13 @@ final result: passed
 - 未发布到服务器;浏览器预览和源代码已完成。
 
 final result: passed
+
+
+## 2026-09-21:文件名取消加粗,桌面文件块收紧
+
+- 按用户后续反馈覆盖上一稿的字号与字重:所有文件名使用400常规字重,桌面16px → 14px,文件块64px → 56px高、圆角20px → 16px,图标与内边距同步缩小;手机保留16px和64px点击高度。
+- 实际浏览器检查:桌面文件块184.4 × 56px、14px/400;390px手机为16px/400、64px高,无横向溢出。原有浅/深色语义、扩展名颜色和内容顺序不变。
+- 截图:`docs/media-qa/desktop-compact.png`(1280 × 720实际页面),`desktop-file-compact.png`(原图文件区域截图,未经重绘)。对照上一稿 `desktop.png` 检查,文件名和容器均已收紧。
+- 12项相关现有测试通过;iOS构建、Android core:ui编译通过。此次没有新增逻辑测试。
+
+final result: passed

BIN
docs/media-qa/desktop-compact.png


BIN
docs/media-qa/desktop-file-compact.png


+ 15 - 9
src/client/components/messages/MessageAttachment.vue

@@ -38,26 +38,32 @@ const size = computed(() => {
     </button>
   </div>
   <button v-else class="message-file" type="button" :aria-label="`预览文件 ${attachment.name}${size ? `,${size}` : ''}`" @click="emit('open', attachment)">
-    <span class="message-file__icon"><AppIcon :name="attachment.kind || 'file'" :size="23" /></span>
+    <span class="message-file__icon"><AppIcon :name="attachment.kind || 'file'" :size="20" /></span>
     <span class="message-file__info">
-      <span class="message-file__name"><strong>{{ filename[0] }}</strong><span>{{ filename[1] }}</span></span>
+      <span class="message-file__name"><span class="message-file__basename">{{ filename[0] }}</span><span class="message-file__extension">{{ filename[1] }}</span></span>
       <span v-if="size" class="message-file__size">{{ size }}</span>
     </span>
   </button>
 </template>
 
 <style scoped>
-.message-file { display:flex; align-items:center; gap:11px; width:fit-content; max-width:100%; min-height:64px; padding:10px 15px 10px 11px; border:0; border-radius:20px; background:var(--message-file-surface, #f1f1f1); color:var(--text-primary); text-align:left; cursor:pointer; }
-.message-file__icon { display:grid; place-items:center; flex:0 0 32px; width:32px; height:36px; border-radius:10px; color:var(--text-secondary); background:color-mix(in srgb, var(--text-primary) 5%, transparent); }
-.message-file__info { min-width:0; display:flex; flex-direction:column; gap:3px; }
-.message-file__name { display:flex; min-width:0; max-width:300px; font-size:16px; line-height:1.4; }
-.message-file__name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:560; }
-.message-file__name > span { flex-shrink:0; color:var(--text-muted); }
+.message-file { display:flex; align-items:center; gap:8px; width:fit-content; max-width:100%; min-height:56px; padding:8px 12px 8px 10px; border:0; border-radius:16px; background:var(--message-file-surface, #f1f1f1); color:var(--text-primary); text-align:left; cursor:pointer; }
+.message-file__icon { display:grid; place-items:center; flex:0 0 28px; width:28px; height:32px; border-radius:9px; color:var(--text-secondary); background:color-mix(in srgb, var(--text-primary) 5%, transparent); }
+.message-file__info { min-width:0; display:flex; flex-direction:column; gap:2px; }
+.message-file__name { display:flex; min-width:0; max-width:300px; font-size:14px; font-weight:400; line-height:1.4; }
+.message-file__basename { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.message-file__extension { flex-shrink:0; color:var(--text-muted); }
 .message-file__size { font-size:12px; line-height:1.4; color:var(--text-muted); }
 .message-file:hover { filter:brightness(.97); }
 .message-file:focus-visible, .message-media__image:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
 .message-media { max-width:100%; }
 .message-media__image { display:block; width:fit-content; max-width:100%; padding:0; border:0; border-radius:12px; overflow:hidden; background:transparent; cursor:zoom-in; }
 .message-media__image img { display:block; width:auto; height:auto; max-width:min(100%, 430px); max-height:420px; object-fit:contain; }
-@media(max-width:600px) { .message-media__image img { max-height:360px; } }
+@media(max-width:600px) {
+  .message-file { min-height:64px; padding:10px 15px 10px 11px; gap:11px; border-radius:20px; }
+  .message-file__icon { flex-basis:32px; width:32px; height:36px; border-radius:10px; }
+  .message-file__info { gap:3px; }
+  .message-file__name { font-size:16px; }
+  .message-media__image img { max-height:360px; }
+}
 </style>