misp-ui-library-test 0.0.1

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

@@ -0,0 +1,441 @@
+<template>
+  <div v-clickoutside="handleClose" class="ui-timepicker-date-pane">
+    <!-- 头部：显示年月 -->
+    <div class="pane-header">
+      <span class="switch-button year-up" @click="handleYearChange(-1)">
+        <i class="ui-icon-d-arrow-left" />
+      </span>
+      <span class="switch-button month-up" @click="handleMonthChange(-1)">
+        <i class="ui-icon-arrow-left" />
+      </span>
+
+      <span class="year-month">{{ currentYear }}年 {{ currentMonth + 1 }}月</span>
+
+      <span class="switch-button year-down" @click="handleMonthChange(1)">
+        <i class="ui-icon-arrow-right" />
+      </span>
+      <span class="switch-button month-down" @click="handleYearChange(1)">
+        <i class="ui-icon-d-arrow-right" />
+      </span>
+    </div>
+
+    <!-- 星期标题 -->
+    <div class="week-days">
+      <span v-for="(day, index) in weekDays" :key="index" class="week-day-item">
+        {{ day }}
+      </span>
+    </div>
+
+    <!-- 日期网格 -->
+    <div class="date-grid">
+      <div
+        v-for="(item, index) in calendarList"
+        :key="item.date.getTime()"
+        class="date-cell"
+        :class="{
+          'is-other-month': item.type !== 'current',
+          'in-range': isInRange(item.date),
+          'start-date': isStartDate(item.date),
+          'end-date': isEndDate(item.date),
+        }"
+        @click="handleSelectDay(item)"
+        @mouseenter="handleHoverDay(item)"
+      >
+        <div
+          class="date-cell__inner"
+          :class="{
+            'is-selected': isSelectedDay(item),
+            'is-today': isToday(item),
+          }"
+        >
+          {{ item.day }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import clickoutside from '../../../../directives/clickoutside/index.js'
+
+/**
+ * 日期选择面板组件
+ * 用于展示日历网格，支持单选日期模式和范围选择模式。
+ * 提供年月切换、日期高亮（选中、今天、范围内）以及交互事件发射。
+ *
+ * @component
+ */
+export default {
+  name: 'UiTimePickerDatePane',
+  props: {
+    /**
+     * 当前选中的日期值（单选模式下使用）
+     * @type {Date}
+     * @default null
+     */
+    value: {
+      type: Date,
+      default: null,
+    },
+    /**
+     * 选择模式
+     * - 'date': 单选日期
+     * - 'range': 范围选择
+     * @type {'date' | 'range'}
+     * @default 'date'
+     */
+    mode: {
+      type: String,
+      default: 'date',
+    },
+    readonly: Boolean,
+    /**
+     * 已选中的日期范围数组 [startDate, endDate]
+     * 仅在 mode 为 'range' 时有效
+     * @type {Date[]}
+     * @default []
+     */
+    range: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 鼠标悬停的日期
+     * 用于在范围选择模式下动态显示预选范围
+     * @type {Date}
+     * @default null
+     */
+    hoverDate: {
+      type: Date,
+      default: null,
+    },
+    /**
+     * 外部控制的视图日期（当前显示的年月）
+     * 如果未提供，组件将使用内部状态或默认当前时间
+     * @type {Date}
+     * @default null
+     */
+    viewDate: {
+      type: Date,
+      default: null,
+    },
+  },
+  data: () => ({
+    /**
+     * 星期几的显示标签
+     * @type {string[]}
+     */
+    weekDays: ['日', '一', '二', '三', '四', '五', '六'],
+    /**
+     * 内部维护的视图日期状态
+     * @type {Date|null}
+     */
+    innerViewDate: null,
+  }),
+  computed: {
+    /**
+     * 获取最终有效的视图日期
+     * 优先级：外部传入的 viewDate > 内部 innerViewDate > 当前系统时间
+     * @returns {Date}
+     */
+    effectiveViewDate() {
+      return this.viewDate || this.innerViewDate || new Date()
+    },
+    /**
+     * 当前视图的年份
+     * @returns {number}
+     */
+    currentYear() {
+      return this.effectiveViewDate.getFullYear()
+    },
+    /**
+     * 当前视图的月份 (0-11)
+     * @returns {number}
+     */
+    currentMonth() {
+      return this.effectiveViewDate.getMonth()
+    },
+    /**
+     * 生成日历网格数据列表
+     * 包含上月末尾、本月全部、下月开头的日期，总共 42 个单元格（6行7列）
+     * @returns {Array<{ day: number, type: 'prev'|'current'|'next', date: Date }>}
+     */
+    calendarList() {
+      const list = []
+      const year = this.currentYear
+      const month = this.currentMonth
+
+      const firstDayOfWeek = new Date(year, month, 1).getDay()
+      const daysInCurrentMonth = new Date(year, month + 1, 0).getDate()
+      const daysInPrevMonth = new Date(year, month, 0).getDate()
+
+      // 填充上个月的剩余天数
+      for (let i = firstDayOfWeek - 1; i >= 0; i--) {
+        list.push({
+          day: daysInPrevMonth - i,
+          type: 'prev',
+          date: new Date(year, month - 1, daysInPrevMonth - i),
+        })
+      }
+      // 填充当月天数
+      for (let i = 1; i <= daysInCurrentMonth; i++) {
+        list.push({
+          day: i,
+          type: 'current',
+          date: new Date(year, month, i),
+        })
+      }
+      // 填充下个月的天数以补足 42 格
+      const remainingCells = 42 - list.length
+      for (let i = 1; i <= remainingCells; i++) {
+        list.push({
+          day: i,
+          type: 'next',
+          date: new Date(year, month + 1, i),
+        })
+      }
+      return list
+    },
+  },
+  watch: {
+    /**
+     * 监听外部 viewDate 变化，同步到内部视图状态
+     * @param {Date} newVal - 新的视图日期
+     */
+    viewDate: {
+      handler(newVal) {
+        if (newVal) {
+          this.innerViewDate = new Date(newVal)
+        }
+      },
+      immediate: true,
+    },
+    /**
+     * 监听单选值变化，如果是 date 模式且没有外部控制视图，则自动调整视图到选中日期
+     * @param {Date} newVal - 新的选中日期
+     */
+    value: {
+      handler(newVal) {
+        if (newVal && this.mode === 'date' && !this.viewDate) {
+          this.innerViewDate = new Date(newVal)
+        }
+      },
+      immediate: true,
+    },
+    /**
+     * 监听范围选择值变化，如果是 range 模式且没有外部控制视图，则自动调整视图到起始日期
+     * @param {Date[]} newVal - 新的范围数组
+     */
+    range: {
+      handler(newVal) {
+        if (newVal && newVal.length > 0 && this.mode === 'range' && !this.viewDate && !this.innerViewDate) {
+          this.innerViewDate = new Date(newVal[0])
+        }
+      },
+      immediate: true,
+    },
+  },
+  directives: { clickoutside },
+  mounted() {
+    // 初始化默认视图为当前时间
+    if (!this.innerViewDate) {
+      this.innerViewDate = new Date()
+    }
+  },
+  methods: {
+    /**
+     * 滚动初始化钩子（预留接口，当前无具体实现）
+     */
+    scrollInit() {},
+    handleClose(mouseup, mousedown) {
+      // 获取点击的元素
+      const target = mousedown.target
+      // 获取点击的元素是否在父触发器内
+      const clickParentTrigger = this.$parent.$el.contains(target)
+      !clickParentTrigger && this.$emit('close')
+    },
+
+    /**
+     * 处理年份切换
+     * @param {number} offset - 年份偏移量，-1 为上一年，1 为下一年
+     * @emits view-change - 当视图日期改变时发射，携带新的视图日期
+     */
+    handleYearChange(offset) {
+      if (this.readonly) return
+      const newDate = new Date(this.effectiveViewDate)
+      newDate.setFullYear(newDate.getFullYear() + offset)
+      this.innerViewDate = newDate
+      this.$emit('view-change', newDate)
+    },
+
+    /**
+     * 处理月份切换
+     * @param {number} offset - 月份偏移量，-1 为上一月，1 为下一月
+     * @emits view-change - 当视图日期改变时发射，携带新的视图日期
+     */
+    handleMonthChange(offset) {
+      if (this.readonly) return
+      const newDate = new Date(this.effectiveViewDate)
+      newDate.setMonth(newDate.getMonth() + offset)
+      this.innerViewDate = newDate
+      this.$emit('view-change', newDate)
+    },
+
+    /**
+     * 获取范围选择的边界日期
+     * 根据已选中的范围和鼠标悬停状态动态计算起始和结束日期
+     * @returns {{ start: Date, end: Date } | null} 返回起止日期对象，如果无法构成范围则返回 null
+     */
+    getRangeBoundaries() {
+      if (this.mode !== 'range') return null
+
+      // 固定的起始点（通常是用户点击的第一个日期）
+      const fixedDate = this.range && this.range[0] ? this.range[0] : null
+      let dynamicDate = null
+
+      // 动态结束点：优先使用已确认选择的结束日期，其次使用鼠标悬停的日期
+      if (this.range && this.range[1]) {
+        dynamicDate = this.range[1]
+      } else if (this.hoverDate) {
+        dynamicDate = this.hoverDate
+      }
+
+      // 如果缺少起始点或动态点，无法构成范围
+      if (!fixedDate || !dynamicDate) return null
+
+      const time1 = fixedDate.getTime()
+      const time2 = dynamicDate.getTime()
+
+      // 确保 start 总是早于或等于 end
+      if (time1 <= time2) {
+        return { start: fixedDate, end: dynamicDate }
+      } else {
+        return { start: dynamicDate, end: fixedDate }
+      }
+    },
+
+    /**
+     * 判断某个日期单元格是否被选中
+     * 在 range 模式下，选中状态指起始或结束日期；在 date 模式下，指与 value 相同
+     * @param {{ date: Date }} item - 日历单元格数据项
+     * @returns {boolean}
+     */
+    isSelectedDay(item) {
+      if (this.mode === 'range') {
+        return this.isStartDate(item.date) || this.isEndDate(item.date)
+      }
+      if (!this.value) return false
+      return this.isSameDate(item.date, this.value)
+    },
+
+    /**
+     * 判断某个日期是否是今天
+     * @param {{ date: Date }} item - 日历单元格数据项
+     * @returns {boolean}
+     */
+    isToday(item) {
+      const today = new Date()
+      return this.isSameDate(item.date, today)
+    },
+
+    /**
+     * 判断某个日期是否在选中范围内
+     * @param {Date} date - 待判断的日期
+     * @returns {boolean}
+     */
+    isInRange(date) {
+      const boundaries = this.getRangeBoundaries()
+      if (!boundaries) return false
+
+      const targetTime = date.getTime()
+
+      // 创建 Start 边界的标准化时间 (00:00:00.000)
+      const startTime = new Date(boundaries.start)
+      startTime.setHours(0, 0, 0, 0)
+
+      // 创建 End 边界的标准化时间 (23:59:59.999)
+      const endTime = new Date(boundaries.end)
+      endTime.setHours(23, 59, 59, 999)
+
+      return targetTime >= startTime.getTime() && targetTime <= endTime.getTime()
+    },
+
+    /**
+     * 判断某个日期是否是范围的起始日期
+     * @param {Date} date - 待判断的日期
+     * @returns {boolean}
+     */
+    isStartDate(date) {
+      const boundaries = this.getRangeBoundaries()
+      if (!boundaries) return false
+      return this.isSameDate(date, boundaries.start)
+    },
+
+    /**
+     * 判断某个日期是否是范围的结束日期
+     * @param {Date} date - 待判断的日期
+     * @returns {boolean}
+     */
+    isEndDate(date) {
+      const boundaries = this.getRangeBoundaries()
+      if (!boundaries) return false
+      return this.isSameDate(date, boundaries.end)
+    },
+
+    /**
+     * 判断两个日期是否表示同一天（忽略时间部分）
+     * @param {Date} d1 - 第一个日期
+     * @param {Date} d2 - 第二个日期
+     * @returns {boolean}
+     */
+    isSameDate(d1, d2) {
+      if (!d1 || !d2) return false
+      return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate()
+    },
+
+    /**
+     * 处理日期单元格点击事件
+     * 根据模式发射 input 或 pick 事件，并在点击非当前月日期时切换视图
+     * @param {{ date: Date, type: string }} item - 被点击的单元格数据
+     * @emits input - 在 date 模式下，发射选中的日期
+     * @emits pick - 在所有模式下，发射选中的日期（用于范围选择的中间状态）
+     * @emits view-change - 当点击非当前月日期导致视图切换时发射
+     */
+    handleSelectDay(item) {
+      if (this.readonly) return;
+
+      const clickedDate = item.date
+      if (this.mode === 'date') {
+        // 如果点击的是非当前月的日期，先切换视图
+        if (item.type !== 'current') {
+          this.innerViewDate = new Date(clickedDate)
+          this.$emit('view-change', this.innerViewDate)
+        }
+        this.$emit('input', clickedDate)
+        this.$emit('pick', clickedDate)
+      } else {
+        // 范围选择模式
+        if (item.type !== 'current') {
+          this.innerViewDate = new Date(clickedDate)
+          this.$emit('view-change', this.innerViewDate)
+        }
+        this.$emit('pick', clickedDate)
+      }
+    },
+
+    /**
+     * 处理日期单元格鼠标悬停事件
+     * 仅在 range 模式下发射 hover 事件，用于更新动态范围显示
+     * @param {{ date: Date }} item - 悬停的单元格数据
+     * @emits hover - 发射悬停的日期
+     */
+    handleHoverDay(item) {
+      if (this.mode === 'range') {
+        this.$emit('hover', item.date)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,260 @@
+<template>
+  <div v-clickoutside="handleClose" :class="['ui-timepicker-time-pane', arrowControl ? 'is-arrow-control' : '']">
+    <!-- 向上箭头 -->
+    <div v-if="arrowControl" class="ui-timepicker-time-pane__arrow arrow-up">
+      <ui-button v-if="showHour" class="hour-arrow" textual @click.stop="handleArrowClick('hour', -1)">
+        <i class="ui-icon-arrow-up" />
+      </ui-button>
+      <ui-button v-if="showMinute" class="minute-arrow" textual @click.stop="handleArrowClick('minute', -1)">
+        <i class="ui-icon-arrow-up" />
+      </ui-button>
+      <ui-button v-if="showSecond" class="second-arrow" textual @click.stop="handleArrowClick('second', -1)">
+        <i class="ui-icon-arrow-up" />
+      </ui-button>
+    </div>
+
+    <!-- 小时列 -->
+    <div v-if="showHour" ref="hourCol" class="ui-timepicker-time-pane__column" @scroll="handleScroll('hour', $event)">
+      <ul class="ui-timepicker-time-pane__list">
+        <li v-for="item in hours" :key="item" class="ui-timepicker-time-pane__item" :class="{ 'is-selected': item === currentHour }" @click="handleItemClick('hour', item)">
+          {{ formatTime(item) }}
+        </li>
+      </ul>
+      <div class="ui-timepicker-time-pane__mask" />
+    </div>
+
+    <!-- 分钟列 -->
+    <div v-if="showMinute" ref="minuteCol" class="ui-timepicker-time-pane__column" @scroll="handleScroll('minute', $event)">
+      <ul class="ui-timepicker-time-pane__list">
+        <li v-for="item in minutes" :key="item" class="ui-timepicker-time-pane__item" :class="{ 'is-selected': item === currentMinute }" @click="handleItemClick('minute', item)">
+          {{ formatTime(item) }}
+        </li>
+      </ul>
+      <div class="ui-timepicker-time-pane__mask" />
+    </div>
+
+    <!-- 秒数列 -->
+    <div v-if="showSecond" ref="secondCol" class="ui-timepicker-time-pane__column" @scroll="handleScroll('second', $event)">
+      <ul class="ui-timepicker-time-pane__list">
+        <li v-for="item in seconds" :key="item" class="ui-timepicker-time-pane__item" :class="{ 'is-selected': item === currentSecond }" @click="handleItemClick('second', item)">
+          {{ formatTime(item) }}
+        </li>
+      </ul>
+      <div class="ui-timepicker-time-pane__mask" />
+    </div>
+
+    <!-- 向下箭头 -->
+    <div v-if="arrowControl" class="ui-timepicker-time-pane__arrow arrow-down">
+      <ui-button v-if="showHour" class="hour-arrow" textual @click.stop="handleArrowClick('hour', 1)">
+        <i class="ui-icon-arrow-down" />
+      </ui-button>
+      <ui-button v-if="showMinute" class="minute-arrow" textual @click.stop="handleArrowClick('minute', 1)">
+        <i class="ui-icon-arrow-down" />
+      </ui-button>
+      <ui-button v-if="showSecond" class="second-arrow" textual @click.stop="handleArrowClick('second', 1)">
+        <i class="ui-icon-arrow-down" />
+      </ui-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import UiButton from '../../../button/src/main.vue'
+
+import clickoutside from '../../../../directives/clickoutside/index.js'
+
+const formatTime = (num) => (num < 10 ? `0${num}` : `${num}`)
+
+export default {
+  name: 'UiTimePickerTimePane',
+  components: { UiButton },
+  props: {
+    value: {
+      type: Date,
+    },
+    type: {
+      type: String,
+      default: 'hour-minute-second',
+    },
+    readonly: Boolean,
+    arrowControl: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      hours: Array.from({ length: 24 }, (_, i) => i),
+      minutes: Array.from({ length: 60 }, (_, i) => i),
+      seconds: Array.from({ length: 60 }, (_, i) => i),
+      timers: {},
+    }
+  },
+  computed: {
+    showHour() {
+      return this.type.includes('hour')
+    },
+    showMinute() {
+      return this.type.includes('minute')
+    },
+    showSecond() {
+      return this.type.includes('second')
+    },
+    currentHour() {
+      return this.value ? this.value.getHours() : 0
+    },
+    currentMinute() {
+      return this.value ? this.value.getMinutes() : 0
+    },
+    currentSecond() {
+      return this.value ? this.value.getSeconds() : 0
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (!val) return
+        this.$nextTick(this.scrollInit)
+      },
+      immediate: true,
+    },
+  },
+  directives: { clickoutside },
+  mounted() {
+    this.$nextTick(this.scrollInit)
+  },
+  updated() {
+    this.$nextTick(this.scrollInit)
+  },
+  methods: {
+    formatTime,
+    handleClose(mouseup, mousedown) {
+      // 获取点击的元素
+      const target = mousedown.target
+      // 获取点击的元素是否在父触发器内
+      const clickParentTrigger = this.$parent.$el.contains(target)
+      !clickParentTrigger && this.$emit('close', mouseup, mousedown)
+    },
+
+    /**
+     * 处理箭头点击事件
+     * @param {string} type - 'hour', 'minute', or 'second'
+     * @param {number} step - -1 for up, 1 for down
+     */
+    handleArrowClick(type, step) {
+      let currentValue = 0
+      let max = 59
+
+      if (type === 'hour') {
+        currentValue = this.currentHour
+        max = 23
+      } else if (type === 'minute') {
+        currentValue = this.currentMinute
+      } else if (type === 'second') {
+        currentValue = this.currentSecond
+      }
+
+      // 计算新值，处理循环
+      let newValue = currentValue + step
+      if (newValue < 0) {
+        newValue = max
+      } else if (newValue > max) {
+        newValue = 0
+      }
+
+      // 更新值
+      this.updateValue(type, newValue)
+
+      // 滚动到对应位置
+      this.scrollToPosition(type, newValue)
+    },
+
+    /**
+     * 处理点击列表项事件
+     * @param {string} type - 'hour', 'minute', or 'second'
+     * @param {number} index - 点击的时间值
+     */
+    handleItemClick(type, index) {
+      this.updateValue(type, index)
+      this.scrollToPosition(type, index)
+    },
+
+    /**
+     * 获取单个列表项的高度
+     * @param {string} type - 'hour', 'minute', or 'second'
+     * @returns {number} 元素高度，如果未找到则返回默认值 32
+     */
+    getItemHeight(type) {
+      let refName = ''
+      if (type === 'hour') refName = 'hourCol'
+      if (type === 'minute') refName = 'minuteCol'
+      if (type === 'second') refName = 'secondCol'
+
+      const colEl = this.$refs[refName]
+      if (colEl) {
+        const firstItem = colEl.querySelector('.ui-timepicker-time-pane__item')
+        if (firstItem) {
+          return firstItem.offsetHeight
+        }
+      }
+      return 32
+    },
+
+    scrollInit() {
+      this.scrollToPosition('hour', this.currentHour)
+      this.scrollToPosition('minute', this.currentMinute)
+      this.scrollToPosition('second', this.currentSecond)
+    },
+
+    scrollToPosition(type, value) {
+      let refName = ''
+      if (type === 'hour') refName = 'hourCol'
+      if (type === 'minute') refName = 'minuteCol'
+      if (type === 'second') refName = 'secondCol'
+
+      const el = this.$refs[refName]
+      if (!el) return
+
+      const itemHeight = this.getItemHeight(type)
+      const targetScrollTop = value * itemHeight
+
+      if (el.scrollTop !== targetScrollTop) {
+        el.scrollTop = targetScrollTop
+      }
+    },
+
+    handleScroll(type, event) {
+      const el = event.target
+      if (this.timers[type]) clearTimeout(this.timers[type])
+
+      this.timers[type] = setTimeout(() => {
+        const scrollTop = el.scrollTop
+        const itemHeight = this.getItemHeight(type)
+
+        if (itemHeight <= 0) return
+
+        let index = Math.round(scrollTop / itemHeight)
+        const maxIndex = type === 'hour' ? 23 : 59
+
+        if (index < 0) index = 0
+        if (index > maxIndex) index = maxIndex
+
+        el.scrollTop = index * itemHeight
+        this.updateValue(type, index)
+      }, 50)
+    },
+
+    updateValue(type, index) {
+      const time = this.value || new Date(new Date().setHours(0, 0, 0, 0))
+      const date = new Date(time.getTime())
+      if (type === 'hour') date.setHours(index)
+      if (type === 'minute') date.setMinutes(index)
+      if (type === 'second') date.setSeconds(index)
+
+      !this.readonly && this.$emit('input', date)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>