Skip to content

U
ubains-module-test
提交 dc45e871 authored 作者: 陈泽健's avatar 陈泽健
浏览文件
操作

docs(service-monitor): 更新 HANDOFF 交接文档 + Toggle 样式优化 PRD 文档 

- 更新 HANDOFF.md 记录本轮所有改动（钉钉通知优化、toggle 修复、时区问题、FLASK_DEBUG 修复）
- 新增 Toggle 开关样式优化需求文档和计划执行文档
Co-Authored-By: 's avatarClaude <noreply@anthropic.com>
上级 e1e812c9
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 389 行增加 和 170 行删除
Docs/需求文档/服务监测/PRD_计划执行_Toggle开关样式优化.md 0 → 100644
浏览文件 @ dc45e871
# 计划执行：Toggle 开关样式优化
## 文档信息
- 创建时间：2026-07-21
- 关联需求文档：`Docs/需求文档/服务监测/PRD_需求文档_Toggle开关样式优化.md`
- 预计改动文件：1 个
---
## 执行步骤
### Step 1：修改 notification.html 的 toggle CSS
**文件**：`skill/code/web/templates/service_monitor/notification.html`
**改动位置**：L20-25（toggle-switch 相关 CSS）
**改前**：
```css
.toggle-switch { position: relative; width: 48px; height: 26px; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--gray-300); border-radius: 13px; transition: .2s; pointer-events: none; }
.toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; pointer-events: none; }
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }
```
**改后**：
```css
.toggle-switch { position: relative; width: 52px; height: 28px; cursor: pointer; display: inline-block; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: #d1d5db;
border-radius: 14px;
transition: all 0.2s ease;
pointer-events: none;
border: 1px solid #9ca3af;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 2px;
bottom: 2px;
background: #fff;
border-radius: 50%;
transition: all 0.2s ease;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary); border-color: var(--primary); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(24px); }
.toggle-switch:hover .toggle-slider { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); }
.toggle-switch input:checked + .toggle-slider:hover { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3); }
```
---
### Step 2：本地测试
**命令**：
```bash
cd skill/code && python -m pytest web/service_monitor/tests/ -v
```
**预期结果**：所有测试通过。
---
### Step 3：部署验证
**验证**：
1. 访问通知配置页面
2. Toggle 开关在白色背景下清晰可见
3. 启用/禁用状态颜色差异明显
4. Hover 时有外发光反馈
5. 点击响应正常，配置表单展开
---
## 执行记录
| 步骤 | 状态 | 时间 | 备注 |
|------|------|------|------|
| Step 1: 修改 CSS | 待执行 | - | - |
| Step 2: 本地测试 | 待执行 | - | - |
| Step 3: 部署验证 | 待执行 | - | - |
\ No newline at end of file
Docs/需求文档/服务监测/PRD_需求文档_Toggle开关样式优化.md 0 → 100644
浏览文件 @ dc45e871
# 需求文档：Toggle 开关样式优化
## 文档信息
- 创建时间：2026-07-21
- 需求来源：用户反馈
- 关联模块：service_monitor/notification
---
## 1. 背景与目标
### 1.1 背景
用户反馈通知配置页面的 toggle 开关"看不清楚"，导致多次尝试点击都无法展开配置表单。
经分析，当前 toggle 开关存在以下视觉问题：
1. **对比度不足**：slider 背景色为 `var(--gray-300)`（浅灰色），与白色背景对比度低
2. **未启用状态不明显**：未启用时 slider 为灰色，启用时为蓝色，但颜色差异不够醒目
3. **缺少视觉引导**：用户不知道这是可点击的开关，容易误以为是静态装饰元素
4. **尺寸偏小**：48x26px 的尺寸在移动端或高分辨率屏幕上显得较小
### 1.2 目标
1. 提高 toggle 开关的视觉对比度和识别度
2. 清晰区分启用/禁用状态
3. 增强可点击暗示（光标、阴影、过渡效果）
4. 保持与整体 UI 风格一致
---
## 2. 需求详述
### 2.1 样式优化
#### 当前样式
```css
.toggle-switch { position: relative; width: 48px; height: 26px; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--gray-300); /* 浅灰色，对比度低 */
border-radius: 13px;
transition: .2s;
pointer-events: none;
}
.toggle-slider:before { ... }
.toggle-switch input:checked + .toggle-slider {
background: var(--primary); /* 蓝色 */
}
```
#### 优化后样式
```css
.toggle-switch {
position: relative;
width: 52px; /* 加大尺寸 */
height: 28px;
cursor: pointer;
display: inline-block;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: #d1d5db; /* 更深的灰色 */
border-radius: 14px;
transition: all 0.2s ease;
pointer-events: none;
border: 1px solid #9ca3af; /* 添加边框增加轮廓 */
}
.toggle-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 2px;
bottom: 2px;
background: #fff;
border-radius: 50%;
transition: all 0.2s ease;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 添加阴影增加立体感 */
}
.toggle-switch input:checked + .toggle-slider {
background: var(--primary);
border-color: var(--primary);
}
.toggle-switch input:checked + .toggle-slider:before {
transform: translateX(24px);
}
/* 添加 hover 效果 */
.toggle-switch:hover .toggle-slider {
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.toggle-switch input:checked + .toggle-slider:hover {
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}
```
### 2.2 优化要点
| 属性 | 当前 | 优化后 | 目的 |
|------|------|--------|------|
| 尺寸 | 48x26px | 52x28px | 更容易被点击 |
| 未启用背景 | var(--gray-300) | #d1d5db | 更深灰色，对比度更高 |
| 边框 | 无 | 1px solid #9ca3af | 增加轮廓，更明显 |
| 圆点阴影 | 无 | box-shadow | 立体感，更像真实开关 |
| Hover 效果 | 无 | 外发光 | 暗示可点击 |
| 过渡效果 | .2s | all 0.2s ease | 平滑过渡 |
### 2.3 颜色对比
| 状态 | 背景色 | 边框色 | 说明 |
|------|--------|--------|------|
| 禁用 | #d1d5db | #9ca3af | 深灰色，清晰可见 |
| 启用 | var(--primary) | var(--primary) | 蓝色，醒目 |
| Hover（禁用） | #d1d5db + 外发光 | #9ca3af | 暗示可点击 |
| Hover（启用） | var(--primary) + 外发光 | var(--primary) | 增强反馈 |
---
## 3. 验收标准
| 标准 | 验证方法 |
|------|---------|
| Toggle 开关在白色背景下清晰可见 | 视觉检查 |
| 启用/禁用状态颜色差异明显 | 视觉检查 |
| Hover 时有视觉反馈 | 鼠标悬停测试 |
| 点击响应正常 | 点击展开配置表单 |
| 移动端显示正常 | Chrome DevTools 模拟移动设备 |
---
## 4. 影响范围
仅影响通知配置页面（`notification.html`）的 toggle 开关样式。不影响其他页面。
\ No newline at end of file
HANDOFF.md
浏览文件 @ dc45e871
此差异已折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论