feat(fe): Updated UI and fixed several bugs

pull/497/head
zanllp 2024-01-22 02:43:42 +08:00
parent 961255b92f
commit 29c94404d7
40 changed files with 198 additions and 170 deletions

View File

@ -12,8 +12,8 @@ Promise.resolve().then(async () => {
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Infinite Image Browsing</title>
<script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-5576e19d.js"></script>
<link rel="stylesheet" href="/infinite_image_browsing/fe-static/assets/index-66ecc41c.css">
<script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-e958a380.js"></script>
<link rel="stylesheet" href="/infinite_image_browsing/fe-static/assets/index-dcc4b290.css">
</head>
<body>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
.img-sli-container[data-v-ae3fb9a8]{position:relative;overflow-y:auto;height:calc(100vh - 40px)}

View File

@ -0,0 +1 @@
import{d as a,o as t,y as s,c as n,c4 as _,X as o}from"./index-e958a380.js";const c={class:"img-sli-container"},i=a({__name:"ImgSliPagePane",props:{paneIdx:{},tabIdx:{},left:{},right:{}},setup(l){return(e,r)=>(t(),s("div",c,[n(_,{left:e.left,right:e.right},null,8,["left","right"])]))}});const d=o(i,[["__scopeId","data-v-ae3fb9a8"]]);export{d as default};

View File

@ -1 +0,0 @@
import{d as t,o as a,m as r,c4 as n}from"./index-5576e19d.js";const p=t({__name:"ImgSliPagePane",props:{paneIdx:{},tabIdx:{},left:{},right:{}},setup(o){return(e,s)=>(a(),r(n,{left:e.left,right:e.right},null,8,["left","right"]))}});export{p as default};

View File

@ -0,0 +1 @@
.preview-switch[data-v-c4827cd4]{position:fixed;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;z-index:11111;pointer-events:none}.preview-switch>*[data-v-c4827cd4]{color:#fff;margin:16px;font-size:4em;pointer-events:all;cursor:pointer}.preview-switch>*.disable[data-v-c4827cd4]{opacity:0;pointer-events:none;cursor:none}.container[data-v-c4827cd4]{background:var(--zp-secondary-background)}.container .file-list[data-v-c4827cd4]{list-style:none;padding:8px;height:100%;overflow:auto;height:var(--pane-max-height);width:100%}.container .no-res-hint[data-v-c4827cd4]{height:var(--pane-max-height);display:flex;align-items:center;flex-direction:column;justify-content:center}.container .no-res-hint .hint[data-v-c4827cd4]{font-size:1.6em;margin-bottom:2em;text-align:center}

View File

@ -1 +1 @@
import{d as j,l as H,ay as J,o as r,y as g,c as n,n as o,r as e,s as V,p as c,t as K,v as m,x as $,m as D,L as Y,C as f,N as F,Q as Z,R as ee,V as te,X as se}from"./index-5576e19d.js";import{L as ie,R as le,f as ne,S as oe}from"./fullScreenContextMenu-dfb6720b.js";import{g as ae,F as re}from"./FileItem-0829da99.js";import{g as de}from"./db-21e227e8.js";import{c as ce,u as me}from"./hook-2c42277f.js";import{o as ue}from"./functionalCallableComp-a6972163.js";import"./index-b1176497.js";/* empty css */const pe={class:"hint"},ge={key:1},fe={class:"no-res-hint"},ve={class:"hint"},Ie={key:2,class:"preview-switch"},ke=j({__name:"MatchedImageGrid",props:{tabIdx:{},paneIdx:{},selectedTagIds:{},id:{}},setup(z){const v=z,u=ce(s=>de(v.selectedTagIds,s)),{queue:B,images:l,onContextMenuClickU:I,stackViewEl:R,previewIdx:a,previewing:k,onPreviewVisibleChange:N,previewImgMove:w,canPreview:C,itemSize:_,gridItems:G,showGenInfo:d,imageGenInfo:h,q:A,multiSelectedIdxs:x,onFileItemClick:E,scroller:y,showMenuIdx:p,onFileDragStart:P,onFileDragEnd:U,cellWidth:L,onScroll:b}=me(u);return H(()=>v.selectedTagIds,async()=>{var s;await u.reset(),await J(),(s=y.value)==null||s.scrollToItem(0),b()},{immediate:!0}),(s,t)=>{const O=Z,q=ee,Q=te,W=oe;return r(),g("div",{class:"container",ref_key:"stackViewEl",ref:R},[n(W,{size:"large",spinning:!e(B).isIdle},{default:o(()=>{var M,S;return[n(q,{visible:e(d),"onUpdate:visible":t[1]||(t[1]=i=>V(d)?d.value=i:null),width:"70vw","mask-closable":"",onOk:t[2]||(t[2]=i=>d.value=!1)},{cancelText:o(()=>[]),default:o(()=>[n(O,{active:"",loading:!e(A).isIdle},{default:o(()=>[c("div",{style:{width:"100%","word-break":"break-all","white-space":"pre-line","max-height":"70vh",overflow:"auto"},onDblclick:t[0]||(t[0]=i=>e(K)(e(h)))},[c("div",pe,m(s.$t("doubleClickToCopy")),1),$(" "+m(e(h)),1)],32)]),_:1},8,["loading"])]),_:1},8,["visible"]),(M=e(l))!=null&&M.length?(r(),D(e(ae),{key:0,ref_key:"scroller",ref:y,class:"file-list",items:e(l),"item-size":e(_).first,"key-field":"fullpath","item-secondary-size":e(_).second,gridItems:e(G),onScroll:e(b)},{default:o(({item:i,index:T})=>[n(re,{idx:T,file:i,"cell-width":e(L),"show-menu-idx":e(p),"onUpdate:showMenuIdx":t[3]||(t[3]=X=>V(p)?p.value=X:null),onDragstart:e(P),onDragend:e(U),onFileItemClick:e(E),"full-screen-preview-image-url":e(l)[e(a)]?e(Y)(e(l)[e(a)]):"",selected:e(x).includes(T),onContextMenuClick:e(I),onPreviewVisibleChange:e(N),"is-selected-mutil-files":e(x).length>1},null,8,["idx","file","cell-width","show-menu-idx","onDragstart","onDragend","onFileItemClick","full-screen-preview-image-url","selected","onContextMenuClick","onPreviewVisibleChange","is-selected-mutil-files"])]),_:1},8,["items","item-size","item-secondary-size","gridItems","onScroll"])):e(u).load&&s.selectedTagIds.and_tags.length===1&&!((S=s.selectedTagIds.folder_paths_str)!=null&&S.trim())?(r(),g("div",ge,[c("div",fe,[c("p",ve,m(s.$t("tagSearchNoResultsMessage")),1),n(Q,{onClick:t[4]||(t[4]=i=>e(ue)()),type:"primary"},{default:o(()=>[$(m(s.$t("rebuildImageIndex")),1)]),_:1})])])):f("",!0),e(k)?(r(),g("div",Ie,[n(e(ie),{onClick:t[5]||(t[5]=i=>e(w)("prev")),class:F({disable:!e(C)("prev")})},null,8,["class"]),n(e(le),{onClick:t[6]||(t[6]=i=>e(w)("next")),class:F({disable:!e(C)("next")})},null,8,["class"])])):f("",!0)]}),_:1},8,["spinning"]),e(k)&&e(l)&&e(l)[e(a)]?(r(),D(ne,{key:0,file:e(l)[e(a)],idx:e(a),onContextMenuClick:e(I)},null,8,["file","idx","onContextMenuClick"])):f("",!0)],512)}}});const Se=se(ke,[["__scopeId","data-v-5e56145a"]]);export{Se as default};
import{d as j,l as H,ay as J,o as r,y as g,c as n,n as o,r as e,s as V,p as c,t as K,v as m,x as $,m as D,L as Y,C as f,N as F,Q as Z,R as ee,V as te,X as se}from"./index-e958a380.js";import{L as ie,R as le,f as ne,S as oe}from"./fullScreenContextMenu-64797e90.js";import{g as ae,F as re}from"./FileItem-caf7e020.js";import{g as de}from"./db-1786337f.js";import{c as ce,u as me}from"./hook-67d5a326.js";import{o as ue}from"./functionalCallableComp-dedd394b.js";import"./index-75af9b9c.js";/* empty css */const pe={class:"hint"},ge={key:1},fe={class:"no-res-hint"},ve={class:"hint"},Ie={key:2,class:"preview-switch"},ke=j({__name:"MatchedImageGrid",props:{tabIdx:{},paneIdx:{},selectedTagIds:{},id:{}},setup(z){const v=z,u=ce(s=>de(v.selectedTagIds,s)),{queue:B,images:l,onContextMenuClickU:I,stackViewEl:R,previewIdx:a,previewing:k,onPreviewVisibleChange:N,previewImgMove:w,canPreview:C,itemSize:_,gridItems:G,showGenInfo:d,imageGenInfo:h,q:A,multiSelectedIdxs:x,onFileItemClick:E,scroller:y,showMenuIdx:p,onFileDragStart:P,onFileDragEnd:U,cellWidth:L,onScroll:b}=me(u);return H(()=>v.selectedTagIds,async()=>{var s;await u.reset(),await J(),(s=y.value)==null||s.scrollToItem(0),b()},{immediate:!0}),(s,t)=>{const O=Z,q=ee,Q=te,W=oe;return r(),g("div",{class:"container",ref_key:"stackViewEl",ref:R},[n(W,{size:"large",spinning:!e(B).isIdle},{default:o(()=>{var M,S;return[n(q,{visible:e(d),"onUpdate:visible":t[1]||(t[1]=i=>V(d)?d.value=i:null),width:"70vw","mask-closable":"",onOk:t[2]||(t[2]=i=>d.value=!1)},{cancelText:o(()=>[]),default:o(()=>[n(O,{active:"",loading:!e(A).isIdle},{default:o(()=>[c("div",{style:{width:"100%","word-break":"break-all","white-space":"pre-line","max-height":"70vh",overflow:"auto"},onDblclick:t[0]||(t[0]=i=>e(K)(e(h)))},[c("div",pe,m(s.$t("doubleClickToCopy")),1),$(" "+m(e(h)),1)],32)]),_:1},8,["loading"])]),_:1},8,["visible"]),(M=e(l))!=null&&M.length?(r(),D(e(ae),{key:0,ref_key:"scroller",ref:y,class:"file-list",items:e(l),"item-size":e(_).first,"key-field":"fullpath","item-secondary-size":e(_).second,gridItems:e(G),onScroll:e(b)},{default:o(({item:i,index:T})=>[n(re,{idx:T,file:i,"cell-width":e(L),"show-menu-idx":e(p),"onUpdate:showMenuIdx":t[3]||(t[3]=X=>V(p)?p.value=X:null),onDragstart:e(P),onDragend:e(U),onFileItemClick:e(E),"full-screen-preview-image-url":e(l)[e(a)]?e(Y)(e(l)[e(a)]):"",selected:e(x).includes(T),onContextMenuClick:e(I),onPreviewVisibleChange:e(N),"is-selected-mutil-files":e(x).length>1},null,8,["idx","file","cell-width","show-menu-idx","onDragstart","onDragend","onFileItemClick","full-screen-preview-image-url","selected","onContextMenuClick","onPreviewVisibleChange","is-selected-mutil-files"])]),_:1},8,["items","item-size","item-secondary-size","gridItems","onScroll"])):e(u).load&&s.selectedTagIds.and_tags.length===1&&!((S=s.selectedTagIds.folder_paths_str)!=null&&S.trim())?(r(),g("div",ge,[c("div",fe,[c("p",ve,m(s.$t("tagSearchNoResultsMessage")),1),n(Q,{onClick:t[4]||(t[4]=i=>e(ue)()),type:"primary"},{default:o(()=>[$(m(s.$t("rebuildImageIndex")),1)]),_:1})])])):f("",!0),e(k)?(r(),g("div",Ie,[n(e(ie),{onClick:t[5]||(t[5]=i=>e(w)("prev")),class:F({disable:!e(C)("prev")})},null,8,["class"]),n(e(le),{onClick:t[6]||(t[6]=i=>e(w)("next")),class:F({disable:!e(C)("next")})},null,8,["class"])])):f("",!0)]}),_:1},8,["spinning"]),e(k)&&e(l)&&e(l)[e(a)]?(r(),D(ne,{key:0,file:e(l)[e(a)],idx:e(a),onContextMenuClick:e(I)},null,8,["file","idx","onContextMenuClick"])):f("",!0)],512)}}});const Se=se(ke,[["__scopeId","data-v-c4827cd4"]]);export{Se as default};

View File

@ -1 +0,0 @@
.preview-switch[data-v-5e56145a]{position:fixed;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;z-index:11111;pointer-events:none}.preview-switch>*[data-v-5e56145a]{color:#fff;margin:16px;font-size:4em;pointer-events:all;cursor:pointer}.preview-switch>*.disable[data-v-5e56145a]{opacity:0;pointer-events:none;cursor:none}.container[data-v-5e56145a]{background:var(--zp-secondary-background)}.container .file-list[data-v-5e56145a]{list-style:none;padding:8px;height:100%;overflow:auto;height:var(--pane-max-height);width:100%}.container .no-res-hint[data-v-5e56145a]{height:var(--pane-max-height);display:flex;align-items:center;flex-direction:column;justify-content:center}.container .no-res-hint .hint[data-v-5e56145a]{font-size:1.6em;margin-bottom:2em;text-align:center}

View File

@ -1 +0,0 @@
.regex-icon[data-v-6c9b6792]{user-select:none;padding:4px;margin:0 4px;cursor:pointer;border:1px solid var(--zp-border);border-radius:4px}.regex-icon img[data-v-6c9b6792]{height:1.5em}.regex-icon[data-v-6c9b6792]:hover{background:var(--zp-border)}.regex-icon.selected[data-v-6c9b6792]{background:var(--primary-color-1);border:1px solid var(--primary-color)}.search-bar[data-v-6c9b6792]{padding:8px 8px 0;display:flex}.search-bar.last[data-v-6c9b6792]{padding-bottom:8px}.search-bar .form-name[data-v-6c9b6792]{flex-shrink:0;padding:4px 8px}.preview-switch[data-v-6c9b6792]{position:fixed;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;z-index:11111;pointer-events:none}.preview-switch>*[data-v-6c9b6792]{color:#fff;margin:16px;font-size:4em;pointer-events:all;cursor:pointer}.preview-switch>*.disable[data-v-6c9b6792]{opacity:0;pointer-events:none;cursor:none}.container[data-v-6c9b6792]{background:var(--zp-secondary-background)}.container .file-list[data-v-6c9b6792]{list-style:none;padding:8px;height:100%;overflow:auto;height:var(--pane-max-height);width:100%}

View File

@ -0,0 +1 @@
.regex-icon[data-v-7afef8c2]{user-select:none;padding:4px;margin:0 4px;cursor:pointer;border:1px solid var(--zp-border);border-radius:4px}.regex-icon img[data-v-7afef8c2]{height:1.5em}.regex-icon[data-v-7afef8c2]:hover{background:var(--zp-border)}.regex-icon.selected[data-v-7afef8c2]{background:var(--primary-color-1);border:1px solid var(--primary-color)}.search-bar[data-v-7afef8c2]{padding:8px 8px 0;display:flex}.search-bar.last[data-v-7afef8c2]{padding-bottom:8px}.search-bar .form-name[data-v-7afef8c2]{flex-shrink:0;padding:4px 8px}.preview-switch[data-v-7afef8c2]{position:fixed;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;z-index:11111;pointer-events:none}.preview-switch>*[data-v-7afef8c2]{color:#fff;margin:16px;font-size:4em;pointer-events:all;cursor:pointer}.preview-switch>*.disable[data-v-7afef8c2]{opacity:0;pointer-events:none;cursor:none}.container[data-v-7afef8c2]{background:var(--zp-secondary-background)}.container .file-list[data-v-7afef8c2]{list-style:none;padding:8px;height:100%;overflow:auto;height:var(--pane-max-height);width:100%}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
.container[data-v-aab31da2]{background:var(--zp-secondary-background);height:100%;overflow:auto;display:flex;flex-direction:column}.container .actions-panel[data-v-aab31da2]{padding:8px;background-color:var(--zp-primary-background)}.container .file-list[data-v-aab31da2]{flex:1;list-style:none;padding:8px;height:var(--pane-max-height);width:100%}.container .file-list .hint[data-v-aab31da2]{text-align:center;font-size:2em;padding:30vh 128px 0}

View File

@ -1 +0,0 @@
import{d as v,c5 as C,bP as I,o as l,y as _,p as f,c,n as r,x as h,v as d,r as e,m as F,L as x,c6 as z,c7 as B,V as $,X as R}from"./index-5576e19d.js";import{u as S,b as V,k as E,F as A,g as L}from"./FileItem-0829da99.js";import"./functionalCallableComp-a6972163.js";import"./db-21e227e8.js";import"./index-b1176497.js";/* empty css */const T={class:"actions-panel actions"},N={key:0,class:"file-list"},U={class:"hint"},H=v({__name:"batchDownload",props:{tabIdx:{},paneIdx:{},id:{}},setup(j){const{stackViewEl:w}=S().toRefs(),{itemSize:p,gridItems:k,cellWidth:y}=V(),i=E(),{selectdFiles:n}=C(i),m=I(),D=async t=>{const s=z(t);s&&i.addFiles(s.nodes)},b=async()=>{m.pushAction(async()=>{const t=await B.value.post("/zip",{paths:n.value.map(a=>a.fullpath)},{responseType:"blob"}),s=window.URL.createObjectURL(new Blob([t.data])),o=document.createElement("a");o.href=s,o.setAttribute("download",`iib_${new Date().toLocaleString()}.zip`),document.body.appendChild(o),o.click()})},g=t=>{n.value.splice(t,1)};return(t,s)=>{const o=$;return l(),_("div",{class:"container",ref_key:"stackViewEl",ref:w,onDrop:D},[f("div",T,[c(o,{onClick:s[0]||(s[0]=a=>e(i).selectdFiles=[])},{default:r(()=>[h(d(t.$t("clear")),1)]),_:1}),c(o,{onClick:b,type:"primary",loading:!e(m).isIdle},{default:r(()=>[h(d(t.$t("zipDownload")),1)]),_:1},8,["loading"])]),e(n).length?(l(),F(e(L),{key:1,ref:"scroller",class:"file-list",items:e(n).slice(),"item-size":e(p).first,"key-field":"fullpath","item-secondary-size":e(p).second,gridItems:e(k)},{default:r(({item:a,index:u})=>[c(A,{idx:u,file:a,"cell-width":e(y),"enable-close-icon":"",onCloseIconClick:q=>g(u),"full-screen-preview-image-url":e(x)(a),"enable-right-click-menu":!1},null,8,["idx","file","cell-width","onCloseIconClick","full-screen-preview-image-url"])]),_:1},8,["items","item-size","item-secondary-size","gridItems"])):(l(),_("div",N,[f("p",U,d(t.$t("batchDownloaDDragAndDropHint")),1)]))],544)}}});const J=R(H,[["__scopeId","data-v-16c4c9dd"]]);export{J as default};

View File

@ -1 +0,0 @@
.container[data-v-16c4c9dd]{background:var(--zp-secondary-background);height:100%;overflow:auto;display:flex;flex-direction:column}.container .actions-panel[data-v-16c4c9dd]{padding:8px;background-color:var(--zp-primary-background)}.container .file-list[data-v-16c4c9dd]{flex:1;list-style:none;padding:8px;height:var(--pane-max-height);width:100%}.container .file-list .hint[data-v-16c4c9dd]{text-align:center;font-size:2em;padding:30vh 128px 0}

View File

@ -0,0 +1 @@
import{d as v,c5 as C,bP as I,o as l,y as _,p as f,c,n as r,x as h,v as d,r as e,m as F,L as x,c6 as z,c7 as B,V as $,X as R}from"./index-e958a380.js";import{u as S,b as V,k as E,F as A,g as L}from"./FileItem-caf7e020.js";import"./functionalCallableComp-dedd394b.js";import"./db-1786337f.js";import"./index-75af9b9c.js";/* empty css */const T={class:"actions-panel actions"},N={key:0,class:"file-list"},U={class:"hint"},H=v({__name:"batchDownload",props:{tabIdx:{},paneIdx:{},id:{}},setup(j){const{stackViewEl:w}=S().toRefs(),{itemSize:p,gridItems:k,cellWidth:b}=V(),i=E(),{selectdFiles:n}=C(i),m=I(),y=async t=>{const s=z(t);s&&i.addFiles(s.nodes)},D=async()=>{m.pushAction(async()=>{const t=await B.value.post("/zip",{paths:n.value.map(o=>o.fullpath)},{responseType:"blob"}),s=window.URL.createObjectURL(new Blob([t.data])),a=document.createElement("a");a.href=s,a.setAttribute("download",`iib_${new Date().toLocaleString()}.zip`),document.body.appendChild(a),a.click()})},g=t=>{n.value.splice(t,1)};return(t,s)=>{const a=$;return l(),_("div",{class:"container",ref_key:"stackViewEl",ref:w,onDrop:y},[f("div",T,[c(a,{onClick:s[0]||(s[0]=o=>e(i).selectdFiles=[])},{default:r(()=>[h(d(t.$t("clear")),1)]),_:1}),c(a,{onClick:D,type:"primary",loading:!e(m).isIdle},{default:r(()=>[h(d(t.$t("zipDownload")),1)]),_:1},8,["loading"])]),e(n).length?(l(),F(e(L),{key:1,ref:"scroller",class:"file-list",items:e(n).slice(),"item-size":e(p).first,"key-field":"fullpath","item-secondary-size":e(p).second,gridItems:e(k)},{default:r(({item:o,index:u})=>[c(A,{idx:u,file:o,"cell-width":e(b),"enable-close-icon":"",onCloseIconClick:q=>g(u),"full-screen-preview-image-url":e(x)(o),"enable-right-click-menu":!1},null,8,["idx","file","cell-width","onCloseIconClick","full-screen-preview-image-url"])]),_:1},8,["items","item-size","item-secondary-size","gridItems"])):(l(),_("div",N,[f("p",U,d(t.$t("batchDownloaDDragAndDropHint")),1)]))],544)}}});const J=R(H,[["__scopeId","data-v-aab31da2"]]);export{J as default};

View File

@ -1 +1 @@
import{c7 as t}from"./index-5576e19d.js";const c=async()=>(await t.value.get("/db/basic_info")).data,d=async()=>(await t.value.get("/db/expired_dirs")).data,p=async()=>{await t.value.post("/db/update_image_data",{},{timeout:1/0})},u=async(a,s)=>(await t.value.post("/db/match_images_by_tags",{...a,folder_paths:(a.folder_paths_str??"").split(/,|\n/).map(e=>e.trim()).filter(e=>e),cursor:s})).data,g=async a=>(await t.value.post("/db/add_custom_tag",a)).data,i=async a=>(await t.value.post("/db/toggle_custom_tag_to_img",a)).data,_=async a=>{await t.value.post("/db/remove_custom_tag",a)},m=async a=>(await t.value.post("/db/search_by_substr",a)).data,r="/db/extra_paths",b=async a=>{await t.value.post(r,a)},l=async a=>{await t.value.delete(r,{data:a})},y=async a=>(await t.value.post("/db/get_image_tags",{paths:a})).data,v=()=>t.value.post("/db/rebuild_index"),h=a=>t.value.post("/db/batch_update_image_tag",a);export{b as a,c as b,d as c,g as d,_ as e,m as f,u as g,y as h,h as i,v as j,l as r,i as t,p as u};
import{c7 as t}from"./index-e958a380.js";const c=async()=>(await t.value.get("/db/basic_info")).data,d=async()=>(await t.value.get("/db/expired_dirs")).data,p=async()=>{await t.value.post("/db/update_image_data",{},{timeout:1/0})},u=async(a,s)=>(await t.value.post("/db/match_images_by_tags",{...a,folder_paths:(a.folder_paths_str??"").split(/,|\n/).map(e=>e.trim()).filter(e=>e),cursor:s})).data,g=async a=>(await t.value.post("/db/add_custom_tag",a)).data,i=async a=>(await t.value.post("/db/toggle_custom_tag_to_img",a)).data,_=async a=>{await t.value.post("/db/remove_custom_tag",a)},m=async a=>(await t.value.post("/db/search_by_substr",a)).data,r="/db/extra_paths",b=async a=>{await t.value.post(r,a)},l=async a=>{await t.value.delete(r,{data:a})},y=async a=>(await t.value.post("/db/get_image_tags",{paths:a})).data,v=()=>t.value.post("/db/rebuild_index"),h=a=>t.value.post("/db/batch_update_image_tag",a);export{b as a,c as b,d as c,g as d,_ as e,m as f,u as g,y as h,h as i,v as j,l as r,i as t,p as u};

View File

@ -1 +1 @@
.ant-alert{box-sizing:border-box;margin:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:relative;display:flex;align-items:center;padding:8px 15px;word-wrap:break-word;border-radius:2px}.ant-alert-content{flex:1;min-width:0}.ant-alert-icon{margin-right:8px}.ant-alert-description{display:none;font-size:14px;line-height:22px}.ant-alert-success{background-color:#f6ffed;border:1px solid #b7eb8f}.ant-alert-success .ant-alert-icon{color:#52c41a}.ant-alert-info{background-color:#fff1e6;border:1px solid #f7ae83}.ant-alert-info .ant-alert-icon{color:#d03f0a}.ant-alert-warning{background-color:#fffbe6;border:1px solid #ffe58f}.ant-alert-warning .ant-alert-icon{color:#faad14}.ant-alert-error{background-color:#fff2f0;border:1px solid #ffccc7}.ant-alert-error .ant-alert-icon{color:#ff4d4f}.ant-alert-error .ant-alert-description>pre{margin:0;padding:0}.ant-alert-action{margin-left:8px}.ant-alert-close-icon{margin-left:8px;padding:0;overflow:hidden;font-size:12px;line-height:12px;background-color:transparent;border:none;outline:none;cursor:pointer}.ant-alert-close-icon .anticon-close{color:#00000073;transition:color .3s}.ant-alert-close-icon .anticon-close:hover{color:#000000bf}.ant-alert-close-text{color:#00000073;transition:color .3s}.ant-alert-close-text:hover{color:#000000bf}.ant-alert-with-description{align-items:flex-start;padding:15px 15px 15px 24px}.ant-alert-with-description.ant-alert-no-icon{padding:15px}.ant-alert-with-description .ant-alert-icon{margin-right:15px;font-size:24px}.ant-alert-with-description .ant-alert-message{display:block;margin-bottom:4px;color:#000000d9;font-size:16px}.ant-alert-message{color:#000000d9}.ant-alert-with-description .ant-alert-description{display:block}.ant-alert.ant-alert-motion-leave{overflow:hidden;opacity:1;transition:max-height .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86),padding-top .3s cubic-bezier(.78,.14,.15,.86),padding-bottom .3s cubic-bezier(.78,.14,.15,.86),margin-bottom .3s cubic-bezier(.78,.14,.15,.86)}.ant-alert.ant-alert-motion-leave-active{max-height:0;margin-bottom:0!important;padding-top:0;padding-bottom:0;opacity:0}.ant-alert-banner{margin-bottom:0;border:0;border-radius:0}.ant-alert.ant-alert-rtl{direction:rtl}.ant-alert-rtl .ant-alert-icon{margin-right:auto;margin-left:8px}.ant-alert-rtl .ant-alert-action,.ant-alert-rtl .ant-alert-close-icon{margin-right:8px;margin-left:auto}.ant-alert-rtl.ant-alert-with-description{padding-right:24px;padding-left:15px}.ant-alert-rtl.ant-alert-with-description .ant-alert-icon{margin-right:auto;margin-left:15px}.access-mode-message[data-v-da52b9be]{display:flex;flex-direction:row;align-items:center}.access-mode-message a[data-v-da52b9be]{margin-left:16px}.container[data-v-da52b9be]{padding:20px;background-color:var(--zp-secondary-background);height:100%;overflow:auto}.header[data-v-da52b9be]{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.header h1[data-v-da52b9be]{font-size:28px;font-weight:700;color:var(--zp-primary);margin:0}.last-record[data-v-da52b9be]{margin-left:16px;font-size:14px;color:var(--zp-secondary);flex-shrink:0}.last-record a[data-v-da52b9be]{text-decoration:none;color:var(--zp-secondary)}.last-record a[data-v-da52b9be]:hover{color:var(--zp-primary)}.content[data-v-da52b9be]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:20px;margin-top:16px}.feature-item[data-v-da52b9be]{background-color:var(--zp-primary-background);border-radius:8px;box-shadow:0 1px 2px #0000001a;padding:20px}.feature-item ul[data-v-da52b9be]{list-style:none;padding:4px;max-height:70vh;overflow-y:auto}.feature-item.recent .title[data-v-da52b9be]{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.feature-item.recent .title h2[data-v-da52b9be]{margin:0}.feature-item .item[data-v-da52b9be]{margin-bottom:10px;padding:4px 8px;display:flex;align-items:center}.feature-item .item.rem[data-v-da52b9be]{display:flex;align-items:center;justify-content:space-between}.feature-item .item[data-v-da52b9be]:hover{background:var(--zp-secondary-background);border-radius:4px;color:var(--primary-color);cursor:pointer}.feature-item .icon[data-v-da52b9be]{margin-right:8px}.feature-item h2[data-v-da52b9be]{margin-top:0;margin-bottom:20px;font-size:20px;font-weight:700;color:var(--zp-primary)}.text[data-v-da52b9be]{flex:1;font-size:16px;word-break:break-all}
.ant-alert{box-sizing:border-box;margin:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:relative;display:flex;align-items:center;padding:8px 15px;word-wrap:break-word;border-radius:2px}.ant-alert-content{flex:1;min-width:0}.ant-alert-icon{margin-right:8px}.ant-alert-description{display:none;font-size:14px;line-height:22px}.ant-alert-success{background-color:#f6ffed;border:1px solid #b7eb8f}.ant-alert-success .ant-alert-icon{color:#52c41a}.ant-alert-info{background-color:#fff1e6;border:1px solid #f7ae83}.ant-alert-info .ant-alert-icon{color:#d03f0a}.ant-alert-warning{background-color:#fffbe6;border:1px solid #ffe58f}.ant-alert-warning .ant-alert-icon{color:#faad14}.ant-alert-error{background-color:#fff2f0;border:1px solid #ffccc7}.ant-alert-error .ant-alert-icon{color:#ff4d4f}.ant-alert-error .ant-alert-description>pre{margin:0;padding:0}.ant-alert-action{margin-left:8px}.ant-alert-close-icon{margin-left:8px;padding:0;overflow:hidden;font-size:12px;line-height:12px;background-color:transparent;border:none;outline:none;cursor:pointer}.ant-alert-close-icon .anticon-close{color:#00000073;transition:color .3s}.ant-alert-close-icon .anticon-close:hover{color:#000000bf}.ant-alert-close-text{color:#00000073;transition:color .3s}.ant-alert-close-text:hover{color:#000000bf}.ant-alert-with-description{align-items:flex-start;padding:15px 15px 15px 24px}.ant-alert-with-description.ant-alert-no-icon{padding:15px}.ant-alert-with-description .ant-alert-icon{margin-right:15px;font-size:24px}.ant-alert-with-description .ant-alert-message{display:block;margin-bottom:4px;color:#000000d9;font-size:16px}.ant-alert-message{color:#000000d9}.ant-alert-with-description .ant-alert-description{display:block}.ant-alert.ant-alert-motion-leave{overflow:hidden;opacity:1;transition:max-height .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86),padding-top .3s cubic-bezier(.78,.14,.15,.86),padding-bottom .3s cubic-bezier(.78,.14,.15,.86),margin-bottom .3s cubic-bezier(.78,.14,.15,.86)}.ant-alert.ant-alert-motion-leave-active{max-height:0;margin-bottom:0!important;padding-top:0;padding-bottom:0;opacity:0}.ant-alert-banner{margin-bottom:0;border:0;border-radius:0}.ant-alert.ant-alert-rtl{direction:rtl}.ant-alert-rtl .ant-alert-icon{margin-right:auto;margin-left:8px}.ant-alert-rtl .ant-alert-action,.ant-alert-rtl .ant-alert-close-icon{margin-right:8px;margin-left:auto}.ant-alert-rtl.ant-alert-with-description{padding-right:24px;padding-left:15px}.ant-alert-rtl.ant-alert-with-description .ant-alert-icon{margin-right:auto;margin-left:15px}.access-mode-message[data-v-236610db]{display:flex;flex-direction:row;align-items:center}.access-mode-message a[data-v-236610db]{margin-left:16px}.container[data-v-236610db]{padding:20px;background-color:var(--zp-secondary-background);height:100%;overflow:auto}.header[data-v-236610db]{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.header h1[data-v-236610db]{font-size:28px;font-weight:700;color:var(--zp-primary);margin:0}.last-record[data-v-236610db]{margin-left:16px;font-size:14px;color:var(--zp-secondary);flex-shrink:0}.last-record a[data-v-236610db]{text-decoration:none;color:var(--zp-secondary)}.last-record a[data-v-236610db]:hover{color:var(--zp-primary)}.content[data-v-236610db]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:20px;margin-top:16px}.feature-item[data-v-236610db]{background-color:var(--zp-primary-background);border-radius:8px;box-shadow:0 1px 2px #0000001a;padding:20px}.feature-item ul[data-v-236610db]{list-style:none;padding:4px;max-height:70vh;overflow-y:auto}.feature-item.recent .title[data-v-236610db]{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.feature-item.recent .title h2[data-v-236610db]{margin:0}.feature-item .item[data-v-236610db]{margin-bottom:10px;padding:4px 8px;display:flex;align-items:center}.feature-item .item.rem[data-v-236610db]{display:flex;align-items:center;justify-content:space-between}.feature-item .item[data-v-236610db]:hover{background:var(--zp-secondary-background);border-radius:4px;color:var(--primary-color);cursor:pointer}.feature-item .icon[data-v-236610db]{margin-right:8px}.feature-item h2[data-v-236610db]{margin-top:0;margin-bottom:20px;font-size:20px;font-weight:700;color:var(--zp-primary)}.text[data-v-236610db]{flex:1;font-size:16px;word-break:break-all}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
import{bo as A,$ as g,bW as q,bX as x,as as k,ap as D,bP as z,be as G}from"./index-5576e19d.js";import{u as N,b as Q,f as W,c as j,d as H,e as L,h as O}from"./FileItem-0829da99.js";let T=0;const U=()=>++T,X=(r,l,{dataUpdateStrategy:c="replace"}={})=>{const s=A([""]),u=g(!1),t=g(),a=g(!1);let f=g(-1);const v=new Set,b=e=>{var n;c==="replace"?t.value=e:c==="merge"&&(k((Array.isArray(t.value)||typeof t.value>"u")&&Array.isArray(e),"数据更新策略为合并时仅可用于值为数组的情况"),t.value=[...(n=t==null?void 0:t.value)!==null&&n!==void 0?n:[],...e])},d=e=>x(void 0,void 0,void 0,function*(){if(a.value||u.value&&typeof e>"u")return!1;a.value=!0;const n=U();f.value=n;try{let o;if(typeof e=="number"){if(o=s[e],typeof o!="string")return!1}else o=s[s.length-1];const m=yield r(o);if(v.has(n))return v.delete(n),!1;b(l(m));const i=m.cursor;if((e===s.length-1||typeof e!="number")&&(u.value=!i.has_next,i.has_next)){const I=i.next_cursor||i.next;k(typeof I=="string"),s.push(I)}}finally{f.value===n&&(a.value=!1)}return!0}),h=()=>{v.add(f.value),a.value=!1},w=(e=!1)=>x(void 0,void 0,void 0,function*(){const{refetch:n,force:o}=typeof e=="object"?e:{refetch:e};o&&h(),k(!a.value),s.splice(0,s.length,""),a.value=!1,t.value=void 0,u.value=!1,n&&(yield d())}),p=()=>({next:()=>x(void 0,void 0,void 0,function*(){if(a.value)throw new Error("不允许同时迭代");return{done:!(yield d()),value:t.value}})});return q({abort:h,load:u,next:d,res:t,loading:a,cursorStack:s,reset:w,[Symbol.asyncIterator]:p,iter:{[Symbol.asyncIterator]:p}})},J=r=>A(X(r,l=>l.files,{dataUpdateStrategy:"merge"})),K=r=>{const l=A(new Set),c=D(()=>(r.res??[]).filter(y=>!l.has(y.fullpath))),s=z(),{stackViewEl:u,multiSelectedIdxs:t,stack:a,scroller:f}=N({images:c}).toRefs(),{itemSize:v,gridItems:b,cellWidth:d,onScroll:h}=Q({fetchNext:()=>r.next()}),{showMenuIdx:w}=W(),{onFileDragStart:p,onFileDragEnd:e}=j(),{showGenInfo:n,imageGenInfo:o,q:m,onContextMenuClick:i,onFileItemClick:I}=H({openNext:G}),{previewIdx:C,previewing:F,onPreviewVisibleChange:_,previewImgMove:E,canPreview:M}=L(),P=async(y,S,R)=>{a.value=[{curr:"",files:c.value}],await i(y,S,R)};return O("removeFiles",async({paths:y})=>{y.forEach(S=>l.add(S))}),{images:c,scroller:f,queue:s,iter:r,onContextMenuClickU:P,stackViewEl:u,previewIdx:C,previewing:F,onPreviewVisibleChange:_,previewImgMove:E,canPreview:M,itemSize:v,gridItems:b,showGenInfo:n,imageGenInfo:o,q:m,onContextMenuClick:i,onFileItemClick:I,showMenuIdx:w,multiSelectedIdxs:t,onFileDragStart:p,onFileDragEnd:e,cellWidth:d,onScroll:h}};export{J as c,K as u};
import{bo as A,$ as g,bW as q,bX as x,as as k,ap as D,bP as z,be as G}from"./index-e958a380.js";import{u as N,b as Q,f as W,c as j,d as H,e as L,h as O}from"./FileItem-caf7e020.js";let T=0;const U=()=>++T,X=(r,l,{dataUpdateStrategy:c="replace"}={})=>{const s=A([""]),u=g(!1),t=g(),a=g(!1);let f=g(-1);const v=new Set,b=e=>{var n;c==="replace"?t.value=e:c==="merge"&&(k((Array.isArray(t.value)||typeof t.value>"u")&&Array.isArray(e),"数据更新策略为合并时仅可用于值为数组的情况"),t.value=[...(n=t==null?void 0:t.value)!==null&&n!==void 0?n:[],...e])},d=e=>x(void 0,void 0,void 0,function*(){if(a.value||u.value&&typeof e>"u")return!1;a.value=!0;const n=U();f.value=n;try{let o;if(typeof e=="number"){if(o=s[e],typeof o!="string")return!1}else o=s[s.length-1];const m=yield r(o);if(v.has(n))return v.delete(n),!1;b(l(m));const i=m.cursor;if((e===s.length-1||typeof e!="number")&&(u.value=!i.has_next,i.has_next)){const I=i.next_cursor||i.next;k(typeof I=="string"),s.push(I)}}finally{f.value===n&&(a.value=!1)}return!0}),h=()=>{v.add(f.value),a.value=!1},w=(e=!1)=>x(void 0,void 0,void 0,function*(){const{refetch:n,force:o}=typeof e=="object"?e:{refetch:e};o&&h(),k(!a.value),s.splice(0,s.length,""),a.value=!1,t.value=void 0,u.value=!1,n&&(yield d())}),p=()=>({next:()=>x(void 0,void 0,void 0,function*(){if(a.value)throw new Error("不允许同时迭代");return{done:!(yield d()),value:t.value}})});return q({abort:h,load:u,next:d,res:t,loading:a,cursorStack:s,reset:w,[Symbol.asyncIterator]:p,iter:{[Symbol.asyncIterator]:p}})},J=r=>A(X(r,l=>l.files,{dataUpdateStrategy:"merge"})),K=r=>{const l=A(new Set),c=D(()=>(r.res??[]).filter(y=>!l.has(y.fullpath))),s=z(),{stackViewEl:u,multiSelectedIdxs:t,stack:a,scroller:f}=N({images:c}).toRefs(),{itemSize:v,gridItems:b,cellWidth:d,onScroll:h}=Q({fetchNext:()=>r.next()}),{showMenuIdx:w}=W(),{onFileDragStart:p,onFileDragEnd:e}=j(),{showGenInfo:n,imageGenInfo:o,q:m,onContextMenuClick:i,onFileItemClick:I}=H({openNext:G}),{previewIdx:C,previewing:F,onPreviewVisibleChange:_,previewImgMove:E,canPreview:M}=L(),P=async(y,S,R)=>{a.value=[{curr:"",files:c.value}],await i(y,S,R)};return O("removeFiles",async({paths:y})=>{y.forEach(S=>l.add(S))}),{images:c,scroller:f,queue:s,iter:r,onContextMenuClickU:P,stackViewEl:u,previewIdx:C,previewing:F,onPreviewVisibleChange:_,previewImgMove:E,canPreview:M,itemSize:v,gridItems:b,showGenInfo:n,imageGenInfo:o,q:m,onContextMenuClick:i,onFileItemClick:I,showMenuIdx:w,multiSelectedIdxs:t,onFileDragStart:p,onFileDragEnd:e,cellWidth:d,onScroll:h}};export{J as c,K as u};

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
.ant-breadcrumb{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";color:#00000073;font-size:14px}.ant-breadcrumb .anticon{font-size:14px}.ant-breadcrumb a{color:#00000073;transition:color .3s}.ant-breadcrumb a:hover{color:#de632f}.ant-breadcrumb>span:last-child{color:#000000d9}.ant-breadcrumb>span:last-child a{color:#000000d9}.ant-breadcrumb>span:last-child .ant-breadcrumb-separator{display:none}.ant-breadcrumb-separator{margin:0 8px;color:#00000073}.ant-breadcrumb-link>.anticon+span,.ant-breadcrumb-link>.anticon+a{margin-left:4px}.ant-breadcrumb-overlay-link>.anticon{margin-left:4px}.ant-breadcrumb-rtl{direction:rtl}.ant-breadcrumb-rtl:before{display:table;content:""}.ant-breadcrumb-rtl:after{display:table;clear:both;content:""}.ant-breadcrumb-rtl>span{float:right}.ant-breadcrumb-rtl .ant-breadcrumb-link>.anticon+span,.ant-breadcrumb-rtl .ant-breadcrumb-link>.anticon+a{margin-right:4px;margin-left:0}.ant-breadcrumb-rtl .ant-breadcrumb-overlay-link>.anticon{margin-right:4px;margin-left:0}.nprogress{pointer-events:none}.nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}.nprogress .peg{display:block;position:absolute;right:0px;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translateY(-4px)}.nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}.nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent .nprogress .spinner,.nprogress-custom-parent .nprogress .bar{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preview-switch[data-v-29841a8a]{position:fixed;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;z-index:11111;pointer-events:none}.preview-switch>*[data-v-29841a8a]{color:#fff;margin:16px;font-size:4em;pointer-events:all;cursor:pointer}.preview-switch>*.disable[data-v-29841a8a]{opacity:0;pointer-events:none;cursor:none}.location-act[data-v-29841a8a]{margin-left:8px}.location-act .copy[data-v-29841a8a]{margin-right:4px}@media (max-width: 768px){.location-act[data-v-29841a8a]{display:flex;flex-direction:column}.location-act>*[data-v-29841a8a],.location-act .copy[data-v-29841a8a]{margin:2px}}.breadcrumb[data-v-29841a8a]{display:flex;align-items:center}.breadcrumb>*[data-v-29841a8a]{margin-right:4px}@media (max-width: 768px){.breadcrumb[data-v-29841a8a]{width:100%}.breadcrumb .ant-breadcrumb>*[data-v-29841a8a]{display:inline-block}}.container[data-v-29841a8a]{background:var(--zp-secondary-background);height:var(--pane-max-height)}.location-bar[data-v-29841a8a]{padding:4px 16px;background:var(--zp-primary-background);border-bottom:1px solid var(--zp-border);display:flex;align-items:center;justify-content:space-between}@media (max-width: 768px){.location-bar[data-v-29841a8a]{flex-direction:column}.location-bar[data-v-29841a8a] ::-webkit-scrollbar{height:2px;background-color:var(--zp-secondary-variant-background)}.location-bar .actions[data-v-29841a8a]{padding:4px 0;width:100%;overflow:auto;display:flex;align-items:center}.location-bar .actions>*[data-v-29841a8a]{flex-shrink:0}}.location-bar .actions[data-v-29841a8a]{display:flex;align-items:center;flex-shrink:0}.location-bar a.opt[data-v-29841a8a]{margin-left:8px}.view[data-v-29841a8a]{padding:8px;height:calc(100vh - 48px)}.view .file-list[data-v-29841a8a]{list-style:none;padding:8px;height:100%;overflow:auto}.hint[data-v-29841a8a]{padding:4px;border:4px;background:var(--zp-secondary-background);border:1px solid var(--zp-border)}
.ant-breadcrumb{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";color:#00000073;font-size:14px}.ant-breadcrumb .anticon{font-size:14px}.ant-breadcrumb a{color:#00000073;transition:color .3s}.ant-breadcrumb a:hover{color:#de632f}.ant-breadcrumb>span:last-child{color:#000000d9}.ant-breadcrumb>span:last-child a{color:#000000d9}.ant-breadcrumb>span:last-child .ant-breadcrumb-separator{display:none}.ant-breadcrumb-separator{margin:0 8px;color:#00000073}.ant-breadcrumb-link>.anticon+span,.ant-breadcrumb-link>.anticon+a{margin-left:4px}.ant-breadcrumb-overlay-link>.anticon{margin-left:4px}.ant-breadcrumb-rtl{direction:rtl}.ant-breadcrumb-rtl:before{display:table;content:""}.ant-breadcrumb-rtl:after{display:table;clear:both;content:""}.ant-breadcrumb-rtl>span{float:right}.ant-breadcrumb-rtl .ant-breadcrumb-link>.anticon+span,.ant-breadcrumb-rtl .ant-breadcrumb-link>.anticon+a{margin-right:4px;margin-left:0}.ant-breadcrumb-rtl .ant-breadcrumb-overlay-link>.anticon{margin-right:4px;margin-left:0}.nprogress{pointer-events:none}.nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}.nprogress .peg{display:block;position:absolute;right:0px;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translateY(-4px)}.nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}.nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent .nprogress .spinner,.nprogress-custom-parent .nprogress .bar{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preview-switch[data-v-008bb18d]{position:fixed;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;z-index:11111;pointer-events:none}.preview-switch>*[data-v-008bb18d]{color:#fff;margin:16px;font-size:4em;pointer-events:all;cursor:pointer}.preview-switch>*.disable[data-v-008bb18d]{opacity:0;pointer-events:none;cursor:none}.location-act[data-v-008bb18d]{margin-left:8px}.location-act .copy[data-v-008bb18d]{margin-right:4px}@media (max-width: 768px){.location-act[data-v-008bb18d]{display:flex;flex-direction:column}.location-act>*[data-v-008bb18d],.location-act .copy[data-v-008bb18d]{margin:2px}}.breadcrumb[data-v-008bb18d]{display:flex;align-items:center}.breadcrumb>*[data-v-008bb18d]{margin-right:4px}@media (max-width: 768px){.breadcrumb[data-v-008bb18d]{width:100%}.breadcrumb .ant-breadcrumb>*[data-v-008bb18d]{display:inline-block}}.container[data-v-008bb18d]{background:var(--zp-secondary-background);height:var(--pane-max-height)}.location-bar[data-v-008bb18d]{padding:4px 16px;background:var(--zp-primary-background);border-bottom:1px solid var(--zp-border);display:flex;align-items:center;justify-content:space-between}@media (max-width: 768px){.location-bar[data-v-008bb18d]{flex-direction:column}.location-bar[data-v-008bb18d] ::-webkit-scrollbar{height:2px;background-color:var(--zp-secondary-variant-background)}.location-bar .actions[data-v-008bb18d]{padding:4px 0;width:100%;overflow:auto;display:flex;align-items:center}.location-bar .actions>*[data-v-008bb18d]{flex-shrink:0}}.location-bar .actions[data-v-008bb18d]{display:flex;align-items:center;flex-shrink:0}.location-bar a.opt[data-v-008bb18d]{margin-left:8px}.view[data-v-008bb18d]{padding:8px;height:calc(100vh - 48px)}.view .file-list[data-v-008bb18d]{list-style:none;padding:8px;height:100%;overflow:auto}.hint[data-v-008bb18d]{padding:4px;border:4px;background:var(--zp-secondary-background);border:1px solid var(--zp-border)}

File diff suppressed because one or more lines are too long

4
vue/dist/index.html vendored
View File

@ -7,8 +7,8 @@
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Infinite Image Browsing</title>
<script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-5576e19d.js"></script>
<link rel="stylesheet" href="/infinite_image_browsing/fe-static/assets/index-66ecc41c.css">
<script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-e958a380.js"></script>
<link rel="stylesheet" href="/infinite_image_browsing/fe-static/assets/index-dcc4b290.css">
</head>
<body>

View File

@ -8,12 +8,13 @@ import { ref } from 'vue'
import { FileNodeInfo } from '@/api/files'
import { toRawFileUrl } from '@/util/file'
import { createImage } from '@/util'
import { ArrowDownOutlined } from '@/icon'
const props = defineProps<{
left: FileNodeInfo,
right: FileNodeInfo
container?: 'drawer'
}>()
const percent = ref(50)
const onResize = ([{ size }]: { size: number }[]) => {
percent.value = size
@ -39,10 +40,7 @@ const maxEdge = asyncComputed(async () => {
})
</script>
<template>
<div style="height:80%;position:absolute;width:99%;height:100%;top:0;left:0;">
<PromptCompare :lImg="left" :rImg="right"></PromptCompare>
</div>
<div ref="wrapperEl" style="height: 100%;">
<div ref="wrapperEl" style="height: 100%;">
<splitpanes class="default-theme" @resize="onResize">
<pane v-if="left">
<ImgSliSide side="left" :max-edge="maxEdge" :container-width="width" :percent="percent" :img="left" />
@ -52,10 +50,32 @@ const maxEdge = asyncComputed(async () => {
</pane>
</splitpanes>
</div>
<div class="hint" v-if="container !== 'drawer'">
<div class="hint-inline">
<ArrowDownOutlined /> Scroll down to compare prompts
</div>
</div>
<PromptCompare :lImg="left" :rImg="right"></PromptCompare>
</template>
<style lang="scss">
.hint {
text-align: center;
position: relative;
z-index: 222;
top: -48px;
.hint-inline {
display: inline-block;
color: var(--main-text-color);
margin: 0 auto;
padding: 4px 8px;
border-radius: 4px;
background-color: var(--zp-primary-background);
}
}
.img-sli .default-theme {
.splitpanes__splitter {

View File

@ -3,18 +3,22 @@ import DraggingPort from './DraggingPort.vue'
import { useImgSliStore } from '@/store/useImgSli'
import ImgSliSplitPane from './ImgSliComparePane.vue'
import { ref } from 'vue'
import { ArrowDownOutlined } from '@/icon'
const sli = useImgSliStore()
const splitpane = ref<{ requestFullScreen (): void }>()
</script>
<template>
<ADrawer width="100vw" v-model:visible="sli.drawerVisible" destroy-on-close class="img-sli" :close-icon="null">
<ImgSliSplitPane ref="splitpane" v-if="sli.left && sli.right" :left="sli.left" :right="sli.right" />
<ImgSliSplitPane ref="splitpane" container="drawer" v-if="sli.left && sli.right" :left="sli.left"
:right="sli.right" />
<template #footer>
<div class="actions">
<AButton @click="sli.drawerVisible = false">{{ $t('close') }}</AButton>
<AButton @click="splitpane?.requestFullScreen()">{{ $t('fullscreenview') }}</AButton>
<small> Scroll down to compare prompts</small>
<small>
<ArrowDownOutlined /> Scroll down to compare prompts
</small>
</div>
</template>
</ADrawer>
@ -23,7 +27,9 @@ const splitpane = ref<{ requestFullScreen (): void }>()
<style lang="scss">
.img-sli {
.ant-drawer-header,.ant-drawer-body {
.ant-drawer-header,
.ant-drawer-body {
padding: 0;
}
@ -40,5 +46,4 @@ const splitpane = ref<{ requestFullScreen (): void }>()
}
}
}
</style>
}</style>

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import ImgSliComparePane from './ImgSliComparePane.vue';
import ImgSliComparePane from './ImgSliComparePane.vue'
import { FileNodeInfo } from '@/api/files'
defineProps<{
paneIdx: number,
@ -9,6 +9,16 @@ defineProps<{
}>()
</script>
<template>
<ImgSliComparePane :left="left" :right="right">
</ImgSliComparePane>
</template>
<div class="img-sli-container">
<ImgSliComparePane :left="left" :right="right">
</ImgSliComparePane>
</div>
</template>
<style lang="scss" scoped>
.img-sli-container {
position: relative;
overflow-y: auto;
height: calc(100vh - 40px);
}
</style>

View File

@ -3,9 +3,9 @@
import { Splitpanes, Pane } from 'splitpanes'
import { FileNodeInfo } from '@/api/files'
import { getImageGenerationInfo } from '@/api'
import { watch,ref } from 'vue'
import { watch, ref } from 'vue'
import { createReactiveQueue } from '@/util'
import { parse } from 'stable-diffusion-image-metadata';
import { parse } from 'stable-diffusion-image-metadata'
const props = defineProps<{
lImg: FileNodeInfo,
@ -17,14 +17,14 @@ const lImgInfo = ref("")
const rImgInfo = ref("")
let seenKeys = []
function preprocessGenerationInfo(info:any) {
function preprocessGenerationInfo (info: any) {
let formatted = ""
let parsed = parse(info)
formatted += "--- PROMPT --- \r\n"
formatted += parsed.prompt?.replace(/\r\n/g, "")+"\r\n\r\n"
formatted += parsed.prompt?.replace(/\r\n/g, "") + "\r\n\r\n"
formatted += "--- NEGATIVE PROMPT --- \r\n"
formatted += parsed.negativePrompt ? parsed.negativePrompt.replace(/\n/g, "")+"\r\n\r\n" : "\r\n\r\n"
formatted += parsed.negativePrompt ? parsed.negativePrompt.replace(/\n/g, "") + "\r\n\r\n" : "\r\n\r\n"
//add rest of info properties line by line
//collect seen keys in global array and add linebreak if known key is missing
@ -60,36 +60,21 @@ watch(
</script>
<template>
<div class="wrapper-promptcompare">
<VueDiff class="diff" mode="split" theme="light" language="plaintext" :prev="lImgInfo"
:current="rImgInfo" :virtual-scroll="{ height: 500, lineMinHeight: 18, delay: 100 }"></VueDiff>
</div>
<VueDiff class="diff" mode="split" theme="light" language="plaintext" :prev="lImgInfo" :current="rImgInfo">
</VueDiff>
</template>
<style lang="scss">
.wrapper-promptcompare {
color: #f8f8f8;
padding: 10px;
overflow: hidden !important;
}
.diff {
width: 90%;
height: 500px;
transform: scale(1);
opacity: 1;
background-color: rgba(255,255,255,0.5) !important;
background-color: rgba(255, 255, 255, 0.5) !important;
color: #f8f8f8;
backdrop-filter: blur(5px);
top:100%;
position: absolute;
transition: top 0.2s ease-in-out;
}
.diff.open {
top:calc(100% - 500px);
transition: top 0.2s ease-in-out;
}
.diff code {
font-size: 12px;

View File

@ -22,7 +22,7 @@ import { toRawFileUrl } from '@/util/file'
import ContextMenu from '@/components/ContextMenu.vue'
import { useWatchDocument } from 'vue3-ts-util'
import { useTagStore } from '@/store/useTagStore'
import { parse } from 'stable-diffusion-image-metadata';
import { parse } from 'stable-diffusion-image-metadata'
const global = useGlobalStore()
@ -40,10 +40,10 @@ const geninfoFrags = computed(() => imageGenInfo.value.split('\n'))
const geninfoStruct = computed(() => parse(imageGenInfo.value))
const geninfoStructNoPrompts = computed(() => {
let p = parse(imageGenInfo.value);
delete p.prompt;
delete p.negativePrompt;
return p;
let p = parse(imageGenInfo.value)
delete p.prompt
delete p.negativePrompt
return p
})
const emit = defineEmits<{
(type: 'contextMenuClick', e: MenuInfo, file: FileNodeInfo, idx: number): void
@ -99,24 +99,24 @@ function getParNode (p: any) {
return p.parentNode as HTMLDivElement
}
function spanWrap(text: string) {
function spanWrap (text: string) {
if (!text) {
return ""
}
let result = '';
const values = text.split(/[\n,]+/);
let parenthesisActive = false;
let result = ''
const values = text.split(/[\n,]+/)
let parenthesisActive = false
for (let i = 0; i < values.length; i++) {
const trimmedValue = values[i].trim();
if(!parenthesisActive) parenthesisActive = trimmedValue.includes("(");
const cssClass = parenthesisActive ? "has-parentheses" : "";
result += `<span class="${cssClass}">${trimmedValue}</span>`;
const trimmedValue = values[i].trim()
if (!parenthesisActive) parenthesisActive = trimmedValue.includes("(")
const cssClass = parenthesisActive ? "has-parentheses" : ""
result += `<span class="${cssClass}">${trimmedValue}</span>`
if (i < values.length - 1) {
result += ",";
result += ","
}
if(parenthesisActive) parenthesisActive = !trimmedValue.includes(")");
if (parenthesisActive) parenthesisActive = !trimmedValue.includes(")")
}
return result;
return result
}
useWatchDocument('load', e => {
@ -192,7 +192,7 @@ const copyPositivePrompt = () => {
</a-menu>
</template>
</a-dropdown>
<AButton @click="emit('contextMenuClick', { key: 'download' } as MenuInfo, props.file, props.idx)" >{{
<AButton @click="emit('contextMenuClick', { key: 'download' } as MenuInfo, props.file, props.idx)">{{
$t('download') }}</AButton>
<a-button @click="copy2clipboardI18n(imageGenInfo)" v-if="imageGenInfo">{{
$t('copyPrompt')
@ -222,25 +222,32 @@ const copyPositivePrompt = () => {
</div>
</div>
<div>
<br/>
<h3>Prompt</h3>
<code v-html="spanWrap(geninfoStruct.prompt ?? '')"></code>
<br/>
<h3>Negative Prompt</h3>
<code v-html="spanWrap(geninfoStruct.negativePrompt ?? '')"></code>
</div><br/>
<h3>Params</h3>
<table>
<tr v-for="txt,key in geninfoStructNoPrompts" :key="txt" class="gen-info-frag">
<td style="font-weight: 600;text-transform: capitalize;">{{key}}</td>
<td v-if="typeof txt == 'object'">
<code>{{ txt }}</code>
</td>
<td v-else>
{{ txt }}
</td>
</tr>
</table>
<template v-if="geninfoStruct.prompt">
<br />
<h3>Prompt</h3>
<code v-html="spanWrap(geninfoStruct.prompt ?? '')"></code>
</template>
<template v-if="geninfoStruct.negativePrompt">
<br />
<h3>Negative Prompt</h3>
<code v-html="spanWrap(geninfoStruct.negativePrompt ?? '')"></code>
</template>
</div>
<template v-if="Object.keys(geninfoStructNoPrompts).length"> <br />
<h3>Params</h3>
<table>
<tr v-for="txt, key in geninfoStructNoPrompts" :key="txt" class="gen-info-frag">
<td style="font-weight: 600;text-transform: capitalize;">{{ key }}</td>
<td v-if="typeof txt == 'object'">
<code>{{ txt }}</code>
</td>
<td v-else>
{{ txt }}
</td>
</tr>
</table>
</template>
</div>
</div>
@ -280,7 +287,7 @@ const copyPositivePrompt = () => {
color: white;
}
}
}
}
.container {
height: 100%;
@ -300,19 +307,18 @@ const copyPositivePrompt = () => {
position: relative;
code {
font-size:0.9em;
font-size: 0.9em;
display: block;
padding: 4px;
background: var(--zp-primary-background);
border-radius: 4px;
border: 2px solid var(--zp-primary);
margin-right:20px;
margin-right: 20px;
white-space: pre-wrap;
word-break: break-word;
line-height: 1.78em;
:deep(span) {
background: rgba(0,0,0,0.06);
background: rgba(0, 0, 0, 0.06);
color: black;
padding: 2px 4px;
border-radius: 4px;
@ -320,25 +326,25 @@ const copyPositivePrompt = () => {
}
:deep(.has-parentheses) {
background: rgba(255,100,100,0.14);
background: rgba(255, 100, 100, 0.14);
}
:deep(span:hover) {
background: rgba(120,0,0,0.15);
}
background: rgba(120, 0, 0, 0.15);
}
}
table {
font-size: 1em;
font-size: 1em;
border-radius: 4px;
border: 2px solid var(--zp-primary);
border-collapse: separate;
margin-bottom: 3em;
}
table td {
padding-right: 14px;
padding-left:4px;
border-bottom: 1px solid var(--zp-primary);
padding-left: 4px;
border-bottom: 1px solid var(--zp-secondary);
border-collapse: collapse;
}
@ -406,4 +412,5 @@ const copyPositivePrompt = () => {
flex-wrap: wrap;
}
}
}</style>
}
</style>