feat(Manager): 增加了本地缓存资源管理中心

Author: Hukeqing

src/components/Home.vue

@@ -39,6 +39,12 @@
                             比赛题面
                         </span>
                     </el-menu-item>
+                    <el-menu-item index="7">
+                        <span slot="title">
+                            <i class="el-icon-folder"></i>
+                            本地缓存
+                        </span>
+                    </el-menu-item>
                 </el-menu>
             </el-aside>
             <el-main>
@@ -50,6 +56,7 @@
                 <Contest v-if="status===5" :contestId="contestId" v-on:enterProblem="enterProblem"></Contest>
                 <Problem v-if="status===6" :contestId="contestId" :problemId="problemId"
                          v-on:submitProblem="submitProblem" v-on:loadProblem="loadProblem"></Problem>
+                <LocalManager v-if="status===7"></LocalManager>
             </el-main>
         </el-container>
     </el-container>
@@ -62,6 +69,7 @@ import Status from "@/components/Status";
 import ContestList from "@/components/ContestList";
 import Contest from "@/components/Contest";
 import Problem from "@/components/Problem";
+import LocalManager from "@/components/LocalManager";
 
 export default {
     name: "Home",
@@ -82,7 +90,8 @@ export default {
         Status,
         ContestList,
         Contest,
-        Problem
+        Problem,
+        LocalManager
     },
 
     methods: {

src/components/LocalManager.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="main">
+        <el-button type="primary" :disabled="!account"
+                   v-on:click="removeUser">
+            删除账号信息
+        </el-button>
+        <el-table :data="problems"
+                  style="width: 100%">
+            <el-table-column
+                prop="id"
+                label="问题编号"
+                align="center"
+                min-width="100">
+            </el-table-column>
+            <el-table-column
+                prop="memory"
+                label="占用内存"
+                align="center"
+                min-width="100">
+            </el-table-column>
+            <el-table-column
+                label="操作"
+                align="center"
+                min-width="50">
+                <template scope="scope">
+                    <el-button type="primary"
+                               v-on:click="remove(scope.$index)">
+                        删除缓存
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "LocalManager",
+
+    data() {
+        return {
+            account: false,
+            problems: []
+        }
+    },
+
+    created() {
+        if (window.localStorage.getItem('email') != null)
+            this.account = true
+        if (window.localStorage.savedProblem != null) {
+            let problemList = window.localStorage.savedProblem
+            problemList = problemList.split(';')
+            for (let i = 0; i < problemList.length - 1; ++i) {
+                let pro = {
+                    id: problemList[i],
+                    memory: window.localStorage.getItem(problemList[i]).length / 1024 + 'KB'
+                }
+                this.problems.push(pro)
+            }
+        }
+    },
+
+    methods: {
+        remove(index) {
+            window.localStorage.removeItem(this.problems[index].id)
+            window.localStorage.savedProblem = window.localStorage.savedProblem.replace(this.problems[index].id + ';', '')
+            this.useLocalStorage = false
+            this.problems.splice(index, 1)
+        },
+
+        removeUser() {
+            window.localStorage.removeItem('email');
+            window.localStorage.removeItem('password');
+            this.account = false
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>