Skip to content

Commit 8e5723b

Browse files
c1921c1921
committed
样式：调整
1 parent 4c6bc4f commit 8e5723b

File tree

1 file changed

+66
-23
lines changed

1 file changed

+66
-23
lines changed

‎templates/index.html‎

Lines changed: 66 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -41,34 +41,54 @@
4141
</style>
4242
</head>
4343
<body>
44-
<nav class="navbar navbar-expand-lg">
44+
<nav class="navbar bg-body-tertiary navbar-expand-lg sticky-top">
4545
<div class="container-fluid">
46-
<span class="navbar-brand">Stable Diffusion 模型管理器</span>
47-
<div class="form-check form-switch me-3">
48-
<input class="form-check-input" type="checkbox" role="switch" id="nsfwToggle">
49-
<label class="form-check-label" for="nsfwToggle">显示 NSFW</label>
50-
</div>
51-
<button class="btn btn-outline ms-auto" id="darkModeToggle">
46+
<a class="navbar-brand" href="#">
47+
<img src="../static/favicon.svg" alt="Stable Diffusion 模型管理器" height="26">
48+
</a>
49+
<button class="btn btn-outline-secondary ms-auto" data-bs-toggle="modal" data-bs-target="#settingsModal">
50+
<i class="bi bi-gear"></i>
51+
<span class="ms-1">设置</span>
52+
</button>
53+
<button class="btn btn-outline-success ms-3" id="nsfwToggle">
54+
<i class="bi bi-eye-slash-fill" id="nsfwIcon"></i>
55+
<span class="ms-1" id="nsfwText">NSFW 已关闭</span>
56+
</button>
57+
<button class="btn btn-outline ms-3" id="darkModeToggle">
5258
<i class="bi bi-sun-fill" id="lightIcon"></i>
5359
<i class="bi bi-moon-stars-fill d-none" id="darkIcon"></i>
5460
</button>
5561
</div>
5662
</nav>
5763

58-
<div class="container mt-4">
59-
<div class="row mb-4">
60-
<div class="col">
61-
<div class="mb-3">
62-
<div class="input-group">
63-
<input type="text" class="form-control text-muted" id="pathInput" readonly placeholder="请选择模型目录">
64-
<button class="btn btn-outline-secondary" id="selectPath" type="button">
65-
<i class="bi bi-folder2-open"></i> 浏览
66-
</button>
67-
<button class="btn btn-outline-primary" id="scanModels">扫描模型</button>
64+
<!-- 设置模态窗 -->
65+
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
66+
<div class="modal-dialog">
67+
<div class="modal-content">
68+
<div class="modal-header">
69+
<h5 class="modal-title" id="settingsModalLabel">设置</h5>
70+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
71+
</div>
72+
<div class="modal-body">
73+
<div class="mb-3">
74+
<label class="form-label">模型目录</label>
75+
<div class="input-group">
76+
<input type="text" class="form-control text-muted" id="pathInput" readonly placeholder="请选择模型目录">
77+
<button class="btn btn-outline-secondary" id="selectPath" type="button">
78+
<i class="bi bi-folder2-open"></i> 浏览
79+
</button>
80+
</div>
6881
</div>
6982
</div>
83+
<div class="modal-footer">
84+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
85+
<button type="button" class="btn btn-primary" id="scanModels" data-bs-dismiss="modal">扫描模型</button>
86+
</div>
7087
</div>
7188
</div>
89+
</div>
90+
91+
<div class="container mt-4">
7292

7393
<div class="alert alert-danger d-none" id="error" role="alert"></div>
7494
<div class="text-center d-none" id="loading">
@@ -109,7 +129,7 @@
109129
</div>
110130

111131
<!-- 模型列表 -->
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">
132+
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3 pb-5" id="modelsList">
113133
</div>
114134
</div>
115135

@@ -151,11 +171,34 @@
151171
// NSFW 显示状态
152172
let showNSFW = false;
153173
const nsfwToggle = document.getElementById('nsfwToggle');
174+
const nsfwIcon = document.getElementById('nsfwIcon');
175+
const nsfwText = document.getElementById('nsfwText');
176+
177+
// 初始化 NSFW 状态
178+
updateNSFWButton(false);
154179

155-
// 监听 NSFW 开关
156-
nsfwToggle.addEventListener('change', (e) => {
157-
showNSFW = e.target.checked;
180+
// 更新 NSFW 按钮状态
181+
function updateNSFWButton(show) {
182+
showNSFW = show;
183+
if (show) {
184+
nsfwToggle.classList.remove('btn-outline-success');
185+
nsfwToggle.classList.add('btn-outline-danger');
186+
nsfwIcon.classList.remove('bi-eye-slash-fill');
187+
nsfwIcon.classList.add('bi-eye-fill');
188+
nsfwText.textContent = 'NSFW 已开启';
189+
} else {
190+
nsfwToggle.classList.remove('btn-outline-danger');
191+
nsfwToggle.classList.add('btn-outline-success');
192+
nsfwIcon.classList.remove('bi-eye-fill');
193+
nsfwIcon.classList.add('bi-eye-slash-fill');
194+
nsfwText.textContent = 'NSFW 已关闭';
195+
}
158196
filterAndDisplayModels(); // 应用所有筛选条件
197+
}
198+
199+
// 监听 NSFW 按钮点击
200+
nsfwToggle.addEventListener('click', () => {
201+
updateNSFWButton(!showNSFW);
159202
});
160203

161204
// 检查系统暗黑模式
@@ -316,7 +359,7 @@ <h5 class="card-title mb-0">${model.name}</h5>
316359
<small class="d-block">类型: ${model.type}</small>
317360
<small class="d-block">基础模型: ${model.baseModel || '未知'}</small>
318361
</p>
319-
${model.url ? `<a href="${model.url}" class="btn btn-outline-primary btn-sm" target="_blank">查看详情</a>` : ''}
362+
${model.url ? `<a href="${model.url}" class="btn btn-outline-secondary btn-sm" target="_blank">查看详情</a>` : ''}
320363
</div>
321364
</div>
322365
`;
@@ -336,7 +379,7 @@ <h5 class="card-title mb-0">${model.name}</h5>
336379
updateFilterOptions(allModels);
337380

338381
// 显示模型
339-
displayModels(allModels);
382+
filterAndDisplayModels();
340383
} catch (err) {
341384
showError('加载模型列表失败');
342385
}

0 commit comments

Comments
 (0)