feat(vite): 资源拆分 & 样式优化

theme-terminal/templates/modules/header.html

@@ -24,7 +24,7 @@
           <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 id="theme-toggle" type="button">
+      <button type="button" x-data="themeMode()" @click="handleToggleThemeMode()">
         <th:block th:unless="${theme.config.basic.pixel_style}">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -46,21 +46,24 @@
       </button>
     </div>
     <nav class="menu">
-      <ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="menu__inner menu__inner--desktop">
-        <li th:each="menuItem : ${menu.menuItems}">
+      <ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="menu__inner">
+        <li th:each="menuItem : ${menu.menuItems}" x-data="menu()" @mouseenter="handleToggleMenu()" @mouseleave="handleToggleMenu()">
           <a
             class="text-gray-600 hover:text-blue-600"
             th:href="${menuItem.status.href}"
-            th:text="${menuItem.status.displayName}"
+            th:text="${menuItem.status.displayName + (not #lists.isEmpty(menuItem.children) ? '▾' : '')}"
           ></a>
-          <ul
+          <ul 
             th:if="${not #lists.isEmpty(menuItem.children)}"
-            @mouseenter="open()"
-            @mouseleave="close()"
-            class="menu__sub-inner-more hidden"
+            class="menu__sub-inner" 
+            :class="{'hidden': !isOpen}"
           >
             <li th:each="childMenuItem : ${menuItem.children}">
-              <a th:href="${childMenuItem.status.href} " th:text="${childMenuItem.status.displayName} "></a>
+              <a 
+                class="text-gray-600 hover:text-blue-600" 
+                th:href="${childMenuItem.status.href} " 
+                th:text="${childMenuItem.status.displayName} "
+              ></a>
             </li>
           </ul>
         </li>