@yxhl/specter-pui-vtk 1.0.74 → 1.0.75

package/package.json

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

package/src/components/assembly/VtkDateSelector.vue

@@ -1,19 +1,33 @@
 <template>
   <div class="vtk-date-selector" ref="selectorRef">
-    <div v-if="!inline" class="date-input" ref="inputRef" @click="togglePicker">
-      <input type="text" :value="displayValue" :placeholder="placeholder" :disabled="disabled" readonly
-        class="date-input-field" />
-      <span class="date-icon" aria-hidden="true">
-        <svg viewBox="0 0 24 24" fill="none" class="date-icon-svg">
-          <path
-            d="M7 2.75a.75.75 0 0 1 .75.75V5h8.5V3.5a.75.75 0 0 1 1.5 0V5h.75A2.5 2.5 0 0 1 21 7.5v10A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5v-10A2.5 2.5 0 0 1 5.5 5h.75V3.5A.75.75 0 0 1 7 2.75ZM4.5 10v7.5c0 .552.448 1 1 1h13c.552 0 1-.448 1-1V10h-15Zm1-3.5c-.552 0-1 .448-1 1v1h15v-1c0-.552-.448-1-1-1h-.75v1a.75.75 0 0 1-1.5 0v-1h-8.5v1a.75.75 0 0 1-1.5 0v-1H5.5Zm2.25 5.75a.75.75 0 0 1 .75.75v.25a.75.75 0 0 1-1.5 0V13a.75.75 0 0 1 .75-.75Zm4.25 0a.75.75 0 0 1 .75.75v.25a.75.75 0 0 1-1.5 0V13a.75.75 0 0 1 .75-.75Zm4.25 0a.75.75 0 0 1 .75.75v.25a.75.75 0 0 1-1.5 0V13a.75.75 0 0 1 .75-.75Zm-8.5 3.75a.75.75 0 0 1 .75.75V17a.75.75 0 0 1-1.5 0v-.25a.75.75 0 0 1 .75-.75Zm4.25 0a.75.75 0 0 1 .75.75V17a.75.75 0 0 1-1.5 0v-.25a.75.75 0 0 1 .75-.75Z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-      <span v-if="displayValue && !disabled" class="clear-icon" @click.stop="clearValue">✕</span>
+    <div v-if="!inline" class="date-input" ref="inputRef">
+      <VTextField
+        :model-value="displayValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        density="compact"
+        variant="outlined"
+        hide-details
+        readonly
+        :clearable="!!displayValue && !disabled"
+        clear-icon="mdi-close-circle"
+        persistent-clear
+        class="date-input-field"
+        @click="togglePicker"
+        @click:clear.stop="clearValue"
+      >
+        <template #append-inner>
+          <span class="date-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" class="date-icon-svg">
+              <path
+                d="M7 2.75a.75.75 0 0 1 .75.75V5h8.5V3.5a.75.75 0 0 1 1.5 0V5h.75A2.5 2.5 0 0 1 21 7.5v10A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5v-10A2.5 2.5 0 0 1 5.5 5h.75V3.5A.75.75 0 0 1 7 2.75ZM4.5 10v7.5c0 .552.448 1 1 1h13c.552 0 1-.448 1-1V10h-15Zm1-3.5c-.552 0-1 .448-1 1v1h15v-1c0-.552-.448-1-1-1h-.75v1a.75.75 0 0 1-1.5 0v-1h-8.5v1a.75.75 0 0 1-1.5 0v-1H5.5Zm2.25 5.75a.75.75 0 0 1 .75.75v.25a.75.75 0 0 1-1.5 0V13a.75.75 0 0 1 .75-.75Zm4.25 0a.75.75 0 0 1 .75.75v.25a.75.75 0 0 1-1.5 0V13a.75.75 0 0 1 .75-.75Zm4.25 0a.75.75 0 0 1 .75.75v.25a.75.75 0 0 1-1.5 0V13a.75.75 0 0 1 .75-.75Zm-8.5 3.75a.75.75 0 0 1 .75.75V17a.75.75 0 0 1-1.5 0v-.25a.75.75 0 0 1 .75-.75Zm4.25 0a.75.75 0 0 1 .75.75V17a.75.75 0 0 1-1.5 0v-.25a.75.75 0 0 1 .75-.75Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+        </template>
+      </VTextField>
     </div>
-
     <!-- 使用 Teleport 将下拉框渲染到 body 下，避免被父容器裁剪 -->
     <Teleport to="body" :disabled="inline || noTeleport">
       <div v-if="showPicker && !inline" class="date-picker-mask" @click="closePicker"></div>
@@ -318,13 +332,13 @@ const dropdownStyle = ref({});
 
 // 当前日期（用于判断未来日期）
 const today = new Date();
-const todayYear = today.getFullYear();
-const todayMonth = today.getMonth();
-const todayDate = today.getDate();
-
-// 年份面板固定展示 12 个年份，并尽量让锚点年份落在中间偏前位置
-const YEAR_PANEL_SIZE = 12;
-const YEAR_PANEL_CENTER_OFFSET = 4;
+const todayYear = today.getFullYear();
+const todayMonth = today.getMonth();
+const todayDate = today.getDate();
+
+// 年份面板固定展示 12 个年份，并尽量让锚点年份落在中间偏前位置
+const YEAR_PANEL_SIZE = 12;
+const YEAR_PANEL_CENTER_OFFSET = 4;
 
 // 周和月份名称
 const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
@@ -362,11 +376,11 @@ 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 yearList = computed(() => {
+  // 年份面板打开时，以当前锚点年份为中心生成 12 个年份选项
+  const startYear = currentYear.value - YEAR_PANEL_CENTER_OFFSET;
+  return Array.from({ length: YEAR_PANEL_SIZE }, (_, i) => startYear + i);
+});
 
 // 周列表
 const weekList = computed(() => {
@@ -649,7 +663,12 @@ const selectMonth = (month) => {
   // 如果是未来月份且禁用未来日期，则不允许选择
   if (isFutureMonth(month, currentYear.value)) return;
 
-  console.log('selectMonth', month);
+  if (props.displayMode !== 'month') {
+    currentMonth.value = month;
+    viewMode.value = props.displayMode;
+    return;
+  }
+
   const monthStr = `${currentYear.value}-${String(month + 1).padStart(2, '0')}`;
   if (props.mode === 'single') {
     tempValue.value = monthStr;
@@ -855,18 +874,18 @@ const changeViewMode = (mode) => {
 };
 
 // 面板操作
-const togglePicker = () => {
-  if (props.disabled) return;
-  showPicker.value = !showPicker.value;
-  if (showPicker.value) {
-    // 年份单选打开面板时，优先围绕当前自然年展示年份列表
-    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);
+const togglePicker = () => {
+  if (props.disabled) return;
+  showPicker.value = !showPicker.value;
+  if (showPicker.value) {
+    // 年份单选打开面板时，优先围绕当前自然年展示年份列表
+    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;
 
     // 初始化右侧日历/年份
@@ -983,34 +1002,16 @@ watch(() => props.modelValue, (newValue) => {
 }
 
 .date-input {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border: 1px solid rgb(var(--v-theme-on-surface), 0.3);
-  border-radius: 4px;
-  padding: 0 12px;
-  background: rgb(var(--v-theme-surface));
-  cursor: pointer;
-  transition: border-color 0.2s;
-}
-
-.date-input:hover {
-  border-color: rgb(var(--v-theme-on-surface), 0.8);
+  width: 100%;
 }
 
 .date-input-field {
-  flex: 1;
-  border: none;
-  outline: none;
-  padding: 8px 0;
-  font-size: 14px;
   cursor: pointer;
-  background: transparent;
-  color: rgb(var(--v-theme-on-surface), 0.8);
 }
 
-.date-input-field::placeholder {
-  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+:deep(.date-input-field .v-field),
+:deep(.date-input-field input) {
+  cursor: pointer;
 }
 
 .date-icon {
@@ -1027,18 +1028,6 @@ watch(() => props.modelValue, (newValue) => {
   display: block;
 }
 
-.clear-icon {
-  margin-left: 8px;
-  color: rgb(var(--v-theme-on-surface), 0.6);
-  font-size: 14px;
-  cursor: pointer;
-  padding: 2px;
-}
-
-.clear-icon:hover {
-  color: rgb(var(--v-theme-on-surface), 0.87);
-}
-
 .date-picker-mask {
   position: fixed;
   top: 0;

package/src/components/assembly/VtkSearch.vue

@@ -41,7 +41,7 @@
         </VTextField>
       </template>
 
-      <VCard style="width: 380px; margin-right: -16px; overflow: visible;">
+      <VCard class="search-panel">
         <VCardTitle class="pr-3 d-flex justify-space-between align-center pb-5">
           <span>高级搜索</span>
           <VBtn class="mx-0" variant="text" icon @click="close" size="small">
@@ -49,7 +49,7 @@
           </VBtn>
         </VCardTitle>
 
-        <VCardText style="overflow: visible;">
+        <VCardText class="search-panel__content" :style="contentStyle">
           <slot :query-param="queryParam"></slot>
         </VCardText>
 
@@ -79,6 +79,10 @@ const props = defineProps({
   value: {
     type: Object,
     default: () => ({})
+  },
+  contentMaxHeight: {
+    type: [Number, String],
+    default: 360
   }
 });
 
@@ -101,6 +105,15 @@ const initialIndex = computed(() => {
   }).length;
 });
 
+const contentStyle = computed(() => {
+  const value = props.contentMaxHeight;
+  const maxHeight = typeof value === 'number' ? `${value}px` : value;
+
+  return {
+    maxHeight,
+  };
+});
+
 watch(
   () => props.value,
   (newVal) => {
@@ -166,6 +179,37 @@ defineExpose({ search, reset });
   min-height: 40px;
 }
 
+.search-panel {
+  width: 380px;
+  margin-right: -16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-panel__content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(var(--v-theme-primary)) transparent;
+}
+
+.search-panel__content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.search-panel__content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.search-panel__content::-webkit-scrollbar-thumb {
+  background: rgba(var(--v-theme-primary), 0.8);
+  border-radius: 999px;
+}
+
+.search-panel__content::-webkit-scrollbar-thumb:hover {
+  background: rgb(var(--v-theme-primary));
+}
+
 :deep(.box .v-field__append-inner) {
   cursor: pointer;
   padding-left: 16px !important;

package/src/components/assembly/VtkStepper.vue

@@ -141,7 +141,7 @@ $color-dark-bg: #1e1e1e;
 
 .last-box::after {
 	position: absolute;
-	right: -70px;
+	right: -69px;
 	content: "";
 	z-index: 1;
 	width: 0;

package/src/components/message/toast.vue

@@ -39,7 +39,7 @@ const onModelUpdate = (value) => {
 };
 </script>
 <style lang="scss" scoped>
-::v-deep .v-snackbar__wrapper {
-	top: 24px;
-}
+:deep(.v-snackbar__wrapper) {
+	top: 24px;
+}
 </style>