301 lines
8.2 KiB
Vue
301 lines
8.2 KiB
Vue
<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>
|