proto-feedback-modal.html
5.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
<title>原型 · 反馈模态框 · LemonBoss PRD</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=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/shell.css" />
</head>
<body data-page="proto-feedback-modal.html">
<div class="shell">
<aside id="sidebar"></aside>
<main class="page">
<header class="page-head">
<div class="crumb"><span class="pill">04 · PROTO</span><span class="sep">/</span><span>反馈模态框</span></div>
<h1>FeedbackModal · 反馈输入</h1>
<p class="deck">L3 唯一的人类输入入口。设计目标：让人类敢提模糊需求，不要因为「这是不是太短了」而犹豫。</p>
</header>
<article class="body">
<section>
<h2>线框</h2>
<div class="mock">
<div class="topbar">
<span class="dot" style="background:#FF5F57"></span>
<span class="dot" style="background:#FEBC2E"></span>
<span class="dot" style="background:#28C840"></span>
<span class="url">FeedbackModal · open</span>
</div>
<svg viewBox="0 0 900 460" width="100%" role="img" aria-label="FeedbackModal wireframe">
<defs>
<linearGradient id="bg-fm" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#000" stop-opacity=".3"/><stop offset="100%" stop-color="#000" stop-opacity=".5"/></linearGradient>
</defs>
<rect width="900" height="460" fill="url(#bg-fm)"/>
<rect x="120" y="40" width="660" height="380" rx="10" fill="#FAF7F1" stroke="#0E0E10"/>
<text x="150" y="80" font-family="Fraunces" font-size="22" fill="#0E0E10">提个新需求</text>
<text x="150" y="105" font-family="JetBrains Mono" font-size="11" fill="#6E48C3">L3 · HUMAN FEEDBACK · 项目 p-731042 · rev 3</text>
<rect x="150" y="130" width="600" height="180" rx="6" fill="#fff" stroke="#dcd5c4"/>
<text x="166" y="156" font-family="JetBrains Mono" font-size="11" fill="#3B3B40">"再加一个 GitHub OAuth 登录入口</text>
<text x="166" y="174" font-family="JetBrains Mono" font-size="11" fill="#3B3B40">token 自动续期，5 秒内完成"</text>
<text x="166" y="296" font-family="JetBrains Mono" font-size="10" fill="#a39c8b">|</text>
<text x="150" y="334" font-family="JetBrains Mono" font-size="10" fill="#6c6c6c">42 / 4000 字</text>
<text x="370" y="334" font-family="JetBrains Mono" font-size="10" fill="#6c6c6c">Ctrl + Enter 提交 · Esc 取消</text>
<rect x="540" y="358" width="100" height="36" rx="18" fill="#fff" stroke="#0E0E10"/>
<text x="590" y="382" text-anchor="middle" font-family="JetBrains Mono" font-size="12" fill="#0E0E10">取消</text>
<rect x="650" y="358" width="100" height="36" rx="18" fill="#6E48C3"/>
<text x="700" y="382" text-anchor="middle" font-family="JetBrains Mono" font-size="12" fill="#fff">提交反馈</text>
</svg>
</div>
</section>
<section>
<h2>交互细节</h2>
<table class="dense">
<thead><tr><th>事件</th><th>系统反应</th></tr></thead>
<tbody>
<tr><td>打开</td><td>focus 自动落 textarea，背景 50% 透明遮罩</td></tr>
<tr><td>输入字符</td><td>右下字数计数实时更新</td></tr>
<tr><td>> 4000 字</td><td>计数变橙，按钮仍可点（仅警告）</td></tr>
<tr><td>空文本</td><td>提交按钮 disabled 灰色</td></tr>
<tr><td>Ctrl/Cmd + Enter</td><td>等价于点提交</td></tr>
<tr><td>Esc</td><td>关闭（如有未提交内容，下次打开自动恢复）</td></tr>
<tr><td>点击遮罩区</td><td>关闭（同 Esc）</td></tr>
<tr><td>提交后</td><td>立即关闭模态框，header 显示 spinner「PM 处理中」</td></tr>
</tbody>
</table>
</section>
<section>
<h2>异常态</h2>
<div class="grid-3">
<div class="card l3">
<h4>提示「需求过短」</h4>
<p>< 20 字 + 不含动词时，PM Agent 会在 prd.html 写 <code><aside data-question></code>。模态框关闭后 toast 提示「PM 正在追问你」。</p>
</div>
<div class="card">
<h4>提示「与历史矛盾」</h4>
<p>PM 检测到冲突，prd 中插 <code><aside data-conflict></code>。Dashboard 右上角弹紫色横幅，需要人类点开模态框补充。</p>
</div>
<div class="card">
<h4>项目已 shipped-final</h4>
<p>「+ NEW REQUIREMENT」按钮置灰；如人类强行调 API，返 409。</p>
</div>
</div>
</section>
<section>
<h2>键盘可达性</h2>
<table class="dense">
<thead><tr><th>键</th><th>动作</th></tr></thead>
<tbody>
<tr><td><span class="kbd">Tab</span></td><td>循环 textarea → 取消 → 提交</td></tr>
<tr><td><span class="kbd">Enter</span></td><td>在 textarea 内换行</td></tr>
<tr><td><span class="kbd">Ctrl/Cmd + Enter</span></td><td>提交</td></tr>
<tr><td><span class="kbd">Esc</span></td><td>取消</td></tr>
</tbody>
</table>
</section>
</article>
<nav class="prev-next"></nav>
<footer class="site"><div><b>Section</b>04 · Prototype</div><div><b>Page</b>proto-feedback-modal.html</div></footer>
</main>
</div>
<script src="assets/shell.js"></script>
</body>
</html>