From ac92ac981a87e7d85696395050f09a99f2cf0a88 Mon Sep 17 00:00:00 2001 From: weidu12123 Date: Tue, 13 Oct 2026 18:08:02 +0800 Subject: [PATCH] feat: adopt monochrome topological lock brand icon (Option D) --- docs/icon-proposals.html | 477 +++++++++++++++++++++++++ docs/monochrome-icon-proposals.html | 413 ++++++++++++++++++++++ docs/proposal-2-refinements.html | 421 ++++++++++++++++++++++ docs/termius-inspired-sculpted.html | 456 ++++++++++++++++++++++++ docs/termius-style-proposals.html | 490 ++++++++++++++++++++++++++ frontend/public/favicon.svg | 12 +- frontend/src/components/BrandLogo.vue | 29 +- src/desktop.rs | 67 ++-- 8 files changed, 2302 insertions(+), 63 deletions(-) create mode 100644 docs/icon-proposals.html create mode 100644 docs/monochrome-icon-proposals.html create mode 100644 docs/proposal-2-refinements.html create mode 100644 docs/termius-inspired-sculpted.html create mode 100644 docs/termius-style-proposals.html diff --git a/docs/icon-proposals.html b/docs/icon-proposals.html new file mode 100644 index 0000000..3236435 --- /dev/null +++ b/docs/icon-proposals.html @@ -0,0 +1,477 @@ +VPS Switch 视觉图标方案 + + +
+
+

VPS Switch 品牌图标视觉重构

+

彻底告别纯黑死板底色与通用命令行符，带来富有生命力、辨识度极高且深度贴合产品本质的原创品牌印记。

+
+ +
+ +
+ 首推方向 +

方向 1 · 日落暖橙穿梭 S 轨

+

活力炽热 · 现代基建软件质感 · 极高辨识度

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
不同系统尺寸实测
+
+
+ + + + + + + + 48px 窗口 +
+
+ + + + + + + + 32px 任务栏 +
+
+ + + + + + + + 20px 托盘 +
+
+ +
Windows 任务栏环境模拟
+
+ 深色任务栏 +
+ +
+
+
+ 浅色任务栏 +
+ +
+
+ +
    +
  • 品牌张力：彻底消灭压抑黑底，暖橙珊瑚底色像一把利刃切出辨识度。
    • +
  • 意象：双层服务器切片被一道流线 S 串联，直观表达「在 VPS 之间极速切换」。
    • +
  • 微点：右上角常亮翡翠绿点，象征 29 台云端主机全天候在线守护。
    • +
+
+ + +
+

方向 2 · 白瓷微光双色咬合 S 标

+

极简克制 · 浑然一体 · 与毛玻璃界面完美呼应

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
不同系统尺寸实测
+
+
+ + + + + + 48px 窗口 +
+
+ + + + + + 32px 任务栏 +
+
+ + + + + + 20px 托盘 +
+
+ +
Windows 任务栏环境模拟
+
+ 深色任务栏 +
+ +
+
+
+ 浅色任务栏 +
+ +
+
+ +
    +
  • 白瓷通透：零黑色，纯白与微冷灰的浮雕质感，与软件界面 Reflex 风格完美呼应。
    • +
  • 双色环抱：橙色（命令与切换）与绿色（在线守护）咬合为一个莫比乌斯 S 环。
    • +
  • 现代优雅：类似 Linear / Raycast 团队的极简排版克制美学。
    • +
+
+ + +
+

方向 3 · 等轴测多维晶体机架与光柱

+

工程硬核 · 立体立体切面 · 极客象征

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
不同系统尺寸实测
+
+
+ + + + + + + 48px 窗口 +
+
+ + + + + + + 32px 任务栏 +
+
+ + + + + + + 20px 托盘 +
+
+ +
Windows 任务栏环境模拟
+
+ 深色任务栏 +
+ +
+
+
+ 浅色任务栏 +
+ +
+
+ +
    +
  • 3D 空间感：等轴测视角呈现服务器机柜切片，透视感鲜明。
    • +
  • 纵向贯穿：激光瞬切光柱连通上下双层，体现「从本机穿透到远端」。
    • +
  • 极客属性：工业硬核感强，适合偏爱纯技术图腾的审美。
    • +
+
+
+
\ No newline at end of file diff --git a/docs/monochrome-icon-proposals.html b/docs/monochrome-icon-proposals.html new file mode 100644 index 0000000..076e7d1 --- /dev/null +++ b/docs/monochrome-icon-proposals.html @@ -0,0 +1,413 @@ +VPS Switch 纯粹黑白图标方案 + + +
+
+

VPS Switch 纯粹黑白（Monochrome）方案

+

剥除所有杂色干扰。黑白是最高级的克制，以纯粹的高对比线条与负空间，雕琢终极耐看的 SSH 工具徽记。

+
+ +
+ +
+ 首推 · Termius 纯黑白神韵 +

方案 1 · 云端终端符（Termius 单色重构）

+

纯黑底块 · 纯白云端负空间 · 洗练终端光标 > _

+ +
+ + + + + + + + + + + + + + +
+ +
不同尺寸实测
+
+
+ + + + + + + 48px 窗口 +
+
+ + + + + + 32px 任务栏 +
+
+ + + + + + 20px 托盘 +
+
+ +
Windows 任务栏环境模拟
+
+ 深色任务栏 + +
+
+ 浅色任务栏 + +
+ +
    +
  • 就是 Termius 的纯粹黑白形态：云朵轮廓（云端 VPS）+ 终端字符 > _，绝无多余点缀。
    • +
  • 零杂色：纯黑与纯白的最高对比，小到托盘就是一个清晰的白光终端符。
    • +
+
+ + +
+ 对标 Vercel / Next.js 极简刀锋 +

方案 2 · 对冲穿梭折角（双向 Switch）

+

极简双向命令提示符 · 纯黑底白光雕 · 锐利有力

+ +
+ + + + + + + + + + + + + +
+ +
不同尺寸实测
+
+
+ + + + + + + 48px 窗口 +
+
+ + + + + + 32px 任务栏 +
+
+ + + + + + 20px 托盘 +
+
+ +
Windows 任务栏环境模拟
+
+ 深色任务栏 + +
+
+ 浅色任务栏 + +
+ +
    +
  • 极简几何动势：主折角 > 搭配反向虚角，直接用终端字符构成极速切换（Switch）的节奏。
    • +
  • 高密度力量感：线条粗壮自信，没有任何轻飘飘的杂质。
    • +
+
+ + +
+ 纯白底 · 黑标微浮雕 +

方案 3 · 瓷白反色 · 极简黑印章

+

纯白基底 · 纯黑雕刻印记 · 与浅色毛玻璃完美一体

+ +
+ + + + + + + + + + + + +
+ +
不同尺寸实测
+
+
+ + + + + + + 48px 窗口 +
+
+ + + + + + 32px 任务栏 +
+
+ + + + + + 20px 托盘 +
+
+ +
Windows 任务栏环境模拟
+
+ 深色任务栏 + +
+
+ 浅色任务栏 + +
+ +
    +
  • 白底黑标：专为偏好浅色系、白瓷美学的用户打造。
    • +
  • 如印章般醒目：在深色任务栏上如一块纯净白玉，极为吸睛。
    • +
+
+
+
\ No newline at end of file diff --git a/docs/proposal-2-refinements.html b/docs/proposal-2-refinements.html new file mode 100644 index 0000000..c2c9322 --- /dev/null +++ b/docs/proposal-2-refinements.html @@ -0,0 +1,421 @@ +方案 2 深度微调与进化 + + +
+
+

方案 2「折角穿梭」精准手术级微调

+

第二套为什么你觉得「有点感觉，但总感觉差点」？因为抓住了黑白对冲动势的胚子，但细节被中间多余的圆点和生硬的粗细断层破坏了呼吸感。

+
+ +
+ 🎯 病因诊断：为什么之前差点意思？
+ 1. 中间那个圆点是多余的：在 > 和 < 中间放一个点，远看像个颜文字表情包 >·<，破坏了严肃的工程张力。
+ 2. 两条折角各玩各的：左边实心右边半透明，没有真正咬合交织，缺乏顶级品牌（如 Linear、Next.js）那种呼之欲出的整体性。 +
+ +
+ +
+ 力荐 · 呼吸负空间 +

2A · 刀锋交错咬合

+

去掉多余圆点 · 几何刀锋对咬 · 纯粹张力

+ +
+ + + + + + + +
+ +
不同尺寸实测
+
+
+ + + + + + 40px +
+
+ + + + + + 28px +
+
+ + + + + + 18px 托盘 +
+
+ +
+ Windows 任务栏 + +
+ +
    +
  • 改动精髓：彻底删掉弱智圆点，左右两条主折角同等粗壮对称咬合。
    • +
  • 视觉意象：像两个交错的纯白刀锋，中间留出一道呼吸负空间，极具现代张力。
    • +
+
+ + +
+ Shell 本质 · 瞬切速度 +

2B · 极速重定向 >>

+

Shell 终端重定向符号 >> · 绝对速度与瞬连

+ +
+ + + + + + + +
+ +
不同尺寸实测
+
+
+ + + + + + 40px +
+
+ + + + + + 28px +
+
+ + + + + + 18px 托盘 +
+
+ +
+ Windows 任务栏 + +
+ +
    +
  • 开发者共鸣：>> 是 Linux Shell 里最熟悉不过的输出重定向符，也是快速穿梭（Fast Forward）的象征。
    • +
  • 层次感强：前亮后暗，充满冲破屏幕的速度感。
    • +
+
+ + +
+ 黄金比例 · 极致干脆 +

2C · 纯粹主折角 > _

+

单体粗壮霸道命令符 > · 搭配水平光标下划线

+ +
+ + + + + + + +
+ +
不同尺寸实测
+
+
+ + + + + + 40px +
+
+ + + + + + 28px +
+
+ + + + + + 18px 托盘 +
+
+ +
+ Windows 任务栏 + +
+ +
    +
  • 纯粹终端自信：对标 Apple 和 Vercel 的单体标志逻辑，纯粹靠粗壮的黄金分割笔触说话。
    • +
  • 无论多小都清晰：下划线 _ 像基座一样托住折角，端庄沉稳。
    • +
+
+ + +
+ Switch 概念正宗 +

2D · 闭合 S 轨回折

+

两条终端折线相互勾结 · 抽象构成字母 S

+ +
+ + + + + + +
+ +
不同尺寸实测
+
+
+ + + + + 40px +
+
+ + + + + 28px +
+
+ + + + + 18px 托盘 +
+
+ +
+ Windows 任务栏 + +
+ +
    +
  • 字标 Monogram：将 Switch 的字母 S 融入终端折角，一条连续的纯白光带一气呵成。
    • +
  • 标志性极强：类似高端汽车车标或现代框架的几何剪影。
    • +
+
+
+
\ No newline at end of file diff --git a/docs/termius-inspired-sculpted.html b/docs/termius-inspired-sculpted.html new file mode 100644 index 0000000..f049e37 --- /dev/null +++ b/docs/termius-inspired-sculpted.html @@ -0,0 +1,456 @@ +VPS Switch 深度黑白实体设计 + + +
+
+

告别单线条交叉 · 真正的实体级黑白徽记

+

你说得太对了：两条简单的单线条一交错就成了一个 ×，根本谈不上设计。真正的黑白设计靠的是实体几何切面、负空间剪影与有辨识度的专属图腾。

+
+ +
+ 💡 重新审视「为什么 Termius 好看」以及「方案 2 原本的感觉在哪」：
+ • 方案 2 最初吸引你的是「一个带有机械感的开关机构动势（Switch Mechanism）」，而不是两条光秃秃的线条。
+ • Termius 好看是因为它有具象饱满的实体剪影（云朵外轮廓 + 终端字符构成的整体印章）。
+ 以下 4 套方案全部采用实心雕刻几何（Solid Glyph）+ 负空间切面，彻底告别单线条与 × 的尴尬。 +
+ +
+ +
+ 机械动势 · 实体剪影 +

方案 A · 机械实体滑阀 Switch

+

实心跑道滑轨 · 双向互锁滑块 · 机械穿梭感

+ +
+ + + + + + + + + + + + + + + + +
+ +
不同尺寸实测
+
+
+ + + + + + + + 40px +
+
+ + + + + + + + 28px +
+
+ + + + + + + 18px 托盘 +
+
+ +
+ Windows 任务栏 + +
+ +
    +
  • 机械实体感：不是简单的线条，是一个真正的实体开关滑道，有厚重沉稳的工业质感。
    • +
  • 精巧内嵌：右侧实心滑块内镂空终端命令符 >，完美诠释「终端与开关」合二为一。
    • +
+
+ + +
+ 实心刀锋 · 绝非细线交叉 +

方案 B · 实体错位穿梭折刃

+

实心多边形厚重刀锋 · 错位不对称穿梭 · 绝对不是×

+ +
+ + + + + + + + + + + + +
+ +
不同尺寸实测
+
+
+ + + + + + + 40px +
+
+ + + + + + 28px +
+
+ + + + + 18px 托盘 +
+
+ +
+ Windows 任务栏 + +
+ +
    +
  • 实心填充几何：绝不是单线条，是具有面积感的厚重实心折刃，锐利且极具分量。
    • +
  • 绝对不撞脸 ×：主刀锋向右推进，搭配下部的命令光标基座，霸道清晰。
    • +
+
+ + +
+ Termius 精髓 · 原创结合 +

方案 C · 实心云端 · 实体 Switch 终端

+

对标 Termius 饱满云轮廓 · 内部雕刻双向穿梭拨杆

+ +
+ + + + + + + + + + + + + +
+ +
不同尺寸实测
+
+
+ + + + + + + + 40px +
+
+ + + + + + 28px +
+
+ + + + + 18px 托盘 +
+
+ +
+ Windows 任务栏 + +
+ +
    +
  • 实心剪影印章：纯白实心云朵极具视觉体量感，在黑色任务栏上像一个发光的浮雕印记。
    • +
  • 黑白负空间雕刻：内部黑色的穿梭滑块极其醒目，既有 Termius 的云端神髓，又有 Switch 的专属基因。
    • +
+
+ + +
+ 双色负形 · 工业闸刀 +

方案 D · 拓扑穿梭网格锁

+

两个实心 L 型几何咬合 · 形成流动互通隧道

+ +
+ + + + + + + + + + +
+ +
不同尺寸实测
+
+
+ + + + + + + 40px +
+
+ + + + + + 28px +
+
+ + + + + + 18px 托盘 +
+
+ +
+ Windows 任务栏 + +
+ +
    +
  • 正负形互锁：两个实体角块彼此咬合，勾勒出电路与交换机的逻辑结构。
    • +
  • 厚实块面：纯色块面填充，在微小托盘尺寸下绝不会糊掉。
    • +
+
+
+
\ No newline at end of file diff --git a/docs/termius-style-proposals.html b/docs/termius-style-proposals.html new file mode 100644 index 0000000..530d393 --- /dev/null +++ b/docs/termius-style-proposals.html @@ -0,0 +1,490 @@ +Termius 风格 VPS Switch 图标方案 + + +
+
+

向 Termius 级别的纯粹极简致敬

+

Termius 之所以好看，是因为它从不堆砌服务器抽屉和网线，而是把「纯粹外形」与「终端本质（>_）」做到了极致的减法融合。

+
+ +
+ 💡 为什么 Termius 这么抓人： + 它只有两样东西：一个极简现代的高饱和渐变圆角底 + 一个利落的终端字符。没有琐碎的小零件，小到 16px 托盘、大到 512px 视网膜屏都极其清晰有力。
+ 针对 VPS Switch，我们同样只抓两样最纯粹的灵魂：「云端 VPS」 + 「Switch 穿梭」，完全告别黑色。 +
+ +
+ +
+ Termius 原生神韵 +

方案 A · 极光紫 · 终端滑轨 Switch

+

Termius 标志性高饱和电紫渐变 · 极简 Switch 轨道

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
不同系统尺寸实测
+
+
+ + + + + + + + 48px 窗口 +
+
+ + + + + + + 32px 任务栏 +
+
+ + + + + + 20px 托盘 +
+
+ +
Windows 任务栏环境模拟
+
+ 深色任务栏 + +
+
+ 浅色任务栏 + +
+ +
    +
  • 神韵同频：采用与 Termius 同样摄人心魄的高级电紫渐变，深邃又极具科技感。
    • +
  • 核心隐喻：一个 Switch 滑轨，滑块本身就是一个向右冲锋的终端符号 >，完美呼应「VPS 终端 + Switch」。
    • +
+
+ + +
+ 活力与极简平衡 +

方案 B · 极简云端折线 · 珊瑚暖橙

+

对标 Termius 云朵剪影 · 融入活力暖橙与对冲穿梭符

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
不同系统尺寸实测
+
+
+ + + + + + + 48px 窗口 +
+
+ + + + + + 32px 任务栏 +
+
+ + + + + + 20px 托盘 +
+
+ +
Windows 任务栏环境模拟
+
+ 深色任务栏 + +
+
+ 浅色任务栏 + +
+ +
    +
  • 对冲双折角：就像按 Tab 快速切歌的标志一样，两个对冲的 > 表达无缝切换。
    • +
  • 温暖炽热：延续软件界面里最提神的心智橙色，在任务栏上一眼吸睛。
    • +
+
+ + +
+ 纯正云端终端 +

方案 C · 翡翠极光 · 云端极简终端符

+

直接继承 Termius 的经典公式：极简云轮廓 + 纯粹终端光标

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
不同系统尺寸实测
+
+
+ + + + + + + 48px 窗口 +
+
+ + + + + + 32px 任务栏 +
+
+ + + + + + 20px 托盘 +
+
+ +
Windows 任务栏环境模拟
+
+ 深色任务栏 + +
+
+ 浅色任务栏 + +
+ +
    +
  • 经典公式：直接借鉴 Termius 的最核心构图：云朵外形（VPS 云端）+ 纯粹的 > _。
    • +
  • 翡翠极光绿：象征着永远在线（Online）与安全健康，清新自然。
    • +
+
+
+
\ No newline at end of file diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg index 6c34525..f28fa95 100644 --- a/frontend/public/favicon.svg +++ b/frontend/public/favicon.svg @@ -1,9 +1,7 @@ - - - - - - - + + + + + diff --git a/frontend/src/components/BrandLogo.vue b/frontend/src/components/BrandLogo.vue index 70e7ac5..e88eecc 100644 --- a/frontend/src/components/BrandLogo.vue +++ b/frontend/src/components/BrandLogo.vue @@ -6,7 +6,7 @@ defineProps<{ diff --git a/src/desktop.rs b/src/desktop.rs index 8afea75..c31ee3d 100644 --- a/src/desktop.rs +++ b/src/desktop.rs @@ -34,7 +34,7 @@ const MENU_ID_SHOW: &str = "app:show"; const MENU_ID_QUIT: &str = "app:quit"; const MENU_HOST_PREFIX: &str = "host:"; -/// 纯代码光栅化生成 64x64 高清抗锯齿 VPS Switch 图标（深色圆角矩形 + 白色 > 终端符 + 活力橙圆点） +/// 纯代码光栅化生成 64x64 高清抗锯齿 VPS Switch 纯黑白拓扑互锁图标 pub fn render_brand_icon_rgba(size: u32) -> Vec { let mut buf = vec![0u8; (size * size * 4) as usize]; let s = size as f32; @@ -44,41 +44,51 @@ pub fn render_brand_icon_rgba(size: u32) -> Vec { let fx = (x as f32 + 0.5) / s * 64.0; let fy = (y as f32 + 0.5) / s * 64.0; - // 1. 圆角方块底 (64x64, rx=15) + // 1. 纯黑圆角方块基底 (64x64, rx=14) let bg_dist = sd_rounded_box(fx - 32.0, fy - 32.0, 29.0, 29.0, 14.0); if bg_dist > 1.0 { continue; } let bg_alpha = (0.5 - bg_dist).clamp(0.0, 1.0); - let mut r = 24.0; - let mut g = 24.0; - let mut b = 27.0; + let mut r = 0.0; + let mut g = 0.0; + let mut b = 0.0; - // 2. 左侧白色终端折线 > : (16, 20) -> (28, 32) -> (16, 44) - let d_seg1 = sd_segment(fx, fy, 16.0, 20.0, 27.5, 32.0) - 2.7; - let d_seg2 = sd_segment(fx, fy, 27.5, 32.0, 16.0, 44.0) - 2.7; - let d_chevron = d_seg1.min(d_seg2); - if d_chevron < 0.8 { - let w = (0.5 - d_chevron).clamp(0.0, 1.0); - r = r * (1.0 - w) + 250.0 * w; - g = g * (1.0 - w) + 250.0 * w; - b = b * (1.0 - w) + 250.0 * w; + // 外围 1px 微弱白光边框，在深色任务栏上保持轮廓分明 + if bg_dist > -1.2 && bg_dist < 0.2 { + let border_w = (1.0 - (bg_dist + 0.5).abs()).clamp(0.0, 1.0) * 0.22; + r += 255.0 * border_w; + g += 255.0 * border_w; + b += 255.0 * border_w; } - // 3. 右侧活力橙 Switch 节点圆 (cx=43, cy=32, r=6.8) - let d_dot = ((fx - 43.0).powi(2) + (fy - 32.0).powi(2)).sqrt() - 6.8; - if d_dot < 0.8 { - let w = (0.5 - d_dot).clamp(0.0, 1.0); - r = r * (1.0 - w) + 249.0 * w; - g = g * (1.0 - w) + 115.0 * w; - b = b * (1.0 - w) + 22.0 * w; + // 2. 左上实心 L 型滑块 (M16 18 H38 V26 H24 V40 H16 Z) + let d_b1_horiz = sd_rounded_box(fx - 27.0, fy - 22.0, 11.0, 4.0, 1.5); + let d_b1_vert = sd_rounded_box(fx - 20.0, fy - 29.0, 4.0, 11.0, 1.5); + let d_b1 = d_b1_horiz.min(d_b1_vert); + + // 3. 右下实心 L 型滑块 (M48 46 H26 V38 H40 V24 H48 Z) + let d_b2_horiz = sd_rounded_box(fx - 37.0, fy - 42.0, 11.0, 4.0, 1.5); + let d_b2_vert = sd_rounded_box(fx - 44.0, fy - 35.0, 4.0, 11.0, 1.5); + let d_b2 = d_b2_horiz.min(d_b2_vert); + + // 4. 中央穿透的瞬切光核 (cx=32, cy=32, r=3.5) + let d_dot = ((fx - 32.0).powi(2) + (fy - 32.0).powi(2)).sqrt() - 3.5; + + // 综合计算纯白图形距离场 + let d_glyph = d_b1.min(d_b2).min(d_dot); + if d_glyph < 0.8 { + let w = (0.5 - d_glyph).clamp(0.0, 1.0); + r = r * (1.0 - w) + 255.0 * w; + g = g * (1.0 - w) + 255.0 * w; + b = b * (1.0 - w) + 255.0 * w; } let idx = ((y * size + x) * 4) as usize; - buf[idx] = r as u8; - buf[idx + 1] = g as u8; - buf[idx + 2] = b as u8; + buf[idx] = r.min(255.0) as u8; + buf[idx + 1] = g.min(255.0) as u8; + buf[idx + 2] = b.min(255.0) as u8; buf[idx + 3] = (bg_alpha * 255.0) as u8; } } @@ -91,15 +101,6 @@ fn sd_rounded_box(px: f32, py: f32, bx: f32, by: f32, r: f32) -> f32 { (qx.max(0.0).powi(2) + qy.max(0.0).powi(2)).sqrt() + qx.max(qy).min(0.0) - r } -fn sd_segment(px: f32, py: f32, ax: f32, ay: f32, bx: f32, by: f32) -> f32 { - let pax = px - ax; - let pay = py - ay; - let bax = bx - ax; - let bay = by - ay; - let h = ((pax * bax + pay * bay) / (bax * bax + bay * bay)).clamp(0.0, 1.0); - ((pax - bax * h).powi(2) + (pay - bay * h).powi(2)).sqrt() -} - fn build_tray_menu(state: &Arc) -> Result { let menu = Menu::new(); let show_item = MenuItem::with_id(MENU_ID_SHOW, "打开 VPS Switch 主界面", true, None);