Skip to content

Commit b25731e

Browse files
DrswithDrswith
committed
feat(ui): 添加开发环境标识和网站底部页脚组件
- 在开发环境下，网页标题前添加 [DEV] 前缀用于区分 - 新增网站底部页脚结构，包含项目、数据源及支持等链接区域 - 底部页脚样式设计响应式，适配不同屏幕宽度 - 底部链接包含图标及悬停、聚焦视觉效果优化 - 页脚内容包含版权信息及每日自动更新数据说明
1 parent b2ccf55 commit b25731e

File tree

3 files changed

+227
-0
lines changed

3 files changed

+227
-0
lines changed

‎app/main.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ interface SearchOptions {
1414
searchType: 'all' | 'vendor' | 'device'
1515
}
1616

17+
if (import.meta.env?.DEV) {
18+
// 在网站title添加[DEV]
19+
document.title = `[DEV] ${document.title}`
20+
}
21+
1722
// 全局变量
1823
const version = import.meta.env.VERSION || 'latest'
1924
const useLocalData = import.meta.env.BASE_URL === UI_LOCAL_BASE_URL

‎app/styles.css‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1187,4 +1187,142 @@ html {
11871187
.stat-number {
11881188
font-size: 1.5rem;
11891189
}
1190+
}
1191+
1192+
/* Footer styles */
1193+
.footer {
1194+
background: var(--surface-color);
1195+
border-top: 1px solid var(--border-color);
1196+
margin-top: 3rem;
1197+
padding: 2rem 0 1.5rem;
1198+
}
1199+
1200+
.footer-content {
1201+
display: grid;
1202+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1203+
gap: 2rem;
1204+
margin-bottom: 2rem;
1205+
}
1206+
1207+
.footer-section {
1208+
display: flex;
1209+
flex-direction: column;
1210+
gap: 0.75rem;
1211+
}
1212+
1213+
.footer-title {
1214+
font-size: 0.875rem;
1215+
font-weight: 600;
1216+
color: var(--text-primary);
1217+
margin-bottom: 0.5rem;
1218+
text-transform: uppercase;
1219+
letter-spacing: 0.05em;
1220+
}
1221+
1222+
.footer-links {
1223+
display: flex;
1224+
flex-direction: column;
1225+
gap: 0.5rem;
1226+
}
1227+
1228+
.footer-link {
1229+
display: flex;
1230+
align-items: center;
1231+
gap: 0.5rem;
1232+
color: var(--text-secondary);
1233+
text-decoration: none;
1234+
font-size: 0.875rem;
1235+
padding: 0.25rem 0;
1236+
transition: var(--transition);
1237+
border-radius: var(--radius-sm);
1238+
}
1239+
1240+
.footer-link:hover {
1241+
color: var(--primary-color);
1242+
text-decoration: none;
1243+
}
1244+
1245+
.footer-link:focus {
1246+
outline: 2px solid var(--primary-color);
1247+
outline-offset: 2px;
1248+
}
1249+
1250+
.footer-link:focus:not(:focus-visible) {
1251+
outline: none;
1252+
}
1253+
1254+
.link-icon {
1255+
width: 16px;
1256+
height: 16px;
1257+
stroke-width: 2;
1258+
flex-shrink: 0;
1259+
opacity: 0.7;
1260+
transition: var(--transition);
1261+
}
1262+
1263+
.footer-link:hover .link-icon {
1264+
opacity: 1;
1265+
color: var(--primary-color);
1266+
}
1267+
1268+
.footer-bottom {
1269+
border-top: 1px solid var(--border-color);
1270+
padding-top: 1.5rem;
1271+
}
1272+
1273+
.footer-copyright {
1274+
text-align: center;
1275+
color: var(--text-muted);
1276+
}
1277+
1278+
.footer-copyright p {
1279+
font-size: 0.75rem;
1280+
margin: 0;
1281+
line-height: 1.5;
1282+
}
1283+
1284+
.footer-copyright p + p {
1285+
margin-top: 0.25rem;
1286+
}
1287+
1288+
.footer-note {
1289+
opacity: 0.8;
1290+
}
1291+
1292+
/* Footer responsive styles */
1293+
@media (max-width: 768px) {
1294+
.footer {
1295+
padding: 1.5rem 0 1rem;
1296+
margin-top: 2rem;
1297+
}
1298+
1299+
.footer-content {
1300+
grid-template-columns: 1fr;
1301+
gap: 1.5rem;
1302+
margin-bottom: 1.5rem;
1303+
}
1304+
1305+
.footer-section {
1306+
text-align: center;
1307+
}
1308+
1309+
.footer-links {
1310+
align-items: center;
1311+
}
1312+
}
1313+
1314+
@media (max-width: 480px) {
1315+
.footer {
1316+
padding: 1rem 0 0.75rem;
1317+
margin-top: 1.5rem;
1318+
}
1319+
1320+
.footer-content {
1321+
gap: 1rem;
1322+
margin-bottom: 1rem;
1323+
}
1324+
1325+
.footer-bottom {
1326+
padding-top: 1rem;
1327+
}
11901328
}

‎index.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,90 @@ <h3>No matching results found</h3>
251251
</nav>
252252
</div>
253253
</main>
254+
255+
<!-- Footer -->
256+
<footer class="footer" role="contentinfo">
257+
<div class="container">
258+
<div class="footer-content">
259+
<div class="footer-section">
260+
<h3 class="footer-title">Project</h3>
261+
<div class="footer-links">
262+
<a href="https://github.com/Drswith/usb.ids" target="_blank" rel="noopener noreferrer" class="footer-link">
263+
<svg class="link-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
264+
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
265+
</svg>
266+
GitHub Repository
267+
</a>
268+
<a href="https://www.npmjs.com/package/usb.ids" target="_blank" rel="noopener noreferrer" class="footer-link">
269+
<svg class="link-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
270+
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
271+
<line x1="8" y1="21" x2="16" y2="21"/>
272+
<line x1="12" y1="17" x2="12" y2="21"/>
273+
</svg>
274+
NPM Package
275+
</a>
276+
</div>
277+
</div>
278+
279+
<div class="footer-section">
280+
<h3 class="footer-title">Data Sources</h3>
281+
<div class="footer-links">
282+
<a href="http://www.linux-usb.org/usb.ids" target="_blank" rel="noopener noreferrer" class="footer-link">
283+
<svg class="link-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
284+
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
285+
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
286+
</svg>
287+
Official USB ID's List
288+
</a>
289+
<a href="https://raw.githubusercontent.com/systemd/systemd/main/hwdb.d/usb.ids" target="_blank" rel="noopener noreferrer" class="footer-link">
290+
<svg class="link-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
291+
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
292+
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
293+
</svg>
294+
SystemD USB ID's Backup
295+
</a>
296+
</div>
297+
</div>
298+
299+
<div class="footer-section">
300+
<h3 class="footer-title">Support</h3>
301+
<div class="footer-links">
302+
<a href="https://github.com/Drswith/usb.ids/issues" target="_blank" rel="noopener noreferrer" class="footer-link">
303+
<svg class="link-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
304+
<circle cx="12" cy="12" r="10"/>
305+
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
306+
<circle cx="12" cy="17" r="1"/>
307+
</svg>
308+
Report Issues
309+
</a>
310+
<a href="https://www.npmjs.com/package/usb.ids?activeTab=readme" target="_blank" rel="noopener noreferrer" class="footer-link">
311+
<svg class="link-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
312+
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
313+
<polyline points="14,2 14,8 20,8"/>
314+
<line x1="16" y1="13" x2="8" y2="13"/>
315+
<line x1="16" y1="17" x2="8" y2="17"/>
316+
<polyline points="10,9 9,9 8,9"/>
317+
</svg>
318+
Documentation
319+
</a>
320+
<a href="https://github.com/sponsors/Drswith" target="_blank" rel="noopener noreferrer" class="footer-link">
321+
<svg class="link-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
322+
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
323+
</svg>
324+
Sponsor
325+
</a>
326+
</div>
327+
</div>
328+
</div>
329+
330+
<div class="footer-bottom">
331+
<div class="footer-copyright">
332+
<p>&copy; 2024 USB ID's Database. Licensed under MIT License.</p>
333+
<p class="footer-note">Data automatically updated daily from official sources.</p>
334+
</div>
335+
</div>
336+
</div>
337+
</footer>
254338
</div>
255339
<script type="module" src="/app/main.ts"></script>
256340
</body>

0 commit comments

Comments
 (0)