refactor: 移除ant-design-vue和tailwindcss依赖并优化样式

style: 统一使用css替换scss并调整组件样式
style: 优化组件布局和属性顺序
chore: 更新.gitignore和.eslintrc配置
This commit is contained in:
张翔
2026-03-13 09:55:05 +08:00
parent 9f8bf041c3
commit 2555bf5f55
17 changed files with 901 additions and 1313 deletions
@@ -4,17 +4,33 @@
<template #header>
<div class="card-title">
<span>文件管理</span>
<el-upload :before-upload="handleUpload" :show-file-list="false">
<el-upload
:before-upload="handleUpload"
:show-file-list="false"
>
<el-button type="primary">
<el-icon><Upload /></el-icon> 上传文件
</el-button>
</el-upload>
</div>
</template>
<el-table :data="dataSource" v-loading="loading" style="width: 100%">
<el-table-column prop="id" label="ID" />
<el-table-column prop="fileName" label="文件名" />
<el-table-column prop="fileSize" label="文件大小" />
<el-table
v-loading="loading"
:data="dataSource"
style="width: 100%"
>
<el-table-column
prop="id"
label="ID"
/>
<el-table-column
prop="fileName"
label="文件名"
/>
<el-table-column
prop="fileSize"
label="文件大小"
/>
<el-table-column label="文件类型">
<template #default="{ row }">
<el-tag :type="getFileTypeTag(row.fileType)">
@@ -22,12 +38,35 @@
</el-tag>
</template>
</el-table-column>
<el-table-column prop="storageType" label="存储方式" />
<el-table-column prop="createdAt" label="上传时间" />
<el-table-column label="操作" width="150">
<el-table-column
prop="storageType"
label="存储方式"
/>
<el-table-column
prop="createdAt"
label="上传时间"
/>
<el-table-column
label="操作"
width="150"
>
<template #default="{ row }">
<el-button type="primary" link size="small" @click="handleDownload(row)">下载</el-button>
<el-button type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
<el-button
type="primary"
link
size="small"
@click="handleDownload(row)"
>
下载
</el-button>
<el-button
type="danger"
link
size="small"
@click="handleDelete(row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
@@ -83,7 +122,9 @@ const handleDelete = async (row: any) => {
await request.delete(`/files/${row.id}`)
ElMessage.success('删除成功')
fetchData()
} catch {}
} catch (error) {
console.error('删除文件失败:', error)
}
}
const getFileTypeName = (fileType: string) => {
@@ -111,7 +152,7 @@ const getFileTypeTag = (fileType: string): '' | 'success' | 'warning' | 'danger'
onMounted(() => fetchData())
</script>
<style scoped lang="scss">
<style scoped lang="css">
.file-management .card-title {
display: flex;
justify-content: space-between;