diff --git a/desktop-client/src/App.vue b/desktop-client/src/App.vue index 255bd28..df8a11a 100644 --- a/desktop-client/src/App.vue +++ b/desktop-client/src/App.vue @@ -1279,7 +1279,7 @@ select:focus { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(141, 164, 196, 0.3); border-radius: 16px; - padding: 0 12px; + padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; @@ -1290,11 +1290,14 @@ select:focus { min-width: 0; display: flex; align-items: center; - gap: 2px; + gap: 4px; overflow-x: auto; } .crumb-btn { + height: 30px; + display: inline-flex; + align-items: center; border: 0; background: transparent; color: #3f5876; @@ -1310,29 +1313,41 @@ select:focus { .tool-right { display: flex; align-items: center; - gap: 6px; + gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .search-input { - width: 260px; - height: 34px; + width: 280px; + height: 36px; border-radius: 10px; + font-size: 13px; } .solid-btn { - height: 34px; + height: 36px; + min-width: 78px; padding: 0 14px; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; } .action-btn { - height: 34px; + height: 36px; + min-width: 74px; border: 1px solid #cad8ea; border-radius: 10px; background: #fff; color: #284666; padding: 0 12px; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + white-space: nowrap; cursor: pointer; font-size: 13px; } @@ -1350,13 +1365,13 @@ select:focus { .main-grid { display: grid; grid-template-columns: 1fr 270px; - gap: 12px; + gap: 14px; min-height: 0; } .content-panel, .detail-panel { - padding: 14px; + padding: 16px; display: flex; flex-direction: column; min-height: 0; @@ -1366,7 +1381,8 @@ select:focus { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 8px; + gap: 8px; + margin-bottom: 12px; } .panel-head h3 { @@ -1377,32 +1393,37 @@ select:focus { .panel-head span { color: #60768f; font-size: 12px; + line-height: 1.4; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .icon-grid { display: grid; - gap: 10px; - grid-template-columns: repeat(auto-fill, 140px); + gap: 12px; + grid-template-columns: repeat(auto-fill, 144px); justify-content: flex-start; align-content: start; min-height: 0; overflow: auto; - padding-right: 4px; + padding: 2px 4px 2px 2px; } .file-card { border: 1px solid #d8e1ee; - border-radius: 12px; + border-radius: 14px; background: #fff; text-align: left; - padding: 12px 10px; + padding: 12px; cursor: pointer; display: flex; flex-direction: column; + align-items: flex-start; justify-content: flex-start; - gap: 4px; - width: 140px; - height: 140px; + gap: 6px; + width: 144px; + height: 144px; overflow: hidden; } @@ -1418,8 +1439,8 @@ select:focus { } .file-icon-glyph { - width: 44px; - height: 44px; + width: 48px; + height: 48px; border-radius: 10px; border: 1px solid #d7e4f8; background: #f2f7ff; @@ -1427,27 +1448,37 @@ select:focus { place-items: center; font-size: 24px; line-height: 1; - margin-bottom: 6px; + margin-bottom: 2px; } .file-name { font-size: 13px; font-weight: 600; color: #1f2b3a; + line-height: 1.35; + width: 100%; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + min-height: 34px; } .file-meta, .file-time { font-size: 11px; color: #60768f; + line-height: 1.35; + width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.file-time { + margin-top: auto; +} + .task-list { display: flex; flex-direction: column; @@ -1498,7 +1529,7 @@ select:focus { .share-list { display: flex; flex-direction: column; - gap: 8px; + gap: 10px; overflow: auto; min-height: 0; } @@ -1507,9 +1538,9 @@ select:focus { border: 1px solid #d8e1ee; border-radius: 12px; background: #fff; - padding: 10px; + padding: 12px; display: grid; - gap: 10px; + gap: 12px; grid-template-columns: 1fr auto; align-items: center; } @@ -1518,7 +1549,7 @@ select:focus { min-width: 0; display: flex; flex-direction: column; - gap: 4px; + gap: 6px; } .share-title { @@ -1548,6 +1579,7 @@ select:focus { .share-meta { font-size: 12px; color: #5a718c; + line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1556,12 +1588,14 @@ select:focus { .share-meta { display: flex; gap: 12px; + flex-wrap: wrap; + row-gap: 4px; } .share-actions { display: flex; align-items: center; - gap: 6px; + gap: 8px; } .context-mask { @@ -1573,22 +1607,24 @@ select:focus { .context-menu { position: fixed; z-index: 90; - width: 210px; + width: 224px; border: 1px solid #d1dced; - border-radius: 12px; + border-radius: 14px; background: #ffffff; box-shadow: 0 12px 24px rgba(25, 52, 86, 0.2); - padding: 6px; + padding: 8px; } .context-item { width: 100%; - height: 34px; + height: 36px; border: 0; border-radius: 8px; background: transparent; text-align: left; - padding: 0 10px; + padding: 0 12px; + display: flex; + align-items: center; font-size: 13px; color: #2a4664; cursor: pointer; @@ -1605,7 +1641,7 @@ select:focus { .context-divider { height: 1px; background: #e5edf7; - margin: 4px 6px; + margin: 6px 4px; } .detail-panel h3 { @@ -1614,17 +1650,22 @@ select:focus { } .stat-grid { - margin-top: 10px; + margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; - gap: 8px; + gap: 10px; } .stat-grid > div { border-radius: 10px; border: 1px solid #d8e1ee; background: #f7faff; - padding: 10px; + padding: 12px; + min-height: 68px; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 4px; } .stat-grid strong { @@ -1638,9 +1679,9 @@ select:focus { } .selected-info { - margin-top: 12px; + margin-top: 14px; border-top: 1px solid #dbe6f2; - padding-top: 12px; + padding-top: 14px; } .selected-info h4 { @@ -1649,13 +1690,18 @@ select:focus { } .selected-info p { - margin: 0 0 6px; + margin: 0 0 7px; font-size: 12px; + line-height: 1.45; color: #4f6984; + word-break: break-all; } .empty-tip { margin: auto; + padding: 24px 12px; + text-align: center; + line-height: 1.5; color: #5a7089; font-size: 13px; }