diff --git a/src/assets/css/style.css b/src/assets/css/style.css index c96084e..2fee134 100644 --- a/src/assets/css/style.css +++ b/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; +} diff --git a/src/assets/images/setting.png b/src/assets/images/setting.png new file mode 100644 index 0000000..dc2f906 Binary files /dev/null and b/src/assets/images/setting.png differ diff --git a/src/lang/en.ts b/src/lang/en.ts index 56d5246..1ef757a 100644 --- a/src/lang/en.ts +++ b/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: { diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts index f7b7fe8..eca6c95 100644 --- a/src/lang/zh-cn.ts +++ b/src/lang/zh-cn.ts @@ -18,6 +18,12 @@ export default { classic: '古典' }, chooseStyle: '选择风格', + setting: 'Setting', + settingOptions: { + creativity: '创意度', + diversity: '多样性', + relevance: '相关度' + }, confirm: '确认' }, area: { diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue index 3e51cfa..b53f794 100644 --- a/src/views/home/components/Input.vue +++ b/src/views/home/components/Input.vue @@ -37,7 +37,7 @@
-
+
{{ $t('Input.chooseStyle') }}
{{ $t(item.label) }}
-
+
@@ -67,6 +67,30 @@
+ + +
+
{{ $t('Input.setting') }}
+
+
+
{{ $t(item.label) }}
+
+ + {{ item.value }}% +
+
+
+
+
@@ -95,6 +119,13 @@ const styleValue = ref('') const tempSelectedValue = ref('') 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([ { label: 'Input.types.sofa', @@ -193,6 +228,12 @@ const styleOptions = ref( 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( diff --git a/src/views/home/versionTree/tree/index.vue b/src/views/home/versionTree/tree/index.vue index bd3936e..7444d7a 100644 --- a/src/views/home/versionTree/tree/index.vue +++ b/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); diff --git a/src/views/home/versionTree/tree/view2/index.vue b/src/views/home/versionTree/tree/view2/index.vue index 5ecc989..4943773 100644 --- a/src/views/home/versionTree/tree/view2/index.vue +++ b/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([ - { 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([ - { 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);