dev

src/components/common/Calendar.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+const currentDate = new Date();
+const currentMonth = currentDate.getMonth();
+const currentYear = currentDate.getFullYear();
+
+// 获取指定月份信息的基础函数
+const getFirstDayOfMonth = (year: number, month: number): number => {
+  return new Date(year, month, 1).getDay();
+};
+
+const getDaysInMonth = (year: number, month: number): number => {
+  return new Date(year, month + 1, 0).getDate();
+};
+
+// 优化后的日历生成函数
+const generateCalendarData = (
+    year: number,
+    month: number
+): Array<Array<{ day: number; isCurrentMonth: boolean; isCurrentDay: boolean }>> => {
+  const weeks: Array<Array<{ day: number; isCurrentMonth: boolean; isCurrentDay: boolean }>> = [];
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDayIndex = getFirstDayOfMonth(year, month);
+
+  // 获取当前日期的日部分
+  const currentDay = currentDate.getDate();
+
+  // 计算前后月信息
+  const prevMonth = month === 0 ? 11 : month - 1;
+  const nextMonth = month === 11 ? 0 : month + 1;
+  const prevYear = month === 0 ? year - 1 : year;
+  const nextYear = month === 11 ? year + 1 : year;
+
+  const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
+  const daysInNextMonth = getDaysInMonth(nextYear, nextMonth);
+
+  let dayCounter = 1;
+  let nextMonthDayCounter = 1;
+
+  for (let week = 0; week < 5; week++) {
+    const weekDays = [];
+
+    for (let day = 0; day < 7; day++) {
+      const isFirstWeek = week === 0;
+      const position = week * 7 + day;
+
+      // 当前月日期
+      if ((isFirstWeek && day >= firstDayIndex) || (!isFirstWeek && dayCounter <= daysInMonth)) {
+        const isToday = dayCounter === currentDay && month === currentMonth && year === currentYear;
+        weekDays.push({ day: dayCounter, isCurrentMonth: true, isCurrentDay: isToday });
+        dayCounter++;
+      }
+      // 前月日期
+      else if (isFirstWeek) {
+        const prevDay = daysInPrevMonth - firstDayIndex + day + 1;
+        weekDays.push({ day: prevDay, isCurrentMonth: false, isCurrentDay: false });
+      }
+      // 下月日期
+      else {
+        weekDays.push({ day: nextMonthDayCounter, isCurrentMonth: false, isCurrentDay: false });
+        nextMonthDayCounter++;
+      }
+    }
+
+    weeks.push(weekDays);
+  }
+
+  return weeks;
+};
+
+// 使用示例
+const calendarData = generateCalendarData(currentYear, currentMonth);
+console.log(calendarData);
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/router/index.ts

@@ -30,6 +30,21 @@ const router = createRouter({
 
             ]
         },
+        {
+            path: '/dev',
+            component: () => import('../views/Layout.vue'),
+            children: [
+                {
+                    path: "",
+                    redirect: "/dev/dev",
+                },
+                {
+                    path: "dev",
+                    component: () => import('../views/dev/dev.vue'),
+                }
+
+            ]
+        },
         {
             path: '/inventory',
             component: () => import('../views/LayoutInventory.vue'),

src/views/dev/dev.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+import Calendar from "@/components/common/Calendar.vue";
+</script>
+
+<template>
+<Calendar />
+</template>
+
+<style scoped lang="scss">
+
+</style>