feat: 前台页头加明暗切换,刷新图标换成闪电
- settings.site.actions 新增 theme(默认开),后台「操作工具」可关 - 前台页头:月亮/太阳按钮,点击写回 site.theme,前后台同步; 未登录时不显示(设置接口需要会话) - 刷新图标 refresh_3_line -> lightning_line,刷新期间仍旋转
This commit is contained in:
@@ -6,6 +6,7 @@ import {
|
||||
SearchField,
|
||||
Space,
|
||||
Toaster,
|
||||
toast,
|
||||
type MenuItem,
|
||||
} from '@stash/ui'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
@@ -26,6 +27,7 @@ import { useProjects } from './useProjects'
|
||||
import { fetchSession, logout, type SessionState } from './auth'
|
||||
import {
|
||||
fetchSettings,
|
||||
saveSettings,
|
||||
type SettingsDocument,
|
||||
type SiteSettings,
|
||||
} from './settings'
|
||||
@@ -287,7 +289,7 @@ export default function AppNext() {
|
||||
favicon: '',
|
||||
theme: 'auto',
|
||||
brand: { name: 'STASH', mark: 'S', logo: '' },
|
||||
actions: { refresh: true, settings: true, session: true },
|
||||
actions: { theme: true, refresh: true, settings: true, session: true },
|
||||
},
|
||||
}
|
||||
|
||||
@@ -298,6 +300,27 @@ export default function AppNext() {
|
||||
document.documentElement.dataset.scheme = site.site.theme
|
||||
}, [site.site.theme])
|
||||
|
||||
/** 当前实际是深色吗(auto 时按系统偏好算) */
|
||||
const isDark =
|
||||
site.site.theme === 'dark' ||
|
||||
(site.site.theme === 'auto' &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
|
||||
/** 页头的明暗切换:写回站点设置,前后台一起变;只有登录后才会显示 */
|
||||
const toggleTheme = async () => {
|
||||
if (settings === null) return
|
||||
const next = isDark ? 'light' : 'dark'
|
||||
const result = await saveSettings(settings.version, {
|
||||
...settings.settings,
|
||||
site: { ...settings.settings.site, theme: next },
|
||||
})
|
||||
if (result.ok) {
|
||||
setSettings(result.document)
|
||||
return
|
||||
}
|
||||
toast.error(result.error)
|
||||
}
|
||||
|
||||
// 站点级设置:浏览器标签标题与 favicon(空值回落到内置)
|
||||
useEffect(() => {
|
||||
const title = site.site.title.trim()
|
||||
@@ -648,6 +671,8 @@ export default function AppNext() {
|
||||
authenticated={session?.authenticated === true}
|
||||
username={session?.username ?? undefined}
|
||||
refreshing={refreshing}
|
||||
dark={isDark}
|
||||
onToggleTheme={() => void toggleTheme()}
|
||||
onRefresh={() => {
|
||||
refresh()
|
||||
load()
|
||||
|
||||
Reference in New Issue
Block a user