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

src/assets/css/style.css

@@ -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;
+}

src/lang/en.ts

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

src/lang/zh-cn.ts

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

src/views/home/components/Input.vue

@@ -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;
+  padding: 2rem 2.4rem 2.4rem;
-  flex-direction: column;
 }
 
 .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;
+  margin-bottom: 2rem;
-  border-bottom: 0.1rem solid #f0f0f0;
+  // 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;
+  height: 9.1rem;
-  background-color: #f7f7f7;
+  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;
+  font-size: 1.2rem;
-  color: #333;
+  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 {
+.fida-setting-popover {
-  width: 100%;
+  width: 34.2rem !important;
-  height: 4.4rem;
+  padding: 0 !important;
-  background-color: #000;
+  border-radius: 0.6rem !important;
-  color: #fff;
+  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
-  border: none;
+  background-color: #fff !important;
-  border-radius: 0.8rem;
+  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;
+  font-size: 1.6rem;
-  cursor: pointer;
+  color: #000;
-  transition: background-color 0.2s ease;
+  margin-bottom: 2rem;
 }
 
-.fida-confirm-btn:hover {
+.fida-setting-slider-list {
-  background-color: #333;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
 }
 
-.fida-confirm-btn:active {
+.fida-setting-slider-item {
-  background-color: #000;
+  .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>

src/views/home/versionTree/tree/index.vue

@@ -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">
+		<div v-show="treeState" class="box view2">
-			<view2 :list="view1List" ref="view2Ref"></view2>
+			<view2 ref="view2Ref"></view2>
 		</div>
 	</div>
 </template>

src/views/home/versionTree/tree/view2/index.vue

@@ -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: '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', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 1' }, position },
-  { id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-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: '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-2', source: '1', target: '2', type: 'smoothstep' },
-  { id: 'e1-3', source: '2', target: '2-1', type: 'smoothstep', sourceHandle:'right',},
+//   { 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-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]
+	let className = 'custom-node'
-	nodes.value.push(item)
+	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>
+		<div class="vueFlowBox" v-if="isLoad">
-		<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
+			<div @click="toggleNodesDraggable">拖拽节点</div>
-			<template #node-PrimaryNode="nodeProps">
+			<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
-				<PrimaryNode v-bind="nodeProps" />
+				<template #node-PrimaryNode="nodeProps">
-			</template>
+					<PrimaryNode v-bind="nodeProps" />
-			<template #node-SecondaryNode="nodeProps">
+				</template>
-				<SecondaryNode 
+				<template #node-SecondaryNode="nodeProps">
-					v-bind="nodeProps" 
+					<SecondaryNode 
-					:selectId="selectId"
+						v-bind="nodeProps" 
-				 />
+						:selectId="selectId"
-			</template>
+					/>
+				</template>
 
-			<!-- <template #edge-custom="edgeProps">
+				<!-- <template #edge-custom="edgeProps">
-				<SpecialEdge v-bind="edgeProps" />
+					<SpecialEdge v-bind="edgeProps" />
-			</template> -->
+				</template> -->
-		</VueFlow>
+			</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;