feat: add system quality improvement plan and implementation

novalon-manage-web/src/layouts/DefaultLayout.vue

@@ -1,87 +1,109 @@
 <template>
-  <a-layout class="default-layout">
-    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
+  <el-container class="default-layout">
+    <el-aside :width="collapsed ? '64px' : '200px'" class="aside">
       <div class="logo">
         <span v-if="!collapsed">Novalon</span>
         <span v-else>N</span>
       </div>
-      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
-        <a-menu-item key="dashboard" @click="router.push('/dashboard')">
-          <template #icon><DashboardOutlined /></template>
+      <el-menu
+        :default-active="activeMenu"
+        class="menu"
+        :collapse="collapsed"
+        background-color="#304156"
+        text-color="#bfcbd9"
+        active-text-color="#409eff"
+        router
+      >
+        <el-menu-item index="/dashboard">
+          <el-icon><Odometer /></el-icon>
           <span>仪表盘</span>
-        </a-menu-item>
-        <a-sub-menu key="system">
-          <template #icon><SettingOutlined /></template>
-          <template #title>系统管理</template>
-          <a-menu-item key="users" @click="router.push('/users')">用户管理</a-menu-item>
-          <a-menu-item key="roles" @click="router.push('/roles')">角色管理</a-menu-item>
-          <a-menu-item key="menus" @click="router.push('/menus')">菜单管理</a-menu-item>
-        </a-sub-menu>
-        <a-sub-menu key="config">
-          <template #icon><ToolOutlined /></template>
-          <template #title>系统配置</template>
-          <a-menu-item key="dict" @click="router.push('/dict')">字典管理</a-menu-item>
-          <a-menu-item key="sysconfig" @click="router.push('/sysconfig')">参数配置</a-menu-item>
-        </a-sub-menu>
-        <a-sub-menu key="audit">
-          <template #icon><AuditOutlined /></template>
-          <template #title>审计中心</template>
-          <a-menu-item key="loginlog" @click="router.push('/loginlog')">登录日志</a-menu-item>
-          <a-menu-item key="oplog" @click="router.push('/oplog')">操作日志</a-menu-item>
-        </a-sub-menu>
-        <a-sub-menu key="notify">
-          <template #icon><BellOutlined /></template>
-          <template #title>通知中心</template>
-          <a-menu-item key="notice" @click="router.push('/notice')">通知公告</a-menu-item>
-        </a-sub-menu>
-        <a-sub-menu key="file">
-          <template #icon><FolderOutlined /></template>
-          <template #title>文件管理</template>
-          <a-menu-item key="files" @click="router.push('/files')">文件列表</a-menu-item>
-        </a-sub-menu>
-      </a-menu>
-    </a-layout-sider>
-    <a-layout>
-      <a-layout-header class="header">
-        <menu-unfold-outlined v-if="collapsed" class="trigger" @click="collapsed = !collapsed" />
-        <menu-fold-outlined v-else class="trigger" @click="collapsed = !collapsed" />
+        </el-menu-item>
+        <el-sub-menu index="system">
+          <template #title>
+            <el-icon><Setting /></el-icon>
+            <span>系统管理</span>
+          </template>
+          <el-menu-item index="/users">用户管理</el-menu-item>
+          <el-menu-item index="/roles">角色管理</el-menu-item>
+          <el-menu-item index="/menus">菜单管理</el-menu-item>
+        </el-sub-menu>
+        <el-sub-menu index="config">
+          <template #title>
+            <el-icon><Tools /></el-icon>
+            <span>系统配置</span>
+          </template>
+          <el-menu-item index="/dict">字典管理</el-menu-item>
+          <el-menu-item index="/sysconfig">参数配置</el-menu-item>
+        </el-sub-menu>
+        <el-sub-menu index="audit">
+          <template #title>
+            <el-icon><Document /></el-icon>
+            <span>审计中心</span>
+          </template>
+          <el-menu-item index="/loginlog">登录日志</el-menu-item>
+          <el-menu-item index="/oplog">操作日志</el-menu-item>
+        </el-sub-menu>
+        <el-sub-menu index="notify">
+          <template #title>
+            <el-icon><Bell /></el-icon>
+            <span>通知中心</span>
+          </template>
+          <el-menu-item index="/notice">通知公告</el-menu-item>
+        </el-sub-menu>
+        <el-sub-menu index="file">
+          <template #title>
+            <el-icon><Folder /></el-icon>
+            <span>文件管理</span>
+          </template>
+          <el-menu-item index="/files">文件列表</el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+    </el-aside>
+    <el-container>
+      <el-header class="header">
+        <el-icon class="trigger" @click="collapsed = !collapsed">
+          <Fold v-if="!collapsed" />
+          <Expand v-else />
+        </el-icon>
         <div class="header-right">
-          <a-dropdown>
-            <a-avatar>{{ username }}</a-avatar>
-            <template #overlay>
-              <a-menu>
-                <a-menu-item key="profile">个人中心</a-menu-item>
-                <a-menu-divider />
-                <a-menu-item key="logout" @click="handleLogout">退出登录</a-menu-item>
-              </a-menu>
+          <el-dropdown @command="handleCommand">
+            <el-avatar :size="32">{{ username }}</el-avatar>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
+                <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
+              </el-dropdown-menu>
             </template>
-          </a-dropdown>
+          </el-dropdown>
         </div>
-      </a-layout-header>
-      <a-layout-content class="content">
+      </el-header>
+      <el-main class="content">
         <router-view />
-      </a-layout-content>
-    </a-layout>
-  </a-layout>
+      </el-main>
+    </el-container>
+  </el-container>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import {
-  DashboardOutlined, SettingOutlined, ToolOutlined,
-  AuditOutlined, BellOutlined, FolderOutlined,
-  MenuUnfoldOutlined, MenuFoldOutlined
-} from '@ant-design/icons-vue'
+  Odometer, Setting, Tools, Document, Bell, Folder,
+  Fold, Expand
+} from '@element-plus/icons-vue'
 
 const router = useRouter()
+const route = useRoute()
 const collapsed = ref(false)
-const selectedKeys = ref<string[]>([])
 const username = ref(localStorage.getItem('username') || 'Admin')
 
-const handleLogout = () => {
-  localStorage.clear()
-  router.push('/login')
+const activeMenu = computed(() => route.path)
+
+const handleCommand = (command: string) => {
+  if (command === 'logout') {
+    localStorage.clear()
+    router.push('/login')
+  }
 }
 
 onMounted(() => {
@@ -97,6 +119,12 @@ onMounted(() => {
   min-height: 100vh;
 }
 
+.aside {
+  background-color: #304156;
+  transition: width 0.3s;
+  overflow: hidden;
+}
+
 .logo {
   height: 64px;
   display: flex;
@@ -107,6 +135,10 @@ onMounted(() => {
   font-weight: bold;
 }
 
+.menu {
+  border-right: none;
+}
+
 .header {
   display: flex;
   justify-content: space-between;
@@ -119,7 +151,7 @@ onMounted(() => {
     font-size: 18px;
     cursor: pointer;
     transition: color 0.3s;
-    &:hover { color: #1890ff; }
+    &:hover { color: #409eff; }
   }
 
   .header-right {
@@ -132,6 +164,6 @@ onMounted(() => {
   margin: 16px;
   padding: 16px;
   background: #fff;
-  min-height: 280px;
+  min-height: calc(100vh - 96px);
 }
 </style>