chore(sfc-playground): improve buttons

Author: yyx990803

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>

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()