1

app/src/components/MainContent/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <main class="main-content">
+    <div class="main-content-container">
+      <TheClock />
+      <TheSearchBar />
+      <GridCanvas />
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+
+import TheClock from '@/components/TheClock/index.vue';
+
+import TheSearchBar from '@/components/TheSearchBar/index.vue';
+
+import GridCanvas from '@/components/GridCanvas/index.vue';
+
+</script>
+
+<style lang="scss" scoped>
+.main-content {
+  padding-left: var(--sidebar-width); // 与侧栏宽度保持一致
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start; // 内容顶部对齐
+  overflow-y: auto;
+}
+
+.main-content-container {
+  width: 100%;
+  max-width: var(--content-max-width); // 内容区域最大宽度
+  padding: var(--content-padding); // 内容区内边距
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>