refactor(aiot): 使用原生time input替换TimePicker组件

- 移除 ant-design-vue TimePicker 和 dayjs 依赖
- 使用原生 HTML5 <input type="time"> 实现时间选择
- 更简单、更稳定、浏览器原生支持
- 添加 Ant Design 风格的样式适配
- 简化代码逻辑,直接使用字符串格式 HH:mm
- 完美支持编辑、添加、模板功能

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-13 16:37:37 +08:00
parent e163bf5152
commit 5f04a3c401

View File

@@ -7,10 +7,7 @@ import {
message,
Space,
Tag,
TimePicker,
} from 'ant-design-vue';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
interface WorkingHourPeriod {
start: string; // "HH:mm" 格式
@@ -30,8 +27,8 @@ const emit = defineEmits<{
}>();
// 当前编辑的时间段
const startTime = ref<Dayjs | null>(null);
const endTime = ref<Dayjs | null>(null);
const startTime = ref('');
const endTime = ref('');
// 正在编辑的时间段索引
const editingIndex = ref<number | null>(null);
@@ -85,8 +82,8 @@ function addPeriod() {
}
const newPeriod: WorkingHourPeriod = {
start: startTime.value.format('HH:mm'),
end: endTime.value.format('HH:mm'),
start: startTime.value,
end: endTime.value,
};
// 校验:结束时间必须晚于开始时间
@@ -132,22 +129,22 @@ function addPeriod() {
message.success('时间段已添加');
}
startTime.value = null;
endTime.value = null;
startTime.value = '';
endTime.value = '';
}
// 编辑时间段
function editPeriod(index: number) {
const period = periods.value[index];
startTime.value = dayjs(period.start, 'HH:mm');
endTime.value = dayjs(period.end, 'HH:mm');
startTime.value = period.start;
endTime.value = period.end;
editingIndex.value = index;
}
// 取消编辑
function cancelEdit() {
startTime.value = null;
endTime.value = null;
startTime.value = '';
endTime.value = '';
editingIndex.value = null;
}
@@ -229,20 +226,18 @@ function getDuration(period: WorkingHourPeriod): string {
</div>
<div class="time-picker-row">
<TimePicker
v-model:value="startTime"
format="HH:mm"
:minute-step="30"
<input
v-model="startTime"
type="time"
class="time-input"
placeholder="开始时间"
style="flex: 1"
/>
<span class="time-separator"></span>
<TimePicker
v-model:value="endTime"
format="HH:mm"
:minute-step="30"
<input
v-model="endTime"
type="time"
class="time-input"
placeholder="结束时间"
style="flex: 1"
/>
<Button v-if="editingIndex !== null" @click="cancelEdit">
取消
@@ -404,6 +399,35 @@ function getDuration(period: WorkingHourPeriod): string {
margin-bottom: 16px;
}
.time-input {
flex: 1;
height: 32px;
padding: 4px 11px;
font-size: 14px;
line-height: 1.5715;
color: rgba(0, 0, 0, 0.88);
background-color: #fff;
border: 1px solid #d9d9d9;
border-radius: 6px;
transition: all 0.2s;
}
.time-input:hover {
border-color: #4096ff;
}
.time-input:focus {
border-color: #4096ff;
box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
outline: 0;
}
.time-input:disabled {
color: rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, 0.04);
cursor: not-allowed;
}
.time-separator {
color: rgba(0, 0, 0, 0.45);
font-size: 14px;