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

feat: 目标和问题列表添加筛选和分组功能

Browse Source
This commit is contained in:
hmo
2026-04-23 22:02:56 +08:00
parent f83769fa20
commit ce75a288e8
2 changed files with 239 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/goals.html
+104 -6
View File
@@ -4,6 +4,49 @@
<div class="container-fluid py-4">
<h2 class="mb-4">🎯 目标管理</h2>
<!-- 筛选和分组控制 -->
<div class="card mb-3">
<div class="card-body">
<div class="row g-3 align-items-center">
<div class="col-auto">
<label class="form-label mb-0">筛选：</label>
</div>
<div class="col-auto">
<select class="form-select" id="filter-level" onchange="applyFilters()">
<option value="">全部级别</option>
<option value="启蒙">启蒙</option>
<option value="入门">入门</option>
<option value="进阶">进阶</option>
<option value="熟练">熟练</option>
<option value="精通">精通</option>
</select>
</div>
<div class="col-auto">
<select class="form-select" id="filter-category" onchange="applyFilters()">
<option value="">全部分类</option>
<option value="综合">综合</option>
<option value="乐理相关">乐理相关</option>
<option value="演奏能力">演奏能力</option>
<option value="其他">其他</option>
</select>
</div>
<div class="col-auto">
<label class="form-label mb-0">分组：</label>
</div>
<div class="col-auto">
<select class="form-select" id="group-by" onchange="applyFilters()">
<option value="">不分组</option>
<option value="level">按级别分组</option>
<option value="category">按分类分组</option>
</select>
</div>
<div class="col-auto ms-auto">
<span id="goals-count" class="text-muted small"></span>
</div>
</div>
</div>
</div>
<!-- 目标列表 -->
<div class="row">
<div class="col-12">
@@ -104,28 +147,83 @@
{{ super() }}
<script>
const API_BASE = '/api/goals';
let allGoals = []; // 缓存所有目标数据
// 加载目标列表
async function loadGoals() {
const res = await fetch(API_BASE);
const goals = await res.json();
const grid = document.getElementById('goals-grid');
// 获取每个目标的子目标信息
const goalsWithChildren = await Promise.all(goals.map(async g => {
allGoals = await Promise.all(goals.map(async g => {
const childrenRes = await fetch(`${API_BASE}/${g.id}/children`);
const children = await childrenRes.json();
return {...g, children: children};
}));
grid.innerHTML = goalsWithChildren.map(g => {
applyFilters();
}
// 应用筛选和分组
function applyFilters() {
const filterLevel = document.getElementById('filter-level').value;
const filterCategory = document.getElementById('filter-category').value;
const groupBy = document.getElementById('group-by').value;
// 筛选
let filtered = allGoals.filter(g => {
if (filterLevel && g.level !== filterLevel) return false;
if (filterCategory && g.category !== filterCategory) return false;
return true;
});
// 更新计数
document.getElementById('goals-count').textContent = `共 ${filtered.length} 个目标`;
// 渲染
const grid = document.getElementById('goals-grid');
if (groupBy) {
// 分组显示
const groups = {};
filtered.forEach(g => {
const key = groupBy === 'level' ? (g.level || '入门') : (g.category || '综合');
if (!groups[key]) groups[key] = [];
groups[key].push(g);
});
grid.innerHTML = Object.entries(groups).map(([key, goals]) => `
<div class="col-12 mb-3">
<div class="card">
<div class="card-header bg-light">
<h6 class="mb-0">${groupBy === 'level' ? '级别' : '分类'}：${key}（${goals.length}个）</h6>
</div>
<div class="card-body p-2">
<div class="row g-2">
${goals.map(g => renderGoalCard(g)).join('')}
</div>
</div>
</div>
</div>
`).join('');
} else {
// 不分组
grid.innerHTML = filtered.map(g => `
<div class="col-md-4 col-lg-3">
${renderGoalCard(g)}
</div>
`).join('');
}
}
// 渲染单个目标卡片
function renderGoalCard(g) {
const level = g.level || '入门';
const category = g.category || '综合';
const childNames = g.children && g.children.length > 0
? g.children.map(c => escapeHtml(c.name)).join(', ')
: '';
return `
<div class="col-md-4 col-lg-3">
<div class="card h-100">
<div class="card-body">
<h6 class="card-title">${escapeHtml(g.name)}</h6>
@@ -142,8 +240,8 @@ async function loadGoals() {
<button class="btn btn-sm btn-outline-danger" onclick="deleteGoal(${g.id})">删除</button>
</div>
</div>
</div>
`}).join('');
`;
}
}
// 保存目标
app/templates/settings.html
+103 -25
View File
@@ -7,12 +7,10 @@
.problem-card { transition: all 0.2s; }
.problem-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.category-badge { font-size: 11px; padding: 3px 8px; }
.category-技术类 { background: #e3f2fd; color: #1565c0; }
.category-认知类 { background: #f3e5f5; color: #7b1fa2; }
.category-节奏类 { background: #fff3e0; color: #e65100; }
.category-表现类 { background: #fce4ec; color: #c2185b; }
.category-习惯类 { background: #e8f5e9; color: #2e7d32; }
.category-综合类 { background: #f5f5f5; color: #616161; }
.category-综合 { background: #f5f5f5; color: #616161; }
.category-乐理相关 { background: #e3f2fd; color: #1565c0; }
.category-演奏能力 { background: #e8f5e9; color: #2e7d32; }
.category-其他 { background: #fff3e0; color: #e65100; }
.editor-textarea { font-family: monospace; font-size: 13px; }
</style>
{% endblock %}
@@ -43,7 +41,35 @@
</div>
<div class="mb-3">
<input type="text" class="form-control" placeholder="搜索问题..." id="searchInput" onkeyup="filterProblems()">
<input type="text" class="form-control" placeholder="搜索问题..." id="searchInput" onkeyup="applyProblemFilters()">
</div>
<!-- 筛选和分组控制 -->
<div class="row g-3 align-items-center mb-3">
<div class="col-auto">
<label class="form-label mb-0">筛选：</label>
</div>
<div class="col-auto">
<select class="form-select" id="filterCategory" onchange="applyProblemFilters()">
<option value="">全部分类</option>
<option value="综合">综合</option>
<option value="乐理相关">乐理相关</option>
<option value="演奏能力">演奏能力</option>
<option value="其他">其他</option>
</select>
</div>
<div class="col-auto">
<label class="form-label mb-0">分组：</label>
</div>
<div class="col-auto">
<select class="form-select" id="groupByCategory" onchange="applyProblemFilters()">
<option value="">不分组</option>
<option value="category">按分类分组</option>
</select>
</div>
<div class="col-auto ms-auto">
<span id="problems-count" class="text-muted small"></span>
</div>
</div>
<div class="row" id="problemList"></div>
@@ -71,12 +97,10 @@
<div class="mb-3">
<label class="form-label">分类</label>
<select class="form-select" id="newProblemCategory">
<option value="技术类">技术类</option>
<option value="认知类">认知类</option>
<option value="节奏类">节奏类</option>
<option value="表现类">表现类</option>
<option value="习惯类">习惯类</option>
<option value="综合类">综合类</option>
<option value="综合">综合</option>
<option value="乐理相关">乐理相关</option>
<option value="演奏能力">演奏能力</option>
<option value="其他">其他</option>
</select>
</div>
</div>
@@ -101,6 +125,15 @@
<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>
<div class="mb-3">
<label class="form-label">问题内容 (Markdown)</label>
<textarea class="form-control editor-textarea" id="editProblemContent" rows="20"></textarea>
@@ -150,20 +183,69 @@ window.pageInit = function() {
async function loadProblems() {
const response = await fetch('/api/problems');
allProblems = await response.json();
renderProblems(allProblems);
applyProblemFilters();
}
function renderProblems(problems) {
function applyProblemFilters() {
const search = document.getElementById('searchInput').value.toLowerCase();
const filterCategory = document.getElementById('filterCategory').value;
const groupBy = document.getElementById('groupByCategory').value;
// 筛选
let filtered = allProblems.filter(p => {
if (search && !p.name.toLowerCase().includes(search)) return false;
if (filterCategory && p.category !== filterCategory) return false;
return true;
});
// 更新计数
document.getElementById('problems-count').textContent = `共 ${filtered.length} 个问题`;
renderProblems(filtered, groupBy);
}
function renderProblems(problems, groupBy) {
const container = document.getElementById('problemList');
if (problems.length === 0) {
container.innerHTML = '<div class="col-12 text-center text-muted py-5"><p>未找到问题配置</p></div>';
return;
}
let html = '';
if (groupBy) {
// 分组显示
const groups = {};
problems.forEach(p => {
html += `
<div class="col-md-4 col-sm-6 mb-3 problem-item" data-name="${p.name.toLowerCase()}">
const key = p.category || '其他';
if (!groups[key]) groups[key] = [];
groups[key].push(p);
});
container.innerHTML = Object.entries(groups).map(([key, items]) => `
<div class="col-12 mb-3">
<div class="card">
<div class="card-header bg-light">
<h6 class="mb-0">分类：${key}（${items.length}个）</h6>
</div>
<div class="card-body p-2">
<div class="row g-2">
${items.map(p => renderProblemCard(p)).join('')}
</div>
</div>
</div>
</div>
`).join('');
} else {
// 不分组
container.innerHTML = problems.map(p => `
<div class="col-md-4 col-sm-6 mb-3">
${renderProblemCard(p)}
</div>
`).join('');
}
}
function renderProblemCard(p) {
return `
<div class="card problem-card h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
@@ -181,14 +263,8 @@ function renderProblems(problems) {
</div>
</div>
</div>
</div>
`;
});
container.innerHTML = html;
}
function filterProblems() {
const search = document.getElementById('searchInput').value.toLowerCase();
document.querySelectorAll('.problem-item').forEach(item => {
item.style.display = item.dataset.name.includes(search) ? 'block' : 'none';
});
@@ -242,6 +318,7 @@ async function editProblem(problemId) {
const name = data.name;
document.getElementById('editProblemName').value = name;
document.getElementById('editProblemCategory').value = data.category || '综合';
document.getElementById('editProblemContent').value = data.content || '';
// 记录原始状态
@@ -314,6 +391,7 @@ function isEditProblemDirty() {
async function saveProblem() {
const name = document.getElementById('editProblemName').value.trim();
const category = document.getElementById('editProblemCategory').value;
const content = window.problemEditor ? window.problemEditor.value() : document.getElementById('editProblemContent').value;
if (!name) {
@@ -324,7 +402,7 @@ async function saveProblem() {
const response = await fetch(`/api/problems/${currentEditId}`, {
method: 'PUT',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({name, content})
body: JSON.stringify({name, category, content})
});
if (response.ok) {