feat: 搜索栏聚焦、一些修改

public/electron.js

@@ -22,29 +22,25 @@ ipcMain.on('show', () => {
 });
 
 function createWindow() {
-  // Menu.setApplicationMenu(null);
 
   //创建浏览器窗口,宽高自定义具体大小你开心就好
   mainWindow = new BrowserWindow({
     width: 980,
     height: 900,
     minWidth: 980,
     minHeight: 800,
-    // frame: false
     titleBarStyle: 'hiddenInset',
     backgroundColor: '#021524'
   });
 
-  /* 
-   * 加载应用-----  electron-quick-start中默认的加载入口
-  */
   // mainWindow.loadURL(`file://${__dirname}/index.html`);
 
   // 加载应用----适用于 react 项目
   mainWindow.loadURL('http://localhost:3000/');
 
   // 打开开发者工具，默认不打开
   // mainWindow.webContents.openDevTools();
+
   mainWindow.once('ready-to-show', () => {
     mainWindow.show();
   });
@@ -89,7 +85,6 @@ app.on('activate', (e) => {
 });
 
 app.on('before-quit', (e) => {
-  e.preventDefault();
   apiServer && apiServer.close();
 
   forceQuit = true;

src/App.js

@@ -22,7 +22,15 @@ import MyTitle from './renderer/components/MyTitle';
 import './App.scss';
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      redirect: true
+    };
+  }
+
   componentWillMount() {
+    // 初始化收藏夹
     $db.find({ name: 'collector' }, (err, res) => {
       if (res.length === 0) {
         $db.insert(
@@ -46,6 +54,12 @@ class App extends Component {
     });
   }
 
+  componentDidMount() {
+    this.setState(() => ({
+      redirect: false
+    }));
+  }
+
   render() {
     return (
       <Router>
@@ -61,7 +75,7 @@ class App extends Component {
           <Route path="/collect" component={Collect} />
           <Route path="/rank" component={Rank} />
           <Route path="/about" component={About} />
-          <Redirect from="*" to="/" />
+          { this.state.redirect ? <Redirect to="/" /> : null}
           <MyTitle />
           {this.props.showLoading ? (
             <div className="app-loading-container">

src/components/Header/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import {
   getHideMusicListAction,
@@ -9,12 +9,19 @@ import {
 import './style.scss';
 
 class Header extends Component {
+  isActive = (pathname) => {
+    if (this.props.location.pathname === pathname) {
+      return 'active';
+    } else {
+      return '';
+    }
+  }
+
   render() {
     return (
       <header>
         <NavLink
           exact
-          activeClassName="active"
           to="/"
           onClick={this.props.handleHideMusicListAndSingerInfo}
         >
@@ -28,35 +35,35 @@ class Header extends Component {
         <nav>
           <NavLink
             exact
-            activeClassName="active"
+          activeClassName={this.isActive('/')}
             to="/"
             onClick={this.props.handleHideMusicListAndSingerInfo}
           >
             推荐
           </NavLink>
           <NavLink
-            activeClassName="active"
+          activeClassName={this.isActive('/rank')}
             to="/rank"
             onClick={this.props.handleHideMusicListAndSingerInfo}
           >
             排行榜
           </NavLink>
           <NavLink
-            activeClassName="active"
+            activeClassName={this.isActive('/search')}
             to="/search"
             onClick={this.props.handleHideMusicListAndSingerInfo}
           >
             搜索
           </NavLink>
           <NavLink
-            activeClassName="active"
+            activeClassName={this.isActive('/collect')}
             to="/collect"
             onClick={this.props.handleHideMusicListAndSingerInfo}
           >
             收藏
           </NavLink>
           <NavLink
-            activeClassName="active"
+            activeClassName={this.isActive('/about')}
             to="/about"
             onClick={this.props.handleHideMusicListAndSingerInfo}
           >
@@ -77,7 +84,9 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-export default connect(
-  null,
-  mapDispatchToProps
-)(Header);
+export default withRouter(
+  connect(
+    null,
+    mapDispatchToProps
+  )(Header)
+);

src/data/index.js

@@ -1,16 +1,8 @@
 import Datastore from 'nedb';
 import path from 'path';
-// import { remote } from 'electron';
-// const remote = window.require('electron').remote;
-import { remote } from 'electron';
-
-// console.log(
-//   'remote.app.getPath',
-//   path.join(remote.app.getPath('userData'), '/data.db')
-// );
+const remote = window.require('electron').remote;
 
 export default new Datastore({
   filename: path.join(remote.app.getPath('userData'), '/data.db'),
-//   filename: '/Users/zx/Desktop/data.db',
   autoload: true
 });

src/pages/Rank/style.scss

@@ -22,9 +22,9 @@
 
   li {
     display: inline-block;
-    margin: 0 calc((100% / 5 - 150px) / 2);
-    width: 150px;
-    margin-bottom: 20px;
+    margin: 0 calc((100% / 5 - 130px) / 2);
+    width: 130px;
+    margin-bottom: 30px;
     font-size: $font-size-l;
     cursor: pointer;
 
@@ -37,27 +37,28 @@
     p {
       float: left;
       margin-bottom: 5px;
-      width: 150px;
+      width: 130px;
       color: $color-text-gray;
     }
 
     .name {
       font-size: $font-size-xl;
       color: $color-text;
       transition: all 0.3s;
+      line-height: 20px;
     }
 
     .img-container {
-      width: 150px;
-      height: 150px;
+      width: 130px;
+      height: 130px;
       overflow: hidden;
       margin-bottom: 10px;
-      border-radius: 10px;
+      border-radius: 5px;
 
       img {
-        width: 150px;
-        min-height: 150px;
-        border-radius: 10px;
+        width: 130px;
+        min-height: 130px;
+        border-radius: 5px;
       }
     }
   }

src/pages/Recommend/index.js

@@ -52,7 +52,6 @@ class Recommend extends Component {
       recommendList.scrollHeight -
         (recommendList.scrollTop + recommendList.clientHeight) ===
       0;
-    console.log('scrollAtBottom', scrollAtBottom);
     if (scrollAtBottom && !this.state.gotRecommend) {
       this.setState(() => ({
         gotRecommend: true,

src/pages/Search/index.js

@@ -332,6 +332,7 @@ class Search extends Component {
           <div className="search-input-container">
             <i className="iconfont icon-search" />
             <input
+              autoFocus={true}
               value={this.state.searchVal}
               placeholder="搜点什么想听的吧.."
               onChange={(e) => {
@@ -424,14 +425,17 @@ export default connect(
 
 function formatTracks(list) {
   return list.map((item) => {
+    const singers = item.artists.map((item) => {
+      return {
+        id: item.id,
+        name: item.name
+      };
+    });
     return {
       id: item.id,
       musicName: item.name,
       imgUrl: null,
-      singer: {
-        id: item.artists[0].id,
-        name: item.artists[0].name
-      },
+      singers,
       album: {
         id: item.album.id,
         name: item.album.name