skytek_xinliang
84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<template>
|
||
<page-index
|
||
:is-news-dialog-open="isNewsDialogOpen"
|
||
:news-items="newsItems"
|
||
:quick-items="quickItems"
|
||
:selected-news="selectedNews"
|
||
@message-center="handleMessageCenter"
|
||
@news="handleNews"
|
||
@quick="handleQuick"
|
||
@update:is-news-dialog-open="isNewsDialogOpen = $event"
|
||
/>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import PageIndex from '@/components/PageIndex.vue'
|
||
import { useMessageStore } from '@/stores/messages'
|
||
import { useSnackbarStore } from '@/stores/snackbar'
|
||
|
||
const snackbar = useSnackbarStore()
|
||
const messageStore = useMessageStore()
|
||
|
||
const newsItems = [
|
||
{
|
||
id: 1,
|
||
date: '29',
|
||
month: '1月',
|
||
title: '113學年度第2學期加退選開始',
|
||
desc: '加退選時間為1月29日至2月9日止，請同學把握時間完成選課作業。',
|
||
dept: '教務處',
|
||
views: '1,234',
|
||
isNew: true,
|
||
},
|
||
{
|
||
id: 2,
|
||
date: '27',
|
||
month: '1月',
|
||
title: '場地借用系統維護通知',
|
||
desc: '系統將於本週六凌晨01:00-05:00進行維護，期間暫停服務。',
|
||
dept: '總務處',
|
||
views: '856',
|
||
isNew: false,
|
||
},
|
||
{
|
||
id: 3,
|
||
date: '25',
|
||
month: '1月',
|
||
title: '112學年度第1學期期末成績已開放查詢',
|
||
desc: '同學可至「查詢 > 教務資訊查詢 > 學期成績查詢」查看本學期成績。',
|
||
dept: '教務處',
|
||
views: '3,567',
|
||
isNew: false,
|
||
},
|
||
]
|
||
|
||
type NewsItem = (typeof newsItems)[number]
|
||
|
||
const quickItems = [
|
||
{ icon: '➕', title: '線上加選' },
|
||
{ icon: '➖', title: '線上退選' },
|
||
{ icon: '📊', title: '成績查詢' },
|
||
{ icon: '📅', title: '個人課表' },
|
||
{ icon: '📝', title: '網路請假' },
|
||
{ icon: '🏢', title: '場地借用' },
|
||
]
|
||
|
||
const selectedNews = ref<NewsItem | null>(null)
|
||
const isNewsDialogOpen = ref(false)
|
||
|
||
function handleNews(item: NewsItem) {
|
||
selectedNews.value = item
|
||
isNewsDialogOpen.value = true
|
||
}
|
||
|
||
// 點擊首頁「訊息中心」卡片，開啟共用的訊息清單 dialog
|
||
function handleMessageCenter() {
|
||
messageStore.open()
|
||
}
|
||
|
||
function handleQuick(item: (typeof quickItems)[number]) {
|
||
snackbar.show({ message: `前往：${item.title}`, color: 'info' })
|
||
}
|
||
</script>
|