优化菜单图片风格为纵向紧凑布局并增强视觉层次
This commit is contained in:
@@ -141,9 +141,14 @@ class RobotMenuRenderTool:
|
|||||||
for feature in Feature:
|
for feature in Feature:
|
||||||
title, _ = self._split_feature_description(feature.description)
|
title, _ = self._split_feature_description(feature.description)
|
||||||
command_examples = self._get_feature_command_examples(feature)
|
command_examples = self._get_feature_command_examples(feature)
|
||||||
|
# 为纵向卡片增加轻量色彩分组,提升视觉节奏感,避免纯白卡片过于单调。
|
||||||
|
try:
|
||||||
|
tone_idx = int(feature.value) % 4
|
||||||
|
except Exception:
|
||||||
|
tone_idx = 0
|
||||||
feature_cards.append(
|
feature_cards.append(
|
||||||
f"""
|
f"""
|
||||||
<section class="feature-card">
|
<section class="feature-card tone-{tone_idx}">
|
||||||
<div class="feature-top">
|
<div class="feature-top">
|
||||||
<div class="feature-index">{feature.value}</div>
|
<div class="feature-index">{feature.value}</div>
|
||||||
<div class="feature-meta">
|
<div class="feature-meta">
|
||||||
@@ -170,19 +175,18 @@ class RobotMenuRenderTool:
|
|||||||
--line: #d8e4ef;
|
--line: #d8e4ef;
|
||||||
--text: #1f2d3d;
|
--text: #1f2d3d;
|
||||||
--muted: #5e748a;
|
--muted: #5e748a;
|
||||||
--brand: #0d6efd;
|
--brand: #0f5fb7;
|
||||||
--brand-soft: #e7f1ff;
|
--brand-soft: #eaf3ff;
|
||||||
--ok: #1f9d5a;
|
|
||||||
--ok-soft: #e9f8f0;
|
|
||||||
--off: #c53d3d;
|
|
||||||
--off-soft: #fdecec;
|
|
||||||
}}
|
}}
|
||||||
* {{ box-sizing: border-box; }}
|
* {{ box-sizing: border-box; }}
|
||||||
body {{
|
body {{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
|
font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
|
||||||
background: linear-gradient(180deg, #eef4fa 0%, #f8fbff 100%);
|
background:
|
||||||
|
radial-gradient(circle at 10% 10%, rgba(15,95,183,0.08), transparent 32%),
|
||||||
|
radial-gradient(circle at 90% 0%, rgba(31,126,255,0.10), transparent 30%),
|
||||||
|
linear-gradient(180deg, #eef4fa 0%, #f8fbff 100%);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
}}
|
}}
|
||||||
.page {{
|
.page {{
|
||||||
@@ -196,7 +200,9 @@ class RobotMenuRenderTool:
|
|||||||
}}
|
}}
|
||||||
.hero {{
|
.hero {{
|
||||||
padding: 14px 16px 12px 16px;
|
padding: 14px 16px 12px 16px;
|
||||||
background: linear-gradient(135deg, #0d6efd 0%, #0aa2c0 100%);
|
background:
|
||||||
|
linear-gradient(130deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 45%),
|
||||||
|
linear-gradient(135deg, #0f5fb7 0%, #2f8cff 55%, #3ca1ff 100%);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}}
|
}}
|
||||||
.hero h1 {{ margin: 0 0 4px 0; font-size: 22px; }}
|
.hero h1 {{ margin: 0 0 4px 0; font-size: 22px; }}
|
||||||
@@ -217,21 +223,28 @@ class RobotMenuRenderTool:
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}}
|
}}
|
||||||
.feature-list {{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }}
|
/* 纵向单列流式布局:避免双列模式下因内容长度差异产生空白洞。 */
|
||||||
|
.feature-list {{ display: flex; flex-direction: column; gap: 8px; }}
|
||||||
.feature-card {{
|
.feature-card {{
|
||||||
border: 1px solid var(--line);
|
border: 1px solid #d6e4f3;
|
||||||
|
border-left-width: 4px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
background: #fff;
|
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
|
||||||
|
box-shadow: 0 4px 10px rgba(16, 64, 125, 0.05);
|
||||||
}}
|
}}
|
||||||
|
.feature-card.tone-0 {{ border-left-color: #2f8cff; }}
|
||||||
|
.feature-card.tone-1 {{ border-left-color: #10b981; }}
|
||||||
|
.feature-card.tone-2 {{ border-left-color: #f59e0b; }}
|
||||||
|
.feature-card.tone-3 {{ border-left-color: #ef4444; }}
|
||||||
.feature-top {{ display: flex; align-items: center; gap: 8px; }}
|
.feature-top {{ display: flex; align-items: center; gap: 8px; }}
|
||||||
.feature-index {{
|
.feature-index {{
|
||||||
min-width: 28px;
|
min-width: 28px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #114a84;
|
color: #0f5fb7;
|
||||||
background: var(--brand-soft);
|
background: var(--brand-soft);
|
||||||
border: 1px solid #cfe2ff;
|
border: 1px solid #cfe1fb;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@@ -243,8 +256,8 @@ class RobotMenuRenderTool:
|
|||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
background: #f8fbff;
|
background: #f7fbff;
|
||||||
border: 1px dashed #d7e6f5;
|
border: 1px dashed #d2e4f7;
|
||||||
}}
|
}}
|
||||||
.feature-body p {{ margin: 0; font-size: 11px; color: #3d5870; line-height: 1.5; }}
|
.feature-body p {{ margin: 0; font-size: 11px; color: #3d5870; line-height: 1.5; }}
|
||||||
.line-main {{ color: #1f3f62; }}
|
.line-main {{ color: #1f3f62; }}
|
||||||
|
|||||||
Reference in New Issue
Block a user