From 1a5849f7eb86d7e718d4cb0f99bde1f890027535 Mon Sep 17 00:00:00 2001
From: deng <dengshaojie666@163.com>
Date: Thu, 27 Jun 2024 23:57:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=89=8D=E7=AB=AF=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/src/components/SvgIcon/index.vue    |  43 ++++
 .../src/components/common/BreadCrumbs.vue     | 109 ++++++++
 .../src/components/common/BreadCrumbs.vue.bak |  77 ++++++
 .../admin/src/components/common/Editor.vue    | 238 +++++++++++++++++
 .../src/components/common/FileUpload.vue      | 137 ++++++++++
 .../admin/src/components/home/HomeCard.vue    |  60 +++++
 .../admin/src/components/home/HomeChart.vue   | 126 +++++++++
 .../admin/src/components/home/HomeComment.vue | 101 ++++++++
 .../src/components/home/HomeProgress.vue      |  55 ++++
 .../admin/src/components/index/IndexAside.vue |  56 ++++
 .../src/components/index/IndexAsideStatic.vue | 240 ++++++++++++++++++
 .../components/index/IndexAsideStatic.vue.bak |  76 ++++++
 .../src/components/index/IndexAsideSub.vue    |  51 ++++
 .../src/components/index/IndexHeader.vue      | 183 +++++++++++++
 .../src/components/index/IndexHeader.vue.bak  |  89 +++++++
 .../admin/src/components/index/IndexMain.vue  | 124 +++++++++
 16 files changed, 1765 insertions(+)
 create mode 100644 src/main/resources/admin/admin/src/components/SvgIcon/index.vue
 create mode 100644 src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue
 create mode 100644 src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue.bak
 create mode 100644 src/main/resources/admin/admin/src/components/common/Editor.vue
 create mode 100644 src/main/resources/admin/admin/src/components/common/FileUpload.vue
 create mode 100644 src/main/resources/admin/admin/src/components/home/HomeCard.vue
 create mode 100644 src/main/resources/admin/admin/src/components/home/HomeChart.vue
 create mode 100644 src/main/resources/admin/admin/src/components/home/HomeComment.vue
 create mode 100644 src/main/resources/admin/admin/src/components/home/HomeProgress.vue
 create mode 100644 src/main/resources/admin/admin/src/components/index/IndexAside.vue
 create mode 100644 src/main/resources/admin/admin/src/components/index/IndexAsideStatic.vue
 create mode 100644 src/main/resources/admin/admin/src/components/index/IndexAsideStatic.vue.bak
 create mode 100644 src/main/resources/admin/admin/src/components/index/IndexAsideSub.vue
 create mode 100644 src/main/resources/admin/admin/src/components/index/IndexHeader.vue
 create mode 100644 src/main/resources/admin/admin/src/components/index/IndexHeader.vue.bak
 create mode 100644 src/main/resources/admin/admin/src/components/index/IndexMain.vue

diff --git a/src/main/resources/admin/admin/src/components/SvgIcon/index.vue b/src/main/resources/admin/admin/src/components/SvgIcon/index.vue
new file mode 100644
index 0000000..27da76c
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/SvgIcon/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
diff --git a/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue b/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue
new file mode 100644
index 0000000..91bb61b
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue
@@ -0,0 +1,109 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="(●'◡'●)" style="height:50px;backgroundColor:rgba(79, 73, 73, 1);borderRadius:0px;padding:0px 20px 0px 20px;boxShadow:;borderWidth:2px;borderStyle:;borderColor:rgba(193, 180, 180, 0.5);">
+    <transition-group name="breadcrumb" class="box" :style="1==1?'justifyContent:flex-start;':1==2?'justifyContent:center;':'justifyContent:flex-end;'">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.name }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from 'path-to-regexp'
+import { generateTitle } from '@/utils/i18n'
+export default {
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+    this.breadcrumbStyleChange()
+  },
+  methods: {
+    generateTitle,
+    getBreadcrumb() {
+      // only show routes with meta.title
+      let route = this.$route
+      let matched = route.matched.filter(item => item.meta)
+      const first = matched[0]
+      matched = [{ path: '/index' }].concat(matched)
+
+      this.levelList = matched.filter(item => item.meta)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(path)
+    },
+    breadcrumbStyleChange(val) {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el=>{
+          el.innerText = "(●'◡'●)"
+          el.style.color = "rgba(235, 90, 170, 1)"
+        })
+        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el=>{
+          el.style.color = "rgba(196, 212, 244, 1)"
+        })
+        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el=>{
+          el.style.color = "rgba(244, 149, 32, 1)"
+        })
+
+        let str = "vertical"
+        if("vertical" === str) {
+          let headHeight = "60px"
+          headHeight = parseInt(headHeight) + 10 + 'px'
+          document.querySelectorAll('.app-breadcrumb').forEach(el=>{
+            el.style.marginTop = headHeight
+          })
+        }
+
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb {
+  display: block;
+  font-size: 14px;
+  line-height: 50px;
+
+  .box {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>
diff --git a/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue.bak b/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue.bak
new file mode 100644
index 0000000..6c3754f
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue.bak
@@ -0,0 +1,77 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.name }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from 'path-to-regexp'
+import { generateTitle } from '@/utils/i18n'
+export default {
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    generateTitle,
+    getBreadcrumb() {
+      // only show routes with meta.title
+console.log(this.$route)      
+      let matched = this.$route.matched.filter(item => item.meta)
+      const first = matched[0]
+      matched = [{ path: '/index' }].concat(matched)
+
+      this.levelList = matched.filter(item => item.meta)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(path)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>
diff --git a/src/main/resources/admin/admin/src/components/common/Editor.vue b/src/main/resources/admin/admin/src/components/common/Editor.vue
new file mode 100644
index 0000000..135ffc4
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/common/Editor.vue
@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <!-- 图片上传组件辅助-->
+    <el-upload
+      class="avatar-uploader"
+      :action="getActionUrl"
+      name="file"
+      :headers="header"
+      :show-file-list="false"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :before-upload="beforeUpload"
+    ></el-upload>
+
+    <quill-editor
+      class="editor"
+      v-model="value"
+      ref="myQuillEditor"
+      :options="editorOption"
+      @blur="onEditorBlur($event)"
+      @focus="onEditorFocus($event)"
+      @change="onEditorChange($event)"
+    ></quill-editor>
+  </div>
+</template>
+<script>
+// 工具栏配置
+const toolbarOptions = [
+  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
+  ["blockquote", "code-block"], // 引用  代码块
+  [{ header: 1 }, { header: 2 }], // 1、2 级标题
+  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
+  [{ script: "sub" }, { script: "super" }], // 上标/下标
+  [{ indent: "-1" }, { indent: "+1" }], // 缩进
+  // [{'direction': 'rtl'}],                         // 文本方向
+  [{ size: ["small", false, "large", "huge"] }], // 字体大小
+  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+  [{ font: [] }], // 字体种类
+  [{ align: [] }], // 对齐方式
+  ["clean"], // 清除文本格式
+  ["link", "image", "video"] // 链接、图片、视频
+];
+
+import { quillEditor } from "vue-quill-editor";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+
+export default {
+  props: {
+    /*编辑器的内容*/
+    value: {
+      type: String
+    },
+    action: {
+      type: String
+    },
+    /*图片大小*/
+    maxSize: {
+      type: Number,
+      default: 4000 //kb
+    }
+  },
+
+  components: {
+    quillEditor
+  },
+
+  data() {
+    return {
+      content: this.value,
+      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
+      editorOption: {
+        placeholder: "",
+        theme: "snow", // or 'bubble'
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+            // container: "#toolbar",
+            handlers: {
+              image: function(value) {
+                if (value) {
+                  // 触发input框选择图片文件
+                  document.querySelector(".avatar-uploader input").click();
+                } else {
+                  this.quill.format("image", false);
+                }
+              }
+              // link: function(value) {
+              //   if (value) {
+              //     var href = prompt('请输入url');
+              //     this.quill.format("link", href);
+              //   } else {
+              //     this.quill.format("link", false);
+              //   }
+              // },
+            }
+          }
+        }
+      },
+      // serverUrl: `${base.url}sys/storage/uploadSwiper?token=${storage.get('token')}`, // 这里写你要上传的图片服务器地址
+      header: {
+        // token: sessionStorage.token
+       'Token': this.$storage.get("Token")
+      } // 有的图片服务器要求请求头需要有token
+    };
+  },
+  computed: {
+    // 计算属性的 getter
+    getActionUrl: function() {
+      // return this.$base.url + this.action + "?token=" + this.$storage.get("token");
+      return `/${this.$base.name}/` + this.action;
+    }
+  },
+  methods: {
+    onEditorBlur() {
+      //失去焦点事件
+    },
+    onEditorFocus() {
+      //获得焦点事件
+    },
+    onEditorChange() {
+      console.log(this.value);
+      //内容改变事件
+      this.$emit("input", this.value);
+    },
+    // 富文本图片上传前
+    beforeUpload() {
+      // 显示loading动画
+      this.quillUpdateImg = true;
+    },
+
+    uploadSuccess(res, file) {
+      // res为图片服务器返回的数据
+      // 获取富文本组件实例
+      let quill = this.$refs.myQuillEditor.quill;
+      // 如果上传成功
+      if (res.code === 0) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片  res.url为服务器返回的图片地址
+        quill.insertEmbed(length, "image", this.$base.url+ "upload/" +res.file);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        this.$message.error("图片插入失败");
+      }
+      // loading动画消失
+      this.quillUpdateImg = false;
+    },
+    // 富文本图片上传失败
+    uploadError() {
+      // loading动画消失
+      this.quillUpdateImg = false;
+      this.$message.error("图片插入失败");
+    }
+  }
+};
+</script> 
+
+<style>
+.editor {
+  line-height: normal !important;
+  height: 400px;
+}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+  content: "请输入链接地址:";
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0px;
+  content: "保存";
+  padding-right: 0px;
+}
+
+.ql-snow .ql-tooltip[data-mode="video"]::before {
+  content: "请输入视频地址:";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "14px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+  content: "10px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+  content: "18px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+  content: "32px";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: "文本";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: "标题1";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: "标题2";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: "标题3";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: "标题4";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: "标题5";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: "标题6";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: "标准字体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+  content: "衬线字体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+  content: "等宽字体";
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/admin/admin/src/components/common/FileUpload.vue b/src/main/resources/admin/admin/src/components/common/FileUpload.vue
new file mode 100644
index 0000000..4aa6499
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/common/FileUpload.vue
@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <!-- 上传文件组件 -->
+    <el-upload
+      ref="upload"
+      :action="getActionUrl"
+      list-type="picture-card"
+      :multiple="multiple"
+      :limit="limit"
+      :headers="myHeaders"
+      :file-list="fileList"
+      :on-exceed="handleExceed"
+      :on-preview="handleUploadPreview"
+      :on-remove="handleRemove"
+      :on-success="handleUploadSuccess"
+      :on-error="handleUploadErr"
+      :before-upload="handleBeforeUpload"
+    >
+      <i class="el-icon-plus"></i>
+      <div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible" size="tiny" append-to-body>
+      <img width="100%" :src="dialogImageUrl" alt>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import storage from "@/utils/storage";
+import base from "@/utils/base";
+export default {
+  data() {
+    return {
+      // 查看大图
+      dialogVisible: false,
+      // 查看大图
+      dialogImageUrl: "",
+      // 组件渲染图片的数组字段，有特殊格式要求
+      fileList: [],
+      fileUrlList: [],
+      myHeaders:{}
+    };
+  },
+  props: ["tip", "action", "limit", "multiple", "fileUrls"],
+  mounted() {
+    this.init();
+    this.myHeaders= {
+      'Token':storage.get("Token")
+    }
+  },
+  watch: {
+    fileUrls: function(val, oldVal) {
+      //   console.log("new: %s, old: %s", val, oldVal);
+      this.init();
+    }
+  },
+  computed: {
+    // 计算属性的 getter
+    getActionUrl: function() {
+      // return base.url + this.action + "?token=" + storage.get("token");
+      return `/${this.$base.name}/` + this.action;
+    }
+  },
+  methods: {
+    // 初始化
+    init() {
+      //   console.log(this.fileUrls);
+      if (this.fileUrls) {
+        this.fileUrlList = this.fileUrls.split(",");
+        let fileArray = [];
+        this.fileUrlList.forEach(function(item, index) {
+          var url = item;
+          var name = index;
+          var file = {
+            name: name,
+            url: url
+          };
+          fileArray.push(file);
+        });
+        this.setFileList(fileArray);
+      }
+    },
+    handleBeforeUpload(file) {
+	
+    },
+    // 上传文件成功后执行
+    handleUploadSuccess(res, file, fileList) {
+      if (res && res.code === 0) {
+        fileList[fileList.length - 1]["url"] =
+          this.$base.url + "upload/" + file.response.file;
+        this.setFileList(fileList);
+        this.$emit("change", this.fileUrlList.join(","));
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    // 图片上传失败
+    handleUploadErr(err, file, fileList) {
+      this.$message.error("文件上传失败");
+    },
+    // 移除图片
+    handleRemove(file, fileList) {
+      this.setFileList(fileList);
+      this.$emit("change", this.fileUrlList.join(","));
+    },
+    // 查看大图
+    handleUploadPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 限制图片数量
+    handleExceed(files, fileList) {
+      this.$message.warning(`最多上传${this.limit}张图片`);
+    },
+    // 重新对fileList进行赋值
+    setFileList(fileList) {
+      var fileArray = [];
+      var fileUrlArray = [];
+      // 有些图片不是公开的，所以需要携带token信息做权限校验
+      var token = storage.get("token");
+      fileList.forEach(function(item, index) {
+        var url = item.url.split("?")[0];
+        var name = item.name;
+        var file = {
+          name: name,
+          url: url + "?token=" + token
+        };
+        fileArray.push(file);
+        fileUrlArray.push(url);
+      });
+      this.fileList = fileArray;
+      this.fileUrlList = fileUrlArray;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+</style>
diff --git a/src/main/resources/admin/admin/src/components/home/HomeCard.vue b/src/main/resources/admin/admin/src/components/home/HomeCard.vue
new file mode 100644
index 0000000..bcd8f3f
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/home/HomeCard.vue
@@ -0,0 +1,60 @@
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="header">
+      <span>{{title}}</span>
+      <span>
+        <el-tag size="small" :type="titleTag">{{titleUnit}}</el-tag>
+      </span>
+    </div>
+    <div class="content">
+      {{content}}&nbsp;&nbsp;
+      <span class="unit">{{contentUnit}}</span>
+    </div>
+    <div class="bottom">
+      <span>{{bottomTitle}}</span>
+      <span>
+        {{bottomContent}}
+        <i :class="bottomIcon"></i>
+      </span>
+    </div>
+  </el-card>
+</template>
+<script>
+export default {
+  props: [
+    "title",
+    "titleTag",
+    "titleUnit",
+    "content",
+    "contentUnit",
+    "bottomTitle",
+    "bottomContent",
+    "bottomIcon"
+  ]
+};
+</script>
+<style lang="scss" scoped>
+.box-card {
+  margin-right: 10px;
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .content {
+    font-size: 30px;
+    font-weight: bold;
+    color: #666;
+    text-align: center;
+    .unit {
+      font-size: 16px;
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/src/main/resources/admin/admin/src/components/home/HomeChart.vue b/src/main/resources/admin/admin/src/components/home/HomeChart.vue
new file mode 100644
index 0000000..b88a96b
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/home/HomeChart.vue
@@ -0,0 +1,126 @@
+<template>
+  <div id="home-chart" style="width:100%;height:400px;"></div>
+</template>
+<script>
+export default {
+  mounted() {
+    this.homeChart();
+  },
+  methods: {
+    homeChart() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(document.getElementById("home-chart"));
+      // 指定图表的配置项和数据
+      var option = {
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["访问量", "用户量", "收入"]
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月"
+          ]
+        },
+        yAxis: {
+          type: "value"
+        },
+        series: [
+          {
+            name: "访问量",
+            type: "line",
+            stack: "总量",
+            data: [
+              120,
+              132,
+              101,
+              134,
+              90,
+              230,
+              210,
+              120,
+              132,
+              101,
+              134,
+              90,
+              230
+            ]
+          },
+          {
+            name: "用户量",
+            type: "line",
+            stack: "总量",
+            data: [
+              220,
+              182,
+              191,
+              234,
+              290,
+              330,
+              310,
+              182,
+              191,
+              234,
+              290,
+              330,
+              310
+            ]
+          },
+          {
+            name: "收入",
+            type: "line",
+            stack: "总量",
+            data: [
+              150,
+              232,
+              201,
+              154,
+              190,
+              330,
+              410,
+              232,
+              201,
+              154,
+              190,
+              330,
+              410
+            ]
+          }
+        ]
+      };
+      // // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      //根据窗口的大小变动图表
+      window.onresize = function() {
+        myChart.resize();
+      };
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+#home-chart {
+  background: #ffffff;
+  padding: 20px 0;
+}
+</style>
diff --git a/src/main/resources/admin/admin/src/components/home/HomeComment.vue b/src/main/resources/admin/admin/src/components/home/HomeComment.vue
new file mode 100644
index 0000000..ea5c08c
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/home/HomeComment.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="home-comment">
+    <div class="title">用户留言</div>
+    <div class="comment-list">
+      <div v-for="(item,index) in list"  v-bind:key="index" class="comment-item">
+        <div class="user-content">
+          <el-image
+            class="avator"
+            :src="item.avator"
+          ></el-image>
+          <span class="user">{{item.name}}</span>
+        </div>
+        <div class="comment">{{item.content}}</div>
+        <div class="create-time">{{item.createTime}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          name: "MaskLin",
+          avator:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          content:
+            "你以为只要长得漂亮就有男生喜欢？你以为只要有了钱漂亮妹子就自己贴上来了？你以为学霸就能找到好工作？我告诉你吧，这些都是真的！",
+          createTime: "5月02日 00:00"
+        },
+        {
+          name: "MaskLin",
+          avator:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          content: "作者太帅了",
+          createTime: "5月04日 00:00"
+        },
+        {
+          name: "MaskLin",
+          avator:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          content: "作者太帅了",
+          createTime: "5月04日 00:00"
+        },
+        {
+          name: "MaskLin",
+          avator: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          content: "作者太帅了",
+          createTime: "5月04日 00:00"
+        }
+      ]
+    };
+  }
+};
+</script>
+<style lang="scss" scoped>
+.home-comment {
+  background: #ffffff;
+  .title {
+    font-size: 18px;
+    color: #666;
+    font-weight: bold;
+    padding: 10px;
+    border-bottom: 1px solid #eeeeee;
+  }
+  .comment-list {
+    padding: 10px;
+    .comment-item {
+      padding: 10px;
+      border-bottom: 1px solid #eeeeee;
+      .user-content {
+        display: flex;
+        align-items: center;
+        .user {
+          font-size: 18px;
+          color: #666;
+          font-weight: bold;
+          line-height: 50px;
+          margin-left: 10px;
+        }
+        .avator {
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+        }
+      }
+      .comment {
+        margin-top: 10px;
+        font-size: 14px;
+        color: #888888;
+      }
+      .create-time {
+        margin-top: 15px;
+        font-size: 14px;
+        color: #888888;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/main/resources/admin/admin/src/components/home/HomeProgress.vue b/src/main/resources/admin/admin/src/components/home/HomeProgress.vue
new file mode 100644
index 0000000..46a96c1
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/home/HomeProgress.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="home-progress">
+    <div class="title">月访问量</div>
+    <div class="tip">同上期增长</div>
+    <el-progress
+      class="progress"
+      :text-inside="true"
+      :stroke-width="24"
+      :percentage="20"
+      status="success"
+    ></el-progress>
+    <div class="title">月用户量</div>
+    <div class="tip">同上期增长</div>
+    <el-progress
+      class="progress"
+      :text-inside="true"
+      :stroke-width="24"
+      :percentage="50"
+      status="success"
+    ></el-progress>
+    <div class="title">月收入</div>
+    <div class="tip">同上期减少</div>
+    <el-progress
+      class="progress"
+      :text-inside="true"
+      :stroke-width="24"
+      :percentage="28"
+      status="exception"
+    ></el-progress>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="scss">
+.home-progress {
+  background: #ffffff;
+  height: 400px;
+  padding: 20px;
+  .title {
+    color: #666666;
+    font-weight: bold;
+    font-size: 20px;
+    margin-top: 10px;
+  }
+  .tip {
+    color: #888888;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+  .progress {
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/src/main/resources/admin/admin/src/components/index/IndexAside.vue b/src/main/resources/admin/admin/src/components/index/IndexAside.vue
new file mode 100644
index 0000000..cb9a803
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/index/IndexAside.vue
@@ -0,0 +1,56 @@
+<template>
+  <el-aside class="index-aside" width="200px">
+    <div class="index-aside-inner">
+      <el-menu default-active="1">
+        <el-menu-item @click="menuHandler('/')" index="1">
+          <!-- <i class="el-icon-s-home"></i> -->
+          首页
+        </el-menu-item>
+        <sub-menu
+          v-for="menu in menuList"
+          :key="menu.menuId"
+          :menu="menu"
+          :dynamicMenuRoutes="dynamicMenuRoutes"
+        ></sub-menu>
+      </el-menu>
+    </div>
+  </el-aside>
+</template>
+<script>
+import SubMenu from "@/components/index/IndexAsideSub";
+export default {
+  data() {
+    return {
+      menuList: [],
+      dynamicMenuRoutes: []
+    };
+  },
+  components: {
+    SubMenu
+  },
+  mounted() {
+    // 获取动态菜单数据并且渲染
+    this.menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]");
+    this.dynamicMenuRoutes = JSON.parse(
+      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
+    );
+  },
+  methods: {
+    menuHandler(path) {
+      this.$router.push({ path: path });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.index-aside {
+  margin-top: 80px;
+  overflow: hidden;
+  .index-aside-inner {
+    width: 217px;
+    height: 100%;
+    overflow-y: scroll;
+  }
+}
+</style>
+
diff --git a/src/main/resources/admin/admin/src/components/index/IndexAsideStatic.vue b/src/main/resources/admin/admin/src/components/index/IndexAsideStatic.vue
new file mode 100644
index 0000000..b8b535d
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/index/IndexAsideStatic.vue
@@ -0,0 +1,240 @@
+<template>
+  <el-aside class="index-aside" height="100vh" width="210px">
+    <div class="index-aside-inner menulist" style="height:100%">
+      <div v-for="item in menuList" :key="item.roleName" v-if="role==item.roleName" class="menulist-item" style="height:100%;broder:0;background-color:#988181">
+        <div class="menulistImg" style="backgroundColor:#ff0000;padding:25px 0" v-if="false && menulistStyle == 'vertical'">
+          <el-image v-if="'http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg'" src="http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg" fit="cover" />
+        </div>
+        <el-menu mode="vertical" :unique-opened="true" class="el-menu-demo" style="height:100%;" background-color="#988181" text-color="#111010" active-text-color="#99EFED" default-active="0">
+          <el-menu-item index="0" :style="menulistBorderBottom" @click="menuHandler('')"><i v-if="true" class="el-icon-s-home" />首页</el-menu-item>
+          <el-submenu :index="1+''" :style="menulistBorderBottom">
+            <template slot="title">
+              <i v-if="true" class="el-icon-user-solid" />
+              <span>个人中心</span>
+            </template>
+            <el-menu-item :index="1-1" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
+            <el-menu-item :index="1-2" @click="menuHandler('center')">个人信息</el-menu-item>
+          </el-submenu>
+          <el-submenu :style="menulistBorderBottom" v-for=" (menu,index) in item.backMenu" :key="menu.menu" :index="index+2+''">
+            <template slot="title">
+              <i v-if="true" :class="icons[index]" />
+              <span>{{ menu.menu }}</span>
+            </template>
+            <el-menu-item v-for=" (child,sort) in menu.child" :key="sort" :index="(index+2)+'-'+sort" @click="menuHandler(child.tableName)">{{ child.menu }}</el-menu-item>
+          </el-submenu>
+        </el-menu>
+
+      </div>
+    </div>
+  </el-aside>
+</template>
+<script>
+import menu from '@/utils/menu'
+export default {
+  data() {
+    return {
+      menuList: [],
+      dynamicMenuRoutes: [],
+      role: '',
+      icons: [
+        'el-icon-s-cooperation',
+        'el-icon-s-order',
+        'el-icon-s-platform',
+        'el-icon-s-fold',
+        'el-icon-s-unfold',
+        'el-icon-s-operation',
+        'el-icon-s-promotion',
+        'el-icon-s-release',
+        'el-icon-s-ticket',
+        'el-icon-s-management',
+        'el-icon-s-open',
+        'el-icon-s-shop',
+        'el-icon-s-marketing',
+        'el-icon-s-flag',
+        'el-icon-s-comment',
+        'el-icon-s-finance',
+        'el-icon-s-claim',
+        'el-icon-s-custom',
+        'el-icon-s-opportunity',
+        'el-icon-s-data',
+        'el-icon-s-check',
+        'el-icon-s-grid',
+        'el-icon-menu',
+        'el-icon-chat-dot-square',
+        'el-icon-message',
+        'el-icon-postcard',
+        'el-icon-position',
+        'el-icon-microphone',
+        'el-icon-close-notification',
+        'el-icon-bangzhu',
+        'el-icon-time',
+        'el-icon-odometer',
+        'el-icon-crop',
+        'el-icon-aim',
+        'el-icon-switch-button',
+        'el-icon-full-screen',
+        'el-icon-copy-document',
+        'el-icon-mic',
+        'el-icon-stopwatch',
+      ],
+      menulistStyle: 'vertical',
+	  menulistBorderBottom: {},
+    }
+  },
+  mounted() {
+    const menus = menu.list()
+    this.menuList = menus
+    this.role = this.$storage.get('role')
+  },
+  created(){
+    setTimeout(()=>{
+      this.menulistStyleChange()
+    },10)
+    this.icons.sort(()=>{
+      return (0.5-Math.random())
+    })
+	this.lineBorder()
+  },
+  methods: {
+	lineBorder() {
+		let style = 'vertical'
+		let w = '1px'
+		let s = 'solid'
+		let c = '#ccc'
+		if(style == 'vertical') {
+			this.menulistBorderBottom = {
+				borderBottomWidth: w,
+				borderBottomStyle: s,
+				borderBottomColor: c
+			}
+		} else {
+			this.menulistBorderBottom = {
+				borderRightWidth: w,
+				borderRightStyle: s,
+				borderRightColor: c
+			}
+		}
+	},
+    menuHandler(name) {
+      let router = this.$router
+      name = '/'+name
+      router.push(name)
+    },
+    // 菜单
+    setMenulistHoverColor(){
+      let that = this
+      this.$nextTick(()=>{
+        document.querySelectorAll('.menulist .el-menu-item').forEach(el=>{
+          el.addEventListener("mouseenter", e => {
+            e.stopPropagation()
+            el.style.backgroundColor = "rgba(238, 221, 129, 1)"
+          })
+          el.addEventListener("mouseleave", e => {
+            e.stopPropagation()
+            el.style.backgroundColor = "#988181"
+          })
+          el.addEventListener("focus", e => {
+            e.stopPropagation()
+            el.style.backgroundColor = "rgba(238, 221, 129, 1)"
+          })
+        })
+        document.querySelectorAll('.menulist .el-submenu__title').forEach(el=>{
+          el.addEventListener("mouseenter", e => {
+            e.stopPropagation()
+            el.style.backgroundColor = "rgba(238, 221, 129, 1)"
+          })
+          el.addEventListener("mouseleave", e => {
+            e.stopPropagation()
+            el.style.backgroundColor = "#988181"
+          })
+        })
+      })
+    },
+    setMenulistIconColor() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el=>{
+          el.style.color = "rgba(153, 153, 153, 1)"
+        })
+      })
+    },
+    menulistStyleChange() {
+      this.setMenulistIconColor()
+      this.setMenulistHoverColor()
+      this.setMenulistStyleHeightChange()
+      let str = "vertical"
+      if("horizontal" === str) {
+        this.$nextTick(()=>{
+          document.querySelectorAll('.el-container .el-container').forEach(el=>{
+            el.style.display = "block"
+            el.style.paddingTop = "60px" // header 高度
+          })
+          document.querySelectorAll('.el-aside').forEach(el=>{
+            el.style.width = "100%"
+            el.style.height = "62px"
+            el.style.paddingTop = '0'
+          })
+          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
+            el.style.paddingTop = '0'
+          })
+        })
+      }
+      if("vertical" === str) {
+        this.$nextTick(()=>{
+          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
+            el.style.paddingTop = "60px"
+          })
+        })
+      }
+    },
+    setMenulistStyleHeightChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el=>{
+          el.style.height = "62px"
+          el.style.lineHeight = "62px"
+        })
+        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el=>{
+          el.style.height = "62px"
+          el.style.lineHeight = "62px"
+        })
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .index-aside {
+    position: relative;
+    overflow: hidden;
+
+    .menulistImg {
+      padding: 24px 0;
+      box-sizing: border-box;
+
+      .el-image {
+        margin: 0 auto;
+        width: 100px;
+        height: 100px;
+        border-radius: 100%;
+        display: block;
+      }
+    }
+
+    .index-aside-inner {
+      height: 100%;
+      margin-right: -17px;
+      margin-bottom: -17px;
+      overflow: scroll;
+      overflow-x: hidden !important;
+      padding-top: 60px;
+      box-sizing: border-box;
+
+      &:focus {
+        outline: none;
+      }
+
+      .el-menu {
+        border: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/main/resources/admin/admin/src/components/index/IndexAsideStatic.vue.bak b/src/main/resources/admin/admin/src/components/index/IndexAsideStatic.vue.bak
new file mode 100644
index 0000000..ea41944
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/index/IndexAsideStatic.vue.bak
@@ -0,0 +1,76 @@
+<template>
+	<el-aside class="index-aside" width="200px">
+    <div class="index-aside-inner">
+      <div v-for="item in menuList" v-bind:key="item.roleName">
+        <el-menu
+          background-color="#263238"
+          text-color="#fff"
+          active-text-color="#ffd04b"
+          default-active="0"
+          v-if="role==item.roleName"
+        >
+          <el-menu-item @click="menuHandler('home')" index="0">首页</el-menu-item>
+          <el-submenu
+            :index="1+''"
+          >
+            <template slot="title">
+              <span>个人中心</span>
+            </template>
+            <el-menu-item
+              @click="menuHandler('updatePassword')"
+              :index="1-1"
+            >修改密码</el-menu-item>
+             <el-menu-item
+              @click="menuHandler('center')"
+              :index="1-2"
+            >个人信息</el-menu-item>
+          </el-submenu>
+          <el-submenu
+            v-for=" (menu,index) in item.backMenu"
+            v-bind:key="menu.menu"
+            :index="index+2+''"
+          >
+            <template slot="title">
+              <span>{{menu.menu}}</span>
+            </template>
+            <el-menu-item
+              v-for=" (child,sort) in menu.child"
+              v-bind:key="sort"
+              @click="menuHandler(child.tableName)"
+              :index="(index+2)+'-'+sort"
+            >{{child.menu}}</el-menu-item>
+          </el-submenu>
+        </el-menu>
+      </div>
+    </div>
+  </el-aside>
+</template>
+<script>
+	import menu from "@/utils/menu";
+	export default {
+		data() {
+			return {
+				menuList: [],
+				dynamicMenuRoutes: [],
+				role: ""
+			};
+		},
+		mounted() {
+			let menus = menu.list();
+			this.menuList = menus;
+			this.role = this.$storage.get("role");
+console.log(this.menuList)
+console.log(this.role)
+		},
+		methods: {
+			menuHandler(name) {
+				this.$router.push({
+					name: name
+				});
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/main/resources/admin/admin/src/components/index/IndexAsideSub.vue b/src/main/resources/admin/admin/src/components/index/IndexAsideSub.vue
new file mode 100644
index 0000000..1c710eb
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/index/IndexAsideSub.vue
@@ -0,0 +1,51 @@
+<template>
+  <el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''">
+    <template slot="title">
+      <span>{{ menu.name }}</span>
+    </template>
+    <sub-menu
+      v-for="item in menu.list"
+      :key="item.menuId"
+      :menu="item"
+      :dynamicMenuRoutes="dynamicMenuRoutes"
+    ></sub-menu>
+  </el-submenu>
+  <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
+    <span>{{ menu.name }}</span>
+  </el-menu-item>
+</template>
+
+<script>
+import SubMenu from "./IndexAsideSub";
+export default {
+  name: "sub-menu",
+  props: {
+    menu: {
+      type: Object,
+      required: true
+    },
+    dynamicMenuRoutes: {
+      type: Array,
+      required: true
+    }
+  },
+  components: {
+    SubMenu
+  },
+  methods: {
+    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
+    gotoRouteHandle(menu) {
+      var route = this.dynamicMenuRoutes.filter(
+        item => item.meta.menuId === menu.menuId
+      );
+      if (route.length >= 1) {
+        if (route[0].component != null) {
+          this.$router.replace({ name: route[0].name });
+        } else {
+          this.$router.push({ name: "404" });
+        }
+      }
+    }
+  }
+};
+</script>
diff --git a/src/main/resources/admin/admin/src/components/index/IndexHeader.vue b/src/main/resources/admin/admin/src/components/index/IndexHeader.vue
new file mode 100644
index 0000000..456528a
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/index/IndexHeader.vue
@@ -0,0 +1,183 @@
+<template>
+	<!-- <el-header>
+		<el-menu background-color="#00c292" text-color="#FFFFFF" active-text-color="#FFFFFF" mode="horizontal">
+			<div class="fl title">{{this.$project.projectName}}</div>
+			<div class="fr logout" style="display:flex;">
+				<el-menu-item index="3">
+					<div>{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
+				</el-menu-item>
+				<el-menu-item @click="onLogout" index="2">
+					<div>退出登录</div>
+				</el-menu-item>
+			</div>
+		</el-menu>
+	</el-header> -->
+	<div class="navbar" :style="{backgroundColor:heads.headBgColor,height:heads.headHeight,boxShadow:heads.headBoxShadow,lineHeight:heads.headHeight}">
+		<div class="title-menu" :style="{justifyContent:heads.headTitleStyle=='1'?'flex-start':'center'}">
+			<el-image v-if="heads.headTitleImg" class="title-img" :style="{width:heads.headTitleImgWidth,height:heads.headTitleImgHeight,boxShadow:heads.headTitleImgBoxShadow,borderRadius:heads.headTitleImgBorderRadius}" :src="heads.headTitleImgUrl" fit="cover"></el-image>
+			<div class="title-name" :style="{color:heads.headFontColor,fontSize:heads.headFontSize}">{{this.$project.projectName}}</div>
+		</div>
+		<div class="right-menu">
+			<div class="user-info" :style="{color:heads.headUserInfoFontColor,fontSize:heads.headUserInfoFontSize}">{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
+			<div class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onLogout">退出登录</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dialogVisible: false,
+				ruleForm: {},
+				user: {},
+				heads: {"headLogoutFontHoverColor":"rgba(41, 42, 42, 1)","headFontSize":"20px","headUserInfoFontColor":"rgba(238, 221, 129, 1)","headBoxShadow":"0 1px 6px #444","headTitleImgHeight":"44px","headLogoutFontHoverBgColor":"rgba(247, 142, 142, 1)","headFontColor":"rgba(153, 239, 237, 1)","headTitleImg":false,"headHeight":"60px","headTitleImgBorderRadius":"22px","headTitleImgUrl":"http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg","headBgColor":"#4F4949","headTitleImgBoxShadow":"0 1px 6px #444","headLogoutFontColor":"rgba(153, 239, 237, 1)","headUserInfoFontSize":"16px","headTitleImgWidth":"44px","headTitleStyle":"2","headLogoutFontSize":"16px"},
+			};
+		},
+		created() {
+			this.setHeaderStyle()
+		},
+		mounted() {
+			let sessionTable = this.$storage.get("sessionTable")
+			this.$http({
+				url: sessionTable + '/session',
+				method: "get"
+			}).then(({
+				data
+			}) => {
+				if (data && data.code === 0) {
+					this.user = data.data;
+				} else {
+					let message = this.$message
+					message.error(data.msg);
+				}
+			});
+		},
+		methods: {
+			onLogout() {
+				let storage = this.$storage
+				let router = this.$router
+				storage.remove("Token");
+				router.replace({
+					name: "login"
+				});
+			},
+      			onIndexTap(){
+      				window.location.href = `${this.$base.indexUrl}`
+    			},
+			setHeaderStyle() {
+			  this.$nextTick(()=>{
+			    document.querySelectorAll('.navbar .right-menu .logout').forEach(el=>{
+			      el.addEventListener("mouseenter", e => {
+			        e.stopPropagation()
+			        el.style.backgroundColor = this.heads.headLogoutFontHoverBgColor
+					el.style.color = this.heads.headLogoutFontHoverColor
+			      })
+			      el.addEventListener("mouseleave", e => {
+			        e.stopPropagation()
+			        el.style.backgroundColor = "transparent"
+					el.style.color = this.heads.headLogoutFontColor
+			      })
+			    })
+			  })
+			},
+		}
+	};
+</script>
+
+
+<style lang="scss" scoped>
+	.navbar {
+		height: 60px;
+		line-height: 60px;
+		width: 100%;
+		padding: 0 34px;
+		box-sizing: border-box;
+		background-color: #ff00ff;
+		position: relative;
+		z-index: 111;
+		
+		.right-menu {
+			position: absolute;
+			right: 34px;
+			top: 0;
+			height: 100%;
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			z-index: 111;
+			
+			.user-info {
+				font-size: 16px;
+				color: red;
+				padding: 0 12px;
+			}
+			
+			.logout {
+				font-size: 16px;
+				color: red;
+				padding: 0 12px;
+				cursor: pointer;
+			}
+			
+		}
+		
+		.title-menu {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			width: 100%;
+			height: 100%;
+			
+			.title-img {
+				width: 44px;
+				height: 44px;
+				border-radius: 22px;
+				box-shadow: 0 1px 6px #444;
+				margin-right: 16px;
+			}
+			
+			.title-name {
+				font-size: 24px;
+				color: #fff;
+				font-weight: 700;
+			}
+		}
+	}
+	// .el-header .fr {
+	// 	float: right;
+	// }
+
+	// .el-header .fl {
+	// 	float: left;
+	// }
+
+	// .el-header {
+	// 	width: 100%;
+	// 	color: #333;
+	// 	text-align: center;
+	// 	line-height: 60px;
+	// 	padding: 0;
+	// 	z-index: 99;
+	// }
+
+	// .logo {
+	// 	width: 60px;
+	// 	height: 60px;
+	// 	margin-left: 70px;
+	// }
+
+	// .avator {
+	// 	width: 40px;
+	// 	height: 40px;
+	// 	background: #ffffff;
+	// 	border-radius: 50%;
+	// }
+
+	// .title {
+	// 	color: #ffffff;
+	// 	font-size: 20px;
+	// 	font-weight: bold;
+	// 	margin-left: 20px;
+	// }
+</style>
diff --git a/src/main/resources/admin/admin/src/components/index/IndexHeader.vue.bak b/src/main/resources/admin/admin/src/components/index/IndexHeader.vue.bak
new file mode 100644
index 0000000..c9702c9
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/index/IndexHeader.vue.bak
@@ -0,0 +1,89 @@
+<template>
+	<el-header>
+		<el-menu background-color="#00c292" text-color="#FFFFFF" active-text-color="#FFFFFF" mode="horizontal">
+			<div class="fl title">{{this.$project.projectName}}</div>
+			<div class="fr logout" style="display:flex;">
+				<el-menu-item index="3">
+					<div>{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
+				</el-menu-item>
+				<el-menu-item @click="onLogout" index="2">
+					<div>退出登录</div>
+				</el-menu-item>
+			</div>
+		</el-menu>
+	</el-header>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dialogVisible: false,
+				ruleForm: {},
+				user: {}
+			};
+		},
+		mounted() {
+			this.$http({
+				url: `${this.$storage.get("sessionTable")}/session`,
+				method: "get"
+			}).then(({
+				data
+			}) => {
+				if (data && data.code === 0) {
+					this.user = data.data;
+				} else {
+					this.$message.error(data.msg);
+				}
+			});
+		},
+		methods: {
+			onLogout() {
+				this.$storage.remove("Token");
+				this.$router.replace({
+					name: "login"
+				});
+			}
+		}
+	};
+</script>
+
+
+<style lang="scss" scoped>
+	.el-header .fr {
+		float: right;
+	}
+
+	.el-header .fl {
+		float: left;
+	}
+
+	.el-header {
+		width: 100%;
+		color: #333;
+		text-align: center;
+		line-height: 60px;
+		padding: 0;
+		z-index: 99;
+	}
+
+	.logo {
+		width: 60px;
+		height: 60px;
+		margin-left: 70px;
+	}
+
+	.avator {
+		width: 40px;
+		height: 40px;
+		background: #ffffff;
+		border-radius: 50%;
+	}
+
+	.title {
+		color: #ffffff;
+		font-size: 20px;
+		font-weight: bold;
+		margin-left: 20px;
+	}
+</style>
diff --git a/src/main/resources/admin/admin/src/components/index/IndexMain.vue b/src/main/resources/admin/admin/src/components/index/IndexMain.vue
new file mode 100644
index 0000000..f3c5b3c
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/index/IndexMain.vue
@@ -0,0 +1,124 @@
+<template>
+	<el-main>
+		<bread-crumbs :title="title" class="bread-crumbs"></bread-crumbs>
+		<router-view class="router-view"></router-view>
+	</el-main>
+</template>
+<script>
+	import menu from "@/utils/menu";
+	export default {
+		data() {
+			return {
+				menuList: [],
+				role: "",
+				currentIndex: -2,
+				itemMenu: [],
+				title: ''
+			};
+		},
+		mounted() {
+			let menus = menu.list();
+			this.menuList = menus;
+			this.role = this.$storage.get("role");
+		},
+		methods: {
+			menuHandler(menu) {
+				this.$router.push({
+					name: menu.tableName
+				});
+				this.title = menu.menu;
+			},
+			titleChange(index, menus) {
+				this.currentIndex = index
+				this.itemMenu = menus;
+				console.log(menus);
+			},
+			homeChange(index) {
+				this.itemMenu = [];
+				this.title = ""
+				this.currentIndex = index
+				this.$router.push({
+					name: 'home'
+				});
+			},
+			centerChange(index) {
+				this.itemMenu = [{
+					"buttons": ["新增", "查看", "修改", "删除"],
+					"menu": "修改密码",
+					"tableName": "updatePassword"
+				}, {
+					"buttons": ["新增", "查看", "修改", "删除"],
+					"menu": "个人信息",
+					"tableName": "center"
+				}];
+				this.title = ""
+				this.currentIndex = index
+				this.$router.push({
+					name: 'home'
+				});
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	a {
+		text-decoration: none;
+		color: #555;
+	}
+
+	a:hover {
+		background: #00c292;
+	}
+
+	.nav-list {
+		width: 100%;
+		margin: 0 auto;
+		text-align: left;
+		margin-top: 20px;
+
+		.nav-title {
+			display: inline-block;
+			font-size: 15px;
+			color: #333;
+			padding: 15px 25px;
+			border: none;
+		}
+
+		.nav-title.active {
+			color: #555;
+			cursor: default;
+			background-color: #fff;
+		}
+	}
+
+	.nav-item {
+		margin-top: 20px;
+		background: #FFFFFF;
+		padding: 15px 0;
+
+		.menu {
+			padding: 15px 25px;
+		}
+	}
+
+	.el-main {
+		background-color: #F6F8FA;
+		padding: 0 24px;
+		// padding-top: 60px;
+	}
+
+	.router-view {
+		padding: 10px;
+		margin-top: 10px;
+		background: #FFFFFF;
+		box-sizing: border-box;
+	}
+
+	.bread-crumbs {
+		width: 100%;
+		// border-bottom: 1px solid #e9eef3;
+		// border-top: 1px solid #e9eef3;
+		margin-top: 10px;
+		box-sizing: border-box;
+	}
+</style>