优化性能、逻辑、冗余代码【2.0 版本】✅

2025-03-20 19:23:03 +08:00
parent fae69d44fd
commit d1b781ed6f
66 changed files with 287 additions and 205 deletions
@@ -0,0 +1,30 @@
+---
+import { fmtTime } from "@/utils/index";
+const { articleList } = Astro.props;
+// 文章页面样式
+import "./Archive.less";
+---
+
+<section class="vh-archive-main vh-animation vh-animation-init">
+	<div class="archive-list">
+		{
+			articleList.map((i: any) => (
+				<div class="archive-list-item">
+					<p class="title">
+						<em>{i.name}</em>
+						<i />
+						<span>{i.data.length}篇文章</span>
+					</p>
+					{i.data.map((_: any) => (
+						<a href={`/article/${_.id}`}>
+							<em>{fmtTime(_.date, "MM-DD")}</em>
+							<i />
+							<span>{_.title}</span>
+							<cite>{_.tags.map((tag: string) => `#${tag}`).join(" ")}</cite>
+						</a>
+					))}
+				</div>
+			))
+		}
+	</div>
+</section>
@@ -0,0 +1,201 @@
+section.vh-container {
+  &>section.vh-archive-main {
+    flex: 1;
+    padding: 2rem 1rem;
+    border-radius: 1rem;
+    background-color: #fff;
+    overflow: hidden;
+
+    &>.archive-list {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+
+      &>.archive-list-item {
+        display: flex;
+        flex-direction: column;
+
+        &>p,
+        a {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          height: 2.5rem;
+          border-radius: 1rem;
+          font-size: 1rem;
+          transition: background .16s;
+
+
+          &:not(.title) {
+
+            &:hover {
+              background-color: var(--vh-color-default-88);
+
+              &>i {
+                &::before {
+                  height: 50.66%;
+                }
+              }
+
+              &>span {
+                padding-left: 0.28rem;
+              }
+            }
+
+            &>em {
+              font-size: 0.875rem;
+              font-weight: 500;
+              color: #00000080;
+            }
+
+            &>i {
+
+              &::before {
+                width: 0.25rem;
+                height: 0.25rem;
+                border: none;
+                border-radius: 0.25rem;
+                background-color: #4E667F;
+              }
+
+              &::after {
+                content: "";
+                position: absolute;
+                width: 0.125rem;
+                height: 1rem;
+                left: calc(50% - 0.0625rem);
+                transform: translateY(-50%);
+                border-left: 2px dashed rgba(0, 0, 0, .1);
+                pointer-events: none;
+              }
+            }
+
+
+            &>span {
+              font-size: 1rem;
+              color: #000000;
+              font-weight: 600;
+            }
+          }
+
+
+          &>em {
+            flex-shrink: 0;
+            width: 5.05rem;
+            height: 3.75rem;
+            font-size: 1.5rem;
+            font-weight: 600;
+            line-height: 3.75rem;
+            text-align: right;
+            font-style: normal;
+          }
+
+          &>i {
+            position: relative;
+            width: 2.5rem;
+            height: 100%;
+
+            &::before {
+              content: '';
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              display: block;
+              width: 0.36rem;
+              height: 0.36rem;
+              border: solid 0.28rem #0000006D;
+              border-radius: 50%;
+              background-color: #fff;
+              transition: all .3s;
+            }
+          }
+
+          &>span {
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            color: #0000004D;
+            font-weight: 500;
+            text-overflow: ellipsis;
+            transition: all .16s;
+          }
+
+          &>cite {
+            margin-left: auto;
+            width: 7.8rem;
+            font-size: 0.875rem;
+            color: #0000004D;
+            font-weight: 400;
+            font-style: normal;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+
+
+@media screen and (max-width: 1198px) {
+  section.vh-container {
+    &>section.vh-archive-main {
+      &>.archive-list {
+        &>.archive-list-item {
+
+          &>p,
+          a {
+            &>cite {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 888px) {
+  section.vh-container {
+    &>section.vh-archive-main {
+      padding: 0;
+      background-color: transparent;
+
+      &>.archive-list {
+        &>.archive-list-item {
+
+          &>p,
+          a {
+
+            &:not(.title) {
+              &>em {
+                font-size: 0.8rem;
+              }
+
+              &>span {
+                font-size: 0.88rem;
+              }
+            }
+
+            &>em {
+              width: 3rem;
+              font-size: 1.2rem;
+            }
+
+            &>i {
+              width: 1.8rem;
+            }
+
+            &>span {
+              font-size: 0.8rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}