@yxhl/specter-pui-vtk 1.0.97 → 1.0.98

package/src/components/assembly/VtkTimePicker.vue

@@ -0,0 +1,775 @@
+<template>
+  <div class="vtk-time-picker">
+    <VMenu
+      v-if="!inline"
+      v-model="showPicker"
+      :attach="menuAttach"
+      :location="menuLocation"
+      :origin="menuOrigin"
+      :width="menuWidth"
+      :min-width="menuWidth"
+      offset="4"
+      :close-on-content-click="false"
+    >
+      <template #activator="{ props: menuProps }">
+        <div class="time-input">
+          <VTextField
+            :model-value="displayValue"
+            :label="label || undefined"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            density="compact"
+            variant="outlined"
+            hide-details
+            readonly
+            v-bind="menuProps"
+            :clearable="clearable && !!displayValue && !disabled"
+            clear-icon="mdi-close-circle"
+            persistent-clear
+            class="time-input-field"
+            @click:clear.stop="clearValue"
+          >
+            <template #append-inner>
+              <VIcon size="16" class="time-icon">mdi-clock-outline</VIcon>
+            </template>
+          </VTextField>
+        </div>
+      </template>
+
+      <div class="time-picker-dropdown" :class="{ 'range-mode': isRange }" @click.stop @mousedown.stop>
+        <template v-if="isRange">
+          <div class="range-input-row">
+            <div class="range-time-wrap" :class="{ active: activeTimeSide === 'start' }">
+              <button class="range-time-input" type="button" @click="openRangeTime('start')">
+                {{ formatTimePart(tempRange[0]) || defaultStartTime }}
+              </button>
+              <div v-if="activeTimeSide === 'start'" class="range-time-popover">
+                <div class="time-columns compact">
+                  <div class="time-column">
+                    <button
+                      v-for="hour in hourOptions"
+                      :key="hour"
+                      type="button"
+                      :class="['time-item', { selected: hour === activeRangeHour, disabled: isRangeTimeDisabled('start', 'hour', hour) }]"
+                      @click="selectRangeTime('hour', hour)"
+                    >
+                      {{ padTime(hour) }}
+                    </button>
+                  </div>
+                  <div class="time-column">
+                    <button
+                      v-for="minute in minuteOptions"
+                      :key="minute"
+                      type="button"
+                      :class="['time-item', { selected: minute === activeRangeMinute, disabled: isRangeTimeDisabled('start', 'minute', minute) }]"
+                      @click="selectRangeTime('minute', minute)"
+                    >
+                      {{ padTime(minute) }}
+                    </button>
+                  </div>
+                  <div v-if="showSeconds" class="time-column">
+                    <button
+                      v-for="second in secondOptions"
+                      :key="second"
+                      type="button"
+                      :class="['time-item', { selected: second === activeRangeSecond, disabled: isRangeTimeDisabled('start', 'second', second) }]"
+                      @click="selectRangeTime('second', second)"
+                    >
+                      {{ padTime(second) }}
+                    </button>
+                  </div>
+                </div>
+                <div class="time-popover-footer">
+                  <button class="btn btn-text small" type="button" @click="activeTimeSide = null">取消</button>
+                  <button class="btn btn-primary small" type="button" @click="activeTimeSide = null">确定</button>
+                </div>
+              </div>
+            </div>
+
+            <span class="range-arrow">›</span>
+
+            <div class="range-time-wrap" :class="{ active: activeTimeSide === 'end' }">
+              <button class="range-time-input" type="button" @click="openRangeTime('end')">
+                {{ formatTimePart(tempRange[1]) || defaultEndTime }}
+              </button>
+              <div v-if="activeTimeSide === 'end'" class="range-time-popover">
+                <div class="time-columns compact">
+                  <div class="time-column">
+                    <button
+                      v-for="hour in hourOptions"
+                      :key="hour"
+                      type="button"
+                      :class="['time-item', { selected: hour === activeRangeHour, disabled: isRangeTimeDisabled('end', 'hour', hour) }]"
+                      @click="selectRangeTime('hour', hour)"
+                    >
+                      {{ padTime(hour) }}
+                    </button>
+                  </div>
+                  <div class="time-column">
+                    <button
+                      v-for="minute in minuteOptions"
+                      :key="minute"
+                      type="button"
+                      :class="['time-item', { selected: minute === activeRangeMinute, disabled: isRangeTimeDisabled('end', 'minute', minute) }]"
+                      @click="selectRangeTime('minute', minute)"
+                    >
+                      {{ padTime(minute) }}
+                    </button>
+                  </div>
+                  <div v-if="showSeconds" class="time-column">
+                    <button
+                      v-for="second in secondOptions"
+                      :key="second"
+                      type="button"
+                      :class="['time-item', { selected: second === activeRangeSecond, disabled: isRangeTimeDisabled('end', 'second', second) }]"
+                      @click="selectRangeTime('second', second)"
+                    >
+                      {{ padTime(second) }}
+                    </button>
+                  </div>
+                </div>
+                <div class="time-popover-footer">
+                  <button class="btn btn-text small" type="button" @click="activeTimeSide = null">取消</button>
+                  <button class="btn btn-primary small" type="button" @click="activeTimeSide = null">确定</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <template v-else>
+          <div class="single-time-panel">
+            <div class="time-columns">
+              <div class="time-column">
+                <button
+                  v-for="hour in hourOptions"
+                  :key="hour"
+                  type="button"
+                  :class="['time-item', { selected: hour === selectedHour, disabled: isTimePartDisabled(hour, selectedMinute, selectedSecond) }]"
+                  @click="selectHour(hour)"
+                >
+                  {{ padTime(hour) }}
+                </button>
+              </div>
+              <div class="time-column">
+                <button
+                  v-for="minute in minuteOptions"
+                  :key="minute"
+                  type="button"
+                  :class="['time-item', { selected: minute === selectedMinute, disabled: isTimePartDisabled(selectedHour, minute, selectedSecond) }]"
+                  @click="selectMinute(minute)"
+                >
+                  {{ padTime(minute) }}
+                </button>
+              </div>
+              <div v-if="showSeconds" class="time-column">
+                <button
+                  v-for="second in secondOptions"
+                  :key="second"
+                  type="button"
+                  :class="['time-item', { selected: second === selectedSecond, disabled: isTimePartDisabled(selectedHour, selectedMinute, second) }]"
+                  @click="selectSecond(second)"
+                >
+                  {{ padTime(second) }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <div class="picker-footer">
+          <button v-if="!isRange" class="btn btn-text" type="button" @click="handleNow">此刻</button>
+          <button v-if="isRange" class="btn btn-text" type="button" @click="clearTempRange">清空</button>
+          <span class="footer-spacer"></span>
+          <button class="btn btn-text" type="button" @click="handleCancel">取消</button>
+          <button class="btn btn-primary" type="button" :disabled="!canConfirm" @click="handleConfirm">确定</button>
+        </div>
+      </div>
+    </VMenu>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+defineOptions({
+  name: 'VtkTimePicker',
+});
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Date, Number, Array],
+    default: null
+  },
+  mode: {
+    type: String,
+    default: 'single',
+    validator: (value) => ['single', 'range'].includes(value)
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: '请选择时间'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  format: {
+    type: String,
+    default: 'HH:mm:ss'
+  },
+  valueFormat: {
+    type: String,
+    default: 'HH:mm:ss'
+  },
+  separator: {
+    type: String,
+    default: ' 至 '
+  },
+  min: {
+    type: String,
+    default: null
+  },
+  max: {
+    type: String,
+    default: null
+  },
+  minuteStep: {
+    type: Number,
+    default: 1
+  },
+  secondStep: {
+    type: Number,
+    default: 1
+  },
+  showSeconds: {
+    type: Boolean,
+    default: true
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  },
+  placement: {
+    type: String,
+    default: 'left',
+    validator: (value) => ['left', 'right'].includes(value)
+  },
+  noTeleport: {
+    type: Boolean,
+    default: false
+  },
+  onCancel: {
+    type: Function,
+    default: null
+  },
+  onConfirm: {
+    type: Function,
+    default: null
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'cancel', 'confirm']);
+
+const showPicker = ref(false);
+const selectedTime = ref(null);
+const selectedRange = ref([]);
+const tempRange = ref([null, null]);
+const selectedHour = ref(0);
+const selectedMinute = ref(0);
+const selectedSecond = ref(0);
+const activeTimeSide = ref(null);
+
+const defaultStartTime = '00:00:00';
+const defaultEndTime = '23:59:59';
+
+const isRange = computed(() => props.mode === 'range');
+const menuAttach = computed(() => (props.noTeleport ? true : false));
+const menuLocation = computed(() => props.placement === 'right' ? 'bottom end' : 'bottom start');
+const menuOrigin = computed(() => props.placement === 'right' ? 'top end' : 'top start');
+const menuWidth = computed(() => isRange.value ? 320 : (props.showSeconds ? 216 : 150));
+const minTime = computed(() => parseTime(props.min));
+const maxTime = computed(() => parseTime(props.max));
+const hourOptions = computed(() => Array.from({ length: 24 }, (_, index) => index));
+const minuteOptions = computed(() => buildStepOptions(props.minuteStep));
+const secondOptions = computed(() => buildStepOptions(props.secondStep));
+
+const displayValue = computed(() => {
+  if (isRange.value) {
+    if (!selectedRange.value.length) return '';
+    const [start, end] = selectedRange.value;
+    return [start, end].filter(Boolean).map(date => formatByPattern(date, props.format)).join(props.separator);
+  }
+  return selectedTime.value ? formatByPattern(selectedTime.value, props.format) : '';
+});
+
+const canConfirm = computed(() => {
+  if (isRange.value) {
+    const [start, end] = tempRange.value;
+    if (!start || !end) return false;
+    if (start > end) return false;
+    return !isTimeDisabled(start.getHours(), start.getMinutes(), start.getSeconds())
+      && !isTimeDisabled(end.getHours(), end.getMinutes(), end.getSeconds());
+  }
+  return !isTimeDisabled(selectedHour.value, selectedMinute.value, props.showSeconds ? selectedSecond.value : 0);
+});
+
+const activeRangeDate = computed(() => {
+  return activeTimeSide.value === 'end' ? tempRange.value[1] : tempRange.value[0];
+});
+
+const activeRangeHour = computed(() => activeRangeDate.value ? activeRangeDate.value.getHours() : 0);
+const activeRangeMinute = computed(() => activeRangeDate.value ? activeRangeDate.value.getMinutes() : 0);
+const activeRangeSecond = computed(() => activeRangeDate.value ? activeRangeDate.value.getSeconds() : 0);
+
+const buildStepOptions = (step) => {
+  const normalizedStep = Number.isFinite(step) && step > 0 ? Math.max(1, Math.floor(step)) : 1;
+  const options = [];
+  for (let value = 0; value < 60; value += normalizedStep) {
+    options.push(value);
+  }
+  return options;
+};
+
+const padTime = (value) => String(value).padStart(2, '0');
+
+const formatByPattern = (date, pattern) => {
+  if (!(date instanceof Date) || Number.isNaN(date.getTime())) return '';
+  const replacements = {
+    HH: padTime(date.getHours()),
+    mm: padTime(date.getMinutes()),
+    ss: padTime(date.getSeconds())
+  };
+  return Object.keys(replacements).reduce((result, token) => {
+    return result.replace(new RegExp(token, 'g'), replacements[token]);
+  }, pattern);
+};
+
+const formatTimePart = (date) => date ? formatByPattern(date, props.showSeconds ? 'HH:mm:ss' : 'HH:mm') : '';
+
+const parseTime = (value) => {
+  if (!value && value !== 0) return null;
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) return null;
+    return new Date(2000, 0, 1, value.getHours(), value.getMinutes(), value.getSeconds());
+  }
+  if (typeof value === 'number') {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return null;
+    return new Date(2000, 0, 1, date.getHours(), date.getMinutes(), date.getSeconds());
+  }
+  if (typeof value !== 'string') return null;
+
+  const match = value.trim().match(/(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?/);
+  if (!match) return null;
+  const [, hour, minute, second = '0'] = match;
+  const date = new Date(2000, 0, 1, Math.min(23, Number(hour)), Math.min(59, Number(minute)), Math.min(59, Number(second)));
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+
+const parseRangeValue = (value) => {
+  if (Array.isArray(value)) return value.map(parseTime).filter(Boolean).slice(0, 2);
+  if (typeof value === 'string' && value.includes(props.separator)) {
+    return value.split(props.separator).map(item => parseTime(item.trim())).filter(Boolean).slice(0, 2);
+  }
+  return [];
+};
+
+const toModelValue = (date) => {
+  if (!date) return null;
+  if (props.valueFormat === 'timestamp') return date.getTime();
+  if (props.valueFormat === 'Date') return new Date(date.getTime());
+  return formatByPattern(date, props.valueFormat);
+};
+
+const toModelRange = (range) => range.map(date => toModelValue(date));
+
+const buildTempTime = (hour = selectedHour.value, minute = selectedMinute.value, second = selectedSecond.value) => {
+  return new Date(2000, 0, 1, hour, minute, props.showSeconds ? second : 0);
+};
+
+const isTimeDisabled = (hour, minute, second) => {
+  const date = new Date(2000, 0, 1, hour, minute, props.showSeconds ? second : 0);
+  if (minTime.value && date < minTime.value) return true;
+  if (maxTime.value && date > maxTime.value) return true;
+  return false;
+};
+
+const isTimePartDisabled = (hour, minute, second) => isTimeDisabled(hour, minute, second);
+
+const isRangeTimeDisabled = (side, part, value) => {
+  const index = side === 'end' ? 1 : 0;
+  const otherIndex = 1 - index;
+  const current = tempRange.value[index];
+  const other = tempRange.value[otherIndex];
+  const hour = part === 'hour' ? value : (current ? current.getHours() : 0);
+  const minute = part === 'minute' ? value : (current ? current.getMinutes() : 0);
+  const second = part === 'second' ? value : (current ? current.getSeconds() : 0);
+  const date = new Date(2000, 0, 1, hour, minute, props.showSeconds ? second : 0);
+  if (side === 'start') {
+    if (other && date > other) return true;
+    if (maxTime.value && date > maxTime.value) return true;
+  } else {
+    if (other && date < other) return true;
+    if (minTime.value && date < minTime.value) return true;
+  }
+  return false;
+};
+
+const selectHour = (hour) => {
+  if (isTimePartDisabled(hour, selectedMinute.value, selectedSecond.value)) return;
+  selectedHour.value = hour;
+};
+
+const selectMinute = (minute) => {
+  if (isTimePartDisabled(selectedHour.value, minute, selectedSecond.value)) return;
+  selectedMinute.value = minute;
+};
+
+const selectSecond = (second) => {
+  if (isTimePartDisabled(selectedHour.value, selectedMinute.value, second)) return;
+  selectedSecond.value = second;
+};
+
+const openRangeTime = (side) => {
+  activeTimeSide.value = side;
+  const index = side === 'start' ? 0 : 1;
+  if (!tempRange.value[index]) {
+    const base = new Date(2000, 0, 1);
+    base.setHours(side === 'start' ? 0 : 23, side === 'start' ? 0 : 59, props.showSeconds ? (side === 'start' ? 0 : 59) : 0, 0);
+    tempRange.value[index] = base;
+  }
+};
+
+const selectRangeTime = (part, value) => {
+  const index = activeTimeSide.value === 'end' ? 1 : 0;
+  const date = tempRange.value[index] ? new Date(tempRange.value[index].getTime()) : new Date(2000, 0, 1);
+  if (part === 'hour') date.setHours(value);
+  if (part === 'minute') date.setMinutes(value);
+  if (part === 'second') date.setSeconds(value);
+  if (!props.showSeconds) date.setSeconds(0);
+  date.setMilliseconds(0);
+  tempRange.value[index] = date;
+};
+
+const setSingleFromTime = (date) => {
+  if (!date) return;
+  selectedHour.value = date.getHours();
+  selectedMinute.value = date.getMinutes();
+  selectedSecond.value = date.getSeconds();
+};
+
+const initializePicker = () => {
+  if (isRange.value) {
+    tempRange.value = selectedRange.value.length ? selectedRange.value.map(date => new Date(date.getTime())) : [null, null];
+    activeTimeSide.value = null;
+    return;
+  }
+  setSingleFromTime(selectedTime.value || new Date());
+};
+
+const closePicker = () => {
+  showPicker.value = false;
+  activeTimeSide.value = null;
+};
+
+const clearTempRange = () => {
+  tempRange.value = [null, null];
+  activeTimeSide.value = null;
+};
+
+const clearValue = () => {
+  if (isRange.value) {
+    selectedRange.value = [];
+    tempRange.value = [null, null];
+    emit('update:modelValue', []);
+    emit('change', []);
+  } else {
+    selectedTime.value = null;
+    emit('update:modelValue', null);
+    emit('change', null);
+  }
+};
+
+const confirm = () => {
+  if (!canConfirm.value) return;
+  if (isRange.value) {
+    selectedRange.value = tempRange.value.map(date => new Date(date.getTime()));
+    const modelValue = toModelRange(selectedRange.value);
+    emit('update:modelValue', modelValue);
+    emit('change', modelValue);
+    closePicker();
+    return;
+  }
+  const nextValue = buildTempTime();
+  selectedTime.value = nextValue;
+  const modelValue = toModelValue(nextValue);
+  emit('update:modelValue', modelValue);
+  emit('change', modelValue);
+  closePicker();
+};
+
+const handleCancel = () => {
+  if (props.onCancel) {
+    props.onCancel();
+  } else {
+    emit('cancel');
+    closePicker();
+  }
+};
+
+const handleConfirm = () => {
+  const value = isRange.value ? toModelRange(tempRange.value) : toModelValue(buildTempTime());
+  if (props.onConfirm) {
+    props.onConfirm(value);
+  } else {
+    emit('confirm', value);
+    confirm();
+  }
+};
+
+const handleNow = () => {
+  const now = new Date();
+  if (isTimeDisabled(now.getHours(), now.getMinutes(), now.getSeconds())) return;
+  setSingleFromTime(now);
+};
+
+watch(showPicker, (isOpen) => {
+  if (isOpen) initializePicker();
+});
+
+watch(() => props.modelValue, (newValue) => {
+  if (isRange.value) {
+    selectedRange.value = parseRangeValue(newValue);
+  } else {
+    selectedTime.value = parseTime(newValue);
+  }
+}, { immediate: true });
+</script>
+
+<style scoped>
+.vtk-time-picker {
+  position: relative;
+  width: 100%;
+}
+
+.time-input {
+  width: 100%;
+}
+
+.time-input-field {
+  cursor: pointer;
+}
+
+:deep(.time-input-field .v-field),
+:deep(.time-input-field input) {
+  cursor: pointer;
+}
+
+.time-icon {
+  margin-left: 8px;
+  color: rgb(var(--v-theme-on-surface), 0.6);
+}
+
+.time-picker-dropdown {
+  background: rgb(var(--v-theme-surface));
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+  overflow: visible;
+}
+
+.time-picker-dropdown.range-mode {
+  width: 320px;
+  min-width: 320px;
+  max-width: 320px;
+}
+
+.time-picker-dropdown:not(.range-mode) {
+  width: 100%;
+  min-width: 100%;
+  max-width: none;
+}
+
+.time-columns {
+  display: flex;
+  height: 260px;
+}
+
+.time-columns.compact {
+  height: 192px;
+}
+
+.time-column {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+  border-right: 1px solid rgb(var(--v-theme-on-surface), 0.08);
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.time-column::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.time-column:last-child {
+  border-right: none;
+}
+
+.time-item {
+  width: 100%;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: rgb(var(--v-theme-on-surface));
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s;
+}
+
+.time-item:hover {
+  background: rgb(var(--v-theme-on-surface), 0.08);
+}
+
+.time-item.selected {
+  color: rgb(var(--v-theme-primary));
+  font-weight: 600;
+  background: rgb(var(--v-theme-primary), 0.1);
+}
+
+.time-item.disabled {
+  color: rgb(var(--v-theme-on-surface), 0.26) !important;
+  background: rgb(var(--v-theme-on-surface), 0.04) !important;
+  cursor: not-allowed !important;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.single-time-panel {
+  padding: 8px 0;
+}
+
+.range-input-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  gap: 10px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+  box-sizing: border-box;
+}
+
+.range-time-wrap {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.range-time-input {
+  width: 124px;
+  height: 32px;
+  border: 1px solid rgb(var(--v-theme-on-surface), 0.16);
+  border-radius: 4px;
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 13px;
+  text-align: left;
+  padding: 0 12px;
+  outline: none;
+  cursor: pointer;
+}
+
+.range-time-input.active,
+.range-time-input:focus {
+  border-color: rgb(var(--v-theme-primary));
+}
+
+.range-arrow {
+  flex: 0 0 16px;
+  width: 16px;
+  text-align: center;
+  color: rgb(var(--v-theme-on-surface), 0.6);
+  font-size: 22px;
+}
+
+.range-time-popover {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  width: 190px;
+  z-index: 2;
+  background: rgb(var(--v-theme-surface));
+  border: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
+
+.time-popover-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 10px;
+  border-top: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+}
+
+.picker-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-top: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+}
+
+.footer-spacer {
+  flex: 1;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+  outline: none;
+}
+
+.btn.small {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.btn-text {
+  background: none;
+  color: rgb(var(--v-theme-primary));
+}
+
+.btn-text:hover:not(:disabled) {
+  background: rgb(var(--v-theme-on-surface), 0.08);
+}
+
+.btn-primary {
+  background: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+}
+
+.btn-primary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+</style>