From 5c7f48a3582a5215606f95236f7cabb483f4fb5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=B0=8F=E7=9F=A2?= Date: Sun, 20 Oct 2024 15:31:39 +0800 Subject: [PATCH 01/96] Update admin-imgtc.html --- admin-imgtc.html | 37 ++++++++++++++++++++++++++++++++++--- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/admin-imgtc.html b/admin-imgtc.html index 9aefb581..dcd48c73 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -18,11 +18,18 @@ } .header-content { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 999; + height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: rgba(255, 255, 255, 0.75); + -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); @@ -133,6 +140,7 @@ } .main-container { + margin-top: 80px; display: flex; flex-direction: column; padding: 20px; @@ -141,8 +149,7 @@ .content { display: grid; - grid-template-columns: repeat(5, 1fr); - grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; padding: 10px; flex-grow: 1; @@ -150,16 +157,18 @@ .el-card { width: 100%; + padding-bottom: 75%; /* 设置高度为宽度的75% */ background: rgba(255, 255, 255, 0.6); border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; + object-fit: cover; transition: transform 0.3s ease; } .el-card:hover { - transform: scale(1.05); + transform: scale(1.025); } .el-image { @@ -227,6 +236,28 @@ transform: scale(1.5); z-index: 10; } + + @media (max-width: 768px) { + .header-content { + flex-direction: column; + text-align: center; + } + + .stats { + margin: 10px 0; + font-size: 1em; + } + + .content { + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + gap: 10px; + } + + .el-card { + margin: 0 auto; + max-width: 90%; + } + } From 0d3404671382004f5d73bfbbb80097a8334c1d73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=B0=8F=E7=9F=A2?= Date: Sun, 20 Oct 2024 16:07:03 +0800 Subject: [PATCH 02/96] Update admin-imgtc.html --- admin-imgtc.html | 369 ++++++++++++++++++++++++++--------------------- 1 file changed, 203 insertions(+), 166 deletions(-) diff --git a/admin-imgtc.html b/admin-imgtc.html index dcd48c73..4e0fba93 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -20,8 +20,8 @@ .header-content { position: fixed; top: 0; - left: 0; - right: 0; + left: 5%; + right: 5%; z-index: 999; height: 60px; display: flex; @@ -44,7 +44,7 @@ } .title { - font-size: 1.8em; + font-size: clamp(1.2em, 2vw, 1.8em); font-weight: bold; cursor: pointer; transition: color 0.3s ease; @@ -61,10 +61,10 @@ } .stats { - font-size: 1.2em; - margin-right: 20px; display: flex; align-items: center; + font-size: clamp(0.9em, 1.5vw, 1.2em); + margin-right: 20px; background: rgba(255, 255, 255, 0.9); padding: 5px 10px; border-radius: 10px; @@ -96,6 +96,13 @@ gap: 15px; } + .header-content .menu-icon { + display: none; + font-size: 1.5em; + cursor: pointer; + color: #333; + } + .header-content .actions i { font-size: 1.5em; cursor: pointer; @@ -149,7 +156,7 @@ .content { display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 10px; flex-grow: 1; @@ -157,7 +164,7 @@ .el-card { width: 100%; - padding-bottom: 75%; /* 设置高度为宽度的75% */ + aspect-ratio: 3 / 4; background: rgba(255, 255, 255, 0.6); border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); @@ -183,6 +190,12 @@ } .file-info { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; padding: 10px; background: rgba(0, 0, 0, 0.6); color: white; @@ -192,9 +205,6 @@ left: 0; width: 100%; box-sizing: border-box; - display: flex; - justify-content: center; - align-items: center; } .image-overlay { @@ -238,24 +248,20 @@ } @media (max-width: 768px) { - .header-content { + .header-content .actions { + display: none; flex-direction: column; - text-align: center; - } - - .stats { - margin: 10px 0; - font-size: 1em; + background: rgba(255, 255, 255, 0.9); + position: absolute; + top: 60px; + right: 20px; + padding: 10px; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } - .content { - grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); - gap: 10px; - } - - .el-card { - margin: 0 auto; - max-width: 90%; + .header-content .menu-icon { + display: block; } } @@ -272,7 +278,7 @@ 记录总数量: {{ Number }} -
+
@@ -294,6 +300,7 @@
+
@@ -330,152 +337,182 @@ - - - - - + + + - + }, + mounted() { + window.addEventListener('resize', this.calculatePageSize); + this.calculatePageSize(); + fetch("./api/manage/check", { method: 'GET', credentials: 'include' }) + .then(response => response.text()) + .then(result => result === "true" ? this.showLogoutButton = true : window.location.href = "./api/manage/login") + .catch(() => this.$message.error('同步数据时出错，请检查网络连接')); + + fetch("./api/manage/list", { method: 'GET', credentials: 'include' }) + .then(response => response.json()) + .then(result => { + this.tableData = result.map(file => ({ ...file, selected: false })); + this.updateStats(); + const savedSortOption = localStorage.getItem('sortOption'); + if (savedSortOption) { + this.sortOption = savedSortOption; + } + this.sortData(this.tableData); + }) + .catch(() => this.$message.error('同步数据时出错，请检查网络连接')); + }, + beforeDestroy() { + window.removeEventListener('resize', this.calculatePageSize); + } + }); + \ No newline at end of file From f4aceb2f1784ac7c2413ca947290cb6cd765c816 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=B0=8F=E7=9F=A2?= Date: Sun, 20 Oct 2024 16:11:40 +0800 Subject: [PATCH 03/96] Update admin-imgtc.html --- admin-imgtc.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/admin-imgtc.html b/admin-imgtc.html index 4e0fba93..51ccc6ab 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -392,10 +392,20 @@ const cardAspectRatio = 4 / 3; // 卡片的高宽比 const gap = 20; // 卡片间的间隙 - const containerWidth = document.querySelector('.content').clientWidth; + const contentElement = document.querySelector('.content'); + if (!contentElement) { + console.warn('Content element not found. Skipping page size calculation.'); + return; + } + const containerWidth = contentElement.clientWidth; const columns = Math.floor(containerWidth / (cardMinWidth + gap)); - const containerHeight = window.innerHeight - document.querySelector('.header-content').offsetHeight; + const headerElement = document.querySelector('.header-content'); + if (!headerElement) { + console.warn('Header element not found. Using default header height.'); + } + const headerHeight = headerElement ? headerElement.offsetHeight : 60; // 使用默认值60px + const containerHeight = window.innerHeight - headerHeight; const cardHeight = (containerWidth / columns - gap) * cardAspectRatio; const rows = Math.floor(containerHeight / (cardHeight + gap)); From ce9912541627daf05c3132b015bf81d9db60e84b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=B0=8F=E7=9F=A2?= Date: Sun, 20 Oct 2024 16:17:05 +0800 Subject: [PATCH 04/96] Update admin-imgtc.html --- admin-imgtc.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/admin-imgtc.html b/admin-imgtc.html index 51ccc6ab..282d3473 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -278,7 +278,7 @@ 记录总数量: {{ Number }} -
+
From 36637c4fb82002ae23fe039a4bcdeffc1ad3551e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=B0=8F=E7=9F=A2?= Date: Sun, 20 Oct 2024 17:00:49 +0800 Subject: [PATCH 05/96] Update admin-imgtc.html --- admin-imgtc.html | 91 +++++++++++++++++++++++++++--------------------- 1 file changed, 52 insertions(+), 39 deletions(-) diff --git a/admin-imgtc.html b/admin-imgtc.html index 282d3473..6ec67528 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -20,8 +20,8 @@ .header-content { position: fixed; top: 0; - left: 5%; - right: 5%; + left: 1%; + right: 1%; z-index: 999; height: 60px; display: flex; @@ -90,6 +90,14 @@ color: #B39DDB; /* 使用柔和的淡紫色 */ } + .fade-enter-active, .fade-leave-active { + transition: opacity 0.3s ease; + } + + .fade-enter, .fade-leave-to { + opacity: 0; + } + .header-content .actions { display: flex; align-items: center; @@ -147,7 +155,6 @@ } .main-container { - margin-top: 80px; display: flex; flex-direction: column; padding: 20px; @@ -164,7 +171,7 @@ .el-card { width: 100%; - aspect-ratio: 3 / 4; + aspect-ratio: 4 / 3; background: rgba(255, 255, 255, 0.6); border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); @@ -248,6 +255,15 @@ } @media (max-width: 768px) { + .content { + grid-template-columns: 1fr; /* 单列布局 */ + gap: 10px; + } + + .search-card, .stats { + display: none; + } + .header-content .actions { display: none; flex-direction: column; @@ -272,34 +288,36 @@
Dashboard -
+
- + 记录总数量: {{ Number }} -
- - - - - - - 按时间倒序 - 按名称升序 - - - - - - - - - - - - -
+ +
+ + + + + + + 按时间倒序 + 按名称升序 + + + + + + + + + + + + +
+
@@ -388,28 +406,22 @@ location.reload(); }, calculatePageSize() { + const minPageSize = 15; // 最少卡片数量 const cardMinWidth = 200; // 卡片最小宽度 - const cardAspectRatio = 4 / 3; // 卡片的高宽比 + const cardAspectRatio = 3 / 4; // 卡片的高宽比 const gap = 20; // 卡片间的间隙 const contentElement = document.querySelector('.content'); - if (!contentElement) { - console.warn('Content element not found. Skipping page size calculation.'); - return; - } - const containerWidth = contentElement.clientWidth; + const containerWidth = contentElement ? contentElement.clientWidth : 80; const columns = Math.floor(containerWidth / (cardMinWidth + gap)); const headerElement = document.querySelector('.header-content'); - if (!headerElement) { - console.warn('Header element not found. Using default header height.'); - } const headerHeight = headerElement ? headerElement.offsetHeight : 60; // 使用默认值60px const containerHeight = window.innerHeight - headerHeight; const cardHeight = (containerWidth / columns - gap) * cardAspectRatio; const rows = Math.floor(containerHeight / (cardHeight + gap)); - this.pageSize = columns * rows; + this.pageSize = Math.max(calculatedPageSize, minPageSize); }, toggleMenu() { this.isMenuOpen = !this.isMenuOpen; @@ -419,6 +431,7 @@ if (this.windowWidth > 768) { this.isMenuOpen = false; } + this.calculatePageSize(); }, handleDelete(index, key) { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { @@ -501,7 +514,7 @@ }, mounted() { window.addEventListener('resize', this.calculatePageSize); - this.calculatePageSize(); + this.updateWindowWidth(); fetch("./api/manage/check", { method: 'GET', credentials: 'include' }) .then(response => response.text()) .then(result => result === "true" ? this.showLogoutButton = true : window.location.href = "./api/manage/login") From afa2cd7752213b89d7039ebe82ebe2fb2ce9bdce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=B0=8F=E7=9F=A2?= Date: Sun, 20 Oct 2024 17:02:45 +0800 Subject: [PATCH 06/96] Update admin-imgtc.html --- admin-imgtc.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/admin-imgtc.html b/admin-imgtc.html index 6ec67528..27189032 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -421,7 +421,7 @@ const cardHeight = (containerWidth / columns - gap) * cardAspectRatio; const rows = Math.floor(containerHeight / (cardHeight + gap)); - this.pageSize = Math.max(calculatedPageSize, minPageSize); + this.pageSize = Math.max(rows * columns, minPageSize); }, toggleMenu() { this.isMenuOpen = !this.isMenuOpen; From f606e98d7a66f2c888137379ca2ffdc68683daa3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=B0=8F=E7=9F=A2?= Date: Sun, 20 Oct 2024 17:15:54 +0800 Subject: [PATCH 07/96] Update admin-imgtc.html --- admin-imgtc.html | 53 ++++++++++++++++++++++-------------------------- 1 file changed, 24 insertions(+), 29 deletions(-) diff --git a/admin-imgtc.html b/admin-imgtc.html index 27189032..a0cec7c7 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -186,8 +186,6 @@ } .el-image { - width: 100%; - height: 200px; object-fit: cover; transition: opacity 0.3s ease; } @@ -294,31 +292,28 @@ 记录总数量: {{ Number }} - -
- - - - - - - 按时间倒序 - 按名称升序 - - - - - - - - - - - - -
- - +
+ + + + + + + 按时间倒序 + 按名称升序 + + + + + + + + + + + + +
@@ -406,8 +401,8 @@ location.reload(); }, calculatePageSize() { - const minPageSize = 15; // 最少卡片数量 - const cardMinWidth = 200; // 卡片最小宽度 + const minPageSize = 8; // 最少卡片数量 + const cardMinWidth = 300; // 卡片最小宽度 const cardAspectRatio = 3 / 4; // 卡片的高宽比 const gap = 20; // 卡片间的间隙 From 3abb3dc86d8b42dd3a95b84a5f5397922e53d806 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=B0=8F=E7=9F=A2?= Date: Sun, 20 Oct 2024 17:17:20 +0800 Subject: [PATCH 08/96] Update admin-imgtc.html --- admin-imgtc.html | 1 - 1 file changed, 1 deletion(-) diff --git a/admin-imgtc.html b/admin-imgtc.html index a0cec7c7..44bbc367 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -263,7 +263,6 @@ } .header-content .actions { - display: none; flex-direction: column; background: rgba(255, 255, 255, 0.9); position: absolute; From 8f6697978d09a0a40f5876502f2d07439af3aabc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=B0=8F=E7=9F=A2?= Date: Sun, 20 Oct 2024 17:36:09 +0800 Subject: [PATCH 09/96] Update admin-imgtc.html --- admin-imgtc.html | 56 ++++++++++++++++++++++++++---------------------- 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/admin-imgtc.html b/admin-imgtc.html index 44bbc367..7a55d65c 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -179,10 +179,11 @@ position: relative; object-fit: cover; transition: transform 0.3s ease; + border: none; } .el-card:hover { - transform: scale(1.025); + transform: scale(1.02); } .el-image { @@ -291,29 +292,32 @@ 记录总数量: {{ Number }} -
- - - - - - - 按时间倒序 - 按名称升序 - - - - - - - - - - - - + +
+ + + + + + + 按时间倒序 + 按名称升序 + + + + + + + + + + + + +
-
+ +
@@ -400,13 +404,13 @@ location.reload(); }, calculatePageSize() { - const minPageSize = 8; // 最少卡片数量 - const cardMinWidth = 300; // 卡片最小宽度 + const minPageSize = 16; // 最少卡片数量 + const cardMinWidth = 240; // 卡片最小宽度 const cardAspectRatio = 3 / 4; // 卡片的高宽比 const gap = 20; // 卡片间的间隙 const contentElement = document.querySelector('.content'); - const containerWidth = contentElement ? contentElement.clientWidth : 80; + const containerWidth = contentElement ? contentElement.clientWidth : 800; const columns = Math.floor(containerWidth / (cardMinWidth + gap)); const headerElement = document.querySelector('.header-content'); From 4e659dd5fdd51ee228b6c1c94ffd6f837f472307 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=B0=8F=E7=9F=A2?= Date: Sun, 20 Oct 2024 17:45:33 +0800 Subject: [PATCH 10/96] Update admin-imgtc.html --- admin-imgtc.html | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/admin-imgtc.html b/admin-imgtc.html index 7a55d65c..e0d4fc95 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -259,11 +259,15 @@ gap: 10px; } - .search-card, .stats { + .search-card{ display: none; } - .header-content .actions { + .header-content .actions:not(.menu-open) { + display: none; + } + + .header-content .actions.menu-open { flex-direction: column; background: rgba(255, 255, 255, 0.9); position: absolute; @@ -289,11 +293,11 @@
- + 记录总数量: {{ Number }} -
+
@@ -314,10 +318,12 @@ + + +
- - +
From 7e98b1e60befdaf80ba7ed758bcbdd1c3142d34f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=B0=8F=E7=9F=A2?= Date: Sun, 20 Oct 2024 18:08:49 +0800 Subject: [PATCH 11/96] Update admin-imgtc.html --- admin-imgtc.html | 110 ++++++++++++++++------------------------------- 1 file changed, 36 insertions(+), 74 deletions(-) diff --git a/admin-imgtc.html b/admin-imgtc.html index e0d4fc95..c03273bf 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -2,7 +2,7 @@ - + ImgTC | Admin @@ -90,27 +90,12 @@ color: #B39DDB; /* 使用柔和的淡紫色 */ } - .fade-enter-active, .fade-leave-active { - transition: opacity 0.3s ease; - } - - .fade-enter, .fade-leave-to { - opacity: 0; - } - .header-content .actions { display: flex; align-items: center; gap: 15px; } - .header-content .menu-icon { - display: none; - font-size: 1.5em; - cursor: pointer; - color: #333; - } - .header-content .actions i { font-size: 1.5em; cursor: pointer; @@ -187,7 +172,9 @@ } .el-image { - object-fit: cover; + width: 100%; + height: 100%; + object-fit: contain; transition: opacity 0.3s ease; } @@ -253,33 +240,20 @@ z-index: 10; } + /* 适配移动端 */ @media (max-width: 768px) { .content { grid-template-columns: 1fr; /* 单列布局 */ gap: 10px; } - .search-card{ - display: none; - } - - .header-content .actions:not(.menu-open) { - display: none; + .el-card{ + aspect-ratio: unset; /* 取消卡片高宽比， */ + height: auto; } - .header-content .actions.menu-open { - flex-direction: column; - background: rgba(255, 255, 255, 0.9); - position: absolute; - top: 60px; - right: 20px; - padding: 10px; - border-radius: 5px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - } - - .header-content .menu-icon { - display: block; + .search-card{ + display: none; /* 隐藏搜索框 */ } } @@ -291,45 +265,40 @@
Dashboard
- +
- 记录总数量: {{ Number }} + 记录总数量: {{ Number }} - -
- - - - - - - 按时间倒序 - 按名称升序 - - - - - - - - - - - - - - - -
+
+ + + + + + + 按时间倒序 + 按名称升序 + + + + + + + + + + + +
- +