mirror of https://github.com/halo-dev/halo-admin
refactor: remove default cover from user profile page (#881)
#### What type of PR is this? /kind improvement #### What this PR does / why we need it: 因为暂时不太好为用户设置个人资料背景图片,所以暂时移除个人资料页面的默认背景。 #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/2851 #### Screenshots: <img width="1680" alt="image" src="https://user-images.githubusercontent.com/21301288/220852412-6732c965-ae43-441e-b99a-af3d6d978d4f.png"> #### Special notes for your reviewer: None #### Does this PR introduce a user-facing change? ```release-note 移除 Console 端个人资料页面的默认背景图片 ```pull/879/head^2
parent
1f8cf9fac5
commit
5a27f56b89
|
@ -1,13 +1,7 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import BasicLayout from "@/layouts/BasicLayout.vue";
|
import BasicLayout from "@/layouts/BasicLayout.vue";
|
||||||
import { apiClient } from "@/utils/api-client";
|
import { apiClient } from "@/utils/api-client";
|
||||||
import {
|
import { VButton, VSpace, VTabbar, VAvatar } from "@halo-dev/components";
|
||||||
IconUpload,
|
|
||||||
VButton,
|
|
||||||
VSpace,
|
|
||||||
VTabbar,
|
|
||||||
VAvatar,
|
|
||||||
} from "@halo-dev/components";
|
|
||||||
import { computed, onMounted, provide, ref, watch } from "vue";
|
import { computed, onMounted, provide, ref, watch } from "vue";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import type { User } from "@halo-dev/api-client";
|
import type { User } from "@halo-dev/api-client";
|
||||||
|
@ -33,6 +27,7 @@ const tabs = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const user = ref<User>();
|
const user = ref<User>();
|
||||||
|
const loading = ref();
|
||||||
const editingModal = ref(false);
|
const editingModal = ref(false);
|
||||||
const passwordChangeModal = ref(false);
|
const passwordChangeModal = ref(false);
|
||||||
|
|
||||||
|
@ -40,6 +35,7 @@ const { params } = useRoute();
|
||||||
|
|
||||||
const handleFetchUser = async () => {
|
const handleFetchUser = async () => {
|
||||||
try {
|
try {
|
||||||
|
loading.value = true;
|
||||||
if (params.name === "-") {
|
if (params.name === "-") {
|
||||||
const { data } = await apiClient.user.getCurrentUserDetail();
|
const { data } = await apiClient.user.getCurrentUserDetail();
|
||||||
user.value = data;
|
user.value = data;
|
||||||
|
@ -51,6 +47,8 @@ const handleFetchUser = async () => {
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -103,72 +101,61 @@ const handleTabChange = (id: string) => {
|
||||||
@close="handleFetchUser"
|
@close="handleFetchUser"
|
||||||
/>
|
/>
|
||||||
<header class="bg-white">
|
<header class="bg-white">
|
||||||
<div class="h-48 bg-gradient-to-r from-gray-800 to-red-500"></div>
|
<div class="p-4">
|
||||||
<div class="px-4">
|
<div class="flex items-center justify-between">
|
||||||
<div class="-mt-12 flex items-end space-x-5 sm:-mt-16">
|
<div class="flex flex-row items-center gap-5">
|
||||||
<div v-if="user?.spec?.avatar" class="inline-flex items-center">
|
<div class="h-20 w-20">
|
||||||
<div class="h-24 w-24 sm:h-32 sm:w-32">
|
|
||||||
<VAvatar
|
<VAvatar
|
||||||
:src="user?.spec?.avatar"
|
v-if="user"
|
||||||
:alt="user?.spec?.displayName"
|
:src="user?.spec.avatar"
|
||||||
|
:alt="user?.spec.displayName"
|
||||||
circle
|
circle
|
||||||
width="100%"
|
width="100%"
|
||||||
height="100%"
|
height="100%"
|
||||||
class="ring-4 ring-white drop-shadow-lg"
|
class="ring-4 ring-white drop-shadow-md"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<h1 class="truncate text-lg font-bold text-gray-900">
|
||||||
|
{{ user?.spec.displayName }}
|
||||||
|
</h1>
|
||||||
|
<span v-if="!loading" class="text-sm text-gray-600">
|
||||||
|
@{{ user?.metadata.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="mt-6 sm:flex sm:min-w-0 sm:flex-1 sm:items-center sm:justify-end sm:space-x-6 sm:pb-1"
|
v-if="
|
||||||
:class="{ '!mt-12': !user?.spec?.avatar }"
|
currentUserHasPermission(['system:users:manage']) || isCurrentUser
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<div class="mt-6 block min-w-0 flex-1">
|
<FloatingDropdown>
|
||||||
<h1 class="truncate text-xl font-bold text-gray-900">
|
<VButton type="default">编辑</VButton>
|
||||||
<span class="mr-1">{{ user?.spec?.displayName }}</span>
|
<template #popper>
|
||||||
</h1>
|
<div class="w-48 p-2">
|
||||||
<h2 class="text-gray-600">@{{ user?.metadata.name }}</h2>
|
<VSpace class="w-full" direction="column">
|
||||||
</div>
|
<VButton
|
||||||
<div
|
v-close-popper
|
||||||
v-if="
|
block
|
||||||
currentUserHasPermission(['system:users:manage']) ||
|
type="secondary"
|
||||||
isCurrentUser
|
@click="editingModal = true"
|
||||||
"
|
>
|
||||||
class="justify-stretch mt-6 hidden flex-col space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4 md:flex"
|
修改资料
|
||||||
>
|
</VButton>
|
||||||
<FloatingDropdown>
|
<VButton
|
||||||
<VButton type="default">编辑</VButton>
|
v-close-popper
|
||||||
<template #popper>
|
block
|
||||||
<div class="w-48 p-2">
|
@click="passwordChangeModal = true"
|
||||||
<VSpace class="w-full" direction="column">
|
>
|
||||||
<VButton
|
修改密码
|
||||||
v-close-popper
|
</VButton>
|
||||||
block
|
</VSpace>
|
||||||
type="secondary"
|
</div>
|
||||||
@click="editingModal = true"
|
</template>
|
||||||
>
|
</FloatingDropdown>
|
||||||
修改资料
|
|
||||||
</VButton>
|
|
||||||
<VButton
|
|
||||||
v-close-popper
|
|
||||||
block
|
|
||||||
@click="passwordChangeModal = true"
|
|
||||||
>
|
|
||||||
修改密码
|
|
||||||
</VButton>
|
|
||||||
</VSpace>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</FloatingDropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="absolute top-6 right-6">
|
|
||||||
<div class="">
|
|
||||||
<IconUpload v-if="false" class="text-white" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
<section class="bg-white p-4">
|
<section class="bg-white p-4">
|
||||||
<VTabbar
|
<VTabbar
|
||||||
|
|
Loading…
Reference in New Issue