Skip to content

fix(sprint-6): 原型中文化 + Markdown 渲染 + 4 种接入模式 GUI 入口 #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JohnC-stack merged 1 commit into from
Apr 20, 2026
Merged

fix(sprint-6): 原型中文化 + Markdown 渲染 + 4 种接入模式 GUI 入口 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
[![npx](https://img.shields.io/badge/npx-epcode-orange)](./tools/cli/)
[![License](https://img.shields.io/badge/license-MIT-green)]()

> 📍 **最新进展**: Phase 1 已完成(v0.6.0 · 5 Sprint · 整体完成度 98%)。Phase 2 启动 · Sprint 6 ⑥ UI/UX 设计稿完整首发(**[🎨 11 个 HTML 原型](./docs/design/ui/prototype/)** + 10 wireframes + 5 flows + 映射表)。
> 📍 **最新进展**: Phase 1 完成(v0.6.0 · 整体 98%)。Phase 2 · Sprint 6 ⑥ UI/UX 扩展中 · **[🎨 17 个 HTML 原型](./docs/design/ui/prototype/)**(完整用户旅程: 登录 → 选项目/新建(4 模式)→ 主视图 → 场景工作流 + Prompt 一键操作)。
>
> - 🧰 [统一 CLI · epcode](./tools/cli/) · 10 个子命令,零依赖 `npx epcode --help`
> - 🌐 **[文档站 · epcode-ai.github.io/ep-code-ai](https://epcode-ai.github.io/ep-code-ai/)** ✅ 已上线 · 首页以 4 接入模式为一等公民
Expand Down
5 changes: 3 additions & 2 deletions docs/design/ui/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,9 @@
| 8 | [conversation-context-menu.md](./wireframes/08-conversation-context-menu.md) | 会话右键菜单 + 收藏 + 分组 |
| 9 | [empty-states.md](./wireframes/09-empty-states.md) | 各种空状态 |
| 10 | [env-status-bar.md](./wireframes/10-env-status-bar.md) | 持久化环境健康状态栏 |
| **11** | [**登录**](./wireframes/11-login.md) | 企业 SSO + IM 扫码 + 账号密码(Sprint 6 新增) |
| **12-15** | [**四大场景工作流**](./wireframes/12-15-workflow-scenes.md) | 业务/开发/测试/运维 角色视角(Sprint 6 新增) |
| **11** | [**登录**](./wireframes/11-login.md) | 企业 SSO + IM 扫码 + 账号密码 |
| **12-15** | [**四大场景工作流**](./wireframes/12-15-workflow-scenes.md) | 业务/开发/测试/运维 角色视角 + Prompt 一键操作 |
| **16-17** | [**项目列表 + 新建项目向导**](./wireframes/16-17-projects-and-new-project.md) | 4 种接入模式(A/B/C/D)的 GUI 入口 ⭐ |

### Interaction Flows(交互流程,5 个 Mermaid)

Expand Down
26 changes: 18 additions & 8 deletions docs/design/ui/prototype/01-main-three-pane.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,19 @@

<div class="app">

<!-- Topbar -->
<!-- 顶栏 -->
<div class="topbar" style="position:relative">
<span class="brand">EP Code AI</span>
<a href="16-project-list.html" style="text-decoration:none;color:inherit;display:flex;align-items:center"><span class="brand">🚀 EP Code AI</span></a>

<span style="color:var(--color-text-muted);margin:0 var(--sp-2)">/</span>

<!-- 项目切换器 -->
<div class="project-switcher" onclick="location.href='16-project-list.html'">
<span class="name">离职流程优化</span>
<span class="mode-badge mode-a">A · 绿地</span>
<span style="color:var(--color-text-muted)">▾</span>
</div>

<nav style="display:flex;gap:var(--sp-4);margin-left:var(--sp-5);font-size:var(--fs-sm)">
<a href="12-workflow-business.html" style="color:var(--color-text-muted)">💼 业务</a>
<a href="13-workflow-development.html" style="color:var(--color-text-muted)">💻 开发</a>
Expand Down Expand Up @@ -52,9 +62,9 @@
</div>
</div>

<!-- Main -->
<!-- 主体 -->
<div class="main">
<!-- Sidebar -->
<!-- 侧边栏 -->
<div class="sidebar">
<div class="sidebar-search">
<input type="text" placeholder="🔍 搜索... ⌘K">
Expand Down Expand Up @@ -100,7 +110,7 @@
</div>
</div>

<!-- Chat -->
<!-- 聊天区 -->
<div class="chat">
<div class="chat-header">
<div>
Expand Down Expand Up @@ -167,9 +177,9 @@
</div>
</div>

<!-- Artifact Panel -->
<!-- 产出物面板 -->
<div class="artifact-panel">
<div class="artifact-title">📦 Artifacts (2)</div>
<div class="artifact-title">📦 产出物 (2)</div>

<div class="artifact-card">
<div class="artifact-card-title">
Expand All @@ -192,7 +202,7 @@
</div>
</div>

<!-- Status bar -->
<!-- 状态栏 -->
<div class="statusbar ok">
<span>✅ 环境正常 · Node v20 / Claude Code v1.2.3</span>
<span><span class="dot"></span>Anthropic · 240ms</span>
Expand Down
8 changes: 4 additions & 4 deletions docs/design/ui/prototype/03-settings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ <h2>设置</h2>
</div>

<div class="settings-content">
<!-- General -->
<!-- 通用 -->
<div data-pane="general">
<h3>通用设置</h3>

Expand Down Expand Up @@ -185,7 +185,7 @@ <h4>数据</h4>
</div>
</div>

<!-- Provider -->
<!-- 供应商 -->
<div data-pane="provider" style="display:none">
<h3>供应商管理</h3>

Expand Down Expand Up @@ -220,7 +220,7 @@ <h3>供应商管理</h3>
</div>
</div>

<!-- Shortcuts -->
<!-- 快捷键 -->
<div data-pane="shortcuts" style="display:none">
<h3>快捷键</h3>

Expand All @@ -243,7 +243,7 @@ <h4>输入</h4>
<button class="btn" style="margin-top:var(--sp-4)">恢复默认</button>
</div>

<!-- Experimental -->
<!-- 实验性 -->
<div data-pane="exp" style="display:none">
<h3>实验性功能 ⚗️</h3>
<p style="color:var(--color-warning);margin-bottom:var(--sp-4)">⚠️ 以下功能不稳定,启用前请知悉风险</p>
Expand Down
166 changes: 147 additions & 19 deletions docs/design/ui/prototype/05-artifact-panel-expanded.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05 · Artifact 全屏 · EP Code AI</title>
<title>05 · 产出物全屏 · EP Code AI</title>
<link rel="stylesheet" href="styles.css">
<style>
.art-app {
Expand Down Expand Up @@ -92,7 +92,7 @@
<body>

<div class="proto-banner">
<span>🎨 原型 05 / 10 · Artifact 全屏详情</span>
<span>🎨 原型 05 · 产出物全屏详情</span>
<span><a href="index.html">← 返回</a> · <a href="04-slash-command-palette.html">上页</a> · <a href="06-provider-switcher.html">下页 →</a></span>
</div>

Expand All @@ -113,10 +113,14 @@
</div>

<div class="art-subbar">
<span>◀ 在 2 个 Artifact 中切换 ▶</span>
<span>◀ 在 2 个产出物中切换 ▶</span>
<div style="display:flex;gap:var(--sp-3);align-items:center">
<div style="display:flex;gap:2px;padding:2px;background:var(--color-bg-hover);border-radius:var(--radius-md)">
<button class="btn sm" id="viewPreview" onclick="switchView('preview')" style="background:var(--color-bg);border:none;padding:4px 12px">👁 预览</button>
<button class="btn sm ghost" id="viewSource" onclick="switchView('source')" style="border:none;padding:4px 12px">&lt;/&gt; 源码</button>
</div>
<select><option>v3 (最新)</option><option>v2 (3 小时前)</option><option>v1</option><option>对比 v2 ↔ v3</option></select>
<span>📜 历史 (3)</span>
<span style="font-size:var(--fs-sm);color:var(--color-text-muted)">📜 历史 (3)</span>
</div>
</div>

Expand Down Expand Up @@ -146,24 +150,124 @@
</div>
</div>

<div class="content-view">
<!-- 预览模式(默认):渲染为正式的 Markdown -->
<div class="content-view" id="viewPreviewEl" style="font-family: var(--font-ui); font-size: var(--fs-md); padding: var(--sp-8) var(--sp-10); line-height: 1.75; max-width: 800px;">
<h1 style="font-size:28px;margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:2px solid var(--color-border)">PRD · 离职流程 v1.2</h1>

<div style="display:flex;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--color-text-muted);margin-bottom:var(--sp-6)">
<span>版本: v1.2</span>
<span>作者: 张工(产品)</span>
<span>日期: 2026-04-19</span>
<span class="badge warn">⏳ 草稿</span>
</div>

<h2 style="font-size:22px;margin-top:var(--sp-8);margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);border-bottom:1px solid var(--color-border)">1. 概述</h2>

<h3 style="font-size:18px;margin-top:var(--sp-5);margin-bottom:var(--sp-3)">1.1 背景</h3>
<p style="margin-bottom:var(--sp-4)">
公司目前离职流程涉及 <strong>5 个部门</strong>(HR / 财务 / IT / 上级 / 行政),平均处理时长 <strong>7-10 工作日</strong>,员工反馈断点多。
</p>

<h3 style="font-size:18px;margin-top:var(--sp-5);margin-bottom:var(--sp-3)">1.2 目标</h3>
<ul style="margin-left:var(--sp-6);margin-bottom:var(--sp-4)">
<li>端到端处理时长 ≤ <strong>3 工作日</strong></li>
<li>关键步骤 <strong>透明可追溯</strong></li>
<li>员工 NPS ≥ <strong>60</strong></li>
</ul>

<h2 style="font-size:22px;margin-top:var(--sp-8);margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);border-bottom:1px solid var(--color-border)">2. 用户与场景</h2>

<h3 style="font-size:18px;margin-top:var(--sp-5);margin-bottom:var(--sp-3)">2.1 角色</h3>
<table style="width:100%;border-collapse:collapse;margin-bottom:var(--sp-4)">
<thead>
<tr style="background:var(--color-bg-alt)">
<th style="padding:var(--sp-2);border:1px solid var(--color-border);text-align:left">角色</th>
<th style="padding:var(--sp-2);border:1px solid var(--color-border);text-align:left">关键动作</th>
<th style="padding:var(--sp-2);border:1px solid var(--color-border);text-align:left">SLA</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">员工</td>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">提交申请 / 确认交接</td>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">—</td>
</tr>
<tr>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">直接上级</td>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">审批 / 工作交接确认</td>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">1 工作日</td>
</tr>
<tr>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">HR</td>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">资料审核 / 流程协调</td>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">1 工作日</td>
</tr>
<tr>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">IT</td>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">账号注销 / 设备回收</td>
<td style="padding:var(--sp-2);border:1px solid var(--color-border)">0.5 工作日</td>
</tr>
</tbody>
</table>

<h3 style="font-size:18px;margin-top:var(--sp-5);margin-bottom:var(--sp-3)">2.2 主流程</h3>
<p style="margin-bottom:var(--sp-4)">员工发起 → 上级审批 → HR 审核 → 并行(IT 注销 / 财务结算 / 行政回收)→ 员工确认 → 归档。</p>

<h2 style="font-size:22px;margin-top:var(--sp-8);margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);border-bottom:1px solid var(--color-border)">3. 功能需求</h2>

<h3 style="font-size:18px;margin-top:var(--sp-5);margin-bottom:var(--sp-3)">REQ-001 · 员工在线提交离职申请</h3>
<p style="margin-bottom:var(--sp-3)"><strong>背景</strong>: 当前员工需线下填纸质表格,流程不透明。</p>
<p style="margin-bottom:var(--sp-3)"><strong>验收标准</strong>(Given-When-Then):</p>
<ul style="margin-left:var(--sp-6);margin-bottom:var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.7">
<li><strong>Given</strong> 员工已登录内部系统</li>
<li><strong>When</strong> 员工进入"我的流程"→"离职申请"并填写表单(离职日期、原因、备注)</li>
<li><strong>Then</strong> 系统创建申请单,状态 <code>待上级审批</code>,并发送通知给直接上级</li>
</ul>

<h3 style="font-size:18px;margin-top:var(--sp-5);margin-bottom:var(--sp-3)">REQ-002 · 上级审批</h3>
<p style="margin-bottom:var(--sp-4);color:var(--color-text-muted);font-style:italic">(省略 · 点击"源码"查看完整内容)</p>

<h2 style="font-size:22px;margin-top:var(--sp-8);margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);border-bottom:1px solid var(--color-border)">4. 非功能需求</h2>
<ul style="margin-left:var(--sp-6);margin-bottom:var(--sp-4)">
<li><strong>性能</strong>: 单个流程操作 P99 响应时间 ≤ <strong>500ms</strong></li>
<li><strong>可用性</strong>: <strong>99.9%</strong> SLA(全年停机 ≤ 8.76h)</li>
<li><strong>安全</strong>: 离职相关个人信息 加密存储 + 访问审计</li>
<li><strong>兼容</strong>: 支持 Chrome 90+ / Safari 14+ / 企业微信内嵌</li>
</ul>

<div style="padding:var(--sp-4);background:var(--color-primary-lightest);border-radius:var(--radius-md);margin-top:var(--sp-6);font-size:var(--fs-sm);color:var(--color-text-muted)">
📄 完整 PRD 共 <strong>132 行 · 8 章</strong>,此处为前 4 章预览。点击"源码"按钮查看完整原始 Markdown。
</div>
</div>

<!-- 源码模式:默认隐藏,切换显示 -->
<div class="content-view" id="viewSourceEl" style="display:none;font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.8">
<span class="line-num">1</span><span style="font-weight:700"># PRD - 离职流程 v1.2</span>
<span class="line-num">2</span>
<span class="line-num">3</span><span style="font-weight:700">## 1. 概述</span>
<span class="line-num">4</span>
<span class="line-num">5</span><span style="font-weight:600">### 1.1 背景</span>
<span class="line-num">6</span>公司目前离职流程涉及 5 个部门(HR / 财务 / IT /
<span class="line-num">7</span>上级 / 行政),平均处理时长 7-10 工作日,员工反馈
<span class="line-num">8</span>断点多。
<span class="line-num">9</span>
<span class="line-num">10</span><span style="font-weight:600">### 1.2 目标</span>
<span class="line-num">11</span>- 端到端处理时长 &le; 3 工作日
<span class="line-num">12</span>- 关键步骤透明可追溯
<span class="line-num">13</span>- 员工 NPS &ge; 60
<span class="line-num">14</span>
<span class="line-num">15</span><span style="font-weight:700">## 2. 用户与场景</span>
<span class="line-num">3</span><span style="color:var(--color-text-muted)"># 元数据</span>
<span class="line-num">4</span><span style="color:var(--color-text-muted)">版本: v1.2 作者: 张工 日期: 2026-04-19</span>
<span class="line-num">5</span>
<span class="line-num">6</span><span style="font-weight:700">## 1. 概述</span>
<span class="line-num">7</span>
<span class="line-num">8</span><span style="font-weight:600">### 1.1 背景</span>
<span class="line-num">9</span>公司目前离职流程涉及 5 个部门(HR / 财务 / IT /
<span class="line-num">10</span>上级 / 行政),平均处理时长 7-10 工作日,员工反馈断点多。
<span class="line-num">11</span>
<span class="line-num">12</span><span style="font-weight:600">### 1.2 目标</span>
<span class="line-num">13</span>- 端到端处理时长 ≤ 3 工作日
<span class="line-num">14</span>- 关键步骤透明可追溯
<span class="line-num">15</span>- 员工 NPS ≥ 60
<span class="line-num">16</span>
<span class="line-num">17</span>...
<span class="line-num">17</span><span style="font-weight:700">## 2. 用户与场景</span>
<span class="line-num">18</span>
<span class="line-num">19</span><span style="font-weight:600">### 2.1 角色</span>
<span class="line-num">20</span>| 角色 | 关键动作 | SLA |
<span class="line-num">21</span>| 员工 | 提交申请 / 确认交接 | - |
<span class="line-num">22</span>| 直接上级 | 审批 / 工作交接确认 | 1 工作日 |
<span class="line-num">23</span>| HR | 资料审核 / 流程协调 | 1 工作日 |
<span class="line-num">24</span>| IT | 账号注销 / 设备回收 | 0.5 工作日 |
<span class="line-num">25</span>
<span class="line-num">26</span><span style="color:var(--color-text-muted)">... (132 行,此处截断)</span>
</div>
</div>

Expand All @@ -175,5 +279,29 @@

</div>

<script>
function switchView(mode) {
const preview = document.getElementById('viewPreviewEl');
const source = document.getElementById('viewSourceEl');
const btnP = document.getElementById('viewPreview');
const btnS = document.getElementById('viewSource');
if (mode === 'preview') {
preview.style.display = 'block';
source.style.display = 'none';
btnP.style.background = 'var(--color-bg)';
btnP.classList.remove('ghost');
btnS.style.background = 'transparent';
btnS.classList.add('ghost');
} else {
preview.style.display = 'none';
source.style.display = 'block';
btnS.style.background = 'var(--color-bg)';
btnS.classList.remove('ghost');
btnP.style.background = 'transparent';
btnP.classList.add('ghost');
}
}
</script>

</body>
</html>
25 changes: 21 additions & 4 deletions docs/design/ui/prototype/06-provider-switcher.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,21 @@
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--color-border);
display: flex;
gap: var(--sp-3);
justify-content: flex-end;
align-items: center;
justify-content: space-between;
font-size: var(--fs-sm);
}
.pg-footer-left {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
color: var(--color-text-muted);
}
.pg-footer-right {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}

/* 二次确认 */
.confirm {
Expand Down Expand Up @@ -162,8 +173,14 @@
</div>

<div class="pg-footer">
<span class="kbd">esc</span> <span style="color:var(--color-text-muted)">取消</span>
<button class="btn primary">↵ 切换</button>
<span class="pg-footer-left">
<span class="kbd">esc</span>
<span>取消</span>
</span>
<span class="pg-footer-right">
<button class="btn">取消</button>
<button class="btn primary">↵ 切换到新会话</button>
</span>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion docs/design/ui/prototype/07-search-overlay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@
</div>

<div class="result-group" style="border-top:1px solid var(--color-border)">
<div class="result-group-title">📄 Artifacts (2)</div>
<div class="result-group-title">📄 产出物 (2)</div>
<div class="result-row">
<span class="icon">📄</span>
<div>
Expand Down
4 changes: 2 additions & 2 deletions docs/design/ui/prototype/08-conversation-context-menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,9 +197,9 @@ <h3 style="margin-top:32px">删除二次确认</h3>
<h3>⚠️ 删除会话</h3>
<p style="margin:12px 0">会话「<strong>需求评审 - 离职流程</strong>」和它的 6 条消息将被删除</p>
<div class="field">
<div class="field-label">Artifact 处理?</div>
<div class="field-label">产出物处理?</div>
<label style="display:block;margin:6px 0"><input type="radio" name="art" checked> 一起删(推荐)</label>
<label style="display:block;margin:6px 0"><input type="radio" name="art"> 保留 Artifact(移到回收站)</label>
<label style="display:block;margin:6px 0"><input type="radio" name="art"> 保留产出物(移到回收站)</label>
</div>
<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:16px">
<button class="btn">取消</button>
Expand Down
2 changes: 1 addition & 1 deletion docs/design/ui/prototype/11-login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<a href="#">忘记密码?</a>
</div>

<button class="btn primary lg" style="width:100%" onclick="location.href='01-main-three-pane.html'">登录</button>
<button class="btn primary lg" style="width:100%" onclick="location.href='16-project-list.html'">登录</button>

<div style="text-align:center;margin-top:var(--sp-5);font-size:var(--fs-xs);color:var(--color-text-muted)">
登录即表示同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
Expand Down
Loading
Loading