fix(aiot): 重构时间选择器为两个独立的TimePicker

- 将 TimePicker.RangePicker 改为两个独立的 TimePicker
- 使用 startTime 和 endTime 分别控制开始和结束时间
- 添加时间分隔符"至"提升可读性
- 修复编辑功能，现在可以正常编辑模板时间段
- 解决时间选择器无法显示和选择的问题

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web-antd/src/views/aiot/device/roi/components/WorkingHoursEditor.vue

@@ -30,7 +30,8 @@ const emit = defineEmits<{
 }>();
 
 // 当前编辑的时间段
-const currentRange = ref<[Dayjs, Dayjs] | null>(null);
+const startTime = ref<Dayjs | null>(null);
+const endTime = ref<Dayjs | null>(null);
 
 // 正在编辑的时间段索引
 const editingIndex = ref<number | null>(null);
@@ -78,15 +79,14 @@ const templates = [
 
 // 添加或更新时间段
 function addPeriod() {
-  if (!currentRange.value) {
+  if (!startTime.value || !endTime.value) {
-    message.warning('请先选择时间段');
+    message.warning('请选择开始时间和结束时间');
     return;
   }
 
-  const [start, end] = currentRange.value;
   const newPeriod: WorkingHourPeriod = {
-    start: start.format('HH:mm'),
+    start: startTime.value.format('HH:mm'),
-    end: end.format('HH:mm'),
+    end: endTime.value.format('HH:mm'),
   };
 
   // 校验：结束时间必须晚于开始时间
@@ -132,22 +132,22 @@ function addPeriod() {
     message.success('时间段已添加');
   }
 
-  currentRange.value = null;
+  startTime.value = null;
+  endTime.value = null;
 }
 
 // 编辑时间段
 function editPeriod(index: number) {
   const period = periods.value[index];
-  currentRange.value = [
+  startTime.value = dayjs(period.start, 'HH:mm');
-    dayjs(period.start, 'HH:mm'),
+  endTime.value = dayjs(period.end, 'HH:mm');
-    dayjs(period.end, 'HH:mm'),
-  ];
   editingIndex.value = index;
 }
 
 // 取消编辑
 function cancelEdit() {
-  currentRange.value = null;
+  startTime.value = null;
+  endTime.value = null;
   editingIndex.value = null;
 }
 
@@ -229,11 +229,19 @@ function getDuration(period: WorkingHourPeriod): string {
       </div>
 
       <div class="time-picker-row">
-        <TimePicker.RangePicker
+        <TimePicker
-          v-model:value="currentRange"
+          v-model:value="startTime"
           format="HH:mm"
           :minute-step="30"
-          :placeholder="['开始时间', '结束时间']"
+          placeholder="开始时间"
+          style="flex: 1"
+        />
+        <span class="time-separator">至</span>
+        <TimePicker
+          v-model:value="endTime"
+          format="HH:mm"
+          :minute-step="30"
+          placeholder="结束时间"
           style="flex: 1"
         />
         <Button v-if="editingIndex !== null" @click="cancelEdit">
@@ -392,9 +400,15 @@ function getDuration(period: WorkingHourPeriod): string {
 .time-picker-row {
   display: flex;
   gap: 12px;
+  align-items: center;
   margin-bottom: 16px;
 }
 
+.time-separator {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+}
+
 /* 时间段列表 */
 .periods-list {
   background: #fafafa;