# 计划执行：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: 部署验证 | 待执行 | - | - |