214 lines
6.3 KiB
HTML
214 lines
6.3 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>A 方案：集成式页面设计工作台</title>
|
|||
|
|
<style>
|
|||
|
|
* { box-sizing: border-box; }
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
background: #f5f7fb;
|
|||
|
|
color: #1f2937;
|
|||
|
|
font-family: "Microsoft YaHei", Arial, sans-serif;
|
|||
|
|
}
|
|||
|
|
main {
|
|||
|
|
width: min(1180px, calc(100% - 48px));
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 28px 0 48px;
|
|||
|
|
}
|
|||
|
|
h1, h2, h3, p { margin: 0; letter-spacing: 0; }
|
|||
|
|
h1 { font-size: 28px; line-height: 1.25; }
|
|||
|
|
h2 { font-size: 18px; margin-bottom: 12px; }
|
|||
|
|
h3 { font-size: 15px; margin-bottom: 8px; }
|
|||
|
|
p { color: #64748b; line-height: 1.7; }
|
|||
|
|
.hero {
|
|||
|
|
display: grid;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 18px;
|
|||
|
|
}
|
|||
|
|
.panel {
|
|||
|
|
margin-top: 16px;
|
|||
|
|
border: 1px solid #dfe7f2;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #fff;
|
|||
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
|
|||
|
|
}
|
|||
|
|
.panel-title {
|
|||
|
|
padding: 14px 16px;
|
|||
|
|
border-bottom: 1px solid #e7edf5;
|
|||
|
|
color: #334155;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
.panel-body {
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
.designer {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 220px minmax(360px, 1fr) 280px;
|
|||
|
|
gap: 12px;
|
|||
|
|
min-height: 390px;
|
|||
|
|
}
|
|||
|
|
.sidebar, .canvas, .props {
|
|||
|
|
min-width: 0;
|
|||
|
|
border: 1px solid #e4ebf5;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #fbfdff;
|
|||
|
|
padding: 12px;
|
|||
|
|
}
|
|||
|
|
.label {
|
|||
|
|
color: #475569;
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
}
|
|||
|
|
.menu-item {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #e5ebf3;
|
|||
|
|
}
|
|||
|
|
.menu-item.active {
|
|||
|
|
border-left: 4px solid #2563eb;
|
|||
|
|
background: #e8f1ff;
|
|||
|
|
}
|
|||
|
|
small { color: #64748b; }
|
|||
|
|
.drop {
|
|||
|
|
display: grid;
|
|||
|
|
align-content: center;
|
|||
|
|
min-height: 50px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
padding: 12px;
|
|||
|
|
border: 1px dashed #b8c6d9;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #fff;
|
|||
|
|
color: #334155;
|
|||
|
|
}
|
|||
|
|
.drop.table { min-height: 118px; }
|
|||
|
|
.input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 34px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
border: 1px solid #d6e0ed;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
background: #fff;
|
|||
|
|
color: #475569;
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 34px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
border: 0;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
background: #2563eb;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
.grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1.1fr 0.9fr;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
pre {
|
|||
|
|
overflow: auto;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 14px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #0f172a;
|
|||
|
|
color: #dbeafe;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
.flow {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
.step {
|
|||
|
|
display: grid;
|
|||
|
|
place-items: center;
|
|||
|
|
min-height: 72px;
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid #e4ebf5;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #f8fafc;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #334155;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 980px) {
|
|||
|
|
.designer, .grid, .flow { grid-template-columns: 1fr; }
|
|||
|
|
main { width: min(100% - 28px, 1180px); }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<main>
|
|||
|
|
<section class="hero">
|
|||
|
|
<h1>A 方案：集成式页面设计工作台</h1>
|
|||
|
|
<p>一期先接在现有 easycode-web 生成页里，新增“页面设计”步骤。它复用系统蓝图、数据库设计和业务动作绑定，让用户通过可视化方式调整菜单、页面区域、字段显示和按钮动作，最后影响模板生成。</p>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="panel">
|
|||
|
|
<div class="panel-title">主界面结构</div>
|
|||
|
|
<div class="panel-body designer">
|
|||
|
|
<aside class="sidebar">
|
|||
|
|
<div class="label">菜单与页面</div>
|
|||
|
|
<div class="menu-item active">图书目录<br><small>/books · 列表页</small></div>
|
|||
|
|
<div class="menu-item">图书详情<br><small>/books/:id · 详情页</small></div>
|
|||
|
|
<div class="menu-item">我的借阅<br><small>/my-borrows · 当前用户列表</small></div>
|
|||
|
|
<button class="btn">添加菜单 / 页面</button>
|
|||
|
|
</aside>
|
|||
|
|
<section class="canvas">
|
|||
|
|
<div class="label">页面画布：列表页布局</div>
|
|||
|
|
<div class="drop">查询区：书名、分类、状态、创建时间</div>
|
|||
|
|
<div class="drop">工具栏：新增、导出、批量删除、业务按钮</div>
|
|||
|
|
<div class="drop table">表格：封面、书名、作者、库存、状态、更新时间、行操作</div>
|
|||
|
|
<div class="drop">分页：页码 / 每页条数 / 总数</div>
|
|||
|
|
<div class="drop">弹窗表单：新增 / 编辑字段布局</div>
|
|||
|
|
</section>
|
|||
|
|
<aside class="props">
|
|||
|
|
<div class="label">属性面板</div>
|
|||
|
|
<input class="input" value="页面名称：图书目录">
|
|||
|
|
<input class="input" value="绑定表：book_info">
|
|||
|
|
<input class="input" value="页面类型：list">
|
|||
|
|
<input class="input" value="显示字段：6 个">
|
|||
|
|
<input class="input" value="查询字段：4 个">
|
|||
|
|
<input class="input" value="按钮动作：新增 / 导出">
|
|||
|
|
<button class="btn">保存页面设计</button>
|
|||
|
|
</aside>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="grid">
|
|||
|
|
<div class="panel">
|
|||
|
|
<div class="panel-title">一期保存的页面 DSL</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<pre>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="panel">
|
|||
|
|
<div class="panel-title">生成链路</div>
|
|||
|
|
<div class="panel-body flow">
|
|||
|
|
<div class="step">保存布局</div>
|
|||
|
|
<div class="step">校验字段</div>
|
|||
|
|
<div class="step">校验按钮</div>
|
|||
|
|
<div class="step">模板读取 DSL</div>
|
|||
|
|
<div class="step">生成 Vue 页面</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
</body>
|
|||
|
|
</html>
|