chenchen/heicode-win
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 静态官网与 Docker Compose 本地部署

Browse Source 
- website: 单页落地（愿景、架构、路径、团队范式、生命周期）
- nginx:alpine 镜像与 docker-compose（端口 8888）

Made-with: Cursor
This commit is contained in:
gongzhiyong
2026-04-30 00:38:58 +08:00
parent 0c84dde85b
commit ca6289fab4
7 changed files with 824 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker-compose.yml
+8
View File
@@ -0,0 +1,8 @@
services:
heicode-www:
build:
context: ./website
dockerfile: Dockerfile
ports:
- "8888:80"
restart: unless-stopped
website/.dockerignore
+2
View File
@@ -0,0 +1,2 @@
Dockerfile
.dockerignore
website/Dockerfile
+3
View File
@@ -0,0 +1,3 @@
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY . /usr/share/nginx/html
website/css/styles.css
+466
View File
@@ -0,0 +1,466 @@
:root {
--bg-deep: #0b0f14;
--bg-card: #121920;
--bg-elevated: #1a222d;
--border: rgba(120, 190, 200, 0.15);
--text: #e8eef4;
--muted: #8fa3b8;
--accent: #3dd6c6;
--accent-dim: #2a9d8f;
--warn: #f4a261;
--font-sans: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--radius: 12px;
--shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-sans);
background: var(--bg-deep);
color: var(--text);
line-height: 1.65;
font-size: 16px;
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.wrap {
width: min(1120px, 92vw);
margin-inline: auto;
}
header.site-header {
position: sticky;
top: 0;
z-index: 40;
backdrop-filter: blur(12px);
background: rgba(11, 15, 20, 0.85);
border-bottom: 1px solid var(--border);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 0;
gap: 1rem;
}
.logo {
font-weight: 700;
letter-spacing: -0.03em;
font-size: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text);
}
.logo-mark {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, var(--accent), #2563eb);
display: grid;
place-items: center;
font-size: 0.75rem;
font-weight: 800;
color: #041018;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
align-items: center;
}
nav a {
color: var(--muted);
font-size: 0.95rem;
}
nav a:hover {
color: var(--text);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.55rem 1.1rem;
border-radius: 999px;
font-weight: 600;
font-size: 0.92rem;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s;
}
.btn:active {
transform: scale(0.98);
}
.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-dim));
color: #041018;
}
.btn-primary:hover {
filter: brightness(1.08);
text-decoration: none;
}
.btn-ghost {
background: transparent;
border-color: var(--border);
color: var(--text);
}
.btn-ghost:hover {
border-color: var(--accent);
text-decoration: none;
}
.hero {
padding: 4.5rem 0 3.5rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: -40% -20% auto;
height: 70%;
background: radial-gradient(ellipse at 50% 0%, rgba(61, 214, 198, 0.18), transparent 55%);
pointer-events: none;
}
.hero-grid {
display: grid;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 900px) {
.hero-grid {
grid-template-columns: 1.1fr 0.9fr;
}
}
.hero h1 {
font-size: clamp(2rem, 4.5vw, 3rem);
line-height: 1.15;
letter-spacing: -0.04em;
margin: 0 0 1rem;
}
.lead {
color: var(--muted);
font-size: 1.08rem;
max-width: 36rem;
margin: 0 0 1.5rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.badge-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.badge {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.35rem 0.65rem;
border-radius: 6px;
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--muted);
}
.hero-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem;
box-shadow: var(--shadow);
font-family: var(--font-mono);
font-size: 0.78rem;
line-height: 1.5;
color: #b8c9d9;
}
.hero-panel .comment {
color: #5c6f82;
}
.hero-panel .key {
color: var(--accent);
}
.hero-panel .str {
color: #a5d6ff;
}
section {
padding: 3.5rem 0;
}
section:nth-child(even) {
background: linear-gradient(180deg, rgba(26, 34, 45, 0.35), transparent);
}
.section-title {
font-size: 1.75rem;
margin: 0 0 0.5rem;
letter-spacing: -0.03em;
}
.section-desc {
color: var(--muted);
max-width: 42rem;
margin: 0 0 2rem;
}
.grid-3 {
display: grid;
gap: 1.25rem;
}
@media (min-width: 700px) {
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.35rem;
height: 100%;
}
.card h3 {
margin: 0 0 0.6rem;
font-size: 1.1rem;
}
.card p {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
}
.arch-diagram {
display: grid;
gap: 1rem;
}
@media (min-width: 800px) {
.arch-diagram {
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
}
}
.arch-box {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem;
background: var(--bg-elevated);
}
.arch-box h4 {
margin: 0 0 0.5rem;
font-size: 0.95rem;
color: var(--accent);
}
.arch-box ul {
margin: 0;
padding-left: 1.1rem;
color: var(--muted);
font-size: 0.9rem;
}
.flow {
display: grid;
gap: 1rem;
counter-reset: step;
}
@media (min-width: 750px) {
.flow {
grid-template-columns: repeat(5, 1fr);
}
}
.flow-step {
position: relative;
padding: 1rem;
border-radius: var(--radius);
border: 1px dashed var(--border);
background: rgba(18, 25, 32, 0.6);
}
.flow-step::before {
counter-increment: step;
content: counter(step);
position: absolute;
top: -10px;
left: 12px;
background: var(--bg-deep);
border: 1px solid var(--accent);
color: var(--accent);
width: 26px;
height: 26px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
display: grid;
place-items: center;
}
.flow-step strong {
display: block;
margin-bottom: 0.35rem;
}
.flow-step span {
font-size: 0.85rem;
color: var(--muted);
}
.team-grid {
display: grid;
gap: 1.5rem;
}
@media (min-width: 800px) {
.team-grid {
grid-template-columns: 1fr 1fr;
}
}
.team-block {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-card);
}
.team-head {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem;
}
.team-head h3 {
margin: 0;
font-size: 1.15rem;
}
.team-meta {
font-size: 0.85rem;
color: var(--warn);
font-weight: 600;
}
.team-body {
padding: 1rem 1.25rem 1.25rem;
}
.team-body table {
width: 100%;
border-collapse: collapse;
font-size: 0.82rem;
}
.team-body th,
.team-body td {
text-align: left;
padding: 0.45rem 0.35rem;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.team-body th {
color: var(--muted);
font-weight: 500;
width: 22%;
}
.role-tag {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--accent);
}
.lifecycle {
display: grid;
gap: 0.75rem;
}
@media (min-width: 720px) {
.lifecycle {
grid-template-columns: repeat(3, 1fr);
}
}
.lifecycle .card small {
display: block;
color: var(--accent);
font-weight: 600;
margin-bottom: 0.35rem;
font-size: 0.8rem;
}
.cta {
text-align: center;
padding: 4rem 0 5rem;
}
.cta-box {
border: 1px solid var(--border);
border-radius: calc(var(--radius) + 4px);
padding: 2.5rem 1.5rem;
background: linear-gradient(145deg, rgba(61, 214, 198, 0.08), rgba(37, 99, 235, 0.06));
}
.cta h2 {
margin: 0 0 0.75rem;
font-size: 1.6rem;
}
.cta p {
color: var(--muted);
margin: 0 0 1.25rem;
}
footer.site-footer {
border-top: 1px solid var(--border);
padding: 2rem 0 2.5rem;
color: var(--muted);
font-size: 0.88rem;
}
.footer-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
}
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
z-index: 100;
padding: 0.5rem 1rem;
background: var(--accent);
color: #041018;
}
website/index.html
+316
View File
@@ -0,0 +1,316 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Heicode — 面向团队的智能体软件交付：New API、CLI/Desktop、Agnet 子智能体团队与全生命周期自动化。"
/>
<title>Heicode · 智能体驱动的团队交付</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<a class="skip-link" href="#main">跳到正文</a>
<header class="site-header">
<div class="wrap nav-inner">
<a href="#" class="logo" aria-label="Heicode 首页">
<span class="logo-mark">H</span>
Heicode
</a>
<nav aria-label="主导航">
<ul>
<li><a href="#vision">愿景</a></li>
<li><a href="#architecture">架构</a></li>
<li><a href="#journey">体验路径</a></li>
<li><a href="#teams">团队范式</a></li>
<li><a href="#lifecycle">生命周期</a></li>
<li><a href="#docs">文档</a></li>
</ul>
</nav>
<a class="btn btn-primary" href="#cta">开始使用</a>
</div>
</header>
<main id="main">
<section class="hero">
<div class="wrap hero-grid">
<div>
<div class="badge-row">
<span class="badge">New API</span>
<span class="badge">CLI · Desktop</span>
<span class="badge">Agnet</span>
<span class="badge">多云交付</span>
</div>
<h1>从想法到上线<br />用智能体团队完成整条交付链</h1>
<p class="lead">
Heicode 将<strong>改造后的大模型网关</strong>、<strong>类 Claude Code 的终端与桌面客户端</strong>，以及
<strong>Agnet 平台上的子智能体团队</strong>连成一体：需求、实现、测试、部署与运维在同一范式下可审计、可扩展。
</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#architecture">了解架构</a>
<a class="btn btn-ghost" href="#teams">查看团队模板</a>
</div>
</div>
<aside class="hero-panel" aria-label="集成示意">
<div><span class="comment">// Heicode 集成骨架（示意）</span></div>
<div><span class="key">platform</span>: {</div>
<div>&nbsp;&nbsp;<span class="key">gateway</span>: <span class="str">"new-api"</span>,</div>
<div>&nbsp;&nbsp;<span class="key">client</span>: <span class="str">"cc-haha-cli-desktop"</span>,</div>
<div>&nbsp;&nbsp;<span class="key">agents</span>: <span class="str">"agnet-squads"</span>,</div>
<div>&nbsp;&nbsp;<span class="key">clouds</span>: [<span class="str">"gcp"</span>, <span class="str">"aws"</span>, <span class="str">"azure"</span>]</div>
<div>}</div>
</aside>
</div>
</section>
<section id="vision">
<div class="wrap">
<h2 class="section-title">我们在解决什么问题</h2>
<p class="section-desc">
单一编码插件只能加速「写代码」；Heicode 面向<strong>团队与组织</strong>，把自动化扩展到规格、协作、质量门禁、多云发布与运维迭代，并形成可追溯的产物（文档、日志、多智能体沟通）。
</p>
<div class="grid-3">
<article class="card">
<h3>统一账号与模型策略</h3>
<p>登录改造后的 New API 控制台，管理令牌、配额与渠道策略，终端与桌面客户端与服务端对齐同一身份。</p>
</article>
<article class="card">
<h3>可编排的子智能体团队</h3>
<p>在 Agnet 一键部署瀑布或敏捷模板（5～9 / 3～8 子 Agnet），按角色分工覆盖从需求到上线的闸门。</p>
</article>
<article class="card">
<h3>全生命周期与可审计</h3>
<p>Git 与云资源在策略下自动化；交付物与版本、发布关联，支持多成员协作下的沟通与开发日志沉淀。</p>
</article>
</div>
</div>
</section>
<section id="architecture">
<div class="wrap">
<h2 class="section-title">逻辑架构</h2>
<p class="section-desc">
浏览器与 CLI/Desktop 共用网关能力；Agnet 承载子智能体编排；外部系统（Git、公有云、CI/CD）在最小权限原则下接入。
</p>
<div class="arch-diagram">
<div class="arch-box">
<h4>体验层</h4>
<ul>
<li>官网 / 文档</li>
<li>New API 控制台</li>
<li>CLI · Desktop（Tauri）</li>
</ul>
</div>
<div class="arch-box">
<h4>平台层</h4>
<ul>
<li>改造后的 New API（账号 · 计费 · 中继）</li>
<li>本地服务 / API 路由（cc-haha）</li>
</ul>
</div>
<div class="arch-box">
<h4>执行与基础设施</h4>
<ul>
<li>Agnet：子智能体团队 · 有状态实例</li>
<li>Git · GCP · AWS · Azure</li>
</ul>
</div>
</div>
</div>
</section>
<section id="journey">
<div class="wrap">
<h2 class="section-title">核心用户路径</h2>
<p class="section-desc">从访问官网到持续迭代，目标体验拆成可落地的五步。</p>
<div class="flow">
<div class="flow-step">
<strong>发现</strong>
<span>访问官网，了解范式与下载入口。</span>
</div>
<div class="flow-step">
<strong>登录控制台</strong>
<span>进入改造后的 New API，查看令牌与策略。</span>
</div>
<div class="flow-step">
<strong>安装客户端</strong>
<span>下载 CLI / Desktop，登录后与网关对齐会话。</span>
</div>
<div class="flow-step">
<strong>部署子团队</strong>
<span>在 Agnet 一键拉起瀑布或敏捷子 Agnet 队列。</span>
</div>
<div class="flow-step">
<strong>交付与迭代</strong>
<span>开发、测试、发布、观测与计划任务更新。</span>
</div>
</div>
</div>
</section>
<section id="teams">
<div class="wrap">
<h2 class="section-title">团队范式（子 Agnet）</h2>
<p class="section-desc">
规模设计兼顾协调成本：瀑布强调阶段闸门（最小 5、最大 9）；敏捷强调迭代闭环（最小 3、最大 8）。详细职责见仓库内愿景文档。
</p>
<div class="team-grid">
<div class="team-block">
<div class="team-head">
<h3>瀑布模式</h3>
<span class="team-meta">最小 5 · 最大 9</span>
</div>
<div class="team-body">
<table>
<thead>
<tr>
<th>代号</th>
<th>角色</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="role-tag">WF-BA</span></td>
<td>业务/需求分析师</td>
</tr>
<tr>
<td><span class="role-tag">WF-ARC</span></td>
<td>解决方案架构师</td>
</tr>
<tr>
<td><span class="role-tag">WF-DEV</span></td>
<td>软件工程师（最小配置）</td>
</tr>
<tr>
<td><span class="role-tag">WF-QA</span></td>
<td>测试工程师</td>
</tr>
<tr>
<td><span class="role-tag">WF-REL</span></td>
<td>发布与运维工程师</td>
</tr>
</tbody>
</table>
<p style="margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted)">
最大配置扩展为 PM、前后端分立、安全、文档等专岗 — 详见文档第五节。
</p>
</div>
</div>
<div class="team-block">
<div class="team-head">
<h3>敏捷模式</h3>
<span class="team-meta">最小 3 · 最大 8</span>
</div>
<div class="team-body">
<table>
<thead>
<tr>
<th>代号</th>
<th>角色</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="role-tag">AG-PO</span></td>
<td>产品负责人</td>
</tr>
<tr>
<td><span class="role-tag">AG-DEV</span></td>
<td>软件工程师</td>
</tr>
<tr>
<td><span class="role-tag">AG-QA</span></td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
<p style="margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted)">
最大配置增加 SM、Tech Lead、双轨 Dev、UX、SRE — 超出 8 人等价容量时拆第二支 Squad。
</p>
</div>
</div>
</div>
</div>
</section>
<section id="lifecycle">
<div class="wrap">
<h2 class="section-title">软件生命周期</h2>
<p class="section-desc">同一范式覆盖规格、实现、验证、发布、运维与迭代；敏感操作由策略与人机审批约束。</p>
<div class="lifecycle">
<article class="card">
<small>规格 · 协作</small>
<h3>需求与设计</h3>
<p>PRD、接口契约、风险与非功能需求落档，与子 Agnet 角色对齐。</p>
</article>
<article class="card">
<small>构建 · 质量</small>
<h3>实现与测试</h3>
<p>代码、评审、自动化测试与质量门禁，绑定分支与 CI。</p>
</article>
<article class="card">
<small>发布 · 运维</small>
<h3>部署与迭代</h3>
<p>多云发布、可观测、回滚与 Runbook；计划任务驱动持续迭代。</p>
</article>
</div>
</div>
</section>
<section id="docs">
<div class="wrap">
<h2 class="section-title">文档与参考</h2>
<p class="section-desc">
仓库内维护完整愿景与角色表；外部可参考 Claude Code 生态实践（如 oh-my-claudecode）。Agnet 与 New API 以实际部署环境为准。
</p>
<div class="grid-3">
<article class="card">
<h3>愿景范式（仓库）</h3>
<p><code>docs/vision-heicode-full-stack-agentic-dev.md</code></p>
</article>
<article class="card">
<h3>Oh My Claude Code</h3>
<p>
<a href="https://ohmyclaudecode.com/" rel="noopener noreferrer" target="_blank">ohmyclaudecode.com</a>
— 终端效率实践参考
</p>
</article>
<article class="card">
<h3>本地预览本站</h3>
<p>在项目根目录执行 <code>docker compose up --build</code>，浏览器访问站点端口。</p>
</article>
</div>
</div>
</section>
<section class="cta" id="cta">
<div class="wrap">
<div class="cta-box">
<h2>把「想法」连接到你的平台现实</h2>
<p>
Heicode 正在把网关、客户端与 Agnet 团队揉合成一条可落地的交付链。下一步：冻结账号契约、打通一键部署与状态回传。
</p>
<a class="btn btn-primary" href="#architecture">返回架构</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-row">
<span>© Heicode · 智能体软件交付范式（静态预览站）</span>
<span>本地 Docker 部署 · 仅用于产品与团队对齐</span>
</div>
</footer>
<script src="js/main.js" defer></script>
</body>
</html>
website/js/main.js
+16
View File
@@ -0,0 +1,16 @@
(() => {
const year = document.querySelector("[data-year]");
if (year) year.textContent = String(new Date().getFullYear());
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", (e) => {
const id = anchor.getAttribute("href");
if (!id || id === "#") return;
const el = document.querySelector(id);
if (el) {
e.preventDefault();
el.scrollIntoView({ behavior: "smooth", block: "start" });
}
});
});
})();
website/nginx.conf
+13
View File
@@ -0,0 +1,13 @@
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
gzip on;
gzip_types text/css application/javascript application/json text/plain;
}