66 lines
1.8 KiB
Vue
66 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import {
|
|
buildWorkbenchActivityItems,
|
|
buildWorkbenchBannerSummary,
|
|
buildWorkbenchKpiCards,
|
|
buildWorkbenchProjectItems,
|
|
buildWorkbenchTodoItems
|
|
} from './homepage';
|
|
import {
|
|
workbenchActivityMock,
|
|
workbenchBannerSummaryMock,
|
|
workbenchKpiMock,
|
|
workbenchProjectMock,
|
|
workbenchTodoMock
|
|
} from './mock';
|
|
import WorkbenchBanner from './modules/workbench-banner.vue';
|
|
import WorkbenchKpi from './modules/workbench-kpi.vue';
|
|
import WorkbenchTodoPanel from './modules/workbench-todo-panel.vue';
|
|
import WorkbenchActivityPanel from './modules/workbench-activity-panel.vue';
|
|
import WorkbenchProjectGrid from './modules/workbench-project-grid.vue';
|
|
|
|
defineOptions({ name: 'Workbench' });
|
|
|
|
const bannerSummary = computed(() => buildWorkbenchBannerSummary(workbenchBannerSummaryMock));
|
|
const kpiCards = computed(() => buildWorkbenchKpiCards(workbenchKpiMock));
|
|
const todoItems = computed(() => buildWorkbenchTodoItems(workbenchTodoMock));
|
|
const activityItems = computed(() => buildWorkbenchActivityItems(workbenchActivityMock));
|
|
const projectItems = computed(() => buildWorkbenchProjectItems(workbenchProjectMock));
|
|
</script>
|
|
|
|
<template>
|
|
<div class="workbench">
|
|
<WorkbenchBanner :summary="bannerSummary" />
|
|
|
|
<WorkbenchKpi :cards="kpiCards" />
|
|
|
|
<section class="workbench__main">
|
|
<WorkbenchTodoPanel :items="todoItems" />
|
|
<WorkbenchActivityPanel :items="activityItems" />
|
|
</section>
|
|
|
|
<WorkbenchProjectGrid :items="projectItems" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.workbench {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.workbench__main {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
@media (width <= 1280px) {
|
|
.workbench__main {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|