添加商业版页面 (#4)

* update:添加商业版内容

* update:添加插画并删除多余子版块

* update:加入商业版多发行版信息

* update:增加多cpu厂家标签

* update:商业版主页描述更新

* update:商业版标签前移到下载后面

* update:更新商业版内容“联系客服”按钮点击后的触发逻辑。展示联系方式并调用系统邮箱

* update:“关于页面”添加加入我们按钮

* update:使用@nuxt/icon引入SVG图标

* fix:修复竖屏设备导航栏由于增加”商业版“标签导致“GXDE OS"标签出界问题

* update:删除残留vue文件

* update:加入成果案例到商业版板块

* fix:修复790.29px*780px时，导航栏标签文字换行的问题

* fix:竖屏画面导航栏高度改为h-93.5

* update:更新商业版svg配图

* Standardize nav-link class styling

Removed padding from nav-link classes for consistency.

* fix(nav): 延后导航单行排布断点至 lg

修复视口在 780px~840px 区间时，因导航项增加导致的元素溢出和交叠问题。目前在设备大于 1024px 时才会并排显示导航栏项。

* style(commercial): 彻底重塑商业版前端插画与界面，并适配深色模式

1. 重绘场景插画：重新设计了“案例”、“客服”、“定制化”、“架构”、“分发”等 5 张大型场景 SVG 插图，升级为悬浮玻璃态面板、阵列多核管控板等高阶空间 UI 组合拼贴风，大幅提升商业严肃感与前瞻视觉。
2. 新增专属标题徽章：新设计 5 张针对各主体的立体厚重感微型徽章图（`*-title.svg`），替换原有的字体图标，增强每个模块的大型企服属性。
3. 清除硬编码与深色适配：地毯式拔除了插图内部强制锁色的 `<style>:root` 标签，并移除了用于高光的 `"#ffffff"` 死白硬层，无缝融入系统的深浅色动态 `var(--s-bg)` 等变量，适配完美的 Dark Mode 下暗色面板沉浸效果。
4. 界面版式对齐：重塑首屏第一区块（Section 1）的模拟 UI 板面为科技面板，收束卡片间距；重组了留板表单弹窗以及导航元素，令其样式表现与总应用的主界线全面拉齐。

---------

Co-authored-by: jiwangyihao <jwyh@jwyihao.top>

assets/icons/commercial-case.svg

@@ -0,0 +1,79 @@
+<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="glow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.5"/>
+      <stop offset="100%" stop-color="var(--s-bg)" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="0" dy="25" stdDeviation="30" flood-opacity="0.1" />
+    </filter>
+  </defs>
+
+  <rect x="0" y="0" width="800" height="800" fill="url(#glow)" />
+
+  <!-- Connecting Lines for Dashboard & Nodes -->
+  <path d="M 400 400 L 200 250" fill="none" stroke="var(--s-deco)" stroke-width="4" stroke-dasharray="10 10"/>
+  <path d="M 400 400 L 650 300" fill="none" stroke="var(--s-bg-2)" stroke-width="4" stroke-dasharray="10 10"/>
+  <path d="M 400 400 L 250 600" fill="none" stroke="var(--s-bg-3)" stroke-width="4" stroke-dasharray="10 10"/>
+  <path d="M 400 400 L 600 650" fill="none" stroke="var(--s-deco)" stroke-width="4" stroke-dasharray="10 10"/>
+
+  <!-- Central Management Dashboard Panel -->
+  <g transform="translate(250, 250)" filter="url(#shadow)">
+    <!-- Base Panel - using bg instead of fixed #ffffff -->
+    <rect width="300" height="300" rx="30" fill="var(--s-bg)" stroke="var(--s-bg-3)" stroke-width="3" opacity="0.95"/>
+    
+    <!-- Top Header -->
+    <path d="M 0 30 C 0 13.431 13.431 0 30 0 L 270 0 C 286.569 0 300 13.431 300 30 L 300 60 L 0 60 Z" fill="var(--s-bg-2)" opacity="0.5"/>
+    <circle cx="30" cy="30" r="8" fill="var(--s-deco)"/>
+    <circle cx="55" cy="30" r="8" fill="var(--s-bg-2)"/>
+    <circle cx="80" cy="30" r="8" fill="var(--s-bg-3)"/>
+    
+    <!-- Data Bars inside Dashboard -->
+    <rect x="30" y="100" width="240" height="40" rx="12" fill="var(--s-bg-2)"/>
+    <rect x="30" y="155" width="240" height="40" rx="12" fill="var(--s-bg-3)"/>
+    <rect x="30" y="210" width="160" height="40" rx="12" fill="var(--s-deco)"/>
+    <rect x="205" y="210" width="65" height="40" rx="12" fill="var(--s-bg-2)"/>
+    
+    <!-- Status Checkmarks / Dots -->
+    <circle cx="240" cy="120" r="8" fill="var(--s-bg)" opacity="0.8"/>
+    <circle cx="240" cy="175" r="8" fill="var(--s-bg)" opacity="0.8"/>
+    <circle cx="160" cy="230" r="8" fill="var(--s-bg-2)"/>
+  </g>
+
+  <!-- Peripheral Device 1 (Top Left) -->
+  <g transform="translate(100, 150) rotate(-15)" filter="url(#shadow)">
+    <rect width="180" height="120" rx="20" fill="var(--s-bg-2)"/>
+    <rect x="20" y="20" width="140" height="80" rx="12" fill="var(--s-bg)" opacity="0.9"/>
+    <rect x="40" y="40" width="100" height="12" rx="6" fill="var(--s-deco)"/>
+    <circle cx="50" cy="75" r="10" fill="var(--s-bg-2)"/>
+    <rect x="70" y="70" width="50" height="10" rx="5" fill="var(--s-bg-3)"/>
+  </g>
+
+  <!-- Peripheral Device 2 (Top Right) -->
+  <g transform="translate(560, 200) rotate(10)" filter="url(#shadow)">
+    <rect width="140" height="160" rx="24" fill="var(--s-bg-2)"/>
+    <rect x="20" y="20" width="100" height="70" rx="15" fill="var(--s-bg)" opacity="0.95"/>
+    <rect x="20" y="100" width="100" height="20" rx="10" fill="var(--s-bg-3)"/>
+    <rect x="40" y="130" width="60" height="10" rx="5" fill="var(--s-deco)"/>
+  </g>
+
+  <!-- Peripheral Device 3 (Bottom Left) -->
+  <g transform="translate(150, 520) rotate(5)" filter="url(#shadow)">
+    <rect width="160" height="140" rx="24" fill="var(--s-bg-3)"/>
+    <rect x="20" y="20" width="120" height="60" rx="12" fill="var(--s-bg)" opacity="0.95"/>
+    <circle cx="50" cy="105" r="15" fill="var(--s-deco)"/>
+    <rect x="80" y="100" width="50" height="10" rx="5" fill="var(--s-bg-2)"/>
+  </g>
+
+  <!-- Peripheral Device 4 (Bottom Right) -->
+  <g transform="translate(520, 550) rotate(-8)" filter="url(#shadow)">
+    <rect width="180" height="100" rx="20" fill="var(--s-bg-2)"/>
+    <rect x="20" y="20" width="60" height="60" rx="15" fill="var(--s-bg)" opacity="0.95"/>
+    <rect x="90" y="30" width="70" height="12" rx="6" fill="var(--s-deco)"/>
+    <rect x="90" y="55" width="50" height="12" rx="6" fill="var(--s-bg-3)"/>
+  </g>
+
+  <circle cx="350" cy="120" r="18" fill="var(--s-bg-3)"/>
+  <circle cx="680" cy="500" r="12" fill="var(--s-deco)"/>
+  <circle cx="100" cy="450" r="16" fill="var(--s-bg-2)"/>
+</svg>