From 29ef0d3ebc71341e48fb44c5daabe055af444578 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sat, 7 May 2022 15:52:56 +0800
Subject: [PATCH] feat: add user profile page

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/components/base/tabs/Tabbar.vue |   1 -
 src/components/base/tabs/Tabs.vue   |   4 -
 src/layouts/FilledLayout.vue        |   2 +-
 src/router/routes.config.ts         |   3 +-
 src/views/users/Profile.vue         | 175 ++++++++++++++++++++++++++++
 5 files changed, 178 insertions(+), 7 deletions(-)
 create mode 100644 src/views/users/Profile.vue

diff --git a/src/components/base/tabs/Tabbar.vue b/src/components/base/tabs/Tabbar.vue
index 3fdf229fc..fd01c2db7 100644
--- a/src/components/base/tabs/Tabbar.vue
+++ b/src/components/base/tabs/Tabbar.vue
@@ -73,7 +73,6 @@ const handleChange = (id: number | string) => {
     @apply self-center;
     @apply transition-all;
     @apply text-base;
-    @apply w-full;
     @apply justify-center;
 
     .tabbar-item-label,
diff --git a/src/components/base/tabs/Tabs.vue b/src/components/base/tabs/Tabs.vue
index 86fc00f9f..56b2320da 100644
--- a/src/components/base/tabs/Tabs.vue
+++ b/src/components/base/tabs/Tabs.vue
@@ -73,10 +73,6 @@ const handleChange = (id: string | number) => {
 .tabs-wrapper {
   @apply flex;
 
-  .tabs-items-wrapper {
-    @apply flex;
-  }
-
   &.tabs-direction-row {
     @apply flex-col;
 
diff --git a/src/layouts/FilledLayout.vue b/src/layouts/FilledLayout.vue
index 42b6798f7..c874b6353 100644
--- a/src/layouts/FilledLayout.vue
+++ b/src/layouts/FilledLayout.vue
@@ -7,7 +7,7 @@
       <VRoutesMenu :menus="menus" />
       <div class="current-profile">
         <div class="profile-avatar">
-          <img class="h-11 w-11 rounded-full" src="https://halo.run/logo" />
+          <img class="h-11 w-11 rounded-full" src="https://ryanc.cc/avatar" />
         </div>
         <div class="profile-name">
           <div class="flex font-medium text-sm">Ryan Wang</div>
diff --git a/src/router/routes.config.ts b/src/router/routes.config.ts
index 243d822af..abc799445 100644
--- a/src/router/routes.config.ts
+++ b/src/router/routes.config.ts
@@ -2,6 +2,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";
+import Profile from "../views/users/Profile.vue";
 
 export const routes: Array<RouteRecordRaw> = [
   {
@@ -69,7 +70,7 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: "/users",
     name: "Users",
-    component: AboutView,
+    component: Profile,
   },
   {
     path: "/settings",
diff --git a/src/views/users/Profile.vue b/src/views/users/Profile.vue
new file mode 100644
index 000000000..e1dfc373c
--- /dev/null
+++ b/src/views/users/Profile.vue
@@ -0,0 +1,175 @@
+<template>
+  <FilledLayout>
+    <header class="bg-white">
+      <div class="h-48 bg-gradient-to-r from-gray-800 to-red-500"></div>
+      <div class="mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="-mt-12 sm:-mt-16 flex items-end space-x-5">
+          <div class="flex">
+            <img
+              alt="Avatar"
+              class="h-24 w-24 rounded-full ring-4 ring-white sm:h-32 sm:w-32 drop-shadow-lg"
+              src="https://ryanc.cc/avatar"
+            />
+          </div>
+          <div
+            class="mt-6 sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1"
+          >
+            <div class="block mt-6 min-w-0 flex-1">
+              <span>i@ryanc.cc</span>
+              <h1 class="text-xl font-bold text-gray-900 truncate">
+                Ryan Wang
+              </h1>
+            </div>
+            <div
+              class="hidden mt-6 md:flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4"
+            >
+              <VButton type="default">退出登录</VButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+    <section class="bg-white p-4 sm:px-6 lg:px-8">
+      <VTabs v-model:activeId="activeTab">
+        <VTabItem id="general" label="基本资料">
+          <form class="space-y-8 divide-y divide-gray-200">
+            <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+              <div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
+                <div
+                  class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                >
+                  <label
+                    class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+                  >
+                    用户名
+                  </label>
+                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                    <div class="max-w-lg flex shadow-sm">
+                      <VInput modelValue="ryanwang" />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                >
+                  <label
+                    class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+                  >
+                    昵称
+                  </label>
+                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                    <div class="max-w-lg flex shadow-sm">
+                      <VInput modelValue="Ryan Wang" />
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                >
+                  <label
+                    class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+                  >
+                    电子邮箱
+                  </label>
+                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                    <div class="max-w-lg flex shadow-sm">
+                      <VInput modelValue="i@ryanc.cc" />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                >
+                  <label
+                    class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+                  >
+                    个人说明
+                  </label>
+                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                    <div class="max-w-lg flex shadow-sm">
+                      <VTextarea modelValue="Halo" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="pt-5">
+              <div class="flex justify-start">
+                <VButton type="secondary"> 保存</VButton>
+              </div>
+            </div>
+          </form>
+        </VTabItem>
+        <VTabItem id="password" label="密码">
+          <form class="space-y-8 divide-y divide-gray-200">
+            <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+              <div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
+                <div
+                  class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                >
+                  <label
+                    class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+                  >
+                    原密码
+                  </label>
+                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                    <div class="max-w-lg flex shadow-sm">
+                      <VInput />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                >
+                  <label
+                    class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+                  >
+                    新密码
+                  </label>
+                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                    <div class="max-w-lg flex shadow-sm">
+                      <VInput />
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                >
+                  <label
+                    class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+                  >
+                    确认密码
+                  </label>
+                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                    <div class="max-w-lg flex shadow-sm">
+                      <VInput />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="pt-5">
+              <div class="flex justify-start">
+                <VButton type="secondary">修改密码</VButton>
+              </div>
+            </div>
+          </form>
+        </VTabItem>
+      </VTabs>
+    </section>
+  </FilledLayout>
+</template>
+<script lang="ts" setup>
+import { FilledLayout } from "@/layouts";
+import { VButton } from "@/components/base/button";
+import { VInput } from "@/components/base/input";
+import { VTextarea } from "@/components/base/textarea";
+import { VTabItem, VTabs } from "@/components/base/tabs";
+import { ref } from "vue";
+
+const activeTab = ref("general");
+</script>