@ruixinkeji/prism-ui 1.0.0

package/components/PrismDateTimePicker/PrismDateTimePicker.vue

@@ -0,0 +1,953 @@
+<template>
+  <view class="prism-datetime-picker" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <!-- 触发器 -->
+    <view class="picker-trigger" @click="openPicker">
+      <slot>
+        <view class="prism-select-box">
+          <text :class="{ 'placeholder': !displayValue, 'select-text': displayValue }">
+            {{ displayValue || placeholder }}
+          </text>
+          <text class="select-arrow fa fa-calendar-alt"></text>
+        </view>
+      </slot>
+    </view>
+
+    <!-- 选择器弹窗 -->
+    <view class="picker-popup" v-if="showPicker" @click="closePicker">
+      <view class="picker-content" @click.stop>
+        <!-- 头部 -->
+        <view class="picker-header">
+          <view class="picker-cancel" @click="closePicker">取消</view>
+          <view class="picker-title">{{ title }}</view>
+          <view class="picker-confirm" @click="confirmSelect">确定</view>
+        </view>
+
+        <!-- 滚轮选择器 -->
+        <view class="picker-body" v-if="mode === 'picker'">
+          <picker-view
+            class="picker-view"
+            :value="pickerIndex"
+            @change="onPickerChange"
+            indicator-class="picker-indicator"
+            :indicator-style="indicatorStyle"
+            :style="{ height: pickerHeight }"
+          >
+            <!-- 年份列 -->
+            <picker-view-column>
+              <view
+                v-for="(item, idx) in yearList"
+                :key="item"
+                class="picker-item"
+                :style="{
+                  height: itemHeight + 'px',
+                  lineHeight: itemHeight + 'px',
+                  color: idx === pickerIndex[0] ? 'var(--prism-primary-color, #3478F6)' : 'var(--prism-text-secondary, #86909C)',
+                  fontWeight: idx === pickerIndex[0] ? '600' : '400'
+                }"
+              >
+                {{ item }}年
+              </view>
+            </picker-view-column>
+            <!-- 月份列 -->
+            <picker-view-column>
+              <view
+                v-for="(item, idx) in monthList"
+                :key="item"
+                class="picker-item"
+                :style="{
+                  height: itemHeight + 'px',
+                  lineHeight: itemHeight + 'px',
+                  color: idx === pickerIndex[1] ? 'var(--prism-primary-color, #3478F6)' : 'var(--prism-text-secondary, #86909C)',
+                  fontWeight: idx === pickerIndex[1] ? '600' : '400'
+                }"
+              >
+                {{ padZero(item) }}月
+              </view>
+            </picker-view-column>
+            <!-- 日期列 -->
+            <picker-view-column>
+              <view
+                v-for="(item, idx) in dayList"
+                :key="item"
+                class="picker-item"
+                :style="{
+                  height: itemHeight + 'px',
+                  lineHeight: itemHeight + 'px',
+                  color: idx === pickerIndex[2] ? 'var(--prism-primary-color, #3478F6)' : 'var(--prism-text-secondary, #86909C)',
+                  fontWeight: idx === pickerIndex[2] ? '600' : '400'
+                }"
+              >
+                {{ padZero(item) }}日
+              </view>
+            </picker-view-column>
+            <!-- 小时列 -->
+            <picker-view-column v-if="showTime">
+              <view
+                v-for="(item, idx) in hourList"
+                :key="item"
+                class="picker-item"
+                :style="{
+                  height: itemHeight + 'px',
+                  lineHeight: itemHeight + 'px',
+                  color: idx === pickerIndex[3] ? 'var(--prism-primary-color, #3478F6)' : 'var(--prism-text-secondary, #86909C)',
+                  fontWeight: idx === pickerIndex[3] ? '600' : '400'
+                }"
+              >
+                {{ padZero(item) }}时
+              </view>
+            </picker-view-column>
+            <!-- 分钟列 -->
+            <picker-view-column v-if="showTime">
+              <view
+                v-for="(item, idx) in minuteList"
+                :key="item"
+                class="picker-item"
+                :style="{
+                  height: itemHeight + 'px',
+                  lineHeight: itemHeight + 'px',
+                  color: idx === pickerIndex[4] ? 'var(--prism-primary-color, #3478F6)' : 'var(--prism-text-secondary, #86909C)',
+                  fontWeight: idx === pickerIndex[4] ? '600' : '400'
+                }"
+              >
+                {{ padZero(item) }}分
+              </view>
+            </picker-view-column>
+            <!-- 秒列 -->
+            <picker-view-column v-if="showTime && showSeconds">
+              <view
+                v-for="(item, idx) in secondList"
+                :key="item"
+                class="picker-item"
+                :style="{
+                  height: itemHeight + 'px',
+                  lineHeight: itemHeight + 'px',
+                  color: idx === pickerIndex[5] ? 'var(--prism-primary-color, #3478F6)' : 'var(--prism-text-secondary, #86909C)',
+                  fontWeight: idx === pickerIndex[5] ? '600' : '400'
+                }"
+              >
+                {{ padZero(item) }}秒
+              </view>
+            </picker-view-column>
+          </picker-view>
+        </view>
+
+        <!-- 日历选择器 -->
+        <view class="calendar-body" v-else-if="mode === 'calendar'">
+          <!-- 暗纹月份水印 -->
+          <view class="calendar-watermark">{{ calendarMonth }}</view>
+
+          <!-- 年月切换 -->
+          <view class="calendar-nav">
+            <view class="nav-btn" @click="prevYear">
+              <text class="fa fa-angles-left"></text>
+            </view>
+            <view class="nav-btn" @click="prevMonth">
+              <text class="fa fa-chevron-left"></text>
+            </view>
+            <view class="nav-title">{{ calendarYear }}年{{ calendarMonth }}月</view>
+            <view class="nav-btn" @click="nextMonth">
+              <text class="fa fa-chevron-right"></text>
+            </view>
+            <view class="nav-btn" @click="nextYear">
+              <text class="fa fa-angles-right"></text>
+            </view>
+          </view>
+
+          <!-- 星期标题 -->
+          <view class="calendar-weekdays">
+            <view class="weekday" v-for="day in weekdays" :key="day">{{ day }}</view>
+          </view>
+
+          <!-- 日期网格 -->
+          <view class="calendar-days">
+            <view
+              class="calendar-day"
+              v-for="(day, index) in calendarDays"
+              :key="index"
+              :class="{
+                'other-month': day.otherMonth,
+                'today': day.isToday,
+                'selected': day.isSelected,
+                'range-start': day.isRangeStart,
+                'range-end': day.isRangeEnd,
+                'in-range': day.isInRange
+              }"
+              @click="selectCalendarDay(day)"
+            >
+              <text class="day-text">{{ day.day }}</text>
+              <text class="lunar-text" v-if="props.showLunar && day.lunar">{{ day.lunar }}</text>
+              <text class="today-label" v-if="day.isToday && !props.showLunar">今</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useAppStore } from '@/store/app';
+import { rpx2px } from '@/utils/system';
+import { getLunarDayStr } from '@/utils/lunar';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Date],
+    default: ''
+  },
+  // 选择模式：picker（滚轮）或 calendar（日历）
+  mode: {
+    type: String,
+    default: 'picker',
+    validator: (val) => ['picker', 'calendar'].includes(val)
+  },
+  // 是否显示时间选择
+  showTime: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示秒
+  showSeconds: {
+    type: Boolean,
+    default: false
+  },
+  // 日期格式
+  format: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: '请选择日期'
+  },
+  title: {
+    type: String,
+    default: '选择日期'
+  },
+  // 最小年份
+  minYear: {
+    type: Number,
+    default: () => new Date().getFullYear() - 50
+  },
+  // 最大年份
+  maxYear: {
+    type: Number,
+    default: () => new Date().getFullYear() + 50
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 是否为范围选择模式
+  range: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示农历
+  showLunar: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
+
+const appStore = useAppStore();
+const showPicker = ref(false);
+const pickerIndex = ref([0, 0, 0, 0, 0, 0]);
+
+// picker 配置 - 使用 rpx2px 换算，避免精度问题
+const itemHeight = rpx2px(96);
+const visibleItemCount = 5;
+const pickerHeight = `${itemHeight * visibleItemCount}px`;
+const indicatorStyle = `height: ${itemHeight}px`;
+
+// 日历模式状态
+const calendarYear = ref(new Date().getFullYear());
+const calendarMonth = ref(new Date().getMonth() + 1);
+const selectedDate = ref('');
+const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+
+// 范围选择状态
+const rangeStart = ref('');
+const rangeEnd = ref('');
+
+// 判断日期是否在范围内
+function isInRange(dateStr) {
+  if (!props.range || !rangeStart.value || !rangeEnd.value) return false;
+  return dateStr > rangeStart.value && dateStr < rangeEnd.value;
+}
+
+// 日历天数
+const calendarDays = computed(() => {
+  const days = [];
+  const firstDay = new Date(calendarYear.value, calendarMonth.value - 1, 1);
+  const lastDay = new Date(calendarYear.value, calendarMonth.value, 0);
+  const startWeekday = firstDay.getDay();
+  const totalDays = lastDay.getDate();
+  const today = new Date();
+  const todayStr = `${today.getFullYear()}-${padZero(today.getMonth() + 1)}-${padZero(today.getDate())}`;
+
+  // 上月填充
+  const prevMonthDate = new Date(calendarYear.value, calendarMonth.value - 1, 0);
+  const prevMonthYear = calendarMonth.value === 1 ? calendarYear.value - 1 : calendarYear.value;
+  const prevMonthNum = calendarMonth.value === 1 ? 12 : calendarMonth.value - 1;
+  for (let i = startWeekday - 1; i >= 0; i--) {
+    const d = prevMonthDate.getDate() - i;
+    const dateStr = `${prevMonthYear}-${padZero(prevMonthNum)}-${padZero(d)}`;
+    days.push({
+      day: d,
+      dateStr,
+      otherMonth: true,
+      lunar: props.showLunar ? getLunarDayStr(prevMonthYear, prevMonthNum, d) : ''
+    });
+  }
+
+  // 当月
+  for (let i = 1; i <= totalDays; i++) {
+    const dateStr = `${calendarYear.value}-${padZero(calendarMonth.value)}-${padZero(i)}`;
+    const isRangeStart = props.range && dateStr === rangeStart.value;
+    const isRangeEnd = props.range && dateStr === rangeEnd.value;
+    days.push({
+      day: i,
+      dateStr,
+      isToday: dateStr === todayStr,
+      isSelected: props.range ? (isRangeStart || isRangeEnd) : dateStr === selectedDate.value,
+      isRangeStart,
+      isRangeEnd,
+      isInRange: isInRange(dateStr),
+      lunar: props.showLunar ? getLunarDayStr(calendarYear.value, calendarMonth.value, i) : ''
+    });
+  }
+
+  // 下月填充
+  const nextMonthYear = calendarMonth.value === 12 ? calendarYear.value + 1 : calendarYear.value;
+  const nextMonthNum = calendarMonth.value === 12 ? 1 : calendarMonth.value + 1;
+  const remaining = 42 - days.length;
+  for (let i = 1; i <= remaining; i++) {
+    const dateStr = `${nextMonthYear}-${padZero(nextMonthNum)}-${padZero(i)}`;
+    days.push({
+      day: i,
+      dateStr,
+      otherMonth: true,
+      lunar: props.showLunar ? getLunarDayStr(nextMonthYear, nextMonthNum, i) : ''
+    });
+  }
+
+  return days;
+});
+
+// 年份列表
+const yearList = computed(() => {
+  const list = [];
+  for (let i = props.minYear; i <= props.maxYear; i++) {
+    list.push(i);
+  }
+  return list;
+});
+
+// 月份列表
+const monthList = computed(() => {
+  const list = [];
+  for (let i = 1; i <= 12; i++) {
+    list.push(i);
+  }
+  return list;
+});
+
+// 日期列表（根据年月动态计算）
+const dayList = computed(() => {
+  const year = yearList.value[pickerIndex.value[0]];
+  const month = monthList.value[pickerIndex.value[1]];
+  const days = getDaysInMonth(year, month);
+  const list = [];
+  for (let i = 1; i <= days; i++) {
+    list.push(i);
+  }
+  return list;
+});
+
+// 小时列表
+const hourList = computed(() => {
+  const list = [];
+  for (let i = 0; i <= 23; i++) {
+    list.push(i);
+  }
+  return list;
+});
+
+// 分钟列表
+const minuteList = computed(() => {
+  const list = [];
+  for (let i = 0; i <= 59; i++) {
+    list.push(i);
+  }
+  return list;
+});
+
+// 秒列表
+const secondList = computed(() => {
+  const list = [];
+  for (let i = 0; i <= 59; i++) {
+    list.push(i);
+  }
+  return list;
+});
+
+// 获取某月的天数
+function getDaysInMonth(year, month) {
+  return new Date(year, month, 0).getDate();
+}
+
+// 补零
+function padZero(num) {
+  return num < 10 ? '0' + num : String(num);
+}
+
+// 默认格式
+const defaultFormat = computed(() => {
+  if (props.format) return props.format;
+  if (props.showTime) {
+    return props.showSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
+  }
+  return 'YYYY-MM-DD';
+});
+
+// 显示值
+const displayValue = computed(() => {
+  if (!props.modelValue) return '';
+  return formatDate(parseDate(props.modelValue), defaultFormat.value);
+});
+
+// 解析日期
+function parseDate(value) {
+  if (!value) return new Date();
+  if (value instanceof Date) return value;
+  if (typeof value === 'number') return new Date(value);
+  if (typeof value === 'string') {
+    const d = new Date(value.replace(/-/g, '/'));
+    return isNaN(d.getTime()) ? new Date() : d;
+  }
+  return new Date();
+}
+
+// 格式化日期
+function formatDate(date, format) {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const second = date.getSeconds();
+
+  return format
+    .replace('YYYY', year)
+    .replace('MM', padZero(month))
+    .replace('DD', padZero(day))
+    .replace('HH', padZero(hour))
+    .replace('mm', padZero(minute))
+    .replace('ss', padZero(second));
+}
+
+// 打开选择器
+function openPicker() {
+  if (props.disabled) return;
+
+  // 先初始化数据，再显示弹窗
+  if (props.mode === 'calendar') {
+    initCalendar();
+  } else {
+    initPickerIndex();
+  }
+  showPicker.value = true;
+}
+
+// 初始化日历
+function initCalendar() {
+  const date = props.modelValue ? parseDate(props.modelValue) : new Date();
+  calendarYear.value = date.getFullYear();
+  calendarMonth.value = date.getMonth() + 1;
+  selectedDate.value = props.modelValue
+    ? `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`
+    : '';
+}
+
+// 初始化picker索引
+function initPickerIndex() {
+  const date = props.modelValue ? parseDate(props.modelValue) : new Date();
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const second = date.getSeconds();
+
+  const yearIdx = yearList.value.indexOf(year);
+  pickerIndex.value = [
+    yearIdx >= 0 ? yearIdx : 0,
+    month - 1,
+    day - 1,
+    hour,
+    minute,
+    second
+  ];
+}
+
+// 关闭选择器
+function closePicker() {
+  showPicker.value = false;
+  emit('cancel');
+}
+
+// 上一年
+function prevYear() {
+  calendarYear.value--;
+}
+
+// 下一年
+function nextYear() {
+  calendarYear.value++;
+}
+
+// 上一月
+function prevMonth() {
+  if (calendarMonth.value === 1) {
+    calendarMonth.value = 12;
+    calendarYear.value--;
+  } else {
+    calendarMonth.value--;
+  }
+}
+
+// 下一月
+function nextMonth() {
+  if (calendarMonth.value === 12) {
+    calendarMonth.value = 1;
+    calendarYear.value++;
+  } else {
+    calendarMonth.value++;
+  }
+}
+
+// 选择日历日期
+function selectCalendarDay(day) {
+  if (day.otherMonth) return;
+
+  if (props.range) {
+    // 范围选择模式
+    if (!rangeStart.value || (rangeStart.value && rangeEnd.value)) {
+      // 开始新的选择
+      rangeStart.value = day.dateStr;
+      rangeEnd.value = '';
+    } else {
+      // 选择结束日期
+      if (day.dateStr < rangeStart.value) {
+        // 如果选择的日期比开始日期早，交换
+        rangeEnd.value = rangeStart.value;
+        rangeStart.value = day.dateStr;
+      } else {
+        rangeEnd.value = day.dateStr;
+      }
+    }
+  } else {
+    // 单选模式
+    selectedDate.value = day.dateStr;
+  }
+}
+
+// 回到今天
+function goToday() {
+  const today = new Date();
+  calendarYear.value = today.getFullYear();
+  calendarMonth.value = today.getMonth() + 1;
+  selectedDate.value = `${today.getFullYear()}-${padZero(today.getMonth() + 1)}-${padZero(today.getDate())}`;
+}
+
+// picker变化
+function onPickerChange(e) {
+  const values = e.detail.value;
+  // 年月变化时，检查日期是否超出范围
+  const year = yearList.value[values[0]];
+  const month = monthList.value[values[1]];
+  const maxDay = getDaysInMonth(year, month);
+  if (values[2] >= maxDay) {
+    values[2] = maxDay - 1;
+  }
+  pickerIndex.value = values;
+}
+
+// 确认选择
+function confirmSelect() {
+  let result;
+
+  if (props.mode === 'calendar') {
+    if (props.range) {
+      // 范围选择模式
+      if (!rangeStart.value || !rangeEnd.value) {
+        uni.showToast({ title: '请选择完整的日期范围', icon: 'none' });
+        return;
+      }
+      result = [rangeStart.value, rangeEnd.value];
+    } else {
+      // 单选模式
+      if (!selectedDate.value) {
+        uni.showToast({ title: '请选择日期', icon: 'none' });
+        return;
+      }
+      result = selectedDate.value;
+    }
+  } else {
+    const year = yearList.value[pickerIndex.value[0]];
+    const month = monthList.value[pickerIndex.value[1]];
+    const day = dayList.value[pickerIndex.value[2]];
+    const hour = props.showTime ? hourList.value[pickerIndex.value[3]] : 0;
+    const minute = props.showTime ? minuteList.value[pickerIndex.value[4]] : 0;
+    const second = props.showTime && props.showSeconds ? secondList.value[pickerIndex.value[5]] : 0;
+
+    const date = new Date(year, month - 1, day, hour, minute, second);
+    result = formatDate(date, defaultFormat.value);
+  }
+
+  emit('update:modelValue', result);
+  emit('change', result);
+  emit('confirm', result);
+  showPicker.value = false;
+}
+</script>
+
+<style lang="scss">
+.prism-datetime-picker {
+  .picker-trigger {
+    cursor: pointer;
+  }
+
+  .picker-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    z-index: 9999;
+  }
+
+  .picker-content {
+    width: 100%;
+    background: var(--prism-bg-color-card, #FFFFFF);
+    border-radius: 24rpx 24rpx 0 0;
+  }
+
+  .picker-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24rpx 32rpx;
+    border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+  }
+
+  .picker-cancel {
+    font-size: 30rpx;
+    color: var(--prism-text-secondary, #86909C);
+    padding: 8rpx 16rpx;
+  }
+
+  .picker-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  .picker-confirm {
+    font-size: 30rpx;
+    color: var(--prism-primary-color, #3478F6);
+    padding: 8rpx 16rpx;
+    font-weight: 500;
+  }
+
+  .picker-body {
+    // height 通过 JS 动态设置
+    padding-bottom: env(safe-area-inset-bottom);
+    box-sizing: content-box;
+    position: relative;
+  }
+
+  .picker-view {
+    // height 通过 JS 动态设置
+  }
+
+  .picker-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32rpx;
+    // height 和 lineHeight 通过 JS 动态设置
+    font-weight: 500;
+  }
+
+  // picker指示器样式 - 隐藏原有背景，用文字颜色区分激活项
+  :deep(.picker-indicator) {
+    // height 通过 indicatorStyle 动态设置
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+    border-width: 0 !important;
+    border-style: none !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    z-index: 0 !important;
+  }
+
+  // 确保文字在背景色上方
+  .picker-item {
+    position: relative;
+    z-index: 2;
+  }
+
+  // 浅色模式遮罩层
+  :deep(.uni-picker-view-mask) {
+    z-index: 1 !important;
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
+                      linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) !important;
+  }
+
+  // 覆盖 uni-app 默认边框
+  :deep(.uni-picker-view-indicator) {
+    border: none !important;
+    border-top: none !important;
+    border-bottom: none !important;
+    border-color: transparent !important;
+  }
+
+  // 日历模式
+  .calendar-body {
+    padding: 0 24rpx 24rpx;
+    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+    position: relative;
+  }
+
+  // 暗纹月份水印 - 相对于整个日历区域居中
+  .calendar-watermark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 300rpx;
+    font-weight: bold;
+    color: var(--prism-text-primary, #1D2129);
+    opacity: 0.04;
+    pointer-events: none;
+    z-index: 0;
+    user-select: none;
+  }
+
+  .calendar-nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16rpx 0;
+    gap: 16rpx;
+  }
+
+  .nav-btn {
+    width: 64rpx;
+    height: 64rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8rpx;
+    color: var(--prism-text-secondary, #86909C);
+
+    &:active {
+      background: var(--prism-bg-color-container, #F7F8FA);
+    }
+  }
+
+  .nav-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--prism-text-primary, #1D2129);
+    min-width: 200rpx;
+    text-align: center;
+  }
+
+  .today-btn {
+    position: absolute;
+    right: 0;
+    background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+    color: var(--prism-primary-color, #3478F6);
+    font-size: 24rpx;
+    font-weight: 500;
+  }
+
+  .calendar-weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-bottom: 8rpx;
+  }
+
+  .weekday {
+    text-align: center;
+    font-size: 26rpx;
+    color: var(--prism-text-secondary, #86909C);
+    padding: 16rpx 0;
+  }
+
+  .calendar-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 8rpx;
+    position: relative;
+    z-index: 1;
+  }
+
+  .calendar-day {
+    aspect-ratio: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12rpx;
+    position: relative;
+
+    &.other-month {
+      .day-text {
+        color: var(--prism-text-placeholder, #C9CDD4);
+      }
+    }
+
+    &.today {
+      .day-text {
+        color: #FF6B00;
+        font-weight: 600;
+      }
+    }
+
+    &.selected {
+      background: var(--prism-primary-color, #3478F6);
+      .day-text {
+        color: #FFFFFF;
+      }
+      .today-label {
+        color: rgba(255, 255, 255, 0.8);
+      }
+    }
+
+    // 今天被选中时，使用选中样式
+    &.today.selected {
+      background: var(--prism-primary-color, #3478F6);
+      .day-text {
+        color: #FFFFFF;
+      }
+      .today-label {
+        color: rgba(255, 255, 255, 0.8);
+      }
+    }
+
+    // 范围选择 - 开始日期
+    &.range-start {
+      background: var(--prism-primary-color, #3478F6);
+      border-radius: 12rpx 0 0 12rpx;
+      .day-text, .lunar-text {
+        color: #FFFFFF;
+      }
+    }
+
+    // 范围选择 - 结束日期
+    &.range-end {
+      background: var(--prism-primary-color, #3478F6);
+      border-radius: 0 12rpx 12rpx 0;
+      .day-text, .lunar-text {
+        color: #FFFFFF;
+      }
+    }
+
+    // 范围选择 - 中间日期
+    &.in-range {
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.1));
+      border-radius: 0;
+    }
+
+    // 开始和结束是同一天
+    &.range-start.range-end {
+      border-radius: 12rpx;
+    }
+  }
+
+  .day-text {
+    font-size: 30rpx;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  // 农历文字
+  .lunar-text {
+    font-size: 18rpx;
+    color: var(--prism-text-secondary, #86909C);
+    margin-top: 4rpx;
+  }
+
+  .today-label {
+    font-size: 20rpx;
+    color: #FF6B00;
+    position: absolute;
+    bottom: 6rpx;
+  }
+}
+
+// 深色模式
+.dark-mode.prism-datetime-picker {
+  .picker-content {
+    background: var(--prism-bg-color-card, #1A1A1A);
+  }
+
+  // picker 滚轮模式
+  .picker-item {
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+
+  :deep(.picker-indicator) {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+    border-width: 0 !important;
+    border-style: none !important;
+    border-color: transparent !important;
+  }
+
+  :deep(.uni-picker-view-indicator) {
+    background: transparent !important;
+    border: none !important;
+    border-width: 0 !important;
+    border-color: transparent !important;
+  }
+
+  :deep(.uni-picker-view-indicator)::before,
+  :deep(.uni-picker-view-indicator)::after {
+    display: none !important;
+    border: none !important;
+  }
+
+  :deep(picker-view-column)::before,
+  :deep(picker-view-column)::after {
+    display: none !important;
+  }
+
+  // 修复 picker-view 上下遮罩渐变色
+  :deep(picker-view) {
+    --picker-mask-bg: linear-gradient(180deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.6));
+  }
+
+  :deep(.uni-picker-view-mask) {
+    background-image: linear-gradient(180deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.6)),
+                      linear-gradient(0deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.6)) !important;
+  }
+
+  // 日历模式
+  .nav-btn:active {
+    background: var(--prism-bg-color-container, #2A2A2A);
+  }
+}
+</style>