81 lines
3.2 KiB
Vue
81 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, computed } from 'vue'
|
|
import Panel from '@framework/components/Panel.vue'
|
|
import SplitPane from '@framework/components/SplitPane.vue'
|
|
import FileTree from '@/components/FileTree.vue'
|
|
import DocDetail from '@/components/DocDetail.vue'
|
|
import ExportBar from '@/components/ExportBar.vue'
|
|
import { store, loadTree } from '@/store'
|
|
|
|
onMounted(loadTree)
|
|
|
|
const detailTitle = computed(() =>
|
|
store.detail?.node.mode === 'meeting' ? 'Meeting' : 'File')
|
|
const barLabel = computed(() => store.detail?.node.name ?? 'viewer')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app">
|
|
<header class="topbar">
|
|
<span class="brand">doocus</span>
|
|
<span v-if="store.counts.total" class="counts">
|
|
{{ store.counts.total }} files · {{ store.counts.extracted }} extracted ·
|
|
{{ store.counts.link }} linked · {{ store.counts.meeting }} meetings
|
|
</span>
|
|
<span class="spacer" />
|
|
<ExportBar />
|
|
</header>
|
|
|
|
<main class="body">
|
|
<div v-if="store.error" class="err">{{ store.error }}</div>
|
|
|
|
<!-- expanded: resizable tree / viewer split -->
|
|
<SplitPane v-else-if="!store.detailCollapsed" direction="vertical" :initial-size="0.9" :min="0.2" :max="4">
|
|
<template #first>
|
|
<Panel title="Tree"><FileTree :items="store.tree" /></Panel>
|
|
</template>
|
|
<template #second>
|
|
<Panel :title="detailTitle">
|
|
<template #actions>
|
|
<button class="chev" title="Collapse viewer" @click="store.detailCollapsed = true">▾</button>
|
|
</template>
|
|
<DocDetail />
|
|
</Panel>
|
|
</template>
|
|
</SplitPane>
|
|
|
|
<!-- collapsed: tree fills, viewer is a bar docked at the bottom -->
|
|
<div v-else class="stack">
|
|
<Panel title="Tree" class="grow"><FileTree :items="store.tree" /></Panel>
|
|
<button class="expand-bar" title="Expand viewer" @click="store.detailCollapsed = false">
|
|
▴ <span>{{ barLabel }}</span>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app { display: flex; flex-direction: column; height: 100%; }
|
|
.topbar {
|
|
display: flex; align-items: center; gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--surface-1); border-bottom: var(--panel-border); flex-shrink: 0;
|
|
}
|
|
.brand { font-weight: 700; letter-spacing: 0.02em; }
|
|
.counts { color: var(--text-secondary); font-size: var(--font-size-sm); }
|
|
.spacer { flex: 1; }
|
|
.body { flex: 1; min-height: 0; padding: var(--space-2); }
|
|
.err { color: var(--status-error, #e0a030); padding: var(--space-4); }
|
|
.stack { display: flex; flex-direction: column; height: 100%; gap: var(--space-2); }
|
|
.grow { flex: 1; min-height: 0; }
|
|
.expand-bar {
|
|
flex-shrink: 0; display: flex; align-items: center; gap: var(--space-2);
|
|
justify-content: flex-start; text-align: left; width: 100%;
|
|
background: var(--surface-2); border: var(--panel-border); border-radius: var(--panel-radius);
|
|
padding: var(--space-1) var(--space-3); color: var(--text-secondary);
|
|
}
|
|
.expand-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.chev { padding: 0 var(--space-2); background: transparent; border: 0; color: var(--text-secondary); }
|
|
</style>
|