mirror of https://github.com/halo-dev/halo-admin
Ryan Wang
parent
d08195a3c6
commit
ff3d495a6b
|
|
@ -73,7 +73,6 @@ const handleChange = (id: number | string) => {
|
||||||
@apply self-center;
|
@apply self-center;
|
||||||
@apply transition-all;
|
@apply transition-all;
|
||||||
@apply text-base;
|
@apply text-base;
|
||||||
@apply w-full;
|
|
||||||
@apply justify-center;
|
@apply justify-center;
|
||||||
|
|
||||||
.tabbar-item-label,
|
.tabbar-item-label,
|
||||||
|
|
|
||||||
|
|
@ -73,10 +73,6 @@ const handleChange = (id: string | number) => {
|
||||||
.tabs-wrapper {
|
.tabs-wrapper {
|
||||||
@apply flex;
|
@apply flex;
|
||||||
|
|
||||||
.tabs-items-wrapper {
|
|
||||||
@apply flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tabs-direction-row {
|
&.tabs-direction-row {
|
||||||
@apply flex-col;
|
@apply flex-col;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<VRoutesMenu :menus="menus" />
|
<VRoutesMenu :menus="menus" />
|
||||||
<div class="current-profile">
|
<div class="current-profile">
|
||||||
<div class="profile-avatar">
|
<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>
|
||||||
<div class="profile-name">
|
<div class="profile-name">
|
||||||
<div class="flex font-medium text-sm">Ryan Wang</div>
|
<div class="flex font-medium text-sm">Ryan Wang</div>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import type { RouteRecordRaw } from "vue-router";
|
||||||
import HomeView from "../views/HomeView.vue";
|
import HomeView from "../views/HomeView.vue";
|
||||||
import AboutView from "../views/AboutView.vue";
|
import AboutView from "../views/AboutView.vue";
|
||||||
import PostList from "../views/posts/PostList.vue";
|
import PostList from "../views/posts/PostList.vue";
|
||||||
|
import Profile from "../views/users/Profile.vue";
|
||||||
|
|
||||||
export const routes: Array<RouteRecordRaw> = [
|
export const routes: Array<RouteRecordRaw> = [
|
||||||
{
|
{
|
||||||
|
|
@ -69,7 +70,7 @@ export const routes: Array<RouteRecordRaw> = [
|
||||||
{
|
{
|
||||||
path: "/users",
|
path: "/users",
|
||||||
name: "Users",
|
name: "Users",
|
||||||
component: AboutView,
|
component: Profile,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/settings",
|
path: "/settings",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue