feat: expand EasyCode software factory workflows

This commit is contained in:
王鹏
2026-07-15 12:48:50 +08:00
parent fcfa4374d7
commit 79dea897bc
1108 changed files with 163774 additions and 21593 deletions

View File

@@ -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>

View File

@@ -0,0 +1,3 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
<p class="subtitle">方案 A 已确认,接下来在对话里确认设计规格。</p>
</div>