aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

Browse Source
This commit is contained in:
lizhipeng
2026-02-04 15:30:36 +08:00
parent ea01192068 dfc97f9056
commit b8c761f980
7 changed files with 223 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/assets/css/style.css
View File

@@ -33,3 +33,32 @@ body,
background-image: url('@/assets/images/home-bg.png');
background-size: 100% 100%;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-center {
justify-content: center;
align-items: center;
}
.flex-1 {
flex: 1;
}
.align-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}

BIN
src/assets/images/setting.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

6
src/lang/en.ts
View File

@@ -23,6 +23,12 @@ export default {
NordicNoir:'Nordic\nNoir',
},
chooseStyle: 'Choose Style',
setting: 'Setting',
settingOptions: {
creativity: 'Creativity',
diversity: 'Diversity',
relevance: 'Relevance'
},
confirm: 'Confirm'
},
area: {

6
src/lang/zh-cn.ts
View File

@@ -18,6 +18,12 @@ export default {
classic: '古典'
},
chooseStyle: '选择风格',
setting: 'Setting',
settingOptions: {
creativity: '创意度',
diversity: '多样性',
relevance: '相关度'
},
confirm: '确认'
},
area: {

150
src/views/home/components/Input.vue
View File

@@ -37,7 +37,7 @@
<el-popover
v-model:visible="stylePopupVisible"
placement="bottom-start"
placement="top"
:width="342"
:show-arrow="false"
trigger="click"
@@ -46,7 +46,7 @@
<template #reference>
<div class="fida-style-select-trigger"></div>
</template>
<div class="fida-style-popover-content">
<div class="fida-style-popover-content flex flex-col">
<div class="fida-style-popover-header">{{ $t('Input.chooseStyle') }}</div>
<div class="fida-style-popover-grid">
<div
@@ -59,7 +59,7 @@
<span class="fida-option-label">{{ $t(item.label) }}</span>
</div>
</div>
<div class="fida-style-popover-footer">
<div class="fida-style-popover-footer flex flex-center">
<button class="fida-confirm-btn" @click="confirmStyle">
{{ $t('Input.confirm') }}
</button>
@@ -67,6 +67,30 @@
</div>
</el-popover>
</div>
<el-popover
v-model:visible="settingPopupVisible"
placement="top"
:width="342"
:show-arrow="false"
trigger="click"
popper-class="fida-setting-popover"
>
<template #reference>
<img src="@/assets/images/setting.png" class="setting-icon" />
</template>
<div class="fida-setting-popover-content flex flex-col">
<div class="fida-setting-popover-header">{{ $t('Input.setting') }}</div>
<div class="fida-setting-slider-list">
<div v-for="item in settingOptions" :key="item.label" class="fida-setting-slider-item">
<div class="fida-slider-label">{{ $t(item.label) }}</div>
<div class="fida-slider-row flex align-center">
<el-slider v-model="item.value" :show-tooltip="false" />
<span class="fida-slider-value">{{ item.value }}%</span>
</div>
</div>
</div>
</div>
</el-popover>
</div>
</div>
</template>
@@ -95,6 +119,13 @@ const styleValue = ref<string>('')
const tempSelectedValue = ref<string>('')
const stylePopupVisible = ref(false)
const settingPopupVisible = ref(false)
const settingOptions = ref([
{ label: 'Input.settingOptions.creativity', value: 50 },
{ label: 'Input.settingOptions.diversity', value: 75 },
{ label: 'Input.settingOptions.relevance', value: 60 }
])
const openStylePopup = () => {
// 打开弹窗时初始化临时选中值为当前选中值
tempSelectedValue.value = styleValue.value
@@ -110,6 +141,10 @@ const confirmStyle = () => {
styleValue.value = tempSelectedValue.value
stylePopupVisible.value = false
}
const confirmSetting = () => {
settingPopupVisible.value = false
}
const typeOptions = ref<any[]>([
{
label: 'Input.types.sofa',
@@ -193,6 +228,12 @@ const styleOptions = ref<any[]>(
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
}
.setting-icon {
width: 2.4rem;
height: 2.4rem;
cursor: pointer;
}
}
}
@@ -213,7 +254,6 @@ const styleOptions = ref<any[]>(
</style>
<style lang="less">
/* 弹窗样式 - 使用 fida- 前缀避免样式污染 */
.fida-style-select-popover {
width: 34.2rem !important;
padding: 0 !important;
@@ -224,8 +264,7 @@ const styleOptions = ref<any[]>(
}
.fida-style-popover-content {
display: flex;
flex-direction: column;
padding: 2rem 2.4rem 2.4rem;
}
.fida-style-popover-header {
@@ -233,27 +272,27 @@ const styleOptions = ref<any[]>(
font-weight: 500;
font-size: 1.6rem;
color: #000;
padding: 1.8rem 2rem 1.5rem;
border-bottom: 0.1rem solid #f0f0f0;
margin-bottom: 2rem;
// padding: 1.8rem 2rem 1.5rem;
// border-bottom: 0.1rem solid #f0f0f0;
}
.fida-style-popover-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
padding: 1.5rem 2rem;
}
.fida-style-popover-item {
height: 9rem;
background-color: #f7f7f7;
height: 9.1rem;
width: 9.1rem;
background-color: #a6a6a6;
border-radius: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
border: 0.2rem solid transparent;
}
.fida-style-popover-item:hover {
@@ -262,42 +301,91 @@ const styleOptions = ref<any[]>(
.fida-style-popover-item.is-selected {
background-color: #e3f2fd;
border-color: #2196f3;
.fida-option-label {
color: #000;
}
// border-color: #2196f3;
}
.fida-style-popover-item .fida-option-label {
font-family: 'GeneralMedium';
font-weight: 500;
font-size: 1.3rem;
color: #333;
font-size: 1.2rem;
color: #fff;
text-align: center;
padding: 0.5rem;
}
.fida-style-popover-footer {
padding: 1.5rem 2rem 1.8rem;
border-top: 0.1rem solid #f0f0f0;
// border-top: 0.1rem solid #f0f0f0;
margin-top: 2.4rem;
.fida-confirm-btn {
margin: 0 auto;
width: 15.7rem;
height: 3.4rem;
line-height: 3.4rem;
background-color: #ff7a51;
color: #fff;
border: none;
border-radius: 3.8rem;
font-family: 'GeneralMedium';
font-weight: 500;
font-size: 1.4rem;
cursor: pointer;
}
}
.fida-confirm-btn {
width: 100%;
height: 4.4rem;
background-color: #000;
color: #fff;
border: none;
border-radius: 0.8rem;
.fida-setting-popover {
width: 34.2rem !important;
padding: 0 !important;
border-radius: 0.6rem !important;
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
background-color: #fff !important;
border: none !important;
}
// .fida-setting-popover-content {
// padding: 2rem 2.4rem 2.4rem;
// }
.fida-setting-popover-header {
font-family: 'GeneralMedium';
font-weight: 500;
font-size: 1.5rem;
cursor: pointer;
transition: background-color 0.2s ease;
font-size: 1.6rem;
color: #000;
margin-bottom: 2rem;
}
.fida-confirm-btn:hover {
background-color: #333;
.fida-setting-slider-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.fida-confirm-btn:active {
background-color: #000;
.fida-setting-slider-item {
.fida-slider-label {
font-family: 'GeneralMedium';
font-weight: 500;
font-size: 1.4rem;
color: #000;
margin-bottom: 0.8rem;
}
.fida-slider-row {
gap: 1rem;
.el-slider {
flex: 1;
}
.fida-slider-value {
font-family: 'GeneralMedium';
font-weight: 500;
font-size: 1.4rem;
color: #000;
min-width: 3.5rem;
text-align: right;
}
}
// :deep(.el-slider) {
// }
}
</style>

28
src/views/home/versionTree/tree/index.vue
View File

@@ -25,28 +25,9 @@ watch(()=>props.treeState,(newVal,oldVal)=>{
const view2Ref = ref(null)
const pushView2Item = (item)=>{
// if(node)view2Ref.value.pushNode(node)
// if(edge)view2Ref.value.pushEdge(edge)
view2Ref.value.push(item)
}
function traverseArray(items, callback) {
for (let i = 0; i < items.length; i++) {
const item = items[i]
callback(item, i)
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
traverseArray(item.children, callback)
}
}
}
const addView2Item = ()=>{
traverseArray(versionsList, (item, index) => {
pushView2Item(item)
})
}
const view1List = ref([
{
name:'P1',
@@ -57,7 +38,8 @@ const view1List = ref([
}
])
onMounted(()=>{
addView2Item()
// addView2Item()
view2Ref.value.init(versionsList)
})
onUnmounted(()=>{
})
@@ -66,11 +48,11 @@ const {} = toRefs(data);
</script>
<template>
<div class="tree" v-show="treeStateTime">
<div v-if="!treeState" class="box view1">
<div v-show="!treeState" class="box view1">
<view1Item v-for="item in view1List" :key="item.name" :item="item"></view1Item>
</div>
<div v-else class="box view2">
<view2 :list="view1List" ref="view2Ref"></view2>
<div v-show="treeState" class="box view2">
<view2 ref="view2Ref"></view2>
</div>
</div>
</template>

84
src/views/home/versionTree/tree/view2/index.vue
View File

@@ -16,23 +16,24 @@ const props = defineProps({
//])
let selectId = ref(2)
const isLoad = ref(false)
// 节点类型：input、output、default、custom
// input:开始点，output：结尾点，default：普通节点，custom：自定义节点
const position = { x: 0, y: 0 }
const nodes = ref<Node[]>([
{ id: '1', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' },
{ id: '2', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 1' }, position },
{ id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-1' }, position },
{ id: '3', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 2' }, position },
// { id: '1', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' },
// { id: '2', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 1' }, position },
// { id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-1' }, position },
// { id: '3', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 2' }, position },
])
// 边类型：custom、default
// custom：自定义边，default：普通边，step：直角边，smoothstep：平滑边
const edges = ref<Edge[]>([
{ id: 'e1-2', source: '1', target: '2', type: 'smoothstep' },
{ id: 'e1-3', source: '2', target: '2-1', type: 'smoothstep', sourceHandle:'right',},
{ id: 'e1-4', source: '2', target: '3', type: 'smoothstep',sourceHandle:'bottom', animated: true },
// { id: 'e1-2', source: '1', target: '2', type: 'smoothstep' },
// { id: 'e1-3', source: '2', target: '2-1', type: 'smoothstep', sourceHandle:'right',},
// { id: 'e1-4', source: '2', target: '3', type: 'smoothstep',sourceHandle:'bottom', animated: true },
])
const { fitView } = useVueFlow()
const { layout } = useLayout()
@@ -51,8 +52,32 @@ const push = (item)=>{
if(nodes.value.length == 0){
nodes.value.push({ id: '0', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' })
}
let id = item.id.split('-')[0]
nodes.value.push(item)
let className = 'custom-node'
let id = item.id
let target = edges.value.length == 0?'0':item.id.slice(0, -2)
nodes.value.push({id,type:'SecondaryNode',class:className,position,data:item})
edges.value.push({ id, source: id, target, type: 'smoothstep' })
console.log()
}
function traverseArray(items, callback) {
for (let i = 0; i < items.length; i++) {
const item = items[i]
callback(item, i)
if (item.child && Array.isArray(item.child) && item.child.length > 0) {
traverseArray(item.child, callback)
}
}
}
const init = (list)=>{
isLoad.value = false
traverseArray(list, (item, index) => {
console.log()
push(item)
})
isLoad.value = true
console.log(nodes.value,edges.value)
}
//是否可拖动节点
@@ -69,27 +94,30 @@ onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({push})
defineExpose({init,push})
// const {} = toRefs(data);
</script>
<template>
<div class="view2">
<div @click="toggleNodesDraggable">拖拽节点</div>
<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
<template #node-PrimaryNode="nodeProps">
<PrimaryNode v-bind="nodeProps" />
</template>
<template #node-SecondaryNode="nodeProps">
<SecondaryNode
v-bind="nodeProps"
:selectId="selectId"
/>
</template>
<div class="vueFlowBox" v-if="isLoad">
<div @click="toggleNodesDraggable">拖拽节点</div>
<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
<template #node-PrimaryNode="nodeProps">
<PrimaryNode v-bind="nodeProps" />
</template>
<template #node-SecondaryNode="nodeProps">
<SecondaryNode
v-bind="nodeProps"
:selectId="selectId"
/>
</template>
<!-- <template #edge-custom="edgeProps">
<SpecialEdge v-bind="edgeProps" />
</template> -->
</VueFlow>
<!-- <template #edge-custom="edgeProps">
<SpecialEdge v-bind="edgeProps" />
</template> -->
</VueFlow>
</div>
</div>
</template>
<style lang="less">
@@ -101,7 +129,11 @@ defineExpose({push})
width: 100%;
height: 100%;
overflow: hidden;
>.vueFlowBox{
width: 100%;
height: 100%;
overflow: hidden;
}
:deep(.custom-node){
--vf-handle: #000;
--vf-node-color: #000;