Skip to content

Commit 9cddf6e

Browse files
zhushanwen321zhushanwen321
committed
feat: add ZZzzswszzZZ logo, fix dropdown gap, update URLs, add social page with QR codes
1 parent dc98094 commit 9cddf6e

5 files changed

Lines changed: 340 additions & 15 deletions

File tree

‎logo-preview.html‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Logo 预览 - zzZZswszzZZ</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { background: #0a0a0a; color: #e2e8f0; font-family: system-ui, sans-serif; padding: 40px; }
10+
h1 { font-size: 20px; color: #888; margin-bottom: 40px; text-align: center; }
11+
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; max-width: 1000px; margin: 0 auto; }
12+
.card { background: #111; border: 1px solid #222; border-radius: 12px; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; cursor: pointer; transition: border-color .2s; }
13+
.card:hover { border-color: #444; }
14+
.card svg { display: block; }
15+
.label { font-size: 12px; color: #666; text-align: center; }
16+
.use-btn { background: #222; border: 1px solid #333; color: #aaa; border-radius: 6px; padding: 6px 16px; font-size: 12px; cursor: pointer; transition: all .2s; }
17+
.use-btn:hover { background: #333; color: #fff; border-color: #555; }
18+
.selected { border-color: #3b82f6 !important; }
19+
.selected .use-btn { background: #3b82f6; color: #fff; border-color: #3b82f6; }
20+
</style>
21+
</head>
22+
<body>
23+
<h1>⌄ 点击选择一个 Logo 方案 ⌄</h1>
24+
<div class="grid" id="grid"></div>
25+
26+
<script>
27+
const logos = [
28+
// ─── 方案 1: 月牙 + 漂浮 zZ ───
29+
{
30+
name: '方案 1: 月牙睡眠',
31+
svg: `<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
32+
<!-- 月牙 -->
33+
<path d="M50 16C40 20 33 30 33 40C33 50 40 60 50 64C42 62 36 54 36 44C36 34 42 24 50 16Z" fill="#60a5fa" opacity="0.9"/>
34+
<!-- zZ -->
35+
<text x="54" y="36" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.6">z</text>
36+
<text x="60" y="28" font-family="monospace" font-size="20" fill="#60a5fa" opacity="0.8">Z</text>
37+
<text x="56" y="16" font-family="monospace" font-size="26" fill="#60a5fa">Z</text>
38+
</svg>`,
39+
40+
code: `<svg width="40" height="40" viewBox="0 0 80 80" fill="none">
41+
<path d="M50 16C40 20 33 30 33 40C33 50 40 60 50 64C42 62 36 54 36 44C36 34 42 24 50 16Z" fill="#60a5fa" opacity="0.9"/>
42+
<text x="54" y="36" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.6">z</text>
43+
<text x="60" y="28" font-family="monospace" font-size="20" fill="#60a5fa" opacity="0.8">Z</text>
44+
<text x="56" y="16" font-family="monospace" font-size="26" fill="#60a5fa">Z</text>
45+
</svg>`
46+
},
47+
48+
// ─── 方案 2: Z 字母堆叠 + 月牙 ───
49+
{
50+
name: '方案 2: Z 堆叠',
51+
svg: `<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
52+
<!-- 底部底座 -->
53+
<rect x="16" y="56" width="48" height="4" rx="2" fill="#3b82f6" opacity="0.3"/>
54+
<!-- 三个 Z 堆叠 -->
55+
<text x="24" y="54" font-family="monospace" font-size="18" font-weight="bold" fill="#3b82f6" opacity="0.5">z</text>
56+
<text x="28" y="42" font-family="monospace" font-size="22" font-weight="bold" fill="#3b82f6" opacity="0.75">Z</text>
57+
<text x="24" y="26" font-family="monospace" font-size="30" font-weight="bold" fill="#60a5fa">Z</text>
58+
<!-- 小星星 -->
59+
<circle cx="56" cy="18" r="3" fill="#60a5fa" opacity="0.4"/>
60+
<circle cx="50" cy="10" r="2" fill="#60a5fa" opacity="0.3"/>
61+
<circle cx="62" cy="12" r="2" fill="#60a5fa" opacity="0.3"/>
62+
</svg>`,
63+
64+
code: `<svg width="40" height="40" viewBox="0 0 80 80" fill="none">
65+
<rect x="16" y="56" width="48" height="4" rx="2" fill="#3b82f6" opacity="0.3"/>
66+
<text x="24" y="54" font-family="monospace" font-size="18" font-weight="bold" fill="#3b82f6" opacity="0.5">z</text>
67+
<text x="28" y="42" font-family="monospace" font-size="22" font-weight="bold" fill="#3b82f6" opacity="0.75">Z</text>
68+
<text x="24" y="26" font-family="monospace" font-size="30" font-weight="bold" fill="#60a5fa">Z</text>
69+
<circle cx="56" cy="18" r="3" fill="#60a5fa" opacity="0.4"/>
70+
<circle cx="50" cy="10" r="2" fill="#60a5fa" opacity="0.3"/>
71+
<circle cx="62" cy="12" r="2" fill="#60a5fa" opacity="0.3"/>
72+
</svg>`
73+
},
74+
75+
// ─── 方案 3: 极简单行文本徽标 ───
76+
{
77+
name: '方案 3: 极简文字标',
78+
svg: `<svg width="140" height="40" viewBox="0 0 140 40" fill="none">
79+
<text x="0" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
80+
<text x="20" y="26" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.8">z</text>
81+
<text x="34" y="26" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
82+
<text x="48" y="22" font-family="monospace" font-size="13" fill="#666">sws</text>
83+
<text x="82" y="28" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
84+
<text x="94" y="26" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.8">z</text>
85+
<text x="108" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
86+
<text x="128" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
87+
<!-- 装饰线 -->
88+
<line x1="0" y1="34" x2="140" y2="34" stroke="#3b82f6" stroke-width="1" opacity="0.3"/>
89+
</svg>`,
90+
91+
code: `<svg width="140" height="40" viewBox="0 0 140 40" fill="none">
92+
<text x="0" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
93+
<text x="20" y="26" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.8">z</text>
94+
<text x="34" y="26" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
95+
<text x="48" y="22" font-family="monospace" font-size="13" fill="#666">sws</text>
96+
<text x="82" y="28" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
97+
<text x="94" y="26" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.8">z</text>
98+
<text x="108" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
99+
<text x="128" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
100+
<line x1="0" y1="34" x2="140" y2="34" stroke="#3b82f6" stroke-width="1" opacity="0.3"/>
101+
</svg>`
102+
},
103+
104+
// ─── 方案 4: 月牙包裹 Z ───
105+
{
106+
name: '方案 4: 月牙抱 Z',
107+
svg: `<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
108+
<!-- 月牙 -->
109+
<path d="M56 14C44 20 36 32 36 44C36 56 44 66 56 70C46 66 40 56 40 44C40 32 46 20 56 14Z" fill="#3b82f6"/>
110+
<!-- 主 Z -->
111+
<text x="42" y="48" font-family="monospace" font-size="28" font-weight="bold" fill="#0a0a0a">Z</text>
112+
<!-- 小 z -->
113+
<text x="46" y="34" font-family="monospace" font-size="14" fill="#60a5fa" opacity="0.8">z</text>
114+
<text x="50" y="20" font-family="monospace" font-size="18" fill="#93bbfd" opacity="0.9">Z</text>
115+
</svg>`,
116+
117+
code: `<svg width="40" height="40" viewBox="0 0 80 80" fill="none">
118+
<path d="M56 14C44 20 36 32 36 44C36 56 44 66 56 70C46 66 40 56 40 44C40 32 46 20 56 14Z" fill="#3b82f6"/>
119+
<text x="42" y="48" font-family="monospace" font-size="28" font-weight="bold" fill="#0a0a0a">Z</text>
120+
<text x="46" y="34" font-family="monospace" font-size="14" fill="#60a5fa" opacity="0.8">z</text>
121+
<text x="50" y="20" font-family="monospace" font-size="18" fill="#93bbfd" opacity="0.9">Z</text>
122+
</svg>`
123+
},
124+
125+
// ─── 方案 5: 闪电 Z ───
126+
{
127+
name: '方案 5: 闪电 Z',
128+
svg: `<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
129+
<!-- 闪电 + Z 混合 -->
130+
<path d="M44 8L24 44H38L34 72L60 34H46L50 8H44Z" fill="#60a5fa"/>
131+
<!-- 小 z 漂浮 -->
132+
<text x="30" y="16" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.6">z</text>
133+
<text x="54" y="10" font-family="monospace" font-size="14" fill="#60a5fa" opacity="0.7">Z</text>
134+
<text x="62" y="22" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.5">z</text>
135+
</svg>`,
136+
137+
code: `<svg width="40" height="40" viewBox="0 0 80 80" fill="none">
138+
<path d="M44 8L24 44H38L34 72L60 34H46L50 8H44Z" fill="#60a5fa"/>
139+
<text x="30" y="16" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.6">z</text>
140+
<text x="54" y="10" font-family="monospace" font-size="14" fill="#60a5fa" opacity="0.7">Z</text>
141+
<text x="62" y="22" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.5">z</text>
142+
</svg>`
143+
},
144+
145+
// ─── 方案 6: 纯字母 Logo ───
146+
{
147+
name: '方案 6: 纯字母韵律',
148+
svg: `<svg width="120" height="40" viewBox="0 0 120 40" fill="none">
149+
<!-- 大小交错 Z/z -->
150+
<text x="0" y="24" font-family="monospace" font-size="24" font-weight="bold" fill="#60a5fa">Z</text>
151+
<text x="24" y="20" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.7">z</text>
152+
<text x="38" y="16" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.4">z</text>
153+
<text x="50" y="24" font-family="monospace" font-size="12" fill="#555">sws</text>
154+
<text x="80" y="16" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.4">z</text>
155+
<text x="90" y="20" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.7">z</text>
156+
<text x="104" y="24" font-family="monospace" font-size="24" font-weight="bold" fill="#60a5fa">Z</text>
157+
<!-- 装饰圆点 -->
158+
<circle cx="100" cy="10" r="2" fill="#60a5fa" opacity="0.25"/>
159+
</svg>`,
160+
161+
code: `<svg width="120" height="40" viewBox="0 0 120 40" fill="none">
162+
<text x="0" y="24" font-family="monospace" font-size="24" font-weight="bold" fill="#60a5fa">Z</text>
163+
<text x="24" y="20" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.7">z</text>
164+
<text x="38" y="16" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.4">z</text>
165+
<text x="50" y="24" font-family="monospace" font-size="12" fill="#555">sws</text>
166+
<text x="80" y="16" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.4">z</text>
167+
<text x="90" y="20" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.7">z</text>
168+
<text x="104" y="24" font-family="monospace" font-size="24" font-weight="bold" fill="#60a5fa">Z</text>
169+
<circle cx="100" cy="10" r="2" fill="#60a5fa" opacity="0.25"/>
170+
</svg>`
171+
},
172+
]
173+
174+
const grid = document.getElementById('grid')
175+
let selectedIndex = -1
176+
177+
logos.forEach((logo, i) => {
178+
const card = document.createElement('div')
179+
card.className = 'card'
180+
card.innerHTML = \`
181+
\${logo.svg}
182+
<span class="label">\${logo.name}</span>
183+
<button class="use-btn" data-index="\${i}">选择此方案</button>
184+
\`
185+
card.addEventListener('click', (e) => {
186+
if (e.target.tagName !== 'BUTTON') return
187+
document.querySelectorAll('.card').forEach(c => c.classList.remove('selected'))
188+
card.classList.add('selected')
189+
selectedIndex = i
190+
alert(\`已选择 \${logo.name}，SVG 代码已复制到剪贴板\`)
191+
navigator.clipboard.writeText(logo.code)
192+
})
193+
grid.appendChild(card)
194+
})
195+
</script>
196+
197+
</body>
198+
</html>

‎src/components/NavBar.vue‎

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,18 @@ function isActive(path: string): boolean {
2222
<template>
2323
<nav class="fixed top-0 left-0 right-0 z-50 border-b border-white/10 bg-surface/80 backdrop-blur-md">
2424
<div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-6">
25-
<!-- Logo -->
26-
<router-link to="/" class="font-mono text-lg font-bold tracking-tight text-gray-100 hover:text-accent-dim transition-colors">
27-
zhushanwen
25+
<!-- Logo: ZZzzswszzZZ -->
26+
<router-link to="/" class="flex items-center gap-1 group">
27+
<svg width="100" height="28" viewBox="0 0 100 28" fill="none" class="transition-opacity group-hover:opacity-80">
28+
<text x="0" y="18" font-family="monospace" font-size="18" font-weight="bold" fill="#60a5fa">Z</text>
29+
<text x="18" y="15" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.7">z</text>
30+
<text x="28" y="12" font-family="monospace" font-size="8" fill="#60a5fa" opacity="0.4">z</text>
31+
<text x="36" y="16" font-family="monospace" font-size="9" fill="#666">sws</text>
32+
<text x="60" y="12" font-family="monospace" font-size="8" fill="#60a5fa" opacity="0.4">z</text>
33+
<text x="68" y="15" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.7">z</text>
34+
<text x="78" y="18" font-family="monospace" font-size="18" font-weight="bold" fill="#60a5fa">Z</text>
35+
<circle cx="94" cy="8" r="1.5" fill="#60a5fa" opacity="0.25"/>
36+
</svg>
2837
</router-link>
2938

3039
<!-- Desktop Nav -->
@@ -36,6 +45,7 @@ function isActive(path: string): boolean {
3645
个人介绍
3746
</router-link>
3847

48+
<!-- 项目介绍 dropdown: no gap between button and menu -->
3949
<div class="relative" @mouseleave="projectDropdownOpen = false">
4050
<button
4151
class="flex items-center gap-1 rounded-md px-3 py-1.5 text-sm transition-colors"
@@ -47,19 +57,25 @@ function isActive(path: string): boolean {
4757
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
4858
</svg>
4959
</button>
60+
<!-- 透明桥接层消除空隙 -->
5061
<div
5162
v-show="projectDropdownOpen"
52-
class="absolute left-0 top-full mt-1 w-56 rounded-lg border border-white/10 bg-surface-50 py-1 shadow-xl"
63+
class="absolute left-0 top-[calc(100%-4px)] z-10"
64+
@mouseenter="projectDropdownOpen = true"
5365
>
54-
<router-link
55-
v-for="project in projects"
56-
:key="project.path"
57-
:to="project.path"
58-
class="block px-4 py-2 text-sm text-gray-300 hover:bg-white/5 hover:text-white transition-colors"
59-
@click="projectDropdownOpen = false"
60-
>
61-
{{ project.name }}
62-
</router-link>
66+
<!-- 透明搭桥（覆盖按钮底部到菜单顶部的空隙） -->
67+
<div class="h-1 w-full" />
68+
<div class="w-56 rounded-lg border border-white/10 bg-surface-50 py-1 shadow-xl">
69+
<router-link
70+
v-for="project in projects"
71+
:key="project.path"
72+
:to="project.path"
73+
class="block px-4 py-2 text-sm text-gray-300 hover:bg-white/5 hover:text-white transition-colors"
74+
@click="projectDropdownOpen = false"
75+
>
76+
{{ project.name }}
77+
</router-link>
78+
</div>
6379
</div>
6480
</div>
6581

@@ -85,7 +101,7 @@ function isActive(path: string): boolean {
85101
</svg>
86102
</a>
87103
<a
88-
href="https://gitee.com/zhushanwen321"
104+
href="https://gitee.com/zzzzswszzzz"
89105
target="_blank"
90106
rel="noopener"
91107
class="text-gray-500 hover:text-gray-300 transition-colors"

‎src/router/index.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,30 @@ const router = createRouter({
88
path: '/',
99
redirect: '/project/llm-simple-router/',
1010
},
11+
{
12+
path: '/social',
13+
component: () => import('../views/social/SocialPage.vue'),
14+
},
15+
{
16+
path: '/social',
17+
component: () => import('../views/social/SocialPage.vue'),
18+
},
19+
{
20+
path: '/social',
21+
component: () => import('../views/social/SocialPage.vue'),
22+
},
23+
{
24+
path: '/social',
25+
component: () => import('../views/social/SocialPage.vue'),
26+
},
27+
{
28+
path: '/social',
29+
component: () => import('../views/social/SocialPage.vue'),
30+
},
31+
{
32+
path: '/social',
33+
component: () => import('../views/social/SocialPage.vue'),
34+
},
1135
{
1236
path: '/project/llm-simple-router',
1337
component: DocLayout,

0 commit comments

Comments
 (0)