From 2b25f18137e0561255a591b6f8e911f9d0e701e8 Mon Sep 17 00:00:00 2001 From: yuyx <237899745@qq.com> Date: Sun, 30 Nov 2025 12:57:35 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E9=87=8D=E6=96=B0=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E5=88=86=E4=BA=AB=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加搜索/筛选功能（关键字、类型、状态、排序） - 重新设计卡片视图，展示更多信息（状态、类型、加密、存储来源等） - 添加filteredShares计算属性实现筛选和排序 - 添加辅助方法：getShareTypeLabel、getShareStatus、getShareProtection等 - 优化分享卡片样式，支持深色/浅色主题 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- frontend/app.html | 205 +++++++++++++++++++++++++++++++++++++++++----- frontend/app.js | 99 ++++++++++++++++++++++ 2 files changed, 284 insertions(+), 20 deletions(-) diff --git a/frontend/app.html b/frontend/app.html index 0582ae5..650b1f8 100644 --- a/frontend/app.html +++ b/frontend/app.html @@ -1028,6 +1028,109 @@ ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); } + + /* 分享卡片布局 */ + .share-card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 14px; + } + .share-card { + background: var(--bg-card); + border: 1px solid var(--glass-border); + border-radius: 12px; + padding: 14px; + box-shadow: 0 10px 30px rgba(0,0,0,0.12); + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; + } + .share-card:hover { + transform: translateY(-2px); + border-color: var(--glass-border-hover); + box-shadow: 0 14px 36px rgba(0,0,0,0.18); + } + .share-card__title { + display: flex; + align-items: center; + gap: 10px; + font-weight: 600; + font-size: 15px; + color: var(--text-primary); + margin-bottom: 8px; + word-break: break-all; + } + .share-card__chips { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-bottom: 10px; + } + .share-chip { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + border-radius: 999px; + font-size: 12px; + border: 1px solid var(--glass-border); + background: rgba(255,255,255,0.04); + color: var(--text-secondary); + } + .share-chip.success { color: #22c55e; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); } + .share-chip.warn { color: #f59e0b; background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.25); } + .share-chip.danger { color: #ef4444; background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.25); } + .share-chip.info { color: var(--accent-1); background: rgba(102,126,234,0.14); border-color: rgba(102,126,234,0.25); } + .share-card__meta { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: 10px; + font-size: 12px; + color: var(--text-secondary); + margin-bottom: 12px; + } + .share-card__meta span { + display: inline-flex; + align-items: center; + gap: 6px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .share-card__actions { + display: flex; + gap: 8px; + flex-wrap: wrap; + } + .share-card__actions .btn { + padding: 8px 12px; + font-size: 13px; + } + .share-toolbar { + display: flex; + gap: 10px; + flex-wrap: wrap; + align-items: center; + } + .share-toolbar input, + .share-toolbar select { + background: rgba(255,255,255,0.05); + border: 1px solid var(--glass-border); + border-radius: 8px; + padding: 8px 12px; + color: var(--text-primary); + } + .share-toolbar input::placeholder { + color: var(--text-secondary); + } + .share-toolbar select { + min-width: 140px; + cursor: pointer; + } + body.light-theme .share-card { + box-shadow: 0 10px 30px rgba(0,0,0,0.08); + } + body.light-theme .share-card:hover { + box-shadow: 0 14px 36px rgba(0,0,0,0.12); + } @@ -1919,46 +2022,108 @@ - +
-
-

我的分享

-
+
+

+ 我的分享 +

+
+
+ + +
还没有创建任何分享
+
+ 没有符合筛选条件的分享，试试清空搜索/筛选。 +
-
-
-
- +