一、代碼展示

<template><div class="container"><h1>文件列表</h1><div class="header-actions"><a-input  placeholder="輸入關鍵詞搜索"  v-model:value="search" style="width: 200px;" /><a-button type="primary"  @click="fetchResource">搜索</a-button><a-button type="primary" @click="showUploadModal">上傳文件</a-button></div><div class="table-container" ><a-table :columns="columns" :dataSource="dataSource" :pagination="pagination" :current="pagination.current" :pageSize="pagination.pageSize" @change="handleTableChange"><template #bodyCell="{ column, record }"><template v-if="column.key === 'operation'"><a @click="copyLink(record.fileLink)">復制鏈接</a></template></template></a-table></div><a-modal v-model:visible="uploadModalVisible" title="上傳文件" @ok="handleUpload" @cancel="closeUploadModal"><a-form :form="uploadForm" layout="vertical"><a-form-item label="文件名" required><a-input v-model:value="uploadForm.title" /></a-form-item><a-form-item label="文件鏈接" required><a-input v-model:value="uploadForm.source" /></a-form-item><a-form-item label="文件類型（阿里、百度等）" required><a-input v-model:value="uploadForm.type" /></a-form-item><a-form-item label="備注" ><a-input v-model:value="uploadForm.remark" /></a-form-item></a-form></a-modal></div>
</template><script setup>略
</script><style scoped >.table-container {min-height: 80vh;}
.container {
margin-bottom: 20px;margin-top: 80px;background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}h1 {margin-bottom: 10px;
}.header-actions {display: flex;gap: 10px;margin-bottom: 20px;
}a-input {width: 200px;
}.table-container {margin-top: 20px;
}</style>

二、代碼解讀

<template> 部分是Vue文件的模板部分，用于定義頁面的結構和布局。在這段代碼中，<template> 主要包括了頁面的 HTML 結構和 Ant Design Vue 組件的使用。下面是對 <template> 部分的詳細解釋：

1. <div class="container">: 整個頁面的容器，用于包裹所有內容，設置了一些樣式，如邊框圓角和陰影，使頁面看起來更加美觀。

2. <h1>: 頁面標題，顯示"文件列表"，用于標識頁面的主題。

3. <div class="header-actions">: 頭部操作區域，包括搜索框、搜索按鈕和上傳文件按鈕。這里使用了 Ant Design Vue 的樣式和組件。

   • <a-input>: Ant Design Vue 中的輸入框組件，用于輸入搜索關鍵詞。通過 v-model:value="search" 進行雙向綁定，將輸入框的值與 search 變量關聯。

   • <a-button>: Ant Design Vue 中的按鈕組件，包括搜索和上傳文件兩個按鈕。使用 @click 監聽按鈕點擊事件，分別調用 fetchResource 和 showUploadModal 方法。

4. <a-table>: Ant Design Vue 中的表格組件，用于展示文件列表。通過 :columns、:dataSource、:pagination 等屬性將數據和配置傳遞給表格組件。

   • :columns="columns": 指定表格的列配置，定義了文件名、來源、類型、上傳者、上傳時間等列。

   • :dataSource="dataSource": 表格的數據源，使用了 Vue 的響應式引用 dataSource。

   • :pagination="pagination": 表格分頁的配置，包括是否顯示大小調整器、是否顯示快速跳轉、每頁顯示數量等。

   • @change="handleTableChange": 監聽表格分頁、排序、篩選等變化，觸發 handleTableChange 方法進行處理。

   • <template #bodyCell="{ column, record }">: 自定義表格單元格內容，在操作列顯示"復制鏈接"的鏈接，通過調用 copyLink 方法實現。

5. <a-modal>: 彈出的上傳文件的模態框，包含文件名、文件鏈接、文件類型等輸入框。通過 v-model:visible 控制模態框的顯示和隱藏，使用 @ok 和 @cancel 監聽確定和取消按鈕的點擊事件，分別調用 handleUpload 和 closeUploadModal 方法。

   • <a-form>: Ant Design Vue 中的表單組件，包含文件名、文件鏈接、文件類型、備注等表單項。

     • <a-form-item>: 表單項，包括文件名、文件鏈接、文件類型和備注，其中文件名、文件鏈接和文件類型為必填項。

     • <a-input>: 輸入框組件，用于輸入文件名、文件鏈接、文件類型和備注，通過 v-model:value 進行雙向綁定。

總體而言，<template> 部分定義了頁面的結構，包括標題、搜索框、按鈕、文件列表和上傳文件模態框等組件，同時使用了 Ant Design Vue 提供的組件來實現樣式和交互效果。

三、結果展示