doocus first ver

ui/doocus-app/src/App.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import Panel from '@framework/components/Panel.vue'
+import SplitPane from '@framework/components/SplitPane.vue'
+import DocPicker from '@/components/DocPicker.vue'
+import DocViewer from '@/components/DocViewer.vue'
+import MetadataPanel from '@/components/MetadataPanel.vue'
+import ExportBar from '@/components/ExportBar.vue'
+</script>
+
+<template>
+  <div class="app">
+    <header class="topbar">
+      <span class="brand">doocus</span>
+      <span class="spacer" />
+      <ExportBar />
+    </header>
+
+    <main class="body">
+      <SplitPane :initial-size="0.9" :min="0.5" :max="2">
+        <template #first>
+          <Panel title="Documents">
+            <DocPicker />
+          </Panel>
+        </template>
+        <template #second>
+          <SplitPane :initial-size="2.2" :min="1" :max="5">
+            <template #first>
+              <Panel title="Content">
+                <DocViewer />
+              </Panel>
+            </template>
+            <template #second>
+              <Panel title="Metadata">
+                <MetadataPanel />
+              </Panel>
+            </template>
+          </SplitPane>
+        </template>
+      </SplitPane>
+    </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;
+}
+.spacer {
+  flex: 1;
+}
+.body {
+  flex: 1;
+  min-height: 0;
+  padding: var(--space-2);
+}
+</style>