fix: 对齐营业时间抽屉与日期时间选择交互

apps/web-antd/src/views/store/hours/components/HolidayDrawer.vue

@@ -3,7 +3,13 @@ import type { HolidayFormState } from '../types';
 
 import type { HolidayType } from '#/api/store-hours';
 
-import { Button, Drawer, Input, Textarea } from 'ant-design-vue';
+import {
+  Button,
+  DatePicker,
+  Drawer,
+  RangePicker,
+  TimePicker,
+} from 'ant-design-vue';
 
 interface Props {
   holidayForm: HolidayFormState;
@@ -32,18 +38,59 @@ const emit = defineEmits<{
 }>();
 
 function getInputValue(event: Event) {
-  const target = event.target as HTMLInputElement | null;
+  const target = event.target as HTMLInputElement | HTMLTextAreaElement | null;
   return target?.value ?? '';
 }
+
+function hasFormatMethod(
+  value: unknown,
+): value is { format: (pattern: string) => string } {
+  return Boolean(
+    value &&
+    typeof value === 'object' &&
+    'format' in value &&
+    typeof (value as { format?: unknown }).format === 'function',
+  );
+}
+
+function readDateValue(value: unknown) {
+  if (typeof value === 'string') return value;
+  if (hasFormatMethod(value)) return value.format('YYYY-MM-DD');
+  return '';
+}
+
+function readDateRangeValue(value: unknown): [string, string] {
+  if (!Array.isArray(value) || value.length < 2) return ['', ''];
+  return [readDateValue(value[0]), readDateValue(value[1])];
+}
+
+function getRangePickerValue(): [string, string] | undefined {
+  const { rangeStart, rangeEnd } = props.holidayForm;
+  if (!rangeStart || !rangeEnd) return undefined;
+  const rangeValue: [string, string] = [rangeStart, rangeEnd];
+  return rangeValue;
+}
+
+function handleRangeChange(value: unknown) {
+  const [start, end] = readDateRangeValue(value);
+  props.onSetRangeStart(start);
+  props.onSetRangeEnd(end);
+}
+
+function readTimeValue(value: unknown) {
+  if (typeof value === 'string') return value;
+  if (hasFormatMethod(value)) return value.format('HH:mm');
+  return '';
+}
 </script>
 
 <template>
   <Drawer
+    class="holiday-drawer-wrap"
     :open="props.open"
     :title="props.title"
-    :width="500"
-    :mask-closable="false"
-    :body-style="{ paddingBottom: '88px' }"
+    :width="480"
+    :mask-closable="true"
     @update:open="(value) => emit('update:open', value)"
   >
     <div class="form-block">
@@ -94,27 +141,26 @@ function getInputValue(event: Event) {
       </div>
 
       <template v-if="props.holidayForm.dateMode === 'single'">
-        <input
+        <DatePicker
           :value="props.holidayForm.singleDate"
-          type="date"
-          class="native-input"
-          @input="(event) => props.onSetSingleDate(getInputValue(event))"
+          value-format="YYYY-MM-DD"
+          format="YYYY-MM-DD"
+          :allow-clear="false"
+          class="native-picker"
+          input-read-only
+          @update:value="(value) => props.onSetSingleDate(readDateValue(value))"
         />
       </template>
       <template v-else>
         <div class="date-range-row">
-          <input
-            :value="props.holidayForm.rangeStart"
-            type="date"
-            class="native-input"
-            @input="(event) => props.onSetRangeStart(getInputValue(event))"
-          />
-          <span>~</span>
-          <input
-            :value="props.holidayForm.rangeEnd"
-            type="date"
-            class="native-input"
-            @input="(event) => props.onSetRangeEnd(getInputValue(event))"
+          <RangePicker
+            :value="getRangePickerValue()"
+            value-format="YYYY-MM-DD"
+            format="YYYY-MM-DD"
+            :allow-clear="false"
+            class="native-picker native-range-picker"
+            input-read-only
+            @update:value="handleRangeChange"
           />
         </div>
       </template>
@@ -128,42 +174,54 @@ function getInputValue(event: Event) {
       <div class="time-grid">
         <div class="form-block">
           <label class="form-sub-label">开始</label>
-          <input
+          <TimePicker
             :value="props.holidayForm.startTime"
-            type="time"
-            class="native-input"
-            @input="(event) => props.onSetStartTime(getInputValue(event))"
+            value-format="HH:mm"
+            format="HH:mm"
+            :allow-clear="false"
+            class="native-picker"
+            input-read-only
+            @update:value="
+              (value) => props.onSetStartTime(readTimeValue(value))
+            "
           />
         </div>
         <div class="form-block">
           <label class="form-sub-label">结束</label>
-          <input
+          <TimePicker
             :value="props.holidayForm.endTime"
-            type="time"
-            class="native-input"
-            @input="(event) => props.onSetEndTime(getInputValue(event))"
+            value-format="HH:mm"
+            format="HH:mm"
+            :allow-clear="false"
+            class="native-picker"
+            input-read-only
+            @update:value="(value) => props.onSetEndTime(readTimeValue(value))"
           />
         </div>
       </div>
+      <div class="time-hint">特殊营业日的营业时间段</div>
     </div>
 
     <div class="form-block">
       <label class="form-label required">原因</label>
-      <Input
+      <input
         :value="props.holidayForm.reason"
+        type="text"
+        class="native-input"
         placeholder="如：春节假期、情人节延长营业"
-        @update:value="props.onSetReason"
+        @input="(event) => props.onSetReason(getInputValue(event))"
       />
     </div>
 
     <div class="form-block">
       <label class="form-label">备注</label>
-      <Textarea
+      <textarea
         :value="props.holidayForm.remark"
-        :rows="2"
+        rows="2"
+        class="native-textarea"
         placeholder="可选"
-        @update:value="props.onSetRemark"
-      />
+        @input="(event) => props.onSetRemark(getInputValue(event))"
+      ></textarea>
     </div>
 
     <template #footer>