组件修改
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 根组件只包含路由视图，布局和样式由 DefaultLayout 组件处理
|
||||
// 根组件只包含路由视图，布局和样式由 SharedLayout 组件处理
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
60
urbanLifelineWeb/packages/shared/src/api/file/file.ts
Normal file
60
urbanLifelineWeb/packages/shared/src/api/file/file.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { api } from '@/api/index'
|
||||
import { BatchFileUploadParam, FileUploadParam, ResultDomain, TbSysFileDTO } from '@/types';
|
||||
|
||||
export const fileAPI = {
|
||||
baseUrl: "/file",
|
||||
|
||||
/**
|
||||
* 上传文件
|
||||
* @param param 文件上传参数
|
||||
* @returns Promise<ResultDomain<SysFile>>
|
||||
*/
|
||||
async uploadFile(param: FileUploadParam): Promise<ResultDomain<TbSysFileDTO>> {
|
||||
const formData = new FormData();
|
||||
formData.append('file', param.file);
|
||||
if (param.module) {
|
||||
formData.append('module', param.module);
|
||||
}
|
||||
if (param.optsn) {
|
||||
formData.append('optsn', param.optsn);
|
||||
}
|
||||
if (param.uploader) {
|
||||
formData.append('uploader', param.uploader);
|
||||
}
|
||||
const response = await api.upload<TbSysFileDTO>(`${this.baseUrl}/upload`, formData);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* 批量上传文件
|
||||
* @param param 批量文件上传参数
|
||||
* @returns Promise<ResultDomain<SysFile>>
|
||||
*/
|
||||
async batchUploadFiles(param: BatchFileUploadParam): Promise<ResultDomain<TbSysFileDTO>> {
|
||||
const formData = new FormData();
|
||||
param.files.forEach(file => {
|
||||
formData.append('files', file);
|
||||
});
|
||||
if (param.module) {
|
||||
formData.append('module', param.module);
|
||||
}
|
||||
if (param.optsn) {
|
||||
formData.append('optsn', param.optsn);
|
||||
}
|
||||
if (param.uploader) {
|
||||
formData.append('uploader', param.uploader);
|
||||
}
|
||||
const response = await api.upload<TbSysFileDTO>(`${this.baseUrl}/batch-upload`, formData);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
* @param fileId 文件ID
|
||||
* @param filename 保存的文件名（可选）
|
||||
* @returns Promise<void>
|
||||
*/
|
||||
async downloadFile(fileId: string, filename?: string): Promise<void> {
|
||||
return api.download(`${this.baseUrl}/download/${fileId}`, filename);
|
||||
},
|
||||
}
|
||||
@@ -1,13 +1,52 @@
|
||||
<template>
|
||||
<button :type="type" :style="style"></button>
|
||||
<button
|
||||
:class="[
|
||||
'btn',
|
||||
`btn--${variant}`,
|
||||
`btn--${size}`,
|
||||
{
|
||||
'btn--disabled': disabled,
|
||||
'btn--loading': loading
|
||||
}
|
||||
]"
|
||||
:type="type"
|
||||
:disabled="disabled || loading"
|
||||
:style="customStyle"
|
||||
@click="handleClick"
|
||||
>
|
||||
<span v-if="loading" class="btn__spinner"></span>
|
||||
<span class="btn__content">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
interface Props{
|
||||
type: 'button' | 'submit' | 'reset',
|
||||
style: string
|
||||
type?: 'button' | 'submit' | 'reset'
|
||||
variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'gradient-blue' | 'gradient-purple' | 'gradient-pink' | 'gradient-orange' | 'gradient-green' | 'gradient-blue-special'
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
customStyle?: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'button',
|
||||
variant: 'primary',
|
||||
size: 'medium',
|
||||
disabled: false,
|
||||
loading: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
click: [event: MouseEvent]
|
||||
}>()
|
||||
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
if (!props.disabled && !props.loading) {
|
||||
emit('click', event)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="button-test">
|
||||
<h2>按钮组件测试</h2>
|
||||
|
||||
<!-- 基础按钮 -->
|
||||
<section class="test-section">
|
||||
<h3>基础按钮</h3>
|
||||
<div class="button-group">
|
||||
<Button variant="primary">Primary</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="danger">Danger</Button>
|
||||
<Button variant="success">Success</Button>
|
||||
<Button variant="warning">Warning</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 渐变按钮 -->
|
||||
<section class="test-section">
|
||||
<h3>渐变按钮</h3>
|
||||
<div class="button-group">
|
||||
<Button variant="gradient-blue">Gradient Blue</Button>
|
||||
<Button variant="gradient-purple">Gradient Purple</Button>
|
||||
<Button variant="gradient-pink">Gradient Pink</Button>
|
||||
<Button variant="gradient-orange">Gradient Orange</Button>
|
||||
<Button variant="gradient-green">Gradient Green</Button>
|
||||
<Button variant="gradient-blue-special">Special Blue</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 尺寸测试 -->
|
||||
<section class="test-section">
|
||||
<h3>按钮尺寸（渐变示例）</h3>
|
||||
<div class="button-group">
|
||||
<Button variant="gradient-blue" size="small">Small</Button>
|
||||
<Button variant="gradient-pink" size="medium">Medium</Button>
|
||||
<Button variant="gradient-green" size="large">Large</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 状态测试 -->
|
||||
<section class="test-section">
|
||||
<h3>按钮状态</h3>
|
||||
<div class="button-group">
|
||||
<Button variant="gradient-blue" :loading="isLoading" @click="toggleLoading">
|
||||
{{ isLoading ? '加载中...' : '点击加载' }}
|
||||
</Button>
|
||||
<Button variant="gradient-purple" disabled>禁用按钮</Button>
|
||||
<Button variant="gradient-pink" :loading="true">持续加载</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 混合展示 -->
|
||||
<section class="test-section">
|
||||
<h3>混合展示</h3>
|
||||
<div class="mixed-demo">
|
||||
<div class="card">
|
||||
<h4>渐变卡片演示</h4>
|
||||
<p>这是一个使用渐变按钮的卡片示例</p>
|
||||
<div class="card-actions">
|
||||
<Button variant="gradient-blue" size="small">详情</Button>
|
||||
<Button variant="gradient-green" size="small">确认</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import Button from './Button.vue'
|
||||
|
||||
// 响应式数据
|
||||
const isLoading = ref(false)
|
||||
|
||||
// 方法
|
||||
const toggleLoading = () => {
|
||||
isLoading.value = true
|
||||
setTimeout(() => {
|
||||
isLoading.value = false
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.button-test {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.test-section {
|
||||
margin-bottom: 40px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e1e5e9;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #495057;
|
||||
font-size: 20px;
|
||||
border-bottom: 2px solid #f8f9fa;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mixed-demo {
|
||||
.card {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
max-width: 400px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 12px 0;
|
||||
color: #374151;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 20px 0;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.button-test {
|
||||
padding: 16px;
|
||||
|
||||
.test-section {
|
||||
padding: 16px;
|
||||
|
||||
.button-group {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,189 @@
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid rgba(59, 130, 246, 0.5);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// 尺寸
|
||||
&--small {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
&--medium {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&--large {
|
||||
padding: 12px 20px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// 变体
|
||||
&--primary {
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
|
||||
&:hover:not(.btn--disabled):not(.btn--loading) {
|
||||
background-color: #2563eb;
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background-color: #f1f5f9;
|
||||
color: #475569;
|
||||
border: 1px solid #e2e8f0;
|
||||
|
||||
&:hover:not(.btn--disabled):not(.btn--loading) {
|
||||
background-color: #e2e8f0;
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background-color: #ef4444;
|
||||
color: white;
|
||||
|
||||
&:hover:not(.btn--disabled):not(.btn--loading) {
|
||||
background-color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
&--success {
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
|
||||
&:hover:not(.btn--disabled):not(.btn--loading) {
|
||||
background-color: #059669;
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background-color: #f59e0b;
|
||||
color: white;
|
||||
|
||||
&:hover:not(.btn--disabled):not(.btn--loading) {
|
||||
background-color: #d97706;
|
||||
}
|
||||
}
|
||||
|
||||
// 渐变变体
|
||||
&--gradient-blue {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
|
||||
&:hover:not(.btn--disabled):not(.btn--loading) {
|
||||
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&--gradient-purple {
|
||||
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
||||
color: #374151;
|
||||
border: none;
|
||||
|
||||
&:hover:not(.btn--disabled):not(.btn--loading) {
|
||||
background: linear-gradient(135deg, #96e6e2 0%, #fcc4d1 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(168, 237, 234, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&--gradient-pink {
|
||||
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
|
||||
&:hover:not(.btn--disabled):not(.btn--loading) {
|
||||
background: linear-gradient(135deg, #ff888c 0%, #feb7dd 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(255, 154, 158, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&--gradient-orange {
|
||||
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
||||
color: #374151;
|
||||
border: none;
|
||||
|
||||
&:hover:not(.btn--disabled):not(.btn--loading) {
|
||||
background: linear-gradient(135deg, #ffe4c0 0%, #fba88d 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(252, 182, 159, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&--gradient-green {
|
||||
background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
|
||||
color: #374151;
|
||||
border: none;
|
||||
|
||||
&:hover:not(.btn--disabled):not(.btn--loading) {
|
||||
background: linear-gradient(135deg, #96dfbf 0%, #d0e6af 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(168, 230, 207, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&--gradient-blue-special {
|
||||
background: linear-gradient(281.59deg, #162C8E 8.51%, #1D72D3 66.15%, #AEF1FF 100.83%);
|
||||
color: white;
|
||||
border: none;
|
||||
|
||||
&:hover:not(.btn--disabled):not(.btn--loading) {
|
||||
background: linear-gradient(281.59deg, #142558 8.51%, #1a64b8 66.15%, #9ce8f5 100.83%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(29, 114, 211, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
// 状态
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&--loading {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
// 加载动画
|
||||
&__spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import url("./DynamicComponent.scss");
|
||||
</style>
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,402 @@
|
||||
// 文件上传组件 - 精简版样式
|
||||
.file-upload {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
// 封面模式
|
||||
&.cover {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
|
||||
&:hover .actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
&.horizontal {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗模式
|
||||
&.dialog {
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
}
|
||||
|
||||
// 内容模式
|
||||
&.content {}
|
||||
|
||||
// 通用容器
|
||||
.container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
// 上传区域
|
||||
.area {
|
||||
border: 2px dashed #dcdfe6;
|
||||
border-radius: 8px;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: #fafafa;
|
||||
min-height: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
// 封面模式特殊样式
|
||||
&.cover {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
padding: 30px 20px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
|
||||
transform: translateY(-2px);
|
||||
|
||||
.icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
background: #f0f9ff;
|
||||
|
||||
.icon .plus {
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
&.dragover {
|
||||
border-color: #409eff;
|
||||
background: #e6f7ff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 图标
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
transition: all 0.3s;
|
||||
|
||||
.plus {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: #c0c4cc;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
// 竖线
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 80px;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
// 横线
|
||||
&::after {
|
||||
width: 80px;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 封面模式的小图标
|
||||
&.cover .icon .plus {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
||||
&::before {
|
||||
width: 1px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// 文字
|
||||
.text {
|
||||
color: #606266;
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s;
|
||||
|
||||
.link {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// 提示
|
||||
.tip {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.spinner {
|
||||
font-size: 32px;
|
||||
color: #409eff;
|
||||
margin-bottom: 8px;
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
// 文件列表
|
||||
.files {
|
||||
margin-top: 20px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
// 单个文件
|
||||
.file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background-color: #f8fafc;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
flex-shrink: 0;
|
||||
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.size {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 操作按钮区域
|
||||
.actions {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
|
||||
&:not(.file .actions) {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 动画
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.file-upload {
|
||||
&.dialog .modal {
|
||||
margin: 16px;
|
||||
padding: 20px;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.area.cover {
|
||||
width: 250px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +1,404 @@
|
||||
<template>
|
||||
<div v-if="mode==='cover'">
|
||||
<!-- 封面的文件上传，只可传一张图片，上传成功后，封面图片会替换 -->
|
||||
<!-- 封面模式 -->
|
||||
<div v-if="mode === 'cover'" class="file-upload cover">
|
||||
<!-- 已上传的封面 -->
|
||||
<div v-if="currentCoverImg" class="image-wrapper">
|
||||
<img :src="currentCoverImg" class="image" :class="coverImageClass" @load="handleCoverImageLoad"
|
||||
alt="封面图片" />
|
||||
<div class="actions">
|
||||
<Button variant="danger" size="small" @click="handleRemoveCover">
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传区域 -->
|
||||
<div v-else class="area cover" :class="{ dragover: isDragover, disabled: uploading }" @click="triggerFileInput"
|
||||
@drop.prevent="handleDrop" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave">
|
||||
<div v-if="!uploading" class="content">
|
||||
<div class="icon">
|
||||
<div class="plus"></div>
|
||||
</div>
|
||||
<div class="text">点击上传封面</div>
|
||||
<div class="tip">
|
||||
{{ `支持 ${getAcceptText()} 格式，最大 ${(maxSize / 1024 / 1024).toFixed(0)}MB` }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="uploading" class="loading">
|
||||
<div class="spinner">⟳</div>
|
||||
<div>上传中...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input ref="fileInputRef" type="file" :accept="accept" @change="handleFileSelect" hidden />
|
||||
</div>
|
||||
<div v-if="mode==='dialog'">
|
||||
<!-- 文件上传弹窗，可传多个文件，上传成功后，文件列表会更新 -->
|
||||
|
||||
<!-- 弹窗模式 -->
|
||||
<div v-else-if="mode === 'dialog'" class="file-upload dialog">
|
||||
<Button @click="showDialog = true" variant="primary">
|
||||
{{ buttonText || '上传文件' }}
|
||||
</Button>
|
||||
|
||||
<div v-if="showDialog" class="overlay" @click="closeDialog">
|
||||
<div class="modal" @click.stop>
|
||||
<div class="header">
|
||||
<h3>{{ title || '文件上传' }}</h3>
|
||||
<Button variant="secondary" size="small" @click="closeDialog">×</Button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="area" :class="{ dragover: isDragover, disabled: uploading }" @click="triggerFileInput"
|
||||
@drop.prevent="handleDrop" @dragover.prevent="handleDragOver"
|
||||
@dragleave.prevent="handleDragLeave">
|
||||
<div class="icon">
|
||||
<div class="plus"></div>
|
||||
</div>
|
||||
<div class="text">
|
||||
将文件拖到此处，或<span class="link">点击上传</span>
|
||||
</div>
|
||||
<div class="tip">{{ getUploadTip() }}</div>
|
||||
</div>
|
||||
|
||||
<input ref="fileInputRef" type="file" :accept="accept" :multiple="maxCount > 1"
|
||||
@change="handleFileSelect" hidden />
|
||||
|
||||
<!-- 文件列表 -->
|
||||
<div v-if="selectedFiles.length > 0" class="files">
|
||||
<div v-for="(file, index) in selectedFiles" :key="index" class="file">
|
||||
<div class="preview">
|
||||
<img v-if="isImageFile(file)" :src="getFilePreviewUrl(file)" class="thumb" />
|
||||
<span v-else class="type-icon">{{ getFileTypeIcon(file) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="name">{{ file.name }}</div>
|
||||
<div class="size">{{ formatFileSize(file.size) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<Button variant="danger" size="small" @click="removeFile(index)" :disabled="uploading">
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<Button variant="secondary" @click="closeDialog" :disabled="uploading">取消</Button>
|
||||
<Button variant="primary" @click="uploadFiles" :loading="uploading"
|
||||
:disabled="selectedFiles.length === 0">
|
||||
{{ uploading ? '上传中...' : '确定上传' }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="mode==='content'">
|
||||
<!-- 嵌入原div文件上传内容，可传多个文件，上传成功后，文件列表会更新 -->
|
||||
|
||||
<!-- 内容模式 -->
|
||||
<div v-else class="file-upload content">
|
||||
<div class="container">
|
||||
<div class="area" :class="{ dragover: isDragover, disabled: uploading }" @click="triggerFileInput"
|
||||
@drop.prevent="handleDrop" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave">
|
||||
<div class="icon">
|
||||
<div class="plus"></div>
|
||||
</div>
|
||||
<div class="text">
|
||||
将文件拖到此处，或<span class="link">点击上传</span>
|
||||
</div>
|
||||
<div class="tip">{{ getUploadTip() }}</div>
|
||||
</div>
|
||||
|
||||
<input ref="fileInputRef" type="file" :accept="accept" :multiple="maxCount > 1" @change="handleFileSelect"
|
||||
hidden />
|
||||
|
||||
<!-- 文件列表 -->
|
||||
<div v-if="selectedFiles.length > 0" class="files">
|
||||
<h4>待上传文件：</h4>
|
||||
<div v-for="(file, index) in selectedFiles" :key="index" class="file">
|
||||
<div class="preview">
|
||||
<img v-if="isImageFile(file)" :src="getFilePreviewUrl(file)" class="thumb" />
|
||||
<span v-else class="type-icon">{{ getFileTypeIcon(file) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="name">{{ file.name }}</div>
|
||||
<div class="size">{{ formatFileSize(file.size) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<Button variant="danger" size="small" @click="removeFile(index)" :disabled="uploading">
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传按钮 -->
|
||||
<div v-if="selectedFiles.length > 0" class="actions">
|
||||
<Button variant="primary" @click="uploadFiles" :loading="uploading"
|
||||
:disabled="selectedFiles.length === 0">
|
||||
{{ uploading ? '上传中...' : '确定上传' }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { Button } from '@/components'
|
||||
import { FILE_DOWNLOAD_URL } from '@/config'
|
||||
interface Props{
|
||||
import { fileAPI } from '@/api/file/file'
|
||||
import type { TbSysFileDTO } from '@/types/file/file'
|
||||
import {
|
||||
formatFileSize,
|
||||
isImageFile,
|
||||
getFileTypeIcon,
|
||||
isValidFileType,
|
||||
getFilePreviewUrl
|
||||
} from '@/utils/file'
|
||||
|
||||
interface Props {
|
||||
mode: 'cover' | 'dialog' | 'content'
|
||||
coverImg: string
|
||||
fileList: FileList
|
||||
coverImg?: string
|
||||
fileList?: TbSysFileDTO[]
|
||||
accept?: string
|
||||
maxSize?: number
|
||||
maxCount?: number
|
||||
title?: string
|
||||
buttonText?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
coverImg: '',
|
||||
fileList: () => [],
|
||||
accept: '',
|
||||
maxSize: 10 * 1024 * 1024,
|
||||
maxCount: 10,
|
||||
title: '文件上传',
|
||||
buttonText: '上传文件'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:coverImg': [value: string]
|
||||
'update:fileList': [value: TbSysFileDTO[]]
|
||||
'upload-success': [files: TbSysFileDTO[]]
|
||||
'upload-error': [error: string]
|
||||
}>()
|
||||
|
||||
// 响应式数据
|
||||
const showDialog = ref(false)
|
||||
const uploading = ref(false)
|
||||
const selectedFiles = ref<File[]>([])
|
||||
const isDragover = ref(false)
|
||||
const coverImageClass = ref('')
|
||||
|
||||
// 文件输入引用
|
||||
const fileInputRef = ref<HTMLInputElement>()
|
||||
|
||||
// 计算属性
|
||||
const currentCoverImg = computed({
|
||||
get: () => props.coverImg,
|
||||
set: (value: string) => emit('update:coverImg', value)
|
||||
})
|
||||
|
||||
// 触发文件输入
|
||||
const triggerFileInput = () => {
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
|
||||
// 拖拽相关
|
||||
const handleDragOver = (event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
isDragover.value = true
|
||||
}
|
||||
|
||||
const handleDragLeave = () => {
|
||||
isDragover.value = false
|
||||
}
|
||||
|
||||
const handleDrop = (event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
isDragover.value = false
|
||||
if (uploading.value) return
|
||||
|
||||
const files = event.dataTransfer?.files
|
||||
if (files && files.length > 0) {
|
||||
addFiles(Array.from(files))
|
||||
|
||||
// cover模式和content模式下拖拽文件后立即上传
|
||||
if (props.mode === 'cover' || props.mode === 'content') {
|
||||
uploadFiles()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理封面图片加载
|
||||
const handleCoverImageLoad = (event: Event) => {
|
||||
const img = event.target as HTMLImageElement
|
||||
const width = img.naturalWidth
|
||||
const height = img.naturalHeight
|
||||
|
||||
if (width > height) {
|
||||
coverImageClass.value = 'horizontal'
|
||||
} else {
|
||||
coverImageClass.value = 'vertical'
|
||||
}
|
||||
}
|
||||
|
||||
// 删除封面
|
||||
const handleRemoveCover = () => {
|
||||
emit('update:coverImg', '')
|
||||
coverImageClass.value = ''
|
||||
selectedFiles.value = []
|
||||
}
|
||||
|
||||
// 获取接受文件类型文本
|
||||
const getAcceptText = (): string => {
|
||||
if (!props.accept || props.accept === '*/*') return '所有'
|
||||
if (props.accept.includes('image')) return '图片'
|
||||
return props.accept
|
||||
}
|
||||
|
||||
// 获取上传提示文本
|
||||
const getUploadTip = (): string => {
|
||||
const acceptText = getAcceptText()
|
||||
const sizeText = (props.maxSize / 1024 / 1024).toFixed(0)
|
||||
return `支持 ${acceptText} 格式，单个文件不超过 ${sizeText}MB`
|
||||
}
|
||||
|
||||
// 添加文件
|
||||
const addFiles = (files: File[]) => {
|
||||
files.forEach(file => {
|
||||
// 验证文件大小
|
||||
if (file.size > props.maxSize) {
|
||||
emit('upload-error', `文件 ${file.name} 大小超过 ${(props.maxSize / 1024 / 1024).toFixed(0)}MB`)
|
||||
return
|
||||
}
|
||||
|
||||
// 验证文件类型
|
||||
if (props.accept && !isValidFileType(file, props.accept)) {
|
||||
emit('upload-error', `文件 ${file.name} 类型不符合要求`)
|
||||
return
|
||||
}
|
||||
|
||||
// 检查是否重复
|
||||
if (selectedFiles.value.some(f => f.name === file.name && f.size === file.size)) {
|
||||
emit('upload-error', `文件 ${file.name} 已添加`)
|
||||
return
|
||||
}
|
||||
|
||||
// 如果不允许多选或封面模式，清空之前的文件
|
||||
if (props.maxCount === 1 || props.mode === 'cover') {
|
||||
selectedFiles.value = [file]
|
||||
} else {
|
||||
// 检查数量限制
|
||||
if (selectedFiles.value.length >= props.maxCount) {
|
||||
emit('upload-error', `最多只能上传 ${props.maxCount} 个文件`)
|
||||
return
|
||||
}
|
||||
selectedFiles.value.push(file)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 处理文件选择
|
||||
const handleFileSelect = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const files = Array.from(target.files || [])
|
||||
|
||||
if (files.length === 0) return
|
||||
|
||||
addFiles(files)
|
||||
|
||||
// 清空 input，允许重复选择同一文件
|
||||
target.value = ''
|
||||
|
||||
// cover模式和content模式下选择文件后立即上传
|
||||
if (props.mode === 'cover' || props.mode === 'content') {
|
||||
uploadFiles()
|
||||
}
|
||||
}
|
||||
|
||||
// 移除文件
|
||||
const removeFile = (index: number) => {
|
||||
selectedFiles.value.splice(index, 1)
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
showDialog.value = false
|
||||
selectedFiles.value = []
|
||||
isDragover.value = false
|
||||
}
|
||||
|
||||
// 上传文件
|
||||
const uploadFiles = async () => {
|
||||
if (selectedFiles.value.length === 0) return
|
||||
|
||||
uploading.value = true
|
||||
const uploadedFilesList: TbSysFileDTO[] = []
|
||||
|
||||
try {
|
||||
|
||||
if (selectedFiles.value.length === 1) {
|
||||
const file = selectedFiles.value[0]
|
||||
const result = await fileAPI.uploadFile({
|
||||
file: file,
|
||||
module: props.mode,
|
||||
optsn: ''
|
||||
})
|
||||
|
||||
if (result.success && result.data) {
|
||||
uploadedFilesList.push(result.data)
|
||||
|
||||
if (props.mode === 'cover' && result.data.url) {
|
||||
emit('update:coverImg', result.data.url)
|
||||
}
|
||||
} else {
|
||||
emit('upload-error', result.message || '上传失败，请重试')
|
||||
return
|
||||
}
|
||||
} else {
|
||||
const result = await fileAPI.batchUploadFiles({
|
||||
files: selectedFiles.value,
|
||||
module: props.mode,
|
||||
optsn: ''
|
||||
})
|
||||
|
||||
if (result.success) {
|
||||
const files = result.dataList || []
|
||||
uploadedFilesList.push(...files)
|
||||
} else {
|
||||
emit('upload-error', result.message || '上传失败，请重试')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 上传成功
|
||||
if (uploadedFilesList.length > 0) {
|
||||
emit('upload-success', uploadedFilesList)
|
||||
emit('update:fileList', [...props.fileList, ...uploadedFilesList])
|
||||
}
|
||||
|
||||
// 清空文件列表
|
||||
selectedFiles.value = []
|
||||
if (props.mode === 'dialog') {
|
||||
closeDialog()
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('上传失败:', error)
|
||||
emit('upload-error', '上传失败，请重试')
|
||||
} finally {
|
||||
uploading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import './FileUpload.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<div class="file-upload-test">
|
||||
<h2>文件上传组件测试</h2>
|
||||
|
||||
<!-- 封面模式测试 -->
|
||||
<section class="test-section">
|
||||
<h3>1. 封面模式测试</h3>
|
||||
<div class="test-content">
|
||||
<div class="cover-upload-wrapper">
|
||||
<FileUpload
|
||||
mode="cover"
|
||||
v-model:coverImg="coverImage"
|
||||
accept="image/*"
|
||||
:maxSize="5 * 1024 * 1024"
|
||||
@upload-success="handleCoverUploadSuccess"
|
||||
@upload-error="handleUploadError"
|
||||
style="height: auto;"
|
||||
/>
|
||||
</div>
|
||||
<div class="test-info">
|
||||
<p><strong>当前封面:</strong> {{ coverImage || '无' }}</p>
|
||||
<p><strong>说明:</strong> 点击上传封面图片，支持JPG、PNG、GIF格式，最大5MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 弹窗模式测试 -->
|
||||
<section class="test-section">
|
||||
<h3>2. 弹窗模式测试</h3>
|
||||
<div class="test-content">
|
||||
<FileUpload
|
||||
mode="dialog"
|
||||
v-model:fileList="dialogFileList"
|
||||
:maxCount="5"
|
||||
:maxSize="10 * 1024 * 1024"
|
||||
@upload-success="handleDialogUploadSuccess"
|
||||
@upload-error="handleUploadError"
|
||||
/>
|
||||
<div class="test-info">
|
||||
<p><strong>已上传文件数:</strong> {{ dialogFileList.length }}</p>
|
||||
<p><strong>说明:</strong> 点击按钮打开弹窗，支持多文件上传，最多5个文件，每个文件最大10MB</p>
|
||||
<div v-if="dialogFileList.length > 0" class="uploaded-files">
|
||||
<h4>已上传的文件:</h4>
|
||||
<ul>
|
||||
<li v-for="file in dialogFileList" :key="file.fileId">
|
||||
<strong>{{ file.name }}</strong>
|
||||
<span class="file-size">({{ formatFileSize(file.size || 0) }})</span>
|
||||
<span class="file-type">{{ file.type }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 内容模式测试 -->
|
||||
<section class="test-section">
|
||||
<h3>3. 内容模式测试</h3>
|
||||
<div class="test-content">
|
||||
<FileUpload
|
||||
mode="content"
|
||||
v-model:fileList="contentFileList"
|
||||
:maxCount="3"
|
||||
:maxSize="20 * 1024 * 1024"
|
||||
@upload-success="handleContentUploadSuccess"
|
||||
@upload-error="handleUploadError"
|
||||
/>
|
||||
<div class="test-info">
|
||||
<p><strong>已上传文件数:</strong> {{ contentFileList.length }}</p>
|
||||
<p><strong>说明:</strong> 直接在页面中显示上传区域，最多3个文件，每个文件最大20MB</p>
|
||||
<div v-if="contentFileList.length > 0" class="uploaded-files">
|
||||
<h4>已上传的文件:</h4>
|
||||
<ul>
|
||||
<li v-for="file in contentFileList" :key="file.fileId">
|
||||
<strong>{{ file.name }}</strong>
|
||||
<span class="file-size">({{ formatFileSize(file.size || 0) }})</span>
|
||||
<span class="file-type">{{ file.type }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 消息提示 -->
|
||||
<div v-if="message" class="message" :class="messageType">
|
||||
<p>{{ message }}</p>
|
||||
<button @click="clearMessage">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import FileUpload from './FileUpload.vue'
|
||||
import type { TbSysFileDTO } from '@/types/file/file'
|
||||
|
||||
// 响应式数据
|
||||
const coverImage = ref<string>('')
|
||||
const dialogFileList = ref<TbSysFileDTO[]>([])
|
||||
const contentFileList = ref<TbSysFileDTO[]>([])
|
||||
const message = ref<string>('')
|
||||
const messageType = ref<'success' | 'error'>('success')
|
||||
|
||||
// 处理封面上传成功
|
||||
const handleCoverUploadSuccess = (files: TbSysFileDTO[]) => {
|
||||
console.log('封面上传成功:', files)
|
||||
showMessage('封面上传成功！', 'success')
|
||||
}
|
||||
|
||||
// 处理弹窗上传成功
|
||||
const handleDialogUploadSuccess = (files: TbSysFileDTO[]) => {
|
||||
console.log('弹窗上传成功:', files)
|
||||
showMessage(`成功上传 ${files.length} 个文件！`, 'success')
|
||||
}
|
||||
|
||||
// 处理内容上传成功
|
||||
const handleContentUploadSuccess = (files: TbSysFileDTO[]) => {
|
||||
console.log('内容上传成功:', files)
|
||||
showMessage(`成功上传 ${files.length} 个文件！`, 'success')
|
||||
}
|
||||
|
||||
// 处理上传错误
|
||||
const handleUploadError = (error: string) => {
|
||||
console.error('上传错误:', error)
|
||||
showMessage(error, 'error')
|
||||
}
|
||||
|
||||
// 显示消息
|
||||
const showMessage = (msg: string, type: 'success' | 'error') => {
|
||||
message.value = msg
|
||||
messageType.value = type
|
||||
|
||||
// 3秒后自动清除消息
|
||||
setTimeout(() => {
|
||||
clearMessage()
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
// 清除消息
|
||||
const clearMessage = () => {
|
||||
message.value = ''
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.file-upload-test {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.test-section {
|
||||
margin-bottom: 40px;
|
||||
border: 1px solid #e1e5e9;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
|
||||
h3 {
|
||||
background-color: #f8f9fa;
|
||||
margin: 0;
|
||||
padding: 15px 20px;
|
||||
color: #495057;
|
||||
font-size: 20px;
|
||||
border-bottom: 1px solid #e1e5e9;
|
||||
}
|
||||
|
||||
.test-content {
|
||||
padding: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
align-items: start;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.test-info {
|
||||
background-color: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #007bff;
|
||||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
|
||||
strong {
|
||||
color: #495057;
|
||||
}
|
||||
}
|
||||
|
||||
.uploaded-files {
|
||||
margin-top: 15px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #495057;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
padding: 8px 12px;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #e1e5e9;
|
||||
|
||||
.file-size {
|
||||
color: #6c757d;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.file-type {
|
||||
color: #28a745;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
z-index: 1000;
|
||||
min-width: 300px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
|
||||
&.success {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// // 为封面模式设置默认尺寸，可被外部覆盖
|
||||
// .cover-upload-wrapper .file-upload.cover .area.cover {
|
||||
// width: 300px;
|
||||
// height: 200px;
|
||||
// }
|
||||
|
||||
// .cover-upload-wrapper .file-upload.cover .image-wrapper {
|
||||
// width: 300px;
|
||||
// height: 200px;
|
||||
// }
|
||||
|
||||
// // 为内容模式也设置相同的默认尺寸，演示统一行为
|
||||
// .file-upload.content .area {
|
||||
// width: 300px;
|
||||
// height: 200px;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div class="app-layout">
|
||||
<header>
|
||||
<h1>Shared Components Demo</h1>
|
||||
<nav>
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/fileupload">FileUpload Demo</router-link>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-layout {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
header {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
nav {
|
||||
margin: 12px 0;
|
||||
}
|
||||
nav a {
|
||||
margin-right: 16px;
|
||||
color: #2c3e50;
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
241
urbanLifelineWeb/packages/shared/src/layouts/SharedLayout.vue
Normal file
241
urbanLifelineWeb/packages/shared/src/layouts/SharedLayout.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="app-layout">
|
||||
<header class="header">
|
||||
<h1>Shared Components Demo</h1>
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<!-- 左侧树形导航 -->
|
||||
<aside class="sidebar">
|
||||
<div class="nav-tree">
|
||||
<div class="nav-item" :class="{ active: $route.path === '/' }">
|
||||
<router-link to="/" class="nav-link">
|
||||
🏠 Home
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div v-for="group in componentGroups" :key="group.name" class="nav-group">
|
||||
<div class="group-title">📁 {{ group.name }}</div>
|
||||
<div class="group-items">
|
||||
<div v-for="item in group.items" :key="item.path"
|
||||
class="nav-item" :class="{ active: $route.path === item.path }">
|
||||
<router-link :to="item.path" class="nav-link">
|
||||
🧩 {{ item.displayName }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 右侧内容区域 -->
|
||||
<main class="main-content">
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 根据目录结构组织组件路由
|
||||
const componentGroups = computed(() => {
|
||||
// 直接基于文件路径创建路由结构
|
||||
const testComponents = import.meta.glob('../components/**/*Example.vue')
|
||||
const groups: Record<string, any[]> = {}
|
||||
|
||||
Object.keys(testComponents).forEach(filePath => {
|
||||
// 解析文件路径
|
||||
// ../components/base/button/ButtonExample.vue -> ['base', 'button']
|
||||
// ../components/fileupload/FileUploadExample.vue -> ['fileupload']
|
||||
const pathWithoutPrefix = filePath.replace('../components/', '')
|
||||
const segments = pathWithoutPrefix.replace(/Test\.vue$/, '').split('/').filter(Boolean)
|
||||
|
||||
if (segments.length === 0) return
|
||||
|
||||
// 组件名是最后一级目录，但路径保持完整结构
|
||||
const componentName = segments[segments.length - 1]
|
||||
const routePath = `/${segments.join('/').toLowerCase()}`
|
||||
|
||||
// 确定分组
|
||||
let groupName: string
|
||||
if (segments.length === 1) {
|
||||
// 顶级组件: fileupload -> Components
|
||||
groupName = 'Components'
|
||||
} else {
|
||||
// 嵌套组件: base/button -> Base
|
||||
groupName = segments[0].charAt(0).toUpperCase() + segments[0].slice(1)
|
||||
}
|
||||
|
||||
// 格式化显示名称
|
||||
const displayName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
|
||||
|
||||
if (!groups[groupName]) {
|
||||
groups[groupName] = []
|
||||
}
|
||||
|
||||
groups[groupName].push({
|
||||
path: routePath,
|
||||
displayName: displayName
|
||||
})
|
||||
})
|
||||
|
||||
// 转换为数组并排序
|
||||
return Object.entries(groups)
|
||||
.map(([name, items]) => ({
|
||||
name,
|
||||
items: items.sort((a, b) => a.displayName.localeCompare(b.displayName))
|
||||
}))
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-layout {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background: #f8fafc;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-tree {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: #e2e8f0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.group-items {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.group-items .nav-link {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.content-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 40vh;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.sidebar::-webkit-scrollbar,
|
||||
.main-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-track,
|
||||
.main-content::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb,
|
||||
.main-content::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb:hover,
|
||||
.main-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
</style>
|
||||
@@ -15,8 +15,8 @@ interface RouteItem {
|
||||
}
|
||||
|
||||
// 布局组件
|
||||
const DefaultLayout = defineAsyncComponent(
|
||||
() => import('../layouts/DefaultLayout.vue')
|
||||
const SharedLayout = defineAsyncComponent(
|
||||
() => import('../layouts/SharedLayout.vue')
|
||||
)
|
||||
|
||||
// 首页组件
|
||||
@@ -46,7 +46,7 @@ const Home = {
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
component: DefaultLayout,
|
||||
component: SharedLayout,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
@@ -59,29 +59,33 @@ const routes: RouteRecordRaw[] = [
|
||||
}
|
||||
]
|
||||
|
||||
// 自动导入所有以 Test.vue 结尾的组件
|
||||
const testComponents = import.meta.glob('../components/**/*Test.vue')
|
||||
// 自动导入所有以 Example.vue 结尾的组件
|
||||
const testComponents = import.meta.glob('../components/**/*Example.vue')
|
||||
|
||||
// 为每个测试组件创建路由
|
||||
Object.entries(testComponents).forEach(([path, component]) => {
|
||||
// 从路径中提取路由路径
|
||||
// 例如: ../components/fileupload/FileUploadTest.vue -> /fileupload
|
||||
const routePath = path
|
||||
.replace('../components/', '/') // 移除相对路径
|
||||
.replace(/\/\w+Test\.vue$/, '') // 移除 Test.vue 部分
|
||||
.toLowerCase() // 统一小写
|
||||
|
||||
const routeName = routePath.slice(1) || 'home'
|
||||
// 保持完整的路径结构
|
||||
// ../components/base/button/ButtonExample.vue -> /base/button
|
||||
// ../components/fileupload/FileUploadExample.vue -> /fileupload
|
||||
const pathSegments = path
|
||||
.replace('../components/', '')
|
||||
.replace(/Test\.vue$/, '')
|
||||
.split('/')
|
||||
.filter(Boolean)
|
||||
|
||||
const routePath = `/${pathSegments.join('/').toLowerCase()}`
|
||||
const componentName = pathSegments[pathSegments.length - 1].toLowerCase()
|
||||
|
||||
const routeConfig: RouteRecordRaw = {
|
||||
path: routePath,
|
||||
name: routeName,
|
||||
component: DefaultLayout,
|
||||
name: componentName,
|
||||
component: SharedLayout,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: `${routeName}-content`,
|
||||
name: `${componentName}-content`,
|
||||
component: defineAsyncComponent(component as any),
|
||||
meta: { title: `${routeName} Demo` }
|
||||
meta: { title: `${componentName.charAt(0).toUpperCase() + componentName.slice(1)} Demo` }
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -103,7 +107,7 @@ Object.entries(testComponents).forEach(([path, component]) => {
|
||||
const props = homeRoute.props as { routes: RouteItem[] }
|
||||
props.routes.push({
|
||||
path: routePath,
|
||||
name: routeName
|
||||
name: componentName
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -25,3 +25,17 @@ export interface TbSysFileDTO extends BaseDTO {
|
||||
/** 文件状态 */
|
||||
status?: string
|
||||
}
|
||||
|
||||
export interface FileUploadParam {
|
||||
file: File;
|
||||
module?: string;
|
||||
optsn?: string;
|
||||
uploader?: string;
|
||||
}
|
||||
|
||||
export interface BatchFileUploadParam {
|
||||
files: File[];
|
||||
module?: string;
|
||||
optsn?: string;
|
||||
uploader?: string;
|
||||
}
|
||||
181
urbanLifelineWeb/packages/shared/src/utils/file.ts
Normal file
181
urbanLifelineWeb/packages/shared/src/utils/file.ts
Normal file
@@ -0,0 +1,181 @@
|
||||
/**
|
||||
* 文件处理相关工具函数
|
||||
*/
|
||||
|
||||
/**
|
||||
* 验证文件类型
|
||||
*/
|
||||
export const isValidFileType = (file: File, accept: string): boolean => {
|
||||
if (!accept || accept === '*/*') return true
|
||||
|
||||
const acceptTypes = accept.split(',').map(t => t.trim())
|
||||
return acceptTypes.some(type => {
|
||||
if (type.startsWith('.')) {
|
||||
return file.name.toLowerCase().endsWith(type.toLowerCase())
|
||||
} else if (type.endsWith('/*')) {
|
||||
return file.type.startsWith(type.replace('/*', ''))
|
||||
} else {
|
||||
return file.type === type
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为图片文件
|
||||
*/
|
||||
export const isImageFile = (file: File): boolean => {
|
||||
return file.type.startsWith('image/')
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为文本文件
|
||||
*/
|
||||
export const isTextFile = (file: File): boolean => {
|
||||
return file.type.startsWith('text/')
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件预览URL
|
||||
*/
|
||||
export const getFilePreviewUrl = (file: File): string => {
|
||||
return URL.createObjectURL(file)
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化文件大小
|
||||
*/
|
||||
export const formatFileSize = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件类型图标
|
||||
*/
|
||||
export const getFileTypeIcon = (file: File): string => {
|
||||
const extension = file.name.split('.').pop()?.toLowerCase()
|
||||
const iconMap: Record<string, string> = {
|
||||
// 文档类
|
||||
'pdf': '📄',
|
||||
'doc': '📝',
|
||||
'docx': '📝',
|
||||
'txt': '📄',
|
||||
'md': '📄',
|
||||
'rtf': '📄',
|
||||
|
||||
// 表格类
|
||||
'xls': '📊',
|
||||
'xlsx': '📊',
|
||||
'csv': '📊',
|
||||
|
||||
// 演示文稿
|
||||
'ppt': '📊',
|
||||
'pptx': '📊',
|
||||
|
||||
// 压缩包
|
||||
'zip': '📦',
|
||||
'rar': '📦',
|
||||
'7z': '📦',
|
||||
'tar': '📦',
|
||||
'gz': '📦',
|
||||
|
||||
// 视频
|
||||
'mp4': '🎬',
|
||||
'avi': '🎬',
|
||||
'mov': '🎬',
|
||||
'wmv': '🎬',
|
||||
'flv': '🎬',
|
||||
'mkv': '🎬',
|
||||
|
||||
// 音频
|
||||
'mp3': '🎵',
|
||||
'wav': '🎵',
|
||||
'flac': '🎵',
|
||||
'aac': '🎵',
|
||||
|
||||
// 图片
|
||||
'jpg': '🖼️',
|
||||
'jpeg': '🖼️',
|
||||
'png': '🖼️',
|
||||
'gif': '🖼️',
|
||||
'bmp': '🖼️',
|
||||
'svg': '🖼️',
|
||||
'webp': '🖼️'
|
||||
}
|
||||
return iconMap[extension || ''] || '📄'
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证文件大小
|
||||
*/
|
||||
export const validateFileSize = (file: File, maxSize: number): { valid: boolean; error?: string } => {
|
||||
if (file.size > maxSize) {
|
||||
const maxSizeMB = (maxSize / 1024 / 1024).toFixed(0)
|
||||
return {
|
||||
valid: false,
|
||||
error: `文件 ${file.name} 大小超过 ${maxSizeMB}MB`
|
||||
}
|
||||
}
|
||||
return { valid: true }
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证文件类型
|
||||
*/
|
||||
export const validateFileType = (file: File, accept?: string): { valid: boolean; error?: string } => {
|
||||
if (accept && !isValidFileType(file, accept)) {
|
||||
return {
|
||||
valid: false,
|
||||
error: `文件 ${file.name} 类型不符合要求`
|
||||
}
|
||||
}
|
||||
return { valid: true }
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查文件是否重复
|
||||
*/
|
||||
export const checkFileDuplicate = (file: File, existingFiles: File[]): { valid: boolean; error?: string } => {
|
||||
if (existingFiles.some(f => f.name === file.name && f.size === file.size)) {
|
||||
return {
|
||||
valid: false,
|
||||
error: `文件 ${file.name} 已添加`
|
||||
}
|
||||
}
|
||||
return { valid: true }
|
||||
}
|
||||
|
||||
/**
|
||||
* 综合验证文件
|
||||
*/
|
||||
export const validateFile = (
|
||||
file: File,
|
||||
options: {
|
||||
maxSize?: number
|
||||
accept?: string
|
||||
existingFiles?: File[]
|
||||
} = {}
|
||||
): { valid: boolean; error?: string } => {
|
||||
const { maxSize, accept, existingFiles = [] } = options
|
||||
|
||||
// 检查文件大小
|
||||
if (maxSize) {
|
||||
const sizeResult = validateFileSize(file, maxSize)
|
||||
if (!sizeResult.valid) return sizeResult
|
||||
}
|
||||
|
||||
// 检查文件类型
|
||||
if (accept) {
|
||||
const typeResult = validateFileType(file, accept)
|
||||
if (!typeResult.valid) return typeResult
|
||||
}
|
||||
|
||||
// 检查是否重复
|
||||
const duplicateResult = checkFileDuplicate(file, existingFiles)
|
||||
if (!duplicateResult.valid) return duplicateResult
|
||||
|
||||
return { valid: true }
|
||||
}
|
||||
5
urbanLifelineWeb/packages/shared/src/utils/index.ts
Normal file
5
urbanLifelineWeb/packages/shared/src/utils/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
/**
|
||||
* Utils 统一导出
|
||||
*/
|
||||
|
||||
export * from './file'
|
||||
Reference in New Issue
Block a user