From aee957b64dd970d192f038f30c6b8d6799394c08 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 25 Apr 2022 11:04:00 +0800
Subject: [PATCH] perf: improve page layout

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/layouts/FilledLayout.vue |  6 +++
 src/router/routes.config.ts  |  3 +-
 src/views/AboutView.vue      |  4 +-
 src/views/HomeView.vue       |  8 +--
 src/views/posts/PostList.vue | 97 ++++++++++++++++++++++++++++++++++++
 5 files changed, 108 insertions(+), 10 deletions(-)
 create mode 100644 src/views/posts/PostList.vue

diff --git a/src/layouts/FilledLayout.vue b/src/layouts/FilledLayout.vue
index 48366dbc..9407114d 100644
--- a/src/layouts/FilledLayout.vue
+++ b/src/layouts/FilledLayout.vue
@@ -21,8 +21,14 @@ import logo from "@/assets/logo.svg";
 <style lang="scss">
 .navbar {
   width: 260px;
+  z-index: 999;
+  box-shadow: 0 4px 4px #f6c6ce;
 }
 .content {
   margin-left: 260px;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  overflow-x: hidden;
 }
 </style>
diff --git a/src/router/routes.config.ts b/src/router/routes.config.ts
index 2a6a5190..243d822a 100644
--- a/src/router/routes.config.ts
+++ b/src/router/routes.config.ts
@@ -1,6 +1,7 @@
 import type { RouteRecordRaw } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import AboutView from "../views/AboutView.vue";
+import PostList from "../views/posts/PostList.vue";
 
 export const routes: Array<RouteRecordRaw> = [
   {
@@ -16,7 +17,7 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: "/posts",
     name: "Posts",
-    component: AboutView,
+    component: PostList,
     children: [
       {
         path: "/posts/categories",
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index feda57e7..6bf69e58 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -8,8 +8,8 @@ const route = useRoute();
 <template>
   <FilledLayout>
     <div>
-      <pre class="overflow-auto w-3/4">Route: {{ route }}</pre>
-      <pre class="overflow-auto w-3/4">Route: {{ route }}</pre>
+      <pre class="overflow-auto">Route: {{ route }}</pre>
+      <pre class="overflow-auto">Route: {{ route }}</pre>
     </div>
   </FilledLayout>
 </template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4de87555..d444c758 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,12 +1,6 @@
 <template>
-  <FilledLayout>
-    <VInput v-model="value" />
-    {{ value }}
-  </FilledLayout>
+  <FilledLayout> </FilledLayout>
 </template>
 <script lang="ts" setup>
 import { FilledLayout } from "@/layouts";
-import { VInput } from "@/components/base/input";
-import { ref } from "vue";
-const value = ref();
 </script>
diff --git a/src/views/posts/PostList.vue b/src/views/posts/PostList.vue
new file mode 100644
index 00000000..5eff544a
--- /dev/null
+++ b/src/views/posts/PostList.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import FilledLayout from "@/layouts/FilledLayout.vue";
+import { VButton } from "@/components/base/button";
+import { IconBookRead } from "@/core/icons";
+</script>
+<template>
+  <FilledLayout>
+    <div class="flex items-center justify-between p-4 bg-white">
+      <div class="flex-1 self-center min-w-0">
+        <h2 class="flex text-xl font-bold text-gray-800 truncate">
+          <IconBookRead class="self-center mr-2" />
+          <span>文章</span>
+        </h2>
+        <span class="text-gray-600 mt-8 text-sm">当前 10 篇已发布文章</span>
+      </div>
+      <div class="self-center">
+        <VButton type="secondary">发布</VButton>
+      </div>
+    </div>
+
+    <div class="p-4">
+      <div class="table-container">
+        <div class="table-item">
+          <div class="table-cell font-bold">key</div>
+          <div class="table-cell font-bold">value</div>
+          <div class="table-cell font-bold">value</div>
+          <div class="table-cell font-bold">value</div>
+          <div class="table-cell font-bold">value</div>
+        </div>
+        <div class="table-item">
+          <div class="table-cell">message</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+        </div>
+        <div class="table-item hover:bg-black hover:text-white">
+          <div class="table-cell">message</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+        </div>
+        <div class="table-item">
+          <div class="table-cell">message</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell w-72">
+            消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字
+          </div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+        </div>
+        <div class="table-item">
+          <div class="table-cell">message</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字消息文字消息文字消息文字消息文字</div>
+          <div class="table-cell">消息文字</div>
+        </div>
+        <div class="table-item">
+          <div class="table-cell">message</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+        </div>
+        <div class="table-item">
+          <div class="table-cell">message</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+          <div class="table-cell">消息文字</div>
+        </div>
+      </div>
+    </div>
+  </FilledLayout>
+</template>
+
+<style lang="scss">
+.table-container {
+  @apply table;
+  @apply w-full;
+  border: 1px solid #fff;
+  background: #fff;
+
+  border-radius: 4px;
+
+  .table-item {
+    @apply table-row;
+  }
+
+  .table-cell {
+    display: table-cell;
+    padding: 10px;
+  }
+}
+</style>