时间选择器功能说明

功能概述

用户管理页面的时间搜索组件已升级为具有悬停弹出选项功能的高级时间选择器，提供更便捷的时间范围选择体验。

功能特性

1. 悬停弹出选项

• 鼠标悬停在时间输入框上时，自动弹出时间选项菜单
• 支持快速选择常用的时间范围
• 提供直观的视觉反馈

2. 预设时间选项

• 今天: 选择当前日期
• 昨天: 选择昨天的日期
• 本周: 选择本周开始日期（周一）
• 上周: 选择上周的时间范围
• 本月: 选择本月开始日期
• 上月: 选择上月的时间范围
• 自定义: 打开原生日期选择器

3. 智能时间范围

• 开始时间和结束时间都有独立的选项菜单
• 结束时间会自动选择合理的结束日期
• 支持时间范围的逻辑验证

技术实现

1. 组件结构

<div class="date-picker-container">
  <input 
    v-model="searchForm.startTime" 
    type="text" 
    class="date-input" 
    readonly
    @mouseenter="showStartDateOptions = true"
    @mouseleave="hideStartDateOptions"
  />
  <div v-if="showStartDateOptions" class="date-options">
    <!-- 时间选项列表 -->
  </div>
</div>

2. 状态管理

// 时间选择器状态
const showStartDateOptions = ref(false)
const showEndDateOptions = ref(false)
const showStartDatePicker = ref(false)
const showEndDatePicker = ref(false)

3. 时间计算函数

• getCurrentDate(): 获取当前日期
• getDateBefore(days): 获取指定天数前的日期
• getWeekStart(): 获取本周开始日期
• getMonthStart(): 获取本月开始日期
• getLastMonthStart(): 获取上月开始日期
• getLastMonthEnd(): 获取上月结束日期

使用方法

1. 快速选择时间

1. 将鼠标悬停在"开始时间"或"结束时间"输入框上
2. 在弹出的选项菜单中选择所需的时间范围
3. 系统自动填充对应的日期

2. 自定义时间选择

1. 悬停在时间输入框上
2. 选择"自定义"选项
3. 使用原生日期选择器选择具体日期

3. 时间范围搜索

1. 选择开始时间和结束时间
2. 点击"搜索"按钮执行查询
3. 系统会搜索指定时间范围内的用户

样式设计

1. 选项菜单样式

.date-options {
  position: absolute;
  top: 100%;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

2. 选项项样式

.date-option {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.date-option:hover {
  background-color: #f5f5f5;
  color: #1890ff;
}

交互逻辑

1. 悬停显示

• 鼠标进入输入框时显示选项菜单
• 鼠标离开输入框时延迟隐藏菜单（200ms）
• 鼠标进入选项菜单时保持显示状态

2. 选择处理

• 点击选项后自动填充对应日期
• 选择"自定义"时显示原生日期选择器
• 选择完成后自动隐藏选项菜单

3. 时间范围逻辑

• 开始时间不能晚于结束时间
• 结束时间不能早于开始时间
• 支持空值选择（只选择开始时间或结束时间）

兼容性

• 支持现代浏览器的原生日期选择器
• 降级到文本输入框（readonly）
• 响应式设计，适配不同屏幕尺寸

扩展功能

1. 可添加的选项

• 最近7天
• 最近30天
• 最近3个月
• 最近一年

2. 可优化的功能

• 时间范围验证
• 快捷清除功能
• 时间格式显示优化

测试方法

1. 打开用户管理页面
2. 将鼠标悬停在"创建时间"的输入框上
3. 观察是否弹出选项菜单
4. 点击不同选项测试功能
5. 选择"自定义"测试原生日期选择器
6. 执行搜索验证时间范围功能

注意事项

1. 时间格式统一使用 YYYY-MM-DD 格式
2. 时区处理基于浏览器本地时间
3. 选项菜单的 z-index 设置为 1000，确保显示在最上层
4. 延迟隐藏机制避免鼠标快速移动时菜单闪烁