添加歌单分类、排行榜激活指示器

publish/changeLog.md

@@ -5,6 +5,7 @@
 ### 优化
 
 - 更新设置界面菜单布局
+- 添加歌单分类、排行榜激活指示器
 
 ### 修复
 

src/screens/Home/Views/Leaderboard/BoardsList/ListItem.tsx

@@ -4,6 +4,7 @@ import { useTheme } from '@/store/theme/hook'
 import Button, { type BtnType } from '@/components/common/Button'
 import { createStyle } from '@/utils/tools'
 import { type BoardItem } from '@/store/leaderboard/state'
+import { Icon } from '@/components/common/Icon'
 
 // index={index}
 // longPressIndex={longPressIndex}
@@ -32,6 +33,8 @@ export default ({ item, activeId, index, longPressIndex, onBoundChange, onShowMe
     }
   }, [index, item, onShowMenu])
 
+  const active = activeId == item.id
+
   return (
     <Button
       ref={buttonRef}
@@ -39,16 +42,35 @@ export default ({ item, activeId, index, longPressIndex, onBoundChange, onShowMe
       key={item.id} onLongPress={setPosition}
       onPress={() => { onBoundChange(item) }}
     >
-      <Text size={14} color={activeId == item.id ? theme['c-primary-font-active'] : theme['c-font']} numberOfLines={1}>{item.name}</Text>
+      {
+        active
+          ? <Icon style={styles.listActiveIcon} name="chevron-right" size={12} color={theme['c-primary-font']} />
+          : null
+      }
+      <Text style={styles.listName} size={14} color={active ? theme['c-primary-font-active'] : theme['c-font']} numberOfLines={1}>{item.name}</Text>
     </Button>
   )
 }
 
 const styles = createStyle({
   button: {
-    paddingLeft: 10,
+    paddingLeft: 5,
     paddingRight: 10,
     paddingTop: 10,
     paddingBottom: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  listActiveIcon: {
+    // width: 18,
+    marginLeft: 3,
+    // paddingRight: 5,
+    textAlign: 'center',
+  },
+  listName: {
+    height: '100%',
+    justifyContent: 'center',
+    paddingLeft: 6,
+    // backgroundColor: 'rgba(0,0,0,0.1)',
   },
 })

src/screens/Home/Views/SongList/HeaderBar/SortTab.tsx

@@ -5,6 +5,7 @@ import { useI18n } from '@/lang'
 import { useTheme } from '@/store/theme/hook'
 import Text from '@/components/common/Text'
 import { createStyle } from '@/utils/tools'
+import { BorderWidths } from '@/theme'
 
 export interface SortTabProps {
   onSortChange: (id: string) => void
@@ -44,7 +45,7 @@ export default forwardRef<SortTabType, SortTabProps>(({ onSortChange }, ref) =>
       {
         sorts.map(s => (
           <TouchableOpacity style={styles.button} onPress={() => { handleSortChange(s.id) }} key={s.id}>
-            <Text style={styles.buttonText} color={activeId == s.id ? theme['c-primary-font-active'] : theme['c-font']}>{s.label}</Text>
+            <Text style={{ ...styles.buttonText, borderBottomColor: activeId == s.id ? theme['c-primary-background-active'] : 'transparent' }} color={activeId == s.id ? theme['c-primary-font-active'] : theme['c-font']}>{s.label}</Text>
           </TouchableOpacity>
         ))
       }
@@ -64,6 +65,8 @@ const styles = createStyle({
     // height: 38,
     // lineHeight: 38,
     justifyContent: 'center',
+    paddingLeft: 14,
+    paddingRight: 14,
     // width: 80,
     // backgroundColor: 'rgba(0,0,0,0.1)',
   },
@@ -71,10 +74,8 @@ const styles = createStyle({
     // height: 38,
     // lineHeight: 38,
     textAlign: 'center',
-    paddingLeft: 15,
+    paddingHorizontal: 2,
-    paddingRight: 15,
+    paddingVertical: 3,
-    // paddingTop: 10,
+    borderBottomWidth: BorderWidths.normal3,
-    // paddingBottom: 10,
-    // width: 80,
   },
 })