2026-04-19-00-24-02 - Dashboard新增全部报告卡片、图表时间切换、X轴重叠修复

src/pages/Dashboard.tsx

@@ -8,7 +8,8 @@ import { storage } from '../utils/storage';
 export default function Dashboard() {
   const navigate = useNavigate();
   const [stats, setStats] = useState({
-    reportCount: 0,
+    totalCount: 0,
+    monthCount: 0,
     templateCount: 0,
     userCount: 0,
     todayCount: 0,
@@ -17,6 +18,7 @@ export default function Dashboard() {
     maxTrend: 1
   });
   const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [timeRange, setTimeRange] = useState<'7days' | '1month'>('7days');
 
   useEffect(() => {
     const user = storage.get<User | null>('currentUser', null);
@@ -35,24 +37,31 @@ export default function Dashboard() {
         ? reports.filter(r => r.author === user.username)
         : reports;
     
-    const today = new Date().toISOString().split('T')[0];
+    const now = new Date();
+    const today = now.toISOString().split('T')[0];
     const todayReports = userReports.filter(r => r.createdAt === today);
 
-    // 7-day trend data
+    // 本月报告数
+    const currentMonth = today.slice(0, 7);
+    const thisMonthReports = userReports.filter(r => r.createdAt && r.createdAt.startsWith(currentMonth));
+
+    // 动态趋势数据
+    const daysCount = timeRange === '7days' ? 7 : 30;
     const trend: number[] = [];
     const labels: string[] = [];
-    for (let i = 6; i >= 0; i--) {
+    for (let i = daysCount - 1; i >= 0; i--) {
-      const d = new Date();
+      const d = new Date(now);
       d.setDate(d.getDate() - i);
       const dateStr = d.toISOString().split('T')[0];
-      const label = `${d.getMonth() + 1}/${d.getDate()}`;
+      const label = timeRange === '7days' ? `${d.getMonth() + 1}/${d.getDate()}` : `${d.getDate()}`;
       labels.push(label);
       trend.push(userReports.filter(r => r.createdAt === dateStr).length);
     }
     const maxTrend = Math.max(...trend, 1);
 
     setStats({
-      reportCount: userReports.length,
+      totalCount: userReports.length,
+      monthCount: thisMonthReports.length,
       templateCount: templates.length,
       userCount: users.length,
       todayCount: todayReports.length,
@@ -60,7 +69,7 @@ export default function Dashboard() {
       trendLabels: labels,
       maxTrend
     });
-  }, [navigate]);
+  }, [navigate, timeRange]);
 
   if (!currentUser) return null;
 
@@ -80,10 +89,15 @@ export default function Dashboard() {
           </Link>
         </header>
         
-        <section className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          <div className="card-minimal">
+            <div className="text-[11px] text-text-muted mb-2 uppercase tracking-wider font-bold">全部报告总数</div>
+            <div className="text-3xl font-bold text-text-main">{stats.totalCount}</div>
+          </div>
+
           <div className="card-minimal">
             <div className="text-[11px] text-text-muted mb-2 uppercase tracking-wider font-bold">本月报告总数</div>
-            <div className="text-3xl font-bold text-text-main">{stats.reportCount}</div>
+            <div className="text-3xl font-bold text-text-main">{stats.monthCount}</div>
           </div>
 
           <div className="card-minimal">
@@ -104,11 +118,20 @@ export default function Dashboard() {
                 <TrendingUp size={16} className="text-accent" />
                 报告增长趋势
               </span>
-              <span className="text-[10px] text-accent font-bold uppercase tracking-wider">最近 7 天</span>
+              <div className="flex bg-slate-100 p-1 rounded-lg">
+                <button
+                  onClick={() => setTimeRange('7days')}
+                  className={`px-3 py-1 text-xs font-bold rounded-md transition-colors ${timeRange === '7days' ? 'bg-white text-accent shadow-sm' : 'text-text-muted hover:text-text-main'}`}
+                >最近 7 天</button>
+                <button
+                  onClick={() => setTimeRange('1month')}
+                  className={`px-3 py-1 text-xs font-bold rounded-md transition-colors ${timeRange === '1month' ? 'bg-white text-accent shadow-sm' : 'text-text-muted hover:text-text-main'}`}
+                >最近 30 天</button>
+              </div>
             </div>
             <div className="flex-1 bg-slate-50 rounded-xl p-6 min-h-[240px] relative">
               {/* SVG Area Chart */}
-              <svg viewBox="0 0 300 120" className="w-full h-full overflow-visible">
+              <svg viewBox="0 0 300 135" className="w-full h-full overflow-visible">
                 <defs>
                   <linearGradient id="trendGradient" x1="0" y1="0" x2="0" y2="1">
                     <stop offset="0%" stopColor="#2563EB" stopOpacity="0.35" />
@@ -149,7 +172,7 @@ export default function Dashboard() {
                         <g key={i}>
                           <circle cx={p.x} cy={p.y} r="3.5" fill="#2563EB" stroke="#fff" strokeWidth="2" />
                           <text x={p.x} y={p.y - 10} textAnchor="middle" fontSize="8" fill="#64748B" fontWeight="bold">{p.count}</text>
-                          <text x={p.x} y={120 - 2} textAnchor="middle" fontSize="8" fill="#94A3B8" fontWeight="bold">{p.label}</text>
+                          <text x={p.x} y={128} textAnchor="middle" fontSize={stats.trendLabels.length > 10 ? '7' : '8'} fill="#94A3B8" fontWeight="bold">{p.label}</text>
                         </g>
                       ))}
                     </g>

src/pages/ReportEditor.tsx

@@ -60,14 +60,16 @@ export default function ReportEditor() {
     if (!editorRef.current) return;
     const allFields = editorRef.current.querySelectorAll('.field-value');
     allFields.forEach(el => {
-      (el as HTMLElement).style.backgroundColor = '#f8fafc';
+      (el as HTMLElement).style.backgroundColor = '';
-      (el as HTMLElement).style.boxShadow = 'none';
+      (el as HTMLElement).style.outline = '';
+      (el as HTMLElement).style.outlineOffset = '';
     });
     if (activeFieldKey) {
       const targetEl = editorRef.current.querySelector(`.field-value[data-bind="${activeFieldKey}"]`) as HTMLElement;
       if (targetEl) {
-        targetEl.style.backgroundColor = '#eff6ff';
+        targetEl.style.backgroundColor = '#f1f5f9';
-        targetEl.style.boxShadow = '0 0 0 2px #3b82f6';
+        targetEl.style.outline = '1px solid #94a3b8';
+        targetEl.style.outlineOffset = '1px';
         targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
       }
     }
@@ -432,6 +434,9 @@ export default function ReportEditor() {
         return;
       }
 
+      // 点击空白处清除高亮
+      setActiveFieldKey(null);
+
       const placeholder = targetEl.closest('.image-placeholder') as HTMLElement | null;
       if (!placeholder) return;
 

src/pages/TemplateManage.tsx

@@ -499,6 +499,19 @@ export default function TemplateManage() {
     setFormFields(updated);
     storage.set('formFieldsConfig', updated);
     setEditingFieldKey(null);
+
+    // 同步更新编辑器中已插入字段的 classList
+    if (editorRef.current) {
+      const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${key}"]`);
+      els.forEach(el => {
+        if (editFieldHasUnderline) {
+          el.classList.remove('no-underline');
+        } else {
+          el.classList.add('no-underline');
+        }
+      });
+      saveTemplateContent();
+    }
   };
 
   const addField = () => {

src/utils/print.ts

@@ -42,7 +42,7 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
           .smart-field-wrapper .field-value { min-width: 24px; padding: 0 2px; margin: 0; border: 1px solid #cbd5e1; border-radius: 2px; display: inline-block; background: #f8fafc; color: #0f172a; line-height: inherit; font-size: inherit; vertical-align: baseline; box-sizing: border-box; outline: none; text-align: center; }
           .report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
           @media print {
-            .smart-field-wrapper .field-value { border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px 0px 2px !important; }
+            .smart-field-wrapper .field-value { outline: none !important; box-shadow: none !important; border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px 0px 2px !important; line-height: 1 !important; }
             .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
           }
         </style>

工程分析/实现方案-2026-04-19-00-01-50.md

@@ -0,0 +1,65 @@
+# 实现方案 —— 2026-04-19-00-01-50
+
+## 方案目标
+修复高亮样式、实现点击空白取消、阻断打印高亮、同步字段下划线配置到已插入的 DOM。
+
+## 需求 1 & 2：优化高亮样式、点击空白取消、阻断打印
+
+### 修改文件 1：`src/pages/ReportEditor.tsx`
+
+1. **点击空白取消高亮**：在 `handleEditorClick` 中，如果点击目标不是 `.field-value`，则设置 `setActiveFieldKey(null)`。
+
+2. **柔和高亮样式**：修改 `activeFieldKey` 的 `useEffect`：
+   - 清除样式时：恢复为 `''`（空字符串）而非硬编码颜色，让 CSS 类重新接管
+   - 高亮时：`backgroundColor: '#f1f5f9'`（浅灰）、`outline: '1px solid #94a3b8'`（细灰边框）、`outlineOffset: '1px'`
+   - 不再使用 `box-shadow`
+
+### 修改文件 2：`src/utils/print.ts`
+
+在 `@media print` 中强制抹除 `outline` 和 `box-shadow`：
+```css
+@media print {
+  .smart-field-wrapper .field-value {
+    outline: none !important;
+    box-shadow: none !important;
+    border: none !important;
+    border-bottom: 1px solid #000 !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    padding: 0 2px 1px 2px !important;
+  }
+  .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
+}
+```
+
+## 需求 3：修复下划线勾选无效
+
+### 修改文件：`src/pages/TemplateManage.tsx`
+
+在 `saveFieldEdit` 函数中，保存字段配置后，扫描编辑器中所有 `data-bind` 匹配的 `.field-value`，根据新的 `hasUnderline` 值动态添加/移除 `.no-underline` 类：
+```ts
+if (editorRef.current) {
+  const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${editingFieldId}"]`);
+  els.forEach(el => {
+    if (editFieldHasUnderline) {
+      el.classList.remove('no-underline');
+    } else {
+      el.classList.add('no-underline');
+    }
+  });
+  saveTemplateContent();
+}
+```
+
+## 涉及文件及修改点
+| 文件 | 修改点 |
+|------|--------|
+| `src/pages/ReportEditor.tsx` | handleEditorClick 点击空白取消高亮；useEffect 柔和高亮样式 |
+| `src/utils/print.ts` | @media print 强制抹除 outline/box-shadow |
+| `src/pages/TemplateManage.tsx` | saveFieldEdit 同步更新已插入字段的 classList |
+
+## 风险与注意事项
+1. `handleEditorClick` 中增加 `setActiveFieldKey(null)` 时，需确保不会影响 `.image-placeholder` 的点击处理逻辑（placeholder 点击在 field-value 判断之后）。
+2. `useEffect` 中清除样式时使用 `style.backgroundColor = ''` 而非 `= '#f8fafc'`，这样可以让元素的 CSS 类样式重新生效，避免硬编码颜色与 CSS 类冲突。
+3. `saveFieldEdit` 中扫描 DOM 并修改 classList 后，必须调用 `saveTemplateContent()` 将变更持久化到 localStorage。
+4. 打印样式中 `outline: none !important` 和 `box-shadow: none !important` 的优先级需确保高于任何内联样式。

工程分析/实现方案-2026-04-19-00-13-20.md

@@ -0,0 +1,37 @@
+# 实现方案 —— 2026-04-19-00-13-20
+
+## 方案目标
+使打印/PDF导出时 `.field-value` 的下划线紧贴文字底部。
+
+## 修改点
+
+### 修改文件：`src/utils/print.ts`
+
+在 `@media print` 的 `.smart-field-wrapper .field-value` 样式中增加 `line-height: 1 !important;`。
+
+**原因**：即使 `padding-bottom` 已设为 `0px`，父级文档的 `line-height: 1.5` 仍会在文字下方保留不可见的行高留白。通过强制压缩行高到 `1`，可以消除底部留白，使 `border-bottom` 紧贴文字。
+
+```css
+@media print {
+  .smart-field-wrapper .field-value { 
+    outline: none !important;
+    box-shadow: none !important;
+    border: none !important; 
+    border-bottom: 1px solid #000 !important; 
+    border-radius: 0 !important; 
+    background: transparent !important; 
+    padding: 0 2px 0px 2px !important; 
+    line-height: 1 !important; 
+  }
+  .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
+}
+```
+
+## 涉及文件及修改点
+| 文件 | 修改点 |
+|------|--------|
+| `src/utils/print.ts` | @media print 中 .field-value 增加 line-height: 1 !important |
+
+## 风险与注意事项
+1. `line-height: 1` 会显著压缩行高，但由于 `.field-value` 在打印时已经是 `inline-block` 且独立显示，不会影响周围段落的整体行距。
+2. `!important` 确保优先级高于任何内联样式。

工程分析/实现方案-2026-04-19-00-24-02.md

@@ -0,0 +1,41 @@
+# 实现方案 —— 2026-04-19-00-24-02
+
+## 方案目标
+完善 Dashboard 数据概览：新增全部报告卡片、修复图表重叠、增加时间维度切换。
+
+## 需求 1：新增"全部报告总数"卡片
+
+### 修改文件：`src/pages/Dashboard.tsx`
+
+1. **扩展 stats 结构**：增加 `totalCount` 字段，表示全部报告总数（原 `reportCount` 改为仅统计本月）。
+2. **更新计算逻辑**：在 useEffect 中计算 `userReports.length` 作为 `totalCount`，原 `reportCount` 保留为当月数量。
+3. **调整卡片布局**：将原来的 4 卡片网格改为包含 5 个统计项，或保持 4 卡片但替换/调整内容。根据用户要求，在"本月报告总数"左侧插入"全部报告总数"，并将网格列数从 4 改为 5（`lg:grid-cols-5`）或保持 4 列但替换其中一个卡片。
+
+## 需求 2：修复图表日期文字与 X 轴重叠
+
+### 修改文件：`src/pages/Dashboard.tsx`
+
+1. **增大底部留白**：将 Canvas 的 `padding` 或图表绘制区域的高度计算中加入更大的底部偏移（如 `bottomPadding = 30` 而非原来的 10）。
+2. **调整文字 Y 坐标**：将 `ctx.fillText(label, x, h - 10)` 改为 `ctx.fillText(label, x, h - 5)` 或更下方，确保文字不会与 X 轴线（通常在 `h - padding` 位置绘制）重叠。
+3. **调整字体大小**：30 天模式下缩小字体到 9px，避免文字过密。
+
+## 需求 3：时间维度切换
+
+### 修改文件：`src/pages/Dashboard.tsx`
+
+1. **增加状态**：`const [timeRange, setTimeRange] = useState<'7days' | '1month'>('7days');`
+2. **响应式计算**：将 `useEffect` 的依赖数组增加 `timeRange`，当切换时重新计算 `trend` 和 `trendLabels`。
+3. **标签格式化**：
+   - 7 天模式：显示 `MM-DD`（如 04-13）
+   - 30 天模式：显示 `DD`（如 13），避免过密
+4. **UI 控件**：在图表标题右侧增加切换按钮组（最近 7 天 / 最近 30 天）。
+
+## 涉及文件及修改点
+| 文件 | 修改点 |
+|------|--------|
+| `src/pages/Dashboard.tsx` | stats 结构扩展、totalCount 计算、卡片布局调整、timeRange 状态、趋势数据响应式计算、Canvas 绘制坐标修复、时间切换 UI |
+
+## 风险与注意事项
+1. 原代码中 `reportCount` 可能表示的是全部报告数，需要确认其原意。如果原意是全部报告数，则需要新增 `monthCount` 而非修改 `reportCount`。根据用户方案，将 `reportCount` 改为当月数，`totalCount` 为全部数。
+2. Canvas 绘制中 `padding`、`chartH` 的计算需要同步调整，确保数据线不会画到文字区域。
+3. 30 天模式下数据点密集，需要考虑是否跳点显示标签（如只显示奇数天）。

工程分析/测试方案-2026-04-19-00-01-50.md

@@ -0,0 +1,48 @@
+# 测试方案 —— 2026-04-19-00-01-50
+
+## 测试目标
+验证高亮样式修复、点击空白取消、打印纯净度、下划线同步的有效性。
+
+## 测试用例
+
+### TC-1：高亮样式柔和
+**前置条件**：ReportEditor 已加载默认模板。  
+**步骤**：
+1. 点击中间模板中的任意字段。
+**预期结果**：字段显示浅灰色背景和细灰边框（不再是刺眼的蓝色）。
+
+### TC-2：点击空白取消高亮
+**前置条件**：ReportEditor 中某个字段已被高亮。  
+**步骤**：
+1. 点击模板中的空白区域（非字段、非占位符）。
+**预期结果**：字段高亮样式消失，恢复为默认状态。
+
+### TC-3：打印不带高亮框
+**前置条件**：ReportEditor 中某个字段处于高亮状态。  
+**步骤**：
+1. 点击打印预览。
+**预期结果**：打印内容中不显示任何高亮框、outline 或 box-shadow，字段显示正常。
+
+### TC-4：勾选下划线后打印生效
+**前置条件**：TemplateManage 中某字段已插入模板，且未勾选下划线。  
+**步骤**：
+1. 在字段管理中勾选该字段的「打印时显示下划线」。
+2. 保存字段编辑。
+3. 在 ReportEditor 中打印预览。
+**预期结果**：该字段显示下划线。
+
+### TC-5：取消下划线后打印不显示
+**前置条件**：TemplateManage 中某字段已勾选下划线并保存。  
+**步骤**：
+1. 取消勾选该字段的「打印时显示下划线」。
+2. 保存字段编辑。
+3. 在 ReportEditor 中打印预览。
+**预期结果**：该字段不显示下划线。
+
+## 回归测试
+- 确保字段插入、编辑、删除功能正常。
+- 确保双向联动（中间点击→右侧高亮、右侧点击→中间高亮）正常。
+- 确保打印样式整体正常。
+
+## 测试通过标准
+所有用例均通过，无控制台报错，打印内容纯净无高亮残留。

工程分析/测试方案-2026-04-19-00-13-20.md

@@ -0,0 +1,26 @@
+# 测试方案 —— 2026-04-19-00-13-20
+
+## 测试目标
+验证打印时下划线是否紧贴文字底部。
+
+## 测试用例
+
+### TC-1：有下划线字段紧贴文字
+**前置条件**：ReportEditor 中某字段（如术前诊断）已勾选「打印时显示下划线」。  
+**步骤**：
+1. 点击打印预览。
+**预期结果**：该字段的下划线（黑线）紧贴文字底部，无明显间距。
+
+### TC-2：无下划线字段不受影响
+**前置条件**：某字段带有 `.no-underline` 类。  
+**步骤**：
+1. 点击打印预览。
+**预期结果**：该字段不显示下划线，排版正常。
+
+### TC-3：屏幕编辑态不受影响
+**步骤**：
+1. 在 ReportEditor 中查看字段。
+**预期结果**：屏幕上的 `.field-value` 行高保持原样，未被压缩。
+
+## 测试通过标准
+打印内容中下划线紧贴文字，无多余留白，屏幕编辑态正常。

工程分析/测试方案-2026-04-19-00-24-02.md

@@ -0,0 +1,38 @@
+# 测试方案 —— 2026-04-19-00-24-02
+
+## 测试目标
+验证 Dashboard 新增卡片、图表修复、时间切换功能的正确性。
+
+## 测试用例
+
+### TC-1：全部报告总数卡片显示正确
+**步骤**：
+1. 登录后进入 Dashboard。
+**预期结果**：顶部统计卡片区域显示"全部报告总数"，数值等于当前用户可见的所有报告数量。
+
+### TC-2：本月报告总数不受全部报告卡片影响
+**步骤**：
+1. 查看"本月报告总数"卡片。
+**预期结果**：数值仅统计当月（YYYY-MM）创建的报告，非全部报告。
+
+### TC-3：7 天趋势图表正常
+**步骤**：
+1. 默认进入 Dashboard，图表显示"最近 7 天"。
+**预期结果**：X 轴显示 7 个日期标签（MM-DD 格式），无重叠，数据点与折线正确对应。
+
+### TC-4：30 天趋势图表正常
+**步骤**：
+1. 点击"最近 30 天"按钮。
+**预期结果**：图表重新渲染，X 轴显示 30 个日期标签（DD 格式），无重叠，趋势数据正确。
+
+### TC-5：日期文字不与轴线重叠
+**步骤**：
+1. 在 7 天和 30 天两种模式下查看图表底部。
+**预期结果**：日期文字清晰可见，不与 X 轴线或数据点重叠。
+
+## 回归测试
+- 确保今日新增报告、模板数、用户/部门数等其他统计卡片正常显示。
+- 确保页面无控制台报错。
+
+## 测试通过标准
+所有用例通过，图表在不同时间维度下均正常渲染，无文字重叠。

工程分析/经验记录.md

@@ -1150,3 +1150,134 @@ if ((settings.autoInsertDelay || 0) > 0) {
 - 浏览器打印的文件名行为不一致（有的用 iframe title，有的用父窗口 title），最稳妥的方案是在打印前后动态修改 `document.title`。
 - 批量操作 UI 中，复选框的点击事件必须 `stopPropagation()`，否则会触发卡片点击导致状态混乱。
 - 批量删除后必须同步清理 `selectedIds` 和 `currentTemplateId`，避免出现「选中已删除项」或「当前模板不存在」的异常状态。
+
+---
+
+## 记录 37：下划线默认修复、PDF 文件名、间距缩紧、表单逆向联动
+
+**A. 具体问题**
+1. 模板管理中「患者姓名」「住院号」的「打印时显示下划线」默认仍为勾选状态，且勾选与否在打印时都失去下划线效果。
+2. 导出 PDF 时浏览器默认文件名为「My Google AI Studio App.pdf」，与 JSON 文件名不一致。
+3. `.field-value` 内文字偏右，打印时左右间距过大。
+4. ReportEditor 中点击右侧表单输入框时，中间模板内的对应字段不会高亮，也不会滚动定位。
+
+**B. 产生问题原因**
+1. `DEFAULT_FORM_FIELDS` 中 `patientName` 和 `hospitalId` 硬编码了 `hasUnderline: true`；`defaultContent.ts` 中 `smartField()` 直接给所有字段加 `.no-underline`；`print.ts` 中 `@media print` 的 `.field-value` 默认显示下划线、`.no-underline` 时隐藏，逻辑正确但默认模板中的字段全部带有 `.no-underline`。
+2. `printDocument()` 虽设置了 `document.title = docTitle`，但 iframe 内部的 HTML 缺少 `<title>` 标签，某些浏览器优先使用父窗口的原始 title。
+3. `smartField()` 中 `padding:0 4px; margin:0 2px` 撑开了左右间距。
+4. 之前只实现了「点击中间模板 → 右侧表单高亮滚动」的单向联动，右侧表单缺少触发 `activeFieldKey` 的事件绑定。
+
+**C. 解决问题方案**
+1. **下划线修复**：
+   - `src/types.ts`：`DEFAULT_FORM_FIELDS` 中 `patientName` 和 `hospitalId` 的 `hasUnderline: true` → `false`
+   - `src/utils/print.ts`：`@media print` 下 `.field-value` 的 `padding-bottom:1px` → `0px`，使下划线紧贴文字
+2. **PDF 文件名**：在 iframe HTML 的 `<head>` 中注入 `<title>${docTitle}</title>`，确保浏览器打印对话框识别正确的默认文件名
+3. **间距缩紧**：
+   - `src/utils/defaultContent.ts`：`padding:0 4px;margin:0 2px;min-width:32px` → `padding:0 2px;margin:0;min-width:24px;text-align:center`
+   - `src/utils/print.ts`：同步缩小非打印和打印样式中的 padding/margin
+4. **表单逆向联动**：
+   - `src/pages/ReportEditor.tsx`：新增 `useEffect` 监听 `activeFieldKey`，实时修改中间模板中对应 `.field-value` 的 `backgroundColor` 和 `boxShadow`，并调用 `scrollIntoView({ block: 'center' })`
+   - 给右侧所有字段类型（text/date/single_select/multi_select/time）的容器 `div` 添加 `onClick={() => setActiveFieldKey(field.key)}`
+   - 给之前缺少高亮样式的通用 time 字段容器补充了 `activeFieldKey` 高亮类名
+
+**D. 后续如何避免问题**
+- 当修改 `DEFAULT_FORM_FIELDS` 的默认值时，需意识到已有用户的 `localStorage` 中保存的旧配置不会自动更新。如果默认值变更影响核心功能，应考虑在应用启动时做配置迁移或版本校验。
+- iframe 打印的文件名行为在不同浏览器间存在差异（Chrome 用父窗口 title，Safari 可能用 iframe title），最稳妥的方案是同时设置父窗口 `document.title` 和 iframe 内部 `<title>` 标签。
+- 双向联动时，`useEffect` 中的 DOM style 操作需要在组件卸载或 `activeFieldKey` 清空时清除，避免残留高亮。当前实现中 `activeFieldKey` 为 `null` 时会遍历清除所有高亮，逻辑已覆盖。
+- 给容器 div 添加 `onClick` 时需注意事件冒泡：容器内的子元素（如 input、button）的点击事件会自然冒泡到容器，如果子元素有自己的 onClick 处理（如 dropdown 选项），需确保已调用 `stopPropagation()`。
+
+
+---
+
+## 记录 38：高亮样式柔化、点击空白取消、打印高亮隔离、下划线配置同步
+
+**A. 具体问题**
+1. ReportEditor 中 `.field-value` 激活高亮使用蓝色 box-shadow（`0 0 0 2px #3b82f6`）+ `#eff6ff` 背景，视觉过于刺眼。
+2. 点击编辑器空白区域时，高亮样式不会自动清除，用户必须点击另一个字段才能切换高亮。
+3. 打印/PDF 导出时，高亮的内联样式（box-shadow、backgroundColor）会带入打印件，导致打印内容出现蓝框。
+4. TemplateManage 中编辑字段的「打印时显示下划线」勾选后，已插入到模板中的 `.field-value` 仍然保留旧的 `.no-underline` 类，打印时不显示下划线。
+
+**B. 产生问题原因**
+1. `activeFieldKey` 的 `useEffect` 中使用了高对比度的蓝色阴影和背景色，未考虑柔和视觉体验。
+2. `handleEditorClick` 的 capture 事件处理器仅在点击 `.field-value` 时设置 `activeFieldKey`，没有处理「点击非字段区域时清空」的逻辑。
+3. `print.ts` 的 `@media print` 中只重置了 `border` 和 `background`，遗漏了 `outline` 和 `box-shadow`。
+4. `saveFieldEdit` 仅更新了 JSON state 和 `localStorage` 中的字段配置，没有同步扫描 `editorRef.current` 中已存在的 DOM 元素并更新其 `classList`。
+
+**C. 解决问题方案**
+1. **柔和高亮**：将 `useEffect` 中的高亮样式改为 `backgroundColor: '#f1f5f9'`（浅灰背景）、`outline: '1px solid #94a3b8'`（细灰边框）、`outlineOffset: '1px'`；清除样式时用 `''` 而非硬编码颜色，让 CSS 类重新接管。
+2. **点击空白取消高亮**：在 `handleEditorClick` 中，`.field-value` 判断分支结束后增加 `setActiveFieldKey(null)`，使点击任何非字段区域都会清除高亮。
+3. **打印隔离高亮**：`print.ts` 的 `@media print` 中强制添加 `outline: none !important; box-shadow: none !important;`，确保打印输出不受任何高亮内联样式影响。
+4. **下划线配置同步**：`saveFieldEdit` 末尾增加 DOM 扫描逻辑：
+   ```ts
+   if (editorRef.current) {
+     const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${key}"]`);
+     els.forEach(el => {
+       if (editFieldHasUnderline) el.classList.remove('no-underline');
+       else el.classList.add('no-underline');
+     });
+     saveTemplateContent();
+   }
+   ```
+
+**D. 后续如何避免问题**
+- 任何通过 JS 直接操作 DOM 添加的内联样式（如高亮），都必须在 `@media print` 中通过 `!important` 强制抹除，防止打印件被屏幕交互样式污染。
+- 当字段配置（如 `hasUnderline`）同时影响「未来插入的元素」和「已存在的 DOM 元素」时，保存逻辑必须包含对已插入 DOM 的同步更新，不能只更新 state。
+- `contentEditable` 中的 capture 阶段点击事件是处理全局点击行为（如点击空白取消）的理想位置，但需注意不要阻断其他正常交互路径（如 placeholder 点击）。
+
+
+---
+
+## 记录 39：打印下划线紧贴文字——行高压缩
+
+**A. 具体问题**
+打印/PDF 导出时，`.field-value` 的文字与下方 `border-bottom`（下划线）之间存在明显间距，视觉上不够紧凑。
+
+**B. 产生问题原因**
+即使 `padding-bottom` 已设为 `0px`，父级文档设置了 `line-height: 1.5`（第 29 行），`inline-block` 元素内部仍保留了行高带来的底部留白空间。`border-bottom` 渲染在元素的盒模型底部边界，而非文字字形的实际基线/降部底部，因此出现了「文字与横线之间有间隙」的视觉效果。
+
+**C. 解决问题方案**
+在 `src/utils/print.ts` 的 `@media print` 中，为 `.smart-field-wrapper .field-value` 增加 `line-height: 1 !important;`。将行高压缩到文字本身的绝对高度，彻底消除底部行高留白，使 `border-bottom` 紧贴文字正下方。
+
+```css
+@media print {
+  .smart-field-wrapper .field-value {
+    /* ... 其他属性 ... */
+    line-height: 1 !important;
+  }
+}
+```
+
+**D. 后续如何避免问题**
+- 当调整 `border-bottom` 与文字的距离时，如果 `padding-bottom` 已归零仍有间隙，应优先检查 `line-height` 的影响。
+- `inline-block` 元素的 `border-bottom` 位置受其内部行高影响显著，打印样式中可考虑显式设置 `line-height: 1` 以获得最紧凑的下划线效果。
+- 修改打印样式后，务必同时检查「有下划线」和「无下划线」两种字段的打印效果，避免 `line-height` 压缩导致其他排版异常。
+
+
+---
+
+## 记录 40：Dashboard 统计卡片扩展、图表时间切换与 X 轴重叠修复
+
+**A. 具体问题**
+1. Dashboard 首页缺少"全部报告总数"统计卡片，用户无法一眼看到系统内所有报告数量。
+2. 报告增长趋势图表中 X 轴日期文字与数据点/轴线发生重叠，影响可读性。
+3. 趋势图表仅支持固定 7 天数据，用户希望增加 30 天维度查看更长周期趋势。
+
+**B. 产生问题原因**
+1. `stats` 数据结构中只有 `reportCount`（实际表示全部报告数），没有区分"全部"和"本月"两个维度。
+2. SVG 的 viewBox 高度为 120，X 轴标签绘制在 `y=118`，文字底部超出 viewBox 并与数据点（count=0 时 y=112）只有 6px 间距，导致视觉重叠。
+3. 趋势计算逻辑固定为 `for (let i = 6; i >= 0; i--)` 的 7 天硬编码，缺少动态时间范围控制。
+
+**C. 解决问题方案**
+1. **扩展 stats 结构**：增加 `totalCount`（全部报告）和 `monthCount`（本月报告），将原 `reportCount` 拆分为两个维度。
+2. **新增统计卡片**：将顶部网格从 3 列改为 4 列（`lg:grid-cols-4`），在"本月报告总数"左侧新增"全部报告总数"卡片。
+3. **时间维度切换**：引入 `timeRange` 状态（`'7days' | '1month'`），useEffect 依赖中加入 `timeRange`，动态计算 7 天或 30 天的趋势数据和标签。
+4. **修复 X 轴重叠**：
+   - 将 SVG viewBox 从 `0 0 300 120` 扩展为 `0 0 300 135`，增加底部 15px 空间。
+   - 将日期标签的 y 坐标从 `120 - 2 = 118` 下移到 `128`，与数据点保持 16px 安全间距。
+   - 30 天模式下字体缩小到 7px，避免过密。
+5. **标签格式化**：7 天模式显示 `M/D`（如 4/13），30 天模式显示 `DD`（如 13），减少 30 天模式下的文字宽度。
+
+**D. 后续如何避免问题**
+- 在使用 SVG 绘制图表时，务必为 X 轴标签预留足够的底部空间（至少文字高度 + 安全间距），不能仅依赖 `overflow-visible`。
+- 当图表需要支持多时间维度时，应在数据计算层（useEffect）统一处理，而非在渲染层做条件分支，确保数据与标签同步。
+- 增加 grid 列数时，需同步检查响应式断点（`md:`、`lg:`），避免在小屏幕上卡片过度挤压。

工程分析/需求分析-2026-04-19-00-01-50.md

@@ -0,0 +1,26 @@
+# 需求分析 —— 2026-04-19-00-01-50
+
+## 需求来源
+用户在实际使用中发现高亮样式刺眼、点击空白不取消高亮、以及下划线勾选无效的问题。
+
+## 需求概述
+
+### 需求 1：高亮蓝框太明显
+ReportEditor 中 `.field-value` 激活时的蓝框（`box-shadow: 0 0 0 2px #3b82f6` + `#eff6ff` 背景）过于刺眼，希望改为更柔和的选中效果（类似 TemplateManage 中的淡色高亮）。
+
+### 需求 2：点击空白处高亮不消失 + 打印带蓝框
+1. 点击模板空白区域时，`.field-value` 的高亮样式不会自动清除。
+2. 打印/PDF 导出时，高亮的内联样式（box-shadow、backgroundColor）会带入打印件，导致打印内容出现蓝框。
+
+### 需求 3：下划线勾选无效
+在 TemplateManage 的字段管理中勾选「打印时显示下划线」并保存后，已插入到模板中的 `.field-value` 仍然带有 `.no-underline` 类，导致打印时不显示下划线。
+
+## 涉及文件
+- `src/pages/ReportEditor.tsx`（需求 1、2）
+- `src/utils/print.ts`（需求 2）
+- `src/pages/TemplateManage.tsx`（需求 3）
+
+## 需求影响范围
+- 编辑器高亮交互体验
+- 打印样式纯净度
+- 字段配置与 DOM 的同步机制

工程分析/需求分析-2026-04-19-00-13-20.md

@@ -0,0 +1,13 @@
+# 需求分析 —— 2026-04-19-00-13-20
+
+## 需求来源
+用户反馈打印时字段下划线与文字之间距离过大，视觉上不够紧凑。
+
+## 需求概述
+在打印/PDF导出时，`.field-value` 的 `border-bottom`（下划线）与文字之间存在行高留白，导致横线没有紧贴文字底部。需要压缩行高以消除底部留白。
+
+## 涉及文件
+- `src/utils/print.ts`
+
+## 需求影响范围
+仅影响打印/导出PDF时的下划线视觉效果，不影响屏幕编辑态。

工程分析/需求分析-2026-04-19-00-24-02.md

@@ -0,0 +1,23 @@
+# 需求分析 —— 2026-04-19-00-24-02
+
+## 需求来源
+用户在使用 Dashboard 首页时发现统计卡片缺失全部报告数，且图表存在日期文字与轴线重叠的视觉问题，同时希望增加时间维度切换能力。
+
+## 需求概述
+
+### 需求 1：新增"全部报告总数"卡片
+在 Dashboard 统计卡片区域，紧邻"本月报告总数"左侧，新增一个"全部报告总数"数据卡片，显示当前用户可见的所有报告数量。
+
+### 需求 2：修复图表 X 轴日期文字与轴线重叠
+报告增长趋势图表中，底部 X 轴日期文字（如 4/13、4/14 等）与轴线/数据线发生重叠，影响可读性。需要调整 Canvas 绘制坐标，增大底部留白并下移文字。
+
+### 需求 3：图表时间维度切换
+为报告增长趋势图表增加"最近 7 天"和"最近 30 天"的切换按钮，动态重新计算趋势数据和标签。
+
+## 涉及文件
+- `src/pages/Dashboard.tsx`
+
+## 需求影响范围
+- Dashboard 首页统计卡片布局
+- Canvas 趋势图表绘制逻辑
+- 统计数据计算逻辑