优化细节✅

src/components/Archive/Archive.astro

@@ -19,8 +19,8 @@ import "./Archive.less";
 						<a href={`/article/${_.id}`}>
 							<em>{fmtTime(_.date, "MM-DD")}</em>
 							<i />
-							<span>{_.title}</span>
-							<cite>{_.tags.map((tag: string) => `#${tag}`).join(" ")}</cite>
+							<span class="vh-ellipsis">{_.title}</span>
+							<cite class="vh-ellipsis">{_.tags.map((tag: string) => `#${tag}`).join(" ")}</cite>
 						</a>
 					))}
 				</div>

src/components/Archive/Archive.less

@@ -110,11 +110,8 @@ section.vh-archive-main {
 
         &>span {
           flex: 1;
-          white-space: nowrap;
-          overflow: hidden;
           color: var(--vh-font-66);
           font-weight: 500;
-          text-overflow: ellipsis;
           transition: all .18s;
         }
 
@@ -125,9 +122,6 @@ section.vh-archive-main {
           color: var(--vh-font-66);
           font-weight: 400;
           font-style: normal;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
         }
       }
     }

src/components/Search/Search.less

@@ -38,7 +38,6 @@
     max-height: 88vh;
     border-radius: 1rem;
     background-color: var(--vh-white-color);
-    
     transform: translateY(-1rem);
     transition: transform 0.18s;
     overflow: hidden;
@@ -100,6 +99,7 @@
       }
 
       &>.vh-search-item {
+        position: relative;
         box-sizing: border-box;
         padding: 0.75rem;
         display: flex;
@@ -110,19 +110,30 @@
 
         &:hover {
           &::before {
+            opacity: 1;
             transform: scale(1);
           }
         }
 
+        &:before {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: .5rem;
+          background-color: var(--vh-font-16);
+          opacity: 0;
+          transition: transform .16s ease-in-out, opacity .16s ease-in-out;
+        }
+
         &>span {
           width: 100%;
           font-size: 1.125rem;
           font-weight: 600;
           color: var(--vh-font-color);
           line-height: 1.16;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
         }
 
         &>p {
@@ -131,15 +142,9 @@
           color: var(--vh-font-56);
           font-weight: 400;
           line-height: 1.25rem;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 3;
-          text-overflow: ellipsis;
-          word-break: break-all;
-          overflow: hidden;
 
           &>span {
-            color: #60a5fa;
+            color: var(--vh-main-color);
           }
         }
       }