From f9f4d7d785c28a926e82d974a274461384ce8db9 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Fri, 1 Dec 2023 18:17:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/form/uploader.js | 44 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/form/uploader.js b/src/form/uploader.js
index dd428c4..677c4db 100644
--- a/src/form/uploader.js
+++ b/src/form/uploader.js
@@ -199,7 +199,6 @@ class Uploader extends Component {
         }
       }
     `,
-
     // drag
     css`
       :host([drag]) {
@@ -241,6 +240,29 @@ class Uploader extends Component {
           cursor: not-allowed;
         }
       }
+    `,
+    // preview
+    css`
+      .preview {
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 99;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.3);
+
+        img {
+          display: block;
+          max-width: 90%;
+          max-height: 90%;
+          object-fit: contain;
+          box-shadow: 0 0 20px #000;
+        }
+      }
     `
   ]
 
@@ -334,6 +356,18 @@ class Uploader extends Component {
     this.#fetchUpload(files.map(it => it.file))
   }
 
+  #preview(ev, item) {
+    if (ev.target.name !== 'doc') {
+      this.$refs.view.firstElementChild.src =
+        item.url || URL.createObjectURL(item.file)
+      this.$refs.view.style.display = 'flex'
+    }
+  }
+
+  #closePreview(ev) {
+    this.$refs.view.style.display = ''
+  }
+
   mounted() {}
 
   render() {
@@ -387,8 +421,11 @@ class Uploader extends Component {
               >
                 <wc-icon
                   name=${it.stat === 0 ? 'loading' : grid ? 'search' : 'doc'}
+                  @click=${ev => this.#preview(ev, it)}
                 ></wc-icon>
-                <span class="name">${it.file.name}</span>
+                <span class="name" @click=${ev => this.#preview(ev, it)}
+                  >${it.file.name}</span
+                >
                 <wc-icon
                   class="del"
                   name="trash"
@@ -400,6 +437,9 @@ class Uploader extends Component {
           )}
         </footer>
       </main>
+      <div class="preview" ref="view" @click.self=${this.#closePreview}>
+        <img />
+      </div>
     `
   }
 }