Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fb4e45c3f6 | ||
|
|
1a777aad85 | ||
|
|
e6cdfd84d4 | ||
|
|
3eb1b489f3 |
@@ -8,15 +8,19 @@ 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,
|
||||
trend: [0,0,0,0,0,0,0],
|
||||
trendLabels: ['','','','','','',''],
|
||||
trendFullDates: ['','','','','','',''],
|
||||
maxTrend: 1
|
||||
});
|
||||
const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; date: string; count: number }>({ visible: false, x: 0, y: 0, date: '', count: 0 });
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
const [timeRange, setTimeRange] = useState<'7days' | '1month'>('7days');
|
||||
|
||||
useEffect(() => {
|
||||
const user = storage.get<User | null>('currentUser', null);
|
||||
@@ -35,32 +39,42 @@ 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--) {
|
||||
const d = new Date();
|
||||
const fullDates: string[] = [];
|
||||
for (let i = daysCount - 1; i >= 0; i--) {
|
||||
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);
|
||||
fullDates.push(dateStr);
|
||||
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,
|
||||
trend,
|
||||
trendLabels: labels,
|
||||
trendFullDates: fullDates,
|
||||
maxTrend
|
||||
});
|
||||
}, [navigate]);
|
||||
}, [navigate, timeRange]);
|
||||
|
||||
if (!currentUser) return null;
|
||||
|
||||
@@ -80,10 +94,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 +123,44 @@ 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"
|
||||
onMouseMove={(e) => {
|
||||
const svg = e.currentTarget;
|
||||
const rect = svg.getBoundingClientRect();
|
||||
const mouseX = ((e.clientX - rect.left) / rect.width) * 300;
|
||||
const paddingX = 10;
|
||||
const chartW = 300 - paddingX * 2;
|
||||
const n = stats.trend.length;
|
||||
if (n <= 1) return;
|
||||
let idx = Math.round(((mouseX - paddingX) / chartW) * (n - 1));
|
||||
idx = Math.max(0, Math.min(n - 1, idx));
|
||||
const ptX = paddingX + (idx / (n - 1)) * chartW;
|
||||
const ptY = 8 + (120 - 16) - (stats.maxTrend > 0 ? (stats.trend[idx] / stats.maxTrend) * (120 - 16) : 0);
|
||||
setTooltip({
|
||||
visible: true,
|
||||
x: (ptX / 300) * rect.width,
|
||||
y: (ptY / 135) * rect.height,
|
||||
date: stats.trendFullDates[idx] || '',
|
||||
count: stats.trend[idx]
|
||||
});
|
||||
}}
|
||||
onMouseLeave={() => setTooltip(prev => ({ ...prev, visible: false }))}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="trendGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#2563EB" stopOpacity="0.35" />
|
||||
@@ -145,17 +197,37 @@ export default function Dashboard() {
|
||||
<g>
|
||||
<path d={areaPath} fill="url(#trendGradient)" />
|
||||
<path d={linePath} fill="none" stroke="#2563EB" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
{/* Transparent capture layer for reliable mouse events */}
|
||||
<rect x="0" y="0" width="300" height="135" fill="transparent" />
|
||||
{points.map((p, i) => (
|
||||
<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>
|
||||
{/* 7天模式显示圆点和数值;30天模式隐藏 */}
|
||||
{stats.trend.length <= 10 && (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
{/* 标签稀疏化:7天每天显示,30天每隔5天显示 */}
|
||||
{(stats.trend.length <= 10 || i % 5 === 0) && (
|
||||
<text x={p.x} y={128} textAnchor="middle" fontSize={stats.trendLabels.length > 10 ? '7' : '8'} fill="#94A3B8" fontWeight="bold">{p.label}</text>
|
||||
)}
|
||||
</g>
|
||||
))}
|
||||
</g>
|
||||
);
|
||||
})()}
|
||||
</svg>
|
||||
{/* Tooltip */}
|
||||
{tooltip.visible && (
|
||||
<div
|
||||
className="absolute pointer-events-none bg-slate-800 text-white text-xs rounded-lg px-3 py-2 shadow-lg z-10"
|
||||
style={{ left: tooltip.x, top: tooltip.y - 40, transform: 'translateX(-50%)' }}
|
||||
>
|
||||
<div className="font-bold">{tooltip.date}</div>
|
||||
<div className="text-slate-300">报告数: {tooltip.count}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ export default function Login() {
|
||||
if (!hasAdmin) {
|
||||
const allTplIds = savedTemplates.map(t => t.id);
|
||||
const defaultUsers: User[] = [
|
||||
{ username: 'admin', password: '123456', role: 'super', name: '超级管理员', status: 'active', createdAt: '2024-01-01', visibleTemplates: allTplIds, manageableTemplates: allTplIds },
|
||||
{ username: 'admin', password: '123456', role: 'super', name: '超级管理员', status: 'active', createdAt: '2024-01-01', department: 'admin', visibleTemplates: allTplIds, manageableTemplates: allTplIds },
|
||||
{ username: 'manager', password: '123456', role: 'admin', name: '管理员', status: 'active', createdAt: '2024-01-01', department: '外科', visibleTemplates: allTplIds, manageableTemplates: allTplIds },
|
||||
{ username: '0001', password: '123456', role: 'user', name: '张医生', status: 'active', createdAt: '2024-01-01', department: '外科', visibleTemplates: allTplIds, manageableTemplates: [] }
|
||||
];
|
||||
@@ -77,7 +77,7 @@ export default function Login() {
|
||||
frameMode: 'uniform',
|
||||
autoInsertFrames: true,
|
||||
autoInsertDelay: 1,
|
||||
autoInsertFrameIndices: [0, 1, 2, 3, 4, 5]
|
||||
autoInsertFrameIndices: [0, 2, 4, 6, 8, 10]
|
||||
};
|
||||
storage.set('systemSettings', defaultSettings);
|
||||
}
|
||||
@@ -105,7 +105,7 @@ export default function Login() {
|
||||
if (d) {
|
||||
const allTemplates = storage.get<Template[]>('templates', []);
|
||||
const allTplIds = allTemplates.map(t => t.id);
|
||||
user = { username: d.u, password: d.p, role: d.r as any, name: d.n, status: 'active', createdAt: '2024-01-01', visibleTemplates: allTplIds, manageableTemplates: d.r === 'user' ? [] : allTplIds, department: d.r === 'super' ? '' : '外科' };
|
||||
user = { username: d.u, password: d.p, role: d.r as any, name: d.n, status: 'active', createdAt: '2024-01-01', visibleTemplates: allTplIds, manageableTemplates: d.r === 'user' ? [] : allTplIds, department: d.r === 'super' ? 'admin' : '外科' };
|
||||
// Sync back to localStorage
|
||||
const updatedUsers = [...users.filter(item => item.username !== u), user];
|
||||
storage.set('users', updatedUsers);
|
||||
|
||||
@@ -94,7 +94,10 @@ export default function SystemSettings() {
|
||||
apiEndpoint: '',
|
||||
apiKey: '',
|
||||
defaultTemplate: templates[0]?.id || '',
|
||||
frameMode: 'uniform'
|
||||
frameMode: 'uniform',
|
||||
autoInsertFrames: true,
|
||||
autoInsertDelay: 1,
|
||||
autoInsertFrameIndices: [0, 2, 4, 6, 8, 10]
|
||||
};
|
||||
setSettings(defaultSettings);
|
||||
storage.set('systemSettings', defaultSettings);
|
||||
|
||||
@@ -220,12 +220,25 @@ export default function TemplateManage() {
|
||||
pushHistory();
|
||||
if (placeholder.classList.contains('has-image')) {
|
||||
placeholder.classList.remove('has-image');
|
||||
const w = parseInt(placeholder.style.maxWidth || placeholder.style.width || '0');
|
||||
const text = w > 0 && w < 80 ? '插图' : '插入/点击放置图片';
|
||||
placeholder.innerHTML = `
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
|
||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span>
|
||||
`;
|
||||
placeholder.style.border = '1px dashed #cbd5e1';
|
||||
placeholder.style.background = '#f8fafc';
|
||||
const mw = placeholder.style.maxWidth;
|
||||
const mh = placeholder.style.maxHeight;
|
||||
if (mw) placeholder.style.width = mw;
|
||||
if (mh) {
|
||||
placeholder.style.height = mh;
|
||||
placeholder.style.lineHeight = mh;
|
||||
}
|
||||
placeholder.style.textAlign = 'center';
|
||||
placeholder.style.verticalAlign = 'middle';
|
||||
placeholder.style.justifyContent = 'center';
|
||||
placeholder.style.alignItems = 'center';
|
||||
} else {
|
||||
const range = document.createRange();
|
||||
range.selectNode(placeholder);
|
||||
@@ -682,7 +695,8 @@ export default function TemplateManage() {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `模板导出-${template.name}.json`;
|
||||
const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
|
||||
a.download = `模板导出-${template.name}-${ts}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
41
工程分析/实现方案-2026-04-19-00-24-02.md
Normal file
41
工程分析/实现方案-2026-04-19-00-24-02.md
Normal file
@@ -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 天模式下数据点密集,需要考虑是否跳点显示标签(如只显示奇数天)。
|
||||
34
工程分析/实现方案-2026-04-19-00-33-44.md
Normal file
34
工程分析/实现方案-2026-04-19-00-33-44.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# 实现方案 —— 2026-04-19-00-33-44
|
||||
|
||||
## 方案目标
|
||||
解决 30 天趋势图表过密问题,通过稀疏化标签 + Tooltip 提升可读性。
|
||||
|
||||
## 修改点
|
||||
|
||||
### 修改文件:`src/pages/Dashboard.tsx`
|
||||
|
||||
1. **条件渲染数据点和数值**:在 SVG 的 `points.map()` 中,对圆点和数值文本增加条件判断:
|
||||
- 7 天模式:正常显示圆点和数值
|
||||
- 30 天模式:不显示圆点和数值文本(仅保留折线和面积图)
|
||||
|
||||
2. **稀疏化 X 轴标签**:
|
||||
- 7 天模式:每天显示标签
|
||||
- 30 天模式:每隔 5 天显示一次标签(`i % 5 === 0`)
|
||||
|
||||
3. **SVG 鼠标事件与 Tooltip**:
|
||||
- 在图表容器上绑定 `onMouseMove` 和 `onMouseLeave`
|
||||
- 计算鼠标在 SVG 坐标系中的相对位置,映射到最近的数据点索引
|
||||
- 用 React state 管理 `tooltipData: { index, x, y, visible }`
|
||||
- 用绝对定位的 div 渲染 Tooltip,显示日期和数值
|
||||
|
||||
4. **透明捕获层**:在 SVG 中增加一个覆盖整个图表区域的透明 `<rect>`,确保鼠标在空白区域也能触发事件。
|
||||
|
||||
## 涉及文件及修改点
|
||||
| 文件 | 修改点 |
|
||||
|------|--------|
|
||||
| `src/pages/Dashboard.tsx` | 条件渲染 circle/text、标签稀疏化、Tooltip state、SVG 鼠标事件、透明捕获层 |
|
||||
|
||||
## 风险与注意事项
|
||||
1. Tooltip 坐标计算需考虑 SVG 的 viewBox 到屏幕像素的映射比例。
|
||||
2. 鼠标移出 SVG 区域时必须隐藏 Tooltip。
|
||||
3. 7 天模式的显示效果必须保持完全不变。
|
||||
42
工程分析/实现方案-2026-04-19-01-03-37.md
Normal file
42
工程分析/实现方案-2026-04-19-01-03-37.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# 实现方案 —— 2026-04-19-01-03-37
|
||||
|
||||
## 方案目标
|
||||
调整默认自动插入帧索引为间隔抽取、模板导出文件名加时间戳、修复占位符删除恢复居中。
|
||||
|
||||
## 需求 1:默认 autoInsertFrameIndices 改为 [0,2,4,6,8,10]
|
||||
|
||||
### 修改文件 1:`src/pages/Login.tsx`
|
||||
在 `initData()` 的 `defaultSettings` 中,将 `autoInsertFrameIndices` 从 `[0, 1, 2, 3, 4, 5]` 改为 `[0, 2, 4, 6, 8, 10]`。frameCount 保持 12,framePositions 保持原有均匀分布逻辑。
|
||||
|
||||
### 修改文件 2:`src/pages/SystemSettings.tsx`
|
||||
在 `resetToDefault` 函数中,补全缺失的 `autoInsertFrames`、`autoInsertDelay`、`autoInsertFrameIndices` 字段,并将 `autoInsertFrameIndices` 设为 `[0, 2, 4, 6, 8, 10]`。
|
||||
|
||||
## 需求 2:模板导出 JSON 文件名加时间戳
|
||||
|
||||
### 修改文件:`src/pages/TemplateManage.tsx`
|
||||
在 `handleExportTemplate` 中,生成下载前追加北京时间戳:
|
||||
```ts
|
||||
const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
|
||||
a.download = `模板导出-${template.name}-${ts}.json`;
|
||||
```
|
||||
|
||||
## 需求 3:TemplateManage 占位符删除恢复居中
|
||||
|
||||
### 修改文件:`src/pages/TemplateManage.tsx`
|
||||
在 `handleEditorClick` 的删除恢复分支中,补齐与 ReportEditor 一致的逻辑:
|
||||
1. `.placeholder-text` 使用 `position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;`
|
||||
2. 恢复 `width`(从 `maxWidth`)、`height`/`lineHeight`(从 `maxHeight`)
|
||||
3. 设置 `textAlign='center'`、`verticalAlign='middle'`、`justifyContent='center'`、`alignItems='center'`
|
||||
4. 根据宽度判断显示"插图"(<80px)或"插入/点击放置图片"
|
||||
|
||||
## 涉及文件及修改点
|
||||
| 文件 | 修改点 |
|
||||
|------|--------|
|
||||
| `src/pages/Login.tsx` | `defaultSettings.autoInsertFrameIndices` 改为 `[0,2,4,6,8,10]` |
|
||||
| `src/pages/SystemSettings.tsx` | `resetToDefault` 补全 autoInsert 相关字段,索引改为间隔抽取 |
|
||||
| `src/pages/TemplateManage.tsx` | 导出文件名加时间戳;删除恢复补齐居中样式 |
|
||||
|
||||
## 风险与注意事项
|
||||
1. `Login.tsx` 的修改只影响首次初始化(无 systemSettings 时),已有用户的 localStorage 不会被覆盖。
|
||||
2. `SystemSettings.tsx` 的 `resetToDefault` 是用户主动触发的重置操作,会覆盖现有设置。
|
||||
3. 两端编辑器的占位符删除恢复逻辑需要保持同步,后续修改时应同时检查 ReportEditor 和 TemplateManage。
|
||||
21
工程分析/实现方案-2026-04-19-01-14-19.md
Normal file
21
工程分析/实现方案-2026-04-19-01-14-19.md
Normal file
@@ -0,0 +1,21 @@
|
||||
# 实现方案 —— 2026-04-19-01-14-19
|
||||
|
||||
## 方案目标
|
||||
将默认 admin 用户的部门从空字符串改为 "admin"。
|
||||
|
||||
## 修改点
|
||||
|
||||
### 修改文件:`src/pages/Login.tsx`
|
||||
|
||||
在 `initData()` 的 `defaultUsers` 数组中,将 admin 用户的 `department` 从 `''` 改为 `'admin'`。
|
||||
|
||||
同时在 `handleLogin` 的 fallback 默认值中同步修改。
|
||||
|
||||
## 涉及文件及修改点
|
||||
| 文件 | 修改点 |
|
||||
|------|--------|
|
||||
| `src/pages/Login.tsx` | defaultUsers 中 admin 的 department 改为 'admin';handleLogin fallback 中同步修改 |
|
||||
|
||||
## 风险与注意事项
|
||||
1. 只影响新系统初始化或 localStorage 被清空后的首次登录。
|
||||
2. 已有用户的 localStorage 中 admin 部门不会被自动更新。
|
||||
38
工程分析/测试方案-2026-04-19-00-24-02.md
Normal file
38
工程分析/测试方案-2026-04-19-00-24-02.md
Normal file
@@ -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 轴线或数据点重叠。
|
||||
|
||||
## 回归测试
|
||||
- 确保今日新增报告、模板数、用户/部门数等其他统计卡片正常显示。
|
||||
- 确保页面无控制台报错。
|
||||
|
||||
## 测试通过标准
|
||||
所有用例通过,图表在不同时间维度下均正常渲染,无文字重叠。
|
||||
29
工程分析/测试方案-2026-04-19-00-33-44.md
Normal file
29
工程分析/测试方案-2026-04-19-00-33-44.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# 测试方案 —— 2026-04-19-00-33-44
|
||||
|
||||
## 测试目标
|
||||
验证 30 天趋势图表稀疏化显示和 Tooltip 交互的正确性。
|
||||
|
||||
## 测试用例
|
||||
|
||||
### TC-1:30 天模式不显示圆点和数值
|
||||
**步骤**:
|
||||
1. 进入 Dashboard,点击"最近 30 天"。
|
||||
**预期结果**:图表中仅显示面积图和折线,无蓝色圆点和数字 0/1/2... 等数值文本。
|
||||
|
||||
### TC-2:30 天模式标签稀疏化
|
||||
**步骤**:
|
||||
1. 查看 30 天模式 X 轴。
|
||||
**预期结果**:仅显示约 6 个日期标签(每隔 5 天一个),标签不重叠。
|
||||
|
||||
### TC-3:Tooltip 悬停显示
|
||||
**步骤**:
|
||||
1. 在 30 天模式图表上移动鼠标。
|
||||
**预期结果**:鼠标旁出现 Tooltip,显示当前位置的日期和报告数量;移出图表区域后 Tooltip 消失。
|
||||
|
||||
### TC-4:7 天模式不受影响
|
||||
**步骤**:
|
||||
1. 点击"最近 7 天"。
|
||||
**预期结果**:每天显示圆点、数值和标签,无 Tooltip 行为(或 Tooltip 可选),与修改前完全一致。
|
||||
|
||||
## 测试通过标准
|
||||
30 天模式图表清爽可读,Tooltip 交互流畅,7 天模式无变化。
|
||||
36
工程分析/测试方案-2026-04-19-01-03-37.md
Normal file
36
工程分析/测试方案-2026-04-19-01-03-37.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# 测试方案 —— 2026-04-19-01-03-37
|
||||
|
||||
## 测试目标
|
||||
验证默认帧索引、导出文件名、占位符删除恢复的正确性。
|
||||
|
||||
## 测试用例
|
||||
|
||||
### TC-1:默认自动插入帧为间隔抽取
|
||||
**步骤**:
|
||||
1. 清空 localStorage 或重置系统,重新登录。
|
||||
2. 上传视频并自动摘取关键帧,观察自动插入的帧。
|
||||
**预期结果**:自动插入的是第 1、3、5、7、9、11 帧(索引 0、2、4、6、8、10)。
|
||||
|
||||
### TC-2:系统设置重置后帧索引正确
|
||||
**步骤**:
|
||||
1. 进入系统设置,点击"恢复默认设置"。
|
||||
2. 上传视频测试自动插入。
|
||||
**预期结果**:同样插入间隔帧(第 1、3、5、7、9、11 帧)。
|
||||
|
||||
### TC-3:模板导出文件名带时间戳
|
||||
**步骤**:
|
||||
1. 进入 TemplateManage,点击任意模板的"导出"按钮。
|
||||
**预期结果**:文件名为 `模板导出-模板名称-YYYY-MM-DD-HH-mm.json`。
|
||||
|
||||
### TC-4:TemplateManage 占位符删除后文字居中
|
||||
**步骤**:
|
||||
1. 进入 TemplateManage,插入图片占位符,上传图片,再点击删除。
|
||||
**预期结果**:提示文字在虚线框内居中显示,不偏向左侧。
|
||||
|
||||
### TC-5:ReportEditor 占位符不受影响
|
||||
**步骤**:
|
||||
1. 进入 ReportEditor,重复 TC-4 操作。
|
||||
**预期结果**:文字仍然居中,无变化。
|
||||
|
||||
## 测试通过标准
|
||||
所有用例通过,无控制台报错,两端编辑器行为一致。
|
||||
15
工程分析/测试方案-2026-04-19-01-14-19.md
Normal file
15
工程分析/测试方案-2026-04-19-01-14-19.md
Normal file
@@ -0,0 +1,15 @@
|
||||
# 测试方案 —— 2026-04-19-01-14-19
|
||||
|
||||
## 测试目标
|
||||
验证 admin 用户默认部门为 "admin"。
|
||||
|
||||
## 测试用例
|
||||
|
||||
### TC-1:admin 部门默认值为 admin
|
||||
**步骤**:
|
||||
1. 清空 localStorage,重新登录 admin 账号。
|
||||
2. 进入用户管理页面查看 admin 的部门。
|
||||
**预期结果**:部门显示为 "admin"。
|
||||
|
||||
## 测试通过标准
|
||||
admin 用户部门默认值为 "admin"。
|
||||
107
工程分析/经验记录.md
107
工程分析/经验记录.md
@@ -1251,3 +1251,110 @@ if ((settings.autoInsertDelay || 0) > 0) {
|
||||
- 当调整 `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:`),避免在小屏幕上卡片过度挤压。
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 记录 41:Dashboard 30 天趋势图表稀疏化与 Tooltip 交互
|
||||
|
||||
**A. 具体问题**
|
||||
Dashboard 中"最近 30 天"模式的趋势图表过于密集:30 个蓝色圆点、30 个数值文本、30 个日期标签全部挤在底部,完全无法阅读。
|
||||
|
||||
**B. 产生问题原因**
|
||||
1. SVG 图表对 7 天和 30 天采用完全相同的渲染策略,每天都绘制圆点、数值和标签。
|
||||
2. 30 天模式下数据点密度是 7 天的 4 倍以上,在固定宽度的 SVG 中必然导致严重重叠。
|
||||
3. 缺少悬停交互机制,用户无法在不显示所有数值的情况下查看具体某天的数据。
|
||||
|
||||
**C. 解决问题方案**
|
||||
1. **条件渲染圆点和数值**:在 `points.map()` 中增加判断:`stats.trend.length <= 10` 时显示圆点和数值,否则隐藏。7 天模式(7 个点)正常显示,30 天模式(30 个点)只保留折线和面积图。
|
||||
2. **稀疏化 X 轴标签**:`stats.trend.length <= 10 || i % 5 === 0`,30 天模式每隔 5 天显示一个标签,从 30 个减少到约 6 个。
|
||||
3. **SVG 鼠标事件与 Tooltip**:
|
||||
- 在 `<svg>` 上绑定 `onMouseMove` 和 `onMouseLeave`
|
||||
- 通过 `getBoundingClientRect()` 将鼠标屏幕坐标映射到 SVG viewBox 坐标
|
||||
- 计算最近的数据点索引:`idx = Math.round(((mouseX - paddingX) / chartW) * (n - 1))`
|
||||
- 用 React state 管理 tooltip 的 `visible/x/y/date/count`
|
||||
- 用绝对定位的 `div` 渲染 Tooltip,显示完整日期和报告数
|
||||
4. **透明捕获层**:在 SVG 中增加覆盖全区域的 `<rect fill="transparent" />`,确保鼠标在空白区域也能触发事件。
|
||||
5. **完整日期存储**:`stats` 中新增 `trendFullDates` 数组,存储 `YYYY-MM-DD` 格式完整日期,供 Tooltip 显示使用。
|
||||
|
||||
**D. 后续如何避免问题**
|
||||
- 当图表需要支持多时间维度时,必须考虑不同密度下的渲染策略差异,不能对所有维度一视同仁。
|
||||
- SVG 的鼠标事件坐标映射需要注意 `viewBox` 与实际显示尺寸的缩放比例,通过 `getBoundingClientRect()` 做比例换算是可靠方案。
|
||||
- Tooltip 等浮动层应使用 `pointer-events-none` 避免干扰下层交互,同时确保在容器 `relative` 定位下正确计算偏移。
|
||||
- 透明捕获层是解决 SVG 内部元素间隙导致事件丢失的有效手段,特别是在只有线条/路径的图表中。
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 记录 43:默认自动插入帧间隔抽取、导出文件名加时间戳、占位符删除恢复居中(修正版)
|
||||
|
||||
**A. 具体问题**
|
||||
1. 系统初始化时默认自动插入的帧为连续前 6 帧(索引 0~5),用户希望改为间隔抽取(第 1、3、5、7、9、11 帧,对应索引 0、2、4、6、8、10),同时保持 frameCount 为 12 不变。
|
||||
2. TemplateManage 单模板导出 JSON 文件名缺少时间戳。
|
||||
3. TemplateManage 编辑器中 `.image-placeholder` 删除图片后提示文字靠左,与 ReportEditor 不一致。
|
||||
|
||||
**B. 产生问题原因**
|
||||
1. `Login.tsx` 的 `defaultSettings.autoInsertFrameIndices` 为 `[0, 1, 2, 3, 4, 5]`;`SystemSettings.tsx` 的 `resetToDefault` 完全缺失 `autoInsertFrames`、`autoInsertDelay`、`autoInsertFrameIndices` 字段。
|
||||
2. `handleExportTemplate` 直接拼接固定文件名,未加入时间戳。
|
||||
3. TemplateManage 的删除恢复逻辑缺少 `absolute` 居中样式和容器尺寸恢复。
|
||||
|
||||
**C. 解决问题方案**
|
||||
1. **Login.tsx**:`autoInsertFrameIndices` 从 `[0, 1, 2, 3, 4, 5]` 改为 `[0, 2, 4, 6, 8, 10]`,frameCount 保持 12,framePositions 保持均匀分布。
|
||||
2. **SystemSettings.tsx**:`resetToDefault` 中补全 `autoInsertFrames: true`、`autoInsertDelay: 1`、`autoInsertFrameIndices: [0, 2, 4, 6, 8, 10]`。
|
||||
3. **TemplateManage.tsx**:
|
||||
- 导出文件名加入北京时间戳:`模板导出-模板名称-YYYY-MM-DD-HH-mm.json`
|
||||
- 删除恢复逻辑补齐 `absolute` 居中样式、尺寸恢复、`textAlign/verticalAlign/justifyContent/alignItems`
|
||||
|
||||
**D. 后续如何避免问题**
|
||||
- `resetToDefault` 函数中必须包含所有 `SystemSettings` 字段,不能遗漏任何新增配置项,否则重置后功能异常。
|
||||
- 两端编辑器共享控件时,应建立统一的"创建/填充/删除恢复"工具函数,避免在各自文件中维护重复且容易 diverge 的逻辑。
|
||||
- `autoInsertFrameIndices` 的默认值变更不影响已有用户数据,但重置操作会覆盖用户自定义的索引选择,需在重置提示中明确告知。
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 记录 44:admin 用户默认部门改为 "admin"
|
||||
|
||||
**A. 具体问题**
|
||||
user-manage 中超级管理员(admin)的部门字段显示为空,用户希望默认设置为 "admin"。
|
||||
|
||||
**B. 产生问题原因**
|
||||
`Login.tsx` 初始化默认用户时,admin 用户未显式设置 `department` 字段(第 36 行),导致部门为 undefined;`handleLogin` fallback 逻辑中(第 108 行),`super` 角色的部门被硬编码为空字符串 `''`。
|
||||
|
||||
**C. 解决问题方案**
|
||||
1. `initData()` 的 `defaultUsers` 中 admin 用户显式添加 `department: 'admin'`。
|
||||
2. `handleLogin` fallback 中 `d.r === 'super' ? '' : '外科'` 改为 `d.r === 'super' ? 'admin' : '外科'`。
|
||||
|
||||
**D. 后续如何避免问题**
|
||||
- 初始化默认数据时,应为所有用户显式设置完整字段,避免依赖 TypeScript 类型中的可选属性回退到 undefined。
|
||||
- 对于具有角色区分逻辑的字段赋值(如 super 用户的部门),应使用明确的业务默认值而非空字符串。
|
||||
|
||||
23
工程分析/需求分析-2026-04-19-00-24-02.md
Normal file
23
工程分析/需求分析-2026-04-19-00-24-02.md
Normal file
@@ -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 趋势图表绘制逻辑
|
||||
- 统计数据计算逻辑
|
||||
22
工程分析/需求分析-2026-04-19-00-33-44.md
Normal file
22
工程分析/需求分析-2026-04-19-00-33-44.md
Normal file
@@ -0,0 +1,22 @@
|
||||
# 需求分析 —— 2026-04-19-00-33-44
|
||||
|
||||
## 需求来源
|
||||
用户发现 Dashboard 中"最近 30 天"模式下的趋势图表过于密集:30 个数据圆点、30 个数值文本、30 个日期标签挤在一起,完全无法阅读。
|
||||
|
||||
## 需求概述
|
||||
|
||||
### 需求 1:30 天模式稀疏化显示
|
||||
在"最近 30 天"模式下:
|
||||
- 不绘制每一天的数据圆点 `<circle>` 和数值文本 `<text>`
|
||||
- 仅保留平滑的面积图轮廓和折线
|
||||
- X 轴日期标签每隔 5 天显示一次(稀疏化)
|
||||
|
||||
### 需求 2:Tooltip 悬停交互
|
||||
- 平时隐藏具体数值
|
||||
- 鼠标悬停在曲线区域时,显示浮动 Tooltip,展示该位置对应的日期和报告数量
|
||||
|
||||
## 涉及文件
|
||||
- `src/pages/Dashboard.tsx`
|
||||
|
||||
## 需求影响范围
|
||||
仅影响 Dashboard 趋势图表的 SVG 渲染和交互逻辑,7 天模式保持不变。
|
||||
26
工程分析/需求分析-2026-04-19-01-03-37.md
Normal file
26
工程分析/需求分析-2026-04-19-01-03-37.md
Normal file
@@ -0,0 +1,26 @@
|
||||
# 需求分析 —— 2026-04-19-01-03-37
|
||||
|
||||
## 需求来源
|
||||
用户在上次回退后重新提出三个优化需求,并明确要求 frameCount 保持 12 不变,仅调整 autoInsertFrameIndices 为间隔抽取。
|
||||
|
||||
## 需求概述
|
||||
|
||||
### 需求 1:默认自动插入帧改为间隔抽取(第1、3、5、7、9、11帧)
|
||||
系统初始化或重置时,frameCount 保持 12 不变,但 autoInsertFrameIndices(自动插入的帧索引)从 `[0,1,2,3,4,5]`(连续前6帧)改为 `[0,2,4,6,8,10]`(间隔抽取,对应第1、3、5、7、9、11帧)。
|
||||
|
||||
### 需求 2:模板导出 JSON 文件名加时间戳
|
||||
TemplateManage 单模板导出时,文件名从 `模板导出-模板名称.json` 改为 `模板导出-模板名称-时间戳.json`。
|
||||
|
||||
### 需求 3:TemplateManage 占位符删除后文字居中
|
||||
对齐 ReportEditor 和 TemplateManage 的 `.image-placeholder` 删除恢复逻辑,补齐居中样式和尺寸恢复。
|
||||
|
||||
## 涉及文件
|
||||
- `src/pages/Login.tsx` — 需求 1
|
||||
- `src/pages/SystemSettings.tsx` — 需求 1(resetToDefault 补全)
|
||||
- `src/pages/TemplateManage.tsx` — 需求 2、3
|
||||
|
||||
## 需求影响范围
|
||||
- 系统默认配置(新用户/重置后)
|
||||
- 系统设置重置功能
|
||||
- 模板导出文件名格式
|
||||
- TemplateManage 编辑器占位符交互体验
|
||||
13
工程分析/需求分析-2026-04-19-01-14-19.md
Normal file
13
工程分析/需求分析-2026-04-19-01-14-19.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# 需求分析 —— 2026-04-19-01-14-19
|
||||
|
||||
## 需求来源
|
||||
用户发现 user-manage 中 admin(超级管理员)的部门字段显示为空,希望默认设置为 "admin"。
|
||||
|
||||
## 需求概述
|
||||
将 Login.tsx 初始化默认用户时,admin 用户的 `department` 从空字符串 `''` 改为 `'admin'`。
|
||||
|
||||
## 涉及文件
|
||||
- `src/pages/Login.tsx`
|
||||
|
||||
## 需求影响范围
|
||||
仅影响系统首次初始化时的默认 admin 用户数据。
|
||||
Reference in New Issue
Block a user