feat: 初始化智能物联网设备管理系统前后端基础项目
完成项目整体结构搭建，包含： 1. 前端Vue3+TS+Vite+Antd项目基础配置与核心依赖 2. 后端MidwayJS+TypeORM+JWT权限认证框架 3. 完整的用户、角色、权限、日志数据库表结构 4. 核心业务模块API与基础服务实现 5. 全局样式、路由、状态管理配置
This commit is contained in:
andyesfly committed
commit
3d7eb12103
89 files changed
+16085
No files matched your search
@@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<a-layout class="admin-layout">
|
||||
<!-- 侧边栏 -->
|
||||
<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible :width="240" :collapsed-width="80"
|
||||
theme="dark" class="sider">
|
||||
<!-- Logo区域 -->
|
||||
<div class="logo" @click="$router.push('/dashboard')">
|
||||
<img src="@/assets/vue.svg" alt="logo" class="logo-img" />
|
||||
<h1 v-show="!collapsed" class="logo-title">智能电网IoT</h1>
|
||||
</div>
|
||||
|
||||
<!-- 菜单 -->
|
||||
<a-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" mode="inline" theme="dark"
|
||||
:items="menuItems" @click="handleMenuClick" />
|
||||
|
||||
<!-- 折叠按钮 -->
|
||||
<div class="collapse-btn" @click="toggleCollapse">
|
||||
<component :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined" />
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
|
||||
<a-layout>
|
||||
<!-- 顶栏 -->
|
||||
<a-layout-header class="header">
|
||||
<div class="header-left">
|
||||
<!-- 折叠触发器 -->
|
||||
<div class="trigger" @click="toggleCollapse">
|
||||
<component :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined" />
|
||||
</div>
|
||||
|
||||
<!-- 面包屑导航 -->
|
||||
<a-breadcrumb class="breadcrumb">
|
||||
<a-breadcrumb-item>
|
||||
<HomeOutlined />
|
||||
<span>首页</span>
|
||||
</a-breadcrumb-item>
|
||||
<template v-for="(item, index) in breadcrumbList" :key="index">
|
||||
<a-breadcrumb-item v-if="item.path">
|
||||
<router-link v-if="index < breadcrumbList.length - 1" :to="item.path">
|
||||
{{ item.title }}
|
||||
</router-link>
|
||||
<span v-else>{{ item.title }}</span>
|
||||
</a-breadcrumb-item>
|
||||
</template>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<!-- 用户信息下拉菜单 -->
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-space class="user-info">
|
||||
<a-avatar :size="32" :style="{ backgroundColor: '#1890ff' }">
|
||||
{{ userInitial }}
|
||||
</a-avatar>
|
||||
<span class="username">{{ displayName }}</span>
|
||||
<DownOutlined />
|
||||
</a-space>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleUserMenuClick">
|
||||
<a-menu-item key="profile" disabled>
|
||||
<UserOutlined />
|
||||
<span>个人中心</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="password" disabled>
|
||||
<LockOutlined />
|
||||
<span>修改密码</span>
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="logout">
|
||||
<LogoutOutlined />
|
||||
<span style="color: #ff4d4f">退出登录</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<a-layout-content class="content">
|
||||
<router-view v-slot="{ Component, route: currentRoute }">
|
||||
<transition name="fade-slide" mode="out-in">
|
||||
<div :key="currentRoute.path" class="view-wrapper">
|
||||
<component :is="Component" />
|
||||
</div>
|
||||
</transition>
|
||||
</router-view>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, h } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import {
|
||||
DashboardOutlined,
|
||||
SettingOutlined,
|
||||
UserOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
ToolOutlined,
|
||||
InfoCircleOutlined,
|
||||
LockOutlined,
|
||||
FileTextOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
HomeOutlined,
|
||||
DownOutlined,
|
||||
LogoutOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { usePermissionStore } from '@/stores/permission'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const permissionStore = usePermissionStore()
|
||||
|
||||
// 状态管理
|
||||
const collapsed = ref(false)
|
||||
const selectedKeys = ref<string[]>([])
|
||||
const openKeys = ref<string[]>([])
|
||||
|
||||
// 菜单配置
|
||||
const menuItems = computed(() => [
|
||||
{
|
||||
key: '/dashboard',
|
||||
icon: () => h(DashboardOutlined),
|
||||
label: '仪表盘',
|
||||
},
|
||||
{
|
||||
key: '/system',
|
||||
icon: () => h(SettingOutlined),
|
||||
label: '系统管理',
|
||||
children: [
|
||||
{
|
||||
key: '/system/user',
|
||||
icon: () => h(UserOutlined),
|
||||
label: '用户管理',
|
||||
},
|
||||
{
|
||||
key: '/system/role',
|
||||
icon: () => h(SafetyCertificateOutlined),
|
||||
label: '角色权限',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '/settings',
|
||||
icon: () => h(ToolOutlined),
|
||||
label: '系统设置',
|
||||
children: [
|
||||
{
|
||||
key: '/settings/basic',
|
||||
icon: () => h(InfoCircleOutlined),
|
||||
label: '基本设置',
|
||||
},
|
||||
{
|
||||
key: '/settings/security',
|
||||
icon: () => h(LockOutlined),
|
||||
label: '安全设置',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '/log/operation',
|
||||
icon: () => h(FileTextOutlined),
|
||||
label: '操作日志',
|
||||
},
|
||||
])
|
||||
|
||||
// 计算属性
|
||||
const userInfo = computed(() => permissionStore.userInfo)
|
||||
const displayName = computed(() => userInfo.value?.nickname || userInfo.value?.username || '管理员')
|
||||
const userInitial = computed(() => (displayName.value?.charAt(0) || 'A').toUpperCase())
|
||||
|
||||
// 面包屑列表
|
||||
interface BreadcrumbItem {
|
||||
title: string
|
||||
path?: string
|
||||
}
|
||||
|
||||
const breadcrumbList = computed<BreadcrumbItem[]>(() => {
|
||||
const matched = route.matched.filter(item => item.meta && item.meta.title)
|
||||
return matched.map(item => ({
|
||||
title: item.meta?.title as string,
|
||||
path: item.path,
|
||||
}))
|
||||
})
|
||||
|
||||
// 监听路由变化，更新菜单选中状态
|
||||
watch(
|
||||
() => route.path,
|
||||
(path) => {
|
||||
selectedKeys.value = [path]
|
||||
|
||||
// 自动展开父级菜单
|
||||
const pathParts = path.split('/').filter(Boolean)
|
||||
if (pathParts.length > 1) {
|
||||
openKeys.value = [`/${pathParts[0]}`]
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 监听侧边栏折叠状态，折叠时关闭所有子菜单
|
||||
watch(collapsed, (val) => {
|
||||
if (val) {
|
||||
openKeys.value = []
|
||||
} else {
|
||||
// 展开时根据当前路由自动打开对应的父菜单
|
||||
const pathParts = route.path.split('/').filter(Boolean)
|
||||
if (pathParts.length > 1) {
|
||||
openKeys.value = [`/${pathParts[0]}`]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 方法
|
||||
function toggleCollapse() {
|
||||
collapsed.value = !collapsed.value
|
||||
}
|
||||
|
||||
function handleMenuClick({ key }: { key: string }) {
|
||||
router.push(key)
|
||||
}
|
||||
|
||||
function handleUserMenuClick({ key }: { key: string }) {
|
||||
if (key === 'logout') {
|
||||
permissionStore.logout()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.admin-layout {
|
||||
min-height: 100vh;
|
||||
|
||||
.sider {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
||||
|
||||
.logo {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-menu) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-size: 18px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.ant-layout {
|
||||
margin-left: 240px;
|
||||
transition: margin-left 0.2s;
|
||||
|
||||
&.ant-layout-has-sider+& {
|
||||
margin-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
// 当侧边栏折叠时的样式调整
|
||||
.ant-layout-sider-collapsed~.ant-layout {
|
||||
margin-left: 80px !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
background: #fff;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.trigger {
|
||||
font-size: 18px;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
transition: all 0.3s;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 14px;
|
||||
|
||||
:deep(.anticon) {
|
||||
margin-right: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
.user-info {
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.username {
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 16px;
|
||||
min-height: calc(100vh - 64px - 32px);
|
||||
|
||||
.view-wrapper {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
min-height: calc(100vh - 64px - 32px - 48px); // 减去header、margin和padding
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 页面切换过渡动画
|
||||
.fade-slide-enter-active,
|
||||
.fade-slide-leave-active {
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media screen and (max-width: 768px) {
|
||||
.admin-layout {
|
||||
.ant-layout-sider {
|
||||
position: fixed !important;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
>.ant-layout {
|
||||
margin-left: 80px !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0 12px;
|
||||
|
||||
.breadcrumb {
|
||||
display: none; // 小屏幕隐藏面包屑
|
||||
}
|
||||
|
||||
.username {
|
||||
display: none; // 小屏幕隐藏用户名
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 12px;
|
||||
|
||||
.view-wrapper {
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user