@yyp92-cli/template-vue-pc 1.2.0

package/template/src/components/layout-horizontal/header-info/index.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="header-info">
+        <div class="operation">
+            <span>
+                <el-tooltip
+                    content="切换主题"
+                >
+                    <el-switch
+                        v-model="theme"
+                        inactive-action-icon="Sunny"
+                        active-action-icon="Moon"
+                    />
+                </el-tooltip>
+            </span>
+
+            <span>
+                <el-tooltip
+                    content="全屏"
+                >
+                    <el-button
+                        size="small"
+                        icon="FullScreen"
+                        circle
+                        @click="handleFullScreen"
+                    ></el-button>
+                </el-tooltip>
+            </span>
+        </div>
+
+        <div class="info">
+            <el-dropdown
+                :hide-on-click="false"
+            >
+                <span class="user-info">
+                    <el-avatar
+                        :size="30"
+                        src="https://upload.jianshu.io/users/upload_avatars/1102036/c3628b478f06.jpeg"
+                    />
+
+                    <span class="name">{{ userInfo.name }}</span>
+                </span>
+
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item
+                            @click="handleExitClick"
+                        >
+                            <el-icon>
+                                <CircleCheck />
+                            </el-icon>
+
+                            <span>退出系统</span>
+                        </el-dropdown-item>
+
+                        <el-dropdown-item divided>
+                            <el-icon>
+                                <InfoFilled />
+                            </el-icon>
+
+                            <span>个人信息</span>
+                        </el-dropdown-item>
+
+                        <el-dropdown-item>
+                            <el-icon>
+                                <Lock />
+                            </el-icon>
+
+                            <span>修改密码</span>
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </div>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="HeaderInfo"
+>
+    import {ref, watch} from 'vue'
+    import { useRouter } from 'vue-router'
+    import { LOGIN_TOKEN, USER_INFO, USER_MENUS } from '@/global/constants'
+    import { localCache } from '@/utils/cache'
+    import useLoginStore from '@/store/login'
+    import {changeTheme} from '@/utils'
+
+    const router = useRouter()
+    const userStore = useLoginStore()
+    const userInfo = userStore.userInfo
+
+    const theme = ref(false)
+
+    const handleExitClick = () => {
+        localCache.removeCache(LOGIN_TOKEN)
+        localCache.removeCache(USER_INFO)
+        localCache.removeCache(USER_MENUS)
+
+        router.push('/login')
+    }
+
+    const handleFullScreen = () => {
+        // dom对象的一个属性：可以用来判断当前是不是全屏模式
+        // 全屏：true， 不是全屏：false
+        const full = document.fullscreenElement
+
+        if (!full) {
+            document.documentElement.requestFullscreen()
+        }
+        else {
+            document.exitFullscreen()
+        }
+    }
+
+    watch(theme, (newValue) => {
+        changeTheme(newValue)
+        console.log('newValue', newValue)
+    })
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .header-info {
+        margin-left: 20px;
+        width: 200px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+    }
+
+    .operation {
+        display: flex;
+        margin-right: 10px;
+
+        & > span {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 12px;
+            cursor: pointer;
+
+            i {
+                font-size: 20px;
+            }
+
+            .dot {
+                position: absolute;
+                top: 0px;
+                right: -5px;
+                z-index: 10;
+                width: 6px;
+                height: 6px;
+                background: red;
+                border-radius: 100%;
+            }
+        }
+    }
+
+    .info {
+        .user-info {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+
+            .name {
+                margin-left: 5px;
+                color: var(--text-color);
+            }
+        }
+
+        :global(.el-dropdown-menu__item) {
+            line-height: 36px !important;
+            padding: 6px 22px;
+        }
+    }
+
+    :deep(.el-switch__action) {
+        background-color: transparent !important;
+        color: var(--primary-text-color) !important;
+    }
+</style>

package/template/src/components/layout-horizontal/index.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="layout-container">
+        <template v-if="route.meta.showFullScreen">
+            <router-view></router-view>
+        </template>
+
+        <el-container
+            class="main-inner"
+            v-else
+        >
+            <el-header
+                height="50px"
+            >
+                <MainHeader />
+            </el-header>
+
+            <el-main>
+                <div class="content">
+                    <router-view></router-view>
+                </div>
+            </el-main>
+        </el-container>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Layout"
+>
+    import { useRoute } from 'vue-router'
+    import MainHeader from './main-header/index.vue'
+
+    const route = useRoute()
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .layout-container,
+    .main-inner {
+        width: 100%;
+        height: 100%;
+
+        .el-header {
+            --el-header-padding: 0;
+            border-bottom: 1px solid var(--border-color-base);
+        }
+
+        .el-main {
+            --el-main-padding: 16px;
+        }
+    }
+</style>

package/template/src/components/layout-horizontal/main-header/index.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="main-header">
+        <div class="left">
+            <div class="logo">
+                <img
+                    class="img"
+                    src="@/assets/img/logo.svg"
+                    alt=""
+                />
+
+                <h2
+                    class="title"
+                >后台管理系统</h2>
+            </div>
+        </div>
+
+        <div class="right">
+            <MainMenu /> 
+
+            <HeaderInfo />
+        </div>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="MainHeader"
+>
+    import HeaderInfo from '../header-info/index.vue'
+    import MainMenu from '../main-menu/index.vue'
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .main-header {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 14px;
+        line-height: 20px;
+        overflow: hidden;
+
+        .left,
+        .right {
+            display: flex;
+            align-items: center;
+        }
+
+        .left {
+            width: 180px;
+            flex-shrink: 0;
+
+            .logo {
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+                height: 50px;
+                padding: 12px 10px 8px 10px;
+                overflow: hidden;
+
+                .img {
+                    height: 100%;
+                    margin: 0 10px;
+                }
+
+                .title {
+                    font-size: 16px;
+                    font-weight: 700;
+                    color: var(--text-color);
+                    white-space: nowrap;
+                }
+            }
+        }
+
+        .right {
+            flex: 1;
+            justify-content: space-between;
+        }
+    }
+</style>

package/template/src/components/layout-horizontal/main-menu/index.vue

@@ -0,0 +1,135 @@
+<template>
+    <el-scrollbar
+        class="main-menu"
+        :height="48"
+    >
+        <el-menu
+            :default-active="defaultActive"
+            mode="horizontal"
+            :ellipsis="false"
+        >
+            <template
+                v-for="item in userMenus"
+                :key="item.path"
+            >
+                <el-sub-menu
+                    :index="item.path"
+                    v-if="item.children"
+                >
+                    <template #title>
+                        <el-icon>
+                            <component :is="item.icon.split('-icon-')[1]" />
+                        </el-icon>
+
+                        <span>{{ item.title }}</span>
+                    </template>
+
+                    <template
+                        v-for="subItem in item.children"
+                        :key="subItem.path"
+                    >
+                        <el-menu-item
+                            :index="subItem.path"
+                            @click="handleItemClick(subItem)"
+                        >{{ subItem.title }}</el-menu-item>
+                    </template>
+                </el-sub-menu>
+
+                <el-menu-item
+                    v-else-if="!item.children && !item.hideMenu"
+                    :index="item.path"
+                    @click="handleItemClick(item)"
+                >
+                    <template #title>
+                        <el-icon>
+                            <component :is="item.icon.split('-icon-')[1]" />
+                        </el-icon>
+
+                        <span>{{ item.title }}</span>
+                    </template>
+                </el-menu-item>
+            </template>
+        </el-menu>
+    </el-scrollbar>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="MainMenu"
+>
+    import { useRoute, useRouter } from 'vue-router'
+    import { computed } from 'vue'
+    import useLoginStore from '@/store/login'
+    import { mapPathToMenu } from '@/utils/map-menus'
+
+    const router = useRouter()
+    // 1. 获取动态菜单
+    const loginStore = useLoginStore()
+    const userMenus = loginStore.userMenus
+
+    const handleItemClick = (item: any) => {
+        const url = item.path
+        router.push(url)
+    }
+
+    // menu 的默认菜单
+    const route = useRoute()
+    
+    const defaultActive = computed(() => {
+        const pathMenu = mapPathToMenu(route.path, userMenus)
+        return pathMenu?.path
+    })
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .main-menu {
+        width: 0;
+        flex: 1;
+        background: var(--bg-white-color);
+        overflow-y: hidden;
+        overflow-x: auto;
+    }
+
+    .el-menu {
+        --el-menu-horizontal-height: 48px;
+        --el-menu-item-height: 48px;
+        border-right: none;
+        background: var(--bg-white-color);
+    }
+
+    .el-menu--horizontal.el-menu {
+        border-bottom: none !important;
+    }
+
+    .el-sub-menu,
+    .el-popper {
+        --el-menu-text-color: var(--text-color);
+        --el-menu-hover-bg-color: var(--bg-grey-color);
+
+        .el-menu-item {
+            padding-left: 50px !important;
+        }
+
+        .el-menu-item.is-active {
+            color: var(--primary-text-color);
+            background-color: var(--primary-color);
+        }
+    }
+
+    .el-menu-item {
+        --el-menu-text-color: var(--text-color);
+        background-color: var(--bg-white-color);
+
+        &:hover {
+            background-color: var(--bg-grey-color);
+        }
+    }
+
+    /* :deep(.el-scrollbar__bar.is-vertical) {
+        display: none;
+    } */
+</style>

package/template/src/global/constants.ts

@@ -0,0 +1,4 @@
+export const LOGIN_TOKEN = 'login/token'
+export const USER_INFO = 'userInfo'
+export const USER_MENUS = 'userMenus'
+export const PERMISSION = 'permission'

package/template/src/global/register-icons.ts

@@ -0,0 +1,10 @@
+import type {App} from 'vue'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+function registerIcons(app: App<Element>) {
+    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+        app.component(key, component)
+    }      
+}
+
+export default registerIcons

package/template/src/main.ts

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import router from '@/router'
+import store from '@/store'
+import App from './App.vue'
+import registerIcons from './global/register-icons'
+
+import 'normalize.css'
+import './styles/index.scss'
+
+const app = createApp(App)
+
+// 注册图标全局组件
+app.use(registerIcons)
+app.use(store)
+app.use(router)
+app.mount('#app')

package/template/src/mock/index.ts

@@ -0,0 +1,8 @@
+export * from './login'
+export * from './userInfoMock'
+export * from './userMenus'
+export * from './userList'
+export * from './userListDelete'
+export * from './userDepartmentList'
+export * from './userRoleList'
+export * from './userMenuList'

package/template/src/mock/login.ts

@@ -0,0 +1,5 @@
+export const loginData = {
+    "id": 1,
+    "name": "coderwhy",
+    "token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwibmFtZSI6ImNvZGVyd2h5Iiwicm9sZSI6eyJpZCI6MSwibmFtZSI6Iui2hee6p-euoeeQhuWRmCJ9LCJpYXQiOjE3NTQ1NTM2MDgsImV4cCI6MTc1NzE0NTYwOH0.mN_-Rob5Wz0TZ7Q95Ak9SVetGragcAH_xLnIBE1n4OE2ZjwPqldYfJLp8GGwJYkZBYXx-W8LaNSvB3WID3XaOECCykg0bdo-4q6Lktnf8_qPUCgt3QMzF2XNorNSsZXhmTL3-yoXF8ywYvDOaEl2tQC4YHI2E3UKxkj3Ss1oeWI"
+}

package/template/src/mock/userDepartmentList.ts

@@ -0,0 +1,85 @@
+export const userDepartmentList = {
+    "list": [
+        {
+            "id": 8401,
+            "name": "测试开发",
+            "parentId": 8384,
+            "createAt": "2025-08-27T07:37:17.000Z",
+            "updateAt": "2025-08-27T08:34:49.000Z",
+            "leader": "小李！！！"
+        },
+        {
+            "id": 8400,
+            "name": "测试部门",
+            "parentId": 8384,
+            "createAt": "2025-08-27T07:26:12.000Z",
+            "updateAt": "2025-08-27T07:26:12.000Z",
+            "leader": "开发部"
+        },
+        {
+            "id": 8384,
+            "name": "IT部门",
+            "parentId": 2,
+            "createAt": "2025-08-22T10:34:59.000Z",
+            "updateAt": "2025-08-27T07:24:51.000Z",
+            "leader": "张头"
+        },
+        {
+            "id": 8379,
+            "name": "每以啊啊",
+            "parentId": 1,
+            "createAt": "2025-08-21T06:38:47.000Z",
+            "updateAt": "2025-08-24T14:51:27.000Z",
+            "leader": "aaa"
+        },
+        {
+            "id": 8376,
+            "name": "cba",
+            "parentId": 5,
+            "createAt": "2025-08-21T06:08:15.000Z",
+            "updateAt": "2025-08-21T06:08:15.000Z",
+            "leader": "cba"
+        },
+        {
+            "id": 8374,
+            "name": "学术部",
+            "parentId": 5,
+            "createAt": "2025-08-21T03:51:04.000Z",
+            "updateAt": "2025-08-21T04:42:36.000Z",
+            "leader": "杨景媛"
+        },
+        {
+            "id": 8371,
+            "name": "医学部",
+            "parentId": 1,
+            "createAt": "2025-08-20T05:49:46.000Z",
+            "updateAt": "2025-08-22T10:24:21.000Z",
+            "leader": "董袭颖"
+        },
+        {
+            "id": 5,
+            "name": "人事部",
+            "parentId": 1,
+            "createAt": "2021-01-02T10:04:02.000Z",
+            "updateAt": "2021-05-02T07:33:08.000Z",
+            "leader": "lily"
+        },
+        {
+            "id": 4,
+            "name": "客服部",
+            "parentId": 2,
+            "createAt": "2021-01-02T10:04:02.000Z",
+            "updateAt": "2021-08-03T11:14:32.000Z",
+            "leader": "lily"
+        },
+        {
+            "id": 3,
+            "name": "运营部",
+            "parentId": 1,
+            "createAt": "2021-01-02T10:03:42.000Z",
+            "updateAt": "2021-01-05T08:25:52.000Z",
+            "leader": "lucy"
+        }
+    ],
+    "totalCount": 13
+}

package/template/src/mock/userInfoMock.ts

@@ -0,0 +1,24 @@
+export const userInfoMock = {
+    "id": 1,
+    "name": "coderwhy",
+    "realname": "coderwhy",
+    "cellphone": 18812345678,
+    "enable": 1,
+    "createAt": "2021-01-02T10:20:26.000Z",
+    "updateAt": "2021-01-03T04:50:13.000Z",
+    "role": {
+        "id": 1,
+        "name": "超级管理员",
+        "intro": "所有权限",
+        "createAt": "2021-01-02T10:01:52.000Z",
+        "updateAt": "2021-01-02T10:01:52.000Z"
+    },
+    "department": {
+        "id": 1,
+        "name": "总裁办",
+        "parentId": null,
+        "createAt": "2021-01-02T10:03:09.000Z",
+        "updateAt": "2021-01-05T08:25:46.000Z",
+        "leader": "coderwhy"
+    }
+}