Skip to content

Commit bea79b8

Browse files
Layau-codeLayau-code
committed
关于短链
1 parent 447388b commit bea79b8

File tree

1 file changed

+335
-0
lines changed

1 file changed

+335
-0
lines changed

‎web/src/pages/AboutPage.vue‎

Lines changed: 335 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,335 @@
1+
<template>
2+
<div class="min-h-screen pt-14" style="background-color:var(--tf-bg-page)">
3+
<!-- Hero Section -->
4+
<section class="hero py-20 px-6">
5+
<div class="max-w-4xl mx-auto text-center">
6+
<h1 class="text-5xl font-bold mb-6" style="color:#1F2329">
7+
关于 TinyFlow
8+
</h1>
9+
<div class="text-xl" style="color:#646A73;line-height:1.8">
10+
世界上没有两个完全相同的雨滴，就像这个系统中的每一个短链接都是独一无二的
11+
</div>
12+
</div>
13+
</section>
14+
15+
<!-- Philosophy Section -->
16+
<section class="py-16 px-6">
17+
<div class="max-w-5xl mx-auto">
18+
<div class="fs-card p-8 md:p-12">
19+
<h2 class="text-3xl font-bold mb-6 text-center" style="color:#1F2329">
20+
为什么叫 TinyFlow？
21+
</h2>
22+
23+
<div class="space-y-8">
24+
<!-- 雨滴的独特性 -->
25+
<div class="flex items-start gap-4">
26+
<div class="shrink-0 w-12 h-12 rounded-full flex items-center justify-center" style="background:linear-gradient(135deg, #3370FF 0%, #38BDF8 100%)">
27+
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
28+
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd" />
29+
</svg>
30+
</div>
31+
<div class="flex-1">
32+
<h3 class="text-xl font-semibold mb-3" style="color:#1F2329">微小而独特 (Tiny)</h3>
33+
<p class="text-base leading-relaxed" style="color:#646A73">
34+
每一滴雨水的形状、大小、轨迹都不尽相同，即使在显微镜下，你也找不到两滴完全一样的雨滴。
35+
这种自然界的独特性，恰如其分地诠释了短链接系统的核心特征——<strong>每一个短链接都拥有唯一的标识</strong>。
36+
通过<strong>号段模式分布式 ID 生成器 + Hashids 算法 + Base58 编码</strong>，
37+
TinyFlow 能稳定生成 6 位无冲突短码，单机 TPS 超过 10000+，确保每个短链接都是独一无二的存在。
38+
</p>
39+
</div>
40+
</div>
41+
42+
<!-- 汇聚成流 -->
43+
<div class="flex items-start gap-4">
44+
<div class="shrink-0 w-12 h-12 rounded-full flex items-center justify-center" style="background:linear-gradient(135deg, #3370FF 0%, #38BDF8 100%)">
45+
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
46+
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
47+
</svg>
48+
</div>
49+
<div class="flex-1">
50+
<h3 class="text-xl font-semibold mb-3" style="color:#1F2329">汇聚成流 (Flow)</h3>
51+
<p class="text-base leading-relaxed" style="color:#646A73">
52+
雨滴落下后，它们会汇聚成溪流、河流，最终奔向大海。这种<strong>从微小到宏大的汇聚过程</strong>，
53+
象征着短链接系统中数据的流动与聚合。每一次点击、每一个访问，都如同雨滴汇入河流，
54+
最终形成可供分析的<strong>数据洪流</strong>。TinyFlow 采用 <strong>RabbitMQ 消息队列</strong>异步处理点击统计，
55+
消费者每 2 秒批量聚合刷库，系统 TPS 提升 5 倍，消息丢失率低于 0.01%。
56+
正如涓涓细流汇成江河，每一次点击数据最终都汇聚成完整的统计图表。
57+
</p>
58+
</div>
59+
</div>
60+
61+
<!-- 持续流动 -->
62+
<div class="flex items-start gap-4">
63+
<div class="shrink-0 w-12 h-12 rounded-full flex items-center justify-center" style="background:linear-gradient(135deg, #3370FF 0%, #38BDF8 100%)">
64+
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
65+
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
66+
</svg>
67+
</div>
68+
<div class="flex-1">
69+
<h3 class="text-xl font-semibold mb-3" style="color:#1F2329">持续流动</h3>
70+
<p class="text-base leading-relaxed" style="color:#646A73">
71+
河流永不停息，数据也在不断流动。TinyFlow 构建了 <strong>Caffeine (L1) + Redis (L2) + MySQL</strong> 三级缓存体系，
72+
缓存命中率达 85%+，数据库 IO 降低 70%。启动时预热 Top 1000 热点短链到本地缓存，
73+
确保高频访问的数据如流水般顺畅。配合 <strong>Resilience4j</strong> 熔断降级机制，
74+
即使 Redis 或 MySQL 故障，系统依然能够平稳运行，<strong>数据流动永不中断</strong>。
75+
</p>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</section>
82+
83+
<!-- Core Features -->
84+
<section class="py-16 px-6" style="background:linear-gradient(180deg, transparent 0%, rgba(51,112,255,0.03) 100%)">
85+
<div class="max-w-5xl mx-auto">
86+
<h2 class="text-3xl font-bold mb-12 text-center" style="color:#1F2329">
87+
核心技术特性
88+
</h2>
89+
90+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
91+
<!-- Feature 1 -->
92+
<div class="fs-card p-6 hover:shadow-lg transition">
93+
<div class="flex items-center gap-3 mb-3">
94+
<div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background:rgba(51,112,255,0.1)">
95+
<span class="text-2xl">🚀</span>
96+
</div>
97+
<h3 class="text-lg font-semibold" style="color:#1F2329">高性能架构</h3>
98+
</div>
99+
<p class="text-sm leading-relaxed" style="color:#646A73">
100+
压测验证可稳定支撑 3000+ QPS，P99 延迟小于 100ms。
101+
采用号段模式预分配 ID + 多级缓存 + 消息队列异步解耦，
102+
确保系统在高并发场景下依然丝滑流畅。
103+
</p>
104+
</div>
105+
106+
<!-- Feature 2 -->
107+
<div class="fs-card p-6 hover:shadow-lg transition">
108+
<div class="flex items-center gap-3 mb-3">
109+
<div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background:rgba(51,112,255,0.1)">
110+
<span class="text-2xl">🔐</span>
111+
</div>
112+
<h3 class="text-lg font-semibold" style="color:#1F2329">无冲突生成</h3>
113+
</div>
114+
<p class="text-sm leading-relaxed" style="color:#646A73">
115+
双 Buffer 机制异步加载 ID 段，Hashids 算法混淆 ID，
116+
Base58 编码生成 6 位可读短码，确保每个短链接都是独一无二的，
117+
就像世界上没有两滴相同的雨水。
118+
</p>
119+
</div>
120+
121+
<!-- Feature 3 -->
122+
<div class="fs-card p-6 hover:shadow-lg transition">
123+
<div class="flex items-center gap-3 mb-3">
124+
<div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background:rgba(51,112,255,0.1)">
125+
<span class="text-2xl">💾</span>
126+
</div>
127+
<h3 class="text-lg font-semibold" style="color:#1F2329">多级缓存</h3>
128+
</div>
129+
<p class="text-sm leading-relaxed" style="color:#646A73">
130+
L1 本地缓存 + L2 分布式缓存 + L3 数据库，逐级回填策略。
131+
缓存预热机制加载热点数据，命中率 85%+，
132+
数据库压力降低 70%，冷启动延迟降低 60%。
133+
</p>
134+
</div>
135+
136+
<!-- Feature 4 -->
137+
<div class="fs-card p-6 hover:shadow-lg transition">
138+
<div class="flex items-center gap-3 mb-3">
139+
<div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background:rgba(51,112,255,0.1)">
140+
<span class="text-2xl">📊</span>
141+
</div>
142+
<h3 class="text-lg font-semibold" style="color:#1F2329">数据洪流</h3>
143+
</div>
144+
<p class="text-sm leading-relaxed" style="color:#646A73">
145+
每一次点击都是一滴雨水，汇聚成数据的河流。
146+
RabbitMQ 异步统计 + 批量刷库，消息吞吐 5000+/s，
147+
丢失率低于 0.01%，为你呈现完整的访问趋势与来源分布。
148+
</p>
149+
</div>
150+
151+
<!-- Feature 5 -->
152+
<div class="fs-card p-6 hover:shadow-lg transition">
153+
<div class="flex items-center gap-3 mb-3">
154+
<div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background:rgba(51,112,255,0.1)">
155+
<span class="text-2xl">🛡️</span>
156+
</div>
157+
<h3 class="text-lg font-semibold" style="color:#1F2329">熔断降级</h3>
158+
</div>
159+
<p class="text-sm leading-relaxed" style="color:#646A73">
160+
Resilience4j 保障服务稳定性，失败率超 50% 或慢调用超 80% 自动熔断。
161+
Redis 熔断 → MySQL，MySQL 熔断 → 默认值，
162+
确保数据流动永不中断。
163+
</p>
164+
</div>
165+
166+
<!-- Feature 6 -->
167+
<div class="fs-card p-6 hover:shadow-lg transition">
168+
<div class="flex items-center gap-3 mb-3">
169+
<div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background:rgba(51,112,255,0.1)">
170+
<span class="text-2xl">📈</span>
171+
</div>
172+
<h3 class="text-lg font-semibold" style="color:#1F2329">全链路监控</h3>
173+
</div>
174+
<p class="text-sm leading-relaxed" style="color:#646A73">
175+
Prometheus 采集指标，Grafana 可视化监控大盘，
176+
Zipkin 追踪全链路耗时。每一滴数据的流动轨迹都清晰可见，
177+
性能瓶颈一目了然。
178+
</p>
179+
</div>
180+
</div>
181+
</div>
182+
</section>
183+
184+
<!-- Tech Stack -->
185+
<section class="py-16 px-6">
186+
<div class="max-w-5xl mx-auto">
187+
<h2 class="text-3xl font-bold mb-12 text-center" style="color:#1F2329">
188+
技术栈
189+
</h2>
190+
191+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
192+
<!-- Frontend -->
193+
<div class="fs-card p-6">
194+
<h3 class="text-lg font-semibold mb-4" style="color:#1F2329">前端</h3>
195+
<div class="space-y-2 text-sm" style="color:#646A73">
196+
<div>✓ Vue 3 + Composition API</div>
197+
<div>✓ Vite 5 极速构建</div>
198+
<div>✓ Tailwind CSS 原子化</div>
199+
<div>✓ ECharts 数据可视化</div>
200+
<div>✓ Vue I18n 国际化</div>
201+
</div>
202+
</div>
203+
204+
<!-- Backend -->
205+
<div class="fs-card p-6">
206+
<h3 class="text-lg font-semibold mb-4" style="color:#1F2329">后端</h3>
207+
<div class="space-y-2 text-sm" style="color:#646A73">
208+
<div>✓ Spring Boot 3.5.7</div>
209+
<div>✓ Spring Data JPA</div>
210+
<div>✓ MySQL 8.0 持久化</div>
211+
<div>✓ Redis 7 分布式缓存</div>
212+
<div>✓ RabbitMQ 消息队列</div>
213+
</div>
214+
</div>
215+
216+
<!-- Infrastructure -->
217+
<div class="fs-card p-6">
218+
<h3 class="text-lg font-semibold mb-4" style="color:#1F2329">基础设施</h3>
219+
<div class="space-y-2 text-sm" style="color:#646A73">
220+
<div>✓ Caffeine 本地缓存</div>
221+
<div>✓ Resilience4j 熔断器</div>
222+
<div>✓ Prometheus 指标采集</div>
223+
<div>✓ Grafana 监控大盘</div>
224+
<div>✓ Zipkin 链路追踪</div>
225+
</div>
226+
</div>
227+
</div>
228+
</div>
229+
</section>
230+
231+
<!-- Team -->
232+
<section class="py-16 px-6" style="background:linear-gradient(180deg, rgba(51,112,255,0.03) 0%, transparent 100%)">
233+
<div class="max-w-4xl mx-auto text-center">
234+
<h2 class="text-3xl font-bold mb-6" style="color:#1F2329">
235+
关于作者
236+
</h2>
237+
<div class="fs-card p-8 inline-block">
238+
<div class="w-24 h-24 rounded-full mx-auto mb-4 flex items-center justify-center text-4xl" style="background:linear-gradient(135deg, #3370FF 0%, #38BDF8 100%);color:white">
239+
L
240+
</div>
241+
<h3 class="text-xl font-semibold mb-2" style="color:#1F2329">Layau</h3>
242+
<p class="text-sm mb-4" style="color:#646A73">全栈开发者 / 高并发系统架构爱好者</p>
243+
<div class="flex items-center justify-center gap-4">
244+
<a href="https://github.com/Layau-code" target="_blank" class="text-sm hover:underline" style="color:#3370FF">
245+
GitHub
246+
</a>
247+
<span style="color:#E5E7EB">|</span>
248+
<a href="mailto:[email protected]" class="text-sm hover:underline" style="color:#3370FF">
249+
Email
250+
</a>
251+
</div>
252+
</div>
253+
<p class="mt-8 text-base leading-relaxed max-w-2xl mx-auto" style="color:#646A73">
254+
TinyFlow 是一个学习高并发系统设计的实战项目，适合作为面试分享或技术交流。
255+
希望这个项目能够帮助更多同学理解分布式系统的设计思路与性能优化实践。
256+
</p>
257+
</div>
258+
</section>
259+
260+
<!-- CTA -->
261+
<section class="py-16 px-6">
262+
<div class="max-w-4xl mx-auto text-center">
263+
<div class="fs-card p-12">
264+
<h2 class="text-3xl font-bold mb-4" style="color:#1F2329">
265+
开始使用 TinyFlow
266+
</h2>
267+
<p class="text-lg mb-8" style="color:#646A73">
268+
加入我们，探索短链接系统的无限可能
269+
</p>
270+
<div class="flex items-center justify-center gap-4 flex-wrap">
271+
<button @click="$router.push('/')" class="fs-btn-primary px-8 py-3">
272+
立即体验
273+
</button>
274+
<a href="https://github.com/Layau-code/TinyFlow" target="_blank" class="fs-btn-secondary px-8 py-3 inline-block">
275+
查看源码
276+
</a>
277+
</div>
278+
</div>
279+
</div>
280+
</section>
281+
</div>
282+
</template>
283+
284+
<script>
285+
export default {
286+
name: 'AboutPage'
287+
}
288+
</script>
289+
290+
<style scoped>
291+
.fs-card {
292+
background: white;
293+
border-radius: 12px;
294+
box-shadow: 0 1px 2px 0 rgba(31,35,41,0.08);
295+
border: 1px solid var(--tf-border);
296+
transition: all 0.3s ease;
297+
}
298+
299+
.fs-card:hover {
300+
box-shadow: 0 4px 12px 0 rgba(31,35,41,0.12);
301+
}
302+
303+
.fs-btn-primary {
304+
background: linear-gradient(135deg, #3370FF 0%, #2B5FE6 100%);
305+
color: white;
306+
border: none;
307+
border-radius: 8px;
308+
font-size: 16px;
309+
font-weight: 500;
310+
cursor: pointer;
311+
transition: all 0.2s ease;
312+
}
313+
314+
.fs-btn-primary:hover {
315+
transform: translateY(-2px);
316+
box-shadow: 0 4px 12px rgba(51,112,255,0.3);
317+
}
318+
319+
.fs-btn-secondary {
320+
background: white;
321+
color: #3370FF;
322+
border: 1px solid #3370FF;
323+
border-radius: 8px;
324+
font-size: 16px;
325+
font-weight: 500;
326+
cursor: pointer;
327+
transition: all 0.2s ease;
328+
text-decoration: none;
329+
}
330+
331+
.fs-btn-secondary:hover {
332+
background: rgba(51,112,255,0.05);
333+
transform: translateY(-2px);
334+
}
335+
</style>

0 commit comments

Comments
 (0)