refactor(styles, alpine): add prompt loading animations and enhance color palette adjustments

package.json

@@ -1,7 +1,6 @@
 {
   "name": "theme-terminal",
   "private": true,
-  "version": "2.0.3",
   "description": "A terminal like theme for Halo.",
   "scripts": {
     "dev": "vite build --watch",

settings.yaml

@@ -71,21 +71,21 @@ spec:
               position: up
               label: 归档
               icon: archive
-              url: /archives
+              url: ""
               external: false
             - enabled: true
               type: categories
               position: up
               label: 分类
               icon: script-text
-              url: /categories
+              url: ""
               external: false
             - enabled: true
               type: tags
               position: up
               label: 标签
               icon: label
-              url: /tags
+              url: ""
               external: false
             - enabled: true
               type: login
@@ -279,7 +279,7 @@ spec:
             - $formkit: text
               name: url
               label: 链接地址
-              help: 搜索入口可留空；其他入口留空时不会跳转。
+              help: 内置入口可留空并自动使用 Halo 路由；自定义入口留空时不会跳转。
             - $formkit: select
               name: position
               label: 所在位置

src/alpine/index.ts

@@ -3,6 +3,7 @@ import type { Alpine } from "alpinejs";
 import { headerMenu } from "./header-menu";
 import { postLineNum } from "./post-line-num";
 import { postToc } from "./post-toc";
+import { initDevcmPromptLoading } from "./prompt-loading";
 import { themeComment } from "./theme-comment";
 import { themeMode } from "./theme-mode";
 import { upvote } from "./upvote";
@@ -20,6 +21,7 @@ export const bootDevcmAlpine = (Alpine: Alpine) => {
   Alpine.data("themeComment", themeComment);
 
   initDevcmActivityActions();
+  initDevcmPromptLoading();
   initTypedText();
 
   Alpine.start();

src/alpine/prompt-loading.ts

@@ -0,0 +1,181 @@
+const PROMPT_LINE_SELECTOR = ".devcm-prompt-stream__line.dividing";
+const LOADING_CLASS = "devcm-prompt-stream__line--loading";
+const FINISHING_CLASS = "devcm-prompt-stream__line--finishing";
+const STORAGE_KEY = "devcm:prompt-loading";
+const ROUTE_PENDING_VALUE = "route";
+const FINISH_ANIMATION_NAMES = ["devcm-route-tail-shrink", "devcm-route-finish-state"];
+
+let removeFinishListener: (() => void) | null = null;
+
+const getPromptLine = () => document.querySelector<HTMLElement>(PROMPT_LINE_SELECTOR);
+
+const clearFinishListener = () => {
+  removeFinishListener?.();
+  removeFinishListener = null;
+};
+
+const setPendingRoute = () => {
+  try {
+    window.sessionStorage.setItem(STORAGE_KEY, ROUTE_PENDING_VALUE);
+  } catch {
+    // Ignore storage failures in private browsing or restricted environments.
+  }
+};
+
+const consumePendingRoute = () => {
+  try {
+    const isPending = window.sessionStorage.getItem(STORAGE_KEY) === ROUTE_PENDING_VALUE;
+    window.sessionStorage.removeItem(STORAGE_KEY);
+    return isPending;
+  } catch {
+    return false;
+  }
+};
+
+const resetPromptLoading = () => {
+  const line = getPromptLine();
+
+  clearFinishListener();
+
+  if (!line) {
+    return;
+  }
+
+  line.classList.remove(LOADING_CLASS, FINISHING_CLASS);
+  delete line.dataset.devcmLoading;
+};
+
+const startPromptLoading = () => {
+  const line = getPromptLine();
+
+  clearFinishListener();
+
+  if (!line) {
+    return;
+  }
+
+  line.classList.remove(FINISHING_CLASS);
+  line.classList.add(LOADING_CLASS);
+  line.dataset.devcmLoading = "true";
+};
+
+const startPromptFinishing = () => {
+  const line = getPromptLine();
+
+  clearFinishListener();
+
+  if (!line) {
+    return;
+  }
+
+  const handleAnimationEnd = (event: AnimationEvent) => {
+    if (FINISH_ANIMATION_NAMES.includes(event.animationName)) {
+      resetPromptLoading();
+    }
+  };
+
+  line.classList.remove(LOADING_CLASS);
+  line.classList.add(FINISHING_CLASS);
+  line.dataset.devcmLoading = "done";
+  line.addEventListener("animationend", handleAnimationEnd);
+  removeFinishListener = () => line.removeEventListener("animationend", handleAnimationEnd);
+};
+
+const finishWhenReady = () => {
+  if (document.readyState === "complete") {
+    startPromptFinishing();
+    return;
+  }
+
+  window.addEventListener("load", startPromptFinishing, { once: true });
+};
+
+const isReloadNavigation = () => {
+  if (typeof performance === "undefined" || typeof performance.getEntriesByType !== "function") {
+    return false;
+  }
+
+  const [navigationEntry] = performance.getEntriesByType("navigation") as PerformanceNavigationTiming[];
+  return navigationEntry?.type === "reload";
+};
+
+const resumeInitialPromptLoading = () => {
+  if (consumePendingRoute()) {
+    startPromptFinishing();
+    return;
+  }
+
+  if (!isReloadNavigation()) {
+    return;
+  }
+
+  startPromptLoading();
+  finishWhenReady();
+};
+
+const hasModifiedClick = (event: MouseEvent) => event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+
+const isNavigableAnchor = (anchor: HTMLAnchorElement, event: MouseEvent) => {
+  if (event.defaultPrevented || event.button !== 0 || hasModifiedClick(event)) {
+    return false;
+  }
+
+  if (anchor.hasAttribute("download")) {
+    return false;
+  }
+
+  const target = anchor.getAttribute("target");
+  if (target && target.toLowerCase() !== "_self") {
+    return false;
+  }
+
+  const rawHref = anchor.getAttribute("href");
+  if (!rawHref || rawHref === "#" || rawHref.startsWith("#")) {
+    return false;
+  }
+
+  const url = new URL(anchor.href, window.location.href);
+  if (url.origin !== window.location.origin) {
+    return false;
+  }
+
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    return false;
+  }
+
+  const current = new URL(window.location.href);
+  return url.pathname !== current.pathname || url.search !== current.search;
+};
+
+export const initDevcmPromptLoading = () => {
+  resumeInitialPromptLoading();
+
+  document.addEventListener("click", (event) => {
+    const target = event.target;
+
+    if (!(event instanceof MouseEvent) || !(target instanceof Element)) {
+      return;
+    }
+
+    const anchor = target.closest<HTMLAnchorElement>("a[href]");
+
+    if (!anchor || !isNavigableAnchor(anchor, event)) {
+      return;
+    }
+
+    setPendingRoute();
+    startPromptLoading();
+  });
+
+  window.addEventListener("beforeunload", startPromptLoading);
+  window.addEventListener("pagehide", (event) => {
+    if (!event.persisted) {
+      startPromptLoading();
+    }
+  });
+  window.addEventListener("pageshow", (event) => {
+    if (event.persisted) {
+      resetPromptLoading();
+    }
+  });
+};

src/styles/devcm-editor.scss

@@ -7,6 +7,46 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-color: rgba(255, 176, 0, 0.5) rgba(5, 7, 5, 0.56);
+  scrollbar-width: thin;
+}
+
+.devcm-editor::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.devcm-editor::-webkit-scrollbar-track {
+  border-left: 1px solid rgba(255, 176, 0, 0.12);
+  background: rgba(5, 7, 5, 0.54);
+}
+
+.devcm-editor::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(5, 7, 5, 0.54);
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgba(255, 176, 0, 0.68), rgba(104, 243, 127, 0.42));
+}
+
+.devcm-editor::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(255, 176, 0, 0.86), rgba(104, 243, 127, 0.58));
+}
+
+html[data-color-scheme="light"] .devcm-editor {
+  scrollbar-color: rgba(181, 137, 0, 0.58) rgba(238, 232, 213, 0.82);
+}
+
+html[data-color-scheme="light"] .devcm-editor::-webkit-scrollbar-track {
+  border-left-color: rgba(101, 123, 131, 0.18);
+  background: rgba(238, 232, 213, 0.82);
+}
+
+html[data-color-scheme="light"] .devcm-editor::-webkit-scrollbar-thumb {
+  border-color: rgba(238, 232, 213, 0.82);
+  background: linear-gradient(180deg, rgba(181, 137, 0, 0.68), rgba(42, 161, 152, 0.5));
+}
+
+html[data-color-scheme="light"] .devcm-editor::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(181, 137, 0, 0.86), rgba(42, 161, 152, 0.66));
 }
 
 .devcm-terminal-window,
@@ -30,7 +70,7 @@ html[data-color-scheme="light"] .devcm-category-card,
 html[data-color-scheme="light"] .devcm-archive-table,
 html[data-color-scheme="light"] .devcm-comments {
   border-color: rgba(181, 137, 0, 0.28);
-  background: rgba(253, 246, 227, 0.9);
+  background: rgba(255, 250, 235, 0.78);
 }
 
 html[data-color-scheme="light"] .devcm-terminal-window::before,
@@ -70,7 +110,7 @@ html[data-color-scheme="light"] .devcm-window-titlebar,
 html[data-color-scheme="light"] .devcm-editor-tabs,
 html[data-color-scheme="light"] .devcm-comment-titlebar {
   border-bottom-color: rgba(101, 123, 131, 0.18);
-  background: rgba(238, 232, 213, 0.78);
+  background: rgba(244, 238, 220, 0.42);
 }
 
 .devcm-window-titlebar {
@@ -202,14 +242,15 @@ html[data-color-scheme="light"] .devcm-article-title {
 .devcm-ascii-badge {
   position: relative;
   display: grid;
-  width: min(160px, 100%);
+  box-sizing: border-box;
+  width: min(176px, 100%);
   height: fit-content;
   min-height: 0;
   align-self: center;
   justify-self: center;
   place-items: center;
   padding: 12px 10px;
-  overflow: hidden;
+  overflow: clip;
   border: 1px dashed rgba(255, 176, 0, 0.46);
   background: radial-gradient(circle at 50% 32%, rgba(255, 176, 0, 0.14), transparent 42%),
     linear-gradient(180deg, rgba(22, 18, 10, 0.58), rgba(6, 8, 6, 0.68));
@@ -242,9 +283,11 @@ html[data-color-scheme="light"] .devcm-article-title {
   position: relative;
   z-index: 1;
   display: grid;
+  min-width: 0;
   width: 100%;
   justify-items: center;
   gap: 8px;
+  overflow: hidden;
 }
 
 .devcm-ascii-badge__label {
@@ -257,13 +300,18 @@ html[data-color-scheme="light"] .devcm-article-title {
 }
 
 .devcm-ascii-badge pre {
+  display: block;
+  max-width: 100%;
   margin: 0;
+  padding-bottom: 3px;
+  overflow: hidden;
   border: 0;
   color: var(--devcm-amber);
-  font: 900 clamp(34px, 3.1vw, 46px) / 0.78 var(--devcm-mono);
+  font: 900 clamp(30px, 3vw, 42px) / 1.34 var(--devcm-mono);
   letter-spacing: 0;
   text-shadow: 0 0 18px rgba(255, 176, 0, 0.3);
   transform: scaleX(1.04);
+  white-space: pre;
 }
 
 .devcm-ascii-badge small {
@@ -287,7 +335,7 @@ html[data-color-scheme="light"] .devcm-article-title {
 
 html[data-color-scheme="light"] .devcm-ascii-badge {
   border-color: rgba(181, 137, 0, 0.42);
-  background: rgba(238, 232, 213, 0.72);
+  background: rgba(244, 238, 220, 0.42);
   box-shadow: none;
   color: var(--devcm-amber);
 }
@@ -459,7 +507,7 @@ html[data-color-scheme="light"] .devcm-ascii-badge pre {
 }
 
 html[data-color-scheme="light"] .devcm-post-card {
-  background: rgba(253, 246, 227, 0.86);
+  background: rgba(255, 250, 235, 0.7);
 }
 
 html[data-color-scheme="light"] .devcm-post-card:hover {
@@ -624,7 +672,7 @@ html[data-color-scheme="light"] .devcm-article-content li {
 
 html[data-color-scheme="light"] .devcm-article-content pre {
   border-color: rgba(101, 123, 131, 0.24);
-  background: rgba(238, 232, 213, 0.55);
+  background: rgba(244, 238, 220, 0.34);
   color: #586e75;
 }
 
@@ -652,7 +700,7 @@ html[data-color-scheme="light"] .devcm-article-content code {
 }
 
 html[data-color-scheme="light"] .devcm-comments {
-  background: rgba(253, 246, 227, 0.9);
+  background: rgba(255, 250, 235, 0.78);
 }
 
 .devcm-comments h2 {
@@ -731,7 +779,7 @@ html[data-color-scheme="light"] .devcm-comments {
 }
 
 html[data-color-scheme="light"] .devcm-category-card {
-  background: rgba(253, 246, 227, 0.86);
+  background: rgba(255, 250, 235, 0.7);
   color: var(--devcm-text);
 }
 
@@ -801,7 +849,7 @@ html[data-color-scheme="light"] .devcm-archive-row {
 }
 
 html[data-color-scheme="light"] .devcm-archive-row--header {
-  background: rgba(238, 232, 213, 0.64);
+  background: rgba(244, 238, 220, 0.38);
   color: var(--devcm-muted);
 }
 
@@ -813,7 +861,7 @@ html[data-color-scheme="light"] .devcm-archive-row--header {
 }
 
 html[data-color-scheme="light"] .devcm-archive-row--month {
-  background: rgba(238, 232, 213, 0.78);
+  background: rgba(244, 238, 220, 0.46);
 }
 
 .devcm-archive-row b {
@@ -898,7 +946,7 @@ html[data-color-scheme="light"] .devcm-archive-row--month {
 
 html[data-color-scheme="light"] .devcm-link-card {
   border-color: rgba(101, 123, 131, 0.2);
-  background: rgba(238, 232, 213, 0.42);
+  background: rgba(244, 238, 220, 0.3);
   color: var(--devcm-text);
 }
 

src/styles/devcm-shell.scss

@@ -10,7 +10,7 @@ body.devcm-body {
   min-height: 0;
   background: radial-gradient(circle at 46% 0%, rgba(104, 243, 127, 0.11), transparent 28%),
     radial-gradient(circle at 85% 18%, rgba(255, 176, 0, 0.1), transparent 28%),
-    linear-gradient(180deg, #090b09 0%, #050706 100%);
+    linear-gradient(180deg, #0f130f 0%, #090c09 100%);
   color: var(--devcm-text);
   font-family: var(--devcm-mono);
   overflow: hidden;
@@ -22,22 +22,22 @@ body.devcm-body.pixel_style {
 }
 
 html[data-color-scheme="light"] body.devcm-body {
-  background: #eee8d5;
+  background: var(--devcm-bg-deep);
 }
 
 html[data-color-scheme="light"] body.devcm-body::before {
-  opacity: 0.34;
+  opacity: 0.26;
   background: repeating-linear-gradient(
       0deg,
-      rgba(147, 161, 161, 0.08) 0,
+      rgba(131, 145, 149, 0.045) 0,
-      rgba(147, 161, 161, 0.08) 1px,
+      rgba(131, 145, 149, 0.045) 1px,
       transparent 1px,
       transparent 28px
     ),
     repeating-linear-gradient(
       90deg,
-      rgba(147, 161, 161, 0.08) 0,
+      rgba(131, 145, 149, 0.045) 0,
-      rgba(147, 161, 161, 0.08) 1px,
+      rgba(131, 145, 149, 0.045) 1px,
       transparent 1px,
       transparent 28px
     );
@@ -58,18 +58,18 @@ body.devcm-body::after {
 }
 
 body.devcm-body::before {
-  opacity: 0.16;
+  opacity: 0.24;
   background: repeating-linear-gradient(
       0deg,
-      rgba(255, 255, 255, 0.035) 0,
+      rgba(255, 255, 255, 0.055) 0,
-      rgba(255, 255, 255, 0.035) 1px,
+      rgba(255, 255, 255, 0.055) 1px,
       transparent 1px,
       transparent 3px
     ),
     repeating-linear-gradient(
       90deg,
-      rgba(255, 176, 0, 0.025) 0,
+      rgba(255, 176, 0, 0.045) 0,
-      rgba(255, 176, 0, 0.025) 1px,
+      rgba(255, 176, 0, 0.045) 1px,
       transparent 1px,
       transparent 28px
     );
@@ -77,8 +77,8 @@ body.devcm-body::before {
 }
 
 body.devcm-body::after {
-  background: radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.52) 100%);
+  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.38) 100%);
-  opacity: 0.62;
+  opacity: 0.46;
 }
 
 .devcm-shell {
@@ -105,14 +105,14 @@ html[data-color-scheme="light"] .devcm-shell {
   min-height: 0;
   grid-template-rows: auto minmax(0, 1fr) auto;
   overflow: hidden;
-  background: linear-gradient(90deg, rgba(255, 176, 0, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
+  background: linear-gradient(90deg, rgba(255, 176, 0, 0.064) 1px, transparent 1px) 0 0 / 28px 28px,
-    linear-gradient(180deg, rgba(255, 176, 0, 0.032) 1px, transparent 1px) 0 0 / 28px 28px,
+    linear-gradient(180deg, rgba(104, 243, 127, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
-    linear-gradient(180deg, rgba(8, 10, 8, 0.98), rgba(6, 8, 6, 0.98));
+    linear-gradient(180deg, rgba(13, 17, 13, 0.96), rgba(10, 13, 10, 0.96));
 }
 
 html[data-color-scheme="light"] .devcm-app {
-  background: linear-gradient(90deg, rgba(147, 161, 161, 0.12) 1px, transparent 1px) 0 0 / 28px 28px,
+  background: linear-gradient(90deg, rgba(117, 135, 70, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
-    linear-gradient(180deg, rgba(147, 161, 161, 0.1) 1px, transparent 1px) 0 0 / 28px 28px, #fdf6e3;
+    linear-gradient(180deg, rgba(157, 129, 50, 0.055) 1px, transparent 1px) 0 0 / 28px 28px, var(--devcm-bg);
 }
 
 .devcm-topbar {
@@ -128,7 +128,7 @@ html[data-color-scheme="light"] .devcm-app {
 
 html[data-color-scheme="light"] .devcm-topbar {
   border-bottom-color: rgba(101, 123, 131, 0.22);
-  background: #eee8d5;
+  background: var(--devcm-bg-deep);
   box-shadow: none;
 }
 
@@ -354,12 +354,12 @@ html[data-color-scheme="light"] .devcm-topbar {
 
 html[data-color-scheme="light"] .devcm-sidebar,
 html[data-color-scheme="light"] .devcm-rightbar {
-  background: rgba(238, 232, 213, 0.72);
+  background: rgba(244, 238, 220, 0.5);
 }
 
 html[data-color-scheme="light"] .devcm-activity {
   border-right-color: rgba(101, 123, 131, 0.22);
-  background: #eee8d5;
+  background: var(--devcm-bg-deep);
 }
 
 html[data-color-scheme="light"] .devcm-activity__button {
@@ -587,7 +587,7 @@ html[data-color-scheme="light"] .devcm-tree__item--root {
 
 html[data-color-scheme="light"] .devcm-tag {
   border-color: rgba(101, 123, 131, 0.22);
-  background: rgba(238, 232, 213, 0.62);
+  background: rgba(244, 238, 220, 0.42);
   color: #657b83;
 }
 
@@ -608,7 +608,7 @@ html[data-color-scheme="light"] .devcm-tag {
 }
 
 html[data-color-scheme="light"] .devcm-widget {
-  background: rgba(253, 246, 227, 0.88);
+  background: rgba(255, 250, 235, 0.78);
 }
 
 .devcm-widget::before {
@@ -723,7 +723,7 @@ html[data-color-scheme="light"] .devcm-info-list__row {
 
 html[data-color-scheme="light"] .devcm-statusbar {
   border-top-color: rgba(101, 123, 131, 0.22);
-  background: #eee8d5;
+  background: var(--devcm-bg-deep);
   color: #657b83;
 }
 

src/styles/devcm-tokens.scss

@@ -1,11 +1,11 @@
 :root,
 html[data-color-scheme="dark"] {
   color-scheme: dark;
-  --devcm-bg: #070908;
+  --devcm-bg: #0e120e;
-  --devcm-bg-deep: #040504;
+  --devcm-bg-deep: #090c09;
-  --devcm-panel: rgba(12, 14, 11, 0.94);
+  --devcm-panel: rgba(18, 22, 16, 0.94);
-  --devcm-panel-soft: rgba(18, 20, 14, 0.88);
+  --devcm-panel-soft: rgba(24, 28, 19, 0.88);
-  --devcm-panel-warm: rgba(22, 18, 10, 0.74);
+  --devcm-panel-warm: rgba(31, 25, 14, 0.76);
   --devcm-line: rgba(255, 176, 0, 0.22);
   --devcm-line-strong: rgba(255, 176, 0, 0.48);
   --devcm-text: #ddd6b9;
@@ -42,11 +42,11 @@ html[data-color-scheme="dark"] {
 
 html[data-color-scheme="light"] {
   color-scheme: light;
-  --devcm-bg: #fdf6e3;
+  --devcm-bg: #fdf8e8;
-  --devcm-bg-deep: #eee8d5;
+  --devcm-bg-deep: #f4eedc;
-  --devcm-panel: rgba(253, 246, 227, 0.94);
+  --devcm-panel: rgba(255, 250, 235, 0.9);
-  --devcm-panel-soft: rgba(238, 232, 213, 0.78);
+  --devcm-panel-soft: rgba(244, 238, 220, 0.5);
-  --devcm-panel-warm: rgba(238, 232, 213, 0.62);
+  --devcm-panel-warm: rgba(244, 238, 220, 0.34);
   --devcm-line: rgba(101, 123, 131, 0.2);
   --devcm-line-strong: rgba(181, 137, 0, 0.42);
   --devcm-text: #586e75;

src/styles/header-dividing.scss

@@ -53,6 +53,55 @@
     z-index: 10;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }
+
+  &.devcm-prompt-stream__line--loading {
+    opacity: 1;
+
+    &::after {
+      left: 0;
+      width: 100%;
+      opacity: 0.78;
+      filter: blur(3px);
+      background: linear-gradient(
+        90deg,
+        rgba(255, 93, 93, 0.04) 0%,
+        rgba(255, 93, 93, 0.28) 52%,
+        rgba(255, 93, 93, 0.46) 78%,
+        rgba(255, 93, 93, 0.72) 100%
+      );
+      animation-name: devcm-route-fill-grow, devcm-route-loading-pulse;
+      animation-duration: 1.28s, 0.72s;
+      animation-timing-function: cubic-bezier(0.18, 0.72, 0.22, 1), ease-in-out;
+      animation-fill-mode: forwards, none;
+      animation-iteration-count: 1, infinite;
+      animation-direction: normal, alternate;
+      transform: translateY(-50%) scaleX(0);
+      transform-origin: left center;
+      transition: opacity 0.18s ease;
+      will-change: transform, opacity, filter;
+    }
+  }
+
+  &.devcm-prompt-stream__line--finishing {
+    opacity: 1;
+    animation: devcm-route-finish-state 0.86s linear forwards;
+
+    &::after {
+      left: 0;
+      width: 100%;
+      opacity: 0.66;
+      filter: blur(3px);
+      clip-path: inset(0 0 0 0);
+      background: linear-gradient(90deg, rgba(255, 93, 93, 0.05) 0%, rgba(255, 93, 93, 0.62) 70%, transparent 100%);
+      animation-name: devcm-route-tail-shrink;
+      animation-duration: 0.86s;
+      animation-timing-function: cubic-bezier(0.48, 0, 0.22, 1);
+      animation-fill-mode: forwards;
+      transform: translateY(-50%);
+      transition: opacity 0.18s ease;
+      will-change: clip-path, opacity, filter;
+    }
+  }
 }
 
 // 虚线流动动画 - 模拟加载进度
@@ -84,3 +133,39 @@
     opacity: 0;
   }
 }
+
+@keyframes devcm-route-loading-pulse {
+  0% {
+    opacity: 0.58;
+  }
+  100% {
+    opacity: 0.78;
+  }
+}
+
+@keyframes devcm-route-fill-grow {
+  0% {
+    transform: translateY(-50%) scaleX(0);
+  }
+  100% {
+    transform: translateY(-50%) scaleX(1);
+  }
+}
+
+@keyframes devcm-route-tail-shrink {
+  0% {
+    clip-path: inset(0 0 0 0);
+    opacity: 0.66;
+  }
+  100% {
+    clip-path: inset(0 0 0 100%);
+    opacity: 0;
+  }
+}
+
+@keyframes devcm-route-finish-state {
+  0%,
+  100% {
+    opacity: 1;
+  }
+}

templates/category.html

@@ -10,7 +10,8 @@
           <span th:text="${category.spec.displayName} + '.md'">category.md</span>
           <a
             class="devcm-editor-tab__close"
-            href="/categories"
+            href="#"
+            th:href="${!#strings.isEmpty(site.routes.categoriesUri) ? site.routes.categoriesUri : '/categories'}"
             th:aria-label="#{devcm.action.closeCategoryTab}"
             th:title="#{devcm.action.closeCategoryTab}"
             >×</a

templates/index.html

@@ -30,7 +30,7 @@
           <span class="devcm-ascii-badge__grid"></span>
           <div class="devcm-ascii-badge__inner">
             <span class="devcm-ascii-badge__label">DEV.CM</span>
-            <pre>
+            <pre th:utext="'DEV&#10;CM'">
 DEV
 CM</pre
             >

templates/modules/activity-bar.html

@@ -14,7 +14,15 @@
     <i class="i-pixelarticons-github"></i>
   </span>
 
-  <th:block th:with="items=${theme.config.activity.activity_items}">
+  <th:block
+    th:with="items=${theme.config.activity.activity_items},
+      archiveActivityItem=${items != null and !#lists.isEmpty(items) ? items.^[type == 'archive' or key == 'archive'] : null},
+      categoriesActivityItem=${items != null and !#lists.isEmpty(items) ? items.^[type == 'categories' or key == 'categories'] : null},
+      tagsActivityItem=${items != null and !#lists.isEmpty(items) ? items.^[type == 'tags' or key == 'tags'] : null},
+      activityArchiveHref=${!#strings.isEmpty(site.routes.archivesUri) ? site.routes.archivesUri : (archiveActivityItem != null and !#strings.isEmpty(archiveActivityItem.url) ? archiveActivityItem.url : (archiveActivityItem != null and !#strings.isEmpty(archiveActivityItem.href) ? archiveActivityItem.href : '/archives'))},
+      activityCategoriesHref=${!#strings.isEmpty(site.routes.categoriesUri) ? site.routes.categoriesUri : (categoriesActivityItem != null and !#strings.isEmpty(categoriesActivityItem.url) ? categoriesActivityItem.url : (categoriesActivityItem != null and !#strings.isEmpty(categoriesActivityItem.href) ? categoriesActivityItem.href : '/categories'))},
+      activityTagsHref=${!#strings.isEmpty(site.routes.tagsUri) ? site.routes.tagsUri : (tagsActivityItem != null and !#strings.isEmpty(tagsActivityItem.url) ? tagsActivityItem.url : (tagsActivityItem != null and !#strings.isEmpty(tagsActivityItem.href) ? tagsActivityItem.href : '/tags'))}"
+  >
     <div class="devcm-activity__group devcm-activity__group--up">
       <th:block th:if="${items != null and !#lists.isEmpty(items)}">
         <th:block
@@ -22,7 +30,8 @@
           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 : '#'))},
+            entryConfiguredHref=${!#strings.isEmpty(item.url) ? item.url : (!#strings.isEmpty(item.href) ? item.href : '#')},
+            entryHref=${entryAction == 'search' ? '#' : (itemType == 'archive' ? activityArchiveHref : (itemType == 'categories' ? activityCategoriesHref : (itemType == 'tags' ? activityTagsHref : entryConfiguredHref)))},
             entryLabel=${!#strings.isEmpty(item.label) ? item.label : (!#strings.isEmpty(item.labelKey) ? #messages.msg(item.labelKey) : #messages.msg('devcm.activity.link'))}"
         >
           <a
@@ -95,7 +104,8 @@
         <a
           class="devcm-activity__button"
           th:classappend="${pageType == 'archive' or pageType == 'post'} ? ' devcm-activity__button--active' : ''"
-          href="/archives"
+          href="#"
+          th:href="${activityArchiveHref}"
           th:title="#{devcm.activity.archive}"
           th:attr="data-label=#{devcm.activity.archive},aria-label=#{devcm.activity.archive}"
         >
@@ -104,7 +114,8 @@
         <a
           class="devcm-activity__button"
           th:classappend="${pageType == 'categories' or pageType == 'category'} ? ' devcm-activity__button--active' : ''"
-          href="/categories"
+          href="#"
+          th:href="${activityCategoriesHref}"
           th:title="#{devcm.activity.categories}"
           th:attr="data-label=#{devcm.activity.categories},aria-label=#{devcm.activity.categories}"
         >
@@ -113,7 +124,8 @@
         <a
           class="devcm-activity__button"
           th:classappend="${pageType == 'tags' or pageType == 'tag'} ? ' devcm-activity__button--active' : ''"
-          href="/tags"
+          href="#"
+          th:href="${activityTagsHref}"
           th:title="#{devcm.activity.tags}"
           th:attr="data-label=#{devcm.activity.tags},aria-label=#{devcm.activity.tags}"
         >
@@ -129,7 +141,8 @@
           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 : '#'))},
+            entryConfiguredHref=${!#strings.isEmpty(item.url) ? item.url : (!#strings.isEmpty(item.href) ? item.href : '#')},
+            entryHref=${entryAction == 'search' ? '#' : (itemType == 'archive' ? activityArchiveHref : (itemType == 'categories' ? activityCategoriesHref : (itemType == 'tags' ? activityTagsHref : entryConfiguredHref)))},
             entryLabel=${!#strings.isEmpty(item.label) ? item.label : (!#strings.isEmpty(item.labelKey) ? #messages.msg(item.labelKey) : #messages.msg('devcm.activity.link'))}"
         >
           <a

templates/modules/layout.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
+  data-color-scheme="dark"
   th:lang="${#locale.toLanguageTag}"
   th:fragment="html (title, pageType, terminalUserName, content)"
 >
@@ -13,7 +14,7 @@
     <link rel="manifest" th:href="@{/assets/dist/manifest.json}" />
     <link
       rel="stylesheet"
-      th:href="@{/assets/dist/main.css?version={version}&amp;build=devcm-ide-1.2.8-visual9(version=${theme.spec.version})}"
+      th:href="@{/assets/dist/main.css?version={version}&amp;build=devcm-ide-1.2.10-softlight1(version=${theme.spec.version})}"
       href="./assets/dist/style.css"
     />
   </head>
@@ -42,7 +43,7 @@
       </div>
     </div>
     <script
-      th:src="@{/assets/dist/main.js?version={version}&amp;build=devcm-ide-1.2.8-visual9(version=${theme.spec.version})}"
+      th:src="@{/assets/dist/main.js?version={version}&amp;build=devcm-ide-1.2.10-softlight1(version=${theme.spec.version})}"
     ></script>
   </body>
 </html>

templates/post.html

@@ -8,12 +8,16 @@
       <div class="devcm-editor-tabs">
         <div
           class="devcm-editor-tab devcm-editor-tab--active"
-          th:with="postTabName=${!#strings.isEmpty(post.spec.slug) ? post.spec.slug : post.metadata.name}"
+          th:with="postTabBaseName=${!#strings.isEmpty(post.spec.slug) ? post.spec.slug : post.metadata.name},
+            postTabName=${#strings.endsWith(postTabBaseName, '.md') ? postTabBaseName : postTabBaseName + '.md'},
+            archiveActivityItem=${theme.config.activity.activity_items != null and !#lists.isEmpty(theme.config.activity.activity_items) ? theme.config.activity.activity_items.^[type == 'archive' or key == 'archive'] : null},
+            postCloseHref=${!#strings.isEmpty(site.routes.archivesUri) ? site.routes.archivesUri : (archiveActivityItem != null and !#strings.isEmpty(archiveActivityItem.url) ? archiveActivityItem.url : (archiveActivityItem != null and !#strings.isEmpty(archiveActivityItem.href) ? archiveActivityItem.href : '/archives'))}"
         >
           <span th:text="${postTabName}">post</span>
           <a
             class="devcm-editor-tab__close"
-            href="/archives"
+            href="#"
+            th:href="${postCloseHref}"
             th:aria-label="#{devcm.action.closePostTab}"
             th:title="#{devcm.action.closePostTab}"
             >×</a

templates/tag.html

@@ -10,7 +10,8 @@
           <span th:text="'#' + ${tag.spec.displayName} + '.md'">tag.md</span>
           <a
             class="devcm-editor-tab__close"
-            href="/tags"
+            href="#"
+            th:href="${!#strings.isEmpty(site.routes.tagsUri) ? site.routes.tagsUri : '/tags'}"
             th:aria-label="#{devcm.action.closeTagTab}"
             th:title="#{devcm.action.closeTagTab}"
             >×</a

theme.yaml

@@ -13,5 +13,5 @@ spec:
   repo: https://git.dev.cm/theme-terminal
   settingName: "theme-terminal-setting"
   configMapName: "theme-terminal-configMap"
-  version: 2.0.3
+  version: 2.0.9
   require: ">=2.22.0"