@yxhl/specter-pui-vtk 1.0.96 → 1.0.97

package/package.json

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

package/src/components/assembly/VtkDatePanelHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="panel-header" @keydown.esc.stop="closePicker">
+  <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">
@@ -50,7 +50,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 defineOptions({
   name: 'VtkDatePanelHeader',
@@ -89,6 +89,7 @@ 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)
@@ -153,11 +154,20 @@ const handleNavigate = (direction) => {
   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>

package/src/components/assembly/VtkDateSelector.vue

@@ -1076,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;
@@ -1162,11 +1183,7 @@ const handleConfirm = () => {
   }
 };
 
-// 监听外部值变化
-watch(() => props.modelValue, (newValue) => {
-  selectedValue.value = newValue;
-}, { immediate: true });
-</script>
+</script>
 
 <style scoped>
 .vtk-date-selector {
@@ -1301,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;