From 40eb317cd94701cd82c7bbfb314e420ad5d3f173 Mon Sep 17 00:00:00 2001
From: suguowen <413162826@qq.com>
Date: Fri, 31 Jul 2026 18:09:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BB=8A=E6=97=A5=E4=B8=8A?=
 =?UTF-8?q?=E6=96=B0=E6=A0=87=E8=AE=B0=E5=92=8C=E4=B8=BB=E9=A2=98=E6=A8=A1?=
 =?UTF-8?q?=E6=8B=9F=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/codex-preview.tsx           |  20 +++--
 web/app/featured-theme-switcher.tsx |   6 +-
 web/app/globals.css                 |  70 ++++++++++++++++-
 web/app/theme-gallery.tsx           |  56 ++++++++++---
 web/app/theme-preview-dialog.tsx    | 117 ++++++++++++++++++++++++++++
 web/lib/theme-catalog.ts            |   1 +
 web/lib/theme-recency.ts            |  11 +++
 web/lib/uploaded-themes.ts          |  11 ++-
 web/tests/rendered-html.test.mjs    |  25 +++++-
 web/tests/theme-recency.test.mjs    |  23 ++++++
 10 files changed, 316 insertions(+), 24 deletions(-)
 create mode 100644 web/app/theme-preview-dialog.tsx
 create mode 100644 web/lib/theme-recency.ts
 create mode 100644 web/tests/theme-recency.test.mjs

diff --git a/web/app/codex-preview.tsx b/web/app/codex-preview.tsx
index 344d1fe..5710093 100644
--- a/web/app/codex-preview.tsx
+++ b/web/app/codex-preview.tsx
@@ -5,10 +5,18 @@ export type PreviewTheme = {
   previewImage?: string;
 };
 
-export function StandardCodexPreview({ theme }: { theme: PreviewTheme }) {
+export function StandardCodexPreview({
+  theme,
+  className = "",
+  productLabel = "主题",
+}: {
+  theme: PreviewTheme;
+  className?: string;
+  productLabel?: string;
+}) {
   return (
-    <div className={`mock-window ${theme.mode}`} aria-hidden="true">
-      <div className="mock-titlebar"><i />主题 · {theme.name}</div>
+    <div className={`mock-window ${theme.mode} ${className}`.trim()} aria-hidden="true">
+      <div className="mock-titlebar"><i />{productLabel} · {theme.name}</div>
       <div className="mock-shell">
         <aside><span /><span /><span /></aside>
         <div><b>Build a product people remember</b><span /><span /><em /></div>
@@ -20,16 +28,18 @@ export function StandardCodexPreview({ theme }: { theme: PreviewTheme }) {
 export function ProCodexPreview({
   theme,
   className = "",
+  productLabel = "工作台",
 }: {
   theme: PreviewTheme;
   className?: string;
+  productLabel?: string;
 }) {
   const wallpaper = theme.previewImage?.replace("./", "/");
   return (
     <div className={`pro-codex-window ${className}`.trim()} aria-hidden="true">
       <div className="pro-codex-titlebar">
         <div className="pro-codex-menu">
-          <span>工作台</span>
+          <span>{productLabel}</span>
           <span>文件</span>
           <span>编辑</span>
         </div>
@@ -44,7 +54,7 @@ export function ProCodexPreview({
         }}
       >
         <aside className="pro-codex-sidebar">
-          <strong>工作台</strong>
+          <strong>{productLabel}</strong>
           <div className="pro-codex-nav"><span /><span /><span /><span /></div>
           <div className="pro-codex-project">
             <small>项目</small>
diff --git a/web/app/featured-theme-switcher.tsx b/web/app/featured-theme-switcher.tsx
index a799abd..db27244 100644
--- a/web/app/featured-theme-switcher.tsx
+++ b/web/app/featured-theme-switcher.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import type { CSSProperties } from "react";
 import type { Theme } from "../lib/theme-catalog";
+import { isThemeNewToday } from "../lib/theme-recency";
 import { ProCodexPreview } from "./codex-preview";
 
 function wallpaperUrl(theme: Theme) {
@@ -48,7 +49,10 @@ export function FeaturedThemeSwitcher({ themes: initialThemes }: { themes: Theme
   return (
     <>
       <div className="landing-showcase__label">
-        <span>今日精选</span>
+        <span>
+          今日精选
+          {isThemeNewToday(selectedTheme) ? <em>NEW</em> : null}
+        </span>
         <strong>{selectedTheme.name}</strong>
       </div>
       <ProCodexPreview
diff --git a/web/app/globals.css b/web/app/globals.css
index 2f1263a..15f0710 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -75,7 +75,8 @@ main, footer { width: min(var(--site-width), calc(100% - 40px)); margin-inline:
 .landing-proof { margin: 18px 0 0; color: #819c9f; font-size: 12px; line-height: 1.6; }
 .landing-hero__showcase { position: relative; z-index: 2; width: 100%; max-width: 720px; justify-self: end; animation: moonsea-rise .9s .12s cubic-bezier(.22, 1, .36, 1) both; }
 .landing-showcase__label { display: flex; margin-bottom: 13px; align-items: center; justify-content: space-between; color: #9cb6b7; font-size: 12px; }
-.landing-showcase__label span { color: #7fa3a6; }
+.landing-showcase__label span { display: inline-flex; align-items: center; gap: 8px; color: #7fa3a6; }
+.landing-showcase__label em { padding: 3px 6px; border: 1px solid rgba(255, 245, 211, .62); border-radius: 999px; color: #102d35; background: #f4df9d; font-size: 8px; font-style: normal; font-weight: 850; letter-spacing: .1em; }
 .landing-showcase__label strong { color: #dce8e2; font-weight: 680; }
 .landing-codex-preview { height: auto; aspect-ratio: 1.54; border-color: rgba(191, 224, 220, .40); border-radius: 16px; box-shadow: 0 38px 100px rgba(0, 8, 15, .52), 0 0 70px rgba(58, 151, 157, .09); }
 .landing-codex-preview .pro-codex-titlebar { height: 38px; padding-inline: 14px; background: rgba(4, 22, 32, .90); }
@@ -179,6 +180,13 @@ main, footer { width: min(var(--site-width), calc(100% - 40px)); margin-inline:
 .theme-preview.is-pro { padding: 13px; background: #dce3e4; }
 .theme-edition { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 6px 9px; border-radius: 9px; color: white; background: rgba(12, 31, 38, .82); backdrop-filter: blur(12px); font-size: 10px; font-weight: 740; }
 .theme-preview.is-pro .theme-edition { display: none; }
+.theme-new-badge { position: absolute; z-index: 4; top: 14px; right: 14px; padding: 6px 9px; border: 1px solid rgba(255, 245, 211, .72); border-radius: 999px; color: #102d35; background: #f4df9d; box-shadow: 0 7px 20px rgba(4, 21, 29, .22); font-size: 9px; font-weight: 850; letter-spacing: .12em; pointer-events: none; }
+.theme-preview-trigger { position: absolute; z-index: 3; inset: 0; border: 0; outline: none; color: #eef7f3; background: transparent; cursor: zoom-in; }
+.theme-preview-trigger::before { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 54%, rgba(2, 17, 25, .48)); content: ""; opacity: 0; transition: opacity .22s ease; }
+.theme-preview-trigger span { position: absolute; right: 14px; bottom: 14px; display: inline-flex; min-height: 34px; align-items: center; padding: 0 13px; border: 1px solid rgba(225, 241, 237, .42); border-radius: 999px; background: rgba(5, 29, 39, .80); box-shadow: 0 10px 26px rgba(1, 11, 17, .28); backdrop-filter: blur(12px); font-size: 11px; font-weight: 760; opacity: 0; transform: translateY(6px); transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1), background-color .22s ease; }
+.theme-preview-trigger:hover::before, .theme-preview-trigger:focus-visible::before { opacity: 1; }
+.theme-preview-trigger:hover span, .theme-preview-trigger:focus-visible span { opacity: 1; transform: translateY(0); }
+.theme-preview-trigger:focus-visible { box-shadow: inset 0 0 0 3px #dce9df; }
 .mock-window { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.45); border-radius: 12px; color: #17272f; background: rgba(250,253,253,.78); box-shadow: 0 16px 32px rgba(11,37,44,.18); backdrop-filter: blur(8px); }
 .mock-window.dark { color: #edf5f7; background: rgba(12,24,32,.78); }
 .mock-titlebar { display: flex; height: 38px; align-items: center; gap: 8px; padding: 0 13px; border-bottom: 1px solid rgba(127,152,160,.22); font-size: 9px; font-weight: 750; }
@@ -227,6 +235,53 @@ main, footer { width: min(var(--site-width), calc(100% - 40px)); margin-inline:
 .theme-card__footer button { flex: none; min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; }
 .theme-card__footer button:disabled { color: #89979a; cursor: not-allowed; background: #f3f6f6; }
 
+.theme-preview-dialog { width: min(1180px, calc(100vw - 48px)); height: min(820px, calc(100vh - 40px)); max-width: none; max-height: none; padding: 0; overflow: visible; border: 0; color: #edf5f1; background: transparent; }
+.theme-preview-dialog::backdrop { background: rgba(1, 10, 16, .80); backdrop-filter: blur(16px) saturate(.76); }
+.theme-preview-dialog__surface { display: grid; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(187, 222, 217, .28); border-radius: 20px; background: #061c28; box-shadow: 0 36px 110px rgba(0, 5, 9, .62); }
+.theme-preview-dialog__header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 20px 17px 24px; border-bottom: 1px solid rgba(167, 207, 205, .16); background: #071f2b; }
+.theme-preview-dialog__header span { color: #8eaaab; font-size: 10px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
+.theme-preview-dialog__header h2 { margin: 4px 0 0; font-size: clamp(22px, 3vw, 34px); line-height: 1; letter-spacing: -.035em; }
+.theme-preview-dialog__close { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border: 1px solid rgba(182, 218, 214, .22); border-radius: 50%; color: #dceae5; background: rgba(13, 52, 65, .70); cursor: pointer; }
+.theme-preview-dialog__close span { color: inherit; font-size: 24px; font-weight: 350; line-height: 1; letter-spacing: 0; transform: translateY(-1px); }
+.theme-preview-dialog__close:hover { border-color: rgba(215, 237, 232, .54); background: rgba(22, 72, 84, .88); }
+.theme-preview-dialog__close:focus-visible { outline: 3px solid rgba(220, 233, 223, .76); outline-offset: 3px; }
+.theme-preview-dialog__stage { min-height: 0; padding: clamp(14px, 2vw, 24px); overflow: hidden; }
+.theme-preview-dialog__stage.is-pro { background-color: #0a2633; }
+.theme-preview-dialog__window { height: 100%; border-radius: 15px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-titlebar { height: 44px; padding-inline: 16px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-menu { gap: 15px; font-size: 10px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-window-actions { gap: 8px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-window-actions i { width: 15px; height: 10px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-body { height: calc(100% - 44px); }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-sidebar { padding: 24px 18px 18px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-sidebar strong { font-size: 12px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-nav { gap: 12px; margin-top: 26px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-nav span,
+.theme-preview-dialog__window.pro-codex-window .pro-codex-project span { height: 5px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-project { gap: 10px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-project small { font-size: 9px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-workspace { padding: 0 28px 24px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-thread { height: 42px; gap: 12px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-thread span { height: 5px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-welcome { gap: 12px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-welcome i { width: 32px; height: 32px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-welcome strong { font-size: 18px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-composer { min-height: 62px; padding-inline: 16px; border-radius: 14px; font-size: 11px; }
+.theme-preview-dialog__window.pro-codex-window .pro-codex-composer i { width: 28px; height: 28px; font-size: 15px; }
+.theme-preview-dialog__window.mock-window .mock-titlebar { height: 50px; padding-inline: 18px; font-size: 12px; }
+.theme-preview-dialog__window.mock-window .mock-shell { height: calc(100% - 50px); }
+.theme-preview-dialog__window.mock-window .mock-shell aside { gap: 16px; padding: 30px 20px; }
+.theme-preview-dialog__window.mock-window .mock-shell > div { gap: 18px; padding: 42px 36px; }
+.theme-preview-dialog__window.mock-window .mock-shell b { font-size: 18px; }
+.theme-preview-dialog__window.mock-window .mock-shell em { height: 76px; }
+.theme-preview-dialog__footer { position: relative; z-index: auto; display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 20px 15px 24px; border-top: 1px solid rgba(167, 207, 205, .16); color: #9db5b6; background: #071f2b; font-size: 12px; }
+.theme-preview-dialog__footer p { max-width: 58ch; margin: 0; line-height: 1.55; }
+.theme-preview-dialog__footer > div { display: flex; flex: none; gap: 10px; }
+.theme-preview-dialog__footer button { min-height: 42px; padding: 0 16px; border-radius: 999px; cursor: pointer; font-weight: 760; }
+.theme-preview-dialog__secondary { border: 1px solid rgba(182, 218, 214, .24); color: #c7d8d5; background: rgba(10, 43, 56, .68); }
+.theme-preview-dialog__primary { border: 1px solid #dce9df; color: #08222c; background: #dce9df; }
+.theme-preview-dialog__primary:disabled { cursor: not-allowed; opacity: .54; }
+
 footer { position: relative; z-index: 2; display: flex; min-height: 104px; align-items: center; justify-content: space-between; border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent); color: var(--muted); font-size: 12px; }
 .footer-links { display: flex; gap: 24px; }
 .footer-links a { text-underline-offset: 4px; text-decoration-color: transparent; }
@@ -371,6 +426,19 @@ footer { position: relative; z-index: 2; display: flex; min-height: 104px; align
   .filter-list { overflow-x: auto; }
   .theme-gallery, .metric-grid, .metric-grid--usage, .data-grid, .data-grid--three { grid-template-columns: 1fr; }
   .theme-card__footer { align-items: flex-start; }
+  .theme-preview-trigger span { opacity: 1; transform: none; }
+  .theme-preview-dialog { width: calc(100vw - 20px); height: calc(100vh - 20px); }
+  .theme-preview-dialog__surface { border-radius: 15px; }
+  .theme-preview-dialog__header { min-height: 68px; padding: 12px 14px 12px 17px; }
+  .theme-preview-dialog__stage { padding: 9px; }
+  .theme-preview-dialog__window.pro-codex-window .pro-codex-titlebar { height: 34px; }
+  .theme-preview-dialog__window.pro-codex-window .pro-codex-body { height: calc(100% - 34px); }
+  .theme-preview-dialog__window.pro-codex-window .pro-codex-sidebar { padding: 15px 10px 10px; }
+  .theme-preview-dialog__window.pro-codex-window .pro-codex-workspace { padding: 0 12px 12px; }
+  .theme-preview-dialog__window.pro-codex-window .pro-codex-welcome strong { font-size: 12px; }
+  .theme-preview-dialog__window.pro-codex-window .pro-codex-composer { min-height: 40px; }
+  .theme-preview-dialog__footer { align-items: stretch; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
+  .theme-preview-dialog__footer > div { display: grid; grid-template-columns: 1fr 1fr; }
   footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 12px; padding-block: 26px; }
   .footer-links { flex-wrap: wrap; gap: 12px 18px; }
   .activity-chart { gap: 4px; }
diff --git a/web/app/theme-gallery.tsx b/web/app/theme-gallery.tsx
index dcb35fd..15016c3 100644
--- a/web/app/theme-gallery.tsx
+++ b/web/app/theme-gallery.tsx
@@ -1,13 +1,15 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
   CLIENT_TARGETS,
   type ClientTarget,
 } from "../lib/client-target";
 import type { Theme } from "../lib/theme-catalog";
+import { isThemeNewToday } from "../lib/theme-recency";
 import { ProCodexPreview, StandardCodexPreview } from "./codex-preview";
+import { ThemePreviewDialog } from "./theme-preview-dialog";
 import { useClientTarget } from "./use-client-target";
 
 type Connection = {
@@ -48,6 +50,8 @@ export function ThemeGallery({
       : window.localStorage.getItem("moonsea_pending_theme"),
   );
   const [notice, setNotice] = useState("");
+  const [previewTheme, setPreviewTheme] = useState<Theme | null>(null);
+  const previewTriggerRef = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
     const loadThemes = async () => {
@@ -162,13 +166,27 @@ export function ThemeGallery({
     }
   };
 
+  const closePreview = () => {
+    setPreviewTheme(null);
+    window.requestAnimationFrame(() => previewTriggerRef.current?.focus());
+  };
+
+  const getApplyLabel = (theme: Theme) => {
+    if (applyingId === theme.id) return "应用中…";
+    if (connection.activeThemeId === theme.id) return "正在使用";
+    if (connection.connected && connection.runtimeCapable) {
+      return pendingThemeId === theme.id ? "继续应用" : "应用";
+    }
+    return connection.connected ? "升级月海后应用" : "下载安装";
+  };
+
   return (
     <section className="themes-section" id="themes" aria-labelledby="themes-title">
       <div className="gallery-toolbar">
         <div className="gallery-intro">
           <p className="section-kicker">主题</p>
           <h1 id="themes-title">选择今天的工作氛围。</h1>
-          <p>选择喜欢的主题，月海助手会自动获取并应用到当前目标。</p>
+          <p>点击封面即可模拟预览；连接月海助手后可一键应用。</p>
         </div>
         <div className={`connection-status ${connection.connected ? "is-connected" : ""}`}>
           <span aria-hidden="true" />
@@ -203,16 +221,26 @@ export function ThemeGallery({
       <div className="theme-gallery">
         {visibleThemes.map((theme) => {
           const isActive = connection.activeThemeId === theme.id;
-          const isApplying = applyingId === theme.id;
-          const canApply = connection.connected
-            && connection.runtimeCapable;
+          const isNew = isThemeNewToday(theme);
           return (
             <article className="theme-card" key={theme.id}>
               <div className={`theme-preview ${theme.edition === "pro" ? "is-pro" : ""}`} style={{ background: theme.previewGradient }}>
                 <span className="theme-edition">{theme.edition === "pro" ? "精选 · Pro" : `渐变 · ${theme.mode === "dark" ? "深色" : "浅色"}`}</span>
+                {isNew ? <span className="theme-new-badge">NEW</span> : null}
                 {theme.edition === "pro"
                   ? <ProCodexPreview theme={theme} />
                   : <StandardCodexPreview theme={theme} />}
+                <button
+                  className="theme-preview-trigger"
+                  type="button"
+                  aria-label={`预览主题：${theme.name}`}
+                  onClick={(event) => {
+                    previewTriggerRef.current = event.currentTarget;
+                    setPreviewTheme(theme);
+                  }}
+                >
+                  <span>预览</span>
+                </button>
               </div>
               <div className="theme-card__footer">
                 <div>
@@ -228,19 +256,23 @@ export function ThemeGallery({
                   onClick={() => void applyTheme(theme)}
                   disabled={Boolean(applyingId) || isActive}
                 >
-                  {isApplying
-                    ? "应用中…"
-                    : isActive
-                      ? "正在使用"
-                      : canApply
-                        ? pendingThemeId === theme.id ? "继续应用" : "应用"
-                        : connection.connected ? "升级月海后应用" : "下载安装"}
+                  {getApplyLabel(theme)}
                 </button>
               </div>
             </article>
           );
         })}
       </div>
+      {previewTheme ? (
+        <ThemePreviewDialog
+          theme={previewTheme}
+          client={client}
+          actionLabel={getApplyLabel(previewTheme)}
+          actionDisabled={Boolean(applyingId) || connection.activeThemeId === previewTheme.id}
+          onApply={() => void applyTheme(previewTheme)}
+          onClose={closePreview}
+        />
+      ) : null}
     </section>
   );
 }
diff --git a/web/app/theme-preview-dialog.tsx b/web/app/theme-preview-dialog.tsx
new file mode 100644
index 0000000..157c8bf
--- /dev/null
+++ b/web/app/theme-preview-dialog.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import {
+  CLIENT_TARGETS,
+  type ClientTarget,
+} from "../lib/client-target";
+import type { Theme } from "../lib/theme-catalog";
+import { ProCodexPreview, StandardCodexPreview } from "./codex-preview";
+
+export function ThemePreviewDialog({
+  theme,
+  client,
+  actionLabel,
+  actionDisabled,
+  onApply,
+  onClose,
+}: {
+  theme: Theme;
+  client: ClientTarget;
+  actionLabel: string;
+  actionDisabled: boolean;
+  onApply: () => void;
+  onClose: () => void;
+}) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const clientLabel = CLIENT_TARGETS[client].label;
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    dialog.showModal();
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      if (dialog.open) dialog.close();
+    };
+  }, []);
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className="theme-preview-dialog"
+      aria-labelledby="theme-preview-title"
+      onCancel={(event) => {
+        event.preventDefault();
+        dialogRef.current?.close();
+      }}
+      onClick={(event) => {
+        if (event.target === event.currentTarget) dialogRef.current?.close();
+      }}
+      onClose={onClose}
+    >
+      <div className="theme-preview-dialog__surface">
+        <header className="theme-preview-dialog__header">
+          <div>
+            <span>模拟预览 · {clientLabel}</span>
+            <h2 id="theme-preview-title">{theme.name}</h2>
+          </div>
+          <button
+            className="theme-preview-dialog__close"
+            type="button"
+            aria-label="关闭预览"
+            onClick={() => dialogRef.current?.close()}
+          >
+            <span aria-hidden="true">×</span>
+          </button>
+        </header>
+
+        <div
+          className={`theme-preview-dialog__stage ${theme.edition === "pro" ? "is-pro" : ""}`}
+          style={{ background: theme.previewGradient }}
+        >
+          {theme.edition === "pro"
+            ? (
+                <ProCodexPreview
+                  theme={theme}
+                  className="theme-preview-dialog__window"
+                  productLabel={clientLabel}
+                />
+              )
+            : (
+                <StandardCodexPreview
+                  theme={theme}
+                  className="theme-preview-dialog__window"
+                  productLabel={clientLabel}
+                />
+              )}
+        </div>
+
+        <footer className="theme-preview-dialog__footer">
+          <p>
+            这是主题在 {clientLabel} 中的模拟效果。预览无需安装或连接月海助手。
+          </p>
+          <div>
+            <button
+              className="theme-preview-dialog__secondary"
+              type="button"
+              onClick={() => dialogRef.current?.close()}
+            >
+              继续浏览
+            </button>
+            <button
+              className="theme-preview-dialog__primary"
+              type="button"
+              disabled={actionDisabled}
+              onClick={onApply}
+            >
+              {actionLabel}
+            </button>
+          </div>
+        </footer>
+      </div>
+    </dialog>
+  );
+}
diff --git a/web/lib/theme-catalog.ts b/web/lib/theme-catalog.ts
index 707696c..ef1c76a 100644
--- a/web/lib/theme-catalog.ts
+++ b/web/lib/theme-catalog.ts
@@ -7,6 +7,7 @@ export type Theme = PreviewTheme & {
   description: string;
   edition: "standard" | "pro";
   preview?: string[];
+  createdAt?: string;
 };
 
 export const THEMES = Object.freeze(catalog.themes as Theme[]);
diff --git a/web/lib/theme-recency.ts b/web/lib/theme-recency.ts
new file mode 100644
index 0000000..7a3faba
--- /dev/null
+++ b/web/lib/theme-recency.ts
@@ -0,0 +1,11 @@
+import type { Theme } from "./theme-catalog";
+
+export function isThemeNewToday(theme: Theme, today = new Date()) {
+  if (!theme.createdAt) return false;
+  const createdAt = new Date(theme.createdAt);
+  if (Number.isNaN(createdAt.getTime())) return false;
+
+  return createdAt.getFullYear() === today.getFullYear()
+    && createdAt.getMonth() === today.getMonth()
+    && createdAt.getDate() === today.getDate();
+}
diff --git a/web/lib/uploaded-themes.ts b/web/lib/uploaded-themes.ts
index 1b392b9..db46da2 100644
--- a/web/lib/uploaded-themes.ts
+++ b/web/lib/uploaded-themes.ts
@@ -35,6 +35,7 @@ type UploadedThemeRow = {
   contentType: string;
   sha256: string;
   size: number;
+  createdAt: string;
 };
 
 export type ThemeStorageEnv = {
@@ -156,7 +157,8 @@ export async function listUploadedThemeRows(db: D1Database) {
       object_key AS objectKey,
       content_type AS contentType,
       sha256,
-      size
+      size,
+      created_at AS createdAt
     FROM uploaded_themes
     ORDER BY created_at ASC, id ASC
   `).all<UploadedThemeRow>();
@@ -167,7 +169,7 @@ export async function listUploadedThemeRows(db: D1Database) {
 }
 
 export async function listUploadedPublicThemes(db: D1Database) {
-  return (await listUploadedThemeRows(db)).map(({ theme }) => ({
+  return (await listUploadedThemeRows(db)).map(({ theme, createdAt }) => ({
     id: theme.id,
     name: theme.name,
     description: theme.description,
@@ -175,6 +177,7 @@ export async function listUploadedPublicThemes(db: D1Database) {
     mode: theme.mode,
     previewImage: `/api/themes/assets/${theme.id}`,
     previewGradient: theme.previewGradient,
+    createdAt,
   }));
 }
 
@@ -279,6 +282,7 @@ export async function handleThemeUpload(
   const digest = await sha256(bytes);
   const objectKey = `themes/${metadata.id}/${digest}.png`;
   const theme = buildUploadedTheme(metadata);
+  const createdAt = new Date().toISOString();
   await env.THEMES.put(objectKey, bytes, {
     httpMetadata: {
       contentType: "image/png",
@@ -310,7 +314,7 @@ export async function handleThemeUpload(
       "image/png",
       digest,
       bytes.length,
-      new Date().toISOString(),
+      createdAt,
     ).run();
   } catch (error) {
     await env.THEMES.delete(objectKey);
@@ -327,6 +331,7 @@ export async function handleThemeUpload(
       mode: theme.mode,
       previewImage: `/api/themes/assets/${theme.id}`,
       previewGradient: theme.previewGradient,
+      createdAt,
     },
     asset: {
       contentType: "image/png",
diff --git a/web/tests/rendered-html.test.mjs b/web/tests/rendered-html.test.mjs
index f43377d..6e6ecea 100644
--- a/web/tests/rendered-html.test.mjs
+++ b/web/tests/rendered-html.test.mjs
@@ -330,6 +330,7 @@ test("管理员通过 API 上传动漫壁纸后主题墙与客户端清单立即
   );
   assert.equal(publicTheme.name, "霓虹雨町");
   assert.equal(publicTheme.previewImage, "/api/themes/assets/neon-rain-town");
+  assert.match(publicTheme.createdAt, /^\d{4}-\d{2}-\d{2}T/);
 
   const detail = await fetch(`${origin}/themes/neon-rain-town`);
   assert.equal(detail.status, 200);
@@ -704,8 +705,9 @@ test("Pro 封面将真实壁纸渲染在虚拟 Codex 窗口内", async () => {
   assert.match(gallery, /className="pro-codex-body"/);
   assert.match(gallery, /url\("\$\{wallpaper\}"\)/);
   assert.doesNotMatch(gallery, /theme\.previewImage\s*\?\s*<img/);
-  assert.match(gallery, /主题 · \{theme\.name\}/);
-  assert.match(gallery, />工作台</);
+  assert.match(gallery, /productLabel = "主题"/);
+  assert.match(gallery, /\{productLabel\} · \{theme\.name\}/);
+  assert.match(gallery, /productLabel = "工作台"/);
   assert.doesNotMatch(gallery, />Codex</);
   assert.doesNotMatch(gallery, /Codex · \{theme\.name\}/);
   assert.match(styles, /\.pro-codex-window\s*\{/);
@@ -713,6 +715,25 @@ test("Pro 封面将真实壁纸渲染在虚拟 Codex 窗口内", async () => {
   assert.match(styles, /\.pro-codex-composer\s*\{/);
 });
 
+test("主题墙标记今日上新并允许未连接用户打开模拟预览", async () => {
+  const gallery = await readFile(new URL("../app/theme-gallery.tsx", import.meta.url), "utf8");
+  const featured = await readFile(new URL("../app/featured-theme-switcher.tsx", import.meta.url), "utf8");
+  const dialog = await readFile(new URL("../app/theme-preview-dialog.tsx", import.meta.url), "utf8");
+  const recency = await readFile(new URL("../lib/theme-recency.ts", import.meta.url), "utf8");
+  const styles = await readFile(new URL("../app/globals.css", import.meta.url), "utf8");
+
+  assert.match(gallery, /isThemeNewToday/);
+  assert.match(gallery, />NEW</);
+  assert.match(featured, /isThemeNewToday/);
+  assert.match(featured, />NEW</);
+  assert.match(recency, /getFullYear/);
+  assert.match(gallery, /theme-preview-trigger/);
+  assert.match(dialog, /showModal\(\)/);
+  assert.match(dialog, /预览无需安装或连接月海助手/);
+  assert.match(styles, /\.theme-preview-dialog::backdrop/);
+  assert.match(styles, /\.theme-new-badge/);
+});
+
 test("未知页面返回 404", async () => {
   const response = await fetch(`${origin}/not-found`);
   assert.equal(response.status, 404);
diff --git a/web/tests/theme-recency.test.mjs b/web/tests/theme-recency.test.mjs
new file mode 100644
index 0000000..57e83a7
--- /dev/null
+++ b/web/tests/theme-recency.test.mjs
@@ -0,0 +1,23 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { isThemeNewToday } from "../lib/theme-recency.ts";
+
+const theme = {
+  id: "new-theme",
+  name: "今日主题",
+  description: "用于验证今日上新的主题",
+  edition: "pro",
+  mode: "dark",
+  previewGradient: "#081B28",
+};
+
+test("NEW 只标记访问者本地日期内上传的主题", () => {
+  const today = new Date(2026, 6, 31, 18, 0, 0);
+  const uploadedToday = new Date(2026, 6, 31, 1, 0, 0).toISOString();
+  const uploadedYesterday = new Date(2026, 6, 30, 23, 59, 59).toISOString();
+
+  assert.equal(isThemeNewToday({ ...theme, createdAt: uploadedToday }, today), true);
+  assert.equal(isThemeNewToday({ ...theme, createdAt: uploadedYesterday }, today), false);
+  assert.equal(isThemeNewToday({ ...theme, createdAt: "not-a-date" }, today), false);
+  assert.equal(isThemeNewToday(theme, today), false);
+});