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
Ryan Wang 2 years ago committed by GitHub
parent 1f8cf9fac5
commit 5a27f56b89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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…
Cancel
Save