云文件管理系统上传组件优化

This commit is contained in:
2026-04-02 12:06:51 +08:00
parent 61a675b4de
commit 3710e98eb3
34 changed files with 1102 additions and 306 deletions

View File

@@ -1,7 +1,48 @@
<template>
<template>
<div class="top-navbar">
<div class="navbar-left">
<el-icon :size="22" color="#ffffff"><Folder /></el-icon>
<div class="logo-icon">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="hex-top" x1="24" y1="2" x2="24" y2="46" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#4db6ac"/>
<stop offset="50%" stop-color="#009688"/>
<stop offset="100%" stop-color="#004d40"/>
</linearGradient>
<linearGradient id="hex-front" x1="10" y1="22" x2="38" y2="46" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#26a69a"/>
<stop offset="100%" stop-color="#00796b"/>
</linearGradient>
<linearGradient id="hex-side" x1="4" y1="14" x2="24" y2="44" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#00796b"/>
<stop offset="100%" stop-color="#004d40"/>
</linearGradient>
<linearGradient id="hex-highlight" x1="24" y1="4" x2="24" y2="26" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="rgba(255,255,255,0.5)"/>
<stop offset="100%" stop-color="rgba(255,255,255,0)"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="0.5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- 3D Hexagon: side (left) -->
<polygon points="4,14 10,10 10,34 4,38" fill="url(#hex-side)" opacity="0.85"/>
<!-- 3D Hexagon: front face -->
<polygon points="10,10 38,10 44,14 44,38 38,42 10,42 4,38 4,14" fill="url(#hex-front)"/>
<!-- 3D Hexagon: top face -->
<polygon points="10,10 24,3 38,10 10,10" fill="url(#hex-top)" opacity="0.9"/>
<!-- Highlight on top -->
<polygon points="12,10 24,5 36,10" fill="url(#hex-highlight)" opacity="0.6"/>
<!-- Inner subtle line for depth -->
<polygon points="10,10 38,10 44,14 4,14" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
<!-- Center icon: stylized folder/cloud -->
<path d="M19 22h-1a3 3 0 00-3 3v6a3 3 0 003 3h12a3 3 0 003-3v-4a3 3 0 00-3-3h-2l-1.5-2H19z" fill="rgba(255,255,255,0.9)" filter="url(#glow)"/>
</svg>
</div>
<span class="system-title">云文件管理系统</span>
</div>
<div class="navbar-right">
@@ -131,6 +172,17 @@ const handleUserCommand = (command) => {
gap: 10px;
}
.logo-icon {
width: 28px;
height: 28px;
color: #fff;
}
.logo-icon svg {
width: 100%;
height: 100%;
}
.system-title {
font-size: 16px;
font-weight: 600;