@yxhl/specter-pui-vtk 1.0.95 → 1.0.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yxhl/specter-pui-vtk",
-  "version": "1.0.95",
+  "version": "1.0.97",
   "description": "雅心互联 Vue 3 + Vuetify3 组件库",
   "type": "module",
   "main": "./dist/specter-pui.umd.js",

package/src/components/assembly/VtkDatePanelHeader.vue

@@ -0,0 +1,344 @@
+<template>
+  <div ref="headerRef" class="panel-header" @keydown.esc.stop="closePicker">
+    <button type="button" class="panel-nav" aria-label="上一周期" @click="handleNavigate('prev')">‹</button>
+
+    <div class="panel-title">
+      <button type="button" class="title-trigger" :class="{ active: openPicker === 'year' }"
+        :aria-expanded="openPicker === 'year'" aria-label="选择年份" @click.stop="togglePicker('year')">
+        {{ year }}年
+      </button>
+      <button v-if="showMonth" type="button" class="title-trigger month-trigger"
+        :class="{ active: openPicker === 'month' }" :aria-expanded="openPicker === 'month'" aria-label="选择月份"
+        @click.stop="togglePicker('month')">
+        {{ month + 1 }}月
+      </button>
+    </div>
+
+    <button type="button" class="panel-nav" aria-label="下一周期" @click="handleNavigate('next')">›</button>
+
+    <div v-if="openPicker" class="panel-popover" @click.stop>
+      <template v-if="openPicker === 'year'">
+        <div class="picker-navigation">
+          <button type="button" class="picker-nav" aria-label="上一组年份" @click="shiftYearPage(-YEAR_PAGE_SIZE)">
+            ‹
+          </button>
+          <span class="picker-range">{{ yearPage[0] }} - {{ yearPage[yearPage.length - 1] }}</span>
+          <button type="button" class="picker-nav" :disabled="!canShowNextYearPage" aria-label="下一组年份"
+            @click="shiftYearPage(YEAR_PAGE_SIZE)">
+            ›
+          </button>
+        </div>
+        <div class="picker-grid year-picker-grid">
+          <button v-for="item in yearPage" :key="item" type="button" class="picker-option"
+            :class="{ selected: item === year }" :disabled="isYearDisabled(item)" @click="selectYear(item)">
+            {{ item }}
+          </button>
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="picker-caption">{{ year }}年</div>
+        <div class="picker-grid month-picker-grid">
+          <button v-for="(item, index) in MONTHS" :key="item" type="button" class="picker-option"
+            :class="{ selected: index === month }" :disabled="isMonthDisabled(index)" @click="selectMonth(index)">
+            {{ item }}
+          </button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+defineOptions({
+  name: 'VtkDatePanelHeader',
+});
+
+const props = defineProps({
+  year: {
+    type: Number,
+    required: true
+  },
+  month: {
+    type: Number,
+    default: 0
+  },
+  showMonth: {
+    type: Boolean,
+    default: true
+  },
+  maxYear: {
+    type: Number,
+    default: null
+  },
+  maxMonth: {
+    type: Number,
+    default: 11
+  }
+});
+
+const emit = defineEmits(['update:year', 'update:month', 'prev', 'next']);
+
+const YEAR_PAGE_SIZE = 12;
+const YEAR_PAGE_CENTER_OFFSET = 4;
+const MONTHS = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+
+const getYearPageStart = (year) => year - YEAR_PAGE_CENTER_OFFSET;
+
+const openPicker = ref(null);
+const yearPageStart = ref(getYearPageStart(props.year));
+const headerRef = ref(null);
+
+const yearPage = computed(() =>
+  Array.from({ length: YEAR_PAGE_SIZE }, (_, index) => yearPageStart.value + index)
+);
+
+const canShowNextYearPage = computed(() =>
+  props.maxYear === null || yearPageStart.value + YEAR_PAGE_SIZE <= props.maxYear
+);
+
+const isYearDisabled = (year) => props.maxYear !== null && year > props.maxYear;
+
+const isMonthDisabled = (month) => {
+  if (props.maxYear === null || props.year < props.maxYear) return false;
+  if (props.year > props.maxYear) return true;
+  return month > props.maxMonth;
+};
+
+const togglePicker = (type) => {
+  if (openPicker.value === type) {
+    closePicker();
+    return;
+  }
+
+  if (type === 'year') {
+    yearPageStart.value = getYearPageStart(props.year);
+  }
+  openPicker.value = type;
+};
+
+const closePicker = () => {
+  openPicker.value = null;
+};
+
+const shiftYearPage = (offset) => {
+  const nextStart = yearPageStart.value + offset;
+  if (offset > 0 && props.maxYear !== null && nextStart > props.maxYear) return;
+  yearPageStart.value = nextStart;
+};
+
+const selectYear = (year) => {
+  if (isYearDisabled(year)) return;
+
+  emit('update:year', year);
+  if (props.showMonth) {
+    if (props.maxYear !== null && year === props.maxYear && props.month > props.maxMonth) {
+      emit('update:month', props.maxMonth);
+    }
+    openPicker.value = 'month';
+  } else {
+    closePicker();
+  }
+};
+
+const selectMonth = (month) => {
+  if (isMonthDisabled(month)) return;
+  emit('update:month', month);
+  closePicker();
+};
+
+const handleNavigate = (direction) => {
+  closePicker();
+  emit(direction);
+};
+
+const handleOutsideClick = (event) => {
+  if (openPicker.value && !headerRef.value?.contains(event.target)) {
+    closePicker();
+  }
+};
+
+watch(() => props.year, (year) => {
+  if (openPicker.value !== 'year') {
+    yearPageStart.value = getYearPageStart(year);
+  }
+});
+
+onMounted(() => document.addEventListener('click', handleOutsideClick));
+onBeforeUnmount(() => document.removeEventListener('click', handleOutsideClick));
+</script>
+
+<style scoped>
+.panel-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 30px;
+  margin-bottom: 4px;
+}
+
+.panel-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 112px;
+}
+
+.title-trigger,
+.panel-nav,
+.picker-nav,
+.picker-option {
+  border: 0;
+  outline: none;
+  font: inherit;
+}
+
+.title-trigger {
+  position: relative;
+  padding: 5px 17px 5px 7px;
+  border-radius: 5px;
+  background: transparent;
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  cursor: pointer;
+  transition: color 0.18s ease, background 0.18s ease;
+}
+
+.title-trigger::after {
+  position: absolute;
+  top: 10px;
+  right: 7px;
+  width: 5px;
+  height: 5px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  content: '';
+  transform: rotate(45deg);
+  transition: transform 0.18s ease;
+}
+
+.title-trigger:hover,
+.title-trigger.active {
+  background: rgb(var(--v-theme-primary), 0.1);
+  color: rgb(var(--v-theme-primary));
+}
+
+.title-trigger.active::after {
+  top: 12px;
+  transform: rotate(225deg);
+}
+
+.month-trigger {
+  margin-left: 1px;
+}
+
+.panel-nav,
+.picker-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  background: transparent;
+  color: rgb(var(--v-theme-on-surface), 0.55);
+  cursor: pointer;
+  transition: color 0.18s ease, background 0.18s ease;
+}
+
+.panel-nav {
+  width: 24px;
+  height: 24px;
+  font-size: 17px;
+}
+
+.panel-nav:hover,
+.picker-nav:hover:not(:disabled) {
+  background: rgb(var(--v-theme-on-surface), 0.08);
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.panel-popover {
+  position: absolute;
+  z-index: 5;
+  top: 34px;
+  left: 50%;
+  width: 204px;
+  padding: 10px;
+  border: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+  border-radius: 8px;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
+  transform: translateX(-50%);
+}
+
+.picker-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.picker-range,
+.picker-caption {
+  color: rgb(var(--v-theme-on-surface), 0.72);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.picker-caption {
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.picker-nav {
+  width: 24px;
+  height: 24px;
+  font-size: 16px;
+}
+
+.picker-nav:disabled {
+  color: rgb(var(--v-theme-on-surface), 0.22);
+  cursor: not-allowed;
+}
+
+.picker-grid {
+  display: grid;
+  gap: 6px;
+}
+
+.year-picker-grid,
+.month-picker-grid {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.picker-option {
+  min-width: 0;
+  padding: 7px 2px;
+  border-radius: 5px;
+  background: transparent;
+  color: rgb(var(--v-theme-on-surface), 0.82);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 0.18s ease, background 0.18s ease;
+}
+
+.picker-option:hover:not(:disabled) {
+  background: rgb(var(--v-theme-primary), 0.1);
+  color: rgb(var(--v-theme-primary));
+}
+
+.picker-option.selected {
+  background: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+  font-weight: 600;
+}
+
+.picker-option:disabled {
+  color: rgb(var(--v-theme-on-surface), 0.24);
+  cursor: not-allowed;
+}
+</style>

package/src/components/assembly/VtkDateSelector.vue

@@ -57,11 +57,8 @@
           <div v-if="mode === 'range'" class="dual-calendar">
             <!-- 左侧年份 -->
             <div class="calendar-panel">
-              <div class="calendar-header">
-                <button class="nav-btn-small" @click="prevYear">‹</button>
-                <span class="month-title">{{ currentYear }}年</span>
-                <button class="nav-btn-small" @click="nextYearLeft">›</button>
-              </div>
+              <VtkDatePanelHeader v-model:year="currentYear" :show-month="false"
+                :max-year="disableFuture ? todayYear : null" @prev="prevYear" @next="nextYearLeft" />
               <div class="month-grid">
                 <div v-for="(month, index) in monthList" :key="index"
                   :class="['month-item', { 'selected': isMonthSelected(index), 'in-range': isMonthInRange(index), 'disabled': isFutureMonth(index, currentYear) }]"
@@ -77,11 +74,8 @@
 
               <!-- 右侧年份 -->
               <div class="calendar-panel">
-                <div class="calendar-header">
-                  <button class="nav-btn-small" @click="prevYearRight">‹</button>
-                  <span class="month-title">{{ rightYear }}年</span>
-                  <button class="nav-btn-small" @click="nextYear">›</button>
-                </div>
+                <VtkDatePanelHeader v-model:year="rightYear" :show-month="false"
+                  :max-year="disableFuture ? todayYear : null" @prev="prevYearRight" @next="nextYear" />
                 <div class="month-grid">
                   <div v-for="(month, index) in monthList" :key="index"
                     :class="['month-item', { 'selected': isMonthSelectedRight(index), 'in-range': isMonthInRangeRight(index), 'disabled': isFutureMonth(index, rightYear) }]"
@@ -129,11 +123,9 @@
           <div v-if="mode === 'range'" class="dual-calendar">
             <!-- 左侧月份 -->
             <div class="calendar-panel">
-              <div class="calendar-header">
-                <button class="nav-btn-small" @click="prevMonth">‹</button>
-                <span class="month-title">{{ currentYear }}年{{ currentMonth + 1 }}月</span>
-                <button class="nav-btn-small" @click="nextMonthLeft">›</button>
-              </div>
+              <VtkDatePanelHeader v-model:year="currentYear" v-model:month="currentMonth"
+                :max-year="disableFuture ? todayYear : null" :max-month="todayMonth" @prev="prevMonth"
+                @next="nextMonthLeft" />
               <div class="week-header">
                 <div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
               </div>
@@ -158,11 +150,9 @@
 
               <!-- 右侧月份 -->
               <div class="calendar-panel">
-                <div class="calendar-header">
-                  <button class="nav-btn-small" @click="prevMonthRight">‹</button>
-                  <span class="month-title">{{ nextMonthYear }}年{{ nextMonthMonth + 1 }}月</span>
-                  <button class="nav-btn-small" @click="nextMonth">›</button>
-                </div>
+                <VtkDatePanelHeader v-model:year="rightYear" v-model:month="rightMonth"
+                  :max-year="disableFuture ? todayYear : null" :max-month="todayMonth" @prev="prevMonthRight"
+                  @next="nextMonth" />
                 <div class="week-header">
                   <div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
                 </div>
@@ -253,11 +243,8 @@
         <div v-if="mode === 'range'" class="dual-calendar">
           <!-- 左侧年份 -->
           <div class="calendar-panel">
-            <div class="calendar-header">
-              <button class="nav-btn-small" @click="prevYear">‹</button>
-              <span class="month-title">{{ currentYear }}年</span>
-              <button class="nav-btn-small" @click="nextYearLeft">›</button>
-            </div>
+            <VtkDatePanelHeader v-model:year="currentYear" :show-month="false"
+              :max-year="disableFuture ? todayYear : null" @prev="prevYear" @next="nextYearLeft" />
             <div class="month-grid">
               <div v-for="(month, index) in monthList" :key="index"
                 :class="['month-item', { 'selected': isMonthSelected(index), 'in-range': isMonthInRange(index), 'disabled': isFutureMonth(index, currentYear) }]"
@@ -273,11 +260,8 @@
 
             <!-- 右侧年份 -->
             <div class="calendar-panel">
-              <div class="calendar-header">
-                <button class="nav-btn-small" @click="prevYearRight">‹</button>
-                <span class="month-title">{{ rightYear }}年</span>
-                <button class="nav-btn-small" @click="nextYear">›</button>
-              </div>
+              <VtkDatePanelHeader v-model:year="rightYear" :show-month="false"
+                :max-year="disableFuture ? todayYear : null" @prev="prevYearRight" @next="nextYear" />
               <div class="month-grid">
                 <div v-for="(month, index) in monthList" :key="index"
                   :class="['month-item', { 'selected': isMonthSelectedRight(index), 'in-range': isMonthInRangeRight(index), 'disabled': isFutureMonth(index, rightYear) }]"
@@ -325,11 +309,9 @@
         <div v-if="mode === 'range'" class="dual-calendar">
           <!-- 左侧月份 -->
           <div class="calendar-panel">
-            <div class="calendar-header">
-              <button class="nav-btn-small" @click="prevMonth">‹</button>
-              <span class="month-title">{{ currentYear }}年{{ currentMonth + 1 }}月</span>
-              <button class="nav-btn-small" @click="nextMonthLeft">›</button>
-            </div>
+            <VtkDatePanelHeader v-model:year="currentYear" v-model:month="currentMonth"
+              :max-year="disableFuture ? todayYear : null" :max-month="todayMonth" @prev="prevMonth"
+              @next="nextMonthLeft" />
             <div class="week-header">
               <div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
             </div>
@@ -354,11 +336,9 @@
 
             <!-- 右侧月份 -->
             <div class="calendar-panel">
-              <div class="calendar-header">
-                <button class="nav-btn-small" @click="prevMonthRight">‹</button>
-                <span class="month-title">{{ nextMonthYear }}年{{ nextMonthMonth + 1 }}月</span>
-                <button class="nav-btn-small" @click="nextMonth">›</button>
-              </div>
+              <VtkDatePanelHeader v-model:year="rightYear" v-model:month="rightMonth"
+                :max-year="disableFuture ? todayYear : null" :max-month="todayMonth" @prev="prevMonthRight"
+                @next="nextMonth" />
               <div class="week-header">
                 <div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
               </div>
@@ -421,8 +401,9 @@
   </div>
 </template>
 
-<script setup>
-import { ref, computed, watch } from 'vue';
+<script setup>
+import { ref, computed, watch } from 'vue';
+import VtkDatePanelHeader from './VtkDatePanelHeader.vue';
 
 // 定义组件名称
 defineOptions({
@@ -598,14 +579,14 @@ const formatDisplay = (value) => {
 };
 
 // 年份列表（显示12年）
-const yearList = computed(() => {
-  // 年份面板打开时，以当前锚点年份为中心生成 12 个年份选项
-  const startYear = currentYear.value - YEAR_PANEL_CENTER_OFFSET;
-  return Array.from({ length: YEAR_PANEL_SIZE }, (_, i) => startYear + i);
-});
-
-// 周列表
-const weekList = computed(() => {
+const yearList = computed(() => {
+  // 年份面板打开时，以当前锚点年份为中心生成 12 个年份选项
+  const startYear = currentYear.value - YEAR_PANEL_CENTER_OFFSET;
+  return Array.from({ length: YEAR_PANEL_SIZE }, (_, i) => startYear + i);
+});
+
+// 周列表
+const weekList = computed(() => {
   const weeks = [];
   const firstDay = new Date(currentYear.value, currentMonth.value, 1);
   const lastDay = new Date(currentYear.value, currentMonth.value + 1, 0);
@@ -1095,55 +1076,76 @@ const changeViewMode = (mode) => {
   viewMode.value = mode;
 };
 
-// 面板操作
-const initializePicker = () => {
-  if (props.displayMode === 'year' && props.mode === 'single') {
-    currentYear.value = todayYear;
-  }
-
-  tempValue.value = selectedValue.value ?
-    (Array.isArray(selectedValue.value) ? [...selectedValue.value] : selectedValue.value) :
-    (props.mode === 'range' ? [] : null);
-  viewMode.value = props.displayMode;
-
-  if (props.displayMode === 'month') {
-    rightYear.value = currentYear.value + 1;
-  } else {
-    if (currentMonth.value === 11) {
-      rightYear.value = currentYear.value + 1;
-      rightMonth.value = 0;
-    } else {
-      rightYear.value = currentYear.value;
-      rightMonth.value = currentMonth.value + 1;
-    }
-  }
-};
-
-watch(showPicker, (isOpen) => {
+// 面板操作
+const parseCalendarValue = (value) => {
+  if (typeof value !== 'string') return null;
+
+  const match = value.match(/^(\d{4})(?:-(\d{2}))?/);
+  if (!match) return null;
+
+  const month = match[2] ? Number(match[2]) - 1 : null;
+  return {
+    year: Number(match[1]),
+    month: month !== null && month >= 0 && month <= 11 ? month : null
+  };
+};
+
+const setRightPanelToNextMonth = () => {
+  if (currentMonth.value === 11) {
+    rightYear.value = currentYear.value + 1;
+    rightMonth.value = 0;
+  } else {
+    rightYear.value = currentYear.value;
+    rightMonth.value = currentMonth.value + 1;
+  }
+};
+
+const syncCalendarPanels = () => {
+  const values = Array.isArray(selectedValue.value) ? selectedValue.value : [selectedValue.value];
+  const start = parseCalendarValue(values[0]);
+  const end = parseCalendarValue(values[1]);
+
+  if (start) {
+    currentYear.value = start.year;
+    if (start.month !== null) currentMonth.value = start.month;
+  }
+
+  if (props.displayMode === 'year') return;
+
+  if (props.displayMode === 'month') {
+    rightYear.value = end && end.year !== currentYear.value ? end.year : currentYear.value + 1;
+    return;
+  }
+
+  const endUsesDifferentMonth = end && end.month !== null &&
+    (end.year !== currentYear.value || end.month !== currentMonth.value);
+
+  if (props.mode === 'range' && endUsesDifferentMonth) {
+    rightYear.value = end.year;
+    rightMonth.value = end.month;
+  } else {
+    setRightPanelToNextMonth();
+  }
+};
+
+const initializePicker = () => {
+  tempValue.value = selectedValue.value ?
+    (Array.isArray(selectedValue.value) ? [...selectedValue.value] : selectedValue.value) :
+    (props.mode === 'range' ? [] : null);
+  viewMode.value = props.displayMode;
+  syncCalendarPanels();
+};
+
+watch(showPicker, (isOpen) => {
   if (isOpen) {
-    initializePicker();
-  }
-});
-if (props.inline) {
-  // 内联模式下直接初始化
-  tempValue.value = selectedValue.value ?
-    (Array.isArray(selectedValue.value) ? [...selectedValue.value] : selectedValue.value) :
-    (props.mode === 'range' ? [] : null);
-  viewMode.value = props.displayMode;
-
-  // 初始化右侧日历/年份
-  if (props.displayMode === 'month') {
-    rightYear.value = currentYear.value + 1;
-  } else {
-    if (currentMonth.value === 11) {
-      rightYear.value = currentYear.value + 1;
-      rightMonth.value = 0;
-    } else {
-      rightYear.value = currentYear.value;
-      rightMonth.value = currentMonth.value + 1;
-    }
-  }
-}
+    initializePicker();
+  }
+});
+
+watch(() => props.modelValue, (newValue) => {
+  selectedValue.value = newValue;
+  if (props.inline) initializePicker();
+}, { immediate: true });
 
 const closePicker = () => {
   showPicker.value = false;
@@ -1181,11 +1183,7 @@ const handleConfirm = () => {
   }
 };
 
-// 监听外部值变化
-watch(() => props.modelValue, (newValue) => {
-  selectedValue.value = newValue;
-}, { immediate: true });
-</script>
+</script>
 
 <style scoped>
 .vtk-date-selector {
@@ -1320,42 +1318,8 @@ watch(() => props.modelValue, (newValue) => {
   max-width: 340px;
 }
 
-.calendar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 0;
-  margin-bottom: 4px;
-}
-
-.month-title {
-  font-size: 12px;
-  font-weight: 500;
-  color: rgb(var(--v-theme-on-surface));
-}
-
-.nav-btn-small {
-  border: none;
-  background: none;
-  font-size: 14px;
-  color: rgb(var(--v-theme-on-surface), 0.6);
-  cursor: pointer;
-  padding: 2px 4px;
-  border-radius: 4px;
-  transition: background 0.2s;
-}
-
-.nav-btn-small:hover {
-  background: rgb(var(--v-theme-on-surface), 0.08);
-}
-
-.nav-btn-small.invisible {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.year-grid,
-.month-grid {
+.year-grid,
+.month-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 6px;