搜索结果列表页面开发
This commit is contained in:
付民康
56
src/components/IssueDescription/README.md
Normal file
56
src/components/IssueDescription/README.md
Normal file
@@ -0,0 +1,56 @@
|
||||
# IssueDescription
|
||||
|
||||
### 说明
|
||||
- IssueDescription组件为issue详情顶部描述组件，demo如下
|
||||
``` js
|
||||
// tempalte
|
||||
<issue-description
|
||||
:title="issueDescData.title"
|
||||
:user-name="issueDescData.userName"
|
||||
:created-time="issueDescData.createdTime"
|
||||
:status-icon='issueDescData.statusIcon'
|
||||
:status-icon-color="issueDescData.statusIconColor"
|
||||
:status-text = "issueDescData.statusText"
|
||||
>
|
||||
</issue-description>
|
||||
|
||||
// script
|
||||
const issueDescData = {
|
||||
title: '3516DV300开关机压测出现系统挂死3516DV300开关机压测出现系统挂死3516DV300开关机压测出现系统挂死3516DV300开关机',
|
||||
userName: '李雷',
|
||||
createdTime: '2023-07-24',
|
||||
statusIcon: 'icon-infomation',
|
||||
statusIconColor: '',
|
||||
statusText: '已关闭'
|
||||
};
|
||||
```
|
||||
### Props(使用中)
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------|------------------------|----------------------------|----------|-----------|
|
||||
| id | 位置标识 | string | | 1 |
|
||||
| title | 标题 | string | | |
|
||||
| createdTime | 创建时间 | string | | |
|
||||
| statusIcon? | 用户名之前icon | string | | icon-right |
|
||||
| statusIconColor? | 用户名之前icon颜色 | string | | |
|
||||
| statusText? | 状态文案（已关闭 \| 已合并 ） | string | | ‘已关闭‘ |
|
||||
| indexLabel? | 标题后缀index（不传则不显示） | string | | |
|
||||
| statusBgColor? | 状态区域背景色 | string | | #0EB07B |
|
||||
| closedTime? | 关闭时间 | string | | |
|
||||
| canEdit? | 是否编辑模式 | boolean | | false |
|
||||
|
||||
### Emits
|
||||
|
||||
| 方法 | 说明 | 返回值 |
|
||||
|---------------------|---------------------------------------------|---------------------------------------------|
|
||||
| handleSave | input按enter键或失去焦点时触发 |title，id|
|
||||
|
||||
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|---------------------|---------------------------------------------|
|
||||
| status | 状态区域插槽 |
|
||||
| content | 内容区域插槽 |
|
||||
| handle-more | 标题底部更多信息配置插槽 |
|
||||
211
src/components/IssueDescription/index.vue
Normal file
211
src/components/IssueDescription/index.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="g-issue-description flex">
|
||||
<div class="left flex-shrink-0 text-center" :style="`background:${statusBgColor}`">
|
||||
<slot name="status">
|
||||
<div class="flex items-center justify-center text-success text-sm mt-2" :style="`color:${statusIconColor}`">
|
||||
<Icon :color="statusIconColor" class="pr-1" :name="statusIcon" :size="18"></Icon>{{ statusText }}
|
||||
</div>
|
||||
<div class="text-G900 text-sm">#{{ indexLabel }}</div>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between right flex-auto ml-4 overflow-hidden">
|
||||
<slot name="content">
|
||||
<div
|
||||
v-if="!editIng"
|
||||
class="title"
|
||||
:class="{
|
||||
'can-edit': canEdit
|
||||
}"
|
||||
@click="handleEdit"
|
||||
:title="title"
|
||||
>
|
||||
<span v-show="isLocked" class="locked-icon"><Icon name="gt-lock" size="16px"></Icon></span>
|
||||
<span class="title-content">
|
||||
{{ title }}
|
||||
</span>
|
||||
<span class="edit-icon"><Icon name="gt-contribute-c" /></span>
|
||||
</div>
|
||||
<d-input
|
||||
:maxlength="maxlength"
|
||||
ref="editInputRef"
|
||||
v-else
|
||||
v-model.trim="title"
|
||||
@change="handleInput"
|
||||
@blur="inputBlur"
|
||||
></d-input>
|
||||
<div class="text-sm text-CG600 flex items-center whitespace-nowrap">
|
||||
<span>{{ userName }}</span>
|
||||
<span class="ml-4">创建于<Time :time="createdTime" /></span>
|
||||
<span class="ml-4" v-if="closedTime">关闭于<Time :time="closedTime" /></span>
|
||||
<span v-if="$slots['handle-more']"><slot name="handle-more"></slot></span>
|
||||
<span
|
||||
class="ml-4 inline-flex flex-nowrap gap-2 items-center text-ellipsis overflow-hidden"
|
||||
v-if="sourceBranch && targetBranch"
|
||||
>
|
||||
从
|
||||
<GLink
|
||||
:to="'/' + sourceRepo"
|
||||
v-if="sourceRepo !== targetRepo"
|
||||
class="text-ellipsis overflow-hidden"
|
||||
:title="sourceRepo"
|
||||
>{{ sourceRepo }}：</GLink
|
||||
>
|
||||
<d-tooltip :content="sourceBranch">
|
||||
<GLink :to="'/' + sourceRepo + '/tree/' + encodeURIComponent(sourceBranch)" class="branch-link">
|
||||
<d-tag class="branch-tag">{{ sourceBranch }}</d-tag></GLink
|
||||
>
|
||||
</d-tooltip>
|
||||
合入到
|
||||
<GLink
|
||||
:to="'/' + targetRepo"
|
||||
v-if="sourceRepo !== targetRepo"
|
||||
class="text-ellipsis overflow-hidden"
|
||||
:title="targetRepo"
|
||||
>{{ targetRepo }}：</GLink
|
||||
>
|
||||
<d-tooltip :content="targetBranch">
|
||||
<GLink :to="'/' + targetRepo + '/tree/' + encodeURIComponent(targetBranch)" class="branch-link">
|
||||
<d-tag class="branch-tag">{{ targetBranch }}</d-tag></GLink
|
||||
>
|
||||
</d-tooltip>
|
||||
</span>
|
||||
<!-- 内容增加 -->
|
||||
<span class="text-success ml-2" v-if="addedLines">+{{ addedLines || 0 }}</span>
|
||||
<!-- 内容减少 -->
|
||||
<span class="text-danger ml-2" v-if="removedLines">-{{ removedLines || 0 }}</span>
|
||||
<span><slot name="handle-more"></slot></span>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, watchEffect } from 'vue';
|
||||
import Time from '@/components/Time/index.vue';
|
||||
const editInputRef = ref();
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string;
|
||||
title: string;
|
||||
userName: string;
|
||||
createdTime: string;
|
||||
closedTime?: string;
|
||||
statusIcon?: string;
|
||||
statusIconColor?: string;
|
||||
statusText?: string;
|
||||
indexLabel?: string;
|
||||
statusBgColor?: string;
|
||||
canEdit?: boolean;
|
||||
maxlength?: number;
|
||||
sourceRepo?: string;
|
||||
targetRepo?: string;
|
||||
sourceBranch?: string;
|
||||
targetBranch?: string;
|
||||
addedLines?: string;
|
||||
removedLines?: string;
|
||||
isLocked?: boolean;
|
||||
}>(),
|
||||
{
|
||||
id: '1',
|
||||
title: '',
|
||||
userName: '',
|
||||
createdTime: '',
|
||||
closedTime: '',
|
||||
statusIcon: 'icon-right',
|
||||
statusIconColor: '#0EB07B',
|
||||
statusBgColor: '',
|
||||
statusText: '已关闭',
|
||||
indexLabel: '',
|
||||
canEdit: false,
|
||||
maxlength: 100,
|
||||
isLocked: false
|
||||
}
|
||||
);
|
||||
const title = ref(props.title);
|
||||
const isLocked = ref(props.isLocked);
|
||||
const editIng = ref(false);
|
||||
const handleEdit = () => {
|
||||
if (!props.canEdit) return;
|
||||
editIng.value = true;
|
||||
nextTick(() => {
|
||||
editInputRef.value.focus();
|
||||
});
|
||||
};
|
||||
const emits = defineEmits(['handleSave']);
|
||||
const handleInput = () => {
|
||||
emits('handleSave', title.value, props.id);
|
||||
};
|
||||
const inputBlur = () => {
|
||||
editIng.value = false;
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
title.value = props.title;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.g-issue-description {
|
||||
.left {
|
||||
width: 88px;
|
||||
height: 60px;
|
||||
background: rgb(#0eb07b, 0.1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.title {
|
||||
line-height: 32px;
|
||||
@apply text-2xl text-G900 whitespace-nowrap overflow-hidden text-ellipsis;
|
||||
span {
|
||||
max-width: 100%;
|
||||
@apply inline-block overflow-hidden text-ellipsis;
|
||||
}
|
||||
.title-content {
|
||||
max-width: calc(100% - 48px);
|
||||
}
|
||||
.locked-icon {
|
||||
@apply mr-2;
|
||||
}
|
||||
.edit-icon {
|
||||
display: none;
|
||||
}
|
||||
&.can-edit:hover {
|
||||
display: block;
|
||||
@apply cursor-pointer;
|
||||
span {
|
||||
max-width: calc(100% - 1em);
|
||||
}
|
||||
.title-content {
|
||||
max-width: calc(100% - 48px);
|
||||
}
|
||||
.edit-icon {
|
||||
width: 1em;
|
||||
line-height: 32px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.devui-icon__container {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.branch-link {
|
||||
height: 21px;
|
||||
line-height: 21px;
|
||||
@apply max-w-[300px];
|
||||
}
|
||||
.branch-tag {
|
||||
@apply text-CG600 text-ellipsis max-w-[200px];
|
||||
:deep(.devui-tag--default) {
|
||||
color: unset;
|
||||
@apply text-ellipsis overflow-hidden whitespace-nowrap cursor-pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.devui-tag .devui-tag__item.devui-tag--md) {
|
||||
height: unset;
|
||||
line-height: unset;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user