前言

公司裁员了，自己也正式进入休息阶段，对于这几天的休息来看，我只能说不上班是真的爽，但是这种爽中多少带点焦虑。最近听到裁员的消息很多很多，大家也都开始利用这个时间，要么放松一下，要么整理思绪......。

对我来说，我这个人闲不住，总是想找点事情做，前几天半夜焦虑的睡不着，我躺床就在想，如果以后我挂掉了会去哪？想了很多很多，最后想到了地府是哪样的？他们之间是如何传递信息的？如果人力传送会不会累？如果千里传音会不会口渴？如果我挂掉了，我要是给阎王写个地府管理系统是不是能让我重新投胎成人？写个系统让他们更方便不是更好吗，哎！我的想法就此产生。正好还可以利用这个，复习一下vue3的一些知识点。

一、构思

1、需要搞清楚用这个系统的有哪些用户？
2、系统中需要有哪些功能？
3、每个用户角色该负责哪些工作？
4、一个鬼魂从开始到最后轮回的过程？
5、地府需要掌管哪些鬼魂？
...

二、方案

vue3 + elementPlus + vite + ts + pinia + axios + echarts

1、暗黑模式

直接在html上面加上class=dark，然后引入样式就行了，地府嘛就是黑的，要符合场景。还有就是需要把组件库的英文改成中文，地府都说汉语的，就不要整英格丽西了。

2、路由配置

路由部分我分为两个部分，一个是工作台之外（登录、404、无权限等）的和工作台内的。

内部页面

这里我是利用meta的配置项，来决定当前这个模块的一级和二级展示，还会根据enableRoles来判断当前登录角色是否有此模块的权限。

比如我用地藏王的账号登录，就会有全部模块的权限，而我换成钟馗的账号去登录，那工作台就只有生死簿，勾魂等权限。

我们还要利用路由守卫来进行判断是否有权限，或者是否登录了

3、Store配置

存储token和用户信息

4、权限配置

我们还需要管理员的信息配置，这里我是直接写死的，登录的时候直接用username + userpass登录即可

4、公共方法

其中包括退出登录和关于session的操作

import { ElMessage } from "element-plus"
import VueRouter from '@/router/index'
// 退出登录
export const logOutLogin = () => {
  const router = VueRouter
  removeSession(['token', 'userinfo'])
  ElMessage({type: 'success', message: '退出登录成功', duration: 800})
  setTimeout(() => {
    router.push('/login')
  }, 500);
}

// 保存session
export const saveSession = (obj: any) => {
  if(JSON.stringify(obj) !== '{}' && Object.prototype.toString.call(obj) === '[object Object]') {
    for(let key in obj) {
      sessionStorage.setItem(key, obj[key]);
    }
  }
}

// 清除session
export const removeSession = (arr: any[]) => {
  if(arr.length) {
    arr.forEach(item => {
      sessionStorage.removeItem(item);
    })
  }
}

// 获取session
export const getSession = (arr: any[]) => {
  let obj: any = {}
  if(arr.length) {
    arr.forEach(item => {
      const data = sessionStorage.getItem(item) || ''
      obj[item] = (data?.indexOf('{') !== -1 && data?.indexOf('}') !== -1) ? JSON.parse(data) : data
    })
  }
  return obj
}

三、实施

1、登录页

登录页做的比较简单，但是我感觉还是比较有氛围的。直接先上图

这里最有意思的是两边的蜡烛，我利用css绘制出来的，其中利用v-for循环出100个火焰，再用filter、transform、mix-blend-mode等画出火焰的感觉，最后用animation使火焰动起来。目前我写成组件了，可以改变火苗颜色和火焰大小。

登录处理

formRef.value.validate((valid: any) => {
        if(valid) {
            // 获取输入的用户名在不在管理员列表中
            const roleUser = USER_LIST.filter(item => item.username === form.userName)[0];
            // 有这个用户并且密码正确
            if(roleUser && form.userPass === roleUser.userpass) {
                const token = '==ABCD_1234=='
                ElMessage({type: 'success', message: '登录成功'})
                saveSession({token: token, userinfo: JSON.stringify(roleUser)})
                setTimeout(() => {
                  router.replace('/layout/home')    
                }, 500);
            }else{
                ElMessage({type: 'error', message: '用户名或密码有误！！！'})
            }
        }else{
            return false
        }
    })

2、工作台

工作台包含地府的基本情况展示，人的生死、地府会议、十八层地狱人数等一系列模块。

3、阴曹地府

此模块包含地府的管理员信息、死亡到轮回的过程、各个职位的信息、上下级

4、其他

其他部分功能模块都均已完成，可直接下载代码查看。

为了防止出现孙悟空划生死簿的情况出现，新增日志管理功能，并且可一键恢复数据，我就想知道孙悟空它还有啥办法。

目前部分模块缺少弹框操作，比如修改密码、查看修改信息、数据递交等，以及为了方便管理员之间的消息接受，聊天室功能，都在进一步添加中。

这些细节优化完成之后，会继续添加可视化大屏，保证数据的可观性。

结论

项目做起来很有意思，尤其是去百度查找各种各样的神话故事，最后发现神话体系是非常的庞大的，并且版本都不一样，只能慢慢收集、琢磨，采用最符合神话的神话体系。最后还是拿不准的是，酆都大帝和东岳大帝和地藏王哪个最大？或者说是一样大？我设计的是他们三个平起平坐，同样拥有最高权限。

代码写的不是太好，我感觉基本功能能跑通已经不错了，接下来就是慢慢优化，慢慢打磨了。

最后最后附上代码：

地府生死簿后台管理系统_PC_vue3: 相关技术栈： vue3 + ts + vite + elementPlus + pinia + router4 + sass + echarts (gitee.com)

谢谢观看！！！

重生之我在地府写管理系统（vue3）

前言