🎨 Style: [web]:修改背景色

front/.editorconfig

@@ -3,3 +3,4 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 tab_width = 2
+indent_size = 2

front/.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 .vscode
 yarn.lock
+.idea

front/src/App.jsx

@@ -1,11 +1,12 @@
-import React, { Component } from "react";
-import { Route, Switch, Redirect } from "react-router-dom";
-import { message } from "antd";
-import { withRouter } from "react-router-dom";
-import { Provider } from "react-redux";
+import React, {Component} from "react";
+import {Route, Switch, Redirect} from "react-router-dom";
+import {message} from "antd";
+import {withRouter} from "react-router-dom";
+import {Provider} from "react-redux";
 import ClipboardJS from "clipboard";
 import store from "./redux";
 import NotFound from "./pages/public/notFound/NotFound";
+import UserSpace from './pages/userSpace';
 
 import Login from "./pages/public/Login";
 import RegisterOrReset from "./pages/public/RegisterOrReset";
@@ -22,11 +23,11 @@ class App extends Component {
   componentDidMount() {
     //初始化clipboard
     let clipboard = new ClipboardJS(".copy-to-board", {
-      text: function(trigger) {
+      text: function (trigger) {
         return window.copyUrl;
       }
     });
-    clipboard.on("success", function(e) {
+    clipboard.on("success", function (e) {
       message.success("复制成功");
       e.clearSelection();
     });
@@ -40,16 +41,20 @@ class App extends Component {
       <Provider store={store}>
         <div className="fullScreen" style={mainStyle}>
           <Switch>
-            <Redirect exact path="/" to="/manage/overview" />
-            <Route exact path="/manage/overview" component={ManageOverview} />
 
+            {/*书签管理页面*/}
+            <Redirect exact path="/" to="/manage/overview"/>
+            <Route exact path="/manage/overview" component={ManageOverview}/>
+
+            {/*个人中心页面*/}
+            <Route exact path="/userSpace" component={UserSpace}/>
             {/* 公共页面 */}
-            <Route exact path="/public/login" component={Login} />
-            <Route exact path="/public/register" component={RegisterOrReset} />
-            <Route exact path="/public/resetPassword" component={RegisterOrReset} />
-            <Route exact path="/404" component={NotFound} />
+            <Route exact path="/public/login" component={Login}/>
+            <Route exact path="/public/register" component={RegisterOrReset}/>
+            <Route exact path="/public/resetPassword" component={RegisterOrReset}/>
+            <Route exact path="/404" component={NotFound}/>
             {/* 当前面的路由都匹配不到时就会重定向到/404 */}
-            <Redirect path="/" to="/404" />
+            <Redirect path="/" to="/404"/>
           </Switch>
         </div>
       </Provider>

front/src/global.less

@@ -1 +1,2 @@
-@mainBgColor: #ffffff;
+@mainBgColor: #f6f6f6;
+@mainContentColor: #ffffff;

front/src/layout/MainLayout/index.jsx

@@ -55,6 +55,9 @@ class MainLayout extends React.Component {
   onClick = e => {
     const { history } = this.props;
     switch (e.key) {
+      case "personSpace":
+        history.push("/userSpace");
+        break;
       case "logout":
         this.props.logout();
         history.replace("/");
@@ -68,7 +71,9 @@ class MainLayout extends React.Component {
     return (
       <div className={"fullScreen " + styles.main}>
         <div className={styles.header}>
-          <img style={{ width: "1.5rem" }} src="/img/bookmarkLogo.png" alt="logo" />
+          <a href="/">
+            <img style={{ width: "1.5rem" }} src="/img/bookmarkLogo.png" alt="logo" />
+          </a>
           {this.renderUserArea()}
         </div>
         <Divider style={{ margin: 0 }} />

front/src/layout/MainLayout/index.module.less

@@ -8,6 +8,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 0.1rem 0.5rem;
+    background-color: @mainContentColor;
   }
 
   .content {
@@ -18,7 +19,7 @@
     @media screen {
       width: 98%;
       @media (min-width: 768px) {
-        width: 80%;
+        width: 60%;
       }
 
       @media (max-width: 768px) {

front/src/pages/manage/OverView/index.jsx

@@ -104,6 +104,7 @@ class OverView extends React.Component {
                   收起
                 </Button>
               ) : null}
+              <a className={styles.help} href="https://github.com/FleyX/bookmark/blob/master/README.md">使用帮助</a>
             </div>
             <div className={styles.right}>
               {isEdit ? (

front/src/pages/manage/OverView/index.module.less

@@ -1,5 +1,9 @@
+@import "../../../global.less";
+
 .main {
-  min-height: 100%;
+  // min-height: 100%;
+  background-color: @mainContentColor;
+  padding: 20px;
 
   .header {
     display: flex;
@@ -15,6 +19,11 @@
         line-height: 1.3em;
         font-weight: 600;
       }
+
+      .help {
+        font-size: 0.6em;
+        align-self: flex-end;
+      }
     }
   }
 

front/src/pages/userSpace/index.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./index.module.less";
+import MainLayout from "../../layout/MainLayout";
+
+class UserSpace extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <MainLayout>
+        <div className={styles.main}>你好</div>
+      </MainLayout>
+    );
+  }
+}
+
+export default UserSpace;

front/src/pages/userSpace/index.module.less

@@ -0,0 +1,3 @@
+.main{
+  
+}