From ac6ad4e7125e031d147b455cd4dd60f7299967ea Mon Sep 17 00:00:00 2001 From: MoYi <1545929126@qq.com> Date: Fri, 17 Nov 2023 23:18:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 + package-lock.json | 22 ++++++++++ package.json | 2 + src/App.vue | 100 +++++++++++++++++++--------------------------- src/style.css | 13 ++++++ vite.config.ts | 9 +++++ 6 files changed, 88 insertions(+), 60 deletions(-) diff --git a/.gitignore b/.gitignore index eca7316..618ac34 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ dist-ssr *.njsproj *.sln *.sw? + +keys/ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e8fc409..e378a99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,11 @@ "version": "0.0.0", "dependencies": { "element-plus": "^2.4.2", + "fs": "^0.0.1-security", "vue": "^3.3.4" }, "devDependencies": { + "@types/node": "^20.9.1", "@vitejs/plugin-vue": "^4.2.3", "typescript": "^5.0.2", "vite": "^4.4.5", @@ -447,6 +449,15 @@ "@types/lodash": "*" } }, + "node_modules/@types/node": { + "version": "20.9.1", + "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.9.1.tgz", + "integrity": "sha512-HhmzZh5LSJNS5O8jQKpJ/3ZcrrlG6L70hpGqMIAoM9YVD0YBRNWYsfwcXq8VnSjlNpCpgLzMXdiPo+dxcvSmiA==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, "node_modules/@types/web-bluetooth": { "version": "0.0.16", "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz", @@ -816,6 +827,11 @@ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" }, + "node_modules/fs": { + "version": "0.0.1-security", + "resolved": "https://registry.npmmirror.com/fs/-/fs-0.0.1-security.tgz", + "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==" + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -1020,6 +1036,12 @@ "node": ">=14.17" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/vite": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", diff --git a/package.json b/package.json index 1f0df5e..5239a22 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,11 @@ }, "dependencies": { "element-plus": "^2.4.2", + "fs": "^0.0.1-security", "vue": "^3.3.4" }, "devDependencies": { + "@types/node": "^20.9.1", "@vitejs/plugin-vue": "^4.2.3", "typescript": "^5.0.2", "vite": "^4.4.5", diff --git a/src/App.vue b/src/App.vue index 248cbe4..6242e2a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -18,7 +18,6 @@ - @@ -32,12 +31,14 @@ -
import {ref, onMounted, watch, computed} from 'vue'; import {useWindowSize} from '@vueuse/core'; +import {Table} from "element-plus"; // 左侧栏宽度变量 const leftColumnSpan = ref(18); @@ -67,58 +69,25 @@ const rightColumnSpan = ref(6); const {width} = useWindowSize(); const searchInput = ref(''); // 原始文件列表数据 -const originalTableData = [ - {'id': 1, 'fileName': '文件名称Test_1', 'format': 'ttf', 'fileSize': '10001kb', 'uploader': 'MoYiJiangNan'}, - {'id': 2, 'fileName': '文件名称Test_2', 'format': 'ttf', 'fileSize': '10002kb', 'uploader': 'MoYiJiangNan'}, - {'id': 3, 'fileName': '文件名称Test_3', 'format': 'ttf', 'fileSize': '10003kb', 'uploader': 'MoYiJiangNan'}, - {'id': 4, 'fileName': '文件名称Test_4', 'format': 'ttf', 'fileSize': '10004kb', 'uploader': 'MoYiJiangNan'}, - {'id': 5, 'fileName': '文件名称Test_5', 'format': 'ttf', 'fileSize': '10005kb', 'uploader': 'MoYiJiangNan'}, - {'id': 6, 'fileName': '文件名称Test_6', 'format': 'ttf', 'fileSize': '10006kb', 'uploader': 'MoYiJiangNan'}, - {'id': 7, 'fileName': '文件名称Test_7', 'format': 'ttf', 'fileSize': '10007kb', 'uploader': 'MoYiJiangNan'}, - {'id': 8, 'fileName': '文件名称Test_8', 'format': 'ttf', 'fileSize': '10008kb', 'uploader': 'MoYiJiangNan'}, - {'id': 9, 'fileName': '文件名称Test_9', 'format': 'ttf', 'fileSize': '10009kb', 'uploader': 'MoYiJiangNan'}, - {'id': 10, 'fileName': '文件名称Test_10', 'format': 'ttf', 'fileSize': '10010kb', 'uploader': 'MoYiJiangNan'}, - {'id': 11, 'fileName': '文件名称Test_11', 'format': 'ttf', 'fileSize': '10011kb', 'uploader': 'MoYiJiangNan'}, - {'id': 12, 'fileName': '文件名称Test_12', 'format': 'ttf', 'fileSize': '10012kb', 'uploader': 'MoYiJiangNan'}, - {'id': 13, 'fileName': '文件名称Test_13', 'format': 'ttf', 'fileSize': '10013kb', 'uploader': 'MoYiJiangNan'}, - {'id': 14, 'fileName': '文件名称Test_14', 'format': 'ttf', 'fileSize': '10014kb', 'uploader': 'MoYiJiangNan'}, - {'id': 15, 'fileName': '文件名称Test_15', 'format': 'ttf', 'fileSize': '10015kb', 'uploader': 'MoYiJiangNan'}, - {'id': 16, 'fileName': '文件名称Test_16', 'format': 'ttf', 'fileSize': '10016kb', 'uploader': 'MoYiJiangNan'}, - {'id': 17, 'fileName': '文件名称Test_17', 'format': 'ttf', 'fileSize': '10017kb', 'uploader': 'MoYiJiangNan'}, - {'id': 18, 'fileName': '文件名称Test_18', 'format': 'ttf', 'fileSize': '10018kb', 'uploader': 'MoYiJiangNan'}, - {'id': 19, 'fileName': '文件名称Test_19', 'format': 'ttf', 'fileSize': '10019kb', 'uploader': 'MoYiJiangNan'}, - {'id': 20, 'fileName': '文件名称Test_20', 'format': 'ttf', 'fileSize': '10020kb', 'uploader': 'MoYiJiangNan'}, - {'id': 21, 'fileName': '文件名称Test_1', 'format': 'ttf', 'fileSize': '10001kb', 'uploader': 'MoYiJiangNan'}, - {'id': 22, 'fileName': '文件名称Test_2', 'format': 'ttf', 'fileSize': '10002kb', 'uploader': 'MoYiJiangNan'}, - {'id': 23, 'fileName': '文件名称Test_3', 'format': 'ttf', 'fileSize': '10003kb', 'uploader': 'MoYiJiangNan'}, - {'id': 24, 'fileName': '文件名称Test_4', 'format': 'ttf', 'fileSize': '10004kb', 'uploader': 'MoYiJiangNan'}, - {'id': 25, 'fileName': '文件名称Test_5', 'format': 'ttf', 'fileSize': '10005kb', 'uploader': 'MoYiJiangNan'}, - {'id': 26, 'fileName': '文件名称Test_6', 'format': 'ttf', 'fileSize': '10006kb', 'uploader': 'MoYiJiangNan'}, - {'id': 27, 'fileName': '文件名称Test_7', 'format': 'ttf', 'fileSize': '10007kb', 'uploader': 'MoYiJiangNan'}, - {'id': 28, 'fileName': '文件名称Test_8', 'format': 'ttf', 'fileSize': '10008kb', 'uploader': 'MoYiJiangNan'}, - {'id': 29, 'fileName': '文件名称Test_9', 'format': 'ttf', 'fileSize': '10009kb', 'uploader': 'MoYiJiangNan'}, - {'id': 30, 'fileName': '文件名称Test_10', 'format': 'ttf', 'fileSize': '10010kb', 'uploader': 'MoYiJiangNan'}, - {'id': 31, 'fileName': '文件名称Test_11', 'format': 'ttf', 'fileSize': '10011kb', 'uploader': 'MoYiJiangNan'}, - {'id': 32, 'fileName': '文件名称Test_12', 'format': 'ttf', 'fileSize': '10012kb', 'uploader': 'MoYiJiangNan'}, - {'id': 33, 'fileName': '文件名称Test_13', 'format': 'ttf', 'fileSize': '10013kb', 'uploader': 'MoYiJiangNan'}, - {'id': 34, 'fileName': '文件名称Test_14', 'format': 'ttf', 'fileSize': '10014kb', 'uploader': 'MoYiJiangNan'}, - {'id': 35, 'fileName': '文件名称Test_15', 'format': 'ttf', 'fileSize': '10015kb', 'uploader': 'MoYiJiangNan'}, - {'id': 36, 'fileName': '文件名称Test_16', 'format': 'ttf', 'fileSize': '10016kb', 'uploader': 'MoYiJiangNan'}, - {'id': 37, 'fileName': '文件名称Test_17', 'format': 'ttf', 'fileSize': '10017kb', 'uploader': 'MoYiJiangNan'}, - {'id': 38, 'fileName': '文件名称Test_18', 'format': 'ttf', 'fileSize': '10018kb', 'uploader': 'MoYiJiangNan'}, - {'id': 39, 'fileName': '文件名称Test_19', 'format': 'ttf', 'fileSize': '10019kb', 'uploader': 'MoYiJiangNan'}, - {'id': 40, 'fileName': '文件名称Test_20', 'format': 'ttf', 'fileSize': '10020kb', 'uploader': 'MoYiJiangNan'}, - // ... 添加其他文件数据 -]; - +const originalTableData: TableRow[] = []; +const randomDataRowCount = 1000; +const userName = "MoYiJiangNan"; +for (let i = 1; i < randomDataRowCount; i++) { + originalTableData.push({ + id: i, + fileName: "测试文件" + i, + format: 'ttf', + fileSize: (Math.random() * 1023).toFixed(0) + "kb", + uploader: "MoYiJiangNan" + }); +} // 文件列表数据 const tableData = ref(originalTableData); // 定义分页相关变量 const pageSize = ref(15); -const pagerCount = ref(6); +const pagerCount = ref(7); const totalItems = ref(tableData.value.length); const currentPage = ref(1); - // 计算分页后的文件列表数据 const pagedTableData = computed(() => { const startIndex = (currentPage.value - 1) * pageSize.value; @@ -130,7 +99,6 @@ const pagedTableData = computed(() => { const handlePageChange = (page: number) => { currentPage.value = page; }; - // 搜索功能 const handleSearch = () => { const query = searchInput.value.trim().toLowerCase(); @@ -146,7 +114,6 @@ const handleSearch = () => { currentPage.value = 1; // 重置当前页为第一页 totalItems.value = tableData.value.length; // 更新 totalItems }; - // 更新左侧栏宽度函数 const updateLeftColumnSpan = () => { if (width.value <= 768) { @@ -160,15 +127,32 @@ const updateLeftColumnSpan = () => { onMounted(updateLeftColumnSpan); watch(width, updateLeftColumnSpan); +// 为您的表格中的row定义一个接口类型 +interface TableRow { + id: number; + fileName: string; + format: string; + fileSize: string; + uploader: string; +} + // 点击下载按钮的处理函数 -const handleDownload = () => { - console.log('点击下载按钮'); +const handleDownload = (row: TableRow) => { + console.log('点击下载按钮', row); + alert('下载功能暂未实现' + row.id); +}; + +// 详细信息 +const handleAbout = (row: TableRow) => { + console.log('点击详细信息按钮', row); + alert('详细信息功能暂未实现' + row.id); }; // 点击删除按钮的处理函数 -const handleDelete = () => { - console.log('点击删除按钮'); -}; +// const handleDelete = (row: TableRow) => { +// console.log('点击删除按钮', row); +// alert('删除功能暂未实现' + row.id); +// }; \ No newline at end of file diff --git a/src/style.css b/src/style.css index e69de29..7cd3653 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,13 @@ +.el-table .cell { + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + word-break: break-all; + /* 行高 */ + line-height: 23px; + padding: 0 0; + /* 字体大小 */ + font-size: 13px; + margin-left: 15px; +} \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 05c1740..3453c7b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,16 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' +import fs from "fs" // https://vitejs.dev/config/ export default defineConfig({ + server: { + host: "0.0.0.0", + port: 5173, + https: { + key: fs.readFileSync("./keys/agent2-key.pem"), + cert: fs.readFileSync("./keys/agent2-cert.pem"), + }, + }, plugins: [vue()], })