misp-ui-library-test 0.0.1

package/src/packages/time-picker/src/main.vue

@@ -0,0 +1,321 @@
+<template>
+  <div
+    :class="[
+      'ui-time-picker',
+      visibleType === 'time' ? 'is-time' : '',
+      visibleType === 'date' ? 'is-date' : '',
+      visibleType === 'datetime' || visibleType === 'timestamp' ? 'is-datetime' : '',
+      visibleType === 'date-range' ? 'is-date-range' : '',
+      visibleType === 'datetime-range' || visibleType === 'timestamp-range' ? 'is-datetime-range' : '',
+    ]"
+  >
+    <ui-popover v-if="['time', 'date', 'date-range'].includes(visibleType)" ref="mainPopover" :placement="placement" :trigger="disabled ? 'manual' : 'focus'" @show="handleFocus" @hide="handleBlur">
+      <template slot="reference">
+        <time-range-input v-if="isRange" v-model="dateRange" :format="formatType" :separator="separator" :compact="compact" :config="inputProps" @clear="clearDateRange" />
+        <time-input v-else v-model="dateValue" :format="formatType" :compact="compact" v-bind="inputProps" @clear="clearDate" />
+      </template>
+      <div>
+        <time-pane v-if="visibleType === 'time'" ref="paneRef" v-model="dateValue" :format="formatTypeIgnoreRange" :readonly="readonly" :arrow-control="timeArrowControl" />
+        <date-range-pane v-else-if="isRange" ref="paneRef" v-model="dateRange" :format="formatTypeIgnoreRange" :readonly="readonly" />
+        <date-pane v-else ref="paneRef" v-model="dateValue" :format="formatTypeIgnoreRange" :readonly="readonly" />
+      </div>
+    </ui-popover>
+    <ui-popover v-else ref="mainPopover" :placement="placement" :visible.sync="paneVisible" trigger="manual" @show="handleFocus" @hide="handleBlur" >
+      <template slot="reference">
+        <time-range-input v-if="isRange" v-model="dateRange" :format="formatType" :separator="separator" :compact="compact" :config="inputProps" @focus="handleTriggerFocus" @clear="clearDateRange" />
+        <time-input v-else v-model="dateValue" :format="formatType" :compact="compact" v-bind="inputProps" @focus="handleTriggerFocus" @clear="clearDate" />
+      </template>
+      <div>
+        <date-time-range-pane v-if="isRange" ref="paneRef" v-model="dateRange" :format="formatTypeIgnoreRange" :readonly="readonly" :arrow-control="timeArrowControl" @close="closeEdit" />
+        <date-time-pane v-else ref="paneRef" v-model="dateValue" :format="formatTypeIgnoreRange" :readonly="readonly" :arrow-control="timeArrowControl" @close="closeEdit" />
+      </div>
+    </ui-popover>
+  </div>
+</template>
+
+<script>
+import UiInput from '../../input/src/main.vue'
+import UiPopover from '../../popover/src/main.vue'
+import TimePane from './pane/time.vue'
+import DatePane from './pane/date.vue'
+import DateRangePane from './pane/date-range.vue'
+import DateTimePane from './pane/date-time.vue'
+import DateTimeRangePane from './pane/date-time-range.vue'
+import TimeInput from './time-input.vue'
+import TimeRangeInput from './time-range-input.vue'
+
+import clickoutside from '../../../directives/clickoutside/index.js'
+import { formatDate } from '../../../utils/moment/index.js'
+import { formatterType, classifyFormat, getRangeSeparator } from './date-utils.js'
+import { isArray, isNaN, isEqual } from '../../../utils/lodash/index.js'
+
+/**
+ * 转换时间，将输入值转换为 Date 对象
+ * 如果输入为空或非法，返回 null，避免隐式转换为当前时间导致的数据污染
+ * @param {*} time
+ * @returns {Date|null}
+ */
+function timeToDateType(time) {
+  // 处理空值
+  if (time === null || time === undefined || time === '') {
+    return null
+  }
+  
+  // 尝试创建日期对象
+  const date = new Date(time)
+  
+  // 检查是否为 Invalid Date
+  if (isNaN(date.getTime())) {
+    return null
+  }
+  
+  return date
+}
+
+export default {
+  name: 'UiTimePicker',
+  components: {
+    UiInput,
+    UiPopover,
+    TimePane,
+    DatePane,
+    DateRangePane,
+    DateTimePane,
+    DateTimeRangePane,
+    TimeInput,
+    TimeRangeInput,
+  },
+  props: {
+    value: {},
+    format: { type: String, default: '' },
+    valueFormat: { type: String, default: 'YYYY-MM-DD HH:mm:ss' },
+    readonly: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    startPlaceholder: String,
+    endPlaceholder: String,
+    prefixIcon: String,
+    clearable: Boolean,
+    size: String,
+    compact: { type: Boolean, default: true },
+    placement: { type: String, default: 'bottom' },
+    timeArrowControl: Boolean,
+  },
+  data: () => ({
+    timeVisibleStr: '', // 展示在控件上的时间字符串，根据 format 格式化
+    paneVisible: false,
+    dateValue: null, // 单值时间 Date
+    dateRange: [], // 时间范围 Date[]
+    isInternalUpdate: false, // 内部更新标记
+  }),
+  computed: {
+    // 时间展示格式规整，缺省与 valueFormat 一致
+    formatType() {
+      return formatterType(this.format || this.valueFormat)
+    },
+    // 去除 -range，timestamp 转标准年月日时分秒，标识时间格式或范围格式，用于控制面板
+    formatTypeIgnoreRange() {
+      return this.formatType.replace('timestamp', 'YYYY-MM-DD HH:mm:ss').replace('-range', '')
+    },
+    // 可视化时间类型（业务类型）
+    visibleType() {
+      return classifyFormat(this.formatType)
+    },
+    // 是否为范围时间选择
+    isRange() {
+      return this.formatType.includes('range')
+    },
+    // value 时间格式规整
+    valueFormatType() {
+      return formatterType(this.valueFormat)
+    },
+    // 输出时间格式规整，去除 -range
+    outputType() {
+      return this.valueFormatType.replace('-range', '')
+    },
+    // 提取范围时间分隔符
+    separator() {
+      return getRangeSeparator(this.format || this.valueFormat)
+    },
+    showClear() {
+      if (this.isRange) {
+        const [d1, d2] = this.dateRange
+        return d1 && !isNaN(d1.getTime()) && d2 && !isNaN(d2.getTime())
+      } else {
+        const d = this.dateValue
+        return d && !isNaN(d.getTime())
+      }
+    },
+    inputProps() {
+      return {
+        readonly: this.readonly || false,
+        disabled: this.disabled || false,
+        placeholder: this.placeholder || '',
+        startPlaceholder: this.startPlaceholder || '',
+        endPlaceholder: this.endPlaceholder || '',
+        prefixIcon: this.prefixIcon === undefined ? (this.visibleType === 'time' ? 'ui-icon-time' : 'ui-icon-date') : (this.prefixIcon || ''),
+        clearable: (this.clearable && this.showClear) || false,
+        size: this.size || '',
+      }
+    },
+  },
+  directives: { clickoutside },
+  watch: {
+    value: {
+      handler(val) {
+        if (this.isInternalUpdate) return
+
+        let nextDateValue = null
+        let nextDateRange = []
+        
+        if (this.isRange && isArray(val)) {
+          if (val.length === 2) {
+            nextDateRange = [timeToDateType(val[0]), timeToDateType(val[1])]
+          }
+
+          // 比较时间对象是否相同
+          const isRangeChanged = this.dateRange.length !== nextDateRange.length || 
+            nextDateRange.some((d, i) => {
+              const oldD = this.dateRange[i]
+              // 如果一个是 null 一个不是，或者都不是 null 但时间不同
+              if (!d && !oldD) return false
+              if (!d || !oldD) return true
+              return d.getTime() !== oldD.getTime()
+            })
+
+          if (isRangeChanged) {
+            this.dateRange = nextDateRange
+          }
+        } else if (!isArray(val) && val != null) {
+          nextDateValue = timeToDateType(val)
+          
+          // 安全比较
+          const oldVal = this.dateValue
+          const newVal = nextDateValue
+          
+          let hasChanged = false
+          if (!oldVal && !newVal) hasChanged = false
+          else if (!oldVal || !newVal) hasChanged = true
+          else hasChanged = oldVal.getTime() !== newVal.getTime()
+
+          if (hasChanged) {
+            this.dateValue = nextDateValue
+          }
+        } else {
+          if (this.dateValue !== null) {
+            this.dateValue = null
+          }
+          if (this.dateRange.length > 0) {
+            this.dateRange = []
+          }
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+    dateValue(val) {
+      // 如果是内部更新，跳过 emit
+      if (this.isInternalUpdate) return
+
+      let outputVal = undefined
+      let shouldEmit = false
+
+      if (!this.isRange && val) {
+        if (this.outputType === 'timestamp') {
+          outputVal = val.getTime()
+        } else {
+          outputVal = formatDate(val, this.outputType)
+        }
+        
+        // 只有当值真正改变时才 emit
+        if (outputVal !== this.value) {
+          shouldEmit = true
+        }
+      } else if (!val && this.value) {
+        // 从有值变为无值
+        outputVal = undefined
+        shouldEmit = true
+      }
+
+      shouldEmit && this.handleEmit(outputVal)
+    },
+    dateRange: {
+      handler(range) {
+        // 如果是内部更新，跳过 emit
+        if (this.isInternalUpdate) return
+
+        let outputVal = []
+        let shouldEmit = false
+
+        if (this.isRange && isArray(range) && range[0] && range[1]) {
+          if (this.outputType === 'timestamp') {
+            outputVal = [range[0].getTime(), range[1].getTime()]
+          } else {
+            outputVal = [formatDate(range[0], this.outputType), formatDate(range[1], this.outputType)]
+          }
+
+          // 使用 lodash isEqual 进行深比较，避免引用不同但内容相同导致的重复 emit
+          if (!isEqual(this.value, outputVal)) {
+            shouldEmit = true
+          }
+        } else if ((!range || range.length === 0) && this.value) {
+          // 从有值变为无值 (空数组)
+          outputVal = []
+          // 如果原值不是空数组，则需要 emit
+          if (!(isArray(this.value) && this.value.length === 0)) {
+             shouldEmit = true
+          }
+        }
+
+        shouldEmit && this.handleEmit(outputVal)
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    paneScrollInit() {
+      this.$nextTick(() => {
+        // 增加安全检查，防止 ref 不存在时报错
+        if (this.$refs.paneRef && typeof this.$refs.paneRef.scrollInit === 'function') {
+          this.$refs.paneRef.scrollInit()
+        }
+      })
+    },
+    handleTriggerFocus() {
+      if (this.disabled) return
+      this.paneVisible = true
+    },
+    closeEdit() {
+      this.paneVisible = false
+    },
+    clearDateRange() {
+      this.$emit('input', [])
+    },
+    clearDate() {
+      this.$emit('input', null)
+    },
+    focus() {
+      this.$refs?.mainPopover?.referenceElm?.focus()
+    },
+    blur() {
+      this.$refs?.mainPopover?.referenceElm?.blur()
+    },
+    handleFocus() {
+      this.focus()
+      this.paneScrollInit()
+      this.$emit('focus')
+    },
+    handleBlur() {
+      this.$emit('blur')
+    },
+    handleEmit(val) {
+      this.isInternalUpdate = true
+      this.$emit('input', val)
+      this.$emit('change', val)
+      this.$nextTick(() => {
+        this.isInternalUpdate = false
+      })
+    },
+  },
+}
+</script>

package/src/packages/time-picker/src/pane/date-range.vue

@@ -0,0 +1,193 @@
+<template>
+  <div v-clickoutside="handleClose" class="ui-timepicker-date-range-pane">
+    <!-- 左面板 -->
+    <ui-time-picker-date-pane
+    mode="range"
+      :view-date="leftViewDate"
+      :range="displayRange"
+      :hover-date="hoverDate"
+      :value="null"
+      :readonly="readonly"
+      @pick="handlePick"
+      @hover="handleHover"
+      @view-change="handleLeftViewChange"
+    />
+    <!-- 右面板 -->
+    <ui-time-picker-date-pane
+      mode="range"
+      :view-date="rightViewDate"
+      :range="displayRange"
+      :hover-date="hoverDate"
+      :value="null"
+      :readonly="readonly"
+      @pick="handlePick"
+      @hover="handleHover"
+      @view-change="handleRightViewChange"
+    />
+  </div>
+</template>
+
+<script>
+import UiTimePickerDatePane from './date.vue'
+
+import clickoutside from '../../../../directives/clickoutside/index.js'
+
+export default {
+  name: 'UiTimePickerDateRangePane',
+  components: {
+    UiTimePickerDatePane,
+  },
+  props: {
+    value: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    readonly: Boolean,
+  },
+  data() {
+    return {
+      // 左侧面板的视图日期
+      leftViewDate: new Date(),
+      // 选择状态
+      selecting: false,
+      tempStart: null,
+      hoverDate: null,
+    }
+  },
+  computed: {
+    // 【关键修改】右侧面板始终显示左侧面板的下一月
+    rightViewDate() {
+      const d = new Date(this.leftViewDate)
+      d.setMonth(d.getMonth() + 1)
+      return d
+    },
+    // 传递给子组件的范围数据
+    displayRange() {
+      if (this.selecting && this.tempStart) {
+        // 正在选择时，返回 [起点, 空]，子组件会结合 hoverDate 显示预览
+        return [this.tempStart, null]
+      }
+      return this.value
+    },
+  },
+  watch: {
+    // 监听外部 value 变化，重置选择状态并调整视图
+    value: {
+      handler(newVal) {
+        if (newVal && newVal.length === 2) {
+          this.selecting = false
+          this.tempStart = null
+          this.hoverDate = null
+        } else if (!newVal || newVal.length === 0) {
+          this.selecting = false
+          this.tempStart = null
+          this.hoverDate = null
+        }
+      },
+      immediate: true,
+    },
+  },
+  directives: { clickoutside },
+  methods: {
+    scrollInit() {
+      // 初始化，将视图跳转到选中范围的起始月份
+      const startDate = this.value[0] || new Date()
+      this.leftViewDate = new Date(startDate)
+    },
+
+    /**
+     * 辅助函数：判断两个日期是否在同一个月
+     */
+    isSameMonth(d1, d2) {
+      if (!d1 || !d2) return false
+      return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth()
+    },
+
+    /**
+     * 处理日期点击
+     */
+    handlePick(date) {
+      if (!this.selecting) {
+        // 第一步：选择起点
+        this.selecting = true
+        this.tempStart = date
+        this.hoverDate = date
+      } else {
+        // 第二步：选择终点
+        let start = this.tempStart
+        let end = date
+
+        // 确保 start <= end
+        if (start.getTime() > end.getTime()) {
+          ;[start, end] = [end, start]
+        }
+
+        const newRange = [start, end]
+        this.$emit('input', newRange)
+        this.$emit('pick', newRange)
+
+        // 重置选择状态
+        this.selecting = false
+        this.tempStart = null
+        this.hoverDate = null
+
+        // 【核心修改】智能调整视图
+        // 获取当前的右面板视图月份
+        const currentRightView = this.rightViewDate
+
+        // 如果结束日期 (end) 落在当前右面板显示的月份内
+        // 则保持左面板视图不变，这样右面板也保持不变，用户能直接看到刚才选的结束日期
+        if (this.isSameMonth(end, currentRightView)) {
+          // 不做任何操作，保持 this.leftViewDate 不变
+          return
+        }
+
+        // 其他情况（例如结束日期不在当前右面板月份，或者跨了多个月等）
+        // 恢复默认行为：让左面板显示开始日期的月份，以便完整展示范围起点
+        this.leftViewDate = new Date(start)
+      }
+    },
+
+    /**
+     * 处理鼠标悬停
+     */
+    handleHover(date) {
+      if (this.selecting) {
+        this.hoverDate = date
+      }
+    },
+    handleClose(mouseup, mousedown) {
+      // 获取点击的元素
+      const target = mousedown.target
+      // 获取点击的元素是否在父触发器内
+      const clickParentTrigger = this.$parent.$el.contains(target)
+      !clickParentTrigger && this.$emit('close')
+    },
+
+    /**
+     * 左面板视图改变
+     * 直接更新 leftViewDate，rightViewDate 会通过 computed 自动更新
+     */
+    handleLeftViewChange(date) {
+      this.leftViewDate = date
+    },
+
+    /**
+     * 右面板视图改变
+     * 当用户在右面板点击“上个月”或“下个月”时，
+     * 我们需要反向推算出 leftViewDate 应该是多少。
+     *
+     * 右面板显示的是 rightViewDate (即 left + 1)
+     * 如果右面板变成了 newDate，那么左面板应该变成 newDate - 1
+     */
+    handleRightViewChange(date) {
+      const newLeftDate = new Date(date)
+      newLeftDate.setMonth(newLeftDate.getMonth() - 1)
+      this.leftViewDate = newLeftDate
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>