From 4b0d0bbf8e0548ce29557a562813668d51248272 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=81=E7=AB=AD=E5=8A=9B?= <jerrykuku@qq.com>
Date: Wed, 20 Oct 2021 19:51:01 +0800
Subject: [PATCH 1/2] 20211020-1

---
 package.json                          |  6 +-
 public/index.html                     |  2 +-
 src/App.vue                           | 60 +-------------------
 src/components/Panel.vue              | 13 +++--
 src/components/Settings.vue           | 15 ++---
 src/components/SideBar.vue            | 11 ++--
 src/components/fileList/FilePanel.vue | 12 ++--
 src/components/forms/ImportPanel.vue  | 12 ++--
 src/components/forms/Ports.vue        |  4 +-
 src/main.js                           | 12 ++--
 src/router/index.js                   | 19 ++++++-
 src/views/Home.vue                    | 80 ++++++++++++++++++++++++++
 src/views/Login.vue                   | 23 ++++++++
 src/widgets/Clock.vue                 |  8 ++-
 vue.config.js                         |  4 +-
 yarn.lock                             | 82 ++++++++++++++++++++++++---
 16 files changed, 253 insertions(+), 110 deletions(-)
 create mode 100644 src/views/Home.vue
 create mode 100644 src/views/Login.vue

diff --git a/package.json b/package.json
index bb59794f..5b4eb326 100644
--- a/package.json
+++ b/package.json
@@ -9,16 +9,17 @@
   },
   "dependencies": {
     "@hscmap/vue-window": "^2.4.2",
+    "@mdi/font": "^6.3.95",
     "apexcharts": "^3.28.3",
     "axios": "^0.21.4",
     "buefy": "^0.9.0",
     "core-js": "^3.6.5",
+    "dateformat": "^5.0.2",
     "easy-affix": "^1.0.8",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
     "lottie-vuejs": "^0.4.0",
-    "moment": "^2.29.1",
     "nth-check": "^2.0.1",
     "qs": "^6.10.1",
     "vee-validate": "^3.4.12",
@@ -45,6 +46,7 @@
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "vue-cli-plugin-buefy": "~0.3.8",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "webpack-bundle-analyzer": "^4.5.0"
   }
 }
diff --git a/public/index.html b/public/index.html
index 43d77fa2..1039f7e6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,7 +14,7 @@
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@mdi/font@6.2.95/css/materialdesignicons.min.css">
+  <!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@mdi/font@6.2.95/css/materialdesignicons.min.css"> -->
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>
diff --git a/src/App.vue b/src/App.vue
index 8b717d72..f21e0204 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,57 +2,14 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-11 17:57:40
+ * @LastEditTime: 2021-10-20 16:38:51
  * @Description: Main entry of application
  * @FilePath: /CasaOS-UI/src/App.vue
 -->
 
 <template>
   <div id="app" class="is-flex is-flex-direction-column" :style="{'background-image': 'url(' + require('./assets/background/bg.jpeg') + ')'}">
-  <!-- <div id="app" class="is-flex is-flex-direction-column" :style="{'background-image': 'url(https://www.bing.com/th?id=OHR.Aldeyjarfoss_ZH-CN0106567013_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp)'}"> -->
-    <!-- NavBar Start -->
-    <top-bar></top-bar>
-    <!-- NavBar End -->
-
-    <!-- Content Start -->
-    <div class="contents  pt-55 pb-6">
-      <div class="container">
-        <div class="is-flex">
-          <!-- SideBar Start -->
-          <side-bar></side-bar>
-          <!-- SideBar End -->
-
-          <!-- MainContent Start -->
-          <div class="main-content">
-            <!-- SearchBar Start -->
-            <section>
-              <search-bar></search-bar>
-            </section>
-            <!-- SearchBar End -->
-
-            <!-- Suggestions For You Start -->
-            <section>
-              <suggestion></suggestion>
-            </section>
-            <!-- Suggestions For You End -->
-
-            <!-- Apps Start -->
-            <section>
-              <apps></apps>
-            </section>
-            <!-- Apps End -->
-
-            <!-- Shortcuts Start -->
-            <!-- <section>
-              <shortcuts></shortcuts>
-            </section> -->
-            <!-- Shortcuts End -->
-          </div>
-          <!-- MainContent End -->
-        </div>
-      </div>
-    </div>
-    <!-- Content End -->
+    <router-view />
 
     <!-- BrandBar Start -->
     <brand-bar></brand-bar>
@@ -67,24 +24,13 @@
 </template>
 
 <script>
-import Apps from './components/Apps.vue'
 import BrandBar from './components/BrandBar.vue'
 import ContactBar from './components/ContactBar.vue'
-import SearchBar from './components/SearchBar.vue'
-import SideBar from './components/SideBar.vue'
-import Suggestion from './components/Suggestion.vue'
-import TopBar from './components/TopBar.vue'
-//import Shortcuts from './components/Shortcuts.vue'
+
 export default {
   components: {
     BrandBar,
     ContactBar,
-    SideBar,
-    SearchBar,
-    Suggestion,
-    Apps,
-    TopBar,
-    //Shortcuts
   },
   data() {
     return {
diff --git a/src/components/Panel.vue b/src/components/Panel.vue
index 8b7524cd..f4ca470a 100644
--- a/src/components/Panel.vue
+++ b/src/components/Panel.vue
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-19 18:46:02
+ * @LastEditTime: 2021-10-20 19:45:43
  * @Description: Install Panel of Docker
  * @FilePath: /CasaOS-UI/src/components/Panel.vue
 -->
@@ -49,7 +49,7 @@
           <b-field label="Network">
             <b-select v-model="initData.network_model" placeholder="Select" expanded>
               <optgroup v-for="net in networks" :key="net.driver" :label="net.driver">
-                <option v-for="(option,index) in net.networks" :value="option.id" :key="option.name+index">
+                <option v-for="(option,index) in net.networks" :value="option.name" :key="option.name+index">
                   {{ option.name}}
                 </option>
               </optgroup>
@@ -216,7 +216,8 @@ export default {
         return item
       }
     })
-    this.initData.network_model = gg[0].id
+    console.log(gg);
+    this.initData.network_model = gg.length > 0 ? gg[0].name : "bridge";
 
     // Set Front-end base url
     this.baseUrl = `${window.location.protocol}//${document.domain}:`;
@@ -224,7 +225,7 @@ export default {
   computed: {
 
     showPorts() {
-      if (this.initData.network_model.indexOf("macvlan") > -1) {
+      if (this.initData.network_model.toLowerCase().indexOf("macvlan") > -1 || this.initData.network_model.indexOf("host") > -1) {
         return false
       } else {
         return true
@@ -302,6 +303,8 @@ export default {
       this.checkStep(this.$refs.ob1).then(val => {
         if (val) {
           this.processData();
+
+          //console.log(this.initData);
           this.isLoading = true;
           this.$api.app.install(this.id, this.initData).then((res) => {
             this.isLoading = false;
@@ -310,7 +313,6 @@ export default {
               this.cancelButtonText = "Continue in background"
               this.checkInstallState(res.data.data)
             } else {
-              //this.currentSlide = 1;
               this.$buefy.toast.open({
                 message: res.data.message,
                 type: 'is-warning'
@@ -382,6 +384,7 @@ export default {
     updateApp() {
       this.processData();
       this.isLoading = true;
+      console.log(this.initData);
       this.$api.app.updateContainerSetting(this.id, this.initData).then((res) => {
         if (res.data.success == 200) {
           this.isLoading = false;
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 2b078840..7d6c0e66 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-10-09 18:41:15
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-13 15:33:30
+ * @LastEditTime: 2021-10-20 17:00:11
  * @Description: 
  * @FilePath: /CasaOS-UI/src/components/Settings.vue
 -->
@@ -28,12 +28,13 @@
 </template>
 
 <script>
+import find from 'lodash/find';
 const widgetsComponents = require.context(
   '@/widgets',
   false,
   /.vue$/
 )
-const _ = require('lodash')
+
 
 export default {
   name: "settings",
@@ -57,18 +58,18 @@ export default {
       this.apps.push({ app: componentConfig })
     });
   },
-  mounted () {
+  mounted() {
     window.addEventListener('resize', this.onRezise);
   },
   methods: {
     getIcon(value) {
-      let obj = _.find(this.apps, o => {
+      let obj = find(this.apps, o => {
         return o.app.default.name === value
       });
       return obj.app.default.icon;
     },
     getTitle(value) {
-      let obj = _.find(this.apps, o => {
+      let obj = find(this.apps, o => {
         return o.app.default.name === value
       });
       return obj.app.default.title;
@@ -76,12 +77,12 @@ export default {
     handleInput() {
       this.$emit('change', this.settingsData)
     },
-    onRezise(){
+    onRezise() {
       // let container = document.querySelector(".scroll-area")
       //console.log(container.offsetHeight);
     }
   },
-  destroyed () {
+  destroyed() {
     window.addEventListener('resize', this.onRezise);
   },
 }
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 5bb303ee..8c893ba4 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-19 13:12:03
+ * @LastEditTime: 2021-10-20 17:02:02
  * @Description: 
  * @FilePath: /CasaOS-UI/src/components/SideBar.vue
 -->
@@ -22,10 +22,11 @@
 <script>
 import lowerFirst from 'lodash/lowerFirst'
 import camelCase from 'lodash/camelCase'
+import find from 'lodash/find';
 import Settings from '@/components/Settings.vue'
 import vueCustomScrollbar from 'vue-custom-scrollbar'
 import "vue-custom-scrollbar/dist/vueScrollbar.css"
-const _ = require('lodash')
+
 const widgetsComponents = require.context(
   '@/widgets',
   false,
@@ -54,7 +55,7 @@ export default {
   computed: {
     activeApps() {
       let newArray = this.widgetsSettings.map(item => {
-        let obj = _.find(this.apps, function (o) { return o.app.name == item.name; });
+        let obj = find(this.apps, function (o) { return o.app.name == item.name; });
         return obj;
       })
       return newArray
@@ -99,7 +100,7 @@ export default {
     },
     diffAndCombineData(initData, remoteData) {
       let newData = initData.map(item => {
-        let remoteItem = _.find(remoteData, el => el.name == item.name);
+        let remoteItem = find(remoteData, el => el.name == item.name);
         if (remoteItem && item.name === remoteItem.name) {
           return {
             name: item.name,
@@ -147,7 +148,7 @@ export default {
       this.saveData(this.widgetsSettings)
     },
     checkShow(name) {
-      let obj = _.find(this.widgetsSettings, o => { return name == o.name });
+      let obj = find(this.widgetsSettings, o => { return name == o.name });
       return obj.show
     }
   },
diff --git a/src/components/fileList/FilePanel.vue b/src/components/fileList/FilePanel.vue
index 67fa0728..120c5c57 100644
--- a/src/components/fileList/FilePanel.vue
+++ b/src/components/fileList/FilePanel.vue
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-10-14 14:08:40
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-19 18:30:26
+ * @LastEditTime: 2021-10-20 17:03:30
  * @Description: 
  * @FilePath: /CasaOS-UI/src/components/fileList/FilePanel.vue
 -->
@@ -67,7 +67,9 @@
 <script>
 import ListItem from "./ListItem.vue"
 import CreatePanel from './CreatePanel.vue'
-const _ = require('lodash')
+import trimStart from 'lodash/trimStart'
+import dropRight from 'lodash/dropRight'
+
 export default {
   name: "file-panel",
   components: {
@@ -99,12 +101,12 @@ export default {
     },
     // Root Name
     rootName() {
-      return _.trimStart(this.rootPath, '/');
+      return trimStart(this.rootPath, '/');
     },
   },
   created() {
     // let i = this.path.endsWith("/") ? 2 : 1;
-    this.path = (this.path == this.rootPath) ? this.path : _.dropRight(this.path.split("/"), 1).join("/")
+    this.path = (this.path == this.rootPath) ? this.path : dropRight(this.path.split("/"), 1).join("/")
     this.getFileList(this.path);
   },
 
@@ -138,7 +140,7 @@ export default {
 
     // get parent list
     getParentList() {
-      let backDir = _.dropRight(this.path.split("/"), 1).join("/");
+      let backDir = dropRight(this.path.split("/"), 1).join("/");
       if (backDir === "/")
         return false
       this.getFileList(backDir);
diff --git a/src/components/forms/ImportPanel.vue b/src/components/forms/ImportPanel.vue
index c49b335a..ee060b07 100644
--- a/src/components/forms/ImportPanel.vue
+++ b/src/components/forms/ImportPanel.vue
@@ -47,8 +47,10 @@
 </template>
 
 <script>
+import upperFirst from 'lodash/upperFirst'
+import lowerFirst from 'lodash/lowerFirst'
 import parser from 'yargs-parser'
-const _ = require('lodash')
+
 export default {
   data() {
     return {
@@ -160,11 +162,11 @@ export default {
         this.updateData.image = [...command].pop()
         //Label
         if (parsedInput.name != undefined) {
-          this.updateData.label = _.upperFirst(parsedInput.name)
+          this.updateData.label = upperFirst(parsedInput.name)
         } else {
           const imageArray = this.updateData.image.split("/")
           const lastNode = [...imageArray].pop()
-          this.updateData.label = _.upperFirst(lastNode.split(":")[0])
+          this.updateData.label = upperFirst(lastNode.split(":")[0])
         }
 
         //Envs
@@ -193,12 +195,12 @@ export default {
             // console.log(this.volumeAutoCheck(ii[1],ii[0], _.lowerFirst(this.updateData.label)));
             return {
               container: ii[1],
-              host: this.volumeAutoCheck(ii[1], ii[0], _.lowerFirst(this.updateData.label))
+              host: this.volumeAutoCheck(ii[1], ii[0], lowerFirst(this.updateData.label))
             }
           } else {
             return {
               container: ii[0],
-              host: this.volumeAutoCheck(ii[0], "", _.lowerFirst(this.updateData.label))
+              host: this.volumeAutoCheck(ii[0], "", lowerFirst(this.updateData.label))
             }
           }
 
diff --git a/src/components/forms/Ports.vue b/src/components/forms/Ports.vue
index ea66bd9f..a588f3ef 100644
--- a/src/components/forms/Ports.vue
+++ b/src/components/forms/Ports.vue
@@ -15,8 +15,8 @@
       <b-icon icon="close" size="is-small" class="is-clickable" @click.native="removeItem(index)"></b-icon>
       <template v-if="index < 1">
         <b-field grouped>
-          <b-field label="Host" expanded>
-            <b-input placeholder="Host" type="number" v-model="item.host" expanded @input="handleInput" v-if="showHostPost"></b-input>
+          <b-field label="Host" v-if="showHostPost" expanded>
+            <b-input placeholder="Host" type="number" v-model="item.host" expanded @input="handleInput" ></b-input>
           </b-field>
           <b-field label="Container" expanded>
             <b-input placeholder="Container" type="number" v-model="item.container" expanded @input="handleInput"></b-input>
diff --git a/src/main.js b/src/main.js
index c2b5e81b..23724abc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-22 14:24:43
  * @LastEditors: JerryK
- * @LastEditTime: 2021-09-26 18:06:22
+ * @LastEditTime: 2021-10-20 16:48:01
  * @Description: 
  * @FilePath: /CasaOS-UI/src/main.js
  */
@@ -12,12 +12,12 @@ import router from '@/router'
 import store from '@/store'
 import api from '@/service/api.js'
 import Buefy from 'buefy'
-import VueTour from 'vue-tour'
+// import VueTour from 'vue-tour'
 import '@/assets/scss/app.scss'
-import 'vue-tour/dist/vue-tour.css'
-
+// import 'vue-tour/dist/vue-tour.css'
+import '@mdi/font/css/materialdesignicons.min.css'
 Vue.use(Buefy)
-Vue.use(VueTour)
+// Vue.use(VueTour)
 
 Vue.config.productionTip = false
 Vue.prototype.$api = api;
@@ -25,4 +25,4 @@ new Vue({
   router,
   store,
   render: h => h(App)
-}).$mount('#app')
+}).$mount('#app') 
diff --git a/src/router/index.js b/src/router/index.js
index 19defd58..29e616cc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,9 +2,9 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-09-18 23:19:27
+ * @LastEditTime: 2021-10-20 16:39:08
  * @Description: 
- * @FilePath: \CasaOS-UI\src\router\index.js
+ * @FilePath: /CasaOS-UI/src/router/index.js
  */
 import Vue from 'vue'
 import VueRouter from 'vue-router'
@@ -12,7 +12,20 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
-
+  {
+    path: '/login',
+    name: 'Login',
+    hidden: true,
+    component: () => import('@/views/Login.vue'),
+    meta: { requireAuth: false }
+  },
+  {
+    path: '/',
+    name: 'Home',
+    hidden: true,
+    component: () => import('@/views/Home.vue'),
+    meta: { requireAuth: true }
+  },
 ]
 
 const router = new VueRouter({
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 00000000..1d40a52c
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,80 @@
+<!--
+ * @Author: JerryK
+ * @Date: 2021-10-20 16:34:15
+ * @LastEditors: JerryK
+ * @LastEditTime: 2021-10-20 16:39:51
+ * @Description: 
+ * @FilePath: /CasaOS-UI/src/views/Home.vue
+-->
+<template>
+  <div>
+    <!-- NavBar Start -->
+    <top-bar></top-bar>
+    <!-- NavBar End -->
+
+    <!-- Content Start -->
+    <div class="contents  pt-55 pb-6">
+      <div class="container">
+        <div class="is-flex">
+          <!-- SideBar Start -->
+          <side-bar></side-bar>
+          <!-- SideBar End -->
+
+          <!-- MainContent Start -->
+          <div class="main-content">
+            <!-- SearchBar Start -->
+            <section>
+              <search-bar></search-bar>
+            </section>
+            <!-- SearchBar End -->
+
+            <!-- Suggestions For You Start -->
+            <section>
+              <suggestion></suggestion>
+            </section>
+            <!-- Suggestions For You End -->
+
+            <!-- Apps Start -->
+            <section>
+              <apps></apps>
+            </section>
+            <!-- Apps End -->
+
+            <!-- Shortcuts Start -->
+            <!-- <section>
+              <shortcuts></shortcuts>
+            </section> -->
+            <!-- Shortcuts End -->
+          </div>
+          <!-- MainContent End -->
+        </div>
+      </div>
+    </div>
+    <!-- Content End -->
+  </div>
+</template>
+
+<script>
+import Apps from '@/components/Apps.vue'
+
+import SearchBar from '@/components/SearchBar.vue'
+import SideBar from '@/components/SideBar.vue'
+import Suggestion from '@/components/Suggestion.vue'
+import TopBar from '@/components/TopBar.vue'
+//import Shortcuts from '@/components/Shortcuts.vue'
+
+export default {
+  name: "home",
+  components: {
+    SideBar,
+    SearchBar,
+    Suggestion,
+    Apps,
+    TopBar,
+    //Shortcuts
+  },
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 00000000..2a9f8958
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,23 @@
+<!--
+ * @Author: JerryK
+ * @Date: 2021-10-20 16:30:26
+ * @LastEditors: JerryK
+ * @LastEditTime: 2021-10-20 16:30:27
+ * @Description: 
+ * @FilePath: /CasaOS-UI/src/views/Login.vue
+-->
+<template>
+  <div>
+      
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/widgets/Clock.vue b/src/widgets/Clock.vue
index 941bd1e4..f82597e0 100644
--- a/src/widgets/Clock.vue
+++ b/src/widgets/Clock.vue
@@ -6,7 +6,8 @@
 </template>
 
 <script>
-import moment from 'moment'
+import dateFormat from "dateformat";
+
 export default {
   name: "clock",
   icon: "clock-outline",
@@ -30,8 +31,9 @@ export default {
   },
   methods: {
     updateClock() {
-      this.timeText = moment().format('HH:mm');
-      this.dateText = moment().format('dddd, MMMM Do');
+      var today = new Date();
+      this.timeText = dateFormat(today,"HH:MM");
+      this.dateText = dateFormat(today,"fullDate");
     }
   },
 }
diff --git a/vue.config.js b/vue.config.js
index d2e24675..30deb9c0 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-22 10:10:10
  * @LastEditors: JerryK
- * @LastEditTime: 2021-09-22 15:26:47
+ * @LastEditTime: 2021-10-20 16:52:53
  * @Description: 
  * @FilePath: /CasaOS-UI/vue.config.js
  */
@@ -19,5 +19,7 @@ module.exports = {
     chainWebpack: config => {
         config.plugin('ignore')
             .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
+        config.plugin('webpack-bundle-analyzer')
+            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
     }
 }
diff --git a/yarn.lock b/yarn.lock
index 3d663031..34d344e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -971,6 +971,11 @@
     cssnano-preset-default "^4.0.0"
     postcss "^7.0.0"
 
+"@mdi/font@^6.3.95":
+  version "6.3.95"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-6.3.95.tgz#5e22e0626ec652028a19aa541a20b28280399dd9"
+  integrity sha512-bbvnF7rNX9aMn7PeqDCa8ZQTPxEqerZeXo/lQQxE84Ka/7UrFcqvOO3XXVLtrCCtyA6uIqiG4oYFRPVJqv247Q==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -984,6 +989,11 @@
   resolved "https://registry.nlark.com/@nodelib/fs.stat/download/@nodelib/fs.stat-1.1.3.tgz?cache=0&sync_timestamp=1622792655362&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40nodelib%2Ffs.stat%2Fdownload%2F%40nodelib%2Ffs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=
 
+"@polka/url@^1.0.0-next.20":
+  version "1.0.0-next.21"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
+  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
+
 "@popperjs/core@^2.9.1":
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.1.tgz#728ecd95ab207aab8a9a4e421f0422db329232be"
@@ -1612,6 +1622,11 @@ acorn-walk@^7.1.1:
   resolved "https://registry.nlark.com/acorn-walk/download/acorn-walk-7.2.0.tgz?cache=0&sync_timestamp=1630916588767&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn-walk%2Fdownload%2Facorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha1-DeiJpgEgOQmw++B7iTjcIdLpZ7w=
 
+acorn-walk@^8.0.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
 acorn@^6.4.1:
   version "6.4.2"
   resolved "https://registry.nlark.com/acorn/download/acorn-6.4.2.tgz?cache=0&sync_timestamp=1630916517167&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn%2Fdownload%2Facorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
@@ -1622,6 +1637,11 @@ acorn@^7.1.1, acorn@^7.4.0:
   resolved "https://registry.nlark.com/acorn/download/acorn-7.4.1.tgz?cache=0&sync_timestamp=1630916517167&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn%2Fdownload%2Facorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=
 
+acorn@^8.0.4:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.5.0.tgz#4512ccb99b3698c752591e9bb4472e38ad43cee2"
+  integrity sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==
+
 address@^1.1.2:
   version "1.1.2"
   resolved "https://registry.nlark.com/address/download/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -2694,6 +2714,11 @@ commander@^2.18.0, commander@^2.20.0:
   resolved "https://registry.nlark.com/commander/download/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha1-/UhehMA+tIgcIHIrpIA16FMa6zM=
 
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.nlark.com/commander/download/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
@@ -3144,6 +3169,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dateformat@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-5.0.2.tgz#0f275609b02e3306ff76d6a2067a6ebb98e6114b"
+  integrity sha512-h9vywpuz+ReixnJTwFx5JLtZpS8eLCbRm8shwwKkCKOZA547N6yoMtD3W91Z6+NFZ8wOaZlcaCcK/w+kELhSVg==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.nlark.com/de-indent/download/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -3434,7 +3464,7 @@ dotenv@^8.2.0:
   resolved "https://registry.nlark.com/dotenv/download/dotenv-8.6.0.tgz?cache=0&sync_timestamp=1621627076012&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdotenv%2Fdownload%2Fdotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"
   integrity sha1-Bhr2ZNGff02PxuT/m1hM4jety4s=
 
-duplexer@^0.1.1:
+duplexer@^0.1.1, duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.nlark.com/duplexer/download/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
   integrity sha1-Or5DrvODX4rgd9E23c4PJ2sEAOY=
@@ -4413,6 +4443,13 @@ gzip-size@^5.0.0:
     duplexer "^0.1.1"
     pify "^4.0.1"
 
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/handle-thing/download/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -5779,7 +5816,7 @@ mime@1.6.0:
   resolved "https://registry.npm.taobao.org/mime/download/mime-1.6.0.tgz?cache=0&sync_timestamp=1615984369368&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime%2Fdownload%2Fmime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=
 
-mime@^2.4.4:
+mime@^2.3.1, mime@^2.4.4:
   version "2.5.2"
   resolved "https://registry.npm.taobao.org/mime/download/mime-2.5.2.tgz?cache=0&sync_timestamp=1615984369368&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime%2Fdownload%2Fmime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
   integrity sha1-bj3GzCuVEGQ4MOXxnVy3U9pe6r4=
@@ -5864,11 +5901,6 @@ mixin-deep@^1.2.0:
   dependencies:
     minimist "^1.2.5"
 
-moment@^2.29.1:
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
-  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.nlark.com/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -6304,7 +6336,7 @@ open@^6.3.0:
   dependencies:
     is-wsl "^1.1.0"
 
-opener@^1.5.1:
+opener@^1.5.1, opener@^1.5.2:
   version "1.5.2"
   resolved "https://registry.npm.taobao.org/opener/download/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
   integrity sha1-XTfh81B3udysQwE3InGv3rKhNZg=
@@ -7802,6 +7834,15 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+sirv@^1.0.7:
+  version "1.0.18"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.18.tgz#105fab52fb656ce8a2bebbf36b11052005952899"
+  integrity sha512-f2AOPogZmXgJ9Ma2M22ZEhc1dNtRIzcEkiflMFeVTRq+OViOZMvH1IPMVOwrKaxpSaHioBJiDR0SluRqGa7atA==
+  dependencies:
+    "@polka/url" "^1.0.0-next.20"
+    mime "^2.3.1"
+    totalist "^1.0.0"
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/slash/download/slash-1.0.0.tgz?cache=0&sync_timestamp=1618384508676&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fslash%2Fdownload%2Fslash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
@@ -8498,6 +8539,11 @@ toposort@^1.0.0:
   resolved "https://registry.npm.taobao.org/toposort/download/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
   integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
 
+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+
 tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -9018,6 +9064,21 @@ webpack-bundle-analyzer@^3.8.0:
     opener "^1.5.1"
     ws "^6.0.0"
 
+webpack-bundle-analyzer@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.5.0.tgz#1b0eea2947e73528754a6f9af3e91b2b6e0f79d5"
+  integrity sha512-GUMZlM3SKwS8Z+CKeIFx7CVoHn3dXFcUAjT/dcZQQmfSZGvitPfMob2ipjai7ovFFqPvTqkEZ/leL4O0YOdAYQ==
+  dependencies:
+    acorn "^8.0.4"
+    acorn-walk "^8.0.0"
+    chalk "^4.1.0"
+    commander "^7.2.0"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    opener "^1.5.2"
+    sirv "^1.0.7"
+    ws "^7.3.1"
+
 webpack-chain@^6.4.0:
   version "6.5.1"
   resolved "https://registry.npm.taobao.org/webpack-chain/download/webpack-chain-6.5.1.tgz#4f27284cbbb637e3c8fbdef43eef588d4d861206"
@@ -9237,6 +9298,11 @@ ws@^6.0.0, ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
+ws@^7.3.1:
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.5.tgz#8b4bc4af518cfabd0473ae4f99144287b33eb881"
+  integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==
+
 xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"

From 60d08a6b73b361578c7e440af63d3179de16fba9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=81=E7=AB=AD=E5=8A=9B?= <jerrykuku@qq.com>
Date: Fri, 22 Oct 2021 16:40:43 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20authentication?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add user authentication module, Login page and initialization page.
Fixed the problem that the application could not start after the system restarted.
---
 package.json                                  |   1 +
 .../{ani => }/icon/android-chrome-192x192.png | Bin
 .../img/{ani => }/icon/apple-touch-icon.png   | Bin
 public/img/{ani => }/icon/favicon-16x16.png   | Bin
 public/img/{ani => }/icon/favicon-32x32.png   | Bin
 public/img/{ani => }/icon/mstile-150x150.png  | Bin
 .../img/{ani => }/icon/safari-pinned-tab.svg  |   0
 public/index.html                             |   8 +-
 src/App.vue                                   |  22 +--
 src/assets/ani/done.json                      |   1 +
 .../assets}/ani/rocket-launching.json         |   0
 src/assets/scss/app.scss                      |  70 ++++++++-
 src/components/Apps.vue                       |  25 ++--
 src/components/Apps/AppCard.vue               |   4 +-
 src/components/Panel.vue                      |  63 ++++-----
 src/components/Suggestion.vue                 |  47 ++++---
 src/components/TopBar.vue                     |  28 ++--
 src/components/forms/ImportPanel.vue          |   6 +-
 src/components/forms/InputGroup.vue           |   4 -
 src/router/index.js                           |  51 ++++++-
 src/service/info.js                           |   7 +-
 src/service/service.js                        |  63 ++-------
 src/store/index.js                            |   6 +-
 src/views/Home.vue                            |  19 ++-
 src/views/Login.vue                           |  77 +++++++++-
 src/views/Welcome.vue                         | 133 ++++++++++++++++++
 yarn.lock                                     |  12 ++
 27 files changed, 474 insertions(+), 173 deletions(-)
 rename public/img/{ani => }/icon/android-chrome-192x192.png (100%)
 rename public/img/{ani => }/icon/apple-touch-icon.png (100%)
 rename public/img/{ani => }/icon/favicon-16x16.png (100%)
 rename public/img/{ani => }/icon/favicon-32x32.png (100%)
 rename public/img/{ani => }/icon/mstile-150x150.png (100%)
 rename public/img/{ani => }/icon/safari-pinned-tab.svg (100%)
 create mode 100644 src/assets/ani/done.json
 rename {public/img => src/assets}/ani/rocket-launching.json (100%)
 create mode 100644 src/views/Welcome.vue

diff --git a/package.json b/package.json
index 5b4eb326..a476476e 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
     "lottie-vuejs": "^0.4.0",
+    "lottie-web-vue": "^1.2.0",
     "nth-check": "^2.0.1",
     "qs": "^6.10.1",
     "vee-validate": "^3.4.12",
diff --git a/public/img/ani/icon/android-chrome-192x192.png b/public/img/icon/android-chrome-192x192.png
similarity index 100%
rename from public/img/ani/icon/android-chrome-192x192.png
rename to public/img/icon/android-chrome-192x192.png
diff --git a/public/img/ani/icon/apple-touch-icon.png b/public/img/icon/apple-touch-icon.png
similarity index 100%
rename from public/img/ani/icon/apple-touch-icon.png
rename to public/img/icon/apple-touch-icon.png
diff --git a/public/img/ani/icon/favicon-16x16.png b/public/img/icon/favicon-16x16.png
similarity index 100%
rename from public/img/ani/icon/favicon-16x16.png
rename to public/img/icon/favicon-16x16.png
diff --git a/public/img/ani/icon/favicon-32x32.png b/public/img/icon/favicon-32x32.png
similarity index 100%
rename from public/img/ani/icon/favicon-32x32.png
rename to public/img/icon/favicon-32x32.png
diff --git a/public/img/ani/icon/mstile-150x150.png b/public/img/icon/mstile-150x150.png
similarity index 100%
rename from public/img/ani/icon/mstile-150x150.png
rename to public/img/icon/mstile-150x150.png
diff --git a/public/img/ani/icon/safari-pinned-tab.svg b/public/img/icon/safari-pinned-tab.svg
similarity index 100%
rename from public/img/ani/icon/safari-pinned-tab.svg
rename to public/img/icon/safari-pinned-tab.svg
diff --git a/public/index.html b/public/index.html
index 1039f7e6..2432ad53 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="">
 
@@ -6,6 +5,11 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <script>
+    if (document.URL.indexOf("ui") === -1) {
+      window.location.replace("ui")
+    }
+  </script>
   <link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>img/icon/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>img/icon/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>img/icon/favicon-16x16.png">
@@ -14,10 +18,10 @@
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@mdi/font@6.2.95/css/materialdesignicons.min.css"> -->
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>
+
 </head>
 
 <body>
diff --git a/src/App.vue b/src/App.vue
index f21e0204..0f72b413 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-20 16:38:51
+ * @LastEditTime: 2021-10-21 13:30:20
  * @Description: Main entry of application
  * @FilePath: /CasaOS-UI/src/App.vue
 -->
@@ -48,29 +48,13 @@ export default {
     }
   },
   created() {
-    // Check if not login then login and get token
-    if (!localStorage.getItem("user_token")) {
-      this.login()
-    }
+
   },
   mounted() {
     //this.$tours['myTour'].start()
   },
   methods: {
-    login() {
-      /**
-       * @description: Login
-       * @return void
-       */
-      // this.$api.user.login({
-      //   username: "admin",
-      //   pwd: "admin"
-      // }).then((res) => {
-      //   if (res.data.success == 200) {
-      //     localStorage.setItem("user_token", res.data.data)
-      //   }
-      // })
-    }
+
   },
 }
 </script>
diff --git a/src/assets/ani/done.json b/src/assets/ani/done.json
new file mode 100644
index 00000000..629f5320
--- /dev/null
+++ b/src/assets/ani/done.json
@@ -0,0 +1 @@
+{"v":"5.1.8","fr":24,"ip":0,"op":72,"w":62,"h":62,"nm":"FINALE","ddd":0,"assets":[{"id":"comp_2","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 4","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[105,105,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-56.964,0.265],[-16.566,34.639],[57.229,-48.946]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.11372549019607843,0.6352941176470588,0.8705882352941177,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.8],"y":[0]},"n":["0p2_1_0p8_0"],"t":20,"s":[0],"e":[100]},{"t":39.999996537879}],"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":71.9999937681822,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 2 Outlines","tt":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[105.114,105.239,0],"ix":2},"a":{"a":0,"k":[50.559,40.579,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.124,-0.094],[0.925,-1.068],[0,0],[0,0],[1.702,-0.778],[0.237,-2.032],[-1.466,-1.237],[0,0],[-1.821,2.039],[0,0],[0.835,2.179]],"o":[[-1.332,0.047],[0,0],[0,0],[-1.45,-1.261],[-1.701,0.779],[-0.237,2.034],[0,0],[2.043,1.76],[0,0],[1.529,-1.645],[-0.835,-2.178]],"v":[[44.56,-40.235],[41.038,-38.496],[-17.23,26.438],[-41.84,5.255],[-46.938,4.474],[-50.072,9.02],[-48.083,14.308],[-19.911,38.569],[-13.148,38.079],[48.322,-30.423],[49.473,-36.774]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50.558,40.579],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":72.3381841595917,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 3","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[105,105,0],"ix":2},"a":{"a":0,"k":[24,32,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.133,0.133,0.18],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,-15.889]},"n":["0p133_1_0p167_0","0p133_1_0p167_0","0p18_1_0p167_-15p889"],"t":13,"s":[110,110,100],"e":[0,0,100]},{"t":25.9999977496214}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.11372549019607843,0.6352941176470588,0.8705882352941177,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.11372549019607843,0.6352941176470588,0.8705882352941177,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[24,32],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":72.3381841595917,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 2","tt":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":90,"ix":10},"p":{"a":0,"k":[105,105,0],"ix":2},"a":{"a":0,"k":[24,32,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.11372549019607843,0.6352941176470588,0.8705882352941177,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.11372549019607843,0.6352941176470588,0.8705882352941177,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[24,32],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":72.3381841595917,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-180,"ix":10},"p":{"a":0,"k":[105,105,0],"ix":2},"a":{"a":0,"k":[24,32,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.11372549019607843,0.6352941176470588,0.8705882352941177,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8,"ix":5},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[24,32],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.7],"y":[0]},"n":["0p833_0p833_0p7_0"],"t":0,"s":[0],"e":[100]},{"t":14.9999987017046}],"ix":2},"o":{"a":0,"k":180,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":72.3381841595917,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Icons","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[30.999999999999993,30.999999999999993,0],"ix":2},"a":{"a":0,"k":[105,105,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.39,0.39,0.39],"y":[1,1,1]},"o":{"x":[0.61,0.61,0.61],"y":[0,0,0]},"n":["0p39_1_0p61_0","0p39_1_0p61_0","0p39_1_0p61_0"],"t":26,"s":[24.799999999999997,24.799999999999997,100],"e":[27.279999999999998,27.279999999999998,100]},{"i":{"x":[0.39,0.39,0.39],"y":[1,1,1]},"o":{"x":[0.61,0.61,0.61],"y":[0,0,0]},"n":["0p39_1_0p61_0","0p39_1_0p61_0","0p39_1_0p61_0"],"t":31,"s":[27.279999999999998,27.279999999999998,100],"e":[24.799999999999997,24.799999999999997,100]},{"t":35.9999968840911}],"ix":6}},"ao":0,"w":210,"h":210,"ip":0,"op":71.9999937681822,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/public/img/ani/rocket-launching.json b/src/assets/ani/rocket-launching.json
similarity index 100%
rename from public/img/ani/rocket-launching.json
rename to src/assets/ani/rocket-launching.json
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index e3cadd7c..ef272fb6 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -13,6 +13,12 @@ $twitter-invert: findColorInvert($twitter);
 $github: #333;
 $github-invert: findColorInvert($github);
 
+$primary: #2276f3;
+$primary-light: findLightColor($primary);
+$primary-dark: findDarkColor($primary);
+$primary-invert: findColorInvert($primary);
+$loading-icon-size: 2.5rem;
+
 @import "~bulma/sass/utilities/derived-variables";
 
 // 3. Add new color variables to the color map.
@@ -72,7 +78,7 @@ html {
       min-width: 20rem;
       .dropdown-content {
         .dropdown-item {
-          padding: 1.25rem;
+          padding: 0.875rem 1.25rem;
           text-align: left;
           .item {
             height: 2rem;
@@ -136,6 +142,7 @@ html {
 .contents {
   flex: 1;
   overflow: auto;
+  height: calc(100vh - 3rem);
 }
 
 .side-bar {
@@ -266,6 +273,7 @@ html {
     visibility: hidden;
     opacity: 0;
     transition: all 0.2s;
+    outline: none;
   }
   p {
     font-weight: 500;
@@ -377,6 +385,25 @@ html {
   }
   .modal-card-body {
     padding: 0 3rem;
+    .loading-overlay .loading-icon:after {
+      -webkit-animation: spinAround 500ms infinite linear;
+      animation: spinAround 500ms infinite linear;
+      border: 4px solid #000;
+      border-radius: 9999px;
+      border-right-color: transparent;
+      border-top-color: transparent;
+      content: "";
+      display: block;
+      height: 1em;
+      position: relative;
+      width: 1em;
+      position: absolute;
+      top: calc(50% - 1.25rem);
+      left: calc(50% - 1.25rem);
+      width: 2.5rem;
+      height: 2.5rem;
+      border-width: 0.2 em;
+    }
     .button.is-static,
     .input,
     .textarea,
@@ -547,16 +574,49 @@ html {
 }
 
 .button.is-grey {
-  background-color: #A6AFB9;
+  background-color: #a6afb9;
   border-color: transparent;
   color: whitesmoke;
 }
 
-.add-button{
+.add-button {
   color: #0e9aff;
   margin: 0 0.25rem;
 }
 
-.nobrk{
+.nobrk {
   word-break: normal;
-}
\ No newline at end of file
+}
+
+.home-section .loading-background {
+  background-color: transparent !important;
+}
+
+.app-list {
+  min-height: 14rem;
+  position: relative;
+}
+
+.suggestion-list {
+  min-height: 7.5rem;
+  position: relative;
+}
+// Login Page
+
+#login-page {
+  height: calc(100% - 5.5rem);
+  .login-panel {
+    text-align: left;
+    max-width: 30rem;
+    background: rgba(255, 255, 255, 0.56);
+    backdrop-filter: blur(1rem);
+    border-radius: 8px;
+    padding: 3.5rem 2.5rem;
+    width: 30rem;
+  }
+}
+
+.install-animation {
+  width: 200px;
+  height: 200px;
+}
diff --git a/src/components/Apps.vue b/src/components/Apps.vue
index 3ec84f05..dbaea000 100644
--- a/src/components/Apps.vue
+++ b/src/components/Apps.vue
@@ -2,13 +2,13 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-09 17:19:09
+ * @LastEditTime: 2021-10-22 14:57:20
  * @Description: App module
  * @FilePath: /CasaOS-UI/src/components/Apps.vue
 -->
 
 <template>
-  <div class="has-text-left mt-6">
+  <div class="home-section has-text-left mt-6">
     <!-- Title Bar Start -->
     <div class="title-bar is-flex is-align-items-center">
       <h1 class="title is-4  has-text-white is-flex-shrink-1">Apps</h1>
@@ -19,11 +19,15 @@
     <!-- Title Bar End -->
 
     <!-- App List Start -->
-    <div class="columns is-variable is-2 is-multiline ">
-      <div class="column is-narrow is-3" v-for="(item,index) in appList" :key="'app-'+index+item.icon+item.port">
-        <app-card :item="item" @updateState="getList" @configApp="showConfigPanel"></app-card>
-      </div>
+    <div class="columns is-variable is-2 is-multiline app-list ">
+      <template v-if="!isLoading">
+        <div class="column is-narrow is-3" v-for="(item,index) in appList" :key="'app-'+index+item.icon+item.port">
+          <app-card :item="item" @updateState="getList" @configApp="showConfigPanel"></app-card>
+        </div>
+      </template>
+      <b-loading :is-full-page="false" v-model="isLoading"></b-loading>
     </div>
+
     <!-- Title Bar End -->
   </div>
 </template>
@@ -35,7 +39,8 @@ export default {
   data() {
     return {
       appList: [],
-      appConfig: {}
+      appConfig: {},
+      isLoading: true
     }
   },
   components: {
@@ -52,7 +57,11 @@ export default {
      */
     getList() {
       this.$api.app.myAppList().then(res => {
-        this.appList = res.data.data;
+        if (res.data.success == 200) {
+          this.appList = res.data.data;
+          this.isLoading = false;
+        }
+
       })
     },
 
diff --git a/src/components/Apps/AppCard.vue b/src/components/Apps/AppCard.vue
index dd8a18e8..af56a900 100644
--- a/src/components/Apps/AppCard.vue
+++ b/src/components/Apps/AppCard.vue
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-13 15:43:43
+ * @LastEditTime: 2021-10-22 14:22:47
  * @Description: App Card item
  * @FilePath: /CasaOS-UI/src/components/Apps/AppCard.vue
 -->
@@ -103,7 +103,6 @@ export default {
     restartApp() {
       this.isRestarting = true
       this.$api.app.startContainer(this.item.custom_id, { state: "restart" }).then((res) => {
-        console.log(res.data);
         if (res.data.success == 200) {
           this.updateState()
         }
@@ -171,7 +170,6 @@ export default {
         state: item.state == "running" ? "stop" : "start"
       }
       this.$api.app.startContainer(item.custom_id, data).then((res) => {
-        console.log(res.data);
         this.isStarting = false
         if (res.data.success == 200) {
           item.state = res.data.data
diff --git a/src/components/Panel.vue b/src/components/Panel.vue
index f4ca470a..4469d674 100644
--- a/src/components/Panel.vue
+++ b/src/components/Panel.vue
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-20 19:45:43
+ * @LastEditTime: 2021-10-22 15:06:04
  * @Description: Install Panel of Docker
  * @FilePath: /CasaOS-UI/src/components/Panel.vue
 -->
@@ -87,7 +87,9 @@
       </section>
       <section v-show="currentSlide == 2">
         <div class="installing-warpper">
-          <lottie-animation path="./ui/img/ani/rocket-launching.json" :autoPlay="true" :width="200" :height="200"></lottie-animation>
+          <div class="is-flex is-align-items-center is-justify-content-center">
+            <lottie-animation class="install-animation" :animationData="require('@/assets/ani/rocket-launching.json')" :loop="true" :autoPlay="true"></lottie-animation>
+          </div>
           <h3 class="title is-6 has-text-centered" :class="{'has-text-danger':errorType == 3,'has-text-black':errorType != 3}" v-html="installText"></h3>
         </div>
       </section>
@@ -116,12 +118,15 @@ import InputGroup from './forms/InputGroup.vue';
 import EnvInputGroup from './forms/EnvInputGroup.vue';
 import Ports from './forms/Ports.vue'
 import ImportPanel from './forms/ImportPanel.vue'
-import LottieAnimation from "lottie-vuejs/src/LottieAnimation.vue";
+import LottieAnimation from "lottie-web-vue";
 import VueSlider from 'vue-slider-component'
 import 'vue-slider-component/theme/default.css'
 import { ValidationObserver, ValidationProvider } from "vee-validate";
 import "@/plugins/vee-validate";
 import debounce from 'lodash/debounce'
+import find from 'lodash/find';
+import uniq from 'lodash/uniq';
+import orderBy from 'lodash/orderBy';
 import FileSaver from 'file-saver';
 
 export default {
@@ -183,15 +188,9 @@ export default {
   },
 
   created() {
-    //If it is edit, Init data
-    if (this.initDatas != undefined) {
-      this.initData = this.initDatas
-      this.webui = this.initDatas.port_map + this.initDatas.index
-      this.panelTitle = this.initData.label + " Setting"
-    } else {
-      this.panelTitle = "Install a new App manually"
 
-    }
+    // Set Front-end base url
+    this.baseUrl = `${window.location.protocol}//${document.domain}:`;
 
     //Get Max memory info form device
     this.totalMemory = Math.floor(this.configData.memory.total / 1048576);
@@ -199,7 +198,7 @@ export default {
 
     //Handling network types
     this.tempNetworks = this.configData.networks;
-    this.networkModes = this.unique(this.tempNetworks.map(item => {
+    this.networkModes = uniq(this.tempNetworks.map(item => {
       return item.driver
     }))
     this.networks = this.networkModes.map(item => {
@@ -210,17 +209,21 @@ export default {
       })
       return tempitem
     })
+    this.networks = orderBy(this.networks, ['driver'], ['asc']);
 
-    let gg = this.tempNetworks.filter(item => {
-      if (item.driver == "bridge") {
-        return item
-      }
-    })
-    console.log(gg);
-    this.initData.network_model = gg.length > 0 ? gg[0].name : "bridge";
+    //If it is edit, Init data
+    if (this.initDatas != undefined) {
+      this.initData = this.initDatas
+      this.webui = this.initDatas.port_map + this.initDatas.index
+      this.panelTitle = this.initData.label + " Setting"
+    } else {
+      this.panelTitle = "Install a new App manually"
+      let gg = find(this.tempNetworks, (o) => {
+        return o.driver == "bridge"
+      })
+      this.initData.network_model = gg.length > 0 ? gg[0].name : "bridge";
+    }
 
-    // Set Front-end base url
-    this.baseUrl = `${window.location.protocol}//${document.domain}:`;
   },
   computed: {
 
@@ -258,23 +261,6 @@ export default {
       this.initData.network_model = model[0]
     },
 
-    /**
-     * @description: Array deduplication
-     * @param {Array} arr
-     * @return {Array}
-     */
-    unique(arr) {
-      for (var i = 0; i < arr.length; i++) {
-        for (var j = i + 1; j < arr.length; j++) {
-          if (arr[i] == arr[j]) {
-            arr.splice(j, 1);
-            j--;
-          }
-        }
-      }
-      return arr;
-    },
-
     /**
      * @description: Back to prev Step
      * @param {*}
@@ -384,7 +370,6 @@ export default {
     updateApp() {
       this.processData();
       this.isLoading = true;
-      console.log(this.initData);
       this.$api.app.updateContainerSetting(this.id, this.initData).then((res) => {
         if (res.data.success == 200) {
           this.isLoading = false;
diff --git a/src/components/Suggestion.vue b/src/components/Suggestion.vue
index bf264f1b..d7956c34 100644
--- a/src/components/Suggestion.vue
+++ b/src/components/Suggestion.vue
@@ -2,32 +2,37 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-09 17:15:37
+ * @LastEditTime: 2021-10-22 14:57:06
  * @Description: 
  * @FilePath: /CasaOS-UI/src/components/Suggestion.vue
 -->
 <template>
-  <div class="has-text-left ">
+  <div class=" home-section has-text-left ">
     <h1 class="title is-4 mt-6 has-text-white">Recommended</h1>
-    <div class="columns is-variable is-2 is-multiline">
-      <div class="column is-one-third" v-for="(item,index) in list" :key="'ss'+index">
-        <a :href="item.url" target="_blank">
-          <div class="wuji-card is-flex is-align-items-center">
-            <div class="info ">
-              <div class="two-line ">
-                {{item.title}}
-              </div>
-              <div class="des two-line">
-                {{item.content}}
+    <div class="columns is-variable is-2 is-multiline suggestion-list">
+
+      <template v-if="!isLoading">
+        <div class="column is-one-third" v-for="(item,index) in list" :key="'ss'+index">
+          <a :href="item.url" target="_blank">
+            <div class="wuji-card is-flex is-align-items-center">
+              <div class="info ">
+                <div class="two-line ">
+                  {{item.title}}
+                </div>
+                <div class="des two-line">
+                  {{item.content}}
+                </div>
               </div>
+
+              <figure class="image is-48x48 simg is-flex">
+                <img :src="item.image_url">
+              </figure>
             </div>
+          </a>
+        </div>
+      </template>
 
-            <figure class="image is-48x48 simg is-flex">
-              <img :src="item.image_url">
-            </figure>
-          </div>
-        </a>
-      </div>
+      <b-loading :is-full-page="false" v-model="isLoading"></b-loading>
     </div>
   </div>
 
@@ -35,16 +40,18 @@
 
 <script>
 export default {
-  name:'suggestion',
+  name: 'suggestion',
   data() {
     return {
+      isLoading: true,
       list: []
     }
   },
   mounted() {
     this.$api.task.list().then(res => {
       if (res.data.success == 200) {
-        this.list = res.data.data
+        this.list = res.data.data;
+        this.isLoading = false
       }
     })
   },
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index f20b4510..4c80149c 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-11 18:05:34
+ * @LastEditTime: 2021-10-22 14:10:30
  * @Description: Top bar 
  * @FilePath: /CasaOS-UI/src/components/TopBar.vue
 -->
@@ -19,7 +19,8 @@
         </template>
 
         <b-dropdown-item aria-role="menu-item" :focusable="false" custom>
-          <h2 class="title is-4">CasaOS Setting</h2>
+          <h2 class="title is-4">CasaOS Settings</h2>
+
           <div class="is-flex is-align-items-center item">
             <div class="is-flex is-align-items-center flex1">
               <b-icon icon="sync" class="mr-1"></b-icon> <b>Update</b>
@@ -43,6 +44,15 @@
             <b-button type="is-dark" size="is-small" class="ml-2" :loading="isUpdating" rounded @click="updateSystem">Update</b-button>
           </div>
 
+          <div class="is-flex is-align-items-center item mt-2">
+            <div class="is-flex is-align-items-center flex1">
+
+            </div>
+            <div>
+              <b-button type="is-dark" size="is-small" class="ml-2" rounded @click="logout">Logout</b-button>
+            </div>
+          </div>
+
         </b-dropdown-item>
       </b-dropdown>
 
@@ -98,7 +108,6 @@ export default {
       this.$api.info.systemConfig().then(res => {
         if (res.data.success == 200) {
           this.barData = res.data.data
-          console.log(res.data);
         }
       })
     },
@@ -108,11 +117,7 @@ export default {
      * @return {*} void
      */
     saveData() {
-      this.$api.info.saveSystemConfig(this.barData).then(res => {
-        if (res.data.success == 200) {
-          console.log(res);
-        }
-      })
+      this.$api.info.saveSystemConfig(this.barData);
     },
 
     /**
@@ -162,6 +167,13 @@ export default {
           }
         })
       }, 3000)
+    },
+    /**
+     * @description: Logout
+     * @return {*} void
+     */
+    logout() {
+      this.$router.push("/logout");
     }
   },
 
diff --git a/src/components/forms/ImportPanel.vue b/src/components/forms/ImportPanel.vue
index ee060b07..1a014ced 100644
--- a/src/components/forms/ImportPanel.vue
+++ b/src/components/forms/ImportPanel.vue
@@ -152,7 +152,6 @@ export default {
     parseCli() {
       const formattedInput = this.dockerCliCommands.replace(/<[^>]*>/g, 'Custom_data').replace(/[\r\n]/g, "").replace(/\\/g, "\\ ").trim();
       const parsedInput = parser(formattedInput)
-      console.log(parsedInput);
       const { _: command } = parsedInput;
       if (command[0] !== 'docker' || (command[1] !== 'run' && command[1] !== 'create')) {
         return false
@@ -222,8 +221,9 @@ export default {
               return true
             }
           })
+          console.log(seletNetworks);
           if (seletNetworks.length > 0) {
-            this.updateData.network_model = seletNetworks[0].networks[0].id;
+            this.updateData.network_model = seletNetworks[0].networks[0].name;
           }
         }
 
@@ -298,7 +298,7 @@ export default {
       const network = this.oriNetWorks.filter(net => {
         return net.name == netName
       })
-      return (network.length > 0) ? network[0].id : this.oriNetWorks[0].id
+      return (network.length > 0) ? network[0].name : this.oriNetWorks[0].name
 
     },
   },
diff --git a/src/components/forms/InputGroup.vue b/src/components/forms/InputGroup.vue
index 1c13ade2..4e47fcbe 100644
--- a/src/components/forms/InputGroup.vue
+++ b/src/components/forms/InputGroup.vue
@@ -106,10 +106,6 @@ export default {
       this.$emit('change', this.vdata)
 
     },
-    selectFile(e) {
-
-      console.log(e.target.parents);
-    }
   },
 }
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index 29e616cc..2c8bfca4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-20 16:39:08
+ * @LastEditTime: 2021-10-21 18:56:45
  * @Description: 
  * @FilePath: /CasaOS-UI/src/router/index.js
  */
@@ -19,6 +19,13 @@ const routes = [
     component: () => import('@/views/Login.vue'),
     meta: { requireAuth: false }
   },
+  {
+    path: '/welcome',
+    name: 'Welcome',
+    hidden: true,
+    component: () => import('@/views/Welcome.vue'),
+    meta: { requireAuth: false }
+  },
   {
     path: '/',
     name: 'Home',
@@ -34,4 +41,46 @@ const router = new VueRouter({
   routes
 })
 
+const originalPush = VueRouter.prototype.push
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch((err) => err)
+}
+
+
+router.beforeEach((to, from, next) => {
+
+  let localUser = localStorage.getItem("user_token");
+
+  //Check if have a verison string in localStorage when access home page
+  let version = localStorage.getItem("version");
+  console.log(version);
+  if (to.path == "/" && version == null) {
+    localStorage.removeItem("user_token");
+    next({ path: '/login' })
+  }
+
+  if (to.path == "/logout") {
+    localStorage.removeItem("user_token");
+    next({ path: '/login' })
+  }
+  if (to.meta.requireAuth) {
+    if (localUser) {
+      next()
+    } else {
+      next({ path: '/login' })
+    }
+  } else {
+    if (localUser) {
+      if (to.path == "/login") {
+        next({ path: '/' })
+      } else {
+        next()
+      }
+    } else {
+      next();
+    }
+  }
+})
+
+
 export default router
diff --git a/src/service/info.js b/src/service/info.js
index 585c1530..a9dcd7db 100644
--- a/src/service/info.js
+++ b/src/service/info.js
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-11 18:08:47
+ * @LastEditTime: 2021-10-22 11:57:58
  * @Description: System HardWare Info API
  * @FilePath: /CasaOS-UI/src/service/info.js
  */
@@ -62,5 +62,10 @@ const info = {
         return api.post('/sys/widget/config', data)
     },
 
+    // Get System state
+    guideCheck(){
+        return api.get('/guide/check');
+    }
+
 }
 export default info;
diff --git a/src/service/service.js b/src/service/service.js
index 39e611fa..1500b461 100644
--- a/src/service/service.js
+++ b/src/service/service.js
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-09-28 14:57:35
+ * @LastEditTime: 2021-10-21 16:57:43
  * @Description: 
  * @FilePath: /CasaOS-UI/src/service/service.js
  */
@@ -25,55 +25,17 @@ const instance = axios.create({
 });
 
 
-window.isRefreshing = false
-
-let refreshSubscribers = []
-
-function subscribeTokenRefresh(cb) {
-    refreshSubscribers.push(cb)
-}
-
-function onRrefreshed(token) {
-    refreshSubscribers.map(cb => cb(token))
-}
-
-// Request interceptors
+//请求和响应拦截可以根据实际项目需求进行编写
+// 请求发起前拦截
 instance.interceptors.request.use((config) => {
     let token = ''
-    if (sessionStorage.getItem("user_token")) {
-        token = sessionStorage.getItem("user_token")
-    }
     if (localStorage.getItem("user_token")) {
         token = localStorage.getItem("user_token")
     }
-    config.headers.Authorization = token
-    if (token === "" && config.url !== "user/login") {
-        if (!window.isRefreshing) {
-            window.isRefreshing = true;
-            axios.post('user/login', qs.stringify({
-                username: "admin",
-                pwd: "admin"
-            })).then(res => {
-                token = res.data.data;
-                store.commit('setToken', token)
-                localStorage.setItem("user_token", token)
-                onRrefreshed(token);
-            })
-        }
-        let retry = new Promise((resolve) => {
-            /* (token) => {...}这个函数就是回调函数 */
-            subscribeTokenRefresh((token) => {
-                config.headers.Authorization = token
-                /* 将请求挂起 */
-                resolve(config)
-            })
-        })
-        return retry
-    } else {
-        return config;
-    }
-
-
+    config.headers.Authorization =  token
+    store.commit('setToken', token)
+    //console.log("请求拦截", config);
+    return config;
 }, (error) => {
     // Do something with request error
     return Promise.reject(error)
@@ -82,12 +44,7 @@ instance.interceptors.request.use((config) => {
 // 响应拦截（请求返回后拦截）
 instance.interceptors.response.use(response => {
     //console.log("响应拦截", response);
-    switch(response.data.success){
-        case 401:
-            localStorage.removeItem('user_token');
-            router.go(0)
-            break;
-    }
+    
     return response;
 }, error => {
     console.log('catch', error)
@@ -95,9 +52,9 @@ instance.interceptors.response.use(response => {
 
         switch (error.response.status) {
             case 401:
-                sessionStorage.removeItem('user_token') //可能是token过期，清除它
+                localStorage.removeItem('user_token') //可能是token过期，清除它
                 router.replace({ //跳转到登录页面
-                    path: '/',
+                    path: '/login',
                     query: { redirect: router.currentRoute.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
                 })
                 break;
diff --git a/src/store/index.js b/src/store/index.js
index 2f58e35a..cf75cf35 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-19 17:34:08
+ * @LastEditTime: 2021-10-22 12:04:58
  * @Description: 
  * @FilePath: /CasaOS-UI/src/store/index.js
  */
@@ -18,6 +18,7 @@ export default new Vuex.Store({
     token: "",
     devIp: "192.168.2.217",
     serviceError: false,
+    userinfo: {},
     widgetsSwitch: {
       clock: true,
       weather: true,
@@ -35,6 +36,9 @@ export default new Vuex.Store({
     setWidgets(state, val) {
       console.log(state.widgetsSwitch[val.k]);
       state.widgetsSwitch[val.k] = val.v;
+    },
+    changeUserInfo(state, val) {
+      state.userinfo = val
     }
   },
   actions: {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1d40a52c..154c8673 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,12 +2,12 @@
  * @Author: JerryK
  * @Date: 2021-10-20 16:34:15
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-20 16:39:51
+ * @LastEditTime: 2021-10-22 14:41:09
  * @Description: 
  * @FilePath: /CasaOS-UI/src/views/Home.vue
 -->
 <template>
-  <div>
+  <div v-if="!isLoading">
     <!-- NavBar Start -->
     <top-bar></top-bar>
     <!-- NavBar End -->
@@ -73,6 +73,21 @@ export default {
     TopBar,
     //Shortcuts
   },
+  data() {
+      return {
+          isLoading: true
+      }
+  },
+  mounted() {
+    this.$api.info.guideCheck().then(res => {
+      if (res.data.success == 200 && res.data.data.need_init_user) {
+        localStorage.removeItem("user_token");
+        this.$router.push("/welcome");
+      }else{
+          this.isLoading = false
+      }
+    });
+  },
 }
 </script>
 
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 2a9f8958..d06614c0 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -2,22 +2,91 @@
  * @Author: JerryK
  * @Date: 2021-10-20 16:30:26
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-20 16:30:27
+ * @LastEditTime: 2021-10-22 14:06:58
  * @Description: 
  * @FilePath: /CasaOS-UI/src/views/Login.vue
 -->
 <template>
-  <div>
-      
+  <div id="login-page" class="is-flex is-justify-content-center is-align-items-center">
+    <div class="login-panel" v-if="!isLoading">
+      <h2 class="title is-3  has-text-centered">Welcome to CasaOS</h2>
+      <b-notification auto-close type="is-danger" v-model="notificationShow" aria-close-label="Close notification" role="alert">
+        {{message}}
+      </b-notification>
+      <ValidationObserver ref="observer" v-slot="{ handleSubmit }">
+        <ValidationProvider rules="required" name="User" v-slot="{ errors, valid }">
+          <b-field label="Username" :type="{ 'is-danger': errors[0], 'is-success': valid }" :message="errors">
+            <b-input type="text" v-model="username" v-on:keyup.enter.native="handleSubmit(login)"></b-input>
+          </b-field>
+        </ValidationProvider>
+        <ValidationProvider rules="required|min:5" vid="password" name="Password" v-slot="{ errors, valid }">
+          <b-field label="Password" class="mt-5" :type="{ 'is-danger': errors[0], 'is-success': valid }" :message="errors">
+            <b-input type="password" v-model="password" password-reveal v-on:keyup.enter.native="handleSubmit(login)"></b-input>
+          </b-field>
+        </ValidationProvider>
+        <b-button type="is-primary" class="mt-6" rounded expanded @click="handleSubmit(login)">Sign In</b-button>
+      </ValidationObserver>
+
+    </div>
+
   </div>
 </template>
 
 <script>
+import { ValidationObserver, ValidationProvider } from "vee-validate";
+import "@/plugins/vee-validate";
+
 export default {
 
+  name: "Login",
+  data() {
+    return {
+      username: '',
+      password: '',
+      isLoading: true,
+      message: "",
+      notificationShow: false
+    }
+  },
+  components: {
+    ValidationObserver,
+    ValidationProvider,
+  },
+  mounted() {
+    this.$api.info.guideCheck().then(res => {
+      if (res.data.success == 200 && res.data.data.need_init_user) {
+        this.$router.push("/welcome");
+      }else{
+          this.isLoading = false
+      }
+    })
+  },
+  methods: {
+    login() {
+      this.$api.user.login({
+        username: this.username,
+        pwd: this.password
+      }).then((res) => {
+        if (res.data.success == 200) {
+          localStorage.setItem("user_token", res.data.data.token)
+          localStorage.setItem("version", res.data.data.version)
+          this.$store.commit('setToken', res.data.data.token)
+          this.$api.user.getUserInfo().then((res) => {
+            if (res.data.success == 200) {
+              this.$store.commit('changeUserInfo', res.data.data)
+              this.$router.push('/')
+            }
+          })
+        } else {
+          this.notificationShow = true;
+          this.message = "Username or Password error!"
+        }
+      })
+
+    }
+  }
 }
 </script>
 
 <style>
-
 </style>
\ No newline at end of file
diff --git a/src/views/Welcome.vue b/src/views/Welcome.vue
new file mode 100644
index 00000000..3c44a7de
--- /dev/null
+++ b/src/views/Welcome.vue
@@ -0,0 +1,133 @@
+<!--
+ * @Author: JerryK
+ * @Date: 2021-10-20 16:30:26
+ * @LastEditors: JerryK
+ * @LastEditTime: 2021-10-22 14:11:54
+ * @Description: 
+ * @FilePath: /CasaOS-UI/src/views/Welcome.vue
+-->
+<template>
+  <div id="login-page" class="is-flex is-justify-content-center is-align-items-center">
+    <div class="login-panel " v-if="!isLoading">
+
+      <div v-if="step == 1" class="has-text-centered">
+        <h2 class="title is-3  has-text-centered">Welcome to CasaOS</h2>
+        <h2 class="subtitle  has-text-centered">Let's create your initial account</h2>
+        <b-button type="is-primary" class="mt-2" rounded @click="goToStep(2)">Go →</b-button>
+      </div>
+
+      <div v-if="step == 2">
+        <h2 class="title is-3  has-text-centered">Create Account</h2>
+        <ValidationObserver ref="observer" v-slot="{ handleSubmit }">
+          <ValidationProvider rules="required" name="User" v-slot="{ errors, valid }">
+            <b-field label="Username" :type="{ 'is-danger': errors[0], 'is-success': valid }" :message="errors">
+              <b-input type="text" v-model="username" v-on:keyup.enter.native="handleSubmit(reg)"></b-input>
+            </b-field>
+          </ValidationProvider>
+          <ValidationProvider rules="required|min:5" vid="password" name="Password" v-slot="{ errors, valid }">
+            <b-field label="Password" class="mt-5" :type="{ 'is-danger': errors[0], 'is-success': valid }" :message="errors">
+              <b-input type="password" v-model="password" password-reveal v-on:keyup.enter.native="handleSubmit(reg)"></b-input>
+            </b-field>
+          </ValidationProvider>
+          <ValidationProvider rules="required|confirmed:password" name="Password Confirmation" v-slot="{ errors, valid }">
+            <b-field label="Confirm Password" class="mt-5" :type="{ 'is-danger': errors[0], 'is-success': valid }" :message="errors">
+              <b-input type="password" v-model="confirmation" password-reveal v-on:keyup.enter.native="handleSubmit(reg)"></b-input>
+            </b-field>
+          </ValidationProvider>
+          <b-button type="is-primary" class="mt-6" rounded expanded @click="handleSubmit(reg)">Create</b-button>
+        </ValidationObserver>
+      </div>
+
+      <div v-if="step == 3" class="has-text-centered ">
+        <h2 class="title is-3  has-text-centered">All things done!</h2>
+        <div class="is-flex is-align-items-center is-justify-content-center">
+          <lottie-animation class="animation" :animationData="require('@/assets/ani/done.json')" :autoPlay="true" :loop="false" @complete="complete"></lottie-animation>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ValidationObserver, ValidationProvider } from "vee-validate";
+import "@/plugins/vee-validate";
+import LottieAnimation from "lottie-web-vue";
+export default {
+
+  name: "Welcome",
+  data() {
+    return {
+      step: 1,
+      username: '',
+      password: '',
+      confirmation: "",
+      isLoading: true,
+      message: "",
+      notificationShow: false
+    }
+  },
+  components: {
+    ValidationObserver,
+    ValidationProvider,
+    LottieAnimation
+  },
+  mounted() {
+    this.$api.info.guideCheck().then(res => {
+      //console.log(res.data.data);
+      if (res.data.success == 200 && !res.data.data.need_init_user) {
+        this.$router.push("/login");
+      }else{
+        this.isLoading = false
+      }
+    })
+  },
+
+  methods: {
+    reg() {
+      this.$api.user.createUsernameAndPaword({
+        username: this.username,
+        pwd: this.password
+      }).then(res => {
+        if (res.data.success == 200) {
+          this.goToStep(3);
+        }
+      })
+    },
+    login() {
+      this.$api.user.login({
+        username: this.username,
+        pwd: this.password
+      }).then((res) => {
+        if (res.data.success == 200) {
+          localStorage.setItem("user_token", res.data.data.token)
+          localStorage.setItem("version", res.data.data.version)
+          this.$store.commit('setToken', res.data.data.token)
+          this.$api.user.getUserInfo().then((res) => {
+            if (res.data.success == 200) {
+              this.$store.commit('changeUserInfo', res.data.data)
+              this.$router.push('/')
+            }
+          })
+        } else {
+          this.notificationShow = true;
+          this.message = "Username or Password error!"
+        }
+      })
+
+    },
+    goToStep(step) {
+      this.step = step
+    },
+    complete() {
+      this.login()
+    }
+  }
+}
+</script>
+
+<style>
+.animation {
+  width: 120px;
+  height: 120px;
+}
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 34d344e2..d2ceb6b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5616,11 +5616,23 @@ lottie-vuejs@^0.4.0:
     axios "^0.19.0"
     lottie-web "^5.1.9"
 
+lottie-web-vue@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/lottie-web-vue/-/lottie-web-vue-1.2.0.tgz#3570c6e5756b4be353dac59a3ec673434ce50bc8"
+  integrity sha512-DWxaA3Y93sRg/O003p9T88aUcVxM4DMamrQUYNVnbyy3ds+5CZzYYwci0FsoKUSqgV1+/JAXKXrARnHq4tVY7A==
+  dependencies:
+    lottie-web "^5.7.4"
+
 lottie-web@^5.1.9:
   version "5.7.13"
   resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.7.13.tgz#c4087e4742c485fc2c4034adad65d1f3fcd438b0"
   integrity sha512-6iy93BGPkdk39b0jRgJ8Zosxi8QqcMP5XcDvg1f0XAvEkke6EMCl6BUO4Lu78dpgvfG2tzut4QJ+0vCrfbrldQ==
 
+lottie-web@^5.7.4:
+  version "5.7.14"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.7.14.tgz#cdabd256181c3ea64cf0c174a61dfa137228981f"
+  integrity sha512-J+QEPse7Rws0XvTqRJNtcE8cszb5FWYFHubEK6bgDJtw64/AQJ40aazbWXsWGBM4sm/PgLBLgmmhDU4QpLiieg==
+
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.nlark.com/loud-rejection/download/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"