feat:初始化工程

src/components/Library/LibraryFileList.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="file-list">
+    <div v-for="file in libraryStore.fileList" :key="file.id" class="file-card card-item">
+      <div class="file-info" @click="viewDetailClick(file)">
+
+        <div class="file-icon" :class="file.iconClass">
+          <el-icon v-if="file.type === 'image'" ><Picture /></el-icon>
+          <el-icon v-else><Document /></el-icon>
+        </div>
+        <div class="file-text">
+          <div class="file-name">{{ file.name }}</div>
+          <div class="file-meta">{{ file.size }} · {{ file.time }}</div>
+        </div>
+      </div>
+
+      <div class="card-actions">
+        <el-button type="primary" :icon="Edit">编辑</el-button>
+        <el-button type="danger" :icon="Delete">删除</el-button>
+      </div>
+    </div>
+
+    <el-empty v-if="!libraryStore.fileList.length" description="该模块暂无文件" :image-size="80" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Delete, Edit, Picture, Document } from '@element-plus/icons-vue'
+import { useLibraryStore } from '@/stores/library.ts'
+import type { ILibraryFile } from '@/types/library.ts'
+
+const libraryStore = useLibraryStore()
+
+const viewDetailClick = (file: ILibraryFile) => {
+  libraryStore.currentFile = file
+  libraryStore.fileDetailDialogVisible = true
+}
+</script>