增加时钟组件、随机图片

public/static/css/main.css

@@ -2895,7 +2895,6 @@ button:focus {
 .user_Img img {
 	max-width: 100px;
 	max-height: 100px;
-	cursor: pointer;
 }
 
 .userNamelabel {
@@ -3060,6 +3059,9 @@ button:focus {
 .eidtimg {
 	position: relative;
 }
+.eidtimg > img {
+	cursor: pointer;
+}
 
 .eidtimg>div {
 	position: absolute;

public/static/img/avator_default.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>模块/基本组件/头像备份</title>
+    <defs>
+        <circle id="path-1" cx="50" cy="50" r="50"></circle>
+    </defs>
+    <g id="模块/基本组件/头像备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="Mask" fill="#D1D1D6" xlink:href="#path-1"></use>
+        <g id="Avatar" mask="url(#mask-2)">
+            <rect id="BG" x="0" y="0" width="100" height="100"></rect>
+            <path d="M100,99.3078825 L100,100 L1.66030665,100 C5.23100363,91.9169982 13.6306985,89.1904249 20.7769733,86.8083333 C21.1603171,86.6805521 21.5478067,86.5791667 21.91864,86.4666667 C32.8269733,83.1208333 35.4353067,80.225 36.41864,77.0291667 C38.2269733,76.2208333 38.9019733,75.6666667 39.2603067,73.7458333 C39.4853067,72.525 39.6603067,68.4291667 39.4894733,67.0083333 C38.45614,66 37.89364,63.4041667 37.39364,62.3666667 C36.2353067,59.9666667 36.03114,58.725 34.91864,54.6875 C34.7478067,54.1458333 34.38114,54.1125 34.1228067,54.0083333 C33.7353067,53.8458333 33.3978067,53.5875 33.0394733,53.1 C32.0269733,51.7291667 32.6603067,50.9541667 31.7103067,48.35 C30.5019733,45.3875 30.0144733,42.4625 30.9353067,41.5875 C31.55614,41.0333333 31.9728067,41.3916667 32.2769733,41.5041667 C32.4769733,41.5791667 32.3228067,41.075 32.14364,40.3458333 C31.4144733,37.3625 31.3728067,31.4125 31.3728067,31.4125 C31.1103067,28.9208333 31.1978067,26.6291667 32.8478067,23.1541667 C34.4728067,19.6041667 35.9269733,20.3875 36.74364,19.475 C40.1894733,15.5958333 43.35614,15.4958333 45.7353067,14.4708333 C51.08114,12.1625 55.5894733,14.2083333 59.19364,15.7166667 C60.7103067,16.3708333 65.13114,16.875 66.60614,20.1375 C67.46864,22.0375 68.2228067,25.2833333 68.5144733,25.575 C68.8228067,26.975 68.9894733,29.2333333 68.83114,31.7083333 C68.6353067,34.7666667 68.63114,37.2958333 67.90614,40.2791667 C67.7228067,41.0041667 67.5644733,41.5125 67.76864,41.4333333 C68.0728067,41.3208333 68.4519733,40.9083333 69.0728067,41.4625 C69.9894733,42.3375 69.8019733,45.3875 68.59364,48.35 C67.6478067,50.9541667 68.16864,51.4333333 67.5644733,52.5 C67.30614,52.9666667 67.1269733,53.5958333 66.34364,53.8791667 C66.0853067,53.975 65.76864,54.2041667 65.6478067,54.7625 C64.80614,58.6875 64.59364,59.4041667 63.7103067,62.35 C63.38114,63.45 62.6269733,65.8208333 61.63114,66.7541667 C61.4228067,68.4416667 61.9144733,72.7708333 62.1978067,73.7458333 C62.85614,76.0291667 63.4853067,76.475 64.76864,77.0291667 C66.3478067,80.3291667 67.5644733,84.6333333 79.6728067,86.5583333 C80.2228067,86.6458333 80.79364,86.7291667 81.3894733,86.8083333 C82.0779768,86.8998128 89.6948448,90.1178715 91.24364,91.6666667 C93.9380911,94.3611178 97.0681463,96.8377669 100,99.3078825 Z" fill="#E5E5EA"></path>
+        </g>
+    </g>
+</svg>

src/components/app-header/app-header.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="app-header" :class="{ white: theme === 'white' || isWindowScrollIng, black: theme === 'black' }">
+    <div class="app-header-content">
+      <div class="app-header-content-left">
+        <slot name="left">
+          <i class="yiyun_icon app-header-back-btn" :class="{ icon_topback_left: theme === 'white', icon_topback_left_baise: theme === 'black' }" @click="navBack()" v-show="showBackBtn" />
+          <span class="back_title" @click="navBack()" v-show="backBtnTitle">{{backBtnTitle}}</span>
+        </slot>
+      </div>
+      <div class="app-header-content-right">
+        <slot name="right"></slot>
+        <user-center v-if="showUserCenter" />
+      </div>
+    </div>
+    <div class="app-header-center">
+      <slot name="center">{{title}}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import UserCenter from './components/user_center';
+export default {
+  components: {
+    UserCenter,
+  },
+  props: {
+    // 主题 默认为灰色
+    theme: String, // 'white' | 'black' | 'gray'
+    /* 左侧返回箭头 */
+    showBackBtn: Boolean,
+    /* 左侧返回文案 */
+    backBtnTitle: String,
+    // 左侧返回模块事件自定义
+    onBackBtnClick: Function,
+    // 中间标题
+    title: String,
+    // 右侧
+    showUserCenter: Boolean,
+  },
+  data() {
+    return {
+      isWindowScrollIng: false,
+    };
+  },
+  mounted: function () {
+    // 监听滚动事件 视情况判断是否要增加可以不监听滚动的入参
+    window.addEventListener("scroll", this.handleScroll.bind(this), true);
+  },
+  methods: {
+    navBack() {
+      if(this.onBackBtnClick) {
+        this.onBackBtnClick();
+        return;
+      }
+      this.$router.go(-1);
+    },
+    /**
+     * 检测bigbody滚动距离添加样式
+     */
+    handleScroll: function () {
+      let scrollBody = document.getElementById("bigbody");
+      // let scrollnav = document.getElementById("bignav");
+      this.isWindowScrollIng = scrollBody.scrollTop > 0;
+    },
+  },
+  beforeDestroy() {
+    // 销毁监听
+    window.removeEventListener("scroll", this.handleScroll);
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@mixin setOnelineHeight($v) {
+  height: $v;
+  line-height: $v;
+}
+.black {
+  color: #fff;
+}
+.white {
+  background-color: rgba(252, 252, 252, 1);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
+  
+}
+.app-header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+  @include setOnelineHeight($app-header-height);
+
+  &-content {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+    width: 100%;
+    padding: 0 64px;
+    font-size: $font-level-7;
+    &-right {
+      > span, > div {
+        margin-left: 24px;
+      }
+    }
+  }
+  &-center {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: $font-level-6;
+    @include setOnelineHeight($app-header-height);
+  }
+}
+.app-header-back-btn {
+  position: absolute;
+  left: 36px;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+}
+</style>

src/components/app-header/components/nav.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="app-nav">
+    <div
+      class="app-nav-item"
+      v-for="navItem in list"
+      :key="navItem.key"
+      :class="{ 'app-nav-item-active': navItem.key === currentKey }"
+      @click="goto(navItem.key)"
+    >
+      {{navItem.label}}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: Array,
+  },
+  data(){
+    return {
+      currentKey: this.$route.name,
+    }
+  },
+  methods: {
+    goto(name) {
+      this.$router.push({ name });
+    }
+  },
+  watch: {
+    $route(to) {
+      this.currentKey = to.name;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .app-nav-item {
+    display: inline-block;
+    vertical-align: top;
+    padding: 0 30px;
+    cursor: pointer;
+    &.app-nav-item-active {
+      border-bottom: 2px solid #8C00FF;
+    }
+  }
+</style>

src/components/custom-header/components/user_center.vue → src/components/app-header/components/user_center.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user_center">
     <i
-      class="Cicon midIcon icon font_family icon-gerenshezhi"
+      class="Cicon icon font_family icon-gerenshezhi"
       title="系统设置"
       @click="openSetPain"
     />
@@ -1070,7 +1070,6 @@ export default {
   },
   async mounted() {
     const userInfo = await getUserInfo(this.$store.state.accountId);
-    console.log(userInfo);
     this.user = userInfo;
   },
   data() {

src/components/app-header/index.js

@@ -0,0 +1 @@
+export { default } from './app-header';

src/components/custom-header/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="yiyun_headerbox" :class="{ white: theme === 'white', black: theme === 'black'  }">
+  <div class="yiyun_headerbox" :class="{ white: theme === 'white', black: theme === 'black', scorllbaron: isWindowScrollIng }">
     <!-- :class="isPage_workspace||isHead_display?'header_t':'header_w'" -->
     <div><!-- class="bg_f0" -->
       <div class="yiyun_warpContent">
@@ -20,10 +20,11 @@
               </div>
             </div>
           </div>
-          <div class="yiyun-col-4">
-            <div class="yiyun_headerfr_item_r">
-              <user-center v-if="showUserCenter" />
+          <div class="yiyun-col-4 right">
+            <div class="yiyun_row">
               <slot name="right" />
+              <user-center v-if="showUserCenter" />
+            </div>
               <!-- <div>
                 <span @click="openSetPain">
                   <i class="Cicon midIcon icon font_family icon-gerenshezhi" title="系统设置"></i>
@@ -32,7 +33,6 @@
                   <i class="Cicon midIcon icon font_family icon-icon_huishouzhan" title="回收站"></i>
                 </span>
               </div>-->
-            </div>
           </div>
         </div>
       </div>
@@ -42,7 +42,7 @@
 
 <script>
 import Vue from "vue";
-import UserCenter from './components/user_center';
+import UserCenter from '../app-header/components/user_center';
 
 export default {
   components: {
@@ -63,10 +63,13 @@ export default {
   },
   data() {
     return {
+      isWindowScrollIng: false,
       noop: () => {},
     };
   },
   mounted: function () {
+    // 监听滚动事件
+    window.addEventListener("scroll", this.handleScroll.bind(this), true);
     // 隐藏消息通知
     // if (sessionStorage.userId && sessionStorage.userId != '') {
     //   this.setTip();
@@ -75,6 +78,14 @@ export default {
     // setInterval(this.loadMsg, 6 * 10000);
   },
   methods: {
+    /**
+     * 检测bigbody滚动距离添加样式
+     */
+    handleScroll: function () {
+      let scrollBody = document.getElementById("bigbody");
+      // let scrollnav = document.getElementById("bignav");
+      this.isWindowScrollIng = scrollBody.scrollTop > 0;
+    },
     navBack() {
       if(this.onBackBtnClick) {
         this.onBackBtnClick();
@@ -83,13 +94,17 @@ export default {
       this.$router.go(-1);
     },
   },
+  beforeDestroy() {
+    // 销毁监听
+    window.removeEventListener("scroll", this.handleScroll);
+  },
   watch: {
     
   },
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .black {
     color: #fff;
   }
@@ -101,5 +116,19 @@ export default {
     vertical-align: top;
     min-height: 10px;
     float: none;
+    &.right {
+      height: 48px;
+      .yiyun_row {
+        display: flex;
+        height: 100%;
+        justify-content: flex-end;
+        align-items: center;
+        > span, div {
+          flex: none;
+          margin-left: 24px;
+        }
+      }
+      
+    }
   }
 </style>

src/filters/resolveAvator.js

@@ -1,3 +1,3 @@
 import { getFileUrl } from '@/services/oss';
 
-export default imgSrc => getFileUrl(imgSrc) || '/static/img/avator_default.jpg';
+export default imgSrc => getFileUrl(imgSrc) || '/static/img/avator_default.svg';

src/global.variable.scss

@@ -9,4 +9,7 @@ $font-level-6: 18px;
 $font-level-7: 16px;
 $font-level-8: 14px;
 $font-level-9: 13px;
-$font-level-10: 12px;
+$font-level-10: 12px;
+
+// 顶部导航栏高度
+$app-header-height: 50px;

src/router.js

@@ -11,6 +11,11 @@ const router = new Router({
 		name: 'login',
 		component: () => import('@/views/login'),
 	},
+	{
+		path: '/demo',
+		name: 'demo',
+		component: () => import('@/views/demo'),
+	},
 	{
 		path: '/platform',
 		name: 'platform',
@@ -70,48 +75,101 @@ const router = new Router({
 	{
 		path: '/company',
 		name: 'company',
-		component: () => import('@/views/manage_company/message'),
-	},
-	{
-		path: '/company/message',
-		name: 'company_message',
-		component: () => import('@/views/manage_company/message_detail'),
-	},
-	{
-		path: '/company/user',
-		name: 'company_user',
-		component: () => import('@/views/manage_company/user'),
-	},
-	{
-		path: '/company/project',
-		name: 'company_project',
-		component: () => import('@/views/manage_company/project'),
-	},
-	{
-		path: '/company/template',
-		name: 'company_template',
-		component: () => import('@/views/manage_company/template'),
-	},
-	{
-		path: '/company/template/detail',
-		name: 'company_template_detail',
-		component: () => import('@/views/manage_company/template_detail'),
-	},
-	{
-		path: '/company/template/market',
-		name: 'company_template_market',
-		component: () => import('@/views/manage_company/template_market'),
-	},
-	{
-		path: '/company/setting',
-		name: 'company_setting',
-		component: () => import('@/views/manage_company/setting'),
-	},
-	{
-		path: '/company/app',
-		name: 'company_app',
-		component: () => import('@/views/manage_company/app'),
-	},
+		component: () => import('@/views/manage_company'),
+		redirect: { name: 'company_home' },
+		children: [
+			{
+				path: 'home',
+				name: 'company_home',
+				component: () => import('@/views/manage_company/message'),
+			},
+			{
+				path: 'message',
+				name: 'company_message',
+				component: () => import('@/views/manage_company/message_detail'),
+			},
+			{
+				path: 'user',
+				name: 'company_user',
+				component: () => import('@/views/manage_company/user'),
+			},
+			{
+				path: 'project',
+				name: 'company_project',
+				component: () => import('@/views/manage_company/project'),
+			},
+			{
+				path: 'template',
+				name: 'company_template',
+				component: () => import('@/views/manage_company/template'),
+			},
+			{
+				path: 'template/detail',
+				name: 'company_template_detail',
+				component: () => import('@/views/manage_company/template_detail'),
+			},
+			{
+				path: 'template/market',
+				name: 'company_template_market',
+				component: () => import('@/views/manage_company/template_market'),
+			},
+			{
+				path: 'setting',
+				name: 'company_setting',
+				component: () => import('@/views/manage_company/setting'),
+			},
+			{
+				path: 'app',
+				name: 'company_app',
+				component: () => import('@/views/manage_company/app'),
+			},
+		]
+	},
+	// {
+	// 	path: '/company',
+	// 	name: 'company',
+	// 	component: () => import('@/views/manage_company/message'),
+	// },
+	// {
+	// 	path: '/company/message',
+	// 	name: 'company_message',
+	// 	component: () => import('@/views/manage_company/message_detail'),
+	// },
+	// {
+	// 	path: '/company/user',
+	// 	name: 'company_user',
+	// 	component: () => import('@/views/manage_company/user'),
+	// },
+	// {
+	// 	path: '/company/project',
+	// 	name: 'company_project',
+	// 	component: () => import('@/views/manage_company/project'),
+	// },
+	// {
+	// 	path: '/company/template',
+	// 	name: 'company_template',
+	// 	component: () => import('@/views/manage_company/template'),
+	// },
+	// {
+	// 	path: '/company/template/detail',
+	// 	name: 'company_template_detail',
+	// 	component: () => import('@/views/manage_company/template_detail'),
+	// },
+	// {
+	// 	path: '/company/template/market',
+	// 	name: 'company_template_market',
+	// 	component: () => import('@/views/manage_company/template_market'),
+	// },
+	// {
+	// 	path: '/company/setting',
+	// 	name: 'company_setting',
+	// 	component: () => import('@/views/manage_company/setting'),
+	// },
+	// {
+	// 	path: '/company/app',
+	// 	name: 'company_app',
+	// 	component: () => import('@/views/manage_company/app'),
+	// },
 	/* 模板平台 */
 	{
 		path: '/template',
@@ -126,49 +184,63 @@ const router = new Router({
 	// 探索者总后台
 	{
 		path: '/system',
-		name: 'system',
-		component: () => import('@/views/manage_system/index'),
-	},
-	{
-		path: '/system/template',
-		name: 'system_template',
-		component: () => import('@/views/manage_system/template'),
-	},
-	{
-		path: '/system/runmanage',
-		name: 'system_runmanage',
-		component: () => import('@/views/manage_system/runmanage'),
-	},
-	{
-		path: '/system/template/matrix',
-		name: 'system_template_matrix',
-		component: () => import('@/views/manage_system/template/matrix'),
-	},
-	{
-		path: '/system/template/mind',
-		name: 'system_template_mind',
-		component: () => import('@/views/manage_system/template/mind'),
-	},
-	{
-		path: '/system/template/tempfile',
-		name: 'system_template_file',
-		component: () => import('@/views/manage_system/template_file'),
-	},
-	{
-		path: '/system/appcenter',
-		name: 'system_appcenter',
-		component: () => import('@/views/manage_system/appcenter'),
-	},
-	{
-		path: '/system/appinfo',
-		name: 'system_appinfo',
-		component: () => import('@/views/manage_system/appinfo'),
-	},
-	{
-		path: '/system/setting',
-		name: 'system_setting',
-		component: () => import('@/views/manage_system/setting'),
-	},
+		// name: 'system',
+		component: () => import('@/views/manage_system'),
+		redirect: { name: 'system_customer' },
+		children: [{
+			path: 'customer',
+			name: 'system_customer',
+			component: () => import('@/views/manage_system/customer'),
+		},{
+			path: 'template',
+			name: 'system_template',
+			component: () => import('@/views/manage_system/template'),
+		}, 
+		{
+			path: 'runmanage',
+			name: 'system_runmanage',
+			component: () => import('@/views/manage_system/runmanage'),
+		},
+		{
+			path: 'template/matrix',
+			name: 'system_template_matrix',
+			component: () => import('@/views/manage_system/template/matrix'),
+		},
+		{
+			path: 'template/mind',
+			name: 'system_template_mind',
+			component: () => import('@/views/manage_system/template/mind'),
+		},
+		{
+			path: 'template/tempfile',
+			name: 'system_template_file',
+			component: () => import('@/views/manage_system/template_file'),
+		},
+		{
+			path: 'appcenter',
+			name: 'system_appcenter',
+			component: () => import('@/views/manage_system/appcenter'),
+		},
+		{
+			path: 'appinfo',
+			name: 'system_appinfo',
+			component: () => import('@/views/manage_system/appinfo'),
+		},
+		{
+			path: 'setting',
+			name: 'system_setting',
+			component: () => import('@/views/manage_system/setting'),
+		},{
+			path: '*',
+			redirect: { name: 'system_customer' },
+		}]
+	},
+	// {
+	// 	path: '/system/template',
+	// 	name: 'system_template',
+	// 	component: () => import('@/views/manage_system/template'),
+	// },
+	
 	// 页面未找到时提示(这个页面要放在最后)
 	{
 		path: '*',

src/views/components_web/head/head.vue

@@ -1964,13 +1964,13 @@ export default {
       this.isShow();
       switch (this.$route.name) {
         //用户前台-------------------
-        case "index":
-          this.isPage_index = true;
-          this.isTitle_web = true;
-          this.isPage_Index_toolBar = true;
-          this.isPage_cloudIndex_toolBar = false;
-          this.setTip();
-          break;
+        // case "index":
+        //   this.isPage_index = true;
+        //   this.isTitle_web = true;
+        //   this.isPage_Index_toolBar = true;
+        //   this.isPage_cloudIndex_toolBar = false;
+        //   this.setTip();
+        //   break;
         case "projnotice":
           (this.isPage_projNotice = true), (this.isTitle_web = true);
           this.isPage_Index_toolBar = true;
@@ -2076,105 +2076,105 @@ export default {
           this.titleBackCommon = "应用中心";
           break;
         //用户后台----------------------------
-        case "company":
-          this.mainNavTitle = "mainNav";
-          this.isPage_manage_company = true;
-          break;
-        // case "message":
+        // case "company":
         //   this.mainNavTitle = "mainNav";
         //   this.isPage_manage_company = true;
         //   break;
-        case "company_message":
-          this.mainNavTitle = "mainNav";
-          this.isMessageback = true;
-          this.isPage_manage_company = true;
-          break;
-        case "company_setting":
-          this.mainNavTitle = "mainNav";
-          this.isPage_manage_company = true;
-          break;
-        case "company_user":
-          this.mainNavTitle = "mainNav";
-          this.isPage_manage_company = true;
-          break;
-        case "company_project":
-          this.mainNavTitle = "mainNav";
-          this.isPage_manage_company = true;
-          break;
-        case "company_template":
-          this.mainNavTitle = "mainNav";
-          this.isPage_manage_company = true;
-          break;
-        case "company_template_market":
-          this.mainNavTitle = "AppMarket";
-          this.isPage_manage_company = true;
-          break;
-        case "company_app":
-          this.mainNavTitle = "AppPro";
-          this.isPage_manage_company = true;
-          this.currentTemplateName = this.$route.params.name;
-          break;
-        case "company_template_detail":
-          this.mainNavTitle = this.$route.params.title;
-          this.currentTemplateName = this.$route.params.name;
-          this.isPage_manage_company = true;
-          break;
+        // // case "message":
+        // //   this.mainNavTitle = "mainNav";
+        // //   this.isPage_manage_company = true;
+        // //   break;
+        // case "company_message":
+        //   this.mainNavTitle = "mainNav";
+        //   this.isMessageback = true;
+        //   this.isPage_manage_company = true;
+        //   break;
+        // case "company_setting":
+        //   this.mainNavTitle = "mainNav";
+        //   this.isPage_manage_company = true;
+        //   break;
+        // case "company_user":
+        //   this.mainNavTitle = "mainNav";
+        //   this.isPage_manage_company = true;
+        //   break;
+        // case "company_project":
+        //   this.mainNavTitle = "mainNav";
+        //   this.isPage_manage_company = true;
+        //   break;
+        // case "company_template":
+        //   this.mainNavTitle = "mainNav";
+        //   this.isPage_manage_company = true;
+        //   break;
+        // case "company_template_market":
+        //   this.mainNavTitle = "AppMarket";
+        //   this.isPage_manage_company = true;
+        //   break;
+        // case "company_app":
+        //   this.mainNavTitle = "AppPro";
+        //   this.isPage_manage_company = true;
+        //   this.currentTemplateName = this.$route.params.name;
+        //   break;
+        // case "company_template_detail":
+        //   this.mainNavTitle = this.$route.params.title;
+        //   this.currentTemplateName = this.$route.params.name;
+        //   this.isPage_manage_company = true;
+        //   break;
         //总后台----------------------------
-        case "system":
-        case "system_template":
-          this.isPage_manage_system = true;
-          this.isPage_manage_systemHead_first = true;
-          this.isPage_manage_systemHead_second = false;
-          this.isPage_manage_systemHead_third = false;
-          break;
-        case "system_runmanage":
-          this.isPage_manage_system = true;
-          this.isPage_manage_systemHead_first = true;
-          this.isPage_manage_systemHead_second = false;
-          this.isPage_manage_systemHead_third = false;
-          break;
-        case "system_appinfo":
-          this.isPage_manage_system = true;
-          this.isPage_manage_systemHead_first = true;
-          this.isPage_manage_systemHead_second = false;
-          this.isPage_manage_systemHead_third = false;
-          break;
-        case "system_appcenter":
-          this.isPage_manage_system = true;
-          this.isPage_manage_systemHead_first = true;
-          this.isPage_manage_systemHead_second = false;
-          this.isPage_manage_systemHead_third = false;
-          break;
-        case "system_setting":
-          this.isPage_manage_system = true;
-          this.isPage_manage_systemHead_first = true;
-          this.isPage_manage_systemHead_second = false;
-          this.isPage_manage_systemHead_third = false;
-          break;
-        case "system_template_mind":
-          this.isPage_manage_system = true;
-          this.isPage_manage_systemHead_first = false;
-          this.isPage_manage_systemHead_second = true;
-          this.isPage_manage_systemHead_third = false;
-          this.tempName = this.$route.params.name;
-          this.tempData = this.$route.params.data;
-          break;
-        case "system_template_file":
-          this.isPage_manage_system = true;
-          this.isPage_manage_systemHead_first = true;
-          this.isPage_manage_systemHead_second = false;
-          this.isPage_manage_systemHead_third = false;
-          this.tempName = this.$route.params.name;
-          this.tempData = this.$route.params.data;
-          break;
-        case "system_template_matrix":
-          this.isPage_manage_system = true;
-          this.isPage_manage_systemHead_first = false;
-          this.isPage_manage_systemHead_second = false;
-          this.isPage_manage_systemHead_third = true;
-          this.tempName = this.$route.params.name;
-          this.tempData = this.$route.params.data;
-          break;
+        // case "system":
+        // case "system_template":
+        //   this.isPage_manage_system = true;
+        //   this.isPage_manage_systemHead_first = true;
+        //   this.isPage_manage_systemHead_second = false;
+        //   this.isPage_manage_systemHead_third = false;
+        //   break;
+        // case "system_runmanage":
+        //   this.isPage_manage_system = true;
+        //   this.isPage_manage_systemHead_first = true;
+        //   this.isPage_manage_systemHead_second = false;
+        //   this.isPage_manage_systemHead_third = false;
+        //   break;
+        // case "system_appinfo":
+        //   this.isPage_manage_system = true;
+        //   this.isPage_manage_systemHead_first = true;
+        //   this.isPage_manage_systemHead_second = false;
+        //   this.isPage_manage_systemHead_third = false;
+        //   break;
+        // case "system_appcenter":
+        //   this.isPage_manage_system = true;
+        //   this.isPage_manage_systemHead_first = true;
+        //   this.isPage_manage_systemHead_second = false;
+        //   this.isPage_manage_systemHead_third = false;
+        //   break;
+        // case "system_setting":
+        //   this.isPage_manage_system = true;
+        //   this.isPage_manage_systemHead_first = true;
+        //   this.isPage_manage_systemHead_second = false;
+        //   this.isPage_manage_systemHead_third = false;
+        //   break;
+        // case "system_template_mind":
+        //   this.isPage_manage_system = true;
+        //   this.isPage_manage_systemHead_first = false;
+        //   this.isPage_manage_systemHead_second = true;
+        //   this.isPage_manage_systemHead_third = false;
+        //   this.tempName = this.$route.params.name;
+        //   this.tempData = this.$route.params.data;
+        //   break;
+        // case "system_template_file":
+        //   this.isPage_manage_system = true;
+        //   this.isPage_manage_systemHead_first = true;
+        //   this.isPage_manage_systemHead_second = false;
+        //   this.isPage_manage_systemHead_third = false;
+        //   this.tempName = this.$route.params.name;
+        //   this.tempData = this.$route.params.data;
+        //   break;
+        // case "system_template_matrix":
+        //   this.isPage_manage_system = true;
+        //   this.isPage_manage_systemHead_first = false;
+        //   this.isPage_manage_systemHead_second = false;
+        //   this.isPage_manage_systemHead_third = true;
+        //   this.tempName = this.$route.params.name;
+        //   this.tempData = this.$route.params.data;
+        //   break;
         default:
           break;
       }

src/views/components_web/newProj/newProj.vue

@@ -1442,7 +1442,6 @@
         const templateListRes = await templateService.queryTemplateList();
         const templateList = templateListRes.Data || [];
         this.templateList = templateList;
-        console.log(templateList);
         if(this.templateList && this.templateList.length) {
           this.selectTemlateID = templateList[0].Id;
         }

src/views/demo/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="demo">
+    
+    <app-header
+      class="app-component"
+      backBtnTitle="返回按钮"
+      showBackBtn
+      title="这里放标题或者导航"
+      showUserCenter
+    >
+      <template #right>
+        test
+      </template>
+    </app-header>
+    <app-header
+      class="app-component"
+      theme="white"
+      title="这里放标题或者导航"
+    >
+      <template #left>LOCKING</template>
+      <template #right>
+        <span>退出登录</span>
+      </template>
+      <template #center>
+        <app-nav :list="navList" />
+      </template>
+    </app-header>
+  </div>
+</template>
+
+<script>
+import AppHeader from '@/components/app-header';
+import AppNav from '@/components/app-header/components/nav';
+
+const navItem = (pathName, label) => ({ key: pathName, label });
+
+export default {
+  components: {
+    AppHeader,
+    AppNav,
+  },
+  data() {
+    return {
+    navList: [
+      navItem('demo', '客户列表'),
+      navItem('system_template', '流程模板'),
+      navItem('system_runmanage', '应用管理'),
+      navItem('system_template_matrix', '运行管理'),
+      navItem('system_setting', '总体权限'),
+    ],
+  }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#bigbody {
+  margin-top: 0 !important;
+  height: 100%;
+}
+.app-component {
+  position: relative;
+  ~ .app-component {
+    margin-top: 20px;
+  }
+}
+.demo {
+  // background-color: #999 !important;
+  height: 100vh !important;
+}
+</style>

src/views/main_web/index/index.vue

@@ -17,6 +17,19 @@
 </style>
 <template>
   <div id="app" v-cloak>
+    <app-header title="我的项目" :showUserCenter="true">
+      <template #left>
+        {{currentPlatform.orgName}}
+      </template>
+      <template #right>
+        <span v-on:click="toRecycle">
+          <i
+            class="Cicon icon font_family icon-icon_huishouzhan"
+            title="回收站"
+          />
+        </span>
+      </template>
+    </app-header>
     <div class="layout_content">
       <section class="yiyun_warpContent">
         <div class="yiyun-rows mt-20" id="new">
@@ -207,6 +220,7 @@
 
 <script>
 import commonJs from "@/common/webCommon";
+import AppHeader from "@/components/app-header";
 import DistWork from "@/views/components_web/distWork/distWork";
 import NewProj from "@/views/components_web/newProj/newProj";
 import ProjSetting from "@/views/components_web/projSetting/projSetting";
@@ -220,11 +234,13 @@ export default {
     DistWork,
     NewProj,
     ProjSetting,
-    Timer
+    Timer,
+    AppHeader,
   },
   data() {
     const { currentPlatform } = this.$store.state;
     return {
+      currentPlatform,
       isUserPerm: haveAccess(currentPlatform.accessList, AccessCode.ProjectManager),
       nowDate: "",
       nowTime: "",
@@ -300,6 +316,17 @@ export default {
     sessionStorage.dotIndex = this.ind;
   },
   methods: {
+    /**
+     * 进入回收站
+     */
+    toRecycle: function () {
+      this.$router.push({
+        name: "recycle",
+        params: {
+          title: "我的项目",
+        },
+      });
+    },
     /*
      * 关闭新建项目弹框
      */
@@ -612,3 +639,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.icon-icon_huishouzhan {
+  line-height: inherit;
+}
+</style>

src/views/manage_company/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <app-header
+      theme="white"
+      v-show="showHeader"
+      showUserCenter
+    >
+      <template #left>LOCKING</template>
+      <template #center>
+        <app-nav :list="navList" />
+      </template>
+    </app-header>
+    <router-view />
+  </div>
+</template>
+
+<script>
+import AppHeader from "@/components/app-header";
+import AppNav from "@/components/app-header/components/nav";
+const navItem = (pathName, label) => ({ key: pathName, label });
+const navList = [
+    navItem("company_home", "首页"),
+    navItem("company_user", "通讯录"),
+    navItem("company_project", "项目管理"),
+    navItem("company_template", "模板与应用"),
+    navItem("company_setting", "通用设置"),
+];
+const hash = navList.reduce((h, item) => (h[item.key] = true, h), {});
+const isInNavRange = name => hash[name];
+
+export default {
+  components: {
+    AppHeader,
+    AppNav,
+  },
+  data() {
+    return {
+      showHeader: isInNavRange(this.$route.name),
+      navList,
+    };
+  },
+  methods: {},
+  watch: {
+    $route(to) {
+      this.showHeader = isInNavRange(to.name);
+    }
+  }
+};
+</script>

src/views/manage_system/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <app-header
+      theme="white"
+      v-show="showHeader"
+    >
+      <template #left>LOCKING</template>
+      <template #right>
+        <span class="header-logout" @click="tryToLogout">退出登录</span>
+      </template>
+      <template #center>
+        <app-nav :list="navList" />
+      </template>
+    </app-header>
+    <router-view />
+  </div>
+</template>
+
+<script>
+import AppHeader from "@/components/app-header";
+import AppNav from "@/components/app-header/components/nav";
+const navItem = (pathName, label) => ({ key: pathName, label });
+const navList = [
+    navItem("system_customer", "客户列表"),
+    navItem("system_template", "流程模板"),
+    navItem("system_runmanage", "应用管理"),
+    navItem("system_template_matrix", "运行管理"),
+    navItem("system_setting", "总体权限"),
+];
+const hash = navList.reduce((h, item) => (h[item.key] = true, h), {});
+const isInNavRange = name => hash[name];
+
+export default {
+  components: {
+    AppHeader,
+    AppNav,
+  },
+  data() {
+    return {
+      showHeader: isInNavRange(this.$route.name),
+      navList,
+    };
+  },
+  methods: {
+    /**
+     * 退出登录提示
+     */
+    tryToLogout: function () {
+      var thisApp = this;
+      this.$confirm("退出当前账户，是否继续？", "", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        showClose: false,
+        type: "warning",
+      }).then(() => {
+        // this.logout();
+        this.$store.logout();
+        this.$router.push({ path: '/' });
+      });
+    },
+  },
+  watch: {
+    $route(to) {
+      this.showHeader = isInNavRange(to.name);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.header-logout {
+  cursor: pointer;
+}
+</style>

src/views/manage_system/template/mind.vue

@@ -8,6 +8,12 @@
  -->
 <template>
   <div class="layout_content template_mind">
+    <app-header
+      showBackBtn
+      theme="white"
+      :title="tempName"
+      backBtnTitle="退出思维导图查看器"
+    />
     <section class="yiyun_section">
       <div>
         <div class="mlr-10">
@@ -49,6 +55,7 @@
 <script>
   // require("!vue-style-loader!css-loader!../../../public/static/css/jsmind.css");
   import * as services from "@/services/template";
+  import AppHeader from '@/components/app-header';
   import TemplateTree from './components/template-tree';
   import {notify} from '@/utils/tool';
   const jsMind = window.jsMind;
@@ -61,6 +68,7 @@
   export default {
     components: {
       TemplateTree,
+      AppHeader,
     },
     data() {
       return {

src/views/platform_center/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="platform">
-    <custom-header theme="black" :showBackBtn="true" backBtnTitle="返回登入" />
+    <app-header theme="black" :showBackBtn="true" backBtnTitle="返回登入" />
     <div class="platform_section">
       <div class="platform_title">链接到</div>
       <div class="platform_list">
@@ -69,12 +69,12 @@
 </template>
 
 <script>
-import CustomHeader from "@/components/custom-header";
+import AppHeader from "@/components/app-header";
 import { PLATFORM_TYPE, haveAccess, AccessCode } from "@/utils/access";
 
 export default {
   components: {
-    CustomHeader,
+    AppHeader,
   },
   mounted() {
     console.log("mounted", this.$store);