@yyp92-cli/template-vue-pc 1.2.0

package/template/src/utils/map-menus.ts

@@ -0,0 +1,174 @@
+import {routes} from '@/router/routes'
+import useLoginStore from "@/store/login"
+
+export let localRoutes: any[] = []
+
+export function mapMenusToRoutes() {
+    const {permissions} = useLoginStore()
+    const newRoutes: any = []
+    const newLocalRoutes: any = [];
+
+    (routes as any)[0].children.forEach((group: any) => {
+        const {
+            path,
+            name,
+            meta,
+            children = []
+        } = group ?? {}
+        const {
+            title,
+            hideMenu,
+            icon,
+            showFullScreen
+        } = meta ?? {}
+        newLocalRoutes.push(path)
+
+        if (!hideMenu && permissions.includes(path)) {
+            const newChildren:any = []
+            children.forEach((item: any) => {
+                if (permissions.includes(item.path) && !item.meta.hideMenu) {
+                    newChildren.push({
+                        path: item.path,
+                        name: item.name,
+                        title: item.meta.title
+                    })
+                }
+                newLocalRoutes.push(item.path)
+            })
+
+            newRoutes.push({
+                path,
+                name,
+                title,
+                icon,
+                showFullScreen: !!showFullScreen,
+                children: newChildren?.length ? newChildren : null
+            })
+        }
+        else {
+            const list = children.map((item: any) => item.path)
+            newLocalRoutes.push(...list)
+        }
+    })
+
+    localRoutes = newLocalRoutes
+
+    return newRoutes
+}
+
+// * 获取菜单的重定向
+export const getMenusRedirect = (menus: any[], targetUrl: string) => {
+    let url =  ''
+
+    menus.forEach((item: any) => {
+        if (item.path === targetUrl && item?.children?.length) {
+            url =  item.children[0].path
+        }
+    })
+
+    return url
+}
+
+// * / 重定向
+export let getFirstMenu = (menus: any[]) => {
+    const firstItem = menus[0]
+    if (!firstItem.children.length) {
+        return firstItem.path
+    }
+    
+    return firstItem.children[0].path
+}
+
+/**
+ * 根据路径去匹配需要显示的菜单
+ * @param path 需要匹配的路径
+ * @param userMenus 所有的菜单
+ */
+export function mapPathToMenu(path: string, userMenus: any[]) {
+    for (const menu of userMenus) {
+        if (menu?.children) {
+            for (const submenu of menu.children) {
+                if (submenu.path === path) {
+                    return submenu
+                }
+            }
+        }
+    }
+}
+
+/**
+ * 根据路径去匹配需要显示的菜单, 生成面包屑
+ * @param path 需要匹配的路径
+ * @param userMenus 所有的菜单
+ */
+interface Breadcrumbs {
+    name: string
+    path?: string
+}
+export function mapPathToBreadcrumbs(path: string, userMenus: any[]) {
+    const breadcrumbs: Breadcrumbs[] = []
+
+    for (const menu of userMenus) {
+        if (menu?.children) {
+            for (const submenu of menu.children) {
+                if (submenu.path === path) {
+                    breadcrumbs.push({
+                        name: menu.title,
+                        path: menu.path
+                    })
+                    breadcrumbs.push({
+                        name: submenu.title,
+                        path: submenu.path
+                    })
+                }
+            }
+        }
+    }
+
+    return breadcrumbs
+}
+
+/**
+ * 菜单映射到 id 的列表
+ * @param menulist 
+ */
+export function mapMenulistToIds(menulist: any[]) {
+    const ids: number[] = []
+
+    function recurseGetId(menus: any[]) {
+        for (const item of menus) {
+            if (item?.children) {
+                recurseGetId(item.children)
+            }
+            else {
+                ids.push(item.id)
+            }
+        }
+    }
+    recurseGetId(menulist)
+
+    return ids
+}
+
+/**
+ * 从菜单映射到按钮的权限
+ * @param menuList 菜单列表
+ * @returns 权限的数组(字符串数组)
+ */
+export function mapMenusToPermissions(menuList: any[]) {
+    const permissions: string[] = []
+
+    function recurseGetPermission(menus: any[]) {
+        for (const item of menus) {
+            if (item.type === 3) {
+                permissions.push(item.permission)
+            }
+            else {
+                recurseGetPermission(item?.children ?? [])
+            }
+        }
+    }
+    recurseGetPermission(menuList)
+
+    return permissions
+}

package/template/src/views/403/index.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="not-found-wraper">
+        <el-result
+            icon="error"
+            title="403"
+            sub-title="你没有权限访问该页面！"
+        ></el-result>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="NoAuth"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+</style>

package/template/src/views/login/component/login-panel.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="login-panel">
+        <h1 class="title">后台管理系统</h1>
+
+        <div class="tabs">
+            <el-tabs
+                type="border-card"
+                stretch
+                v-model="activeName"
+            >
+                <el-tab-pane
+                    name="account"
+                >
+                    <template #label>
+                        <div class="label">
+                            <el-icon>
+                                <UserFilled />
+                            </el-icon>
+
+                            <span class="text">账号登录</span>
+                        </div>
+                    </template>
+
+                    <PanelAccount ref="accountRef"/>
+                </el-tab-pane>
+
+                <el-tab-pane
+                    name="phone"
+                >
+                    <template #label>
+                        <div class="label">
+                            <el-icon>
+                                <Cellphone />
+                            </el-icon>
+
+                            <span class="text">手机登录</span>
+                        </div>
+                    </template>
+
+                    <PanelPhone />
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+
+        <div class="controls">
+            <el-checkbox
+                v-model="isRememberPassword"
+                label="记住密码"
+                size="large"
+            />
+
+            <el-link
+                type="primary"
+            >忘记密码</el-link>
+        </div>
+
+        <el-button
+            class="login-btn"
+            type="primary"
+            size="large"
+            @click="handleLoginAction"
+            :loading="activeName === 'account' ? accountRef?.loginLoading : false"
+        >立即登录</el-button>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="LoginPanel"
+>
+    import {ref, watch} from 'vue'
+    import PanelAccount from './panel-account.vue'
+    import PanelPhone from './panel-phone.vue'
+    import { localCache } from '@/utils/cache'
+
+    const CHACHE_IS_REMEMBER_PASSWORD = 'isRememberPassword'
+    const activeName = ref('account')
+    const isRememberPassword = ref(localCache.getCache(CHACHE_IS_REMEMBER_PASSWORD) ?? false)
+    const accountRef = ref<InstanceType<typeof PanelAccount>>()
+
+    // 保留记住密码的状态
+    watch(isRememberPassword, (value) => {
+        localCache.setCache(CHACHE_IS_REMEMBER_PASSWORD, value)
+    })
+
+    const handleLoginAction = () => {
+        if (activeName.value === 'account') {
+            accountRef.value?.loginAction(isRememberPassword.value)
+
+            return
+        }
+
+        console.log('用户进行手机登录')
+    }
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    h1 {
+        margin: 0;
+    }
+
+    .login-panel {
+        width: 330px;
+        background: #fff;
+        border-radius: 8px;
+        padding: 16px 24px;
+    }
+
+    .title {
+        text-align: center;
+        margin-bottom: 15px;
+    }
+
+    .label {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .text {
+            margin-left: 5px;
+        }
+    }
+
+    .controls {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .login-btn {
+        width: 100%;
+        margin-top: 10px;
+    }
+</style>

package/template/src/views/login/component/panel-account.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="panel-account">
+        <el-form
+            label-width="60px"
+            size="large"
+            :model="account"
+            :rules="accountRules"
+            ref="formRef"
+        >
+            <el-form-item
+                label="账号"
+                prop="name"
+            >
+                <el-input
+                    v-model="account.name"
+                />
+            </el-form-item>
+
+            <el-form-item
+                label="密码"
+                prop="password"
+            >
+                <el-input
+                    show-password
+                    v-model="account.password"
+                />
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="PanelAccount"
+>
+    import {reactive, ref} from 'vue'
+    import {ElMessage} from 'element-plus'
+    import {useRouter, useRoute} from 'vue-router'
+    import type {FormRules, ElForm} from 'element-plus'
+    import useLoginStore from '@/store/login'
+    import type {IAccount} from '@/types'
+    import { localCache } from '@/utils/cache'
+
+    const CHACHE_NAME = 'name'
+    const CHACHE_PASSWORD = 'password'
+
+    const router = useRouter()
+    const route = useRoute()
+    const loginStore = useLoginStore()
+    const account = reactive<IAccount>({
+        name: localCache.getCache(CHACHE_NAME) ?? '',
+        password: localCache.getCache(CHACHE_PASSWORD) ?? ''
+    })
+    const loginLoading = ref(false)
+    const formRef = ref<InstanceType<typeof ElForm>>()
+    
+
+    // 检验规则
+    const accountRules: FormRules = {
+        name: [
+            {
+                required: true,
+                message: '必须输入账号信息',
+                trigger: 'blur'
+            },
+            {
+                pattern: /^[a-zA-Z0-9]{6,20}$/,
+                message: '必须6~20位数字和字母组成',
+                trigger: 'blur'
+            }
+        ],
+        password: [
+            {
+                required: true,
+                message: '必须输入密码信息',
+                trigger: 'blur'
+            },
+            {
+                pattern: /^[a-zA-Z0-9]{3,}$/,
+                message: '必须3位以上数字和字母组成',
+                trigger: 'blur'
+            }
+        ]
+    }
+
+    function loginAction(isRememberPassword: boolean) {
+        formRef.value?.validate((valid) => {
+            if (valid) {
+                const name = account.name
+                const password = account.password
+
+                loginLoading.value = true
+                loginStore.loginAccountAction({
+                    name,
+                    password
+                })
+                    .then((res) => {
+                        // 记住密码
+                        if (isRememberPassword) {
+                            localCache.setCache(CHACHE_NAME, name)
+                            localCache.setCache(CHACHE_PASSWORD, password)
+                        }
+                        else {
+                            localCache.removeCache(CHACHE_NAME)
+                            localCache.removeCache(CHACHE_PASSWORD)
+                        }
+
+                        console.log('-----res', res)
+
+                        if (res === 'ok') {
+                            // 判断登录的时候，路由路径当中是否有query参数，如果有就往query参数跳转，没有跳转到首页
+                            const redirect: any = route.query.redirect
+                            router.push({path: redirect || '/'})
+                        }
+                    })
+                    .finally(() => {
+                        loginLoading.value = false
+                    })
+            }
+            else {
+                ElMessage.error('请您输入正确的格式后再操作')
+            }
+        })
+    }
+
+    defineExpose({
+        loginAction,
+        loginLoading
+    })
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .panel-account {}
+</style>

package/template/src/views/login/component/panel-phone.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="panel-phone">
+        <el-form
+            label-width="60px"
+            size="large"
+            ref="formRef"
+        >
+            <el-form-item
+                label="手机号"
+                prop=""
+            >
+                <el-input /> 
+            </el-form-item>
+
+            <el-form-item
+                label="验证码"
+                prop="password"
+            >
+                <div class="verify-code">
+                    <el-input
+                        show-password
+                    />
+                    <el-button
+                        class="get-btn"
+                        type="primary"
+                    >
+                        获取验证码
+                    </el-button>
+                </div>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="PanelPhone"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .panel-phone {
+        .verify-code {
+            display: flex;
+            align-items: center;
+
+            .get-btn {
+                margin-left: 8px;
+            }
+        }
+    }
+</style>

package/template/src/views/login/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="login-wraper">
+        <LoginPanel />
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Login"
+>
+    import LoginPanel from './component/login-panel.vue'
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .login-wraper {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: url('../../assets/img/login-bg.jpg') center center no-repeat;
+        background-size: 100% 100%;
+    }
+</style>

package/template/src/views/main/analysis/dashboard/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="dashboard">
+        <h2>dashboard</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Dashboard"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .dashboard {}
+</style>

package/template/src/views/main/analysis/overview/index.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="overview">
+        <h2>overview</h2>
+
+        <div @click="handleJump">跳转详情</div>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Overview"
+>
+    import router from '@/router'
+    function handleJump() {
+        router.push('/detail')
+    }
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .overview {}
+</style>

package/template/src/views/main/detail/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="detail">
+        <h2>detail</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Detail"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .detail {}
+</style>