搜索结果列表页面开发
This commit is contained in:
付民康
39
src/components/UserInfoCard/README.md
Normal file
39
src/components/UserInfoCard/README.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# UserInfoCard
|
||||
|
||||
### 说明
|
||||
- 用户主页-信息卡片（组件背景色为 transparent）
|
||||
|
||||
``` js
|
||||
const userInfo = ref({
|
||||
name: mock('@first'),
|
||||
namespace: mock('@first'),
|
||||
avatarUrl: '/src/assets/imgs/avatar/male.png',
|
||||
description: mock('@paragraph'),
|
||||
fansCount: mock('@natural(0, 100)'),
|
||||
followCount: mock('@natural(0, 100)'),
|
||||
tenant: mock('@word'),
|
||||
location: mock('@city'),
|
||||
email: mock('@email'),
|
||||
github: mock('@first'),
|
||||
blog: mock('@url')
|
||||
});
|
||||
|
||||
<UserInfoCard v-bind="userInfo" />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------|------------------------|----------------------------|----------|-----------|
|
||||
| name | 用户名称 | string | - | - |
|
||||
| namespace | 命名空间 | string | - | - |
|
||||
| avatarUrl | 头像地址 | string | - | - |
|
||||
| description| 描述 | string | - | - |
|
||||
| fansCount | 粉丝数 | string | - | - |
|
||||
| followCount| 关注数 | string | - | - |
|
||||
| tenant | 公司 | string | - | - |
|
||||
| location | 地址 | string | - | - |
|
||||
| email | 邮件 | string | - | - |
|
||||
| github | github id | string | - | - |
|
||||
| blog | 博客地址 | string | - | - |
|
||||
| width? | 组件宽度，单位px | number | - | 260 |
|
||||
170
src/components/UserInfoCard/index.vue
Normal file
170
src/components/UserInfoCard/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div>
|
||||
<d-skeleton :loading="profileLoading" :rows="4">
|
||||
<div class="g-user-info-card" :style="{ width: `${width}px` }">
|
||||
<GAvatar :src="avatarUrl" :name="name" :width="180" :height="180"></GAvatar>
|
||||
<GLink v-if="isSelf" class="user-info-edit" :to="{ name: 'setting' }">
|
||||
<Icon name="gt-edit" class="mr-2" /><span style="line-height: 1">编辑个人资料</span>
|
||||
</GLink>
|
||||
<slot name="action"></slot>
|
||||
<div class="username">
|
||||
<g-text>
|
||||
{{ name }}
|
||||
</g-text>
|
||||
</div>
|
||||
<div class="namespace">{{ namespace }}</div>
|
||||
<section v-if="!isPrivate">
|
||||
<div class="description">
|
||||
<g-text :config="{ ellipse: true, line: 4, tooltip: false, showAll: true }">
|
||||
{{ description }}
|
||||
</g-text>
|
||||
</div>
|
||||
<div class="count-info">
|
||||
<span>
|
||||
<router-link :to="`/user/${namespace.replace('@', '')}/fans`"
|
||||
><strong>{{ fansCount }}</strong> 粉丝</router-link
|
||||
>
|
||||
</span>
|
||||
<span>
|
||||
<router-link :to="`/user/${namespace.replace('@', '')}/following`"
|
||||
><strong>{{ followCount }}</strong> 关注</router-link
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
<div class="info-list">
|
||||
<div class="flex gap-1 items-stretch" v-if="tenant">
|
||||
<Icon name="gt-organizations" class="w-4" /><g-text class="flex-1">{{ tenant }}</g-text>
|
||||
</div>
|
||||
<div class="flex gap-1 items-stretch" v-if="location">
|
||||
<Icon name="gt-location" class="w-4" /><g-text class="flex-1">{{ location }}</g-text>
|
||||
</div>
|
||||
<GLink class="flex items-stretch" :href="`mailto:${email}`" v-if="email">
|
||||
<Icon name="gt-mail" class="mr-1 w-4" /><g-text class="flex-1">{{ email }}</g-text>
|
||||
</GLink>
|
||||
<GLink class="flex items-stretch" :href="`https://github.com/${github}`" target="_blank" v-if="github">
|
||||
<Icon name="gt-github" class="mr-1 w-4" /><g-text class="flex-1">@{{ github }}</g-text>
|
||||
</GLink>
|
||||
<GLink class="flex items-stretch" :href="blog" target="_blank" v-if="blog">
|
||||
<Icon name="gt-connect" class="mr-1 w-4" /><g-text class="flex-1">{{ blog }}</g-text>
|
||||
</GLink>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</d-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import GText from '@/components/GText/index.vue';
|
||||
interface User {
|
||||
name: string;
|
||||
namespace: string;
|
||||
avatarUrl: string;
|
||||
description: string;
|
||||
fansCount: number;
|
||||
followCount: number;
|
||||
tenant?: string;
|
||||
location?: string;
|
||||
email?: string;
|
||||
github?: string;
|
||||
blog?: string;
|
||||
width?: number;
|
||||
isSelf?: boolean;
|
||||
isPrivate?: boolean;
|
||||
profileLoading?: boolean;
|
||||
}
|
||||
withDefaults(defineProps<User>(), {
|
||||
fansCount: 0,
|
||||
followCount: 0,
|
||||
width: 260,
|
||||
isSelf: true,
|
||||
isPrivate: true,
|
||||
profileLoading: true
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
.g-user-info-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: transparent;
|
||||
:deep(.devui-avatar) {
|
||||
line-height: normal;
|
||||
img {
|
||||
// border: 4px solid $devui-global-bg;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.username {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: var(--color-G900);
|
||||
}
|
||||
.namespace {
|
||||
padding: 4px 0;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: var(--color-CG600);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: var(--color-G900);
|
||||
line-height: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.count-info {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
.user-info-edit {
|
||||
width: 180px;
|
||||
background-color: #ffffff;
|
||||
margin: 8px 0 24px;
|
||||
display: flex;
|
||||
border-radius: var(--border-radius, 4px);
|
||||
border: 1px solid var(--color-G300);
|
||||
padding: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: var(--black-60, #606060);
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--color-link);
|
||||
:deep(.icon) {
|
||||
color: var(--color-link) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-list {
|
||||
width: 100%;
|
||||
margin: 24px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
font-size: 14px;
|
||||
color: var(--color-G900);
|
||||
gap: 12px;
|
||||
> div {
|
||||
line-height: 1.15;
|
||||
}
|
||||
> a {
|
||||
line-height: 1;
|
||||
}
|
||||
span {
|
||||
line-height: 1;
|
||||
}
|
||||
:deep(.icon) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user