动态改变站点标题

src/App.js

@@ -74,6 +74,11 @@ export default function App() {
                                     <VideoPreview />
                                 </Suspense>
                             </Route>
+                            <Route path={`${path}login`}>
+                                <Suspense fallback={<div>Loading...</div>}>
+                                    <LoginForm />
+                                </Suspense>
+                            </Route>
                         </Switch>
                     </main>
                 </div>

src/actions/index.js

@@ -33,6 +33,13 @@ export const changeViewMethod = method => {
     };
 };
 
+export const changeSubTitle = title =>{
+    return {
+        type: "CHANGE_SUB_TITLE",
+        title: title
+    };
+};
+
 export const toggleDaylightMode = ()=>{
     return {
         type: "TOGGLE_DAYLIGHT_MODE",

src/component/FileManager/FileManager.js

@@ -8,10 +8,27 @@ import Explorer from "./Explorer"
 import Modals from "./Modals"
 import {decode} from "../../untils/index"
 import { withStyles } from '@material-ui/core';
+import {connect} from "react-redux";
+import {
+    changeSubTitle,
+} from "../../actions";
 const styles = theme => ({
  
 })
 
+const mapStateToProps = ()=>{
+
+}
+
+const mapDispatchToProps = dispatch => {
+    return {
+        changeSubTitle: text => {
+            dispatch(changeSubTitle(text));
+        },
+
+    };
+};
+
 class FileManager extends Component {
 
     constructor(props){
@@ -19,6 +36,10 @@ class FileManager extends Component {
         this.image = React.createRef();
     }
 
+    componentDidMount() {
+        this.props.changeSubTitle(null);
+    }
+
     handleImageLoaded = ()=>{
         window.upload_load="";
         window.cliLoad ="";
@@ -37,7 +58,7 @@ class FileManager extends Component {
         if(window.upload_load===""){
             window.location.href="/FixComplete";
         }
-    }
+    };
     
     render() {
         return (
@@ -58,4 +79,7 @@ class FileManager extends Component {
 FileManager.propTypes = {
 };
 
-export default withStyles(styles)(FileManager);
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(FileManager));

src/component/Navbar/Navbar.js

@@ -87,7 +87,8 @@ const mapStateToProps = state => {
         withFile: state.explorer.selectProps.withFile,
         path: state.navigator.path,
         keywords: state.explorer.keywords,
-        title: state.siteConfig.title
+        title: state.siteConfig.title,
+        subTitle:state.viewUpdate.subTitle,
     };
 };
 
@@ -305,15 +306,6 @@ class NavbarCompoment extends Component {
         this.setState(state => ({ mobileOpen: !state.mobileOpen }));
     };
 
-    clickUpload = () => {
-        if (this.state.queued === 0) {
-            //document.getElementsByClassName("uploadForm")[0].click();
-            this.props.changeContextMenu("empty", true);
-        } else {
-            this.UploaderRef.current.getWrappedInstance().openFileList();
-        }
-    };
-
     loadUploader() {
         if (pathHelper.isHomePage(this.props.location.pathname)) {
             return <Uploader />;
@@ -702,7 +694,7 @@ class NavbarCompoment extends Component {
                                                 }
                                             />
                                         )}
-                                    {this.props.title}
+                                    {this.props.subTitle?this.props.subTitle : this.props.title}
                                 </Typography>
                             )}
 

src/component/Viewer/Video.js

@@ -1,10 +1,11 @@
-import React from "react";
+import React, {useCallback, useEffect} from "react";
 import DPlayer from "react-dplayer";
 import { Paper } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useRouteMatch } from "react-router";
 import { getBaseURL } from "../../middleware/Api";
-import Typography from "@material-ui/core/Typography";
+import {useDispatch} from "react-redux";
+import {changeSubTitle} from "../../actions";
 
 const useStyles = makeStyles(theme => ({
     layout: {
@@ -26,7 +27,15 @@ const useStyles = makeStyles(theme => ({
 
 export default function VideoViewer(props) {
     const math = useRouteMatch();
-
+    const dispatch = useDispatch();
+    const SetSubTitle = useCallback(
+        title=>dispatch(changeSubTitle(title)),
+        [dispatch]
+    );
+    useEffect(()=>{
+        let path = math.params[0].split("/");
+        SetSubTitle(path[path.length - 1]);
+    },[math.params[0]]);
 
     const classes = useStyles();
     return (

src/index.js

@@ -63,6 +63,7 @@ const defaultStatus = InitSiteConfig({
         open: false,
         explorerViewMethod: "icon",
         sortMethod: "timePos",
+        subTitle:null,
         contextType: "none",
         menuOpen: false,
         navigatorLoading: true,

src/reducers/index.js

@@ -360,6 +360,12 @@ const cloudreveApp = (state = [], action) => {
                     }),
                 }),
             });
+        case 'CHANGE_SUB_TITLE':
+            return Object.assign({}, state, {
+                viewUpdate: Object.assign({}, state.viewUpdate, {
+                    subTitle: action.title,
+                }),
+            });
         case 'TOGGLE_SNACKBAR':
             return Object.assign({}, state, {
                 viewUpdate: Object.assign({}, state.viewUpdate, {