搜索结果列表页面开发
This commit is contained in:
付民康
87
src/components/MergeCheck/README.md
Normal file
87
src/components/MergeCheck/README.md
Normal file
@@ -0,0 +1,87 @@
|
||||
TS接口文档可以查看同文件夹下的types.ts, demo可以访问/demo777进行查看
|
||||
|
||||
```vue
|
||||
<merge-check
|
||||
v-for="(item, index) in mergeDatas"
|
||||
:key="index"
|
||||
:data="item"
|
||||
:is-last="index === mergeDatas.length - 1">
|
||||
</merge-check>
|
||||
```
|
||||
```javascript
|
||||
const mergeDatas: MergeCheckData[] = [
|
||||
{
|
||||
checking: true
|
||||
},
|
||||
{
|
||||
verifyData: {
|
||||
success: true,
|
||||
totalPass: 4,
|
||||
needPass: 2,
|
||||
hasPassed: 2,
|
||||
refused: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
verifyData: {
|
||||
success: false,
|
||||
totalPass: 5,
|
||||
needPass: 3,
|
||||
hasPassed: 2,
|
||||
refused: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
reviewData: {
|
||||
success: false,
|
||||
totalPass: 5,
|
||||
needPass: 3,
|
||||
hasPassed: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
reviewData: {
|
||||
success: true,
|
||||
totalPass: 5,
|
||||
needPass: 3,
|
||||
hasPassed: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
reviewData: {
|
||||
success: true
|
||||
}
|
||||
},
|
||||
{
|
||||
reviewData: {
|
||||
success: false
|
||||
}
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|----------------|----------------------------|----------------|-----------|------|
|
||||
| data | 审核数据 | MergeCheckData | — | {} |
|
||||
| link? | 对应设置页面地址 | string | — | '' |
|
||||
| isLast? | 是否为最后一个，如果是，则会设置组件的底边框和下圆角 | boolean | — | true |
|
||||
| isLast? | 是否为第一个，如果是，则会设置组件的顶边框和上圆角 | boolean | — | true |
|
||||
|
||||
### Emits
|
||||
|
||||
注意：以下事件都是组件内部对应的按钮点击触发，如果用插槽自定义对应区域的内容的话，事件自行监听即可
|
||||
|
||||
| 方法 | 说明 | 返回值 |
|
||||
|--------------|-------|-----------------------|
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------------------|------------------|
|
||||
| header | 组件头部区域插槽 |
|
||||
| icon | 组件头部区域icon插槽 |
|
||||
| content | 组件内容区域插槽 |
|
||||
| message | 组件内容消息区域插槽 |
|
||||
| results | 组件内容审核结果区域插槽 |
|
||||
191
src/components/MergeCheck/index.vue
Normal file
191
src/components/MergeCheck/index.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<section class="v2-g-card g-merge-check">
|
||||
<div class="v2-g-card-header g-merge-check-header">
|
||||
<slot name="header">
|
||||
<slot name="icon">
|
||||
<Icon :name="checkConfig.icon" size="16px" :color="iconColor[status]"> </Icon>
|
||||
</slot>
|
||||
<slot name="title">
|
||||
<span class="g-merge-check-title" :class="`g-merge-check-${status}`">
|
||||
{{ checkConfig.title }}
|
||||
</span>
|
||||
</slot>
|
||||
<Icon
|
||||
class="g-merge-check-trigger"
|
||||
:name="open ? 'gt-chevron-down' : 'gt-chevron-up'"
|
||||
size="24px"
|
||||
@click="open = !open"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="open" class="v2-g-card-body g-merge-check-content">
|
||||
<slot name="content">
|
||||
<template v-if="type === 'reviewer'">
|
||||
<div class="g-merge-check-text">
|
||||
本合并请求有如下评审人规则，如需修改，请前往
|
||||
<router-link :to="{ name: 'repoSettingMerge' }" class="text-link" target="_blank"
|
||||
>项目设置-合并请求设置</router-link
|
||||
>
|
||||
进行修改
|
||||
</div>
|
||||
<div class="g-merge-check-results">
|
||||
<slot name="results">
|
||||
<div class="g-merge-check-item" :class="`g-merge-check-${status}`">
|
||||
<Icon v-if="status === 'success'" name="gt-success" :color="'var(--color-success)'"></Icon>
|
||||
<Icon v-if="status !== 'success'" name="gt-close" :color="'var(--color-danger)'"></Icon>
|
||||
<div class="g-merge-check-item-text">最小评审人数要求：</div>
|
||||
<div class="g-merge-check-data">
|
||||
<!-- <span class="g-merge-check-pass"> {{ hasPass }}人 </span>/ -->
|
||||
<span class="g-merge-check-need-pass"> {{ needPass }}人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="g-merge-check-item" :class="`g-merge-check-${status}`">
|
||||
<Icon v-if="status === 'success'" name="gt-success" :color="'var(--color-success)'"></Icon>
|
||||
<Icon v-if="status !== 'success'" name="gt-close" :color="'var(--color-danger)'"></Icon>
|
||||
<div class="g-merge-check-item-text">已评审通过：</div>
|
||||
<div class="g-merge-check-data">
|
||||
<span class="g-merge-check-pass"> {{ hasPass }}人 </span>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="g-merge-check-text">
|
||||
{{ checkConfig.subTitle }}
|
||||
</div>
|
||||
</template>
|
||||
</slot>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'merge-check'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import type { checkConfigType } from '@/components/MergeCheck/types';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
type: string; // wip / pipeline / comment / reviewer
|
||||
status: string; // fail / success / waiting
|
||||
needPass?: number; // 最小评审人数
|
||||
hasPass?: number; // 已评审人数
|
||||
link?: string | object;
|
||||
}>(),
|
||||
{
|
||||
data: () => ({}),
|
||||
link: '',
|
||||
hasPass: 0,
|
||||
needPass: 0
|
||||
}
|
||||
);
|
||||
|
||||
const open = ref<boolean>(true);
|
||||
const checkConfig = ref<checkConfigType>({
|
||||
icon: '',
|
||||
title: '',
|
||||
subTitle: '',
|
||||
className: ''
|
||||
});
|
||||
const iconColor = reactive({
|
||||
fail: 'var(--color-danger)',
|
||||
success: 'var(--color-success)',
|
||||
waiting: 'var(--color-G900)'
|
||||
});
|
||||
|
||||
const setCheckConfig = () => {
|
||||
if (props.type === 'wip') {
|
||||
checkConfig.value = {
|
||||
icon: 'gt-tooltip',
|
||||
title: '当前合并请求尚在进程中[WIP]',
|
||||
subTitle: '如果想合入此合并请求，可以在标题中去除WIP的标识'
|
||||
};
|
||||
}
|
||||
if (props.type === 'comment') {
|
||||
checkConfig.value = {
|
||||
icon: props.status === 'success' ? 'gt-file-success' : 'gt-file-warn',
|
||||
title: props.status === 'success' ? '评审意见已通过' : '评审意见未通过',
|
||||
subTitle: props.status === 'success' ? '非常好，全部评审意见都已经解决或通过了' : '还有评审意见未解决或未通过'
|
||||
};
|
||||
}
|
||||
if (props.type === 'reviewer') {
|
||||
checkConfig.value = {
|
||||
icon: props.status === 'success' ? 'gt-file-success' : 'gt-file-warn',
|
||||
title: props.status === 'success' ? '评审人已通过' : '评审人未通过'
|
||||
};
|
||||
}
|
||||
};
|
||||
setCheckConfig();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.g-merge-check {
|
||||
position: relative;
|
||||
|
||||
font-size: var(--text-sm);
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&-title {
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
margin-left: 20px;
|
||||
margin-right: 8px;
|
||||
color: var(--color-G900);
|
||||
}
|
||||
&-trigger {
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color-CG200);
|
||||
color: var(--color-G1000);
|
||||
}
|
||||
&-content {
|
||||
margin-top: 4px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
&-text {
|
||||
margin-top: 4px;
|
||||
color: var(--color-CG600);
|
||||
line-height: 20px;
|
||||
}
|
||||
&-results {
|
||||
position: relative;
|
||||
}
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
line-height: 20px;
|
||||
&-text {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
&-data {
|
||||
color: var(--color-CG600);
|
||||
}
|
||||
&-waiting {
|
||||
color: var(--color-G900);
|
||||
}
|
||||
&-success {
|
||||
color: var(--color-success);
|
||||
.g-merge-check-pass{
|
||||
color: var(--color-success);
|
||||
}
|
||||
}
|
||||
&-fail {
|
||||
color: var(--color-danger);
|
||||
.g-merge-check-need-pass{
|
||||
color: var(--color-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
6
src/components/MergeCheck/types.ts
Normal file
6
src/components/MergeCheck/types.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export type checkConfigType = {
|
||||
title: string,
|
||||
icon: string,
|
||||
subTitle?: string
|
||||
className?: string,
|
||||
}
|
||||
Reference in New Issue
Block a user