feat: 添加应用图标

- SVG 图标设计:数据库 + Redis R 字母 + 连接节点
- 生成各尺寸 PNG (16-512px)
- electron-builder 配置图标路径
- 主进程窗口使用图标
This commit is contained in:
2026-07-04 20:28:41 +08:00
parent d3f09f0e87
commit c85318cc4d
11 changed files with 137 additions and 0 deletions
+57
View File
@@ -0,0 +1,57 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea"/>
<stop offset="100%" style="stop-color:#764ba2"/>
</linearGradient>
<linearGradient id="shine" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgba(255,255,255,0.3)"/>
<stop offset="100%" style="stop-color:rgba(255,255,255,0)"/>
</linearGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.3"/>
</filter>
</defs>
<!-- Background -->
<rect width="512" height="512" rx="96" fill="url(#bg)"/>
<!-- Shine overlay -->
<rect width="512" height="256" rx="96" fill="url(#shine)"/>
<!-- Database cylinder -->
<g transform="translate(256, 270)" filter="url(#shadow)">
<!-- Cylinder body -->
<ellipse cx="0" cy="-80" rx="120" ry="40" fill="#fff" opacity="0.95"/>
<rect x="-120" y="-80" width="240" height="160" fill="#fff" opacity="0.95"/>
<ellipse cx="0" cy="80" rx="120" ry="40" fill="#e8e8e8"/>
<!-- Cylinder lines -->
<ellipse cx="0" cy="-40" rx="120" ry="40" fill="none" stroke="#ddd" stroke-width="2"/>
<ellipse cx="0" cy="0" rx="120" ry="40" fill="none" stroke="#ddd" stroke-width="2"/>
<ellipse cx="0" cy="40" rx="120" ry="40" fill="none" stroke="#ddd" stroke-width="2"/>
</g>
<!-- Redis "R" letter -->
<g transform="translate(256, 270)">
<text x="0" y="15"
font-family="Arial, Helvetica, sans-serif"
font-size="140"
font-weight="bold"
fill="#dc382c"
text-anchor="middle"
dominant-baseline="middle">R</text>
</g>
<!-- Corner dots (connection nodes) -->
<circle cx="80" cy="80" r="16" fill="#fff" opacity="0.8"/>
<circle cx="432" cy="80" r="16" fill="#fff" opacity="0.8"/>
<circle cx="80" cy="432" r="16" fill="#fff" opacity="0.8"/>
<circle cx="432" cy="432" r="16" fill="#fff" opacity="0.8"/>
<!-- Connection lines -->
<line x1="80" y1="96" x2="180" y2="200" stroke="#fff" stroke-width="3" opacity="0.4"/>
<line x1="432" y1="96" x2="332" y2="200" stroke="#fff" stroke-width="3" opacity="0.4"/>
<line x1="80" y1="416" x2="180" y2="340" stroke="#fff" stroke-width="3" opacity="0.4"/>
<line x1="432" y1="416" x2="332" y2="340" stroke="#fff" stroke-width="3" opacity="0.4"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 654 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

+34
View File
@@ -22,6 +22,40 @@
"build:linux": "npm run build && electron-builder --linux", "build:linux": "npm run build && electron-builder --linux",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue --fix" "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue --fix"
}, },
"build": {
"appId": "com.jokul.jredis-desktop",
"productName": "JRedisDesktop",
"directories": {
"output": "release"
},
"files": [
"out/**/*",
"package.json"
],
"linux": {
"target": [
"AppImage",
"deb"
],
"icon": "build/icons",
"category": "Development"
},
"mac": {
"target": [
"dmg",
"zip"
],
"icon": "build/icon.icns",
"category": "public.app-category.developer-tools"
},
"win": {
"target": [
"nsis",
"portable"
],
"icon": "build/icon.ico"
}
},
"dependencies": { "dependencies": {
"electron-store": "^11.0.2", "electron-store": "^11.0.2",
"ioredis": "^5.7.0", "ioredis": "^5.7.0",
+45
View File
@@ -0,0 +1,45 @@
#!/bin/bash
# scripts/generate-icons.sh - 从 SVG 生成各平台图标
set -e
cd "$(dirname "$0")/.." || exit 1
SVG_FILE="build/icon.svg"
ICONS_DIR="build/icons"
echo "⏳ 正在生成图标..."
# 创建目录
mkdir -p "$ICONS_DIR"
# 生成各尺寸 PNG
for size in 16 32 48 64 128 256 512; do
rsvg-convert -w $size -h $size "$SVG_FILE" -o "$ICONS_DIR/icon_${size}.png"
echo " ✓ icon_${size}.png"
done
# 生成 Windows ICO (使用 16, 32, 48, 256)
# 需要安装 icoutils: sudo apt install icoutils
if command -v icotool &> /dev/null; then
icotool -c -o build/icon.ico \
"$ICONS_DIR/icon_16.png" \
"$ICONS_DIR/icon_32.png" \
"$ICONS_DIR/icon_48.png" \
"$ICONS_DIR/icon_256.png"
echo " ✓ icon.ico"
else
echo " ⚠ icoutils 未安装,跳过 ICO 生成"
echo " 安装: sudo apt install icoutils"
fi
# 生成 macOS ICNS (使用 iconutil)
# macOS 上可以直接用: iconutil -c icns icon.iconset
# Linux 上需要 dmgbuild 或者手动创建
echo ""
echo "✅ 图标生成完成!"
echo ""
echo "Windows ICO: build/icon.ico"
echo "macOS ICNS: build/icon.icns (需要在 macOS 上生成)"
echo "Linux PNG: build/icons/"
+1
View File
@@ -13,6 +13,7 @@ function createWindow(): void {
minWidth: 900, minWidth: 900,
minHeight: 600, minHeight: 600,
title: 'JRedisDesktop', title: 'JRedisDesktop',
icon: join(__dirname, '../../build/icons/icon_256.png'),
backgroundColor: nativeTheme.shouldUseDarkColors ? '#0f0f1a' : '#f8fafc', backgroundColor: nativeTheme.shouldUseDarkColors ? '#0f0f1a' : '#f8fafc',
webPreferences: { webPreferences: {
preload: join(__dirname, '../preload/index.mjs'), preload: join(__dirname, '../preload/index.mjs'),