From cacb25a2ca8a0987996b13db1833abff7245ccca Mon Sep 17 00:00:00 2001 From: Chaos Date: Mon, 10 Nov 2025 08:31:56 +0800 Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E6=B7=BB=E5=8A=A0=20SVG=20?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=B3=BB=E7=BB=9F=E5=B9=B6=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=AF=BC=E8=88=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 引入 Sprite 组件统一管理 SVG 图标 - 创建 Icon 组件支持动态加载图标- 定义 icon-ids 类型确保图标引用安全- 更新 Sidebar 使用新图标组件替换 emoji - 添加 HomeIcon 和 network 图标资源- 调整侧边栏样式和宽度 - 修复 Header 按钮 title 属性替代 aria-label - 新增 IP 工具页面路由 - 添加全局阴影变量 --main-border-shadow --- package-lock.json | 9 ++++++ src/app.css | 1 + src/lib/assets/icon/sprite.svg | 18 ++++++++++++ src/lib/components/Icon.svelte | 36 ++++++++++++++++++++++++ src/lib/components/icon/HomeIcon.svelte | 23 +++++++++++++++ src/lib/components/layout/Header.svelte | 9 +++--- src/lib/components/layout/Sidebar.svelte | 32 ++++++++++++--------- src/lib/components/ui/Sprite.svelte | 16 +++++++++++ src/lib/types/icon-ids.ts | 3 ++ src/routes/+layout.svelte | 3 ++ src/routes/iptools/+page.svelte | 11 ++++++++ 11 files changed, 143 insertions(+), 18 deletions(-) create mode 100644 src/lib/components/Icon.svelte create mode 100644 src/lib/components/icon/HomeIcon.svelte create mode 100644 src/lib/components/ui/Sprite.svelte create mode 100644 src/lib/types/icon-ids.ts create mode 100644 src/routes/iptools/+page.svelte diff --git a/package-lock.json b/package-lock.json index 59a4ca8..b4f0d27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -867,6 +867,7 @@ "integrity": "sha512-TGFX1pZUt9qqY20Cv5NyYvy0iLWHf2jXi8s+eCGsig7jQMdwZWKUFMR6TbvFNhfDSUpc1sH/Y5EHv20g3HHA3g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@standard-schema/spec": "^1.0.0", "@sveltejs/acorn-typescript": "^1.0.5", @@ -906,6 +907,7 @@ "integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "debug": "^4.4.1", @@ -1467,6 +1469,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2055,6 +2058,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -2097,6 +2101,7 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -2113,6 +2118,7 @@ "integrity": "sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==", "dev": true, "license": "MIT", + "peer": true, "peerDependencies": { "prettier": "^3.0.0", "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0" @@ -2304,6 +2310,7 @@ "integrity": "sha512-kjkAjCk41mJfvJZG56XcJNOdJSke94JxtcX8zFzzz2vrt47E0LnoBzU6azIZ1aBxJgUep8qegAkguSf1GjxLXQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", @@ -2402,6 +2409,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -2416,6 +2424,7 @@ "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", diff --git a/src/app.css b/src/app.css index a0e50d7..8947986 100644 --- a/src/app.css +++ b/src/app.css @@ -2,6 +2,7 @@ :root{ --main-bg-color: #1f1f1f; + --main-border-shadow:1px 0 3px rgba(255, 255, 255, 0.1); } body { diff --git a/src/lib/assets/icon/sprite.svg b/src/lib/assets/icon/sprite.svg index ac6d7ec..e058d35 100644 --- a/src/lib/assets/icon/sprite.svg +++ b/src/lib/assets/icon/sprite.svg @@ -1,3 +1,21 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte new file mode 100644 index 0000000..b7231f3 --- /dev/null +++ b/src/lib/components/Icon.svelte @@ -0,0 +1,36 @@ + + + + + + + + diff --git a/src/lib/components/icon/HomeIcon.svelte b/src/lib/components/icon/HomeIcon.svelte new file mode 100644 index 0000000..3b64b31 --- /dev/null +++ b/src/lib/components/icon/HomeIcon.svelte @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte index bba99f8..1c9c606 100644 --- a/src/lib/components/layout/Header.svelte +++ b/src/lib/components/layout/Header.svelte @@ -11,22 +11,21 @@
-
-
+
- +
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte index d479105..eeb7c73 100644 --- a/src/lib/components/layout/Sidebar.svelte +++ b/src/lib/components/layout/Sidebar.svelte @@ -4,26 +4,34 @@ // 模拟导航项数据 // 确保对象字面量语法正确无误 - const navItems = [ - { icon: '🏠', label: '主页', path: '/' }, - { icon: '⭐', label: '收藏', path: '/favorites' }, - { icon: '💬', label: '聊天', path: '/chat' }, - { icon: '⚙️', label: '设置', path: '/settings' }, + import { goto } from '$app/navigation'; + import Icon from '$lib/components/Icon.svelte'; + import type { IconId } from '$lib/types/icon-ids'; + import HomeIcon from '$lib/components/icon/HomeIcon.svelte'; + + const navItems:[{icon: IconId, label: string, path: string}] = [ + { icon: 'network', label: 'IP工具', path: '/iptools' }, ]; let activePath: string = '/'; // 明确声明类型 function navigate(path: string) { activePath = path; - // goto(path); // 实际应用中使用 SvelteKit 的导航 + goto(path); console.log(`导航到: ${path}`); }