fix: 回退图标为现代化简洁风格

回退科技感设计,改为简洁美观风格:
- 柔和蓝色渐变背景(#4F8EF7 → #2563EB)
- 左上角微妙白色高光
- Georgia 衬线字体 MD 字母(白色带阴影)
- 底部半透明装饰线
- 圆角矩形,干净利落

icons.ico: 7 种尺寸(16~256px)
Icons.tsx AppIcon: SVG 版本同步更新
This commit is contained in:
thzxx
2026-05-27 22:07:38 +08:00
parent 79995855a0
commit 4caa215d6c
3 changed files with 19 additions and 81 deletions
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

+19 -81
View File
@@ -9,92 +9,30 @@ interface IconProps {
const defaultProps: Partial<IconProps> = { size: 18 } const defaultProps: Partial<IconProps> = { size: 18 }
// ===== 应用图标(科技感风格) ===== // ===== 应用图标(现代化简洁风格) =====
export function AppIcon({ size = 80 }: IconProps) { export function AppIcon({ size = 80 }: IconProps) {
const s = size
const margin = Math.max(1, s / 20)
const radius = Math.max(3, s / 5)
const gridStep = Math.max(4, s / 8)
const ringR = s / 3
const ringW = Math.max(1, s / 30)
const dotR = Math.max(1, s / 24)
const fontSize = Math.max(10, s * 45 / 100)
const arrowSize = Math.max(3, s / 7)
const arrowTop = s / 2 + Math.max(4, s / 8)
const arrowBottom = arrowTop + arrowSize
const lw = Math.max(1, s / 18)
const scanY = s - margin - Math.max(3, s / 10)
const scanLeft = margin + Math.max(3, s / 6)
const scanRight = s - margin - Math.max(3, s / 6)
const curX = s - margin - Math.max(3, s / 5)
const curY = margin + Math.max(3, s / 5)
const curSize = Math.max(2, s / 12)
return ( return (
<svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width={size} height={size} viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<linearGradient id="tech-bg" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="app-bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#0F172A"/> <stop offset="0%" stopColor="#4F8EF7"/>
<stop offset="100%" stopColor="#1E1B4B"/> <stop offset="100%" stopColor="#2563EB"/>
</linearGradient>
<linearGradient id="app-highlight" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stopColor="white" stopOpacity="0.15"/>
<stop offset="50%" stopColor="white" stopOpacity="0"/>
</linearGradient> </linearGradient>
<clipPath id="tech-clip">
<rect x={margin} y={margin} width={s - 2*margin} height={s - 2*margin} rx={radius}/>
</clipPath>
<filter id="tech-glow">
<feGaussianBlur stdDeviation="2" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs> </defs>
{/* 圆角矩形背景 */}
{/* 背景 */} <rect x="4" y="4" width="72" height="72" rx="16" fill="url(#app-bg)"/>
<rect x={margin} y={margin} width={s - 2*margin} height={s - 2*margin} rx={radius} fill="url(#tech-bg)"/> {/* 左上角高光 */}
<rect x="4" y="4" width="72" height="72" rx="16" fill="url(#app-highlight)"/>
<g clipPath="url(#tech-clip)"> {/* MD 文字 */}
{/* 科技网格 */} <text x="40" y="44" textAnchor="middle" dominantBaseline="central"
{Array.from({length: Math.floor((s - 2*margin) / gridStep)}, (_, i) => { fontFamily="Georgia, 'Times New Roman', serif" fontWeight="bold" fontSize="32"
const x = margin + (i + 1) * gridStep fill="white" letterSpacing="2">MD</text>
return <line key={`gv${i}`} x1={x} y1={margin} x2={x} y2={s-margin} stroke="#3B82F6" strokeOpacity="0.08" strokeWidth="1"/> {/* 底部装饰线 */}
})} <rect x="20" y="58" width="40" height="2.5" rx="1.25" fill="white" fillOpacity="0.25"/>
{Array.from({length: Math.floor((s - 2*margin) / gridStep)}, (_, i) => {
const y = margin + (i + 1) * gridStep
return <line key={`gh${i}`} x1={margin} y1={y} x2={s-margin} y2={y} stroke="#3B82F6" strokeOpacity="0.08" strokeWidth="1"/>
})}
{/* 发光圆环 */}
<circle cx={s/2} cy={s/2} r={ringR + 2} fill="none" stroke="#3B82F6" strokeOpacity="0.15" strokeWidth="1"/>
<circle cx={s/2} cy={s/2} r={ringR} fill="none" stroke="#60A5FA" strokeOpacity="0.3" strokeWidth={ringW} filter="url(#tech-glow)"/>
{/* 四角光点 */}
{[[margin + radius/2, margin + radius/2], [s - margin - radius/2, margin + radius/2],
[margin + radius/2, s - margin - radius/2], [s - margin - radius/2, s - margin - radius/2]].map(([x, y], i) =>
<circle key={`dot${i}`} cx={x} cy={y} r={dotR} fill="#60A5FA" fillOpacity="0.6"/>
)}
{/* M 文字发光 */}
<text x={s/2} y={s/2 - Math.max(2, s/15)} textAnchor="middle" dominantBaseline="central"
fontFamily="system-ui, -apple-system, sans-serif" fontWeight="bold" fontSize={fontSize}
fill="#60A5FA" fillOpacity="0.2" filter="url(#tech-glow)">M</text>
{/* M 文字主体 */}
<text x={s/2} y={s/2 - Math.max(2, s/15)} textAnchor="middle" dominantBaseline="central"
fontFamily="system-ui, -apple-system, sans-serif" fontWeight="bold" fontSize={fontSize}
fill="#DCEBFF">M</text>
{/* ↓ 箭头 */}
<line x1={s/2} y1={arrowTop} x2={s/2} y2={arrowBottom} stroke="#93C5FD" strokeWidth={lw} strokeLinecap="round"/>
<line x1={s/2 - arrowSize/2} y1={arrowBottom - arrowSize/2} x2={s/2} y2={arrowBottom} stroke="#93C5FD" strokeWidth={lw} strokeLinecap="round"/>
<line x1={s/2 + arrowSize/2} y1={arrowBottom - arrowSize/2} x2={s/2} y2={arrowBottom} stroke="#93C5FD" strokeWidth={lw} strokeLinecap="round"/>
{/* 底部扫描线 */}
<line x1={scanLeft} y1={scanY} x2={scanRight} y2={scanY} stroke="#38BDF8" strokeOpacity="0.2" strokeWidth="2"/>
<line x1={scanLeft} y1={scanY + 2} x2={scanRight} y2={scanY + 2} stroke="#38BDF8" strokeOpacity="0.08" strokeWidth="1"/>
{/* 右上角光标 */}
<line x1={curX} y1={curY} x2={curX + curSize} y2={curY} stroke="#38BDF8" strokeOpacity="0.5" strokeWidth="1.5"/>
<line x1={curX + curSize} y1={curY} x2={curX + curSize} y2={curY + curSize} stroke="#38BDF8" strokeOpacity="0.5" strokeWidth="1.5"/>
</g>
</svg> </svg>
) )
} }