81 lines
3.5 KiB
HTML
81 lines
3.5 KiB
HTML
<h2>前端页面改造：默认一键生成，专家模式收纳现有设计器</h2>
|
||
<p class="subtitle">目标不是删除现有能力，而是改变默认信息架构：普通用户先看到成果，高级用户再进入细节编辑。</p>
|
||
|
||
<div class="split">
|
||
<div class="mockup">
|
||
<div class="mockup-header">普通模式：生成入口</div>
|
||
<div class="mockup-body">
|
||
<div class="mock-nav">EasyCode</div>
|
||
<div style="display:grid;gap:12px;padding:14px;">
|
||
<input class="mock-input" value="图书借阅系统" />
|
||
<input class="mock-input" value="可选：包含借书、还书、逾期提醒" />
|
||
<button class="mock-button">生成完整项目</button>
|
||
</div>
|
||
<div style="display:grid;gap:10px;padding:14px;">
|
||
<div class="placeholder">默认生成：后端、用户前台、后台管理端、SQL</div>
|
||
<div class="placeholder">高级设置：是否生成用户前台、行业模板、后台模块</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-header">普通模式：生成结果</div>
|
||
<div class="mockup-body">
|
||
<div style="display:grid;gap:12px;padding:14px;">
|
||
<div class="placeholder">生成成功：运行预览已就绪</div>
|
||
<button class="mock-button">打开用户前台</button>
|
||
<button class="mock-button">打开后台管理端</button>
|
||
<button class="mock-button">下载完整源码</button>
|
||
<button class="mock-button">查看生成报告</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-header">专家模式：生成后调整</div>
|
||
<div class="mockup-body">
|
||
<div style="display:grid;grid-template-columns:220px 1fr;gap:14px;padding:14px;">
|
||
<div style="display:grid;gap:10px;">
|
||
<div class="placeholder">系统蓝图</div>
|
||
<div class="placeholder">数据库结构</div>
|
||
<div class="placeholder">业务流程</div>
|
||
<div class="placeholder">页面设计</div>
|
||
<div class="placeholder">运行预览</div>
|
||
</div>
|
||
<div style="display:grid;gap:10px;">
|
||
<div class="placeholder">复用现有 AppBlueprintPanel / DatabaseDesigner / BusinessBlueprintPanel</div>
|
||
<div class="placeholder">页面设计器继续跳转到独立全屏页面</div>
|
||
<div class="placeholder">修改后可重新运行“生成完整项目”或只重建预览</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h3>前端落地原则</h3>
|
||
<div class="options" data-multiselect>
|
||
<div class="option" data-choice="generate-simplified" onclick="toggleSelect(this)">
|
||
<div class="letter">A</div>
|
||
<div class="content">
|
||
<h3>GenerateView 简化成主入口</h3>
|
||
<p>默认只展示项目名、可选需求、生成按钮、任务进度和结果卡片。</p>
|
||
</div>
|
||
</div>
|
||
<div class="option" data-choice="existing-panels-expert" onclick="toggleSelect(this)">
|
||
<div class="letter">B</div>
|
||
<div class="content">
|
||
<h3>现有面板放进专家模式</h3>
|
||
<p>系统蓝图、数据库、业务流程、页面设计入口保留，但从默认流程中收起。</p>
|
||
</div>
|
||
</div>
|
||
<div class="option" data-choice="preview-stays-delivery" onclick="toggleSelect(this)">
|
||
<div class="letter">C</div>
|
||
<div class="content">
|
||
<h3>PreviewView 继续负责交付</h3>
|
||
<p>运行 iframe、日志、源码树、下载能力继续放在预览页，生成结果页提供快捷入口。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|