fix: 回退图标为现代化简洁风格
回退科技感设计,改为简洁美观风格: - 柔和蓝色渐变背景(#4F8EF7 → #2563EB) - 左上角微妙白色高光 - Georgia 衬线字体 MD 字母(白色带阴影) - 底部半透明装饰线 - 圆角矩形,干净利落 icons.ico: 7 种尺寸(16~256px) Icons.tsx AppIcon: SVG 版本同步更新
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 9.0 KiB |
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user