senlinai/agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(site): add official product landing page

Browse Source
This commit is contained in:
yanweidong
2026-07-24 18:12:14 +08:00
parent 127dc04795
commit 141b8650eb
9 changed files with 268 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/site/assets/ai-session.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 KiB

BIN
apps/site/assets/documents.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
apps/site/assets/explore.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 478 KiB

10
apps/site/assets/senlinai-icon.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
<title>森林AI 图标</title>
<rect x="4" y="4" width="120" height="120" rx="28" fill="#165DFF"/>
<path d="M64 23C43 23 27 40 27 61c0 13 7 24 17 30h40c10-6 17-17 17-30 0-21-16-38-37-38Z" fill="#F4F8FF"/>
<path d="M64 99V65M64 76 47 61M64 82l18-16M64 68l12-13" fill="none" stroke="#F4F8FF" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>
<path d="M42 58c6-15 29-22 45-7M39 69c12-11 38-13 50 2M48 78c9-5 24-6 33-1" fill="none" stroke="#165DFF" stroke-linecap="round" stroke-width="5"/>
<circle cx="47" cy="61" r="6" fill="#14B8A6"/>
<circle cx="76" cy="55" r="6" fill="#60A5FA"/>
<circle cx="82" cy="66" r="6" fill="#A7F3D0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 731 B

BIN
apps/site/assets/workspace.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

39
apps/site/design-qa.md Normal file
View File

@@ -0,0 +1,39 @@
# Design QA
## Comparison target
- Source visual truth: `C:\Users\david\.codex\generated_images\019f92c1-c086-7b62-9e3e-8942418c08bb\exec-92a2158c-b865-4c30-a1af-bd75a8410bd2.png` (the selected final design, option 1).
- Supporting product references: `docs/screen/login.png`, `docs/screen/workspace.png`, `docs/screen/export.png`, `docs/screen/p3.png`, and `docs/screen/p4.png`.
- Intended implementation: `apps/site/index.html` at a desktop viewport matching the selected long-form landing page.
- Implementation screenshot: unavailable.
## Evidence and state
- Source assets were opened and inspected before implementation.
- The page uses the supplied official logo and product screenshots rather than recreated logo or product-preview artwork.
- Primary interactions in code: “下载” scrolls to the download section; “WEB 登录” links to `https://agent.senlin.ai`.
- Static resource validation passed: all six referenced assets exist and the WEB login URL is present.
- Backend tests and the existing `web_v1` production build passed.
## Required fidelity surfaces
- Fonts and typography: implemented with the existing Chinese system-font stack, a high-contrast display hierarchy, and compact utility text aligned with the source system.
- Spacing and layout rhythm: implemented as an 1440px-centered desktop grid with a left text / right product-preview hero and responsive single-column fallback.
- Colors and visual tokens: uses the source product’s cobalt `#165DFF`, pale gray workspace surfaces, thin blue-gray separators, and navy footer/status treatment.
- Image quality and asset fidelity: uses supplied SVG logo and supplied product captures for workbench, exploration, documents, and AI conversation.
- Copy and content: includes project context, exploration data, project documents, expert AI conversations, private deployment, and human confirmation.
## Findings
- [P1] Browser-rendered visual comparison is unavailable.
- Evidence: the in-app browser could not initialize in this environment because of a system path error, so no implementation screenshot or same-viewport composite comparison could be captured.
- Impact: typography, crop, spacing and responsive behavior have not been verified against the selected visual target in a browser.
- Fix: restore in-app browser access, capture the homepage at the selected desktop viewport, compare it side-by-side with the source visual, and resolve any P0/P1/P2 differences.
## Comparison history
- Initial pass: blocked before browser capture; no visual comparison iteration is available.
## Final result
final result: blocked

105
apps/site/index.html Normal file
View File

@@ -0,0 +1,105 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="森林AI：以项目为中心的私有化智能工作台。" />
<title>森林AI · 项目驱动的智能工作台</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header class="site-header">
<a class="brand" href="#top" aria-label="森林AI首页">
<img src="./assets/senlinai-icon.svg" alt="" width="34" height="34" />
<span>森林AI</span>
</a>
<nav aria-label="主导航">
<a class="download-link" href="#download">下载</a>
<a class="login-link" href="https://agent.senlin.ai">WEB 登录</a>
</nav>
</header>
<main id="top">
<section class="hero section-shell">
<div class="hero-copy">
<p class="eyebrow">私有部署 · 团队协作 · 智能决策</p>
<h1>把工作收进项目，<br />用 AI 给出建议，<br />由人来确认结果</h1>
<p class="hero-description">森林AI 面向知识工作者与内部团队，将计划、探索数据、资料和专家对话沉淀在同一个项目空间。</p>
<div class="hero-actions">
<a class="button button-primary" href="#download">下载客户端</a>
<a class="text-action" href="https://agent.senlin.ai">WEB 登录 <span aria-hidden="true">→</span></a>
</div>
<p class="hero-note">私有部署，数据自有，安全可控</p>
</div>
<div class="hero-product" aria-label="森林AI统一工作台预览">
<img src="./assets/workspace.png" alt="森林AI统一工作台，展示项目、计划、AI 会话与知识资料" />
</div>
</section>
<section class="context-section section-shell">
<div class="section-heading">
<p class="section-index">01</p>
<h2>项目即上下文，<br />让所有信息回到同一处。</h2>
<p>计划、任务、笔记、资料和对话始终归属于项目。团队不必在分散工具间反复寻找背景，工作进展与知识沉淀清晰可追溯。</p>
</div>
<div class="context-points">
<article><span>项目空间</span><p>聚合目标、计划与工作动态。</p></article>
<article><span>统一工作台</span><p>跨项目掌握待办与关键进展。</p></article>
<article><span>资料可追溯</span><p>让每一份内容保留明确归属。</p></article>
</div>
</section>
<section class="showcase section-shell">
<div class="showcase-image data-preview-grid">
<figure>
<img src="./assets/explore.png" alt="森林AI探索页面，集中浏览多来源数据并沉淀到项目" />
<figcaption>探索数据</figcaption>
</figure>
<figure>
<img src="./assets/documents.png" alt="森林AI项目笔记资料页面，集中管理项目内文档" />
<figcaption>项目资料</figcaption>
</figure>
</div>
<div class="showcase-copy">
<p class="section-index">02</p>
<h2>探索信息，<br />沉淀为项目资料。</h2>
<p>从多个外部数据源集中浏览信息，将值得保留的内容沉淀到项目。探索不止是阅读，更是为下一步决策建立可靠的资料基础。</p>
<dl>
<div><dt>探索数据</dt><dd>按来源浏览与筛选，保留信息出处。</dd></div>
<div><dt>笔记资料</dt><dd>文档、附件和 Markdown 笔记随项目持续积累。</dd></div>
</dl>
</div>
</section>
<section class="showcase showcase-reversed section-shell">
<div class="showcase-copy">
<p class="section-index">03</p>
<h2>与专家 AI 对话，<br />建议由人确认。</h2>
<p>选择合适的专业角色，在项目上下文中获得分析与建议。AI 输出先作为候选草稿呈现，只有人工确认后才会成为正式任务、笔记或资料。</p>
<div class="workflow" aria-label="受控的 AI 工作流">
<span>收集</span><i aria-hidden="true"></i><span>建议</span><i aria-hidden="true"></i><strong>确认</strong>
</div>
</div>
<div class="showcase-image">
<img src="./assets/ai-session.png" alt="森林AI专家选择与项目内 AI 会话界面" />
</div>
</section>
<section class="download-section section-shell" id="download">
<div>
<p class="eyebrow">在你的环境中，安全使用专业 AI</p>
<h2>私有部署，数据自有，<br />团队协作始终可控。</h2>
</div>
<div class="download-actions">
<a class="button button-primary" href="https://agent.senlin.ai">WEB 登录</a>
<p>客户端下载包由部署管理员提供；已有工作台可直接登录 WEB 版本。</p>
</div>
</section>
</main>
<footer class="site-footer">
<div class="brand"><img src="./assets/senlinai-icon.svg" alt="" width="24" height="24" /><span>森林AI</span></div>
<span>© 森林AI</span>
</footer>
</body>
</html>

107
apps/site/styles.css Normal file
View File

@@ -0,0 +1,107 @@
:root {
color: #17233a;
background: #ffffff;
font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #fff; }
a { color: inherit; text-decoration: none; }
.site-header {
align-items: center;
background: rgba(255, 255, 255, .96);
border-bottom: 1px solid #edf0f5;
display: flex;
height: 76px;
justify-content: space-between;
padding: 0 clamp(24px, 5vw, 80px);
position: sticky;
top: 0;
z-index: 5;
}
.brand { align-items: center; display: inline-flex; font-size: 20px; font-weight: 750; gap: 9px; letter-spacing: -.5px; }
.brand img { border-radius: 9px; display: block; }
nav { align-items: center; display: flex; gap: 16px; font-size: 15px; font-weight: 650; }
.download-link { border: 1px solid #bad0ff; border-radius: 6px; color: #165dff; padding: 10px 18px; }
.login-link { background: #165dff; border-radius: 6px; color: white; padding: 11px 19px; }
.download-link:hover, .text-action:hover { background: #edf4ff; }
.login-link:hover, .button-primary:hover { background: #0e4cda; }
.section-shell { margin: 0 auto; max-width: 1440px; padding-left: clamp(24px, 5vw, 80px); padding-right: clamp(24px, 5vw, 80px); }
.hero { display: grid; gap: clamp(36px, 6vw, 92px); grid-template-columns: minmax(300px, .82fr) minmax(540px, 1.3fr); min-height: 720px; overflow: hidden; padding-bottom: 80px; padding-top: clamp(62px, 9vw, 130px); }
.hero-copy { align-self: center; max-width: 460px; }
.eyebrow, .section-index { color: #165dff; font-size: 14px; font-weight: 750; letter-spacing: .03em; margin: 0 0 22px; }
h1, h2 { color: #13203a; letter-spacing: -.065em; margin: 0; }
h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1.16; }
h2 { font-size: clamp(32px, 3.2vw, 49px); line-height: 1.2; }
.hero-description, .section-heading > p:not(.section-index), .showcase-copy > p:not(.section-index) { color: #5f6d84; font-size: 17px; line-height: 1.9; margin: 28px 0; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 25px; margin-top: 36px; }
.button { border-radius: 6px; display: inline-flex; font-size: 16px; font-weight: 700; justify-content: center; padding: 15px 27px; transition: background .18s ease; }
.button-primary { background: #165dff; box-shadow: 0 10px 24px rgba(22, 93, 255, .18); color: #fff; }
.text-action { color: #165dff; font-size: 16px; font-weight: 700; padding: 12px 4px; }
.text-action span { font-size: 22px; margin-left: 4px; vertical-align: -1px; }
.hero-note { color: #68768d; font-size: 14px; margin: 31px 0 0; }
.hero-product { align-self: center; background: #f6f9ff; border: 1px solid #e7eefb; border-radius: 12px; box-shadow: 0 28px 55px rgba(39, 75, 130, .13); overflow: hidden; }
.hero-product img, .showcase-image img { display: block; height: auto; width: 100%; }
.context-section { border-top: 1px solid #edf0f5; display: grid; gap: 70px; grid-template-columns: minmax(300px, .9fr) minmax(450px, 1.1fr); padding-bottom: 120px; padding-top: 120px; }
.section-heading > p:not(.section-index) { max-width: 510px; }
.context-points { border-left: 1px solid #dce6f5; display: grid; grid-template-columns: repeat(3, 1fr); padding-left: 34px; }
.context-points article { padding: 7px 28px 10px; }
.context-points article + article { border-left: 1px solid #e8edf5; }
.context-points span { color: #1c2c49; font-size: 18px; font-weight: 750; }
.context-points p { color: #728098; font-size: 14px; line-height: 1.75; }
.showcase { align-items: center; background: #f7f9fd; display: grid; gap: clamp(40px, 7vw, 110px); grid-template-columns: minmax(420px, 1.15fr) minmax(300px, .85fr); margin-bottom: 0; max-width: none; padding-bottom: 108px; padding-top: 108px; }
.showcase-image { background: #fff; border: 1px solid #e4eaf3; box-shadow: 0 22px 48px rgba(30, 55, 95, .09); overflow: hidden; }
.data-preview-grid { display: grid; gap: 12px; grid-template-columns: 1.22fr .78fr; padding: 12px; }
.data-preview-grid figure { margin: 0; min-width: 0; }
.data-preview-grid figcaption { color: #61718a; font-size: 13px; font-weight: 700; padding: 9px 2px 1px; }
.showcase-copy { max-width: 460px; }
.showcase-copy dl { border-top: 1px solid #dce4ef; margin: 32px 0 0; }
.showcase-copy dl div { border-bottom: 1px solid #dce4ef; padding: 15px 0; }
dt { color: #1b2a47; font-size: 16px; font-weight: 750; }
dd { color: #718097; font-size: 14px; margin: 7px 0 0; }
.showcase-reversed { background: #fff; grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr); }
.workflow { align-items: center; display: flex; gap: 12px; margin-top: 34px; }
.workflow span, .workflow strong { border: 1px solid #dbe5f5; border-radius: 5px; color: #587093; font-size: 14px; padding: 9px 13px; }
.workflow strong { background: #165dff; border-color: #165dff; color: #fff; }
.workflow i { background: #9ebdff; height: 1px; width: 22px; }
.download-section { align-items: center; background: #eff5ff; display: flex; justify-content: space-between; max-width: none; padding-bottom: 88px; padding-top: 88px; }
.download-section h2 { font-size: clamp(31px, 3.2vw, 47px); }
.download-actions { max-width: 315px; }
.download-actions p { color: #6c7b92; font-size: 14px; line-height: 1.7; margin: 16px 0 0; }
.site-footer { align-items: center; background: #13213a; color: #fff; display: flex; font-size: 13px; justify-content: space-between; padding: 24px clamp(24px, 5vw, 80px); }
.site-footer .brand { font-size: 15px; }
@media (max-width: 980px) {
.hero, .context-section, .showcase, .showcase-reversed { grid-template-columns: 1fr; }
.hero { min-height: auto; padding-bottom: 74px; }
.hero-copy, .showcase-copy { max-width: 620px; }
.context-section { gap: 36px; }
.context-points { padding-left: 0; }
.showcase { gap: 46px; }
.showcase-reversed .showcase-copy { grid-row: 1; }
}
@media (max-width: 640px) {
.site-header { height: 66px; padding: 0 18px; }
.brand { font-size: 17px; gap: 7px; }
nav { gap: 8px; font-size: 13px; }
.download-link, .login-link { padding: 8px 10px; }
.section-shell { padding-left: 20px; padding-right: 20px; }
.hero { padding-top: 60px; }
h1 { font-size: 43px; }
.context-section, .showcase { padding-bottom: 72px; padding-top: 72px; }
.context-points { border-left: 0; grid-template-columns: 1fr; }
.context-points article { border-bottom: 1px solid #e8edf5; padding: 18px 0; }
.context-points article + article { border-left: 0; }
.download-section { align-items: flex-start; flex-direction: column; gap: 30px; padding-bottom: 64px; padding-top: 64px; }
.workflow { flex-wrap: wrap; }
.data-preview-grid { grid-template-columns: 1fr; }
}