1、登陆页面调整2、增加支持markdown文档的读取功能

front/package.json

@@ -42,8 +42,13 @@
     "@vue/cli-plugin-vuex": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
     "compression-webpack-plugin": "^6.1.1",
+    "github-markdown-css": "^5.1.0",
+    "highlight.js": "^11.5.1",
+    "iview-editor": "^1.1.1",
     "less": "^4.1.1",
     "less-loader": "^7.3.0",
+    "vue-loader": "^15.0.0",
+    "vue-markdown-loader": "^2.5.0",
     "vue-template-compiler": "^2.6.14"
   }
 }

front/src/main.js

@@ -61,13 +61,15 @@ new Vue({
     },
     mounted() {
         // 加载默认主题主题
-        this.$store.commit('setMainTheme', 'parimary');
+        /*this.$store.commit('setMainTheme', 'parimary');
         this.$store.commit("setMenuTheme", "black");
         this.$store.commit("setNavTheme", "primary");
         this.$store.commit("setFixNav", true);
         this.$store.commit("setShowTags", true);
         this.$store.commit("setMenuWidth", 250);
-        this.$store.commit('setTheme', localStorage.theme);
+        this.$store.commit('setTheme', localStorage.theme);*/
+
+        this.$store.commit("setMenuTheme", "black");
         // 初始化菜单
         util.initRouter(this);
         // 设置用户信息

front/src/views/Main.vue

@@ -19,19 +19,6 @@
         :before-push="beforePush"
         :menu-list="menuList"
       >
-        <div slot="top" class="logo-content" v-if="showLogo || fixNav">
-          <img
-            v-show="
-              !shrink && (menuTheme != 'light' || mainTheme == 'darkMode')
-            "
-            src="@/assets/logo-white.png"
-          />
-          <img
-            v-show="!shrink && menuTheme == 'light' && mainTheme != 'darkMode'"
-            src="@/assets/logo-black.png"
-          />
-          <img v-show="shrink" src="@/assets/logo-min.png" key="min-logo" />
-        </div>
       </shrinkable-menu>
     </div>
     <!-- 右上顶部导航条 -->

front/src/views/doc-manage/server.vue

+<template>
+<div>
+    <Tabs type="card">
+        <TabPane label="服务器端">
+            <div class="markdown-body">
+                <md />
+            </div>
+        </TabPane>
+    </Tabs>
+
+</div>
+</template>
+
+<script>
+// 组件内使用
+import md from '@/assets/doc/server.md'
+
+import 'highlight.js/styles/github.css'
+import 'github-markdown-css'
+
+export default {
+    name: "framework",
+    components: {
+        md
+    },
+    data() {
+        return {
+            content: md
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+        this.maxHeight = Number(document.documentElement.clientHeight - 160) + "px";
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.library-content {
+    overflow: auto;
+}
+
+// .library-content::-webkit-scrollbar {
+//     display: none;
+// }
+.href-text {
+    font-size: 12px;
+}
+
+.example-btn {
+    margin: 10px 0;
+    display: block;
+}
+
+.flip-list-move {
+    transition: transform 0.5s;
+}
+
+.draggable-container {
+    margin: 10px 0;
+    width: 50%;
+}
+
+.list-group-item {
+    cursor: move;
+    position: relative;
+    display: block;
+    padding: 10px 20px;
+    margin-bottom: -1px;
+    background-color: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.ghost {
+    opacity: 0.5;
+    background: #c8ebfb;
+}
+</style>

front/src/views/login.less

-.login {
-    height: 100%;
-    background: url('../assets/background.svg');
-    background-color: #f0f2f5;
+.login-container {
+    height: 100vh;
+    background: url('~@/assets/background.svg') center center fixed
+      no-repeat;
+    background-size: cover;
 
-    .ivu-tabs-nav-container {
-        line-height: 2;
-        font-size: 17px;
-        box-sizing: border-box;
+    .title {
+      font-size: 54px;
+      font-weight: 500;
+      color: rgba(14, 18, 26, 1);
+    }
+
+    .title-tips {
+      margin-top: 29px;
+      font-size: 26px;
+      font-weight: 400;
+      color: rgba(14, 18, 26, 1);
+      text-overflow: ellipsis;
       white-space: nowrap;
-        overflow: hidden;
-        position: relative;
-        zoom: 1;
     }
 
-    .form {
-        padding-top: 1vh;
+    .login-btn {
+      display: inline-block;
+      width: 450px;
+      height: 60px;
+      margin-top: 5px;
+      border: 0;
+      font-size: 14px;
+    }
+
+    .login-form {
+      position: relative;
+      max-width: 100%;
+      margin: calc((100vh - 425px) / 2) 10% 10%;
+      overflow: hidden;
+
+      .forget-password {
+        width: 100%;
+        margin-top: 40px;
+        text-align: left;
 
-        .input-verify {
-            width: 67%;
+        .forget-pass {
+          width: 129px;
+          height: 19px;
+          font-size: 20px;
+          font-weight: 400;
+          color: rgba(92, 102, 240, 1);
         }
       }
+    }
+
+    .title-container {
+      position: relative;
 
-    .code-image {
-        .ivu-spin-fix .ivu-spin-main {
-            height: 20px;
+      .title {
+        margin: 0 auto 40px auto;
+        font-size: 34px;
+        font-weight: bold;
+        color: #5470c6;
+        text-align: center;
       }
     }
 
-    .forget-pass,
-    .other-way {
-        font-size: 14px;
+    .svg-container {
+      position: absolute;
+      top: 14px;
+      left: 15px;
+      z-index: 999;
+      font-size: 16px;
+      color: #d7dee3;
+      cursor: pointer;
+      user-select: none;
     }
+      .el-form-item {
+        padding-right: 0;
+        margin: 20px 0;
+        color: #454545;
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: 2px;
 
-    .login-btn,
-    .other-login {
-        margin-top: 3vh;
+        &__content {
+          min-height: 32px;
+          line-height: 32px;
         }
 
-    .icons {
-        display: flex;
-        align-items: center;
+        &__error {
+          position: absolute;
+          top: 100%;
+          left: 18px;
+          font-size: 12px;
+          line-height: 18px;
+          color: #f34d37;
+        }
       }
 
-    .other-icon {
-        cursor: pointer;
-        margin-left: 8px;
-        display: flex;
-        align-items: center;
-        color: rgba(0, 0, 0, .2);
+      .el-input {
+        box-sizing: border-box;
 
-        :hover {
-            color: #2d8cf0;
+        input {
+          height: 58px;
+          padding-left: 45px;
+          font-size: 14px;
+          line-height: 58px;
+          color: #606266;
+          background: #f6f4fc;
+          border: 0;
+          caret-color: #606266;
         }
       }
-
-    .layout {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        width: 368px;
-        height: 100%;
   }
\ No newline at end of file
-}
\ No newline at end of file

front/src/views/login.vue

 <template>
-  <div class="login">
-    <Row
-      type="flex"
-      justify="center"
-      align="middle"
-      @keydown.enter.native="submitLogin"
-      style="height: 100%"
-    >
+<div class="login-container">
+    <Row type="flex" justify="center" align="middle" @keydown.enter.native="submitLogin" style="height: 100%">
         <Col class="layout">
-        <div>
-          <Header />
-          <div>
-            <Tabs v-model="tabName">
-              <TabPane
-                :label="$t('usernameLogin')"
-                name="username"
-                icon="md-person"
-              >
-                <Form
-                  ref="usernameLoginForm"
-                  :model="form"
-                  :rules="rules"
-                  class="form"
-                  v-if="tabName == 'username'"
-                >
-                  <FormItem prop="username">
-                    <Input
-                      v-model="form.username"
-                      prefix="ios-contact"
-                      size="large"
-                      clearable
-                      placeholder="请输入用户名"
-                      autocomplete="off"
-                    />
+            <div class="title">hello !</div>
+            <div class="title-tips">欢迎！</div>
+            <Form ref="usernameLoginForm" :model="form" :rules="rules" class="form" v-if="tabName == 'username'">
+                <FormItem prop="username" class="el-form-item" style="margin-top: 40px">
+                    <Input v-model="form.username" class="el-input" prefix="ios-contact" size="large" clearable placeholder="请输入用户名" autocomplete="off" />
                 </FormItem>
-                  <FormItem prop="password">
-                    <Input
-                      type="password"
-                      v-model="form.password"
-                      prefix="ios-lock"
-                      size="large"
-                      password
-                      placeholder="请输入密码"
-                      autocomplete="off"
-                    />
+                <FormItem class="el-form-item" prop="password">
+                    <Input type="password" class="el-input" v-model="form.password" prefix="ios-lock" size="large" password placeholder="请输入密码" autocomplete="off" />
                 </FormItem>
             </Form>
-              </TabPane>
-            </Tabs>
-
             <Row>
-              <Button
-                class="login-btn"
-                type="primary"
-                size="large"
-                :loading="loading"
-                @click="submitLogin"
-                long
-              >
+                <Button class="login-btn" type="primary" :loading="loading" @click="submitLogin" long>
                     <span v-if="!loading">{{ $t("login") }}</span>
                     <span v-else>{{ $t("logining") }}</span>
                 </Button>
             </Row>
-          </div>
-        </div>
         <Footer />
         </Col>
         <LangSwitch />
     </Row>
-  </div>
+</div>
 </template>
 
 <script>
-import { login, userInfo} from "@/api/index";
+import {
+    login,
+    userInfo
+} from "@/api/index";
 import Cookies from "js-cookie";
 import Header from "@/views/main-components/header";
 import Footer from "@/views/main-components/footer";
@@ -98,20 +55,16 @@ export default {
                 password: "",
             },
             rules: {
-        username: [
-          {
+                username: [{
                     required: true,
                     message: "账号不能为空",
                     trigger: "change",
-          },
-        ],
-        password: [
-          {
+                }, ],
+                password: [{
                     required: true,
                     message: "密码不能为空",
                     trigger: "change",
-          },
-        ],
+                }, ],
             },
         };
     },
@@ -170,8 +123,7 @@ export default {
             }
         },
     },
-  mounted() {
-  },
+    mounted() {},
 };
 </script>
 

front/vue.config.js

@@ -42,5 +42,17 @@ module.exports = {
                 threshold: 10240 // 对超过10k文件压缩
             })
         ]
+    },
+    chainWebpack: config => {
+        config.module.rule('md')
+            .test(/\.md/)
+            .use('vue-loader')
+            .loader('vue-loader')
+            .end()
+            .use('vue-markdown-loader')
+            .loader('vue-markdown-loader/lib/markdown-compiler')
+            .options({
+                raw: true
+            })
     }
 }
\ No newline at end of file