From 5386a1dbf4a4bcca5e75e86082bec2f898d4af88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E9=B1=BC=E5=BC=80=E5=8F=91?= Date: Fri, 22 May 2026 11:27:41 +0800 Subject: [PATCH] refactor: redesign Profile page, fix navigation & interaction logic MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Profile page: - Add page title '我的账户' in settings-section h2 - Restructure points section: horizontal action buttons (充值/明细/定价) - Remove '产品定价' from menu list (already in points section) - Remove '更多' heading Interaction fixes: - Profile logout now uses onNavigate('logout') → App.tsx ConfirmModal - Sidebar dropdown: only '我的账户' + '退出登录' (others go through Profile) - Add back button to usage-detail / system-update / about-us → navigate to profile - content-management click: only expand/collapse, no auto-navigate to first child CSS: - Add --bg-secondary / --bg-tertiary to variables.css - Add page-back-btn CSS class - Convert profile-points-actions to horizontal row layout --- tauri-app/src/components/Layout/Sidebar.tsx | 7 ---- .../ContentManagement/ContentManagement.css | 38 ++++++++++++++++--- tauri-app/src/pages/Profile/Profile.tsx | 25 +++++------- tauri-app/src/pages/Profile/UsageDetail.tsx | 9 +++++ tauri-app/src/pages/Settings/AboutUs.tsx | 8 +++- tauri-app/src/pages/Settings/SystemUpdate.tsx | 8 ++++ 6 files changed, 65 insertions(+), 30 deletions(-) diff --git a/tauri-app/src/components/Layout/Sidebar.tsx b/tauri-app/src/components/Layout/Sidebar.tsx index bfb6943..1802a51 100644 --- a/tauri-app/src/components/Layout/Sidebar.tsx +++ b/tauri-app/src/components/Layout/Sidebar.tsx @@ -35,9 +35,6 @@ interface SidebarProps { const userMenuItems = [ { id: 'profile', label: '我的账户' }, - { id: 'usage-detail', label: '使用明细' }, - { id: 'system-update', label: '系统设置' }, - { id: 'about-us', label: '关于我们' }, ]; export default function Sidebar({ currentPath, onNavigate }: SidebarProps) { @@ -83,10 +80,6 @@ export default function Sidebar({ currentPath, onNavigate }: SidebarProps) { const handleClick = (item: NavItem) => { if (item.children) { toggleExpand(item.id); - // Navigate to first child - if (!expandedItems.has(item.id)) { - onNavigate(item.children[0].id); - } } else { onNavigate(item.id); } diff --git a/tauri-app/src/pages/ContentManagement/ContentManagement.css b/tauri-app/src/pages/ContentManagement/ContentManagement.css index 1f65439..0682340 100644 --- a/tauri-app/src/pages/ContentManagement/ContentManagement.css +++ b/tauri-app/src/pages/ContentManagement/ContentManagement.css @@ -475,7 +475,7 @@ .profile-points-section { display: flex; - align-items: flex-end; + flex-direction: column; gap: var(--spacing-lg); padding: 20px 28px; } @@ -525,14 +525,14 @@ color: var(--text-tertiary); } -.profile-points-actions { +.profile-points-actions-row { display: flex; - flex-direction: column; - gap: 10px; + gap: var(--spacing-sm); + flex-wrap: wrap; } -.profile-points-actions .btn { - padding: 10px 24px; +.profile-points-actions-row .btn { + padding: 10px 20px; font-size: var(--font-sm); white-space: nowrap; } @@ -754,6 +754,32 @@ overflow: hidden; } +/* ── 页面返回按钮 ── */ +.page-back-btn { + display: inline-flex; + align-items: center; + gap: 6px; + padding: var(--spacing-sm) var(--spacing-md); + border: none; + background: transparent; + color: var(--text-secondary); + font-size: var(--font-sm); + font-family: inherit; + cursor: pointer; + border-radius: var(--radius-md); + transition: all var(--transition-fast); + margin-bottom: var(--spacing-sm); +} + +.page-back-btn:hover { + color: var(--primary); + background: var(--bg-hover); +} + +.page-back-btn svg { + flex-shrink: 0; +} + .profile-edit-wrap { display: flex; align-items: center; diff --git a/tauri-app/src/pages/Profile/Profile.tsx b/tauri-app/src/pages/Profile/Profile.tsx index 9dfb21c..f178e9a 100644 --- a/tauri-app/src/pages/Profile/Profile.tsx +++ b/tauri-app/src/pages/Profile/Profile.tsx @@ -38,12 +38,6 @@ const FileTextIcon = () => ( ); -const DollarSignIcon = () => ( - - - -); - const SettingsIcon = () => ( @@ -77,7 +71,6 @@ const EditIcon = () => ( export default function Profile() { const { navigate } = useNavigation(); const authUser = useAuthStore((s) => s.user); - const logout = useAuthStore((s) => s.logout); const [user, setUser] = useState(null); const [balance, setBalance] = useState(null); @@ -156,10 +149,8 @@ export default function Profile() { } }; - const handleLogout = async () => { - if (!window.confirm('确定要退出登录吗？')) { return; } - await logout(); - window.location.reload(); + const handleLogout = () => { + navigate('logout'); }; const displayName = user?.nickname || authUser?.nickname || '用户'; @@ -168,14 +159,17 @@ export default function Profile() { const menuItems = [ { label: '使用明细', icon: , onClick: () => navigate('usage-detail') }, - { label: '产品定价', icon: , onClick: handleOpenPricing }, { label: '系统设置', icon: , onClick: () => navigate('system-update') }, { label: '关于我们', icon: , onClick: () => navigate('about-us') }, ]; return (
- {/* 个人资料卡片 */} +
+

我的账户

+
+ + {/* 个人信息 + 积分 */}
{/* 用户区 */}
@@ -253,7 +247,7 @@ export default function Profile() {
-
+
@@ -273,9 +267,8 @@ export default function Profile() {
- {/* 功能入口 */} + {/* 设置入口 */}
-

更多

{menuItems.map((item) => (

积分明细

diff --git a/tauri-app/src/pages/Settings/AboutUs.tsx b/tauri-app/src/pages/Settings/AboutUs.tsx index 191e00b..627ae1c 100644 --- a/tauri-app/src/pages/Settings/AboutUs.tsx +++ b/tauri-app/src/pages/Settings/AboutUs.tsx @@ -9,7 +9,7 @@ import { toast } from '../../store/uiStore'; const CURRENT_VERSION = __APP_VERSION__; export default function AboutUs() { - const { appEnvironment } = useNavigation(); + const { navigate, appEnvironment } = useNavigation(); const [showModal, setShowModal] = useState(false); // 版本号连击检测 @@ -56,6 +56,12 @@ export default function AboutUs() { return (
+

关于我们

diff --git a/tauri-app/src/pages/Settings/SystemUpdate.tsx b/tauri-app/src/pages/Settings/SystemUpdate.tsx index 23e3cd6..6b11d39 100644 --- a/tauri-app/src/pages/Settings/SystemUpdate.tsx +++ b/tauri-app/src/pages/Settings/SystemUpdate.tsx @@ -6,6 +6,7 @@ */ import { useState } from 'react'; +import { useNavigation } from '../../contexts/NavigationContext'; import { check, type Update, type DownloadEvent } from '@tauri-apps/plugin-updater'; import { relaunch } from '@tauri-apps/plugin-process'; import '../ContentManagement/ContentManagement.css'; @@ -13,6 +14,7 @@ import '../ContentManagement/ContentManagement.css'; const CURRENT_VERSION = __APP_VERSION__; export default function SystemUpdate() { + const { navigate } = useNavigation(); const [checking, setChecking] = useState(false); const [checkResult, setCheckResult] = useState<'none' | 'latest' | 'available'>('none'); const [updateInfo, setUpdateInfo] = useState(null); @@ -107,6 +109,12 @@ export default function SystemUpdate() { return (
+

系统更新