skytek_xinliang
138 lines
3.9 KiB
Vue
138 lines
3.9 KiB
Vue
<template>
|
|
<v-sheet class="bg-surface" v-bind="$attrs">
|
|
<!-- Header Section -->
|
|
<DashboardHeader
|
|
class="mb-4"
|
|
:greeting-title="props.greetingTitle"
|
|
:projects="props.statProjects"
|
|
:team="props.statTeam"
|
|
:todo="props.statTodo"
|
|
:user-avatar="props.userAvatar"
|
|
:weather-info="props.weatherInfo"
|
|
/>
|
|
|
|
<v-row>
|
|
<!-- Left Column (Main) -->
|
|
<v-col cols="12" md="8">
|
|
<!-- Applications Card -->
|
|
<DashboardApps
|
|
:apps="props.applications"
|
|
class="mb-4"
|
|
:title="props.appsTitle"
|
|
@app-click="$emit('app-click', $event)"
|
|
@view-all="$emit('view-all-apps')"
|
|
/>
|
|
|
|
<!-- School Announcements (Dynamic) -->
|
|
<DashboardAnnouncements
|
|
:announcements="props.announcements"
|
|
:title="props.announcementsTitle"
|
|
@item-click="$emit('announcement-click', $event)"
|
|
@view-more="$emit('view-more-announcements')"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Right Column (Side) -->
|
|
<v-col cols="12" md="4">
|
|
<!-- Quick Nav -->
|
|
<DashboardQuickNav
|
|
class="mb-4"
|
|
:navs="props.quickNavs"
|
|
:title="props.quickNavTitle"
|
|
@nav-click="$emit('nav-click', $event)"
|
|
/>
|
|
|
|
<!-- To-Do List -->
|
|
<DashboardTodoList
|
|
class="mb-4"
|
|
:title="props.todoTitle"
|
|
:todos="props.todos"
|
|
@toggle-todo="$emit('toggle-todo', $event)"
|
|
/>
|
|
|
|
<!-- Visit Source Chart -->
|
|
<DashboardChart :title="props.chartTitle" :value="props.chartValue" />
|
|
</v-col>
|
|
</v-row>
|
|
</v-sheet>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import DashboardAnnouncements from './base/dashboard/DashboardAnnouncements.vue'
|
|
import DashboardApps from './base/dashboard/DashboardApps.vue'
|
|
import DashboardChart from './base/dashboard/DashboardChart.vue'
|
|
import DashboardHeader from './base/dashboard/DashboardHeader.vue'
|
|
import DashboardQuickNav from './base/dashboard/DashboardQuickNav.vue'
|
|
import DashboardTodoList from './base/dashboard/DashboardTodoList.vue'
|
|
|
|
defineEmits([
|
|
'view-all-apps',
|
|
'app-click',
|
|
'view-more-announcements',
|
|
'announcement-click',
|
|
'nav-click',
|
|
'toggle-todo',
|
|
])
|
|
|
|
interface DashboardApp {
|
|
name: string
|
|
desc: string
|
|
icon: string
|
|
color: string
|
|
group: string
|
|
date: string
|
|
}
|
|
|
|
interface Announcement {
|
|
title: string
|
|
author: string
|
|
time: string
|
|
avatarSrc?: string | null
|
|
avatarColor?: string
|
|
}
|
|
|
|
interface QuickNav {
|
|
icon: string
|
|
title: string
|
|
color: string
|
|
}
|
|
|
|
interface Todo {
|
|
title: string
|
|
due: string
|
|
done: boolean
|
|
}
|
|
|
|
const props = defineProps({
|
|
// Header
|
|
userAvatar: {
|
|
type: String,
|
|
default:
|
|
'https://avataaars.io/?avatarStyle=Circle&topType=ShortHairShortFlat&accessoriesType=Sunglasses&hairColor=Blonde&facialHairType=Blank&clotheType=Hoodie&clotheColor=Red&eyeType=Happy&eyebrowType=Default&mouthType=Smile&skinColor=Light',
|
|
},
|
|
greetingTitle: { type: String, default: '早安，校長！開始您一天的工作吧！' },
|
|
weatherInfo: { type: String, default: '今日晴，20℃ - 32℃！' },
|
|
statTodo: { type: String, default: '2/10' },
|
|
statProjects: { type: String, default: '8' },
|
|
statTeam: { type: String, default: '300' },
|
|
|
|
// Apps
|
|
appsTitle: { type: String, default: '應用程式' },
|
|
applications: { type: Array as () => DashboardApp[], default: () => [] },
|
|
|
|
// Announcements
|
|
announcementsTitle: { type: String, default: '學校公告' },
|
|
announcements: { type: Array as () => Announcement[], default: () => [] },
|
|
|
|
// Right Side
|
|
quickNavTitle: { type: String, default: '快速導航' },
|
|
quickNavs: { type: Array as () => QuickNav[], default: () => [] },
|
|
|
|
todoTitle: { type: String, default: '待辦事項' },
|
|
todos: { type: Array as () => Todo[], default: () => [] },
|
|
|
|
chartTitle: { type: String, default: '訪問來源' },
|
|
chartValue: { type: Number, default: 75 },
|
|
})
|
|
</script>
|