GVSDS/GVSite
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pages): 新增支持中心，About/TermiNexus 重写，招聘页企业化

Browse Source 
- 新增 SupportView 支持中心页并挂载 /support 路由；invite 子域路由补无前缀守卫防 404 错跳
- About 全删重写（企业化六段式），TermiNexus 按 TermiNexus.md 重写为技术画像并去除个人人格区块
- 招聘页企业化：减 emoji、去下滑渐显与 card hover 位移，职位手风琴改 grid 滑动动画
- 首页吉祥物切换 TAG 时重置 loading 遮罩
This commit is contained in:
TermiNexus committed 2026-08-22 01:06:13 +08:00
1 parent 08849b5373
commit ece5126cb3
6 files changed
+469 -679
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/router/index.ts
+15
View File
@@ -42,6 +42,12 @@ export const routes: RouteRecordRaw[] = [
component: () => import('@/views/IntegrityReportView.vue'),
meta: { title: '廉政举报' },
},
{
path: 'support',
name: 'Support',
component: () => import('@/views/SupportView.vue'),
meta: { title: '支持中心' },
},
// === ProJect 子目录 ===
{
path: 'ProJect/SMANAGE',
@@ -223,6 +229,15 @@ router.beforeEach((to) => {
if (isInvite && to.path === '/') {
return { path: '/Invite', replace: true }
}
// invite 子域：无 Invite 前缀的路径自动补前缀（如 /RecruitingTalentedIndividuals → /Invite/RecruitingTalentedIndividuals）
if (isInvite && to.path.endsWith('index.html')) {
return { path: '/Invite', replace: true }
}
if (isInvite && !to.path.startsWith('/Invite')) {
let p = to.path
if (p.endsWith('/') && p.length > 1) p = p.slice(0, -1)
return { path: '/Invite' + p, replace: true }
}
if (isDoc && to.path === '/') {
return { path: '/Document', replace: true }
}
src/views/AboutView.vue
+102 -311
View File
@@ -1,350 +1,141 @@
<template>
<div>
<!-- 顶部标语 -->
<section class="relative min-h-[60vh] flex items-center justify-center overflow-hidden bg-white dark:bg-slate-900 transition-colors duration-300">
<div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.06]" style="background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px); background-size: 40px 40px;"></div>
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-300/20 dark:bg-blue-600/10 rounded-full blur-[100px] pointer-events-none"></div>
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-sky-300/20 dark:bg-sky-600/10 rounded-full blur-[100px] pointer-events-none"></div>
<div class="relative z-10 text-center px-6">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gray-100 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 text-sm text-gray-500 dark:text-gray-400 mb-8 reveal">
<span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> 非营利 · 开源 · 共建
<!-- ===== Hero ===== -->
<section class="relative bg-gradient-to-br from-gray-950 via-blue-950 to-gray-950 py-24 md:py-32 px-6 overflow-hidden">
<div class="absolute inset-0 opacity-[0.04]" style="background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 44px 44px;"></div>
<div class="absolute top-1/4 left-1/3 w-96 h-96 bg-blue-600/20 rounded-full blur-[120px] pointer-events-none"></div>
<div class="relative z-10 max-w-4xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 text-blue-200 text-sm mb-8">
<span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> 非营利 · 开源 · 共建
</div>
<h2 class="text-5xl md:text-7xl lg:text-8xl font-black text-gray-900 dark:text-white leading-none tracking-tight mb-4 reveal"> 银河锋锐 </h2>
<h3 class="text-2xl md:text-3xl font-light text-gray-400 dark:text-gray-500 tracking-widest mb-8 reveal" style="transition-delay:150ms"> SOFTWARE DEVELOPMENT STUDIO </h3>
<p class="max-w-xl mx-auto text-gray-500 dark:text-gray-400 text-lg leading-relaxed reveal" style="transition-delay:250ms"> 因热爱而聚，以技术为桥——<br> 一群年轻开发者的开源实验场 </p>
<div class="mt-16 flex justify-center reveal" style="transition-delay:400ms">
<div class="flex flex-col items-center gap-2 text-gray-300 dark:text-gray-600">
<span class="text-xs tracking-widest uppercase">Scroll</span>
<div class="w-px h-12 bg-gradient-to-b from-gray-300 dark:from-gray-600 to-transparent animate-pulse"></div>
<h1 class="text-4xl md:text-6xl font-black text-white leading-tight mb-4"> 银河锋锐软件开发工作室 </h1>
<p class="text-blue-200/70 tracking-[0.3em] uppercase text-sm md:text-base mb-6">GVSDS SOFTWARE DEVELOPMENT STUDIO</p>
<p class="max-w-2xl mx-auto text-gray-300 text-lg md:text-xl leading-relaxed"> 因热爱而聚，以技术为桥——<br class="hidden md:block"> 一群年轻开发者持续构建的开源实践与产品实验场 </p>
<div class="mt-10 flex justify-center gap-4 flex-wrap">
<a href="/ProJect/SMANAGE" @click.prevent="go('/ProJect/SMANAGE')" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition-colors">了解我们的产品</a>
<a href="mailto:hr@gvsds.com" class="border border-white/20 hover:border-white/40 text-white px-8 py-3 rounded-lg font-medium transition-colors">加入我们</a>
</div>
</div>
</section>
<!-- ===== 三大理念 ===== -->
<section class="py-20 md:py-28 px-6 bg-white dark:bg-slate-900 transition-colors duration-300">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<span class="text-blue-600 dark:text-blue-400 text-sm font-bold tracking-widest uppercase">Our Philosophy</span>
<h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mt-3">我们的理念</h2>
<div class="w-16 h-1 bg-blue-600 mx-auto mt-6"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div v-for="p in philosophies" :key="p.title" class="bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl p-8 hover:border-blue-400/50 transition-colors">
<div class="w-12 h-12 rounded-xl bg-blue-600/10 flex items-center justify-center mb-5">
<i :class="p.icon" class="text-blue-600 dark:text-blue-400 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ p.title }}</h3>
<p class="text-gray-500 dark:text-gray-400 leading-relaxed">{{ p.desc }}</p>
</div>
</div>
</div>
</section>
<!-- ===== Our Philosophy 三大理念 ===== -->
<section class="relative py-24 bg-gray-950 dark:bg-black overflow-hidden transition-colors duration-300">
<div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none overflow-hidden">
<span class="text-[20vw] font-black text-white/[0.02] tracking-widest whitespace-nowrap">CORE</span>
</div>
<div class="relative z-10 container mx-auto lg:max-w-[75%] px-6">
<div class="flex items-center gap-4 mb-16 reveal">
<div class="w-8 h-px bg-white/30"></div>
<span class="text-white/40 text-sm tracking-widest uppercase">Our Philosophy</span>
<!-- ===== 关于我们 ===== -->
<section class="py-20 md:py-28 px-6 bg-gray-50 dark:bg-slate-800/50 transition-colors duration-300">
<div class="max-w-4xl mx-auto">
<span class="text-blue-600 dark:text-blue-400 text-sm font-bold tracking-widest uppercase">Who We Are</span>
<h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mt-3 mb-8">我们是一群热爱技术的人</h2>
<div class="space-y-6">
<p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed border-l-2 border-blue-400 pl-5"> 自 2019 年成立以来，我们始终以开源精神驱动前行，在 GitHub 等平台分享项目、文章与经验，让技术的价值触达更多人。 </p>
<p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed border-l-2 border-sky-400 pl-5"> 我们不追逐商业利益，通过编程兼职保障基本运转，让这里始终是一片纯粹的技术沃土。 </p>
<p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed border-l-2 border-blue-400 pl-5"> 这里不只是写代码的地方，更是结识同好、分享日常、共同成长的温暖港湾。 </p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/10 rounded-2xl overflow-hidden">
<div v-for="(p, i) in philosophies" :key="i" class="group relative bg-gray-950 dark:bg-black p-8 md:p-10 flex flex-col gap-6 hover:bg-white/5 transition-colors duration-500 reveal" :style="{ transitionDelay: (i * 150) + 'ms' }">
<div class="text-6xl font-black text-white/10 group-hover:text-blue-500/30 transition-colors duration-500 leading-none">0{{ i + 1 }}</div>
<div class="w-10 h-10 rounded-xl flex items-center justify-center group-hover:bg-blue-500/20 transition-colors duration-300" :class="p.iconBg">
<i class="fa" :class="p.icon"></i>
</div>
<div>
<h4 class="text-white text-xl font-bold mb-3">{{ p.title }}</h4>
<p class="text-gray-500 text-sm leading-relaxed">{{ p.desc }}</p>
</div>
<div class="mt-auto w-0 h-px group-hover:w-full transition-all duration-700" :class="p.lineColor"></div>
<div class="mt-10 flex flex-wrap gap-3">
<span v-for="tag in whoWeAreTags" :key="tag" class="px-5 py-2 rounded-full border-2 text-sm font-semibold border-gray-300 dark:border-slate-600 text-gray-600 dark:text-gray-300">{{ tag }}</span>
</div>
</div>
</section>
<!-- ===== 数据 ===== -->
<section class="py-20 md:py-28 px-6 bg-white dark:bg-slate-900 transition-colors duration-300">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<span class="text-sky-600 dark:text-sky-400 text-sm font-bold tracking-widest uppercase">By The Numbers</span>
<h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mt-3">用数字说话</h2>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
<div v-for="s in stats" :key="s.label" class="text-center">
<div class="text-3xl md:text-4xl font-black text-blue-600 dark:text-blue-400">{{ s.display }}</div>
<div class="text-gray-400 text-sm font-medium tracking-widest uppercase mt-2">{{ s.label }}</div>
<div class="text-gray-900 dark:text-white font-semibold mt-1">{{ s.sub }}</div>
</div>
</div>
</div>
</section>
<!-- ===== Who We Are ===== -->
<section class="relative py-24 bg-white dark:bg-slate-900 overflow-hidden transition-colors duration-300">
<div class="absolute right-0 top-0 h-full w-1/2 bg-gray-50 dark:bg-slate-800/50 pointer-events-none" style="clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);"></div>
<div class="relative z-10 container mx-auto lg:max-w-[75%] px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="space-y-8">
<div class="reveal">
<span class="text-xs font-bold tracking-widest text-blue-500 uppercase">Who We Are</span>
<h3 class="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mt-3 leading-tight"> 我们是一群<br>
<span class="relative inline-block"> 热爱技术的人 <svg class="absolute -bottom-2 left-0 w-full" viewBox="0 0 300 12" fill="none"><path d="M2 10 Q75 2 150 8 Q225 14 298 6" stroke="#2563eb" stroke-width="3" stroke-linecap="round" fill="none" /></svg></span>
</h3>
</div>
<div class="space-y-6 reveal" style="transition-delay:200ms">
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-blue-300 dark:border-blue-600 pl-5"> 自成立以来，始终以开源精神驱动前行，在 GitHub 等平台分享项目、文章与经验，让技术的价值触达更多人。 </p>
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-sky-300 dark:border-sky-600 pl-5"> 我们不追逐商业利益，通过编程兼职保障基本运转，让这里永远是一片纯粹的技术沃土。 </p>
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-blue-300 dark:border-blue-600 pl-5"> 这里不只是写代码的地方，更是结识同好、分享日常的温暖港湾。 </p>
</div>
<!-- ===== 涉及领域 ===== -->
<section class="py-20 md:py-28 px-6 bg-gray-50 dark:bg-slate-800/50 transition-colors duration-300">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white pl-4 border-l-4 border-gray-900 dark:border-white mb-10">涉及领域</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">开发类</h3>
<ul class="space-y-3">
<li v-for="item in devFields" :key="item" class="flex items-center text-gray-700 dark:text-gray-300"><span class="w-2 h-2 bg-blue-600 rounded-full mr-3"></span>{{ item }}</li>
</ul>
</div>
<div class="reveal flex flex-wrap gap-3 items-start content-start" style="transition-delay:300ms">
<span v-for="tag in whoWeAreTags" :key="tag.name" :class="tag.cls" class="px-5 py-3 rounded-full font-bold text-lg">{{ tag.name }}</span>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">设计类</h3>
<ul class="space-y-3">
<li v-for="item in designFields" :key="item" class="flex items-center text-gray-700 dark:text-gray-300"><span class="w-2 h-2 bg-blue-600 rounded-full mr-3"></span>{{ item }}</li>
</ul>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-4">其他</h3>
<ul class="space-y-3">
<li v-for="item in otherFields" :key="item" class="flex items-center text-gray-700 dark:text-gray-300"><span class="w-2 h-2 bg-blue-600 rounded-full mr-3"></span>{{ item }}</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ===== By The Numbers 数字统计 ===== -->
<section class="relative py-24 bg-white dark:bg-slate-900 border-t border-gray-100 dark:border-slate-800 overflow-hidden transition-colors duration-300">
<div class="absolute -left-32 -top-32 w-96 h-96 rounded-full border border-gray-100 dark:border-slate-800 pointer-events-none"></div>
<div class="absolute -left-16 -top-16 w-64 h-64 rounded-full border border-gray-100 dark:border-slate-800 pointer-events-none"></div>
<div class="absolute -right-32 -bottom-32 w-96 h-96 rounded-full border border-gray-100 dark:border-slate-800 pointer-events-none"></div>
<div class="relative z-10 container mx-auto lg:max-w-[75%] px-6">
<div class="text-center mb-16 reveal">
<span class="text-xs font-bold tracking-widest text-sky-500 uppercase">By The Numbers</span>
<h3 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mt-3">用数字说话</h3>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
<div v-for="(stat, i) in stats" :key="i" class="group text-center reveal" :style="{ transitionDelay: (i * 100) + 'ms' }">
<div class="relative inline-flex items-center justify-center w-24 h-24 md:w-32 md:h-32 mb-4">
<svg class="absolute inset-0 w-full h-full -rotate-90" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-100 dark:text-slate-800" />
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2" :stroke-dasharray="stat.dashArray" :stroke-dashoffset="stat.dashOffset" class="transition-all duration-1000" :class="stat.color" />
</svg>
<div class="relative z-10 text-center">
<div class="text-2xl md:text-3xl font-black text-gray-900 dark:text-white">{{ stat.display }}</div>
</div>
</div>
<p class="text-gray-400 dark:text-gray-500 text-sm font-medium tracking-widest uppercase">{{ stat.label }}</p>
<p class="text-gray-900 dark:text-white font-semibold mt-1">{{ stat.sub }}</p>
</div>
</div>
</div>
</section>
<!-- ===== Founders 创始人合影 ===== -->
<section class="relative min-h-[80vh] flex flex-col bg-slate-50 dark:bg-slate-900 overflow-hidden transition-colors duration-300">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/4 w-[800px] h-[800px] bg-gradient-to-br from-blue-200/40 to-sky-200/40 dark:from-blue-900/20 dark:to-sky-900/20 rounded-full blur-[120px] pointer-events-none"></div>
<div class="absolute -left-32 top-1/4 w-64 h-64 rounded-full border border-gray-200/50 dark:border-slate-700/50 pointer-events-none"></div>
<div class="absolute -right-32 bottom-1/4 w-96 h-96 rounded-full border border-gray-200/50 dark:border-slate-700/50 pointer-events-none"></div>
<div class="relative z-10 container mx-auto lg:max-w-[85%] px-6 py-12 flex flex-col flex-grow">
<div class="text-center mb-8 reveal">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-xs font-bold tracking-widest uppercase mb-4">
<i class="fa fa-users text-[10px]"></i> The Founders
</div>
<h3 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white tracking-tight"> 初心如磐，携手同行 </h3>
<p class="text-gray-500 dark:text-gray-400 mt-2 max-w-lg mx-auto leading-relaxed"> 因为共同的热爱，四个年轻的灵魂在此交汇 </p>
</div>
<div class="flex-grow flex items-center justify-center reveal" style="transition-delay: 150ms">
<div class="relative group w-full h-full max-h-[70vh]">
<div class="relative w-full h-full rounded-3xl overflow-hidden bg-white/80 dark:bg-slate-800/50 backdrop-blur-sm shadow-xl shadow-gray-200/50 dark:shadow-black/20 border border-white dark:border-slate-700 transition-all duration-500 hover:shadow-2xl hover:shadow-blue-500/10">
<img src="https://hb.cdn.gvsds.com/assets/img/Us/FourPeople.jpg" alt="银河锋锐创始人合影" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.02]">
<div class="absolute bottom-0 left-0 right-0 p-6 md:p-8 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none">
<div class="flex items-end justify-between">
<div>
<p class="text-white/60 text-xs font-medium tracking-widest uppercase mb-1">Est. 2023</p>
<h4 class="text-white text-xl md:text-2xl font-bold tracking-wide">梦想启航的地方</h4>
</div>
<div class="hidden md:flex items-center gap-2 text-white/80 text-sm font-medium bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full border border-white/20">
<span>Core Team</span>
<i class="fa fa-arrow-right text-xs"></i>
</div>
</div>
</div>
</div>
<div class="absolute -top-3 -right-3 md:-top-5 md:-right-5 z-20">
<div class="px-4 py-2 bg-white dark:bg-slate-700 rounded-xl shadow-lg border border-gray-100 dark:border-slate-600 rotate-6 group-hover:rotate-12 transition-transform duration-500">
<span class="text-blue-500 font-bold text-sm flex items-center gap-1">
<i class="fa fa-heart"></i> 4 Founders
</span>
</div>
</div>
<div class="absolute -bottom-3 -left-3 w-20 h-20 border-b-2 border-l-2 border-blue-400/50 rounded-bl-3xl pointer-events-none group-hover:border-blue-400 transition-colors"></div>
</div>
</div>
<div class="mt-8 text-center reveal" style="transition-delay: 300ms">
<p class="text-gray-500 dark:text-gray-400 text-sm relative z-10 px-6 italic"> "独行快，众行远。我们是伙伴，更是彼此坚实的后盾。" </p>
<div class="mt-3 flex justify-center items-center gap-4 text-xs text-gray-400 dark:text-gray-500">
<span class="uppercase tracking-widest">Together We Build</span>
</div>
</div>
</div>
</section>
<!-- ===== Our Belief 信念 ===== -->
<section class="relative py-32 md:py-48 bg-gray-950 dark:bg-black overflow-hidden transition-colors duration-300">
<div class="absolute inset-0 pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-72 h-72 bg-blue-500/10 rounded-full blur-[120px]"></div>
<div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-sky-500/10 rounded-full blur-[120px]"></div>
</div>
<div class="relative z-10 container mx-auto lg:max-w-[70%] px-6 text-center">
<div class="reveal">
<span class="text-xs font-bold tracking-widest text-white/30 uppercase">Our Belief</span>
</div>
<blockquote class="mt-8 reveal" style="transition-delay:150ms">
<p class="text-3xl md:text-5xl lg:text-6xl font-black text-white leading-tight"> 每一份对技术的<span class="text-blue-400">热爱</span>，<br class="hidden md:block"> 都能汇聚成<span class="text-sky-400">改变</span>的力量。 </p>
</blockquote>
<p class="mt-10 text-gray-500 text-lg md:text-xl leading-relaxed max-w-2xl mx-auto reveal" style="transition-delay:300ms"> 无论你是刚踏入技术领域的新手，还是深耕行业的资深开发者——<br> 只要怀揣好奇，这里就是你的地方。 </p>
<div class="mt-8 reveal" style="transition-delay:400ms">
<span class="inline-block px-6 py-3 rounded-full border border-white/20 text-white/60 font-medium text-sm tracking-wide"> 技术的力量源于共同探索，成长的价值在于「成就彼此」 </span>
</div>
</div>
</section>
<!-- ===== Join Us 期待与你同行 ===== -->
<section class="relative py-24 overflow-hidden duration-300">
<div class="absolute left-0 top-0 w-[15%] h-full z-0 pointer-events-none c-furry">
<img src="https://hb.cdn.gvsds.com/assets/img/Background/ChiSha_Left.png" alt="左侧吉祥物" class="w-full h-full object-contain object-left opacity-60 dark:opacity-40">
</div>
<div class="absolute right-0 top-0 w-[15%] h-full z-0 pointer-events-none c-furry">
<img src="https://hb.cdn.gvsds.com/assets/img/Background/Ying_Right.png" alt="右侧吉祥物" class="w-full h-full object-contain object-right opacity-60 dark:opacity-40">
</div>
<div class="relative z-10 container mx-auto lg:max-w-[60%] px-6 text-center">
<div class="reveal">
<span class="text-xs font-bold tracking-widest text-blue-500 uppercase">Join Us</span>
<h3 class="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mt-4 mb-6"> 期待与你同行 </h3>
<p class="text-gray-500 dark:text-gray-400 text-lg max-w-lg mx-auto leading-relaxed"> 我们欢迎<strong class="text-blue-500 font-semibold">画师</strong>、 <strong class="text-sky-500 font-semibold">程序员</strong>、 <strong class="text-blue-500 font-semibold">测试人员</strong>， 以及所有愿意与我们一起探索技术边界的你。</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-12 mb-12 reveal" style="transition-delay:200ms">
<div v-for="(role, i) in joinRoles" :key="i" :class="role.card" class="group p-6 rounded-2xl border-2 hover:scale-105 transition-all duration-300 cursor-default">
<div class="w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-3 group-hover:bg-blue-200 transition-colors" :class="role.iconBg">
<i class="fa text-xl" :class="role.icon"></i>
</div>
<h5 class="font-bold text-gray-900 dark:text-white mb-1">{{ role.name }}</h5>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ role.desc }}</p>
</div>
</div>
<div class="reveal" style="transition-delay:400ms">
<a :href="joinEmailLink" class="group relative inline-flex items-center gap-3 px-10 py-5 bg-blue-600 dark:bg-blue-600 rounded-2xl text-white font-bold text-lg transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_60px_rgba(37,99,235,0.3)] overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-r from-blue-600 via-sky-500 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></span>
<i class="fa fa-paper-plane relative z-10 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-300"></i>
<span class="relative z-10">发送申请邮件</span>
</a>
<p class="mt-4 text-xs text-gray-400 dark:text-gray-600"> 📮 hr@gvsds.com · 我们会尽快回复你的申请 </p>
</div>
</div>
</section>
<!-- ===== 涉及领域 + 加入我们 ===== -->
<section class="py-20 md:py-28 px-4 md:px-8">
<div class="container mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="reveal">
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 pl-4 border-l-4 border-gray-900 mb-8">涉及领域</h2>
<div class="w-4/5 mx-auto md:mx-0 mb-8"><div class="border-b border-gray-200 pb-2"></div></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold text-gray-900 mb-4">开发类</h3>
<ul class="space-y-3">
<li v-for="item in devFields" :key="item" class="flex items-center"><div class="w-2 h-2 bg-blue-600 rounded-full mr-3"></div><span class="text-gray-700">{{ item }}</span></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 mb-4">设计类</h3>
<ul class="space-y-3">
<li v-for="item in designFields" :key="item" class="flex items-center"><div class="w-2 h-2 bg-blue-600 rounded-full mr-3"></div><span class="text-gray-700">{{ item }}</span></li>
</ul>
<h3 class="text-lg font-semibold text-gray-900 mt-6 mb-4">其他</h3>
<ul class="space-y-3">
<li v-for="item in otherFields" :key="item" class="flex items-center"><div class="w-2 h-2 bg-blue-600 rounded-full mr-3"></div><span class="text-gray-700">{{ item }}</span></li>
</ul>
</div>
</div>
</div>
<div class="reveal" style="transition-delay: 300ms;">
<div class="bg-white dark:bg-slate-800 rounded-xl p-8 md:p-10 shadow-[0_0_30px_rgba(0,0,0,0.08)] dark:shadow-[0_0_30px_rgba(0,0,0,0.4)] border border-gray-100 dark:border-slate-700">
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white pl-4 border-l-4 border-gray-900 dark:border-white mb-6">加入我们</h2>
<p class="text-gray-700 dark:text-gray-300 text-lg mb-8">无论你是谁，能力如何，只要你与我们有共同的理想，都能加入我们的团队，与我们共同努力。</p>
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">微信联系我们</h3>
<div class="flex items-center bg-gray-50 dark:bg-slate-700/50 p-4 rounded-lg border border-gray-100 dark:border-slate-600">
<i class="fa fa-envelope text-2xl text-gray-900 dark:text-white mr-4"></i>
<div>
<p class="text-gray-900 dark:text-white font-medium">GVSADS</p>
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">微信搜索添加 <span class="inline-block w-2 h-2 bg-blue-600 dark:bg-white animate-blink ml-1 align-middle"></span></p>
</div>
</div>
</div>
<a href="weixin://dl/add/?username=GVSADS" class="mt-4 inline-block bg-blue-600 dark:bg-blue-600 text-white font-semibold px-8 py-4 rounded-lg transition-all duration-300 hover:bg-blue-700 hover:shadow-[0_0_15px_rgba(37,99,235,0.35)] transform hover:-translate-y-1 active:scale-98">
申请加入（微信）
<i class="fa fa-arrow-right ml-2"></i>
</a>
<a :href="joinEmailLink" class="mt-4 inline-block ml-4 bg-blue-600 dark:bg-blue-600 text-white font-semibold px-8 py-4 rounded-lg transition-all duration-300 hover:bg-blue-700 hover:shadow-[0_0_15px_rgba(37,99,235,0.35)] transform hover:-translate-y-1 active:scale-98">
申请加入（邮箱）
<i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- ===== 加入我们 ===== -->
<section class="py-20 md:py-28 px-6 bg-white dark:bg-slate-900 transition-colors duration-300">
<div class="max-w-3xl mx-auto text-center">
<span class="text-blue-600 dark:text-blue-400 text-sm font-bold tracking-widest uppercase">Join Us</span>
<h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mt-3 mb-6">期待与你同行</h2>
<p class="text-gray-500 dark:text-gray-400 text-lg mb-10"> 我们欢迎画师、程序员、测试人员，以及所有愿意与我们一同探索技术边界的你。 </p>
<div class="flex justify-center gap-4 flex-wrap">
<a href="mailto:hr@gvsds.com" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-semibold transition-colors">发送申请邮件</a>
<a href="weixin://dl/add/?username=GVSADS" class="border-2 border-gray-200 dark:border-slate-700 hover:border-gray-400 text-gray-900 dark:text-white px-8 py-4 rounded-xl font-semibold transition-colors">微信联系我们（GVSADS）</a>
</div>
<p class="mt-6 text-sm text-gray-400 dark:text-gray-500"> 我们会尽快回复你的申请 · hr@gvsds.com </p>
</div>
</section>
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted } from 'vue'
import { useRouter } from 'vue-router'
let revealObserver: IntersectionObserver | null = null
const router = useRouter()
function go(path: string) {
router.push(path)
}
onMounted(() => {
const els = document.querySelectorAll('.reveal')
revealObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const target = entry.target as HTMLElement
target.style.opacity = '1'
target.style.transform = 'translateY(0)'
revealObserver?.unobserve(target)
}
})
},
{ threshold: 0.1 }
)
els.forEach((el) => {
const e = el as HTMLElement
e.style.opacity = '0'
e.style.transform = 'translateY(15px)'
e.style.transition = 'opacity 0.5s ease, transform 0.5s ease'
revealObserver?.observe(e)
})
})
onBeforeUnmount(() => {
revealObserver?.disconnect()
})
// ===== 数据 =====
/** Philosophy 三大理念 */
const philosophies = [
{ title: '和而不同', icon: 'fa-code', iconBg: 'bg-blue-500/10 border border-blue-500/20', lineColor: 'bg-blue-400', desc: '尊重每一位开发者独特的风格与思路，在差异中寻求最优解。' },
{ title: '创新为主', icon: 'fa-rocket', iconBg: 'bg-sky-500/10 border border-sky-500/20', lineColor: 'bg-sky-400', desc: '不满足于已知的边界，持续叩响未知领域的大门，让每一行代码都充满可能。' },
{ title: '以人为本', icon: 'fa-users', iconBg: 'bg-blue-500/10 border border-blue-500/20', lineColor: 'bg-blue-400', desc: '技术服务于人，成长成就彼此，让每个人都能在这里找到属于自己的位置。' },
{ title: '和而不同', icon: 'fa fa-code', desc: '尊重每一位开发者独特的风格与思路，在差异中寻求最优解。' },
{ title: '创新为主', icon: 'fa fa-rocket', desc: '不满足于已知的边界，持续叩响未知领域的大门，让每一行代码都充满可能。' },
{ title: '以人为本', icon: 'fa fa-users', desc: '技术服务于人，成长成就彼此，让每个人都能在这里找到属于自己的位置。' },
]
/** Who We Are 标签 */
const whoWeAreTags = [
{ name: '开源', cls: 'border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' },
{ name: '协作', cls: 'bg-blue-500 text-white' },
{ name: '非营利', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500' },
{ name: '创新', cls: 'bg-sky-500 text-white' },
{ name: '年轻', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500' },
{ name: '分享', cls: 'border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' },
{ name: '成长', cls: 'bg-blue-500 text-white' },
{ name: '技术探索', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500' },
{ name: '热爱', cls: 'bg-blue-400 text-gray-900' },
{ name: 'GitHub', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500' },
{ name: '彼此成就', cls: 'border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' },
]
const whoWeAreTags = ['开源', '协作', '非营利', '创新', '年轻', '分享', '成长', '技术探索', '热爱', '彼此成就']
/** By The Numbers 统计 */
const stats = [
{ label: 'Members', sub: '核心成员', display: '17', color: 'text-blue-400', dashArray: '283', dashOffset: '70' },
{ label: 'Projects', sub: '开源项目', display: '28', color: 'text-sky-400', dashArray: '283', dashOffset: '90' },
{ label: 'Commits', sub: '代码提交量', display: '100w+', color: 'text-blue-400', dashArray: '283', dashOffset: '20' },
{ label: 'Clients', sub: '服务客户', display: '1500+', color: 'text-blue-400', dashArray: '283', dashOffset: '50' },
{ label: 'Members', sub: '核心成员', display: '17' },
{ label: 'Projects', sub: '开源项目', display: '28' },
{ label: 'Commits', sub: '代码提交量', display: '100w+' },
{ label: 'Clients', sub: '服务客户', display: '1500+' },
]
/** Join Us 角色卡片 */
const joinRoles = [
{ name: '画师', icon: 'fa-paint-brush', iconBg: 'bg-blue-100 dark:bg-blue-900/30', card: 'border-blue-100 dark:border-blue-900/50 bg-blue-50/50 dark:bg-blue-900/10 hover:border-blue-400 dark:hover:border-blue-500', desc: '用艺术点亮技术世界' },
{ name: '程序员', icon: 'fa-terminal', iconBg: 'bg-sky-100 dark:bg-sky-900/30', card: 'border-sky-100 dark:border-sky-900/50 bg-sky-50/50 dark:bg-sky-900/10 hover:border-sky-400 dark:hover:border-sky-500', desc: '用代码构建无限可能' },
{ name: '测试人员', icon: 'fa-bug', iconBg: 'bg-blue-100 dark:bg-blue-900/30', card: 'border-blue-100 dark:border-blue-900/50 bg-blue-50/50 dark:bg-blue-900/10 hover:border-blue-400 dark:hover:border-blue-500', desc: '用严谨保障每个细节' },
]
/** 涉及领域 */
const devFields = ['Python 开发', 'C/C++ 开发', 'Web 前端（HTML/CSS/JS）', '后端架构', '数据库（SQL）', '逆向反病毒']
const designFields = ['UI / UX 设计', '插画绘制', '动效设计']
const otherFields = ['人工智能', '操作系统优化', '服务器部署', '心理测评工具开发']
/** 加入邮件链接 */
const joinEmailLink = 'mailto:hr@gvsds.com?subject=我申请加入银河锋锐软件开发工作室&body=您好!%0D%0A%0D%0A我是 [ 姓名 / 网名 ]，我期望加入银河锋锐软件开发工作室。%0D%0A我的联系方式是 [ 微信（必填） / QQ / TEL / X / 电报 / DISCORD ] %0D%0A我的兴趣爱好是 [ 选填 ]，我的能力是 [ 选填 ]。%0D%0A我能够作为 [ 画师 / 程序员 / 测试人员 ] 加入工作室。%0D%0A [ 您的更多个人信息（选填）（个人简历等） ] %0D%0A希望您能提供一个机会，感谢！%0D%0A—— [ 姓名 / 网名 ] [ 年-月-日 ]'
</script>
<style scoped>
.animate-blink {
animation: blink 1s step-start infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
</style>
</script>
src/views/HomeView.vue
+20 -9
View File
@@ -11,27 +11,34 @@
<div class="flex-1 flex flex-col items-left justify-center text-[32px] 2xl:text-[50px] md:text-[42px] font-semibold">
<div class="hero-headline text-left w-fit rounded-lg relative">
<h1 class="z-10 relative leading-[40px] md:leading-[54px] px-[32px] md:px-0 mb-0 font-bold text-[#000] [text-shadow:0_2px_8px_rgba(0,0,0,0.6)]">
<div class="text-[20px] sm:text-[24px] md:text-[32px] text-[#FFF] leading-snug">你好 2026！&nbsp;&nbsp;部署项目:</div>
<div class="hidden md:block text-[#FFF]">一站式解决所有项目问题。</div>
<div class="hidden md:inline text-[#FFF]">结果不佳? 我们补偿！</div>
<div class="hidden md:block text-[18px] text-[#FFF]">相关负责人：<a class="text-sky-300 hover:text-sky-200" href="mailto:terminexus@gvsds.com">terminexus@gvsds.com</a></div>
<div class="text-[22px] sm:text-[26px] md:text-[34px] text-[#FFF] leading-snug flex items-center gap-3">
<span class="inline-block w-[6px] h-[26px] sm:h-[32px] md:h-[40px] bg-gradient-to-b from-blue-400 to-cyan-400 rounded-full"></span>
<span>你好 2026！</span>
</div>
<div class="hidden md:block text-[26px] md:text-[34px] text-[#FFF] mt-3">银河锋锐 —— 全站式部署项目</div>
<div class="hidden md:block text-[19px] md:text-[22px] text-[#FFD166] mt-3 font-medium">结果不佳? 我们补偿！</div>
<div class="hidden md:flex items-center gap-2 text-[15px] md:text-[16px] text-[#FFF]/90 mt-4">
<svg class="w-[15px] h-[15px] text-sky-300 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
<span>相关负责人：</span>
<a class="text-sky-300 hover:text-sky-100 underline underline-offset-4 transition-colors" href="mailto:terminexus@gvsds.com">terminexus@gvsds.com</a>
</div>
</h1>
</div>
<div class="hero-actions mt-[40px] sm:mt-[60px] md:mt-[90px] px-[16px] sm:px-[32px] md:px-0 flex flex-col sm:flex-row gap-[10px] sm:gap-[12px] md:flex-row">
<a class="w-full sm:w-fit flex" href="/ProJect/Service/Service" @click.prevent="go('/ProJect/Service/Service')">
<button type="button" class="bg-blue-600 w-full h-[44px] sm:h-[48px] 2xl:h-[56px] rounded-[12px] gap-1 py-[15px] pl-[24px] pr-[16px] flex items-center justify-center text-[#fff] hover:bg-blue-700 active:scale-95 transition-all duration-150">
<button type="button" class="group bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 w-full h-[44px] sm:h-[48px] 2xl:h-[56px] rounded-[12px] gap-2 py-[15px] pl-[24px] pr-[16px] flex items-center justify-center text-[#fff] shadow-lg shadow-blue-600/25 hover:shadow-xl hover:shadow-blue-600/30 active:scale-95 transition-all duration-200">
<span class="font-['PT_Sans'] font-bold text-[14px] sm:text-[15px] md:text-[18px] 2xl:text-[20px] leading-none tracking-normal align-middle">探索服务</span>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="w-[18px] h-[18px] sm:w-[20px] sm:h-[20px]" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9L7.5 6L4.5 3" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="w-[18px] h-[18px] sm:w-[20px] sm:h-[20px] transition-transform duration-200 group-hover:translate-x-0.5" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9L7.5 6L4.5 3" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</button>
</a>
<a href="https://github.com/GVSDS/" target="_blank" rel="noopener noreferrer" class="w-full sm:w-fit flex !ml-0">
<button type="button" class="bg-[rgba(242,242,242,0.92)] w-full h-[44px] sm:h-[48px] 2xl:h-[56px] rounded-[12px] gap-1 py-[15px] pl-[24px] pr-[16px] flex items-center justify-center text-[#000] hover:bg-[#e6e6e6] active:scale-95 transition-all duration-150">
<button type="button" class="bg-[rgba(242,242,242,0.92)] w-full h-[44px] sm:h-[48px] 2xl:h-[56px] rounded-[12px] gap-2 py-[15px] pl-[24px] pr-[16px] flex items-center justify-center text-[#000] hover:bg-white hover:shadow-lg hover:shadow-black/10 active:scale-95 transition-all duration-200">
<span class="font-['PT_Sans'] font-bold text-[14px] sm:text-[15px] md:text-[18px] 2xl:text-[20px] leading-none tracking-normal align-middle">Github</span>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="w-[18px] h-[18px] sm:w-[20px] sm:h-[20px] text-[#858585]" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9L7.5 6L4.5 3" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</button>
</a>
<a href="https://invite.gvsds.com/RecruitingTalentedIndividuals/" target="_blank" rel="noopener noreferrer" class="w-full sm:w-fit flex !ml-0">
<button type="button" class="bg-[rgba(242,242,242,0.92)] w-full h-[44px] sm:h-[48px] 2xl:h-[56px] rounded-[12px] gap-1 py-[15px] pl-[24px] pr-[16px] flex items-center justify-center text-[#000] hover:bg-[#e6e6e6] active:scale-95 transition-all duration-150">
<button type="button" class="bg-[rgba(242,242,242,0.92)] w-full h-[44px] sm:h-[48px] 2xl:h-[56px] rounded-[12px] gap-2 py-[15px] pl-[24px] pr-[16px] flex items-center justify-center text-[#000] hover:bg-white hover:shadow-lg hover:shadow-black/10 active:scale-95 transition-all duration-200">
<span class="font-['PT_Sans'] font-bold text-[14px] sm:text-[15px] md:text-[18px] 2xl:text-[20px] leading-none tracking-normal align-middle">招贤纳士</span>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="w-[18px] h-[18px] sm:w-[20px] sm:h-[20px] text-[#858585]" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9L7.5 6L4.5 3" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</button>
@@ -361,7 +368,7 @@
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
@@ -489,6 +496,10 @@ const mascotInfo = [
const mascotVersion = ref('5')
const mascotMode = ref<'thumbnail' | 'original'>('thumbnail')
const mascotLoading = ref(false)
/** 切换版本/查看模式 TAG 时重置 loading，图片加载完成后由 @load 关闭 */
watch([mascotVersion, mascotMode], () => {
mascotLoading.value = true
})
const mascotSrc = computed(() => `https://hb.cdn.gvsds.com/assets/img/Mascot/${mascotMode.value === 'thumbnail' ? 'resize' : 'original'}/${mascotVersion.value}.png`)
const mascotAlt = computed(() => `吉祥物海报-${mascotVersions.find((v) => v.id === mascotVersion.value)?.label || ''}`)
src/views/SupportView.vue
+98
View File
@@ -0,0 +1,98 @@
<template>
<div class="min-h-screen flex flex-col">
<main class="flex-grow py-12 md:py-20 px-4 md:px-8 lg:px-16">
<div class="max-w-7xl mx-auto">
<!-- 头部介绍 -->
<div class="text-center mb-16">
<h5 class="text-accent uppercase tracking-wider text-sm md:text-base mb-3">Support</h5>
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark leading-tight text-balance">支持中心</h1>
<div class="w-20 h-1 bg-primary mx-auto mt-6"></div>
<p class="mt-6 text-accent max-w-2xl mx-auto text-balance">无论您在使用本站、我们的产品与服务时遇到任何问题，我们都会竭诚为您提供帮助</p>
</div>
<!-- 联系方式卡片 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
<div v-for="c in cards" :key="c.title" class="bg-white rounded-xl p-8 shadow-elevated hover:shadow-hover transition-all-300">
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
<i :class="c.icon" class="text-primary text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">{{ c.title }}</h3>
<a v-if="c.href" :href="c.href" class="text-accent hover:text-primary transition-colors">{{ c.value }}</a>
<p v-else class="text-accent">{{ c.value }}</p>
<p v-if="c.sub" class="text-accent text-sm mt-2">{{ c.sub }}</p>
</div>
</div>
<!-- 常见问题 -->
<section class="mb-16">
<h2 class="text-2xl md:text-[1.8rem] font-semibold text-center mb-12">常见问题</h2>
<div class="max-w-4xl mx-auto space-y-4">
<div v-for="(f, i) in faqs" :key="i" class="bg-white rounded-xl shadow-elevated overflow-hidden">
<button
class="w-full flex items-center justify-between px-6 md:px-8 py-5 text-left transition-colors hover:bg-gray-50"
@click="toggle(i)"
>
<span class="font-medium pr-4">{{ f.q }}</span>
<i class="fa fa-angle-down text-accent transition-transform duration-300" :class="open === i ? 'rotate-180' : ''"></i>
</button>
<div class="accordion-body" :class="{ 'accordion-open': open === i }">
<div class="overflow-hidden">
<div class="px-6 md:px-8 pb-6">
<p class="text-accent leading-[1.8]">{{ f.a }}</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 反馈引导 -->
<section class="bg-white p-8 md:p-12 rounded-xl shadow-elevated text-center">
<h2 class="text-2xl md:text-[1.8rem] font-semibold mb-4">仍未解决？</h2>
<p class="text-accent max-w-[800px] mx-auto mb-8 leading-[1.8]">请将您遇到的问题、截图与操作步骤发送至我们的支持邮箱，我们通常会在 48 小时内回复。若迟迟未收到回信，可将下方所有邮箱各发送一遍。</p>
<div class="flex justify-center gap-4 flex-wrap">
<a
href="mailto:support@gvsds.com?subject=我在使用银河锋锐软件开发工作室官方网站%20www.gvsds.com%20时遇到问题&body=您好!%0D%0A%0D%0A问题描述：%0D%0A操作步骤：%0D%0A截图/报错信息：%0D%0A"
class="bg-primary text-white px-8 py-3 rounded-md text-sm font-medium hover:bg-primary/90 transition-colors duration-200"
>发送邮件反馈</a>
</div>
</section>
</div>
</main>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const cards = [
{ title: '支持邮箱', icon: 'fa fa-envelope', value: 'support@gvsds.com', sub: '48 小时内回复', href: 'mailto:support@gvsds.com' },
{ title: '联系电话', icon: 'fa fa-phone', value: '182-2215-2539', sub: '周末 9:00 - 22:00', href: 'tel:18222152539' },
{ title: '反馈渠道', icon: 'fa fa-comments', value: '反馈您所有的关于本工作室的问题', sub: '若未收到回信可多邮箱发送', href: '' },
]
const open = ref<number | null>(0)
function toggle(i: number): void {
open.value = open.value === i ? null : i
}
const faqs = [
{ q: '如何修改我的账户信息？', a: '登录 gerp.gvsds.com 后，在个人中心中可修改头像、姓名、邮箱、手机号等信息；修改邮箱需完成邮箱验证。' },
{ q: '忘记密码怎么办？', a: '在登录页点击"忘记密码"，通过注册邮箱或手机号找回；如无法找回请联系支持邮箱，我们会协助您重置。' },
{ q: '提交的申请多久能收到回复？', a: '招聘、合作与报价类申请通常在 3 个工作日内回复；邮件类咨询一般 48 小时内回复，请留意查收邮件。' },
{ q: '网站出现显示异常或功能故障？', a: '请先尝试强制刷新（Ctrl+F5）清除缓存；若问题依旧，请将浏览器型号、版本与报错截图发送至 support@gvsds.com。' },
{ q: '如何加入 GVSDS 工作室？', a: '访问 invite.gvsds.com 查看招募信息并提交申请，符合条件后我们会通过邮件或站内消息与您联系。' },
]
</script>
<style scoped>
/* 手风琴展开/收起动画：grid-template-rows 0fr -> 1fr 平滑过渡 */
.accordion-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-open {
grid-template-rows: 1fr;
}
</style>
src/views/invite/RecruitingView.vue
+96 -67
View File
@@ -1,21 +1,21 @@
<template>
<!-- 迁移自 TempLate/Invite/RecruitingTalentedIndividuals/index.html（招贤纳士页）：职位列表与福利卡片由 JS 渲染改为数组 + v-for -->
<!-- 招贤纳士页：职位列表/部门筛选/福利卡片 v-for 渲染；企业化风格 + 滚动入场动画 -->
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-50 py-20 px-4">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 text-blue-600 text-sm px-4 py-1.5 rounded-full mb-6">
<span class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"></span> 我们正在招募优秀人才
</div>
<h1 class="text-5xl font-bold text-slate-900 mb-4 tracking-tight"> 招贤 <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600">纳士</span></h1>
<p class="text-slate-600 text-lg max-w-xl mx-auto leading-relaxed"> 加入我们，与一群有理想、有激情的伙伴共同构建项目 </p>
<p class="text-slate-600 text-lg max-w-xl mx-auto leading-relaxed"> 加入我们，与一群有理想、有专业追求的伙伴共同构建产品与项目 </p>
</div>
<div class="flex justify-center gap-12 mb-20">
<div class="text-center">
<div class="text-3xl font-bold text-slate-900">20+</div>
<div class="text-3xl font-bold text-slate-900"><span data-target="20" data-suffix="+">0</span></div>
<div class="text-slate-500 text-sm mt-1">团队成员</div>
</div>
</div>
<!-- 部门筛选（原 JS 渲染 tabs） -->
<!-- 部门筛选 -->
<div class="flex justify-center gap-2 mb-10 flex-wrap" id="filter-tabs">
<button
v-for="dep in departments"
@@ -28,18 +28,18 @@
</button>
</div>
<!-- 职位列表（原 JS 渲染 jobs） -->
<!-- 职位列表 -->
<div class="max-w-4xl mx-auto space-y-4" id="job-list">
<div
v-for="job in filteredJobs"
v-for="(job, i) in filteredJobs"
:key="job.id"
class="group bg-white border rounded-2xl overflow-hidden transition-all duration-300 shadow-sm"
:class="expandedId === job.id ? 'border-blue-500/50' : 'border-slate-200 hover:border-slate-300'"
class="group bg-white border rounded-2xl overflow-hidden shadow-sm"
:class="expandedId === job.id ? 'border-blue-500/50' : 'border-slate-200'"
>
<div class="flex items-center justify-between p-6 cursor-pointer" @click="toggleJob(job.id)">
<div class="flex items-center gap-4">
<div class="w-11 h-11 rounded-xl flex items-center justify-center text-lg flex-shrink-0" :class="deptStyle(job.department).bg">
{{ deptStyle(job.department).emoji }}
<i :class="deptStyle(job.department).icon" class="text-base"></i>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
@@ -47,9 +47,9 @@
<span v-if="job.hot" class="text-xs bg-red-500/10 text-red-600 border border-red-500/20 px-2 py-0.5 rounded-full">热招</span>
</div>
<div class="flex items-center gap-3 text-slate-500 text-xs">
<span>📍 {{ job.location }}</span>
<span>🏷 {{ job.department }}</span>
<span>⏱ {{ job.type }}</span>
<span class="inline-flex items-center gap-1"><i class="fa fa-map-marker-alt text-slate-400"></i>{{ job.location }}</span>
<span class="inline-flex items-center gap-1"><i class="fa fa-tags text-slate-400"></i>{{ job.department }}</span>
<span class="inline-flex items-center gap-1"><i class="fa fa-clock text-slate-400"></i>{{ job.type }}</span>
</div>
</div>
</div>
@@ -65,7 +65,9 @@
</div>
</div>
</div>
<div v-if="expandedId === job.id" class="px-6 pb-6 border-t border-slate-200 pt-5">
<div class="accordion-body" :class="{ 'accordion-open': expandedId === job.id }">
<div class="overflow-hidden">
<div class="px-6 pb-6 border-t border-slate-200 pt-5">
<div class="flex flex-wrap gap-2 mb-5">
<span v-for="tag in job.tags" :key="tag" class="text-xs bg-slate-100 text-slate-700 px-3 py-1 rounded-md border border-slate-200">{{ tag }}</span>
</div>
@@ -78,7 +80,7 @@
<h4 class="text-slate-800 font-medium text-sm mb-2 flex items-center gap-1.5"><span class="w-1 h-3.5 bg-cyan-500 rounded-full inline-block"></span>任职要求</h4>
<ul class="space-y-1.5">
<li v-for="req in job.requirements" :key="req" class="text-slate-600 text-sm flex items-start gap-2">
<span class="text-cyan-600 mt-0.5 flex-shrink-0">✓</span>{{ req }}
<i class="fa fa-check-circle text-cyan-600 mt-0.5 flex-shrink-0"></i>{{ req }}
</li>
</ul>
</div>
@@ -88,9 +90,11 @@
<button class="border border-slate-200 hover:border-slate-400 text-slate-700 hover:text-slate-900 text-sm px-5 py-2.5 rounded-lg transition-all duration-200 cursor-pointer">转发给朋友</button>
<div class="ml-auto sm:hidden text-blue-600 font-bold text-sm">{{ job.salary }}<span class="text-slate-400 text-xs font-normal"> /月</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 为什么选择我们 -->
<div class="text-center mb-20 mt-20">
@@ -99,28 +103,23 @@
</div>
<h2 class="text-5xl font-bold text-slate-900 mb-4 tracking-tight"> 加入我们， <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600">能获得什么</span>
</h2>
<p class="text-slate-600 text-lg max-w-xl mx-auto"> 我们相信每一位成员都值得被看见、被支持、被表扬 </p>
<p class="text-slate-600 text-lg max-w-xl mx-auto"> 我们相信每一位成员都值得被认可、被支持、被成就 </p>
</div>
<!-- 福利卡片（原 JS 渲染 benefits） -->
<!-- 福利卡片 -->
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 mb-8" id="benefits-grid">
<div
v-for="(b, i) in benefits"
:key="b.title"
class="group relative rounded-2xl border border-slate-200 bg-white overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-md hover:shadow-slate-100"
:class="b.borderColor"
class="group relative rounded-2xl border border-slate-200 bg-white overflow-hidden"
>
<!-- 顶部渐变光带 -->
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r" :class="b.accentColor"></div>
<!-- 背景微光 -->
<div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" :class="b.glowColor"></div>
<!-- 卡片内容 -->
<div class="relative z-10 p-7">
<!-- 头部 -->
<div class="flex items-start justify-between mb-6">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-2xl bg-slate-100 flex items-center justify-center text-2xl flex-shrink-0 border border-slate-200">
{{ b.icon }}
<div class="w-12 h-12 rounded-2xl bg-slate-100 flex items-center justify-center text-xl flex-shrink-0 border border-slate-200">
<i :class="b.icon" class="text-slate-600"></i>
</div>
<div>
<h3 class="text-slate-900 font-bold text-base leading-snug">{{ b.title }}</h3>
@@ -131,11 +130,10 @@
</div>
<span class="text-slate-300 text-xs font-mono mt-1">0{{ i + 1 }}</span>
</div>
<!-- 条目列表 -->
<ul class="space-y-3">
<li v-for="item in b.items" :key="item.text" class="flex items-start gap-3 group/item">
<span class="text-base flex-shrink-0 mt-0.5 transition-transform duration-200 group-hover/item:scale-110">{{ item.icon }}</span>
<span class="text-slate-600 text-sm leading-relaxed group-hover/item:text-slate-800 transition-colors duration-200">{{ item.text }}</span>
<i :class="item.icon" class="text-slate-400 text-sm flex-shrink-0 mt-0.5 w-4 text-center"></i>
<span class="text-slate-600 text-sm leading-relaxed">{{ item.text }}</span>
</li>
</ul>
</div>
@@ -151,17 +149,19 @@
<div class="absolute -bottom-10 right-1/4 w-64 h-32 bg-cyan-500/5 rounded-full blur-3xl"></div>
</div>
<div class="relative z-10">
<div class="text-4xl mb-4">🚀</div>
<div class="w-14 h-14 mx-auto mb-5 rounded-2xl bg-blue-500/10 flex items-center justify-center">
<i class="fa fa-rocket text-blue-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-slate-900 mb-3"> 还在等什么？ </h3>
<p class="text-slate-600 text-sm max-w-md mx-auto mb-8 leading-relaxed"> GVSDS 工作室欢迎每一位有想法、有热情的你。<br />不论你是前端、后端、设计还是运营，这里都有你的位置。 </p>
<div class="flex justify-center gap-10 mb-8">
<div class="text-center">
<div class="text-2xl font-bold text-blue-600">2019</div>
<div class="text-2xl font-bold text-blue-600"><span data-target="2019" data-suffix="">0</span></div>
<div class="text-slate-500 text-xs mt-1">创立年份</div>
</div>
<div class="w-px bg-slate-200"></div>
<div class="text-center">
<div class="text-2xl font-bold text-blue-600">8+</div>
<div class="text-2xl font-bold text-blue-600"><span data-target="8" data-suffix="+">0</span></div>
<div class="text-slate-500 text-xs mt-1">合作工作室</div>
</div>
<div class="w-px bg-slate-200"></div>
@@ -181,14 +181,11 @@
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
/** 迁移自 TempLate/Invite/RecruitingTalentedIndividuals/index.html（招贤纳士页）
* 职位列表（jobs）、部门筛选、福利卡片（benefits）均由 JS 渲染改为 Vue 响应式数组 + v-for */
interface Job {
id: number
title: string
@@ -387,19 +384,19 @@ function toggleJob(id: number) {
expandedId.value = expandedId.value === id ? null : id
}
/** 部门图标/颜色（对齐原 JS 渲染逻辑） */
function deptStyle(department: string): { bg: string; emoji: string } {
/** 部门图标/颜色（fa 图标，企业化） */
function deptStyle(department: string): { bg: string; icon: string } {
switch (department) {
case '技术':
return { bg: 'bg-blue-500/10 text-blue-600', emoji: '⚡' }
return { bg: 'bg-blue-500/10 text-blue-600', icon: 'fa fa-code' }
case '产品':
return { bg: 'bg-blue-500/10 text-blue-600', emoji: '🧩' }
return { bg: 'bg-blue-500/10 text-blue-600', icon: 'fa fa-cube' }
case '设计':
return { bg: 'bg-blue-500/10 text-blue-600', emoji: '🎨' }
return { bg: 'bg-blue-500/10 text-blue-600', icon: 'fa fa-paint-brush' }
case '运营':
return { bg: 'bg-green-500/10 text-green-600', emoji: '📈' }
return { bg: 'bg-green-500/10 text-green-600', icon: 'fa fa-chart-line' }
default:
return { bg: 'bg-orange-500/10 text-orange-600', emoji: '📣' }
return { bg: 'bg-orange-500/10 text-orange-600', icon: 'fa fa-bullhorn' }
}
}
@@ -413,7 +410,7 @@ function mailto(url: string) {
const benefits = [
{
icon: '📦',
icon: 'fa fa-gift',
title: '成员福利',
badge: '免费申请',
badgeColor: 'bg-blue-500/10 text-blue-600 border-blue-500/20',
@@ -421,47 +418,47 @@ const benefits = [
borderColor: 'hover:border-blue-500/30',
glowColor: 'bg-blue-500/5',
items: [
{ icon: '📧', text: '免费申请专属工作室邮箱，彰显你的身份' },
{ icon: '🖥️', text: '每位成员均可申请一台免费云服务器' },
{ icon: '💰', text: '表现出色？每个项目都有机会拿到专项奖金' },
{ icon: '💻', text: '项目条件允许时，我们可能为你配备一台电脑' },
{ icon: '🎖️', text: '贡献突出的成员将在下期视频中被点名表扬！' },
{ icon: 'fa fa-envelope', text: '提供专属工作室邮箱，统一企业形象' },
{ icon: 'fa fa-server', text: '为成员提供免费云服务器资源，支持项目开发与学习' },
{ icon: 'fa fa-coins', text: '按项目贡献设立专项奖金，成果导向、多劳多得' },
{ icon: 'fa fa-laptop', text: '符合条件的项目，将配备开发所需的硬件设备' },
{ icon: 'fa fa-award', text: '季度评优，贡献突出者将获得公开表彰' },
],
},
{
icon: '🕐',
title: '极其人性的作息',
icon: 'fa fa-clock',
title: '人性化的协作模式',
badge: '弹性自由',
badgeColor: 'bg-yellow-500/10 text-yellow-600 border-yellow-500/20',
accentColor: 'from-yellow-500/10 to-transparent',
borderColor: 'hover:border-yellow-500/30',
glowColor: 'bg-yellow-500/5',
items: [
{ icon: '😅', text: '说实话，作息制度……视情况而定' },
{ icon: '🌙', text: '不强制打卡，不强制在线，随缘就好' },
{ icon: '🧘', text: '核心宗旨只有一条：活着就行' },
{ icon: '☕', text: '最重要的是心态放平，开心最重要' },
{ icon: '🎯', text: '只要产出到位，过程你说了算' },
{ icon: 'fa fa-calendar-check', text: '以项目需求与个人节奏为准，灵活安排时间' },
{ icon: 'fa fa-check-circle', text: '不强制打卡，聚焦交付质量与结果' },
{ icon: 'fa fa-balance-scale', text: '注重工作与生活的平衡，追求长期可持续' },
{ icon: 'fa fa-smile', text: '倡导高效协作、心态平稳的职业氛围' },
{ icon: 'fa fa-bullseye', text: '过程自主，以产出与质量为最终衡量标准' },
],
},
{
icon: '🏆',
title: '全国顶尖的工作室',
icon: 'fa fa-trophy',
title: '富有底蕴的团队',
badge: '历史悠久',
badgeColor: 'bg-blue-500/10 text-blue-600 border-blue-500/20',
accentColor: 'from-blue-500/10 to-transparent',
borderColor: 'hover:border-blue-500/30',
glowColor: 'bg-blue-500/5',
items: [
{ icon: '📅', text: 'GVSDS 工作室创立于 2019 年，至今已走过数载风雨' },
{ icon: '🌟', text: '历史悠久，积淀深厚，在同类工作室中首屈一指' },
{ icon: '🏅', text: '工作室已取得多项卓越成就，实力有目共睹' },
{ icon: '🤝', text: '加入一个有历史、有底蕴的团队，你不会后悔' },
{ icon: '✨', text: '下一个被写进历史的，就是你！' },
{ icon: 'fa fa-calendar', text: 'GVSDS 工作室创立于 2019 年，历经多年积累与沉淀' },
{ icon: 'fa fa-star', text: '积淀深厚，在同类工作室中保持领先' },
{ icon: 'fa fa-medal', text: '已取得多项成就，综合实力有目共睹' },
{ icon: 'fa fa-handshake', text: '加入一个有历史、有底蕴的团队，共同成长' },
{ icon: 'fa fa-rocket', text: '期待你的加入，与我们一同书写未来' },
],
},
{
icon: '🌐',
icon: 'fa fa-globe',
title: '丰富的资源',
badge: '8所合作',
badgeColor: 'bg-blue-500/10 text-blue-600 border-blue-500/20',
@@ -469,12 +466,44 @@ const benefits = [
borderColor: 'hover:border-blue-500/30',
glowColor: 'bg-blue-500/5',
items: [
{ icon: '🤝', text: '已与全国 8 所工作室 / 社区正式达成战略合作' },
{ icon: '📚', text: '海量学习资源、项目资源随时共享，应有尽有' },
{ icon: '🔗', text: '跨工作室交流机会，拓宽你的视野与人脉' },
{ icon: '💡', text: '多元化资源加持，让你的创意不再受限' },
{ icon: '🚀', text: '来这里，体验全网最丰富的成员资源体系' },
{ icon: 'fa fa-handshake', text: '已与全国 8 所工作室 / 社区正式达成战略合作' },
{ icon: 'fa fa-book', text: '海量学习资源、项目资源随时共享' },
{ icon: 'fa fa-link', text: '跨工作室交流机会，拓宽视野与人脉' },
{ icon: 'fa fa-lightbulb', text: '多元化资源加持，让创意与想法顺利落地' },
{ icon: 'fa fa-users', text: '共享多元化的成员资源与成长体系' },
],
},
]
/** 数字统计动画：从 0 递增到目标值 */
function runCountUp(el: HTMLElement, target: number, suffix: string, duration = 1200) {
const t0 = performance.now()
const step = (now: number) => {
const p = Math.min(1, (now - t0) / duration)
const v = Math.round(target * (1 - Math.pow(1 - p, 3)))
el.textContent = v + suffix
if (p < 1) requestAnimationFrame(step)
}
requestAnimationFrame(step)
}
onMounted(() => {
// 数字统计动画（团队成员 20+ / 创立年份 2019 / 合作工作室 8+）
document.querySelectorAll('[data-target]').forEach((el) => {
const target = Number(el.getAttribute('data-target') || '0')
const suffix = el.getAttribute('data-suffix') || ''
runCountUp(el as HTMLElement, target, suffix)
})
})
</script>
<style scoped>
/* 职位手风琴展开/收起动画：grid-template-rows 0fr -> 1fr 平滑过渡 */
.accordion-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-open {
grid-template-rows: 1fr;
}
</style>
src/views/members/TermiNexusView.vue
+138 -292
View File
@@ -1,313 +1,159 @@
<template>
<!-- 迁移自 TempLate/Members/TermiNexus/index.html（TermiNexus 个人名片页）：图片 /assets/members/terminexus.jpg 保持绝对路径 -->
<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative selection:bg-blue-100 selection:text-blue-900">
<main class="w-full max-w-7xl animate-enter">
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8 auto-rows-min items-stretch">
<!-- 左侧 md4 栏 -->
<div class="md:col-span-4 flex flex-col gap-6 animate-enter delay-100">
<!-- 头像主卡片 -->
<div class="card-holy rounded-2xl p-8 relative overflow-hidden flex flex-col items-center text-center corner-accent">
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-50"></div>
<div class="relative w-40 h-40 mb-6 animate-float">
<div class="absolute inset-0 rounded-full border-2 border-dashed border-blue-400/30 animate-[spin_10s_linear_infinite]"></div>
<div class="absolute inset-2 rounded-full border border-blue-500/20"></div>
<img src="https://hb.cdn.gvsds.com/assets/members/terminexus.jpg" alt="Avatar" class="w-full h-full rounded-full object-cover shadow-lg relative z-10 bg-white">
<div class="absolute bottom-2 right-2 w-4 h-4 bg-green-500 border-2 border-white rounded-full z-20" title="Online"></div>
<!-- TermiNexus 技术画像页：参考 JiHuiYiYou-compiler-main/TermiNexus.md 重构 -->
<div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
<main class="max-w-6xl mx-auto">
<!-- ===== Hero：身份与技术定位 ===== -->
<section class="bg-gradient-to-br from-gray-950 via-blue-950 to-gray-950 rounded-2xl p-8 md:p-12 mb-6 overflow-hidden relative">
<div class="absolute inset-0 opacity-[0.04]" style="background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 40px 40px;"></div>
<div class="relative z-10 flex flex-col md:flex-row items-center gap-8">
<img src="https://hb.cdn.gvsds.com/assets/members/terminexus.jpg" alt="TermiNexus" class="w-36 h-36 md:w-44 md:h-44 rounded-full object-cover shadow-xl border-4 border-white/10">
<div class="flex-1 text-center md:text-left">
<h1 class="text-3xl md:text-4xl font-black text-white">陈砚辞</h1>
<p class="text-blue-300 font-semibold tracking-wide mt-1 uppercase text-sm">TermiNexus · 银河锋锐软件开发工作室负责人</p>
<p class="text-gray-300 text-sm md:text-base mt-4 leading-relaxed"> 16x 深度全栈工程师。技术栈六门语言、四层抽象。 </p>
<div class="flex flex-wrap justify-center md:justify-start gap-2 mt-4">
<span class="px-3 py-1 bg-white/10 text-blue-200 text-xs rounded-full border border-white/15 font-medium">全栈架构</span>
<span class="px-3 py-1 bg-white/10 text-blue-200 text-xs rounded-full border border-white/15 font-medium">编译原理</span>
<span class="px-3 py-1 bg-white/10 text-blue-200 text-xs rounded-full border border-white/15 font-medium">自研语言 Viper</span>
<span class="px-3 py-1 bg-white/10 text-blue-200 text-xs rounded-full border border-white/15 font-medium">底层 / 嵌入式</span>
<span class="px-3 py-1 bg-white/10 text-blue-200 text-xs rounded-full border border-white/15 font-medium">安全研究</span>
</div>
<h1 class="font-serif-display text-3xl font-bold text-slate-800 mb-1 tracking-wide">陈砚辞</h1>
<p class="text-blue-600 font-mono text-sm font-semibold tracking-wider mb-4 uppercase">TermiNexus · 银河锋锐工作室负责人</p>
<div class="w-full h-px bg-slate-200 my-2"></div>
<div class="flex flex-wrap justify-center gap-2 mt-4">
<span class="px-3 py-1 bg-blue-50 text-blue-700 text-xs rounded-full border border-blue-100 font-medium">Engineering</span>
<span class="px-3 py-1 bg-slate-100 text-slate-600 text-xs rounded-full border border-slate-200 font-medium">Full Stack</span>
<span class="px-3 py-1 bg-blue-50 text-blue-700 text-xs rounded-full border border-blue-100 font-medium">Architecture</span>
</div>
<div class="flex gap-4 mt-8">
<a href="https://github.com/TermiNexus" target="_blank" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-blue-600 hover:text-white transition-colors duration-300"><i class="fa fa-github text-lg"></i></a>
<a href="mailto:terminexus@gvsds.com" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-blue-600 hover:text-white transition-colors duration-300"><i class="fa fa-envelope text-lg"></i></a>
</div>
</div>
<!-- 左侧 身份档案 卡片 -->
<div class="card-holy rounded-2xl p-6 animate-enter delay-200">
<div class="flex items-center gap-2 mb-6">
<span class="text-blue-600 font-serif-display text-xl italic">/</span>
<h2 class="text-lg font-bold text-slate-800 tracking-tight">身份档案</h2>
</div>
<div class="space-y-3 text-sm">
<div class="flex justify-between py-2 border-b border-slate-100">
<span class="text-slate-500">姓名</span>
<span class="font-bold text-slate-800">陈砚辞</span>
</div>
<div class="flex justify-between py-2 border-b border-slate-100">
<span class="text-slate-500">年龄</span>
<span class="text-slate-700">25</span>
</div>
<div class="flex justify-between py-2 border-b border-slate-100">
<span class="text-slate-500">生日</span>
<span class="text-slate-700">2001 / 05 / 28</span>
</div>
<div class="flex justify-between py-2 border-b border-slate-100">
<span class="text-slate-500">性别</span>
<span class="text-slate-700">男</span>
</div>
<div class="py-2">
<span class="text-slate-500 block mb-2">性格</span>
<p class="text-slate-700 leading-relaxed">慢热内敛、理性专注、独处钻研，逻辑思维出众，不喜无效社交，冷静克制，偶有冲动。</p>
</div>
<div class="py-2">
<span class="text-slate-500 block mb-2">标签</span>
<div class="flex flex-wrap gap-2">
<span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded border">电脑爱好者</span>
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-xs rounded border">自学编程</span>
<span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded border">全栈架构工程师</span>
</div>
</div>
</div>
</div>
<!-- 数据统计卡片 -->
<div class="grid grid-cols-2 gap-4">
<div class="card-holy rounded-xl p-4 text-center">
<p class="text-xs text-slate-400 font-mono mb-1">项目数</p>
<p class="text-2xl font-bold text-slate-800">12</p>
</div>
<div class="card-holy rounded-xl p-4 text-center">
<p class="text-xs text-slate-400 font-mono mb-1">代码行</p>
<p class="text-2xl font-bold text-blue-600">210k</p>
</div>
<div class="card-holy rounded-xl p-4 text-center">
<p class="text-xs text-slate-400 font-mono mb-1">字符量</p>
<p class="text-2xl font-bold text-blue-600">7.1m</p>
</div>
<div class="card-holy rounded-xl p-4 text-center">
<p class="text-xs text-slate-400 font-mono mb-1">入行时间</p>
<p class="text-lg font-bold text-slate-700">2019.09</p>
<div class="flex justify-center md:justify-start gap-3 mt-6">
<a href="https://github.com/TermiNexus" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-gray-200 hover:bg-blue-600 hover:text-white transition-colors"><i class="fa fa-github text-lg"></i></a>
<a href="mailto:terminexus@gvsds.com" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-gray-200 hover:bg-blue-600 hover:text-white transition-colors"><i class="fa fa-envelope text-lg"></i></a>
</div>
</div>
</div>
</section>
<!-- 右侧 md8 栏 -->
<div class="md:col-span-8 flex flex-col gap-6">
<!-- 个人简介 -->
<div class="card-holy rounded-2xl p-8 md:p-10 relative animate-enter delay-300 overflow-hidden group">
<div class="absolute right-0 top-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity transform group-hover:scale-110 duration-700"><i class="fa fa-quote-right text-9xl text-blue-900"></i></div>
<div class="relative z-10">
<div class="flex items-center gap-2 mb-4">
<span class="text-blue-600 font-serif-display text-xl italic">/</span>
<h2 class="text-xl font-bold text-slate-800 tracking-tight">个人简介</h2>
</div>
<p class="text-slate-700 text-lg leading-relaxed mb-4 font-light">
我是一名<span class="bg-blue-50 underline underline-primary underline-offset-2 px-1 rounded">深耕</span>
<strong class="text-primary font-semibold">Web前端开发</strong>和<strong class="text-primary font-semibold">后端/桌面应用开发</strong>的开发者，兼具
<em class="text-primary font-medium">UI/UX设计</em>与
<span class="bg-blue-50 underline underline-primary underline-offset-2 px-1 rounded">软件设计</span>能力，目前主导
<span class="font-bold text-slate-800">「银河锋锐软件开发工作室」</span>技术方向与研发工作。
</p>
<p class="text-slate-700 text-lg leading-relaxed mb-4 font-light">
深耕编程领域 <span class="text-primary font-bold text-xl">6 年</span>，擅长从<span class="bg-blue-100 text-blue-800 px-1 rounded font-bold">0 到 1</span>搭建系统架构，注重代码规范与技术沉淀，秉持极简、高效、可靠的极客开发理念。
</p>
<p class="text-slate-700 text-lg leading-relaxed mb-4 font-light">
专注精细化界面交互、底层逻辑实现、迭代式性能优化，同时涉猎系统底层、编译原理与稀疏数值计算等方向，偏爱理性钻研与独立开发。
</p>
<p class="text-slate-700 text-lg leading-relaxed font-light">
常年深耕键盘与终端，习惯以代码构建秩序，冷静内敛，享受独处钻研的过程，以技术为长期深耕的核心方向。
</p>
<div class="flex flex-wrap gap-3 mt-6">
<span class="inline-flex items-center px-3 py-1 rounded-lg text-sm font-medium bg-slate-50 text-slate-600 border border-slate-200"><i class="fa fa-code mr-2 text-blue-500"></i> 全栈开发</span>
<span class="inline-flex items-center px-3 py-1 rounded-lg text-sm font-medium bg-slate-50 text-slate-600 border border-slate-200"><i class="fa fa-microchip mr-2 text-blue-500"></i> 底层研发</span>
<span class="inline-flex items-center px-3 py-1 rounded-lg text-sm font-medium bg-slate-50 text-slate-600 border border-slate-200"><i class="fa fa-cogs mr-2 text-blue-500"></i> 架构设计</span>
</div>
<!-- ===== 数据概览 ===== -->
<section class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
<div v-for="s in stats" :key="s.label" class="bg-white dark:bg-slate-900 rounded-xl p-5 text-center border border-gray-100 dark:border-slate-700 shadow-sm">
<p class="text-2xl md:text-3xl font-black text-blue-600 dark:text-blue-400">{{ s.display }}</p>
<p class="text-xs text-gray-400 mt-1">{{ s.label }}</p>
<p class="text-xs text-gray-600 dark:text-gray-300 mt-0.5 font-medium">{{ s.sub }}</p>
</div>
</section>
<!-- ===== 技术栈全景 ===== -->
<section class="bg-white dark:bg-slate-900 rounded-2xl p-8 border border-gray-100 dark:border-slate-700 shadow-sm mb-6">
<div class="flex items-center gap-3 mb-8">
<span class="text-blue-600 dark:text-blue-400 text-xl"><i class="fa fa-layer-group"></i></span>
<h2 class="text-2xl font-black text-gray-900 dark:text-white">技术栈全景</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div v-for="layer in stack" :key="layer.title" class="border border-gray-100 dark:border-slate-700 rounded-xl p-6 hover:border-blue-400/50 transition-colors">
<div class="flex items-center gap-3 mb-4">
<span class="w-9 h-9 rounded-lg bg-blue-600/10 flex items-center justify-center"><i :class="layer.icon" class="text-blue-600 dark:text-blue-400"></i></span>
<h3 class="font-bold text-gray-900 dark:text-white">{{ layer.title }}</h3>
</div>
<ul class="space-y-2">
<li v-for="t in layer.items" :key="t" class="flex items-start text-sm text-gray-600 dark:text-gray-300"><span class="w-1.5 h-1.5 bg-blue-500 rounded-full mt-1.5 mr-2 flex-shrink-0"></span>{{ t }}</li>
</ul>
</div>
</div>
</section>
<!-- ===== 工程特征 ===== -->
<section class="bg-white dark:bg-slate-900 rounded-2xl p-8 border border-gray-100 dark:border-slate-700 shadow-sm mb-6">
<div class="flex items-center gap-3 mb-8">
<span class="text-blue-600 dark:text-blue-400 text-xl"><i class="fa fa-cubes"></i></span>
<h2 class="text-2xl font-black text-gray-900 dark:text-white">工程特征</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div v-for="f in traits" :key="f.title" class="border border-gray-100 dark:border-slate-700 rounded-xl p-6 hover:border-blue-400/50 transition-colors">
<h3 class="font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-2"><i :class="f.icon" class="text-blue-500 text-sm"></i>{{ f.title }}</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">{{ f.desc }}</p>
</div>
</div>
</section>
<!-- ===== 身份档案 ===== -->
<section class="bg-white dark:bg-slate-900 rounded-2xl p-8 border border-gray-100 dark:border-slate-700 shadow-sm">
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6">身份档案</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-3 text-sm">
<div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-800">
<span class="text-gray-500 dark:text-gray-400">姓名</span>
<span class="font-bold text-gray-900 dark:text-white">陈砚辞</span>
</div>
<div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-800">
<span class="text-gray-500 dark:text-gray-400">生日</span>
<span class="text-gray-700 dark:text-gray-300">2001 / 05 / 28</span>
</div>
<div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-800">
<span class="text-gray-500 dark:text-gray-400">入行时间</span>
<span class="text-gray-700 dark:text-gray-300">2019.09</span>
</div>
</div>
<!-- 技能 + 雷达 并排 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="card-holy rounded-2xl p-6 animate-enter delay-400">
<h3 class="text-lg font-bold text-slate-800 mb-6 flex items-center"><i class="fa fa-layer-group mr-2 text-blue-500"></i>技能掌握程度</h3>
<div class="space-y-4">
<div v-for="(skill, i) in skills" :key="skill.name" class="group">
<div class="flex justify-between text-sm mb-1 font-mono">
<span class="text-slate-600">{{ skill.name }}</span>
<span class="text-blue-600">{{ skill.value }}%</span>
</div>
<div class="h-2 bg-slate-100 rounded-full overflow-hidden">
<div class="bar-fill h-full bg-blue-500 rounded-full" :class="{ 'bg-blue-400': skill.value === 80 }" :style="{ width: `${skill.value}%`, animationDelay: `${i * 0.1}s` }"></div>
</div>
</div>
</div>
</div>
<div class="card-holy rounded-2xl p-6 animate-enter delay-400 flex flex-col items-center justify-center relative">
<h3 class="absolute top-6 left-6 text-lg font-bold text-slate-800 flex items-center">
<i class="fa fa-crosshairs mr-2 text-blue-500"></i> 综合能力评估
</h3>
<div class="w-64 h-64 relative mt-4">
<svg viewBox="0 0 200 200" class="w-full h-full drop-shadow-lg">
<polygon points="100,20 176,64 176,152 100,196 24,152 24,64" fill="none" stroke="#e2e8f0" stroke-width="1" />
<polygon points="100,45 148,73 148,127 100,155 52,127 52,73" fill="none" stroke="#e2e8f0" stroke-width="1" />
<line x1="100" y1="100" x2="100" y2="20" stroke="#cbd5e1" stroke-width="1" />
<line x1="100" y1="100" x2="176" y2="64" stroke="#cbd5e1" stroke-width="1" />
<line x1="100" y1="100" x2="176" y2="152" stroke="#cbd5e1" stroke-width="1" />
<line x1="100" y1="100" x2="100" y2="196" stroke="#cbd5e1" stroke-width="1" />
<line x1="100" y1="100" x2="24" y2="152" stroke="#cbd5e1" stroke-width="1" />
<line x1="100" y1="100" x2="24" y2="64" stroke="#cbd5e1" stroke-width="1" />
<polygon points="100,24.5 163,65.5 152,144 100,168 53.5,136 37.2,69.6" fill="rgba(22, 93, 255, 0.2)" stroke="#165DFF" stroke-width="2" class="radar-path" />
<text x="100" y="15" text-anchor="middle" font-size="8" fill="#64748b" class="font-mono">学习</text>
<text x="185" y="60" text-anchor="start" font-size="8" fill="#64748b" class="font-mono">算法</text>
<text x="185" y="160" text-anchor="start" font-size="8" fill="#64748b" class="font-mono">代码质量</text>
<text x="100" y="210" text-anchor="middle" font-size="8" fill="#64748b" class="font-mono">协作</text>
<text x="15" y="160" text-anchor="end" font-size="8" fill="#64748b" class="font-mono">问题解决</text>
<text x="15" y="60" text-anchor="end" font-size="8" fill="#64748b" class="font-mono">创新</text>
</svg>
</div>
</div>
</div>
<!-- 代码贡献趋势 -->
<div class="card-holy rounded-2xl p-6 md:p-8 animate-enter delay-500">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
<div>
<h3 class="text-xl font-bold text-slate-800 flex items-center"><i class="fa fa-chart-line mr-3 text-blue-500"></i> 代码贡献量趋势</h3>
<p class="text-sm text-slate-500 mt-1 font-mono">DATA_SOURCE: GVSDS_INTERNAL_GIT_LOG</p>
</div>
<div class="mt-4 md:mt-0 flex items-center gap-4">
<div class="flex items-center text-xs text-slate-500"><span class="w-3 h-3 bg-blue-500 rounded-full mr-2"></span> Lines of Code</div>
</div>
</div>
<div class="relative h-64 w-full flex items-end justify-between gap-2 md:gap-8 px-2 md:px-10">
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none pb-6">
<div class="w-full h-px bg-slate-100 border-t border-dashed border-slate-200"></div>
<div class="w-full h-px bg-slate-100 border-t border-dashed border-slate-200"></div>
<div class="w-full h-px bg-slate-100 border-t border-dashed border-slate-200"></div>
<div class="w-full h-px bg-slate-100 border-t border-dashed border-slate-200"></div>
</div>
<div v-for="(bar, i) in contributionBars" :key="bar.label" class="flex flex-col items-center group z-10 flex-1 h-full justify-end">
<div class="w-full max-w-[40px] bg-blue-500/10 rounded-t-lg relative hover:bg-blue-500 transition-all duration-500 bar-fill overflow-hidden" :style="{ height: `${bar.height}%`, animationDelay: `${i * 0.1}s` }">
<div class="absolute bottom-0 w-full h-full bg-blue-400/30 group-hover:bg-blue-500 transition-colors"></div>
<div class="absolute -top-10 left-1/2 transform -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap font-mono">{{ bar.value }}</div>
</div>
<span class="mt-3 text-xs font-mono text-slate-400">{{ bar.label }}</span>
</div>
</div>
</div>
<!-- 底部能力栈+终端 -->
<div class="flex flex-col md:flex-row gap-6">
<div class="flex-1 card-holy rounded-2xl p-6">
<h3 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
<i class="fa fa-microchip mr-2 text-blue-500"></i> 核心能力栈
</h3>
<ul class="grid grid-cols-2 gap-4">
<li class="flex items-center space-x-2 text-slate-600"><i class="fa fa-code text-xl text-blue-500"></i><span class="text-sm">全栈开发</span></li>
<li class="flex items-center space-x-2 text-slate-600"><i class="fa fa-sitemap text-xl text-blue-500"></i><span class="text-sm">系统架构</span></li>
<li class="flex items-center space-x-2 text-slate-600"><i class="fa fa-terminal text-xl text-blue-500"></i><span class="text-sm">底层研发</span></li>
<li class="flex items-center space-x-2 text-slate-600"><i class="fa fa-cogs text-xl text-blue-500"></i><span class="text-sm">项目统筹</span></li>
</ul>
</div>
<div class="flex-1 card-holy rounded-2xl p-6 bg-slate-900 text-slate-300 font-mono text-xs overflow-hidden relative">
<div class="absolute top-0 right-0 p-2 opacity-20 text-4xl text-green-500"><i class="fa fa-terminal"></i></div>
<div class="flex items-center gap-2 mb-2 border-b border-slate-700 pb-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="ml-2">bash — terminal</span>
</div>
<p class="mb-1"><span class="text-green-400">chenyuyan@TermiNexus</span>:<span class="text-blue-400">~</span>$ cat profile.md</p>
<p class="mb-1 text-slate-400"># Identity: Chen Yuyan</p>
<p class="mb-1 text-slate-400"># Core: Geek / Developer / Architect</p>
<p class="mb-1 text-slate-400"># Commit: <span class="text-white">210k+</span> lines</p>
<p class="mt-2"><span class="text-green-400">chenyuyan@TermiNexus</span>:<span class="text-blue-400">~</span>$ <span class="terminal-cursor"></span></p>
<div>
<div class="flex flex-wrap gap-2 mt-1">
<span class="px-2 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs rounded border border-blue-100 dark:border-blue-800">电脑爱好者</span>
<span class="px-2 py-1 bg-gray-100 dark:bg-slate-800 text-gray-600 dark:text-gray-300 text-xs rounded border border-gray-200 dark:border-slate-700">自学编程</span>
<span class="px-2 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs rounded border border-blue-100 dark:border-blue-800">全栈架构工程师</span>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
</template>
<script setup lang="ts">
/** 迁移自 TempLate/Members/TermiNexus/index.html（TermiNexus 个人名片页） */
const skills = [
{ name: 'Python', value: 90 },
{ name: '算法', value: 88 },
{ name: '数据结构', value: 85 },
{ name: 'C / C++', value: 80 },
const stats = [
{ label: '并行项目', sub: 'Git 仓库', display: '12' },
{ label: '编译器体量', sub: 'Viper 生态', display: '60K' },
{ label: '提交密度', sub: 'TransPyV', display: '173' },
{ label: '编程语言', sub: '全栈贯通', display: '6' },
{ label: '抽象层次', sub: '支付→寄存器', display: '4' },
]
const contributionBars = [
{ label: '7月', value: '17,868', height: 70 },
{ label: '8月', value: '24,534', height: 95 },
{ label: '9月', value: '4,678', height: 20 },
{ label: '10月', value: '8,097', height: 35 },
{ label: '11月', value: '14,573', height: 60 },
{ label: '12月', value: '7,380', height: 30 },
const stack = [
{
title: 'Web 后端与分布式',
icon: 'fa fa-server',
items: ['Django 多应用架构（14+ app）', 'MSYNC 分布式同步（HMAC-SHA256 / Saga 事务）', '自研 ORM 与通用 CRUD 引擎', '支付网关（支付宝/微信/银行三通道）', 'Redis 分布式锁 + Celery 异步任务', 'JWT + RBAC/ABAC 安全体系', 'MySQL SAAS 多租户'],
},
{
title: '系统级与编译器',
icon: 'fa fa-microchip',
items: ['自研语言 Viper（Python 语法 → LLVM 语义）', '两代编译器 TransPyC → TransPyV（自举）', '两阶段编译（声明提取 + 翻译）', '手写 AST（4,176 LOC）与 llvmlite（1,500 LOC）', '自研 OS ViperOS（QEMU 可启动）', 'STM32 裸机（寄存器级）', 'fork Pyright → 语言服务器', 'VSCode 扩展'],
},
{
title: 'C / C++ / 汇编',
icon: 'fa fa-cogs',
items: ['TigerVNC / TinyCC vendor 集成', 'STB 单头库全套', 'STM32 裸机 C（startup/linker）', '「30 天自制操作系统」工具链', 'CMake + Ninja 构建'],
},
{
title: 'Java 游戏生态',
icon: 'fa fa-gamepad',
items: ['Minecraft Fabric 模组（MC 1.21.10）', 'SQLite/MySQL 双后端 + HikariCP', '多货币/汇率/付款状态机', '事件演出引擎（tick 调度）'],
},
{
title: '前端与设计',
icon: 'fa fa-palette',
items: ['Vue3 + TypeScript + Vite（GERP/GVSite/CCGO）', 'Pinia 状态管理 + composables', 'TinyMCE 富文本 / Markdown 阅读器', 'Canvas 物理艺术（射线-多边形切割）', '微信小程序'],
},
{
title: '安全研究',
icon: 'fa fa-shield-halved',
items: ['攻击侧：Termination 系列（教学定位）', '防御侧：RBAC/审计/验签/限流', '工具链：VNC / frp / SigThief / UPX'],
},
{
title: '基础设施与工程',
icon: 'fa fa-gears',
items: ['gunicorn + supervisor 部署', 'CDN 域名 / COS 上传 / WebSocket', 'Nuitka / PyInstaller 打包', 'GH Actions CI', '版本纪律（VERSION_MATRIX / API 契约）'],
},
]
</script>
<style scoped>
/* 迁移自 TermiNexus/index.html 的 <style> 内容 */
const traits = [
{ title: '自给自足', icon: 'fa fa-hammer', desc: '缺什么造什么：手写解析器、手写 IR 库、fork 类型检查器，依赖最小化。' },
{ title: '确定性痴迷', icon: 'fa fa-bullseye', desc: 'SHA1 内容寻址、byte-equal 自举目标、缓存纪律，追求输出可复现。' },
{ title: '文档先行', icon: 'fa fa-book', desc: '每个项目 README + 架构文档 + API 契约 + 版本矩阵，文档与代码同步生长。' },
{ title: 'AI 原生协作', icon: 'fa fa-robot', desc: '为 AI 设计工作流：agent 策略、测试策略、审查策略，而非简单生成代码。' },
{ title: '攻防双向', icon: 'fa fa-code-branch', desc: '同一人写攻击链与防御体系，对系统边界有两端完整的理解。' },
{ title: '产出密度极高', icon: 'fa fa-bolt', desc: '12 个项目并行，约 2 个月产出 60K LOC 编译器 + 裸机 + Pyright fork。' },
]
.font-mono { font-family: 'JetBrains Mono', monospace; }
.font-serif-display { font-family: 'Playfair Display', serif; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 15px rgba(22, 93, 255, 0.05); }
50% { box-shadow: 0 0 25px rgba(22, 93, 255, 0.15); }
}
@keyframes draw-line {
from { stroke-dashoffset: 1000; }
to { stroke-dashoffset: 0; }
}
@keyframes grow-bar {
from { width: 0; }
}
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-glow { animation: glow-pulse 4s ease-in-out infinite; }
.animate-enter { animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
/* 统一卡片样式，固定高度协调 */
.card-holy {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
height: 100%;
}
.card-holy:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(22, 93, 255, 0.1), 0 10px 10px -5px rgba(22, 93, 255, 0.04);
border-color: rgba(22, 93, 255, 0.2);
}
.corner-accent::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border-top: 2px solid #165dff;
border-left: 2px solid #165dff;
opacity: 0;
transition: opacity 0.3s;
}
.card-holy:hover .corner-accent::before { opacity: 1; }
.bar-fill { animation: grow-bar 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.radar-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw-line 2s ease-out forwards 0.5s; }
.terminal-cursor::after { content: '_'; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
</style>
</script>