refactor: 页面基础路由调整,路径自动

.eslintrc.js

@@ -20,7 +20,6 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     'react/jsx-props-no-spreading': 'off',
     'promise/catch-or-return': 'off',
-    "no-shadow": ["error", { "builtinGlobals": false, "hoist": "functions", "allow": [], "ignoreOnInitialization": false }],
     '@typescript-eslint/no-unused-vars': [
       2,
       {
@@ -29,6 +28,7 @@ module.exports = {
         ignoreRestSiblings: true,
       },
     ],
+    "no-shadow": ["error", { "builtinGlobals": false, "hoist": "functions", "allow": [], "ignoreOnInitialization": false }],
   },
   parserOptions: {
     ecmaVersion: 2020,

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx commitlint --edit 

package.json

@@ -62,7 +62,9 @@
     "test": "jest"
   },
   "lint-staged": {
-
+    "*.{js,jsx,ts,tsx}": [
+      "cross-env NODE_ENV=development eslint --cache"
+    ],
     "src/**/*.{ts,tsx,js,jsx}": "eslint",
     "src/**/*.scss": "stylelint",
     "*.json,.{eslintrc,prettierrc}": [
@@ -121,6 +123,7 @@
     }
   },
   "dependencies": {
+    "@loadable/component": "^5.15.2",
     "@reduxjs/toolkit": "^1.8.2",
     "@zarm-design/icons": "^0.1.4",
     "NeteaseCloudMusicApi": "^4.6.6",
@@ -135,7 +138,6 @@
     "react": "^18.1.0",
     "react-content-loader": "^6.2.0",
     "react-dom": "^18.1.0",
-    "react-loadable": "^5.5.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "redux": "^4.2.0"
@@ -152,6 +154,7 @@
     "@types/classnames": "^2.3.1",
     "@types/isomorphic-fetch": "^0.0.36",
     "@types/jest": "^28.1.3",
+    "@types/loadable__component": "^5.13.4",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",

src/pages/discover/route.tsx

@@ -1,62 +1,64 @@
 import React from 'react';
-// import type { RouteObject } from 'react-router-dom';
-import AsyncImportLoadable from '@/src/router/loading';
+// import  { Outlet } from 'react-router-dom';
+import AsyncImportLoadable from '@loadable/component';
+
 import { uuid } from '@/utils/tools';
 
-const AppDiscoverHome = AsyncImportLoadable(
+const AppDiscoverHome = AsyncImportLoadable(()=>
   import(/* webpackPrefetch: true */ './index')
 );
-const AppDiscoverSongList = AsyncImportLoadable(
+const AppDiscoverSongList = AsyncImportLoadable(()=>
   import(/* webpackPrefetch: true */ './songList')
 );
-const AppDiscoverAnchorRadio = AsyncImportLoadable(
+const AppDiscoverAnchorRadio = AsyncImportLoadable(()=>
   import(/* webpackPrefetch: true */ './anchorRadio')
 );
 
-const AppDiscoverLeaderboard = AsyncImportLoadable(
+const AppDiscoverLeaderboard = AsyncImportLoadable(()=>
   import(/* webpackPrefetch: true */ './leaderboard')
 );
-const AppDiscoverSinger = AsyncImportLoadable(
+const AppDiscoverSinger = AsyncImportLoadable(()=>
   import(/* webpackPrefetch: true */ './singer')
 );
 
-const AppDiscoverNewMusic = AsyncImportLoadable(
+const AppDiscoverNewMusic = AsyncImportLoadable(()=>
   import(/* webpackPrefetch: true */ './latestMusic')
 );
 
 const route = [
   {
-    path: '/discover', // 个性推荐
+    path: 'discover', // 个性推荐
+    // element: <Outlet />,
     children: [
       {
         index: true,
         element: <AppDiscoverHome />,
         title: '个性推荐',
-        path: '/discover',
+        // path: 'discover',
       },
       {
         title: '歌单',
-        path: '/discover/song-list',
-        element: <AppDiscoverAnchorRadio />,
+        path: 'song-list',
+        element: <AppDiscoverSongList />,
       },
       {
         title: '主播电台',
-        path: '/discover/anchor-radio',
-        element: <AppDiscoverSongList />,
+        path: 'anchor-radio',
+        element: <AppDiscoverAnchorRadio />,
       },
       {
         title: '排行榜',
-        path: '/discover/leaderboard',
+        path: 'leaderboard',
         element: <AppDiscoverLeaderboard />,
       },
       {
         title: '歌手',
-        path: '/discover/singer',
+        path: 'singer',
         element: <AppDiscoverSinger />,
       },
       {
         title: '最新音乐',
-        path: '/discover/latest-music',
+        path: 'latest-music',
         element: <AppDiscoverNewMusic />,
       },
     ],
@@ -65,7 +67,7 @@ const route = [
 export const discoverHeaderNav: { [key: string]: string }[] =
   route[0].children.map((k) => ({
     title: k.title,
-    path: k.path,
+    path: `/main/${k.path}`,
     uid: uuid(),
   }));
 export default route;

src/pages/discover/songList/index.tsx

@@ -7,6 +7,6 @@ import './index.scss';
 const prefixCls = 'app-discover';
 const clsName = clsPrefix(prefixCls);
 const AppDiscover = () => {
-  return <div className={prefixCls}>歌曲清单页777</div>;
+  return <div className={prefixCls}>不是哥单吗？  歌曲清单页777</div>;
 };
 export default AppDiscover;

src/pages/songs/index.scss

@@ -0,0 +1,11 @@
+/*
+ * @NOTE: Prepend a `~` to css file paths that are in your node_modules
+ *        See https://github.com/webpack-contrib/sass-loader#imports
+ */
+@import '@/src/style/index';
+$prefixCls: 'songbar-component';
+.#{$prefixCls} {
+  padding: 10px;
+  height: 60px;
+  background-color: rgba(255, 255, 255, 0.3);
+}

src/pages/songs/index.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import {
+  CaretRightOutlined,
+  RightOutlined,
+  ChromeOutlined,
+} from '@ant-design/icons';
+import { shallowEqual } from 'react-redux';
+import { clsPrefix } from '@/utils/serialization';
+import { fetchLatestMusictList } from '@/store/discovers';
+import { useAppSelector, useAppDispatch } from '@/store/hooks';
+import './index.scss';
+
+const prefixCls = 'songbar-component';
+const clsName = clsPrefix(prefixCls);
+const AppSongBarPage = (props) => {
+  const dispatch = useAppDispatch();
+  const { latestMusictList = [] } = useAppSelector((state) => {
+    const {
+      discoversState: {
+        personalizedList,
+        discoverBannerList,
+        latestMusictList,
+      } = {},
+    } = state;
+    return { personalizedList, discoverBannerList, latestMusictList };
+  }, shallowEqual);
+  useEffect(() => {
+    dispatch(fetchLatestMusictList(0));
+  }, []);
+
+  return <div className={prefixCls}></div>;
+};
+export default AppSongBarPage;

src/renderer/App.tsx

@@ -1,25 +1,28 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Outlet } from 'react-router-dom';
 import { clsPrefix } from '@/utils/serialization';
-import AppHeader from './components/header/index';
-import AppSidebar from './components/sidebar/index';
 import { FakeScrollComponent } from '@/src/components';
+import AppHeader from './components/header/index';
 const prefixCls = 'app-container';
 const clsName = clsPrefix(prefixCls);
-const AppComponent = () => {
+export const AppLayout = ({ children }: { children: ReactNode }) => {
   return (
     <>
       <i className="app-vague-bg" />
       <div className={prefixCls}>
         <AppHeader />
-        <section className={clsName('layout')}>
-          <AppSidebar />
-          <FakeScrollComponent className={clsName('outlet')}>
-            <Outlet />
-          </FakeScrollComponent>
-        </section>
+        <section className={clsName('layout')}>{children}</section>
       </div>
     </>
   );
 };
+const AppComponent = () => {
+  return (
+    <AppLayout>
+      <FakeScrollComponent className={clsName('outlet')}>
+        <Outlet />
+      </FakeScrollComponent>
+    </AppLayout>
+  );
+};
 export default AppComponent;

src/renderer/components/sidebar/config.tsx

@@ -19,19 +19,19 @@ const config: ConfigProps[] = [
   {
     title: '发现音乐',
     icon: MailOutlined,
-    url: '/discover',
+    url: '/main/discover',
     uid: uuid(),
   },
   {
     title: '私人FM',
     icon: RightOutlined,
-    url: '/1',
+    url: '/test6',
     uid: uuid(),
   },
   {
     title: '视频',
     icon: SettingOutlined,
-    url: '/1',
+    url: '/main/discover/song-list',
     uid: uuid(),
   },
   {

src/renderer/coreOutlet.tsx

@@ -1 +1,24 @@
-/* 带侧边栏的入口 */
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { clsPrefix } from '@/utils/serialization';
+import AppSidebar from './components/sidebar/index';
+import { FakeScrollComponent } from '@/src/components';
+import AsyncImportLoadable from '@loadable/component';
+import { AppLayout } from './app';
+const AppSongBarPage = AsyncImportLoadable(
+  () => import(/* webpackPrefetch: true */ '@/src/pages/songs')
+);
+const prefixCls = 'app-container';
+const clsName = clsPrefix(prefixCls);
+const AppComponent = () => {
+  return (
+    <AppLayout>
+      <AppSidebar />
+      <FakeScrollComponent className={clsName('outlet')}>
+        <Outlet />
+      </FakeScrollComponent>
+      <AppSongBarPage />
+    </AppLayout>
+  );
+};
+export default AppComponent;

src/renderer/index.tsx

@@ -1,3 +1,3 @@
 import 'antd/dist/antd.less';
-import './App.scss';
+import './app.scss';
 import '../root';

src/renderer/test.tsx

@@ -1,7 +1,77 @@
 // import './test2.scss';
-
+import React from 'react';
 const Hello = () => {
-  return <div className="test">您wwww好,不错啊，好用哦</div>;
+  return (
+    <div className="test">
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦2
+      <br />
+      您wwww好,不错啊，好用哦3
+      <br />3
+      您wwww4好,不错啊，好用哦
+      <br />
+      您wwww55555好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦100
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      <br />100
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      您wwww好,不错啊，好用哦
+      <br />
+      <p>结束了～～～</p>
+    </div>
+  );
 };
 
 export default Hello;