fix: respect dashboard content visibility settings (#4975)

This commit is contained in:
Seefs 2026-05-19 18:46:21 +08:00 committed by GitHub
parent 0d4b25795a
commit 2d1ca15384
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 73 additions and 21 deletions

View File

@ -52,7 +52,10 @@ import {
} from '@/components/page-transition'
import { fetchTokenKey, getApiKeys } from '@/features/keys/api'
import type { ApiKey } from '@/features/keys/types'
import { useApiInfo } from '../../hooks/use-status-data'
import {
useApiInfo,
useDashboardContentVisibility,
} from '../../hooks/use-status-data'
import { AnnouncementsPanel } from './announcements-panel'
import { ApiInfoPanel } from './api-info-panel'
import { FAQPanel } from './faq-panel'
@ -423,6 +426,12 @@ export function OverviewDashboard() {
const { t } = useTranslation()
const user = useAuthStore((state) => state.auth.user)
const { items: apiInfoItems } = useApiInfo()
const {
apiInfo: showApiInfoPanel,
announcements: showAnnouncementsPanel,
faq: showFAQPanel,
uptimeKuma: showUptimePanel,
} = useDashboardContentVisibility()
const [manualSetupGuideExpanded, setManualSetupGuideExpanded] = useState<
boolean | null
>(() => getSavedSetupGuideExpanded())
@ -574,6 +583,9 @@ export function OverviewDashboard() {
const completedStepCount = startSteps.filter((step) => step.completed).length
const setupComplete = completedStepCount === startSteps.length
const setupGuideExpanded = manualSetupGuideExpanded ?? !setupComplete
const showLeftContentPanels =
isAdmin || showApiInfoPanel || showAnnouncementsPanel || showFAQPanel
const showContentPanels = showLeftContentPanels || showUptimePanel
const handleSetupGuideToggle = () => {
const nextExpanded = !setupGuideExpanded
@ -715,27 +727,52 @@ export function OverviewDashboard() {
<SummaryCards />
<CardStaggerContainer className='grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_22rem]'>
<div className='grid min-w-0 grid-cols-1 gap-4 lg:grid-cols-2'>
{isAdmin && (
<CardStaggerItem className='lg:col-span-2'>
<PerformanceHealthPanel />
{showContentPanels && (
<CardStaggerContainer
className={cn(
'grid grid-cols-1 gap-4',
showLeftContentPanels &&
showUptimePanel &&
'xl:grid-cols-[minmax(0,1fr)_22rem]'
)}
>
{showLeftContentPanels && (
<div
className={cn(
'grid min-w-0 grid-cols-1 gap-4',
(showApiInfoPanel || showAnnouncementsPanel || showFAQPanel) &&
'lg:grid-cols-2'
)}
>
{isAdmin && (
<CardStaggerItem className='lg:col-span-2'>
<PerformanceHealthPanel />
</CardStaggerItem>
)}
{showApiInfoPanel && (
<CardStaggerItem>
<ApiInfoPanel />
</CardStaggerItem>
)}
{showAnnouncementsPanel && (
<CardStaggerItem>
<AnnouncementsPanel />
</CardStaggerItem>
)}
{showFAQPanel && (
<CardStaggerItem>
<FAQPanel />
</CardStaggerItem>
)}
</div>
)}
{showUptimePanel && (
<CardStaggerItem>
<UptimePanel />
</CardStaggerItem>
)}
<CardStaggerItem>
<ApiInfoPanel />
</CardStaggerItem>
<CardStaggerItem>
<AnnouncementsPanel />
</CardStaggerItem>
<CardStaggerItem>
<FAQPanel />
</CardStaggerItem>
</div>
<CardStaggerItem>
<UptimePanel />
</CardStaggerItem>
</CardStaggerContainer>
</CardStaggerContainer>
)}
</div>
)
}

View File

@ -27,7 +27,7 @@ export function useStatusData<T = unknown>(
dataKey: string
): { items: T[]; loading: boolean } {
const { status, loading } = useStatus()
const enabled = status?.[enabledKey] ?? false
const enabled = status ? status[enabledKey] !== false : false
const items = (enabled ? status?.[dataKey] || [] : []) as T[]
return { items, loading }
@ -56,3 +56,18 @@ export function useAnnouncements() {
export function useFAQ() {
return useStatusData<FAQItem>('faq_enabled', 'faq')
}
/**
* Get dashboard content panel visibility
*/
export function useDashboardContentVisibility() {
const { status } = useStatus()
const hasStatus = Boolean(status)
return {
apiInfo: hasStatus && status?.api_info_enabled !== false,
announcements: hasStatus && status?.announcements_enabled !== false,
faq: hasStatus && status?.faq_enabled !== false,
uptimeKuma: hasStatus && status?.uptime_kuma_enabled !== false,
}
}