拆分设置界面

src/config/globalData.ts

@@ -53,6 +53,8 @@ global.lx = {
 
   jumpMyListPosition: false,
 
+  settingActiveId: 'basic',
+
   // syncKeyInfo: initValue as LX.Sync.KeyInfo,
 
   // windowInfo: {

src/lang/en_us.json

@@ -236,7 +236,6 @@
   "setting_other_log_sync_log": "Record synchronization log",
   "setting_other_log_tip_clean_success": "Log cleaning completed",
   "setting_other_log_tip_null": "The log is empty~",
-  "setting_play": "Play",
   "setting_play_cache_size": "Maximum cache size (MB)",
   "setting_play_cache_size_no_cache": "Disabled cache",
   "setting_play_cache_size_save_tip": "The cache setting is completed, it will take effect after restarting the application",
@@ -249,11 +248,12 @@
   "setting_play_show_notification_image": "Show song picture in notification bar",
   "setting_play_show_roma": "Show lyrics roman (if available)",
   "setting_play_show_translation": "Show lyrics translation (if available)",
+  "setting_player": "Play",
   "setting_player_save_play_time": "Remember playback progress",
   "setting_search": "Search settings",
   "setting_search_show_history_search": "show search history",
   "setting_search_show_hot_search": "show popular searches",
-  "setting_sync": "Synchronization [It is recommended to back up the playlist before using it for the first time]",
+  "setting_sync": "Synchronize",
   "setting_sync_address": "Local IP address: {address}",
   "setting_sync_code_blocked_ip": "The IP of the current device has been blocked by the server!",
   "setting_sync_code_fail": "Invalid connection code",

src/lang/zh_cn.json

@@ -236,7 +236,6 @@
   "setting_other_log_sync_log": "记录同步日志",
   "setting_other_log_tip_clean_success": "日志清理完成",
   "setting_other_log_tip_null": "日志是空的哦~",
-  "setting_play": "播放设置",
   "setting_play_cache_size": "最大缓存大小（MB）",
   "setting_play_cache_size_no_cache": "禁用缓存",
   "setting_play_cache_size_save_tip": "缓存设置完毕，重启应用后生效",
@@ -249,11 +248,12 @@
   "setting_play_show_notification_image": "在通知栏显示歌曲图片",
   "setting_play_show_roma": "显示歌词罗马音（如果可用）",
   "setting_play_show_translation": "显示歌词翻译（如果可用）",
+  "setting_player": "播放设置",
   "setting_player_save_play_time": "记住播放进度",
   "setting_search": "搜索设置",
   "setting_search_show_history_search": "显示历史搜索记录",
   "setting_search_show_hot_search": "显示热门搜索",
-  "setting_sync": "同步 [首次使用前建议先备份一次歌单]",
+  "setting_sync": "同步",
   "setting_sync_address": "本机IP地址：{address}",
   "setting_sync_code_blocked_ip": "当前设备的IP已被服务端封禁！",
   "setting_sync_code_fail": "连接码无效",

src/screens/Home/Horizontal/Header.tsx

@@ -110,6 +110,7 @@ const styles = createStyle({
     paddingLeft: 5,
     alignItems: 'center',
     height: '100%',
+    // backgroundColor: 'rgba(0,0,0,0.1)',
   },
   btn: {
     // flex: 1,
@@ -126,7 +127,7 @@ const styles = createStyle({
     justifyContent: 'center',
   },
   leftTitle: {
-    paddingLeft: 14,
+    paddingLeft: 10,
     paddingRight: 16,
   },
   rightTitle: {

src/screens/Home/Views/Mylist/MyList/listAction.ts

@@ -3,7 +3,7 @@ import { confirmDialog, handleReadFile, handleSaveFile, showImportTip, toast } f
 import syncSourceList from '@/core/syncSourceList'
 import { log } from '@/utils/log'
 import { filterFileName, filterMusicList, toNewMusicInfo } from '@/utils'
-import { handleImportListPart } from '@/screens/Home/Views/Setting/Backup/actions'
+import { handleImportListPart } from '@/screens/Home/Views/Setting/settings/Backup/actions'
 
 export const handleRemove = (listInfo: LX.List.UserListInfo) => {
   void confirmDialog({

src/screens/Home/Views/Setting/Horizontal.tsx

@@ -0,0 +1,45 @@
+import React, { useRef } from 'react'
+import { ScrollView, View } from 'react-native'
+import NavList from './NavList'
+import Main, { type MainType } from './Main'
+import { createStyle } from '@/utils/tools'
+import { BorderWidths } from '@/theme'
+import { useTheme } from '@/store/theme/hook'
+
+const styles = createStyle({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    borderTopWidth: BorderWidths.normal,
+  },
+  nav: {
+    height: '100%',
+    width: '18%',
+    borderRightWidth: BorderWidths.normal,
+  },
+  main: {
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 15,
+    paddingBottom: 15,
+    flex: 0,
+  },
+})
+
+export default () => {
+  const theme = useTheme()
+  const mainRef = useRef<MainType>(null)
+
+  return (
+    <View style={{ ...styles.container, borderTopColor: theme['c-border-background'] }}>
+      <View style={{ ...styles.nav, borderRightColor: theme['c-border-background'] }}>
+        <NavList onChangeId={(id) => mainRef.current?.setActiveId(id)} />
+      </View>
+      <ScrollView keyboardShouldPersistTaps={'always'}>
+        <View style={styles.main}>
+          <Main ref={mainRef} />
+        </View>
+      </ScrollView>
+    </View>
+  )
+}

src/screens/Home/Views/Setting/Main.tsx

@@ -0,0 +1,71 @@
+import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import { InteractionManager } from 'react-native'
+
+import Basic from './settings/Basic'
+import Player from './settings/Player'
+import LyricDesktop from './settings/LyricDesktop'
+import Search from './settings/Search'
+import List from './settings/List'
+import Sync from './settings/Sync'
+import Backup from './settings/Backup'
+import Other from './settings/Other'
+import Version from './settings/Version'
+import About from './settings/About'
+
+export const SETTING_SCREENS = [
+  'basic',
+  'player',
+  'lyric_desktop',
+  'search',
+  'list',
+  'sync',
+  'backup',
+  'other',
+  'version',
+  'about',
+] as const
+
+export type SettingScreenIds = typeof SETTING_SCREENS[number]
+
+// interface MainProps {
+//   onUpdateActiveId: (id: string) => void
+// }
+export interface MainType {
+  setActiveId: (id: SettingScreenIds) => void
+}
+
+const Main = forwardRef<MainType, {}>((props, ref) => {
+  const [id, setId] = useState(global.lx.settingActiveId)
+
+  useImperativeHandle(ref, () => ({
+    setActiveId(id) {
+      requestAnimationFrame(() => {
+        void InteractionManager.runAfterInteractions(() => {
+          setId(id)
+        })
+      })
+    },
+  }))
+
+  const component = useMemo(() => {
+    switch (id) {
+      case 'player': return <Player />
+      case 'lyric_desktop': return <LyricDesktop />
+      case 'search': return <Search />
+      case 'list': return <List />
+      case 'sync': return <Sync />
+      case 'backup': return <Backup />
+      case 'other': return <Other />
+      case 'version': return <Version />
+      case 'about': return <About />
+      case 'basic':
+      default: return <Basic />
+    }
+  }, [id])
+
+  return component
+})
+
+
+export default Main
+

src/screens/Home/Views/Setting/NavList.tsx

@@ -0,0 +1,130 @@
+import React, { memo, useRef, useState } from 'react'
+import { View, TouchableOpacity, FlatList, type FlatListProps } from 'react-native'
+
+import { Icon } from '@/components/common/Icon'
+
+import { useTheme } from '@/store/theme/hook'
+import { createStyle } from '@/utils/tools'
+import Text from '@/components/common/Text'
+import { scaleSizeH } from '@/utils/pixelRatio'
+import { SETTING_SCREENS, type SettingScreenIds } from './Main'
+import { useI18n } from '@/lang'
+
+type FlatListType = FlatListProps<SettingScreenIds>
+
+const ITEM_HEIGHT = scaleSizeH(40)
+
+const ListItem = memo(({ id, activeId, onPress }: {
+  onPress: (item: SettingScreenIds) => void
+  activeId: string
+  id: SettingScreenIds
+}) => {
+  const theme = useTheme()
+  const t = useI18n()
+
+  const active = activeId == id
+
+  const handlePress = () => {
+    onPress(id)
+  }
+
+  return (
+    <View style={{ ...styles.listItem, height: ITEM_HEIGHT }}>
+      {
+        active
+          ? <Icon style={styles.listActiveIcon} name="chevron-right" size={12} color={theme['c-primary-font']} />
+          : null
+      }
+      <TouchableOpacity style={styles.listName} onPress={handlePress}>
+        <Text numberOfLines={1} size={16} color={active ? theme['c-primary-font'] : theme['c-font']}>{t(`setting_${id}`)}</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}, (prevProps, nextProps) => {
+  return !!(prevProps.id === nextProps.id &&
+    prevProps.activeId != nextProps.id &&
+    nextProps.activeId != nextProps.id
+  )
+})
+
+
+export default ({ onChangeId }: {
+  onChangeId: (id: SettingScreenIds) => void
+}) => {
+  const flatListRef = useRef<FlatList>(null)
+  const [activeId, setActiveId] = useState(global.lx.settingActiveId)
+
+  const handleChangeId = (id: SettingScreenIds) => {
+    onChangeId(id)
+    setActiveId(id)
+    global.lx.settingActiveId = id
+  }
+
+  const renderItem: FlatListType['renderItem'] = ({ item, index }) => (
+    <ListItem
+      key={item}
+      id={item}
+      activeId={activeId}
+      onPress={handleChangeId}
+    />
+  )
+  const getkey: FlatListType['keyExtractor'] = item => item
+  const getItemLayout: FlatListType['getItemLayout'] = (data, index) => {
+    return { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }
+  }
+
+  return (
+    <FlatList
+      ref={flatListRef}
+      style={styles.container}
+      data={SETTING_SCREENS}
+      maxToRenderPerBatch={9}
+      // updateCellsBatchingPeriod={80}
+      windowSize={9}
+      removeClippedSubviews={true}
+      initialNumToRender={18}
+      renderItem={renderItem}
+      keyExtractor={getkey}
+      // extraData={activeIndex}
+      getItemLayout={getItemLayout}
+    />
+  )
+}
+
+
+const styles = createStyle({
+  container: {
+    flexShrink: 1,
+    flexGrow: 0,
+  },
+  // listContainer: {
+  //   // borderBottomWidth: BorderWidths.normal2,
+  // },
+
+  listItem: {
+    height: 'auto',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingRight: 10,
+    paddingLeft: 10,
+    // borderBottomWidth: BorderWidths.normal,
+  },
+  listActiveIcon: {
+    // width: 18,
+    marginLeft: 3,
+    // paddingRight: 5,
+    textAlign: 'center',
+  },
+  listName: {
+    height: '100%',
+    // height: 46,
+    // paddingTop: 12,
+    // paddingBottom: 12,
+    justifyContent: 'center',
+    flexGrow: 1,
+    flexShrink: 1,
+    paddingLeft: 5,
+    // backgroundColor: 'rgba(0,0,0,0.1)',
+  },
+})
+

src/screens/Home/Views/Setting/Vertical/Header.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef, useImperativeHandle, useState } from 'react'
+import { TouchableOpacity } from 'react-native'
+
+import { Icon } from '@/components/common/Icon'
+import { BorderWidths } from '@/theme'
+import { useTheme } from '@/store/theme/hook'
+import { createStyle } from '@/utils/tools'
+import Text from '@/components/common/Text'
+import { useI18n } from '@/lang'
+import { type SettingScreenIds } from '../Main'
+
+export interface HeaderProps {
+  onShowNavBar: () => void
+}
+export interface HeaderType {
+  setActiveId: (id: SettingScreenIds) => void
+}
+
+export default forwardRef<HeaderType, HeaderProps>(({ onShowNavBar }, ref) => {
+  const [activeId, setActiveId] = useState(global.lx.settingActiveId)
+  const theme = useTheme()
+  const t = useI18n()
+
+  useImperativeHandle(ref, () => ({
+    setActiveId(id) {
+      setActiveId(id)
+    },
+  }))
+
+  return (
+    <TouchableOpacity onPress={onShowNavBar} style={{ ...styles.currentList, borderBottomColor: theme['c-border-background'] }}>
+      <Icon style={styles.currentListIcon} color={theme['c-button-font']} name="chevron-right" size={12} />
+      <Text numberOfLines={1} size={16} style={styles.currentListText} color={theme['c-button-font']}>{t(`setting_${activeId}`)}</Text>
+    </TouchableOpacity>
+  )
+})
+
+
+const styles = createStyle({
+  currentList: {
+    flexDirection: 'row',
+    paddingRight: 2,
+    height: 40,
+    alignItems: 'center',
+    borderBottomWidth: BorderWidths.normal,
+    // backgroundColor: 'rgba(0,0,0,0.2)',
+  },
+  currentListIcon: {
+    paddingLeft: 15,
+    paddingRight: 10,
+    // paddingTop: 10,
+    // paddingBottom: 0,
+  },
+  currentListText: {
+    flex: 1,
+    // minWidth: 70,
+    // paddingLeft: 10,
+    paddingRight: 10,
+    // paddingTop: 10,
+    // paddingBottom: 10,
+  },
+})

src/screens/Home/Views/Setting/Vertical/index.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback, useRef } from 'react'
+import { ScrollView, View, type DrawerLayoutAndroid } from 'react-native'
+// import { getWindowSise, onDimensionChange } from '@/utils/tools'
+import NavList from '../NavList'
+import Header, { type HeaderType } from './Header'
+import Main, { type SettingScreenIds, type MainType } from '../Main'
+import { useSettingValue } from '@/store/setting/hook'
+import { COMPONENT_IDS } from '@/config/constant'
+import DrawerLayoutFixed from '@/components/common/DrawerLayoutFixed'
+import { scaleSizeW } from '@/utils/pixelRatio'
+import { createStyle } from '@/utils/tools'
+
+const MAX_WIDTH = scaleSizeW(300)
+
+const Content = () => {
+  const drawer = useRef<DrawerLayoutAndroid>(null)
+  const headerRef = useRef<HeaderType>(null)
+  const mainRef = useRef<MainType>(null)
+  const drawerLayoutPosition = useSettingValue('common.drawerLayoutPosition')
+
+  const handleChangeId = useCallback((id: SettingScreenIds) => {
+    drawer.current?.closeDrawer()
+    mainRef.current?.setActiveId(id)
+    headerRef.current?.setActiveId(id)
+  }, [])
+
+  const navigationView = () => (
+    <View style={styles.nav}>
+      <NavList onChangeId={handleChangeId} />
+    </View>
+  )
+  // console.log('render drawer content')
+
+  return (
+    <DrawerLayoutFixed
+      ref={drawer}
+      widthPercentage={0.6}
+      widthPercentageMax={MAX_WIDTH}
+      visibleNavNames={[COMPONENT_IDS.home]}
+      // drawerWidth={width}
+      drawerPosition={drawerLayoutPosition}
+      renderNavigationView={navigationView}
+      style={{ elevation: 1 }}
+    >
+      <Header ref={headerRef} onShowNavBar={() => drawer.current?.openDrawer()} />
+      <ScrollView keyboardShouldPersistTaps={'always'}>
+        <View style={styles.main}>
+          <Main ref={mainRef} />
+        </View>
+      </ScrollView>
+      {/* <View style={styles.container}>
+      </View> */}
+    </DrawerLayoutFixed>
+  )
+}
+
+const styles = createStyle({
+  nav: {
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  main: {
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 15,
+    paddingBottom: 15,
+    flex: 0,
+  },
+})
+
+export default Content

src/screens/Home/Views/Setting/index.tsx

@@ -1,49 +1,15 @@
-import { createStyle } from '@/utils/tools'
+import { useDimensions } from '@/utils/hooks'
 import React from 'react'
-import {
-  View,
-  ScrollView,
-} from 'react-native'
+import Vertical from './Vertical'
+import Horizontal from './Horizontal'
 // import { AppColors } from '@/theme'
 
-import Basic from './Basic'
-import Player from './Player'
-import LyricDesktop from './LyricDesktop'
-import Search from './Search'
-import List from './List'
-import Sync from './Sync'
-import Backup from './Backup'
-import Other from './Other'
-import Version from './Version'
-import About from './About'
-
-const styles = createStyle({
-  scrollView: {
-  },
-  content: {
-    paddingLeft: 15,
-    paddingRight: 15,
-    paddingTop: 15,
-    paddingBottom: 15,
-    flex: 0,
-  },
-})
+export type { SettingScreenIds } from './Main'
 
 export default () => {
-  return (
-    <ScrollView style={styles.scrollView} keyboardShouldPersistTaps={'always'}>
-      <View style={styles.content}>
-        <Basic />
-        <Player />
-        <LyricDesktop />
-        <Search />
-        <List />
-        <Sync />
-        <Backup />
-        <Other />
-        <Version />
-        <About />
-      </View>
-    </ScrollView>
-  )
+  const { window } = useDimensions()
+
+  return window.height > window.width
+    ? <Vertical />
+    : <Horizontal />
 }

src/screens/Home/Views/Setting/settings/About.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react'
 import { StyleSheet, View, TouchableOpacity } from 'react-native'
 
-import Section from './components/Section'
+import Section from '../components/Section'
 // import Button from './components/Button'
 
 import { openUrl } from '@/utils/tools'

src/screens/Home/Views/Setting/settings/Backup/Part.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, View } from 'react-native'
 
 // import { gzip, ungzip } from 'pako'
 
-import SubTitle from '../components/SubTitle'
-import Button from '../components/Button'
+import SubTitle from '../../components/SubTitle'
+import Button from '../../components/Button'
 import { useI18n } from '@/lang'
 import ListImportExport, { type ListImportExportType } from './ListImportExport'
 

src/screens/Home/Views/Setting/settings/Backup/index.tsx

@@ -1,7 +1,7 @@
 import { useI18n } from '@/lang'
 import React, { memo } from 'react'
 
-import Section from '../components/Section'
+import Section from '../../components/Section'
 import Part from './Part'
 // import MaxCache from './MaxCache'
 

src/screens/Home/Views/Setting/settings/Basic/DrawerLayoutPosition.tsx

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from 'react'
 
 import { StyleSheet, View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
+import SubTitle from '../../components/SubTitle'
 import CheckBox from '@/components/common/CheckBox'
 import { useSettingValue } from '@/store/setting/hook'
 import { useI18n } from '@/lang'

src/screens/Home/Views/Setting/settings/Basic/FontSize.tsx

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from 'react'
 
 import { StyleSheet, View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
+import SubTitle from '../../components/SubTitle'
 import CheckBox from '@/components/common/CheckBox'
 import { useI18n } from '@/lang'
 import { setFontSize } from '@/core/common'

src/screens/Home/Views/Setting/settings/Basic/IsAutoHidePlayBar.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/Basic/IsAutoTheme.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react'
 import { View } from 'react-native'
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 import { createStyle, getIsSupportedAutoTheme } from '@/utils/tools'
 import { useI18n } from '@/lang'
 import { updateSetting } from '@/core/common'

src/screens/Home/Views/Setting/settings/Basic/IsStartupAutoPlay.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/Basic/Language.tsx

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from 'react'
 
 import { StyleSheet, View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
+import SubTitle from '../../components/SubTitle'
 import CheckBox from '@/components/common/CheckBox'
 import type { I18n } from '@/lang'
 import { useI18n, langList } from '@/lang'

src/screens/Home/Views/Setting/settings/Basic/ShareType.tsx

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from 'react'
 
 import { StyleSheet, View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
+import SubTitle from '../../components/SubTitle'
 import CheckBox from '@/components/common/CheckBox'
 import { useSettingValue } from '@/store/setting/hook'
 import { useI18n } from '@/lang'

src/screens/Home/Views/Setting/settings/Basic/Source.tsx

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useMemo } from 'react'
 
 import { View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
+import SubTitle from '../../components/SubTitle'
 import CheckBox from '@/components/common/CheckBox'
 import { createStyle } from '@/utils/tools'
 import { setUserApi } from '@/core/apiSource'

src/screens/Home/Views/Setting/settings/Basic/SourceName.tsx

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from 'react'
 
 import { StyleSheet, View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
+import SubTitle from '../../components/SubTitle'
 import CheckBox from '@/components/common/CheckBox'
 import { useSettingValue } from '@/store/setting/hook'
 import { useI18n } from '@/lang'

src/screens/Home/Views/Setting/settings/Basic/Theme.tsx

@@ -5,7 +5,7 @@ import { useI18n } from '@/lang'
 import { useSettingValue } from '@/store/setting/hook'
 import { useTheme } from '@/store/theme/hook'
 
-import SubTitle from '../components/SubTitle'
+import SubTitle from '../../components/SubTitle'
 import { BG_IMAGES, getAllThemes, type LocalTheme } from '@/theme/themes'
 import Text from '@/components/common/Text'
 import { createStyle } from '@/utils/tools'

src/screens/Home/Views/Setting/settings/Basic/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 
-import Section from '../components/Section'
+import Section from '../../components/Section'
 import Theme from './Theme'
 import Source from './Source'
 import SourceName from './SourceName'

src/screens/Home/Views/Setting/settings/List/AddMusicLocationType.tsx

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from 'react'
 
 import { StyleSheet, View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
+import SubTitle from '../../components/SubTitle'
 import CheckBox from '@/components/common/CheckBox'
 import { useSettingValue } from '@/store/setting/hook'
 import { useI18n } from '@/lang'

src/screens/Home/Views/Setting/settings/List/IsClickPlayList.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/List/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 
-import Section from '../components/Section'
+import Section from '../../components/Section'
 import AddMusicLocationType from './AddMusicLocationType'
 import IsClickPlayList from './IsClickPlayList'
 

src/screens/Home/Views/Setting/settings/LyricDesktop/IsLockLyric.tsx

@@ -5,7 +5,7 @@ import { useI18n } from '@/lang'
 import { createStyle } from '@/utils/tools'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 import { toggleDesktopLyricLock } from '@/core/desktopLyric'
 import { updateSetting } from '@/core/common'
 

src/screens/Home/Views/Setting/settings/LyricDesktop/IsShowLyric.tsx

@@ -2,7 +2,7 @@ import React, { memo, useRef } from 'react'
 import { View } from 'react-native'
 
 import ConfirmAlert, { type ConfirmAlertType } from '@/components/common/ConfirmAlert'
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 import { createStyle, toast } from '@/utils/tools'
 

src/screens/Home/Views/Setting/settings/LyricDesktop/IsShowToggleAnima.tsx

@@ -5,7 +5,7 @@ import { useI18n } from '@/lang'
 import { createStyle } from '@/utils/tools'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 import { setShowDesktopLyricToggleAnima } from '@/core/desktopLyric'
 import { updateSetting } from '@/core/common'
 

src/screens/Home/Views/Setting/settings/LyricDesktop/IsSingleLine.tsx

@@ -5,7 +5,7 @@ import { useI18n } from '@/lang'
 import { createStyle } from '@/utils/tools'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 import { setDesktopLyricSingleLine } from '@/core/desktopLyric'
 import { updateSetting } from '@/core/common'
 

src/screens/Home/Views/Setting/settings/LyricDesktop/MaxLineNum.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useState } from 'react'
 import { View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
-import Slider, { type SliderProps } from '../components/Slider'
+import SubTitle from '../../components/SubTitle'
+import Slider, { type SliderProps } from '../../components/Slider'
 import { useI18n } from '@/lang'
 import { useSettingValue } from '@/store/setting/hook'
 import { useTheme } from '@/store/theme/hook'

src/screens/Home/Views/Setting/settings/LyricDesktop/TextOpacity.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useState } from 'react'
 import { View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
-import Slider, { type SliderProps } from '../components/Slider'
+import SubTitle from '../../components/SubTitle'
+import Slider, { type SliderProps } from '../../components/Slider'
 import { useI18n } from '@/lang'
 import { useSettingValue } from '@/store/setting/hook'
 import { useTheme } from '@/store/theme/hook'

src/screens/Home/Views/Setting/settings/LyricDesktop/TextPositionX.tsx

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from 'react'
 
 import { View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
+import SubTitle from '../../components/SubTitle'
 import CheckBox from '@/components/common/CheckBox'
 import { useSettingValue } from '@/store/setting/hook'
 import { useI18n } from '@/lang'

src/screens/Home/Views/Setting/settings/LyricDesktop/TextPositionY.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react'
 import { View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
+import SubTitle from '../../components/SubTitle'
 import CheckBox from '@/components/common/CheckBox'
 import { useSettingValue } from '@/store/setting/hook'
 import { useI18n } from '@/lang'

src/screens/Home/Views/Setting/settings/LyricDesktop/TextSize.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useState } from 'react'
 import { View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
-import Slider, { type SliderProps } from '../components/Slider'
+import SubTitle from '../../components/SubTitle'
+import Slider, { type SliderProps } from '../../components/Slider'
 import { useI18n } from '@/lang'
 import { useSettingValue } from '@/store/setting/hook'
 import { useTheme } from '@/store/theme/hook'

src/screens/Home/Views/Setting/settings/LyricDesktop/Theme.tsx

@@ -4,7 +4,7 @@ import { useI18n } from '@/lang'
 import React, { memo } from 'react'
 import { StyleSheet, View, TouchableOpacity } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
+import SubTitle from '../../components/SubTitle'
 
 const themes = [
   '#07c556',

src/screens/Home/Views/Setting/settings/LyricDesktop/ViewWidth.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useState } from 'react'
 import { View } from 'react-native'
 
-import SubTitle from '../components/SubTitle'
-import Slider, { type SliderProps } from '../components/Slider'
+import SubTitle from '../../components/SubTitle'
+import Slider, { type SliderProps } from '../../components/Slider'
 import { useI18n } from '@/lang'
 import { useSettingValue } from '@/store/setting/hook'
 import { useTheme } from '@/store/theme/hook'

src/screens/Home/Views/Setting/settings/LyricDesktop/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 
-import Section from '../components/Section'
+import Section from '../../components/Section'
 import IsShowLyric from './IsShowLyric'
 import IsLockLyric from './IsLockLyric'
 import IsShowToggleAnima from './IsShowToggleAnima'

src/screens/Home/Views/Setting/settings/Other/Log.tsx

@@ -3,11 +3,11 @@ import { View } from 'react-native'
 import { getLogs, clearLogs } from '@/utils/log'
 // import { gzip, ungzip } from 'pako'
 
-import SubTitle from '../components/SubTitle'
-import Button from '../components/Button'
+import SubTitle from '../../components/SubTitle'
+import Button from '../../components/Button'
 import { createStyle, toast } from '@/utils/tools'
 import ConfirmAlert, { type ConfirmAlertType } from '@/components/common/ConfirmAlert'
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 import { useI18n } from '@/lang'
 import Text from '@/components/common/Text'
 

src/screens/Home/Views/Setting/settings/Other/MetaCache.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, View } from 'react-native'
 
 // import { gzip, ungzip } from 'pako'
 
-import SubTitle from '../components/SubTitle'
-import Button from '../components/Button'
+import SubTitle from '../../components/SubTitle'
+import Button from '../../components/Button'
 import { toast } from '@/utils/tools'
 import { useI18n } from '@/lang'
 import Text from '@/components/common/Text'

src/screens/Home/Views/Setting/settings/Other/ResourceCache.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, View, InteractionManager } from 'react-native'
 
 // import { gzip, ungzip } from 'pako'
 
-import SubTitle from '../components/SubTitle'
-import Button from '../components/Button'
+import SubTitle from '../../components/SubTitle'
+import Button from '../../components/Button'
 import { toast, resetNotificationPermissionCheck, confirmDialog } from '@/utils/tools'
 import { getAppCacheSize, clearAppCache } from '@/utils/nativeModules/cache'
 import { sizeFormate } from '@/utils'

src/screens/Home/Views/Setting/settings/Other/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 
-import Section from '../components/Section'
+import Section from '../../components/Section'
 import ResourceCache from './ResourceCache'
 import MetaCache from './MetaCache'
 import Log from './Log'

src/screens/Home/Views/Setting/settings/Player/IsHandleAudioFocus.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/Player/IsPlayHighQuality.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/Player/IsS2T.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/Player/IsSavePlayTime.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/Player/IsShowLyricRoma.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/Player/IsShowLyricTranslation.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/Player/IsShowNotificationImage.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/Player/MaxCache.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react'
 import { View } from 'react-native'
 
-import InputItem, { type InputItemProps } from '../components/InputItem'
+import InputItem, { type InputItemProps } from '../../components/InputItem'
 import { createStyle, toast } from '@/utils/tools'
 import { useSettingValue } from '@/store/setting/hook'
 import { useI18n } from '@/lang'

src/screens/Home/Views/Setting/settings/Player/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 
-import Section from '../components/Section'
+import Section from '../../components/Section'
 import IsSavePlayTime from './IsSavePlayTime'
 import IsPlayHighQuality from './IsPlayHighQuality'
 import IsHandleAudioFocus from './IsHandleAudioFocus'
@@ -16,7 +16,7 @@ export default memo(() => {
   const t = useI18n()
 
   return (
-    <Section title={t('setting_play')}>
+    <Section title={t('setting_player')}>
       <IsSavePlayTime />
       <IsPlayHighQuality />
       <IsHandleAudioFocus />

src/screens/Home/Views/Setting/settings/Search/IsShowHistorySearch.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/Search/IsShowHotSearch.tsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 import { useSettingValue } from '@/store/setting/hook'
 
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 
 export default memo(() => {
   const t = useI18n()

src/screens/Home/Views/Setting/settings/Search/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 
-import Section from '../components/Section'
+import Section from '../../components/Section'
 import IsShowHotSearch from './IsShowHotSearch'
 import IsShowHistorySearch from './IsShowHistorySearch'
 

src/screens/Home/Views/Setting/settings/Sync/History.tsx

@@ -3,7 +3,7 @@ import { View, TouchableOpacity, ScrollView } from 'react-native'
 // import { gzip, ungzip } from 'pako'
 import { Icon } from '@/components/common/Icon'
 
-import Button from '../components/Button'
+import Button from '../../components/Button'
 import { getSyncHostHistory, removeSyncHostHistory, setSyncHost } from '@/plugins/sync/data'
 import Popup, { type PopupType } from '@/components/common/Popup'
 import { BorderWidths } from '@/theme'

src/screens/Home/Views/Setting/settings/Sync/IsEnable.tsx

@@ -1,11 +1,11 @@
 import React, { memo, useCallback, useState, useEffect, useRef, useMemo } from 'react'
 import { View } from 'react-native'
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 import ConfirmAlert, { type ConfirmAlertType } from '@/components/common/ConfirmAlert'
 import Input from '@/components/common/Input'
 import { connectServer, disconnectServer } from '@/plugins/sync'
-import InputItem from '../components/InputItem'
+import InputItem from '../../components/InputItem'
 import { getWIFIIPV4Address } from '@/utils/nativeModules/utils'
 import { createStyle, toast } from '@/utils/tools'
 import { useI18n } from '@/lang'

src/screens/Home/Views/Setting/settings/Sync/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useState } from 'react'
 
-import Section from '../components/Section'
+import Section from '../../components/Section'
 import IsEnable from './IsEnable'
 import History from './History'
 import { useI18n } from '@/lang'

src/screens/Home/Views/Setting/settings/Sync/isEnable.tsx.bak

@@ -1,11 +1,11 @@
 import React, { memo, useState, useEffect, useRef } from 'react'
 import { View } from 'react-native'
 
-import CheckBoxItem from '../components/CheckBoxItem'
+import CheckBoxItem from '../../components/CheckBoxItem'
 import ConfirmAlert, { ConfirmAlertType } from '@/components/common/ConfirmAlert'
 import Input from '@/components/common/Input'
 import { connect, disconnect, SYNC_CODE } from '@/plugins/sync'
-import InputItem from '../components/InputItem'
+import InputItem from '../../components/InputItem'
 import { getWIFIIPV4Address } from '@/utils/nativeModules/utils'
 import { createStyle, toast } from '@/utils/tools'
 import { useI18n } from '@/lang'

src/screens/Home/Views/Setting/settings/Version.tsx

@@ -1,9 +1,9 @@
 import React, { memo, useState, useEffect } from 'react'
 import { StyleSheet, View } from 'react-native'
 
-import Section from './components/Section'
-import SubTitle from './components/SubTitle'
-import Button from './components/Button'
+import Section from '../components/Section'
+import SubTitle from '../components/SubTitle'
+import Button from '../components/Button'
 import { sizeFormate } from '@/utils'
 
 import { useI18n } from '@/lang'

src/types/app.d.ts

@@ -4,6 +4,7 @@ import type { ListEventTypes } from '@/event/listEvent'
 import type { StateEventTypes } from '@/event/stateEvent'
 import type { I18n } from '@/lang/i18n'
 import type { Buffer as _Buffer } from 'buffer'
+import type { SettingScreenIds } from '@/screens/Home/Views/Setting'
 
 // interface Process {
 //   env: {
@@ -13,7 +14,7 @@ import type { Buffer as _Buffer } from 'buffer'
 //     app: string
 //   }
 // }
-interface Lx {
+interface GlobalData {
   fontSize: number
   gettingUrlId: string
 
@@ -35,6 +36,8 @@ interface Lx {
 
   jumpMyListPosition: boolean
 
+  settingActiveId: SettingScreenIds
+
   // windowInfo: {
   //   screenW: number
   //   screenH: number
@@ -50,7 +53,7 @@ interface Lx {
 
 declare global {
   var isDev: boolean
-  var lx: Lx
+  var lx: GlobalData
   var i18n: I18n
   var app_event: AppEventTypes
   var list_event: ListEventTypes