spark-store-project/spark-store-abyss
15
0
Fork 0
mirror of https://github.com/spark-store-project/spark-store-abyss synced 2026-06-22 14:14:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

添加商业版页面 (#4)

Browse Source 
* 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>
This commit is contained in:
momen
2026-03-04 13:42:02 +08:00
committed by GitHub
parent 059e01090c
commit be8c0d518f
13 changed files with 1047 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.vue
+18 -14
View File
@@ -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);