u

code/container-ocr/ocr-vue/src/layout/index.vue

@@ -0,0 +1,98 @@
+<script lang="js" setup>
+import Menu from "./components/menu.vue";
+import Topbar from "./components/topbar.vue";
+import Tab from "./components/tab.vue";
+import Content from "./components/content.vue";
+const isCollapse = ref(false);
+const leftSize = ref(220);
+const fullScreen = ref(false);
+
+function handleCollapse() {
+  if (leftSize.value < 220) {
+    leftSize.value = 220;
+    isCollapse.value = false;
+  } else {
+    leftSize.value = 0;
+    isCollapse.value = true;
+  }
+}
+
+function handleResizeEnd(index, sizes) {
+  if (sizes[0] < 220) {
+    isCollapse.value = true;
+  } else {
+    isCollapse.value = false;
+  }
+  leftSize.value = sizes[0];
+}
+
+function onFullScreenChange(val) {
+  fullScreen.value = val;
+
+  if (fullScreen.value) {
+    leftSize.value = 0;
+  } else {
+    handleCollapse();
+  }
+}
+</script>
+
+<template>
+  <div class="g3-layout">
+    <el-splitter @resize-end="handleResizeEnd">
+      <el-splitter-panel :min="0" :size="leftSize" :max="400">
+        <div class="g3-layout-left">
+          <Menu />
+        </div>
+      </el-splitter-panel>
+      <el-splitter-panel>
+        <div class="g3-layout-right">
+          <Topbar
+            :collapse="isCollapse"
+            @collapse="handleCollapse"
+            :style="fullScreen ? { height: '0', border: 'none' } : {}"
+          />
+          <Tab @full-screen-change="onFullScreenChange" />
+          <Content />
+        </div>
+      </el-splitter-panel>
+    </el-splitter>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.g3-layout {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: #fafafa;
+  overflow: hidden;
+
+  :deep(.el-splitter-bar__dragger-horizontal::after),
+  :deep(.el-splitter-bar__dragger-horizontal::before) {
+    width: 1px;
+  }
+
+  :deep(.el-splitter-bar__dragger::after),
+  :deep(.el-splitter-bar__dragger::before) {
+    background-color: #fff;
+  }
+}
+
+.g3-layout-left {
+  flex-shrink: 0;
+  height: 100%;
+  overflow: hidden;
+  border-right: 1px solid #bfbfc6;
+  box-shadow: 3px 0 8px rgba(0, 0, 0, 0.05);
+  transition: width 0.3s ease;
+}
+
+.g3-layout-right {
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+</style>