naive-ui.

src/shared/layout/admin.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts"></script>
 
 <template>
-  <el-container>
-    <el-main>
+  <n-layout>
+    <n-layout-content bordered>
       <router-view></router-view>
-    </el-main>
-  </el-container>
+    </n-layout-content>
+  </n-layout>
 </template>
 
 <style scoped></style>

src/shared/layout/default.vue

@@ -5,20 +5,24 @@ import Header from "../Header/index.vue"
 </script>
 
 <template>
-  <el-container>
-    <el-header class="header">
+  <n-layout>
+    <n-layout-header bordered class="header">
       <Header />
-    </el-header>
-    <el-main>
+    </n-layout-header>
+    <n-layout-content class="content">
       <router-view></router-view>
-    </el-main>
+    </n-layout-content>
     <Login />
     <Signup />
-  </el-container>
+  </n-layout>
 </template>
 
 <style scoped>
 .header {
-  display: flex;
+  padding: 8px;
+}
+
+.content {
+  padding: 16px;
 }
 </style>