feat: commit ai-produced frontend first

frontend/src/components/DateTimePicker.vue

@@ -20,7 +20,7 @@ import {
   dayOfWeek,
   isLeapYear
 } from '@/utils/datetime';
-import { MONTH_NAMES, WEEK_NAMES } from '@/utils/calendar-names';
+import { MONTH_NAMES, WEEK_NAMES } from '@/utils/i18n';
 
 const DIAL_PLATE_WIDTH: number = 200;
 const DIAL_PLATE_RADIUS: number = DIAL_PLATE_WIDTH / 2;

frontend/src/components/calendar-event/EventLoopEditor.vue

@@ -2,7 +2,7 @@
 import { computed, ref, watch } from 'vue';
 import DateTimePicker, { TabType } from '@/components/DateTimePicker.vue';
 import { resolveLoopRules4UI, getDayInMonth } from '@/utils/datetime';
-import { WEEK_NAMES } from '@/utils/calendar-names';
+import { WEEK_NAMES } from '@/utils/i18n';
 import { format } from '@/utils/utils';
 
 type LoopMethod = 'never' | 'day' | 'week' | 'month' | 'year';

frontend/src/components/calendar/CalendarGrid.vue

@@ -26,10 +26,11 @@ const overflowText = (count: number): string => {
 <template>
   <div class="calendar-grid">
     <div class="calendar-grid-header">
-      <div v-for="(name, i) in weekNames" :key="i" :class="{ weekend: i >= 5 }"><b>{{ name }}</b></div>
+      <div class="calendar-grid-cell calendar-grid-header-cell" v-for="(name, i) in weekNames" :key="i"
+        :class="{ weekend: i >= 5 }"><b>{{ name }}</b></div>
     </div>
     <div v-for="(row, ri) in rows" :key="ri" class="calendar-grid-row">
-      <div v-for="(cell, ci) in row" :key="ci" class="calendar-grid-cell"
+      <div v-for="(cell, ci) in row" :key="ci" class="calendar-grid-cell calendar-grid-body-cell"
            :class="{ 'not-current-month': !cell.isCurrentMonth }">
         <p class="cell-title">
           <b>{{ cell.day }}</b>
@@ -60,6 +61,10 @@ const overflowText = (count: number): string => {
   flex-basis: 0;
   flex-shrink: 0;
 
+  overflow: hidden;
+}
+
+.calendar-grid-body-cell {
   border-top: 1px solid black;
   border-left: 1px solid black;
   border-right: 1px solid black;
@@ -74,7 +79,7 @@ const overflowText = (count: number): string => {
   overflow: hidden;
 }
 
-.calendar-grid-cell.not-current-month {
+.calendar-grid-body-cell.not-current-month {
   background: #d0d0d0;
 }
 
@@ -83,7 +88,7 @@ const overflowText = (count: number): string => {
   border-left: 0;
 }
 
-.calendar-grid-row:nth-child(n+2) .calendar-grid-cell {
+.calendar-grid-row:nth-child(n) .calendar-grid-body-cell {
   border-top: 0;
 }
 

frontend/src/components/calendar/ScheduleList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DisplayDay } from './types';
-import { MONTH_NAMES, WEEK_NAMES } from '@/utils/calendar-names';
+import { MONTH_NAMES, WEEK_NAMES } from '@/utils/i18n';
 
 defineProps<{
   days: DisplayDay[];

frontend/src/utils/calendar-names.ts

@@ -1,8 +0,0 @@
-export const MONTH_NAMES: string[] = [
-  'January', 'February', 'March', 'April', 'May', 'June',
-  'July', 'August', 'September', 'October', 'November', 'December'
-];
-
-export const WEEK_NAMES: string[] = [
-  'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
-];

frontend/src/utils/i18n.ts

@@ -3,40 +3,22 @@ export enum Language {
     SimplifiedChinese,
 }
 
+export const MONTH_NAMES: string[] = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+];
+
+export const WEEK_NAMES: string[] = [
+    "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"
+];
+
 /**
  *
  * @param month Zero-based month.
  * @returns
  */
 export function universalGetMonth(month: number): string {
-    switch (month) {
-        case 0:
-            return "January";
-        case 1:
-            return "February";
-        case 2:
-            return "March";
-        case 3:
-            return "April";
-        case 4:
-            return "May";
-        case 5:
-            return "June";
-        case 6:
-            return "July";
-        case 7:
-            return "August";
-        case 8:
-            return "September";
-        case 9:
-            return "October";
-        case 10:
-            return "November";
-        case 11:
-            return "December";
-        default:
-            return ""
-    }
+    return MONTH_NAMES[month] ?? "";
 }
 
 /**
@@ -45,22 +27,5 @@ export function universalGetMonth(month: number): string {
  * @returns
  */
 export function universalGetDayOfWeek(dayOfWeek: number): string {
-    switch (dayOfWeek) {
-        case 0:
-            return "Monday";
-        case 1:
-            return "Tuesday";
-        case 2:
-            return "Wednesday";
-        case 3:
-            return "Thursday";
-        case 4:
-            return "Friday";
-        case 5:
-            return "Saturday";
-        case 6:
-            return "Sunday";
-        default:
-            return "";
-    }
+    return WEEK_NAMES[dayOfWeek] ?? "";
 }

frontend/src/views/Calendar.vue

@@ -25,7 +25,7 @@ import {
   resolveLoopRules2Event,
   resolveLoopRules4Text,
 } from '@/utils/datetime';
-import { MONTH_NAMES, WEEK_NAMES } from '@/utils/calendar-names';
+import { MONTH_NAMES, WEEK_NAMES } from '@/utils/i18n';
 
 const token = useTokenStore();
 const router = useRouter();