feat(content): add Images content type with masonry grid layout
Extract markdown images and raw image URLs from AI responses into a browsable image gallery. Masonry (columns) layout in the grid, full-size detail view with source links. Also fix ContextLoader to accept all content types for loading state display. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
1973b24eaa
commit
e8ebe56d9e
@@ -212,6 +212,7 @@ const TAB_LABELS: Record<ContentTab, string> = {
|
||||
film: 'Films',
|
||||
book: 'Books',
|
||||
tvshow: 'TV',
|
||||
image: 'Images',
|
||||
song: 'Music',
|
||||
podcast: 'Podcasts',
|
||||
news: 'News',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="relative flex-1 flex flex-col min-h-0 overflow-hidden">
|
||||
<div
|
||||
v-if="['film','song','podcast','news','websites','magazine'].includes(contextType)"
|
||||
v-if="['film','song','podcast','book','tvshow','image','news','websites','magazine'].includes(contextType)"
|
||||
class="flex-1 flex flex-col min-h-0"
|
||||
>
|
||||
<div
|
||||
@@ -75,7 +75,7 @@ import LoadingFilmGrid from './LoadingFilmGrid.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
contextType?: 'film' | 'song' | 'podcast' | 'news' | 'websites' | 'magazine' | 'generic'
|
||||
contextType?: 'film' | 'song' | 'podcast' | 'book' | 'tvshow' | 'image' | 'news' | 'websites' | 'magazine' | 'generic'
|
||||
}>(),
|
||||
{ contextType: 'film' }
|
||||
)
|
||||
@@ -86,6 +86,9 @@ const contextLabel = computed(() => {
|
||||
if (props.contextType === 'film') return 'Film recommendations'
|
||||
if (props.contextType === 'song') return 'Song recommendations'
|
||||
if (props.contextType === 'podcast') return 'Podcast recommendations'
|
||||
if (props.contextType === 'book') return 'Book recommendations'
|
||||
if (props.contextType === 'tvshow') return 'TV Series recommendations'
|
||||
if (props.contextType === 'image') return 'Images'
|
||||
if (props.contextType === 'news') return 'Articles'
|
||||
if (props.contextType === 'websites') return 'Websites'
|
||||
if (props.contextType === 'magazine') return 'Brief'
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<button
|
||||
class="flex items-start gap-3 w-full text-left p-2.5 rounded-xl transition-all duration-150"
|
||||
:class="isDark
|
||||
? 'hover:bg-white/5'
|
||||
: 'hover:bg-black/3'"
|
||||
@click="$emit('select', image)"
|
||||
>
|
||||
<div class="w-16 shrink-0 rounded-lg overflow-hidden">
|
||||
<div class="aspect-[4/3] relative bg-black/10">
|
||||
<img
|
||||
v-if="!imgFailed"
|
||||
:src="image.url"
|
||||
:alt="image.alt || image.title || 'Image'"
|
||||
class="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
@error="imgFailed = true"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="w-full h-full flex items-center justify-center"
|
||||
:class="isDark ? 'bg-white/5' : 'bg-black/5'"
|
||||
>
|
||||
<svg class="w-5 h-5" :class="isDark ? 'text-white/20' : 'text-gray-300'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 py-0.5">
|
||||
<p v-if="image.title" class="text-sm font-medium leading-snug line-clamp-1"
|
||||
:class="isDark ? 'text-white/90' : 'text-gray-900'">
|
||||
{{ image.title }}
|
||||
</p>
|
||||
<p v-if="image.source" class="text-xs mt-0.5 truncate"
|
||||
:class="isDark ? 'text-white/50' : 'text-gray-500'">
|
||||
{{ image.source }}
|
||||
</p>
|
||||
<p v-if="image.description" class="text-[11px] mt-1 line-clamp-2 leading-relaxed"
|
||||
:class="isDark ? 'text-white/40' : 'text-gray-400'">
|
||||
{{ image.description }}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { ImageItem } from '@aiui/core/types/content'
|
||||
import { useTheme } from '@/composables/useTheme'
|
||||
|
||||
defineProps<{ image: ImageItem }>()
|
||||
defineEmits<{ select: [image: ImageItem] }>()
|
||||
|
||||
const { isDark } = useTheme()
|
||||
const imgFailed = ref(false)
|
||||
</script>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="image-detail h-full overflow-y-auto overflow-x-hidden scrollbar-hide">
|
||||
<div class="relative w-full overflow-hidden bg-black/20">
|
||||
<img
|
||||
v-if="!imgFailed"
|
||||
:src="image.url"
|
||||
:alt="image.alt || image.title || 'Image'"
|
||||
class="w-full block max-h-[60vh] object-contain bg-black/40"
|
||||
@error="imgFailed = true"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="w-full aspect-video flex items-center justify-center"
|
||||
:class="isDark ? 'bg-white/5' : 'bg-black/5'"
|
||||
>
|
||||
<svg class="w-12 h-12" :class="isDark ? 'text-white/15' : 'text-gray-300'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-4 space-y-3">
|
||||
<h2 v-if="image.title" class="text-base font-bold"
|
||||
:class="isDark ? 'text-white/90' : 'text-gray-900'">
|
||||
{{ image.title }}
|
||||
</h2>
|
||||
|
||||
<p v-if="image.description" class="text-sm leading-relaxed"
|
||||
:class="isDark ? 'text-white/70' : 'text-gray-600'">
|
||||
{{ image.description }}
|
||||
</p>
|
||||
|
||||
<div v-if="image.attribution" class="text-xs"
|
||||
:class="isDark ? 'text-white/50' : 'text-gray-500'">
|
||||
{{ image.attribution }}
|
||||
</div>
|
||||
|
||||
<div v-if="image.source" class="text-xs"
|
||||
:class="isDark ? 'text-white/40' : 'text-gray-400'">
|
||||
Source: {{ image.source }}
|
||||
</div>
|
||||
|
||||
<div v-if="image.width && image.height" class="text-[10px]"
|
||||
:class="isDark ? 'text-white/30' : 'text-gray-400'">
|
||||
{{ image.width }} × {{ image.height }}
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<a
|
||||
:href="image.url"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-medium transition-colors"
|
||||
:class="isDark
|
||||
? 'bg-white/5 hover:bg-white/10 text-white/80'
|
||||
: 'bg-black/3 hover:bg-black/5 text-gray-800'"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
Open original
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { ImageItem } from '@aiui/core/types/content'
|
||||
import { useTheme } from '@/composables/useTheme'
|
||||
|
||||
defineProps<{ image: ImageItem }>()
|
||||
defineEmits<{ back: [] }>()
|
||||
|
||||
const { isDark } = useTheme()
|
||||
const imgFailed = ref(false)
|
||||
</script>
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="p-4 space-y-3" :style="isDark
|
||||
? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
|
||||
: 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<span class="text-[10px] font-mono" :class="isDark ? 'text-white/30' : 'text-gray-400'">
|
||||
{{ images.length }} images
|
||||
</span>
|
||||
<slot name="header-actions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar px-4 pt-4 pb-16">
|
||||
<div class="columns-2 sm:columns-3 gap-3 space-y-3">
|
||||
<button
|
||||
v-for="img in images"
|
||||
:key="img.id"
|
||||
class="group w-full break-inside-avoid text-left rounded-xl overflow-hidden transition-all duration-200 hover:brightness-110 relative"
|
||||
:class="isDark ? 'bg-white/5' : 'bg-black/3'"
|
||||
@click="$emit('selectImage', img)"
|
||||
>
|
||||
<img
|
||||
v-if="!failedIds.has(img.id)"
|
||||
:src="img.url"
|
||||
:alt="img.alt || img.title || 'Image'"
|
||||
class="w-full block transition-transform duration-300 group-hover:scale-[1.03]"
|
||||
loading="lazy"
|
||||
@error="onError(img)"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="w-full aspect-[4/3] flex items-center justify-center"
|
||||
:class="isDark ? 'bg-white/5' : 'bg-black/5'"
|
||||
>
|
||||
<svg class="w-8 h-8" :class="isDark ? 'text-white/15' : 'text-gray-300'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div v-if="img.title || img.source"
|
||||
class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/70 via-black/30 to-transparent">
|
||||
<p v-if="img.title" class="text-[10px] font-medium text-white/90 truncate">{{ img.title }}</p>
|
||||
<p v-if="img.source" class="text-[8px] text-white/50 truncate">{{ img.source }}</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="images.length === 0" class="flex items-center justify-center py-12">
|
||||
<p class="text-sm" :class="isDark ? 'text-white/30' : 'text-gray-400'">
|
||||
No images found
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { ImageItem } from '@aiui/core/types/content'
|
||||
import { useTheme } from '@/composables/useTheme'
|
||||
|
||||
withDefaults(defineProps<{
|
||||
images: ImageItem[]
|
||||
title?: string
|
||||
}>(), {
|
||||
title: 'Images',
|
||||
})
|
||||
|
||||
defineEmits<{ selectImage: [image: ImageItem] }>()
|
||||
|
||||
const { isDark } = useTheme()
|
||||
const failedIds = ref<Set<string>>(new Set())
|
||||
|
||||
function onError(img: ImageItem) {
|
||||
failedIds.value.add(img.id)
|
||||
failedIds.value = new Set(failedIds.value)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user