搜索结果列表页面开发
This commit is contained in:
付民康
37
src/components/BranchCompareFork/README.md
Normal file
37
src/components/BranchCompareFork/README.md
Normal file
@@ -0,0 +1,37 @@
|
||||
TS接口文档可以查看同文件夹下的types.ts
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------------|---------------|-------------------------------|-----------|-------------------|
|
||||
| data | 源分支和目标分支的数据 | BranchCompareData | — | {} |
|
||||
| repoList | 仓库下拉数据项 | {label: string; value: string | number}[] | — | [] |
|
||||
| branchList | 对应仓库下分支的下拉数据项 | {label: string; value: string | number}[] | — | [] |
|
||||
| repoIcon? | 仓库对应图标 | string | — | 'version-history' |
|
||||
| branchIcon? | 分支对应图标 | string | — | 'branch-merge' |
|
||||
| repoIconSize? | 仓库图标尺寸 | string | — | '16px' |
|
||||
| branchIconSize? | 分支图标尺寸 | string | — | '16px' |
|
||||
|
||||
### Emits
|
||||
|
||||
注意：以下事件都是组件内部对应的按钮点击触发，如果用插槽自定义对应区域的内容的话，事件自行监听即可
|
||||
|
||||
| 方法 | 说明 | 返回值 |
|
||||
|-----------|------|-----------------------|
|
||||
| repoChange | 仓库变化 | string | number |
|
||||
| branchChange | 分支变化 | { sourceId: string | number; targetId: string | number } |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------------- | -------------------------- |
|
||||
| source-header | 源分支头部插槽 |
|
||||
| repo-option | 仓库下拉option插槽 |
|
||||
| source-option | 源分支下拉option插槽 |
|
||||
| switch | 中间切换按钮插槽 |
|
||||
| target-header | 目标分支头部插槽 |
|
||||
| target-option | 源分支下拉option插槽 |
|
||||
| repo-prefix | 仓库输入框部分前缀图标插槽 |
|
||||
| branch-prefix | 分支输入框部分前缀图标插槽 |
|
||||
| source-tip | 源分支底部信息插槽 |
|
||||
| target-tip | 目标分支底部信息插槽 |
|
||||
300
src/components/BranchCompareFork/index.vue
Normal file
300
src/components/BranchCompareFork/index.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<section ref="selectContainer" class="fordeep g-branch-compare">
|
||||
<div class="g-branch-compare-box g-card py-[30px]">
|
||||
<div class="g-branch-compare-header">
|
||||
<slot name="source-header">
|
||||
<span class="g-branch-compare-title">源分支</span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="g-branch-compare-content">
|
||||
<div ref="ele" class="g-branch-compare-repo" v-if="showRepo">
|
||||
<div class="g-branch-compare-custom-icon">
|
||||
<slot name="repo-prefix">
|
||||
<Icon :name="repoIcon" :size="repoIconSize"></Icon>
|
||||
</slot>
|
||||
</div>
|
||||
<d-editable-select
|
||||
class="g-branch-compare-select"
|
||||
v-model="repoIdVal"
|
||||
:options="repoList"
|
||||
:width="selectWidth"
|
||||
:disabled="repoReadonly"
|
||||
:max-height="maxHeight"
|
||||
>
|
||||
<template #item="{ option, index }">
|
||||
<div class="g-branch-compare-option">
|
||||
<slot name="repo-option" :data="option" :index="index">
|
||||
<Icon :name="repoIcon" :size="repoIconSize"></Icon>
|
||||
<div class="g-branch-compare-label">{{ option.label }}</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
</d-editable-select>
|
||||
</div>
|
||||
<div class="g-branch-compare-branch">
|
||||
<BranchSelect
|
||||
:repo="encodeURIComponent(repoIdVal)"
|
||||
sort="mr_source"
|
||||
:width="selectWidth"
|
||||
v-model:value="sourceIdVal"
|
||||
:max-height="maxHeight"
|
||||
/>
|
||||
</div>
|
||||
<div class="g-branch-compare-tip">
|
||||
<slot name="source-tip"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isForkCase" class="g-branch-compare-switch" @click="emits('onSwitch')">
|
||||
<slot name="switch">
|
||||
<Icon name="gt-exchange" size="14px" color="var(--color-G1000)" />
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="isForkCase" class="g-branch-compare-switch cursor-default">
|
||||
<slot name="switch">
|
||||
<Icon name="gt-exit" size="14px" color="var(--color-G1000)" />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="g-branch-compare-box g-card py-[30px]">
|
||||
<div class="g-branch-compare-header">
|
||||
<slot name="target-header">
|
||||
<span class="g-branch-compare-title">目标分支</span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="g-branch-compare-content">
|
||||
<div class="g-branch-compare-repo" v-if="showRepo">
|
||||
<div class="g-branch-compare-custom-icon">
|
||||
<slot name="repo-prefix">
|
||||
<Icon :name="repoIcon" :size="repoIconSize"></Icon>
|
||||
</slot>
|
||||
</div>
|
||||
<d-editable-select
|
||||
class="g-branch-compare-select"
|
||||
v-model="targetRepoIdVal"
|
||||
:width="selectWidth"
|
||||
:options="targetRepoList"
|
||||
:disabled="repoReadonly"
|
||||
:max-height="maxHeight"
|
||||
>
|
||||
<template #item="{ option, index }">
|
||||
<div class="g-branch-compare-option">
|
||||
<slot name="repo-option" :data="option" :index="index">
|
||||
<Icon :name="repoIcon" :size="repoIconSize"></Icon>
|
||||
<div class="g-branch-compare-label">{{ option.label }}</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
</d-editable-select>
|
||||
</div>
|
||||
<div class="g-branch-compare-branch">
|
||||
<BranchSelect
|
||||
:repo="encodeURIComponent(targetRepoIdVal)"
|
||||
sort="mr_target"
|
||||
:width="selectWidth"
|
||||
v-model:value="targetIdVal"
|
||||
:max-height="maxHeight"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-xs text-CG600 g-branch-compare-tip">
|
||||
<slot name="target-tip"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed, onUnmounted } from 'vue';
|
||||
import type { BranchCompareData } from './types';
|
||||
import BranchSelect from '@/components/BranchSelect/index.vue';
|
||||
import { useResizeObserver } from '@vueuse/core'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
data: BranchCompareData;
|
||||
repoId: string; // 源项目
|
||||
targetRepoId: string; // 目标项目
|
||||
sourceId: string; // 源分支
|
||||
targetId: string; // 目标分支
|
||||
repoList: { label: string; value: number | string }[];
|
||||
targetRepoList: { label: string; value: number | string }[];
|
||||
branchList: { label: string; value: number | string }[];
|
||||
targetBranchList: { label: string; value: number | string }[];
|
||||
repoIcon?: string;
|
||||
branchIcon?: string;
|
||||
repoIconSize?: string;
|
||||
branchIconSize?: string;
|
||||
repoReadonly: boolean;
|
||||
showRepo: boolean;
|
||||
maxHeight?: number;
|
||||
isFork?: boolean;
|
||||
}>(),
|
||||
{
|
||||
branchList: () => [],
|
||||
repoIcon: 'gt-compare',
|
||||
branchIcon: 'gt-branches',
|
||||
repoIconSize: '16px',
|
||||
branchIconSize: '16px',
|
||||
repoReadonly: false,
|
||||
showRepo: true,
|
||||
maxHeight: 250,
|
||||
isFork: false
|
||||
}
|
||||
);
|
||||
|
||||
const isForkCase = computed(() => {
|
||||
return props.isFork && repoIdVal.value !== targetRepoIdVal.value;
|
||||
});
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'update:repoId', data: string | number | null): void;
|
||||
(e: 'update:targetRepoId', data: string | number | null): void;
|
||||
(e: 'update:sourceId', data: string | number | null): void;
|
||||
(e: 'update:targetId', data: string | number | null): void;
|
||||
(e: 'onSwitch', data): void;
|
||||
(e: 'sourceLoadMore', data): void;
|
||||
(e: 'targetLoadMore', data): void;
|
||||
}>();
|
||||
|
||||
const repoIdVal = computed({
|
||||
get() {
|
||||
return props.repoId;
|
||||
},
|
||||
set(value) {
|
||||
emits('update:repoId', value);
|
||||
}
|
||||
});
|
||||
const targetRepoIdVal = computed({
|
||||
get() {
|
||||
return props.targetRepoId;
|
||||
},
|
||||
set(value) {
|
||||
emits('update:targetRepoId', value);
|
||||
}
|
||||
});
|
||||
const sourceIdVal = computed({
|
||||
get() {
|
||||
return props.sourceId;
|
||||
},
|
||||
set(value) {
|
||||
emits('update:sourceId', value);
|
||||
}
|
||||
});
|
||||
const targetIdVal = computed({
|
||||
get() {
|
||||
return props.targetId;
|
||||
},
|
||||
set(value) {
|
||||
emits('update:targetId', value);
|
||||
}
|
||||
});
|
||||
|
||||
const ele = ref(null);
|
||||
const selectWidth = ref(488);
|
||||
const selectContainer = ref(null);
|
||||
useResizeObserver(selectContainer, (el)=> {
|
||||
selectWidth.value = (el[0].contentRect.width - 220) / 2;
|
||||
})
|
||||
|
||||
onUnmounted(() => {});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$g-branch-compare-border-color: var(--color-G300);
|
||||
$g-branch-compare-border-color-hover: var(--color-CG900);
|
||||
$g-branch-compare-border-color-focus: var(--color-link);
|
||||
$g-branch-compare-border-radius: 3px;
|
||||
$g-branch-compare-color: var(--color-CG900);
|
||||
$g-branch-compare-select-bg-color: linear-gradient(180deg, #fcfcfc 0%, #f8f9fb 100%);
|
||||
|
||||
.fordeep {
|
||||
:deep(.devui-editable-select-input__wrapper) {
|
||||
background: linear-gradient(180deg, #fcfcfc 0%, #f8f9fb 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.g-branch-compare {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-tip {
|
||||
}
|
||||
&-box {
|
||||
flex: 1;
|
||||
}
|
||||
&-header {
|
||||
padding: 0 32px 20px 32px;
|
||||
}
|
||||
&-content {
|
||||
padding: 0px 32px 0 32px;
|
||||
}
|
||||
&-repo {
|
||||
position: relative;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&-branch {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-custom-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 38px;
|
||||
padding-left: 16px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
:deep(.icon) {
|
||||
align-self: center;
|
||||
color: $g-branch-compare-color !important;
|
||||
}
|
||||
:deep(.devui-icon__container) {
|
||||
align-self: center;
|
||||
color: $g-branch-compare-color !important;
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
color: $g-branch-compare-color;
|
||||
}
|
||||
&-select {
|
||||
:deep(.devui-editable-select-input__wrapper) {
|
||||
background: $g-branch-compare-select-bg-color;
|
||||
}
|
||||
:deep(.devui-editable-select-input__inner) {
|
||||
color: $g-branch-compare-color;
|
||||
padding-left: 32px;
|
||||
}
|
||||
:deep(.devui-editable-select__item) {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
}
|
||||
&-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&-label {
|
||||
margin-left: 8px;
|
||||
}
|
||||
&-switch {
|
||||
margin: 0 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: $g-branch-compare-border-radius;
|
||||
background: linear-gradient(180deg, #fcfcfc 0%, #f8f9fb 100%);
|
||||
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid var(--color-CG400);
|
||||
display: flex;
|
||||
:deep(.icon) {
|
||||
margin: 0 auto;
|
||||
align-self: center;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
src/components/BranchCompareFork/types.ts
Normal file
7
src/components/BranchCompareFork/types.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export type BranchCompareData = {
|
||||
repoId: string | number;
|
||||
targetRepoId: string | number;
|
||||
sourceId: string | number;
|
||||
targetId: string | number;
|
||||
[propName: string]: any;
|
||||
}
|
||||
Reference in New Issue
Block a user