diff --git a/client/electron/src/App.tsx b/client/electron/src/App.tsx index cf04c23..882a652 100644 --- a/client/electron/src/App.tsx +++ b/client/electron/src/App.tsx @@ -9,6 +9,7 @@ import { useSessionStore } from './stores/sessionStore'; import { useContactStore } from './stores/contactStore'; import { useUIStore } from './stores/uiStore'; import Sidebar from './components/Sidebar'; +import CommTabs, { ComposeFab } from './components/CommTabs'; import MailList from './components/MailList'; import PermissionList from './components/PermissionList'; import ContactPanel from './components/ContactPanel'; @@ -39,6 +40,26 @@ export default function App() { const resetUI = useUIStore(s => s.reset); const narrowPane = useUIStore(s => s.narrowPane); const narrow = useIsNarrow(); + const commTab = useUIStore(s => s.commTab); + + /* + * 视图切换动画的触发器（2026-09-14 用户：「页面极度缺少动画，所有页面都是直接出现」）。 + * + * 为什么不用 key 重挂载：面板是 flex 链上的一环，套 wrapper 会改变 flex 传递， + * 窄屏覆盖层最先坏。这里改成在外壳上挂一个短命类，由 CSS 给直接子面板加一次 + * 入场动画 —— DOM 结构一个字节都不动。 + * + * 必须先 remove + 强制重排再 add：同一个类连着挂两次，浏览器不会重放动画。 + */ + useEffect(() => { + const root = document.documentElement; + root.classList.remove('view-switch'); + // 读一次布局，强制样式失效（否则 remove/add 在同一帧里会被合并，动画不重放） + void root.offsetWidth; + root.classList.add('view-switch'); + const t = window.setTimeout(() => root.classList.remove('view-switch'), 400); + return () => window.clearTimeout(t); + }, [viewMode, commTab, narrowPane, composing]); const fetchInbox = useMailStore(s => s.fetchInbox); const fetchSent = useMailStore(s => s.fetchSent); @@ -156,7 +177,8 @@ export default function App() { ); // 列表（中栏）：收发件箱、授权、联系人视图有 - const list = + const isComm = viewMode === 'inbox' || viewMode === 'sent' || viewMode === 'permissions'; + const listBody = viewMode === 'contacts' ? ( ) : viewMode === 'permissions' ? ( @@ -165,6 +187,23 @@ export default function App() { ) : null; + /* + * 「通信」的内部导航（收件箱 / 发件箱 / 授权）与悬浮加号都挂在中栏上。 + * + * 放在这里而不是各个子页面里，是为了"只有一套"：三个页签各写一遍的话， + * 切换时的选中态、徽标口径迟早会分叉。 + * 外层 `relative` 是给悬浮加号定位用的 —— 窄屏时它正好落在底部导航之上。 + */ + const list = isComm && listBody ? ( +
+ + {listBody} + +
+ ) : ( + listBody + ); + // 账号/管理页没有列表栏，窄屏下要直接显示主区域， // 否则会出现一片空白（列表为 null 而 narrowPane 还停在 'list'） const hasList = list !== null; @@ -218,7 +257,7 @@ function PaneLoading() { */ function NarrowShell({ children }: { children: React.ReactNode }) { return ( -
+
{children}
diff --git a/client/electron/src/components/AccountPage.tsx b/client/electron/src/components/AccountPage.tsx index 75bbea3..35427a0 100644 --- a/client/electron/src/components/AccountPage.tsx +++ b/client/electron/src/components/AccountPage.tsx @@ -1,7 +1,8 @@ import { useCallback, useEffect, useState } from 'react'; import { useAuthStore } from '../stores/authStore'; import * as api from '../api/client'; -import { LockIcon, LogoutIcon } from './icons'; +import { LockIcon, LogoutIcon, UsersIcon } from './icons'; +import { useUIStore } from '../stores/uiStore'; import KeyPanel from './KeyPanel'; import AccountList from './AccountList'; import ThemePicker from './ThemePicker'; @@ -11,6 +12,7 @@ import BackgroundPicker from './BackgroundPicker'; export default function AccountPage() { const user = useAuthStore(s => s.user); const logout = useAuthStore(s => s.logout); + const setViewMode = useUIStore(s => s.setViewMode); const [oldPw, setOldPw] = useState(''); const [newPw, setNewPw] = useState(''); const [confirmPw, setConfirmPw] = useState(''); @@ -240,6 +242,28 @@ export default function AccountPage() { 退出登录 + + {/* + 管理入口（仅管理员可见）—— 用户：「将管理和我的合并，管理员视角我的页面 + 拉到最下面有一个管理」。 + 合并的理由与通信一致：导航栏只留日常动作，低频/高危的入口下沉到「我的」。 + 非管理员看不到这一整块（不是禁用，是不渲染 —— 免得让人以为"我缺权限"）。 + */} + {user?.role === 'admin' && ( +
+

管理

+ +

+ 创建/停用账号、查看配额与密钥。只有管理员看得到这一栏。 +

+
+ )}
diff --git a/client/electron/src/components/AddressInput.tsx b/client/electron/src/components/AddressInput.tsx index fc0eca2..6b46f16 100644 --- a/client/electron/src/components/AddressInput.tsx +++ b/client/electron/src/components/AddressInput.tsx @@ -181,7 +181,7 @@ export default function AddressInput({ {open && items.length > 0 && (
s.commTab); + const setCommTab = useUIStore(s => s.setCommTab); + const inbox = useMailStore(s => s.inbox); + + const { normal, permissions } = splitByPermission(inbox); + const unread = normal.filter(m => m.status === 'unread').length; + const pendingPerms = countPendingPermissions(permissions); + + return ( +
+ {TABS.map(({ key, label }) => { + const on = commTab === key; + const badge = key === 'inbox' ? unread : key === 'permissions' ? pendingPerms : 0; + return ( + + ); + })} +
+ ); +} + +/** + * 悬浮的圆形加号 —— 「新建」从导航栏搬到这里。 + * + * 放在列表栏的右下角（`absolute`），窄屏时正好在底部导航之上；宽屏时在列表栏内悬浮。 + * 用圆形而不是胶囊：用户点名要"悬浮的圆形加号"，且圆形在窄屏下不会挤压页签。 + */ +export function ComposeFab() { + const startCompose = useUIStore(s => s.startCompose); + const composing = useUIStore(s => s.composing); + if (composing) return null; + return ( + + ); +} diff --git a/client/electron/src/components/MailView.tsx b/client/electron/src/components/MailView.tsx index 327d24c..2c2e786 100644 --- a/client/electron/src/components/MailView.tsx +++ b/client/electron/src/components/MailView.tsx @@ -697,7 +697,7 @@ export function PermissionPanel({ mail }: { mail: Mail }) { className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border transition-colors disabled:opacity-40 ${ on ? 'bg-blue-700 text-white border-blue-700 hover:bg-blue-800' - : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50' + : 'glass-control text-gray-700 border-gray-300 hover:bg-gray-50' }`} > {on && } diff --git a/client/electron/src/components/NarrowNav.tsx b/client/electron/src/components/NarrowNav.tsx index 756cb8b..1b17961 100644 --- a/client/electron/src/components/NarrowNav.tsx +++ b/client/electron/src/components/NarrowNav.tsx @@ -4,12 +4,8 @@ import { useContactStore } from '../stores/contactStore'; import { useAuthStore } from '../stores/authStore'; import { InboxIcon, - SentIcon, ContactsIcon, - ComposeIcon, - UsersIcon, PersonIcon, - ShieldIcon, CalendarIcon } from './icons'; import { ConnectionIndicator } from './ConnectionIndicator'; @@ -28,22 +24,22 @@ import { countPendingPermissions, splitByPermission } from '../lib/mailGroups'; const items: { short: string; mode: ViewMode; + /** 哪些 viewMode 算这一项选中（「通信」含三个子页签） */ + modes?: ViewMode[]; Icon: (p: { className?: string }) => JSX.Element; adminOnly?: boolean; }[] = [ - { short: '收件', mode: 'inbox', Icon: InboxIcon }, - { short: '授权', mode: 'permissions', Icon: ShieldIcon }, - { short: '发件', mode: 'sent', Icon: SentIcon }, - { short: '日历', mode: 'calendar', Icon: CalendarIcon }, - { short: '联系人', mode: 'contacts', Icon: ContactsIcon }, - { short: '管理', mode: 'admin', Icon: UsersIcon, adminOnly: true } + // 与桌面侧栏同一套合并（用户：「导航项就只剩通信，日历，联系人」）： + // 收件/发件/授权 = 一项「通信」，进去由 CommTabs 区分；管理移到「我的」页底部。 + { short: '通信', mode: 'inbox', modes: ['inbox', 'sent', 'permissions'], Icon: InboxIcon }, + { short: '日历', mode: 'calendar', Icon: CalendarIcon }, + { short: '联系人', mode: 'contacts', Icon: ContactsIcon } ]; export default function NarrowNav() { const viewMode = useUIStore(s => s.viewMode); const setViewMode = useUIStore(s => s.setViewMode); const composing = useUIStore(s => s.composing); - const startCompose = useUIStore(s => s.startCompose); const narrowPane = useUIStore(s => s.narrowPane); const inbox = useMailStore(s => s.inbox); @@ -57,29 +53,32 @@ export default function NarrowNav() { const isAdmin = user?.role === 'admin'; const visible = items.filter(n => !n.adminOnly || isAdmin); + // 点「通信」回到上次用的子页签（与桌面侧栏同一语义） + const commTab = useUIStore(s => s.commTab); return (