refactor: 重构下载页

- 将download页的文件卡片单独提取为FileCard

app/components/pages/download/FileCard.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-card shadow="hover" class="p-4">
+    <template #header>
+      <div class="header-content">
+        <el-icon class="header-icon"><ElIconDocument /></el-icon>
+        <span class="truncate font-medium">{{ file.filename_download }}</span>
+      </div>
+    </template>
+    <dl class="text-gray-600 space-y-1 mb-6">
+      <div>
+        <dt class="font-semibold inline">类型：</dt>
+        <dd class="inline">{{ file.type }}</dd>
+      </div>
+      <div>
+        <dt class="font-semibold inline">大小：</dt>
+        <dd class="inline">{{ formatFileSize(file.filesize) }}</dd>
+      </div>
+      <div>
+        <dt class="font-semibold inline">上传时间：</dt>
+        <dd class="inline">
+          {{ new Date(file.uploaded_on).toLocaleDateString() }}
+        </dd>
+      </div>
+    </dl>
+    <template #footer>
+      <div class="button-group">
+        <el-button type="primary" @click="handleDownload">下载</el-button>
+        <el-button v-if="file.previewable" @click="handlePreview"
+          >预览</el-button
+        >
+      </div>
+    </template>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    fileId: {
+      type: String,
+      required: true,
+    },
+    file: {
+      type: Object as PropType<FileMeta>,
+      required: true,
+    },
+  });
+
+  const localePath = useLocalePath();
+  const router = useRouter();
+
+  function handleDownload() {
+    const link = document.createElement('a');
+    link.href = `/api/download/${props.fileId}`;
+    link.download = props.file?.filename_download ?? 'download';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
+  function handlePreview() {
+    router.push(localePath(`/preview/${props.fileId}`));
+  }
+</script>
+
+<style scoped>
+  .header-content {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    margin-bottom: 4px;
+  }
+  .header-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .button-group {
+    display: flex;
+    justify-content: flex-end;
+    align-items: baseline;
+    gap: 1rem;
+  }
+</style>