feat: 标题栏样式

caltop · Oct 3, 2023 · 7a8d024 · 7a8d024
1 parent e650bfb
commit 7a8d024
Show file tree

Hide file tree

Showing 19 changed files with 159 additions and 340 deletions.
diff --git a/src/components/base/ComplexAppBar.tsx b/src/components/base/ComplexAppBar.tsx
diff --git a/src/components/base/appBar.tsx b/src/components/base/appBar.tsx
@@ -35,6 +35,7 @@ interface IAppBarProps {
     menu?: Array<{
         icon: string;
         title: string;
+        show?: boolean;
         onPress?: () => void;
     }>;
     menuWithStatusBar?: boolean;
@@ -189,16 +190,18 @@ export default function AppBar(props: IAppBarProps) {
                             transformStyle,
                             styles.menu,
                         ]}>
-                        {menu.map(it => (
-                            <IconTextButton
-                                icon={it.icon}
-                                onPress={() => {
-                                    it.onPress?.();
-                                    setShowMenu(false);
-                                }}>
-                                {it.title}
-                            </IconTextButton>
-                        ))}
+                        {menu.map(it =>
+                            it.show !== false ? (
+                                <IconTextButton
+                                    icon={it.icon}
+                                    onPress={() => {
+                                        it.onPress?.();
+                                        setShowMenu(false);
+                                    }}>
+                                    {it.title}
+                                </IconTextButton>
+                            ) : null,
+                        )}
                     </Animated.View>
                 </>
             </Portal>

diff --git a/src/components/base/simpleAppBar.tsx b/src/components/base/simpleAppBar.tsx
diff --git a/src/components/dialogs/components/subscribePluginDialog.tsx b/src/components/dialogs/components/subscribePluginDialog.tsx
@@ -1,11 +1,12 @@
 import React, {useState} from 'react';
 import rpx from '@/utils/rpx';
-import {Dialog, TextInput} from 'react-native-paper';
-import useColors from '@/hooks/useColors';
 import {StyleSheet, View} from 'react-native';
 import ThemeText from '@/components/base/themeText';
 import Button from '@/components/base/button';
 import {hideDialog} from '../useDialog';
+import Dialog from './base';
+import Input from '@/components/base/input';
+import useColors from '@/hooks/useColors';
 interface ISubscribeItem {
     name: string;
     url: string;
@@ -27,18 +28,22 @@ export default function SubscribePluginDialog(
     const {subscribeItem, onSubmit, editingIndex, onDelete} = props;
     const [name, setName] = useState(subscribeItem?.name ?? '');
     const [url, setUrl] = useState(subscribeItem?.url ?? '');
+
     const colors = useColors();
+
+    const textColors = {
+        color: colors.text,
+    };
+
     return (
-        <Dialog
-            visible={true}
-            onDismiss={hideDialog}
-            style={{backgroundColor: colors.primary}}>
+        <Dialog onDismiss={hideDialog}>
             <Dialog.Title>订阅</Dialog.Title>
             <Dialog.Content>
                 <View style={style.headerWrapper}>
                     <ThemeText>名称: </ThemeText>
-                    <TextInput
-                        style={style.textInput}
+                    <Input
+                        hasHorizonalPadding={false}
+                        style={[style.textInput, textColors]}
                         value={name}
                         onChangeText={t => {
                             setName(t);
@@ -47,8 +52,9 @@ export default function SubscribePluginDialog(
                 </View>
                 <View style={style.headerWrapper}>
                     <ThemeText>URL: </ThemeText>
-                    <TextInput
-                        style={style.textInput}
+                    <Input
+                        hasHorizonalPadding={false}
+                        style={[style.textInput, textColors]}
                         value={url}
                         onChangeText={t => {
                             setUrl(t);
@@ -113,7 +119,7 @@ const style = StyleSheet.create({
     textInput: {
         flex: 1,
         includeFontPadding: false,
-        borderBottomColor: 'white',
+        marginLeft: rpx(12),
         borderBottomWidth: 1,
     },
     options: {

diff --git a/src/components/musicSheetPage/components/header.tsx b/src/components/musicSheetPage/components/header.tsx
@@ -2,20 +2,20 @@ import React, {useState} from 'react';
 import {Pressable, StyleSheet, View} from 'react-native';
 import rpx from '@/utils/rpx';
 import LinearGradient from 'react-native-linear-gradient';
-import {Divider, useTheme} from 'react-native-paper';
 import Color from 'color';
 import ThemeText from '@/components/base/themeText';
 import {ImgAsset} from '@/constants/assetsConst';
 import FastImage from '@/components/base/fastImage';
 import PlayAllBar from '@/components/base/playAllBar';
+import useColors from '@/hooks/useColors';
 
 interface IHeaderProps {
     topListDetail: IMusic.IMusicSheetItem | null;
     musicList: IMusic.IMusicItem[] | null;
 }
 export default function Header(props: IHeaderProps) {
     const {topListDetail, musicList} = props;
-    const {colors} = useTheme();
+    const colors = useColors();
 
     const [maxLines, setMaxLines] = useState<number | undefined>(6);
 
@@ -51,7 +51,6 @@ export default function Header(props: IHeaderProps) {
                         </ThemeText>
                     </View>
                 </View>
-                <Divider style={style.divider} />
                 {topListDetail?.description ? (
                     <Pressable onPress={toggleShowMore}>
                         <View

diff --git a/src/components/musicSheetPage/components/navBar.tsx b/src/components/musicSheetPage/components/navBar.tsx
@@ -40,28 +40,5 @@ export default function (props: INavBarProps) {
             ]}>
             {navTitle}
         </AppBar>
-
-        // <ComplexAppBar
-        //     title={navTitle}
-        //     onSearchPress={() => {
-        //         navigate(ROUTE_PATH.SEARCH_MUSIC_LIST, {
-        //             musicList: musicList,
-        //         });
-        //     }}
-        //     menuOptions={[
-        //         {
-        //             icon: 'playlist-edit',
-        //             title: '批量编辑',
-        //             onPress() {
-        //                 navigate(ROUTE_PATH.MUSIC_LIST_EDITOR, {
-        //                     musicList: musicList,
-        //                     musicSheet: {
-        //                         title: navTitle,
-        //                     },
-        //                 });
-        //             },
-        //         },
-        //     ]}
-        // />
     );
 }
diff --git a/src/entry/index.tsx b/src/entry/index.tsx
@@ -16,6 +16,7 @@ import toastConfig from '@/components/base/toast';
 import useBootstrap from './useBootstrap';
 import Debug from '@/components/debug';
 import {ImageViewComponent} from '@/components/imageViewer';
+import {PortalHost} from '@/components/base/portal';
 
 /**
  * 字体颜色
@@ -70,6 +71,7 @@ export default function Pages() {
                         <ImageViewComponent />
                         <Toast config={toastConfig} />
                         <Debug />
+                        <PortalHost />
                     </NavigationContainer>
                 </SafeAreaProvider>
             </PaperProvider>

diff --git a/src/pages/artistDetail/index.tsx b/src/pages/artistDetail/index.tsx
@@ -1,16 +1,15 @@
 import React, {useEffect} from 'react';
 import {StyleSheet, View} from 'react-native';
-import StatusBar from '@/components/base/statusBar';
 import MusicBar from '@/components/musicBar';
 import Header from './components/header';
 import Body from './components/body';
 import {useAtom, useSetAtom} from 'jotai';
 import {initQueryResult, queryResultAtom, scrollToTopAtom} from './store/atoms';
-import ComplexAppBar from '@/components/base/ComplexAppBar';
 import {ROUTE_PATH, useNavigate, useParams} from '@/entry/router';
 import VerticalSafeAreaView from '@/components/base/verticalSafeAreaView';
 import globalStyle from '@/constants/globalStyle';
 import useOrientation from '@/hooks/useOrientation';
+import AppBar from '@/components/base/appBar';
 
 export default function ArtistDetail() {
     const [queryResult, setQueryResult] = useAtom(queryResultAtom);
@@ -28,10 +27,9 @@ export default function ArtistDetail() {
 
     return (
         <VerticalSafeAreaView style={globalStyle.fwflex1}>
-            <StatusBar />
-            <ComplexAppBar
-                title="作者"
-                menuOptions={[
+            <AppBar
+                withStatusBar
+                menu={[
                     {
                         title: '批量编辑单曲',
                         icon: 'playlist-edit',
@@ -44,8 +42,9 @@ export default function ArtistDetail() {
                             });
                         },
                     },
-                ]}
-            />
+                ]}>
+                作者
+            </AppBar>
             <View
                 style={
                     orientation === 'horizonal'