github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: add user profile page 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-05-07 15:52:56 +08:00
parent d08195a3c6
commit ff3d495a6b
5 changed files with 178 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/base/tabs/Tabbar.vue
View File

@ -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,

4
src/components/base/tabs/Tabs.vue
View File

@ -73,10 +73,6 @@ const handleChange = (id: string | number) => {
.tabs-wrapper {
@apply flex;
.tabs-items-wrapper {
@apply flex;
}
&.tabs-direction-row {
@apply flex-col;

2
src/layouts/FilledLayout.vue
View File

@ -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>

3
src/router/routes.config.ts
View File

@ -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",

175
src/views/users/Profile.vue Normal file
View File

@ -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>