Refine CLI theme and modernize layout

public/app.js

@@ -22,6 +22,7 @@ let historyLoaded = false;
 const THEME_COOKIE = "chatroom_theme";
 const USERNAME_COOKIE = "chatroom_username";
 const KNOWN_THEMES = new Set(["cli", "sakura", "stars", "day", "night"]);
+const themeChoicesEl = document.getElementById("themeChoices");
 
 function setStatus(text) {
   statusEl.textContent = text;
@@ -70,8 +71,9 @@ function setTheme(theme) {
     colorScheme.setAttribute("content", next === "day" || next === "sakura" ? "light" : "dark");
   }
 
-  for (const el of document.querySelectorAll('input[name="theme"]')) {
-    el.checked = el.value === next;
+  for (const el of document.querySelectorAll('input[name="theme"]')) el.checked = el.value === next;
+  for (const label of themeChoicesEl.querySelectorAll(".segItem")) {
+    label.dataset.selected = label.dataset.themeValue === next ? "true" : "false";
   }
 }
 
@@ -135,6 +137,13 @@ function getLastMessageMeta() {
   return { from: last.dataset.from || "", at: lastAt };
 }
 
+function showEmptyState(text) {
+  const li = document.createElement("li");
+  li.className = "emptyState";
+  li.textContent = text;
+  messagesEl.appendChild(li);
+}
+
 function appendItem({ kind, at, from, text }) {
   const li = document.createElement("li");
   const isMe = kind === "message" && from && username && from === username;
@@ -212,7 +221,7 @@ function connect() {
     messagesEl.innerHTML = "";
     const messages = Array.isArray(data.messages) ? data.messages : [];
     if (messages.length === 0) {
-      appendItem({ kind: "system", at: Date.now(), text: "暂无历史消息，开始聊天吧。" });
+      showEmptyState("暂无历史消息，开始聊天吧。");
       return;
     }
     for (const m of messages) {
@@ -277,7 +286,7 @@ document.addEventListener("keydown", (e) => {
   if (e.key === "Escape" && !settingsModal.classList.contains("hidden")) closeSettings();
 });
 
-document.getElementById("themeChoices").addEventListener("change", (e) => {
+themeChoicesEl.addEventListener("change", (e) => {
   const theme = e.target && e.target.name === "theme" ? e.target.value : null;
   if (theme) setTheme(theme);
 });

public/index.html

@@ -57,7 +57,15 @@
               maxlength="500"
               required
             />
-            <button type="submit" class="sendBtn" aria-label="发送">发送</button>
+            <button type="submit" class="sendBtn" aria-label="发送">
+              <svg viewBox="0 0 24 24" aria-hidden="true" class="sendIcon">
+                <path
+                  d="M3.4 20.2 21 12 3.4 3.8a.9.9 0 0 0-1.25 1.05l1.7 6.45c.1.4.45.7.87.72l7.48.35-7.48.35c-.42.02-.77.32-.87.72l-1.7 6.45a.9.9 0 0 0 1.25 1.05Z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span class="srOnly">发送</span>
+            </button>
           </form>
         </div>
       </section>
@@ -75,24 +83,29 @@
           <div class="field">
             <div class="label">主题</div>
             <div class="seg" id="themeChoices">
-              <label class="segItem">
+              <label class="segItem" data-theme-value="cli">
                 <input type="radio" name="theme" value="cli" />
+                <span class="themeIcon" data-theme="cli" aria-hidden="true"></span>
                 <span>命令行主题</span>
               </label>
-              <label class="segItem">
+              <label class="segItem" data-theme-value="sakura">
                 <input type="radio" name="theme" value="sakura" />
+                <span class="themeIcon" data-theme="sakura" aria-hidden="true"></span>
                 <span>Sakura</span>
               </label>
-              <label class="segItem">
+              <label class="segItem" data-theme-value="stars">
                 <input type="radio" name="theme" value="stars" />
+                <span class="themeIcon" data-theme="stars" aria-hidden="true"></span>
                 <span>星空</span>
               </label>
-              <label class="segItem">
+              <label class="segItem" data-theme-value="day">
                 <input type="radio" name="theme" value="day" />
+                <span class="themeIcon" data-theme="day" aria-hidden="true"></span>
                 <span>普通-白日</span>
               </label>
-              <label class="segItem">
+              <label class="segItem" data-theme-value="night">
                 <input type="radio" name="theme" value="night" />
+                <span class="themeIcon" data-theme="night" aria-hidden="true"></span>
                 <span>普通-黑夜</span>
               </label>
             </div>

public/styles.css

@@ -54,28 +54,48 @@ html[data-theme="day"] {
 }
 
 html[data-theme="cli"] {
-  --bg: #0a0f0c;
-  --panel: rgba(25, 240, 122, 0.06);
-  --panel2: rgba(25, 240, 122, 0.04);
-  --text: rgba(221, 255, 230, 0.92);
-  --muted: rgba(221, 255, 230, 0.62);
+  --bg: #0f1115;
+  --panel: rgba(255, 255, 255, 0.06);
+  --panel2: rgba(255, 255, 255, 0.04);
+  --text: rgba(211, 255, 230, 0.92);
+  --muted: rgba(211, 255, 230, 0.56);
   --accent: #19f07a;
   --danger: #ff5c7a;
   --border: rgba(25, 240, 122, 0.18);
-  --shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
-  --bg-pattern: radial-gradient(circle at 20% 10%, rgba(25, 240, 122, 0.06), transparent 52%),
-    radial-gradient(circle at 70% 30%, rgba(25, 240, 122, 0.04), transparent 55%);
-  --surface: rgba(25, 240, 122, 0.06);
-  --surface2: rgba(25, 240, 122, 0.09);
-  --bubble: rgba(25, 240, 122, 0.06);
-  --bubble-me: rgba(25, 240, 122, 0.12);
-  --input: rgba(25, 240, 122, 0.07);
+  --shadow: none;
+  --bg-pattern: radial-gradient(circle at 10% 15%, rgba(25, 240, 122, 0.05), transparent 46%),
+    radial-gradient(circle at 80% 10%, rgba(25, 240, 122, 0.035), transparent 50%);
+  --surface: rgba(255, 255, 255, 0.06);
+  --surface2: rgba(255, 255, 255, 0.09);
+  --bubble: #262626;
+  --bubble-me: #004d40;
+  --input: #1e2229;
 }
 
 html[data-theme="cli"] body {
   font-family: var(--font-mono);
 }
 
+html[data-theme="cli"] .topbar {
+  background: transparent;
+}
+
+html[data-theme="cli"] .panel {
+  background: transparent;
+}
+
+html[data-theme="cli"] .msg.message.me .bubble {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+html[data-theme="cli"] .name {
+  color: rgba(211, 255, 230, 0.62);
+}
+
+html[data-theme="cli"] .time {
+  color: rgba(211, 255, 230, 0.42);
+}
+
 html[data-theme="sakura"] {
   --bg: #fff7fb;
   --panel: rgba(255, 255, 255, 0.66);
@@ -207,8 +227,8 @@ body {
 }
 
 .statusDot {
-  width: 9px;
-  height: 9px;
+  width: 10px;
+  height: 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.28);
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
@@ -305,18 +325,28 @@ button:hover {
   background: var(--panel);
   border: 0;
   color: var(--text);
+  transition: transform 100ms ease, background 120ms ease;
 }
 
 .iconBtn:hover {
   background: var(--surface2);
 }
 
+.iconBtn:active {
+  transform: scale(0.97);
+}
+
 .ghostBtn {
   padding: 10px 12px;
   border-radius: 12px;
   background: transparent;
   border: 0;
   color: var(--muted);
+  transition: transform 100ms ease, background 120ms ease, color 120ms ease;
+}
+
+.ghostBtn:active {
+  transform: scale(0.98);
 }
 
 .ghostBtn:hover {
@@ -495,8 +525,40 @@ button:hover {
 }
 
 .sendBtn {
+  width: 44px;
+  height: 44px;
+  padding: 0;
   border-radius: 999px;
-  padding: 12px 14px;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--accent) 26%, transparent);
+  transition: transform 100ms ease, background 120ms ease;
+  position: relative;
+}
+
+.sendBtn:hover {
+  background: color-mix(in srgb, var(--accent) 34%, transparent);
+}
+
+.sendBtn:active {
+  transform: scale(0.95);
+}
+
+.sendIcon {
+  width: 18px;
+  height: 18px;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 @supports (height: 100dvh) {
@@ -575,7 +637,9 @@ button:hover {
 .modalBackdrop {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.55);
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 html[data-theme="day"] .modalBackdrop,
@@ -587,7 +651,7 @@ html[data-theme="sakura"] .modalBackdrop {
   position: relative;
   width: min(560px, 100%);
   border-radius: var(--radius2);
-  background: var(--bg);
+  background: color-mix(in srgb, var(--bg) 82%, transparent);
   box-shadow: var(--shadow);
   overflow: hidden;
 }
@@ -632,17 +696,56 @@ html[data-theme="sakura"] .modalBackdrop {
   background: var(--panel);
   cursor: pointer;
   user-select: none;
+  transition: transform 100ms ease, background 120ms ease;
+  position: relative;
 }
 
 .segItem:hover {
   background: var(--surface2);
 }
 
+.segItem:active {
+  transform: scale(0.98);
+}
+
 .segItem input {
-  margin: 0;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 1px;
+  height: 1px;
+}
+
+.segItem[data-selected="true"] {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+.themeIcon {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
   flex: 0 0 auto;
-  width: 16px;
-  height: 16px;
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.themeIcon[data-theme="cli"] {
+  background: #19f07a;
+}
+
+.themeIcon[data-theme="sakura"] {
+  background: #ec4899;
+}
+
+.themeIcon[data-theme="stars"] {
+  background: #8ab4ff;
+}
+
+.themeIcon[data-theme="day"] {
+  background: #2563eb;
+}
+
+.themeIcon[data-theme="night"] {
+  background: #6ea8fe;
 }
 
 .hint {
@@ -650,6 +753,15 @@ html[data-theme="sakura"] .modalBackdrop {
   color: var(--muted);
 }
 
+.emptyState {
+  margin: auto;
+  padding: 28px 12px;
+  text-align: center;
+  color: var(--muted);
+  opacity: 0.78;
+  font-size: 13px;
+}
+
 @media (max-width: 420px) {
   .seg {
     grid-template-columns: 1fr;