From fe0314015cdcb95fffabf8a7be18caea83fefcc6 Mon Sep 17 00:00:00 2001
From: yyc12345 <yyc12321@outlook.com>
Date: Fri, 17 Jul 2026 21:02:27 +0800
Subject: [PATCH] feat: commit ai-produced frontend first

---
 frontend/src/components/DateTimePicker.vue    |  2 +-
 .../calendar-event/EventLoopEditor.vue        |  2 +-
 .../src/components/calendar/CalendarGrid.vue  | 13 ++--
 .../src/components/calendar/ScheduleList.vue  |  2 +-
 frontend/src/utils/calendar-names.ts          |  8 ---
 frontend/src/utils/i18n.ts                    | 65 +++++--------------
 frontend/src/views/Calendar.vue               |  2 +-
 7 files changed, 28 insertions(+), 66 deletions(-)
 delete mode 100644 frontend/src/utils/calendar-names.ts

diff --git a/frontend/src/components/DateTimePicker.vue b/frontend/src/components/DateTimePicker.vue
index 15bbf58..3ce5ac0 100644
--- a/frontend/src/components/DateTimePicker.vue
+++ b/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;
diff --git a/frontend/src/components/calendar-event/EventLoopEditor.vue b/frontend/src/components/calendar-event/EventLoopEditor.vue
index 0f543f4..0dc9560 100644
--- a/frontend/src/components/calendar-event/EventLoopEditor.vue
+++ b/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';
diff --git a/frontend/src/components/calendar/CalendarGrid.vue b/frontend/src/components/calendar/CalendarGrid.vue
index 095a040..90a7750 100644
--- a/frontend/src/components/calendar/CalendarGrid.vue
+++ b/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;
 }
 
diff --git a/frontend/src/components/calendar/ScheduleList.vue b/frontend/src/components/calendar/ScheduleList.vue
index 071a199..b33ae57 100644
--- a/frontend/src/components/calendar/ScheduleList.vue
+++ b/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[];
diff --git a/frontend/src/utils/calendar-names.ts b/frontend/src/utils/calendar-names.ts
deleted file mode 100644
index 9a56892..0000000
--- a/frontend/src/utils/calendar-names.ts
+++ /dev/null
@@ -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'
-];
diff --git a/frontend/src/utils/i18n.ts b/frontend/src/utils/i18n.ts
index 547a780..0fb462b 100644
--- a/frontend/src/utils/i18n.ts
+++ b/frontend/src/utils/i18n.ts
@@ -3,64 +3,29 @@ 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 
+ * @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] ?? "";
 }
 
 /**
- * 
+ *
  * @param dayOfWeek Zero-based day of week
- * @returns 
+ * @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] ?? "";
 }
diff --git a/frontend/src/views/Calendar.vue b/frontend/src/views/Calendar.vue
index d02037a..e409b91 100644
--- a/frontend/src/views/Calendar.vue
+++ b/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();