feat: 完成登录注册和首页 (#7)

* feat: 完成登录注册和首页

* feat: 完成 Tab 组件

* fix: 删除多余的 activeIndex

* feat: logo 替换

* fix: 找到 swiper 问题并修复

* feat: 解决 swiper 问题, swiper.update

Author: upupming

.vscode/settings.json

@@ -16,6 +16,7 @@
     "typescriptreact"
   ],
   "cSpell.words": [
+    "Swiper",
     "Vercel",
     "douyin",
     "gitee",

backend/src/action/UserAction.ts

@@ -1,13 +1,12 @@
 /* eslint-disable @typescript-eslint/promise-function-async */
 import { User } from 'models'
-import Omit from 'omit.js'
 
 /**
  * 添加用户
  * @param { User } user
  */
-const Create = async (user: Omit<User, 'id'>) => {
-  return Omit(await user.save(), ['password'])
+const Create = async (user: User) => {
+  return await user.save()
 }
 
 /**

backend/src/database/index.ts

@@ -11,8 +11,8 @@ const sequelize = new Sequelize(database, user, password, {
 })
 
 const init = async () => {
-  await sequelize.sync({ alter: isDev })
-  console.log('All models were synchronized successfully.')
+  // await sequelize.sync({ alter: isDev })
+  // console.log('All models were synchronized successfully.')
 }
 export { init }
 export default sequelize

backend/src/models/User.ts

@@ -8,7 +8,7 @@ export enum Gender {
 }
 
 class User extends Model {
-  public id!: number
+  public id!: number | null
   public username!: string
   public password!: string
   public profile?: string

backend/src/service/UserService.ts

@@ -19,11 +19,12 @@ const Register = async (user: User): Promise<Restful> => {
     user.password = md5Crypto(user.password)
 
     // 去除前端可能给的多余ID（自增字段）
-    const registeredUser = await Action.Create(Omit(user, ['id']))
+    user.id = null
+    const registeredUser = await Action.Create(user)
     return new Restful(
       CodeDictionary.SUCCESS,
       '注册成功',
-      registeredUser.toJSON(),
+      Omit(registeredUser.toJSON() as any, ['password']),
     )
   } catch (e) {
     return new Restful(
@@ -48,7 +49,7 @@ const Login = async (username: string, password: string): Promise<Restful> => {
       return new Restful(
         CodeDictionary.SUCCESS,
         '登陆成功',
-        Omit(existedUser, ['password']).toJSON(),
+        Omit(existedUser.toJSON() as any, ['password']),
       )
     }
     return new Restful(CodeDictionary.LOGIN_ERROR, '账号或密码错误')

frontend/config/webpack.config.js

@@ -18,7 +18,7 @@ const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin')
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
-const ESLintPlugin = require('eslint-webpack-plugin')
+// const ESLintPlugin = require('eslint-webpack-plugin')
 const paths = require('./paths')
 const modules = require('./modules')
 const getClientEnvironment = require('./env')
@@ -727,25 +727,25 @@ module.exports = function (webpackEnv) {
           // The formatter is invoked directly in WebpackDevServerUtils during development
           formatter: isEnvProduction ? typescriptFormatter : undefined,
         }),
-      new ESLintPlugin({
-        // Plugin options
-        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
-        formatter: require.resolve('react-dev-utils/eslintFormatter'),
-        eslintPath: require.resolve('eslint'),
-        context: paths.appSrc,
-        cache: true,
-        // ESLint class options
-        cwd: paths.appPath,
-        resolvePluginsRelativeTo: __dirname,
-        baseConfig: {
-          extends: [require.resolve('eslint-config-react-app/base')],
-          rules: {
-            ...(!hasJsxRuntime && {
-              'react/react-in-jsx-scope': 'error',
-            }),
-          },
-        },
-      }),
+      // new ESLintPlugin({
+      //   // Plugin options
+      //   extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+      //   formatter: require.resolve('react-dev-utils/eslintFormatter'),
+      //   eslintPath: require.resolve('eslint'),
+      //   context: paths.appSrc,
+      //   cache: true,
+      //   // ESLint class options
+      //   cwd: paths.appPath,
+      //   resolvePluginsRelativeTo: __dirname,
+      //   baseConfig: {
+      //     extends: [require.resolve('eslint-config-react-app/base')],
+      //     rules: {
+      //       ...(!hasJsxRuntime && {
+      //         'react/react-in-jsx-scope': 'error',
+      //       }),
+      //     },
+      //   },
+      // }),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell webpack to provide empty mocks for them so importing them works.

frontend/package-lock.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@rematch/core": "^2.0.0-next.10",
     "@rematch/immer": "^2.0.0-next.10",
+    "@rematch/select": "^3.0.0-next.10",
     "axios": "^0.21.1",
     "classnames": "^2.2.6",
     "hls.js": "^0.14.17",
@@ -24,7 +25,8 @@
     "react-refresh": "^0.8.3",
     "react-router-dom": "^5.2.0",
     "react-use": "^17.1.0",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "swiper": "^6.4.11"
   },
   "devDependencies": {
     "@babel/core": "7.12.3",

frontend/package.json

@@ -9,7 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>我和我的抖音 - 第 7 组</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

frontend/public/favicon.ico

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

frontend/public/index.html

@@ -1,6 +1,7 @@
 import React from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import { RouteConfig, routes } from './routes'
+import { Tabs } from './tabs'
 
 const App = (): JSX.Element => {
   return (
@@ -11,9 +12,10 @@ const App = (): JSX.Element => {
       <div className="App">
         <Switch>
           {routes.map((route, i) => (
-            <RouteWithSubRoutes key={i} {...route} />
+            <RouteWithSubRoutes key={route.path} {...route} />
           ))}
         </Switch>
+        <Tabs />
       </div>
     </Router>
   )
@@ -25,9 +27,9 @@ const App = (): JSX.Element => {
 const RouteWithSubRoutes = (route: RouteConfig): JSX.Element => {
   return (
     <Route
+      {...route.routeProps}
       path={route.path}
       render={(props: any) => (
-        // pass the sub-routes down to keep nesting
         <route.component {...props} routes={route.routes} />
       )}
     />

frontend/public/logo192.png

@@ -41,7 +41,7 @@ export const BDPlayer: React.FC<BDPlayerProps> = ({
     } catch (err) {
       // Auto-play was prevented
       // Show paused UI
-      console.error('播放失败', err)
+      console.log('播放失败', err)
     }
     setLoading(false)
   }
@@ -148,6 +148,8 @@ export const BDPlayer: React.FC<BDPlayerProps> = ({
             className="bd-player-progress-seek"
             max={Math.floor(videoDuration)}
             onChange={(evt) => {
+              if (!active) return
+
               setCurrentTime(videoRef.current?.currentTime || 0)
               if (videoRef.current) {
                 videoRef.current.currentTime = parseInt(

frontend/public/logo512.png

@@ -1,20 +1,20 @@
 import React, { FC } from 'react'
 import { connect } from 'react-redux'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
-import { Dispatch, RootState } from '@/store'
+import { RootDispatch, RootState } from '@/store'
 import './index.less'
 
 const mapState = (state: RootState) => ({
   state: state.demo,
 })
-const mapDispatch = (dispatch: Dispatch) => ({
+const mapDispatch = (dispatch: RootDispatch) => ({
   dispatch: dispatch.demo,
 })
-export type HomeProps = ReturnType<typeof mapState> &
+export type DemoProps = ReturnType<typeof mapState> &
   ReturnType<typeof mapDispatch> &
   RouteComponentProps
 
-const Demo: FC<HomeProps> = ({ state, dispatch, history }) => {
+const Demo: FC<DemoProps> = ({ state, dispatch, history }) => {
   return (
     <div className="demo">
       <div className="demo-route">当前路由：{history.location.pathname}</div>

frontend/public/manifest.json

@@ -1,35 +1,32 @@
 import { createModel } from '@rematch/core'
 import { RootModel } from '@/models'
-import { AxiosResponse } from 'axios'
 import { request } from '@/utils'
-export interface HomeState {
+import { LoggedInUser } from '@/utils/request/user'
+export interface DemoState {
   count: number
   players: PlayerModel[]
   testAPTResult: any
 }
 
-export const defaultHomeState: HomeState = {
+export const defaultDemoState: DemoState = {
   count: 0,
   players: [],
   testAPTResult: null,
 }
 
 export const demo = createModel<RootModel>()({
-  state: defaultHomeState,
+  state: defaultDemoState,
   reducers: {
     // 直接修改 state 的 demo
-    SET_COUNT: (state: HomeState, newCount: number) => {
+    SET_COUNT: (state: DemoState, newCount: number) => {
       state.count = newCount
       return state
     },
-    SET_PLAYERS: (state: HomeState, players: PlayerModel[]) => {
+    SET_PLAYERS: (state: DemoState, players: PlayerModel[]) => {
       state.players = players
       return state
     },
-    SET_testAPTResult: (
-      state: HomeState,
-      testAPTResult: AxiosResponse<any>,
-    ) => {
+    SET_testAPTResult: (state: DemoState, testAPTResult: LoggedInUser) => {
       state.testAPTResult = testAPTResult
       return state
     },
@@ -50,7 +47,7 @@ export const demo = createModel<RootModel>()({
           username: 'testName',
           password: '123456',
         })
-        demo.SET_testAPTResult(res)
+        if (res) demo.SET_testAPTResult(res)
       },
     }
   },

frontend/src/App.tsx

@@ -0,0 +1,11 @@
+@import '@/static/less/reset.less';
+
+.bd7-home {
+  width: 100%;
+  height: 0;
+  flex-grow: 1;
+  .swiper-container {
+    width: 100%;
+    height: 100%;
+  }
+}