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

templates/modules/activity-bar.html

@@ -0,0 +1,213 @@
+<aside class="devcm-activity" th:fragment="activity-bar (pageType)" th:aria-label="#{devcm.activity.aria}">
+  <span class="devcm-activity__icon-bank" aria-hidden="true">
+    <i class="i-pixelarticons-folder"></i>
+    <i class="i-pixelarticons-search"></i>
+    <i class="i-pixelarticons-archive"></i>
+    <i class="i-pixelarticons-script-text"></i>
+    <i class="i-pixelarticons-label"></i>
+    <i class="i-pixelarticons-user"></i>
+    <i class="i-radix-icons-gear"></i>
+    <i class="i-pixelarticons-git-branch"></i>
+    <i class="i-pixelarticons-git-commit"></i>
+    <i class="i-pixelarticons-git-merge"></i>
+    <i class="i-pixelarticons-git-pull-request"></i>
+    <i class="i-pixelarticons-github"></i>
+  </span>
+
+  <th:block th:with="items=${theme.config.activity.activity_items}">
+    <div class="devcm-activity__group devcm-activity__group--up">
+      <th:block th:if="${items != null and !#lists.isEmpty(items)}">
+        <th:block
+          th:each="item : ${items}"
+          th:with="placement=${#strings.isEmpty(item.position) ? 'up' : item.position},
+            itemType=${!#strings.isEmpty(item.type) ? item.type : (!#strings.isEmpty(item.key) ? item.key : 'custom')},
+            entryAction=${itemType == 'search' or item.action == 'search' ? 'search' : 'link'},
+            entryHref=${entryAction == 'search' ? '#' : (!#strings.isEmpty(item.url) ? item.url : (!#strings.isEmpty(item.href) ? item.href : '#'))},
+            entryLabel=${!#strings.isEmpty(item.label) ? item.label : (!#strings.isEmpty(item.labelKey) ? #messages.msg(item.labelKey) : #messages.msg('devcm.activity.link'))}"
+        >
+          <a
+            class="devcm-activity__button"
+            th:if="${placement != 'down' and itemType != 'login' and itemType != 'git' and (item.enabled == null or item.enabled == true or item.enabled == 'true') and (entryAction != 'search' or pluginFinder.available('PluginSearchWidget'))}"
+            th:classappend="${(!#strings.isEmpty(item.activeTypes) and #strings.contains(',' + item.activeTypes + ',', ',' + pageType + ',')) or (itemType == 'home' and pageType == 'home') or (itemType == 'archive' and (pageType == 'archive' or pageType == 'post')) or (itemType == 'categories' and (pageType == 'categories' or pageType == 'category')) or (itemType == 'tags' and (pageType == 'tags' or pageType == 'tag'))} ? ' devcm-activity__button--active' : ''"
+            th:href="${entryHref}"
+            th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
+            th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
+            th:title="${entryLabel}"
+            th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
+          >
+            <i th:class="|i-pixelarticons-${!#strings.isEmpty(item.icon) ? item.icon : 'file'}|"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAnonymous()"
+            th:if="${placement != 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            th:href="${entryHref}"
+            th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
+            th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
+            th:title="${entryLabel}"
+            th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
+          >
+            <i class="i-pixelarticons-user"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAuthenticated()"
+            th:if="${placement != 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            href="/console"
+            th:title="#{devcm.activity.console}"
+            th:attr="data-label=#{devcm.activity.console},aria-label=#{devcm.activity.console},data-devcm-action='link'"
+          >
+            <i class="i-radix-icons-gear"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAuthenticated()"
+            th:if="${placement != 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            href="/logout"
+            th:title="#{devcm.activity.logout}"
+            th:attr="data-label=#{devcm.activity.logout},aria-label=#{devcm.activity.logout},data-devcm-action='link'"
+          >
+            <i class="i-pixelarticons-user"></i>
+          </a>
+        </th:block>
+      </th:block>
+
+      <th:block th:if="${items == null or #lists.isEmpty(items)}">
+        <a
+          class="devcm-activity__button"
+          th:classappend="${pageType == 'home'} ? ' devcm-activity__button--active' : ''"
+          href="/"
+          th:title="#{devcm.activity.explorer}"
+          th:attr="data-label=#{devcm.activity.explorer},aria-label=#{devcm.activity.explorer}"
+        >
+          <i class="i-pixelarticons-folder"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          th:if="${pluginFinder.available('PluginSearchWidget')}"
+          href="#"
+          data-devcm-action="search"
+          th:title="#{devcm.activity.search}"
+          th:attr="data-label=#{devcm.activity.search},aria-label=#{devcm.activity.search}"
+        >
+          <i class="i-pixelarticons-search"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          th:classappend="${pageType == 'archive' or pageType == 'post'} ? ' devcm-activity__button--active' : ''"
+          href="/archives"
+          th:title="#{devcm.activity.archive}"
+          th:attr="data-label=#{devcm.activity.archive},aria-label=#{devcm.activity.archive}"
+        >
+          <i class="i-pixelarticons-archive"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          th:classappend="${pageType == 'categories' or pageType == 'category'} ? ' devcm-activity__button--active' : ''"
+          href="/categories"
+          th:title="#{devcm.activity.categories}"
+          th:attr="data-label=#{devcm.activity.categories},aria-label=#{devcm.activity.categories}"
+        >
+          <i class="i-pixelarticons-script-text"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          th:classappend="${pageType == 'tags' or pageType == 'tag'} ? ' devcm-activity__button--active' : ''"
+          href="/tags"
+          th:title="#{devcm.activity.tags}"
+          th:attr="data-label=#{devcm.activity.tags},aria-label=#{devcm.activity.tags}"
+        >
+          <i class="i-pixelarticons-label"></i>
+        </a>
+      </th:block>
+    </div>
+
+    <div class="devcm-activity__group devcm-activity__group--down">
+      <th:block th:if="${items != null and !#lists.isEmpty(items)}">
+        <th:block
+          th:each="item : ${items}"
+          th:with="placement=${#strings.isEmpty(item.position) ? 'up' : item.position},
+            itemType=${!#strings.isEmpty(item.type) ? item.type : (!#strings.isEmpty(item.key) ? item.key : 'custom')},
+            entryAction=${itemType == 'search' or item.action == 'search' ? 'search' : 'link'},
+            entryHref=${entryAction == 'search' ? '#' : (!#strings.isEmpty(item.url) ? item.url : (!#strings.isEmpty(item.href) ? item.href : '#'))},
+            entryLabel=${!#strings.isEmpty(item.label) ? item.label : (!#strings.isEmpty(item.labelKey) ? #messages.msg(item.labelKey) : #messages.msg('devcm.activity.link'))}"
+        >
+          <a
+            class="devcm-activity__button"
+            th:if="${placement == 'down' and itemType != 'login' and itemType != 'git' and (item.enabled == null or item.enabled == true or item.enabled == 'true') and (entryAction != 'search' or pluginFinder.available('PluginSearchWidget'))}"
+            th:classappend="${(!#strings.isEmpty(item.activeTypes) and #strings.contains(',' + item.activeTypes + ',', ',' + pageType + ',')) or (itemType == 'home' and pageType == 'home') or (itemType == 'archive' and (pageType == 'archive' or pageType == 'post')) or (itemType == 'categories' and (pageType == 'categories' or pageType == 'category')) or (itemType == 'tags' and (pageType == 'tags' or pageType == 'tag'))} ? ' devcm-activity__button--active' : ''"
+            th:href="${entryHref}"
+            th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
+            th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
+            th:title="${entryLabel}"
+            th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
+          >
+            <i th:class="|i-pixelarticons-${!#strings.isEmpty(item.icon) ? item.icon : 'file'}|"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAnonymous()"
+            th:if="${placement == 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            th:href="${entryHref}"
+            th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
+            th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
+            th:title="${entryLabel}"
+            th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
+          >
+            <i class="i-pixelarticons-user"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAuthenticated()"
+            th:if="${placement == 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            href="/console"
+            th:title="#{devcm.activity.console}"
+            th:attr="data-label=#{devcm.activity.console},aria-label=#{devcm.activity.console},data-devcm-action='link'"
+          >
+            <i class="i-radix-icons-gear"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAuthenticated()"
+            th:if="${placement == 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            href="/logout"
+            th:title="#{devcm.activity.logout}"
+            th:attr="data-label=#{devcm.activity.logout},aria-label=#{devcm.activity.logout},data-devcm-action='link'"
+          >
+            <i class="i-pixelarticons-user"></i>
+          </a>
+        </th:block>
+      </th:block>
+
+      <th:block th:if="${items == null or #lists.isEmpty(items)}">
+        <a
+          class="devcm-activity__button"
+          sec:authorize="isAnonymous()"
+          href="/console"
+          th:title="#{devcm.activity.login}"
+          th:attr="data-label=#{devcm.activity.login},aria-label=#{devcm.activity.login}"
+        >
+          <i class="i-pixelarticons-user"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          sec:authorize="isAuthenticated()"
+          href="/console"
+          th:title="#{devcm.activity.console}"
+          th:attr="data-label=#{devcm.activity.console},aria-label=#{devcm.activity.console}"
+        >
+          <i class="i-radix-icons-gear"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          sec:authorize="isAuthenticated()"
+          href="/logout"
+          th:title="#{devcm.activity.logout}"
+          th:attr="data-label=#{devcm.activity.logout},aria-label=#{devcm.activity.logout}"
+        >
+          <i class="i-pixelarticons-user"></i>
+        </a>
+      </th:block>
+    </div>
+  </th:block>
+</aside>

templates/modules/category-tree.html

@@ -1,10 +1,33 @@
-<ul th:fragment="next (categories)">
-  <li th:fragment="single (categories)" th:each="category : ${categories}">
-    <a th:href="@{${category.status.permalink}}">
-      <span th:text="${category.spec.displayName}+' ('+${category.status.visiblePostCount?:0}+' 篇文章)'"> </span>
-    </a>
-    <th:block th:if="${not #lists.isEmpty(category.children)}">
+<ul th:fragment="next (categories)" class="devcm-tree__nested">
+  <li th:fragment="single (categories)" th:each="category : ${categories}" class="devcm-tree__node">
+    <details class="devcm-tree-folder" open th:if="${not #lists.isEmpty(category.children)}">
+      <summary class="devcm-tree__item devcm-tree__item--folder">
+        <span class="devcm-tree__chev" aria-hidden="true"></span>
+        <i class="devcm-tree__icon i-pixelarticons-folder"></i>
+        <span th:text="${category.spec.displayName}">Category</span>
+        <a
+          class="devcm-tree__open"
+          th:href="@{${category.status.permalink}}"
+          th:title="#{devcm.action.open}"
+          th:aria-label="#{devcm.action.openCategory}"
+          >↗</a
+        >
+      </summary>
       <th:block th:replace="~{modules/category-tree :: next (categories=${category.children})}"></th:block>
-    </th:block>
+    </details>
+    <a
+      class="devcm-tree__item"
+      th:unless="${not #lists.isEmpty(category.children)}"
+      th:href="@{${category.status.permalink}}"
+    >
+      <span class="devcm-tree__chev" aria-hidden="true"></span>
+      <i class="devcm-tree__icon i-pixelarticons-folder"></i>
+      <span th:text="${category.spec.displayName}">Category</span>
+      <span
+        class="devcm-tree__count"
+        th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}"
+        >0</span
+      >
+    </a>
   </li>
 </ul>

templates/modules/editor-frame.html

@@ -0,0 +1,26 @@
+<th:block xmlns:th="https://www.thymeleaf.org">
+  <div class="devcm-terminal-window" th:fragment="terminal-window (content)">
+    <div class="devcm-window-titlebar">
+      <span class="devcm-window-dot"></span>
+      <span class="devcm-window-dot"></span>
+      <span class="devcm-window-dot"></span>
+    </div>
+    <th:block th:replace="${content}" />
+  </div>
+
+  <div class="devcm-editor-window" th:fragment="editor-window (tabTitle, content)">
+    <div class="devcm-editor-tabs">
+      <div class="devcm-editor-tab devcm-editor-tab--active">
+        <span th:text="${tabTitle}">_posts.md</span>
+        <a
+          class="devcm-editor-tab__close"
+          href="/"
+          th:aria-label="#{devcm.action.closeTab}"
+          th:title="#{devcm.action.closeTab}"
+          >×</a
+        >
+      </div>
+    </div>
+    <th:block th:replace="${content}" />
+  </div>
+</th:block>

templates/modules/explorer.html

@@ -0,0 +1,47 @@
+<aside class="devcm-sidebar" th:fragment="explorer (pageType)" th:aria-label="#{devcm.explorer.title}">
+  <section class="devcm-side-section">
+    <div class="devcm-section-title">
+      <span th:text="#{devcm.explorer.title}">EXPLORER</span>
+      <span aria-hidden="true">...</span>
+    </div>
+    <div class="devcm-tree" th:with="menu = ${menuFinder.getPrimary()}">
+      <details class="devcm-tree-folder" open>
+        <summary class="devcm-tree__item devcm-tree__item--folder">
+          <span class="devcm-tree__chev" aria-hidden="true"></span>
+          <i class="devcm-tree__icon i-pixelarticons-folder"></i>
+          <span th:text="#{devcm.explorer.pages}">pages</span>
+        </summary>
+        <div class="devcm-tree__nested">
+          <th:block th:if="${menu != null}" th:replace="~{modules/menu-tree :: items(items=${menu.menuItems})}" />
+        </div>
+      </details>
+    </div>
+  </section>
+
+  <section class="devcm-side-section" th:if="${categories != null}">
+    <div class="devcm-section-title">
+      <span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
+      <span aria-hidden="true">...</span>
+    </div>
+    <ul class="devcm-tree devcm-tree--list">
+      <li th:replace="~{modules/category-tree :: single(categories=${categories})}"></li>
+    </ul>
+  </section>
+
+  <section class="devcm-side-section" th:if="${tags != null}">
+    <div class="devcm-section-title">
+      <span th:text="#{devcm.explorer.tags}">TAGS CLOUD</span>
+      <span aria-hidden="true">...</span>
+    </div>
+    <div class="devcm-tag-cloud">
+      <a
+        class="devcm-tag"
+        th:each="tag : ${tags}"
+        th:href="${tag.status.permalink}"
+        th:text="'#' + ${tag.spec.displayName}"
+      >
+        #tag
+      </a>
+    </div>
+  </section>
+</aside>

templates/modules/footer.html

@@ -3,7 +3,10 @@
     <div class="copyright">
       <span>
         © <span th:text="${#dates.year(#dates.createNow())}">2024</span> Powered by
-        <a th:href="${theme.config.footer.footer_powered_link}" th:text="${theme.config.footer.footer_powered_text}"></a>
+        <a
+          th:href="${theme.config.footer.footer_powered_link}"
+          th:text="${theme.config.footer.footer_powered_text}"
+        ></a>
       </span>
     </div>
     <div class="beian">
@@ -16,7 +19,7 @@
         ></a
       ></span>
       <span th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}">
-        <img th:src="@{/assets/image/gongan.png}" style="display:inline-block; height: 1.2em;">
+        <img class="beian__icon" th:src="@{/assets/image/gongan.png}" alt="" />
         <a
           href="https://www.beian.gov.cn/"
           target="_blank"

templates/modules/header.html

@@ -1,77 +1,32 @@
-<header class="header" xmlns:th="http://www.w3.org/1999/xhtml">
-  <div th:fragment="header" th:with="menu = ${menuFinder.getPrimary()}">
-    <div class="header__inner">
-      <a class="logo" href="/" style="text-decoration: none">
-        <img class="icon" th:if="${not #strings.isEmpty(theme.config.basic.logo)}" th:src="${theme.config.basic.logo}" alt="Logo" />
-        <div class="text"  th:if="${not #strings.isEmpty(theme.config.basic.title)}" th:text="${theme.config.basic.title}"></div>
-      </a>
-      <div class="header__center" x-data="headerDividing()">
-        <div class="dividing" :class="{ 'sticky': isSticky }"></div>
-      </div>
+<header class="devcm-topbar header" th:fragment="header (pageType)" th:with="menu = ${menuFinder.getPrimary()}">
+  <div class="devcm-topbar__main header__inner">
+    <a class="devcm-brand logo" href="/" th:aria-label="#{devcm.explorer.home}">
+      <img
+        class="devcm-brand__image icon"
+        th:if="${not #strings.isEmpty(theme.config.basic.logo)}"
+        th:src="${theme.config.basic.logo}"
+        alt="Logo"
+      />
+      <span class="devcm-brand__mark" th:unless="${not #strings.isEmpty(theme.config.basic.logo)}">DEV<br />CM</span>
+      <span class="devcm-brand__name">DevCM</span>
+    </a>
+
+    <div class="devcm-prompt-stream header__center">
+      <span class="devcm-prompt-stream__name" th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span>
+      <span class="devcm-prompt-stream__line dividing" aria-hidden="true"></span>
+    </div>
+
+    <div class="devcm-topbar__actions">
       <button
         type="button"
-        class="button"
-        th:if="${pluginFinder.available('PluginSearchWidget')}"
-        onclick="SearchWidget.open()"
+        class="devcm-icon-button button"
+        x-data="themeMode()"
+        @click="handleToggleThemeMode()"
+        th:aria-label="#{devcm.action.toggleTheme}"
+        th:title="#{devcm.action.toggleTheme}"
       >
-        <th:block th:unless="${theme.config.basic.pixel_style}">
-          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
-            <path
-              fill="currentColor"
-              d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.612 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3l-1.4 1.4ZM9.5 14q1.875 0 3.188-1.313T14 9.5q0-1.875-1.313-3.188T9.5 5Q7.625 5 6.312 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14Z"
-            />
-          </svg>
-        </th:block>
-        <th:block th:if="${theme.config.basic.pixel_style}">
-          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M6 2h8v2H6zM4 6V4h2v2zm0 8H2V6h2zm2 2H4v-2h2zm8 0v2H6v-2zm2-2h-2v2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm0-8h2v8h-2zm0 0V4h-2v2z"/></svg>
-        </th:block>
-      </button>
-      <button type="button" class="button" x-data="themeMode()" @click="handleToggleThemeMode()">
-        <th:block th:unless="${theme.config.basic.pixel_style}">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            style="vertical-align: -0.125em"
-            width="1.5rem"
-            height="1.5rem"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="currentColor"
-              d="M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34Z"
-            />
-          </svg>
-        </th:block>
-        <th:block th:if="${theme.config.basic.pixel_style}">
-          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M11 0h2v4h-2zm1 12H8v2H4v2H2v4h2v2h10v-2h2v-4h-2v-2h-2zm0 2v2h2v4H4v-4h4v2h2v-2H8v-2zM8 6h6v2H8zm0 2v2H6V8zm8 2h-2V8h2zm0 0h2v2h-2zm4-8h2v2h-2zm0 2v2h-2V4zM2 2h2v2H2zm2 2h2v2H4zm20 7h-4v2h4z"/></svg>
-        </th:block>
+        <i class="i-pixelarticons-sun-alt"></i>
       </button>
     </div>
-    <nav class="menu">
-      <ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="menu__inner">
-        <li th:each="menuItem : ${menu.menuItems}" x-data="headerMenu()" @mouseenter="handleToggleMenu()" @mouseleave="handleToggleMenu()">
-          <a
-            class="text-gray-600 hover:text-blue-600"
-            th:href="${menuItem.status.href}"
-            th:target="${menuItem.spec.target?.value}"
-            th:text="${menuItem.status.displayName + (not #lists.isEmpty(menuItem.children) ? '▾' : '')}"
-          ></a>
-          <ul 
-            th:if="${not #lists.isEmpty(menuItem.children)}"
-            class="menu__sub-inner" 
-            :class="{'open': isOpen}"
-          >
-            <li th:each="childMenuItem : ${menuItem.children}">
-              <a 
-                class="text-gray-600 hover:text-blue-600" 
-                th:href="${childMenuItem.status.href}"
-                th:target="${childMenuItem.spec.target?.value}"
-                th:text="${childMenuItem.status.displayName}"
-              ></a>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </nav>
   </div>
 </header>

templates/modules/layout.html

@@ -1,36 +1,48 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:lang="${#locale.toLanguageTag}" 
-  th:fragment="html (header, content, footer)">
+  th:lang="${#locale.toLanguageTag}"
+  th:fragment="html (title, pageType, terminalUserName, content)"
+>
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/x-icon" th:href="${theme.config.basic.favicon}">
+    <link rel="icon" type="image/x-icon" th:href="${theme.config.basic.favicon}" />
     <title th:text="${title}"></title>
     <link rel="manifest" th:href="@{/assets/dist/manifest.json}" />
-    <link rel="stylesheet" th:href="@{/assets/dist/main.css?version={version}(version=${theme.spec.version})}" href="./assets/dist/style.css" />
+    <link
+      rel="stylesheet"
+      th:href="@{/assets/dist/main.css?version={version}&amp;build=devcm-ide-1.2.8-visual9(version=${theme.spec.version})}"
+      href="./assets/dist/style.css"
+    />
   </head>
-  <!-- 根据情况判断是否添加开启像素化样式 -->
-  <body class="main" th:classappend="${theme.config.basic.pixel_style} ? 'pixel_style' : '' ">
-    <div class="center headings--one-size container">
-      <th:block th:if="${header != null}">
-        <th:block th:replace="${header}" />
-      </th:block>
-      <th:block th:if="${header == null}">
-        <th:block th:replace="~{modules/header :: header(isHome = true)}" />
-      </th:block>
+  <body
+    class="main devcm-body"
+    th:classappend="${theme.config.basic.pixel_style == true or theme.config.basic.pixel_style == 'true'} ? ' pixel_style' : ''"
+    th:with="currentPageType=${#strings.isEmpty(pageType) ? 'home' : pageType},
+      terminalUser=${#strings.isEmpty(terminalUserName) ? 'admin' : terminalUserName}"
+  >
+    <div class="devcm-shell" th:classappend="| devcm-shell--${currentPageType}|">
+      <div class="devcm-app">
+        <th:block th:replace="~{modules/header :: header(pageType=${currentPageType})}" />
 
-      <th:block th:replace="${content}" />
+        <div class="devcm-workspace">
+          <th:block th:replace="~{modules/activity-bar :: activity-bar(pageType=${currentPageType})}" />
+          <th:block th:replace="~{modules/explorer :: explorer(pageType=${currentPageType})}" />
 
-      <th:block th:if="${footer == null}">
-        <th:block th:replace="~{modules/footer}" />
-      </th:block>
-      <th:block th:if="${footer != null}">
-        <th:block th:replace="${footer}" />
-      </th:block>
+          <main class="devcm-editor" id="main-content">
+            <th:block th:replace="${content}" />
+          </main>
+
+          <th:block th:replace="~{modules/right-panel :: right-panel(pageType=${currentPageType})}" />
+        </div>
+
+        <th:block th:replace="~{modules/statusbar :: statusbar(pageType=${currentPageType})}" />
+      </div>
     </div>
-    <script th:src="@{/assets/dist/main.js?version={version}(version=${theme.spec.version})}"></script>
+    <script
+      th:src="@{/assets/dist/main.js?version={version}&amp;build=devcm-ide-1.2.8-visual9(version=${theme.spec.version})}"
+    ></script>
   </body>
 </html>

templates/modules/menu-tree.html

@@ -0,0 +1,63 @@
+<th:block th:fragment="items (items)">
+  <th:block
+    th:each="menuItem : ${items}"
+    th:with="menuHref=${menuItem.status.href},
+      menuTarget=${menuItem.spec.target?.value},
+      menuExternal=${!#strings.isEmpty(menuHref) and (#strings.startsWith(menuHref, 'http://') or #strings.startsWith(menuHref, 'https://') or menuTarget == '_blank')}"
+  >
+    <details class="devcm-tree-folder" open th:if="${not #lists.isEmpty(menuItem.children)}">
+      <summary class="devcm-tree__item devcm-tree__item--folder">
+        <span class="devcm-tree__chev" aria-hidden="true"></span>
+        <i class="devcm-tree__icon i-pixelarticons-folder"></i>
+        <span th:text="${menuItem.status.displayName}">Folder</span>
+        <a
+          class="devcm-tree__open devcm-tree__open--external"
+          th:if="${menuExternal}"
+          th:href="${menuHref}"
+          th:target="${menuTarget}"
+          rel="noopener noreferrer"
+          th:title="#{devcm.action.open}"
+          th:aria-label="#{devcm.action.openPage}"
+        >
+          <i class="i-pixelarticons-external-link"></i>
+        </a>
+        <a
+          class="devcm-tree__open"
+          th:unless="${menuExternal}"
+          th:href="${menuHref}"
+          th:target="${menuTarget}"
+          th:title="#{devcm.action.open}"
+          th:aria-label="#{devcm.action.openPage}"
+        >
+          <i class="i-pixelarticons-open"></i>
+        </a>
+      </summary>
+      <div class="devcm-tree__nested">
+        <th:block th:replace="~{modules/menu-tree :: items(items=${menuItem.children})}" />
+      </div>
+    </details>
+
+    <a
+      class="devcm-tree__item devcm-tree__item--external"
+      th:if="${#lists.isEmpty(menuItem.children) and menuExternal}"
+      th:href="${menuHref}"
+      th:target="${menuTarget}"
+      rel="noopener noreferrer"
+    >
+      <span class="devcm-tree__chev" aria-hidden="true"></span>
+      <i class="devcm-tree__icon i-pixelarticons-external-link"></i>
+      <span th:text="${menuItem.status.displayName}">Page</span>
+    </a>
+
+    <a
+      class="devcm-tree__item"
+      th:if="${#lists.isEmpty(menuItem.children) and !menuExternal}"
+      th:href="${menuHref}"
+      th:target="${menuTarget}"
+    >
+      <span class="devcm-tree__chev" aria-hidden="true"></span>
+      <i class="devcm-tree__icon i-pixelarticons-file"></i>
+      <span th:text="${menuItem.status.displayName}">Page</span>
+    </a>
+  </th:block>
+</th:block>

templates/modules/post-card.html

@@ -0,0 +1,33 @@
+<article
+  class="devcm-post-card"
+  th:fragment="post-card (post, featured)"
+  th:classappend="${featured} ? ' devcm-post-card--featured' : ''"
+>
+  <h2 class="devcm-post-card__title">
+    <a th:href="${post.status.permalink}" th:text="${post.spec.title}">Post Title</a>
+    <span class="devcm-badge" th:if="${featured}" th:text="#{devcm.post.featured}">FEATURED</span>
+  </h2>
+  <div class="devcm-post-card__meta">
+    <span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">2026-01-01</span>
+    <span
+      th:if="${post.contributors != null and !#lists.isEmpty(post.contributors)}"
+      th:with="contributor = ${post.contributors[0]}"
+      th:text="${contributor.displayName}"
+    >
+      Author
+    </span>
+    <a
+      class="devcm-post-card__tag"
+      th:each="tag : ${post.tags}"
+      th:href="${tag.status.permalink}"
+      th:title="${tag.spec.displayName}"
+      th:text="'#' + ${tag.spec.displayName}"
+    >
+      #tag
+    </a>
+  </div>
+  <p class="devcm-post-card__excerpt" th:text="${post.status.excerpt}">Post excerpt...</p>
+  <a class="devcm-read-more" th:href="${post.status.permalink}"
+    ><span th:text="#{devcm.post.readMore}">Read more</span> <span aria-hidden="true">→</span></a
+  >
+</article>

templates/modules/right-panel.html

@@ -0,0 +1,150 @@
+<aside
+  class="devcm-rightbar"
+  th:fragment="right-panel (pageType)"
+  th:classappend="${pageType == 'page' or pageType == 'links' or pageType == 'moments'} ? ' devcm-rightbar--hidden' : ''"
+  th:aria-label="#{devcm.right.context}"
+>
+  <th:block th:if="${pageType == 'post'}">
+    <section class="devcm-widget" th:if="${post != null}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.right.articleInfo}">ARTICLE INFO</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-info-list">
+        <div class="devcm-info-list__row">
+          <span th:text="#{devcm.right.author}">Author</span>
+          <strong th:text="${post.owner.displayName}">Author</strong>
+        </div>
+        <div class="devcm-info-list__row">
+          <span th:text="#{devcm.right.publishedAt}">Published at</span>
+          <strong th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm')}">Date</strong>
+        </div>
+      </div>
+    </section>
+
+    <section class="devcm-widget" th:if="${post.categories != null and !#lists.isEmpty(post.categories)}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-panel-list">
+        <a class="devcm-panel-link" th:each="category : ${post.categories}" th:href="${category.status.permalink}">
+          <strong th:text="${category.spec.displayName}">Category</strong>
+          <span>
+            <span th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}">0</span>
+            <span th:text="#{devcm.right.posts}">posts</span>
+          </span>
+        </a>
+      </div>
+    </section>
+
+    <section class="devcm-widget" th:if="${post.tags != null and !#lists.isEmpty(post.tags)}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.right.tags}">TAGS</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-tag-cloud">
+        <a
+          class="devcm-tag"
+          th:each="tag : ${post.tags}"
+          th:href="${tag.status.permalink}"
+          th:text="'#' + ${tag.spec.displayName}"
+        >
+          #tag
+        </a>
+      </div>
+    </section>
+
+    <section class="devcm-widget" x-data="postToc" x-init="init()" x-show="items.length > 0">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.right.toc}">TABLE OF CONTENTS</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="post-toc">
+        <ul class="toc-tree">
+          <template x-for="(item, index) in items" :key="index">
+            <li
+              class="toc-item"
+              :class="{ 'toc-item--active': activeId === item.id }"
+              :style="`padding-left: ${getIndent(item.level)}`"
+              @click="scrollTo(item.id)"
+            >
+              <span class="toc-item__toggle toc-item__toggle--empty">▼</span>
+              <span class="toc-item__tag" x-text="item.tagName"></span>
+              <span class="toc-item__title" x-text="item.title"></span>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </section>
+
+    <th:block th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
+      <section class="devcm-widget" th:if="${postCursor.hasPrevious() or postCursor.hasNext()}">
+        <div class="devcm-widget__title">
+          <span th:text="#{devcm.right.nearbyPosts}">NEARBY POSTS</span>
+          <span aria-hidden="true">...</span>
+        </div>
+        <div class="devcm-panel-list">
+          <a
+            class="devcm-panel-link"
+            th:if="${postCursor.hasPrevious()}"
+            th:href="${postCursor.previous?.status?.permalink}"
+          >
+            <span th:text="#{devcm.right.previousPost}">Previous</span>
+            <strong th:text="${postCursor.previous?.spec?.title}">Previous</strong>
+          </a>
+          <a class="devcm-panel-link" th:if="${postCursor.hasNext()}" th:href="${postCursor.next?.status?.permalink}">
+            <span th:text="#{devcm.right.nextPost}">Next</span>
+            <strong th:text="${postCursor.next?.spec?.title}">Next</strong>
+          </a>
+        </div>
+      </section>
+    </th:block>
+  </th:block>
+
+  <th:block th:unless="${pageType == 'post'}">
+    <section class="devcm-widget" th:if="${posts != null and posts.items != null and !#lists.isEmpty(posts.items)}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.right.latestPosts}">LATEST POSTS</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-panel-list">
+        <a class="devcm-panel-link" th:each="post : ${posts.items}" th:href="${post.status.permalink}">
+          <strong th:text="${post.spec.title}">Post title</strong>
+          <span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">2026-01-01</span>
+        </a>
+      </div>
+    </section>
+    <section class="devcm-widget" th:if="${categories != null and !#lists.isEmpty(categories)}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-panel-list">
+        <a class="devcm-panel-link" th:each="category : ${categories}" th:href="${category.status.permalink}">
+          <strong th:text="${category.spec.displayName}">Category</strong>
+          <span
+            ><span th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}">0</span>
+            <span th:text="#{devcm.right.posts}">posts</span></span
+          >
+        </a>
+      </div>
+    </section>
+    <section class="devcm-widget" th:if="${tags != null and !#lists.isEmpty(tags)}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.right.tags}">TAGS</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-tag-cloud">
+        <a
+          class="devcm-tag"
+          th:each="tag : ${tags}"
+          th:href="${tag.status.permalink}"
+          th:text="'#' + ${tag.spec.displayName}"
+        >
+          #tag
+        </a>
+      </div>
+    </section>
+  </th:block>
+</aside>

templates/modules/statusbar.html

@@ -0,0 +1,39 @@
+<footer class="devcm-statusbar" th:fragment="statusbar (pageType)">
+  <div class="devcm-statusbar__left">
+    <span th:text="${#strings.isEmpty(theme.config.basic.title) ? site.title : theme.config.basic.title}">DevCM</span>
+    <span th:text="${pageType}">home</span>
+  </div>
+  <div class="devcm-statusbar__center">
+    <span>© <span th:text="${#dates.year(#dates.createNow())}">2026</span></span>
+    <span th:text="#{devcm.status.poweredBy}">Powered by</span>
+    <a th:href="${theme.config.footer.footer_powered_link}" th:text="${theme.config.footer.footer_powered_text}"
+      >FillCode</a
+    >
+    <div class="devcm-statusbar__beian">
+      <span th:if="${not #strings.isEmpty(theme.config.footer.footer_icp_text)}">
+        <a
+          href="https://beian.miit.gov.cn/"
+          target="_blank"
+          th:href="${theme.config.footer.footer_icp_link}"
+          th:text="${theme.config.footer.footer_icp_text}"
+        ></a>
+      </span>
+      <span th:if="${not #strings.isEmpty(theme.config.footer.footer_gongan_text)}">
+        <img th:src="@{/assets/image/gongan.png}" alt="" />
+        <a
+          href="https://www.beian.gov.cn/"
+          target="_blank"
+          th:href="${theme.config.footer.footer_gongan_link}"
+          th:text="${theme.config.footer.footer_gongan_text}"
+        ></a>
+      </span>
+      <halo:footer />
+    </div>
+  </div>
+  <div class="devcm-statusbar__right">
+    <span th:text="${#locale.toLanguageTag()}">en-US</span>
+    <span>UTF-8</span>
+    <span>HTML</span>
+    <i class="devcm-statusbar__dot" aria-hidden="true"></i>
+  </div>
+</footer>