hmo/piano-plan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 统一编辑Modal样式，添加sticky底部按钮栏，目标内容使用Markdown编辑器

Browse Source
This commit is contained in:
hmo
2026-04-23 22:43:23 +08:00
parent 378c9913ec
commit 26dd158f01
2 changed files with 109 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/problems.html
+29 -13
View File
@@ -12,6 +12,16 @@
.category-演奏能力 { background: #e8f5e9; color: #2e7d32; }
.category-其他 { background: #fff3e0; color: #e65100; }
.editor-textarea { font-family: monospace; font-size: 13px; }
.modal-footer-with-top {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 1rem;
border-top: 1px solid #dee2e6;
background: #f8f9fa;
position: sticky;
bottom: 0;
}
</style>
{% endblock %}
@@ -121,25 +131,31 @@
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">问题名称 *</label>
<input type="text" class="form-control" id="editProblemName">
</div>
<div class="mb-3">
<label class="form-label">分类</label>
<select class="form-select" id="editProblemCategory">
<option value="综合">综合</option>
<option value="乐理相关">乐理相关</option>
<option value="演奏能力">演奏能力</option>
<option value="其他">其他</option>
</select>
<div class="row g-3">
<div class="col-md-8">
<div class="mb-3">
<label class="form-label">问题名称 *</label>
<input type="text" class="form-control" id="editProblemName">
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label class="form-label">分类</label>
<select class="form-select" id="editProblemCategory">
<option value="综合">综合</option>
<option value="乐理相关">乐理相关</option>
<option value="演奏能力">演奏能力</option>
<option value="其他">其他</option>
</select>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">问题内容 (Markdown)</label>
<textarea class="form-control editor-textarea" id="editProblemContent" rows="20"></textarea>
</div>
</div>
<div class="modal-footer">
<div class="modal-footer-with-top">
<button type="button" class="btn btn-secondary" id="cancelEditProblemBtn">取消</button>
<button type="button" class="btn btn-primary" onclick="saveProblem()">保存</button>
</div>