fix: 手机端首页隐藏搜索小键盘及相关设置

This commit is contained in:
JSR
2026-03-28 09:32:55 +08:00
parent 5085f56fa8
commit 9c35a57481
2 changed files with 64 additions and 59 deletions
+9 -8
View File
@@ -113,6 +113,7 @@ export const Home: React.FC<HomeProps> = ({
const [showPinyinKeyboard, setShowPinyinKeyboard] = useState(false) const [showPinyinKeyboard, setShowPinyinKeyboard] = useState(false)
const [searchKeyboardLayout, setSearchKeyboardLayout] = useState<SearchKeyboardLayout>("qwerty26") const [searchKeyboardLayout, setSearchKeyboardLayout] = useState<SearchKeyboardLayout>("qwerty26")
const [disableSearchKeyboard, setDisableSearchKeyboard] = useState(false) const [disableSearchKeyboard, setDisableSearchKeyboard] = useState(false)
const canShowSearchKeyboard = !isMobile && !disableSearchKeyboard
const scrollContainerRef = useRef<HTMLDivElement>(null) const scrollContainerRef = useRef<HTMLDivElement>(null)
const groupRefs = useRef<Record<string, HTMLDivElement | null>>({}) const groupRefs = useRef<Record<string, HTMLDivElement | null>>({})
@@ -301,10 +302,10 @@ export const Home: React.FC<HomeProps> = ({
}, []) }, [])
useEffect(() => { useEffect(() => {
if (disableSearchKeyboard && showPinyinKeyboard) { if (!canShowSearchKeyboard && showPinyinKeyboard) {
setShowPinyinKeyboard(false) setShowPinyinKeyboard(false)
} }
}, [disableSearchKeyboard, showPinyinKeyboard]) }, [canShowSearchKeyboard, showPinyinKeyboard])
useEffect(() => { useEffect(() => {
const onDocumentClick = (e: MouseEvent) => { const onDocumentClick = (e: MouseEvent) => {
@@ -2269,10 +2270,10 @@ export const Home: React.FC<HomeProps> = ({
value={searchKeyword} value={searchKeyword}
onChange={(e) => setSearchKeyword(e.target.value)} onChange={(e) => setSearchKeyword(e.target.value)}
onFocus={() => { onFocus={() => {
if (!disableSearchKeyboard) setShowPinyinKeyboard(true) if (canShowSearchKeyboard) setShowPinyinKeyboard(true)
}} }}
onClick={() => { onClick={() => {
if (!disableSearchKeyboard) setShowPinyinKeyboard(true) if (canShowSearchKeyboard) setShowPinyinKeyboard(true)
}} }}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Escape") setShowPinyinKeyboard(false) if (e.key === "Escape") setShowPinyinKeyboard(false)
@@ -2282,7 +2283,7 @@ export const Home: React.FC<HomeProps> = ({
allowClear allowClear
style={{ width: "100%" }} style={{ width: "100%" }}
/> />
{!disableSearchKeyboard && showPinyinKeyboard && ( {canShowSearchKeyboard && showPinyinKeyboard && (
<div <div
style={{ style={{
position: "absolute", position: "absolute",
@@ -2545,10 +2546,10 @@ export const Home: React.FC<HomeProps> = ({
value={searchKeyword} value={searchKeyword}
onChange={(e) => setSearchKeyword(e.target.value)} onChange={(e) => setSearchKeyword(e.target.value)}
onFocus={() => { onFocus={() => {
if (!disableSearchKeyboard) setShowPinyinKeyboard(true) if (canShowSearchKeyboard) setShowPinyinKeyboard(true)
}} }}
onClick={() => { onClick={() => {
if (!disableSearchKeyboard) setShowPinyinKeyboard(true) if (canShowSearchKeyboard) setShowPinyinKeyboard(true)
}} }}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Escape") setShowPinyinKeyboard(false) if (e.key === "Escape") setShowPinyinKeyboard(false)
@@ -2606,7 +2607,7 @@ export const Home: React.FC<HomeProps> = ({
{rewardMode ? t("rewardExchange.exitMode") : t("rewardExchange.enterMode")} {rewardMode ? t("rewardExchange.exitMode") : t("rewardExchange.enterMode")}
</Button> </Button>
<div style={{ flexShrink: 0 }}>{batchToolbar}</div> <div style={{ flexShrink: 0 }}>{batchToolbar}</div>
{!disableSearchKeyboard && showPinyinKeyboard && ( {canShowSearchKeyboard && showPinyinKeyboard && (
<div <div
style={{ style={{
position: "absolute", position: "absolute",
+55 -51
View File
@@ -655,58 +655,62 @@ export const Settings: React.FC<{
<Divider /> <Divider />
<Form layout="horizontal" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}> <Form layout="horizontal" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
<Form.Item label={t("settings.searchKeyboard.title")}> {!isMobile && (
<Select <>
value={settings.search_keyboard_layout || "qwerty26"} <Form.Item label={t("settings.searchKeyboard.title")}>
onChange={async (v) => { <Select
if (!(window as any).api) return value={settings.search_keyboard_layout || "qwerty26"}
const next = String(v) as "t9" | "qwerty26" onChange={async (v) => {
const res = await (window as any).api.setSetting("search_keyboard_layout", next) if (!(window as any).api) return
if (res.success) { const next = String(v) as "t9" | "qwerty26"
setSettings((prev) => ({ ...prev, search_keyboard_layout: next })) const res = await (window as any).api.setSetting("search_keyboard_layout", next)
messageApi.success(t("settings.general.saved")) if (res.success) {
} else { setSettings((prev) => ({ ...prev, search_keyboard_layout: next }))
messageApi.error(res.message || t("settings.general.saveFailed")) messageApi.success(t("settings.general.saved"))
} } else {
}} messageApi.error(res.message || t("settings.general.saveFailed"))
style={{ width: "320px" }} }
disabled={!canAdmin} }}
options={[ style={{ width: "320px" }}
{ value: "qwerty26", label: t("settings.searchKeyboard.options.qwerty26") }, disabled={!canAdmin}
{ value: "t9", label: t("settings.searchKeyboard.options.t9") }, options={[
]} { value: "qwerty26", label: t("settings.searchKeyboard.options.qwerty26") },
/> { value: "t9", label: t("settings.searchKeyboard.options.t9") },
<div ]}
style={{ marginTop: "4px", fontSize: "12px", color: "var(--ss-text-secondary)" }} />
> <div
{t("settings.searchKeyboard.hint")} style={{ marginTop: "4px", fontSize: "12px", color: "var(--ss-text-secondary)" }}
</div> >
</Form.Item> {t("settings.searchKeyboard.hint")}
</div>
</Form.Item>
<Form.Item label={t("settings.searchKeyboard.disableToggle")}> <Form.Item label={t("settings.searchKeyboard.disableToggle")}>
<Switch <Switch
checked={Boolean(settings.disable_search_keyboard)} checked={Boolean(settings.disable_search_keyboard)}
onChange={async (checked) => { onChange={async (checked) => {
if (!(window as any).api) return if (!(window as any).api) return
const res = await (window as any).api.setSetting( const res = await (window as any).api.setSetting(
"disable_search_keyboard", "disable_search_keyboard",
checked checked
) )
if (res.success) { if (res.success) {
setSettings((prev) => ({ ...prev, disable_search_keyboard: checked })) setSettings((prev) => ({ ...prev, disable_search_keyboard: checked }))
messageApi.success(t("settings.general.saved")) messageApi.success(t("settings.general.saved"))
} else { } else {
messageApi.error(res.message || t("settings.general.saveFailed")) messageApi.error(res.message || t("settings.general.saveFailed"))
} }
}} }}
disabled={!canAdmin} disabled={!canAdmin}
/> />
<div <div
style={{ marginTop: "4px", fontSize: "12px", color: "var(--ss-text-secondary)" }} style={{ marginTop: "4px", fontSize: "12px", color: "var(--ss-text-secondary)" }}
> >
{t("settings.searchKeyboard.disableHint")} {t("settings.searchKeyboard.disableHint")}
</div> </div>
</Form.Item> </Form.Item>
</>
)}
<Form.Item label={t("settings.interfaceZoom")}> <Form.Item label={t("settings.interfaceZoom")}>
<Select <Select