fix(scrapbook): activity_chart 排版调整为横向,减小没有实质内容的 activity_chart 对排版的空间占用

This commit is contained in:
SXP-Simon
2026-01-18 00:01:57 +08:00
parent 7e70a6532c
commit 8c0801d4d9
2 changed files with 82 additions and 25 deletions
@@ -1,28 +1,34 @@
{% for item in chart_data %}
{% set color_var = 'var(--color-purple)' %}
{% set width = '2%' %}
<div class="chart-section-horizontal">
{% for item in chart_data %}
{% set bar_bg = 'var(--color-purple)' %}
{% set bar_height = '4px' %}
{% set bar_opacity = '1' %}
{% if item.count == 0 %}
{% set color_var = 'var(--color-purple)' %}
{% set width = '2%' %}
{% elif item.percentage >= 70 %}
{% set color_var = 'var(--accent-orange)' %}
{% set width = item.percentage ~ '%' %}
{% elif item.percentage >= 30 %}
{% set color_var = 'var(--color-green)' %}
{% set width = item.percentage ~ '%' %}
{% else %}
{% set color_var = 'var(--color-blue)' %}
{% set width = item.percentage ~ '%' %}
{% endif %}
{% if item.count == 0 %}
{% set bar_bg = 'var(--ink-secondary)' %}
{% set bar_height = '4px' %}
{% set bar_opacity = '0.2' %}
{% elif item.percentage >= 70 %}
{% set bar_bg = 'var(--accent-orange)' %}
{% set bar_height = item.percentage ~ '%' %}
{% elif item.percentage >= 30 %}
{% set bar_bg = 'var(--color-green)' %}
{% set bar_height = item.percentage ~ '%' %}
{% else %}
{% set bar_bg = 'var(--color-blue)' %}
{% set bar_height = item.percentage ~ '%' %}
{% endif %}
<div class="hand-chart-row">
<div class="chart-label">{{ "%02d" | format(item.hour) }}:00</div>
<div class="chart-bar-box">
<div class="crayon-bar" style="width: {{ width }}; background: {{ color_var }};"></div>
<div class="chart-column">
{% if item.count > 0 %}
<div class="chart-value-top">{{ item.count }}</div>
{% endif %}
{% set style_str = 'height: ' ~ bar_height ~ '; background: ' ~ bar_bg ~ '; opacity: ' ~ bar_opacity ~ ';
border-bottom: none;' %}
<div class="chart-bar-vertical" style="{{ style_str }}"></div>
<div class="chart-label-xaxis">{{ "%02d" | format(item.hour) }}</div>
</div>
<div
style="margin-left: 10px; font-size: 0.7rem; font-family: var(--font-hand); color: var(--ink-secondary); min-width: 30px;">
{{ item.count }}</div>
</div>
{% endfor %}
{% endfor %}
</div>
@@ -309,6 +309,57 @@
background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4L4 0' stroke='rgba(0,0,0,0.1)' stroke-width='1'/%3E%3C/svg%3E");
}
/* ==================== Horizontal Chart Styles ==================== */
.chart-section-horizontal {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 220px;
padding: 20px 10px 5px 10px;
margin-top: 15px;
position: relative;
border-bottom: 2px solid var(--ink-secondary);
}
.chart-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
flex: 1;
margin: 0 2px;
position: relative;
}
.chart-bar-vertical {
width: 100%;
border-radius: 5px 5px 0 0;
min-height: 4px;
position: relative;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
transition: height 0.3s ease;
}
.chart-label-xaxis {
margin-top: 8px;
font-size: 0.75rem;
color: var(--ink-secondary);
font-family: var(--font-hand);
text-align: center;
}
.chart-value-top {
position: absolute;
top: -20px;
font-size: 0.7rem;
font-weight: bold;
color: var(--ink-secondary);
font-family: var(--font-hand);
width: 100%;
text-align: center;
}
/* ==================== 4. 活跃时段 ==================== */
/* ==================== 4. 活跃时段 (新版) ==================== */
.highlight-section {