Skip to content

Commit

Permalink
更新全部图片样式
Browse files Browse the repository at this point in the history
  • Loading branch information
@more-strive
more-strive committed Dec 1, 2023
1 parent 518c624 commit 3c7a4a7
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 85 deletions.
4 changes: 2 additions & 2 deletions src/api/image/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export interface QueryPgaes {
q: string
t: string
page: number
}

Expand Down Expand Up @@ -47,7 +47,7 @@ export interface ImagePage {
export interface ImagePageResult {
code: number
msg: string
data: ImagePage
data: ImageHit[]
}

export interface ImageCategoryResult {
Expand Down
32 changes: 15 additions & 17 deletions src/configs/images.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,21 +262,19 @@ export const EmbossMatrix = [ 1, 1, 1, 1, 0.7, -1, -1, -1, -1 ]
// places, animals, industry, computer, food, sports, transportation, travel, buildings, business, music
export const ImageCategoryInfo = [
{id: 0, name: '背景', type: 'backgrounds', category: [], total: []},
{id: 1, name: '时尚', type: 'fashion', category: [], total: []},
{id: 2, name: '自然', type: 'nature', category: [], total: []},
{id: 3, name: '科学', type: 'science', category: [], total: []},
{id: 4, name: '教育', type: 'education', category: [], total: []},
{id: 5, name: '情感', type: 'feelings', category: [], total: []},
{id: 6, name: '健康', type: 'health', category: [], total: []},
{id: 7, name: '人物', type: 'people', category: [], total: []},
{id: 9, name: '场所', type: 'places', category: [], total: []},
{id: 10, name: '动物', type: 'animals', category: [], total: []},
{id: 11, name: '工业', type: 'industry', category: [], total: []},
{id: 12, name: '计算机', type: 'computer', category: [], total: []},
{id: 13, name: '食品', type: 'food', category: [], total: []},
{id: 14, name: '体育', type: 'sports', category: [], total: []},
{id: 15, name: '交通', type: 'transportation', category: [], total: []},
{id: 16, name: '旅游', type: 'travel', category: [], total: []},
{id: 17, name: '建筑', type: 'buildings', category: [], total: []},
{id: 18, name: '商业', type: 'business', category: [], total: []},
{id: 1, name: '自然', type: 'nature', category: [], total: []},
{id: 2, name: '科学', type: 'science', category: [], total: []},
{id: 3, name: '教育', type: 'education', category: [], total: []},
{id: 4, name: '情感', type: 'feelings', category: [], total: []},
{id: 5, name: '健康', type: 'health', category: [], total: []},
{id: 6, name: '场所', type: 'places', category: [], total: []},
{id: 7, name: '动物', type: 'animals', category: [], total: []},
{id: 8, name: '工业', type: 'industry', category: [], total: []},
{id: 9, name: '计算机', type: 'computer', category: [], total: []},
{id: 10, name: '食品', type: 'food', category: [], total: []},
{id: 11, name: '体育', type: 'sports', category: [], total: []},
{id: 12, name: '交通', type: 'transportation', category: [], total: []},
{id: 13, name: '旅游', type: 'travel', category: [], total: []},
{id: 14, name: '建筑', type: 'buildings', category: [], total: []},
{id: 15, name: '商业', type: 'business', category: [], total: []},
]
167 changes: 104 additions & 63 deletions src/views/Editor/CanvasMenu/components/ImageComponents/ImageCategory.vue
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,42 @@
<template>
<div class="category-container" ref="containerRef" @scroll="onContainerScroll">
<div v-for="item in imageCategoryData" v-show="categoryRef === 'all' || categoryRef === item.type">
<el-row class="category-tip mt-5" v-if="categoryRef === 'all'">
<el-col :span="5" class="category-name">
<el-tag>{{ item.name }}</el-tag>
</el-col>
<el-col :span="7" class="category-name">
<el-button text @click="showTotal(item.type)">全部<IconRight/></el-button>
</el-col>
</el-row>
<el-row class="category-tip mt-5" v-else>
<el-col :span="7" class="category-name">
<el-button text @click="hideTotal()"><IconLeft/>{{ item.name }}</el-button>
<div>
<div class="category-container" ref="categoryRef" @scroll="onCategoryScroll" v-if="typeRef === 'all'">
<div v-for="item in imageCategoryData">
<el-row class="col-tip mt-5" >
<el-col :span="5" class="col-name">
<el-tag>{{ item.name }}</el-tag>
</el-col>
<el-col :span="7" class="col-name">
<el-button text @click="showTotal(item.type)">全部<IconRight/></el-button>
</el-col>
</el-row>
<el-row class="category-box mt-5" v-loading="item.category.length === 0">
<div class="box-image" :style="{width: (img.previewHeight <= 120 ? img.previewWidth / img.previewHeight * 120 : img.previewWidth) + 'px'}" v-for="img in item.category">
<img :src="img.previewURL" :alt="img.tags" @click="createImage(img)">
</div>
</el-row>
</div>
</div>
<div class="category-container" ref="totalRef" @scroll="onTotalScroll" v-else>
<el-row class="col-tip mt-5">
<el-col :span="7" class="col-name">
<el-button text @click="hideTotal()"><IconLeft/>{{ categoryData.name }}</el-button>
</el-col>
</el-row>
<el-row class="category-box mt-5" v-loading="item.category.length === 0" v-if="categoryRef === 'all'">
<div :style="{width: (img.previewHeight <= 120 ? img.previewWidth / img.previewHeight * 120 : img.previewWidth) + 'px'}" v-for="img in item.category" class="box-image">
<img :src="img.previewURL" :alt="img.tags" @click="createImage(img)">
</div>
</el-row>
<el-row class="category-box mt-5" v-loading="item.total.length === 0" v-else>
<div :style="{width: (img.previewHeight <= 120 ? img.previewWidth / img.previewHeight * 120 : img.previewWidth) + 'px'}" v-for="img in item.total" class="box-image">
<el-row class="total-box mt-5" v-loading="categoryData.total.length === 0">
<div class="box-image" v-for="(img, index) in categoryData.total" :style="{justifyContent: index % 2 === 0 ? 'flex-start' : 'flex-end'}">
<img :src="img.previewURL" :alt="img.tags" @click="createImage(img)">
</div>
</el-row>
</div>
<el-row class="category-bottom">到底了~</el-row>
<el-row class="image-bottom">到底了~</el-row>
</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { onMounted, ref, computed } from 'vue'
import { debounce, throttle } from 'lodash'
import { getImageCategory } from '@/api/image'
import { getImageCategory, getImagePages } from '@/api/image'
import { ImageHit } from '@/api/image/types'
import { useMainStore } from '@/store'
import { storeToRefs } from 'pinia'
Expand All @@ -41,26 +45,36 @@ const mainStore = useMainStore()
const { imageCategoryType, imageCategoryData } = storeToRefs(mainStore)
const { createImageElement } = useHandleCreate()
const containerRef = ref<HTMLDivElement>();
const containerTop = ref(0)
const categoryRef = ref('all')
const categoryRef = ref<HTMLDivElement>();
const totalRef = ref<HTMLDivElement>();
const categoryTop = ref(0)
const typeRef = ref('all')
const categoryData = computed(() => {
return imageCategoryData.value.filter(ele => ele.type === typeRef.value)[0]
})
const getImageCategoryData = throttle( async (t: string) => {
const res = await getImageCategory({t})
if (res && res.data.code === 200) {
imageCategoryData.value.filter(item => item.type === t).map(ele => ele.category = res.data.data.slice(0, 2))
}
}, 100, { leading: true, trailing: false })
const getImageCategoryData = debounce( async (type: string) => {
const res = await getImageCategory({t: type})
const getImagePageData = throttle( async (t: string, page: 1) => {
const res = await getImagePages({t, page})
if (res && res.data.code === 200) {
imageCategoryData.value.filter(item => item.type === type).map(ele => ele.category = res.data.data.slice(0, 2))
imageCategoryData.value.filter(item => item.type === t).map(ele => ele.total = res.data.data)
}
}, 300, { trailing: true })
}, 100, { leading: true, trailing: false })
const getContainScroll = () => {
let startIndex = 0, endIndex = 2
if (!containerRef.value)
if (!categoryRef.value)
return {
startIndex,
endIndex
}
const scrollTop = containerRef.value.scrollTop;
const containerHeight = containerRef.value.clientHeight;
const scrollTop = categoryRef.value.scrollTop;
const containerHeight = categoryRef.value.clientHeight;
const itemHeight = 132;
startIndex = Math.floor(scrollTop / itemHeight);
endIndex = Math.ceil((scrollTop + containerHeight) / itemHeight);
Expand All @@ -70,7 +84,7 @@ const getContainScroll = () => {
}
}
const onContainerScroll = async () => {
const onCategoryScroll = async () => {
const { startIndex, endIndex } = getContainScroll()
for (let i = startIndex; i < endIndex; i++) {
const item = imageCategoryData.value[i]
Expand All @@ -85,37 +99,51 @@ const onContainerScroll = async () => {
}
}
const showTotal = (type: string) => {
if (!containerRef.value) return
containerTop.value = containerRef.value.scrollTop
categoryRef.value = type
console.log('show-containerTop.value:', containerTop.value)
const onTotalScroll = async () => {
const { startIndex, endIndex } = getContainScroll()
for (let i = startIndex; i < endIndex; i++) {
const item = imageCategoryData.value[i]
if (!item) return
if (!imageCategoryType.value.includes(item.type)) {
imageCategoryType.value.push(item.type)
await getImageCategoryData(item.type)
}
// if (item.category.length === 0) {
// await getImageCategoryData(item.type)
// }
}
}
const showTotal = async (type: string) => {
if (!categoryRef.value) return
categoryTop.value = categoryRef.value.scrollTop
typeRef.value = type
await getImagePageData(type, 1)
}
const hideTotal = () => {
categoryRef.value = 'all'
if (!containerRef.value) return
console.log('hide-containerTop.value:', containerTop.value)
containerRef.value.scrollTo({top: containerTop.value, behavior: 'smooth'})
typeRef.value = 'all'
if (!categoryRef.value) return
categoryRef.value.scrollTo({top: categoryTop.value, behavior: 'smooth'})
}
const createImage = (item: ImageHit) => {
createImageElement(item.largeImageURL)
}
onMounted(() => {
if (!containerRef.value) return
onContainerScroll()
if (!categoryRef.value) return
onCategoryScroll()
})
</script>

<style lang="scss" scoped>
.category-tip {
.col-tip {
justify-content: space-between;
align-items: center;
}
.category-name {
.col-name {
text-align: center;
}
.mt-5 {
Expand All @@ -126,29 +154,42 @@ onMounted(() => {
flex-wrap: nowrap;
overflow: hidden;
height: 100px;
}
.box-image {
display: flex;
align-items: center;
padding: 0 2px;
&:first-child {
justify-content: flex-start;
}
&:last-child {
justify-content: flex-end;
}
img {
max-width: 100%;
cursor: pointer;
.box-image {
display: flex;
align-items: center;
padding: 0 2px;
&:first-child {
justify-content: flex-start;
}
&:last-child {
justify-content: flex-end;
}
img {
max-width: 100%;
cursor: pointer;
}
}
}
.category-container {
overflow-y: scroll;
height: 100vh;
align-items: center;
}
.category-bottom {
.total-box {
align-items: center;
height: 100px;
.box-image {
width: 50%;
height: 120px;
overflow: hidden;
display: flex;
img {
max-width: 100%;
}
}
}
.image-bottom {
justify-content: center;
padding-top: 20px;
margin-bottom: 130px;
Expand Down
5 changes: 2 additions & 3 deletions src/views/Editor/CanvasMenu/components/MaterialPool.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</el-col>
</el-row>
<div>
<el-tabs v-model="activeMaterial" class="layout-tabs">
<el-tabs v-model="activeMaterial" class="layout-tabs material-tab">
<el-tab-pane label="推荐素材" name="data">
<LinePool @select="(line: LinePoolItem) => drawLine(line)"/>
<PathPool @select="(path: PathPoolItem) => drawPath(path)"/>
Expand Down Expand Up @@ -112,8 +112,7 @@ const drawMaterial = async (files: File[]) => {
justify-content: space-around;
width: 100%;
}
.el-tabs .el-tabs__content {
.material-tab .el-tabs__content {
height: 100vh;
overflow-y: scroll;
}
Expand Down

0 comments on commit 3c7a4a7

Please sign in to comment.