784 lines
49 KiB
HTML
784 lines
49 KiB
HTML
<style>
|
|
/* 自定义 CSS 变量与特效 */
|
|
:root {
|
|
--grid-color: rgba(14, 165, 233, 0.1);
|
|
--border-color: rgba(56, 189, 248, 0.2);
|
|
}
|
|
|
|
/* 蓝图板块专用样式 */
|
|
.blueprint-bg {
|
|
background-color: #003366;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px),
|
|
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
|
|
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
|
|
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
|
|
color: #e0f2fe;
|
|
font-family: 'JetBrains Mono', monospace; /* 工程字体 */
|
|
}
|
|
|
|
.blueprint-border {
|
|
border: 2px solid #4fc3f7;
|
|
box-shadow: 0 0 10px rgba(79, 195, 247, 0.3);
|
|
}
|
|
|
|
.blueprint-title {
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
text-shadow: 0 0 5px rgba(255,255,255,0.5);
|
|
border-bottom: 2px dashed #4fc3f7;
|
|
display: inline-block;
|
|
}
|
|
|
|
.blueprint-line {
|
|
position: absolute;
|
|
background-color: #4fc3f7;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* 通用动画 */
|
|
.fade-in-up {
|
|
animation: fadeInUp 0.8s ease-out forwards;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.hover-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 30px -10px rgba(14, 165, 233, 0.3);
|
|
}
|
|
|
|
/* 导航栏磨砂效果 */
|
|
.glass-nav {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
|
|
}
|
|
</style>
|
|
<div class="antialiased selection:bg-primary selection:text-white">
|
|
<!-- Hero 区域 -->
|
|
<header class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute inset-0 -z-10">
|
|
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-blue-100 blur-3xl opacity-70"></div>
|
|
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-indigo-100 blur-3xl opacity-70"></div>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center fade-in-up" style="animation-delay: 0.1s;">
|
|
<h1 class="text-5xl md:text-7xl font-extrabold text-slate-900 tracking-tight mb-6">
|
|
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary via-secondary to-indigo-600">协同筑码</span> 工作法
|
|
</h1>
|
|
<p class="mt-4 text-xl text-slate-500 max-w-3xl mx-auto leading-relaxed">
|
|
通过规范先行、增量迭代与质量内建，打造可维护、高可用的软件交付体系。
|
|
</p>
|
|
<div class="mt-10 flex justify-center gap-4">
|
|
<a href="#blueprint" class="px-8 py-3.5 text-base font-semibold text-white bg-slate-900 rounded-lg hover:bg-slate-800 transition-colors shadow-xl shadow-slate-900/20">
|
|
查看架构蓝图
|
|
</a>
|
|
<a href="#process" class="px-8 py-3.5 text-base font-semibold text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 hover:border-slate-300 transition-colors">
|
|
了解开发流程
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 核心原则 -->
|
|
<section id="core" class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl font-bold text-slate-900">五大核心原则</h2>
|
|
<div class="w-16 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8">
|
|
<!-- 原则 1 -->
|
|
<div class="p-6 bg-slate-50 rounded-xl border border-slate-100 hover:border-primary/30 transition-colors group">
|
|
<div class="w-12 h-12 bg-blue-100 text-primary rounded-lg flex items-center justify-center text-xl mb-4 group-hover:scale-110 transition-transform">
|
|
<i class="fas fa-gem"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">价值导向</h3>
|
|
<p class="text-sm text-slate-500">拒绝炫技，聚焦业务问题解决，优先保证功能可用与稳定。</p>
|
|
</div>
|
|
<!-- 原则 2 -->
|
|
<div class="p-6 bg-slate-50 rounded-xl border border-slate-100 hover:border-primary/30 transition-colors group">
|
|
<div class="w-12 h-12 bg-indigo-100 text-secondary rounded-lg flex items-center justify-center text-xl mb-4 group-hover:scale-110 transition-transform">
|
|
<i class="fas fa-ruler-combined"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">规范先行</h3>
|
|
<p class="text-sm text-slate-500">统一编码、分支与文档规范，降低协作成本，提升可读性。</p>
|
|
</div>
|
|
<!-- 原则 3 -->
|
|
<div class="p-6 bg-slate-50 rounded-xl border border-slate-100 hover:border-primary/30 transition-colors group">
|
|
<div class="w-12 h-12 bg-sky-100 text-accent rounded-lg flex items-center justify-center text-xl mb-4 group-hover:scale-110 transition-transform">
|
|
<i class="fas fa-shoe-prints"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">增量迭代</h3>
|
|
<p class="text-sm text-slate-500">小步快跑，拆分大需求为小任务，每轮输出可验证成果。</p>
|
|
</div>
|
|
<!-- 原则 4 -->
|
|
<div class="p-6 bg-slate-50 rounded-xl border border-slate-100 hover:border-primary/30 transition-colors group">
|
|
<div class="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-lg flex items-center justify-center text-xl mb-4 group-hover:scale-110 transition-transform">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">质量内建</h3>
|
|
<p class="text-sm text-slate-500">测试、复盘、优化融入全流程，而非仅依赖最终验收。</p>
|
|
</div>
|
|
<!-- 原则 5 -->
|
|
<div class="p-6 bg-slate-50 rounded-xl border border-slate-100 hover:border-primary/30 transition-colors group">
|
|
<div class="w-12 h-12 bg-amber-100 text-amber-600 rounded-lg flex items-center justify-center text-xl mb-4 group-hover:scale-110 transition-transform">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">知识共享</h3>
|
|
<p class="text-sm text-slate-500">鼓励代码评审与技术分享，沉淀通用能力，打破壁垒。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 蓝图架构设计区域 (定制化背景) -->
|
|
<section id="blueprint" class="blueprint-bg py-20 relative overflow-hidden">
|
|
<!-- 蓝图装饰标线 -->
|
|
<div class="blueprint-line w-full h-px top-10 left-0"></div>
|
|
<div class="blueprint-line w-full h-px bottom-10 left-0"></div>
|
|
<div class="blueprint-line w-px h-full top-0 left-10"></div>
|
|
<div class="blueprint-line w-px h-full top-0 right-10"></div>
|
|
|
|
<!-- 网格装饰文字 -->
|
|
<div class="absolute top-12 left-12 text-blue-300/30 text-xs font-mono">FIG 1.0: ARCHITECTURE FRAMEWORK</div>
|
|
<div class="absolute bottom-12 right-12 text-blue-300/30 text-xs font-mono">SCALE: 1:100</div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="flex items-center gap-4 mb-12">
|
|
<div class="w-12 h-12 border-2 border-blue-300 flex items-center justify-center">
|
|
<i class="fas fa-drafting-compass text-blue-200 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-blue-100 blueprint-title">工程蓝图 & 项目组织</h2>
|
|
<p class="text-blue-300 font-mono text-sm mt-2">SYSTEM ARCHITECTURE & ORGANIZATION STRUCTURE</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
<!-- 左侧：框架设计 -->
|
|
<div class="relative">
|
|
<div class="absolute -top-4 -left-4 border-l-2 border-t-2 border-blue-400 w-8 h-8"></div>
|
|
<div class="absolute -bottom-4 -right-4 border-r-2 border-b-2 border-blue-400 w-8 h-8"></div>
|
|
|
|
<div class="bg-blue-900/40 backdrop-blur-sm p-8 blueprint-border rounded-sm h-full">
|
|
<h3 class="text-xl font-bold text-blue-100 mb-6 font-mono flex items-center">
|
|
<i class="fas fa-cubes mr-2"></i> 模块化框架设计
|
|
</h3>
|
|
|
|
<!-- 模拟架构图 -->
|
|
<div class="space-y-4">
|
|
<!-- 表现层 -->
|
|
<div class="border border-blue-400/50 p-4 bg-blue-800/20 relative">
|
|
<span class="absolute -top-3 left-4 bg-blue-900 px-2 text-xs text-blue-300">PREVIEW LAYER</span>
|
|
<div class="flex justify-center gap-4 mt-2">
|
|
<div class="bg-blue-700 px-4 py-2 text-xs rounded text-white border border-blue-400">Web App</div>
|
|
<div class="bg-blue-700 px-4 py-2 text-xs rounded text-white border border-blue-400">Mobile H5</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 网关/路由 -->
|
|
<div class="border-t-2 border-dashed border-blue-400/50 my-2 relative">
|
|
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-blue-900 px-2 text-xs text-blue-300">Gateway / API</div>
|
|
</div>
|
|
|
|
<!-- 业务域层 -->
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<div class="border border-blue-400/50 p-3 text-center text-xs text-blue-100 bg-blue-800/10">User Module<br>用户域</div>
|
|
<div class="border border-blue-400/50 p-3 text-center text-xs text-blue-100 bg-blue-800/10">Order Module<br>订单域</div>
|
|
<div class="border border-blue-400/50 p-3 text-center text-xs text-blue-100 bg-blue-800/10">Product Module<br>商品域</div>
|
|
</div>
|
|
|
|
<!-- 数据层 -->
|
|
<div class="border-t-2 border-dashed border-blue-400/50 my-2 relative">
|
|
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-blue-900 px-2 text-xs text-blue-300">Data Access</div>
|
|
</div>
|
|
|
|
<!-- 基础设施 -->
|
|
<div class="border border-blue-400/50 p-4 bg-blue-800/20 flex justify-around">
|
|
<div class="text-center">
|
|
<i class="fas fa-database text-blue-300 mb-1"></i>
|
|
<div class="text-xs text-blue-200">MySQL/PG</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<i class="fas fa-bolt text-blue-300 mb-1"></i>
|
|
<div class="text-xs text-blue-200">Redis/Cache</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<i class="fas fa-search text-blue-300 mb-1"></i>
|
|
<div class="text-xs text-blue-200">Search</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：项目组织 -->
|
|
<div class="relative">
|
|
<div class="bg-blue-900/40 backdrop-blur-sm p-8 blueprint-border rounded-sm h-full">
|
|
<h3 class="text-xl font-bold text-blue-100 mb-6 font-mono flex items-center">
|
|
<i class="fas fa-sitemap mr-2"></i> 项目目录组织
|
|
</h3>
|
|
|
|
<div class="font-mono text-sm text-blue-200 bg-blue-950/50 p-6 rounded border border-blue-400/30 shadow-inner overflow-x-auto">
|
|
<pre>
|
|
/src # 源码文件
|
|
/api # 接口层
|
|
/v1 # 版本控制
|
|
/dto # 数据传输对象
|
|
/core # 核心业务逻辑
|
|
/domain # 领域模型
|
|
/service # 业务服务
|
|
/infrastructure # 基础设施
|
|
/db # 数据库访问
|
|
/mq # 消息队列
|
|
/common # 公共组件
|
|
/utils # 工具类
|
|
/config # 配置
|
|
/tests # 测试目录
|
|
/unit # 单元测试
|
|
/integration # 集成测试
|
|
</pre>
|
|
</div>
|
|
<p class="text-blue-300 text-xs mt-4 italic">
|
|
* 注：严格遵循分层架构，禁止跨层调用。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 开发全流程 -->
|
|
<section id="process" class="py-20 tech-grid-bg">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between mb-12">
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-gray-900 sm:text-4xl mb-4">全生命周期开发规范</h2>
|
|
<p class="text-lg text-gray-600 max-w-2xl">从需求澄清到线上复盘，标准化每一个环节，确保项目交付的确定性与高质量。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 流程时间轴 -->
|
|
<div class="relative">
|
|
<!-- 连接线 -->
|
|
<div class="absolute left-0 md:left-1/2 transform md:-translate-x-1/2 h-full w-1 bg-blue-100 hidden md:block"></div>
|
|
|
|
<!-- Step 1 -->
|
|
<div class="relative z-10 mb-12 md:mb-16">
|
|
<div class="flex flex-col md:flex-row items-start">
|
|
<div class="md:w-1/2 md:pr-12 md:text-right mb-4 md:mb-0">
|
|
<h3 class="text-2xl font-bold text-gray-900">01. 需求与设计</h3>
|
|
<p class="text-blue-600 font-medium mb-2">澄清与架构</p>
|
|
<p class="text-gray-600">
|
|
输出《需求规格说明书》，明确边界与性能指标。核心模块产出《技术设计文档》，包含架构选型、数据库设计与风险应对。拒绝口头沟通偏差。
|
|
</p>
|
|
</div>
|
|
<div class="hidden md:flex w-10 h-10 bg-blue-600 rounded-full items-center justify-center text-white font-bold shadow-lg border-4 border-white absolute left-1/2 transform -translate-x-1/2">
|
|
<i class="fa fa-file-text"></i>
|
|
</div>
|
|
<div class="md:w-1/2 md:pl-12"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="relative z-10 mb-12 md:mb-16">
|
|
<div class="flex flex-col md:flex-row items-start">
|
|
<div class="md:w-1/2 md:pr-12 order-1 md:order-none"></div>
|
|
<div class="hidden md:flex w-10 h-10 bg-blue-600 rounded-full items-center justify-center text-white font-bold shadow-lg border-4 border-white absolute left-1/2 transform -translate-x-1/2 order-2">
|
|
<i class="fa fa-code"></i>
|
|
</div>
|
|
<div class="md:w-1/2 md:pl-12 mb-4 md:mb-0 order-3 md:order-none">
|
|
<h3 class="text-2xl font-bold text-gray-900">02. 编码实现</h3>
|
|
<p class="text-blue-600 font-medium mb-2">规范化与安全</p>
|
|
<p class="text-gray-600">
|
|
严格遵循通用编码规范（命名、注释、格式）。采用 Git Flow 分支策略（feature/develop/master），提交信息规范化。注重模块化开发与安全防护（防注入、加密）。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="relative z-10 mb-12 md:mb-16">
|
|
<div class="flex flex-col md:flex-row items-start">
|
|
<div class="md:w-1/2 md:pr-12 md:text-right mb-4 md:mb-0">
|
|
<h3 class="text-2xl font-bold text-gray-900">03. 测试与验收</h3>
|
|
<p class="text-blue-600 font-medium mb-2">多层次验证</p>
|
|
<p class="text-gray-600">
|
|
开发自测 -> 单元测试(70%覆盖率) -> 集成测试。Bug修复需回归测试。提测必须包含自测报告与更新后的文档，确保交付物完整。
|
|
</p>
|
|
</div>
|
|
<div class="hidden md:flex w-10 h-10 bg-blue-600 rounded-full items-center justify-center text-white font-bold shadow-lg border-4 border-white absolute left-1/2 transform -translate-x-1/2">
|
|
<i class="fa fa-bug"></i>
|
|
</div>
|
|
<div class="md:w-1/2 md:pl-12"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="relative z-10 mb-12 md:mb-16">
|
|
<div class="flex flex-col md:flex-row items-start">
|
|
<div class="md:w-1/2 md:pr-12 order-1 md:order-none"></div>
|
|
<div class="hidden md:flex w-10 h-10 bg-blue-600 rounded-full items-center justify-center text-white font-bold shadow-lg border-4 border-white absolute left-1/2 transform -translate-x-1/2 order-2">
|
|
<i class="fa fa-rocket"></i>
|
|
</div>
|
|
<div class="md:w-1/2 md:pl-12 mb-4 md:mb-0 order-3 md:order-none">
|
|
<h3 class="text-2xl font-bold text-gray-900">04. 发布与运维</h3>
|
|
<p class="text-blue-600 font-medium mb-2">灰度与监控</p>
|
|
<p class="text-gray-600">
|
|
执行非核心时段发布，支持灰度发布。实时监控日志与资源状态。具备完善的回滚机制与运维文档，确保生产环境稳定。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 5 -->
|
|
<div class="relative z-10">
|
|
<div class="flex flex-col md:flex-row items-start">
|
|
<div class="md:w-1/2 md:pr-12 md:text-right mb-4 md:mb-0">
|
|
<h3 class="text-2xl font-bold text-gray-900">05. 复盘与优化</h3>
|
|
<p class="text-blue-600 font-medium mb-2">持续改进</p>
|
|
<p class="text-gray-600">
|
|
每轮迭代复盘，总结亮点与问题。定期清理技术债务，评估新技术升级，持续优化开发效能。
|
|
</p>
|
|
</div>
|
|
<div class="hidden md:flex w-10 h-10 bg-blue-600 rounded-full items-center justify-center text-white font-bold shadow-lg border-4 border-white absolute left-1/2 transform -translate-x-1/2">
|
|
<i class="fa fa-line-chart"></i>
|
|
</div>
|
|
<div class="md:w-1/2 md:pl-12"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="process-2" class="py-20 relative bg-slate-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="mb-16">
|
|
<h2 class="text-3xl font-bold text-slate-900 sm:text-4xl">开发全流程规范</h2>
|
|
<p class="mt-4 text-lg text-slate-600">从需求到上线，每一步都有章可循，确保交付质量。</p>
|
|
</div>
|
|
|
|
<!-- 流程步骤 -->
|
|
<div class="space-y-12 relative">
|
|
<!-- 连接线背景 -->
|
|
<div class="absolute left-8 top-0 bottom-0 w-0.5 bg-slate-200 hidden md:block"></div>
|
|
|
|
<!-- Phase 1 -->
|
|
<div class="relative md:pl-24 flex flex-col md:flex-row gap-8 group">
|
|
<div class="absolute left-0 top-0 w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xl shadow-lg z-10 border-4 border-slate-50">
|
|
01
|
|
</div>
|
|
<div class="w-full md:w-1/3">
|
|
<h3 class="text-2xl font-bold text-slate-900 mb-2">需求与设计阶段</h3>
|
|
<p class="text-slate-500 text-sm font-mono">DISCOVERY & DESIGN</p>
|
|
</div>
|
|
<div class="flex-1 glass-card p-6 rounded-xl border-l-4 border-blue-600 bg-white">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 mb-2 flex items-center gap-2">
|
|
<i class="fa-solid fa-clipboard-list text-blue-500"></i> 需求澄清
|
|
</h4>
|
|
<ul class="text-slate-600 space-y-1 text-sm list-disc list-inside">
|
|
<li>输出《需求规格说明书》</li>
|
|
<li>明确核心功能、边界条件</li>
|
|
<li>确定性能与兼容性指标</li>
|
|
<li>组织多方评审会闭环</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 mb-2 flex items-center gap-2">
|
|
<i class="fa-solid fa-drafting-compass text-blue-500"></i> 技术设计
|
|
</h4>
|
|
<ul class="text-slate-600 space-y-1 text-sm list-disc list-inside">
|
|
<li>架构选型与风险预案</li>
|
|
<li>数据库表结构设计</li>
|
|
<li>接口定义 (RESTful/GraphQL)</li>
|
|
<li>核心算法逻辑文档化</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 2 -->
|
|
<div class="relative md:pl-24 flex flex-col md:flex-row gap-8 group">
|
|
<div class="absolute left-0 top-0 w-16 h-16 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold text-xl shadow-lg z-10 border-4 border-slate-50">
|
|
02
|
|
</div>
|
|
<div class="w-full md:w-1/3">
|
|
<h3 class="text-2xl font-bold text-slate-900 mb-2">编码实现阶段</h3>
|
|
<p class="text-slate-500 text-sm font-mono">CODING & IMPLEMENTATION</p>
|
|
</div>
|
|
<div class="flex-1 space-y-6">
|
|
<!-- Sub-cards for coding standards -->
|
|
<div class="glass-card p-6 rounded-xl border-t-4 border-indigo-500 bg-white">
|
|
<h4 class="font-bold text-slate-800 mb-4"><i class="fa-solid fa-terminal mr-2"></i>通用编码规范</h4>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full text-sm text-left text-slate-600">
|
|
<thead class="text-xs text-slate-700 uppercase bg-slate-100">
|
|
<tr>
|
|
<th class="px-4 py-3 rounded-l-lg">维度</th>
|
|
<th class="px-4 py-3 rounded-r-lg">规范要求</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="bg-white border-b hover:bg-slate-50">
|
|
<td class="px-4 py-3 font-medium text-slate-900">命名</td>
|
|
<td class="px-4 py-3">见名知意，拒绝拼音。类名大驼峰，常量全大写。</td>
|
|
</tr>
|
|
<tr class="bg-white border-b hover:bg-slate-50">
|
|
<td class="px-4 py-3 font-medium text-slate-900">注释</td>
|
|
<td class="px-4 py-3">核心类/方法必写注释，复杂逻辑加行注释。</td>
|
|
</tr>
|
|
<tr class="bg-white border-b hover:bg-slate-50">
|
|
<td class="px-4 py-3 font-medium text-slate-900">安全</td>
|
|
<td class="px-4 py-3">防SQL注入、XSS，敏感数据加密，接口鉴权。</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass-card p-6 rounded-xl border-t-4 border-indigo-500 bg-white">
|
|
<h4 class="font-bold text-slate-800 mb-4"><i class="fa-solid fa-code-branch mr-2"></i>Git 版本控制</h4>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
|
<div class="bg-slate-50 p-3 rounded">
|
|
<strong class="text-indigo-600 block mb-1">分支策略</strong>
|
|
<p class="text-slate-600">master (生产) / develop (开发) / feature-xxx (功能) / hotfix-xxx (紧急修复)</p>
|
|
</div>
|
|
<div class="bg-slate-50 p-3 rounded">
|
|
<strong class="text-indigo-600 block mb-1">提交规范</strong>
|
|
<p class="text-slate-600">feat/fix/docs/style/refactor... 例如: `feat(user): 实现登录`</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 3 -->
|
|
<div class="relative md:pl-24 flex flex-col md:flex-row gap-8 group">
|
|
<div class="absolute left-0 top-0 w-16 h-16 rounded-full bg-cyan-600 text-white flex items-center justify-center font-bold text-xl shadow-lg z-10 border-4 border-slate-50">
|
|
03
|
|
</div>
|
|
<div class="w-full md:w-1/3">
|
|
<h3 class="text-2xl font-bold text-slate-900 mb-2">测试与验收</h3>
|
|
<p class="text-slate-500 text-sm font-mono">TESTING & ACCEPTANCE</p>
|
|
</div>
|
|
<div class="flex-1 glass-card p-6 rounded-xl border-r-4 border-cyan-600 bg-white">
|
|
<div class="flex flex-wrap gap-3">
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-semibold">自测 (开发完成)</span>
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-semibold">单元测试 (>70%)</span>
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-semibold">集成测试 (联调)</span>
|
|
<span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-semibold">验收 (产品/客户)</span>
|
|
</div>
|
|
<p class="mt-4 text-slate-600 text-sm">Bug修复需及时回归，验收通过输出报告方可进入发布。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 4 -->
|
|
<div class="relative md:pl-24 flex flex-col md:flex-row gap-8 group">
|
|
<div class="absolute left-0 top-0 w-16 h-16 rounded-full bg-emerald-600 text-white flex items-center justify-center font-bold text-xl shadow-lg z-10 border-4 border-slate-50">
|
|
04
|
|
</div>
|
|
<div class="w-full md:w-1/3">
|
|
<h3 class="text-2xl font-bold text-slate-900 mb-2">发布与运维</h3>
|
|
<p class="text-slate-500 text-sm font-mono">DEPLOYMENT & OPS</p>
|
|
</div>
|
|
<div class="flex-1 glass-card p-6 rounded-xl border-b-4 border-emerald-600 bg-white">
|
|
<ul class="space-y-3 text-sm text-slate-600">
|
|
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-emerald-500 mt-1"></i> 输出发布清单与回滚方案</li>
|
|
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-emerald-500 mt-1"></i> 非核心时段发布，数据/代码备份</li>
|
|
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-emerald-500 mt-1"></i> 灰度发布策略，实时监控日志与资源</li>
|
|
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-emerald-500 mt-1"></i> 沉淀部署文档与运维手册</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 5 -->
|
|
<div class="relative md:pl-24 flex flex-col md:flex-row gap-8 group">
|
|
<div class="absolute left-0 top-0 w-16 h-16 rounded-full bg-purple-600 text-white flex items-center justify-center font-bold text-xl shadow-lg z-10 border-4 border-slate-50">
|
|
05
|
|
</div>
|
|
<div class="w-full md:w-1/3">
|
|
<h3 class="text-2xl font-bold text-slate-900 mb-2">复盘与优化</h3>
|
|
<p class="text-slate-500 text-sm font-mono">REVIEW & OPTIMIZE</p>
|
|
</div>
|
|
<div class="flex-1 glass-card p-6 rounded-xl border-l-4 border-purple-600 bg-white">
|
|
<p class="text-slate-600 text-sm mb-4">迭代结束不等于项目结束。</p>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center">
|
|
<div class="bg-purple-50 p-3 rounded-lg">
|
|
<i class="fa-solid fa-lightbulb text-purple-600 text-xl mb-2"></i>
|
|
<div class="font-bold text-slate-800 text-sm">亮点总结</div>
|
|
</div>
|
|
<div class="bg-red-50 p-3 rounded-lg">
|
|
<i class="fa-solid fa-bug text-red-600 text-xl mb-2"></i>
|
|
<div class="font-bold text-slate-800 text-sm">问题归因</div>
|
|
</div>
|
|
<div class="bg-green-50 p-3 rounded-lg">
|
|
<i class="fa-solid fa-arrow-trend-up text-green-600 text-xl mb-2"></i>
|
|
<div class="font-bold text-slate-800 text-sm">改进措施</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="collaboration" class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-slate-900 sm:text-4xl mb-6">无缝团队协作体系</h2>
|
|
<p class="text-lg text-slate-600 mb-8">
|
|
我们通过高频沟通、严格的代码评审和统一的知识库，打破信息孤岛，让团队效能实现 1+1>2。
|
|
</p>
|
|
|
|
<div class="space-y-6">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
|
|
<i class="fa-solid fa-people-group"></i>
|
|
</div>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-lg leading-6 font-medium text-slate-900">每日站会 (10分钟)</h3>
|
|
<p class="mt-2 text-base text-slate-500">同步进度、暴露阻塞、协调资源。拒绝长篇大论，只讲干货。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
|
<i class="fa fa-code"></i>
|
|
</div>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-lg leading-6 font-medium text-slate-900">严格代码评审 (CR)</h3>
|
|
<p class="mt-2 text-base text-slate-500">对事不对人，聚焦逻辑正确性、性能与安全。每行合并代码至少经过一双眼睛。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-cyan-500 text-white">
|
|
<i class="fa-solid fa-book"></i>
|
|
</div>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-lg leading-6 font-medium text-slate-900">统一文档与知识分享</h3>
|
|
<p class="mt-2 text-base text-slate-500">核心文档存储在知识库，接口文档自动生成。定期技术分享，拒绝“单点知识壁垒”。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<!-- 抽象的协作示意图 -->
|
|
<div class="aspect-square bg-slate-50 rounded-full flex items-center justify-center relative border border-slate-100">
|
|
<div class="absolute inset-0 rounded-full border-4 border-dashed border-slate-200 animate-spin-slow"></div>
|
|
|
|
<!-- Center Node -->
|
|
<div class="w-24 h-24 bg-slate-900 rounded-full flex items-center justify-center text-white text-2xl shadow-xl z-10">
|
|
<i class="fa-solid fa-code-branch"></i>
|
|
</div>
|
|
|
|
<!-- Satellite Nodes (已修改尺寸和图标大小) -->
|
|
<div class="absolute top-10 left-1/2 -translate-x-1/2 w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-600 text-3xl border border-slate-100">
|
|
<i class="fa-brands fa-git-alt"></i>
|
|
</div>
|
|
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center text-indigo-600 text-3xl border border-slate-100">
|
|
<i class="fa-solid fa-comments"></i>
|
|
</div>
|
|
<div class="absolute left-10 top-1/2 -translate-y-1/2 w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center text-cyan-600 text-3xl border border-slate-100">
|
|
<i class="fa-solid fa-file-code"></i>
|
|
</div>
|
|
<div class="absolute right-10 top-1/2 -translate-y-1/2 w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-600 text-3xl border border-slate-100">
|
|
<i class="fa-solid fa-server"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 核心优势 -->
|
|
<section id="advantages" class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-col md:flex-row items-center gap-12">
|
|
<div class="md:w-1/2">
|
|
<h2 class="text-3xl font-bold text-slate-900 mb-6">为什么选择“协同筑码”工作法？</h2>
|
|
<p class="text-slate-500 mb-8 leading-relaxed">
|
|
传统开发往往陷入“进度赶不上变化、代码质量不可控、新人上手难”的困境。我们的方法论旨在从根本上解决这些痛点，通过标准化流程实现技术与业务的完美融合。
|
|
</p>
|
|
|
|
<div class="space-y-6">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0 mt-1">
|
|
<div class="flex items-center justify-center h-10 w-10 rounded-full bg-blue-100 text-primary">
|
|
<i class="fas fa-tachometer-alt"></i>
|
|
</div>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h4 class="text-lg font-bold text-slate-900">显著提升交付效率</h4>
|
|
<p class="text-slate-500 mt-1 text-sm">增量迭代模式配合自动化工具链，减少重复劳动，让开发专注于核心逻辑。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<div class="flex-shrink-0 mt-1">
|
|
<div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-100 text-secondary">
|
|
<i class="fas fa-project-diagram"></i>
|
|
</div>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h4 class="text-lg font-bold text-slate-900">降低项目风险</h4>
|
|
<p class="text-slate-500 mt-1 text-sm">通过代码评审、单元测试和灰度发布机制，提前发现并规避90%的潜在故障。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<div class="flex-shrink-0 mt-1">
|
|
<div class="flex items-center justify-center h-10 w-10 rounded-full bg-sky-100 text-accent">
|
|
<i class="fas fa-layer-group"></i>
|
|
</div>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h4 class="text-lg font-bold text-slate-900">沉淀团队资产</h4>
|
|
<p class="text-slate-500 mt-1 text-sm">将个人经验转化为团队文档和通用组件库，避免因人员流动导致的技术断层。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:w-1/2 relative">
|
|
<!-- 装饰卡片 -->
|
|
<div class="absolute top-10 right-10 w-64 h-64 bg-blue-50 rounded-full blur-3xl -z-10"></div>
|
|
|
|
<div class="bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl p-8 border border-slate-200 shadow-xl">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h5 class="font-bold text-slate-700">代码质量趋势 (示例)</h5>
|
|
<span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">+24% 优化</span>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<div class="flex justify-between text-xs mb-1">
|
|
<span class="text-slate-500">代码覆盖率</span>
|
|
<span class="text-slate-700 font-bold">85%</span>
|
|
</div>
|
|
<div class="w-full bg-slate-200 rounded-full h-2">
|
|
<div class="bg-primary h-2 rounded-full" style="width: 85%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-xs mb-1">
|
|
<span class="text-slate-500">Bug 修复率 (SLA)</span>
|
|
<span class="text-slate-700 font-bold">98%</span>
|
|
</div>
|
|
<div class="w-full bg-slate-200 rounded-full h-2">
|
|
<div class="bg-secondary h-2 rounded-full" style="width: 98%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-xs mb-1">
|
|
<span class="text-slate-500">交付准时率</span>
|
|
<span class="text-slate-700 font-bold">95%</span>
|
|
</div>
|
|
<div class="w-full bg-slate-200 rounded-full h-2">
|
|
<div class="bg-emerald-500 h-2 rounded-full" style="width: 95%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 pt-6 border-t border-slate-200 text-center">
|
|
<p class="text-sm text-slate-400">数据基于最近3个迭代周期统计</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 团队协作与场景适配 -->
|
|
<section class="py-20 bg-slate-50 border-t border-slate-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl font-bold text-slate-900">灵活适配不同场景</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- 小型项目 -->
|
|
<div class="bg-white p-8 rounded-xl shadow-sm border border-slate-200">
|
|
<div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 mb-4">
|
|
<i class="fas fa-feather-alt"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-slate-900 mb-2">小型项目</h3>
|
|
<p class="text-sm text-slate-500 mb-4">1-3人 | 周期 < 1个月</p>
|
|
<p class="text-sm text-slate-600 leading-relaxed">
|
|
简化设计文档（用脑图/流程图），合并部分评审环节。重点保证功能可用、代码可维护。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 中型项目 -->
|
|
<div class="bg-white p-8 rounded-xl shadow-md border-t-4 border-primary transform md:-translate-y-4">
|
|
<div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-primary mb-4">
|
|
<i class="fas fa-cubes"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-slate-900 mb-2">中型项目</h3>
|
|
<p class="text-sm text-slate-500 mb-4">3-10人 | 周期 1-6个月</p>
|
|
<p class="text-sm text-slate-600 leading-relaxed">
|
|
<strong class="text-primary">严格执行</strong>分支规范、代码评审、测试流程。重点控制模块耦合、迭代节奏。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 大型项目 -->
|
|
<div class="bg-white p-8 rounded-xl shadow-sm border border-slate-200">
|
|
<div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 mb-4">
|
|
<i class="fas fa-city"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-slate-900 mb-2">大型项目</h3>
|
|
<p class="text-sm text-slate-500 mb-4">10人+ | 周期 > 6个月</p>
|
|
<p class="text-sm text-slate-600 leading-relaxed">
|
|
引入架构师角色，拆分子团队。强化集成测试、灰度发布，建立完善的监控告警体系。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 邀请加入 -->
|
|
<section id="join" class="py-24 relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-slate-900 to-primary"></div>
|
|
<!-- 粒子背景模拟 -->
|
|
<div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 30px 30px;"></div>
|
|
|
|
<div class="max-w-4xl mx-auto px-4 relative z-10 text-center">
|
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6">准备加入我们了吗？</h2>
|
|
<p class="text-blue-100 text-lg mb-10 max-w-2xl mx-auto">
|
|
银河锋锐致力于打造高质量、高效率的软件交付标准。如果你认同“协同筑码”的理念，渴望在一个规范、开放、技术驱动的团队中成长，我们诚挚邀请你加入。
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
|
<a href="https://invite.gvsds.com/Apply/" target="_blank" class="px-10 py-4 bg-white text-primary font-bold rounded-lg hover:bg-blue-50 transition-colors shadow-xl shadow-blue-900/50 flex items-center justify-center gap-2">
|
|
<i class="fas fa-envelope"></i>
|
|
投递简历
|
|
</a>
|
|
<a href="mailto:terminexus@gvsds.com" class="px-10 py-4 bg-transparent border border-blue-300 text-white font-bold rounded-lg hover:bg-blue-900/30 transition-colors flex items-center justify-center gap-2">
|
|
<i class="fab fa-weixin"></i>
|
|
联系咨询
|
|
</a>
|
|
</div>
|
|
<p class="mt-8 text-blue-300/60 text-sm">
|
|
* 我们使用 Jira, GitLab, SonarQube 等工具支撑这套方法论
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div> |