85 lines
4.2 KiB
HTML
85 lines
4.2 KiB
HTML
|
<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>
|