feat: expand EasyCode software factory workflows
This commit is contained in:
王鹏
@@ -0,0 +1,74 @@
|
||||
<h2>后端一键生成编排器：复用现有能力，统一成一个任务</h2>
|
||||
<p class="subtitle">推荐新增 one_click_project 任务类型。前端提交项目名称后，后端负责完整串联生成、预览和运行状态。</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">编排链路</div>
|
||||
<div class="mockup-body">
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:10px;padding:14px;align-items:stretch;">
|
||||
<div class="placeholder">创建/更新项目</div>
|
||||
<div class="placeholder">生成系统蓝图</div>
|
||||
<div class="placeholder">生成数据库</div>
|
||||
<div class="placeholder">生成业务动作</div>
|
||||
<div class="placeholder">初始化页面</div>
|
||||
<div class="placeholder">生成源码结构</div>
|
||||
<div class="placeholder">启动运行预览</div>
|
||||
</div>
|
||||
<div class="placeholder" style="margin:14px;">
|
||||
任务成功条件：运行预览状态达到 RUNNING，并返回 backendUrl、frontendUrl、adminFrontendUrl、downloadReady
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">任务状态</div>
|
||||
<div class="mockup-body">
|
||||
<div style="display:grid;gap:10px;padding:14px;">
|
||||
<div class="placeholder">generateType: one_click_project</div>
|
||||
<div class="placeholder">progress: 0-100</div>
|
||||
<div class="placeholder">currentStep: 当前阶段中文说明</div>
|
||||
<div class="placeholder">stage: APP_BLUEPRINT / DATABASE / BUSINESS / PAGE / PREVIEW / RUN</div>
|
||||
<div class="placeholder">resultPayload: 运行地址、下载状态、生成报告</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">失败恢复</div>
|
||||
<div class="mockup-body">
|
||||
<div style="display:grid;gap:10px;padding:14px;">
|
||||
<div class="placeholder">AI 调用失败：沿用任务重试策略</div>
|
||||
<div class="placeholder">数据库/业务校验失败：给出字段级原因</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="reuse-ai-task" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>复用现有 AI 任务表</h3>
|
||||
<p>新增 generateType，不新增一套完全独立的任务中心。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="stage-aware" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>任务内部按阶段更新</h3>
|
||||
<p>每个阶段开始和结束都更新 progress/currentStep，失败时记录阶段。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="run-is-success" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>以 RUNNING 作为成功标准</h3>
|
||||
<p>不是“源码生成完”就成功，而是在线预览可打开才算一键生成成功。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,69 @@
|
||||
<h2>失败报告与阶段验收：让一键生成可恢复</h2>
|
||||
<p class="subtitle">一键生成不是隐藏复杂度，而是把复杂度整理成用户能理解、系统能重试的阶段报告。</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">阶段验收规则</div>
|
||||
<div class="mockup-body">
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px;">
|
||||
<div class="placeholder">系统蓝图：角色、前台菜单、后台菜单、页面清单非空</div>
|
||||
<div class="placeholder">数据库：表结构已保存，字段合法，SQL 可生成</div>
|
||||
<div class="placeholder">业务动作：通过安全 DSL 校验，绑定到已有表字段</div>
|
||||
<div class="placeholder">页面设计：前台和后台至少初始化出主页和业务页</div>
|
||||
<div class="placeholder">源码预览：backend / frontend / admin / sql 都能渲染结构</div>
|
||||
<div class="placeholder">运行预览：前台和后台 URL 达到可访问状态</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">失败报告</div>
|
||||
<div class="mockup-body">
|
||||
<div style="display:grid;gap:10px;padding:14px;">
|
||||
<div class="placeholder">失败阶段：运行预览</div>
|
||||
<div class="placeholder">失败原因：后台前端进程退出</div>
|
||||
<div class="placeholder">已完成成果：源码已生成，可下载</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:10px;padding:14px;">
|
||||
<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="section">
|
||||
<h3>错误处理原则</h3>
|
||||
<div class="options" data-multiselect>
|
||||
<div class="option" data-choice="stage-validation" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>每阶段都有验收</h3>
|
||||
<p>不是只看最终异常，而是每个阶段明确自己的完成标准。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="partial-artifact" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>保留阶段成果</h3>
|
||||
<p>运行预览失败时，源码下载、结构预览、日志仍然可用。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="focused-retry" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>重试失败阶段</h3>
|
||||
<p>优先重试失败阶段，必要时才从头重新生成。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,80 @@
|
||||
<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>
|
||||
@@ -0,0 +1,76 @@
|
||||
<h2>一键生成主流程：普通用户一键到底，专家模式旁路编辑</h2>
|
||||
<p class="subtitle">第一版目标：输入项目名称，自动生成后端、用户前台、后台管理端，并启动在线运行预览。</p>
|
||||
|
||||
<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;grid-template-columns:repeat(5,1fr);gap:10px;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>
|
||||
<div class="placeholder" style="margin:14px;">
|
||||
生成完成后优先展示：用户前台地址、后台管理端地址、源码下载、生成报告
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">生成中页面</div>
|
||||
<div class="mockup-body">
|
||||
<div style="display:grid;gap:12px;padding:14px;">
|
||||
<div class="placeholder">当前阶段：生成业务流程</div>
|
||||
<div class="placeholder">已完成：系统蓝图、数据库结构</div>
|
||||
<div class="placeholder">预计下一步：初始化页面设计</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;">
|
||||
<button class="mock-button">打开用户前台</button>
|
||||
<button class="mock-button">打开后台管理端</button>
|
||||
<button class="mock-button">下载完整源码</button>
|
||||
<div class="placeholder">需要调整？进入专家模式：数据库 / 业务流程 / 页面设计</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>体验原则</h3>
|
||||
<div class="options" data-multiselect>
|
||||
<div class="option" data-choice="default-one-click" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>默认一键到底</h3>
|
||||
<p>用户只填项目名称，需求描述可选；中间不强制确认。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="progress-transparent" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>进度透明</h3>
|
||||
<p>展示当前阶段、已完成阶段、失败原因和重试入口，避免黑盒等待。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="expert-after-result" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>先看成果，再进专家模式</h3>
|
||||
<p>生成结果优先展示在线预览和源码下载；设计器入口放在“调整项目”里。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,99 @@
|
||||
<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>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">继续在对话里确认“一键生成”的边界...</p>
|
||||
</div>
|
||||
@@ -0,0 +1,98 @@
|
||||
<h2>推荐架构：业务块协议 2.0</h2>
|
||||
<p class="subtitle">不是另造一套后台设计器，而是在现有业务块体系上增加“适用端、块类型、单表聚合数据集、分端模板”。</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">设计态 → 保存校验 → 代码生成 → 后台运行态</div>
|
||||
<div class="mockup-body" style="padding:18px">
|
||||
<div style="display:grid;grid-template-columns:1.05fr 42px 1.05fr 42px 1.1fr 42px 1.05fr;align-items:stretch;gap:8px">
|
||||
<div style="border:1px solid #cfe0f4;border-radius:8px;background:#f6faff;padding:14px">
|
||||
<div class="label">DESIGNER</div>
|
||||
<h3 style="margin-top:6px">后台页面设计器</h3>
|
||||
<p>后台素材面板仅展示 <code>surfaces: ["admin"]</code> 的业务块。</p>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;font-size:12px">
|
||||
<span style="padding:7px;border-radius:5px;background:white;border:1px solid #dce8f6">指标卡</span>
|
||||
<span style="padding:7px;border-radius:5px;background:white;border:1px solid #dce8f6">折线图</span>
|
||||
<span style="padding:7px;border-radius:5px;background:white;border:1px solid #dce8f6">柱状图</span>
|
||||
<span style="padding:7px;border-radius:5px;background:white;border:1px solid #dce8f6">饼图</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;color:#7a93b2;font-size:24px">→</div>
|
||||
<div style="border:1px solid #d8e7d9;border-radius:8px;background:#f7fbf7;padding:14px">
|
||||
<div class="label">CONTRACT</div>
|
||||
<h3 style="margin-top:6px">统一块定义与布局 JSON</h3>
|
||||
<p><code>kind: chart</code>、<code>surfaces</code>、<code>dataset</code>、<code>chart</code>、<code>templates</code>。</p>
|
||||
<div style="margin-top:12px;padding:9px;border-radius:6px;background:white;border:1px solid #dfebdf;font-size:12px">
|
||||
数据表 + 维度 + 指标 + 筛选 + 排序 + Top N
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;color:#7a93b2;font-size:24px">→</div>
|
||||
<div style="border:1px solid #f0dfbf;border-radius:8px;background:#fffaf2;padding:14px">
|
||||
<div class="label">GENERATOR</div>
|
||||
<h3 style="margin-top:6px">注册、校验与生成</h3>
|
||||
<p>现有 <code>BusinessBlockRegistryService</code> 继续负责定义加载和字段校验。</p>
|
||||
<div style="display:grid;gap:6px;margin-top:12px;font-size:12px">
|
||||
<span style="padding:7px;border-radius:5px;background:white;border:1px solid #f0e5d1">生成 Vue + ECharts 组件</span>
|
||||
<span style="padding:7px;border-radius:5px;background:white;border:1px solid #f0e5d1">生成 Controller / Service / Mapper</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;color:#7a93b2;font-size:24px">→</div>
|
||||
<div style="border:1px solid #e0d7f2;border-radius:8px;background:#faf8ff;padding:14px">
|
||||
<div class="label">RUNTIME</div>
|
||||
<h3 style="margin-top:6px">生成后的 RuoYi 后台</h3>
|
||||
<p>每个块调用自己的只读聚合接口，返回统一 <code>dimensions + series</code>。</p>
|
||||
<div style="margin-top:12px;padding:9px;border-radius:6px;background:white;border:1px solid #e8e1f4;font-size:12px">
|
||||
权限注解 + 参数白名单 + 空态/错误态
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split" style="margin-top:18px">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">业务块定义（平台内置）</div>
|
||||
<div class="mockup-body">
|
||||
<pre style="margin:0;font-size:12px;line-height:1.55;white-space:pre-wrap">{
|
||||
"code": "admin_line_chart",
|
||||
"kind": "chart",
|
||||
"surfaces": ["admin"],
|
||||
"placement": "embedded",
|
||||
"chartType": "line",
|
||||
"datasetSchema": "single-table-aggregate-v1",
|
||||
"templates": {
|
||||
"adminComponent": "...",
|
||||
"backend": "..."
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">页面中的块实例（用户配置）</div>
|
||||
<div class="mockup-body">
|
||||
<pre style="margin:0;font-size:12px;line-height:1.55;white-space:pre-wrap">{
|
||||
"blockCode": "admin_line_chart",
|
||||
"title": "近 30 天销售趋势",
|
||||
"dataset": {
|
||||
"table": "shop_order",
|
||||
"dimension": { "field": "create_time", "timeUnit": "day" },
|
||||
"metrics": [{ "field": "amount", "aggregate": "sum" }],
|
||||
"filters": [{ "field": "status", "operator": "eq", "value": "PAID" }]
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="margin-top:18px">
|
||||
<h3>关键边界</h3>
|
||||
<ul>
|
||||
<li>后台页面可放普通 CRUD 区域，也可在顶部/底部嵌入图表块；另支持纯“业务块页面”拼成看板。</li>
|
||||
<li>不保存 SQL，只保存字段级 DSL；后端根据数据库元数据白名单生成固定 SQL。</li>
|
||||
<li>前台继续使用现有轮播、公告、购物车等块；一期图表定义只声明 <code>admin</code>，不会出现在前台素材池。</li>
|
||||
<li>现有 <code>business-blocks-v1</code> 和 <code>embeddedBlocks</code> 保持兼容，老页面无需迁移。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:16px;padding:13px;border-radius:8px;background:#eef6ff;border:1px solid #d9e9ff">
|
||||
<strong>建议结论：</strong>业务块仍是一套注册表，但模板和可见范围按端分开；数据集能力作为图表块的公共子协议，而不是复制到四个块里。
|
||||
</div>
|
||||
@@ -0,0 +1,124 @@
|
||||
<h2>配置协议与运行边界</h2>
|
||||
<p class="subtitle">一期采用字段级 DSL，生成固定代码，不提供 SQL 编辑器、跨表关联、公式脚本或任意 ECharts 配置。</p>
|
||||
|
||||
<div class="split">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">单表聚合 DSL：single-table-aggregate-v1</div>
|
||||
<div class="mockup-body">
|
||||
<pre style="margin:0;font-size:12px;line-height:1.55;white-space:pre-wrap">{
|
||||
"table": "shop_order",
|
||||
"dimension": {
|
||||
"field": "create_time",
|
||||
"timeUnit": "day"
|
||||
},
|
||||
"metrics": [{
|
||||
"field": "amount",
|
||||
"aggregate": "sum",
|
||||
"alias": "salesAmount"
|
||||
}],
|
||||
"filters": [{
|
||||
"field": "status",
|
||||
"operator": "eq",
|
||||
"value": "PAID"
|
||||
}],
|
||||
"dateRange": {
|
||||
"field": "create_time",
|
||||
"preset": "last_30_days"
|
||||
},
|
||||
"sort": { "by": "dimension", "order": "asc" },
|
||||
"limit": 100
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">统一响应协议</div>
|
||||
<div class="mockup-body">
|
||||
<pre style="margin:0;font-size:12px;line-height:1.55;white-space:pre-wrap">{
|
||||
"dimensions": [
|
||||
{ "key": "2026-06-01", "label": "06-01" }
|
||||
],
|
||||
"series": [{
|
||||
"key": "salesAmount",
|
||||
"name": "销售额",
|
||||
"values": [12800.50]
|
||||
}],
|
||||
"summary": {
|
||||
"value": 86420,
|
||||
"count": 328
|
||||
}
|
||||
}</pre>
|
||||
<p style="margin:12px 0 0;color:#667085;font-size:12px">指标卡读取 <code>summary</code>，折线/柱状图读取 <code>dimensions + series</code>，饼图将第一组 series 映射为分类占比。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="margin-top:20px">
|
||||
<h3>字段类型约束</h3>
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:9px">
|
||||
<div style="padding:12px;border:1px solid #dfe7f1;border-radius:7px;background:#fbfdff">
|
||||
<strong>COUNT</strong><p style="margin:5px 0 0;font-size:12px;color:#667085">任意字段或整表计数</p>
|
||||
</div>
|
||||
<div style="padding:12px;border:1px solid #dfe7f1;border-radius:7px;background:#fbfdff">
|
||||
<strong>SUM / AVG</strong><p style="margin:5px 0 0;font-size:12px;color:#667085">仅数值字段</p>
|
||||
</div>
|
||||
<div style="padding:12px;border:1px solid #dfe7f1;border-radius:7px;background:#fbfdff">
|
||||
<strong>维度</strong><p style="margin:5px 0 0;font-size:12px;color:#667085">文本、枚举、日期时间</p>
|
||||
</div>
|
||||
<div style="padding:12px;border:1px solid #dfe7f1;border-radius:7px;background:#fbfdff">
|
||||
<strong>时间粒度</strong><p style="margin:5px 0 0;font-size:12px;color:#667085">日、周、月；仅时间字段</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mockup" style="margin-top:18px">
|
||||
<div class="mockup-header">生成与运行链路</div>
|
||||
<div class="mockup-body" style="padding:18px">
|
||||
<div style="display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr;align-items:center;gap:7px;text-align:center">
|
||||
<div style="padding:13px;border-radius:7px;background:#f4f8fd;border:1px solid #dce7f4"><strong>保存页面</strong><p style="font-size:11px;color:#667085">校验表、字段、聚合和筛选</p></div>
|
||||
<span style="color:#7890ad">→</span>
|
||||
<div style="padding:13px;border-radius:7px;background:#f7fbf7;border:1px solid #dce9dc"><strong>生成代码</strong><p style="font-size:11px;color:#667085">每个块生成只读聚合 API</p></div>
|
||||
<span style="color:#7890ad">→</span>
|
||||
<div style="padding:13px;border-radius:7px;background:#fffaf3;border:1px solid #efe2cb"><strong>运行查询</strong><p style="font-size:11px;color:#667085">Mapper 使用白名单字段和固定 SQL 片段</p></div>
|
||||
<span style="color:#7890ad">→</span>
|
||||
<div style="padding:13px;border-radius:7px;background:#faf8ff;border:1px solid #e5def2"><strong>图表渲染</strong><p style="font-size:11px;color:#667085">ECharts 组件消费统一响应</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split" style="margin-top:18px">
|
||||
<div class="section">
|
||||
<h3>权限与安全</h3>
|
||||
<ul>
|
||||
<li>块默认继承所在后台菜单的权限标识，并生成对应 <code>@PreAuthorize</code>。</li>
|
||||
<li>可选开启 RuoYi 数据权限，由生成的 Service 方法进入数据权限切面。</li>
|
||||
<li>表名、字段名、聚合函数、运算符全部来自白名单，值使用参数绑定。</li>
|
||||
<li>限制最大分组数 500、默认 100；查询超时由数据库和应用统一配置控制。</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>错误与降级</h3>
|
||||
<ul>
|
||||
<li>设计时：字段删除或类型变化，页面标记“需要修复”，禁止生成。</li>
|
||||
<li>预览时：当前块显示具体配置错误，其他块继续工作。</li>
|
||||
<li>运行时：空数据展示空态；接口失败展示重试按钮，不弹全局错误。</li>
|
||||
<li>旧定义版本继续可读；定义升级通过 <code>version</code> 和迁移函数归一化。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="margin-top:18px">
|
||||
<h3>首批四个块的差异</h3>
|
||||
<table style="width:100%;border-collapse:collapse;font-size:12px">
|
||||
<thead><tr style="background:#f5f7fa"><th style="padding:9px;border:1px solid #e1e6ed;text-align:left">块</th><th style="padding:9px;border:1px solid #e1e6ed;text-align:left">维度</th><th style="padding:9px;border:1px solid #e1e6ed;text-align:left">指标</th><th style="padding:9px;border:1px solid #e1e6ed;text-align:left">特有配置</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td style="padding:9px;border:1px solid #e1e6ed">指标卡</td><td style="padding:9px;border:1px solid #e1e6ed">不需要</td><td style="padding:9px;border:1px solid #e1e6ed">1 个</td><td style="padding:9px;border:1px solid #e1e6ed">前后缀、精度、对比文案</td></tr>
|
||||
<tr><td style="padding:9px;border:1px solid #e1e6ed">折线图</td><td style="padding:9px;border:1px solid #e1e6ed">必填</td><td style="padding:9px;border:1px solid #e1e6ed">1–3 个</td><td style="padding:9px;border:1px solid #e1e6ed">平滑、面积、图例</td></tr>
|
||||
<tr><td style="padding:9px;border:1px solid #e1e6ed">柱状图</td><td style="padding:9px;border:1px solid #e1e6ed">必填</td><td style="padding:9px;border:1px solid #e1e6ed">1–3 个</td><td style="padding:9px;border:1px solid #e1e6ed">横向、堆叠、Top N</td></tr>
|
||||
<tr><td style="padding:9px;border:1px solid #e1e6ed">饼图</td><td style="padding:9px;border:1px solid #e1e6ed">必填</td><td style="padding:9px;border:1px solid #e1e6ed">1 个</td><td style="padding:9px;border:1px solid #e1e6ed">环形、标签、Top N + 其他</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:16px;padding:13px;border-radius:8px;background:#eef8f1;border:1px solid #d7eadc">
|
||||
<strong>测试重点：</strong>DSL 校验、类型约束、SQL 白名单生成、权限注解、空数据、单块失败隔离、旧页面兼容，以及四种图表的模板快照。
|
||||
</div>
|
||||
@@ -0,0 +1,132 @@
|
||||
<h2>后台图表业务块：设计器交互</h2>
|
||||
<p class="subtitle">沿用现有三栏页面设计器：左侧素材、中间画布、右侧属性。图表不开放原始 ECharts JSON，一期用结构化配置。</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">后台页面设计 / 运营概览</div>
|
||||
<div class="mockup-body" style="padding:0">
|
||||
<div style="display:grid;grid-template-columns:185px minmax(360px,1fr) 255px;min-height:540px">
|
||||
<aside style="border-right:1px solid #e2e8f0;background:#fbfcfe;padding:12px">
|
||||
<div style="display:flex;gap:5px;margin-bottom:12px;font-size:11px">
|
||||
<span style="padding:6px 8px;border-radius:5px;background:#eaf3ff;color:#1769aa">业务块</span>
|
||||
<span style="padding:6px 8px;border-radius:5px;background:white;border:1px solid #e4e9f0">字段</span>
|
||||
<span style="padding:6px 8px;border-radius:5px;background:white;border:1px solid #e4e9f0">按钮</span>
|
||||
</div>
|
||||
<div class="label">数据展示</div>
|
||||
<div style="display:grid;gap:7px;margin-top:8px">
|
||||
<div style="padding:10px;border:1px solid #d9e5f4;border-radius:7px;background:white">
|
||||
<strong style="font-size:12px">指标卡</strong>
|
||||
<p style="margin:4px 0 0;font-size:10px;color:#7b8797">一个核心数值与辅助说明</p>
|
||||
</div>
|
||||
<div style="padding:10px;border:1px solid #b9d2f3;border-radius:7px;background:#f4f9ff">
|
||||
<strong style="font-size:12px;color:#1769aa">折线图</strong>
|
||||
<p style="margin:4px 0 0;font-size:10px;color:#68819d">时间或分类趋势</p>
|
||||
</div>
|
||||
<div style="padding:10px;border:1px solid #d9e5f4;border-radius:7px;background:white">
|
||||
<strong style="font-size:12px">柱状图</strong>
|
||||
<p style="margin:4px 0 0;font-size:10px;color:#7b8797">分类数值对比</p>
|
||||
</div>
|
||||
<div style="padding:10px;border:1px solid #d9e5f4;border-radius:7px;background:white">
|
||||
<strong style="font-size:12px">饼图</strong>
|
||||
<p style="margin:4px 0 0;font-size:10px;color:#7b8797">分类占比</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;padding:9px;border-radius:6px;background:#fff8e8;border:1px solid #f2dfae;font-size:10px;color:#765d24">
|
||||
仅后台可见，不进入前台业务块池。
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main style="padding:14px;background:#f4f7fb">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
|
||||
<div>
|
||||
<strong style="font-size:13px">运营概览</strong>
|
||||
<span style="margin-left:7px;font-size:10px;color:#78869a">业务块页面</span>
|
||||
</div>
|
||||
<span style="font-size:10px;color:#4f6f98">桌面预览</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(12,1fr);gap:9px;padding:12px;border:1px dashed #b7c6da;border-radius:8px;background:white">
|
||||
<div style="grid-column:span 4;padding:12px;border:1px solid #e2e8f0;border-radius:7px">
|
||||
<small style="color:#728096">今日订单</small>
|
||||
<div style="font-size:22px;font-weight:700;margin-top:5px;color:#1f2a3d">328</div>
|
||||
<small style="color:#2f8f51">较昨日 +12.6%</small>
|
||||
</div>
|
||||
<div style="grid-column:span 4;padding:12px;border:1px solid #e2e8f0;border-radius:7px">
|
||||
<small style="color:#728096">销售额</small>
|
||||
<div style="font-size:22px;font-weight:700;margin-top:5px;color:#1f2a3d">¥ 86,420</div>
|
||||
<small style="color:#2f8f51">较昨日 +8.2%</small>
|
||||
</div>
|
||||
<div style="grid-column:span 4;padding:12px;border:1px solid #e2e8f0;border-radius:7px">
|
||||
<small style="color:#728096">待发货</small>
|
||||
<div style="font-size:22px;font-weight:700;margin-top:5px;color:#1f2a3d">57</div>
|
||||
<small style="color:#c37b22">需要处理</small>
|
||||
</div>
|
||||
<div style="grid-column:span 8;padding:12px;border:2px solid #409eff;border-radius:7px;box-shadow:0 0 0 2px rgba(64,158,255,.08)">
|
||||
<div style="display:flex;justify-content:space-between">
|
||||
<strong style="font-size:12px">近 30 天销售趋势</strong>
|
||||
<small style="color:#728096">按天</small>
|
||||
</div>
|
||||
<div style="height:125px;margin-top:10px;border-left:1px solid #dfe6ef;border-bottom:1px solid #dfe6ef;position:relative;background:repeating-linear-gradient(to bottom,transparent 0,transparent 30px,#edf1f6 31px)">
|
||||
<div style="position:absolute;left:3%;right:3%;top:55%;height:3px;background:#7aa9e8;transform:rotate(-5deg);border-radius:3px"></div>
|
||||
<div style="position:absolute;left:3%;right:3%;top:39%;height:3px;background:#3f88df;transform:rotate(4deg);border-radius:3px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="grid-column:span 4;padding:12px;border:1px solid #e2e8f0;border-radius:7px">
|
||||
<strong style="font-size:12px">订单状态占比</strong>
|
||||
<div style="width:108px;height:108px;margin:16px auto 8px;border-radius:50%;background:conic-gradient(#4d8fdf 0 58%,#74bd8b 58% 83%,#e4ad5d 83% 100%);position:relative">
|
||||
<div style="position:absolute;inset:29px;border-radius:50%;background:white"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button style="grid-column:span 12;border:1px dashed #b7c6da;border-radius:6px;background:#f9fbfd;color:#64809f;padding:9px;font-size:11px">+ 拖入后台业务块</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside style="border-left:1px solid #e2e8f0;background:white;padding:12px">
|
||||
<div style="display:flex;gap:5px;margin-bottom:13px;font-size:11px">
|
||||
<span style="padding:6px 8px;border-radius:5px;background:#eaf3ff;color:#1769aa">数据</span>
|
||||
<span style="padding:6px 8px;border-radius:5px;background:#f7f8fa">展示</span>
|
||||
<span style="padding:6px 8px;border-radius:5px;background:#f7f8fa">权限</span>
|
||||
</div>
|
||||
<div style="display:grid;gap:9px;font-size:11px">
|
||||
<label><span style="display:block;margin-bottom:4px;color:#667085">标题</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">近 30 天销售趋势</div></label>
|
||||
<label><span style="display:block;margin-bottom:4px;color:#667085">数据表 *</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">订单表 shop_order</div></label>
|
||||
<label><span style="display:block;margin-bottom:4px;color:#667085">维度字段 *</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">创建时间 create_time</div></label>
|
||||
<label><span style="display:block;margin-bottom:4px;color:#667085">时间粒度</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">按天</div></label>
|
||||
<label><span style="display:block;margin-bottom:4px;color:#667085">指标字段 *</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">订单金额 amount</div></label>
|
||||
<label><span style="display:block;margin-bottom:4px;color:#667085">聚合方式 *</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">求和 SUM</div></label>
|
||||
<div>
|
||||
<span style="display:block;margin-bottom:4px;color:#667085">筛选条件</span>
|
||||
<div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">订单状态 = 已支付</div>
|
||||
<button style="margin-top:5px;width:100%;padding:6px;border:1px dashed #b7c6da;border-radius:5px;background:white;color:#64809f">+ 添加条件</button>
|
||||
</div>
|
||||
<label><span style="display:block;margin-bottom:4px;color:#667085">数据范围</span><div style="padding:8px;border:1px solid #d9e1eb;border-radius:5px">最近 30 天</div></label>
|
||||
</div>
|
||||
<div style="margin-top:12px;padding:8px;border-radius:6px;background:#eef8f1;color:#39734a;font-size:10px">
|
||||
配置有效 · 预览数据 30 个分组
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split" style="margin-top:18px">
|
||||
<div class="section">
|
||||
<h3>配置分层</h3>
|
||||
<ol>
|
||||
<li><strong>数据：</strong>表、维度、指标、聚合、筛选、时间范围。</li>
|
||||
<li><strong>展示：</strong>标题、图例、颜色主题、数值格式、空数据文案。</li>
|
||||
<li><strong>权限：</strong>菜单权限标识、数据权限开关；默认继承所在后台页面。</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>交互规则</h3>
|
||||
<ul>
|
||||
<li>拖入后自动选中，右侧给出最少必填项。</li>
|
||||
<li>配置变化后做 400ms 防抖预览，不必先保存。</li>
|
||||
<li>预览失败只影响当前块，画布显示错误卡，不拖垮整页。</li>
|
||||
<li>保存前统一校验；缺失字段、字段类型不匹配时定位到具体配置项。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:15px;padding:13px;border-radius:8px;background:#fff8e8;border:1px solid #f1dfae">
|
||||
<strong>一期布局建议：</strong>继续使用现有上下业务块区和单列业务块页面，不引入自由栅格编辑器；块宽度增加“整行 / 半行 / 三分之一”三个档位，由模板转成 12 栅格。
|
||||
</div>
|
||||
@@ -0,0 +1,124 @@
|
||||
<h2>后台业务块 + 图表业务块：三种落地路线</h2>
|
||||
<p class="subtitle">结合当前项目的 <code>business-blocks-v1</code>、块注册表、表字段映射和代码生成链路。点击你更倾向的方案。</p>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding:16px;background:#f7faff">
|
||||
<div style="display:flex;gap:8px;margin-bottom:10px">
|
||||
<span style="padding:4px 8px;border-radius:6px;background:#e8f2ff;color:#1769aa;font-size:12px">推荐</span>
|
||||
<span style="padding:4px 8px;border-radius:6px;background:#eef7ef;color:#287a3f;font-size:12px">渐进扩展</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:130px 1fr 155px;gap:10px;min-height:225px">
|
||||
<div style="border:1px solid #dfe7f3;border-radius:8px;background:white;padding:10px">
|
||||
<strong style="font-size:12px">后台素材</strong>
|
||||
<div style="margin-top:9px;padding:8px;border-radius:6px;background:#f4f7fb;font-size:11px">指标卡</div>
|
||||
<div style="margin-top:6px;padding:8px;border-radius:6px;background:#f4f7fb;font-size:11px">趋势折线图</div>
|
||||
<div style="margin-top:6px;padding:8px;border-radius:6px;background:#f4f7fb;font-size:11px">分类柱状图</div>
|
||||
<div style="margin-top:6px;padding:8px;border-radius:6px;background:#f4f7fb;font-size:11px">占比饼图</div>
|
||||
</div>
|
||||
<div style="border:1px dashed #b8c7dc;border-radius:8px;background:white;padding:12px">
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:7px">
|
||||
<div style="height:46px;border-radius:6px;background:#eaf2ff"></div>
|
||||
<div style="height:46px;border-radius:6px;background:#edf8f1"></div>
|
||||
<div style="height:46px;border-radius:6px;background:#fff4e8"></div>
|
||||
</div>
|
||||
<div style="height:92px;margin-top:9px;border-radius:6px;background:linear-gradient(180deg,#f0f6ff,#fff);border:1px solid #e3ebf6;position:relative">
|
||||
<div style="position:absolute;left:12px;right:12px;bottom:18px;height:2px;background:#b8d1f5;transform:rotate(-4deg)"></div>
|
||||
<div style="position:absolute;left:12px;right:12px;bottom:35px;height:2px;background:#6fa4e8;transform:rotate(5deg)"></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px">
|
||||
<div style="height:48px;border-radius:6px;background:#f7f9fc;border:1px solid #e6ebf2"></div>
|
||||
<div style="height:48px;border-radius:6px;background:#f7f9fc;border:1px solid #e6ebf2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border:1px solid #dfe7f3;border-radius:8px;background:white;padding:10px;font-size:11px">
|
||||
<strong style="font-size:12px">数据与样式</strong>
|
||||
<p style="margin:9px 0 4px;color:#667085">数据表</p>
|
||||
<div style="padding:7px;border:1px solid #dfe7f3;border-radius:5px">订单表</div>
|
||||
<p style="margin:9px 0 4px;color:#667085">维度 / 指标</p>
|
||||
<div style="padding:7px;border:1px solid #dfe7f3;border-radius:5px">下单日期 / 金额求和</div>
|
||||
<p style="margin:9px 0 4px;color:#667085">筛选</p>
|
||||
<div style="padding:7px;border:1px solid #dfe7f3;border-radius:5px">状态 = 已支付</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>A. 统一业务块协议，增加适用端与图表类型</h3>
|
||||
<p>沿用现有注册表和生成机制，给块定义增加 <code>surfaces</code>、<code>kind</code>、数据查询与图表配置。前后台共用基础设施，具体模板按端区分。</p>
|
||||
<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></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding:16px;background:#fbfaf7">
|
||||
<div style="display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;gap:8px;min-height:225px">
|
||||
<div style="border:1px solid #e6dfd1;border-radius:8px;background:white;padding:12px">
|
||||
<strong>前台业务块库</strong>
|
||||
<div style="margin-top:12px;display:grid;gap:7px">
|
||||
<div style="padding:9px;border-radius:6px;background:#f8f4ec">轮播 / 公告</div>
|
||||
<div style="padding:9px;border-radius:6px;background:#f8f4ec">购物车 / 订单</div>
|
||||
<div style="padding:9px;border-radius:6px;background:#f8f4ec">主子表</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:center;color:#a39274;font-size:22px">↔</div>
|
||||
<div style="border:1px solid #e6dfd1;border-radius:8px;background:white;padding:12px">
|
||||
<strong>后台业务块库</strong>
|
||||
<div style="margin-top:12px;display:grid;gap:7px">
|
||||
<div style="padding:9px;border-radius:6px;background:#f8f4ec">统计看板</div>
|
||||
<div style="padding:9px;border-radius:6px;background:#f8f4ec">审核工作台</div>
|
||||
<div style="padding:9px;border-radius:6px;background:#f8f4ec">运营快捷入口</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>B. 前后台业务块分库</h3>
|
||||
<p>新增独立的 <code>admin-business-blocks</code> 注册目录、接口和生成服务。后台图表走自己的协议，前台现有块不动。</p>
|
||||
<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></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding:16px;background:#faf8ff">
|
||||
<div style="display:grid;grid-template-columns:115px 1fr;gap:10px;min-height:225px">
|
||||
<div style="border:1px solid #e3dbf4;border-radius:8px;background:white;padding:10px;font-size:11px">
|
||||
<strong>通用组件</strong>
|
||||
<div style="margin-top:9px;padding:7px;background:#f5f1fc;border-radius:5px">容器</div>
|
||||
<div style="margin-top:6px;padding:7px;background:#f5f1fc;border-radius:5px">图表</div>
|
||||
<div style="margin-top:6px;padding:7px;background:#f5f1fc;border-radius:5px">表格</div>
|
||||
<div style="margin-top:6px;padding:7px;background:#f5f1fc;border-radius:5px">筛选器</div>
|
||||
<div style="margin-top:6px;padding:7px;background:#f5f1fc;border-radius:5px">按钮</div>
|
||||
</div>
|
||||
<div style="border:1px dashed #baa7df;border-radius:8px;background:white;padding:10px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:55px 90px 55px;gap:6px">
|
||||
<div style="grid-column:span 3;background:#eee7fa;border-radius:5px"></div>
|
||||
<div style="grid-column:span 3;background:#eee7fa;border-radius:5px"></div>
|
||||
<div style="grid-column:span 3;background:#eee7fa;border-radius:5px"></div>
|
||||
<div style="grid-column:span 3;background:#eee7fa;border-radius:5px"></div>
|
||||
<div style="grid-column:span 8;background:#f7f4fc;border:1px solid #e8e0f5;border-radius:5px"></div>
|
||||
<div style="grid-column:span 4;background:#f7f4fc;border:1px solid #e8e0f5;border-radius:5px"></div>
|
||||
<div style="grid-column:span 5;background:#f7f4fc;border:1px solid #e8e0f5;border-radius:5px"></div>
|
||||
<div style="grid-column:span 7;background:#f7f4fc;border:1px solid #e8e0f5;border-radius:5px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>C. 直接升级为通用数据看板设计器</h3>
|
||||
<p>提供自由栅格、任意 ECharts 配置、多个数据集、筛选器联动和组件事件，业务块只是组件模板。</p>
|
||||
<div class="pros-cons">
|
||||
<div class="pros"><h4>优势</h4><ul><li>能力最强</li><li>能覆盖复杂大屏与 BI</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" style="margin-top:22px;padding:14px;border-radius:8px;background:#eef6ff;border:1px solid #d8e9ff">
|
||||
<strong>我的判断：选 A。</strong>
|
||||
<span style="color:#526174"> 当前代码其实已经走到门口：后台模式已有 <code>business_block</code> 页面类型，但页面入口故意不给后台传块定义。补齐“适用端 + 图表数据协议 + 后台模板”即可自然接上。</span>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<div style="text-align:center">
|
||||
<h2>方案 A 已锁定</h2>
|
||||
<p class="subtitle">正在终端中确认图表取数边界，随后会回来展示完整架构与配置界面。</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,120 @@
|
||||
<h2>后台主页指标卡方案方向</h2>
|
||||
<p class="subtitle">先选整体取向：主页要偏“运营驾驶舱”、偏“管理工作台”，还是只做轻量增强？</p>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card" data-choice="ops-dashboard" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div style="display:grid;gap:14px;background:#f5f7fb;padding:18px;border-radius:10px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||||
<div>
|
||||
<div style="font-size:12px;color:#7a8494">今日总览</div>
|
||||
<div style="font-size:22px;font-weight:700;color:#1f2a3d">运营驾驶舱</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<span style="padding:6px 10px;border-radius:14px;background:#fff;color:#409eff;font-size:12px">今日</span>
|
||||
<span style="padding:6px 10px;border-radius:14px;background:#fff;color:#909399;font-size:12px">近7天</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px">
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:14px">
|
||||
<div style="width:34px;height:34px;border-radius:8px;background:#e8f3ff;color:#409eff;display:grid;place-items:center;font-weight:700">¥</div>
|
||||
<div style="font-size:20px;font-weight:700;margin-top:10px">128,430</div>
|
||||
<div style="font-size:12px;color:#8992a3">销售额</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:14px">
|
||||
<div style="width:34px;height:34px;border-radius:8px;background:#ecf8ef;color:#35a853;display:grid;place-items:center;font-weight:700">单</div>
|
||||
<div style="font-size:20px;font-weight:700;margin-top:10px">842</div>
|
||||
<div style="font-size:12px;color:#8992a3">订单数</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:14px">
|
||||
<div style="width:34px;height:34px;border-radius:8px;background:#fff5e6;color:#e6a23c;display:grid;place-items:center;font-weight:700">人</div>
|
||||
<div style="font-size:20px;font-weight:700;margin-top:10px">3,219</div>
|
||||
<div style="font-size:12px;color:#8992a3">用户数</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:14px">
|
||||
<div style="width:34px;height:34px;border-radius:8px;background:#fef0f0;color:#f56c6c;display:grid;place-items:center;font-weight:700">待</div>
|
||||
<div style="font-size:20px;font-weight:700;margin-top:10px">16</div>
|
||||
<div style="font-size:12px;color:#8992a3">待处理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:2fr 1fr;gap:10px">
|
||||
<div style="height:130px;background:#fff;border:1px solid #e6ebf2;border-radius:8px"></div>
|
||||
<div style="height:130px;background:#fff;border:1px solid #e6ebf2;border-radius:8px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>A. 运营驾驶舱</h3>
|
||||
<p>4 个指标卡作为首屏核心，再自动补趋势图/占比图。适合电商、预约、财务、工单这类有强运营数据的项目。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="workbench" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div style="display:grid;grid-template-columns:2fr 1fr;gap:12px;background:#f5f7fb;padding:18px;border-radius:10px">
|
||||
<div style="display:grid;gap:10px">
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:16px">
|
||||
<div style="font-size:20px;font-weight:700;color:#1f2a3d">上午好，管理员</div>
|
||||
<div style="font-size:12px;color:#8992a3;margin-top:6px">今日有 16 项待处理事项</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px">
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:14px">
|
||||
<div style="font-size:18px;font-weight:700">24</div>
|
||||
<div style="font-size:12px;color:#8992a3">待审核</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:14px">
|
||||
<div style="font-size:18px;font-weight:700">9</div>
|
||||
<div style="font-size:12px;color:#8992a3">待发货</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:14px">
|
||||
<div style="font-size:18px;font-weight:700">5</div>
|
||||
<div style="font-size:12px;color:#8992a3">异常</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:120px;background:#fff;border:1px solid #e6ebf2;border-radius:8px"></div>
|
||||
</div>
|
||||
<div style="display:grid;gap:10px">
|
||||
<div style="height:94px;background:#fff;border:1px solid #e6ebf2;border-radius:8px"></div>
|
||||
<div style="height:94px;background:#fff;border:1px solid #e6ebf2;border-radius:8px"></div>
|
||||
<div style="height:94px;background:#fff;border:1px solid #e6ebf2;border-radius:8px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>B. 管理工作台</h3>
|
||||
<p>指标卡服务于“今天要处理什么”，图标更偏任务/流程。适合审批、库存、课程、图书、物业这类管理系统。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="light-upgrade" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div style="display:grid;gap:12px;background:#f5f7fb;padding:18px;border-radius:10px">
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px">
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:14px">
|
||||
<div style="font-size:12px;color:#8992a3">数据表</div>
|
||||
<div style="font-size:20px;font-weight:700;margin-top:8px">8</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:14px">
|
||||
<div style="font-size:12px;color:#8992a3">总记录</div>
|
||||
<div style="font-size:20px;font-weight:700;margin-top:8px">12k</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:14px">
|
||||
<div style="font-size:12px;color:#8992a3">今日新增</div>
|
||||
<div style="font-size:20px;font-weight:700;margin-top:8px">128</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:14px">
|
||||
<div style="font-size:12px;color:#8992a3">异常状态</div>
|
||||
<div style="font-size:20px;font-weight:700;margin-top:8px">3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:170px;background:#fff;border:1px dashed #cfd7e3;border-radius:8px;display:grid;place-items:center;color:#8992a3">保留原首页/空态区域</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>C. 轻量增强</h3>
|
||||
<p>只自动生成通用统计卡，不强推图表和工作台内容。实现成本低、风险小，但业务感会弱一些。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle">点击一个方向即可记录选择；也可以直接在对话里说你更偏哪一种。</p>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">继续在对话里确认生成策略...</p>
|
||||
</div>
|
||||
@@ -0,0 +1,84 @@
|
||||
<h2>更多图表入口怎么放？</h2>
|
||||
<p class="subtitle">目标是把“生成 UML 类图”加进去，同时让图表中心顶部不被按钮挤满。点击你偏好的结构。</p>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">A. 常用图表直显，扩展图表进“更多图表”</div>
|
||||
<div class="mockup-body">
|
||||
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
|
||||
<button class="mock-button">三线表</button>
|
||||
<button class="mock-button">ER 图</button>
|
||||
<button class="mock-button">流程图</button>
|
||||
<button class="mock-button">功能模块图</button>
|
||||
<button class="mock-button">用例图</button>
|
||||
<button class="mock-button">时序图</button>
|
||||
<button class="mock-button">系统架构图</button>
|
||||
<button class="mock-button" style="background:#2563eb;color:#fff">更多图表 ▾</button>
|
||||
</div>
|
||||
<div style="margin-left:auto;margin-top:10px;width:220px;border:1px solid #dbe4f0;border-radius:8px;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.12);overflow:hidden">
|
||||
<div style="padding:10px 12px;background:#eef4ff;color:#1d4ed8;font-weight:700">生成 UML 类图</div>
|
||||
<div style="padding:10px 12px">生成 UML 状态图</div>
|
||||
<div style="padding:10px 12px">生成 UML 活动图</div>
|
||||
<div style="padding:10px 12px">生成组织结构图</div>
|
||||
<div style="padding:10px 12px">生成数据流图</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>推荐：截图同款</h3>
|
||||
<p>符合你截图里的“更多图表”模式，新增 UML 类图最自然，也保留现有主入口。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">B. UML 系列单独聚合</div>
|
||||
<div class="mockup-body">
|
||||
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
|
||||
<button class="mock-button">三线表</button>
|
||||
<button class="mock-button">ER 图</button>
|
||||
<button class="mock-button">流程图</button>
|
||||
<button class="mock-button">功能模块图</button>
|
||||
<button class="mock-button" style="background:#2563eb;color:#fff">UML 图 ▾</button>
|
||||
<button class="mock-button">更多图表 ▾</button>
|
||||
</div>
|
||||
<div style="margin-top:10px;width:210px;border:1px solid #dbe4f0;border-radius:8px;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.12);overflow:hidden">
|
||||
<div style="padding:10px 12px;background:#eef4ff;color:#1d4ed8;font-weight:700">生成 UML 类图</div>
|
||||
<div style="padding:10px 12px">生成 UML 用例图</div>
|
||||
<div style="padding:10px 12px">生成 UML 时序图</div>
|
||||
<div style="padding:10px 12px">生成 UML 状态图</div>
|
||||
<div style="padding:10px 12px">生成 UML 活动图</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>UML 聚合</h3>
|
||||
<p>概念更清楚，但会改变现有用例图、时序图的直接入口位置。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">C. 全部图表改成一个选择器</div>
|
||||
<div class="mockup-body">
|
||||
<div style="display:flex;gap:12px;align-items:center">
|
||||
<input class="mock-input" value="生成 UML 类图" style="max-width:260px">
|
||||
<button class="mock-button" style="background:#2563eb;color:#fff">生成</button>
|
||||
<button class="mock-button">保存当前图表</button>
|
||||
</div>
|
||||
<div class="placeholder" style="margin-top:14px">选择器负责切换所有图表类型</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>选择器集中化</h3>
|
||||
<p>空间最省，但和当前图表中心的横向入口差异最大。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">菜单结构已选 A，继续在聊天里确认 UML 类图的数据来源。</p>
|
||||
</div>
|
||||
@@ -0,0 +1,531 @@
|
||||
<style>
|
||||
.diagram-options {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.option-card {
|
||||
border: 1px solid #d8e2ef;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
|
||||
}
|
||||
|
||||
.option-card:hover {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 14px 34px rgba(37, 99, 235, .12);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.option-card.selected {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
|
||||
}
|
||||
|
||||
.option-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.letter {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.option-head h3 {
|
||||
margin: 0;
|
||||
color: #172033;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.option-head p {
|
||||
margin: 3px 0 0;
|
||||
color: #667085;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mock-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 250px minmax(0, 1fr);
|
||||
min-height: 330px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.mock-side {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
border-right: 1px solid #e1e8f0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.mock-side strong {
|
||||
color: #172033;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mock-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mock-tab {
|
||||
padding: 6px 9px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 6px;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.mock-tab.active {
|
||||
border-color: #2563eb;
|
||||
color: #1d4ed8;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.mock-textarea {
|
||||
min-height: 194px;
|
||||
padding: 12px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
background: #fbfdff;
|
||||
color: #334155;
|
||||
font-family: Consolas, "Microsoft YaHei", monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.mock-main {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mock-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
min-height: 54px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid #e1e8f0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.mock-tools {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tool-chip {
|
||||
padding: 6px 9px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 6px;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tool-chip.active {
|
||||
border-color: #2563eb;
|
||||
color: #1d4ed8;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.paper-canvas {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 276px;
|
||||
padding: 22px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.module-diagram {
|
||||
position: relative;
|
||||
width: 560px;
|
||||
height: 246px;
|
||||
color: #111;
|
||||
font-family: SimSun, "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 2px solid #111;
|
||||
background: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.root-box {
|
||||
left: 200px;
|
||||
top: 0;
|
||||
width: 158px;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.group-box {
|
||||
top: 88px;
|
||||
width: 116px;
|
||||
height: 46px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.group-left {
|
||||
left: 92px;
|
||||
}
|
||||
|
||||
.group-right {
|
||||
left: 368px;
|
||||
}
|
||||
|
||||
.mini-box {
|
||||
top: 176px;
|
||||
width: 34px;
|
||||
height: 68px;
|
||||
padding-top: 7px;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
font-size: 14px;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.v-root {
|
||||
left: 278px;
|
||||
top: 44px;
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.h-root {
|
||||
left: 151px;
|
||||
top: 74px;
|
||||
width: 256px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.v-group-l,
|
||||
.v-group-r {
|
||||
top: 74px;
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.v-group-l {
|
||||
left: 151px;
|
||||
}
|
||||
|
||||
.v-group-r {
|
||||
left: 407px;
|
||||
}
|
||||
|
||||
.h-child-left {
|
||||
left: 48px;
|
||||
top: 158px;
|
||||
width: 240px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.h-child-right {
|
||||
left: 326px;
|
||||
top: 158px;
|
||||
width: 210px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.v-from-group-l,
|
||||
.v-from-group-r {
|
||||
top: 134px;
|
||||
width: 2px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.v-from-group-l {
|
||||
left: 151px;
|
||||
}
|
||||
|
||||
.v-from-group-r {
|
||||
left: 407px;
|
||||
}
|
||||
|
||||
.child-line {
|
||||
top: 158px;
|
||||
width: 2px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.standalone-shell {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
min-height: 330px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.standalone-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid #e1e8f0;
|
||||
}
|
||||
|
||||
.brand {
|
||||
color: #172033;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.standalone-body {
|
||||
display: grid;
|
||||
grid-template-columns: 295px minmax(0, 1fr);
|
||||
min-height: 278px;
|
||||
}
|
||||
|
||||
.tiny-note {
|
||||
margin-top: 10px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.pros-cons {
|
||||
margin: 14px 16px 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.mock-shell,
|
||||
.standalone-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mock-side {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #e1e8f0;
|
||||
}
|
||||
|
||||
.module-diagram {
|
||||
transform: scale(.78);
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2>功能模块图融合方案</h2>
|
||||
<p class="subtitle">你要的 2 和 3 可以合并实现：项目图表中心继续自动读取蓝图生成模块图，同时新增一个 SQL2Doc 风格的缩进结构编辑器。下面是三种入口组织方式，我推荐 A。</p>
|
||||
|
||||
<div class="diagram-options">
|
||||
<div class="option-card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="option-head">
|
||||
<div class="letter">A</div>
|
||||
<div>
|
||||
<h3>推荐：同一个模块图组件，两种入口</h3>
|
||||
<p>图表中心增强自动图；独立编辑器提供左侧缩进结构输入。两边共用布局、导出和渲染逻辑。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-shell">
|
||||
<aside class="mock-side">
|
||||
<strong>图表中心 / 功能模块图</strong>
|
||||
<div class="mock-tabs">
|
||||
<span class="mock-tab active">自动蓝图</span>
|
||||
<span class="mock-tab">缩进编辑</span>
|
||||
<span class="mock-tab">已保存</span>
|
||||
</div>
|
||||
<div class="mock-textarea">学生社团管理系统
|
||||
管理员端
|
||||
注册登录
|
||||
用户管理
|
||||
社团管理
|
||||
成员管理
|
||||
活动管理
|
||||
公告管理
|
||||
系统管理
|
||||
普通用户端
|
||||
注册登录
|
||||
社团浏览
|
||||
社团申请
|
||||
活动浏览
|
||||
活动报名
|
||||
个人中心</div>
|
||||
<p class="tiny-note">自动蓝图会一键转成同样的缩进结构；人工编辑可保存为草稿。</p>
|
||||
</aside>
|
||||
<main class="mock-main">
|
||||
<div class="mock-toolbar">
|
||||
<div class="mock-tools">
|
||||
<span class="tool-chip active">标准</span>
|
||||
<span class="tool-chip">宽松</span>
|
||||
<span class="tool-chip">紧凑</span>
|
||||
<span class="tool-chip active">横向</span>
|
||||
<span class="tool-chip">竖向</span>
|
||||
</div>
|
||||
<div class="mock-tools">
|
||||
<span class="tool-chip">SVG</span>
|
||||
<span class="tool-chip active">PNG</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="paper-canvas">
|
||||
<div class="module-diagram">
|
||||
<span class="line v-root"></span><span class="line h-root"></span>
|
||||
<span class="line v-group-l"></span><span class="line v-group-r"></span>
|
||||
<span class="line v-from-group-l"></span><span class="line v-from-group-r"></span>
|
||||
<span class="line h-child-left"></span><span class="line h-child-right"></span>
|
||||
<div class="box root-box">学生社团管理系统</div>
|
||||
<div class="box group-box group-left">管理员端</div>
|
||||
<div class="box group-box group-right">普通用户端</div>
|
||||
<div class="box mini-box" style="left:31px">注册登录</div>
|
||||
<span class="line child-line" style="left:48px"></span>
|
||||
<div class="box mini-box" style="left:71px">用户管理</div>
|
||||
<span class="line child-line" style="left:88px"></span>
|
||||
<div class="box mini-box" style="left:111px">社团管理</div>
|
||||
<span class="line child-line" style="left:128px"></span>
|
||||
<div class="box mini-box" style="left:151px">成员管理</div>
|
||||
<span class="line child-line" style="left:168px"></span>
|
||||
<div class="box mini-box" style="left:191px">活动管理</div>
|
||||
<span class="line child-line" style="left:208px"></span>
|
||||
<div class="box mini-box" style="left:231px">公告管理</div>
|
||||
<span class="line child-line" style="left:248px"></span>
|
||||
<div class="box mini-box" style="left:271px">系统管理</div>
|
||||
<span class="line child-line" style="left:288px"></span>
|
||||
<div class="box mini-box" style="left:309px">注册登录</div>
|
||||
<span class="line child-line" style="left:326px"></span>
|
||||
<div class="box mini-box" style="left:349px">社团浏览</div>
|
||||
<span class="line child-line" style="left:366px"></span>
|
||||
<div class="box mini-box" style="left:389px">社团申请</div>
|
||||
<span class="line child-line" style="left:406px"></span>
|
||||
<div class="box mini-box" style="left:429px">活动浏览</div>
|
||||
<span class="line child-line" style="left:446px"></span>
|
||||
<div class="box mini-box" style="left:469px">活动报名</div>
|
||||
<span class="line child-line" style="left:486px"></span>
|
||||
<div class="box mini-box" style="left:509px">个人中心</div>
|
||||
<span class="line child-line" style="left:526px"></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</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></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option-card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="option-head">
|
||||
<div class="letter">B</div>
|
||||
<div>
|
||||
<h3>完整 SQL2Doc 风格页面优先</h3>
|
||||
<p>先做一个独立“功能模块图编辑器”，图表中心只跳转过去并携带项目蓝图。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="standalone-shell">
|
||||
<div class="standalone-top">
|
||||
<span class="brand">功能模块图编辑器</span>
|
||||
<div class="mock-tools">
|
||||
<span class="tool-chip active">生成</span>
|
||||
<span class="tool-chip">示例</span>
|
||||
<span class="tool-chip">导出</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="standalone-body">
|
||||
<aside class="mock-side">
|
||||
<strong>缩进结构</strong>
|
||||
<div class="mock-textarea">第一行顶格写系统名
|
||||
每增加一级缩进 2 个空格
|
||||
第二层为模块
|
||||
第三层及以下为功能</div>
|
||||
</aside>
|
||||
<div class="paper-canvas">
|
||||
<div class="module-diagram" style="transform:scale(.86)">
|
||||
<span class="line v-root"></span><span class="line h-root"></span>
|
||||
<span class="line v-group-l"></span><span class="line v-group-r"></span>
|
||||
<span class="line v-from-group-l"></span><span class="line v-from-group-r"></span>
|
||||
<span class="line h-child-left"></span><span class="line h-child-right"></span>
|
||||
<div class="box root-box">学生社团管理系统</div>
|
||||
<div class="box group-box group-left">管理员端</div>
|
||||
<div class="box group-box group-right">普通用户端</div>
|
||||
<div class="box mini-box" style="left:71px">用户管理</div>
|
||||
<div class="box mini-box" style="left:151px">社团管理</div>
|
||||
<div class="box mini-box" style="left:231px">活动管理</div>
|
||||
<div class="box mini-box" style="left:349px">社团浏览</div>
|
||||
<div class="box mini-box" style="left:429px">活动报名</div>
|
||||
<div class="box mini-box" style="left:509px">个人中心</div>
|
||||
</div>
|
||||
</div>
|
||||
</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></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option-card" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="option-head">
|
||||
<div class="letter">C</div>
|
||||
<div>
|
||||
<h3>只在图表中心内做双模式</h3>
|
||||
<p>不新增独立页面，图表中心的“功能模块图”里切换自动蓝图和缩进结构。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-shell" style="grid-template-columns:210px minmax(0,1fr)">
|
||||
<aside class="mock-side">
|
||||
<strong>图表中心</strong>
|
||||
<div class="mock-tabs">
|
||||
<span class="mock-tab">ER 图</span>
|
||||
<span class="mock-tab active">功能模块图</span>
|
||||
<span class="mock-tab">架构图</span>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="mock-main">
|
||||
<div class="mock-toolbar">
|
||||
<div class="mock-tools">
|
||||
<span class="tool-chip active">项目蓝图</span>
|
||||
<span class="tool-chip">缩进结构</span>
|
||||
</div>
|
||||
<div class="mock-tools"><span class="tool-chip active">导出</span></div>
|
||||
</div>
|
||||
<div class="paper-canvas">
|
||||
<div class="module-diagram" style="transform:scale(.88)">
|
||||
<div class="box root-box">学生社团管理系统</div>
|
||||
<div class="box group-box group-left">管理员端</div>
|
||||
<div class="box group-box group-right">普通用户端</div>
|
||||
<span class="line v-root"></span><span class="line h-root"></span>
|
||||
<span class="line v-group-l"></span><span class="line v-group-r"></span>
|
||||
<span class="line v-from-group-l"></span><span class="line v-from-group-r"></span>
|
||||
<span class="line h-child-left"></span><span class="line h-child-right"></span>
|
||||
<div class="box mini-box" style="left:91px">用户管理</div>
|
||||
<div class="box mini-box" style="left:171px">社团管理</div>
|
||||
<div class="box mini-box" style="left:251px">活动管理</div>
|
||||
<div class="box mini-box" style="left:369px">社团浏览</div>
|
||||
<div class="box mini-box" style="left:449px">活动报名</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</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>后续想做通用 SQL2Doc 风格工具时还要拆。</li></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">方案 A 已确认，接下来在对话里确认设计规格。</p>
|
||||
</div>
|
||||
@@ -0,0 +1,99 @@
|
||||
<h2>A 方案细化：集成式页面设计工作台</h2>
|
||||
<p class="subtitle">一期不做万能低代码平台，先在现有“项目生成工作台”里新增一个可视化步骤，服务于模板生成。</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">页面设计器主界面</div>
|
||||
<div class="mockup-body" style="display:grid; gap:12px;">
|
||||
<div style="display:grid; grid-template-columns: 220px minmax(360px, 1fr) 280px; gap:12px; min-height:360px;">
|
||||
<div class="mock-sidebar" style="display:grid; align-content:start; gap:10px;">
|
||||
<div class="label">菜单与页面</div>
|
||||
<div style="padding:10px; background:#e8f1ff; border-radius:6px; border-left:4px solid #2563eb;">
|
||||
图书目录<br><small>/books · 列表页</small>
|
||||
</div>
|
||||
<div style="padding:10px; background:#fff; border-radius:6px;">
|
||||
图书详情<br><small>/books/:id · 详情页</small>
|
||||
</div>
|
||||
<div style="padding:10px; background:#fff; border-radius:6px;">
|
||||
我的借阅<br><small>/my-borrows · 当前用户列表</small>
|
||||
</div>
|
||||
<button class="mock-button">+ 添加菜单</button>
|
||||
<button class="mock-button">+ 添加子页面</button>
|
||||
</div>
|
||||
|
||||
<div class="mock-content" style="display:grid; align-content:start; gap:10px;">
|
||||
<div class="label">页面画布：列表页布局</div>
|
||||
<div class="placeholder" style="height:52px;">
|
||||
查询区：书名、分类、状态、创建时间
|
||||
</div>
|
||||
<div class="placeholder" style="height:48px;">
|
||||
工具栏：新增、导出、批量删除、业务按钮
|
||||
</div>
|
||||
<div class="placeholder" style="height:118px;">
|
||||
表格：封面、书名、作者、库存、状态、更新时间、行操作
|
||||
</div>
|
||||
<div class="placeholder" style="height:48px;">
|
||||
分页：页码 / 每页条数 / 总数
|
||||
</div>
|
||||
<div class="placeholder" style="height:54px;">
|
||||
弹窗表单：新增 / 编辑字段布局
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mock-sidebar" style="display:grid; align-content:start; gap:10px;">
|
||||
<div class="label">属性面板</div>
|
||||
<input class="mock-input" placeholder="页面名称：图书目录">
|
||||
<input class="mock-input" placeholder="绑定表：book_info">
|
||||
<input class="mock-input" placeholder="页面类型：list">
|
||||
<input class="mock-input" placeholder="显示字段：6 个">
|
||||
<input class="mock-input" placeholder="查询字段：4 个">
|
||||
<input class="mock-input" placeholder="按钮动作：新增 / 导出">
|
||||
<button class="mock-button">保存页面设计</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">一期保存的核心 DSL</div>
|
||||
<div class="mockup-body">
|
||||
<pre style="margin:0; white-space:pre-wrap; font-size:12px;">appBlueprint.frontendPages[].layout = {
|
||||
pageType: "list",
|
||||
tableName: "book_info",
|
||||
regions: [
|
||||
{ type: "query", fields: ["title", "category", "status"] },
|
||||
{ type: "toolbar", actions: ["create", "export"] },
|
||||
{ type: "table", fields: ["cover", "title", "stock"] },
|
||||
{ type: "form", fields: ["title", "author", "price"] }
|
||||
]
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">生成链路</div>
|
||||
<div class="mockup-body" style="display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px;">
|
||||
<div class="placeholder">保存布局</div>
|
||||
<div class="placeholder">校验字段/动作</div>
|
||||
<div class="placeholder">Velocity 读取 DSL</div>
|
||||
<div class="placeholder">生成 Vue 页面</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="frontend-only" onclick="toggleSelect(this)">
|
||||
<div class="letter">1</div>
|
||||
<div class="content">
|
||||
<h3>一期只做用户前台页面</h3>
|
||||
<p>覆盖 frontendMenus / frontendPages / qing 前台模板，先把面向用户的页面生成做漂亮、做稳。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="frontend-and-admin" onclick="toggleSelect(this)">
|
||||
<div class="letter">2</div>
|
||||
<div class="content">
|
||||
<h3>一期同时做前台 + 后台管理页</h3>
|
||||
<p>设计器范围更完整，但会同时牵动 qing 前台模板和 RuoYi 后台 Vue 模板，交付风险更高。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,117 @@
|
||||
<h2>菜单与页面设计器方案草图</h2>
|
||||
<p class="subtitle">目标是把“菜单、页面布局、字段显示、按钮动作、模板生成”串成一个可保存、可预览、可生成代码的设计工作台。先看 3 个落地方向，点选你更偏好的方向。</p>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">A. 集成到现有生成工作台</div>
|
||||
<div class="mockup-body" style="display:grid; gap:10px;">
|
||||
<div style="display:grid; grid-template-columns: 180px 1fr 220px; gap:10px; min-height:220px;">
|
||||
<div class="mock-sidebar">
|
||||
<div class="label">菜单树</div>
|
||||
<div style="padding:8px; background:#e8f1ff; border-radius:6px; margin-top:10px;">图书目录</div>
|
||||
<div style="padding:8px; margin-top:6px;">我的借阅</div>
|
||||
<div style="padding:8px; margin-top:6px;">订单记录</div>
|
||||
</div>
|
||||
<div class="mock-content">
|
||||
<div class="label">页面画布</div>
|
||||
<div class="placeholder" style="height:36px;">搜索区：书名 / 分类 / 状态</div>
|
||||
<div class="placeholder" style="height:52px;">工具栏：新增 / 导出 / 批量删除</div>
|
||||
<div class="placeholder" style="height:92px;">表格列：书名、作者、库存、状态、操作</div>
|
||||
</div>
|
||||
<div class="mock-sidebar">
|
||||
<div class="label">属性面板</div>
|
||||
<input class="mock-input" placeholder="页面标题">
|
||||
<input class="mock-input" placeholder="绑定数据表">
|
||||
<button class="mock-button">保存设计</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>A. 轻量集成版（推荐先做）</h3>
|
||||
<p>在 easycode-web 的生成页中新增“页面设计”步骤，复用现有 appBlueprint、database、businessActions。实现最快，风险最低。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">B. 独立低代码设计器</div>
|
||||
<div class="mockup-body" style="display:grid; gap:10px;">
|
||||
<div style="display:grid; grid-template-columns: 160px 1fr 260px; gap:10px; min-height:220px;">
|
||||
<div class="mock-sidebar">
|
||||
<div class="label">组件库</div>
|
||||
<button class="mock-button">查询表单</button>
|
||||
<button class="mock-button">数据表格</button>
|
||||
<button class="mock-button">详情卡片</button>
|
||||
<button class="mock-button">动作按钮</button>
|
||||
</div>
|
||||
<div class="mock-content">
|
||||
<div class="label">拖拽画布</div>
|
||||
<div class="placeholder" style="height:50px;">Header</div>
|
||||
<div class="placeholder" style="height:110px;">Grid / Form / Table 自由组合</div>
|
||||
<div class="placeholder" style="height:42px;">Footer Actions</div>
|
||||
</div>
|
||||
<div class="mock-sidebar">
|
||||
<div class="label">配置</div>
|
||||
<input class="mock-input" placeholder="组件 ID">
|
||||
<input class="mock-input" placeholder="字段映射">
|
||||
<input class="mock-input" placeholder="按钮动作">
|
||||
<input class="mock-input" placeholder="权限规则">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>B. 完整低代码版</h3>
|
||||
<p>独立页面设计器，支持组件库、嵌套容器、拖拽排序、响应式布局、权限和动作绑定。能力强，但一期范围会明显变大。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">C. AI 蓝图 + 人工微调</div>
|
||||
<div class="mockup-body" style="display:grid; gap:10px;">
|
||||
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px; min-height:220px;">
|
||||
<div class="mock-content">
|
||||
<div class="label">AI 生成结构</div>
|
||||
<div class="placeholder" style="height:44px;">菜单与页面</div>
|
||||
<div class="placeholder" style="height:44px;">字段显示规则</div>
|
||||
<div class="placeholder" style="height:44px;">按钮与业务动作</div>
|
||||
<div class="placeholder" style="height:44px;">模板参数</div>
|
||||
</div>
|
||||
<div class="mock-content">
|
||||
<div class="label">人工确认</div>
|
||||
<div class="placeholder" style="height:76px;">可视化微调</div>
|
||||
<div class="placeholder" style="height:76px;">JSON 差异对照</div>
|
||||
<button class="mock-button">确认并生成模板</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>C. AI 辅助配置版</h3>
|
||||
<p>让 AI 先生成页面布局 DSL，再由用户在可视化界面修正。很贴合当前 AI 任务链，但需要更强的校验和回滚。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>我建议的一期边界</h3>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">一期先打通闭环：设计 -> 保存 -> 预览 -> 模板生成</div>
|
||||
<div class="mockup-body" style="display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:10px;">
|
||||
<div class="placeholder">菜单树</div>
|
||||
<div class="placeholder">页面 DSL</div>
|
||||
<div class="placeholder">字段显示</div>
|
||||
<div class="placeholder">按钮绑定</div>
|
||||
<div class="placeholder">Velocity 生成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user