搜索结果列表页面开发
This commit is contained in:
付民康
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>
|
||||
Reference in New Issue
Block a user