Mendayakan Muat Turun Aplikasi dalam Local bolt.new-tutorial js-php.cn

Dalam artikel ini, saya akan mengubah suai bolt.new untuk membenarkan aplikasi yang dibuat dalam alat dimuat turun secara setempat. Ciri ini akan memudahkan penggunaan dalaman aplikasi bolt.new, menjadikannya amat berguna untuk persekitaran korporat.

Objektif

Tambahkan fungsi untuk memuat turun fail projek sebagai arkib ZIP.

Langkah-langkah Melaksana

Sepadukan butang muat turun dalam antara muka
- Tambah butang muat turun dalam bar sisi atau bar alat.
Jana arkib ZIP projek
- Gunakan pustaka seperti JSZip untuk menggabungkan fail projek ke dalam arkib ZIP.
Muat turun arkib ZIP
- Cetuskan fungsi muat turun penyemak imbas dengan fail ZIP yang dijana.
Uji ciri
- Pastikan bahawa ZIP yang dimuat turun mengandungi fail dan struktur direktori yang diharapkan.

Dalam artikel seterusnya, kami akan membincangkan cara mengubah suai bolt.new untuk disepadukan dengan Perkhidmatan OpenAI Azure, memperkemas aplikasi untuk kes penggunaan peringkat perusahaan. Sila semaknya.

Menambah Butang Muat Turun

Untuk mendayakan ciri memuat turun fail projek sebagai ZIP, kami mengubah suai fail bolt.new/app/components/workbench/EditorPanel.tsx. Perubahan ditandakan antara // Tambah permulaan dan // Tambah tamat untuk kejelasan.

...  
// Append start  
import JSZip from 'jszip';  
// Append end  
...  

export const EditorPanel = memo(  
  ({  
    files,  
    unsavedFiles,  
    editorDocument,  
    selectedFile,  
    isStreaming,  
    onFileSelect,  
    onEditorChange,  
    onEditorScroll,  
    onFileSave,  
    onFileReset,  
  }: EditorPanelProps) => {  

    ...  

    // Append start  
    const handleDownloadZip = useCallback(async () => {  
      const zip = new JSZip();  
      const files = workbenchStore.files.get();  

      // Check if there are files to download  
      if (Object.keys(files).length === 0) {  
        toast.error('No files to download');  
        return;  
      }  

      try {  
        // Add files to the ZIP, maintaining relative paths from WORK_DIR  
        Object.entries(files).forEach(([path, content]) => {  
          if (content && content.content) {  
            const relativePath = path.startsWith(WORK_DIR)   
              ? path.slice(WORK_DIR.length + 1)   
              : path;  
            zip.file(relativePath, content.content);  
          }  
        });  

        const zipBlob = await zip.generateAsync({ type: 'blob' });  
        const downloadLink = document.createElement('a');  
        downloadLink.href = URL.createObjectURL(zipBlob);  

        // Use the project name from `package.json` if available  
        const projectName = files[`${WORK_DIR}/package.json`]?.content  
          ? JSON.parse(files[`${WORK_DIR}/package.json`].content).name  
          : 'project';  
        downloadLink.download = `${projectName}.zip`;  

        downloadLink.click();  
        URL.revokeObjectURL(downloadLink.href);  
        toast.success('Files downloaded successfully');  
      } catch (error) {  
        toast.error('Failed to create zip file');  
        console.error(error);  
      }  
    }, []);  
    // Append end  

    return (  
      <PanelGroup direction="vertical">  
        <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>  
          <PanelGroup direction="horizontal">  
            <Panel defaultSize={20} minSize={10} collapsible>  
              <div className="flex flex-col border-r border-bolt-elements-borderColor h-full">  
                <PanelHeader>  
                  <div className="i-ph:tree-structure-duotone shrink-0" />  
                  Files  
                  {/* Append start */}  
                  <div className="flex-1" />  
                  <button  
                    className="px-2 py-1 rounded-md text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive enabled:hover:bg-bolt-elements-item-backgroundActive"  
                    onClick={handleDownloadZip}  
                    title="Download as ZIP"  
                  >  
                    <div className="i-ph:download-simple text-xl" />  
                  </button>  
                  {/* Append end */}  
                </PanelHeader>  
    ...

Salin selepas log masuk

Penjelasan Perubahan

Menambah import JSZip:

Pustaka ini digunakan untuk menjana arkib ZIP.
mengendalikan fungsi Muat TurunZip:
- Mengambil semula fail daripada WorkbenchStore.
- Mencipta fail ZIP dengan laluan relatif daripada WORK_DIR.
- Menamakan fail ZIP secara automatik menggunakan nama projek daripada package.json, jika tersedia.
Butang muat turun dalam antara muka:
- Butang ditambahkan pada pengepala panel Fail untuk mencetuskan proses muat turun ZIP.
- Digayakan dan termasuk petua alat untuk kejelasan pengguna.

Dengan perubahan ini, pengguna boleh memuat turun fail projek sebagai arkib ZIP terus daripada antara muka.

Mengemas kini package.json

Untuk menggunakan pustaka JSZip bagi menjana arkib ZIP, tambahkannya pada kebergantungan dalam package.json.

{  
  ...  
  "dependencies": {  
    "@ai-sdk/anthropic": "^0.0.39",  
    // Append start  
    "jszip": "^3.10.1",  
    // Append end  
  },  
  ...  
}

Salin selepas log masuk

Langkah-langkah untuk Memohon Kemas Kini

Buka fail package.json.
Tambah "jszip": "^3.10.1" di bawah bahagian "dependencies" seperti yang ditunjukkan di atas.
Jalankan arahan berikut untuk memasang perpustakaan:

pnpm install

Salin selepas log masuk

Ini memastikan perpustakaan yang diperlukan tersedia dalam projek anda untuk fungsi penjanaan ZIP.

Menguji Ciri Muat Turun

Selepas melengkapkan pengubahsuaian, ikut langkah ini untuk mengesahkan fungsi baharu:

Mulakan Aplikasi

Jalankan arahan berikut untuk membina dan memulakan bolt.new:

...  
// Append start  
import JSZip from 'jszip';  
// Append end  
...  

export const EditorPanel = memo(  
  ({  
    files,  
    unsavedFiles,  
    editorDocument,  
    selectedFile,  
    isStreaming,  
    onFileSelect,  
    onEditorChange,  
    onEditorScroll,  
    onFileSave,  
    onFileReset,  
  }: EditorPanelProps) => {  

    ...  

    // Append start  
    const handleDownloadZip = useCallback(async () => {  
      const zip = new JSZip();  
      const files = workbenchStore.files.get();  

      // Check if there are files to download  
      if (Object.keys(files).length === 0) {  
        toast.error('No files to download');  
        return;  
      }  

      try {  
        // Add files to the ZIP, maintaining relative paths from WORK_DIR  
        Object.entries(files).forEach(([path, content]) => {  
          if (content && content.content) {  
            const relativePath = path.startsWith(WORK_DIR)   
              ? path.slice(WORK_DIR.length + 1)   
              : path;  
            zip.file(relativePath, content.content);  
          }  
        });  

        const zipBlob = await zip.generateAsync({ type: 'blob' });  
        const downloadLink = document.createElement('a');  
        downloadLink.href = URL.createObjectURL(zipBlob);  

        // Use the project name from `package.json` if available  
        const projectName = files[`${WORK_DIR}/package.json`]?.content  
          ? JSON.parse(files[`${WORK_DIR}/package.json`].content).name  
          : 'project';  
        downloadLink.download = `${projectName}.zip`;  

        downloadLink.click();  
        URL.revokeObjectURL(downloadLink.href);  
        toast.success('Files downloaded successfully');  
      } catch (error) {  
        toast.error('Failed to create zip file');  
        console.error(error);  
      }  
    }, []);  
    // Append end  

    return (  
      <PanelGroup direction="vertical">  
        <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>  
          <PanelGroup direction="horizontal">  
            <Panel defaultSize={20} minSize={10} collapsible>  
              <div className="flex flex-col border-r border-bolt-elements-borderColor h-full">  
                <PanelHeader>  
                  <div className="i-ph:tree-structure-duotone shrink-0" />  
                  Files  
                  {/* Append start */}  
                  <div className="flex-1" />  
                  <button  
                    className="px-2 py-1 rounded-md text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive enabled:hover:bg-bolt-elements-item-backgroundActive"  
                    onClick={handleDownloadZip}  
                    title="Download as ZIP"  
                  >  
                    <div className="i-ph:download-simple text-xl" />  
                  </button>  
                  {/* Append end */}  
                </PanelHeader>  
    ...

Salin selepas log masuk

Buka Aplikasi dalam Pelayar dan navigasi ke tab "Kod" antara muka aplikasi.
Sahkan bahawa butang muat turun kelihatan dalam bahagian "Fail", seperti yang ditunjukkan di bawah:

Enabling Application Downloads in Local bolt.new

Muat turun Fail Projek: Klik butang muat turun dan muat turun fail ZIP.

Atas ialah kandungan terperinci Mendayakan Muat Turun Aplikasi dalam Local bolt.new. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!