release revsuit vBeta0.1.0 (#15)

Co-authored-by: E99p1ant <[email protected]>

frontend/src/App.vue

@@ -45,6 +45,12 @@
             <router-link to="/rules/ftp">FTP Rules</router-link>
           </a-menu-item>
         </a-sub-menu>
+        <a-menu-item key="/settings">
+          <router-link to="/settings">
+            <a-icon type="setting"/>
+            Settings
+          </router-link>
+        </a-menu-item>
       </a-menu>
     </a-layout-sider>
     <a-layout>
@@ -54,8 +60,7 @@
             :type="collapsed ? 'menu-unfold' : 'menu-fold'"
             @click="() => (collapsed = !collapsed)"
         />
-        <!--        <transition name="list1">-->
-        <div v-if="isLogMode" style="float: right; width:45% ;padding: 12px 0;line-height: 24px;">
+        <div v-if="isLogMode" style="float: right; min-width:50% ;padding: 12px 0;line-height: 24px;">
           <a-row :gutter="24" type="flex">
             <a-col :span="21">
               <a-form-model v-show="showSettings" ref="settings" layout="inline">
@@ -84,7 +89,6 @@
             </a-col>
           </a-row>
         </div>
-        <!--        </transition>-->
       </a-layout-header>
       <a-layout-content
           :style="{ margin: '24px 16px', padding: '24px', borderRadius: '20px',background: '#fff', minHeight: 'initial' }"
@@ -93,6 +97,12 @@
           <router-view ref='content'/>
         </transition>
       </a-layout-content>
+      <div class="copyright">
+        <p class="">
+          RevSuit Current Version: {{ this.version }} &copy;2021 <a href="https://github.com/Li4n0">Li4n0</a>. <a
+            href="https://github.com/Li4n0/revsuit">GitHub</a>
+        </p>
+      </div>
     </a-layout>
     <Auth></Auth>
   </a-layout>
@@ -100,15 +110,21 @@
 <script>
 import Auth from '@/components/Auth'
 import RuleIcon from "@/components/Icon";
+import {getVersion} from "@/api/auth";
+import {store} from "@/main";
+
 
 export default {
   data() {
     return {
+      store,
       autoRefresh: localStorage.getItem("autoRefresh") === "true",
-      refreshInterval: localStorage.getItem("refreshInterval"),
+      refreshInterval: localStorage.getItem("refreshInterval") ? localStorage.getItem("refreshInterval") : 5,
+      pageSize: store.pageSize,
       collapsed: false,
       showSettings: false,
-      openKeys: ['logs', "rules"],
+      openKeys: ['logs'],
+      version: "",
     };
   },
   computed: {
@@ -124,12 +140,18 @@ export default {
       this.timer = setInterval(() => {
         this.$refs.content.fetch()
       }, this.refreshInterval * 1000)
+    },
+    GetVersion() {
+      getVersion().then(res => {
+        this.version = res.data.result
+      })
     }
   },
   mounted() {
     if (this.autoRefresh && this.isLogMode) {
       this.timing()
     }
+    this.GetVersion()
   },
   destroyed() {
     clearInterval(this.timer)
@@ -155,6 +177,21 @@ export default {
       clearInterval(this.timer)
       this.timing()
       localStorage.setItem('refreshInterval', val)
+    },
+    pageSize(val) {
+      if (val <= 0 || val > 100) {
+        val = 10
+      }
+      store.pageSize = val
+      localStorage.setItem('pageSize', val)
+    },
+    'store.authed'() {
+      this.$refs.content.fetch()
+    },
+    'store.pageSize'() {
+      this.$refs.content.pagination.pageSize = store.pageSize
+      localStorage.setItem("pageSize", store.pageSize.toString())
+      this.$refs.content.fetch()
     }
   },
   components: {
@@ -169,17 +206,6 @@ html, body {
   margin: 0;
 }
 
-.fade-enter.fade-enter-active,
-.fade-appear.fade-appear-active {
-  -webkit-animation-name: none;
-  animation-name: none;
-}
-
-.fade-leave.fade-leave-active {
-  -webkit-animation-name: none;
-  animation-name: none;
-}
-
 /* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-enter-active {
@@ -236,4 +262,10 @@ html, body {
   padding-bottom: 5px;
   border-bottom: 2px solid #b6befa;
 }
+
+.copyright {
+  color: #888;
+  text-align: right;
+  margin-right: 1rem;
+}
 </style>