wikiboss/nahaichuan
1
0
派生 0
代码 工单 合并请求 Actions 软件包 项目 版本发布 百科 动态

视觉优化：为首页4大技术架构洞察文章分配专属现代中式科技抽象封面图

浏览代码
这个提交包含在：
wikiboss
2026-10-09 17:14:41 +08:00
父节点 8e2a27ce2e
当前提交 2f330dd261
共有 14 个文件被更改，包括 195 次插入 和 178 次删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

11
addons/official/view/web/official_home/index.html
查看文件

@@ -849,9 +849,6 @@
{if $idx < 4}
<article class="nhc-article-card">
<a href="{:addon_url('official/web.official_journalism/details',[':pid'=>6,':sid'=>$art['official_category_id'],':id'=>$art['id']])}" class="nhc-article-card-thumb">
{if !empty($art['image'])}
<img src="{$art['image']}" alt="{$art['title']}" loading="lazy">
{else/}
{php}
$cover_fallbacks = [
0 => '/assets/addons/official/images/articles/article_cache.svg',
@@ -859,10 +856,14 @@
2 => '/assets/addons/official/images/articles/article_xxl_job.svg',
3 => '/assets/addons/official/images/articles/article_redis_split.svg',
];
$cover_src = isset($cover_fallbacks[$idx]) ? $cover_fallbacks[$idx] : '/assets/addons/official/images/articles/article_microservice.svg';
$img_val = !empty($art['image']) ? $art['image'] : '';
if (empty($img_val) || strpos($img_val, 'article_microservice.svg') !== false) {
$cover_src = isset($cover_fallbacks[$idx]) ? $cover_fallbacks[$idx] : '/assets/addons/official/images/articles/article_microservice.svg';
} else {
$cover_src = $img_val;
}
{/php}
<img src="{$cover_src}" alt="{$art['title']}" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">
{/if}
</a>
<div class="nhc-article-card-body">
<div class="nhc-article-meta">

10
public/assets/addons/official/images/articles/article_ai_agent.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 3.1 KiB

之后

宽度:  |  高度:  |  大小: 3.1 KiB

34
public/assets/addons/official/images/articles/article_cache.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
@@ -48,16 +48,20 @@
<g transform="translate(300, 190)">
<ellipse cx="0" cy="65" rx="190" ry="70" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="5,4"/>
<!-- 布隆过滤器位图光栅与防御漏斗 -->
<polygon points="0,-85 90,-45 0,-15 -90,-45" fill="url(#artGlass)" stroke="#2563EB" stroke-width="1.5" filter="url(#artShadow)"/>
<polygon points="0,-35 60,-5 0,18 -60,-5" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.2"/>
<polygon points="0,5 35,22 0,38 -35,22" fill="url(#artBlue)"/>
<line x1="0" y1="-85" x2="0" y2="70" stroke="url(#artBlue)" stroke-width="2.5" stroke-dasharray="4,3"/>
<circle cx="0" cy="70" r="18" fill="url(#artGlass)" stroke="#2563EB" stroke-width="1.2"/>
<circle cx="0" cy="70" r="6" fill="#2563EB" filter="url(#artGlow)"/>
<circle cx="-65" cy="-25" r="3.5" fill="#DC2626"/>
<circle cx="65" cy="-25" r="3.5" fill="#DC2626"/>
<ellipse cx="0" cy="70" rx="210" ry="75" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="5,4"/>
<!-- 布隆过滤器多阶防御漏斗与位图拦截阵列 -->
<polygon points="0,-100 110,-55 0,-20 -110,-55" fill="url(#artGlass)" stroke="#2563EB" stroke-width="1.5" filter="url(#artShadow)"/>
<polygon points="0,-45 75,-10 0,18 -75,-10" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.2"/>
<polygon points="0,5 45,26 0,46 -45,26" fill="url(#artBlue)"/>
<line x1="0" y1="-100" x2="0" y2="75" stroke="url(#artBlue)" stroke-width="2.5" stroke-dasharray="4,3"/>
<!-- 底部安全落盘数据持久层 -->
<circle cx="0" cy="75" r="22" fill="url(#artGlass)" stroke="#2563EB" stroke-width="1.5"/>
<circle cx="0" cy="75" r="8" fill="#2563EB" filter="url(#artGlow)"/>
<!-- 拦截击溃的异常请求粒子 -->
<circle cx="-85" cy="-35" r="4.5" fill="#DC2626"/>
<circle cx="85" cy="-35" r="4.5" fill="#DC2626"/>
<circle cx="-50" cy="15" r="3.5" fill="#06B6D4"/>
<circle cx="50" cy="15" r="3.5" fill="#2563EB"/>
</g>
</svg>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 3.3 KiB

之后

宽度:  |  高度:  |  大小: 3.5 KiB

10
public/assets/addons/official/images/articles/article_cross_app.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 3.3 KiB

之后

宽度:  |  高度:  |  大小: 3.3 KiB

10
public/assets/addons/official/images/articles/article_erp_bom.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 3.1 KiB

之后

宽度:  |  高度:  |  大小: 3.1 KiB

10
public/assets/addons/official/images/articles/article_microservice.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 3.5 KiB

之后

宽度:  |  高度:  |  大小: 3.5 KiB

39
public/assets/addons/official/images/articles/article_mysql_page.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
@@ -48,24 +48,25 @@
<g transform="translate(300, 190)">
<ellipse cx="0" cy="60" rx="180" ry="65" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="4,4"/>
<!-- B+Tree 索引阶梯结构 -->
<line x1="-120" y1="40" x2="120" y2="40" stroke="#CBD5E1" stroke-width="1.5"/>
<g transform="translate(-80, 20)">
<rect x="-15" y="-15" width="30" height="30" rx="4" fill="url(#artGlass)" stroke="#CBD5E1" stroke-width="1"/>
<circle cx="0" cy="0" r="3" fill="#94A3B8"/>
<ellipse cx="0" cy="65" rx="200" ry="70" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="4,4"/>
<!-- B+Tree 索引阶梯基准线 -->
<line x1="-150" y1="45" x2="150" y2="45" stroke="#CBD5E1" stroke-width="1.5"/>
<g transform="translate(-100, 20)">
<rect x="-18" y="-18" width="36" height="36" rx="5" fill="url(#artGlass)" stroke="#CBD5E1" stroke-width="1.2"/>
<circle cx="0" cy="0" r="4" fill="#94A3B8"/>
</g>
<g transform="translate(-20, 0)">
<rect x="-15" y="-15" width="30" height="30" rx="4" fill="url(#artGlass)" stroke="#93C5FD" stroke-width="1.2"/>
<circle cx="0" cy="0" r="3" fill="#2563EB"/>
<g transform="translate(-25, -5)">
<rect x="-18" y="-18" width="36" height="36" rx="5" fill="url(#artGlass)" stroke="#93C5FD" stroke-width="1.5"/>
<circle cx="0" cy="0" r="4" fill="#2563EB"/>
</g>
<!-- 高性能延迟关联跳跃抛物线 (由 3.8s 降至 12ms) -->
<path d="M -80 5 C -30 -70 40 -70 80 -10" fill="none" stroke="url(#artCyan)" stroke-width="2.5" stroke-linecap="round"/>
<g transform="translate(80, -10)" filter="url(#artShadow)">
<rect x="-20" y="-20" width="40" height="40" rx="6" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="6" fill="#FFFFFF" filter="url(#artGlow)"/>
<path d="M -100 5 C -40 -85 50 -85 100 -15" fill="none" stroke="url(#artCyan)" stroke-width="3" stroke-linecap="round"/>
<g transform="translate(100, -15)" filter="url(#artShadow)">
<rect x="-24" y="-24" width="48" height="48" rx="8" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="8" fill="#FFFFFF" filter="url(#artGlow)"/>
<circle cx="0" cy="0" r="3" fill="#1D4ED8"/>
</g>
<circle cx="0" cy="-60" r="4.5" fill="#06B6D4" filter="url(#artGlow)"/>
<circle cx="0" cy="-70" r="5.5" fill="#06B6D4" filter="url(#artGlow)"/>
</g>
</svg>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 3.6 KiB

之后

宽度:  |  高度:  |  大小: 3.6 KiB

10
public/assets/addons/official/images/articles/article_pos_offline.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 3.2 KiB

之后

宽度:  |  高度:  |  大小: 3.2 KiB

42
public/assets/addons/official/images/articles/article_redis_split.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
@@ -48,23 +48,23 @@
<g transform="translate(300, 190)">
<!-- 网络分区虚线隔断 -->
<line x1="0" y1="-100" x2="0" y2="100" stroke="#CBD5E1" stroke-width="1.5" stroke-dasharray="6,4"/>
<!-- 左侧：健康多数派集群节点 -->
<g transform="translate(-75, 0)" filter="url(#artShadow)">
<circle cx="0" cy="0" r="45" fill="#EFF6FF" opacity="0.8"/>
<circle cx="0" cy="0" r="32" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="14" fill="#FFFFFF"/>
<circle cx="0" cy="0" r="6" fill="#1D4ED8"/>
<circle cx="-35" cy="-35" r="5" fill="#06B6D4"/>
<circle cx="35" cy="-35" r="5" fill="#06B6D4"/>
<circle cx="0" cy="45" r="5" fill="#2563EB"/>
<!-- 网络分区虚线隔断 (Network Partition Boundary) -->
<line x1="0" y1="-115" x2="0" y2="115" stroke="#CBD5E1" stroke-width="1.8" stroke-dasharray="6,4"/>
<!-- 左侧：健康多数派集群节点 (Quorum Majority) -->
<g transform="translate(-85, 0)" filter="url(#artShadow)">
<circle cx="0" cy="0" r="52" fill="#EFF6FF" opacity="0.85"/>
<circle cx="0" cy="0" r="38" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="16" fill="#FFFFFF"/>
<circle cx="0" cy="0" r="7" fill="#1D4ED8"/>
<circle cx="-42" cy="-42" r="6" fill="#06B6D4"/>
<circle cx="42" cy="-42" r="6" fill="#06B6D4"/>
<circle cx="0" cy="52" r="6" fill="#2563EB"/>
</g>
<!-- 右侧：孤立少数派休眠节点 -->
<g transform="translate(75, 0)">
<circle cx="0" cy="0" r="38" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-dasharray="4,4"/>
<circle cx="0" cy="0" r="24" fill="url(#artGlass)" stroke="#CBD5E1" stroke-width="1.2"/>
<circle cx="0" cy="0" r="8" fill="#94A3B8"/>
<!-- 右侧：孤立少数派自动休眠 (Standby Sleep Mode) -->
<g transform="translate(85, 0)">
<circle cx="0" cy="0" r="44" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-dasharray="4,4"/>
<circle cx="0" cy="0" r="28" fill="url(#artGlass)" stroke="#CBD5E1" stroke-width="1.5"/>
<circle cx="0" cy="0" r="10" fill="#94A3B8"/>
</g>
</g>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 3.4 KiB

之后

宽度:  |  高度:  |  大小: 3.5 KiB

10
public/assets/addons/official/images/articles/article_security_whitepaper.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 2.7 KiB

之后

宽度:  |  高度:  |  大小: 2.7 KiB

10
public/assets/addons/official/images/articles/article_southwest_digital.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 2.9 KiB

之后

宽度:  |  高度:  |  大小: 2.9 KiB

10
public/assets/addons/official/images/articles/article_tdd_standards.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 2.8 KiB

之后

宽度:  |  高度:  |  大小: 2.8 KiB

41
public/assets/addons/official/images/articles/article_xxl_job.svg
查看文件

@@ -18,16 +18,16 @@
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
@@ -48,22 +48,25 @@
<g transform="translate(300, 190)">
<ellipse cx="0" cy="0" rx="150" ry="75" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="4,4"/>
<ellipse cx="0" cy="0" rx="100" ry="50" fill="none" stroke="#CBD5E1" stroke-width="1"/>
<ellipse cx="0" cy="0" rx="50" ry="25" fill="none" stroke="#93C5FD" stroke-width="1.2"/>
<!-- 中心调度器 -->
<!-- 同心全域广播波纹 -->
<ellipse cx="0" cy="0" rx="170" ry="85" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="4,4"/>
<ellipse cx="0" cy="0" rx="115" ry="58" fill="none" stroke="#CBD5E1" stroke-width="1.2"/>
<ellipse cx="0" cy="0" rx="60" ry="30" fill="none" stroke="#93C5FD" stroke-width="1.5"/>
<!-- 中心分布式任务调度器 -->
<g filter="url(#artShadow)">
<circle cx="0" cy="0" r="26" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="10" fill="#FFFFFF"/>
<circle cx="0" cy="0" r="4" fill="#1D4ED8"/>
<circle cx="0" cy="0" r="30" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="12" fill="#FFFFFF"/>
<circle cx="0" cy="0" r="5" fill="#1D4ED8"/>
</g>
<!-- 环绕分片广播执行节点 -->
<circle cx="-130" cy="0" r="8" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.5"/>
<circle cx="130" cy="0" r="8" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.5"/>
<circle cx="0" cy="-65" r="7" fill="url(#artGlass)" stroke="#7C3AED" stroke-width="1.5"/>
<circle cx="0" cy="65" r="7" fill="url(#artGlass)" stroke="#7C3AED" stroke-width="1.5"/>
<circle cx="-90" cy="-40" r="5" fill="#2563EB"/>
<circle cx="90" cy="40" r="5" fill="#2563EB"/>
<!-- 环绕分片广播执行节点集群 -->
<circle cx="-150" cy="0" r="9" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.8"/>
<circle cx="150" cy="0" r="9" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.8"/>
<circle cx="0" cy="-75" r="8" fill="url(#artGlass)" stroke="#7C3AED" stroke-width="1.8"/>
<circle cx="0" cy="75" r="8" fill="url(#artGlass)" stroke="#7C3AED" stroke-width="1.8"/>
<circle cx="-105" cy="-45" r="6" fill="#2563EB"/>
<circle cx="105" cy="45" r="6" fill="#2563EB"/>
<circle cx="-105" cy="45" r="6" fill="#06B6D4"/>
<circle cx="105" cy="-45" r="6" fill="#7C3AED"/>
</g>
</svg>
双排 滑动 叠加

之前

宽度:  |  高度:  |  大小: 3.5 KiB

之后

宽度:  |  高度:  |  大小: 3.6 KiB

126
tests/generate_article_covers.py
查看文件

@@ -28,16 +28,16 @@ COMMON_DEFS = '''
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="artGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.88"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.65"/>
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.92"/>
<stop offset="100%" stop-color="#F1F5F9" stop-opacity="0.7"/>
</linearGradient>
<pattern id="artLattice" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="#E2E8F0" stroke-width="0.75" stroke-dasharray="3,3"/>
</pattern>
<filter id="artShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.06"/>
<filter id="artShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.08"/>
</filter>
<filter id="artGlow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="artGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
@@ -73,79 +73,87 @@ articles = {
# 首页 4 篇技术深度文章专属抽象封面
# 1. 缓存穿透、击穿与雪崩《三阶重滤与抗压漏斗》
'article_cache.svg': ('盾', '''
<ellipse cx="0" cy="65" rx="190" ry="70" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="5,4"/>
<!-- 布隆过滤器位图光栅与防御漏斗 -->
<polygon points="0,-85 90,-45 0,-15 -90,-45" fill="url(#artGlass)" stroke="#2563EB" stroke-width="1.5" filter="url(#artShadow)"/>
<polygon points="0,-35 60,-5 0,18 -60,-5" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.2"/>
<polygon points="0,5 35,22 0,38 -35,22" fill="url(#artBlue)"/>
<line x1="0" y1="-85" x2="0" y2="70" stroke="url(#artBlue)" stroke-width="2.5" stroke-dasharray="4,3"/>
<circle cx="0" cy="70" r="18" fill="url(#artGlass)" stroke="#2563EB" stroke-width="1.2"/>
<circle cx="0" cy="70" r="6" fill="#2563EB" filter="url(#artGlow)"/>
<circle cx="-65" cy="-25" r="3.5" fill="#DC2626"/>
<circle cx="65" cy="-25" r="3.5" fill="#DC2626"/>
<ellipse cx="0" cy="70" rx="210" ry="75" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="5,4"/>
<!-- 布隆过滤器多阶防御漏斗与位图拦截阵列 -->
<polygon points="0,-100 110,-55 0,-20 -110,-55" fill="url(#artGlass)" stroke="#2563EB" stroke-width="1.5" filter="url(#artShadow)"/>
<polygon points="0,-45 75,-10 0,18 -75,-10" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.2"/>
<polygon points="0,5 45,26 0,46 -45,26" fill="url(#artBlue)"/>
<line x1="0" y1="-100" x2="0" y2="75" stroke="url(#artBlue)" stroke-width="2.5" stroke-dasharray="4,3"/>
<!-- 底部安全落盘数据持久层 -->
<circle cx="0" cy="75" r="22" fill="url(#artGlass)" stroke="#2563EB" stroke-width="1.5"/>
<circle cx="0" cy="75" r="8" fill="#2563EB" filter="url(#artGlow)"/>
<!-- 拦截击溃的异常请求粒子 -->
<circle cx="-85" cy="-35" r="4.5" fill="#DC2626"/>
<circle cx="85" cy="-35" r="4.5" fill="#DC2626"/>
<circle cx="-50" cy="15" r="3.5" fill="#06B6D4"/>
<circle cx="50" cy="15" r="3.5" fill="#2563EB"/>
'''),
# 2. MySQL LIMIT 深度分页《B+Tree 跳跃指针与延迟关联》
'article_mysql_page.svg': ('跃', '''
<ellipse cx="0" cy="60" rx="180" ry="65" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="4,4"/>
<!-- B+Tree 索引阶梯结构 -->
<line x1="-120" y1="40" x2="120" y2="40" stroke="#CBD5E1" stroke-width="1.5"/>
<g transform="translate(-80, 20)">
<rect x="-15" y="-15" width="30" height="30" rx="4" fill="url(#artGlass)" stroke="#CBD5E1" stroke-width="1"/>
<circle cx="0" cy="0" r="3" fill="#94A3B8"/>
<ellipse cx="0" cy="65" rx="200" ry="70" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="4,4"/>
<!-- B+Tree 索引阶梯基准线 -->
<line x1="-150" y1="45" x2="150" y2="45" stroke="#CBD5E1" stroke-width="1.5"/>
<g transform="translate(-100, 20)">
<rect x="-18" y="-18" width="36" height="36" rx="5" fill="url(#artGlass)" stroke="#CBD5E1" stroke-width="1.2"/>
<circle cx="0" cy="0" r="4" fill="#94A3B8"/>
</g>
<g transform="translate(-20, 0)">
<rect x="-15" y="-15" width="30" height="30" rx="4" fill="url(#artGlass)" stroke="#93C5FD" stroke-width="1.2"/>
<circle cx="0" cy="0" r="3" fill="#2563EB"/>
<g transform="translate(-25, -5)">
<rect x="-18" y="-18" width="36" height="36" rx="5" fill="url(#artGlass)" stroke="#93C5FD" stroke-width="1.5"/>
<circle cx="0" cy="0" r="4" fill="#2563EB"/>
</g>
<!-- 高性能延迟关联跳跃抛物线 (由 3.8s 降至 12ms) -->
<path d="M -80 5 C -30 -70 40 -70 80 -10" fill="none" stroke="url(#artCyan)" stroke-width="2.5" stroke-linecap="round"/>
<g transform="translate(80, -10)" filter="url(#artShadow)">
<rect x="-20" y="-20" width="40" height="40" rx="6" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="6" fill="#FFFFFF" filter="url(#artGlow)"/>
<path d="M -100 5 C -40 -85 50 -85 100 -15" fill="none" stroke="url(#artCyan)" stroke-width="3" stroke-linecap="round"/>
<g transform="translate(100, -15)" filter="url(#artShadow)">
<rect x="-24" y="-24" width="48" height="48" rx="8" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="8" fill="#FFFFFF" filter="url(#artGlow)"/>
<circle cx="0" cy="0" r="3" fill="#1D4ED8"/>
</g>
<circle cx="0" cy="-60" r="4.5" fill="#06B6D4" filter="url(#artGlow)"/>
<circle cx="0" cy="-70" r="5.5" fill="#06B6D4" filter="url(#artGlow)"/>
'''),
# 3. XXL-JOB 分布式分片广播《全域广播与等距波纹》
'article_xxl_job.svg': ('播', '''
<ellipse cx="0" cy="0" rx="150" ry="75" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="4,4"/>
<ellipse cx="0" cy="0" rx="100" ry="50" fill="none" stroke="#CBD5E1" stroke-width="1"/>
<ellipse cx="0" cy="0" rx="50" ry="25" fill="none" stroke="#93C5FD" stroke-width="1.2"/>
<!-- 中心调度器 -->
<!-- 同心全域广播波纹 -->
<ellipse cx="0" cy="0" rx="170" ry="85" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-dasharray="4,4"/>
<ellipse cx="0" cy="0" rx="115" ry="58" fill="none" stroke="#CBD5E1" stroke-width="1.2"/>
<ellipse cx="0" cy="0" rx="60" ry="30" fill="none" stroke="#93C5FD" stroke-width="1.5"/>
<!-- 中心分布式任务调度器 -->
<g filter="url(#artShadow)">
<circle cx="0" cy="0" r="26" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="10" fill="#FFFFFF"/>
<circle cx="0" cy="0" r="4" fill="#1D4ED8"/>
<circle cx="0" cy="0" r="30" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="12" fill="#FFFFFF"/>
<circle cx="0" cy="0" r="5" fill="#1D4ED8"/>
</g>
<!-- 环绕分片广播执行节点 -->
<circle cx="-130" cy="0" r="8" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.5"/>
<circle cx="130" cy="0" r="8" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.5"/>
<circle cx="0" cy="-65" r="7" fill="url(#artGlass)" stroke="#7C3AED" stroke-width="1.5"/>
<circle cx="0" cy="65" r="7" fill="url(#artGlass)" stroke="#7C3AED" stroke-width="1.5"/>
<circle cx="-90" cy="-40" r="5" fill="#2563EB"/>
<circle cx="90" cy="40" r="5" fill="#2563EB"/>
<!-- 环绕分片广播执行节点集群 -->
<circle cx="-150" cy="0" r="9" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.8"/>
<circle cx="150" cy="0" r="9" fill="url(#artGlass)" stroke="#06B6D4" stroke-width="1.8"/>
<circle cx="0" cy="-75" r="8" fill="url(#artGlass)" stroke="#7C3AED" stroke-width="1.8"/>
<circle cx="0" cy="75" r="8" fill="url(#artGlass)" stroke="#7C3AED" stroke-width="1.8"/>
<circle cx="-105" cy="-45" r="6" fill="#2563EB"/>
<circle cx="105" cy="45" r="6" fill="#2563EB"/>
<circle cx="-105" cy="45" r="6" fill="#06B6D4"/>
<circle cx="105" cy="-45" r="6" fill="#7C3AED"/>
'''),
# 4. Redis 集群脑裂防御《双子星隔离与法定仲裁》
'article_redis_split.svg': ('防', '''
<!-- 网络分区虚线隔断 -->
<line x1="0" y1="-100" x2="0" y2="100" stroke="#CBD5E1" stroke-width="1.5" stroke-dasharray="6,4"/>
<!-- 左侧：健康多数派集群节点 -->
<g transform="translate(-75, 0)" filter="url(#artShadow)">
<circle cx="0" cy="0" r="45" fill="#EFF6FF" opacity="0.8"/>
<circle cx="0" cy="0" r="32" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="14" fill="#FFFFFF"/>
<circle cx="0" cy="0" r="6" fill="#1D4ED8"/>
<circle cx="-35" cy="-35" r="5" fill="#06B6D4"/>
<circle cx="35" cy="-35" r="5" fill="#06B6D4"/>
<circle cx="0" cy="45" r="5" fill="#2563EB"/>
<!-- 网络分区虚线隔断 (Network Partition Boundary) -->
<line x1="0" y1="-115" x2="0" y2="115" stroke="#CBD5E1" stroke-width="1.8" stroke-dasharray="6,4"/>
<!-- 左侧：健康多数派集群节点 (Quorum Majority) -->
<g transform="translate(-85, 0)" filter="url(#artShadow)">
<circle cx="0" cy="0" r="52" fill="#EFF6FF" opacity="0.85"/>
<circle cx="0" cy="0" r="38" fill="url(#artBlue)"/>
<circle cx="0" cy="0" r="16" fill="#FFFFFF"/>
<circle cx="0" cy="0" r="7" fill="#1D4ED8"/>
<circle cx="-42" cy="-42" r="6" fill="#06B6D4"/>
<circle cx="42" cy="-42" r="6" fill="#06B6D4"/>
<circle cx="0" cy="52" r="6" fill="#2563EB"/>
</g>
<!-- 右侧：孤立少数派休眠节点 -->
<g transform="translate(75, 0)">
<circle cx="0" cy="0" r="38" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-dasharray="4,4"/>
<circle cx="0" cy="0" r="24" fill="url(#artGlass)" stroke="#CBD5E1" stroke-width="1.2"/>
<circle cx="0" cy="0" r="8" fill="#94A3B8"/>
<!-- 右侧：孤立少数派自动休眠 (Standby Sleep Mode) -->
<g transform="translate(85, 0)">
<circle cx="0" cy="0" r="44" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-dasharray="4,4"/>
<circle cx="0" cy="0" r="28" fill="url(#artGlass)" stroke="#CBD5E1" stroke-width="1.5"/>
<circle cx="0" cy="0" r="10" fill="#94A3B8"/>
</g>
'''),