按技能规范重构菜单UI为纵向紧凑风格并聚焦用户可用指令
This commit is contained in:
@@ -103,8 +103,23 @@ class RobotMenuRenderTool:
|
||||
lines.append(" 提示:按指令中的占位词替换为实际内容后发送")
|
||||
return lines
|
||||
|
||||
def _iter_user_command_features(self) -> list[Feature]:
|
||||
"""筛选“用户可直接触发”的功能集合。
|
||||
|
||||
设计说明:
|
||||
1. 为了让菜单图片更短、更直观,只展示存在明确聊天指令的功能;
|
||||
2. 纯自动/定时类功能不在图片主体展示,避免干扰普通用户阅读。
|
||||
"""
|
||||
result: list[Feature] = []
|
||||
for feature in Feature:
|
||||
_, cmd_hint = self._split_feature_description(feature.description)
|
||||
if self._extract_command_tokens(cmd_hint):
|
||||
result.append(feature)
|
||||
return result
|
||||
|
||||
def build_feature_status_markdown(self, group_id: str) -> str:
|
||||
"""构建紧凑菜单 Markdown(强调“怎么用”,不展示启停状态/管理命令)。"""
|
||||
user_features = self._iter_user_command_features()
|
||||
lines = [
|
||||
"# 机器人功能菜单",
|
||||
"",
|
||||
@@ -117,7 +132,7 @@ class RobotMenuRenderTool:
|
||||
"",
|
||||
"## 功能与指令",
|
||||
]
|
||||
for feature in Feature:
|
||||
for feature in user_features:
|
||||
lines.extend(self._build_feature_usage_lines(feature))
|
||||
lines.append("")
|
||||
return "\n".join(lines)
|
||||
@@ -137,8 +152,13 @@ class RobotMenuRenderTool:
|
||||
|
||||
def build_feature_status_html(self, group_id: str) -> str:
|
||||
"""构建菜单 HTML(自定义样式,不复用 md2image 默认样式)。"""
|
||||
# UI 设计方向(依据用户指定 skill):
|
||||
# 1. 采用“精致极简 + 信息密度高”的纵向单列排版;
|
||||
# 2. 仅展示用户可直接触发的功能,保证篇幅短、理解快;
|
||||
# 3. 使用克制但有辨识度的色彩/字体组合,避免通用模板感。
|
||||
user_features = self._iter_user_command_features()
|
||||
feature_cards = []
|
||||
for feature in Feature:
|
||||
for feature in user_features:
|
||||
title, _ = self._split_feature_description(feature.description)
|
||||
command_examples = self._get_feature_command_examples(feature)
|
||||
# 为纵向卡片增加轻量色彩分组,提升视觉节奏感,避免纯白卡片过于单调。
|
||||
@@ -175,63 +195,83 @@ class RobotMenuRenderTool:
|
||||
--line: #d8e4ef;
|
||||
--text: #1f2d3d;
|
||||
--muted: #5e748a;
|
||||
--brand: #0f5fb7;
|
||||
--brand-soft: #eaf3ff;
|
||||
--brand: #0b4f93;
|
||||
--brand-soft: #e9f2ff;
|
||||
--accent: #f59e0b;
|
||||
}}
|
||||
* {{ box-sizing: border-box; }}
|
||||
body {{
|
||||
margin: 0;
|
||||
padding: 14px;
|
||||
font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
|
||||
padding: 10px;
|
||||
font-family: "Source Han Sans SC", "PingFang SC", "Noto Sans CJK SC", sans-serif;
|
||||
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%);
|
||||
radial-gradient(circle at 12% 8%, rgba(11,79,147,0.08), transparent 36%),
|
||||
linear-gradient(180deg, #edf3f9 0%, #f7fbff 100%);
|
||||
color: var(--text);
|
||||
}}
|
||||
.page {{
|
||||
width: 780px;
|
||||
width: 660px;
|
||||
margin: 0 auto;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 18px rgba(20, 47, 76, 0.10);
|
||||
box-shadow: 0 8px 16px rgba(20, 47, 76, 0.08);
|
||||
}}
|
||||
.hero {{
|
||||
padding: 14px 16px 12px 16px;
|
||||
padding: 12px 14px 10px 14px;
|
||||
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%);
|
||||
linear-gradient(135deg, #0b4f93 0%, #256db3 58%, #3181c9 100%);
|
||||
color: #fff;
|
||||
}}
|
||||
.hero h1 {{ margin: 0 0 4px 0; font-size: 22px; }}
|
||||
.hero p {{ margin: 2px 0; font-size: 12px; opacity: .96; }}
|
||||
.content {{ padding: 12px 12px 14px 12px; }}
|
||||
.hero h1 {{
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 20px;
|
||||
font-family: "Source Han Serif SC", "STSong", serif;
|
||||
letter-spacing: .4px;
|
||||
}}
|
||||
.hero p {{ margin: 1px 0; font-size: 11px; opacity: .95; }}
|
||||
.content {{ padding: 8px 10px 10px 10px; }}
|
||||
.block {{
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 9px;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 8px;
|
||||
background: #fff;
|
||||
}}
|
||||
.block h2 {{ margin: 0 0 6px 0; font-size: 15px; color: #12395f; }}
|
||||
.block h2 {{
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 13px;
|
||||
color: #12395f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}}
|
||||
.block h2::before {{
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
display: inline-block;
|
||||
}}
|
||||
.block ul {{
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
padding-left: 16px;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
font-size: 11px;
|
||||
}}
|
||||
/* 纵向单列流式布局:避免双列模式下因内容长度差异产生空白洞。 */
|
||||
.feature-list {{ display: flex; flex-direction: column; gap: 8px; }}
|
||||
.feature-card {{
|
||||
border: 1px solid #d6e4f3;
|
||||
border-left-width: 4px;
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 9px;
|
||||
padding: 7px 9px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
|
||||
box-shadow: 0 4px 10px rgba(16, 64, 125, 0.05);
|
||||
box-shadow: 0 3px 8px rgba(16, 64, 125, 0.05);
|
||||
}}
|
||||
.feature-card.tone-0 {{ border-left-color: #2f8cff; }}
|
||||
.feature-card.tone-1 {{ border-left-color: #10b981; }}
|
||||
@@ -239,7 +279,7 @@ class RobotMenuRenderTool:
|
||||
.feature-card.tone-3 {{ border-left-color: #ef4444; }}
|
||||
.feature-top {{ display: flex; align-items: center; gap: 8px; }}
|
||||
.feature-index {{
|
||||
min-width: 28px;
|
||||
min-width: 26px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
color: #0f5fb7;
|
||||
@@ -247,19 +287,19 @@ class RobotMenuRenderTool:
|
||||
border: 1px solid #cfe1fb;
|
||||
border-radius: 6px;
|
||||
padding: 2px 4px;
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
}}
|
||||
.feature-meta {{ flex: 1; }}
|
||||
.feature-meta h3 {{ margin: 0 0 1px 0; font-size: 13px; }}
|
||||
.feature-key {{ margin: 0; font-size: 11px; color: var(--muted); }}
|
||||
.feature-meta h3 {{ margin: 0 0 1px 0; font-size: 12px; }}
|
||||
.feature-key {{ margin: 0; font-size: 10px; color: var(--muted); }}
|
||||
.feature-body {{
|
||||
margin-top: 6px;
|
||||
padding: 6px 8px;
|
||||
margin-top: 5px;
|
||||
padding: 5px 7px;
|
||||
border-radius: 7px;
|
||||
background: #f7fbff;
|
||||
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: 10.5px; color: #3d5870; line-height: 1.45; }}
|
||||
.line-main {{ color: #1f3f62; }}
|
||||
.line-sub {{ color: #5a738a; }}
|
||||
code {{
|
||||
@@ -268,7 +308,7 @@ class RobotMenuRenderTool:
|
||||
color: #12539a;
|
||||
padding: 0 5px;
|
||||
border-radius: 5px;
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
}}
|
||||
</style>
|
||||
</head>
|
||||
@@ -284,7 +324,7 @@ class RobotMenuRenderTool:
|
||||
<h2>快速上手</h2>
|
||||
<ul>
|
||||
<li><code>菜单</code>:查看可用功能和指令</li>
|
||||
<li>以下内容仅面向普通用户,聚焦“怎么用”</li>
|
||||
<li>以下仅保留可直接输入的用户指令(共 {len(user_features)} 项)</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="block">
|
||||
|
||||
Reference in New Issue
Block a user