Skip to content

Commit dcf0177

Browse files
dogxiidogxii
committed
Add some features
1 parent 3b65b5f commit dcf0177

8 files changed

Lines changed: 3404 additions & 339 deletions

File tree

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>😎</text></svg>" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<meta name="description" content="iFace - 前端面试刷题助手，覆盖 JS、React、CSS、TypeScript、性能优化等核心模块" />
8-
<meta name="theme-color" content="#6366f1" />
8+
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
9+
<meta name="theme-color" content="#0f0f13" media="(prefers-color-scheme: dark)" />
910
<title>iFace · 前端面试刷题助手</title>
1011
</head>
1112
<body class="antialiased">

‎src/components/layout/Navbar.tsx‎

Lines changed: 93 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useEffect, useState } from "react";
22
import { Link, useLocation } from "react-router-dom";
3+
import { SettingsDrawer } from "@/components/layout/SettingsDrawer";
34
import { useStudyStore } from "@/store/useStudyStore";
45

56
const navItems = [
@@ -16,6 +17,7 @@ export function Navbar() {
1617
const { theme, toggleTheme } = useStudyStore();
1718
const [scrolled, setScrolled] = useState(false);
1819
const [mobileOpen, setMobileOpen] = useState(false);
20+
const [settingsOpen, setSettingsOpen] = useState(false);
1921

2022
useEffect(() => {
2123
const handler = () => setScrolled(window.scrollY > 4);
@@ -83,7 +85,6 @@ export function Navbar() {
8385
flexShrink: 0,
8486
}}
8587
>
86-
8788
<span
8889
style={{
8990
fontSize: 15,
@@ -157,6 +158,50 @@ export function Navbar() {
157158
flexShrink: 0,
158159
}}
159160
>
161+
{/* Settings button */}
162+
<button
163+
onClick={() => setSettingsOpen(true)}
164+
aria-label="设置"
165+
style={{
166+
width: 32,
167+
height: 32,
168+
borderRadius: 8,
169+
border: "none",
170+
background: "transparent",
171+
color: "var(--text-2)",
172+
display: "flex",
173+
alignItems: "center",
174+
justifyContent: "center",
175+
cursor: "pointer",
176+
transition: "background 0.15s, color 0.15s",
177+
flexShrink: 0,
178+
}}
179+
onMouseEnter={(e) => {
180+
(e.currentTarget as HTMLElement).style.background =
181+
"var(--surface-2)";
182+
(e.currentTarget as HTMLElement).style.color = "var(--text)";
183+
}}
184+
onMouseLeave={(e) => {
185+
(e.currentTarget as HTMLElement).style.background =
186+
"transparent";
187+
(e.currentTarget as HTMLElement).style.color = "var(--text-2)";
188+
}}
189+
>
190+
<svg
191+
width="15"
192+
height="15"
193+
viewBox="0 0 24 24"
194+
fill="none"
195+
stroke="currentColor"
196+
strokeWidth="2"
197+
strokeLinecap="round"
198+
strokeLinejoin="round"
199+
>
200+
<circle cx="12" cy="12" r="3" />
201+
<path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2" />
202+
</svg>
203+
</button>
204+
160205
{/* Theme toggle */}
161206
<button
162207
onClick={toggleTheme}
@@ -343,8 +388,55 @@ export function Navbar() {
343388
</Link>
344389
);
345390
})}
391+
392+
{/* Settings entry in mobile menu */}
393+
<button
394+
onClick={() => {
395+
setMobileOpen(false);
396+
setSettingsOpen(true);
397+
}}
398+
style={{
399+
padding: "10px 14px",
400+
borderRadius: 10,
401+
fontSize: 15,
402+
fontWeight: 400,
403+
color: "var(--text)",
404+
background: "transparent",
405+
border: "none",
406+
cursor: "pointer",
407+
display: "flex",
408+
alignItems: "center",
409+
gap: 8,
410+
width: "100%",
411+
textAlign: "left",
412+
marginTop: 4,
413+
borderTop: "1px solid var(--border-subtle)",
414+
}}
415+
>
416+
<svg
417+
width="15"
418+
height="15"
419+
viewBox="0 0 24 24"
420+
fill="none"
421+
stroke="currentColor"
422+
strokeWidth="2"
423+
strokeLinecap="round"
424+
strokeLinejoin="round"
425+
style={{ color: "var(--text-2)" }}
426+
>
427+
<circle cx="12" cy="12" r="3" />
428+
<path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2" />
429+
</svg>
430+
设置
431+
</button>
346432
</div>
347433

434+
{/* Settings Drawer */}
435+
<SettingsDrawer
436+
open={settingsOpen}
437+
onClose={() => setSettingsOpen(false)}
438+
/>
439+
348440
<style>{`
349441
@media (max-width: 640px) {
350442
.hidden-mobile { display: none !important; }

0 commit comments

Comments
 (0)