From 5f04a3c4017bff9eceb8ab2f4d899978f477b022 Mon Sep 17 00:00:00 2001
From: 16337 <1633794139@qq.com>
Date: Fri, 13 Feb 2026 16:37:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor(aiot):=20=E4=BD=BF=E7=94=A8=E5=8E=9F?=
 =?UTF-8?q?=E7=94=9Ftime=20input=E6=9B=BF=E6=8D=A2TimePicker=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../roi/components/WorkingHoursEditor.vue     | 70 +++++++++++++------
 1 file changed, 47 insertions(+), 23 deletions(-)

diff --git a/apps/web-antd/src/views/aiot/device/roi/components/WorkingHoursEditor.vue b/apps/web-antd/src/views/aiot/device/roi/components/WorkingHoursEditor.vue
index a0869b270..cd28ad3f6 100644
--- a/apps/web-antd/src/views/aiot/device/roi/components/WorkingHoursEditor.vue
+++ b/apps/web-antd/src/views/aiot/device/roi/components/WorkingHoursEditor.vue
@@ -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;