refactor: 移除ant-design-vue和tailwindcss依赖并优化样式

style: 统一使用css替换scss并调整组件样式
style: 优化组件布局和属性顺序
chore: 更新.gitignore和.eslintrc配置
This commit is contained in:
张翔
2026-03-13 09:55:05 +08:00
parent 9f8bf041c3
commit 2555bf5f55
17 changed files with 901 additions and 1313 deletions
@@ -1,6 +1,9 @@
<template>
<el-container class="default-layout">
<el-aside :width="collapsed ? '64px' : '200px'" class="aside">
<el-aside
:width="collapsed ? '64px' : '200px'"
class="aside"
>
<div class="logo">
<span v-if="!collapsed">Novalon</span>
<span v-else>N</span>
@@ -9,8 +12,8 @@
:default-active="activeMenu"
class="menu"
:collapse="collapsed"
background-color="#304156"
text-color="#bfcbd9"
background-color="#f5f7fa"
text-color="#606266"
active-text-color="#409eff"
router
>
@@ -23,55 +26,85 @@
<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-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-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-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-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-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">
<el-icon
class="trigger"
@click="collapsed = !collapsed"
>
<Fold v-if="!collapsed" />
<Expand v-else />
</el-icon>
<div class="header-right">
<el-dropdown @command="handleCommand">
<el-avatar :size="32">{{ username }}</el-avatar>
<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-item command="profile">
个人中心
</el-dropdown-item>
<el-dropdown-item
command="logout"
divided
>
退出登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@@ -114,13 +147,13 @@ onMounted(() => {
})
</script>
<style scoped lang="scss">
<style scoped lang="css">
.default-layout {
min-height: 100vh;
}
.aside {
background-color: #304156;
background-color: #f5f7fa;
transition: width 0.3s;
overflow: hidden;
}
@@ -130,7 +163,7 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
color: #303133;
font-size: 20px;
font-weight: bold;
}