diff --git a/publish/changeLog.md b/publish/changeLog.md
index 6d62c2f..355ddb6 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -6,6 +6,7 @@
- 更新设置界面菜单布局
- 添加歌单分类、排行榜激活指示器
+- 调整设置界面竖屏下的UI布局
### 修复
diff --git a/src/event/appEvent.ts b/src/event/appEvent.ts
index ecf5103..cfd1b92 100644
--- a/src/event/appEvent.ts
+++ b/src/event/appEvent.ts
@@ -1,6 +1,6 @@
import { setNavActiveId } from '@/core/common'
import Event from './Event'
-import commonState, { type InitState as CommonState } from '@/store/common/state'
+import commonState from '@/store/common/state'
import { type Source as SonglistSource } from '@/store/songlist/state'
import { type SearchType } from '@/store/search/state'
@@ -162,10 +162,6 @@ export class AppEvent extends Event {
this.emit('changeMenuVisible', visible)
}
- homeNavPagerChanged(id: CommonState['navActiveId']) {
- this.emit('homeNavPagerChanged', id)
- }
-
/**
* 搜索类型改变事件
* @param type
diff --git a/src/lang/en_us.json b/src/lang/en_us.json
index 24b2382..08df4a0 100644
--- a/src/lang/en_us.json
+++ b/src/lang/en_us.json
@@ -204,6 +204,7 @@
"setting_basic_theme": "Theme",
"setting_basic_theme_auto_theme": "Follow the system light and dark mode to switch themes",
"setting_basic_theme_hide_bg_dark": "Hide black theme",
+ "setting_basic_theme_more_btn_show": "Expand themes",
"setting_list": "List settings",
"setting_list_add_music_location_type": "Position when the song was added to the list",
"setting_list_add_music_location_type_bottom": "Bottom",
diff --git a/src/lang/zh_cn.json b/src/lang/zh_cn.json
index 232b3b9..658df66 100644
--- a/src/lang/zh_cn.json
+++ b/src/lang/zh_cn.json
@@ -204,6 +204,7 @@
"setting_basic_theme": "主题颜色",
"setting_basic_theme_auto_theme": "跟随系统亮、暗模式切换主题",
"setting_basic_theme_hide_bg_dark": "隐藏黑色主题背景",
+ "setting_basic_theme_more_btn_show": "更多主题",
"setting_list": "列表设置",
"setting_list_add_music_location_type": "添加歌曲到列表时的位置",
"setting_list_add_music_location_type_bottom": "底部",
diff --git a/src/screens/Home/Vertical/Main.tsx b/src/screens/Home/Vertical/Main.tsx
index 8236bd5..bfda924 100644
--- a/src/screens/Home/Vertical/Main.tsx
+++ b/src/screens/Home/Vertical/Main.tsx
@@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { View } from 'react-native'
+import { InteractionManager, View } from 'react-native'
import Search from '../Views/Search'
import SongList from '../Views/SongList'
import Mylist from '../Views/Mylist'
@@ -16,7 +16,13 @@ const SearchPage = () => {
const component = useMemo(() => , [])
useEffect(() => {
const handleNavIdUpdate = (id: CommonState['navActiveId']) => {
- if (id == 'nav_search') setVisible(true)
+ if (id == 'nav_search') {
+ requestAnimationFrame(() => {
+ void InteractionManager.runAfterInteractions(() => {
+ setVisible(true)
+ })
+ })
+ }
}
const handleHide = () => {
setVisible(false)
@@ -39,7 +45,13 @@ const SongListPage = () => {
const component = useMemo(() => , [])
useEffect(() => {
const handleNavIdUpdate = (id: CommonState['navActiveId']) => {
- if (id == 'nav_songlist') setVisible(true)
+ if (id == 'nav_songlist') {
+ requestAnimationFrame(() => {
+ void InteractionManager.runAfterInteractions(() => {
+ setVisible(true)
+ })
+ })
+ }
}
const handleHide = () => {
setVisible(false)
@@ -63,7 +75,13 @@ const LeaderboardPage = () => {
const component = useMemo(() => , [])
useEffect(() => {
const handleNavIdUpdate = (id: CommonState['navActiveId']) => {
- if (id == 'nav_top') setVisible(true)
+ if (id == 'nav_top') {
+ requestAnimationFrame(() => {
+ void InteractionManager.runAfterInteractions(() => {
+ setVisible(true)
+ })
+ })
+ }
}
const handleHide = () => {
setVisible(false)
@@ -86,7 +104,13 @@ const MylistPage = () => {
const component = useMemo(() => , [])
useEffect(() => {
const handleNavIdUpdate = (id: CommonState['navActiveId']) => {
- if (id == 'nav_love') setVisible(true)
+ if (id == 'nav_love') {
+ requestAnimationFrame(() => {
+ void InteractionManager.runAfterInteractions(() => {
+ setVisible(true)
+ })
+ })
+ }
}
const handleHide = () => {
setVisible(false)
@@ -109,7 +133,13 @@ const SettingPage = () => {
const component = useMemo(() => , [])
useEffect(() => {
const handleNavIdUpdate = (id: CommonState['navActiveId']) => {
- if (id == 'nav_setting') setVisible(true)
+ if (id == 'nav_setting') {
+ requestAnimationFrame(() => {
+ void InteractionManager.runAfterInteractions(() => {
+ setVisible(true)
+ })
+ })
+ }
}
global.state_event.on('navActiveIdUpdated', handleNavIdUpdate)
@@ -162,7 +192,6 @@ const Main = () => {
if (activeIndexRef.current != viewMap[commonState.navActiveId]) {
setNavActiveId(indexMap[activeIndexRef.current])
}
- global.app_event.homeNavPagerChanged(indexMap[activeIndexRef.current])
}, [])
const onPageScrollStateChanged = useCallback(({ nativeEvent }: PageScrollStateChangedNativeEvent) => {
diff --git a/src/screens/Home/Views/Setting/Main.tsx b/src/screens/Home/Views/Setting/Main.tsx
index 8a7dc14..631c2c0 100644
--- a/src/screens/Home/Views/Setting/Main.tsx
+++ b/src/screens/Home/Views/Setting/Main.tsx
@@ -2,7 +2,6 @@ import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react
import { InteractionManager } from 'react-native'
import Basic from './settings/Basic'
-import Theme from './settings/Theme'
import Player from './settings/Player'
import LyricDesktop from './settings/LyricDesktop'
import Search from './settings/Search'
@@ -15,7 +14,6 @@ import About from './settings/About'
export const SETTING_SCREENS = [
'basic',
- 'theme',
'player',
'lyric_desktop',
'search',
@@ -51,7 +49,6 @@ const Main = forwardRef((props, ref) => {
const component = useMemo(() => {
switch (id) {
- case 'theme': return
case 'player': return
case 'lyric_desktop': return
case 'search': return
diff --git a/src/screens/Home/Views/Setting/Vertical/Main.tsx b/src/screens/Home/Views/Setting/Vertical/Main.tsx
new file mode 100644
index 0000000..04fafa3
--- /dev/null
+++ b/src/screens/Home/Views/Setting/Vertical/Main.tsx
@@ -0,0 +1,66 @@
+import React, { memo } from 'react'
+import { FlatList, type FlatListProps } 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'
+import { createStyle } from '@/utils/tools'
+import { SETTING_SCREENS, type SettingScreenIds } from '../Main'
+
+type FlatListType = FlatListProps
+
+
+const styles = createStyle({
+ content: {
+ paddingLeft: 15,
+ paddingRight: 15,
+ paddingTop: 15,
+ paddingBottom: 15,
+ flex: 0,
+ },
+})
+
+const ListItem = memo(({
+ id,
+}: { id: SettingScreenIds }) => {
+ switch (id) {
+ case 'player': return
+ case 'lyric_desktop': return
+ case 'search': return
+ case 'list': return
+ case 'sync': return
+ case 'backup': return
+ case 'other': return
+ case 'version': return
+ case 'about': return
+ case 'basic':
+ default: return
+ }
+}, () => true)
+
+export default () => {
+ const renderItem: FlatListType['renderItem'] = ({ item }) =>
+ const getkey: FlatListType['keyExtractor'] = item => item
+
+ return (
+
+ )
+}
diff --git a/src/screens/Home/Views/Setting/Vertical/index.tsx b/src/screens/Home/Views/Setting/Vertical/index.tsx
index a68acb3..a6286f5 100644
--- a/src/screens/Home/Views/Setting/Vertical/index.tsx
+++ b/src/screens/Home/Views/Setting/Vertical/index.tsx
@@ -1,44 +1,29 @@
-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 Main, { type SettingScreenIds, type MainType } from '../Main'
-import { createStyle } from '@/utils/tools'
+export { default } from './Main'
+// import React from 'react'
+// import { View } from 'react-native'
+// import Main from './Main'
+// import { createStyle } from '@/utils/tools'
-const Content = () => {
- const drawer = useRef(null)
- const mainRef = useRef(null)
+// const Content = () => {
+// return (
+//
+//
+//
+// )
+// }
+// const styles = createStyle({
+// container: {
+// flex: 1,
+// flexDirection: 'column',
+// },
+// // main: {
+// // paddingLeft: 15,
+// // paddingRight: 15,
+// // paddingTop: 15,
+// // paddingBottom: 15,
+// // },
+// })
- const handleChangeId = useCallback((id: SettingScreenIds) => {
- drawer.current?.closeDrawer()
- mainRef.current?.setActiveId(id)
- }, [])
-
- // console.log('render drawer content')
-
- return (
-
-
-
-
-
-
- )
-}
-
-const styles = createStyle({
- container: {
- flex: 1,
- flexDirection: 'column',
- },
- main: {
- paddingLeft: 15,
- paddingRight: 15,
- paddingTop: 15,
- paddingBottom: 15,
- },
-})
-
-export default Content
+// export default Content
diff --git a/src/screens/Home/Views/Setting/settings/Basic/index.tsx b/src/screens/Home/Views/Setting/settings/Basic/index.tsx
index 8818d13..cb6c318 100644
--- a/src/screens/Home/Views/Setting/settings/Basic/index.tsx
+++ b/src/screens/Home/Views/Setting/settings/Basic/index.tsx
@@ -1,5 +1,6 @@
import React, { memo } from 'react'
+import Theme from '../Theme'
import Section from '../../components/Section'
import Source from './Source'
import SourceName from './SourceName'
@@ -23,12 +24,13 @@ export default memo(() => {
-
-
+
+
+
)
})
diff --git a/src/screens/Home/Views/Setting/settings/Theme/IsHideBgDark.tsx b/src/screens/Home/Views/Setting/settings/Theme/IsHideBgDark.tsx
index 1c74ccd..360587e 100644
--- a/src/screens/Home/Views/Setting/settings/Theme/IsHideBgDark.tsx
+++ b/src/screens/Home/Views/Setting/settings/Theme/IsHideBgDark.tsx
@@ -32,6 +32,6 @@ export default memo(() => {
const styles = createStyle({
content: {
marginTop: 5,
- // marginBottom: 5,
+ marginBottom: 15,
},
})
diff --git a/src/screens/Home/Views/Setting/settings/Theme/Theme.tsx b/src/screens/Home/Views/Setting/settings/Theme/Theme.tsx
index 9f27ab5..139fc3a 100644
--- a/src/screens/Home/Views/Setting/settings/Theme/Theme.tsx
+++ b/src/screens/Home/Views/Setting/settings/Theme/Theme.tsx
@@ -10,6 +10,7 @@ import { BG_IMAGES, getAllThemes, type LocalTheme } from '@/theme/themes'
import Text from '@/components/common/Text'
import { createStyle } from '@/utils/tools'
import { scaleSizeH } from '@/utils/pixelRatio'
+import { Icon } from '@/components/common/Icon'
const useActive = (id: string) => {
const activeThemeId = useSettingValue('theme.id')
@@ -17,10 +18,11 @@ const useActive = (id: string) => {
return isActive
}
-const ThemeItem = ({ id, name, color, image, setTheme }: {
+const ThemeItem = ({ id, name, color, image, setTheme, showAll }: {
id: string
name: string
color: string
+ showAll: boolean
image?: ImageSourcePropType
setTheme: (id: string) => void
}) => {
@@ -28,17 +30,38 @@ const ThemeItem = ({ id, name, color, image, setTheme }: {
const isActive = useActive(id)
return (
- { setTheme(id) }}>
-
- {
- image
- ?
- :
- }
-
- {name}
-
+ showAll || isActive ? (
+ { setTheme(id) }}>
+
+ {
+ image
+ ?
+ :
+ }
+
+ {name}
+
+ ) : null
+ )
+}
+
+const MoreBtn = ({ showAll, setShowAll }: {
+ showAll: boolean
+ setShowAll: (showAll: boolean) => void
+}) => {
+ const theme = useTheme()
+ const t = useI18n()
+
+ return (
+ showAll ? null
+ : (
+ { setShowAll(!showAll) }}>
+ {t('setting_basic_theme_more_btn_show')}
+
+
+ )
+
)
}
@@ -49,6 +72,7 @@ interface ThemeInfo {
}
const initInfo: ThemeInfo = { themes: [], userThemes: [], dataPath: '' }
export default memo(() => {
+ const [showAll, setShowAll] = useState(false)
const t = useI18n()
const [themeInfo, setThemeInfo] = useState(initInfo)
const setThemeId = useCallback((id: string) => {
@@ -67,42 +91,46 @@ export default memo(() => {
{
themeInfo.themes.map(({ id, config }) => {
return
+ key={id}
+ color={config.themeColors['c-theme']}
+ image={config.extInfo['bg-image'] ? BG_IMAGES[config.extInfo['bg-image']] : undefined}
+ showAll={showAll}
+ id={id}
+ name={t(`theme_${id}`)}
+ setTheme={setThemeId} />
})
}
{
themeInfo.userThemes.map(({ id, name, config }) => {
return
+ key={id}
+ color={config.themeColors['c-theme']}
+ // image={undefined}
+ showAll={showAll}
+ id={id}
+ name={name}
+ setTheme={setThemeId} />
})
}
+
)
})
-const ITEM_HEIGHT = 56
-const COLOR_ITEM_HEIGHT = 34
-const IMAGE_HEIGHT = 27
+const ITEM_HEIGHT = 62
+const COLOR_ITEM_HEIGHT = 36
+const IMAGE_HEIGHT = 29
const styles = createStyle({
list: {
flexDirection: 'row',
flexWrap: 'wrap',
+ gap: 10,
},
item: {
- marginRight: 15,
+ // marginRight: 15,
alignItems: 'center',
- marginTop: 5,
+ // marginTop: 5,
// backgroundColor: 'rgba(0,0,0,0.2)',
},
colorContent: {
@@ -111,6 +139,7 @@ const styles = createStyle({
borderWidth: 1.6,
alignItems: 'center',
justifyContent: 'center',
+ // backgroundColor: 'rgba(0,0,0,0.2)',
},
imageContent: {
height: IMAGE_HEIGHT,
@@ -120,4 +149,11 @@ const styles = createStyle({
name: {
marginTop: 2,
},
+ moreBtn: {
+ marginLeft: 10,
+ flexDirection: 'row',
+ alignItems: 'center',
+ // justifyContent: 'center',
+ gap: 8,
+ },
})
diff --git a/src/screens/Home/Views/Setting/settings/Theme/index.tsx b/src/screens/Home/Views/Setting/settings/Theme/index.tsx
index aeec4a0..af0d876 100644
--- a/src/screens/Home/Views/Setting/settings/Theme/index.tsx
+++ b/src/screens/Home/Views/Setting/settings/Theme/index.tsx
@@ -1,19 +1,17 @@
import React, { memo } from 'react'
-import Section from '../../components/Section'
+// import Section from '../../components/Section'
import Theme from './Theme'
import IsAutoTheme from './IsAutoTheme'
import IsHideBgDark from './IsHideBgDark'
-import { useI18n } from '@/lang/i18n'
+// import { useI18n } from '@/lang/i18n'
export default memo(() => {
- const t = useI18n()
-
return (
-
+
)
})
diff --git a/src/utils/tools.ts b/src/utils/tools.ts
index 3bdd75f..0ee8d59 100644
--- a/src/utils/tools.ts
+++ b/src/utils/tools.ts
@@ -395,6 +395,7 @@ export const trasformeStyle = (styles: T): T => {
case 'paddingLeft':
case 'paddingRight':
case 'paddingHorizontal':
+ case 'gap':
newStyle[p] = scaleSizeW(v)
break
case 'padding':