u
This commit is contained in:
oneao committed
1 parent
3af982d669
commit
6a24be0864
28 files changed
+572
-458
No files matched your search
@@ -1,180 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>字段配置示例</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial;
|
||||
padding: 20px;
|
||||
}
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Drawer Menu</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
/* Drawer 背景遮罩 */
|
||||
.drawer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.35);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
}
|
||||
.drawer-overlay.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.config-row td {
|
||||
background: #fafafa;
|
||||
padding: 15px;
|
||||
}
|
||||
/* Drawer 主体 */
|
||||
.drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -280px; /* 初始隐藏 */
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
box-shadow: -2px 0 10px rgba(0,0,0,0.1);
|
||||
transition: 0.3s;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.config-panel {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.drawer.show {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.config-group {
|
||||
flex: 1;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
}
|
||||
/* Drawer 顶部标题 */
|
||||
.drawer-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.config-group h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
/* 分组标题 */
|
||||
.group-title {
|
||||
margin: 20px 0 8px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.config-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* 每个功能按钮 */
|
||||
.drawer-item {
|
||||
padding: 12px 10px;
|
||||
border-radius: 8px;
|
||||
background: #f8f8f8;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.config-item label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
.drawer-item:hover {
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.config-item input[type="text"],
|
||||
.config-item input[type="number"],
|
||||
.config-item textarea {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
margin-top: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
/* 打开 Drawer 按钮（演示用） */
|
||||
.open-btn {
|
||||
margin: 30px;
|
||||
padding: 10px 20px;
|
||||
background: #0080ff;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="open-btn" onclick="openDrawer()">打开菜单</div>
|
||||
|
||||
<h2>字段配置示例</h2>
|
||||
<!-- 遮罩 -->
|
||||
<div class="drawer-overlay" id="drawerOverlay" onclick="closeDrawer()"></div>
|
||||
|
||||
<table id="fieldTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>字段名</th>
|
||||
<th>类型</th>
|
||||
<th>必填</th>
|
||||
<th style="width: 80px">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="fieldTableBody">
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Drawer -->
|
||||
<div class="drawer" id="drawer">
|
||||
<div class="drawer-title">功能菜单</div>
|
||||
|
||||
<script>
|
||||
const fields = [
|
||||
{ id: 1, name: "username", type: "string", required: true, default: "", repeat: false, maxLen: 20, desc: "" },
|
||||
{ id: 2, name: "age", type: "number", required: false, default: 0, repeat: false, maxLen: 3, desc: "" },
|
||||
];
|
||||
<div class="group-title">账单操作</div>
|
||||
<div class="drawer-item">新增账单</div>
|
||||
<div class="drawer-item">批量管理</div>
|
||||
<div class="drawer-item">分类管理</div>
|
||||
|
||||
let openConfigRowId = null;
|
||||
<div class="group-title">数据统计</div>
|
||||
<div class="drawer-item">月度报表</div>
|
||||
<div class="drawer-item">年度报表</div>
|
||||
<div class="drawer-item">图表分析</div>
|
||||
|
||||
function renderTable() {
|
||||
const tbody = document.getElementById("fieldTableBody");
|
||||
tbody.innerHTML = "";
|
||||
<div class="group-title">设置</div>
|
||||
<div class="drawer-item">预算管理</div>
|
||||
<div class="drawer-item">数据导出</div>
|
||||
<div class="drawer-item">云同步</div>
|
||||
|
||||
fields.forEach(field => {
|
||||
// 主行
|
||||
const tr = document.createElement("tr");
|
||||
tr.innerHTML = `
|
||||
<td>${field.name}</td>
|
||||
<td>${field.type}</td>
|
||||
<td>${field.required ? "是" : "否"}</td>
|
||||
<td><button onclick="toggleConfig(${field.id})">配置</button></td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
</div>
|
||||
|
||||
// 配置行
|
||||
if (openConfigRowId === field.id) {
|
||||
const cfgRow = document.createElement("tr");
|
||||
cfgRow.className = "config-row";
|
||||
cfgRow.innerHTML = `
|
||||
<td colspan="4">
|
||||
${renderConfigPanel(field)}
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(cfgRow);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toggleConfig(id) {
|
||||
openConfigRowId = openConfigRowId === id ? null : id;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
function renderConfigPanel(field) {
|
||||
return `
|
||||
<div class="config-panel">
|
||||
|
||||
<div class="config-group">
|
||||
<h4>基础配置</h4>
|
||||
<div class="config-item">
|
||||
<label>字段名</label>
|
||||
<input type="text" value="${field.name}" oninput="updateField(${field.id}, 'name', this.value)">
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<label>默认值</label>
|
||||
<input type="text" value="${field.default}" oninput="updateField(${field.id}, 'default', this.value)">
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<label><input type="checkbox" ${field.repeat ? "checked" : ""} onchange="updateField(${field.id}, 'repeat', this.checked)"> 可重复</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<h4>校验配置</h4>
|
||||
<div class="config-item">
|
||||
<label>必填</label>
|
||||
<input type="checkbox" ${field.required ? "checked" : ""} onchange="updateField(${field.id}, 'required', this.checked)">
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<label>最大长度</label>
|
||||
<input type="number" value="${field.maxLen}" oninput="updateField(${field.id}, 'maxLen', this.value)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<h4>展示配置</h4>
|
||||
<div class="config-item">
|
||||
<label>说明</label>
|
||||
<textarea rows="4" oninput="updateField(${field.id}, 'desc', this.value)">${field.desc}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function updateField(id, key, value) {
|
||||
const field = fields.find(f => f.id === id);
|
||||
field[key] = value;
|
||||
}
|
||||
|
||||
renderTable();
|
||||
</script>
|
||||
<script>
|
||||
function openDrawer() {
|
||||
document.getElementById("drawer").classList.add("show");
|
||||
document.getElementById("drawerOverlay").classList.add("show");
|
||||
}
|
||||
function closeDrawer() {
|
||||
document.getElementById("drawer").classList.remove("show");
|
||||
document.getElementById("drawerOverlay").classList.remove("show");
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Reference in new issue
Block a user