mirror of
https://github.com/SECTL/SecScore.git
synced 2026-07-19 12:34:22 +08:00
Merge branch 'main' of https://github.com/SECTL/SecScore
This commit is contained in:
Yukino_fox
+303
-54
@@ -1,4 +1,4 @@
|
||||
import { Layout, Modal, Input, message, ConfigProvider, theme as antTheme } from "antd"
|
||||
import { Layout, Modal, Input, message, ConfigProvider, theme as antTheme, Drawer } from "antd"
|
||||
import {
|
||||
HomeOutlined,
|
||||
SettingOutlined,
|
||||
@@ -10,6 +10,9 @@ import {
|
||||
UnorderedListOutlined,
|
||||
FileTextOutlined,
|
||||
MoreOutlined,
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
HolderOutlined,
|
||||
} from "@ant-design/icons"
|
||||
import { useEffect, useMemo, useRef, useState } from "react"
|
||||
import { HashRouter, useLocation, useNavigate, Routes, Route } from "react-router-dom"
|
||||
@@ -25,6 +28,7 @@ import {
|
||||
} from "./shared/mobileNavigation"
|
||||
|
||||
const DEFAULT_MOBILE_BOTTOM_NAV_ITEMS: MobileNavKey[] = MOBILE_NAV_ITEMS.map((item) => item.key)
|
||||
const DEFAULT_MOBILE_BOTTOM_PRIMARY_KEYS: MobileNavKey[] = DEFAULT_MOBILE_BOTTOM_NAV_ITEMS.slice(0, 4)
|
||||
|
||||
function MainContent(): React.JSX.Element {
|
||||
const { t } = useTranslation()
|
||||
@@ -35,6 +39,13 @@ function MainContent(): React.JSX.Element {
|
||||
const { isIosDevice, isAndroidDevice, defaultPortraitMode } = useMemo(getMobileDeviceInfo, [])
|
||||
const [immersiveMode, setImmersiveMode] = useState(false)
|
||||
|
||||
const normalizeStoredBottomKeys = (raw: unknown): MobileNavKey[] => {
|
||||
if (Array.isArray(raw)) {
|
||||
return sanitizeMobileNavKeys(raw, []).slice(0, 4)
|
||||
}
|
||||
return DEFAULT_MOBILE_BOTTOM_PRIMARY_KEYS
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const api = (window as any).api
|
||||
if (!api) return
|
||||
@@ -81,6 +92,14 @@ function MainContent(): React.JSX.Element {
|
||||
DEFAULT_MOBILE_BOTTOM_NAV_ITEMS
|
||||
)
|
||||
const [moreNavVisible, setMoreNavVisible] = useState(false)
|
||||
const [editingNav, setEditingNav] = useState(false)
|
||||
const [editingBottomNavKeys, setEditingBottomNavKeys] = useState<MobileNavKey[]>([])
|
||||
const [editingMoreNavKeys, setEditingMoreNavKeys] = useState<MobileNavKey[]>([])
|
||||
const [draggingNavKey, setDraggingNavKey] = useState<MobileNavKey | null>(null)
|
||||
const [draggingFromList, setDraggingFromList] = useState<"bottom" | "more" | null>(null)
|
||||
const [dragOverSlot, setDragOverSlot] = useState<{ list: "bottom" | "more"; index: number } | null>(
|
||||
null
|
||||
)
|
||||
const [isPortraitMode] = useState(defaultPortraitMode)
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultPortraitMode)
|
||||
const [floatingSidebarExpanded, setFloatingSidebarExpanded] = useState(false)
|
||||
@@ -131,12 +150,7 @@ function MainContent(): React.JSX.Element {
|
||||
}
|
||||
const settingsRes = await (window as any).api.getAllSettings()
|
||||
if (settingsRes?.success && settingsRes.data) {
|
||||
setMobileBottomNavItems(
|
||||
sanitizeMobileNavKeys(
|
||||
settingsRes.data.mobile_bottom_nav_items,
|
||||
DEFAULT_MOBILE_BOTTOM_NAV_ITEMS
|
||||
)
|
||||
)
|
||||
setMobileBottomNavItems(normalizeStoredBottomKeys(settingsRes.data.mobile_bottom_nav_items))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -153,9 +167,7 @@ function MainContent(): React.JSX.Element {
|
||||
api
|
||||
.onSettingChanged((change: { key?: string; value?: unknown }) => {
|
||||
if (change?.key !== "mobile_bottom_nav_items") return
|
||||
setMobileBottomNavItems(
|
||||
sanitizeMobileNavKeys(change.value, DEFAULT_MOBILE_BOTTOM_NAV_ITEMS)
|
||||
)
|
||||
setMobileBottomNavItems(normalizeStoredBottomKeys(change.value))
|
||||
})
|
||||
.then((fn: () => void) => {
|
||||
if (disposed) {
|
||||
@@ -370,6 +382,7 @@ function MainContent(): React.JSX.Element {
|
||||
const onMenuChange = (v: string) => {
|
||||
const key = String(v)
|
||||
setMoreNavVisible(false)
|
||||
setEditingNav(false)
|
||||
if (immersiveMode && key !== "home") return
|
||||
if (key === "home") navigate("/")
|
||||
if (key === "students") navigate("/students")
|
||||
@@ -429,33 +442,96 @@ function MainContent(): React.JSX.Element {
|
||||
settings: <SettingOutlined style={{ fontSize: "18px" }} />,
|
||||
}
|
||||
|
||||
const mobileBottomVisibleItems = useMemo(() => {
|
||||
const preferredKeys = sanitizeMobileNavKeys(
|
||||
mobileBottomNavItems,
|
||||
DEFAULT_MOBILE_BOTTOM_NAV_ITEMS
|
||||
).slice()
|
||||
for (const baseKey of ["home", "settings"] as const) {
|
||||
if (!preferredKeys.includes(baseKey)) {
|
||||
preferredKeys.push(baseKey)
|
||||
}
|
||||
}
|
||||
|
||||
return preferredKeys
|
||||
.map((key) => MOBILE_NAV_ITEMS.find((item) => item.key === key))
|
||||
.filter((item): item is (typeof MOBILE_NAV_ITEMS)[number] => Boolean(item))
|
||||
.filter((item) => !(item.adminOnly && permission !== "admin"))
|
||||
}, [mobileBottomNavItems, permission])
|
||||
|
||||
const mobileNavAvailableItems = useMemo(
|
||||
() => MOBILE_NAV_ITEMS.filter((item) => !(item.adminOnly && permission !== "admin")),
|
||||
[permission]
|
||||
)
|
||||
const mobileBottomSelectedKeys = useMemo(() => {
|
||||
const availableKeySet = new Set(mobileNavAvailableItems.map((item) => item.key))
|
||||
return sanitizeMobileNavKeys(mobileBottomNavItems, [])
|
||||
.filter((key) => availableKeySet.has(key))
|
||||
.slice(0, 4)
|
||||
}, [mobileBottomNavItems, mobileNavAvailableItems])
|
||||
const mobileBottomPrimaryItems = useMemo(
|
||||
() => mobileBottomVisibleItems.slice(0, 4),
|
||||
[mobileBottomVisibleItems]
|
||||
() =>
|
||||
mobileBottomSelectedKeys
|
||||
.map((key) => mobileNavAvailableItems.find((item) => item.key === key))
|
||||
.filter((item): item is (typeof MOBILE_NAV_ITEMS)[number] => Boolean(item)),
|
||||
[mobileBottomSelectedKeys, mobileNavAvailableItems]
|
||||
)
|
||||
const mobileBottomOverflowItems = useMemo(
|
||||
() => mobileBottomVisibleItems.slice(4),
|
||||
[mobileBottomVisibleItems]
|
||||
() => mobileNavAvailableItems.filter((item) => !mobileBottomSelectedKeys.includes(item.key)),
|
||||
[mobileNavAvailableItems, mobileBottomSelectedKeys]
|
||||
)
|
||||
const isMoreActive = mobileBottomOverflowItems.some((item) => item.key === activeMenu)
|
||||
|
||||
const openEditNav = () => {
|
||||
const savedKeys = mobileBottomSelectedKeys
|
||||
const missingKeys = mobileNavAvailableItems
|
||||
.map((item) => item.key)
|
||||
.filter((key) => !savedKeys.includes(key))
|
||||
setEditingBottomNavKeys(savedKeys)
|
||||
setEditingMoreNavKeys(missingKeys)
|
||||
setEditingNav(true)
|
||||
setDraggingNavKey(null)
|
||||
setDraggingFromList(null)
|
||||
setDragOverSlot(null)
|
||||
}
|
||||
|
||||
const dropPlaceholder = (
|
||||
<div
|
||||
style={{
|
||||
border: "1px dashed var(--ant-color-primary)",
|
||||
borderRadius: "10px",
|
||||
background: "color-mix(in srgb, var(--ant-color-primary) 10%, transparent)",
|
||||
minHeight: "44px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
const persistMobileBottomKeys = async (nextKeys: MobileNavKey[]) => {
|
||||
const api = (window as any).api
|
||||
if (!api) return
|
||||
const next = sanitizeMobileNavKeys(nextKeys, [])
|
||||
const res = await api.setSetting("mobile_bottom_nav_items", next)
|
||||
if (res.success) {
|
||||
setMobileBottomNavItems(next)
|
||||
} else {
|
||||
messageApi.error(res.message || t("settings.general.saveFailed"))
|
||||
}
|
||||
}
|
||||
|
||||
const handleDropToList = (targetList: "bottom" | "more", targetIndex: number) => {
|
||||
if (!draggingNavKey || !draggingFromList) return
|
||||
const bottom = editingBottomNavKeys.slice()
|
||||
const more = editingMoreNavKeys.slice()
|
||||
|
||||
const source = draggingFromList === "bottom" ? bottom : more
|
||||
const sourceIndex = source.indexOf(draggingNavKey)
|
||||
if (sourceIndex < 0) return
|
||||
source.splice(sourceIndex, 1)
|
||||
|
||||
if (targetList === "bottom" && draggingFromList === "more" && bottom.length >= 4) {
|
||||
setDraggingNavKey(null)
|
||||
setDraggingFromList(null)
|
||||
setDragOverSlot(null)
|
||||
messageApi.warning(t("settings.mobile.bottomMaxHint", "底栏最多 4 个"))
|
||||
return
|
||||
}
|
||||
|
||||
const target = targetList === "bottom" ? bottom : more
|
||||
const clampedIndex = Math.max(0, Math.min(targetIndex, target.length))
|
||||
target.splice(clampedIndex, 0, draggingNavKey)
|
||||
|
||||
setEditingBottomNavKeys(bottom)
|
||||
setEditingMoreNavKeys(more)
|
||||
void persistMobileBottomKeys(bottom)
|
||||
setDraggingNavKey(null)
|
||||
setDraggingFromList(null)
|
||||
setDragOverSlot(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
@@ -575,38 +651,211 @@ function MainContent(): React.JSX.Element {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Modal
|
||||
title={t("common.more", "更多")}
|
||||
<Drawer
|
||||
title={editingNav ? t("common.edit") : t("common.more", "更多")}
|
||||
placement="bottom"
|
||||
open={moreNavVisible}
|
||||
onCancel={() => setMoreNavVisible(false)}
|
||||
footer={null}
|
||||
width={360}
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
|
||||
{mobileBottomOverflowItems.map((item) => (
|
||||
onClose={() => {
|
||||
setMoreNavVisible(false)
|
||||
setEditingNav(false)
|
||||
setDraggingNavKey(null)
|
||||
setDraggingFromList(null)
|
||||
setDragOverSlot(null)
|
||||
}}
|
||||
height={editingNav ? "calc(100vh - env(safe-area-inset-top, 0px))" : "46vh"}
|
||||
styles={{
|
||||
content: {
|
||||
borderTopLeftRadius: editingNav ? 0 : "14px",
|
||||
borderTopRightRadius: editingNav ? 0 : "14px",
|
||||
background: "var(--ss-card-bg)",
|
||||
},
|
||||
header: {
|
||||
borderBottom: "1px solid var(--ss-border-color)",
|
||||
padding: "12px 16px",
|
||||
},
|
||||
body: {
|
||||
padding: "12px 16px 20px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
minHeight: 0,
|
||||
},
|
||||
}}
|
||||
extra={
|
||||
permission === "admin" &&
|
||||
(editingNav ? (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
onClick={() => onMenuChange(item.key)}
|
||||
onClick={() => setEditingNav(false)}
|
||||
style={{
|
||||
border: "1px solid var(--ss-border-color)",
|
||||
borderRadius: "10px",
|
||||
background: "var(--ss-card-bg)",
|
||||
borderRadius: "8px",
|
||||
background: "transparent",
|
||||
color: "var(--ss-text-main)",
|
||||
height: "44px",
|
||||
padding: "0 12px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
fontSize: "14px",
|
||||
padding: "4px 10px",
|
||||
}}
|
||||
>
|
||||
{mobileBottomNavIconMap[item.key]}
|
||||
<span>{t(item.labelKey)}</span>
|
||||
{t("common.finish", "完成")}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Modal>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={openEditNav}
|
||||
style={{
|
||||
border: "1px solid var(--ss-border-color)",
|
||||
borderRadius: "8px",
|
||||
background: "transparent",
|
||||
color: "var(--ss-text-main)",
|
||||
padding: "4px 10px",
|
||||
}}
|
||||
>
|
||||
{t("common.edit")}
|
||||
</button>
|
||||
))
|
||||
}
|
||||
>
|
||||
{editingNav ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "12px",
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: "12px", color: "var(--ss-text-secondary)" }}>
|
||||
{t(
|
||||
"settings.mobile.dragHint",
|
||||
"拖动可调整顺序。前 4 项显示在底栏，其余显示在“更多”。"
|
||||
)}
|
||||
</div>
|
||||
{[
|
||||
{
|
||||
list: "bottom" as const,
|
||||
title: t("settings.mobile.bottomSection", "底栏（最多 4 个）"),
|
||||
keys: editingBottomNavKeys,
|
||||
},
|
||||
{
|
||||
list: "more" as const,
|
||||
title: t("settings.mobile.moreSection", "更多"),
|
||||
keys: editingMoreNavKeys,
|
||||
},
|
||||
].map((group) => (
|
||||
<div key={group.list} style={{ marginTop: group.list === "more" ? 10 : 0 }}>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: "8px",
|
||||
fontSize: "12px",
|
||||
color: "var(--ss-text-secondary)",
|
||||
}}
|
||||
>
|
||||
{group.title}
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
|
||||
{Array.from({ length: group.keys.length + 1 }, (_, i) => {
|
||||
const key = group.keys[i]
|
||||
const item = key ? MOBILE_NAV_ITEMS.find((it) => it.key === key) : null
|
||||
return (
|
||||
<div key={`${group.list}-slot-${i}`}>
|
||||
<div
|
||||
onDragEnter={() => setDragOverSlot({ list: group.list, index: i })}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault()
|
||||
setDragOverSlot({ list: group.list, index: i })
|
||||
}}
|
||||
onDrop={() => handleDropToList(group.list, i)}
|
||||
>
|
||||
{dragOverSlot?.list === group.list && dragOverSlot?.index === i ? (
|
||||
dropPlaceholder
|
||||
) : (
|
||||
<div style={{ height: "8px" }} />
|
||||
)}
|
||||
</div>
|
||||
{key && item && (
|
||||
<button
|
||||
type="button"
|
||||
draggable
|
||||
onDragStart={() => {
|
||||
setDraggingNavKey(key)
|
||||
setDraggingFromList(group.list)
|
||||
}}
|
||||
onDragEnd={() => {
|
||||
setDraggingNavKey(null)
|
||||
setDraggingFromList(null)
|
||||
setDragOverSlot(null)
|
||||
}}
|
||||
style={{
|
||||
border: "1px solid var(--ss-border-color)",
|
||||
borderRadius: "10px",
|
||||
background: "var(--ss-bg-color)",
|
||||
color: "var(--ss-text-main)",
|
||||
minHeight: "44px",
|
||||
padding: "8px 10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: "8px",
|
||||
fontSize: "14px",
|
||||
opacity: draggingNavKey === key ? 0.35 : 1,
|
||||
transform: draggingNavKey === key ? "scale(0.985)" : "scale(1)",
|
||||
transition: "opacity 120ms ease, transform 120ms ease",
|
||||
cursor: "grab",
|
||||
}}
|
||||
>
|
||||
<span style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
||||
{mobileBottomNavIconMap[key]}
|
||||
<span>{t(item.labelKey)}</span>
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: "4px",
|
||||
color: "var(--ss-text-secondary)",
|
||||
opacity: 0.9,
|
||||
}}
|
||||
>
|
||||
<UpOutlined style={{ fontSize: "11px" }} />
|
||||
<DownOutlined style={{ fontSize: "11px" }} />
|
||||
<HolderOutlined style={{ fontSize: "12px" }} />
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
|
||||
{mobileBottomOverflowItems.map((item) => (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
onClick={() => onMenuChange(item.key)}
|
||||
style={{
|
||||
border: "1px solid var(--ss-border-color)",
|
||||
borderRadius: "10px",
|
||||
background: "var(--ss-bg-color)",
|
||||
color: "var(--ss-text-main)",
|
||||
height: "44px",
|
||||
padding: "0 12px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
{mobileBottomNavIconMap[item.key]}
|
||||
<span>{t(item.labelKey)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Drawer>
|
||||
|
||||
<OOBE visible={wizardVisible} onComplete={() => setWizardVisible(false)} />
|
||||
|
||||
|
||||
@@ -380,7 +380,7 @@ export function ContentArea({
|
||||
/>
|
||||
<Route
|
||||
path="/settings"
|
||||
element={<Settings permission={permission} mobileNavigationEnabled={isPortraitMode} />}
|
||||
element={<Settings permission={permission} />}
|
||||
/>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
|
||||
+2
-107
@@ -1,5 +1,4 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react"
|
||||
import { RightOutlined } from "@ant-design/icons"
|
||||
import {
|
||||
Tabs,
|
||||
Card,
|
||||
@@ -18,12 +17,6 @@ import { ThemeQuickSettings } from "./ThemeQuickSettings"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { changeLanguage, getCurrentLanguage, languageOptions, AppLanguage } from "../i18n"
|
||||
import { useResponsive } from "../hooks/useResponsive"
|
||||
import { useLocation, useNavigate } from "react-router-dom"
|
||||
import {
|
||||
MOBILE_NAV_ITEMS,
|
||||
MobileNavKey,
|
||||
sanitizeMobileNavKeys,
|
||||
} from "../shared/mobileNavigation"
|
||||
|
||||
type permissionLevel = "admin" | "points" | "view"
|
||||
type appSettings = {
|
||||
@@ -33,11 +26,7 @@ type appSettings = {
|
||||
search_keyboard_layout?: "t9" | "qwerty26"
|
||||
disable_search_keyboard?: boolean
|
||||
auto_score_enabled?: boolean
|
||||
mobile_bottom_nav_items?: MobileNavKey[]
|
||||
}
|
||||
|
||||
const DEFAULT_MOBILE_BOTTOM_NAV_ITEMS: MobileNavKey[] = MOBILE_NAV_ITEMS.map((item) => item.key)
|
||||
|
||||
const withTimeout = async (
|
||||
promise: Promise<any>,
|
||||
ms: number,
|
||||
@@ -58,11 +47,8 @@ const withTimeout = async (
|
||||
|
||||
export const Settings: React.FC<{
|
||||
permission: permissionLevel
|
||||
mobileNavigationEnabled?: boolean
|
||||
}> = ({ permission, mobileNavigationEnabled = false }) => {
|
||||
}> = ({ permission }) => {
|
||||
const { t } = useTranslation()
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const breakpoint = useResponsive()
|
||||
const isMobile = breakpoint === "xs" || breakpoint === "sm"
|
||||
const [activeTab, setActiveTab] = useState("appearance")
|
||||
@@ -73,7 +59,6 @@ export const Settings: React.FC<{
|
||||
window_zoom: "1.0",
|
||||
search_keyboard_layout: "qwerty26",
|
||||
disable_search_keyboard: false,
|
||||
mobile_bottom_nav_items: DEFAULT_MOBILE_BOTTOM_NAV_ITEMS,
|
||||
})
|
||||
|
||||
const [securityStatus, setSecurityStatus] = useState<{
|
||||
@@ -148,19 +133,6 @@ export const Settings: React.FC<{
|
||||
)
|
||||
}, [permission, t])
|
||||
|
||||
const mobilePageItems = useMemo(
|
||||
() =>
|
||||
MOBILE_NAV_ITEMS.filter((item) => item.key !== "home" && item.key !== "settings").map(
|
||||
(item) => ({
|
||||
key: item.key,
|
||||
path: item.path,
|
||||
label: t(item.labelKey),
|
||||
disabled: Boolean(item.adminOnly) && !canAdmin,
|
||||
})
|
||||
),
|
||||
[canAdmin, t]
|
||||
)
|
||||
|
||||
const emitDataUpdated = (category: "events" | "students" | "reasons" | "all") => {
|
||||
window.dispatchEvent(new CustomEvent("ss:data-updated", { detail: { category } }))
|
||||
}
|
||||
@@ -184,13 +156,7 @@ export const Settings: React.FC<{
|
||||
if (!(window as any).api) return
|
||||
const res = await (window as any).api.getAllSettings()
|
||||
if (res.success && res.data) {
|
||||
setSettings({
|
||||
...res.data,
|
||||
mobile_bottom_nav_items: sanitizeMobileNavKeys(
|
||||
res.data.mobile_bottom_nav_items,
|
||||
DEFAULT_MOBILE_BOTTOM_NAV_ITEMS
|
||||
),
|
||||
})
|
||||
setSettings(res.data)
|
||||
setPgConnectionString(res.data.pg_connection_string || "")
|
||||
setPgConnectionStatus(res.data.pg_connection_status || { connected: true, type: "sqlite" })
|
||||
}
|
||||
@@ -220,15 +186,6 @@ export const Settings: React.FC<{
|
||||
return { ...prev, disable_search_keyboard: Boolean(change.value) }
|
||||
if (change?.key === "auto_score_enabled")
|
||||
return { ...prev, auto_score_enabled: change.value }
|
||||
if (change?.key === "mobile_bottom_nav_items") {
|
||||
return {
|
||||
...prev,
|
||||
mobile_bottom_nav_items: sanitizeMobileNavKeys(
|
||||
change.value,
|
||||
DEFAULT_MOBILE_BOTTOM_NAV_ITEMS
|
||||
),
|
||||
}
|
||||
}
|
||||
return prev
|
||||
})
|
||||
})
|
||||
@@ -637,18 +594,6 @@ export const Settings: React.FC<{
|
||||
})
|
||||
}
|
||||
|
||||
const handleMobileBottomNavChange = async (value: string[]) => {
|
||||
if (!(window as any).api) return
|
||||
const next = sanitizeMobileNavKeys(value, DEFAULT_MOBILE_BOTTOM_NAV_ITEMS)
|
||||
const res = await (window as any).api.setSetting("mobile_bottom_nav_items", next)
|
||||
if (res.success) {
|
||||
setSettings((prev) => ({ ...prev, mobile_bottom_nav_items: next }))
|
||||
messageApi.success(t("settings.general.saved"))
|
||||
} else {
|
||||
messageApi.error(res.message || t("settings.general.saveFailed"))
|
||||
}
|
||||
}
|
||||
|
||||
const tabItems = [
|
||||
{
|
||||
key: "appearance",
|
||||
@@ -776,27 +721,6 @@ export const Settings: React.FC<{
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
{mobileNavigationEnabled && (
|
||||
<Form.Item label={t("settings.mobile.bottomNav.label")}>
|
||||
<Select
|
||||
mode="multiple"
|
||||
value={settings.mobile_bottom_nav_items || DEFAULT_MOBILE_BOTTOM_NAV_ITEMS}
|
||||
onChange={(v) => handleMobileBottomNavChange(v as string[])}
|
||||
style={{ width: "100%", maxWidth: "520px" }}
|
||||
disabled={!canAdmin}
|
||||
options={MOBILE_NAV_ITEMS.map((item) => ({
|
||||
value: item.key,
|
||||
label: t(item.labelKey),
|
||||
disabled: Boolean(item.adminOnly) && !canAdmin,
|
||||
}))}
|
||||
/>
|
||||
<div
|
||||
style={{ marginTop: "4px", fontSize: "12px", color: "var(--ss-text-secondary)" }}
|
||||
>
|
||||
{t("settings.mobile.bottomNav.hint")}
|
||||
</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</Card>
|
||||
),
|
||||
@@ -1359,35 +1283,6 @@ export const Settings: React.FC<{
|
||||
{permissionTag}
|
||||
</div>
|
||||
|
||||
{mobileNavigationEnabled && isMobile && (
|
||||
<Card
|
||||
title={t("settings.mobile.navigationTitle", "页面入口")}
|
||||
bodyStyle={{ padding: 0 }}
|
||||
style={{
|
||||
marginBottom: "16px",
|
||||
backgroundColor: "var(--ss-card-bg)",
|
||||
color: "var(--ss-text-main)",
|
||||
}}
|
||||
>
|
||||
<div className="ss-settings-mobile-nav-list">
|
||||
{mobilePageItems.map((item) => (
|
||||
<Button
|
||||
key={item.key}
|
||||
disabled={item.disabled}
|
||||
type="text"
|
||||
className={`ss-settings-mobile-nav-item${
|
||||
location.pathname.startsWith(item.path) ? " is-active" : ""
|
||||
}`}
|
||||
onClick={() => navigate(item.path)}
|
||||
>
|
||||
<span className="ss-settings-mobile-nav-item-label">{item.label}</span>
|
||||
<RightOutlined className="ss-settings-mobile-nav-item-arrow" />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} />
|
||||
|
||||
<Modal
|
||||
|
||||
@@ -167,7 +167,13 @@
|
||||
"bottomNav": {
|
||||
"label": "Bottom Navigation Features",
|
||||
"hint": "Choose which features appear in the mobile bottom bar. The bar shows up to 4 items; extra items go under \"More\"."
|
||||
}
|
||||
},
|
||||
"dragHint": "Drag to reorder. The first 4 items appear in the bottom bar; the rest stay in \"More\".",
|
||||
"dropHere": "Release to drop here",
|
||||
"bottomSection": "Bottom Bar (up to 4)",
|
||||
"moreSection": "More",
|
||||
"moveToMore": "Move to More",
|
||||
"moveToBottom": "Move to Bottom"
|
||||
},
|
||||
"zoomUpdated": "Interface zoom updated",
|
||||
"updateFailed": "Update failed",
|
||||
|
||||
@@ -167,7 +167,13 @@
|
||||
"bottomNav": {
|
||||
"label": "底部导航功能",
|
||||
"hint": "可选择要出现在手机底部导航的功能。底栏最多展示 4 项，其余会自动收纳到“更多”。"
|
||||
}
|
||||
},
|
||||
"dragHint": "拖动可调整顺序。前 4 项显示在底栏，其余显示在“更多”。",
|
||||
"dropHere": "松手后放到这里",
|
||||
"bottomSection": "底栏（最多 4 个）",
|
||||
"moreSection": "更多",
|
||||
"moveToMore": "移到更多",
|
||||
"moveToBottom": "移到底栏"
|
||||
},
|
||||
"zoomUpdated": "界面缩放已更新",
|
||||
"updateFailed": "更新失败",
|
||||
|
||||
Reference in New Issue
Block a user