tcsenpai/pensieve
1
0
Fork 0
mirror of https://github.com/tcsenpai/pensieve.git synced 2025-06-08 12:15:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): allow hide info details

Browse Source
This commit is contained in:
arkohut 2024-10-31 14:02:34 +08:00
parent 0ab1609915
commit c7e9554cb8
1 changed files with 201 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
web/src/lib/Figure.svelte
View File

@ -1,12 +1,22 @@
<!-- Modal.svelte --> <!-- Modal.svelte -->
<script> <script>
import { ScrollArea } from "$lib/components/ui/scroll-area"; import { ScrollArea } from '$lib/components/ui/scroll-area';
import CopyToClipboard from "$lib/components/CopyToClipboard.svelte" import CopyToClipboard from '$lib/components/CopyToClipboard.svelte';
import OCRTable from './OCRTable.svelte'; import OCRTable from './OCRTable.svelte';
import { marked } from 'marked'; import { marked } from 'marked';
import { ChevronLeft, ChevronRight, X, Hash, Library, Folder, FileClock } from 'lucide-svelte'; import {
ChevronLeft,
ChevronRight,
X,
Hash,
Library,
Folder,
FileClock,
Info
} from 'lucide-svelte';
import { translateAppName } from '$lib/utils'; import { translateAppName } from '$lib/utils';
import LucideIcon from '$lib/components/LucideIcon.svelte'; import LucideIcon from '$lib/components/LucideIcon.svelte';
import { onMount } from 'svelte';
/** /**
* @type {string} * @type {string}
@ -53,10 +63,16 @@
// Remove items with key "timestamp" or "sequence" and sort metadata_entries, placing "ocr_result" at the end // Remove items with key "timestamp" or "sequence" and sort metadata_entries, placing "ocr_result" at the end
$: sortedMetadataEntries = [...metadata_entries] $: sortedMetadataEntries = [...metadata_entries]
.filter(entry => entry.key !== "timestamp" && entry.key !== "sequence" && entry.key !== "active_app" && entry.key !== "active_window") .filter(
(entry) =>
entry.key !== 'timestamp' &&
entry.key !== 'sequence' &&
entry.key !== 'active_app' &&
entry.key !== 'active_window'
)
.sort((a, b) => { .sort((a, b) => {
if (a.key === "ocr_result") return 1; if (a.key === 'ocr_result') return 1;
if (b.key === "ocr_result") return -1; if (b.key === 'ocr_result') return -1;
return 0; return 0;
}); });
@ -73,6 +89,20 @@
*/ */
export let onPrevious; export let onPrevious;
let showDetails = false;
onMount(() => {
// 从 localStorage 读取状态
const savedState = localStorage.getItem('figureShowDetails');
showDetails = savedState ? JSON.parse(savedState) : false;
});
function toggleDetails() {
showDetails = !showDetails;
// 保存状态到 localStorage
localStorage.setItem('figureShowDetails', JSON.stringify(showDetails));
}
/** /**
* @param {any} data * @param {any} data
* @returns {boolean} * @returns {boolean}
@ -102,54 +132,85 @@
} }
</script> </script>
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-40" id="my-modal">
<div <div
class="relative top-10 mx-auto px-16 py-10 border w-11/12 max-w-10xl shadow-lg rounded-md bg-white group h-5/6" class="fixed inset-0 bg-gray-600 bg-opacity-50 h-full w-full z-40 flex items-center justify-center"
id="my-modal"
> >
<div
class="relative mx-auto border w-11/12 max-w-[95vw] h-[95vh] shadow-lg rounded-md bg-white group"
>
<div class="absolute inset-0 p-10">
<!-- Button container --> <!-- Button container -->
<div class="group"> <div class="group absolute inset-x-0 h-full">
<button <button
class="absolute left-2 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-xl w-12 h-12 opacity-0 group-hover:opacity-85 flex items-center justify-center z-50" class="absolute p-2 left-2 top-1/2 transform -translate-y-1/2 rounded-full hover:bg-gray-100 bg-white/80 opacity-0 group-hover:opacity-100 flex z-[51] transition-all duration-200"
on:click={onPrevious} on:click={onPrevious}
> >
<ChevronLeft size={32} /> <ChevronLeft size={24} class="text-indigo-600" />
</button> </button>
<button <button
class="absolute right-2 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-xl w-12 h-12 opacity-0 group-hover:opacity-85 flex items-center justify-center z-50" class="absolute p-2 right-2 top-1/2 transform -translate-y-1/2 rounded-full hover:bg-gray-100 bg-white/80 opacity-0 group-hover:opacity-100 flex z-[51] transition-all duration-200"
on:click={onNext} on:click={onNext}
> >
<ChevronRight size={32} /> <ChevronRight size={24} class="text-indigo-600" />
</button> </button>
<!-- Your modal content goes here -->
</div> </div>
<div class="flex flex-col md:flex-row h-full">
<div class="flex flex-col md:flex-row h-full relative">
<!-- Image container --> <!-- Image container -->
<div class="flex-none w-full md:w-1/2 flex flex-col"> <div class="flex-none {showDetails ? 'w-full md:w-1/2' : 'w-full'} flex flex-col h-full">
<div class="mb-4"> <div class="mb-4 relative z-[52]">
<div class="flex items-center space-x-2 text-lg leading-tight font-medium text-black hover:underline"> <div class="flex justify-between items-center">
<LucideIcon name={translateAppName(app_name) || "Image"} size={24} /> <div class="flex-1" />
<div class="flex items-center space-x-2 text-lg leading-tight font-medium text-black">
<LucideIcon name={translateAppName(app_name) || 'Image'} size={24} />
<p>{title}</p> <p>{title}</p>
</div> </div>
<div class="flex-1 flex justify-end">
{#if showDetails}
<button
class="p-2 hover:bg-gray-100 rounded-full transition-colors"
on:click={toggleDetails}
>
<Info size={24} class={showDetails ? 'text-indigo-600' : 'text-gray-400'} />
</button>
{/if}
</div> </div>
</div>
</div>
{#if showDetails}
<div class="mb-2 mr-2 pb-2 border-b border-gray-300"> <div class="mb-2 mr-2 pb-2 border-b border-gray-300">
<span class="mt-1 text-sm leading-tight font-medium text-gray-500 font-mono"> <span class="mt-1 text-sm leading-tight font-medium text-gray-500 font-mono">
<span class="inline-flex mr-4"> <span class="inline-flex mr-4">
<Library size={16} class="uppercase tracking-wide text-sm text-indigo-600 font-bold mr-1"/> <Library
size={16}
class="uppercase tracking-wide text-sm text-indigo-600 font-bold mr-1"
/>
{library_id} {library_id}
</span> </span>
<span class="inline-flex mr-4"> <span class="inline-flex mr-4">
<Folder size={16} class="uppercase tracking-wide text-sm text-indigo-600 font-bold mr-1"/> <Folder
size={16}
class="uppercase tracking-wide text-sm text-indigo-600 font-bold mr-1"
/>
{folder_id} {folder_id}
</span> </span>
<span class="inline-flex mr-4"> <span class="inline-flex mr-4">
<Hash size={16} class="uppercase tracking-wide text-sm text-indigo-600 font-bold mr-1"/> <Hash
size={16}
class="uppercase tracking-wide text-sm text-indigo-600 font-bold mr-1"
/>
{id} {id}
</span> </span>
<span class="inline-flex mr-4"> <span class="inline-flex mr-4">
<FileClock size={16} class="uppercase tracking-wide text-sm text-indigo-600 font-bold mr-1"/> <FileClock
size={16}
class="uppercase tracking-wide text-sm text-indigo-600 font-bold mr-1 font-mono"
/>
{new Date(created_at).toLocaleString()} {new Date(created_at).toLocaleString()}
</span> </span>
</span> </span>
@ -160,19 +221,38 @@
</span> </span>
</div> </div>
</div> </div>
<div class="flex-grow overflow-hidden"> {/if}
<a href={video} target="_blank" rel="noopener noreferrer" class="block h-full">
<div class="relative flex-grow overflow-hidden">
<a href={video} target="_blank" rel="noopener noreferrer" class="block">
<img <img
class="w-full h-full object-contain rounded-lg drop-shadow-md" class="w-full h-full object-contain rounded-lg drop-shadow-md"
src={image} src={image}
alt={title} alt={title}
/> />
</a> </a>
{#if !showDetails}
<button
class="opacity-0 group-hover:opacity-100 absolute top-4 right-4 p-0.5 rounded-full transition-all duration-200 hover:bg-gray-100 bg-white/80"
on:click={toggleDetails}
>
<Info size={24} class="text-indigo-600" />
</button>
{/if}
</div> </div>
{#if !showDetails}
<div class="mt-4 text-center">
<span class="inline-flex items-center text-sm text-gray-500 font-mono">
<FileClock size={16} class="mr-1 text-indigo-600" />
{new Date(created_at).toLocaleString()}
</span>
</div>
{/if}
</div> </div>
<!-- Description container --> <!-- Description container -->
<ScrollArea class="mt-4 md:mt-0 md:ml-6 overflow-y-auto max-h-full"> {#if showDetails}
<ScrollArea class="mt-4 md:mt-0 md:ml-6 md:w-1/2 h-full">
{#if tags.length > 0} {#if tags.length > 0}
<div class="mb-4"> <div class="mb-4">
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">TAGS</div> <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">TAGS</div>
@ -212,13 +292,17 @@
{/each} {/each}
</div> </div>
</ScrollArea> </ScrollArea>
{/if}
</div> </div>
<div class="absolute top-0 right-0 pt-2 pr-2">
<button class="text-gray-400 hover:text-gray-600 opacity-0 group-hover:opacity-100" on:click={onClose}> <div class="absolute top-2 right-2 z-[52]">
<!-- svelte-ignore a11y-click-events-have-key-events --> <button
<!-- svelte-ignore a11y-no-static-element-interactions --> class="p-2 rounded-full hover:bg-gray-100 bg-white/80 opacity-0 group-hover:opacity-100 transition-all duration-200"
<X size={32} /> on:click={onClose}
>
<X size={24} class="text-indigo-600" />
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div>