cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

搜索结果列表页面开发

Browse Source
This commit is contained in:
付民康
2025-03-12 18:41:20 +08:00
commit 7cebe8fc00
739 changed files with 88149 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/BranchCompare/README.md Normal file
View 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 | 目标分支底部信息插槽 |

309
src/components/BranchCompare/index.vue Normal file
View File

@@ -0,0 +1,309 @@
<template>
<section class="g-branch-compare">
<div class="g-branch-compare-box abox bg-white">
<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="repoId"
: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>
<BranchTagSelector
:repoId="repoId"
v-model="sourceId"
:hideFooter="true"
:isCopy="false"
overlayClass="g-branch-compare-dropdown"
:disabled="disabled"
@onClick="handleChange($event, 'fromTab')"
/>
<div class="text-xs text-CG600 g-branch-compare-tip">
<slot name="source-tip"></slot>
</div>
</div>
</div>
<div class="g-branch-compare-switch" @click="onSwitch">
<slot name="switch">
<Icon name="gt-exchange" size="16px" :operable="true"/>
</slot>
</div>
<div class="g-branch-compare-box abox bg-white">
<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="repoId"
: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>
<BranchTagSelector
:repoId="repoId"
v-model="targetId"
:hideFooter="true"
:isCopy="false"
overlayClass="g-branch-compare-dropdown"
:disabled="disabled"
@onClick="handleChange($event, 'toTab')"
/>
<div class="text-xs text-CG600 g-branch-compare-tip">
<slot name="target-tip"></slot>
</div>
</div>
</div>
</section>
</template>
<script lang="ts">
export default {
name: 'branch-compare'
};
</script>
<script setup lang="ts">
import { ref, watch, computed, onUnmounted, reactive } from 'vue';
import type { BranchCompareData } from '@/components/BranchCompare/types';
import BranchTagSelector from '@/components/BranchTagSelector/index.vue';
const props = withDefaults(
defineProps<{
data: BranchCompareData;
repoList: { label: string; value: number | string }[];
repoIcon?: string;
branchIcon?: string;
repoIconSize?: string;
branchIconSize?: string;
repoReadonly: boolean;
showRepo: boolean;
tabType: object;
maxHeight?: number;
disabled: boolean;
}>(),
{
data: () => {
return {
repoId: null,
sourceId: null,
targetId: null
};
},
repoIcon: 'gt-compare',
branchIcon: 'gt-branches',
repoIconSize: '16px',
branchIconSize: '16px',
repoReadonly: false,
showRepo: true,
maxHeight: 250,
disabled: false
}
);
const emits = defineEmits<{(e: 'repoChange', data: string | number): void;
(e: 'branchChange', data: { sourceId: string | number; targetId: string | number }): void;
}>();
const repoId = ref(props.data.repoId);
const sourceId = ref(props.data.sourceId);
const targetId = ref(props.data.targetId);
const tabType = props.tabType;
const handleChange = (val, name) => {
if (val.type) {
tabType[name] = val.type;
}
};
watch(
() => props.data,
(val) => {
repoId.value = val.repoId || null;
sourceId.value = val.sourceId || null;
targetId.value = val.targetId || null;
},
{
deep: true
}
);
watch(
() => repoId.value,
(val, oldVal) => {
if (val === oldVal) return false;
emits('repoChange', val);
}
);
watch(
() => `${sourceId.value}_${targetId.value}`,
(val, oldVal) => {
if (val === oldVal) return false;
emits('branchChange', {
sourceId: sourceId.value,
targetId: targetId.value
});
}
);
const ele = ref(null);
const selectWidth = ref(488);
onUnmounted(() => {});
const onSwitch = () => {
[tabType.fromTab, tabType.toTab] = [tabType.toTab, tabType.fromTab];
[sourceId.value, targetId.value] = [targetId.value, sourceId.value];
};
</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%);
.g-branch-compare {
display: flex;
align-items: center;
&-tip {
min-height: 36px;
}
&-box {
flex: 1;
overflow: hidden;
}
&-header {
padding: 24px 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;
box-sizing: content-box;
:deep(.icon) {
margin: 0 auto;
align-self: center;
}
&:hover {
cursor: pointer;
}
}
}
.abox {
background-color: var(--devui-base-bg, #ffffff);
box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, 0.12));
border-radius: var(--border-radius);
}
</style>
<style lang="scss">
.g-branch-compare-dropdown {
.g-branch-tag-selector-body {
width: 488px;
}
}
</style>

6
src/components/BranchCompare/types.ts Normal file
View File

@@ -0,0 +1,6 @@
export type BranchCompareData = {
repoId: string | number;
sourceId: string | number;
targetId: string | number;
[propName: string]: any;
}