Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front
This commit is contained in:
李志鹏
35
src/views/home/VersionTree.vue
Normal file
35
src/views/home/VersionTree.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
|
||||
import VersionTreeIndex from './versionTree/index.vue'
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const versionTreeData = ref({
|
||||
drawer:false,
|
||||
list:computed(()=>{
|
||||
return []
|
||||
})
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="homeNavBox">
|
||||
<el-button type="primary" @click="versionTreeData.drawer = true">open Version Tree</el-button>
|
||||
<VersionTreeIndex v-model:versionTreeData="versionTreeData" />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.homeNavBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
303
src/views/home/components/Input.vue
Normal file
303
src/views/home/components/Input.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div class="assist-input-wrapper flex flex-col">
|
||||
<textarea
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="inputValue"
|
||||
:placeholder="$t('Input.placeholder')"
|
||||
/>
|
||||
<div class="operate flex align-center">
|
||||
<div class="attach flex flex-center">
|
||||
<img src="@/assets/icons/attach.svg" alt="" />
|
||||
</div>
|
||||
<el-select v-model="typeValue" :placeholder="$t('Input.typePlaceholder')">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
class="input-option"
|
||||
:key="item.value"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select v-model="areaValue" :placeholder="$t('Input.areaPlaceholder')">
|
||||
<el-option
|
||||
v-for="item in areaOptions"
|
||||
class="input-option"
|
||||
:key="item.value"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="fida-style-select-wrapper">
|
||||
<el-select
|
||||
v-model="styleValue"
|
||||
:placeholder="$t('Input.stylePlaceholder')"
|
||||
@focus="openStylePopup"
|
||||
/>
|
||||
|
||||
<el-popover
|
||||
v-model:visible="stylePopupVisible"
|
||||
placement="bottom-start"
|
||||
:width="342"
|
||||
:show-arrow="false"
|
||||
trigger="click"
|
||||
popper-class="fida-style-select-popover"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="fida-style-select-trigger"></div>
|
||||
</template>
|
||||
<div class="fida-style-popover-content">
|
||||
<div class="fida-style-popover-header">{{ $t('Input.chooseStyle') }}</div>
|
||||
<div class="fida-style-popover-grid">
|
||||
<div
|
||||
v-for="item in styleOptions"
|
||||
:key="item.value"
|
||||
class="fida-style-popover-item"
|
||||
:class="{ 'is-selected': tempSelectedValue === item.value }"
|
||||
@click="selectStyle(item.value)"
|
||||
>
|
||||
<span class="fida-option-label">{{ $t(item.label) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fida-style-popover-footer">
|
||||
<button class="fida-confirm-btn" @click="confirmStyle">
|
||||
{{ $t('Input.confirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { areaList } from '@/utils/area'
|
||||
|
||||
const styleKeys: string[] = [
|
||||
'Coastal',
|
||||
'Verdant',
|
||||
'Traditional',
|
||||
'CenturyChrome',
|
||||
'ModernRevival',
|
||||
'Tuscan2000s',
|
||||
'Bauhaus',
|
||||
'Constructivism',
|
||||
'NordicNoir'
|
||||
]
|
||||
|
||||
const inputValue = ref<string>('')
|
||||
|
||||
const typeValue = ref<string>('')
|
||||
const areaValue = ref<string>('')
|
||||
const styleValue = ref<string>('')
|
||||
const tempSelectedValue = ref<string>('')
|
||||
const stylePopupVisible = ref(false)
|
||||
|
||||
const openStylePopup = () => {
|
||||
// 打开弹窗时初始化临时选中值为当前选中值
|
||||
tempSelectedValue.value = styleValue.value
|
||||
stylePopupVisible.value = true
|
||||
}
|
||||
|
||||
const selectStyle = (value: string) => {
|
||||
tempSelectedValue.value = value
|
||||
}
|
||||
|
||||
const confirmStyle = () => {
|
||||
// 点击确认后才真正赋值
|
||||
styleValue.value = tempSelectedValue.value
|
||||
stylePopupVisible.value = false
|
||||
}
|
||||
const typeOptions = ref<any[]>([
|
||||
{
|
||||
label: 'Input.types.sofa',
|
||||
value: 'Sofa'
|
||||
},
|
||||
{
|
||||
label: 'Input.types.desk',
|
||||
value: 'Desk'
|
||||
},
|
||||
{
|
||||
label: 'Input.types.chair',
|
||||
value: 'Chair'
|
||||
}
|
||||
])
|
||||
const areaOptions = ref<any[]>(areaList)
|
||||
const styleOptions = ref<any[]>(
|
||||
styleKeys.map((key) => ({
|
||||
label: `Input.styles.${key}`,
|
||||
value: key
|
||||
}))
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.assist-input-wrapper {
|
||||
height: 23.5rem;
|
||||
width: 106.3rem;
|
||||
border-radius: 2.8rem;
|
||||
background-color: #fff;
|
||||
border: 0.1rem solid #00000005;
|
||||
box-shadow: 0px 5px 14px 0px #0000001a;
|
||||
margin: 0 auto;
|
||||
padding: 3.4rem 1.7rem 1.7rem 2rem;
|
||||
.input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0 1.4rem;
|
||||
font-size: 2rem;
|
||||
font-family: 'InterRegular';
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
resize: none;
|
||||
}
|
||||
.operate {
|
||||
column-gap: 2rem;
|
||||
.attach {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.el-select {
|
||||
width: 13.9rem;
|
||||
height: 4rem;
|
||||
:deep(.el-select__wrapper) {
|
||||
border-radius: 0.8rem;
|
||||
height: 100%;
|
||||
box-shadow: none;
|
||||
border: 0.1rem solid rgba(0, 0, 0, 0.1);
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
.el-select__placeholder {
|
||||
color: #000;
|
||||
}
|
||||
.el-select__icon {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fida-style-select-wrapper {
|
||||
position: relative;
|
||||
width: 13.9rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.fida-style-select-trigger {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-option {
|
||||
// padding: 0 1rem;
|
||||
margin: 0 0.6rem;
|
||||
padding: 0 0.8rem 0 1rem;
|
||||
color: #0d0d0d;
|
||||
font-weight: 510;
|
||||
font-size: 1.3rem;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
&.el-select-dropdown__item.is-hovering {
|
||||
background-color: rgba(13, 13, 13, 0.02);
|
||||
// border-radius: 0.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
/* 弹窗样式 - 使用 fida- 前缀避免样式污染 */
|
||||
.fida-style-select-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-style-popover-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fida-style-popover-header {
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
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;
|
||||
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 {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.fida-style-popover-item.is-selected {
|
||||
background-color: #e3f2fd;
|
||||
border-color: #2196f3;
|
||||
}
|
||||
|
||||
.fida-style-popover-item .fida-option-label {
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.fida-style-popover-footer {
|
||||
padding: 1.5rem 2rem 1.8rem;
|
||||
border-top: 0.1rem solid #f0f0f0;
|
||||
}
|
||||
|
||||
.fida-confirm-btn {
|
||||
width: 100%;
|
||||
height: 4.4rem;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0.8rem;
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.fida-confirm-btn:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.fida-confirm-btn:active {
|
||||
background-color: #000;
|
||||
}
|
||||
</style>
|
||||
32
src/views/home/mainInput.vue
Normal file
32
src/views/home/mainInput.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="main-input-container flex-1">
|
||||
<div class="slogan">
|
||||
<p>Creating Things with <span class="fiDA">FiDA</span> that</p>
|
||||
<p>Bloom Your Creativity</p>
|
||||
</div>
|
||||
<Input />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import Input from './components/Input.vue'
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main-input-container {
|
||||
padding-top: 20.2rem;
|
||||
.slogan{
|
||||
color: #000;
|
||||
font-size: 6rem;
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-bottom: 5.6rem;
|
||||
.fiDA{
|
||||
font-family: 'GeneralBold';
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
src/views/home/versionTree/index.vue
Normal file
110
src/views/home/versionTree/index.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import Tree from './tree/index.vue'
|
||||
const props = defineProps({
|
||||
versionTreeData:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {
|
||||
drawer:false,
|
||||
list:[],
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const treeState = ref(false)//
|
||||
|
||||
const openTree = ()=>{
|
||||
treeState.value = !treeState.value
|
||||
|
||||
}
|
||||
|
||||
let data = reactive({
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="versionTree">
|
||||
<el-drawer
|
||||
v-model="versionTreeData.drawer"
|
||||
:close-on-press-escape="false"
|
||||
:close-on-click-modal="false"
|
||||
:size="treeState?'109rem':'49rem'"
|
||||
body-class="versionTreeBody"
|
||||
:with-header="false">
|
||||
<div class="versionTreeTitle">
|
||||
<span>Version Tree: Retro Sofa Sketch</span>
|
||||
<div class="closeBtn" @click="versionTreeData.drawer = false">
|
||||
<div class="closeIcon">
|
||||
<SvgIcon name="close" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<el-button class="expandBtn" @click="openTree" style="width: 5rem;">+</el-button>
|
||||
<el-button class="expandBtn" @click="openTree" style="width: 5rem;">-</el-button>
|
||||
</div>
|
||||
<div class="versionTreeBox">
|
||||
<div class="tree">
|
||||
<Tree :treeState="treeState"></Tree>
|
||||
</div>
|
||||
<div class="detail">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.versionTree{
|
||||
--border-radius: 1rem;
|
||||
:deep(.versionTreeBody){
|
||||
--el-drawer-padding-primary: 0rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.versionTreeTitle{
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 .8rem 0 1.2rem;
|
||||
border-bottom: 1px solid #C9C9C9;
|
||||
> span{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .closeBtn{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.versionTreeBox{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
> .tree{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 1.8rem 0 1.8rem 2.1rem;
|
||||
}
|
||||
> .detail{
|
||||
width: 35rem;
|
||||
margin: 1.4rem 3rem 0 3.4rem;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
71
src/views/home/versionTree/tree/index.vue
Normal file
71
src/views/home/versionTree/tree/index.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from "vue";
|
||||
import view1Item from './view1Item.vue'
|
||||
import view2 from './view2/index.vue'
|
||||
|
||||
const props = defineProps({
|
||||
treeState:{
|
||||
default:false,
|
||||
},
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
const treeStateTime = ref(true)
|
||||
|
||||
watch(()=>props.treeState,(newVal,oldVal)=>{
|
||||
treeStateTime.value = false
|
||||
setTimeout(()=>{
|
||||
treeStateTime.value = true
|
||||
},250)
|
||||
})
|
||||
|
||||
const view1List = ref([
|
||||
{
|
||||
name:'P1',
|
||||
},{
|
||||
name:'V1',
|
||||
},{
|
||||
name:'V1-1',
|
||||
}
|
||||
])
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="tree" v-show="treeStateTime">
|
||||
<div v-if="!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"></view2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.tree{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
&.view1{
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
&.view2{
|
||||
border: 1px solid #D9D9D9;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: var(--border-radius, 1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
70
src/views/home/versionTree/tree/view1Item.vue
Normal file
70
src/views/home/versionTree/tree/view1Item.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="btn">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.btn{
|
||||
font-size: 1.2rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #000;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
margin-bottom: 4rem;
|
||||
position: relative;
|
||||
&::after{
|
||||
content: '';
|
||||
cursor: auto;
|
||||
position: absolute;
|
||||
top: calc(100% + 2px);
|
||||
height: 4rem;
|
||||
left: 50%;
|
||||
width: 1.8px;
|
||||
transform: translateX(-50%);
|
||||
background:
|
||||
repeating-linear-gradient(0deg, #333 0, #333 5px, transparent 5px, transparent 10px),
|
||||
linear-gradient(white, white);
|
||||
background-clip: padding-box, border-box;
|
||||
background-origin: border-box;
|
||||
}
|
||||
&.active{
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
}
|
||||
.btn:nth-child(1){
|
||||
background-color: #7A7A7A;
|
||||
color: #FFF;
|
||||
border: 2px solid #7A7A7A;
|
||||
}
|
||||
.btn:last-child{
|
||||
margin-bottom: 0;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
src/views/home/versionTree/tree/view2/index.vue
Normal file
63
src/views/home/versionTree/tree/view2/index.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import type { Node, Edge } from '@vue-flow/core'
|
||||
import { VueFlow } from '@vue-flow/core'
|
||||
import SpecialEdge from './speciaiEdge.vue'
|
||||
import SpecialNode from './speciaiNode.vue'
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
const nodes = ref<Node[]>([
|
||||
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 0 } },
|
||||
{ id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 } },
|
||||
{ id: '3', type: 'custom', label: 'Node 3', position: { x: 400, y: 100 } },
|
||||
{ id: '4', type: 'custom', label: 'Node 3', position: { x: 400, y: 200 } },
|
||||
])
|
||||
|
||||
const edges = ref<Edge[]>([
|
||||
{ id: 'e1-2', source: '1', target: '2', type: 'custom' },
|
||||
{ id: 'e1-3', source: '1', target: '3', animated: true },
|
||||
{ id: 'e1-4', source: '1', target: '4', },
|
||||
])
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="view2">
|
||||
<VueFlow :nodes="nodes" :edges="edges">
|
||||
<!-- bind your custom node type to a c omponent by using slots, slot names are always `node-<type>` -->
|
||||
<template #node-custom="nodeProps">
|
||||
<SpecialNode v-bind="nodeProps" />
|
||||
</template>
|
||||
|
||||
<!-- <template #edge-custom="edgeProps">
|
||||
<SpecialEdge v-bind="edgeProps" />
|
||||
</template> -->
|
||||
</VueFlow>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "@vue-flow/core/dist/style.css";
|
||||
@import "@vue-flow/core/dist/theme-default.css";
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.view2{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
45
src/views/home/versionTree/tree/view2/speciaiEdge.vue
Normal file
45
src/views/home/versionTree/tree/view2/speciaiEdge.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import type { EdgeProps } from '@vue-flow/core'
|
||||
import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
|
||||
|
||||
const props = defineProps<EdgeProps>()
|
||||
|
||||
const { removeEdges } = useVueFlow()
|
||||
|
||||
const path = computed(() => getBezierPath(props))
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseEdge :path="path[0]" />
|
||||
|
||||
<EdgeLabelRenderer>
|
||||
<div
|
||||
:style="{
|
||||
pointerEvents: 'all',
|
||||
position: 'absolute',
|
||||
transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
|
||||
}"
|
||||
class="nodrag nopan"
|
||||
>
|
||||
<button class="edgebutton" @click="removeEdges(id)">×</button>
|
||||
</div>
|
||||
</EdgeLabelRenderer>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.edgebutton {
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edgebutton:hover {
|
||||
box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
|
||||
}
|
||||
</style>
|
||||
55
src/views/home/versionTree/tree/view2/speciaiNode.vue
Normal file
55
src/views/home/versionTree/tree/view2/speciaiNode.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script lang="ts" setup>
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const counter = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="custom-node">
|
||||
<Handle type="target" :position="Position.Top" />
|
||||
<button class="increment nodrag" @click="counter++">Increment</button>
|
||||
|
||||
<div v-if="counter > 0" class="counter">
|
||||
<div class="count" v-for="count of counter" :key="`count-${count}`">{{ count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.custom-node {
|
||||
min-width: 100px;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.increment {
|
||||
border-radius: 4px;
|
||||
background: #42b983;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.increment:hover {
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.counter {
|
||||
margin-top: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 6px;
|
||||
color: #ff0072;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user