Skip to content

Commit 4c6bc4f

Browse files
c1921c1921
committed
修复：NSFW 开关不影响筛选
1 parent 1fc3f6a commit 4c6bc4f

File tree

1 file changed

+34
-104
lines changed

1 file changed

+34
-104
lines changed

‎templates/index.html‎

Lines changed: 34 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -108,12 +108,8 @@
108108
</div>
109109
</div>
110110

111-
<!-- 标签页导航 -->
112-
<ul class="nav nav-tabs" id="modelTabs" role="tablist">
113-
</ul>
114-
115-
<!-- 标签页内容 -->
116-
<div class="tab-content pt-3" id="modelTabContent">
111+
<!-- 模型列表 -->
112+
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3" id="modelsList">
117113
</div>
118114
</div>
119115

@@ -159,7 +155,7 @@
159155
// 监听 NSFW 开关
160156
nsfwToggle.addEventListener('change', (e) => {
161157
showNSFW = e.target.checked;
162-
displayModels(allModels); // 重新显示模型列表
158+
filterAndDisplayModels(); // 应用所有筛选条件
163159
});
164160

165161
// 检查系统暗黑模式
@@ -290,110 +286,44 @@
290286

291287
// 显示模型列表
292288
function displayModels(models) {
293-
// 根据 NSFW 开关过滤模型
294-
const filteredModels = showNSFW ? models : models.filter(model => !model.nsfw && model.nsfwLevel < 3);
295-
296-
// 按类型分组模型
297-
const modelsByType = filteredModels.reduce((acc, model) => {
298-
const type = model.type || '未知';
299-
if (!acc[type]) {
300-
acc[type] = [];
301-
}
302-
acc[type].push(model);
303-
return acc;
304-
}, {});
305-
306-
// 清空现有标签和内容
307-
modelTabs.innerHTML = '';
308-
modelTabContent.innerHTML = '';
309-
310-
// 创建"全部"标签
311-
const allCount = models.length;
312-
modelTabs.innerHTML = `
313-
<li class="nav-item" role="presentation">
314-
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab">
315-
全部 <span class="badge text-bg-secondary">${allCount}</span>
316-
</button>
317-
</li>
318-
`;
319-
320-
// 创建"全部"内容面板
321-
const allPane = document.createElement('div');
322-
allPane.className = 'tab-pane fade show active';
323-
allPane.id = 'all';
324-
allPane.role = 'tabpanel';
289+
// 清空现有内容
290+
const modelsList = document.getElementById('modelsList');
291+
modelsList.innerHTML = '';
325292

326-
const allGrid = document.createElement('div');
327-
allGrid.className = 'row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3';
328-
329-
// 按类型创建分组
330-
Object.entries(modelsByType).forEach(([type, typeModels], index) => {
331-
// 创建标签
332-
const tabId = `type-${type.toLowerCase().replace(/\s+/g, '-')}`;
333-
const tab = document.createElement('li');
334-
tab.className = 'nav-item';
335-
tab.role = 'presentation';
336-
tab.innerHTML = `
337-
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#${tabId}" type="button" role="tab">
338-
${type} <span class="badge text-bg-secondary">${typeModels.length}</span>
339-
</button>
340-
`;
341-
modelTabs.appendChild(tab);
342-
343-
// 创建内容面板
344-
const pane = document.createElement('div');
345-
pane.className = 'tab-pane fade';
346-
pane.id = tabId;
347-
pane.role = 'tabpanel';
348-
349-
const modelsRow = document.createElement('div');
350-
modelsRow.className = 'row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3';
351-
352-
typeModels.forEach(model => {
353-
const col = document.createElement('div');
354-
col.className = 'col';
293+
// 显示所有过滤后的模型
294+
models.forEach(model => {
295+
const col = document.createElement('div');
296+
col.className = 'col';
355297

356-
const imageHtml = model.preview_url ? `
357-
<div class="card-img-container">
358-
<img
359-
src="${model.preview_url.startsWith('/static') ? model.preview_url : '/static/images/' + model.preview_url.split('/').pop()}"
360-
alt="${model.name}"
361-
onerror="this.onerror=null; this.src='${model.preview_url}';"
362-
>
363-
</div>` : '';
298+
const imageHtml = model.preview_url ? `
299+
<div class="card-img-container">
300+
<img
301+
src="${model.preview_url.startsWith('/static') ? model.preview_url : '/static/images/' + model.preview_url.split('/').pop()}"
302+
alt="${model.name}"
303+
onerror="this.onerror=null; this.src='${model.preview_url}';"
304+
>
305+
</div>` : '';
364306

365-
const content = `
366-
<div class="card h-100">
367-
${imageHtml}
368-
<div class="card-body">
369-
<div class="d-flex justify-content-between align-items-start mb-2">
370-
<h5 class="card-title mb-0">${model.name}</h5>
371-
${model.nsfw ? '<span class="badge text-bg-danger">NSFW</span>' : ''}
372-
</div>
373-
<p class="card-text">
374-
<small class="d-block">类型: ${model.type}</small>
375-
<small class="d-block">基础模型: ${model.baseModel || '未知'}</small>
376-
</p>
377-
${model.url ? `<a href="${model.url}" class="btn btn-outline-primary btn-sm" target="_blank">查看详情</a>` : ''}
307+
const content = `
308+
<div class="card h-100">
309+
${imageHtml}
310+
<div class="card-body">
311+
<div class="d-flex justify-content-between align-items-start mb-2">
312+
<h5 class="card-title mb-0">${model.name}</h5>
313+
${model.nsfw ? '<span class="badge text-bg-danger">NSFW</span>' : ''}
378314
</div>
315+
<p class="card-text">
316+
<small class="d-block">类型: ${model.type}</small>
317+
<small class="d-block">基础模型: ${model.baseModel || '未知'}</small>
318+
</p>
319+
${model.url ? `<a href="${model.url}" class="btn btn-outline-primary btn-sm" target="_blank">查看详情</a>` : ''}
379320
</div>
380-
`;
381-
382-
col.innerHTML = content;
383-
modelsRow.appendChild(col);
321+
</div>
322+
`;
384323

385-
// 同时添加到"全部"面板
386-
const allCol = col.cloneNode(true);
387-
allGrid.appendChild(allCol);
388-
});
389-
390-
pane.appendChild(modelsRow);
391-
modelTabContent.appendChild(pane);
324+
col.innerHTML = content;
325+
modelsList.appendChild(col);
392326
});
393-
394-
// 添加"全部"面板
395-
allPane.appendChild(allGrid);
396-
modelTabContent.insertBefore(allPane, modelTabContent.firstChild);
397327
}
398328

399329
// 加载模型列表

0 commit comments

Comments
 (0)