feat 合同中心

src/components/FileList.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import type { FileInfo } from '@/types/api'
+import { fileLabelOf, fileToneOf } from '@/utils/fileMeta'
 import { formatFileSize } from '@/utils/format'
 
 interface Props {
   files: FileInfo[]
   showActions?: boolean
+  /** 左侧文件类型徽标（设计稿 #28 附件行有，#29/#27 同款） */
+  showBadge?: boolean
 }
 
-withDefaults(defineProps<Props>(), { showActions: true })
+withDefaults(defineProps<Props>(), { showActions: true, showBadge: false })
 
 const emit = defineEmits<{
   preview: [file: FileInfo]
@@ -19,6 +22,13 @@ const emit = defineEmits<{
 <template>
   <ul v-if="files.length > 0" class="file-list">
     <li v-for="(file, index) in files" :key="`${file.name}-${index}`" class="file-list__item">
+      <span
+        v-if="showBadge"
+        class="file-list__badge"
+        :style="{ color: fileToneOf(file), backgroundColor: `${fileToneOf(file)}1a` }"
+      >
+        {{ fileLabelOf(file) }}
+      </span>
       <div class="file-list__info">
         <span class="file-list__name" :title="file.name">{{ file.name }}</span>
         <span class="file-list__meta text-secondary">
@@ -54,6 +64,18 @@ const emit = defineEmits<{
     background: @demand-upload-bg;
   }
 
+  // 设计稿 #29/#27/#28 附件行：徽标 33.5×33.5。
+  &__badge {
+    .flex(row, center, center);
+    flex-shrink: 0;
+    width: 33.5px;
+    height: 33.5px;
+    border-radius: @radius-sm;
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+  }
+
   &__info {
     .flex(column, flex-start);
     gap: 2px;