style(desktop): improve alignment and spacing across file/share views

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;
+  width: 280px;
-  height: 34px;
+  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;
+  gap: 12px;
-  grid-template-columns: repeat(auto-fill, 140px);
+  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;
+  gap: 6px;
-  width: 140px;
+  width: 144px;
-  height: 140px;
+  height: 144px;
   overflow: hidden;
 }
 
@@ -1418,8 +1439,8 @@ select:focus {
 }
 
 .file-icon-glyph {
-  width: 44px;
+  width: 48px;
-  height: 44px;
+  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;
+  display: -webkit-box;
-  white-space: nowrap;
+  -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;
 }