liuwei_x_x/abot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化社交关系图视觉风格并加入轻科幻元素

Browse Source
This commit is contained in:
liuwei
2026-04-27 09:51:31 +08:00
parent f7a5096b3d
commit d2c766eec9
2 changed files with 133 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
plugins/value_rank/templates/social_graph.html
View File

@@ -3,9 +3,18 @@
<head>
<meta charset="UTF-8" />
<style>
:root {
--panel-blue: #16325f;
--panel-cyan: #52d7ff;
--panel-ice: #e8f6ff;
--panel-amber: #ffb347;
}
body {
margin: 0;
background: linear-gradient(135deg, #f7fbff 0%, #f2f7ff 45%, #fff8ed 100%);
background:
radial-gradient(circle at 18% 18%, rgba(86, 227, 255, 0.22) 0%, rgba(86, 227, 255, 0.00) 28%),
radial-gradient(circle at 84% 16%, rgba(255, 195, 108, 0.18) 0%, rgba(255, 195, 108, 0.00) 26%),
linear-gradient(135deg, #eef7ff 0%, #edf5ff 44%, #fef7ec 100%);
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.card {
@@ -16,22 +25,28 @@
}
.title {
font-size: 38px;
color: #1f2d46;
color: #1c2b52;
font-weight: 800;
letter-spacing: 1px;
text-shadow: 0 0 18px rgba(82, 215, 255, 0.14);
}
.subtitle {
margin-top: 8px;
font-size: 17px;
color: #5f6f8a;
color: #5c708f;
}
.graph-wrap {
margin-top: 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(207, 221, 246, 0.9);
box-shadow: 0 8px 24px rgba(58, 82, 130, 0.12);
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(243,250,255,0.88) 54%, rgba(255,249,240,0.90) 100%);
border: 1px solid rgba(157, 221, 255, 0.72);
box-shadow:
0 10px 32px rgba(34, 60, 108, 0.10),
0 0 0 1px rgba(255,255,255,0.42) inset,
0 0 48px rgba(82, 215, 255, 0.10);
overflow: hidden;
position: relative;
}
.legend {
margin-top: 14px;
@@ -48,10 +63,74 @@
<div class="subtitle">__SUMMARY_TEXT__</div>
<div class="graph-wrap">
<svg width="__WIDTH__" height="__HEIGHT__" viewBox="0 0 __WIDTH__ __HEIGHT__">
<rect x="0" y="0" width="__WIDTH__" height="__HEIGHT__" fill="rgba(247,251,255,0.72)"></rect>
<defs>
<linearGradient id="panelBgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f8fdff"></stop>
<stop offset="56%" stop-color="#edf7ff"></stop>
<stop offset="100%" stop-color="#fff8ef"></stop>
</linearGradient>
<radialGradient id="panelGlowLeft" cx="20%" cy="18%" r="36%">
<stop offset="0%" stop-color="#52D7FF" stop-opacity="0.42"></stop>
<stop offset="100%" stop-color="#52D7FF" stop-opacity="0"></stop>
</radialGradient>
<radialGradient id="panelGlowRight" cx="84%" cy="15%" r="30%">
<stop offset="0%" stop-color="#FFC16C" stop-opacity="0.26"></stop>
<stop offset="100%" stop-color="#FFC16C" stop-opacity="0"></stop>
</radialGradient>
<pattern id="techGrid" width="32" height="32" patternUnits="userSpaceOnUse">
<path d="M 32 0 L 0 0 0 32" fill="none" stroke="rgba(110,168,214,0.10)" stroke-width="1"></path>
<circle cx="0" cy="0" r="1.4" fill="rgba(82,215,255,0.16)"></circle>
</pattern>
<filter id="edgeGlow" x="-60%" y="-60%" width="220%" height="220%">
<feGaussianBlur stdDeviation="3.2" result="blur"></feGaussianBlur>
<feMerge>
<feMergeNode in="blur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="nodeGlow" x="-80%" y="-80%" width="260%" height="260%">
<feGaussianBlur stdDeviation="6" result="blur"></feGaussianBlur>
<feColorMatrix
in="blur"
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 0.36 0"></feColorMatrix>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="panelSoftGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2.2" result="blur"></feGaussianBlur>
<feMerge>
<feMergeNode in="blur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="crownGlow" x="-60%" y="-60%" width="220%" height="220%">
<feGaussianBlur stdDeviation="2.6" result="blur"></feGaussianBlur>
<feMerge>
<feMergeNode in="blur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
__EDGE_DEFS__
__NODE_DEFS__
</defs>
<rect x="0" y="0" width="__WIDTH__" height="__HEIGHT__" fill="url(#panelBgGradient)"></rect>
<rect x="0" y="0" width="__WIDTH__" height="__HEIGHT__" fill="url(#techGrid)"></rect>
<ellipse cx="250" cy="160" rx="240" ry="140" fill="url(#panelGlowLeft)"></ellipse>
<ellipse cx="1280" cy="150" rx="220" ry="126" fill="url(#panelGlowRight)"></ellipse>
<path d="M46 54 L126 54" stroke="rgba(84,212,255,0.78)" stroke-width="3" stroke-linecap="round"></path>
<path d="M46 54 L46 134" stroke="rgba(84,212,255,0.34)" stroke-width="2" stroke-linecap="round"></path>
<path d="M1412 54 L1492 54" stroke="rgba(255,190,98,0.56)" stroke-width="3" stroke-linecap="round"></path>
<path d="M1492 54 L1492 134" stroke="rgba(255,190,98,0.26)" stroke-width="2" stroke-linecap="round"></path>
<path d="M46 1066 L126 1066" stroke="rgba(84,212,255,0.42)" stroke-width="3" stroke-linecap="round"></path>
<path d="M46 986 L46 1066" stroke="rgba(84,212,255,0.20)" stroke-width="2" stroke-linecap="round"></path>
<path d="M1412 1066 L1492 1066" stroke="rgba(255,190,98,0.38)" stroke-width="3" stroke-linecap="round"></path>
<path d="M1492 986 L1492 1066" stroke="rgba(255,190,98,0.18)" stroke-width="2" stroke-linecap="round"></path>
__EDGE_SVG__
__EDGE_LABELS__
__NODE_SVG__