From a276e7253aded5897c1d04b135727a0247bc903b Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 16 Sep 2021 17:21:48 -0400
Subject: [PATCH] chore(sfc-playground): improve buttons

---
 packages/sfc-playground/src/Header.vue           | 12 +++++++++---
 packages/sfc-playground/src/download/download.ts |  4 ++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index 88ebe28dc2c..c0cc7a8b962 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -111,12 +111,18 @@ async function fetchVersions(): Promise<string[]> {
           </li>
         </ul>
       </div>
-      <button class="toggle-dark" @click="toggleDark">
+      <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
         <Sun class="light" />
         <Moon class="dark" />
       </button>
-      <button class="share" @click="copyLink"><Share /></button>
-      <button class="download" @click="downloadProject(store)">
+      <button title="Copy sharable URL" class="share" @click="copyLink">
+        <Share />
+      </button>
+      <button
+        title="Download project files"
+        class="download"
+        @click="downloadProject(store)"
+      >
         <Download />
       </button>
     </div>
diff --git a/packages/sfc-playground/src/download/download.ts b/packages/sfc-playground/src/download/download.ts
index 6d9634d3e9a..dd7e3761d67 100644
--- a/packages/sfc-playground/src/download/download.ts
+++ b/packages/sfc-playground/src/download/download.ts
@@ -7,6 +7,10 @@ import config from './template/vite.config.js?raw'
 import readme from './template/README.md?raw'
 
 export async function downloadProject(store: any) {
+  if (!confirm('Download project files?')) {
+    return
+  }
+
   const { default: JSZip } = await import('jszip')
   const zip = new JSZip()