JOJO/agent-Specialization
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
2f0b970060
agent-Specialization/website-design/site/index.html
JOJO 39a7a5fc6f chore(website): 归档官网文档内容与设计素材 
- website-content/：官网 10 篇文档内容 + README
- website-design/：官网设计稿、动画实验、预览图与资源
- 根目录官网截图两张
- .gitignore 忽略 website-design/exp/static/dist 构建产物（7.1MB）
2026-09-02 14:38:51 +08:00

285 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Astrion —— 住在你机器上的智能体工作台</title>
<meta name="description" content="Astrion 是一个住在你自己机器上的智能体工作台：普通对话、多智能体团队、工作流与技能包。开源、自托管、数据不出本机。" />
<link rel="stylesheet" href="../shared/astrion-avatar.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- ═══════ 左侧导航栏（产品 activity bar 的同构） ═══════ -->
<nav class="rail" aria-label="页面导航">
<a class="rail-item rail-logo" href="#top" aria-label="回到顶部">
<span class="rail-avatar" id="railAvatar"></span>
<span class="rail-tip">开始</span>
</a>
<a class="rail-item" href="#about" aria-label="这是什么">
<svg viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
<span class="rail-tip">这是什么</span>
</a>
<a class="rail-item" href="#modes" aria-label="行为边界">
<svg viewBox="0 0 24 24"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
<span class="rail-tip">行为边界</span>
</a>
<a class="rail-item" href="#security" aria-label="安全">
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
<span class="rail-tip">安全</span>
</a>
<a class="rail-item" href="#capabilities" aria-label="能力">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
<span class="rail-tip">能力</span>
</a>
<a class="rail-item" href="#install" aria-label="快速上手">
<svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
<span class="rail-tip">快速上手</span>
</a>
<a class="rail-item" href="#docs" aria-label="文档">
<svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
<span class="rail-tip">文档</span>
</a>
<div class="rail-spacer"></div>
<a class="rail-item" href="https://github.com/JOJO6618/astrion" target="_blank" rel="noopener" aria-label="GitHub">
<svg viewBox="0 0 24 24"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
<span class="rail-tip">GitHub</span>
</a>
</nav>
<!-- ═══════ 对话流 ═══════ -->
<main class="thread" id="top">
<!-- 开场：产品新对话引导页的同构 -->
<section class="opening">
<div class="opening-avatar" id="heroAvatar"></div>
<h1 class="opening-line">你好，我是 Astrion。</h1>
<p class="opening-sub">一个住在你机器上的智能体工作台。</p>
<div class="opening-forms">
<span>Web 界面</span>
<span>CLI <em>开发中</em></span>
<span>Android</span>
</div>
<div class="opening-clone">
<code>$ git clone https://github.com/JOJO6618/astrion.git</code>
<button class="copy-btn" id="cloneCopy" aria-label="复制克隆命令">
<svg class="icon-copy" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
<svg class="icon-check" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
</button>
</div>
</section>
<!-- ── 1 这是什么 ── -->
<div class="msg user reveal" id="q1">
<div class="bubble">你是什么？</div>
</div>
<div class="msg ai reveal" id="about">
<div class="msg-avatar" data-avatar></div>
<div class="msg-body">
<p>Astrion 是一个运行在你自己机器上的智能体工作台：普通对话、多智能体团队、工作流与技能包。开源，自托管，数据不出本机——你的对话、文件和密钥都在你自己的磁盘上。</p>
<figure class="shot">
<div class="shot-bar"><i></i><i></i><i></i><span>localhost:8091</span></div>
<img src="../assets/product-main-classic.png" alt="Astrion 主界面（经典主题）" loading="lazy" />
</figure>
<p class="note">上图是它的主界面。左侧栏底行即控制台：对话类型、运行模式、权限、执行环境，一眼可见、一点即切。中间的形象不只是会标——工作、思考、调用工具时都有实时表情。</p>
</div>
</div>
<!-- ── 2 行为边界 ── -->
<div class="msg user reveal" id="q2">
<div class="bubble">和别的智能体有什么不同？</div>
</div>
<div class="msg ai reveal" id="modes">
<div class="msg-avatar" data-avatar></div>
<div class="msg-body">
<p>行为边界被做成四组一眼可见的开关，而不是藏在文档里的注意事项。点一点，看看组合的含义：</p>
<div class="switchboard">
<div class="sw-row" data-group="deploy">
<span class="sw-label">部署模式</span>
<button class="sw-pill on" data-v="host">host</button>
<button class="sw-pill" data-v="docker">docker</button>
</div>
<div class="sw-row" data-group="perm">
<span class="sw-label">权限模式</span>
<button class="sw-pill" data-v="readonly">只读</button>
<button class="sw-pill on" data-v="approval">批准</button>
<button class="sw-pill" data-v="auto">自动审核</button>
<button class="sw-pill" data-v="unrestricted">无限制</button>
</div>
<div class="sw-row" data-group="exec">
<span class="sw-label">执行环境</span>
<button class="sw-pill on" data-v="sandbox">沙箱</button>
<button class="sw-pill" data-v="direct">直连</button>
</div>
<div class="sw-row" data-group="work">
<span class="sw-label">运行模式</span>
<button class="sw-pill on" data-v="plan">计划</button>
<button class="sw-pill" data-v="ask">询问</button>
<button class="sw-pill" data-v="execute">执行</button>
</div>
<pre class="verdict" id="verdict"><code></code></pre>
</div>
<p class="note">四组开关互相正交，唯一例外：计划模式会把权限与执行环境锁定为「只读 + 沙箱」，批准计划后自动转入执行。</p>
</div>
</div>
<!-- ── 3 安全 ── -->
<div class="msg user reveal" id="q3">
<div class="bubble">安全吗？</div>
</div>
<div class="msg ai reveal" id="security">
<div class="msg-avatar" data-avatar></div>
<div class="msg-body">
<p>分两层说。第一层是命令隔离，不同平台能提供的强度不同——如实列出：</p>
<div class="table-wrap">
<table>
<thead><tr><th>平台</th><th>沙箱实现</th><th>安全水位</th></tr></thead>
<tbody>
<tr><td>Windows</td><td>WSL2</td><td><i class="dot ok"></i>完全数据隔离，需先安装 WSL2</td></tr>
<tr><td>macOS</td><td>sandbox-exec</td><td><i class="dot warn"></i>能限制写入；文件系统全局可读，防不住数据泄露</td></tr>
<tr><td>Linux</td><td>bwrap + seccomp</td><td><i class="dot untested"></i>尚未实测，请勿依赖其隔离性</td></tr>
</tbody>
</table>
</div>
<p>第二层是你的资产，与平台无关：</p>
<ul class="plain-list">
<li><strong>版本控制</strong>——每条你发出的消息打一个检查点，随时回溯。浅备份只追踪 write_file / edit_file 编辑过的文件。</li>
<li><strong>修改留痕</strong>——每次编辑落盘一份标准 diff，<code>git apply</code> 重做，<code>git apply -R</code> 撤销。</li>
<li><strong>Git 状态栏</strong>——仓库状态实时可见，AI 的改动随时可查。</li>
</ul>
</div>
</div>
<!-- ── 4 能力 ── -->
<div class="msg user reveal" id="q4">
<div class="bubble">会什么？</div>
</div>
<div class="msg ai reveal" id="capabilities">
<div class="msg-avatar" data-avatar></div>
<div class="msg-body">
<ul class="cap-list">
<li>
<strong>多智能体团队</strong>
<span>Team Leader 带领一支有角色的团队：全栈工程师、代码评审、调研员、UI 操作、头脑风暴。分工协作、互相请教，每一步都向你汇报。预置 5 个角色，也可以自己写。</span>
</li>
<li>
<strong>快捷窗口</strong>
<span>对话区右侧的五个看板：待办、子智能体、后台命令、文件记录、工作流。任务进展、产物收取、失控终止，抬手就够到。</span>
</li>
<li>
<strong>工作流与技能包</strong>
<span>把流程沉淀为工作流，把经验沉淀为 Skill。内置 4 个工作流、12 个技能包；用得越久，它越懂你的章法。</span>
</li>
<li>
<strong>目标模式 <em class="beta">Beta</em></strong>
<span>给出一个长期目标，它自动一轮一轮推进：每轮自我评估，可配审核智能体把关，触顶或达成才停。</span>
</li>
<li>
<strong>MCP 扩展</strong>
<span>通过 Model Context Protocol 接入外部工具服务；host 模式下对它说一句「帮我配置 xxx」即可装好。</span>
</li>
<li>
<strong>实时终端</strong>
<span>对话里直接跑命令、看输出，终端就在手边——这是效率设计，不是安全边界，安全由上面的开关负责。</span>
</li>
</ul>
<figure class="shot shot-placeholder">
<span>截图待补：多智能体团队运行中</span>
</figure>
</div>
</div>
<!-- ── 5 快速上手 ── -->
<div class="msg user reveal" id="q5">
<div class="bubble">怎么开始？</div>
</div>
<div class="msg ai reveal" id="install">
<div class="msg-avatar" data-avatar></div>
<div class="msg-body">
<p>三分钟。环境要求：Python 3.10+、Node.js 18+；docker 模式另需 Docker。</p>
<div class="install">
<div class="install-tabs">
<button class="install-tab on" data-tab="host">host 模式</button>
<button class="install-tab" data-tab="docker">docker 模式</button>
</div>
<div class="install-pane" data-pane="host">
<pre><code># 1. 克隆
git clone https://github.com/JOJO6618/astrion.git
cd astrion
# 2. 初始化向导：运行模式（选 host）→ 端口 → 管理员 → 模型
./setup.sh
# 3. 构建前端并启动
npm install && npm run build
./start.sh</code></pre>
<p class="install-after">打开 <a href="http://localhost:8091" target="_blank" rel="noopener">http://localhost:8091</a>，剩下的交给向导。</p>
</div>
<div class="install-pane hidden" data-pane="docker">
<pre><code># 1-3 与 host 相同，向导中运行模式选 web
# 4. 构建沙箱镜像（每个用户的命令在独立容器中执行）
docker build -f docker/terminal.Dockerfile -t my-agent-shell:latest .
# 5. 启动
./start.sh</code></pre>
<p class="install-after">应用本体仍跑在宿主机上，Docker 提供的是用户级隔离沙箱。镜像名由 <code>TERMINAL_SANDBOX_IMAGE</code> 指定。</p>
</div>
</div>
</div>
</div>
<!-- ── 6 文档 ── -->
<div class="msg user reveal" id="q6">
<div class="bubble">文档呢？</div>
</div>
<div class="msg ai reveal" id="docs">
<div class="msg-avatar" data-avatar></div>
<div class="msg-body">
<p>十章，从安装到内部原理：</p>
<div class="doc-list">
<a href="#"><span>01</span>快速上手</a>
<a href="#"><span>02</span>核心概念</a>
<a href="#"><span>03</span>对话</a>
<a href="#"><span>04</span>输入与上下文</a>
<a href="#"><span>05</span>执行与安全</a>
<a href="#"><span>06</span>对话资产管理</a>
<a href="#"><span>07</span>智能体能力</a>
<a href="#"><span>08</span>快捷窗口</a>
<a href="#"><span>09</span>个人空间设置</a>
<a href="#"><span>10</span>CLI <em class="beta">开发中</em></a>
</div>
</div>
</div>
<!-- 彩蛋回复将插入到这里 -->
<div id="echo-anchor"></div>
<footer class="foot">
<p>© 2026 Astrion · 开源 · <a href="https://github.com/JOJO6618/astrion" target="_blank" rel="noopener">GitHub</a></p>
<p class="foot-note">星之子，星际粒子。把人类意图传递到工具、文件与终端之间。</p>
</footer>
</main>
<!-- ═══════ 底部输入栏（可交互彩蛋） ═══════ -->
<footer class="composer">
<div class="composer-box">
<span class="composer-avatar" id="composerAvatar"></span>
<input type="text" id="composerInput" placeholder="输入消息…（演示环境）" autocomplete="off" />
<button class="composer-send" id="composerSend" aria-label="发送">
<svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
</button>
</div>
<div class="composer-chips">
<span title="对话类型：智能体 / 多智能体团队">智能体</span>
<span title="运行模式：计划 / 询问 / 执行">执行</span>
<span title="版本控制：按消息打检查点，随时回溯">版本控制</span>
<span title="执行环境：沙箱 / 直连">沙箱</span>
</div>
</footer>
<script src="../shared/astrion-avatar.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink