镀铬酸钾
@@ -19,7 +19,7 @@ token = ""
|
||||
# Bot 基础配置
|
||||
[bot]
|
||||
# 命令前缀列表
|
||||
command = ["/"]
|
||||
command = ["。"]
|
||||
# 是否忽略自己的消息
|
||||
ignore_self_message = true
|
||||
# 权限不足时的消息
|
||||
|
||||
@@ -186,7 +186,7 @@ async def handle_weather(bot, event: MessageEvent, args: List[str]):
|
||||
try:
|
||||
# 渲染HTML模板为图片
|
||||
base64_image = await image_manager.render_template_to_base64(
|
||||
"weather.html", weather_info, output_name="weather.png", width=1080
|
||||
"weather.html", weather_info, output_name="weather.png", width=400, height=500
|
||||
)
|
||||
|
||||
if base64_image:
|
||||
|
||||
@@ -4,23 +4,16 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>天气查询结果</title>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-color: #0f172a; /* 深蓝黑背景 */
|
||||
--window-bg: rgba(30, 41, 59, 0.85); /* 窗口背景 */
|
||||
--border-color: rgba(255, 255, 255, 0.08);
|
||||
--accent: #6366f1; /* 核心强调色 - 靛蓝 */
|
||||
--accent-glow: rgba(99, 102, 241, 0.4);
|
||||
--text-title: #f8fafc;
|
||||
--text-desc: #94a3b8;
|
||||
--text-code: #a5f3fc; /* 代码高亮色 - 浅青 */
|
||||
--card-bg: rgba(0, 0, 0, 0.2);
|
||||
--weather-bg: #0b1120; /* 天气卡片深色背景 */
|
||||
--sunny-color: #fbbf24; /* 晴天橙色 */
|
||||
--cloudy-color: #6b7280; /* 多云灰色 */
|
||||
--rainy-color: #3b82f6; /* 雨天蓝色 */
|
||||
--bg-color: #7C96E8; /* 图片中的典型 Fluent 蓝色 */
|
||||
--glass-bg: rgba(255, 255, 255, 0.15);
|
||||
--glass-border: rgba(255, 255, 255, 0.2);
|
||||
--text-main: #FFFFFF;
|
||||
--text-secondary: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -30,283 +23,363 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', system-ui, sans-serif;
|
||||
font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-title);
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
padding: 40px 20px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 窗口容器 */
|
||||
.window {
|
||||
.container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: var(--window-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
overflow: auto;
|
||||
max-width: 500px; /* 窄屏手机比例 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 顶部标题栏 */
|
||||
.header {
|
||||
padding: 32px 40px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.red { background: #ef4444; }
|
||||
.yellow { background: #f59e0b; }
|
||||
.green { background: #10b981; }
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--text-desc);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content {
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.page-title h1 {
|
||||
font-size: 48px;
|
||||
background: linear-gradient(to right, #fff, #94a3b8);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.page-title p {
|
||||
color: var(--text-desc);
|
||||
font-size: 20px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* 城市信息 */
|
||||
.city-info {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
/* 顶部城市信息 */
|
||||
.header-section {
|
||||
text-align: center;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.city-name {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: var(--text-title);
|
||||
margin-bottom: 8px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 30px;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.query-time {
|
||||
font-size: 16px;
|
||||
color: var(--text-desc);
|
||||
.main-temp-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
/* 天气网格 */
|
||||
.weather-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
.main-temp {
|
||||
font-size: 120px;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 天气卡片 */
|
||||
.weather-card {
|
||||
background: var(--weather-bg);
|
||||
border-radius: 16px;
|
||||
.temp-unit {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: -35px;
|
||||
font-size: 40px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.weather-desc-row {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
opacity: 0.9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 列表卡片部分 */
|
||||
.forecast-card {
|
||||
width: 100%;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 24px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
transition: transform 0.2s;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.weather-card:hover {
|
||||
transform: translateY(-2px);
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
margin: 15px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.weather-header {
|
||||
.chart-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-line-high {
|
||||
fill: none;
|
||||
stroke: rgba(255, 255, 255, 0.95);
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.chart-line-low {
|
||||
fill: none;
|
||||
stroke: rgba(255, 255, 255, 0.95);
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.chart-dot-high {
|
||||
fill: #FFFFFF;
|
||||
}
|
||||
|
||||
.chart-dot-low {
|
||||
fill: #FFFFFF;
|
||||
}
|
||||
|
||||
.chart-label {
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
fill: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.chart-label-low {
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
fill: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.forecast-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 8px 10px 8px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.weather-day {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text-title);
|
||||
}
|
||||
|
||||
.weather-condition {
|
||||
font-size: 18px;
|
||||
color: var(--text-desc);
|
||||
}
|
||||
|
||||
.weather-main {
|
||||
.header-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.weather-temp {
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
color: var(--sunny-color);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.weather-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
color: var(--text-desc);
|
||||
}
|
||||
|
||||
.weather-detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--text-title);
|
||||
}
|
||||
|
||||
/* 页脚 */
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
padding: 32px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
color: var(--text-desc);
|
||||
font-size: 14px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footer .info-row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.footer .version-info {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.content {
|
||||
padding: 20px;
|
||||
.forecast-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.page-title h1 {
|
||||
font-size: 36px;
|
||||
.grid-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.weather-grid {
|
||||
grid-template-columns: 1fr;
|
||||
.grid-day {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.weather-card {
|
||||
padding: 20px;
|
||||
.day-label {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.weather-temp {
|
||||
font-size: 36px;
|
||||
.day-date {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.grid-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.grid-temp {
|
||||
font-size: 14px;
|
||||
margin-top: 130px; /* 为图表留出空间 */
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.main-temp { font-size: 100px; }
|
||||
.city-name { font-size: 24px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="window">
|
||||
<div class="header">
|
||||
<div class="dots">
|
||||
<div class="dot red"></div>
|
||||
<div class="dot yellow"></div>
|
||||
<div class="dot green"></div>
|
||||
</div>
|
||||
<div class="title">天气查询</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-title">
|
||||
<h1>天气查询结果</h1>
|
||||
<p>{{ timestamp }}</p>
|
||||
</div>
|
||||
|
||||
<div class="city-info">
|
||||
<div class="container">
|
||||
<!-- 顶部核心信息 -->
|
||||
<div class="header-section">
|
||||
<div class="city-name">{{ city_name }}</div>
|
||||
<div class="query-time">查询时间: {{ query_time }}</div>
|
||||
|
||||
{% set first_day = weather_data[0] %}
|
||||
<div class="main-temp-wrapper">
|
||||
<span class="main-temp">{{ first_day.temperature.split(' / ')[0].replace('℃', '') if ' / ' in first_day.temperature else first_day.temperature.replace('℃', '') }}</span>
|
||||
<span class="temp-unit">°C</span>
|
||||
</div>
|
||||
|
||||
<div class="weather-grid">
|
||||
{% for day_weather in weather_data %}
|
||||
<div class="weather-card">
|
||||
<div class="weather-header">
|
||||
<div class="weather-day">{{ day_weather.day }}</div>
|
||||
<div class="weather-condition">{{ day_weather.weather }}</div>
|
||||
</div>
|
||||
<div class="weather-main">
|
||||
<div class="weather-temp">{{ day_weather.temperature }}</div>
|
||||
</div>
|
||||
<div class="weather-details">
|
||||
<div class="weather-detail-item">
|
||||
<div class="detail-label">风力</div>
|
||||
<div class="detail-value">{{ day_weather.wind_power }}</div>
|
||||
</div>
|
||||
<div class="weather-detail-item">
|
||||
<div class="detail-label">风向</div>
|
||||
<div class="detail-value">{{ day_weather.wind_direction }}</div>
|
||||
<div class="weather-desc-row">
|
||||
<span>{{ first_day.weather }}</span>
|
||||
<div class="divider"></div>
|
||||
<span>风力 {{ first_day.wind_power }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预测卡片 -->
|
||||
<div class="forecast-card">
|
||||
<div class="forecast-grid">
|
||||
{% set month = query_time.split('年')[1].split('月')[0] if '年' in query_time else '3' %}
|
||||
{# 星期名称映射 #}
|
||||
{% set week_names = ['日', '一', '二', '三', '四', '五', '六'] %}
|
||||
{# 从第一天数据中提取今天是星期几 #}
|
||||
{% set first_day_text = weather_data[0].day %}
|
||||
{% set today_week_text = first_day_text.split('(')[1].replace(')', '') if '(' in first_day_text else '今天' %}
|
||||
{# 将文字星期转换为数字：今天=0, 明天=1, 后天=2, 周一=1, 周二=2... #}
|
||||
{% if today_week_text == '今天' %}
|
||||
{% set today_week_num = 0 %}
|
||||
{% elif today_week_text == '明天' %}
|
||||
{% set today_week_num = 1 %}
|
||||
{% elif today_week_text == '后天' %}
|
||||
{% set today_week_num = 2 %}
|
||||
{% elif '周' in today_week_text %}
|
||||
{% set week_day_char = today_week_text.replace('周', '').replace('星期', '') %}
|
||||
{% set week_map = {'日': 0, '一': 1, '二': 2, '三': 3, '四': 4, '五': 5, '六': 6} %}
|
||||
{% set today_week_num = week_map[week_day_char] if week_day_char in week_map else 0 %}
|
||||
{% else %}
|
||||
{% set today_week_num = 0 %}
|
||||
{% endif %}
|
||||
{% for day_weather in weather_data[:5] %}
|
||||
<div class="grid-item">
|
||||
<div class="grid-day">
|
||||
{% set day_text = day_weather.day %}
|
||||
{% set day_num = day_text.split('日')[0] %}
|
||||
{% if loop.index0 == 0 %}
|
||||
<span class="day-label">今日</span>
|
||||
{% elif loop.index0 == 1 %}
|
||||
<span class="day-label">明日</span>
|
||||
{% elif loop.index0 == 2 %}
|
||||
<span class="day-label">后日</span>
|
||||
{% else %}
|
||||
{# 计算这一天的星期：今天 + 天数偏移 #}
|
||||
{% set target_week_num = (today_week_num + loop.index0) % 7 %}
|
||||
<span class="day-label">星期{{ week_names[target_week_num] }}</span>
|
||||
{% endif %}
|
||||
<span class="day-date">{{ month }}/{{ day_num }}</span>
|
||||
</div>
|
||||
<i data-lucide="cloud" class="forecast-icon grid-icon" data-condition="{{ day_weather.weather }}"></i>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<svg class="chart-svg" viewBox="0 0 400 160" preserveAspectRatio="xMidYMid meet">
|
||||
{# 收集最高温和最低温数据 #}
|
||||
{% set high_list = [] %}
|
||||
{% set low_list = [] %}
|
||||
{% for day in weather_data[:5] %}
|
||||
{% set parts = day.temperature.split(' / ') %}
|
||||
{% set high_str = parts[0].replace('℃', '') %}
|
||||
{% set low_str = parts[1].replace('℃', '') if parts | length > 1 else parts[0].replace('℃', '') %}
|
||||
{% set high_val = high_str | int if high_str | int is defined else 0 %}
|
||||
{% set low_val = low_str | int if low_str | int is defined else 0 %}
|
||||
{% set _ = high_list.append(high_val) %}
|
||||
{% set _ = low_list.append(low_val) %}
|
||||
{% endfor %}
|
||||
{% set all_temps = high_list + low_list %}
|
||||
{% set min_t = all_temps | min %}
|
||||
{% set max_t = all_temps | max %}
|
||||
{% set temp_range = (max_t - min_t) if (max_t - min_t) > 0 else 1 %}
|
||||
{% set pad_x = 40 %}
|
||||
{% set pad_top = 25 %}
|
||||
{% set pad_bottom = 20 %}
|
||||
{% set cw = 320 %}
|
||||
{% set ch = 115 %}
|
||||
{# 绘制最低温折线 #}
|
||||
<polyline class="chart-line-low" points="{% for t in low_list %}{{ pad_x + (loop.index0 * cw / 4) }},{{ pad_top + ch - ((t - min_t) / temp_range * ch) }}{% if not loop.last %} {% endif %}{% endfor %}"/>
|
||||
{# 绘制最高温折线 #}
|
||||
<polyline class="chart-line-high" points="{% for t in high_list %}{{ pad_x + (loop.index0 * cw / 4) }},{{ pad_top + ch - ((t - min_t) / temp_range * ch) }}{% if not loop.last %} {% endif %}{% endfor %}"/>
|
||||
{# 绘制最低温圆点和标签 #}
|
||||
{% for t in low_list %}
|
||||
{% set x = pad_x + (loop.index0 * cw / 4) %}
|
||||
{% set y = pad_top + ch - ((t - min_t) / temp_range * ch) %}
|
||||
<circle class="chart-dot-low" cx="{{ x }}" cy="{{ y }}" r="3.5"/>
|
||||
<text class="chart-label-low" x="{{ x }}" y="{{ y + 22 }}" text-anchor="middle">{{ t }}°</text>
|
||||
{% endfor %}
|
||||
{# 绘制最高温圆点和标签 #}
|
||||
{% for t in high_list %}
|
||||
{% set x = pad_x + (loop.index0 * cw / 4) %}
|
||||
{% set y = pad_top + ch - ((t - min_t) / temp_range * ch) %}
|
||||
<circle class="chart-dot-high" cx="{{ x }}" cy="{{ y }}" r="4"/>
|
||||
<text class="chart-label" x="{{ x }}" y="{{ y - 14 }}" text-anchor="middle">{{ t }}°</text>
|
||||
{% endfor %}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="info-row">数据来源: 中国天气网</div>
|
||||
<div class="info-row">查询城市: {{ city_name }}</div>
|
||||
<div class="version-info">
|
||||
CalglauBot | Powered by NeoBot Framework
|
||||
</div>
|
||||
</div>
|
||||
<p>数据更新于 {{ query_time }}</p>
|
||||
<p>数据来源: 中国天气网 | NeoBot</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 根据天气状况动态切换图标
|
||||
function updateIcons() {
|
||||
document.querySelectorAll('.forecast-icon').forEach(icon => {
|
||||
const condition = icon.getAttribute('data-condition');
|
||||
let iconName = 'cloud';
|
||||
|
||||
if (condition.includes('晴')) {
|
||||
iconName = 'sun';
|
||||
} else if (condition.includes('大雨') || condition.includes('暴雨')) {
|
||||
iconName = 'cloud-rain-wind';
|
||||
} else if (condition.includes('雨')) {
|
||||
iconName = 'cloud-rain';
|
||||
} else if (condition.includes('雪')) {
|
||||
iconName = 'cloud-snow';
|
||||
} else if (condition.includes('雷') || condition.includes('电')) {
|
||||
iconName = 'cloud-lightning';
|
||||
} else if (condition.includes('阴')) {
|
||||
iconName = 'cloud';
|
||||
} else if (condition.includes('云')) {
|
||||
iconName = 'cloudy';
|
||||
} else if (condition.includes('霾') || condition.includes('雾')) {
|
||||
iconName = 'haze';
|
||||
}
|
||||
|
||||
icon.setAttribute('data-lucide', iconName);
|
||||
});
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
updateIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html></content>
|
||||
</html>
|
||||
</content>
|
||||
|
||||
71
web_static/changelog_generator/generate.py
Normal file
71
web_static/changelog_generator/generate.py
Normal file
@@ -0,0 +1,71 @@
|
||||
import os
|
||||
import sys
|
||||
from datetime import datetime
|
||||
from jinja2 import Environment, FileSystemLoader
|
||||
|
||||
# ==========================================
|
||||
# 配置区域
|
||||
# ==========================================
|
||||
|
||||
# 输出文件路径 (相对于当前脚本或绝对路径)
|
||||
OUTPUT_FILE = "../changelog.html"
|
||||
|
||||
# 更新日志数据
|
||||
# 格式说明：
|
||||
# version: 版本号
|
||||
# date: 日期 (YYYY-MM-DD)
|
||||
# description: 版本描述 (可选)
|
||||
# changes: 变更列表
|
||||
# - type: 类型 (add, update, fix)
|
||||
# - content: 变更内容
|
||||
changelogs = [
|
||||
{
|
||||
"version": "v1.0.0",
|
||||
"date": "2026-3-1",
|
||||
"description": "引入了更多有趣的互动功能，并优化了系统稳定性。",
|
||||
"changes": [
|
||||
{"type": "add", "content": "新增了天气查询功能，支持全国主要城市"},
|
||||
{"type": "update", "content": "优化了 Web Parser 的解析速度,不过b站的视频解析等待重做中"},
|
||||
{"type": "fix", "content": "修复了在某些特定网络环境下图片加载失败的问题"},
|
||||
{"type": "update", "content": "支持多实现端连接（反向WS），此功能并不完善，等待重做"}
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
# ==========================================
|
||||
# 生成逻辑 (通常不需要修改)
|
||||
# ==========================================
|
||||
|
||||
def generate_changelog():
|
||||
# 获取当前脚本所在目录
|
||||
base_dir = os.path.dirname(os.path.abspath(__file__))
|
||||
|
||||
# 设置 Jinja2 环境
|
||||
env = Environment(loader=FileSystemLoader(base_dir))
|
||||
template = env.get_template("template.html")
|
||||
|
||||
# 获取最新版本号
|
||||
latest_version = changelogs[0]["version"] if changelogs else "v0.0.0"
|
||||
|
||||
# 渲染模板
|
||||
html_content = template.render(
|
||||
log=changelogs[0] if changelogs else None,
|
||||
latest_version=latest_version,
|
||||
generated_at=datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||
)
|
||||
|
||||
# 确定输出路径
|
||||
output_path = os.path.join(base_dir, OUTPUT_FILE)
|
||||
|
||||
# 写入文件
|
||||
try:
|
||||
with open(output_path, "w", encoding="utf-8") as f:
|
||||
f.write(html_content)
|
||||
print(f"✅ 成功生成更新日志: {os.path.abspath(output_path)}")
|
||||
except Exception as e:
|
||||
print(f"❌ 生成失败: {e}")
|
||||
|
||||
if __name__ == "__main__":
|
||||
generate_changelog()
|
||||
187
web_static/changelog_generator/template.html
Normal file
187
web_static/changelog_generator/template.html
Normal file
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NEOBOT | Changelog</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Inter:wght@300;400;600&family=Noto+Serif+SC:wght@300;400;700&family=Cormorant+Garamond:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
|
||||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['"Inter"', 'sans-serif'],
|
||||
display: ['"Space Grotesk"', 'sans-serif'],
|
||||
serif: ['"Noto Serif SC"', 'serif'],
|
||||
lyric: ['"Cormorant Garamond"', 'serif'],
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
bg: '#050505',
|
||||
surface: '#121212',
|
||||
border: '#27272a',
|
||||
text: '#e4e4e7',
|
||||
muted: '#a1a1aa',
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
'fade-in-up': 'fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
||||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
},
|
||||
keyframes: {
|
||||
fadeInUp: {
|
||||
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #050505;
|
||||
color: #e4e4e7;
|
||||
background-image: radial-gradient(circle at 50% 0%, #1a1a1a 0%, #050505 60%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.changelog-card {
|
||||
background: rgba(18, 18, 18, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.changelog-card:hover {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(30, 30, 30, 0.8);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.lyric-text {
|
||||
font-family: "Cormorant Garamond", serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Timeline line */
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: #050505; }
|
||||
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased selection:bg-white/20 selection:text-white">
|
||||
|
||||
<!-- 导航 -->
|
||||
<nav class="fixed top-0 w-full z-50 border-b border-white/5 bg-black/80 backdrop-blur-md">
|
||||
<div class="max-w-6xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="../index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<div class="w-2 h-2 bg-white rounded-full animate-pulse-slow"></div>
|
||||
<span class="font-display font-bold text-sm tracking-widest text-white">NEO<span class="text-white/40 font-light">BOT</span></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4 text-[10px] font-mono text-gray-400 uppercase tracking-widest">
|
||||
<span class="px-2 py-1 rounded border border-white/10 bg-white/5">Changelog</span>
|
||||
<span>Latest: {{ latest_version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="pt-40 pb-32 px-6">
|
||||
<div class="max-w-4xl mx-auto space-y-16">
|
||||
|
||||
<!-- Header -->
|
||||
<section class="text-center space-y-4 animate-fade-in-up">
|
||||
<div class="font-mono text-xs text-gray-500 mb-2">PROJECT HISTORY</div>
|
||||
<h1 class="text-4xl md:text-6xl font-display font-bold text-white leading-tight">
|
||||
System<br>
|
||||
<span class="text-white/30">Evolution</span>
|
||||
</h1>
|
||||
<p class="font-serif text-lg text-gray-400 max-w-2xl mx-auto">
|
||||
记录每一次微小的改变，见证成长的轨迹。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Changelog Card -->
|
||||
<section class="max-w-2xl mx-auto">
|
||||
<div class="changelog-card p-8 md:p-10 relative overflow-hidden group">
|
||||
<!-- Decorative background glow -->
|
||||
<div class="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-white/5 rounded-full blur-3xl group-hover:bg-white/10 transition-colors duration-500"></div>
|
||||
|
||||
<!-- Version & Date -->
|
||||
<div class="relative z-10 flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8 border-b border-white/10 pb-6">
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<h2 class="font-display text-4xl text-white font-bold">{{ log.version }}</h2>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-white/10 text-white/60 border border-white/10">LATEST</span>
|
||||
</div>
|
||||
<div class="font-mono text-xs text-gray-500">{{ log.date }}</div>
|
||||
</div>
|
||||
{% if log.description %}
|
||||
<div class="md:text-right max-w-xs">
|
||||
<p class="font-serif text-sm text-gray-400 italic leading-relaxed">
|
||||
"{{ log.description }}"
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Changes List -->
|
||||
<div class="relative z-10">
|
||||
<ul class="space-y-4">
|
||||
{% for change in log.changes %}
|
||||
<li class="flex items-start gap-4 group/item">
|
||||
{% if change.type == 'add' %}
|
||||
<span class="flex-shrink-0 mt-1 px-2 py-1 rounded text-[10px] font-mono font-bold bg-green-500/10 text-green-400 border border-green-500/20 group-hover/item:bg-green-500/20 transition-colors">ADD</span>
|
||||
{% elif change.type == 'update' %}
|
||||
<span class="flex-shrink-0 mt-1 px-2 py-1 rounded text-[10px] font-mono font-bold bg-blue-500/10 text-blue-400 border border-blue-500/20 group-hover/item:bg-blue-500/20 transition-colors">UPD</span>
|
||||
{% elif change.type == 'fix' %}
|
||||
<span class="flex-shrink-0 mt-1 px-2 py-1 rounded text-[10px] font-mono font-bold bg-red-500/10 text-red-400 border border-red-500/20 group-hover/item:bg-red-500/20 transition-colors">FIX</span>
|
||||
{% else %}
|
||||
<span class="flex-shrink-0 mt-1 px-2 py-1 rounded text-[10px] font-mono font-bold bg-gray-500/10 text-gray-400 border border-gray-500/20 group-hover/item:bg-gray-500/20 transition-colors">MSC</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="text-base text-gray-300 leading-relaxed group-hover/item:text-white transition-colors">{{ change.content }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="py-12 border-t border-white/5 bg-black/20">
|
||||
<div class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div class="text-center md:text-left">
|
||||
<div class="font-display font-bold text-white mb-1">NEOBOT</div>
|
||||
<p class="font-mono text-[10px] text-gray-600">
|
||||
PRIVATE PERSONAL PROJECT<br>
|
||||
GENERATED BY CHANGELOG TOOL
|
||||
</p>
|
||||
</div>
|
||||
<div class="font-mono text-[10px] text-gray-600 text-center md:text-right">
|
||||
TO ASTEROID B-612<br>
|
||||
SASAKURE.UK
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user