前端添加实用工具

tonecn/src/views/Console/Dashboard.vue

@@ -1,22 +1,67 @@
 <script setup lang="ts">
-import { Menu as IconMenu, Document } from '@element-plus/icons-vue'
+import { Menu as IconMenu, Document, Back, Tools } from '@element-plus/icons-vue'
 import Resources from '../../components/Console/Resources.vue'
 import Blogs from '../../components/Console/Blogs.vue'
-import { shallowRef } from 'vue';
-const tabComponent = shallowRef(Resources)
+import Utils from '../../components/Console/Utils.vue'
+import { shallowRef, ref, onMounted, onUnmounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+const tabComponent = shallowRef(Resources);
+const menuCollapse = ref(false)
+const handleResize = () => {
+    if (window.matchMedia('(max-width: 768px)').matches) {
+        menuCollapse.value = true;
+    } else {
+        menuCollapse.value = false;
+    }
+};
+const logout = () => {
+    ElMessageBox.confirm(
+        '是否要退出登录？',
+        '警告',
+        {
+            confirmButtonText: '退出',
+            cancelButtonText: '取消',
+            type: 'warning'
+        }
+    ).then(() => {
+        localStorage.clear()
+        ElMessage.success('退出成功')
+        setTimeout(() => {
+            window.location.reload();
+        }, 1000);
+    })
+}
+onMounted(async () => {
+    window.addEventListener('resize', handleResize);
+})
+onUnmounted(async () => {
+    window.removeEventListener('resize', handleResize);
+})
 </script>
 <template>
     <div class="dashboard-container">
-        <el-menu default-active="1" class="menu">
+        <el-menu default-active="1" :collapse="menuCollapse" class="menu">
             <el-menu-item index="1" @click="tabComponent = Resources">
                 <el-icon><icon-menu /></el-icon>
-                <span>资源及下载</span>
+                <span style="width: 140px;">资源及下载</span>
             </el-menu-item>
             <el-menu-item index="2" @click="tabComponent = Blogs">
                 <el-icon>
                     <document />
                 </el-icon>
-                <span>博客</span>
+                <span>博客管理</span>
+            </el-menu-item>
+            <el-menu-item index="3" @click="tabComponent = Utils">
+                <el-icon>
+                    <Tools />
+                </el-icon>
+                <span>实用工具</span>
+            </el-menu-item>
+            <el-menu-item @click="logout">
+                <el-icon>
+                    <Back />
+                </el-icon>
+                <span>退出登录</span>
             </el-menu-item>
         </el-menu>
         <div style="flex: 1;min-height: calc(100vh - 90px);">
@@ -27,10 +72,11 @@ const tabComponent = shallowRef(Resources)
     </div>
 </template>
 <style scoped>
-.dashboard-container{
+.dashboard-container {
     display: flex;
 }
-.dashboard-container .menu{
-    min-width: 200px;
+
+.dashboard-container .menu {
+    /* min-width: 200px; */
 }
 </style>