CommonAside.vue
<template><el-aside width="200px"><el-menu background-color="#545c64" text-color="#fff" :collapse-transition="false"><h4>通用后台管理系统</h4><el-menu-item v-for="item in noChildren" :key="item.path" :index="item.path"><component :is="item.icon" class="icons"></component><span>{{ item.label }}</span></el-menu-item><el-sub-menu v-for="item in hasChildren" :key="item.path" :index="item.path"><template #title><component :is="item.icon" class="icons"></component><span>{{ item.label }}</span></template><el-menu-item-group title="分组一"><el-menu-item v-for="subItem in <any>item.children" :key="subItem.path" :index="subItem.path"><component :is="subItem.icon" class="icons"></component><span>{{ subItem.label }}</span></el-menu-item></el-menu-item-group></el-sub-menu></el-menu></el-aside>
</template><script setup lang="ts">
import { onMounted } from 'vue';import { ref, computed } from 'vue'const listMenu = ref([{path: '/home',name: 'home',label: '首页',icon: 'house',url: 'Home'},{path: '/mall',name: 'mall',label: '商品管理',icon: 'video-play',url: 'Mall'},{path: '/user',name: 'user',label: '用户管理',icon: 'user',url: 'User'},{path: 'other',label: '其他',icon: 'location',children: [{path: '/page1',name: 'page1',label: '页面1',icon: 'setting',url: 'Page1'},{path: '/page2',name: 'page2',label: '页面2',icon: 'setting',url: 'Page2'}]}
])const noChildren = computed(() => listMenu.value.filter(item => !item.children))
const hasChildren = computed(() => listMenu.value.filter(item => item.children))</script>
<style lang="less" scoped>
.icons {width: 18px;height: 18px;margin-right: 5px;
}.el-menu {border-right: none;h4 {line-height: 48px;color: #fff;text-align: center;}
}.el-aside {height: 100%;background-color: #545c64;
}
</style>CommonHeader.vue
<template><div class="header"><div class="l-content"><el-button size="small" class="icons" @click=""><component class="icons" is="menu"></component></el-button><el-breadcrumb separator="/" class="bread"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item></el-breadcrumb></div><div class="r-content"><el-dropdown><span class="el-dropdown-link"><img :src="getImageURL('user')" class="user" /><el-icon class="el-icon--right"></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item>个人中心</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div>
</template><script setup lang="ts">import { ref, computed } from 'vue'
const getImageURL = (user: any) => {return new URL(`../assets/images/${user}.jpg`, import.meta.url).href
}</script>
<!-- npm install -D less -->
<style lang="less" scoped>
.header {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 100%;background-color: #333;}.icons {width: 20px;height: 20px;}.l-content {display: flex;align-items: center;margin-left: 20px;.el-button {margin-right: 20px;}
}.r-content {.user {width: 40px;height: 40px;border-radius: 50%;}
}:deep(.bread span) {color: #fff !important;cursor: pointer !important;
}
</style>
CommonTable.vue
<template><div><el-row :gutter="20" class="home"><!-- 左侧列 --><el-col :span="8" style="margin-top:20px"><!-- 卡片card --><el-card shadow="hover"><div class="user"><img :src="getImageUrl('user')" class="user" /><div class="user-info"><p>amdin</p><p>超级管理员</p></div></div><div class="login-info"><p>上次登陆时间：2025年3月19日</p><p>上次登陆地点：长沙</p></div></el-card><el-card shadow="hover" class="user-table"><el-table :data="tableData" border><el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val"></el-table-column></el-table></el-card></el-col><!-- 右侧列 --><el-col :span="12">待开发...</el-col></el-row></div>
</template><script setup>
import { onMounted, ref } from 'vue'
// https://www.axios-http.cn/docs/intro
import axios from 'axios'
const getImageUrl = (user) => {return new URL(`../assets/images/${user}.jpg`, import.meta.url).href
}
const tableData = ref([{name: "oppo",todayBuy: 500,monthBuy: 3500,totalBuy: 22000,},{name: "vivo",todayBuy: 300,monthBuy: 2200,totalBuy: 24000,},{name: "苹果",todayBuy: 800,monthBuy: 4500,totalBuy: 65000,},{name: "小米",todayBuy: 1200,monthBuy: 6500,totalBuy: 45000,},{name: "三星",todayBuy: 300,monthBuy: 2000,totalBuy: 34000,},{name: "魅族",todayBuy: 350,monthBuy: 3000,totalBuy: 22000,},
])const tableLabel = ref({name: "课程",todayBuy: "今日购买",monthBuy: "本月购买",totalBuy: "总购买",
})</script><style lang="less" scoped>
.home {height: 100%;overflow: hidden;background-color: #fff;.user {display: flex;align-items: center;border-bottom: 1px solid #ccc;margin-bottom: 20px;img {width: 150px;height: 150px;border-radius: 50%;margin-right: 40px;}.user-info {p {line-height: 40px;}.user-info-p {color: #999;}.user-info-admin {font-size: 35px}}}.login-info {p {line-height: 30px;font-size: 14px;color: #999;span {color: #666;margin-left: 60px;}}}.user-table {margin-top: 20px;}
}
</style>
