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

2026-06-14 08:31:42 +08:00
@@ -1,43 +1,46 @@
 <!DOCTYPE html>
 <html
  xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = |#{page.links.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = |#{page.links.title} - ${site.title}|, pageType = 'links', terminalUserName = 'admin', content = ~{::content})}"
 >
  <th:block th:fragment="content">
-    <script th:src="@{/assets/libs/pixelit.js}"></script>
-    <div>
-      <section class="">
-        <div class="">
-          <div class="mb-6" th:each="group : ${groups}">
-            <div class="">
-              <h2
-                class="post-title"
-                th:text="${!#strings.isEmpty(group.spec.displayName) ? group.spec.displayName:'友情链接'}"
-              >
-                链接分组
-              </h2>
-            </div>
-            <div class="">
-              <a th:each="link : ${group.links}" th:href="${link.spec.url}" target="_blank" class="mb-2 block">
-                <div class="flex bg-[#a9c1e2] dark:bg-[#3b5070] p-1">
-                  <div class="">
-                    <img class="w-16" src="sky.jpg" th:src="${link.spec.logo}" id="pixelitimg" th:alt="${link.spec.displayName}">
-                  </div>
-                  <div class="ml-4 flex flex-col justify-around">
-                      <div class="m-0 text-[#003e8a] dark:text-[#6ca4f8]"><span th:text="${link.spec.displayName}"></span><span th:text="| (${link.spec.url})|"></span></div>
-                      <div class="m-0 text-[#3e3e3e] dark:text-[#8b949e]" th:text="${link.spec.description}"></div>
-                  </div>
-                </div>
-              </a>
-            </div>
+    <section class="devcm-editor-window">
+      <div class="devcm-editor-tabs">
+        <div class="devcm-editor-tab devcm-editor-tab--active">
+          <span>links.md</span>
+          <a
+            class="devcm-editor-tab__close"
+            href="/"
+            th:aria-label="#{devcm.action.closeLinksTab}"
+            th:title="#{devcm.action.closeLinksTab}"
+            >×</a
+          >
+        </div>
+      </div>
+      <div class="devcm-editor-body">
+        <div class="devcm-link-group" th:each="group : ${groups}">
+          <h2
+            class="devcm-page-title"
+            th:text="${!#strings.isEmpty(group.spec.displayName) ? group.spec.displayName : #messages.msg('devcm.links.defaultGroup')}"
+          >
+            Links
+          </h2>
+          <div class="devcm-link-grid">
+            <a class="devcm-link-card" th:each="link : ${group.links}" th:href="${link.spec.url}" target="_blank">
+              <img
+                th:if="${not #strings.isEmpty(link.spec.logo)}"
+                th:src="${link.spec.logo}"
+                th:alt="${link.spec.displayName}"
+              />
+              <span class="devcm-link-card__body">
+                <strong th:text="${link.spec.displayName}">Link</strong>
+                <small th:text="${link.spec.url}">https://example.com</small>
+                <span th:text="${link.spec.description}">description</span>
+              </span>
+            </a>
          </div>
        </div>
-      </section>
-      <script>
-        //create object
-        const px = new pixelit();
-        px.draw().pixelate();
-      </script>
-    </div>
+      </div>
+    </section>
  </th:block>
 </html>