first commit

2025-02-15 22:10:36 +08:00
commit 0205555d32
47 changed files with 6963 additions and 0 deletions
@@ -0,0 +1,147 @@
+<template>
+  <main>
+      <el-table size="large" stripe :data="tableData" style="width: 100%">
+        <el-table-column prop="code" :label="t('admin.fileView.code')" />
+        <el-table-column prop="prefix" :label="t('admin.fileView.prefix')" />
+        <el-table-column prop="suffix" :label="t('admin.fileView.suffix')" />
+        <el-table-column prop="text" :label="t('admin.fileView.text')">
+          <template #default="scope">
+            <span style="width: 6rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ scope.row.text }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="used_count" :label="t('admin.fileView.used_count')" />
+        <el-table-column prop="expired_count" :label="t('admin.fileView.expired_count')">
+          <template #default="scope">
+            <span>{{ scope.row.expired_count > -1 ? scope.row.expired_count : t('admin.fileView.unlimited_count') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="size" :label="t('admin.fileView.size')">
+          <template #default="scope">
+            <span>{{ Math.round(scope.row.size/1024/1024*100)/100 }}MB</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="expired_at" :label="t('admin.fileView.expired_at')">
+          <template #default="scope">
+            <span>{{ scope.row.expired_at ? formatTimestamp(scope.row.expired_at) : t('admin.fileView.forever') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="file_path" :label="t('admin.fileView.file_path')" />
+        <el-table-column>
+          <template #header>
+            {{ t('admin.fileView.action')}}
+          </template>
+          <template #default="scope">
+            <el-button type="danger" size="small" @click="deleteFile(scope.row.id)">{{ t('admin.fileView.delete') }}</el-button>
+            <el-button type="success" size="small" @click="downloadFile(scope.row.id)" v-if="scope.row.file_path">{{ t('admin.fileView.download') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination @size-change="updatePageSize" @current-change="updateCurrentPage" background layout="prev, pager, next" :page-size="params.size" :page-count="Math.round(params.total/params.size)" :total="params.total" />
+  </main>
+</template>
+<script lang="ts" setup>
+import { request } from "@/utils/request";
+import { formatTimestamp } from "@/utils/timestamp-format"
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+const tableData = ref([]);
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const params = ref({
+  page: 1,
+  size: 10,
+  total: 0,
+});
+const updateCurrentPage = (currentPage: number) => {
+  params.value.page = currentPage;
+  refreshData();
+};
+const deleteFile = (id: number) => {
+  request({
+    url: '/admin/file/delete',
+    method: 'delete',
+    data: {
+      id,
+    },
+  }).then(() => {
+    ElMessage.success(t('admin.fileView.delete_success'));
+    refreshData();
+  });
+};
+const downloadFile = (id: number) => {
+  request({
+    url: '/admin/file/download',
+    method: 'get',
+    params: {
+      id,
+    },
+    responseType: 'blob'
+  }).then((response: any) => {
+    const contentDisposition = response.headers['content-disposition'];
+    let filename = 'file';
+    // 使用正则表达式来提取文件名
+    const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+    if (filenameMatch != null && filenameMatch[1]) {
+      // 去除文件名周围的引号
+      filename = filenameMatch[1].replace(/['"]/g, '');
+    }
+    // @ts-ignore
+    if (window.showSaveFilePicker)
+      saveFileByWebApi(response.data, filename).catch(() => {
+        // ElMessage.error('文件保存函数不支持您的浏览器');
+        saveFileByElementA(response.data, filename).catch(() => {
+          ElMessage.error(t('admin.fileView.download_fail'));
+        })
+      })
+    else
+      saveFileByElementA(response.data, filename).catch(() => {
+        ElMessage.error(t('admin.fileView.download_fail'));
+      })
+  });
+};
+
+async function saveFileByElementA(fileBlob: Blob, filename: string) {
+  const downloadUrl = window.URL.createObjectURL(fileBlob);
+  const link = document.createElement('a');
+  link.href = downloadUrl;
+  link.download = filename; // 设置下载文件名
+  document.body.appendChild(link);
+  link.click();
+  // 清理并释放URL对象
+  window.URL.revokeObjectURL(downloadUrl);
+  document.body.removeChild(link);
+}
+
+async function saveFileByWebApi(fileBlob: Blob, filename: string) {
+  // 创建一个新句柄。
+  // @ts-ignore
+  const newHandle = await window.showSaveFilePicker({
+    suggestedName: filename,
+  });
+  // 创建一个 FileSystemWritableFileStream 用于写入。
+  const writableStream = await newHandle.createWritable();
+  // 写入我们的文件。
+  await writableStream.write(fileBlob);
+  // 关闭文件并将内容写入磁盘。
+  await writableStream.close();
+}
+
+
+const updatePageSize=(pageSize: number) => {
+  params.value.size = pageSize;
+  refreshData();
+};
+const refreshData=() => {
+  request({
+    url: '/admin/file/list',
+    method: 'get',
+    params: params.value,
+  }).then((res:any) => {
+    tableData.value = res.detail.data;
+    params.value.total = res.detail.total;
+  });
+}
+refreshData();
+</script>