From 0fb5fb8bc39abd0f1b82775f4a2d397b952bb349 Mon Sep 17 00:00:00 2001
From: Youzini-afk <13153778771cx@gmail.com>
Date: Wed, 25 Mar 2026 23:37:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9D=97=E8=AF=A6=E6=83=85=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E6=B7=BB=E5=8A=A0=20=3F=20=E5=B8=AE=E5=8A=A9?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 bme-help-tip CSS 组件（glassmorphism 气泡，hover 显示）
- 参考 Evolution_World 的 EwHelpTip 风格
- 为块名称、角色、注入方式、内置来源、覆盖内容、块内容
  6 个字段添加说明提示
---
 panel.js  | 17 +++++++++------
 style.css | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/panel.js b/panel.js
index 7dfc94a..213fea3 100644
--- a/panel.js
+++ b/panel.js
@@ -2166,7 +2166,7 @@ function _renderTaskBlockEditor(state) {
     </div>
 
     <div class="bme-config-row">
-      <label>块名称</label>
+      <label>块名称${_helpTip("用于工作区列表显示。修改后立即生效。")}</label>
       <input
         class="bme-config-input"
         type="text"
@@ -2178,7 +2178,7 @@ function _renderTaskBlockEditor(state) {
 
     <div class="bme-task-field-grid">
       <div class="bme-config-row">
-        <label>角色</label>
+        <label>角色${_helpTip("决定此块内容以什么角色发送给 LLM。system = 系统指令，user = 用户输入，assistant = 模型回复。")}</label>
         <select class="bme-config-input" data-block-field="role">
           ${TASK_PROFILE_ROLE_OPTIONS.map(
             (item) => `
@@ -2190,7 +2190,7 @@ function _renderTaskBlockEditor(state) {
         </select>
       </div>
       <div class="bme-config-row">
-        <label>注入方式</label>
+        <label>注入方式${_helpTip("追加 = 拼接到同角色消息末尾。前置 = 拼接到同角色消息开头。")}</label>
         <select class="bme-config-input" data-block-field="injectionMode">
           ${TASK_PROFILE_INJECTION_OPTIONS.map(
             (item) => `
@@ -2222,13 +2222,13 @@ function _renderTaskBlockEditor(state) {
       block.type === "builtin"
         ? `
             <div class="bme-config-row">
-              <label>内置来源</label>
+              <label>内置来源${_helpTip("运行时自动从任务上下文注入的数据。不同任务类型使用不同来源。")}</label>
               <select class="bme-config-input" data-block-field="sourceKey">
                 ${builtinOptions}
               </select>
             </div>
             <div class="bme-config-row">
-              <label>覆盖内容（可选）</label>
+              <label>覆盖内容（可选）${_helpTip("留空时自动从 sourceKey 对应的上下文数据读取。填写后将覆盖自动注入的内容。")}</label>
               <textarea
                 class="bme-config-textarea"
                 data-block-field="content"
@@ -2261,7 +2261,7 @@ function _renderTaskBlockEditor(state) {
             `
           : `
               <div class="bme-config-row">
-                <label>块内容</label>
+                <label>块内容${_helpTip("直接编写的 prompt 文本。支持 {{userMessage}} / {{recentMessages}} / {{schema}} 等变量模板。")}</label>
                 <textarea
                   class="bme-config-textarea"
                   data-block-field="content"
@@ -2930,6 +2930,11 @@ function _cloneJson(value) {
   return JSON.parse(JSON.stringify(value ?? null));
 }
 
+function _helpTip(text) {
+  if (!text) return "";
+  return `<span class="bme-help-tip"><button type="button" class="bme-help-tip__trigger" aria-label="帮助">?</button><span class="bme-help-tip__bubble">${_escHtml(text)}</span></span>`;
+}
+
 function _getTaskBlockTypeLabel(type) {
   const typeMap = {
     custom: "自定义块",
diff --git a/style.css b/style.css
index 621441e..b6df695 100644
--- a/style.css
+++ b/style.css
@@ -1985,3 +1985,66 @@
     border-radius: 0 0 6px 6px;
   }
 }
+
+/* ═══════ Help Tip (? 图标 + 气泡) ═══════ */
+.bme-help-tip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  margin-left: 4px;
+}
+
+.bme-help-tip__trigger {
+  width: 1.2rem;
+  height: 1.2rem;
+  border-radius: 999px;
+  border: 1px solid rgba(160, 140, 200, 0.35);
+  background: rgba(160, 140, 200, 0.18);
+  color: rgba(240, 230, 252, 0.9);
+  font-size: 0.72rem;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
+  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
+  padding: 0;
+  line-height: 1;
+}
+
+.bme-help-tip__trigger:hover,
+.bme-help-tip__trigger:focus-visible {
+  transform: translateY(-1px);
+  border-color: rgba(180, 160, 220, 0.6);
+  background: rgba(180, 160, 220, 0.35);
+  outline: none;
+}
+
+.bme-help-tip__bubble {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 99999;
+  width: min(20rem, calc(100vw - 2rem));
+  border-radius: 10px;
+  border: 1px solid rgba(160, 140, 200, 0.3);
+  background: rgba(18, 14, 28, 0.92);
+  color: rgba(240, 235, 250, 0.95);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+  backdrop-filter: blur(16px) saturate(125%);
+  -webkit-backdrop-filter: blur(16px) saturate(125%);
+  padding: 10px 12px;
+  font-size: 0.78rem;
+  line-height: 1.5;
+  white-space: normal;
+  display: none;
+  pointer-events: none;
+}
+
+.bme-help-tip:hover .bme-help-tip__bubble,
+.bme-help-tip__trigger:focus + .bme-help-tip__bubble {
+  display: block;
+  pointer-events: auto;
+}