优化set组件 里的prompt的显示逻辑
This commit is contained in:
parent
ff4ae2bdc8
commit
727ecb378b
|
|
@ -11,9 +11,7 @@ export {}
|
|||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
2: typeof import('./src/components/virtual-scroller/VirtualScroller copy 2.vue')['default']
|
||||
Canvas: typeof import('./src/components/canvas/index.vue')['default']
|
||||
copy: typeof import('./src/components/virtual-scroller/VirtualScroller copy.vue')['default']
|
||||
DialogBox: typeof import('./src/components/dialogBox/index.vue')['default']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
|
|
|
|||
|
|
@ -83,7 +83,6 @@ const isgerenate = ref(false)
|
|||
const model = ref('flux')
|
||||
const modelType = ref('text')
|
||||
|
||||
// 公用参数
|
||||
const prompt = ref('一个女孩在树下吃苹果')
|
||||
const promptPlaceholder = '描述你想生成的画面和动作。'
|
||||
const proportion = ref('16:9')
|
||||
|
|
@ -106,8 +105,10 @@ const autoSizeConfig = computed(() => {
|
|||
})
|
||||
|
||||
const handleStart = async () => {
|
||||
const currentType = props.type
|
||||
|
||||
if (!props.isGenerate) {
|
||||
router.push({ name: 'home', query: { loading: false, Generate: true } })
|
||||
router.push({ name: 'home', query: { loading: false, Generate: true, type: currentType } })
|
||||
}
|
||||
if (!prompt.value) {
|
||||
// eslint-disable-next-line no-undef
|
||||
|
|
@ -122,8 +123,7 @@ const handleStart = async () => {
|
|||
})
|
||||
console.log('imgs', imgs)
|
||||
|
||||
const result = {
|
||||
type: props.type,
|
||||
const generateData = {
|
||||
model: model.value,
|
||||
modelType: modelType.value,
|
||||
prompt: prompt.value,
|
||||
|
|
@ -147,15 +147,15 @@ const handleStart = async () => {
|
|||
{ name: 'resolution', data: resolution.value},
|
||||
],
|
||||
imgs,
|
||||
result
|
||||
result: JSON.stringify(generateData)
|
||||
}
|
||||
await generate(modelType.value, data)
|
||||
await generate(modelType.value, data, generateData, props.type)
|
||||
console.log('生成中', isgerenate.value)
|
||||
}
|
||||
|
||||
const fillParamsFromResult = (resultData) => {
|
||||
if (!resultData) return
|
||||
|
||||
|
||||
if (resultData.model !== undefined) model.value = resultData.model
|
||||
if (resultData.modelType !== undefined) modelType.value = resultData.modelType
|
||||
if (resultData.prompt !== undefined) prompt.value = resultData.prompt
|
||||
|
|
@ -196,6 +196,15 @@ watch(() => useDisplay.isSubGerenate, (newValue) => {
|
|||
watch(() => modelType.value, (newValue) => {
|
||||
console.log('modelType.value', newValue)
|
||||
})
|
||||
|
||||
watch(() => props.type, (newType) => {
|
||||
if (newType === 'video') {
|
||||
model.value = 'Vidu Q3-T2V'
|
||||
} else {
|
||||
model.value = 'flux'
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if(props.type === 'video'){
|
||||
model.value = 'Vidu Q3-T2V'
|
||||
|
|
|
|||
|
|
@ -1,379 +1,613 @@
|
|||
<template>
|
||||
<div class="virtual-scroller" :style="containerStyle">
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="virtual-scroller"
|
||||
:style="containerStyle"
|
||||
>
|
||||
<div
|
||||
ref="scrollContainerRef"
|
||||
class="virtual-scroller-container"
|
||||
:style="scrollContainerStyle"
|
||||
@scroll.passive="handleScroll"
|
||||
ref="wrapperRef"
|
||||
class="virtual-scroller-wrapper"
|
||||
:style="wrapperStyle"
|
||||
>
|
||||
<div class="virtual-scroller-spacer" :style="spacerStyle"></div>
|
||||
<div class="virtual-scroller-placeholder" :style="placeholderStyle">
|
||||
<slot name="bottom-placeholder" />
|
||||
</div>
|
||||
<div
|
||||
v-for="item in visibleItems"
|
||||
:key="item.key"
|
||||
:ref="el => setItemRef(el, item.key)"
|
||||
class="virtual-scroller-item"
|
||||
:style="getItemStyle(item)"
|
||||
:data-index="item.index"
|
||||
:data-key="item.key"
|
||||
ref="renderContainerRef"
|
||||
class="virtual-scroller-render-container"
|
||||
:style="renderContainerStyle"
|
||||
@scroll.passive="handleScroll"
|
||||
@wheel="handleWheel"
|
||||
>
|
||||
<slot name="default" :item="item.data" :index="item.index" />
|
||||
<div class="virtual-scroller-spacer" :style="{ height: `${totalHeight}px` }"></div>
|
||||
<div
|
||||
class="virtual-scroller-bottom-placeholder"
|
||||
:style="bottomPlaceholderStyle"
|
||||
>
|
||||
<slot name="bottom-placeholder" />
|
||||
</div>
|
||||
<div
|
||||
v-for="renderItem in visibleItems"
|
||||
:key="getItemKey(renderItem.item, renderItem.index)"
|
||||
:ref="el => setItemRef(el, renderItem.index)"
|
||||
class="virtual-scroller-item"
|
||||
:style="getItemStyle(renderItem)"
|
||||
:data-index="renderItem.index"
|
||||
>
|
||||
<slot
|
||||
name="default"
|
||||
:item="renderItem.item"
|
||||
:index="renderItem.index"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onUnmounted, nextTick, type CSSProperties } from 'vue'
|
||||
<script setup>
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
interface VirtualScrollerProps {
|
||||
items: any[]
|
||||
estimatedHeight?: number
|
||||
bufferSize?: number
|
||||
keyField?: string
|
||||
height?: string | number
|
||||
direction?: 'normal' | 'reverse'
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<VirtualScrollerProps>(), {
|
||||
estimatedHeight: 100,
|
||||
bufferSize: 3,
|
||||
keyField: 'id',
|
||||
height: '100%',
|
||||
direction: 'reverse'
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
itemKey: {
|
||||
type: [String, Function],
|
||||
default: 'id'
|
||||
},
|
||||
keyField: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
estimatedHeight: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
buffer: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
bufferSize: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: '100%'
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: '100%'
|
||||
},
|
||||
renderMode: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator: (value) => ['default', 'top'].includes(value)
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'reverse',
|
||||
validator: (value) => ['normal', 'reverse'].includes(value)
|
||||
},
|
||||
bottomPlaceholderHeight: {
|
||||
type: Number,
|
||||
default: 350
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
scroll: [scrollTop: number, scrollInfo: {
|
||||
isAtTop: boolean
|
||||
isAtBottom: boolean
|
||||
distanceToTop: number
|
||||
distanceToBottom: number
|
||||
}]
|
||||
'visible-change': [startIndex: number, endIndex: number]
|
||||
}>()
|
||||
const computedData = computed(() => {
|
||||
return props.data.length > 0 ? props.data : props.items
|
||||
})
|
||||
|
||||
const scrollContainerRef = ref<HTMLElement | null>(null)
|
||||
const computedItemKey = computed(() => {
|
||||
if (typeof props.itemKey === 'function') return props.itemKey
|
||||
if (props.itemKey !== 'id') return props.itemKey
|
||||
return props.keyField
|
||||
})
|
||||
|
||||
const computedBuffer = computed(() => {
|
||||
return props.buffer !== 3 ? props.buffer : props.bufferSize
|
||||
})
|
||||
|
||||
const emit = defineEmits(['scroll', 'scroll-start', 'scroll-end', 'visible-change'])
|
||||
|
||||
const containerRef = ref(null)
|
||||
const wrapperRef = ref(null)
|
||||
const renderContainerRef = ref(null)
|
||||
const itemRefs = new Map()
|
||||
const itemHeights = ref(new Map())
|
||||
const resizeObserver = ref(null)
|
||||
const scrollTop = ref(0)
|
||||
const itemRefs = new Map<string, HTMLElement>()
|
||||
const isReverseMode = computed(() => props.direction === 'reverse')
|
||||
const isInitializing = ref(true)
|
||||
const isScrolling = ref(false)
|
||||
const scrollTimeout = ref(null)
|
||||
const isInitialized = ref(false)
|
||||
const pendingScrollToBottom = ref(false)
|
||||
const previousDataLength = ref(0)
|
||||
|
||||
const itemHeights = ref(new Map<string | number, number>())
|
||||
const itemOffsets = ref(new Map<string | number, number>())
|
||||
let resizeObserver: ResizeObserver | null = null
|
||||
|
||||
function getItemKey(item: any, index: number): string | number {
|
||||
return item[props.keyField] ?? index
|
||||
}
|
||||
|
||||
function getItemHeight(key: string | number): number {
|
||||
return itemHeights.value.get(key) ?? props.estimatedHeight
|
||||
}
|
||||
|
||||
function calculateOffsets() {
|
||||
let offset = 0
|
||||
const newOffsets = new Map<string | number, number>()
|
||||
|
||||
for (let i = 0; i < props.items.length; i++) {
|
||||
const key = getItemKey(props.items[i], i)
|
||||
newOffsets.set(key, offset)
|
||||
offset += getItemHeight(key)
|
||||
const containerStyle = computed(() => {
|
||||
return {
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
position: 'relative'
|
||||
}
|
||||
|
||||
itemOffsets.value = newOffsets
|
||||
}
|
||||
})
|
||||
|
||||
const totalHeight = computed(() => {
|
||||
let height = 0
|
||||
for (let i = 0; i < props.items.length; i++) {
|
||||
const key = getItemKey(props.items[i], i)
|
||||
height += getItemHeight(key)
|
||||
const len = computedData.value.length
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const cachedHeight = itemHeights.value.get(i)
|
||||
height += cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
|
||||
}
|
||||
|
||||
height += props.bottomPlaceholderHeight
|
||||
|
||||
return height
|
||||
})
|
||||
|
||||
const containerStyle = computed<CSSProperties>(() => ({
|
||||
height: typeof props.height === 'number' ? `${props.height}px` : props.height,
|
||||
overflow: 'hidden'
|
||||
}))
|
||||
const getItemPosition = (index) => {
|
||||
let offset = 0
|
||||
|
||||
for (let i = 0; i < index; i++) {
|
||||
const cachedHeight = itemHeights.value.get(i)
|
||||
offset += cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
|
||||
}
|
||||
|
||||
const height = itemHeights.value.get(index) ?? props.estimatedHeight
|
||||
|
||||
return { offset, height }
|
||||
}
|
||||
|
||||
const scrollContainerStyle = computed<CSSProperties>(() => ({
|
||||
height: '100%',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
transform: 'rotate(180deg)',
|
||||
position: 'relative'
|
||||
}))
|
||||
|
||||
const spacerStyle = computed<CSSProperties>(() => ({
|
||||
height: `${totalHeight.value}px`,
|
||||
width: '1px',
|
||||
pointerEvents: 'none',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0
|
||||
}))
|
||||
|
||||
const placeholderStyle = computed<CSSProperties>(() => ({
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
pointerEvents: 'none'
|
||||
}))
|
||||
const containerHeight = computed(() => {
|
||||
if (!renderContainerRef.value) return 0
|
||||
return renderContainerRef.value.clientHeight
|
||||
})
|
||||
|
||||
const visibleRange = computed(() => {
|
||||
if (!scrollContainerRef.value || props.items.length === 0) {
|
||||
return { start: 0, end: Math.min(props.bufferSize * 2, props.items.length - 1) }
|
||||
if (!renderContainerRef.value || computedData.value.length === 0) {
|
||||
return { start: 0, end: 0, offset: 0 }
|
||||
}
|
||||
|
||||
const containerHeight = scrollContainerRef.value.clientHeight
|
||||
const scrollTopValue = scrollTop.value
|
||||
|
||||
const viewportHeight = containerHeight.value
|
||||
const currentScrollTop = scrollTop.value
|
||||
const bufferCount = computedBuffer.value
|
||||
|
||||
let startIndex = 0
|
||||
let endIndex = props.items.length - 1
|
||||
let currentOffset = 0
|
||||
let endIndex = computedData.value.length - 1
|
||||
let startOffset = 0
|
||||
|
||||
for (let i = 0; i < props.items.length; i++) {
|
||||
const key = getItemKey(props.items[i], i)
|
||||
const itemHeight = getItemHeight(key)
|
||||
let offset = 0
|
||||
for (let i = 0; i < computedData.value.length; i++) {
|
||||
const cachedHeight = itemHeights.value.get(i)
|
||||
const height = cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
|
||||
|
||||
if (currentOffset + itemHeight > scrollTopValue - props.bufferSize * props.estimatedHeight) {
|
||||
startIndex = Math.max(0, i - props.bufferSize)
|
||||
if (offset + height > currentScrollTop) {
|
||||
startIndex = Math.max(0, i - bufferCount)
|
||||
break
|
||||
}
|
||||
currentOffset += itemHeight
|
||||
|
||||
offset += height
|
||||
}
|
||||
|
||||
currentOffset = 0
|
||||
for (let i = 0; i < props.items.length; i++) {
|
||||
const key = getItemKey(props.items[i], i)
|
||||
const itemHeight = getItemHeight(key)
|
||||
startOffset = 0
|
||||
for (let i = 0; i < startIndex; i++) {
|
||||
const cachedHeight = itemHeights.value.get(i)
|
||||
startOffset += cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
|
||||
}
|
||||
|
||||
offset = startOffset
|
||||
for (let i = startIndex; i < computedData.value.length; i++) {
|
||||
const cachedHeight = itemHeights.value.get(i)
|
||||
const height = cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
|
||||
|
||||
if (currentOffset > scrollTopValue + containerHeight + props.bufferSize * props.estimatedHeight) {
|
||||
endIndex = Math.min(props.items.length - 1, i + props.bufferSize)
|
||||
if (offset >= currentScrollTop + viewportHeight) {
|
||||
endIndex = Math.min(computedData.value.length - 1, i + bufferCount)
|
||||
break
|
||||
}
|
||||
currentOffset += itemHeight
|
||||
|
||||
offset += height
|
||||
endIndex = i
|
||||
}
|
||||
|
||||
return { start: startIndex, end: endIndex }
|
||||
|
||||
return { start: startIndex, end: endIndex, offset: startOffset }
|
||||
})
|
||||
|
||||
const visibleItems = computed(() => {
|
||||
const { start, end } = visibleRange.value
|
||||
const items: Array<{ key: string | number; data: any; index: number; offset: number }> = []
|
||||
const currentRenderedKeys = new Set<string | number>()
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
const item = props.items[i]
|
||||
if (!item) continue
|
||||
|
||||
const key = getItemKey(item, i)
|
||||
const { start, end, offset } = visibleRange.value
|
||||
const items = []
|
||||
|
||||
let currentOffset = offset
|
||||
|
||||
for (let i = start; i <= end && i < computedData.value.length; i++) {
|
||||
const cachedHeight = itemHeights.value.get(i)
|
||||
const height = cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
|
||||
|
||||
if (currentRenderedKeys.has(key)) {
|
||||
continue
|
||||
}
|
||||
currentRenderedKeys.add(key)
|
||||
|
||||
const offset = itemOffsets.value.get(key) ?? i * props.estimatedHeight
|
||||
|
||||
items.push({
|
||||
key: String(key),
|
||||
data: item,
|
||||
item: computedData.value[i],
|
||||
index: i,
|
||||
offset
|
||||
offset: currentOffset + props.bottomPlaceholderHeight,
|
||||
height
|
||||
})
|
||||
|
||||
currentOffset += height
|
||||
}
|
||||
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
function getItemStyle(item: { offset: number }): CSSProperties {
|
||||
const wrapperStyle = computed(() => ({
|
||||
direction: 'rtl',
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
scrollbarWidth: 'auto',
|
||||
overflow: 'hidden',
|
||||
transform: 'rotate(180deg)',
|
||||
width: '100%'
|
||||
}))
|
||||
|
||||
const renderContainerStyle = computed(() => ({
|
||||
direction: 'ltr',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: '100%'
|
||||
}))
|
||||
|
||||
const bottomPlaceholderStyle = computed(() => ({
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: '100%',
|
||||
height: `${props.bottomPlaceholderHeight}px`,
|
||||
transform: `translateY(0px)`,
|
||||
zIndex: 1
|
||||
}))
|
||||
|
||||
const getItemKey = (item, index) => {
|
||||
const keyField = computedItemKey.value
|
||||
if (typeof keyField === 'function') {
|
||||
return keyField(item, index)
|
||||
}
|
||||
if (typeof keyField === 'string' && item && typeof item === 'object') {
|
||||
return item[keyField] ?? index
|
||||
}
|
||||
return index
|
||||
}
|
||||
|
||||
const getItemStyle = (renderItem) => {
|
||||
return {
|
||||
position: 'absolute',
|
||||
top: `${item.offset}px`,
|
||||
left: 0,
|
||||
right: 0
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: '100%',
|
||||
transform: `translateY(${renderItem.offset}px)`,
|
||||
willChange: 'transform'
|
||||
}
|
||||
}
|
||||
|
||||
function setItemRef(el: any, key: string) {
|
||||
const setItemRef = (el, index) => {
|
||||
if (el) {
|
||||
itemRefs.set(key, el as HTMLElement)
|
||||
itemRefs.set(index, el)
|
||||
} else {
|
||||
itemRefs.delete(key)
|
||||
itemRefs.delete(index)
|
||||
}
|
||||
}
|
||||
|
||||
function measureItems() {
|
||||
if (!resizeObserver) return
|
||||
const measureItem = (index, element) => {
|
||||
if (!element) return
|
||||
|
||||
itemRefs.forEach((el, key) => {
|
||||
resizeObserver!.observe(el)
|
||||
})
|
||||
}
|
||||
|
||||
function updateItemHeight(key: string | number, height: number) {
|
||||
const oldHeight = itemHeights.value.get(key)
|
||||
if (oldHeight !== height) {
|
||||
itemHeights.value.set(key, height)
|
||||
calculateOffsets()
|
||||
}
|
||||
}
|
||||
|
||||
function handleScroll(event: Event) {
|
||||
const target = event.target as HTMLElement
|
||||
const currentScrollTop = target.scrollTop
|
||||
scrollTop.value = currentScrollTop
|
||||
const firstChild = element.firstElementChild
|
||||
const targetElement = firstChild || element
|
||||
|
||||
if (!scrollContainerRef.value) {
|
||||
emit('scroll', currentScrollTop)
|
||||
return
|
||||
}
|
||||
const height = targetElement.getBoundingClientRect().height
|
||||
|
||||
const containerHeight = scrollContainerRef.value.clientHeight
|
||||
const maxScroll = Math.max(0, totalHeight.value - containerHeight)
|
||||
|
||||
const distanceToTop = currentScrollTop
|
||||
const distanceToBottom = maxScroll - currentScrollTop
|
||||
|
||||
const isAtTop = currentScrollTop >= maxScroll - 10
|
||||
const isAtBottom = currentScrollTop <= 10
|
||||
|
||||
emit('scroll', currentScrollTop, {
|
||||
isAtTop,
|
||||
isAtBottom,
|
||||
distanceToTop,
|
||||
distanceToBottom
|
||||
})
|
||||
}
|
||||
|
||||
function scrollToIndex(index: number) {
|
||||
if (!scrollContainerRef.value) return
|
||||
|
||||
let targetTop = 0
|
||||
for (let i = 0; i < index; i++) {
|
||||
const key = getItemKey(props.items[i], i)
|
||||
targetTop += getItemHeight(key)
|
||||
}
|
||||
|
||||
scrollContainerRef.value.scrollTop = targetTop
|
||||
scrollTop.value = targetTop
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
if (!scrollContainerRef.value) return
|
||||
const containerHeight = scrollContainerRef.value.clientHeight
|
||||
const maxScroll = Math.max(0, totalHeight.value - containerHeight)
|
||||
scrollContainerRef.value.scrollTop = maxScroll
|
||||
scrollTop.value = maxScroll
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
if (!scrollContainerRef.value) return
|
||||
scrollContainerRef.value.scrollTop = 0
|
||||
scrollTop.value = 0
|
||||
}
|
||||
|
||||
watch(
|
||||
() => visibleRange.value,
|
||||
(newRange) => {
|
||||
emit('visible-change', newRange.start, newRange.end)
|
||||
nextTick(() => {
|
||||
measureItems()
|
||||
})
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.items,
|
||||
() => {
|
||||
calculateOffsets()
|
||||
nextTick(() => {
|
||||
measureItems()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.items.length,
|
||||
async (newLength, oldLength) => {
|
||||
if (isReverseMode.value && newLength > (oldLength || 0)) {
|
||||
await nextTick()
|
||||
scrollToBottom()
|
||||
if (height > 0) {
|
||||
const cachedHeight = itemHeights.value.get(index)
|
||||
if (cachedHeight !== height) {
|
||||
const newHeights = new Map(itemHeights.value)
|
||||
newHeights.set(index, height)
|
||||
itemHeights.value = newHeights
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
resizeObserver = new ResizeObserver((entries) => {
|
||||
const setupResizeObserver = () => {
|
||||
if (resizeObserver.value) {
|
||||
resizeObserver.value.disconnect()
|
||||
}
|
||||
|
||||
resizeObserver.value = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const el = entry.target as HTMLElement
|
||||
const key = el.dataset.key
|
||||
if (key) {
|
||||
updateItemHeight(key, entry.contentRect.height)
|
||||
const index = parseInt(entry.target.dataset.index, 10)
|
||||
if (!isNaN(index)) {
|
||||
measureItem(index, entry.target)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleWheel = (event) => {
|
||||
if (!renderContainerRef.value) return
|
||||
|
||||
if (scrollContainerRef.value && isReverseMode.value) {
|
||||
nextTick(() => {
|
||||
scrollToBottom()
|
||||
setTimeout(() => {
|
||||
isInitializing.value = false
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
isInitializing.value = false
|
||||
const { deltaY } = event
|
||||
const el = renderContainerRef.value
|
||||
|
||||
el.scrollBy({
|
||||
top: -deltaY,
|
||||
behavior: 'instant'
|
||||
})
|
||||
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const handleScroll = (event) => {
|
||||
const target = event.target
|
||||
scrollTop.value = target.scrollTop
|
||||
isScrolling.value = true
|
||||
|
||||
if (scrollTimeout.value) {
|
||||
clearTimeout(scrollTimeout.value)
|
||||
}
|
||||
|
||||
measureItems()
|
||||
scrollTimeout.value = setTimeout(() => {
|
||||
isScrolling.value = false
|
||||
}, 150)
|
||||
|
||||
const st = target.scrollTop
|
||||
const scrollHeight = target.scrollHeight
|
||||
const clientHeight = target.clientHeight
|
||||
|
||||
const distanceToContainerTop = st
|
||||
const distanceToContainerBottom = scrollHeight - st - clientHeight
|
||||
|
||||
const distanceToPageTop = distanceToContainerBottom
|
||||
const distanceToPageBottom = distanceToContainerTop
|
||||
const isAtPageTop = distanceToPageTop <= 0
|
||||
const isAtPageBottom = distanceToPageBottom <= 0
|
||||
|
||||
emit('scroll', {
|
||||
target,
|
||||
scrollTop: st,
|
||||
scrollHeight,
|
||||
clientHeight,
|
||||
distanceToPageTop,
|
||||
distanceToPageBottom,
|
||||
isAtPageTop,
|
||||
isAtPageBottom
|
||||
})
|
||||
|
||||
if (isAtPageTop) {
|
||||
emit('scroll-start')
|
||||
}
|
||||
|
||||
if (isAtPageBottom) {
|
||||
emit('scroll-end')
|
||||
}
|
||||
}
|
||||
|
||||
const scrollToIndex = (index, behavior = 'auto') => {
|
||||
if (!renderContainerRef.value || index < 0 || index >= computedData.value.length) return
|
||||
|
||||
const position = getItemPosition(index)
|
||||
|
||||
renderContainerRef.value.scrollTo({
|
||||
top: position.offset,
|
||||
behavior
|
||||
})
|
||||
}
|
||||
|
||||
const scrollToBottom = (behavior = 'smooth') => {
|
||||
if (!renderContainerRef.value) {
|
||||
pendingScrollToBottom.value = true
|
||||
return
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
if (!renderContainerRef.value) return
|
||||
|
||||
renderContainerRef.value.scrollTo({
|
||||
top: 0,
|
||||
behavior
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const scrollToTop = (behavior = 'smooth') => {
|
||||
if (!renderContainerRef.value) return
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
if (!renderContainerRef.value) return
|
||||
|
||||
const scrollHeight = renderContainerRef.value.scrollHeight
|
||||
renderContainerRef.value.scrollTo({
|
||||
top: scrollHeight,
|
||||
behavior
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getScrollElement = () => renderContainerRef.value
|
||||
|
||||
const getVisibleIndices = () => {
|
||||
const { start, end } = visibleRange.value
|
||||
return Array.from({ length: end - start + 1 }, (_, i) => start + i)
|
||||
}
|
||||
|
||||
const resetMeasurements = () => {
|
||||
itemHeights.value = new Map()
|
||||
itemRefs.clear()
|
||||
}
|
||||
|
||||
const isAtPageBottom = () => {
|
||||
if (!renderContainerRef.value) return false
|
||||
const { scrollTop } = renderContainerRef.value
|
||||
return scrollTop <= 0
|
||||
}
|
||||
|
||||
const isAtPageTop = () => {
|
||||
if (!renderContainerRef.value) return false
|
||||
const { scrollTop, scrollHeight, clientHeight } = renderContainerRef.value
|
||||
return scrollHeight - scrollTop - clientHeight <= 0
|
||||
}
|
||||
|
||||
const observeVisibleItems = () => {
|
||||
if (!resizeObserver.value) return
|
||||
|
||||
resizeObserver.value.disconnect()
|
||||
|
||||
for (const [index, element] of itemRefs) {
|
||||
if (element) {
|
||||
resizeObserver.value.observe(element)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => computedData.value, (newData, oldData) => {
|
||||
const oldLength = oldData?.length || 0
|
||||
const newLength = newData.length
|
||||
|
||||
if (newLength !== oldLength) {
|
||||
const newHeights = new Map()
|
||||
|
||||
const minLen = Math.min(oldLength, newLength)
|
||||
for (let i = 0; i < minLen; i++) {
|
||||
if (itemHeights.value.has(i)) {
|
||||
newHeights.set(i, itemHeights.value.get(i))
|
||||
}
|
||||
}
|
||||
|
||||
itemHeights.value = newHeights
|
||||
|
||||
nextTick(() => {
|
||||
observeVisibleItems()
|
||||
})
|
||||
}
|
||||
|
||||
previousDataLength.value = newLength
|
||||
}, { deep: false })
|
||||
|
||||
watch(visibleItems, (newItems) => {
|
||||
nextTick(() => {
|
||||
observeVisibleItems()
|
||||
})
|
||||
if (newItems.length > 0) {
|
||||
const firstItem = newItems[0]
|
||||
const lastItem = newItems[newItems.length - 1]
|
||||
emit('visible-change', firstItem.index, lastItem.index)
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
onMounted(() => {
|
||||
setupResizeObserver()
|
||||
isInitialized.value = true
|
||||
previousDataLength.value = computedData.value.length
|
||||
|
||||
nextTick(() => {
|
||||
if (pendingScrollToBottom.value) {
|
||||
pendingScrollToBottom.value = false
|
||||
scrollToBottom()
|
||||
}
|
||||
|
||||
observeVisibleItems()
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (resizeObserver) {
|
||||
resizeObserver.disconnect()
|
||||
resizeObserver = null
|
||||
onBeforeUnmount(() => {
|
||||
if (resizeObserver.value) {
|
||||
resizeObserver.value.disconnect()
|
||||
}
|
||||
|
||||
if (scrollTimeout.value) {
|
||||
clearTimeout(scrollTimeout.value)
|
||||
}
|
||||
|
||||
itemRefs.clear()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
scrollToIndex,
|
||||
scrollToTop,
|
||||
scrollToItem: scrollToIndex,
|
||||
scrollToBottom,
|
||||
getScrollTop: () => scrollTop.value,
|
||||
getVisibleRange: () => visibleRange.value,
|
||||
updateLayout: () => {
|
||||
calculateOffsets()
|
||||
measureItems()
|
||||
}
|
||||
scrollToTop,
|
||||
getScrollElement,
|
||||
getVisibleIndices,
|
||||
resetMeasurements,
|
||||
containerRef,
|
||||
isAtPageBottom,
|
||||
isAtPageTop
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.virtual-scroller {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.virtual-scroller-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.virtual-scroller-spacer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.virtual-scroller-item {
|
||||
will-change: transform;
|
||||
contain: layout style;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.virtual-scroller-wrapper {
|
||||
contain: content;
|
||||
|
||||
}
|
||||
|
||||
.virtual-scroller-spacer {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.virtual-scroller-placeholder {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.virtual-scroller-render-container {
|
||||
contain: layout style;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.virtual-scroller-item {
|
||||
contain: layout style;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.virtual-scroller-bottom-placeholder {
|
||||
contain: layout style;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,12 +18,10 @@ const DisplayStoreSetup = () => {
|
|||
const newItem = {
|
||||
id: item.taskId || crypto.randomUUID(),
|
||||
status: 'generate',
|
||||
text: item.text || '生成中...',
|
||||
name: item.name || '生成中...',
|
||||
type: item.type || 'image',
|
||||
time: item.time || new Date().toLocaleString(),
|
||||
files: [],
|
||||
...item
|
||||
generateData: item.generateData || {}
|
||||
}
|
||||
tempList.value.unshift(newItem)
|
||||
return newItem
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ export async function createTask(data, type, taskId, token) {
|
|||
modelName: data.modelName,
|
||||
payload,
|
||||
taskId,
|
||||
token
|
||||
token,
|
||||
result: data.result
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export function getChargeType(chargeType) {
|
|||
case 'painting':
|
||||
return 1
|
||||
case 'video':
|
||||
return 2
|
||||
return 4
|
||||
default:
|
||||
return 2
|
||||
}
|
||||
|
|
@ -58,7 +58,7 @@ export function websocketSuccess() {
|
|||
})
|
||||
}
|
||||
|
||||
export async function generate(type, data) {
|
||||
export async function generate(modelType, data, generateData, type) {
|
||||
const progress_text = ref('')
|
||||
const message = ref('')
|
||||
const useDisplay = useDisplayStore()
|
||||
|
|
@ -68,7 +68,7 @@ export async function generate(type, data) {
|
|||
|
||||
useDisplay.isSubGerenate = true
|
||||
|
||||
const result = await createTask(data, type, taskId, token)
|
||||
const result = await createTask(data, modelType, taskId, token)
|
||||
console.log(result)
|
||||
// const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOjY0NDEwODAyMjk1OTgzNzIzMCwicm5TdHIiOiJiWkVwS2JLWFJyZmRIaFFHWXZKTkdzOGdGM0JSRmxQOCJ9.5eQ2GtVdrDntQDe2tnF8vl_DhTfd2uW-KNqzvl1imc0'
|
||||
const wsURL = `${import.meta.env.VITE_API_WORKFLOW_WS}/?token=Bearer ${token}`
|
||||
|
|
@ -102,10 +102,8 @@ export async function generate(type, data) {
|
|||
|
||||
useDisplay.addGeneratingItem({
|
||||
taskId: taskId,
|
||||
text: data.prompt || '生成中...',
|
||||
name: data.prompt || '生成中...',
|
||||
type: type,
|
||||
result: data.result
|
||||
generateData: generateData
|
||||
})
|
||||
setTimeout(() => {
|
||||
useDisplay.scrollToBottom()
|
||||
|
|
|
|||
|
|
@ -2,25 +2,14 @@
|
|||
<div style="width: 100%;display: flex;justify-content: center;align-items: center;transform: rotate(180deg);">
|
||||
<div class="primary-box" :class="{ 'none-primary-box': props.item.status === 'none' }">
|
||||
<!-- 标题 -->
|
||||
<div class="title">
|
||||
<div class="style">
|
||||
<div class="name" ref="nameRef">{{ props.item.text }}</div>
|
||||
<div class="generate-data" ref="generateDataRef">
|
||||
<div class="detailed-data first-detailed-data">{{ props.item.model }}</div>
|
||||
<!-- <div class="detailed-data">多少秒</div> -->
|
||||
<div class="detailed-data">{{ props.item.proportion }}</div>
|
||||
<div class="detailed-data">{{ props.item.resolution }}</div>
|
||||
<div class="detailed-data">{{ props.item.quantity }}张</div>
|
||||
<!-- <div class="detailed-data">多少k</div> -->
|
||||
<div class="title" ref="titleRef" @mouseenter="isHovering = true" @mouseleave="isHovering = false">
|
||||
<div class="prompt-wrapper">
|
||||
<div class="prompt" ref="nameRef" :class="{ 'expanded': isHovering }">{{ props.item.generateData.prompt || '生成图片' }}</div>
|
||||
<div class="generate-data" v-show="!isHovering" ref="generateDa taRef" :class="{ 'second-line': shouldShowOnSecondLine }">
|
||||
<div class="detailed-data first-detailed-data">{{ props.item.generateData.model }}</div>
|
||||
<div class="detailed-data">{{ props.item.generateData.proportion }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="props.item.parentIndex" class="style">
|
||||
<span class="time">源自 {{ props.item.parentTime }}</span>
|
||||
<div class="dividing-line"></div>
|
||||
<span class="time">源自 {{ props.item.parentTime }}</span>
|
||||
<div v-if="props.item.parentIndex" class="dividing-line"></div>
|
||||
<span class="time"> 第 {{ props.item.parentIndex }} 张图片</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载中 -->
|
||||
|
|
@ -49,8 +38,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已完成 -->
|
||||
<div v-if="props.item.status === 'success'" class="box success-box">
|
||||
<!-- 已完成 图片 -->
|
||||
<div v-if="props.item.status === 'success' && props.item.type === 'painting'" class="box success-box">
|
||||
<div v-for="(file, index) in props.item.files" :key="index" class="one-box" :class="{ 'collected': isCollected(file) }" @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -1">
|
||||
<!-- <img :src="file" alt="index" class="img" /> -->
|
||||
<Img :src="file" alt="index" class="img" />
|
||||
|
|
@ -74,7 +63,21 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="props.item.status === 'success'" class="bottom-btn-group">
|
||||
<!-- 已完成 视频 -->
|
||||
<div v-if="props.item.status === 'success' && props.item.type === 'video'" class="box success-box">
|
||||
<div class="one-box" :class="{ 'collected': isCollected(props.item.files[0]) }" @mouseenter="hoverIndex = 0" @mouseleave="hoverIndex = -1">
|
||||
<!-- <img :src="file" alt="index" class="img" /> -->
|
||||
<video :src="props.item.files[0]" alt="index" class="video" />
|
||||
|
||||
<div class="left-top">
|
||||
<div v-show="hoverIndex === 0" class="left-top-btn download-btn" @click="downloadImage(props.item.files[0], 'video')"><img src="@/assets/display/download.svg" /></div>
|
||||
<span v-if="hoverIndex === 0" class="line" />
|
||||
<div class="left-top-btn collect-btn" @click="addCollection(props.item.files[0])"><img :src="isCollected(props.item.files[0]) ? collectionActiveIcon : collectionIcon" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="props.item.status === 'success'" class="bottom-btn-group" style="margin-top: 8px;">
|
||||
<div v-for="(item, index) in bottomBtnGroup" :key="index" class="bottom-btn" @click="item.click()">
|
||||
<img :src="item.icon" />
|
||||
<span>{{ item.name }}</span>
|
||||
|
|
@ -102,7 +105,6 @@ const props = defineProps({
|
|||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['open-canvas', 'delete-success'])
|
||||
|
||||
const useDisplay = useDisplayStore()
|
||||
|
|
@ -111,6 +113,76 @@ const useUser = useUserStore()
|
|||
|
||||
const localCollectStatus = ref({ ...props.item.collectStatus })
|
||||
const hoverIndex = ref(-1)
|
||||
const isHovering = ref(false)
|
||||
const shouldShowOnSecondLine = ref(false)
|
||||
const nameRef = ref(null)
|
||||
const titleRef = ref(null)
|
||||
const generateDataRef = ref(null)
|
||||
const wrapperHeight = ref(38.5)
|
||||
|
||||
const checkTextOverflow = () => {
|
||||
nextTick(() => {
|
||||
if (nameRef.value && titleRef.value && generateDataRef.value) {
|
||||
const lineHeight = 22.5
|
||||
const padding = 8
|
||||
const twoLineHeight = 55
|
||||
const generateDataWidth = generateDataRef.value.offsetWidth + 20
|
||||
|
||||
nameRef.value.style.maxHeight = 'none'
|
||||
nameRef.value.style.overflow = 'visible'
|
||||
|
||||
const actualHeight = nameRef.value.scrollHeight
|
||||
const lineCount = Math.ceil((actualHeight - padding * 2) / lineHeight)
|
||||
|
||||
if (!isHovering.value) {
|
||||
nameRef.value.style.maxHeight = '55px'
|
||||
nameRef.value.style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
if (lineCount > 1) {
|
||||
shouldShowOnSecondLine.value = true
|
||||
wrapperHeight.value = twoLineHeight
|
||||
} else {
|
||||
const containerWidth = titleRef.value.offsetWidth
|
||||
const promptWidth = nameRef.value.scrollWidth
|
||||
const firstLineRemaining = containerWidth - promptWidth
|
||||
|
||||
if (firstLineRemaining < generateDataWidth) {
|
||||
shouldShowOnSecondLine.value = true
|
||||
wrapperHeight.value = twoLineHeight
|
||||
} else {
|
||||
shouldShowOnSecondLine.value = false
|
||||
wrapperHeight.value = Math.max(lineHeight + padding * 2, actualHeight)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(isHovering, (newVal) => {
|
||||
if (nameRef.value) {
|
||||
if (newVal) {
|
||||
nameRef.value.style.maxHeight = 'none'
|
||||
nameRef.value.style.overflow = 'visible'
|
||||
} else {
|
||||
nameRef.value.style.maxHeight = '55px'
|
||||
nameRef.value.style.overflow = 'hidden'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => props.item.generateData.prompt, () => {
|
||||
checkTextOverflow()
|
||||
}, { immediate: true })
|
||||
|
||||
onMounted(() => {
|
||||
checkTextOverflow()
|
||||
window.addEventListener('resize', checkTextOverflow)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkTextOverflow)
|
||||
})
|
||||
|
||||
const isCollected = (url) => {
|
||||
return localCollectStatus.value[url] === true
|
||||
|
|
@ -132,12 +204,12 @@ const AIbrush = (file, index) => {
|
|||
}
|
||||
|
||||
const reEdit = () => {
|
||||
useDisplay.setResultData(props.item.result)
|
||||
useDisplay.setResultData(props.item.generateData)
|
||||
useDisplay.fillParamsForEdit()
|
||||
}
|
||||
|
||||
const againGenerate = () => {
|
||||
useDisplay.setResultData(props.item.result)
|
||||
useDisplay.setResultData(props.item.generateData)
|
||||
useDisplay.triggerGenerateWithResult()
|
||||
}
|
||||
|
||||
|
|
@ -214,40 +286,62 @@ const addCollection = async (url) => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
padding-bottom: 20px;
|
||||
gap: 12px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.none-primary-box{
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.title{
|
||||
// height: 25px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
|
||||
.style{
|
||||
width: 100%;
|
||||
display: inline;
|
||||
.prompt-wrapper{
|
||||
position: relative;
|
||||
min-height: 28.5px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.name{
|
||||
.prompt{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: #333;
|
||||
font-family: "Microsoft YaHei";
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
line-height: 22.5px;
|
||||
word-break: break-all;
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
padding: 8px;
|
||||
background-color: #fff;
|
||||
|
||||
&.expanded{
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.generate-data{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
padding-right: 20px;
|
||||
|
||||
&.second-line{
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-data{
|
||||
|
|
@ -270,28 +364,6 @@ const addCollection = async (url) => {
|
|||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.time{
|
||||
color: #333;
|
||||
font-family: "Microsoft YaHei";
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.dividing-line{
|
||||
height: 100%;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.delete-btn{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.delete-btn:hover{
|
||||
color: #ff4949;
|
||||
}
|
||||
}
|
||||
|
||||
.box{
|
||||
|
|
@ -399,6 +471,13 @@ const addCollection = async (url) => {
|
|||
object-fit: contain; /* 确保图片完整显示，不被裁剪 */
|
||||
border-radius: 8px; /* 可选：给图片添加圆角 */
|
||||
}
|
||||
|
||||
.video{
|
||||
width: 380px;
|
||||
height: auto; /* 保持宽高比 */
|
||||
object-fit: contain; /* 确保图片完整显示，不被裁剪 */
|
||||
border-radius: 8px; /* 可选：给图片添加圆角 */
|
||||
}
|
||||
}
|
||||
|
||||
.left-top,.bottom-brush{
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
:estimated-height="300"
|
||||
:buffer-size="3"
|
||||
direction="reverse"
|
||||
:bottom-placeholder-height="350"
|
||||
class="scroller"
|
||||
@scroll="handleScroll"
|
||||
@visible-change="handleVisibleChange"
|
||||
|
|
@ -103,7 +104,7 @@ const isInitializing = ref(true)
|
|||
const { canvasVisible, canvasImage, canvasReferenceImages, canvasSource } = storeToRefs(useDisplay)
|
||||
|
||||
const chargeType = computed(() => getChargeType(props.type))
|
||||
console.log(chargeType.value)
|
||||
// console.log(chargeType.value)
|
||||
|
||||
const timeOptions = [
|
||||
{ label: '全部', value: 'all' },
|
||||
|
|
@ -135,42 +136,25 @@ const toggleDisplay = (newValue, oldValue) => {
|
|||
}
|
||||
|
||||
const conversion = (newlist) => {
|
||||
const temp = newlist.list.map((item) => {
|
||||
const temp = newlist.map((item) => {
|
||||
const files = item.fileUrl ? item.fileUrl.split(',').filter(url => url.trim()) : []
|
||||
const generateData = JSON.parse(item.result || '{}')
|
||||
return {
|
||||
id: item.id,
|
||||
taskId: item.taskId,
|
||||
type: props.type,
|
||||
collection: item.collection,
|
||||
status: 'success',
|
||||
prompt: item.prompt,
|
||||
params: item.params,
|
||||
result: item.result,
|
||||
generateData: generateData,
|
||||
time: item.createTime,
|
||||
files: files,
|
||||
collectStatus: item.collectStatus || {},
|
||||
model: item.model || '',
|
||||
proportion: item.proportion || '',
|
||||
resolution: item.resolution || '',
|
||||
quantity: item.quantity || 1
|
||||
collectStatus: item.collectStatus || {}
|
||||
}
|
||||
})
|
||||
console.log(temp)
|
||||
return temp
|
||||
}
|
||||
|
||||
const adaptDataList = (dataList) => {
|
||||
const convertedList = conversion({ list: dataList })
|
||||
return convertedList.map((item, index) => {
|
||||
const originalItem = dataList[index]
|
||||
return {
|
||||
...item,
|
||||
text: originalItem?.title || item.prompt || '生成图片',
|
||||
name: originalItem?.title || item.prompt || '生成图片',
|
||||
type: 'image',
|
||||
title: originalItem?.title || '生成图片'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const fetchHistory = async (isLoadMore = false) => {
|
||||
if (isLoading.value || (!isLoadMore && !hasMoreData.value)) return
|
||||
|
||||
|
|
@ -200,7 +184,7 @@ const fetchHistory = async (isLoadMore = false) => {
|
|||
return
|
||||
}
|
||||
|
||||
const adaptedList = adaptDataList(dataList)
|
||||
const adaptedList = conversion(dataList)
|
||||
|
||||
if (isLoadMore) {
|
||||
useDisplay.appendHistoryList(adaptedList)
|
||||
|
|
@ -244,13 +228,13 @@ const fetchHistory = async (isLoadMore = false) => {
|
|||
}
|
||||
}
|
||||
|
||||
const handleScroll = (scrollTop, scrollInfo) => {
|
||||
const handleScroll = (scrollInfo) => {
|
||||
if (isInitializing.value) return
|
||||
|
||||
if (!scrollInfo) return
|
||||
const { isAtTop, isAtBottom, distanceToTop, distanceToBottom } = scrollInfo
|
||||
|
||||
if (isAtTop && !isLoading.value && !isLoadingMoreLocked.value && hasMoreData.value) {
|
||||
const { isAtPageTop, isAtPageBottom, distanceToPageTop, distanceToPageBottom } = scrollInfo
|
||||
|
||||
if (isAtPageTop && !isLoading.value && !isLoadingMoreLocked.value && hasMoreData.value) {
|
||||
isLoadingMoreLocked.value = true
|
||||
fetchHistory(true)
|
||||
setTimeout(() => {
|
||||
|
|
@ -258,9 +242,9 @@ const handleScroll = (scrollTop, scrollInfo) => {
|
|||
}, 3000)
|
||||
}
|
||||
|
||||
if (isAtBottom) {
|
||||
if (isAtPageBottom) {
|
||||
useDisplay.Sender_variant = 'updown'
|
||||
} else if (distanceToTop >= 350) {
|
||||
} else if (distanceToPageTop >= 350) {
|
||||
useDisplay.Sender_variant = 'default'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { computed, ref, onMounted, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import display from './display/index.vue'
|
||||
import { useDisplayStore } from '@/stores'
|
||||
|
|
@ -14,8 +14,16 @@ const Generate = computed(() => route.query.Generate || false)
|
|||
const type = computed(() => route.query.type || 'painting')
|
||||
console.log(type.value)
|
||||
|
||||
watch(dialogBoxRef, (newRef) => {
|
||||
if (newRef) {
|
||||
useDisplay.setDialogBoxRef(newRef)
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
onMounted(() => {
|
||||
useDisplay.setDialogBoxRef(dialogBoxRef.value)
|
||||
if (dialogBoxRef.value) {
|
||||
useDisplay.setDialogBoxRef(dialogBoxRef.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue