Skip to content

Commit a5c3aa2

Browse files
Liangyu-GLiangyu-G
authored
ATRI风格模板 (#154)
* Add files via upload * Create test * Add files via upload * Delete src/infrastructure/reporting/templates/ATRI/test * Add files via upload
1 parent 5dd7cf1 commit a5c3aa2

9 files changed

Lines changed: 5861 additions & 0 deletions

File tree

‎_conf_schema.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"type": "string",
6868
"description": "报告模板",
6969
"options": [
70+
"ATRI",
7071
"scrapbook",
7172
"retro_futurism",
7273
"HatsuneMiku",

‎src/infrastructure/reporting/templates/ATRI/activity_chart.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<div class="chart-container">
2+
<div style="display: flex; align-items: stretch; height: 220px; gap: 5px; padding: 20px 0 10px;">
3+
{% for hour_data in chart_data %}
4+
{% set ratio = loop.index0 / ((chart_data|length - 1) if (chart_data|length - 1) > 0 else 1) %}
5+
{% if ratio < 0.3333 %}
6+
{% set local_ratio = ratio / 0.3333 %}
7+
{% set top_red = (210 + local_ratio * 45)|round|int %}
8+
{% set top_green = (225 + local_ratio * 15)|round|int %}
9+
{% set top_blue = (255 - local_ratio * 25)|round|int %}
10+
{% set bottom_red = (170 + local_ratio * 85)|round|int %}
11+
{% set bottom_green = (190 - local_ratio * 5)|round|int %}
12+
{% set bottom_blue = (255 - local_ratio * 55)|round|int %}
13+
{% elif ratio < 0.6666 %}
14+
{% set local_ratio = (ratio - 0.3333) / 0.3333 %}
15+
{% set top_red = (255 - local_ratio * 20)|round|int %}
16+
{% set top_green = (240 + local_ratio * 15)|round|int %}
17+
{% set top_blue = (230 + local_ratio * 10)|round|int %}
18+
{% set bottom_red = (255 - local_ratio * 105)|round|int %}
19+
{% set bottom_green = (185 + local_ratio * 45)|round|int %}
20+
{% set bottom_blue = 200 %}
21+
{% else %}
22+
{% set local_ratio = (ratio - 0.6666) / 0.3334 %}
23+
{% set top_red = (235 - local_ratio * 25)|round|int %}
24+
{% set top_green = (255 - local_ratio * 30)|round|int %}
25+
{% set top_blue = (240 + local_ratio * 15)|round|int %}
26+
{% set bottom_red = (150 + local_ratio * 20)|round|int %}
27+
{% set bottom_green = (230 - local_ratio * 40)|round|int %}
28+
{% set bottom_blue = (200 + local_ratio * 55)|round|int %}
29+
{% endif %}
30+
{% set count_red = (bottom_red * 0.7)|round|int %}
31+
{% set count_green = (bottom_green * 0.7)|round|int %}
32+
{% set count_blue = (bottom_blue * 0.7)|round|int %} <div
33+
style="flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; height: 100%;">
34+
<div
35+
style="flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: end;">
36+
<span
37+
style="font-size: 10px; font-weight: 700; color: rgb({{ count_red }}, {{ count_green }}, {{ count_blue }}); margin-bottom: 4px; line-height: 1; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,0.65);">{{hour_data.count}}</span>
38+
<div style="
39+
background: linear-gradient(180deg, rgb({{ top_red }}, {{ top_green }}, {{ top_blue }}) 0%, rgb({{ bottom_red }}, {{ bottom_green }}, {{ bottom_blue }}) 100%);
40+
width: calc(100% - 4px);
41+
height: {{hour_data.percentage}}%;
42+
border-radius: 10px 10px 0 0;
43+
transition: all 0.3s ease;
44+
min-height: 5px;
45+
box-shadow: 0 6px 14px rgba({{ bottom_red }}, {{ bottom_green }}, {{ bottom_blue }}, 0.14);
46+
border: none;
47+
" title="{{hour_data.hour}}时 - {{hour_data.count}}条消息"></div>
48+
</div>
49+
<span style="font-size: 10px; color: #9a8aa3; margin-top: 8px; line-height: 1;">{{hour_data.hour}}</span>
50+
</div>
51+
{% endfor %}
52+
</div>
53+
</div>

‎src/infrastructure/reporting/templates/ATRI/chat_quality_item.html‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<style>
2+
.quality-card {
3+
position: relative;
4+
padding: 24px 24px 20px;
5+
border-radius: 24px;
6+
background: linear-gradient(90deg, rgba(255,240,230,0.95) 0%, rgba(255,255,255,0.98) 100%) !important;
7+
border: 1px solid rgba(112, 189, 236, 0.22);
8+
box-shadow: 0 18px 40px rgba(86, 161, 205, 0.14);
9+
overflow: hidden;
10+
}
11+
12+
.quality-card::before {
13+
content: "锐评";
14+
position: absolute;
15+
top: 14px;
16+
right: 18px;
17+
font-size: 46px;
18+
font-weight: 700;
19+
color: rgba(83, 171, 219, 0.08);
20+
letter-spacing: 4px;
21+
}
22+
23+
.quality-head {
24+
display: flex;
25+
justify-content: space-between;
26+
align-items: flex-end;
27+
gap: 16px;
28+
margin-bottom: 18px;
29+
position: relative;
30+
z-index: 1;
31+
}
32+
33+
.quality-title {
34+
font-size: 28px;
35+
font-weight: 700;
36+
color: #2a6587;
37+
margin-bottom: 4px;
38+
}
39+
40+
.quality-subtitle {
41+
display: inline-flex;
42+
align-items: center;
43+
padding: 7px 12px;
44+
border-radius: 999px;
45+
background: rgba(117, 203, 244, 0.16);
46+
color: #5492b7;
47+
font-size: 14px;
48+
}
49+
50+
.quality-bars {
51+
display: grid;
52+
gap: 12px;
53+
margin-bottom: 16px;
54+
position: relative;
55+
z-index: 1;
56+
}
57+
58+
.quality-bar-row {
59+
display: grid;
60+
grid-template-columns: 94px 1fr 54px;
61+
align-items: center;
62+
gap: 12px;
63+
}
64+
65+
.quality-bar-label {
66+
font-size: 14px;
67+
color: #52768d;
68+
font-weight: 600;
69+
}
70+
71+
.quality-bar-track {
72+
height: 12px;
73+
border-radius: 999px;
74+
background: rgba(126, 199, 235, 0.16);
75+
overflow: hidden;
76+
}
77+
78+
.quality-bar-fill {
79+
height: 100%;
80+
border-radius: 999px;
81+
box-shadow: 0 6px 12px rgba(100, 167, 209, 0.2);
82+
}
83+
84+
.quality-bar-value {
85+
text-align: right;
86+
font-size: 13px;
87+
color: #5d88a3;
88+
font-weight: 700;
89+
}
90+
91+
.quality-comment-grid {
92+
display: grid;
93+
grid-template-columns: repeat(2, minmax(0, 1fr));
94+
gap: 12px;
95+
margin-bottom: 16px;
96+
position: relative;
97+
z-index: 1;
98+
}
99+
100+
.quality-comment {
101+
padding: 14px 14px 12px;
102+
border-radius: 16px;
103+
background: rgba(255,255,255,0.74);
104+
border: 1px dashed rgba(113, 191, 237, 0.34);
105+
}
106+
107+
.quality-comment strong {
108+
display: inline-block;
109+
margin-bottom: 6px;
110+
color: #3f84ad;
111+
}
112+
113+
.quality-summary {
114+
position: relative;
115+
z-index: 1;
116+
padding: 14px 16px;
117+
border-radius: 18px;
118+
background: rgba(255, 255, 255, 0.65);
119+
color: #4f7389;
120+
line-height: 1.8;
121+
border: 1px solid rgba(112, 189, 236, 0.2);
122+
}
123+
</style>
124+
125+
<div class="quality-card">
126+
<div class="quality-head">
127+
<div>
128+
<div class="quality-title">{{ title }}</div>
129+
<div class="quality-subtitle">{{ subtitle }}</div>
130+
</div>
131+
</div>
132+
133+
<div class="quality-bars">
134+
{% for dim in dimensions %}
135+
<div class="quality-bar-row">
136+
<div class="quality-bar-label">{{ dim.name }}</div>
137+
<div class="quality-bar-track">
138+
<div class="quality-bar-fill" style="width: {{ dim.percentage }}%; background: linear-gradient(90deg, {{ dim.color }}, color-mix(in srgb, {{ dim.color }} 65%, white));"></div>
139+
</div>
140+
<div class="quality-bar-value">{{ dim.percentage }}%</div>
141+
</div>
142+
{% endfor %}
143+
</div>
144+
145+
<div class="quality-comment-grid">
146+
{% for dim in dimensions %}
147+
<div class="quality-comment">
148+
<strong>{{ dim.name }}</strong>
149+
<div>{{ dim.comment }}</div>
150+
</div>
151+
{% endfor %}
152+
</div>
153+
154+
<div class="quality-summary">{{ summary }}</div>
155+
</div>

0 commit comments

Comments
 (0)