From: wang.yu <wang.yu@advantech.com>
Date: Mon, 17 Aug 2026 09:39:45 +0000 (+0800)
Subject: fix: 反馈弹窗将「修改意见」输入框置顶并自动聚焦，确保可见可填写
X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=a5b740cb3748285f31ce2e94f3b2d616175cc66a;p=StationBuilder.git

fix: 反馈弹窗将「修改意见」输入框置顶并自动聚焦，确保可见可填写

- 反馈弹窗（feedback）将修改意见 textarea 移至弹窗顶部、紧跟影响范围标题，并加 autoFocus，避免被折叠在弹窗底部
- 提示文案改为引导在上方输入框填写
- 设计文档 8 反馈模态补充说明输入框置顶与自动聚焦
---

diff --git a/app/page.tsx b/app/page.tsx
index 1ed8943..5630689 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -915,4 +915,4 @@ function Modal({type,close,notify,promptData,feedbackCube,refineCube,refining,re
     if(!refineCube){ notify("反馈功能未正确初始化"); return; }
     refineCube(feedbackCube, feedbackText);
   };
-  return <div className="modal-backdrop" onMouseDown={close}><div className="modal" onMouseDown={e=>e.stopPropagation()}><header><h2>{title}</h2><button onClick={close}>×</button></header><div className="modal-body">{type==="feedback"&&<><div className="impact-title">系统已识别本次修改范围（仅针对「{feedbackCube?.name}」页面）</div><ul className="impact-list"><li><b>当前页面 JSON</b><span>将依据修改意见重新生成</span></li><li><b>页面模拟数据</b><span>将同步更新</span></li><li><b>Asset Excel</b><span>不受影响</span></li><li><b>其他 Cube 页面</b><span>不受影响</span></li></ul><Field label="修改意见"><textarea value={feedbackText} onChange={e=>setFeedbackText(e.target.value)} placeholder="例如：顶部增加设备在线率，将告警列表移到页面底部，趋势图改为最近七天。"/></Field><p className="hint">提交后会在当前页面已生成的 JSON 基础上按意见修改，并保留完整提示词（含本次修改意见），可随时通过「提示词」按钮查看。</p>{(refining||refineLog)?<div className="modal-console"><div className="modal-console-head">AI 生成工作流（实时 · 只读）</div><pre className="modal-console-body" ref={refineConsoleRef}>{refineLog||"（等待 AI 反馈…）"}</pre></div>:null}</>}{type==="download"&&<div className="download-list">{["Cube 页面 JSON","站点菜单配置","生成及校验报告"].map(x=><label key={x}><input type="checkbox" defaultChecked/><span>{x}</span></label>)}<div><b>station-package.zip</b><span>包含全部生成产物</span></div></div>}{type==="history"&&<div className="history-list">{[["V1","首次生成",new Date().toLocaleString()]].map((x,i)=><div key={x[0]}><i>{x[0]}</i><span><b>{x[1]}</b><small>{x[2]} · 王宇</small></span><Status>当前版本</Status></div>)}</div>}{type==="prompt"&&<><p className="hint">这是发送给 Cube 生成模型的完整组合提示词。在点击「开始生成」前可在此核对站点上下文、页面要求与 Cube 规则是否准确，便于定位生成质量问题。</p><pre className="prompt-view">{promptData?.text||"（暂无提示词）"}</pre></>}</div><footer><Button secondary onClick={close}>关闭</Button>{type==="feedback"&&<Button disabled={refining} onClick={submitFeedback}>{refining?"重新生成中…":"提交并重新生成"}</Button>}{type==="prompt"&&<Button onClick={()=>{ if(promptData?.text){ navigator.clipboard?.writeText(promptData.text).then(()=>notify("提示词已复制到剪贴板")).catch(()=>notify("复制失败，请手动选择")); } }}>复制提示词</Button>}</footer></div></div>}
+  return <div className="modal-backdrop" onMouseDown={close}><div className="modal" onMouseDown={e=>e.stopPropagation()}><header><h2>{title}</h2><button onClick={close}>×</button></header><div className="modal-body">{type==="feedback"&&<><div className="impact-title">系统已识别本次修改范围（仅针对「{feedbackCube?.name}」页面）</div><Field label="修改意见"><textarea autoFocus value={feedbackText} onChange={e=>setFeedbackText(e.target.value)} placeholder="例如：顶部增加设备在线率，将告警列表移到页面底部，趋势图改为最近七天。"/></Field><p className="hint">在上方输入框填写修改意见，提交后会在当前页面已生成的 JSON 基础上按意见修改，并保留完整提示词（含本次修改意见），可随时通过「提示词」按钮查看。</p><ul className="impact-list"><li><b>当前页面 JSON</b><span>将依据修改意见重新生成</span></li><li><b>页面模拟数据</b><span>将同步更新</span></li><li><b>Asset Excel</b><span>不受影响</span></li><li><b>其他 Cube 页面</b><span>不受影响</span></li></ul>{(refining||refineLog)?<div className="modal-console"><div className="modal-console-head">AI 生成工作流（实时 · 只读）</div><pre className="modal-console-body" ref={refineConsoleRef}>{refineLog||"（等待 AI 反馈…）"}</pre></div>:null}</>}{type==="download"&&<div className="download-list">{["Cube 页面 JSON","站点菜单配置","生成及校验报告"].map(x=><label key={x}><input type="checkbox" defaultChecked/><span>{x}</span></label>)}<div><b>station-package.zip</b><span>包含全部生成产物</span></div></div>}{type==="history"&&<div className="history-list">{[["V1","首次生成",new Date().toLocaleString()]].map((x,i)=><div key={x[0]}><i>{x[0]}</i><span><b>{x[1]}</b><small>{x[2]} · 王宇</small></span><Status>当前版本</Status></div>)}</div>}{type==="prompt"&&<><p className="hint">这是发送给 Cube 生成模型的完整组合提示词。在点击「开始生成」前可在此核对站点上下文、页面要求与 Cube 规则是否准确，便于定位生成质量问题。</p><pre className="prompt-view">{promptData?.text||"（暂无提示词）"}</pre></>}</div><footer><Button secondary onClick={close}>关闭</Button>{type==="feedback"&&<Button disabled={refining} onClick={submitFeedback}>{refining?"重新生成中…":"提交并重新生成"}</Button>}{type==="prompt"&&<Button onClick={()=>{ if(promptData?.text){ navigator.clipboard?.writeText(promptData.text).then(()=>notify("提示词已复制到剪贴板")).catch(()=>notify("复制失败，请手动选择")); } }}>复制提示词</Button>}</footer></div></div>}
diff --git a/public/design-doc.html b/public/design-doc.html
index e64d6d1..a691291 100644
--- a/public/design-doc.html
+++ b/public/design-doc.html
@@ -316,7 +316,7 @@
   <h2>8. 模态框（Modal）</h2>
   <table>
     <tr><th>类型</th><th>功能</th><th>交互效果</th></tr>
-    <tr><td>提出修改意见（feedback）</td><td>对单页提反馈并重新生成</td><td>展示影响范围（仅当前页 / 模拟数据 / 不受影响项）；提交后「修改意见」下方出现黑底白字的 <b>AI 生成工作流</b> 终端，实时滚动 CLI/AI/Skill 进度，完成后自动刷新并关闭</td></tr>
+    <tr><td>提出修改意见（feedback）</td><td>对单页提反馈并重新生成</td><td>弹窗顶部即「修改意见」输入框（自动聚焦），下方展示影响范围（仅当前页 / 模拟数据 / 不受影响项）；提交后弹窗内出现黑底白字的 <b>AI 生成工作流</b> 终端，实时滚动 CLI/AI/Skill 进度，完成后自动刷新并关闭</td></tr>
     <tr><td>下载站点交付物（download）</td><td>选择下载项</td><td>列表含 Cube JSON / 菜单配置 / 报告；Asset Excel 占位 <span class="todo">尚未实现</span></td></tr>
     <tr><td>版本历史（history）</td><td>查看版本</td><td>仅展示 V1 当前版本 <span class="todo">真实版本管理尚未实现</span></td></tr>
     <tr><td>生成提示词（prompt）</td><td>查看/复制组合提示词</td><td>展示发送给模型的完整提示词，可复制到剪贴板</td></tr>