diff --git a/.env.development b/.env.development
index f81c564..44654de 100644
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,2 @@
-VUE_APP_TARGET_SITE_KEY='5ba7b6fe36a04ce0bab97f103907123f'
-VUE_APP_TARGET_SITE_SECRET='1ff77c23c2ea440d84ab17505b4588026233c709bf5d489aae07cd3b788999e1'
\ No newline at end of file
+VUE_APP_TARGET_SITE_KEY='292c3edcf6ff48b6b8f8acda69a24af1'
+VUE_APP_TARGET_SITE_SECRET='baa7d507406f4dd689ab45ca956853c33757fef9bdde41a4b3c0029f8178e626'
\ No newline at end of file
diff --git a/.env.production b/.env.production
index b3445d4..0a346ae 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,2 @@
-VUE_APP_TARGET_SITE_KEY='e17abffae39143a6a154a7eb91b42eb6'
-VUE_APP_TARGET_SITE_SECRET='e46365a18fe141e7908e5710aa2232efca863b4c42be42289723c88c2a4a6888'
+VUE_APP_TARGET_SITE_KEY='e12c25c323334b769c4f5a894c7a0d90'
+VUE_APP_TARGET_SITE_SECRET='e82751ea1c604529bcdadf4f5ba74e6075aea49124bc4ed7af9bac6e909467b0'
diff --git a/.eslintrc.js b/.eslintrc.js
index 28c3ea4..1a5f6d5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -28,6 +28,7 @@ module.exports = {
     },
   },
   rules: {
+    'no-extra-boolean-cast': 'off',
     'import/no-cycle': 'off',
     'prettier/prettier': ['error'],
     semi: 'error',
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..ac511ed
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "i18n-ally.localesPaths": [
+        "src/lang"
+    ]
+}
\ No newline at end of file
diff --git a/README.es.md b/README.es.md
new file mode 100644
index 0000000..c0d9314
--- /dev/null
+++ b/README.es.md
@@ -0,0 +1,52 @@
+<h1 style="text-align: center">Vue2 Template Admin</h1>
+
+English | [简体中文](https://github.com/Octoveau/vue2-element-admin-thin/blob/main/README.zh.md)
+## Introduction
+
+Vue2 Template Admin as a middle-background template, which is developed with `vue2`, `element-ui` and other related technology stacks.   There are built-in secondary-encapsulates frequently-use components.   Refine and abstract frequently-use modules, reduce the use of `import` and `require`, improve development efficiency
+
+## Features
+
+- Module: Highly abstract, minimize the use of `import` and `require`
+- Component: Secondary-encapsulate for multiple frequently-use componen
+
+## Preparation
+
+This project is mainly based on `ES2015+`, `vue2`, `Vue-router`, `pinia`, `vue-cli@4.5.17`, `axios` and` ant design for vue `, you need to be familiar with in advance.
+
+- node and git - Project development environment
+- be acquainted with vue2 essentials syntax
+- be acquainted with webpack features, not limited to (webpackDLL, ProvidePlugin, plugin alias), etc
+- Since the project is highly abstract against typical modules such as` auth `, `utils`, etc., you need to consult the vue.config.js file beforehand
+
+## Installation and use
+
+```
+- Pull project
+git clone https://github.com/Octoveau/vue2-template-portal.git
+
+- Into the project
+cd vue2-template-portal
+
+- Installation dependency
+npm install
+
+- Start
+npm run serve
+```
+
+## Others
+```
+- Prepack [Prepack 'ant design for vue', 'moment', and 'lodash' to improve compilation speed]
+npm run dll
+```
+
+
+## commit title must followed by a space character
+
+- feat: New function
+- fix: Fixed bugs
+- config: Config changes
+- docs: Updates the document
+- refactor: Refactor the code (neither new features nor bug fixes)
+- chore: Development tool change (build scaffolding tool etc.)
\ No newline at end of file
diff --git a/README.md b/README.md
index 431bee4..c0d9314 100644
--- a/README.md
+++ b/README.md
@@ -1,54 +1,52 @@
-<h1 style="text-align: center">Vue2 Template Admin</h1>
-
-## 简介
-
-Vue2 Template Admin 作为中后台模版，其采用`vue2`，`element-ui`等相关技术栈开发。内置二次封装的常规组件，提炼并抽象化常用模块，减轻`import`与`require`的使用，提升开发效率
-
-## 特性
-
-- 模块：高度抽象，尽量减少`import`和`require`使用
-- 组件：二次封装多个常用组件
-
-## 准备
-
-本项目主要基于`ES2015+`，`vue2`，`vue-router`，`pinia`，`vue-cli@4.5.17`，`axios`及`ant design for vue`，故需要提前熟悉。
-
-- node 和 git -项目开发环境
-- 熟悉 vue2 基础语法
-- 熟悉 webpack 特性，不限于（webpackDLL、ProvidePlugin、plugin alias）等
-- 由于项目针对典型模块如`auth`，`utils`等高度抽象，需要预先查阅 vue.config.js 文件
-
-## 安装及使用
-
-```
-- 拉取项目
-git clone https://github.com/Octoveau/vue2-template-portal.git
-
-- 进入项目
-cd vue2-template-portal
-
-- 安装依赖
-npm install
-
-- 启动
-npm run serve
-```
-
-## 其它
-
-```
-- 预打包【将ant design for vue、moment、lodash进行预打包提高编译速度】
-npm run dll
-```
-
-## commit 时的标题，后面必须代一个空格
-
-- build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
-- ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle 等)的提交
-- docs：文档更新
-- feat：新增功能
-- fix：bug 修复
-- perf：性能优化
-- refactor：重构代码(既没有新增功能，也没有修复 bug)
-- style：不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)
-- test：新增测试用例或是更新现有测试
+<h1 style="text-align: center">Vue2 Template Admin</h1>
+
+English | [简体中文](https://github.com/Octoveau/vue2-element-admin-thin/blob/main/README.zh.md)
+## Introduction
+
+Vue2 Template Admin as a middle-background template, which is developed with `vue2`, `element-ui` and other related technology stacks.   There are built-in secondary-encapsulates frequently-use components.   Refine and abstract frequently-use modules, reduce the use of `import` and `require`, improve development efficiency
+
+## Features
+
+- Module: Highly abstract, minimize the use of `import` and `require`
+- Component: Secondary-encapsulate for multiple frequently-use componen
+
+## Preparation
+
+This project is mainly based on `ES2015+`, `vue2`, `Vue-router`, `pinia`, `vue-cli@4.5.17`, `axios` and` ant design for vue `, you need to be familiar with in advance.
+
+- node and git - Project development environment
+- be acquainted with vue2 essentials syntax
+- be acquainted with webpack features, not limited to (webpackDLL, ProvidePlugin, plugin alias), etc
+- Since the project is highly abstract against typical modules such as` auth `, `utils`, etc., you need to consult the vue.config.js file beforehand
+
+## Installation and use
+
+```
+- Pull project
+git clone https://github.com/Octoveau/vue2-template-portal.git
+
+- Into the project
+cd vue2-template-portal
+
+- Installation dependency
+npm install
+
+- Start
+npm run serve
+```
+
+## Others
+```
+- Prepack [Prepack 'ant design for vue', 'moment', and 'lodash' to improve compilation speed]
+npm run dll
+```
+
+
+## commit title must followed by a space character
+
+- feat: New function
+- fix: Fixed bugs
+- config: Config changes
+- docs: Updates the document
+- refactor: Refactor the code (neither new features nor bug fixes)
+- chore: Development tool change (build scaffolding tool etc.)
\ No newline at end of file
diff --git a/README.zh-CN.md b/README.zh-CN.md
new file mode 100644
index 0000000..50bd5af
--- /dev/null
+++ b/README.zh-CN.md
@@ -0,0 +1,111 @@
+
+<h1 style="text-align: center">Vue2 Template Admin</h1>
+
+简体中文 | [English](https://github.com/Octoveau/vue2-element-admin-thin/blob/main/README.es.md)
+
+## 简介
+
+Vue2 Template Admin 作为中后台模版，其采用`vue2`，`element-ui`等相关技术栈开发。内置二次封装的常用组件，提炼并抽象化常用模块，减轻`import`与`require`的使用，提升开发效率
+
+## 特性
+
+- 模块：高度抽象，尽量减少`import`和`require`使用
+- 组件：二次封装多个常用组件
+
+## 准备
+
+本项目主要基于`ES2015+`，`vue2`，`vue-router`，`pinia`，`vue-cli@4.5.17`，`axios`及`ant design for vue`，故需要提前熟悉。
+
+- node 和 git -项目开发环境
+- 熟悉 vue2 基础语法
+- 熟悉 webpack 特性，不限于（webpackDLL、ProvidePlugin、plugin alias）等
+- 由于项目针对典型模块如`auth`，`utils`等高度抽象，需要预先查阅 vue.config.js 文件
+
+## 安装及使用
+
+```
+- 拉取项目
+git clone https://github.com/Octoveau/vue2-template-portal.git
+
+- 进入项目
+cd vue2-template-portal
+
+- 安装依赖
+npm install
+
+- 启动
+npm run serve
+```
+
+## 其它
+
+```
+- 预打包【将ant design for vue、moment、lodash进行预打包提高编译速度】
+npm run dll
+```
+
+## commit 时的标题，后面必须代一个空格
+
+- build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
+- ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle 等)的提交
+- docs：文档更新
+- feat：新增功能
+- fix：bug 修复
+- perf：性能优化
+- refactor：重构代码(既没有新增功能，也没有修复 bug)
+- style：不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)
+- test：新增测试用例或是更新现有测试
+=======
+<h1 style="text-align: center">Vue2 Template Admin</h1>
+
+## 简介
+
+Vue2 Template Admin 作为中后台模版，其采用`vue2`，`element-ui`等相关技术栈开发。内置二次封装的常规组件，提炼并抽象化常用模块，减轻`import`与`require`的使用，提升开发效率
+
+## 特性
+
+- 模块：高度抽象，尽量减少`import`和`require`使用
+- 组件：二次封装多个常用组件
+
+## 准备
+
+本项目主要基于`ES2015+`，`vue2`，`vue-router`，`pinia`，`vue-cli@4.5.17`，`axios`及`ant design for vue`，故需要提前熟悉。
+
+- node 和 git -项目开发环境
+- 熟悉 vue2 基础语法
+- 熟悉 webpack 特性，不限于（webpackDLL、ProvidePlugin、plugin alias）等
+- 由于项目针对典型模块如`auth`，`utils`等高度抽象，需要预先查阅 vue.config.js 文件
+
+## 安装及使用
+
+```
+- 拉取项目
+git clone https://github.com/Octoveau/vue2-template-portal.git
+
+- 进入项目
+cd vue2-template-portal
+
+- 安装依赖
+npm install
+
+- 启动
+npm run serve
+```
+
+## 其它
+
+```
+- 预打包【将ant design for vue、moment、lodash进行预打包提高编译速度】
+npm run dll
+```
+
+## commit 时的标题，后面必须代一个空格
+
+- feat：新增功能
+- fix：bug 修复
+- config：配置变更
+- docs：文档更新
+- refactor：重构代码(既没有新增功能，也没有修复 bug)
+- chore：开发工具变动(构建、脚手架工具等)
+- revert：代码回退
+
diff --git a/src/api/interceptors.js b/src/api/interceptors.js
index 57caaf2..00ee1e3 100644
--- a/src/api/interceptors.js
+++ b/src/api/interceptors.js
@@ -1,7 +1,7 @@
 import { Message } from 'element-ui';
 import router from '@/router';
-// eslint-disable-next-line import/no-cycle
 import refreshTokenFun from '@/utils/refreshToken';
+import authStorage from '@/utils/auth';
 
 const ERROE_MSG = '请求异常,请重试';
 const ERROR_MSG_400 = '请求参数异常';
@@ -30,7 +30,7 @@ const handleRespCode = (respData) => {
 const loginFun = () => {
   setTimeout(() => {
     router.push({
-      name: 'Login',
+      name: 'SsoLogin',
     });
   }, 600);
 };
@@ -42,10 +42,11 @@ const setupInterceptors = (request) => {
       if (whiteApi.some((url) => config.url.includes(url))) {
         return config;
       }
-      const result = await refreshTokenFun();
-      if (!result) {
-        loginFun();
-        return config;
+      if (JSON.parse(authStorage.getIsSsoLoginInfo())) {
+        if (!(await refreshTokenFun())) {
+          loginFun();
+          return config;
+        }
       }
       return config;
     },
@@ -55,7 +56,6 @@ const setupInterceptors = (request) => {
   // 响应拦截器
   request.interceptors.response.use(
     (resp) => {
-      // 从xios里取出api返回的data
       const respData = resp.data;
       handleRespCode(respData);
       if (respData.code === 401) {
diff --git a/src/api/userInfo.js b/src/api/userInfo.js
index 1c872fc..007dacc 100644
--- a/src/api/userInfo.js
+++ b/src/api/userInfo.js
@@ -1,3 +1,6 @@
 import service from './index';
 // 获取用户信息
 export const getUserInfoData = () => service.get('api/info');
+
+// get octoveau all public git projects
+export const getAllGitProjects = (user = 'octoveau') => service.get(`//api.github.com/users/${user}/repos`);
diff --git a/src/components/I18n/index.vue b/src/components/I18n/index.vue
index f38dd70..afac427 100644
--- a/src/components/I18n/index.vue
+++ b/src/components/I18n/index.vue
@@ -6,7 +6,7 @@
 !-->
 <template>
   <div class="i18n-container">
-    <el-dropdown trigger="click" placement="bottom">
+    <el-dropdown placement="bottom">
       <span class="el-dropdown-link">
         <i role="img" class="el-icon-s-comment"></i>
       </span>
@@ -25,7 +25,7 @@ export default {
     return {
       lang: localStorage.getItem('lang') || 'zh',
       langOptions: [
-        { lang: 'zh', label: '中文' },
+        { lang: 'zh', label: '简体中文' },
         { lang: 'en', label: 'English' },
       ],
     };
@@ -48,6 +48,5 @@ export default {
 i {
   font-size: 0.225rem;
   line-height: 0.6rem;
-  color: #fff;
 }
 </style>
diff --git a/src/components/PageHeader/index.vue b/src/components/PageHeader/index.vue
new file mode 100644
index 0000000..7f1be0d
--- /dev/null
+++ b/src/components/PageHeader/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="page-header-container">
+    <slot name="content"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
diff --git a/src/css/element.less b/src/css/element.less
index 39b0bcd..d005fff 100644
--- a/src/css/element.less
+++ b/src/css/element.less
@@ -5,8 +5,8 @@
 .el-header {
   padding: 0 !important;
   color: #333;
-  border-bottom: solid 1px #e6e6e6;
   line-height: 0.75rem;
+  border-bottom: 1px solid #eee;
 }
 
 .el-aside {
@@ -21,10 +21,8 @@
 }
 
 .el-main {
-  text-align: center;
   color: #333;
   background-color: #e9eef3;
-  line-height: 2rem;
 }
 
 .el-menu {
diff --git a/src/css/index.less b/src/css/index.less
index c8f063c..69e088a 100644
--- a/src/css/index.less
+++ b/src/css/index.less
@@ -2,6 +2,7 @@
 @import url("./reset.less");
 @import url("./element.less");
 @import url("./transition.less");
+@import url("./public.less");
 
 //修改浏览器默认样式
 ::-webkit-scrollbar {
diff --git a/src/css/public.less b/src/css/public.less
new file mode 100644
index 0000000..fe00d62
--- /dev/null
+++ b/src/css/public.less
@@ -0,0 +1,3 @@
+.public-content__padding {
+  padding: 0.25rem;
+}
\ No newline at end of file
diff --git a/src/css/reset.less b/src/css/reset.less
index 2069d42..71f37f2 100644
--- a/src/css/reset.less
+++ b/src/css/reset.less
@@ -4,7 +4,6 @@
   padding: 0;
   margin: 0;
   font-size: 0.175rem;
-  font-weight: 400;
 }
 
 html,
diff --git a/src/layouts/content/index.vue b/src/layouts/content/index.vue
index 41bc690..0d50887 100644
--- a/src/layouts/content/index.vue
+++ b/src/layouts/content/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="main-container">
-    <bread-crumb />
+    <div class="tab-page-container">
+      <span>这里是标签页</span>
+    </div>
     <div class="main-content">
       <router-view />
     </div>
@@ -8,12 +10,7 @@
 </template>
 
 <script>
-import BreadCrumb from '@components/BreadCrumb';
-
 export default {
-  components: {
-    BreadCrumb,
-  },
   data() {
     return {};
   },
@@ -29,13 +26,17 @@ export default {
 <style lang="less" scoped>
 .main-container {
   position: relative;
-  margin: 0 0 0.15rem 0.3rem;
-  width: calc(100% - 0.6rem);
-  height: calc(100% - 0.3rem);
+
+  .tab-page-container {
+    padding: 0 5px;
+    height: 0.375rem;
+    text-align: left;
+    background-color: #fff;
+    border-bottom: 1px solid #eee;
+    line-height: 0.375rem;
+  }
 
   .main-content {
-    width: 100%;
-    height: calc(100% - 0.45rem);
     border-radius: 5px;
   }
 }
diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index ffa6657..5f0086d 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -7,6 +7,9 @@
       <div class="collapse-icon">
         <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="handleChangeCollapse"></i>
       </div>
+      <div class="bread-crumb-content">
+        <bread-crumb />
+      </div>
     </div>
     <div class="header-title-right">
       <!-- i18n -->
@@ -15,7 +18,7 @@
       <div class="header-logout header-title-right__item">
         <el-dropdown>
           <span class="el-dropdown-link">
-            <svg-icon icon-class="user" style="color: #fff" class="user-icon" />
+            <svg-icon icon-class="user" class="user-icon" />
             <span>{{ userName }}</span>
           </span>
           <el-dropdown-menu slot="dropdown">
@@ -33,11 +36,12 @@
 </template>
 
 <script>
+import BreadCrumb from '@components/BreadCrumb';
 import { mapState, mapMutations } from 'vuex';
 import I18nComp from '@components/I18n';
 
 export default {
-  components: { I18nComp },
+  components: { I18nComp, BreadCrumb },
   data() {
     return {
       userName: 'Admin',
@@ -81,22 +85,29 @@ export default {
 
   .header-title-left {
     display: flex;
+    align-items: center;
 
     .header-title {
       width: 200px;
       text-align: center;
-      color: #fff;
-      font-weight: bold;
+      color: #0960bd;
+      font-weight: 700;
     }
 
     .collapse-icon {
+      padding-left: 5px;
+
       i {
         font-size: 0.225rem;
-        color: #fff;
+        color: #000;
         line-height: 0.6rem;
         cursor: pointer;
       }
     }
+
+    .bread-crumb-content {
+      margin-left: 15px;
+    }
   }
 
   .header-title-right {
@@ -108,9 +119,10 @@ export default {
 
     .header-title-right__item {
       padding: 0 8px;
+      cursor: pointer;
 
       &:hover {
-        background-color: #33383d;
+        background-color: #f6f6f6;
       }
     }
   }
@@ -125,7 +137,6 @@ export default {
     display: flex;
     align-items: center;
     cursor: pointer;
-    color: #fff;
 
     .user-icon {
       margin-right: 12px;
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index d93df00..0bc32f6 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -40,7 +40,6 @@ export default {
 ::v-deep .el-header {
   height: 0.6rem !important;
   line-height: 0.6rem !important;
-  background-color: #001529;
   border: 0;
 }
 </style>
diff --git a/src/main.js b/src/main.js
index 3b2c49b..225f3f3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import ElementUI from 'element-ui';
+import authStorage from '@/utils/auth';
 import Vue from 'vue';
 import i18n from '@/lang';
 import App from './App';
@@ -6,6 +7,8 @@ import router from './router';
 import store from './store';
 import './config';
 
+// 初始化使用普通登录
+authStorage.setIsSsoLoginInfo(false);
 Vue.config.productionTip = false;
 Vue.use(ElementUI);
 new Vue({
diff --git a/src/router/config/router.guards.js b/src/router/config/router.guards.js
index 7394025..ad79b5d 100644
--- a/src/router/config/router.guards.js
+++ b/src/router/config/router.guards.js
@@ -6,7 +6,7 @@ import refreshTokenFun from '@/utils/refreshToken';
 class RouterGuards {
   constructor(router) {
     this.router = router;
-    this.whiteRouter = ['Login', 'Logout'];
+    this.whiteRouter = ['Login', 'Logout', 'SsoLogin'];
   }
 
   // 初始化调用全部方法
@@ -21,7 +21,7 @@ class RouterGuards {
       const loginFun = () => {
         setTimeout(() => {
           this.router.push({
-            name: 'Login',
+            name: 'SsoLogin',
           });
         }, 600);
       };
@@ -33,17 +33,17 @@ class RouterGuards {
         // 判断是否登录，如果没登录，需要先跳转到登录
         if (!authStorage.getUserInfo()) {
           const { fullPath } = to;
-          return next(`/login?redirecturl=${fullPath}`);
+
+          JSON.parse(authStorage.getIsSsoLoginInfo()) ? next(`/sso-login?redirecturl=${fullPath}`) : next(`/login?redirecturl=${fullPath}`);
+          return;
         }
         // 判断是否需要刷新
-        const result = await refreshTokenFun();
-        if (result) {
-          next();
-        } else {
-          loginFun();
+        if (JSON.parse(authStorage.getIsSsoLoginInfo())) {
+          (await refreshTokenFun()) ? next() : loginFun();
+          return;
         }
+        next();
       }
-      return true;
     });
   }
 
diff --git a/src/router/login.js b/src/router/login.js
index a7c7c05..38d62e4 100644
--- a/src/router/login.js
+++ b/src/router/login.js
@@ -7,6 +7,14 @@ const loginRoutes = [
     },
     component: () => import('@/views/login/login'),
   },
+  {
+    path: '/sso-login',
+    name: 'SsoLogin',
+    meta: {
+      title: '登录',
+    },
+    component: () => import('@/views/login/ssoLogin'),
+  },
   {
     path: '/logout',
     name: 'Logout',
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 145fd49..4241e8f 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -2,6 +2,7 @@ import storage from './storage';
 
 const USERINFO_KEY = 'user_info';
 const TOKEN_INFO = 'token_info';
+const IS_SSO_LOGIN = 'isSsoLogin';
 
 class Auth {
   #userInfo = ((e) => {
@@ -51,6 +52,16 @@ class Auth {
   removeTokenInfo() {
     storage.removeStorage(TOKEN_INFO);
   }
+
+  // 写入是否是ssologin的标识
+  setIsSsoLoginInfo(value) {
+    storage.setStorage(IS_SSO_LOGIN, value);
+  }
+
+  // 写入是否是ssologin的标识
+  getIsSsoLoginInfo() {
+    return storage.getStorage(IS_SSO_LOGIN);
+  }
 }
 
 export default new Auth();
diff --git a/src/utils/storage.js b/src/utils/storage.js
index 4334cf3..36616ad 100644
--- a/src/utils/storage.js
+++ b/src/utils/storage.js
@@ -1,4 +1,4 @@
-const __SESSION__ = sessionStorage;
+const __SESSION__ = window.sessionStorage;
 
 class Storage {
   setStorage(key, value) {
diff --git a/src/views/DashBoard/index.vue b/src/views/DashBoard/index.vue
index 1b63e14..2a99bbd 100644
--- a/src/views/DashBoard/index.vue
+++ b/src/views/DashBoard/index.vue
@@ -1,19 +1,209 @@
 <template>
-  <div>dashboard</div>
+  <div class="workspace-container">
+    <page-header>
+      <template slot="content">
+        <div class="workspace-title">
+          <div class="workspace-left">
+            <div class="workspace-left__image">
+              <el-avatar size="large" :src="avatar"></el-avatar>
+            </div>
+            <div class="workspace-left__content">
+              <p>早安，{{ user }}</p>
+              <p>今日晴，20℃ - 32℃！</p>
+            </div>
+          </div>
+          <div class="workspace-right">
+            <div class="workspace-right-list">
+              <div v-for="(item, index) in signList" :key="index" class="workspace-right-li">
+                <div class="workspace-right-li__title">{{ item.label }}</div>
+                <div class="workspace-right-li__number">{{ item.value }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </page-header>
+    <div class="public-content__padding workspace-content">
+      <div class="workspace-content-major">
+        <div class="project-group-container">
+          <el-card shadow="never" :body-style="{ padding: '0px' }">
+            <div slot="header" class="clearfix">
+              <span style="font-size: 0.2rem">项目</span>
+              <el-button type="text" style="float: right; padding: 3px 0">查看更多</el-button>
+            </div>
+            <el-row>
+              <el-col v-for="(item, index) in 6" :key="index" :span="8">
+                <el-card shadow="hover" class="project-item-content">
+                  <div class="project-item">
+                    <div class="project-item__title">
+                      <el-avatar size="large" :src="avatar"></el-avatar>
+                      <span class="project-name">Hello world</span>
+                    </div>
+                    <div class="project-item__description">
+                      <span>这里是项目的description</span>
+                    </div>
+
+                    <div class="project-item__footer">
+                      <div class="project-belong-from">
+                        <span>前端</span>
+                      </div>
+                      <div class="project-create-time">
+                        <span>2022-12-04</span>
+                      </div>
+                    </div>
+                  </div>
+                </el-card>
+              </el-col>
+            </el-row>
+          </el-card>
+        </div>
+        <div class="dynamic-group-container"></div>
+      </div>
+      <div class="workspace-content-secondary"></div>
+    </div>
+  </div>
 </template>
 
 <script>
+import PageHeader from '@components/PageHeader';
+
 export default {
+  components: { PageHeader },
   data() {
-    return {};
+    return {
+      avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+      user: 'super Admin',
+      signList: [
+        { value: '1/20', label: '待办事项' },
+        { value: '6', label: '成员' },
+        { value: '10', label: '项目' },
+      ],
+    };
   },
 
   computed: {},
 
-  mounted() {
-    console.log('test fork');
-  },
-
   methods: {},
 };
 </script>
+
+<style lang="less" scoped>
+.workspace-container {
+  .workspace-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.2rem 0.3rem;
+    background-color: #fff;
+
+    span {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .workspace-left {
+      display: flex;
+      align-items: center;
+
+      &__image {
+        margin-right: 10px;
+      }
+
+      &__content {
+        p {
+          &:first-child {
+            margin-bottom: 10px;
+            font-size: 18px;
+            font-weight: bold;
+          }
+
+          &:last-child {
+            color: #8d8d8d;
+          }
+        }
+      }
+    }
+
+    .workspace-right {
+      padding-right: 0.375rem;
+
+      .workspace-right-list {
+        display: flex;
+
+        .workspace-right-li {
+          display: flex;
+          flex-direction: column;
+          text-align: right;
+
+          &:not(:last-child) {
+            padding-right: 40px;
+          }
+
+          &__title {
+            font-size: 0.175rem;
+          }
+
+          &__number {
+            font-size: 0.275rem;
+          }
+        }
+      }
+    }
+  }
+
+  .workspace-content {
+    display: flex;
+
+    .workspace-content-major {
+      margin: 0 0.25rem 0.25rem 0;
+      width: 13.75rem;
+      height: 6.25rem;
+
+      ::v-deep(.el-card) {
+        border: none;
+      }
+
+      .project-group-container {
+        .el-card {
+          border-radius: 0;
+        }
+
+        .project-item-content {
+          cursor: pointer;
+          border-radius: 0;
+
+          &:nth-child(3n) {
+            border-right: 1px solid #e8e8e8;
+            border-bottom: 1px solid #e8e8e8;
+          }
+
+          .project-item {
+            &__title {
+              display: flex;
+              align-items: center;
+
+              span.project-name {
+                margin-left: 0.125rem;
+                font-size: 0.2rem;
+                font-weight: bold;
+              }
+            }
+
+            &__description {
+              margin-top: 0.125rem;
+              color: #8d8d8d;
+            }
+
+            &__footer {
+              display: flex;
+              justify-content: space-between;
+              margin-top: 0.375rem;
+              color: #8d8d8d;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index 216564a..b5d1cc5 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -1,70 +1,335 @@
 <template>
-  <section
-    v-loading="isLoading"
-    class="section"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    element-loading-text="获取数据中..."
-    element-loading-spinner="el-icon-loading"
-  ></section>
+  <div class="login-container">
+    <div class="section">
+      <div class="div-image">
+        <el-image class="image" :src="logo"></el-image>
+      </div>
+      <div class="div-form">
+        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
+          <div class="title-container">
+            <h3 class="title">Vue2 Template Portal 登录界面</h3>
+          </div>
+          <el-form-item prop="username">
+            <span class="svg-container">
+              <svg-icon icon-class="user" />
+            </span>
+            <el-input
+              ref="username"
+              v-model.trim="loginForm.username"
+              placeholder="Username"
+              name="username"
+              type="text"
+              tabindex="1"
+              autocomplete="on"
+            />
+          </el-form-item>
+
+          <el-form-item prop="password">
+            <span class="svg-container">
+              <svg-icon icon-class="password" />
+            </span>
+            <el-input
+              :key="passwordType"
+              ref="password"
+              v-model.trim="loginForm.password"
+              :type="passwordType"
+              placeholder="Password"
+              name="password"
+              tabindex="2"
+              autocomplete="on"
+              @keyup.enter.native="handleLogin"
+            />
+            <span class="show-pwd" @click="showPwd">
+              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+            </span>
+          </el-form-item>
+          <el-button :loading="loading" type="primary" style="margin-bottom: 0.2rem; width: 100%" @click.native.prevent="handleLogin">登录</el-button>
+
+          <div style="position: relative">
+            <div class="tips">
+              <span style="margin-right: 0.2rem">Username : admin</span>
+              <span>Password : admin</span>
+            </div>
+            <div class="sso-btn">
+              <a href="#" class="a-btn" @click="onGotoSsoLogin"
+                >点击进行单点登录<span> <i class="el-icon-s-unfold"></i></span
+              ></a>
+            </div>
+          </div>
+        </el-form>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { getOpenToken, getUserInfoByToken } from '@/api/auth';
+import logo from '@/assets/images/pic3.png';
 import authStorage from '@/utils/auth';
 
 export default {
+  name: 'Login',
   data() {
     return {
-      isLoading: true,
-      loginConfig: {
-        siteKey: process.env.VUE_APP_TARGET_SITE_KEY,
-        siteSecret: process.env.VUE_APP_TARGET_SITE_SECRET,
-        ticket: '',
+      redirectPath: '',
+      timer: null,
+      logo,
+      loginForm: {
+        username: 'admin',
+        password: 'admin',
       },
+      loginRules: {
+        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
+      },
+      passwordType: 'password',
+      loading: false,
     };
   },
-  mounted() {
-    this.loginConfig.ticket = this.$route.query.ticket || '';
-    this.hanldeLogin();
+  created() {
+    this.redirectPath = this.$route.query?.redirecturl || '';
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
   },
   methods: {
-    hanldeLogin() {
-      // 已经登录成功
-      if (this.loginConfig.ticket) {
-        getOpenToken(this.loginConfig).then((res) => {
-          if (res.code === 200) {
-            authStorage.setTokenInfo(res.data);
-            this.getUserInfo(res.data.token);
-          }
+    onGotoSsoLogin() {
+      this.$confirm('如果还没在sso平台进行注册,请先进行用户注册?', '提示', {
+        confirmButtonText: '登录',
+        cancelButtonText: '前往注册',
+        type: 'warning',
+      })
+        .then(() => {
+          // 切换登录方式
+
+          this.$router.push({
+            name: 'SsoLogin',
+          });
+        })
+        .catch(() => {
+          window.open('http://www.octoveau.cn/sso-login/', '_blank');
         });
-        return;
+    },
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = '';
+      } else {
+        this.passwordType = 'password';
       }
-      // 需要跳转到单点登录平台
-      const fullPath = this.$route.query.redirecturl;
-      fullPath
-        ? window.location.replace(`http://www.octoveau.cn/sso-login/openLogin/${this.loginConfig.siteKey}?redirecturl=${fullPath}`)
-        : window.location.replace(`http://www.octoveau.cn/sso-login/openLogin/${this.loginConfig.siteKey}`);
+      this.$nextTick(() => {
+        this.$refs.password.focus();
+      });
     },
-    getUserInfo(token) {
-      getUserInfoByToken(token).then((res) => {
-        authStorage.setUserInfo(res.data);
-        const fullPath = this.$route.query.redirecturl;
-        if (fullPath) {
-          this.$router.push(`${fullPath}`);
-          return;
+    handleLogin() {
+      this.loading = true;
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          // 模拟延迟请求
+          this.timer = setTimeout(() => {
+            if (this.loginForm.username === 'admin' && this.loginForm.password === 'admin') {
+              authStorage.setUserInfo(this.loginForm);
+              // 进行跳转
+              if (this.redirectPath) {
+                this.$message.success('登录成功');
+                this.$router.push(this.redirectPath);
+              } else {
+                this.$router.push({
+                  name: 'DashBoard',
+                });
+              }
+            } else {
+              this.$message.warning('请输入正确的账号或者密码');
+            }
+            this.loading = false;
+          }, 2000);
         }
-        this.$router.push({
-          name: 'DashBoard',
-        });
       });
     },
   },
 };
 </script>
+<style lang="less">
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    width: 2.5rem;
+    height: 0.5rem;
+
+    input {
+      padding: 0.15rem 0.0625rem 0.15rem 0.1875rem;
+      height: 0.5rem;
+      color: #fff;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      appearance: none;
+      caret-color: #fff;
 
+      &:-webkit-autofill {
+        box-shadow: 0 0 0 12.5rem #fff inset !important;
+        -webkit-text-fill-color: #fff !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    color: #454545;
+    background: rgba(0, 0, 0, 10%);
+    border: 1px solid rgba(255, 255, 255, 10%);
+    border-radius: 5px;
+  }
+}
+</style>
 <style lang="less" scoped>
-.section {
-  width: 100vw;
-  height: 100vh;
+.login-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  min-height: 100%;
+  background-position: top;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image: url('../../assets/images/back.jpg');
+
+  .section {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    box-shadow: 5px 5px 10px #100f0f;
+    transform: translate(-50%, -50%);
+
+    .div-image {
+      padding: 0.2rem;
+      padding-right: 1rem;
+      background-color: rgba(255, 255, 255);
+      clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
+
+      .image {
+        width: 6rem;
+      }
+    }
+
+    .div-form {
+      padding-left: 2.125rem;
+      margin-left: -2.125rem;
+      background-color: rgba(34, 34, 34, 80%);
+
+      .login-form {
+        position: relative;
+        overflow: hidden;
+        padding: 1rem 0.375rem;
+        margin: 0 auto;
+        width: 5rem;
+        max-width: 100%;
+      }
+
+      .tips {
+        margin-bottom: 0.1rem;
+        font-size: 0.175rem;
+        color: #fff;
+
+        span {
+          &:first-of-type {
+            margin-right: 0.2rem;
+          }
+        }
+      }
+
+      .sso-btn {
+        ::v-deep .el-icon-s-unfold {
+          font-size: 0.3rem;
+          color: #fff;
+        }
+
+        .a-btn {
+          position: relative;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+          width: 5rem;
+          height: 60px;
+          text-decoration: none;
+          color: #fff;
+          background: rgba(255, 255, 255, 10%);
+          border-radius: 60px;
+          transition: 0.5s;
+          letter-spacing: 2px;
+          border-top: 0.5px solid rgba(255, 255, 255, 35%);
+          border-left: 0.5px solid rgba(255, 255, 255, 35%);
+        }
+
+        .a-btn:hover {
+          color: #409eff;
+          font-weight: 700;
+        }
+
+        .a-btn span {
+          position: absolute;
+          left: 5px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 50px;
+          height: 50px;
+          font-size: 1.5em;
+          color: #1a191d;
+          background: #409eff;
+          border-radius: 50%;
+          transition: 0.5s ease-in-out;
+        }
+
+        .a-btn:hover span {
+          left: calc(100% - 55px);
+        }
+
+        .a-btn::after {
+          position: absolute;
+          z-index: 1;
+          width: 80px;
+          height: 100%;
+          background: rgba(255, 255, 255, 25%);
+          transition: 0.75s ease-in-out;
+          content: '';
+          transform: translateX(-170px) skew(30deg);
+        }
+
+        .a-btn:hover::after {
+          transform: translateX(170px) skew(30deg);
+        }
+      }
+
+      .svg-container {
+        display: inline-block;
+        padding: 6px 5px 6px 15px;
+        width: 0.2rem;
+        color: rgb(83, 81, 81);
+        vertical-align: middle;
+      }
+
+      .title-container {
+        position: relative;
+
+        .title {
+          margin: 0 auto 0.5rem;
+          font-size: 0.325rem;
+          text-align: center;
+          color: #fff;
+          font-weight: bold;
+        }
+      }
+
+      .show-pwd {
+        position: absolute;
+        top: 0.0875rem;
+        right: 0.125rem;
+        font-size: 0.2rem;
+        color: #fff;
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/login/logout.vue b/src/views/login/logout.vue
index a854a83..6a8c0a3 100644
--- a/src/views/login/logout.vue
+++ b/src/views/login/logout.vue
@@ -20,7 +20,7 @@ export default {
       const tokenInfo = JSON.parse(authStorage.getTokenInfo());
       authStorage.removeUserInfo();
       authStorage.removeTokenInfo();
-      if (tokenInfo) {
+      if (JSON.parse(authStorage.getIsSsoLoginInfo())) {
         // 组装数据跳转到sso登出系统
         window.location.replace(`http://www.octoveau.cn/sso-login/openLogout/${tokenInfo.token}?sitekey=${this.siteKey}`);
       } else {
diff --git a/src/views/login/ssoLogin.vue b/src/views/login/ssoLogin.vue
new file mode 100644
index 0000000..17963f3
--- /dev/null
+++ b/src/views/login/ssoLogin.vue
@@ -0,0 +1,72 @@
+<template>
+  <section
+    v-loading="isLoading"
+    class="section"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    element-loading-text="获取数据中..."
+    element-loading-spinner="el-icon-loading"
+  ></section>
+</template>
+
+<script>
+import { getOpenToken, getUserInfoByToken } from '@/api/auth';
+import authStorage from '@/utils/auth';
+
+export default {
+  name: 'SsoLogin',
+  data() {
+    return {
+      isLoading: true,
+      loginConfig: {
+        siteKey: process.env.VUE_APP_TARGET_SITE_KEY,
+        siteSecret: process.env.VUE_APP_TARGET_SITE_SECRET,
+        ticket: '',
+      },
+    };
+  },
+  mounted() {
+    authStorage.setIsSsoLoginInfo(true);
+    this.loginConfig.ticket = this.$route.query.ticket || '';
+    this.hanldeLogin();
+  },
+  methods: {
+    hanldeLogin() {
+      // 已经登录成功
+      if (this.loginConfig.ticket) {
+        getOpenToken(this.loginConfig).then((res) => {
+          if (res.code === 200) {
+            authStorage.setTokenInfo(res.data);
+            this.getUserInfo(res.data.token);
+          }
+        });
+        return;
+      }
+      // 需要跳转到单点登录平台
+      const fullPath = this.$route.query.redirecturl;
+      fullPath
+        ? window.location.replace(`http://www.octoveau.cn/sso-login/openLogin/${this.loginConfig.siteKey}?redirecturl=${fullPath}`)
+        : window.location.replace(`http://www.octoveau.cn/sso-login/openLogin/${this.loginConfig.siteKey}`);
+    },
+    getUserInfo(token) {
+      getUserInfoByToken(token).then((res) => {
+        authStorage.setUserInfo(res.data);
+        const fullPath = this.$route.query.redirecturl;
+        if (fullPath) {
+          this.$router.push(`${fullPath}`);
+          return;
+        }
+        this.$router.push({
+          name: 'DashBoard',
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.section {
+  width: 100vw;
+  height: 100vh;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index 3eb9b6f..e3b4bca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10879,6 +10879,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-i18n@^8.28.2:
+  version "8.28.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.28.2.tgz#913558066e274395c0a9f40b2f3393d5c2636840"
+  integrity sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA==
+
 "vue-loader-v16@npm:vue-loader@^16.1.0":
   version "16.8.3"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.3.tgz#d43e675def5ba9345d6c7f05914c13d861997087"