feat(layout): 添加基础布局组件并引入 normalize.css

- 新增 Header、SiderBar 和 AppMain 布局组件，使用 CSS Grid 构建应用框架
- 引入 normalize.css 以提供跨浏览器样式一致性
- 移除未使用的 store 导入并调整 main.ts 初始化逻辑

package.json

@@ -14,6 +14,7 @@
     "axios": "^1.13.6",
     "element-plus": "^2.13.5",
     "file-saver": "^2.0.5",
+    "normalize.css": "^8.0.1",
     "pinia": "^3.0.4",
     "vue": "^3.5.30",
     "vue-router": "^5.0.3"

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
+      normalize.css:
+        specifier: ^8.0.1
+        version: 8.0.1
       pinia:
         specifier: ^3.0.4
         version: 3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))
@@ -839,6 +842,9 @@ packages:
   normalize-wheel-es@1.2.0:
     resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
 
+  normalize.css@8.0.1:
+    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
+
   obug@2.1.1:
     resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
@@ -1919,6 +1925,8 @@ snapshots:
 
   normalize-wheel-es@1.2.0: {}
 
+  normalize.css@8.0.1: {}
+
   obug@2.1.1: {}
 
   path-browserify@1.0.1: {}

src/layout/components/AppMain.vue

@@ -0,0 +1,18 @@
+<template>
+  <main class="app-main">
+    Main Content Area
+  </main>
+</template>
+
+<script setup lang="ts">
+// 应用主内容区域组件逻辑
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  height: 100%;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+</style>

src/layout/components/Header.vue

@@ -0,0 +1,21 @@
+<template>
+  <header class="header">
+    Header Area
+  </header>
+</template>
+
+<script setup lang="ts">
+// 头部组件逻辑
+</script>
+
+<style lang="scss" scoped>
+.header {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+</style>

src/layout/components/SiderBar/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <aside class="sidebar">
+    Sidebar Area
+  </aside>
+</template>
+
+<script setup lang="ts">
+// 侧边栏组件逻辑
+</script>
+
+<style lang="scss" scoped>
+.sidebar {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  box-sizing: border-box;
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+}
+</style>

src/layout/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="app-wrapper">
+    <SiderBar class="sidebar-container" />
+    <Header class="header-container" />
+    <AppMain class="main-container" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SiderBar from './components/SiderBar/index.vue'
+import Header from './components/Header.vue'
+import AppMain from './components/AppMain.vue'
+</script>
+
+<style lang="scss" scoped>
+.app-wrapper {
+  display: grid;
+  width: 100vw;
+  height: 100vh;
+  /* 定义列：左侧300px，右侧自适应占据剩余空间 */
+  grid-template-columns: 300px 1fr;
+  /* 定义行：顶部88px，底部自适应占据剩余空间 */
+  grid-template-rows: 88px 1fr;
+  /* 使用 grid-template-areas 定义布局区域 */
+  grid-template-areas:
+    "sidebar header"
+    "sidebar main";
+  overflow: hidden;
+}
+
+.sidebar-container {
+  grid-area: sidebar;
+  /* 根据截图大概的深色背景占位，后续可替换 */
+  background-color: #1a1a24;
+  color: #fff;
+}
+
+.header-container {
+  grid-area: header;
+  background-color: #141419;
+  color: #fff;
+}
+
+.main-container {
+  grid-area: main;
+  background-color: #0d0d12;
+  color: #fff;
+  overflow: auto; /* 内容超出时主区域内部滚动 */
+}
+</style>

src/main.ts

@@ -1,12 +1,11 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import 'element-plus/dist/index.css'
-import store from './store'
+import 'normalize.css/normalize.css'
 import router from './router'
 
 const app = createApp(App)
 
-app.use(store)
 app.use(router)
 
 app.mount('#app')