diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
new file mode 100644
index 00000000..2f507ca4
--- /dev/null
+++ b/src/components/GithubCorner/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <a href="https://github.com/hxrui" target="_blank" class="github-corner" aria-label="View source on Github">
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 250 250"
+      style="fill:#40c9c6; color:#fff;"
+      aria-hidden="true"
+    >
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor"
+        style="transform-origin: 130px 106px;"
+        class="octo-arm"
+      />
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor"
+        class="octo-body"
+      />
+    </svg>
+  </a>
+</template>
+
+<style scoped>
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+@media (max-width:500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+}
+</style>
diff --git a/src/views/dashboard/components/TodoList/Todo.vue b/src/views/dashboard/components/TodoList/Todo.vue
new file mode 100644
index 00000000..c4b3cae2
--- /dev/null
+++ b/src/views/dashboard/components/TodoList/Todo.vue
@@ -0,0 +1,81 @@
+<template>
+  <li :class="{ completed: todo.done, editing: editing }" class="todo">
+    <div class="view">
+      <input
+        :checked="todo.done"
+        class="toggle"
+        type="checkbox"
+        @change="toggleTodo( todo)"
+      >
+      <label @dblclick="editing = true" v-text="todo.text" />
+      <button class="destroy" @click="deleteTodo( todo )" />
+    </div>
+    <input
+      v-show="editing"
+      v-focus="editing"
+      :value="todo.text"
+      class="edit"
+      @keyup.enter="doneEdit"
+      @keyup.esc="cancelEdit"
+      @blur="doneEdit"
+    >
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'Todo',
+  directives: {
+    focus(el, { value }, { context }) {
+      if (value) {
+        context.$nextTick(() => {
+          el.focus()
+        })
+      }
+    }
+  },
+  props: {
+    todo: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      editing: false
+    }
+  },
+  methods: {
+    deleteTodo(todo) {
+      this.$emit('deleteTodo', todo)
+    },
+    editTodo({ todo, value }) {
+      this.$emit('editTodo', { todo, value })
+    },
+    toggleTodo(todo) {
+      this.$emit('toggleTodo', todo)
+    },
+    doneEdit(e) {
+      const value = e.target.value.trim()
+      const { todo } = this
+      if (!value) {
+        this.deleteTodo({
+          todo
+        })
+      } else if (this.editing) {
+        this.editTodo({
+          todo,
+          value
+        })
+        this.editing = false
+      }
+    },
+    cancelEdit(e) {
+      e.target.value = this.todo.text
+      this.editing = false
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/TodoList/index.scss b/src/views/dashboard/components/TodoList/index.scss
new file mode 100644
index 00000000..74ce0d54
--- /dev/null
+++ b/src/views/dashboard/components/TodoList/index.scss
@@ -0,0 +1,320 @@
+.todoapp {
+  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  color: #4d4d4d;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto ;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+  background: #fff;
+  z-index: 1;
+  position: relative;
+  button {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: 100%;
+    vertical-align: baseline;
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  :focus {
+    outline: 0;
+  }
+  .hidden {
+    display: none;
+  }
+  .todoapp {
+    background: #fff;
+    margin: 130px 0 40px 0;
+    position: relative;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  }
+  .todoapp input::-webkit-input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+  .todoapp input::-moz-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+  .todoapp input::input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+  .todoapp h1 {
+    position: absolute;
+    top: -155px;
+    width: 100%;
+    font-size: 100px;
+    font-weight: 100;
+    text-align: center;
+    color: rgba(175, 47, 47, 0.15);
+    -webkit-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
+  }
+  .new-todo,
+  .edit {
+    position: relative;
+    margin: 0;
+    width: 100%;
+    font-size: 18px;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: 1.4em;
+    border: 0;
+    color: inherit;
+    padding: 6px;
+    border: 1px solid #999;
+    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .new-todo {
+    padding: 10px 16px 16px 60px;
+    border: none;
+    background: rgba(0, 0, 0, 0.003);
+    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+  }
+  .main {
+    position: relative;
+    z-index: 2;
+    border-top: 1px solid #e6e6e6;
+  }
+  .toggle-all {
+    text-align: center;
+    border: none;
+    /* Mobile Safari */
+    opacity: 0;
+    position: absolute;
+  }
+  .toggle-all+label {
+    width: 60px;
+    height: 34px;
+    font-size: 0;
+    position: absolute;
+    top: -52px;
+    left: -13px;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+  .toggle-all+label:before {
+    content: '❯';
+    font-size: 22px;
+    color: #e6e6e6;
+    padding: 10px 27px 10px 27px;
+  }
+  .toggle-all:checked+label:before {
+    color: #737373;
+  }
+  .todo-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .todo-list li {
+    position: relative;
+    font-size: 24px;
+    border-bottom: 1px solid #ededed;
+  }
+  .todo-list li:last-child {
+    border-bottom: none;
+  }
+  .todo-list li.editing {
+    border-bottom: none;
+    padding: 0;
+  }
+  .todo-list li.editing .edit {
+    display: block;
+    width: 506px;
+    padding: 12px 16px;
+    margin: 0 0 0 43px;
+  }
+  .todo-list li.editing .view {
+    display: none;
+  }
+  .todo-list li .toggle {
+    text-align: center;
+    width: 40px;
+    /* auto, since non-WebKit browsers doesn't support input styling */
+    height: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    border: none;
+    /* Mobile Safari */
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  .todo-list li .toggle {
+    opacity: 0;
+  }
+  .todo-list li .toggle+label {
+    /*
+    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+  */
+    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+    background-repeat: no-repeat;
+    background-position: center left;
+    background-size: 36px;
+  }
+  .todo-list li .toggle:checked+label {
+    background-size: 36px;
+    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+  }
+  .todo-list li label {
+    word-break: break-all;
+    padding: 15px 15px 15px 50px;
+    display: block;
+    line-height: 1.0;
+        font-size: 14px;
+    transition: color 0.4s;
+  }
+  .todo-list li.completed label {
+    color: #d9d9d9;
+    text-decoration: line-through;
+  }
+  .todo-list li .destroy {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    bottom: 0;
+    width: 40px;
+    height: 40px;
+    margin: auto 0;
+    font-size: 30px;
+    color: #cc9a9a;
+    transition: color 0.2s ease-out;
+    cursor: pointer;
+  }
+  .todo-list li .destroy:hover {
+    color: #af5b5e;
+  }
+  .todo-list li .destroy:after {
+    content: '×';
+  }
+  .todo-list li:hover .destroy {
+    display: block;
+  }
+  .todo-list li .edit {
+    display: none;
+  }
+  .todo-list li.editing:last-child {
+    margin-bottom: -1px;
+  }
+  .footer {
+    color: #777;
+    position: relative;
+    padding: 10px 15px;
+    height: 40px;
+    text-align: center;
+    border-top: 1px solid #e6e6e6;
+  }
+  .footer:before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 40px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+  }
+  .todo-count {
+    float: left;
+    text-align: left;
+  }
+  .todo-count strong {
+    font-weight: 300;
+  }
+  .filters {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    z-index: 1;
+    list-style: none;
+  }
+  .filters li {
+    display: inline;
+  }
+  .filters li a {
+    color: inherit;
+    font-size: 12px;
+    padding: 3px 7px;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: 3px;
+  }
+  .filters li a:hover {
+    border-color: rgba(175, 47, 47, 0.1);
+  }
+  .filters li a.selected {
+    border-color: rgba(175, 47, 47, 0.2);
+  }
+  .clear-completed,
+  html .clear-completed:active {
+    float: right;
+    position: relative;
+    line-height: 20px;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .clear-completed:hover {
+    text-decoration: underline;
+  }
+  .info {
+    margin: 65px auto 0;
+    color: #bfbfbf;
+    font-size: 10px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    text-align: center;
+  }
+  .info p {
+    line-height: 1;
+  }
+  .info a {
+    color: inherit;
+    text-decoration: none;
+    font-weight: 400;
+  }
+  .info a:hover {
+    text-decoration: underline;
+  }
+  /*
+  Hack to remove background from Mobile Safari.
+  Can't use it globally since it destroys checkboxes in Firefox
+*/
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    .toggle-all,
+    .todo-list li .toggle {
+      background: none;
+    }
+    .todo-list li .toggle {
+      height: 40px;
+    }
+  }
+  @media (max-width: 430px) {
+    .footer {
+      height: 50px;
+    }
+    .filters {
+      bottom: 10px;
+    }
+  }
+}
diff --git a/src/views/dashboard/components/TodoList/index.vue b/src/views/dashboard/components/TodoList/index.vue
new file mode 100644
index 00000000..d0c311f3
--- /dev/null
+++ b/src/views/dashboard/components/TodoList/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <section class="todoapp">
+    <!-- header -->
+    <header class="header">
+      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
+    </header>
+    <!-- main section -->
+    <section v-show="todos.length" class="main">
+      <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
+      <label for="toggle-all" />
+      <ul class="todo-list">
+        <todo
+          v-for="(todo, index) in filteredTodos"
+          :key="index"
+          :todo="todo"
+          @toggleTodo="toggleTodo"
+          @editTodo="editTodo"
+          @deleteTodo="deleteTodo"
+        />
+      </ul>
+    </section>
+    <!-- footer -->
+    <footer v-show="todos.length" class="footer">
+      <span class="todo-count">
+        <strong>{{ remaining }}</strong>
+        {{ remaining | pluralize('item') }} left
+      </span>
+      <ul class="filters">
+        <li v-for="(val, key) in filters" :key="key">
+          <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
+        </li>
+      </ul>
+    </footer>
+  </section>
+</template>
+
+<script>
+import Todo from './Todo.vue'
+
+const STORAGE_KEY = 'todos'
+const filters = {
+  all: todos => todos,
+  active: todos => todos.filter(todo => !todo.done),
+  completed: todos => todos.filter(todo => todo.done)
+}
+const defaultList = [
+  { text: 'Vue2升级Vue3', done: false },
+  { text: 'Element-UI升级Element-Plus', done: false },
+  { text: '商城应用Android、IOS端适配开发', done: false },
+  { text: 'IM即时通讯(Netty/ZooKeeper/Redis)', done: false },
+  { text: 'ElasticSearch商品搜索', done: false },
+  { text: '分库分表实践', done: false },
+  { text: 'Seata-TCC模式', done: false },
+  { text: '微服务链路追踪', done: false },
+  { text: '多租户', done: false },
+  { text: 'ELK日志收集->ELFK日志收集', done: false },
+  { text: '微服务流控Sentinel', done: true },
+  { text: 'ELK日志搜集', done: true },
+  { text: 'RabbitMQ死信队列-订单超时取消', done: true },
+  { text: 'Redission分布式锁', done: true },
+  { text: 'Seata-AT模式', done: true },
+  { text: '微服务基础设施', done: true },
+  { text: 'OAuth2 + JWT统一认证鉴权', done: true },
+  { text: 'RBAC权限设计', done: true }
+]
+export default {
+  components: { Todo },
+  data() {
+    return {
+      visibility: 'all',
+      filters,
+      todos: defaultList
+    }
+  },
+  computed: {
+    allChecked() {
+      return this.todos.every(todo => todo.done)
+    },
+    filteredTodos() {
+      return filters[this.visibility](this.todos)
+    },
+    remaining() {
+      return this.todos.filter(todo => !todo.done).length
+    }
+  },
+  methods: {
+    pluralize(n, w){
+      return  n === 1 ? w : w + 's'
+    },
+    capitalize(s){
+      return  s.charAt(0).toUpperCase() + s.slice(1)
+    },
+    setLocalStorage() {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
+    },
+    addTodo(e) {
+      const text = e.target.value
+      if (text.trim()) {
+        this.todos.push({
+          text,
+          done: false
+        })
+        this.setLocalStorage()
+      }
+      e.target.value = ''
+    },
+    toggleTodo(val) {
+      val.done = !val.done
+      this.setLocalStorage()
+    },
+    deleteTodo(todo) {
+      this.todos.splice(this.todos.indexOf(todo), 1)
+      this.setLocalStorage()
+    },
+    editTodo({ todo, value }) {
+      todo.text = value
+      this.setLocalStorage()
+    },
+    clearCompleted() {
+      this.todos = this.todos.filter(todo => !todo.done)
+      this.setLocalStorage()
+    },
+    toggleAll({ done }) {
+      this.todos.forEach(todo => {
+        todo.done = done
+        this.setLocalStorage()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  @import './index.scss';
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 44844e01..ea09b9fa 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,13 +1,603 @@
 <template>
- <div> 这里是控制台</div>
+  <div class="dashboard-container">
+    <github-corner class="github-corner"/>
+
+    <el-row :gutter="40" class="card-panel-col">
+      <el-col :xs="12" :span="12" :lg="6">
+        <div class="card-panel">
+          <div class="card-panel-icon-wrapper" style="margin-top: -10px">
+            <el-image style="width:200px; height: 90px"
+                      src="https://gitee.com/haoxr/image/raw/master/20210606213932.png"></el-image>
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              {{ nickname }}
+            </div>
+            <div class="card-panel-text">
+              <el-tag size="mini" type="danger">莫得感情</el-tag>
+              <el-tag size="mini" type="success" style="margin-left: 5px">打工人</el-tag>
+            </div>
+          </div>
+        </div>
+      </el-col>
+
+      <el-col :xs="12" :span="12" :lg="6" class="card-panel-col">
+        <div class="card-panel">
+          <div class="card-panel-icon-wrapper icon-people">
+            <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              总访问量
+            </div>
+            <div class="card-panel-num">123456 </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="12" :span="12" :lg="6" class="card-panel-col">
+        <div class="card-panel">
+          <div class="card-panel-icon-wrapper icon-money">
+            <svg-icon icon-class="money" class-name="card-panel-icon"/>
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              支付金额
+            </div>
+            <div class="card-panel-num">123456 </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="12" :span="12" :lg="6" class="card-panel-col">
+        <div class="card-panel">
+          <div class="card-panel-icon-wrapper icon-shopping">
+            <svg-icon icon-class="shopping" class-name="card-panel-icon"/>
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              订单数
+            </div>
+            <div class="card-panel-num">123456 </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="40">
+      <el-col :span="12" :xs="24">
+        <el-card class="project-brief-introduction" style="height: 420px;">
+          <div slot="header" class="clearfix">
+            <span>有来项目简介</span>
+          </div>
+          <div style="font-size: 14px">
+            <div class="content">
+              <el-link target="_blank" style="font-weight: bold" type="primary" href="https://gitee.com/youlaitech/youlai-mall">
+                youlai-mall
+              </el-link>
+              是基于Spring Boot 2.5.0、Spring Cloud 2020 &
+              Alibaba 2021、vue、element-ui、uni-app快速构建的一套全栈开源商城项目。
+              <el-divider/>
+              项目采用微服务、前后端分离开发模式。
+              <br/>
+              汇集全栈主流的技术栈；
+              涉及
+              <el-link target="_blank" type="primary" size="mini" href="https://gitee.com/youlaitech/youlai-mall">后端微服务</el-link>
+              、
+              <el-link target="_blank" type="success" size="mini" href="https://gitee.com/youlaitech/youlai-mall-admin">前端管理</el-link>
+              、
+              <el-link target="_blank" type="warning" size="mini" href="https://gitee.com/youlaitech/youlai-mall-weapp">微信小程序</el-link>
+              和
+              <el-link target="_blank" type="danger" size="mini" href="https://gitee.com/youlaitech/youlai-mall-weapp">APP应用</el-link>
+              等多端的开发。
+            </div>
+            <el-divider/>
+            <el-row :gutter="10">
+              <el-col :span="8">
+                <el-badge value="免费开源" style="font-weight: bold">
+                  项目源码地址
+                </el-badge>
+              </el-col>
+              <el-col :span="8">
+                <el-link target="_blank" type="primary" href="https://github.com/hxrui">github</el-link>
+              </el-col>
+              <el-col :span="8">
+                <el-link target="_blank" type="success" href="https://gitee.com/haoxr">码云</el-link>
+              </el-col>
+            </el-row>
+            <el-divider/>
+            <el-row :gutter="10">
+              <el-col :span="8" style="font-weight: bold">
+                接口文档地址
+              </el-col>
+              <el-col :span="8">
+                <el-link target="_blank" type="primary" href="http://www.youlai.tech:9999/doc.html">线上</el-link>
+              </el-col>
+              <el-col :span="8">
+                <el-link target="_blank" type="success" href="http://localhost:9999/doc.html">本地</el-link>
+              </el-col>
+            </el-row>
+            <el-divider/>
+            <el-row :gutter="10">
+              <el-col :span="8" style="font-weight: bold">
+                后端技术栈
+              </el-col>
+              <el-col :span="16">
+                Spring Boot、Spring Cloud、Spring Cloud Alibaba、Spring Security OAuth2、JWT、Mybatis-Plus、Seata、Sentinel、ELK、Redis
+              </el-col>
+            </el-row>
+            <el-divider/>
+            <el-row :gutter="10">
+              <el-col :span="8" style="font-weight: bold">
+                前端技术栈
+              </el-col>
+              <el-col :span="16">
+                vue、element-ui、uni-app、vue-element-admin
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12" :xs="24">
+        <el-card class="technology-stack" style="height: 420px;">
+          <div slot="header" class="clearfix">
+            <span>联系信息</span>
+          </div>
+          <div style="font-size: 14px">
+            <el-tabs v-model="contactActiveName">
+              <el-tab-pane label="开发人员" name="1">
+                <el-row :gutter="5">
+                  <el-col :span="8">
+                    <el-card :body-style="{ padding: '0px' }" align="center">
+                      <el-image
+                        style="width: 60px; height: 60px"
+                        src="https://gitee.com/haoxr/image/raw/master/hxr.jpg"
+                        :preview-src-list="['https://gitee.com/haoxr/image/raw/master/hxr.jpg']">
+                      </el-image>
+                      <div style="padding: 6px;">
+                        <span tyle="font-size: 14px">郝先瑞</span>
+                        <div class="bottom clearfix" style="margin-top: 5px">
+                          <el-tag type="primary" size="mini">后端</el-tag>
+                          <el-tag type="success" style="margin-left: 5px" size="mini">前端</el-tag>
+                          <el-tag type="danger" style="margin-left: 5px" size="mini">运维</el-tag>
+                        </div>
+                      </div>
+                    </el-card>
+                  </el-col>
+
+                  <el-col :span="8">
+                    <el-card :body-style="{ padding: '0px' }" align="center">
+                      <el-image
+                        style="width: 60px; height: 60px"
+                        src="https://gitee.com/haoxr/image/raw/master/huawei.jpg"
+                        :preview-src-list="['https://gitee.com/haoxr/image/raw/master/huawei.jpg']">
+                      </el-image>
+                      <div style="padding: 6px;">
+                        <span>猴子也能上天</span>
+                        <div class="bottom clearfix" style="margin-top: 5px">
+                          <el-tag type="primary" size="mini">后端</el-tag>
+                          <el-tag type="success" style="margin-left: 5px" size="mini">前端</el-tag>
+                          <el-tag type="danger" style="margin-left: 5px" size="mini">运维</el-tag>
+                        </div>
+                      </div>
+                    </el-card>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-card :body-style="{ padding: '0px' }" align="center">
+                      <el-image
+                        style="width: 60px; height: 60px"
+                        src="  https://gitee.com/haoxr/image/raw/master/DaniR.png"
+                        :preview-src-list="['https://gitee.com/haoxr/image/raw/master/DaniR.png']">
+                      </el-image>
+                      <div style="padding: 6px;">
+                        <span>DaniR</span>
+                        <div class="bottom clearfix" style="margin-top: 5px">
+                          <el-tag type="primary" size="mini">后端</el-tag>
+                          <el-tag type="success" style="margin-left: 5px" size="mini">前端</el-tag>
+                          <el-tag type="danger" style="margin-left: 5px" size="mini">运维</el-tag>
+                        </div>
+                      </div>
+                    </el-card>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="5" style="margin-top: 8px">
+                  <el-col :span="8">
+                    <el-card :body-style="{ padding: '0px' }" align="center">
+                      <el-image
+                        style="width: 60px; height: 60px"
+                        src="https://gitee.com/haoxr/image/raw/master/20210606203219.png"
+                        :preview-src-list="['https://gitee.com/haoxr/image/raw/master/20210606203219.png']">
+                      </el-image>
+                      <div style="padding: 6px;">
+                        <span>Mr.</span>
+                        <div class="bottom clearfix" style="margin-top: 5px">
+                          <el-tag type="primary" size="mini">后端</el-tag>
+                          <el-tag type="success" style="margin-left: 5px" size="mini">前端</el-tag>
+                          <el-tag type="danger" style="margin-left: 5px" size="mini">运维</el-tag>
+                        </div>
+                      </div>
+                    </el-card>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-card :body-style="{ padding: '0px' }" align="center">
+                      <el-image
+                        style="width: 60px; height: 60px"
+                        src="  https://gitee.com/haoxr/image/raw/master/20210606203659.png"
+                        :preview-src-list="['https://gitee.com/haoxr/image/raw/master/20210606203659.png']">
+                      </el-image>
+                      <div style="padding: 6px;">
+                        <span>???</span>
+                        <div class="bottom clearfix" style="margin-top: 5px">
+                          <el-tag type="warning" size="mini">??</el-tag>
+                        </div>
+                      </div>
+                    </el-card>
+                  </el-col>
+                </el-row>
+              </el-tab-pane>
+              <el-tab-pane label="微信群" name="2">
+                <el-image
+                  style="width: 210px; height: 210px"
+                  src="https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png"
+                  :preview-src-list="['https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png']">
+                </el-image>
+                <el-link style="margin-top: 10px" type="danger" :underline="false">群二维码过期，请添加开发人员微信备注“有来”</el-link>
+              </el-tab-pane>
+              <el-tab-pane label="微信小程序体验码" name="3">
+                <el-image
+                  style="width: 210px; height: 210px"
+                  src="https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png"
+                  :preview-src-list="['https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png']">
+                </el-image>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="40">
+      <el-col :span="6" :xs="24">
+        <el-card class="technology-stack">
+          <div slot="header" class="clearfix">
+            <span>更新日志</span>
+          </div>
+          <div style="font-size: 14px">
+            <el-collapse v-model="updateLogActiveName" accordion>
+              <el-collapse-item name="1">
+                <template slot="title">
+                  v1.0.0 - 2021.06.06
+                  <el-tooltip content="版本重大更新" placement="right">
+                    <i style="margin-left: 5px;color: red" class="header-icon el-icon-star-on"></i>
+                  </el-tooltip>
+                </template>
+                <div>1. 权限重构，RESTFul URL权限和按钮权限数据归并</div>
+                <div>2. 新增角色编码逻辑</div>
+                <div>3. 网关新增本地公钥的方式</div>
+                <div>4. 认证中心移除MySQL数据源</div>
+                <div>5. OAuth2客户端官方表oauth_client_details重命名sys_oauth_client</div>
+                <div>6. 自定义实现ClientDetailsService接口loadClientByClientId方法</div>
+                <div>7. JWT的权限属性authorities将角色ID调整为角色编码</div>
+                <div>8. 网关统一鉴权优化，设置了权限规则的请求进行拦截鉴权</div>
+                <div>9. 菜单、角色管理界面针对小尺寸屏幕友好优化</div>
+                <div>10. Spring Boot升级 2.4.4 <i class="el-icon-right"></i> 2.5.0</div>
+                <div>11. Spring Cloud升级 2020.0.2<i class="el-icon-right"></i>2020.0.3</div>
+                <div>12. Spring Cloud Alibaba升级 2020.0.RC1<i class="el-icon-right"></i>2021.1</div>
+                <div>13. Nacos服务升级 2.0.0<i class="el-icon-right"></i>2.0.1</div>
+                <div>14. 表字段统一调整gmt_create<i class="el-icon-right"></i>create_time，gmt_update<i
+                  class="el-icon-right"></i>update-time
+                </div>
+                <div>15. 前端管理控制台优化</div>
+                <div>16. JWT的密钥对修改，youlai.jks<i class="el-icon-right"></i>jwt.jks</div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6" :xs="24">
+        <el-card class="technology-stack">
+          <div slot="header" class="clearfix">
+            <span>计划事项</span>
+          </div>
+          <div style="font-size: 14px">
+            <todo-list/>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" :xs="24">
+        <el-card class="technology-stack">
+          <div slot="header" class="clearfix">
+            <span>项目文档</span>
+          </div>
+          <div style="font-size: 14px">
+            <el-tabs v-model="documentActiveName">
+              <el-tab-pane label="后端文档" name="1">
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13581881.html">1. Spring Cloud实战 |
+                  第一篇：Windows搭建Nacos服务
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13584204.html">2. Spring Cloud实战 |
+                  第二篇：Spring Cloud整合Nacos实现注册中心
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13585125.html">3. Spring Cloud实战 |
+                  第三篇：Spring Cloud整合Nacos实现配置中心
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13608650.html">4. Spring Cloud实战 |
+                  第四篇：Spring Cloud整合Gateway实现API网关
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13615592.html">5. Spring Cloud实战 |
+                  第五篇：Spring Cloud整合OpenFeign实现微服务之间的调用
+                </el-link>
+                <el-divider/>
+                <el-badge value="热">
+                  <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13719356.html">6. Spring Cloud实战 |
+                    第六篇：Spring Cloud Gateway+Spring Security OAuth2+JWT实现微服务统一认证授权
+                  </el-link>
+                </el-badge>
+                <el-divider/>
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13740264.html">7. Spring Cloud实战
+                  |
+                  最七篇：Spring Cloud Gateway+Spring Security OAuth2集成统一认证授权平台下实现注销使JWT失效方案
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14022632.html">8. Spring Cloud实战
+                  |
+                  最八篇：Spring Cloud +Spring Security OAuth2+ Vue前后端分离模式下无感知刷新实现JWT续期
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14028366.html">9. Spring Cloud实战
+                  |
+                  最九篇：Spring Security OAuth2认证服务器统一认证自定义异常处理
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14280184.html">10. Spring Cloud&
+                  Alibaba 实战 | 第十篇 ：Spring Cloud + Nacos整合Seata 1.4.1最新版本实现微服务架构中的分布式事务，进阶之路必须要迈过的槛
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14396990.html">11. Spring Cloud &
+                  Alibaba 实战 | 第十一篇 ：Spring Cloud Gateway网关实现对RESTful接口权限和按钮权限细粒度控制
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14720405.html">12. Spring Cloud &
+                  Alibaba 实战 | 第十二篇： Sentinel+Nacos实现流控、熔断降级，赋能拥有降级功能的Feign新技能熔断，做到熔断降级双剑合璧
+                </el-link>
+              </el-tab-pane>
+              <el-tab-pane label="前端文档" name="2">
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13624548.html">
+                  1. vue-element-admin实战 | 第一篇： 移除mock接入微服务接口，搭建SpringCloud+Vue前后端分离管理平台
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13676619.html">
+                  2. vue-element-admin实战 | 第二篇： 最小改动接入后台实现根据权限动态加载菜单
+                </el-link>
+              </el-tab-pane>
+
+              <el-tab-pane label="微信小程序文档" name="3">
+                <el-badge value="荐" style="margin-top: 10px">
+                  <el-link target="_blank" type="primary"
+                           href="https://www.cnblogs.com/haoxianrui/p/13882310.html">
+                    1. vue+uni-app商城实战 | 第一篇：从0到1快速开发一个商城微信小程序，无缝接入Spring Cloud
+                    OAuth2认证授权登录
+                  </el-link>
+                </el-badge>
+              </el-tab-pane>
+              <el-tab-pane label="应用部署文档" name="4" align="center">
+
+                <svg-icon style="width: 200px;height: 200px;" icon-class="await"/>
+
+              </el-tab-pane>
+              <el-tab-pane name="5">
+                <span slot="label" class="start-doc">
+                  <el-badge value="必读" style="margin-top:8px;">
+                    <div style="margin-top: -10px">项目启动说明</div>
+                  </el-badge>
+                </span>
+                <el-link target="_blank" type="primary"
+                         href="https://gitee.com/youlaitech/youlai-mall#1-%E5%90%8E%E5%8F%B0%E5%BE%AE%E6%9C%8D%E5%8A%A1%E5%90%AF%E5%8A%A8">1. 后端微服务启动
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary"
+                         href="https://gitee.com/youlaitech/youlai-mall#2-%E5%90%8E%E5%8F%B0%E5%89%8D%E7%AB%AF%E5%90%AF%E5%8A%A8">2. 管理前端启动
+                </el-link>
+                <el-divider/>
+                <el-link target="_blank" type="primary"
+                         href="https://gitee.com/youlaitech/youlai-mall#3-%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%90%AF%E5%8A%A8">3. 微信小程序启动
+                </el-link>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+  </div>
 </template>
 
-<script>
-export default {
-  name: "index"
-}
+<script setup lang="ts">
+import GithubCorner from '@/components/GithubCorner/index.vue'
+import TodoList from './components/TodoList/index.vue'
+import {computed, reactive, toRefs} from "vue";
+import SvgIcon from '@/components/SvgIcon/index.vue'
+
+import {useUserStoreHook} from "@/store/modules/user"
+
+const roles = computed(() => useUserStoreHook().roles);
+const avatar = computed(() => useUserStoreHook().avatar);
+const nickname = computed(() => useUserStoreHook().nickname);
+
+
+const state =reactive({
+  updateLogActiveName: '1',
+  contactActiveName: '1',
+  documentActiveName: '1'
+})
+
+const {updateLogActiveName,contactActiveName,documentActiveName}  = toRefs(state)
+
 </script>
 
-<style scoped>
 
-</style>
\ No newline at end of file
+<style lang="scss" scoped>
+
+.dashboard-container {
+  padding: 24px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .project-brief-introduction {
+    .el-divider--horizontal {
+      margin: 16px 0;
+    }
+
+    .content {
+      line-height: 20px;
+    }
+
+    margin-bottom: 24px;
+  }
+
+  .technology-stack {
+    margin-bottom: 24px;
+  }
+
+  .github-corner {
+    position: absolute;
+    top: 0px;
+    border: 0;
+    right: 0;
+    z-index: 99;
+  }
+
+  .box-center {
+    margin: 0 auto;
+    display: table;
+  }
+
+  .user-profile {
+    .user-name {
+    }
+
+    .box-center {
+      padding-top: 10px;
+    }
+
+    .user-role {
+      padding-top: 10px;
+      font-weight: 400;
+      font-size: 14px;
+    }
+
+    .box-social {
+      padding-top: 30px;
+
+      .el-table {
+        border-top: 1px solid #dfe6ec;
+      }
+    }
+
+    .user-follow {
+      padding-top: 20px;
+    }
+  }
+
+  .card-panel-col {
+    margin-bottom: 12px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-user {
+        background: #e77541;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+      .svg-icon{
+        width: 3em!important;
+        height: 3em!important;
+      }
+    }
+
+    .icon-message {
+      color: #36a3f7;
+      .svg-icon{
+        width: 3em!important;
+        height: 3em!important;
+      }
+    }
+
+    .icon-money {
+      color: #f4516c;
+      .svg-icon{
+        width: 3.2em!important;
+        height: 3.2em!important;
+      }
+    }
+
+    .icon-shopping {
+      color: #34bfa3;
+      .svg-icon{
+        width: 3em!important;
+        height: 3em!important;
+      }
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+
+}
+
+</style>