Code Refactoring

- add bootstrap5 - update elements ui - update vue-cli - update other js&css
Mintimate · Feb 1, 2022 · a1b1a3d · a1b1a3d
1 parent 4f4ace1
commit a1b1a3d
Show file tree

Hide file tree

Showing 20 changed files with 11,455 additions and 8,504 deletions.
diff --git a/OnlineToolFrontEnd/babel.config.js b/OnlineToolFrontEnd/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
-  ],
+  ]
 }
diff --git a/OnlineToolFrontEnd/package-lock.json b/OnlineToolFrontEnd/package-lock.json
diff --git a/OnlineToolFrontEnd/package.json b/OnlineToolFrontEnd/package.json
@@ -1,30 +1,55 @@
 {
-  "name": "host",
+  "name": "onlinetoolfrontend",
   "version": "0.1.0",
   "private": true,
+  "lintOnSave": false,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@kangc/v-md-editor": "^2.3.12",
-    "axios": "^0.21.1",
-    "clipboard": "^2.0.8",
+    "@kangc/v-md-editor": "^2.3.13",
+    "axios": "^0.25.0",
+    "bootstrap": "^5.1.3",
+    "clipboard": "^2.0.9",
+    "codemirror": "^5.65.1",
+    "compression-webpack-plugin": "^6.1.0",
     "core-js": "^3.6.5",
-    "element-plus": "^1.0.2-beta.28",
+    "element-plus": "^1.3.0-beta.9",
+    "highlight.js": "^11.4.0",
     "vue": "^3.0.0",
-    "vue-meta": "^3.0.0-alpha.9",
+    "vue-meta": "^3.0.0-alpha.2",
     "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "vuex": "^4.0.0-0",
+    "webpack": "^4.46.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
-    "vue-cli-plugin-element-plus": "^0.0.13",
-    "vue-cli-plugin-vuetify": "^2.4.2"
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0",
+    "prerender-spa-plugin": "^3.4.0",
+    "vue-cli-plugin-element": "^1.0.1"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
   },
   "browserslist": [
     "> 1%",

diff --git a/OnlineToolFrontEnd/public/index.html b/OnlineToolFrontEnd/public/index.html
@@ -7,19 +7,13 @@
     <!--      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">-->
     <link rel="icon" href="<%= BASE_URL %>favicon.svg">
     <title>在线工具箱-By Mintimate</title>
-    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_2695717_r371m593q6e.css">
-    <link rel="stylesheet" href="autoDarkMode/css/autoDark.css">
+    <link rel="stylesheet" href="/autoDarkMode/css/autoDark.css">
 </head>
 <body>
 <noscript>
     <strong>嗷～～出错了！！！本项目需要Javascript的支持</strong>
 </noscript>
-<i onclick="switchNightMode()" id="xm"></i>
-<script type="text/javascript" src="autoDarkMode/js/autoDark.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-        crossorigin="anonymous"></script>
 <main>
     <div id="app">
     </div>

diff --git a/OnlineToolFrontEnd/src/App.vue b/OnlineToolFrontEnd/src/App.vue
@@ -12,11 +12,10 @@
         <div class="collapse navbar-collapse" id="navbarText">
           <ul class="navbar-nav me-auto">
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="networkToolDropdown" role="button"
-                 data-bs-toggle="dropdown" aria-expanded="false">
+              <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                 网络工具
               </a>
-              <ul class="dropdown-menu" aria-labelledby="networkToolDropdown">
+              <ul class="dropdown-menu">
                 <li><a class="dropdown-item" href="/">IP查询</a>
                 </li>
                 <li><a class="dropdown-item" href="/curl">短链接生成</a></li>
@@ -34,8 +33,8 @@
                 字符/计算工具
               </a>
               <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <li><a class="dropdown-item" href="randomNumber">范围随机数排列</a></li>
-                <li><a class="dropdown-item" href="statisticsChars">在线统计字数/符</a></li>
+                <li><a class="dropdown-item" href="/randomNumber">范围随机数排列</a></li>
+                <li><a class="dropdown-item" href="/statisticsChars">在线统计字数/符</a></li>
                 <li><a class="dropdown-item" href="/textBase64">Base64编码互转</a></li>
                 <li>
                   <hr class="dropdown-divider">
@@ -79,6 +78,7 @@
         </div>
       </div>
     </nav>
+    <i @click="switchNightMode" id="xm"></i>
     <router-view></router-view>
 
   </div>
@@ -88,6 +88,7 @@
 import {watchEffect} from 'vue'
 import {useStore} from "vuex";
 import {useMeta} from 'vue-meta'
+import autoDark from "@/assets/autoDarkMode/js/autoDark"
 
 export default {
   setup() {
@@ -110,11 +111,16 @@ export default {
       meta.meta.meta[0].content = store.state.metaModule.metaInfo.keywords
       meta.meta.meta[1].content = store.state.metaModule.metaInfo.description
     })
+    return autoDark
+  },
+  mounted() {
+    autoDark.checkNightMode()
+    document.dispatchEvent(new Event('render-event'))
   }
 }
 </script>
 
-<style>
+<style scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

diff --git a/...tEnd/public/autoDarkMode/css/autoDark.css → .../src/assets/autoDarkMode/css/autoDark.css b/...tEnd/public/autoDarkMode/css/autoDark.css → .../src/assets/autoDarkMode/css/autoDark.css
@@ -36,6 +36,9 @@
     --brightness--:brightness(0.75);
     --tips-color: linear-gradient(to right, #ffa8a8, #c0c0ea);
 }
+main{
+  background-color:var(--board-bg-color);
+}
 html{
     background-color:var(--board-bg-color);
 }
@@ -120,4 +123,4 @@ label{
 }
 span[role="presentation"]{
     color: #424242!important;
-}
+}
diff --git a/...olFrontEnd/public/autoDarkMode/img/zj.png → ...ontEnd/src/assets/autoDarkMode/img/zj.png b/...olFrontEnd/public/autoDarkMode/img/zj.png → ...ontEnd/src/assets/autoDarkMode/img/zj.png
diff --git a/...ontEnd/public/autoDarkMode/js/autoDark.js → ...nd/src/assets/autoDarkMode/js/autoDark.js b/...ontEnd/public/autoDarkMode/js/autoDark.js → ...nd/src/assets/autoDarkMode/js/autoDark.js
@@ -74,5 +74,7 @@ function checkNightMode() {
 
 }
 
-//检查当前主题模式和图标是否对应End
-checkNightMode();
+export default {
+  switchNightMode,
+  checkNightMode
+}
diff --git a/OnlineToolFrontEnd/src/main.js b/OnlineToolFrontEnd/src/main.js
@@ -2,8 +2,6 @@ import {createApp} from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-// elements
-import installElementPlus from './plugins/element'
 //  Markdown
 import VMdPreview from '@kangc/v-md-editor/lib/preview';
 import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
@@ -37,9 +35,20 @@ import 'codemirror/lib/codemirror.css';
 // highlightjs
 import hljs from 'highlight.js';
 
+//element-plus
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import { UploadFilled } from '@element-plus/icons-vue'
 // Vue-meta
 import {createMetaManager} from "vue-meta";
-import { useMeta } from 'vue-meta'
+
+// bootstrap
+import "bootstrap/dist/css/bootstrap.min.css"
+import "bootstrap/dist/js/bootstrap.min"
+import "bootstrap/dist/js/bootstrap.bundle.min"
+import "bootstrap"
+
+import "./assets/autoDarkMode/css/autoDark.css"
 
 VMdPreview.use(githubTheme, {
     Hljs: hljs,
@@ -53,6 +62,7 @@ const app = createApp(App)
 const metaManager = createMetaManager(false, {
     meta: { tag: 'meta', nameless: true },
 });
-installElementPlus(app)
-app.use(store).use(router).use(VMdPreview).use(VMdEditor).use(metaManager,{refreshOnceOnNavigation:true})
+app.use(store).use(router).use(VMdPreview).use(VMdEditor)
+    .use(metaManager,{refreshOnceOnNavigation:true}).use(ElementPlus)
+    .component("UploadFilled",UploadFilled)
 app.mount('#app')
diff --git a/OnlineToolFrontEnd/src/plugins/element.js b/OnlineToolFrontEnd/src/plugins/element.js
diff --git a/OnlineToolFrontEnd/src/until/PWD/checkPWD.js b/OnlineToolFrontEnd/src/until/PWD/checkPWD.js
@@ -96,7 +96,7 @@ function verify(pwd) {
     }
 
     return true;
-};
+}
 
 /**
  * 是否存在重复字符串
@@ -115,7 +115,7 @@ function isRepeate(pwd) {
         }
     }
     return false;
-};
+}
 
 /**
  * 是否存在连续性字符串
@@ -158,4 +158,4 @@ function isSeries(pwd) {
         }
     }
     return false;
-};
+}
diff --git a/OnlineToolFrontEnd/src/until/PWD/generate.js b/OnlineToolFrontEnd/src/until/PWD/generate.js
@@ -1,32 +1,34 @@
 function password_generator( len,passwordNumber,passwordLowercase,passwordUppercase,passwordSpecial) {
+    let string=''
+    let numeric=''
+    let punctuation=''
     let length = (len)?(len):(10);
     if((passwordUppercase==false)&&(passwordLowercase==false)){
-        var string='';
+        string='';
     }
     else if ((passwordLowercase==true)&&(passwordUppercase==false)){
-        var string = 'abcdefghijklmnopqrstuvwxyz';
+        string = 'abcdefghijklmnopqrstuvwxyz';
     }
     else if ((passwordLowercase==false)&&(passwordUppercase==true)){
-        var string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
     }
     else {
-        var string = 'abcdefghijklmnABCDEFGHIJKLMNopqrstuvwxyzOPQRSTUVWXYZ';
+        string = 'abcdefghijklmnABCDEFGHIJKLMNopqrstuvwxyzOPQRSTUVWXYZ';
     }
     if(passwordNumber){
-        var numeric = '0123456789';
+         numeric = '0123456789';
     }
     else {
-        var numeric='';
+         numeric='';
     }
     if (passwordSpecial){
-        var punctuation = '!@#$%^&*()_+~`|}{[]\:;?><,./-=';
+         punctuation = '!@#$%^&*()_+~`|}{[]:;?><,./-=';
     }
     else {
-        var punctuation = '';
+         punctuation = '';
     }
     let password = "";
     let character = "";
-    let crunch = true;
     while( password.length<length ) {
         let entity1 = Math.ceil(string.length * Math.random()*Math.random());
         let entity2 = Math.ceil(numeric.length * Math.random()*Math.random());

diff --git a/OnlineToolFrontEnd/src/until/statisticAlpha.js b/OnlineToolFrontEnd/src/until/statisticAlpha.js
@@ -41,4 +41,4 @@ export function CountChineseCharacters(Words) {
     shuzi,
     zifu,
   }
-};
+}
diff --git a/OnlineToolFrontEnd/src/views/calculationAndCharacters/textBase64.vue b/OnlineToolFrontEnd/src/views/calculationAndCharacters/textBase64.vue
@@ -25,7 +25,6 @@
               @change="changeWorkMode"
           >
           </el-switch>
-          <el-button @click="Test"></el-button>
         </div>
       </div>
 
@@ -56,11 +55,6 @@ export default {
       return dealWithText(this.inputContent,this.WorkMode)
     }
   },
-  methods:{
-    Test(){
-      console.log(this.$store.state.sum);
-    }
-  }
 }
 </script>
 

diff --git a/OnlineToolFrontEnd/src/views/mcstatus.vue b/OnlineToolFrontEnd/src/views/mcstatus.vue
@@ -106,14 +106,16 @@ export default {
                 if (res.status == 202) {
                   this.MinecraftServerInfo.Tips = "操作失败，远程服务器可能不在线！！！"
                 } else {
-                  this.MinecraftServerInfo.Tips = "操作成功，以上是远程服务器的信息嗷╮(￣▽￣\"\"\)╭"
+                  this.MinecraftServerInfo.Tips = "操作成功，以上是远程服务器的信息嗷╮(￣▽￣\"\")╭"
                 }
               }
           )
           .finally(res => {
+            console.log(res)
             this.isLoading = false
           })
           .catch((res) => {  //失败的回调
+            console.log(res)
             this.$message("响应超时，游戏远程服务器异常！！！")
           })
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,4 +41,4 @@ export function CountChineseCharacters(Words) { @@
         shuzi,
         zifu,
       }
-    };
+    }