up

frontend/ops_vue_js/src/i18n/en.json

@@ -187,6 +187,12 @@
     "not_your_schedule": "This is not your schedule",
     "someone_schedule": "Created by {name}"
   },
+  "home": {
+    "today_schedule_count": "Today: {count} schedule(s)",
+    "today_no_schedule": "No schedules today",
+    "loading": "Loading...",
+    "today": "Today: {date}"
+  },
   "message": {
     "functionality_not_yet_developed": "Functionality not yet developed",
     "hello": "Hello",

frontend/ops_vue_js/src/i18n/zh-CN.json

@@ -187,6 +187,12 @@
     "not_your_schedule": "这不是你的日程",
     "someone_schedule": "{name} 创建的日程"
   },
+  "home": {
+    "today_schedule_count": "今日共 {count} 个日程",
+    "today_no_schedule": "今日暂无日程",
+    "loading": "加载中...",
+    "today": "今日：{date}"
+  },
   "message": {
     "functionality_not_yet_developed": "功能未开发",
     "hello": "你好",

frontend/ops_vue_js/src/views/HomeView.vue

@@ -1,33 +1,143 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user'
+import { useUsersStore } from '@/stores/users'
 import { usePageTitle } from '@/composables/usePageTitle'
+import { scheduleApi } from '@/api/schedule'
+import { ref, computed, onMounted } from 'vue'
 
 usePageTitle('appname.home')
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const userStore = useUserStore()
+const usersStore = useUsersStore()
 
-const features = computed(() => [
-  // { title: t('appname.schedule'), desc: '—' },
-  // { title: t('appname.purchase'), desc: '—' },
-  // { title: t('appname.warehouse'), desc: '—' },
-])
+// 今日日程数据
+const todaySchedules = ref([])
+const loadingSchedules = ref(false)
 
-import { computed } from 'vue'
+// 获取今日日期字符串
+const todayStr = computed(() => {
+  const today = new Date()
+  return today.toISOString().split('T')[0]
+})
+
+// 格式化今日日期显示
+const todayDisplay = computed(() => {
+  const today = new Date()
+  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  const weekdaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+  const day = today.getDay()
+  const dayNum = today.getDate()
+
+  // 根据语言返回不同格式
+  if (locale.value === 'en') {
+    return `${dayNum} ${weekdaysEn[day]}`
+  }
+  return `${today.getMonth() + 1}月${dayNum}日 ${weekdays[day]}`
+})
+
+// 今日日程数量
+const todayCount = computed(() => todaySchedules.value.length)
+
+// 获取今日日程
+async function fetchTodaySchedules() {
+  loadingSchedules.value = true
+  try {
+    const { errCode, data } = await scheduleApi.getEvents({
+      start: todayStr.value,
+      end: todayStr.value
+    })
+    if (errCode === 0 && data?.list) {
+      todaySchedules.value = data.list
+    }
+  } catch (e) {
+    console.error('获取今日日程失败', e)
+  } finally {
+    loadingSchedules.value = false
+  }
+}
+
+// 获取用户名
+function getUsername(userId) {
+  if (!userId) return ''
+  return usersStore.getUsernameFromUserID(userId) || `用户${userId}`
+}
+
+// 格式化时间
+function formatTime(dateStr) {
+  const d = new Date(dateStr)
+  return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
+}
+
+// 格式化日期
+function formatDate(dateStr) {
+  return dateStr
+}
+
+onMounted(() => {
+  fetchTodaySchedules()
+})
 </script>
 
 <template>
   <div class="mx-auto max-w-6xl px-6 py-6">
     <h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-white">{{ t('message.welcome') }}</h2>
 
+    <!-- 日程卡片 -->
+    <div class="mb-6 rounded-xl border border-gray-200 bg-white px-5 py-4 dark:border-dk-muted dark:bg-dk-card">
+      <div class="mb-3 flex items-center justify-between">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('appname.schedule') }}</h3>
+        <span class="text-sm text-gray-500 dark:text-gray-400">{{ t('home.today', { date: todayDisplay }) }}</span>
+      </div>
+
+      <!-- 加载状态 -->
+      <div v-if="loadingSchedules" class="py-4 text-center text-gray-500">
+        {{ t('home.loading') }}
+      </div>
+
+      <!-- 日程列表 -->
+      <div v-else-if="todaySchedules.length > 0">
+        <div class="mb-2 text-sm text-gray-600 dark:text-gray-400">
+          {{ t('home.today_schedule_count', { count: todayCount }) }}
+        </div>
+        <ul class="space-y-2">
+          <li
+            v-for="schedule in todaySchedules"
+            :key="schedule.ID"
+            class="flex items-start gap-3 rounded-lg bg-gray-50 px-3 py-2 dark:bg-dk-base"
+          >
+            <span
+              class="whitespace-nowrap rounded px-2 py-0.5 text-sm font-medium text-white"
+              :style="{ backgroundColor: schedule.BgColor }"
+            >
+              {{ formatDate(schedule.StartDate) }}
+            </span>
+            <div class="min-w-0 flex-1">
+              <p class="truncate text-sm font-medium text-gray-800 dark:text-gray-200">
+                {{ schedule.Title }}
+              </p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ getUsername(schedule.UserID) }}
+              </p>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <!-- 无日程 -->
+      <div v-else class="py-4 text-center text-gray-500 dark:text-gray-400">
+        {{ t('home.today_no_schedule') }}
+      </div>
+    </div>
+
+    <!-- 功能入口卡片 -->
     <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      
       <div
-        v-for="feature in features"
-        :key="feature.title"
         class="rounded-xl border border-gray-200 bg-white px-5 py-4 transition-shadow hover:shadow-md dark:border-dk-muted dark:bg-dk-card"
       >
-        <p class="mb-1 text-sm text-gray-500">{{ feature.title }}</p>
-        <p class="text-lg font-bold text-gray-900 dark:text-white">{{ feature.desc }}</p>
+        <p class="mb-1 text-sm text-gray-500">{{ t('appname.purchase') }}</p>
+        <p class="text-lg font-bold text-gray-900 dark:text-white">—</p>
       </div>
     </div>
   </div>