zhouyulong/electron-4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
夏大胆
2025-12-09 18:00:50 +08:00
parent 50cdcee3f8
commit 64a61d173b
9 changed files with 2125 additions and 1995 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/renderer/src/views/components/propertyBox/model.vue
View File

@ -137,12 +137,12 @@
</el-tree>
</div>
<div class="model-gallery" ref="galleryRef">
<div class="model-gallery" ref="galleryRef" @scroll="handleScroll">
<div class="model-section" v-if="categories.length != 0">
<!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
<div class="model-grid">
<div
v-for="(model, mIndex) in categories"
v-for="(model, mIndex) in currModelList"
:key="mIndex"
class="model-item"
@click="modelClick(mIndex, model)"
@ -365,24 +365,32 @@ const initObserver = () => {
observer?.observe(section)
})
}
//滚动加载
var currModelList: any = ref([])
let page = 1
// 模拟加载更多数据
const loadMoreData = () => {
if (loading.value) return
loading.value = true
// if (loading.value) return
// loading.value = true
setTimeout(() => {
categories.value.push({
id: `${categories.value.length + 1}`,
name: `新增分类_${categories.value.length}`,
models: Array(10)
.fill(0)
.map((_, i) => ({
id: `n${i}`,
name: `新增模型_${i}`,
thumbnail: `https://picsum.photos/300/200?random=${i + 100}`
}))
})
loading.value = false
const start = (page - 1) * 24
const end = start + 24
currModelList.value = categories.value.slice(0, end)
page++
// categories.value.push({
// id: `${categories.value.length + 1}`,
// name: `新增分类_${categories.value.length}`,
// models: Array(10)
// .fill(0)
// .map((_, i) => ({
// id: `n${i}`,
// name: `新增模型_${i}`,
// thumbnail: `https://picsum.photos/300/200?random=${i + 100}`
// }))
// })
// loading.value = false
}, 1000)
}
@ -391,14 +399,18 @@ const handleScroll = () => {
if (!galleryRef.value) return
const scrollPosition = galleryRef.value.scrollTop + 100
const sections = Array.from(document.querySelectorAll('.model-section'))
// const sections = Array.from(document.querySelectorAll('.model-section'))
sections.forEach((section, index) => {
const rect = section.getBoundingClientRect()
if (rect.top <= 450 && rect.bottom >= 450) {
activeTab.value = index.toString()
}
})
// sections.forEach((section, index) => {
// const rect = section.getBoundingClientRect()
// if (rect.top <= 450 && rect.bottom >= 450) {
// console.log('indexxxxxx', index)
// activeTab.value = index.toString()
// }
// })
if (galleryRef.value.scrollTop + galleryRef.value.clientHeight >= galleryRef.value.scrollHeight) {
loadMoreData()
}
}
//-----------tree-----------
@ -566,6 +578,10 @@ const getModelListByType = (id) => {
formData.append('name', modelName.value)
ModelApi.showModelByType(formData).then((res) => {
categories.value = res.data
currModelList.value = []
page = 1
loadMoreData()
})
}
@ -668,8 +684,11 @@ defineExpose({
// height: 50vh;
:deep(.el-dialog) {
background:
linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(var(--color-base1), 0) 100%),
background: linear-gradient(
180deg,
rgba(var(--color-base1), 0.2) 0%,
rgba(var(--color-base1), 0) 100%
),
rgba(0, 0, 0, 0.6);
border: 1px solid var(--color-border1);
padding-left: 0 !important;
@ -737,22 +756,22 @@ defineExpose({
// height: 50vh;
:deep(
.el-tabs--left .el-tabs__active-bar.is-left,
.el-tabs--left .el-tabs__active-bar.is-right,
.el-tabs--right .el-tabs__active-bar.is-left,
.el-tabs--right .el-tabs__active-bar.is-right
) {
.el-tabs--left .el-tabs__active-bar.is-left,
.el-tabs--left .el-tabs__active-bar.is-right,
.el-tabs--right .el-tabs__active-bar.is-left,
.el-tabs--right .el-tabs__active-bar.is-right
) {
width: 3px;
background: rgba(var(--color-base1), 1);
height: 40px !important;
}
:deep(
.el-tabs--left .el-tabs__nav-wrap.is-left::after,
.el-tabs--left .el-tabs__nav-wrap.is-right::after,
.el-tabs--right .el-tabs__nav-wrap.is-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after
) {
.el-tabs--left .el-tabs__nav-wrap.is-left::after,
.el-tabs--left .el-tabs__nav-wrap.is-right::after,
.el-tabs--right .el-tabs__nav-wrap.is-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after
) {
width: 3px;
}