feat: add Layout, postcss-loader, react-router-dom

package.json

@@ -27,14 +27,18 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.9.0",
     "@babel/register": "^7.9.0",
+    "@types/classnames": "^2.2.10",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
+    "@types/react-router-dom": "^5.1.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.5.2",
     "eslint": "^6.8.0",
     "html-webpack-plugin": "^4.2.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-nested": "^4.2.1",
     "style-loader": "^1.1.4",
     "typescript": "^3.8.3",
     "url-loader": "^4.1.0",
@@ -45,7 +49,9 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.26.0",
+    "classnames": "^2.2.6",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.1.2"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  // parser: 'sugarss',   // 若使用sugarss解析器，会报错说不能使用大括号
+  plugins: {
+    'postcss-nested': {}
+  }
+}

src/components/Layout/Footer/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Icon, Tooltip } from '@blueprintjs/core'
+
+import styles from './style.module.css'
+
+const Footer = () => {
+  return (
+    <div className={styles.root}>
+      <div className={styles.songWrap}>
+        <img />
+        <div>
+          <div>为你写诗 <span className={styles.singer}>- 吴克群</span></div>
+          <div className={styles.time}>00:00 / 03:20</div>
+        </div>
+      </div>
+      <div className={styles.operations}>
+        <div className={styles.prev}><Icon icon='step-backward' /></div>
+        <div className={styles.pause}><Icon icon='pause' /></div>
+        <div className={styles.next}><Icon icon='step-forward' /></div>
+      </div>
+      <div className={styles.otherOperations}>
+        <div>
+          <Tooltip content='列表循环'>
+            <Icon icon='swap-horizontal' />
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content='打开播放列表'>
+            <Icon icon='menu-closed' />
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content='显示歌词'>
+            词
+          </Tooltip>
+        </div>
+        <div><Icon icon='volume-off' /></div>
+      </div>
+    </div>
+  )
+}
+
+export default Footer

src/components/Layout/Footer/style.module.css

@@ -0,0 +1,82 @@
+.root {
+  width: 100%;
+  height: 60px;
+  padding: 10px;
+  position: fixed;
+  bottom: 0;
+  border-top: 2px solid rgb(245, 245, 245);
+  display: flex;
+  justify-content: space-between;
+  background-color: #fff;
+}
+
+.songWrap {
+  display: flex;
+  align-items: center;
+
+  & img {
+    width: 40px;
+    height: 40px;
+    margin-right: 10px;;
+    border: none;
+    border-radius: 5px;
+    background-color: #ccc;
+  }
+
+  & .singer {
+    font-size: 0.8em;
+    color: rgb(127, 127, 127);
+  }
+
+  & .time {
+    font-size: 0.85em;
+    color: rgb(179, 179, 179);
+  }
+}
+
+.operations {
+  display: flex;
+  align-items: center;
+
+  & div {
+    cursor: pointer;
+  }
+
+  & .prev svg,
+  & .next svg {
+    width: 20px;
+    height: 20px;
+    color: rgb(208, 53, 49);
+  }
+
+  & .pause {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: rgb(208, 53, 49);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 20px;
+
+    & svg {
+      color: #fff;
+    }
+  }
+}
+
+.otherOperations {
+  display: flex;
+  align-items: center;
+  margin-right: 15px;
+
+  & div {
+    margin-left: 15px;
+    color: #888;
+    cursor: pointer;
+
+    & span:focus {
+      outline: none;
+    }
+  }
+}

src/components/Layout/Header/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Icon } from '@blueprintjs/core'
+
+import styles from './style.module.css'
+
+const Header = () => {
+  return (
+    <div className={styles.root}>
+      <div className={styles.actions}>
+        <div className={styles.iconsWrap}>
+          <div>
+            <Icon icon='cross' />
+          </div>
+          <div>
+            <Icon icon='minus' />
+          </div>
+          <div>
+            <Icon icon='maximize' />
+          </div>
+        </div>
+
+        <div className={styles.backForward}>
+          <div><Icon icon='chevron-left' /></div>
+          <div><Icon icon='chevron-right' /></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Header

src/components/Layout/Header/style.module.css

@@ -0,0 +1,72 @@
+.root {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(248, 248, 248, 0.8);
+  position: fixed;
+  top: 0;
+}
+
+.iconsWrap {
+  display: flex;
+  position: absolute;
+  top: 10px;
+  left: 8px;
+
+  & div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    margin-right: 5px;
+    border-radius: 50%;
+    cursor: pointer;
+
+    & svg {
+      display: none;
+    }
+  }
+
+  & div:nth-child(1) {
+    background-color: rgb(255, 86, 82);
+  }
+
+  & div:nth-child(2) {
+    background-color: rgb(255, 182, 60);
+  }
+
+  & div:nth-child(3) {
+    background-color: rgb(0, 195, 67);
+  }
+
+  & svg {
+    width: 8px;
+    height: 8px;
+  }
+
+  & div:hover svg {
+    display: block;
+  }
+}
+
+.backForward {
+  display: flex;
+  position: absolute;
+  bottom: 10px;
+  left: 125px;
+
+  div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-left: 8px;
+    border-radius: 50%;
+    color: rgb(164, 164, 164);
+  }
+
+  div:hover {
+    background-color: rgb(232, 232, 232);
+  }
+}

src/components/Layout/Sidebar/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Icon } from '@blueprintjs/core'
+import cn from 'classnames'
+
+import styles from './style.module.css'
+
+const Sidebar = () => {
+  const isLogged = true
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.user}>
+        <div className={styles.avatar}>
+          {isLogged ? <Icon icon='person' /> : <img />}
+        </div>
+        <div className={styles.name}>
+          <span>momo_Unique</span>
+          <Icon icon='play' />
+        </div>
+      </div>
+
+      <div className={styles.tabs}>
+        <div className={cn(styles.tab, styles.enabled)}>
+          <Icon icon='music' />
+          发现音乐
+        </div>
+        <div className={styles.tab}>
+          <Icon icon='mobile-video' />
+          视频
+        </div>
+      </div>
+
+      <div className={styles.block}>
+        <div className={styles.title}>我的音乐</div>
+        <div className={styles.tabs}>
+          <div className={styles.tab}>
+            <Icon icon='import' />
+            下载管理
+          </div>
+          <div className={styles.tab}>
+            <Icon icon='cloud' />
+            我的音乐云盘
+          </div>
+          <div className={styles.tab}>
+            <Icon icon='star-empty' />
+            我的收藏
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Sidebar

src/components/Layout/Sidebar/style.module.css

@@ -0,0 +1,64 @@
+.root {
+  width: 220px;
+  height: 100%;
+  padding: 50px 0 60px;
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(234, 234, 234);
+}
+
+.user {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+
+  .avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 35px;
+    height: 35px;
+    margin-right: 10px;
+    border: none;
+    border-radius: 50%;
+    background-color: #ccc;
+    cursor: pointer;
+    color: rgb(220, 220, 220);
+  }
+
+  .name {
+    color: rgb(69, 69, 69);
+    cursor: default;
+  }
+}
+
+.tabs {
+  color: rgb(77, 77, 77);
+  cursor: default;
+
+  .tab {
+    padding: 10px 20px;
+
+    span {
+      margin-right: 10px;
+    }
+  }
+
+  .tab:hover {
+    background-color: rgb(227, 227, 227);
+  }
+
+  .enabled {
+    color: rgb(208, 58, 54);
+  }
+}
+
+.block {
+  margin-top: 25px;
+
+  .title {
+    padding-left: 20px;
+    font-size: 0.8em;
+    color: rgb(129, 129, 129);
+  }
+}