101 lines
3.0 KiB
Vue
101 lines
3.0 KiB
Vue
<template>
|
|
<div class="g-issue-top flex gap-4">
|
|
<!-- status -->
|
|
<div class="stat-card min-w-[56px] min-h-[70px] flex flex-col gap-2 justify-center items-center"
|
|
:style="{ backgroundColor: issueStateOption[state].bgColor}">
|
|
<span>
|
|
<Icon v-if="issueStateOption[state]" :name="issueStateOption[state].icon" :color="issueStateOption[state].color"></Icon>
|
|
</span>
|
|
<GLink :href="issueUrl" v-if="indexLabel"> #{{ indexLabel }} </GLink>
|
|
</div>
|
|
<!-- info -->
|
|
<div class="issue-info" :class="{ 'mr-[25px]': !hideClose }">
|
|
<GLink :href="orgId && $route.params.repoName?
|
|
$router.resolve({ name: 'repoIssueDetail', params: { serialNumber: data.iid } }).href :
|
|
data.web_url" class="issue-title" style="font-weight: 500;" :title="title">{{ title }}</GLink>
|
|
<div class="bottom-info">
|
|
<GLink :to="{ name: 'homepage', params: { namespace: userName } }" class="flex items-center min-w-[16px]">
|
|
<g-avatar :name="userName" :src="author?.avatar_url" :width="16" :height="16"></g-avatar>
|
|
</GLink>
|
|
<GLink class="user-name" :to="{ name: 'homepage', params: { namespace: userName } }">{{ pickNickName(author) }}</GLink>
|
|
<span class="text-CG600 text-xs">创建于 <Time :time="createdTime" /></span>
|
|
</div>
|
|
</div>
|
|
<!-- off btn -->
|
|
<span class="text-xs g-issue-top-header-close g-icon-pointer" v-if="!hideClose"
|
|
@click.stop="emits('handleClose', props)">关闭</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import Time from '@/components/Time/index.vue';
|
|
import UserAvtar from '@/components/UserAvatar/index.vue';
|
|
import { pickNickName } from '@/utils';
|
|
import { issueStateOption } from '@/constant/issue';
|
|
import type { ISSUE_STATE } from '@/constant/issue';
|
|
import { useOrgId } from '@/utils/hooks/useOrgId';
|
|
const { orgId } = useOrgId('/');
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
title: string;
|
|
userName: string;
|
|
createdTime: string;
|
|
hideClose?: boolean;
|
|
indexLabel?: string;
|
|
author?: object;
|
|
issueUrl: string;
|
|
data: object;
|
|
state: ISSUE_STATE
|
|
}>(),
|
|
{
|
|
title: '',
|
|
userName: '',
|
|
createdTime: '',
|
|
hideClose: true,
|
|
indexLabel: ''
|
|
}
|
|
);
|
|
|
|
const emits = defineEmits(['handleClose']);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$g-issue-top-border-color: #d3d3d3;
|
|
$g-issue-top-border-radius: 4px;
|
|
$g-issue-top-text-color: #707a87;
|
|
|
|
.g-issue-top {
|
|
background-color: #fff;
|
|
padding: 16px 20px;
|
|
|
|
&-header {
|
|
&-close {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 18px;
|
|
font-weight: 400;
|
|
color: #707a87;
|
|
line-height: 17px;
|
|
height: 21px;
|
|
}
|
|
|
|
}
|
|
|
|
.stat-card {
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
.issue-info {
|
|
@apply flex flex-col gap-2 justify-between whitespace-nowrap overflow-hidden text-ellipsis;
|
|
.issue-title {
|
|
@apply text-G900 text-base line-clamp-2 break-all overflow-hidden text-ellipsis whitespace-normal;
|
|
}
|
|
.bottom-info {
|
|
@apply flex gap-2 items-center;
|
|
.user-name {
|
|
@apply overflow-hidden text-ellipsis break-all;
|
|
}
|
|
}
|
|
}
|
|
</style>
|