feat: v2.1.0 界面与凭据改进 —— 单一 API/MCP Key、邮件 Markdown 正文、/inboxs 域名筛选、暗色主题

- 单一 Key:API 与 MCP 共用一个 wmh_ Key,凭据迁移至 settings 表(0004 删除 api_credentials)
- Markdown:入库时 HTML→Markdown(mailhook 同思路),webhook payload 新增 markdown 字段
- /emails 路由改为 /inboxs 并支持域名筛选;设置按钮移入头像下拉
- 主题切换按钮(头像左侧,亮/暗持久化);设置模态仅 全局 Webhook/账号密码 两 tab 且高度限屏
- 列表操作列按钮加 SVG 图标;mailboxes 去 Webhook 列;最近邮件加收件人列

console/frontend/src/App.tsx

@@ -1,18 +1,19 @@
-/** 应用框架:100vh 布局(侧栏 + 顶栏页面标题 + 内容区滚动),会话守卫 + 设置入口 */
+/** 应用框架:100vh 布局(侧栏 + 顶栏页面标题 + 内容区滚动),会话守卫 + 主题切换 + 头像下拉(设置/退出) */
 import { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import { Avatar, Button, Dropdown, Layout, Menu, Tooltip } from "antd";
+import { Avatar, Button, Dropdown, Layout, Menu } from "antd";
 import {
   DashboardOutlined,
   MailOutlined,
   CloudServerOutlined,
   GlobalOutlined,
-  SettingOutlined,
   UserOutlined,
   LogoutOutlined,
+  SettingOutlined,
 } from "@ant-design/icons";
 import { health, logout, me } from "./api.ts";
 import { SettingsModal } from "./components/SettingsModal.tsx";
+import { useTheme } from "./theme-context.ts";
 
 const { Sider, Header, Content } = Layout;
 
@@ -22,7 +23,7 @@ const MENU_ITEMS = [
   { key: "/accounts", icon: <CloudServerOutlined />, label: "账号 Accounts" },
   { key: "/domains", icon: <GlobalOutlined />, label: "域名 Domains" },
   { key: "/mailboxes", icon: <MailOutlined />, label: "邮箱 Mailboxes" },
-  { key: "/emails", icon: <MailOutlined />, label: "邮件 Emails" },
+  { key: "/inboxs", icon: <MailOutlined />, label: "收件箱 Inboxs" },
 ];
 
 /** # 成员变量: 路由 -> 页面标题/副标题 **/
@@ -31,15 +32,29 @@ const PAGE_META: Record<string, { title: string; subtitle: string }> = {
   "/accounts": { title: "账号", subtitle: "通过 Cloudflare OAuth 接入的 Cloudflare 账号(Email Worker 直连)" },
   "/domains": { title: "域名", subtitle: "OAuth 自动同步的收件域名与 Email Workers" },
   "/mailboxes": { title: "邮箱", subtitle: "收件地址、保留策略与邮箱级 Webhook" },
-  "/emails": { title: "邮件", subtitle: "已接收邮件(默认保留 1 天)" },
+  "/inboxs": { title: "收件箱", subtitle: "已接收邮件(默认保留 1 天),支持按域名筛选" },
 };
 
+/** # 成员变量: 主题切换按钮的太阳/月亮 SVG 图标 **/
+const SunIcon = (
+  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+  </svg>
+);
+const MoonIcon = (
+  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
+  </svg>
+);
+
 /** # 函数
- * 应用框架组件:未登录跳 /login;顶栏展示页面标题 + 设置入口;侧栏品牌带版本号
+ * 应用框架组件:未登录跳 /login;顶栏展示页面标题 + 主题切换 + 头像下拉;侧栏品牌带版本号
  */
 export function App() {
   const navigate = useNavigate();
   const location = useLocation();
+  const { dark, toggle } = useTheme();
   const [ready, setReady] = useState(false);
   const [username, setUsername] = useState("");
   const [version, setVersion] = useState("");
@@ -62,67 +77,78 @@ export function App() {
   const meta = PAGE_META[location.pathname] ?? { title: "WmailHub", subtitle: "" };
 
   return (
-    <Layout className="app-layout">
-      <Sider width={228} className="app-sider" theme="light">
-        <div className="brand">
-          <img src="/logo.svg" alt="WmailHub" />
-          <span className="name">WmailHub</span>
-          {/* 版本号小一号、居上对齐(来源 package.json) */}
-          {version && <span className="brand-version">v{version}</span>}
-        </div>
-        <Menu
-          mode="inline"
-          selectedKeys={[location.pathname]}
-          items={MENU_ITEMS}
-          onClick={({ key }) => navigate(key)}
-          style={{ borderInlineEnd: "none" }}
-        />
-      </Sider>
-      <Layout>
-        <Header className="app-header">
-          <div className="header-meta">
-            <div className="title">{meta.title}</div>
-            <div className="subtitle">{meta.subtitle}</div>
+    <>
+      <Layout className="app-layout">
+        <Sider width={228} className="app-sider" theme={dark ? "dark" : "light"}>
+          <div className="brand">
+            <img src="/logo.svg" alt="WmailHub" />
+            <span className="name">WmailHub</span>
+            {/* 版本号小一号、居上对齐(来源 package.json) */}
+            {version && <span className="brand-version">v{version}</span>}
           </div>
-          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
-            <Tooltip title="设置(全局 Webhook / 密码 / API & MCP Keys)">
+          <Menu
+            mode="inline"
+            selectedKeys={[location.pathname]}
+            items={MENU_ITEMS}
+            onClick={({ key }) => navigate(key)}
+            style={{ borderInlineEnd: "none" }}
+          />
+        </Sider>
+        <Layout>
+          <Header className="app-header">
+            <div className="header-meta">
+              <div className="title">{meta.title}</div>
+              <div className="subtitle">{meta.subtitle}</div>
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
+              {/* 主题切换:亮↔暗,位于头像左侧 */}
               <Button
                 type="text"
-                icon={<SettingOutlined />}
-                onClick={() => setSettingsOpen(true)}
-                aria-label="设置"
+                aria-label="切换主题"
+                title={dark ? "切换到亮色模式" : "切换到暗色模式"}
+                icon={dark ? SunIcon : MoonIcon}
+                onClick={toggle}
               />
-            </Tooltip>
-            {/* Dropdown 子元素必须是 DOM 元素(antd v6 坑),所以外包 div */}
-            <div>
-              <Dropdown
-                menu={{
-                  items: [
-                    {
-                      key: "logout",
-                      icon: <LogoutOutlined />,
-                      label: "退出登录",
-                      onClick: async () => {
-                        await logout().catch(() => undefined);
-                        window.location.href = "/login";
+              {/* 设置入口收进头像下拉 */}
+              <div>
+                <Dropdown
+                  menu={{
+                    items: [
+                      {
+                        key: "settings",
+                        icon: <SettingOutlined />,
+                        label: "设置",
+                        onClick: () => setSettingsOpen(true),
                       },
-                    },
-                  ],
-                }}
-              >
-                <div style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
-                  <Avatar size={30} icon={<UserOutlined />} />
-                  <span>{username}</span>
-                </div>
-              </Dropdown>
+                      {
+                        type: "divider" as const,
+                      },
+                      {
+                        key: "logout",
+                        icon: <LogoutOutlined />,
+                        label: "退出登录",
+                        onClick: async () => {
+                          await logout().catch(() => undefined);
+                          window.location.href = "/login";
+                        },
+                      },
+                    ],
+                  }}
+                >
+                  <div style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
+                    <Avatar size={30} icon={<UserOutlined />} />
+                    <span>{username}</span>
+                  </div>
+                </Dropdown>
+              </div>
             </div>
-          </div>
-        </Header>
-        <Content className="app-content">
-          <Outlet />
-        </Content>
+          </Header>
+          <Content className="app-content">
+            <Outlet />
+          </Content>
+        </Layout>
       </Layout>
       <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
-    </Layout>
+    </>
   );
 }