mira-app-server/web/assets/js/ImagePreview-DeQlNh-B.js

Mira Server - standalone server application using mira-app-core

import{aJ as T,dl as K,b5 as p,cq as $,a1 as j,ax as I,as as r,x as L,cb as U,bm as ee,bL as te,bZ as f,al as z,aX as q,c8 as v,bV as M,bX as N,bJ as re,$ as ae,dr as D,di as Z,at as ne,dq as V,av as C,aH as S,cr as s,aG as R,dh as oe,ds as B,d1 as le,d0 as se,cW as ie,C as ue,bb as de,c4 as ce}from"./index-OOzZz4T6.js";import{S as me}from"./StatusImage-ijC2Qank.js";import{P as ge}from"./PreviewHeader-QH_5UTLt.js";const he=T({__name:"ImageThumbnailListComponent",props:{images:{type:Array,required:!0},currentImageIndex:{type:Number,required:!0},cacheKey:{type:[String,Number],required:!1}},emits:["image-select"],setup(i,{expose:t,emit:a}){t();const e=i,l=a,d=u=>$(u.thumbnailPath||u.url,e.cacheKey);K(()=>[e.currentImageIndex,e.cacheKey,e.images.length],([u,c,b])=>{const n=e.images[u];console.debug("[ImagePreviewDebug][ThumbnailList] props-change",{currentImageIndex:u,currentImageId:n?.id,cacheKey:c,imageCount:b,currentImage:n?{id:n.id,name:n.name,localFile:n.localFile,path:n.path,url:n.url,thumbnailPath:n.thumbnailPath,previewSource:p(n),updatedAt:n.updatedAt}:null,currentThumbnailSrc:n?d(n):void 0})},{immediate:!0});const g={props:e,emit:l,getImageSrc:d,handleImageSelect:(u,c)=>{console.debug("[ImagePreviewDebug][ThumbnailList] click",{clickedImageIndex:u,clickedImageId:c.id,currentImageIndex:e.currentImageIndex,currentImageId:e.images[e.currentImageIndex]?.id,cacheKey:e.cacheKey,image:{id:c.id,name:c.name,localFile:c.localFile,path:c.path,url:c.url,thumbnailPath:c.thumbnailPath,previewSource:p(c),updatedAt:c.updatedAt},thumbnailSrc:d(c)}),l("image-select",u)}};return Object.defineProperty(g,"__isScriptSetup",{enumerable:!1,value:!0}),g}}),ve={class:"w-28 flex-shrink-0 bg-background p-2 flex flex-col items-center border-r border-border"},fe={class:"flex-grow space-y-3 overflow-y-auto pr-1"};function Ie(i,t,a,e,l,d){return f(),I("div",ve,[r("div",fe,[(f(!0),I(L,null,U(a.images,(o,g,u,c)=>{const b=[g===a.currentImageIndex,o.thumbnailPath,o.url,a.cacheKey];if(c&&c.key===o.id&&ee(c,b))return c;const n=(f(),I("img",{key:o.id,alt:o.name,class:te(["w-24 cursor-pointer rounded-lg border-2 object-contain",g===a.currentImageIndex?"border-primary":"border-transparent hover:border-border"]),src:e.getImageSrc(o),onClick:w=>e.handleImageSelect(g,o),loading:"lazy"},null,10,["alt","src","onClick"]));return n.memo=b,n},t,0),128))])])}const be=j(he,[["render",Ie],["__scopeId","data-v-7a7576ba"],["__file","D:/mira_typescript/packages/mira-client/src/renderer/components/business/ImageThumbnailListComponent.vue"]]),xe=T({__name:"ImageViewerComponent",props:{image:{type:Object,required:!1},cacheKey:{type:[String,Number],required:!1}},emits:["zoom-in","zoom-out","zoom-reset","rotate-left","rotate-right","toggle-fullscreen"],setup(i,{expose:t,emit:a}){t();const e=i,l=a,d=z(()=>q(e.image,e.cacheKey)),o=z(()=>`${e.image?.id||"empty"}:${d.value||""}`),g=h=>h?{id:h.id,name:h.name,localFile:h.localFile,path:h.path,url:h.url,thumbnailPath:h.thumbnailPath,previewSource:p(h),updatedAt:h.updatedAt}:null,u=v(!1),c=v(!1),b=v(null),n=v(null),w=v(1),_=v(1),E=v({inline:!0,button:!1,navbar:!1,title:!1,toolbar:!1,tooltip:!1,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!1,fullscreen:!0,keyboard:!1,backdrop:!0,focus:!0,zIndex:9999}),F=async()=>{u.value=!1,c.value=!1,console.debug("[ImagePreviewDebug][Viewer] source-image-load",{image:g(e.image),cacheKey:e.cacheKey,imageUrl:d.value,viewerKey:o.value}),await re(),n.value?.update?.(),n.value?.view?.(0),console.debug("[ImagePreviewDebug][Viewer] viewer-updated-after-load",{imageId:e.image?.id,cacheKey:e.cacheKey,imageUrl:d.value,viewerKey:o.value,viewerIndex:n.value?.index,viewerLength:n.value?.length})},m=()=>{u.value=!1,c.value=!0,console.debug("[ImagePreviewDebug][Viewer] source-image-error",{image:g(e.image),cacheKey:e.cacheKey,imageUrl:d.value,viewerKey:o.value})},x=h=>{n.value=h,n.value?.view?.(0),console.debug("[ImagePreviewDebug][Viewer] inited",{image:g(e.image),cacheKey:e.cacheKey,imageUrl:d.value,viewerKey:o.value,viewerIndex:n.value?.index,viewerLength:n.value?.length})},y=()=>{n.value&&n.value.zoom(.1),l("zoom-in")},P=()=>{n.value&&n.value.zoom(-.1),l("zoom-out")},H=()=>{n.value&&n.value.reset(),l("zoom-reset")},G=()=>{n.value&&n.value.rotate(-90),l("rotate-left")},X=()=>{n.value&&n.value.rotate(90),l("rotate-right")},J=()=>{n.value&&(w.value*=-1,n.value.scaleX(w.value))},W=()=>{n.value&&(_.value*=-1,n.value.scaleY(_.value))},Y=()=>{n.value&&(n.value.reset(),w.value=1,_.value=1)},Q=()=>{n.value&&n.value.full(),l("toggle-fullscreen")},A=()=>{!document.fullscreenElement&&n.value?.fulled&&n.value.exit?.()};M(()=>{document.addEventListener("fullscreenchange",A)}),N(()=>{document.removeEventListener("fullscreenchange",A)}),K(()=>e.image,(h,k)=>{console.debug("[ImagePreviewDebug][Viewer] props-image-change",{oldImage:g(k),newImage:g(h),cacheKey:e.cacheKey,imageUrl:d.value,viewerKey:o.value}),h&&h!==k&&(!k||h.id!==k.id)&&(u.value=!0,c.value=!1,n.value=null,w.value=1,_.value=1)},{immediate:!0}),K(()=>e.cacheKey,(h,k)=>{console.debug("[ImagePreviewDebug][Viewer] cache-key-change",{oldCacheKey:k,newCacheKey:h,image:g(e.image),imageUrl:d.value,viewerKey:o.value})});const O={props:e,emit:l,imageUrl:d,viewerKey:o,describeImage:g,loading:u,error:c,viewerRef:b,viewerInstance:n,flipHorizontalState:w,flipVerticalState:_,viewerOptions:E,handleImageLoad:F,handleImageError:m,onViewerInited:x,zoomIn:y,zoomOut:P,resetZoom:H,rotateLeft:G,rotateRight:X,flipHorizontal:J,flipVertical:W,reset:Y,toggleFullscreen:Q,handleDocumentFullscreenChange:A,get VViewer(){return ae},StatusImage:me};return Object.defineProperty(O,"__isScriptSetup",{enumerable:!1,value:!0}),O}}),pe={class:"relative flex flex-grow flex-col items-center justify-center w-full"},we={class:"flex flex-grow items-center justify-center w-full h-full min-h-[400px]"},ye={class:"h-full flex items-center justify-center"},_e=["src","alt"],ke={key:0,class:"flex items-center justify-center w-96 h-96 bg-accent rounded-lg"},Ce={key:0,class:"absolute inset-0 flex items-center justify-center bg-background/80"},Se={class:"flex flex-col items-center space-y-2"},ze={class:"text-sm text-muted-foreground"},Pe={key:1,class:"absolute inset-0 flex items-center justify-center bg-background/80"},Ke={class:"flex flex-col items-center space-y-2"},Fe={class:"text-sm text-muted-foreground"};function Te(i,t,a,e,l,d){return f(),I("div",pe,[r("div",we,[D((f(),ne(e.VViewer,{key:e.viewerKey,ref:"viewerRef",options:e.viewerOptions,trigger:e.imageUrl,class:"h-full w-full",onInited:e.onViewerInited},{default:V(()=>[r("div",ye,[a.image?D((f(),I("img",{key:e.viewerKey,src:e.imageUrl,alt:a.image.name,class:"max-h-full max-w-full rounded-lg object-contain hidden opacity-0 transition-opacity duration-300 ease-in-out",onLoad:e.handleImageLoad,onError:e.handleImageError},null,40,_e)),[[Z,!e.error]]):C("",!0)])]),_:1},8,["options","trigger"])),[[Z,!e.error]]),a.image?C("",!0):(f(),I("div",ke,[S(e.StatusImage,{name:"empty",size:"large"})]))]),e.loading&&!e.viewerInstance?(f(),I("div",Ce,[r("div",Se,[t[0]||(t[0]=r("div",{class:"animate-spin rounded-full h-8 w-8 border-b-2 border-primary"},null,-1)),r("span",ze,s(i.$t("business.imageView.loading")),1)])])):C("",!0),e.error?(f(),I("div",Pe,[r("div",Ke,[S(e.StatusImage,{name:"load_failed",size:"large"}),r("span",Fe,s(i.$t("business.imageView.loadFailed")),1)])])):C("",!0),r("div",{class:"absolute bottom-6 flex items-center space-x-2 rounded-full border border-border bg-background/80 p-2 backdrop-blur-md"},[r("button",{class:"flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted",onClick:e.zoomIn},t[1]||(t[1]=[r("span",{class:"material-icons text-muted-foreground"},"zoom_in",-1)])),r("button",{class:"flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted",onClick:e.zoomOut},t[2]||(t[2]=[r("span",{class:"material-icons text-muted-foreground"},"zoom_out",-1)])),r("button",{class:"flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted",onClick:e.resetZoom},t[3]||(t[3]=[r("span",{class:"material-icons text-muted-foreground"},"zoom_out_map",-1)])),t[10]||(t[10]=r("div",{class:"h-6 border-l border-border"},null,-1)),r("button",{class:"flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted",onClick:e.rotateLeft},t[4]||(t[4]=[r("span",{class:"material-icons text-muted-foreground"},"rotate_90_degrees_ccw",-1)])),r("button",{class:"flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted",onClick:e.rotateRight},t[5]||(t[5]=[r("span",{class:"material-icons text-muted-foreground"},"rotate_90_degrees_cw",-1)])),t[11]||(t[11]=r("div",{class:"h-6 border-l border-border"},null,-1)),r("button",{class:"flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted",onClick:e.flipHorizontal},t[6]||(t[6]=[r("span",{class:"material-icons text-muted-foreground"},"flip",-1)])),r("button",{class:"flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted",onClick:e.flipVertical},t[7]||(t[7]=[r("span",{class:"material-icons text-muted-foreground",style:{transform:"rotate(90deg)"}},"flip",-1)])),t[12]||(t[12]=r("div",{class:"h-6 border-l border-border"},null,-1)),r("button",{class:"flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted",onClick:e.reset},t[8]||(t[8]=[r("span",{class:"material-icons text-muted-foreground"},"restart_alt",-1)])),r("button",{class:"flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted",onClick:e.toggleFullscreen},t[9]||(t[9]=[r("span",{class:"material-icons text-muted-foreground"},"fullscreen",-1)]))])])}const je=j(xe,[["render",Te],["__scopeId","data-v-56a87ec1"],["__file","D:/mira_typescript/packages/mira-client/src/renderer/components/business/ImageViewerComponent.vue"]]),Ae=T({__name:"ImageInfoComponent",props:{image:{type:Object,required:!1},cacheKey:{type:[String,Number],required:!1}},emits:["tag-add","tag-remove"],setup(i,{expose:t,emit:a}){t();const e=i,l=a,d=v(!1),o=v(""),g=z(()=>q(e.image,e.cacheKey)),u=m=>m?{id:m.id,name:m.name,localFile:m.localFile,path:m.path,url:m.url,thumbnailPath:m.thumbnailPath,previewSource:p(m),updatedAt:m.updatedAt}:null;K([()=>e.image,()=>e.cacheKey,g],([m,x,y])=>{console.debug("[ImagePreviewDebug][Info] props-change",{image:u(m),cacheKey:x,imageSrc:y})},{immediate:!0});const F={props:e,emit:l,showAddTag:d,newTag:o,imageSrc:g,describeImage:u,addTag:()=>{o.value.trim()&&(l("tag-add",o.value.trim()),o.value="",d.value=!1)},cancelAddTag:()=>{o.value="",d.value=!1},getFileExtension:m=>m.extension||m.name.split(".").pop()?.toUpperCase()||"Unknown",formatFileSize:m=>{if(!m)return"Unknown";const x=["B","KB","MB","GB"];let y=m,P=0;for(;y>=1024&&P<x.length-1;)y/=1024,P++;return`${y.toFixed(1)} ${x[P]}`},getFileFormat:m=>m&&m.split(".").pop()?.toUpperCase()||"Unknown",formatDate:m=>m?new Date(m).toLocaleDateString("zh-CN",{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit"}):"Unknown"};return Object.defineProperty(F,"__isScriptSetup",{enumerable:!1,value:!0}),F}}),De={class:"w-80 flex-shrink-0 bg-background flex flex-col border-l border-border"},Ve={class:"flex-grow overflow-y-auto p-4"},Re={class:"space-y-4"},Le={key:0,class:"relative"},Ue=["alt","src"],Ee={class:"absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded"},Oe={class:"font-semibold text-foreground mb-2"},Ze={class:"text-xs text-muted-foreground bg-muted p-2 rounded"},Be={class:"font-semibold text-foreground mb-2 text-sm"},qe={class:"flex flex-wrap gap-2 items-center"},Me=["onClick"],Ne={key:0,class:"mt-2 flex space-x-2"},He=["placeholder"],Ge={class:"font-semibold text-foreground mb-2 text-sm"},Xe={class:"text-xs space-y-2 text-muted-foreground"},Je={class:"flex justify-between"},We={class:"flex justify-between"},Ye={class:"flex justify-between"},Qe={class:"flex justify-between"},$e={class:"flex justify-between"},et={class:"pt-4 border-t border-border"},tt={class:"grid grid-cols-2 gap-2"},rt={class:"px-3 py-2 text-sm bg-primary/10 text-primary rounded-md hover:bg-primary/20 flex items-center justify-center space-x-1"},at={class:"px-3 py-2 text-sm bg-green-100 text-green-700 rounded-md hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300 dark:hover:bg-green-900/50 flex items-center justify-center space-x-1"},nt={class:"px-3 py-2 text-sm bg-orange-100 text-orange-700 rounded-md hover:bg-orange-200 dark:bg-orange-900/30 dark:text-orange-300 dark:hover:bg-orange-900/50 flex items-center justify-center space-x-1"},ot={class:"px-3 py-2 text-sm bg-destructive/10 text-destructive rounded-md hover:bg-destructive/20 flex items-center justify-center space-x-1"};function lt(i,t,a,e,l,d){return f(),I("div",De,[r("div",Ve,[r("div",Re,[a.image?(f(),I("div",Le,[r("img",{alt:a.image.name,src:e.imageSrc,class:"rounded-lg object-contain w-full max-h-[300px] cursor-pointer"},null,8,Ue),r("div",Ee,s(e.getFileExtension(a.image)),1)])):C("",!0),r("div",null,[r("h3",Oe,s(a.image?.name||"Unknown"),1),r("div",Ze,s(a.image?.folderId||"/Unknown"),1)]),r("div",null,[r("h4",Be,s(i.$t("business.imageInfoComponent.tags")),1),r("div",qe,[(f(!0),I(L,null,U(a.image?.tags,o=>(f(),I("span",{key:o,class:"bg-primary text-primary text-xs px-2 py-1 rounded-full flex items-center"},[R(s(o)+" ",1),r("button",{class:"ml-1 text-primary text-xs hover:text-primary",onClick:g=>i.$emit("tag-remove",o)}," × ",8,Me)]))),128)),r("button",{class:"text-muted-foreground hover:text-foreground text-lg px-2 py-1 rounded-full hover:bg-muted",onClick:t[0]||(t[0]=o=>e.showAddTag=!0)}," + ")]),e.showAddTag?(f(),I("div",Ne,[D(r("input",{"onUpdate:modelValue":t[1]||(t[1]=o=>e.newTag=o),type:"text",placeholder:i.$t("business.imageInfoComponent.newTagPlaceholder"),class:"flex-1 px-2 py-1 text-xs border border-border rounded",onKeyup:[B(e.addTag,["enter"]),B(e.cancelAddTag,["escape"])]},null,40,He),[[oe,e.newTag]]),r("button",{class:"px-2 py-1 text-xs bg-primary text-white rounded hover:bg-primary",onClick:e.addTag},s(i.$t("business.imageInfoComponent.add")),1),r("button",{class:"px-2 py-1 text-xs bg-muted text-white rounded hover:bg-muted",onClick:e.cancelAddTag},s(i.$t("business.imageInfoComponent.cancel")),1)])):C("",!0)]),r("div",null,[r("h4",Ge,s(i.$t("business.imageInfoComponent.basicInfo")),1),r("div",Xe,[r("div",Je,[r("span",null,s(i.$t("business.imageInfoComponent.fileSize")),1),r("span",null,s(e.formatFileSize(a.image?.size)),1)]),r("div",We,[r("span",null,s(i.$t("business.imageInfoComponent.dimensions")),1),r("span",null,s(a.image?.metadata?.width||0)+" x "+s(a.image?.metadata?.height||0),1)]),r("div",Ye,[r("span",null,s(i.$t("business.imageInfoComponent.createdAt")),1),r("span",null,s(e.formatDate(a.image?.createdAt)),1)]),r("div",Qe,[r("span",null,s(i.$t("business.imageInfoComponent.updatedAt")),1),r("span",null,s(e.formatDate(a.image?.updatedAt||a.image?.createdAt)),1)]),r("div",$e,[r("span",null,s(i.$t("business.imageInfoComponent.fileFormat")),1),r("span",null,s(e.getFileFormat(a.image?.name)),1)])])]),r("div",et,[r("div",tt,[r("button",rt,[t[2]||(t[2]=r("span",{class:"material-symbols-outlined text-sm"},"download",-1)),r("span",null,s(i.$t("business.imageInfoComponent.download")),1)]),r("button",at,[t[3]||(t[3]=r("span",{class:"material-symbols-outlined text-sm"},"share",-1)),r("span",null,s(i.$t("business.imageInfoComponent.share")),1)]),r("button",nt,[t[4]||(t[4]=r("span",{class:"material-symbols-outlined text-sm"},"edit",-1)),r("span",null,s(i.$t("business.imageInfoComponent.edit")),1)]),r("button",ot,[t[5]||(t[5]=r("span",{class:"material-symbols-outlined text-sm"},"delete",-1)),r("span",null,s(i.$t("business.imageInfoComponent.delete")),1)])])])])])])}const st=j(Ae,[["render",lt],["__scopeId","data-v-8b2c29e4"],["__file","D:/mira_typescript/packages/mira-client/src/renderer/components/business/ImageInfoComponent.vue"]]);class it{router=le();route=se();mediaStore=ie();currentImageIndex=v(0);zoom=v(1);rotation=v(0);similarImages=v([]);loading=v(!1);error=v(null);viewerInstance=v(null);imageCacheKey=v(Date.now());debug=(t,a={})=>{console.debug("[ImagePreviewDebug][Controller]",t,a)};describeImage=t=>t?{id:t.id,name:t.name,localFile:t.localFile,path:t.path,url:t.url,thumbnailPath:t.thumbnailPath,previewSource:p(t),updatedAt:t.updatedAt}:null;constructor(){this.setCurrentImageIndexById(typeof this.route.params.id=="string"?this.route.params.id:void 0,!1),this.debug("constructor:init",{routeId:this.route.params.id,currentImageId:this.currentImageId.value,currentImageIndex:this.currentImageIndex.value,cacheKey:this.imageCacheKey.value,imageCount:this.imageItems.value.length,currentImage:this.describeImage(this.currentImage.value)}),K(()=>this.route.params.id,t=>{this.debug("route:param-change",{routeId:t,currentImageId:this.currentImageId.value,currentImageIndex:this.currentImageIndex.value,cacheKey:this.imageCacheKey.value}),typeof t=="string"&&t&&t!==this.currentImageId.value&&this.setCurrentImageIndexById(t)})}imageItems=z(()=>(this.mediaStore.imagePreviewItems.length>0?this.mediaStore.imagePreviewItems:this.mediaStore.files).filter(a=>this.getFileType(a.name)==="image"));normalizeImageIndex=t=>{const a=this.imageItems.value.length-1;return a<0?0:Math.min(Math.max(t,0),a)};setCurrentImageIndex=(t,a=!0)=>{const e=this.normalizeImageIndex(t),l=this.currentImageIndex.value;if(l===e&&this.currentImage.value)return;this.currentImageIndex.value=e,this.imageCacheKey.value=Date.now(),this.zoom.value=1,this.rotation.value=0;const d=this.currentImage.value;this.debug("index:set",{previousIndex:l,currentImageIndex:this.currentImageIndex.value,currentImageId:this.currentImageId.value,cacheKey:this.imageCacheKey.value,currentImage:this.describeImage(d)}),a&&d?.id&&this.router.replace({name:"ImagePreview",params:{id:d.id},query:this.route.query}).then(()=>{this.debug("index:route-synced",{routeId:this.route.params.id,currentImageIndex:this.currentImageIndex.value,currentImageId:this.currentImageId.value,cacheKey:this.imageCacheKey.value})}).catch(o=>{console.error("[ImagePreviewDebug][Controller] index:route-sync-failed",o)})};setCurrentImageIndexById=(t,a=!0)=>{const e=t?this.imageItems.value.findIndex(l=>l.id===t):0;this.setCurrentImageIndex(e>=0?e:0,a)};getFileType=t=>{if(!t)return"document";const a=t.toLowerCase(),e=a.slice(a.lastIndexOf(".")+1);return["jpg","jpeg","png","gif","bmp","svg","webp","ico",...ue].includes(e)?"image":/\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i.test(a)?"video":/\.(mp3|wav|flac|aac|ogg|wma)$/i.test(a)?"audio":"document"};currentImage=z(()=>this.imageItems.value[this.normalizeImageIndex(this.currentImageIndex.value)]);currentImageId=z(()=>this.currentImage.value?.id||"");goBack=()=>{this.router.back()};closePreview=()=>{this.router.push("/")};handleImageSelect=t=>{const a=this.imageItems.value[t];if(this.debug("select:request",{requestedImageIndex:t,requestedImage:this.describeImage(a),previousImageIndex:this.currentImageIndex.value,previousImageId:this.currentImageId.value,previousImage:this.describeImage(this.currentImage.value),cacheKey:this.imageCacheKey.value}),!a){this.debug("select:skip-missing-index",{imageIndex:t});return}this.setCurrentImageIndex(t)};handleZoomIn=()=>{this.zoom.value=Math.min(this.zoom.value*1.2,5)};handleZoomOut=()=>{this.zoom.value=Math.max(this.zoom.value/1.2,.1)};handleZoomReset=()=>{this.zoom.value=1};handleRotateLeft=()=>{this.rotation.value=(this.rotation.value-90)%360};handleRotateRight=()=>{this.rotation.value=(this.rotation.value+90)%360};handleToggleFullscreen=()=>{document.fullscreenElement?document.exitFullscreen():document.documentElement.requestFullscreen()};previousImage=()=>{const t=this.currentImageIndex.value;t>0&&this.handleImageSelect(t-1)};nextImage=()=>{const t=this.currentImageIndex.value;t<this.imageItems.value.length-1&&this.handleImageSelect(t+1)};handleSearchSimilar=async()=>{this.loading.value=!0;try{console.log("Search similar images for:",this.currentImage.value?.name),await new Promise(t=>setTimeout(t,1e3)),this.similarImages.value=this.imageItems.value.filter(t=>t.id!==this.currentImageId.value)}catch(t){console.error("Search similar images failed:",t),this.error.value=de.global.t("services.imagePreview.searchSimilarFailed")}finally{this.loading.value=!1}};handleTagAdd=t=>{this.currentImage.value&&!this.currentImage.value.tags?.includes(t)&&(this.currentImage.value.tags||(this.currentImage.value.tags=[]),this.currentImage.value.tags.push(t),console.log("Tag added:",t))};handleTagRemove=t=>{this.currentImage.value?.tags&&(this.currentImage.value.tags=this.currentImage.value.tags.filter(a=>a!==t),console.log("Tag removed:",t))};openWithViewer=t=>{const a=this.imageItems.value.map(l=>({src:p(l)||"","data-source":p(l)||"",alt:l.name}));if(a.length===0){console.warn("No images to display");return}const e=t!==void 0?t:this.currentImageIndex.value>=0?this.currentImageIndex.value:0;this.viewerInstance.value=ce({options:{toolbar:!0,navbar:!0,title:!0,keyboard:!0,focus:!0,backdrop:!0,loading:!0,loop:!0,transition:!0,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,toggleOnDblclick:!0,tooltip:!0,url:"data-source",initialViewIndex:e,zIndex:9999,zIndexInline:999,viewed:l=>{const d=l.detail.index;this.imageItems.value[d]&&this.setCurrentImageIndex(d)},hide:()=>{console.log("Viewer closed")}},images:a})};closeViewer=()=>{this.viewerInstance.value&&(this.viewerInstance.value.hide(),this.viewerInstance.value=null)};preloadAdjacentImages=()=>{const t=this.currentImageIndex.value,a=[];if(t>0){const e=this.imageItems.value[t-1],l=p(e);l&&a.push(l)}if(t<this.imageItems.value.length-1){const e=this.imageItems.value[t+1],l=p(e);l&&a.push(l)}a.forEach(e=>{const l=new Image;l.src=e})}}function ut(){return new it}const dt=T({__name:"ImagePreview",setup(i,{expose:t}){t();const a=ut(),e=u=>{if(!u)return"Unknown";const c=["B","KB","MB","GB"];let b=u,n=0;for(;b>=1024&&n<c.length-1;)b/=1024,n++;return`${b.toFixed(1)} ${c[n]}`},l=u=>u&&u.split(".").pop()?.toUpperCase()||"Unknown",d=u=>u?(u instanceof Date?u:new Date(u)).toLocaleDateString("zh-CN",{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit"}):"Unknown",o=u=>{switch(u.key){case"ArrowLeft":a.previousImage();break;case"ArrowRight":a.nextImage();break;case"Escape":a.closePreview();break;case"+":case"=":a.handleZoomIn();break;case"-":a.handleZoomOut();break;case"0":a.handleZoomReset();break;case"f":case"F":a.handleToggleFullscreen();break}};M(()=>{document.addEventListener("keydown",o),a.handleSearchSimilar(),a.preloadAdjacentImages()}),N(()=>{document.removeEventListener("keydown",o)});const g={controller:a,formatFileSize:e,getFileFormat:l,formatDate:d,handleKeyPress:o,ImageThumbnailListComponent:be,ImageViewerComponent:je,ImageInfoComponent:st,PreviewHeader:ge};return Object.defineProperty(g,"__isScriptSetup",{enumerable:!1,value:!0}),g}}),ct={class:"image-preview-view bg-muted h-screen flex flex-col text-[13px]"},mt={class:"flex items-center space-x-2"},gt={class:"inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground"},ht={class:"flex flex-grow overflow-hidden"},vt={class:"relative flex flex-grow flex-col"},ft={class:"flex h-10 flex-shrink-0 items-center justify-between border-t border-border bg-background px-6 text-xs text-muted-foreground"},It={class:"flex items-center space-x-4"},bt={class:"flex items-center space-x-4"},xt={class:"flex items-center space-x-4"},pt=["disabled"],wt=["disabled"];function yt(i,t,a,e,l,d){return f(),I("div",ct,[S(e.PreviewHeader,{"file-info":e.controller.currentImage.value||{}},{"left-extra":V(()=>[r("div",mt,[r("span",gt,[t[2]||(t[2]=r("span",{class:"material-symbols-outlined text-sm mr-1"},"folder",-1)),R(" "+s(e.controller.currentImage.value?.folderId||"/Pictures"),1)]),(f(!0),I(L,null,U(e.controller.currentImage.value?.tags,o=>(f(),I("span",{key:o,class:"inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary"},[t[3]||(t[3]=r("span",{class:"material-symbols-outlined text-sm mr-1"},"label",-1)),R(" "+s(o),1)]))),128))])]),"right-actions":V(()=>t[4]||(t[4]=[r("button",{class:"flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted"},[r("span",{class:"material-symbols-outlined text-muted-foreground"},"more_horiz")],-1)])),_:1},8,["file-info"]),r("div",ht,[S(e.ImageThumbnailListComponent,{images:e.controller.imageItems.value,"current-image-index":e.controller.currentImageIndex.value,"cache-key":e.controller.imageCacheKey.value,onImageSelect:e.controller.handleImageSelect},null,8,["images","current-image-index","cache-key","onImageSelect"]),r("div",vt,[S(e.ImageViewerComponent,{image:e.controller.currentImage.value,"cache-key":e.controller.imageCacheKey.value,zoom:e.controller.zoom.value,rotation:e.controller.rotation.value,onZoomIn:e.controller.handleZoomIn,onZoomOut:e.controller.handleZoomOut,onZoomReset:e.controller.handleZoomReset,onRotateLeft:e.controller.handleRotateLeft,onRotateRight:e.controller.handleRotateRight,onToggleFullscreen:e.controller.handleToggleFullscreen},null,8,["image","cache-key","zoom","rotation","onZoomIn","onZoomOut","onZoomReset","onRotateLeft","onRotateRight","onToggleFullscreen"]),r("footer",ft,[r("div",It,[r("span",null,s(i.$t("preview.imagePreview.dimensions"))+": "+s(e.controller.currentImage.value?.metadata?.width||0)+"x"+s(e.controller.currentImage.value?.metadata?.height||0),1),r("span",null,s(i.$t("preview.imagePreview.size"))+": "+s(e.formatFileSize(e.controller.currentImage.value?.size)),1)]),r("div",bt,[r("span",null,s(i.$t("preview.imagePreview.format"))+": "+s(e.getFileFormat(e.controller.currentImage.value?.name)),1),r("span",null,s(i.$t("preview.imagePreview.createdAt"))+": "+s(e.formatDate(e.controller.currentImage.value?.createdAt)),1)]),r("div",xt,[r("span",null,s(e.controller.currentImageIndex.value+1)+" / "+s(e.controller.imageItems.value.length),1),r("button",{class:"flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted",disabled:e.controller.currentImageIndex.value===0,onClick:t[0]||(t[0]=(...o)=>e.controller.previousImage&&e.controller.previousImage(...o))},t[5]||(t[5]=[r("span",{class:"material-symbols-outlined text-muted-foreground"},"navigate_before",-1)]),8,pt),r("button",{class:"flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted",disabled:e.controller.currentImageIndex.value===e.controller.imageItems.value.length-1,onClick:t[1]||(t[1]=(...o)=>e.controller.nextImage&&e.controller.nextImage(...o))},t[6]||(t[6]=[r("span",{class:"material-symbols-outlined text-muted-foreground"},"navigate_next",-1)]),8,wt)])])]),S(e.ImageInfoComponent,{image:e.controller.currentImage.value,"cache-key":e.controller.imageCacheKey.value,"similar-images":e.controller.similarImages.value,onSearchSimilar:e.controller.handleSearchSimilar,onTagAdd:e.controller.handleTagAdd,onTagRemove:e.controller.handleTagRemove},null,8,["image","cache-key","similar-images","onSearchSimilar","onTagAdd","onTagRemove"])])])}const St=j(dt,[["render",yt],["__scopeId","data-v-d6e54848"],["__file","D:/mira_typescript/packages/mira-client/src/renderer/components/preview/ImagePreview.vue"]]);export{St as default};