refactor: migrate frontend calendar page

2026-07-21 13:06:27 +08:00
parent c105d878fe
commit 02546c12f1
8 changed files with 731 additions and 11 deletions
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { WEEK_NAMES } from '@/utils/i18n';
+import type { CalendarCell } from './types';
+import CalendarItem from './CalendarItem.vue';
+
+const props = defineProps({
+  cells: {
+    type: Array as () => CalendarCell[],
+    required: true,
+  },
+})
+
+// split the flat 42-cell array into 6 rows of 7
+const rows = computed<CalendarCell[][]>(() => {
+  const r: CalendarCell[][] = []
+  for (let i = 0; i < 6; i++) r.push(props.cells.slice(i * 7, i * 7 + 7))
+  return r
+})
+</script>
+
+<template>
+  <div class="calendarGrid card" style="padding: 1.25rem; display: flex; flex-flow: column;">
+    <div style="margin: 0 0 0.75em 0;">
+      <div v-for="(w, i) in WEEK_NAMES" :key="i">
+        <b :style="i >= 5 ? { color: 'red' } : null">{{ w }}</b>
+      </div>
+    </div>
+
+    <div v-for="(row, ri) in rows" :key="ri">
+      <div
+        v-for="(cell, ci) in row"
+        :key="ci"
+        :isCurrentMonth="cell.isCurrentMonth ? 'true' : 'false'"
+      >
+        <CalendarItem :cell="cell" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.calendarGrid > div:nth-child(n + 2) > div {
+  border-top: 0 solid black;
+  border-left: 0 solid black;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+
+  padding: 0.75em;
+
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+
+  overflow: hidden;
+}
+
+.calendarGrid > div:nth-child(n + 2) > div:nth-child(1) {
+  border-left: 1px solid black;
+}
+
+.calendarGrid > div:nth-child(2) > div {
+  border-top: 1px solid black;
+}
+
+.calendarGrid > div > div {
+  flex-grow: 1;
+  flex-basis: 0;
+  flex-shrink: 0;
+
+  overflow: hidden;
+}
+
+.calendarGrid > div > div[isCurrentMonth=false] {
+  background: #d0d0d0;
+}
+
+.calendarGrid > div {
+  display: flex;
+  flex-flow: row;
+}
+</style>