84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { NScrollbar } from 'naive-ui'
|
|
/** 工作区固定标题和操作区；仅内容容器滚动，不向 document 传播滚动。 */
|
|
defineProps<{ split?: boolean; compact?: boolean }>()
|
|
</script>
|
|
<template>
|
|
<section class="workspace-page" :class="{ 'content-first-workspace': compact }">
|
|
<NScrollbar v-if="$slots.header" class="workspace-heading-scroll"
|
|
><header class="workspace-heading"><slot name="header" /></header
|
|
></NScrollbar>
|
|
<div v-if="split" class="workspace-split"><slot /></div>
|
|
<NScrollbar v-else class="workspace-scroll" content-class="workspace-scroll-content"><slot /></NScrollbar>
|
|
</section>
|
|
</template>
|
|
|
|
<style>
|
|
/* 本组件专属布局与 Naive 内部结构覆盖。 */
|
|
@reference "../../styles/styles.css";
|
|
.workspace-page {
|
|
@apply relative h-full flex flex-col min-h-0 overflow-hidden;
|
|
}
|
|
.workspace-heading-scroll.n-scrollbar {
|
|
@apply shrink-0 h-auto max-h-[min(35dvh,260px)] overflow-hidden;
|
|
}
|
|
.workspace-heading {
|
|
@apply pt-4 px-6 pb-3;
|
|
}
|
|
.content-first-workspace .workspace-heading {
|
|
@apply py-2 px-5;
|
|
}
|
|
.content-first-workspace .workspace-split {
|
|
@apply pt-0 px-5 pb-3 gap-2;
|
|
}
|
|
.content-first-workspace .workspace-scroll-content {
|
|
@apply pt-0 px-5 pb-4;
|
|
}
|
|
.workspace-heading h2 {
|
|
@apply text-base;
|
|
}
|
|
.workspace-heading .text-sm {
|
|
@apply text-xs;
|
|
}
|
|
.workspace-heading .production-controls {
|
|
@apply gap-3;
|
|
}
|
|
.workspace-heading .n-input-number {
|
|
@apply w-full;
|
|
}
|
|
.workspace-scroll {
|
|
@apply flex-1 min-h-0;
|
|
}
|
|
.workspace-scroll-content {
|
|
@apply pt-1 px-6 pb-6;
|
|
}
|
|
.workspace-scroll > .n-scrollbar-container {
|
|
@apply overscroll-contain;
|
|
}
|
|
.workspace-split {
|
|
@apply flex flex-col flex-1 min-h-0 overflow-hidden pt-1 px-6 pb-5 gap-3;
|
|
}
|
|
.workspace-split > .my-6 {
|
|
@apply m-0 shrink-0;
|
|
}
|
|
@media (max-width: 760px) {
|
|
.workspace-heading {
|
|
@apply p-3;
|
|
}
|
|
.content-first-workspace .workspace-heading {
|
|
@apply py-2 px-3;
|
|
}
|
|
.content-first-workspace .workspace-split,
|
|
.content-first-workspace .workspace-scroll-content {
|
|
@apply pt-0 px-3 pb-3;
|
|
}
|
|
.workspace-scroll-content,
|
|
.workspace-split {
|
|
@apply pt-0 px-3 pb-3;
|
|
}
|
|
.workspace-heading .production-controls {
|
|
@apply grid-cols-[minmax(100px,_1fr)_80px];
|
|
}
|
|
}
|
|
</style>
|