100 lines
4.1 KiB
HTML
100 lines
4.1 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">项目生成工作台</div>
|
||
|
|
<div style="display:grid;gap:12px;padding:14px;">
|
||
|
|
<div class="placeholder">1. 生成系统模块设计</div>
|
||
|
|
<div class="placeholder">2. 生成数据库结构</div>
|
||
|
|
<div class="placeholder">3. 保存表结构</div>
|
||
|
|
<div class="placeholder">4. 生成业务流程设计</div>
|
||
|
|
<div class="placeholder">5. 初始化页面设计</div>
|
||
|
|
<div class="placeholder">6. 进入页面设计器调整</div>
|
||
|
|
<div class="placeholder">7. 预览 / 运行 / 下载</div>
|
||
|
|
</div>
|
||
|
|
<div class="pros-cons">
|
||
|
|
<div class="pros">
|
||
|
|
<h4>优点</h4>
|
||
|
|
<ul>
|
||
|
|
<li>可控、可编辑</li>
|
||
|
|
<li>适合高级用户调细节</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="cons">
|
||
|
|
<h4>问题</h4>
|
||
|
|
<ul>
|
||
|
|
<li>用户要理解太多阶段</li>
|
||
|
|
<li>不像输入名称后自动生成</li>
|
||
|
|
<li>设计器开始抢主线</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mockup">
|
||
|
|
<div class="mockup-header">目标应该是：自动生成流水线</div>
|
||
|
|
<div class="mockup-body">
|
||
|
|
<div class="mock-nav">EasyCode 一键生成</div>
|
||
|
|
<div style="display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px;">
|
||
|
|
<input class="mock-input" value="图书借阅系统" />
|
||
|
|
<button class="mock-button">生成完整项目</button>
|
||
|
|
</div>
|
||
|
|
<div style="display:grid;gap:12px;padding:14px;">
|
||
|
|
<div class="placeholder">自动规划：角色、菜单、页面、表结构</div>
|
||
|
|
<div class="placeholder">自动生成：后端 API、管理端、用户前台、SQL</div>
|
||
|
|
<div class="placeholder">自动校验：结构完整性、模板渲染、缺口报告</div>
|
||
|
|
<div class="placeholder">交付结果：在线运行、源码预览、下载完整工程</div>
|
||
|
|
</div>
|
||
|
|
<div class="pros-cons">
|
||
|
|
<div class="pros">
|
||
|
|
<h4>主线</h4>
|
||
|
|
<ul>
|
||
|
|
<li>先完整生成，再允许编辑</li>
|
||
|
|
<li>设计器作为修正入口</li>
|
||
|
|
<li>用户看到的是项目成果</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="cons">
|
||
|
|
<h4>约束</h4>
|
||
|
|
<ul>
|
||
|
|
<li>必须有生成编排器</li>
|
||
|
|
<li>失败要能定位到阶段</li>
|
||
|
|
<li>默认质量要足够稳</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h3>我建议的新产品原则</h3>
|
||
|
|
<div class="options" data-multiselect>
|
||
|
|
<div class="option" data-choice="autopilot-first" onclick="toggleSelect(this)">
|
||
|
|
<div class="letter">A</div>
|
||
|
|
<div class="content">
|
||
|
|
<h3>自动生成优先</h3>
|
||
|
|
<p>默认按钮只叫“生成完整项目”，内部串起蓝图、数据库、业务动作、页面、预览和下载。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="option" data-choice="designer-secondary" onclick="toggleSelect(this)">
|
||
|
|
<div class="letter">B</div>
|
||
|
|
<div class="content">
|
||
|
|
<h3>设计器降级为校准工具</h3>
|
||
|
|
<p>页面设计器、数据库设计器、业务块不再是必经步骤，而是生成后发现不满意时再进入。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="option" data-choice="artifact-first" onclick="toggleSelect(this)">
|
||
|
|
<div class="letter">C</div>
|
||
|
|
<div class="content">
|
||
|
|
<h3>成果先于配置</h3>
|
||
|
|
<p>页面主视觉展示运行地址、源码包、生成文件和缺口报告，而不是先展示 JSON 和大量配置面板。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|