# 需求文档：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 开关样式。不影响其他页面。