我让deepseek帮我写了个unipp日历组件，非常好用，效率拉满

背景

最近想给随手记个账小程序加个日历组件，用于显示日常预算及开支，于是我把我的需求告诉deepseek，于是，他给了我一串代码，不得不说，deepseek确实非常强大，相比我自己纯手写半天一天起步的工作量，deepseek一分钟输出完成，效率直接拉满，妥妥的要失业的节奏。

代码

以下源码全部为deepseek输出，效果大大超出我的预期，虽然还有一些不足之处，但个人看来已经非常完美了。效果图见源码下方

页面代码如下

<view class="calendar-container">
    <view class="header">
      <text class="arrow" @click="switchMonth(-1)">◀</text>
      <text class="month">{{ currentYear }}年{{ currentMonth }}月</text>
      <text class="arrow" @click="switchMonth(1)">▶</text>
    </view>

    <view class="weekdays">
      <text v-for="(w, i) in ['日','一','二','三','四','五','六']" :key="i">{{ w }}</text>
    </view>

    <view class="days-grid">
      <view v-for="(day, index) in days" :key="index" class="day-item" :style="getDayStyle(day)" @click="handleDayClick(day)">
        <view v-if="day.tag" class="corner-tag" :style="getTagStyle(day)"> {{ day.tag }} </view>
        <text class="day-number">{{ day.date }}</text>
        <text v-if="showLunar" class="lunar">{{ day.lunar }}</text>
        <view v-if="day.subText" class="sub-text" :style="getSubTextStyle(day)"> {{ day.subText }} </view>
      </view>
    </view>
</view>

TS脚本如下

<script setup lang="ts">
import { ref, watch } from 'vue';
import { getLunar } from 'chinese-lunar-calendar';

// 类型定义‌:ml-citation{ref="1,6" data="citationList"}
interface CalendarDay {
  date: number;
  lunar?: string;
  tag?: string;
  tagColor?: string;
  tagBg?: string;
  subText?: string;
  subTextColor?: string;
  subTextBg?: string;
  customBg?: string;
  empty?: boolean;
}

// 组件属性‌:ml-citation{ref="3" data="citationList"}
const props = defineProps<{
  showLunar?: boolean;
  defaultBg?: string;
  datesConfig?: CalendarDay[];
}>();

// 响应式数据
const currentYear = ref(new Date().getFullYear());
const currentMonth = ref(new Date().getMonth() + 1);
const days = ref<CalendarDay[]>([]);

// 事件声明‌:ml-citation{ref="3" data="citationList"}
const emit = defineEmits<{(e: 'day-click', day: CalendarDay): void;}>();

// 生成日历数据‌:ml-citation{ref="1,2" data="citationList"}
const generateCalendar = () => {
  const date = new Date(currentYear.value, currentMonth.value - 1, 1);
  const totalDays = new Date(currentYear.value, currentMonth.value, 0).getDate();
  const firstDay = date.getDay();

  // 生成日期数组‌:ml-citation{ref="3" data="citationList"}
  days.value = [
    ...Array.from({ length: firstDay }, () => ({ empty: true })),
    ...Array.from({ length: totalDays }, (_, i) => {
      const day = i + 1;
      const solarDate = new Date(currentYear.value, currentMonth.value - 1, day);
      const customConfig = props.datesConfig?.find(c => c.date === day && c.month === currentMonth.value && c.year === currentYear.value) || {};
      return { date: day,
        lunar: props.showLunar ? getLunarFormat(solarDate),
        ...customConfig
      } as CalendarDay;
    })
  ];
};

// 农历格式化‌:ml-citation{ref="1,4" data="citationList"}
const getLunarFormat = (date: Date) => {
  // const lunar = getLunar(date.getFullYear(), date.getMonth() + 1, date.getDate());
  // return `${lunar.lunarMonth}月${lunar.lunarDate}`;
};

// 月份切换‌:ml-citation{ref="3,5" data="citationList"}
const switchMonth = (step: number) => {
  let newMonth = currentMonth.value + step;
  currentYear.value += Math.floor((newMonth - 1) / 12);
  currentMonth.value = ((newMonth - 1) % 12 + 12) % 12 + 1;
};

// 样式计算‌:ml-citation{ref="6" data="citationList"}
const getDayStyle = (day: CalendarDay) => ({
  backgroundColor: day.customBg || props.defaultBg || "#fff"
});

const getTagStyle = (day: CalendarDay) => ({
  color: day.tagColor || "#ff4444",
  backgroundColor: day.tagBg || 'transparent'
});

const getSubTextStyle = (day: CalendarDay) => ({
  color: day.subTextColor || "#666",
  backgroundColor: day.subTextBg || 'transparent'
});

// 点击事件‌:ml-citation{ref="3" data="citationList"}
const handleDayClick = (day: CalendarDay) => {
  if (!day.empty) emit('day-click', day);
};

// 监听年月变化‌:ml-citation{ref="5" data="citationList"}
watch([currentYear, currentMonth], generateCalendar, { immediate: true });
</script>

css样式

<style lang="scss" scoped>
.calendar-container {
  padding: 20rpx;
  background: #f8f8f8;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;

  .month {
    margin: 0 40rpx;
    font-size: 36rpx;
  }
  .arrow {
    font-size: 32rpx;
    color: #666;
  }
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 20rpx 0;
  color: #666;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 1rpx;
  background: #e0e0e0;

  .day-item {
    position: relative;
    min-height: 150rpx;
    padding: 10rpx;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .corner-tag {
      position: absolute;
      top: 4rpx;
      right: 4rpx;
      font-size: 20rpx;
      transform: scale(0.8);
    }

    .day-number {
      font-size: 36rpx;
      margin-top: 10rpx;
    }

    .lunar {
      font-size: 24rpx;
      color: #999;
      margin-top: 6rpx;
    }

    .sub-text {
      position: absolute;
      bottom: 4rpx;
      width: 100%;
      text-align: center;
      font-size: 24rpx;
      padding: 2rpx 0;
    }
  }
}
</style>

页面引用

<template>
    <calendar :show-lunar="true" :dates-config="specialDates" @day-click="handleDayClick"/>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import calendar from '@/components/calendar/calendar.vue';

    const info = ref({
        lunar: true, // 显示农历
        range: false,
        insert: true,
        showMonth: true, // 是否显示月份为背景
        selected: []
    });

    const specialDates = ref([{
        year: 2025,
        month: 3,
        date: 8,
        tag: '休',
        tagColor: '#ff0000',
        subText: '女神节',
        subTextBg: '#ff99cc'
    }]);

    const change = (e) => {
        console.log('change 返回:', e)
        // 模拟动态打卡
        if (info.value.selected.length > 5) return
        info.value.selected.push({
            date: e.fulldate,
            info: '211.99'
        })
    }

    const monthSwitch = (e) => {
        console.log('monthSwitchs 返回:', e)
    }

    const handleDayClick = (day) => {
      console.log('选中日期:', day);
    }
</script>

效果图

写在最后

本来准备录制一期视频来记录一下deepseek的强大能力，但尝试几次后发现一个有趣的现象，就是我重新输入类似需求，发现最后输出的代码并没有第一次完美，看来AI输出并不稳定存在一定运气成分，或可能与输入关键词有一定关系？🤔

而且尝试了不同AI输出，相比deepseek肉眼存在可见差距。当然，现有AI能力已经非常可观，对工作效率提升是非常明显的，已经完全可以代替相当一部分人力工作了。

视频录制尝试中...看看具体是运气成分还是不同关键词影响，以及不同平台部署的满血版deepseek是否有所差别