xinyouhe/x-server-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 使用 sessionStorage 保持 tab 状态

Browse Source 
问题：navigate(-1) 浏览器后退不会传递 location.state

解决方案：
- 切换 tab 时保存到 sessionStorage
- 页面加载时优先从 sessionStorage 恢复 tab

修改文件：
- frontend/src/pages/business-trip/list.tsx
- frontend/src/pages/approval/list.tsx

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-02-26 18:38:42 +08:00
parent f3a9e442e9
commit 8ce070bd77
2 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/approval/list.tsx
+7 -3
View File
@@ -47,8 +47,10 @@ export default function ApprovalList() {
const navigate = useNavigate()
const location = useLocation()
// 从 location.state 获取之前的 tab，默认为 'my'
const initialTab = ((location.state as any)?.fromTab as string) || 'my'
// 优先从 sessionStorage 恢复 tab，其次从 location.state，最后默认为 'my'
const savedTab = sessionStorage.getItem('approval-tab') as string
const stateTab = ((location.state as any)?.fromTab as string) || undefined
const initialTab = (savedTab && ['my', 'pending', 'approved', 'cc'].includes(savedTab)) ? savedTab : (stateTab || 'my')
const [activeTab, setActiveTab] = useState<'my' | 'pending' | 'approved' | 'cc'>(initialTab)
const [list, setList] = useState<ApprovalItem[]>([])
const [loading, setLoading] = useState(false)
@@ -117,7 +119,9 @@ export default function ApprovalList() {
// 切换标签
const handleTabChange = (key: string) => {
console.log('🔄 Tab changing from', activeTab, 'to', key)
setActiveTab(key as 'my' | 'pending' | 'approved')
setActiveTab(key as 'my' | 'pending' | 'approved' | 'cc')
// 保存 tab 到 sessionStorage
sessionStorage.setItem('approval-tab', key)
setList([])
setHasMore(false)
setPage(1)
frontend/src/pages/business-trip/list.tsx
+6 -2
View File
@@ -33,8 +33,10 @@ export default function BusinessTripList() {
const navigate = useNavigate()
const location = useLocation()
// 从 location.state 获取之前的 tab，默认为 'my'
const initialTab = ((location.state as any)?.fromTab as string) || 'my'
// 优先从 sessionStorage 恢复 tab，其次从 location.state，最后默认为 'my'
const savedTab = sessionStorage.getItem('business-trip-tab') as string
const stateTab = ((location.state as any)?.fromTab as string) || undefined
const initialTab = (savedTab && ['my', 'pending', 'approved'].includes(savedTab)) ? savedTab : (stateTab || 'my')
const [activeTab, setActiveTab] = useState<'my' | 'pending' | 'approved'>(initialTab)
const [list, setList] = useState<BusinessTripItem[]>([])
const [loading, setLoading] = useState(false)
@@ -77,6 +79,8 @@ export default function BusinessTripList() {
// 切换标签
const handleTabChange = (key: string) => {
setActiveTab(key as 'my' | 'pending' | 'approved')
// 保存 tab 到 sessionStorage
sessionStorage.setItem('business-trip-tab', key)
setList([])
setHasMore(true)
setPage(1)