From be8c0d518f638cc1ac06166e7eaa8bfac598f0c5 Mon Sep 17 00:00:00 2001
From: momen <51269338+vmomenv@users.noreply.github.com>
Date: Wed, 4 Mar 2026 13:42:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=95=86=E4=B8=9A=E7=89=88?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20(#4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 app.vue                                       |  32 +-
 .../icons/commercial-architecture-title.svg   |  14 +
 assets/icons/commercial-architecture.svg      |  76 +++
 assets/icons/commercial-case-title.svg        |  10 +
 assets/icons/commercial-case.svg              |  79 +++
 assets/icons/commercial-contact-title.svg     |  10 +
 assets/icons/commercial-contact.svg           |  55 ++
 .../icons/commercial-customization-title.svg  |  10 +
 assets/icons/commercial-customization.svg     |  49 ++
 .../icons/commercial-distribution-title.svg   |  14 +
 assets/icons/commercial-distribution.svg      |  67 ++
 pages/about.vue                               |  10 +
 pages/commercial.vue                          | 635 ++++++++++++++++++
 13 files changed, 1047 insertions(+), 14 deletions(-)
 create mode 100644 assets/icons/commercial-architecture-title.svg
 create mode 100644 assets/icons/commercial-architecture.svg
 create mode 100644 assets/icons/commercial-case-title.svg
 create mode 100644 assets/icons/commercial-case.svg
 create mode 100644 assets/icons/commercial-contact-title.svg
 create mode 100644 assets/icons/commercial-contact.svg
 create mode 100644 assets/icons/commercial-customization-title.svg
 create mode 100644 assets/icons/commercial-customization.svg
 create mode 100644 assets/icons/commercial-distribution-title.svg
 create mode 100644 assets/icons/commercial-distribution.svg
 create mode 100644 pages/commercial.vue

diff --git a/app.vue b/app.vue
index 78c52ad..b58f6a3 100644
--- a/app.vue
+++ b/app.vue
@@ -92,8 +92,8 @@ const sDark = computed(() => {
       ? true
       : false
     : sDarkConfig.value === "dark"
-    ? true
-    : false;
+      ? true
+      : false;
 });
 
 provide("sDark", sDark);
@@ -150,7 +150,7 @@ onMounted(() => {
         `circle(0px at ${mouseX.value}px ${mouseY.value}px)`,
         `circle(${Math.hypot(
           Math.max(mouseX.value, innerWidth - mouseX.value),
-          Math.max(mouseY.value, innerHeight - mouseY.value)
+          Math.max(mouseY.value, innerHeight - mouseY.value),
         )}px at ${mouseX.value}px ${mouseY.value}px)`,
       ];
 
@@ -167,10 +167,10 @@ onMounted(() => {
           pseudoElement: `::view-transition-${
             sDarkValue ? "old" : "new"
           }(root)`,
-        }
+        },
       );
     },
-    { immediate: true }
+    { immediate: true },
   );
 });
 
@@ -192,10 +192,10 @@ const { data: latestRelease } = await useAsyncData(
       return appConfig.latestRelease;
     } else {
       return await $fetch(
-        "https://gitee.com/api/v5/repos/spark-store-project/spark-store/releases/latest"
+        "https://gitee.com/api/v5/repos/spark-store-project/spark-store/releases/latest",
       );
     }
-  }
+  },
 );
 
 provide("latestRelease", latestRelease);
@@ -206,7 +206,7 @@ const joinGroup = () => {
   dialog.value = true;
   window.open(
     "https://qm.qq.com/cgi-bin/qm/qr?authKey=1Oz2h5JBFSxBsHM63bwY1x0OswtQ08SBKj%2Fw9CRTxZ9%2B8%2FRKNIEv35s%2FhjOdRqkj&k=e7gkRbeGAjTfGupzsWbSbI8mOJM3ZqHQ&noverify=0",
-    "_blank"
+    "_blank",
   );
 };
 
@@ -246,13 +246,13 @@ const copyGroupNumber = async () => {
     <header
       ref="header"
       tabindex="0"
-      class="fixed w-full h-15 z-10 px-4 sm:px-8 lg:px-12 translate-y-[calc(var(--s-progress)*4*var(--spacing))] sm:translate-y-[calc(var(--s-progress)*8*var(--spacing))] lg:translate-y-[calc(var(--s-progress)*12*var(--spacing))] before:translate-x-[calc(var(--s-progress)*4*var(--spacing))] sm:before:translate-x-[calc(var(--s-progress)*8*var(--spacing))] lg:before:translate-x-[calc(var(--s-progress)*12*var(--spacing))] before:w-[calc(100%-var(--s-progress)*8*var(--spacing))] sm:before:w-[calc(100%-var(--s-progress)*16*var(--spacing))] lg:before:w-[calc(100%-var(--s-progress)*24*var(--spacing))] sm:h-auto focus-within:h-auto before:h-15 focus-within:before:h-82.5 sm:before:h-full focus-within:sm:before:h-full overflow-hidden focus-within:overflow-visible transition-discrete group"
+      class="fixed w-full h-15 z-10 px-4 sm:px-8 lg:px-12 translate-y-[calc(var(--s-progress)*4*var(--spacing))] sm:translate-y-[calc(var(--s-progress)*8*var(--spacing))] lg:translate-y-[calc(var(--s-progress)*12*var(--spacing))] before:translate-x-[calc(var(--s-progress)*4*var(--spacing))] sm:before:translate-x-[calc(var(--s-progress)*8*var(--spacing))] lg:before:translate-x-[calc(var(--s-progress)*12*var(--spacing))] before:w-[calc(100%-var(--s-progress)*8*var(--spacing))] sm:before:w-[calc(100%-var(--s-progress)*16*var(--spacing))] lg:before:w-[calc(100%-var(--s-progress)*24*var(--spacing))] sm:h-auto focus-within:h-auto before:h-15 focus-within:before:h-93.5 sm:before:h-full focus-within:sm:before:h-full overflow-hidden focus-within:overflow-visible transition-discrete group"
       :style="{ '--s-progress': sProgress }"
       @click="if (!header?.matches(':focus-within')) header?.focus();"
       @focus="handleHeaderFocus"
     >
       <nav
-        class="relative flex px-2.5 md:px-4 lg:px-8 items-center flex-col md:flex-row before:opacity-0 group-focus-within:before:opacity-100 sm:before:opacity-100 before:origin-top before:scale-0 group-focus-within:before:scale-100 sm:before:scale-100 before:translate-x-[calc(50vw-14.5*var(--spacing))] before:translate-y-15 group-focus-within:before:translate-x-[calc(var(--s-x)*1px)] group-focus-within:before:translate-y-[calc(var(--s-y)*1px)] sm:before:translate-x-[calc(var(--s-x)*1px)] sm:before:translate-y-[calc(var(--s-y)*1px)]"
+        class="relative flex px-2.5 md:px-4 lg:px-8 items-center flex-col lg:flex-row before:opacity-0 group-focus-within:before:opacity-100 sm:before:opacity-100 before:origin-top before:scale-0 group-focus-within:before:scale-100 sm:before:scale-100 before:translate-x-[calc(50vw-14.5*var(--spacing))] before:translate-y-15 group-focus-within:before:translate-x-[calc(var(--s-x)*1px)] group-focus-within:before:translate-y-[calc(var(--s-y)*1px)] sm:before:translate-x-[calc(var(--s-x)*1px)] sm:before:translate-y-[calc(var(--s-y)*1px)]"
         :class="{ mounted }"
         :style="{
           '--s-x': sX,
@@ -286,10 +286,10 @@ const copyGroupNumber = async () => {
           </div>
         </div>
         <div
-          class="flex grow pb-2.5 md:pt-2.5 items-end sm:items-center flex-row-reverse sm:flex-row w-full sm:w-auto justify-between md:justify-end opacity-0 group-focus-within:opacity-100 sm:opacity-100 origin-top scale-0 group-focus-within:scale-100 sm:scale-100 transition-transform duration-300"
+          class="flex grow pb-2.5 lg:pt-2.5 items-end sm:items-center flex-row-reverse sm:flex-row w-full sm:w-auto justify-between lg:justify-end opacity-0 group-focus-within:opacity-100 sm:opacity-100 origin-top scale-0 group-focus-within:scale-100 sm:scale-100 transition-transform duration-300"
         >
           <div
-            class="flex flex-col gap-1 mr-1.5 md:mr-1 lg:gap-2 lg:mr-2 sm:flex-row items-end sm:items-center"
+            class="flex flex-col gap-1 mr-1.5 lg:mr-1 lg:gap-2 lg:mr-2 sm:flex-row items-end sm:items-center"
           >
             <NuxtLink to="/" class="nav-link" active-class="active">
               首页
@@ -297,6 +297,9 @@ const copyGroupNumber = async () => {
             <NuxtLink to="/download" class="nav-link" active-class="active">
               下载
             </NuxtLink>
+            <NuxtLink to="/commercial" class="nav-link" active-class="active">
+              商业版
+            </NuxtLink>
             <a
               href="https://bbs.spark-app.store/"
               class="nav-link"
@@ -323,8 +326,8 @@ const copyGroupNumber = async () => {
               sDarkConfig === 'auto'
                 ? 'pi-bullseye'
                 : sDarkConfig === 'dark'
-                ? 'pi-moon'
-                : 'pi-sun'
+                  ? 'pi-moon'
+                  : 'pi-sun'
             }`"
             aria-label="Toggle Dark Mode"
             size="small"
@@ -513,6 +516,7 @@ header {
     border-radius: calc(var(--spacing) * 4.75);
     font-weight: bold;
     color: var(--p-surface-600);
+    white-space: nowrap;
 
     &.active {
       color: var(--p-primary-600);
diff --git a/assets/icons/commercial-architecture-title.svg b/assets/icons/commercial-architecture-title.svg
new file mode 100644
index 0000000..adf6433
--- /dev/null
+++ b/assets/icons/commercial-architecture-title.svg
@@ -0,0 +1,14 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+
+    <g>
+        <rect x="64" y="64" width="384" height="96" rx="16" fill="var(--s-bg)"/>
+        <circle cx="112" cy="112" r="16" fill="var(--s-bg-3)"/>
+        <circle cx="160" cy="112" r="16" fill="var(--s-deco)"/>
+        <rect x="64" y="208" width="384" height="96" rx="16" fill="var(--s-bg-2)"/>
+        <circle cx="112" cy="256" r="16" fill="var(--s-bg-3)"/>
+        <circle cx="160" cy="256" r="16" fill="var(--s-bg)"/>
+        <rect x="64" y="352" width="384" height="96" rx="16" fill="var(--s-deco)"/>
+        <circle cx="112" cy="400" r="16" fill="var(--s-bg-2)"/>
+        <circle cx="160" cy="400" r="16" fill="var(--s-bg-3)"/>
+    </g>
+</svg>
diff --git a/assets/icons/commercial-architecture.svg b/assets/icons/commercial-architecture.svg
new file mode 100644
index 0000000..c36cce1
--- /dev/null
+++ b/assets/icons/commercial-architecture.svg
@@ -0,0 +1,76 @@
+<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <radialGradient id="hubglow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="var(--s-bg-2)" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="var(--s-bg)" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="layer" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.9" />
+      <stop offset="100%" stop-color="var(--s-bg-2)" stop-opacity="0.5" />
+    </linearGradient>
+    <filter id="shadow-arch" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="-10" dy="25" stdDeviation="25" flood-opacity="0.15" />
+    </filter>
+  </defs>
+
+  <!-- Central Hub Layers -->
+  <g transform="translate(100, 420)">
+    <!-- Base Platform -->
+    <path d="M 300 100 L 500 200 L 300 300 L 100 200 Z" fill="var(--s-bg-2)" opacity="0.4" />
+    <path d="M 300 0 L 550 120 L 300 250 L 50 120 Z" fill="var(--s-bg-3)" opacity="0.3" transform="translate(0, -60)" />
+    
+    <!-- Central Core Layer -->
+    <!-- Center block -->
+    <g transform="translate(300, 50)" filter="url(#shadow-arch)">
+      <path d="M 0 0 L 100 -50 L 0 -100 L -100 -50 Z" fill="var(--s-deco)" />
+      <path d="M 0 0 L 100 -50 L 100 50 L 0 100 Z" fill="var(--s-deco)" opacity="0.7"/>
+      <path d="M 0 0 L -100 -50 L -100 50 L 0 100 Z" fill="var(--s-deco)" opacity="0.5"/>
+    </g>
+
+    <g transform="translate(300, -80)" filter="url(#shadow-arch)">
+      <path d="M 0 0 L 60 -30 L 0 -60 L -60 -30 Z" fill="var(--s-bg)" />
+      <path d="M 0 0 L 60 -30 L 60 40 L 0 70 Z" fill="var(--s-bg)" opacity="0.7"/>
+      <path d="M 0 0 L -60 -30 L -60 40 L 0 70 Z" fill="var(--s-bg)" opacity="0.5"/>
+    </g>
+    
+    <!-- Floating Architectural Nodes -->
+    <!-- Left Node -->
+    <g transform="translate(100, -20)" filter="url(#shadow-arch)">
+       <path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-3)" />
+       <path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.7"/>
+       <path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.5"/>
+       <path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-bg)" />
+    </g>
+
+    <!-- Top Node -->
+    <g transform="translate(300, -220)" filter="url(#shadow-arch)">
+       <path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-2)" />
+       <path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.7"/>
+       <path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.5"/>
+       <path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-deco)" />
+    </g>
+
+    <!-- Right Node -->
+    <g transform="translate(500, -20)" filter="url(#shadow-arch)">
+       <path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-3)" />
+       <path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.7"/>
+       <path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.5"/>
+       <path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-bg)" />
+    </g>
+    
+      <!-- Right Node 2-->
+      <g transform="translate(420, 140)" filter="url(#shadow-arch)">
+         <path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-2)" />
+         <path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.7"/>
+         <path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.5"/>
+         <path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-bg)" />
+      </g>
+
+    <!-- Connecting Datastreams -->
+    <path d="M 300 -80 L 300 -220" stroke="var(--s-deco)" stroke-width="4" stroke-dasharray="8,8" opacity="0.8" />
+    <path d="M 100 -20 L 300 80" stroke="var(--s-bg-3)" stroke-width="4" stroke-dasharray="8,8" />
+    <path d="M 500 -20 L 300 80" stroke="var(--s-bg-3)" stroke-width="4" stroke-dasharray="8,8" />
+    <path d="M 420 90 L 300 30" stroke="var(--s-bg-2)" stroke-width="4" stroke-dasharray="8,8" />
+  </g>
+</svg>
diff --git a/assets/icons/commercial-case-title.svg b/assets/icons/commercial-case-title.svg
new file mode 100644
index 0000000..5ae6515
--- /dev/null
+++ b/assets/icons/commercial-case-title.svg
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(256, 256)">
+        <rect x="-160" y="-160" width="160" height="160" rx="32" fill="var(--s-bg-2)"/>
+        <rect x="0" y="-160" width="160" height="160" rx="32" fill="var(--s-bg)"/>
+        <rect x="-160" y="0" width="160" height="160" rx="32" fill="var(--s-bg-3)"/>
+        <rect x="0" y="0" width="160" height="160" rx="32" fill="var(--s-deco)"/>
+        <circle cx="0" cy="0" r="48" fill="var(--s-bg)" opacity="0.9"/>
+        <circle cx="0" cy="0" r="16" fill="var(--s-bg-2)"/>
+    </g>
+</svg>
diff --git a/assets/icons/commercial-case.svg b/assets/icons/commercial-case.svg
new file mode 100644
index 0000000..1b33ca4
--- /dev/null
+++ b/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>
diff --git a/assets/icons/commercial-contact-title.svg b/assets/icons/commercial-contact-title.svg
new file mode 100644
index 0000000..53ccf47
--- /dev/null
+++ b/assets/icons/commercial-contact-title.svg
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(256, 256)">
+        <rect x="-160" y="-120" width="160" height="240" rx="32" fill="var(--s-bg-2)"/>
+        <rect x="-80" y="-80" width="240" height="160" rx="40" fill="var(--s-bg)"/>
+        <rect x="0" y="40" width="160" height="80" rx="20" fill="var(--s-deco)"/>
+        <circle cx="80" cy="80" r="12" fill="var(--s-bg)" opacity="0.9"/>
+        <rect x="40" y="-20" width="80" height="16" rx="8" fill="var(--s-deco)"/>
+        <rect x="40" y="12" width="40" height="16" rx="8" fill="var(--s-bg-3)"/>
+    </g>
+</svg>
diff --git a/assets/icons/commercial-contact.svg b/assets/icons/commercial-contact.svg
new file mode 100644
index 0000000..db7fec2
--- /dev/null
+++ b/assets/icons/commercial-contact.svg
@@ -0,0 +1,55 @@
+<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.6"/>
+      <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="-10" dy="25" stdDeviation="30" flood-opacity="0.1" />
+    </filter>
+  </defs>
+
+  <rect x="0" y="0" width="800" height="800" fill="url(#glow)" />
+
+  <!-- Background Abstract Message Shape -->
+  <g transform="translate(400, 420) rotate(-15)">
+    <rect x="-240" y="-180" width="480" height="360" rx="60" fill="var(--s-bg)" opacity="0.8"/>
+  </g>
+
+  <!-- Mail / Contact Card floating in front -->
+  <g transform="translate(160, 220)" filter="url(#shadow)">
+    <!-- Base Card -->
+    <rect width="460" height="300" rx="30" fill="var(--s-bg)" stroke="var(--s-bg-2)" stroke-width="2" opacity="0.95"/>
+    
+    <!-- Top Bar -->
+    <path d="M 0 30 C 0 13.431 13.431 0 30 0 L 430 0 C 446.569 0 460 13.431 460 30 L 460 80 L 0 80 Z" fill="var(--s-bg-2)"/>
+    <circle cx="50" cy="40" r="16" fill="var(--s-bg)" opacity="0.8"/>
+    <rect x="80" y="32" width="160" height="16" rx="8" fill="var(--s-bg)" opacity="0.8"/>
+    
+    <!-- Messages Body -->
+    <rect x="40" y="110" width="220" height="50" rx="20" fill="var(--s-bg-2)"/>
+    <rect x="60" y="125" width="160" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
+    <rect x="60" y="140" width="100" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
+
+    <rect x="200" y="180" width="220" height="50" rx="20" fill="var(--s-bg-3)"/>
+    <rect x="220" y="195" width="180" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
+    <rect x="220" y="210" width="120" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
+    
+    <rect x="40" y="250" width="180" height="20" rx="10" fill="var(--s-bg-2)" opacity="0.8"/>
+  </g>
+
+  <!-- Floating Stats Card (Graph) representing Solution/Quote -->
+  <g transform="translate(520, 440) rotate(8)" filter="url(#shadow)">
+    <rect width="200" height="220" rx="30" fill="var(--s-bg)" stroke="var(--s-deco)" stroke-width="3" opacity="0.95"/>
+    <rect x="30" y="30" width="140" height="140" rx="70" fill="none" stroke="var(--s-bg-2)" stroke-width="20"/>
+    <path d="M 100 30 A 70 70 0 0 1 170 100" fill="none" stroke="var(--s-deco)" stroke-width="20" stroke-linecap="round"/>
+    <circle cx="100" cy="100" r="24" fill="var(--s-bg-3)"/>
+    <rect x="40" y="180" width="120" height="16" rx="8" fill="var(--s-bg-2)"/>
+  </g>
+
+  <!-- Accent Elements -->
+  <circle cx="680" cy="220" r="15" fill="var(--s-deco)"/>
+  <circle cx="150" cy="580" r="25" fill="var(--s-bg-3)"/>
+  <rect x="620" y="160" width="40" height="40" rx="10" fill="var(--s-deco)" transform="rotate(25 640 180)"/>
+  <circle cx="120" cy="380" r="15" fill="var(--s-bg-2)"/>
+</svg>
diff --git a/assets/icons/commercial-customization-title.svg b/assets/icons/commercial-customization-title.svg
new file mode 100644
index 0000000..d12fad7
--- /dev/null
+++ b/assets/icons/commercial-customization-title.svg
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+
+    <g>
+        <circle cx="160" cy="160" r="64" fill="var(--s-bg-3)"/>
+        <circle cx="352" cy="112" r="48" fill="var(--s-bg-2)"/>
+        <circle cx="112" cy="352" r="48" fill="var(--s-bg)"/>
+        <path d="M 224 224 L 400 352 C 430 376 430 416 400 440 C 370 464 330 464 300 440 L 124 316 Z" fill="var(--s-deco)"/>
+        <circle cx="350" cy="400" r="16" fill="var(--s-bg)"/>
+    </g>
+</svg>
diff --git a/assets/icons/commercial-customization.svg b/assets/icons/commercial-customization.svg
new file mode 100644
index 0000000..e39e5fb
--- /dev/null
+++ b/assets/icons/commercial-customization.svg
@@ -0,0 +1,49 @@
+<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.8"/>
+      <stop offset="100%" stop-color="var(--s-bg)" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="glass" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.9" />
+      <stop offset="100%" stop-color="var(--s-bg-2)" stop-opacity="0.3" />
+    </linearGradient>
+    <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)" />
+  
+  <!-- Base Device Layer -->
+  <g transform="translate(150, 200) rotate(-10)" filter="url(#shadow)">
+    <rect width="500" height="400" rx="40" fill="url(#glass)" stroke="var(--s-bg-3)" stroke-width="4"/>
+    <rect x="30" y="30" width="440" height="340" rx="24" fill="var(--s-bg)"/>
+    
+    <!-- UI elements representing customization -->
+    <rect x="50" y="50" width="200" height="30" rx="15" fill="var(--s-bg-2)" />
+    <!-- Content Cards -->
+    <rect x="50" y="110" width="180" height="120" rx="20" fill="var(--s-deco)" opacity="0.8" />
+    <rect x="250" y="110" width="120" height="120" rx="20" fill="var(--s-bg-3)" />
+    <rect x="390" y="110" width="60" height="120" rx="20" fill="var(--s-bg-2)" />
+    <!-- Bottom Dashboard elements -->
+    <circle cx="100" cy="290" r="40" fill="var(--s-bg-3)" />
+    <rect x="160" y="270" width="290" height="20" rx="10" fill="var(--s-bg-2)" />
+    <rect x="160" y="310" width="150" height="20" rx="10" fill="var(--s-deco)" opacity="0.5" />
+  </g>
+
+  <!-- Floating Customized Panels -->
+  <g transform="translate(500, 480) rotate(15)" filter="url(#shadow)">
+    <rect width="200" height="150" rx="20" fill="url(#glass)" stroke="var(--s-deco)" stroke-width="4"/>
+    <circle cx="100" cy="75" r="30" fill="var(--s-deco)" />
+  </g>
+  <g transform="translate(100, 520) rotate(-5)" filter="url(#shadow)">
+    <rect width="220" height="80" rx="40" fill="var(--s-bg-3)"/>
+    <circle cx="40" cy="40" r="20" fill="var(--s-bg)" />
+    <rect x="80" y="30" width="100" height="20" rx="10" fill="var(--s-bg)" />
+  </g>
+  
+  <path d="M 650 150 L 670 150 M 660 140 L 660 160" stroke="var(--s-deco)" stroke-width="4" stroke-linecap="round"/>
+  <path d="M 120 280 L 140 280 M 130 270 L 130 290" stroke="var(--s-bg-3)" stroke-width="4" stroke-linecap="round"/>
+</svg>
diff --git a/assets/icons/commercial-distribution-title.svg b/assets/icons/commercial-distribution-title.svg
new file mode 100644
index 0000000..13ef29e
--- /dev/null
+++ b/assets/icons/commercial-distribution-title.svg
@@ -0,0 +1,14 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+
+    <g>
+        <circle cx="256" cy="256" r="80" fill="var(--s-deco)"/>
+        <circle cx="256" cy="64" r="48" fill="var(--s-bg)"/>
+        <circle cx="256" cy="448" r="48" fill="var(--s-bg-2)"/>
+        <circle cx="64" cy="256" r="48" fill="var(--s-bg-3)"/>
+        <circle cx="448" cy="256" r="48" fill="var(--s-bg)"/>
+        <path d="M 256 112 L 256 176" stroke="var(--s-deco)" stroke-width="24"/>
+        <path d="M 256 400 L 256 336" stroke="var(--s-deco)" stroke-width="24"/>
+        <path d="M 112 256 L 176 256" stroke="var(--s-deco)" stroke-width="24"/>
+        <path d="M 400 256 L 336 256" stroke="var(--s-deco)" stroke-width="24"/>
+    </g>
+</svg>
diff --git a/assets/icons/commercial-distribution.svg b/assets/icons/commercial-distribution.svg
new file mode 100644
index 0000000..0e34dad
--- /dev/null
+++ b/assets/icons/commercial-distribution.svg
@@ -0,0 +1,67 @@
+<svg viewBox="-500 -500 1000 1000" xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="0" dy="20" stdDeviation="25" flood-color="var(--s-bg-3)" flood-opacity="0.25" />
+    </filter>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="var(--s-bg-2)" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="var(--s-bg-3)" stop-opacity="0.9"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Orbital patterns -->
+  <g opacity="0.6" stroke="var(--s-bg)" stroke-width="4" fill="none">
+    <ellipse cx="0" cy="0" rx="350" ry="150" transform="rotate(-25)" stroke-dasharray="25 10 5 10" />
+    <ellipse cx="0" cy="0" rx="400" ry="180" transform="rotate(25)" stroke-dasharray="10 20" stroke-width="8"/>
+  </g>
+
+  <!-- Central Hub (Spark Store) -->
+  <g filter="url(#shadow)">
+    <!-- Base aura -->
+    <circle cx="0" cy="0" r="110" fill="url(#grad1)"/>
+    <!-- Overlapping geometry -->
+    <circle cx="0" cy="0" r="70" fill="var(--s-deco)" opacity="0.4"/>
+    <rect x="-35" y="-35" width="70" height="70" rx="15" fill="var(--s-bg)" transform="rotate(45)"/>
+    <circle cx="0" cy="0" r="15" fill="var(--s-bg-3)" />
+  </g>
+
+  <!-- Outer orbiting nodes -->
+  <!-- Node 1: UOS / Deepin (Diamond-like) -->
+  <g transform="translate(180, -260) rotate(-25)" filter="url(#shadow)">
+     <rect x="-45" y="-45" width="90" height="90" rx="20" transform="rotate(45)" fill="var(--s-bg-2)"/>
+     <rect x="-25" y="-25" width="50" height="50" rx="10" transform="rotate(45)" fill="var(--s-deco)" opacity="0.5"/>
+  </g>
+  <path d="M 60 -80 L 140 -200" stroke="var(--s-deco)" stroke-width="5" stroke-dasharray="8,8" opacity="0.7"/>
+
+  <!-- Node 2: Kylin (Hexagon) -->
+  <g transform="translate(-280, 100) rotate(15)" filter="url(#shadow)">
+     <path d="M 0 -60 L 52 -30 L 52 30 L 0 60 L -52 30 L -52 -30 Z" fill="var(--s-bg-3)"/>
+     <circle cx="0" cy="0" r="25" fill="var(--s-bg)"/>
+  </g>
+  <path d="M -90 30 L -210 75" stroke="var(--s-bg-3)" stroke-width="5" stroke-dasharray="8,8" opacity="0.7"/>
+
+  <!-- Node 3: Fangde (Tech Container) -->
+  <g transform="translate(300, 180) rotate(-10)" filter="url(#shadow)">
+     <rect x="-60" y="-50" width="120" height="100" rx="25" fill="var(--s-bg)"/>
+     <rect x="-35" y="-25" width="70" height="50" rx="15" fill="var(--s-bg-2)"/>
+     <circle cx="-45" cy="-35" r="5" fill="var(--s-deco)"/>
+     <circle cx="45" cy="35" r="5" fill="var(--s-deco)"/>
+  </g>
+  <path d="M 80 50 L 230 140" stroke="var(--s-bg)" stroke-width="5" stroke-dasharray="8,8" opacity="0.7"/>
+
+  <!-- Node 4: Small satellite -->
+  <g transform="translate(-150, -180)" filter="url(#shadow)">
+    <circle cx="0" cy="0" r="30" fill="var(--s-deco)" opacity="0.8"/>
+  </g>
+  <path d="M -60 -60 L -120 -150" stroke="var(--s-deco)" stroke-width="3" stroke-dasharray="5,5" opacity="0.5"/>
+
+
+  <!-- Floating particles -->
+  <g filter="url(#shadow)">
+    <circle cx="360" cy="-60" r="20" fill="var(--s-bg)" opacity="0.6"/>
+    <circle cx="-60" cy="280" r="15" fill="var(--s-bg-3)" opacity="0.8"/>
+    <rect x="200" y="-50" width="15" height="15" rx="4" fill="var(--s-deco)" opacity="0.5"/>
+    <rect x="-100" y="150" width="20" height="20" rx="5" fill="var(--s-bg-2)" transform="rotate(30)"/>
+  </g>
+</svg>
diff --git a/pages/about.vue b/pages/about.vue
index 396382e..38bbb88 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -71,6 +71,16 @@ function scrollIntoView(id: string) {
             >我们期待通过社区用户的互助和支持，让星火计划的火焰持续燃烧，为
             Linux 生态系统带来持续的活力。
           </p>
+          <a
+            href="https://join-us.spark-app.store/"
+            target="_blank"
+            class="px-8 py-2.5 text-2xl font-bold text-white self-start mt-4 pointer-events-auto from-primary-400 to-primary-500 bg-linear-to-r rounded-full dark:from-primary-500 dark:to-primary-600"
+          >
+            <span class="font-(family-name:--s-title-font) opacity-60 mr-4"
+              >JOIN</span
+            >
+            加入我们
+          </a>
         </div>
       </div>
 
diff --git a/pages/commercial.vue b/pages/commercial.vue
new file mode 100644
index 0000000..8a6d227
--- /dev/null
+++ b/pages/commercial.vue
@@ -0,0 +1,635 @@
+<script setup lang="ts">
+import {
+  onMounted,
+  watchEffect,
+  ref,
+  inject,
+  type Ref,
+  type ComponentPublicInstance,
+} from "vue";
+import { range } from "~/utils/index";
+import Dialog from "primevue/dialog";
+
+const scrollPanel = inject<Ref<ComponentPublicInstance>>("scrollPanel");
+const sProgress = ref(0);
+const contactDialog = ref(false);
+
+onMounted(() => {
+  watchEffect(() => {
+    const scrollTop =
+      (scrollPanel?.value as unknown as { lastScrollTop: number })
+        .lastScrollTop || 0;
+    const clientHeight = scrollPanel?.value?.$el.clientHeight || 1;
+    sProgress.value = scrollTop / clientHeight;
+  });
+});
+
+const scrollToNext = () => {
+  const container = scrollPanel?.value?.$el.firstChild.firstChild;
+  if (container) {
+    container.scrollBy({ top: window.innerHeight, behavior: "smooth" });
+  }
+};
+
+const sendEmail = () => {
+  const to = "shenmo@spark-app.store";
+  const cc = "momen@spark-app.store";
+  const subject = encodeURIComponent("商业版咨询");
+  const body = encodeURIComponent("您好，我想咨询商业版的相关信息：\n\n");
+  window.location.href = `mailto:${to}?cc=${cc}&subject=${subject}&body=${body}`;
+  contactDialog.value = true;
+};
+</script>
+
+<template>
+  <div class="page">
+    <section
+      class="relative flex items-center justify-center gap-10 pt-24 pb-24 sm:pb-0 flex-col sm:flex-row"
+    >
+      <div
+        class="fixed w-full h-full s-size-4 lg:s-size-5.5 top-0 left-0 z-[-1] flex items-end sm:justify-center"
+        :style="{
+          opacity: 1 - range(0, 0.5, sProgress) * 2,
+          '--s-n': 16,
+          '--s-progress': range(0, 0.5, sProgress) * 2,
+        }"
+      >
+        <div class="absolute top-0 left-0 flex flex-col">
+          <div v-for="r in 16" :key="r" class="flex">
+            <i
+              v-for="c in Math.min(16, 16 - r + 3)"
+              :key="`${r}-${c}`"
+              class="s-dots"
+              :style="{
+                '--s-row': r,
+                '--s-col': c,
+              }"
+            />
+          </div>
+        </div>
+        <div class="absolute bottom-0 right-0 flex flex-col rotate-180">
+          <div v-for="r in 16" :key="r" class="flex">
+            <i
+              v-for="c in Math.min(16, 16 - r + 3)"
+              :key="`${r}-${c}`"
+              class="s-dots"
+              :style="{
+                '--s-row': r,
+                '--s-col': c,
+                '--s-n': 16,
+              }"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="card flex flex-col lg:flex-row items-center lg:items-center px-4 md:px-6 lg:px-9 rounded-3xl gap-10 sm:gap-14 py-8 pb-15 sm:py-15 w-full max-w-7xl"
+      >
+        <div class="flex flex-col gap-6 lg:gap-8 flex-1">
+          <div class="flex flex-col text-center lg:text-left gap-4">
+            <h1
+              class="font-bold text-4xl sm:text-5xl lg:text-6xl text-surface-900 dark:text-surface-50"
+            >
+              星火应用商店<br />
+              <span class="text-primary-500 mt-2 block">商业版</span>
+            </h1>
+          </div>
+          <div
+            class="flex flex-col text-surface-500 gap-2 text-base sm:text-lg lg:text-xl text-center lg:text-left dark:text-surface-300"
+          >
+            <p>为政府、企事业单位客户提供专业的应用商店解决方案：</p>
+            <div class="flex flex-col gap-1 mt-2 lg:items-start items-center">
+              <span class="flex items-center gap-2"
+                ><i class="pi pi-check text-primary-500" />
+                支持安装在主流信创设备上</span
+              >
+              <span class="flex items-center gap-2"
+                ><i class="pi pi-check text-primary-500" />
+                支持定制客户端和服务器端本地部署</span
+              >
+              <span class="flex items-center gap-2"
+                ><i class="pi pi-check text-primary-500" />
+                支持指定软件适配服务和信创设备迁移</span
+              >
+            </div>
+            <p class="mt-4 font-semibold">助力客户构建完善的软件分发体系。</p>
+          </div>
+          <div class="flex gap-4 mt-2 justify-center lg:justify-start">
+            <button
+              @click="sendEmail"
+              class="px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white rounded-full font-bold shadow-lg shadow-primary-500/30 transition-all hover:-translate-y-1"
+            >
+              联系客服
+            </button>
+            <button
+              @click="scrollToNext"
+              class="px-6 py-3 border-2 border-primary-500 text-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/20 rounded-full font-bold transition-all hover:-translate-y-1 cursor-pointer"
+            >
+              了解更多
+            </button>
+          </div>
+        </div>
+
+        <!-- 模拟企业控制台 UI 窗口 -->
+        <div
+          class="hidden sm:flex flex-col flex-1 max-w-lg w-full rounded-2xl bg-surface-0/60 dark:bg-surface-800/80 shadow-[0_20px_50px_rgba(0,0,0,0.1)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.5)] overflow-hidden border border-surface-200/50 dark:border-surface-700/50 h-[380px] relative font-mono backdrop-blur-xl"
+        >
+          <!-- 动态背景光晕 -->
+          <div
+            class="absolute -top-20 -right-20 w-64 h-64 bg-primary-500/10 dark:bg-primary-500/5 blur-3xl rounded-full"
+          ></div>
+          <div
+            class="absolute -bottom-20 -left-20 w-64 h-64 bg-secondary-500/10 dark:bg-secondary-500/5 blur-3xl rounded-full"
+          ></div>
+
+          <div
+            class="h-12 border-b border-surface-200/50 dark:border-surface-700/50 flex items-center px-4 bg-surface-50/80 dark:bg-surface-900/80 backdrop-blur-md"
+          >
+            <div class="flex gap-2">
+              <div class="w-3 h-3 rounded-full bg-red-400"></div>
+              <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
+              <div class="w-3 h-3 rounded-full bg-green-400"></div>
+            </div>
+            <div
+              class="ml-4 h-4 w-40 bg-surface-100 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700"
+            ></div>
+            <div class="ml-auto flex gap-3">
+              <div
+                class="h-4 w-12 bg-primary-100 dark:bg-primary-900/50 rounded-lg border border-primary-200 dark:border-primary-800"
+              ></div>
+            </div>
+          </div>
+          <div class="flex flex-1 overflow-hidden relative z-10">
+            <!-- 左侧边栏 -->
+            <div
+              class="w-1/3 border-r border-surface-100 dark:border-surface-700/50 p-4 flex flex-col gap-4 bg-surface-50/50 dark:bg-surface-800/50 backdrop-blur-sm"
+            >
+              <div
+                class="h-8 w-full bg-primary-500 text-white rounded-lg flex items-center justify-center text-xs font-bold tracking-wider shadow-sm"
+              >
+                SPARK PRO
+              </div>
+              <div class="flex flex-col gap-2 mt-2">
+                <div
+                  class="h-5 w-full bg-surface-100 dark:bg-surface-700 rounded-md"
+                ></div>
+                <div
+                  class="h-5 w-5/6 bg-surface-100 dark:bg-surface-700 rounded-md"
+                ></div>
+                <div
+                  class="h-5 w-4/5 bg-surface-100 dark:bg-surface-700 rounded-md"
+                ></div>
+              </div>
+              <div
+                class="mt-auto p-3 rounded-xl bg-primary-50 dark:bg-primary-900/20 border border-primary-100 dark:border-primary-800"
+              >
+                <div
+                  class="w-8 h-8 rounded-full bg-primary-200 dark:bg-primary-800 mb-2 flex items-center justify-center"
+                >
+                  <div class="w-4 h-4 rounded-full bg-primary-500"></div>
+                </div>
+                <div
+                  class="h-2 w-1/2 bg-primary-300 dark:bg-primary-700 rounded-full mb-1"
+                ></div>
+                <div
+                  class="h-2 w-3/4 bg-primary-200 dark:bg-primary-800 rounded-full"
+                ></div>
+              </div>
+            </div>
+            <!-- 右侧主体内容 -->
+            <div
+              class="w-2/3 p-6 flex flex-col gap-5 bg-surface-0/50 dark:bg-surface-800/20 backdrop-blur-sm"
+            >
+              <div class="flex gap-4">
+                <div
+                  class="flex-[2] h-16 rounded-xl from-primary-400 to-primary-600 bg-linear-to-br shadow-md p-3 flex flex-col justify-end text-white"
+                >
+                  <div class="h-2 w-1/3 bg-white/30 rounded-full mb-1"></div>
+                  <div class="h-3 w-1/2 bg-white/50 rounded-full"></div>
+                </div>
+                <div
+                  class="flex-1 h-16 rounded-xl bg-surface-100 dark:bg-surface-700 flex items-center justify-center border border-surface-200 dark:border-surface-600"
+                >
+                  <div
+                    class="w-8 h-8 rounded-lg bg-surface-300 dark:bg-surface-500"
+                  ></div>
+                </div>
+              </div>
+              <div
+                class="flex-1 rounded-xl border border-surface-100 dark:border-surface-700 bg-surface-50/50 dark:bg-surface-800/80 p-4 flex flex-col gap-3"
+              >
+                <div class="flex justify-between items-center mb-2">
+                  <div
+                    class="h-3 w-20 bg-surface-300 dark:bg-surface-600 rounded-full"
+                  ></div>
+                  <div class="h-3 w-10 bg-green-400 rounded-full"></div>
+                </div>
+                <div class="flex items-end gap-2 flex-1 pt-4">
+                  <div
+                    class="w-1/5 rounded-t-md bg-primary-200 dark:bg-primary-900 h-[40%]"
+                  ></div>
+                  <div
+                    class="w-1/5 rounded-t-md bg-primary-300 dark:bg-primary-800 h-[60%]"
+                  ></div>
+                  <div
+                    class="w-1/5 rounded-t-md bg-primary-400 dark:bg-primary-700 h-[100%]"
+                  ></div>
+                  <div
+                    class="w-1/5 rounded-t-md bg-primary-300 dark:bg-primary-800 h-[80%]"
+                  ></div>
+                  <div
+                    class="w-1/5 rounded-t-md bg-primary-200 dark:bg-primary-900 h-[50%]"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section
+      class="flex flex-col items-center justify-center gap-6 lg:gap-8 px-8 pb-24 pt-24"
+    >
+      <div
+        class="flex items-center justify-center self-start sm:self-center gap-4 sm:gap-6"
+      >
+        <Icon
+          name="s:commercial-customization-title"
+          mode="svg"
+          class="!text-6xl sm:!text-7xl md:!text-[6rem] lg:!text-[7rem] text-primary-color s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
+        />
+        <h2
+          class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
+        >
+          <span
+            class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50 tracking-widest uppercase"
+            >CUSTOMIZATION</span
+          ><br />
+          专业定制&nbsp;&nbsp;专属服务
+        </h2>
+      </div>
+      <div
+        class="flex gap-8 lg:gap-16 max-w-7xl w-full flex-col-reverse sm:flex-row items-center justify-center"
+      >
+        <div
+          class="flex flex-col py-0 sm:py-8 lg:py-12 gap-6 items-center sm:items-start flex-1"
+        >
+          <div
+            class="flex flex-col text-center sm:text-start items-center sm:items-start"
+          >
+            <p
+              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-[1.5]"
+            >
+              专属企业形象
+            </p>
+            <p
+              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-[1.5] whitespace-nowrap"
+            >
+              满足企业个性化需求
+            </p>
+          </div>
+          <p
+            class="text-base sm:text-lg text-center sm:text-start text-surface-700 leading-[1.8] dark:text-surface-300"
+          >
+            商业版提供专属定制服务，可根据企业需求修改应用商店名称、logo、主题风格等，打造独一无二的企业级应用商店，提升企业品牌形象。从界面呈现到功能模块设定，全方位实现开箱即用的企业级定制。
+          </p>
+          <p
+            class="font-bold text-surface-700 dark:text-surface-300 text-base md:text-lg leading-[2]"
+          >
+            专属定制 / Logo 替换 / 风格定制
+          </p>
+        </div>
+        <Icon
+          name="s:commercial-customization"
+          class="w-full max-w-[20rem] sm:max-w-[24rem] lg:max-w-[30rem] h-auto object-contain hover:-translate-y-2 transition-transform duration-500 s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
+          mode="svg"
+        />
+      </div>
+    </section>
+
+    <section
+      class="flex flex-col items-center justify-center gap-6 lg:gap-8 px-8 pb-24 pt-24"
+    >
+      <div
+        class="flex items-center justify-center self-start sm:self-center gap-4 sm:gap-6"
+      >
+        <Icon
+          name="s:commercial-architecture-title"
+          mode="svg"
+          class="!text-6xl sm:!text-7xl md:!text-[6rem] lg:!text-[7rem] text-primary-color s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
+        />
+        <h2
+          class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
+        >
+          <span
+            class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50 tracking-widest uppercase"
+            >ARCHITECTURE</span
+          ><br />
+          多重架构&nbsp;&nbsp;全系覆盖
+        </h2>
+      </div>
+      <div
+        class="flex gap-8 lg:gap-16 max-w-7xl w-full flex-col sm:flex-row items-center justify-center"
+      >
+        <Icon
+          name="s:commercial-architecture"
+          class="w-full max-w-[20rem] sm:max-w-[24rem] lg:max-w-[30rem] h-auto object-contain hover:-translate-y-2 transition-transform duration-500 s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
+          mode="svg"
+        />
+        <div
+          class="flex flex-col py-0 sm:py-8 lg:py-12 gap-6 items-center sm:items-start flex-1"
+        >
+          <div
+            class="flex flex-col text-center sm:text-start items-center sm:items-start"
+          >
+            <p
+              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-[1.5]"
+            >
+              不畏多重阻碍
+            </p>
+            <p
+              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-[1.5] whitespace-nowrap"
+            >
+              支持国内全平台硬件
+            </p>
+          </div>
+          <p
+            class="text-base sm:text-lg text-center sm:text-start text-surface-700 leading-[1.8] dark:text-surface-300"
+          >
+            商业版支持 amd64、arm64、loongarch64 等多种 CPU
+            架构部署，可在不同硬件平台上稳定运行，满足企业多样化的复杂部署需求，无缝适配各类国产化终端设备。
+          </p>
+          <p
+            class="font-bold text-surface-700 dark:text-surface-300 text-base md:text-lg leading-[2]"
+          >
+            龙芯 / 兆芯 / 飞腾 / 海光 / 华为麒麟 / 华为鲲鹏
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section
+      class="flex flex-col items-center justify-center gap-6 lg:gap-8 px-8 pb-24 pt-24"
+    >
+      <div
+        class="flex items-center justify-center self-start sm:self-center gap-4 sm:gap-6"
+      >
+        <Icon
+          name="s:commercial-distribution-title"
+          mode="svg"
+          class="!text-6xl sm:!text-7xl md:!text-[6rem] lg:!text-[7rem] text-primary-color s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
+        />
+        <h2
+          class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
+        >
+          <span
+            class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50 tracking-widest uppercase"
+            >DISTRIBUTION</span
+          ><br />
+          跨发行版&nbsp;&nbsp;全面兼容
+        </h2>
+      </div>
+      <div
+        class="flex gap-8 lg:gap-16 max-w-7xl w-full flex-col-reverse sm:flex-row items-center justify-center"
+      >
+        <!-- 左侧内容区域 -->
+        <div
+          class="flex flex-col py-0 sm:py-8 lg:py-12 gap-6 items-center sm:items-start flex-1"
+        >
+          <div
+            class="flex flex-col text-center sm:text-start items-center sm:items-start"
+          >
+            <p
+              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-[1.5]"
+            >
+              融合多元生态
+            </p>
+            <p
+              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-[1.5] whitespace-nowrap"
+            >
+              适配主流 Linux 发行版
+            </p>
+          </div>
+          <p
+            class="text-base sm:text-lg text-center sm:text-start text-surface-700 leading-[1.8] dark:text-surface-300"
+          >
+            商业版支持多种主流国产操作系统，包括但不限于统信
+            UOS、银河麒麟、中科方德等，确保在不同发行版本及不同的软件基础包环境下都能高度稳定运行，为企业提供全生态覆盖、没有短板的应用商店解决方案。
+          </p>
+          <p
+            class="font-bold text-surface-700 dark:text-surface-300 text-base md:text-lg leading-[2]"
+          >
+            统信 UOS / 银河麒麟 / 中科方德
+          </p>
+        </div>
+        <!-- 右侧图片区域 -->
+        <Icon
+          name="s:commercial-distribution"
+          class="w-full max-w-[20rem] sm:max-w-[24rem] lg:max-w-[30rem] h-auto object-contain hover:-translate-y-2 transition-transform duration-500 s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
+          mode="svg"
+        />
+      </div>
+    </section>
+
+    <section
+      class="flex flex-col items-center justify-center gap-6 lg:gap-8 px-8 pb-24 pt-24"
+    >
+      <div
+        class="flex items-center justify-center self-start sm:self-center gap-4 sm:gap-6"
+      >
+        <Icon
+          name="s:commercial-case-title"
+          mode="svg"
+          class="!text-6xl sm:!text-7xl md:!text-[6rem] lg:!text-[7rem] text-primary-color s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
+        />
+        <h2
+          class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
+        >
+          <span
+            class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50 tracking-widest uppercase"
+            >CASE STUDY</span
+          ><br />
+          成功案例&nbsp;&nbsp;稳如泰山
+        </h2>
+      </div>
+      <div
+        class="flex gap-8 lg:gap-16 max-w-7xl w-full flex-col sm:flex-row items-center justify-center"
+      >
+        <Icon
+          name="s:commercial-case"
+          class="w-full max-w-[20rem] sm:max-w-[24rem] lg:max-w-[30rem] h-auto object-contain hover:-translate-y-2 transition-transform duration-500 s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
+          mode="svg"
+        />
+        <div
+          class="flex flex-col py-0 sm:py-8 lg:py-12 gap-6 items-center sm:items-start flex-1"
+        >
+          <div
+            class="flex flex-col text-center sm:text-start items-center sm:items-start"
+          >
+            <p
+              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-[1.5]"
+            >
+              无惧极端异构
+            </p>
+            <p
+              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-[1.5] whitespace-nowrap"
+            >
+              政务终端统一纳管
+            </p>
+          </div>
+          <p
+            class="text-base sm:text-lg text-center sm:text-start text-surface-700 leading-[1.8] dark:text-surface-300"
+          >
+            某机关单位信创改造项目中，面临高度复杂的异构终端环境。该单位同时部署了搭载兆芯、飞腾、麒麟芯片的设备，并交叉安装统信
+            UOS、银河麒麟与中科方德。通过部署星火应用商店专业版进行整合，该单位最终成功实现了跨异构、跨操作系统的软件高效率统一分发与纳管。
+          </p>
+          <div class="flex gap-4 mt-2">
+            <!--<NuxtLink
+              to="/cases"
+              class="text-primary-500 font-bold hover:text-primary-600 dark:hover:text-primary-400 transition-colors flex items-center gap-2"
+              >查看详细案例 <i class="pi pi-arrow-right text-sm"
+            /></NuxtLink>-->
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section
+      class="flex flex-col items-center justify-center gap-6 lg:gap-8 px-8 pb-24 pt-24"
+    >
+      <div
+        class="flex items-center justify-center self-start sm:self-center gap-4 sm:gap-6"
+      >
+        <Icon
+          name="s:commercial-contact-title"
+          mode="svg"
+          class="!text-6xl sm:!text-7xl md:!text-[6rem] lg:!text-[7rem] text-primary-color s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
+        />
+        <h2
+          class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
+        >
+          <span
+            class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50 tracking-widest uppercase"
+            >CONTACT US</span
+          ><br />
+          联系客服&nbsp;&nbsp;定制报价
+        </h2>
+      </div>
+      <div
+        class="flex gap-8 lg:gap-16 max-w-7xl w-full flex-col-reverse sm:flex-row items-center justify-center"
+      >
+        <div
+          class="flex flex-col py-0 sm:py-8 lg:py-12 gap-6 items-center sm:items-start flex-1"
+        >
+          <div
+            class="flex flex-col text-center sm:text-start items-center sm:items-start"
+          >
+            <p
+              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-[1.5]"
+            >
+              全天候客服护航
+            </p>
+            <p
+              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-[1.5] whitespace-nowrap"
+            >
+              按需提供专业解决方案
+            </p>
+          </div>
+          <p
+            class="text-base sm:text-lg text-center sm:text-start text-surface-700 leading-[1.8] dark:text-surface-300"
+          >
+            商业版采用定制化报价模式，根据企业客户的具体需求（如定制程度、部署规模、私有化部署要求及驻点技术支持等）提供更具性价比的解决方案。期待与您的团队达成信创合作共识，我们将为您提供专业透明的咨询服务和报价方案。
+          </p>
+          <div class="flex gap-4 mt-2">
+            <button
+              @click="contactDialog = true"
+              class="px-8 sm:px-14 py-3 text-xl font-bold text-white from-primary-400 to-primary-500 bg-linear-to-r rounded-full shadow-lg shadow-primary-500/30 dark:from-primary-500 dark:to-primary-600 hover:-translate-y-1 transition-transform"
+            >
+              <i class="pi pi-envelope text-xl! font-bold! pr-2 sm:pr-2" />
+              马上联系
+            </button>
+          </div>
+        </div>
+        <Icon
+          name="s:commercial-contact"
+          class="w-full max-w-[20rem] sm:max-w-[24rem] lg:max-w-[30rem] h-auto object-contain hover:-translate-y-2 transition-transform duration-500 s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
+          mode="svg"
+        />
+      </div>
+    </section>
+
+    <Dialog
+      v-model:visible="contactDialog"
+      modal
+      :show-header="false"
+      class="!w-auto !min-w-[320px] !max-w-[calc(100vw-2rem)] rounded-3xl!"
+      :style="{
+        '--p-dialog-border-color': 'transparent',
+      }"
+      content-class="flex flex-col items-center p-5! w-full h-full gap-4 overflow-hidden!"
+      :pt="{
+        mask: {
+          class:
+            'backdrop-blur-2xl s-bg-[rgba(255,255,255,0.4)] s-deco-surface-950 dark:s-bg-[rgba(0,0,0,0.4)] dark:s-deco-surface-100',
+          style: {
+            '--p-mask-background': 'var(--s-bg)',
+            '--p-dialog-color': 'var(--s-deco)',
+          },
+        },
+      }"
+      dismissable-mask
+    >
+      <p class="flex items-center justify-center gap-2 font-bold mb-2">
+        联系商业版专线客服
+      </p>
+
+      <div class="flex flex-col gap-4 text-sm w-full font-medium">
+        <p>通过邮箱联系：</p>
+        <div
+          class="flex flex-col gap-2 p-4 bg-surface-100 dark:bg-surface-800 rounded-xl"
+        >
+          <div class="flex items-center justify-between">
+            <span class="text-surface-500">主收件：</span>
+            <span class="select-all font-mono">shenmo@spark-app.store</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-surface-500">抄送：</span>
+            <span class="select-all font-mono">momen@spark-app.store</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-4 text-sm w-full font-medium mt-2">
+        <p>也可以通过 QQ 联系：</p>
+        <div
+          class="flex flex-col gap-2 p-4 bg-surface-100 dark:bg-surface-800 rounded-xl"
+        >
+          <div class="flex items-center justify-between">
+            <span class="text-surface-500">shenmo：</span>
+            <span class="select-all font-mono">1422953823</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-surface-500">momen：</span>
+            <span class="select-all font-mono">954551908</span>
+          </div>
+        </div>
+      </div>
+
+      <button
+        @click="contactDialog = false"
+        class="mt-4 px-8 py-2 font-bold text-white bg-primary-500 rounded-full hover:bg-primary-600 transition-colors"
+      >
+        关闭
+      </button>
+    </Dialog>
+  </div>
+</template>
+
+<style scoped>
+section {
+  width: 100%;
+  height: 100vh;
+  scroll-snap-align: start;
+}
+</style>