feat 搭建架构骨架

src/components/FileList.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { FileInfo } from '@/types/api'
+import { formatFileSize } from '@/utils/format'
+
+interface Props {
+  files: FileInfo[]
+  showActions?: boolean
+}
+
+withDefaults(defineProps<Props>(), { showActions: true })
+
+const emit = defineEmits<{
+  preview: [file: FileInfo]
+  download: [file: FileInfo]
+  delete: [file: FileInfo]
+}>()
+</script>
+
+<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">
+      <div class="file-list__info">
+        <span class="file-list__name" :title="file.name">{{ file.name }}</span>
+        <span class="file-list__meta text-secondary">
+          {{ formatFileSize(file.size) }} · 上传于{{ file.uploadTime }}
+        </span>
+      </div>
+      <div v-if="showActions" class="file-list__actions">
+        <button class="file-list__btn" @click="emit('preview', file)">
+          预览
+        </button>
+        <button class="file-list__btn" @click="emit('download', file)">
+          下载
+        </button>
+        <button class="file-list__btn file-list__btn--danger" @click="emit('delete', file)">
+          删除
+        </button>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<style lang="less" scoped>
+.file-list {
+  .flex(column, flex-start);
+  gap: @spacing-sm;
+
+  &__item {
+    .flex(row, space-between);
+    gap: @spacing-base;
+    padding: @spacing-sm @spacing-base;
+    border: 1px solid @border-color;
+    border-radius: @radius-base;
+    background: @bg-color-light;
+  }
+
+  &__info {
+    .flex(column, flex-start);
+    gap: 2px;
+    min-width: 0;
+  }
+
+  &__name {
+    font-size: @font-size-base;
+    color: @heading-color;
+    .ellipsis();
+  }
+
+  &__meta {
+    font-size: @font-size-sm;
+  }
+
+  &__actions {
+    .flex(row, center);
+    gap: @spacing-sm;
+    flex-shrink: 0;
+  }
+
+  &__btn {
+    font-size: @font-size-sm;
+    color: @primary-color;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 0.75;
+    }
+
+    &--danger {
+      color: @danger-color;
+    }
+  }
+}
+</style>