From 3853d55fd167cd9fcdfccddbbe5bcaadc48a8ee6 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 25 Apr 2022 15:15:46 +0800
Subject: [PATCH] feat: add navbar login profile

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/core/icons.ts            |  3 ++
 src/layouts/FilledLayout.vue | 55 +++++++++++++++++++++++++++--
 src/views/posts/PostList.vue | 67 +++++++++++-------------------------
 3 files changed, 77 insertions(+), 48 deletions(-)

diff --git a/src/core/icons.ts b/src/core/icons.ts
index 72118d447..4fa29ef0e 100644
--- a/src/core/icons.ts
+++ b/src/core/icons.ts
@@ -24,6 +24,8 @@ import IconPlug from "~icons/ri/plug-2-line";
 import IconEye from "~icons/ri/eye-line";
 // @ts-ignore
 import IconFolder from "~icons/ri/folder-2-line";
+// @ts-ignore
+import IconMore from "~icons/ri/more-line";
 export {
   IconDashboard,
   IconArrowRight,
@@ -38,4 +40,5 @@ export {
   IconPlug,
   IconEye,
   IconFolder,
+  IconMore,
 };
diff --git a/src/layouts/FilledLayout.vue b/src/layouts/FilledLayout.vue
index 9407114d1..42b6798f7 100644
--- a/src/layouts/FilledLayout.vue
+++ b/src/layouts/FilledLayout.vue
@@ -5,6 +5,27 @@
         <img :src="logo" alt="Halo Logo" style="width: 78px" />
       </div>
       <VRoutesMenu :menus="menus" />
+      <div class="current-profile">
+        <div class="profile-avatar">
+          <img class="h-11 w-11 rounded-full" src="https://halo.run/logo" />
+        </div>
+        <div class="profile-name">
+          <div class="flex font-medium text-sm">Ryan Wang</div>
+          <div class="flex">
+            <VTag>
+              <template #leftIcon>
+                <IconUserSettings />
+              </template>
+              管理员
+            </VTag>
+          </div>
+        </div>
+        <div
+          class="profile-control transition-all hover:bg-gray-100 rounded cursor-pointer p-1"
+        >
+          <IconMore />
+        </div>
+      </div>
     </aside>
     <main class="content w-full overflow-y-auto">
       <slot />
@@ -14,18 +35,48 @@
 
 <script lang="ts" setup>
 import { VRoutesMenu } from "@/components/base/menu";
+import { VTag } from "@/components/base/tag";
 import { menus } from "@/router/menus.config";
 import logo from "@/assets/logo.svg";
+import { IconMore, IconUserSettings } from "@/core/icons";
 </script>
 
 <style lang="scss">
 .navbar {
-  width: 260px;
+  width: 270px;
   z-index: 999;
   box-shadow: 0 4px 4px #f6c6ce;
+  padding-bottom: 70px;
+
+  .current-profile {
+    background: #fff;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 270px;
+    height: 70px;
+    display: flex;
+    @apply p-3;
+
+    .profile-avatar {
+      @apply self-center;
+      @apply flex;
+    }
+
+    .profile-name {
+      @apply self-center;
+      @apply flex-1;
+      @apply ml-3;
+    }
+
+    .profile-control {
+      @apply self-center;
+    }
+  }
 }
+
 .content {
-  margin-left: 260px;
+  margin-left: 270px;
   display: flex;
   flex: auto;
   flex-direction: column;
diff --git a/src/views/posts/PostList.vue b/src/views/posts/PostList.vue
index 5eff544a8..77a530431 100644
--- a/src/views/posts/PostList.vue
+++ b/src/views/posts/PostList.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import FilledLayout from "@/layouts/FilledLayout.vue";
 import { VButton } from "@/components/base/button";
+import { VTag } from "@/components/base/tag";
 import { IconBookRead } from "@/core/icons";
 </script>
 <template>
@@ -21,54 +22,22 @@ import { IconBookRead } from "@/core/icons";
     <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 class="table-cell font-bold"></div>
+          <div class="table-cell font-bold">作者</div>
+          <div class="table-cell font-bold">评论</div>
+          <div class="table-cell font-bold">访问量</div>
+          <div class="table-cell font-bold">发布时间</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 v-for="i in 10" :key="i" class="table-item">
+          <div class="table-cell">
+            <div>Halo 1.5.2 发布</div>
+            <VTag>#Halo</VTag>
           </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">
+            <img src="https://halo.run/avatar" class="rounded-full w-5" />
+          </div>
+          <div class="table-cell">0</div>
+          <div class="table-cell">123</div>
           <div class="table-cell">消息文字</div>
         </div>
       </div>
@@ -87,6 +56,12 @@ import { IconBookRead } from "@/core/icons";
 
   .table-item {
     @apply table-row;
+    @apply cursor-pointer;
+    @apply transition-all;
+
+    &:hover {
+      @apply bg-gray-100;
+    }
   }
 
   .table-cell {