189 lines
6.2 KiB
HTML
189 lines
6.2 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>前台页面设计器：page_design 独立存储</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; }
|
||
.flow {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
gap: 12px;
|
||
align-items: stretch;
|
||
}
|
||
.step {
|
||
display: grid;
|
||
align-content: center;
|
||
gap: 6px;
|
||
min-height: 110px;
|
||
padding: 14px;
|
||
border: 1px solid #e4ebf5;
|
||
border-radius: 8px;
|
||
background: #f8fafc;
|
||
text-align: center;
|
||
}
|
||
.step strong { color: #1f2937; }
|
||
.step span { color: #64748b; font-size: 13px; line-height: 1.5; }
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
pre {
|
||
overflow: auto;
|
||
margin: 0;
|
||
padding: 14px;
|
||
border-radius: 8px;
|
||
background: #0f172a;
|
||
color: #dbeafe;
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
}
|
||
.table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
.table th, .table td {
|
||
border-bottom: 1px solid #e8eef7;
|
||
padding: 10px 8px;
|
||
text-align: left;
|
||
vertical-align: top;
|
||
}
|
||
.table th { color: #475569; background: #f8fafc; }
|
||
.tag {
|
||
display: inline-flex;
|
||
margin: 2px;
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
background: #e8f1ff;
|
||
color: #1d4ed8;
|
||
font-size: 12px;
|
||
}
|
||
@media (max-width: 980px) {
|
||
.flow, .grid { grid-template-columns: 1fr; }
|
||
main { width: min(100% - 28px, 1180px); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<section class="hero">
|
||
<h1>前台页面设计器：独立 page_design 存储</h1>
|
||
<p>页面设计从 appBlueprint 中拆出来，成为项目内独立主数据。appBlueprint 仍负责角色、菜单、页面入口；page_design 负责布局、字段、按钮、权限、生成参数。</p>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-title">数据流</div>
|
||
<div class="panel-body flow">
|
||
<div class="step"><strong>appBlueprint</strong><span>生成菜单与页面入口，确定 pageCode</span></div>
|
||
<div class="step"><strong>page_design</strong><span>每个前台页面一条设计记录</span></div>
|
||
<div class="step"><strong>Designer UI</strong><span>读取/保存 layout_json 与 action_json</span></div>
|
||
<div class="step"><strong>Generator</strong><span>合并表字段、业务动作、页面设计</span></div>
|
||
<div class="step"><strong>Vue 模板</strong><span>生成用户前台页面代码</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="grid">
|
||
<div class="panel">
|
||
<div class="panel-title">front_project_page_design 表</div>
|
||
<div class="panel-body">
|
||
<table class="table">
|
||
<thead>
|
||
<tr><th>字段</th><th>作用</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>design_id</td><td>页面设计 ID</td></tr>
|
||
<tr><td>project_id / user_id</td><td>归属项目与用户</td></tr>
|
||
<tr><td>page_code</td><td>关联 appBlueprint.frontendPages[].code</td></tr>
|
||
<tr><td>menu_code</td><td>关联前台菜单</td></tr>
|
||
<tr><td>page_name / route_path</td><td>页面显示名与路由</td></tr>
|
||
<tr><td>page_type</td><td><span class="tag">list</span><span class="tag">detail</span><span class="tag">form</span><span class="tag">current_user_list</span></td></tr>
|
||
<tr><td>table_name</td><td>绑定业务表</td></tr>
|
||
<tr><td>layout_json</td><td>区域、字段、排序、组件配置</td></tr>
|
||
<tr><td>action_json</td><td>按钮、业务动作、刷新规则</td></tr>
|
||
<tr><td>status / version</td><td>草稿状态和乐观锁版本</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-title">layout_json 示例</div>
|
||
<div class="panel-body">
|
||
<pre>{
|
||
"canvas": "frontend-list-v1",
|
||
"regions": [
|
||
{
|
||
"id": "query",
|
||
"type": "query",
|
||
"fields": ["title", "category", "status"]
|
||
},
|
||
{
|
||
"id": "toolbar",
|
||
"type": "toolbar",
|
||
"actions": ["create", "export", "batchDelete"]
|
||
},
|
||
{
|
||
"id": "table",
|
||
"type": "table",
|
||
"fields": ["cover", "title", "author", "stock", "status"],
|
||
"rowActions": ["view", "edit", "delete"]
|
||
},
|
||
{
|
||
"id": "form",
|
||
"type": "dialogForm",
|
||
"fields": ["title", "author", "category", "price"]
|
||
}
|
||
]
|
||
}</pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-title">一期接口</div>
|
||
<div class="panel-body flow">
|
||
<div class="step"><strong>GET /page-designs</strong><span>读取项目页面设计列表</span></div>
|
||
<div class="step"><strong>POST /page-designs/init</strong><span>从 appBlueprint 初始化设计记录</span></div>
|
||
<div class="step"><strong>GET /page-designs/{id}</strong><span>读取单页设计</span></div>
|
||
<div class="step"><strong>PUT /page-designs/{id}</strong><span>保存布局和动作</span></div>
|
||
<div class="step"><strong>POST /preview</strong><span>生成项目时读取 page_design</span></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|