优化文章列表卡片

src/Masuit.MyBlogs.Core/Masuit.MyBlogs.Core.csproj

@@ -54,9 +54,9 @@
         <PackageReference Include="Mammoth.Core" Version="1.0.1" />
         <PackageReference Include="Markdig" Version="0.42.0" />
         <PackageReference Include="MaxMind.GeoIP2" Version="5.3.0" />
-        <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="9.0.9" />
-        <PackageReference Include="Microsoft.EntityFrameworkCore.Proxies" Version="9.0.9" />
-        <PackageReference Include="Microsoft.Extensions.Http.Polly" Version="9.0.9" />
+        <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="9.0.10" />
+        <PackageReference Include="Microsoft.EntityFrameworkCore.Proxies" Version="9.0.10" />
+        <PackageReference Include="Microsoft.Extensions.Http.Polly" Version="9.0.10" />
         <PackageReference Include="Microsoft.NETCore.Platforms" Version="7.0.4" />
         <PackageReference Include="MiniProfiler.AspNetCore.Mvc" Version="4.5.4" />
         <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
@@ -66,7 +66,7 @@
         <PackageReference Include="SixLabors.ImageSharp.Web" Version="3.2.0" />
         <PackageReference Include="System.Linq.Dynamic.Core" Version="1.6.9" />
         <PackageReference Include="System.Net.Http" Version="4.3.4" />
-        <PackageReference Include="System.Text.Encodings.Web" Version="9.0.9" />
+        <PackageReference Include="System.Text.Encodings.Web" Version="9.0.10" />
         <PackageReference Include="System.Text.RegularExpressions" Version="4.3.1" />
         <PackageReference Include="TimeZoneConverter" Version="7.0.0" />
         <PackageReference Include="WilderMinds.RssSyndication" Version="1.7.1" />

src/Masuit.MyBlogs.Core/Views/Shared/_ArticleListItem.cshtml

@@ -44,28 +44,31 @@
       </span>
     </div>
     <div class="summary"> @Html.Raw(await Model.Content.GetSummary(150, 50)) </div>
-    <div class="tags">
-      @if (!string.IsNullOrEmpty(Model.Label)) {
-        var tags = Model.Label.Split(',', '，');
-        @for (var i = 0; i < tags.Length; i++) {
-          <span class="tag">
-            <a asp-action="Tag" asp-controller="Home" asp-route-tag="@tags[i]">
-              @tags[i]
-            </a>
-          </span>
+    <div class="bottom-row">
+      <div class="tags">
+        @if (!string.IsNullOrEmpty(Model.Label)) {
+          var tags = Model.Label.Split(',', '，');
+          @foreach (var t in tags) {
+            <span class="tag">
+              <a asp-action="Tag" asp-controller="Home" asp-route-tag="@t">
+                @t
+              </a>
+            </span>
+          }
         }
-      }
-    </div>
-    <div class="stat-row">
-      <span>
-        <span class="icon">💬</span> @Model.CommentCount
-      </span>
-      <span>
-        <span class="icon">👍</span> @Model.VoteUpCount
-      </span>
-      <span>
-        <span class="icon">👁️</span> @online
-      </span>
+      </div>
+      <div class="stat-row">
+        <span>
+          <span class="icon">👁️</span>
+          @Model.TotalViewCount
+        </span>
+        <span>
+          <span class="icon">💬</span> @Model.CommentCount
+        </span>
+        <span>
+          <span class="icon">👍</span> @Model.VoteUpCount
+        </span>
+      </div>
     </div>
   </div>
 </div>

src/Masuit.MyBlogs.Core/Views/Shared/_ArticleListItem_Admin.cshtml

@@ -44,38 +44,38 @@
         }
       </span>
     </div>
-    <div class="summary"> @Html.Raw(await Model.Content.GetSummary(150, 50)) </div>
-    @if (!string.IsNullOrEmpty(Model.Label)) {
+    <div class="summary"> @Html.Raw(await Model.Content.GetSummary(250, 50)) </div>
+    <div class="bottom-row">
       <div class="tags">
-        @{
+        @if (!string.IsNullOrEmpty(Model.Label)) {
           var tags = Model.Label.Split(',', '，');
-          @for (var i = 0; i < tags.Length; i++) {
+          @foreach (var t in tags) {
             <span class="tag">
-              <a asp-action="Tag" asp-controller="Home" asp-route-tag="@tags[i]">
-                @tags[i]
+              <a asp-action="Tag" asp-controller="Home" asp-route-tag="@t">
+                @t
               </a>
             </span>
           }
         }
       </div>
-    }
-    <div class="stat-row">
-      <span>
-        <span class="icon">👁️</span>
-        @Model.TotalViewCount
-      </span>
-      <span>
-        <span class="icon">💬</span> @Model.CommentCount
-      </span>
-      <span>
-        <span class="icon">👍</span> @Model.VoteUpCount
-      </span>
-      <span>
-        <span class="icon">👁️</span> @online
-      </span>
-      <span>
-        <span class="icon">🗑️</span>@Model.Status.GetDisplay()
-      </span>
+      <div class="stat-row">
+        <span>
+          <span class="icon">👁️</span>
+          @Model.TotalViewCount
+        </span>
+        <span>
+          <span class="icon">💬</span> @Model.CommentCount
+        </span>
+        <span>
+          <span class="icon">👍</span> @Model.VoteUpCount
+        </span>
+        <span>
+          <span class="icon">👁️</span> @online
+        </span>
+        <span>
+          <span class="icon">🗑️</span>@Model.Status.GetDisplay()
+        </span>
+      </div>
     </div>
   </div>
 </div>

src/Masuit.MyBlogs.Core/wwwroot/Content/common/style.css

@@ -881,7 +881,7 @@ Custom bottom spacer
 .article-content,
 .ad-content {
   flex: 1 1 auto;
-  padding: 24px 32px;
+  padding: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -923,7 +923,7 @@ Custom bottom spacer
   gap: 16px;
   font-size: 0.9rem;
   color: #777;
-  margin-bottom: 10px;
+  /* margin-bottom: 10px; */
 }
 
 .meta-row .author {
@@ -953,11 +953,18 @@ Custom bottom spacer
   overflow: hidden;
 }
 
+.bottom-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
 .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-bottom: 10px;
+  /* margin-bottom: 10px; */
 }
 
 .tag {
@@ -973,7 +980,7 @@ Custom bottom spacer
   gap: 18px;
   font-size: 0.97rem;
   align-items: center;
-  margin-top: auto;
+  /* margin-top: auto; */
   color: #888;
 }