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

深度画布框架

Browse Source
This commit is contained in:
lzp
2026-03-06 15:50:05 +08:00
parent a3938662c9
commit d0d8c0ab9b
47 changed files with 3827 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/home/index.vue
View File

@@ -17,6 +17,7 @@
</div>
<setting />
<flow-canvas ref="flowCanvasRef" />
<depth-canvas ref="depthCanvasRef" />
</template>
<script setup lang="ts">
@@ -26,16 +27,21 @@
import setting from './setting/index.vue'
import { useUserInfoStore, useGlobalStore } from '@/stores'
import FlowCanvas from '@/components/Canvas/FlowCanvas/index.vue'
import DepthCanvas from '@/components/Canvas/DepthCanvas/index.vue'
import myEvent from '@/utils/myEvent'
const userInfoStore = useUserInfoStore()
const globalStore = useGlobalStore()
userInfoStore.getUserInfo()
const isAnimation = computed(() => globalStore.state.homeAnimation)
const flowCanvasRef = ref(null)
const openFlowCanvas = (config) => {
flowCanvasRef.value.open(config)
}
const openFlowCanvas = (config) => flowCanvasRef.value.open(config)
myEvent.add('openFlowCanvas', openFlowCanvas)
const depthCanvasRef = ref(null)
const openDepthCanvas = (config) => depthCanvasRef.value.open(config)
myEvent.add('openDepthCanvas', openDepthCanvas)
onMounted(() => {
setTimeout(() => {
globalStore.setHomeAnimation(false)
@@ -43,6 +49,7 @@
})
onUnmounted(() => {
myEvent.remove('openFlowCanvas', openFlowCanvas)
myEvent.remove('openDepthCanvas', openDepthCanvas)
})
</script>

24
src/views/home/left-nav.vue
View File

@@ -15,9 +15,6 @@
<span class="icon"><svg-icon name="home" size="24" /></span>
<span class="title" v-show="!isCollapse">{{ $t('Home.home') }}</span>
</div> -->
<div class="menu-item" @click="onTest">
<span class="title">TEST</span>
</div>
<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
<span class="icon"><svg-icon name="history" size="24" /></span>
<span class="title" v-show="!isCollapse">{{ $t('Home.history') }}</span>
@@ -81,6 +78,13 @@
</div>
</div>
</div>
<div class="menu-item" @click="onCanvas(false)">
<span class="title">画布</span>
</div>
<div class="menu-item" @click="onCanvas(true)">
<span class="title">深度画布</span>
</div>
</div>
</template>
@@ -108,8 +112,10 @@
router.push({ name: 'mainInput' })
}
const onHome = () => {}
const onTest = () => {
router.push({ name: 'test' })
const onCanvas = (depth: boolean) => {
const query = {}
if (depth) query['depth'] = '1'
router.push({ name: 'test', query })
}
const onHistory = () => {
if (isCollapse.value) {
@@ -353,14 +359,14 @@
}
.history-item-menu {
user-select: none;
> div {
cursor: pointer;
padding: 0.6rem .7rem;
padding: 0.6rem 0.7rem;
display: flex;
font-size: 1.3rem;
> .icon{
margin-right: .8rem;
> .icon {
margin-right: 0.8rem;
}
&:hover {
background-color: rgba(0, 0, 0, 0.06);

37
src/views/home/setting/General.vue
View File

@@ -1,4 +1,13 @@
<template>
<div>
<div class="label">{{ $t('Home.userProfile') }}</div>
<div class="profile">
<img :src="userInfo?.profile" />
<span class="edit" @click="onProfileEdit">
<svg-icon name="profile-edit" size="11" />
</span>
</div>
</div>
<div>
<div class="label">{{ $t('Home.userName') }}</div>
<div class="value">{{ userInfo?.username || '------' }}</div>
@@ -41,6 +50,10 @@
const logout = () => {
userInfoStore.logOut()
}
const onProfileEdit = () => {
// MyEvent.emit('openProfileEditDialog')
console.log('openProfileEditDialog')
}
</script>
<style lang="less" scoped>
@@ -54,4 +67,28 @@
color: #fff;
font-size: 1.2rem;
}
.profile {
width: 6rem;
height: 6rem;
position: relative;
> img {
width: 100%;
height: 100%;
border-radius: 50%;
}
> .edit {
position: absolute;
bottom: 0;
right: 0;
width: 2.3rem;
height: 2.3rem;
border-radius: 50%;
background-color: #fff;
box-shadow: 0px 1px 4px 0px #1a0f011f;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
</style>

3
src/views/home/setting/index.vue
View File

@@ -111,7 +111,8 @@
display: flex;
align-items: center;
justify-content: space-between;
height: 6rem;
min-height: 6rem;
padding: 1rem 0;
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
&:last-child {
border-bottom: none;

19
src/views/home/test.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="test">
<button @click="openCanvas">打开画布</button>
<button @click="openDepthCanvas">打开深度画布</button>
</div>
</template>
@@ -9,13 +10,20 @@
import { computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const url =
'https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__'
const openCanvas = () => {
myEvent.emit('openFlowCanvas', {
url: 'https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__'
})
myEvent.emit('openFlowCanvas', { url })
}
const openDepthCanvas = () => {
myEvent.emit('openDepthCanvas', { url })
}
onMounted(() => {
openCanvas()
if (route.query.depth) {
openDepthCanvas()
} else {
openCanvas()
}
})
</script>
@@ -28,7 +36,8 @@
align-items: center;
justify-content: center;
flex-direction: column;
> p {
gap: 2rem;
> button {
font-size: 10rem;
}
}