refactor(alpine): restructure components and remove unused utilities for better modularity and maintainability

2026-06-14 08:31:42 +08:00
@@ -1,16 +1,43 @@
 <!DOCTYPE html>
 <html
  xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = |#{page.categories.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = |#{page.categories.title} - ${site.title}|, pageType = 'categories', terminalUserName = 'admin', content = ~{::content})}"
 >
  <th:block th:fragment="content">
-    <div class="content">
-      <div class="post">
-        <h1 class="post-title">所有分类</h1>
-        <ul>
-          <li th:replace="~{modules/category-tree :: single(categories=${categories})}"></li>
-        </ul>
+    <section class="devcm-terminal-window devcm-archive-hero">
+      <div class="devcm-window-titlebar">
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
      </div>
-    </div>
+      <div class="devcm-hero">
+        <div class="devcm-hero__copy">
+          <div class="devcm-prompt-line">
+            <span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span>
+            <span th:text="#{devcm.categories.command}">archive --view categories</span>
+          </div>
+          <h1 class="devcm-hero__title" th:text="#{devcm.categories.title}">Categories</h1>
+          <p class="devcm-hero__desc" th:text="#{devcm.categories.description}">
+            Browse posts by category and explore the site structure.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section class="devcm-category-grid">
+      <a class="devcm-category-card" th:each="category : ${categories}" th:href="${category.status.permalink}">
+        <h2>
+          <i class="i-pixelarticons-folder"></i>
+          <span th:text="${category.spec.displayName}">Category</span>
+        </h2>
+        <strong
+          th:text="#{devcm.categories.articleCount(${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0})}"
+          >0 articles</strong
+        >
+        <p th:if="${not #strings.isEmpty(category.spec.description)}" th:text="${category.spec.description}">
+          Category description
+        </p>
+      </a>
+    </section>
  </th:block>
 </html>