<template>
    <div class="page-container">
        <!-- 统计卡片 -->
        <div class="statCards">
            <StatCards />
        </div>

        <!-- 主工作区 -->
        <div class="mainWorkspace">
            <MainWorkspace @refresh="refresh" />
        </div>

        <!-- 任务列表 -->
        <TaskList ref="taskListRef" />
    </div>
</template>
<script setup>
import { ref } from 'vue'
import StatCards from './components/StatCards.vue'
import MainWorkspace from './components/MainWorkspace.vue'
import TaskList from './components/TaskList.vue'

const taskListRef = ref()
const refresh = () => {
    taskListRef.value.getTaskList()
}
</script>
<style lang="scss" scoped>
.page-container {
    width: 100%;
    height: 100%;
    overflow: auto;

    .statCards {
        margin-bottom: 12px;
    }

    .mainWorkspace {
        margin-bottom: 12px;
    }
}
</style>
