新版导航栏部分代码

public/static/css/main.css

@@ -4775,7 +4775,6 @@ button:focus {
 	margin-top: 54px;
 }
 .listfilewarp{
-	min-height: calc(100vh - 48px);
     overflow: hidden;
     /* overflow-y: auto; */
     background-color: #f0f0f0;
@@ -7806,7 +7805,7 @@ li.secondMenu ul li:hover {
 	justify-content: start;
 }
 .worklinkBtngroup{
-    height: 54px;
+    /* height: 54px; */
     overflow: hidden;
 	float: left;
 	/* max-width: 368px; */
@@ -8980,7 +8979,8 @@ h5.dulilabel{
 	.proj-detail .proj-desc-wrap::-webkit-scrollbar-thumb:window-inactive, 
 	.proj-detail .summary-wrap::-webkit-scrollbar-thumb:window-inactive, 
 	.new-proj .template_select_content::-webkit-scrollbar-thumb:window-inactive {
-    background-color: #adadad;
+		/* background-color: #adadad; */
+		background-color: transparent;
 	}
 	
 	/* 当前选中的工作负责人的框 */
@@ -9062,7 +9062,6 @@ h5.dulilabel{
 	/* 搜索功能 搜索入口 */
 	.search-entry {
 		position: relative;
-		top: 12px;
 		width: 26px;
 		height: 26px;
 		background: url('/static/img/搜索.svg') center/100%;

public/static/img/窗口关闭.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1609827294254" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8166" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M843.904 783.573333 783.573333 843.904 512.042667 572.373333 240.512 843.904 180.181333 783.573333 451.712 512.042667 180.181333 240.512 240.512 180.181333 512.042667 451.712 783.573333 180.181333 843.904 240.512 572.373333 512.042667 843.904 783.573333Z" p-id="8167" fill="#666"></path></svg>

public/static/img/窗口缩小.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1609826860742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2581" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M213.333333 469.333333m21.333334 0l554.666666 0q21.333333 0 21.333334 21.333334l0 42.666666q0 21.333333-21.333334 21.333334l-554.666666 0q-21.333333 0-21.333334-21.333334l0-42.666666q0-21.333333 21.333334-21.333334Z" p-id="2582" fill="#666"></path></svg>

public/static/img/缩放窗口.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1609831316902" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2692" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M804.813881 176.379768 373.230316 176.379768 373.230316 220.254706 804.813881 220.254706 804.813881 654.226878 848.68882 654.226878 848.68882 220.254706 848.68882 176.379768ZM175.31118 289.398592l0 558.22164 558.22164 0L733.53282 289.398592 175.31118 289.398592zM684.58733 798.632837 224.298576 798.632837 224.298576 338.344083 684.58733 338.344083 684.58733 798.632837z" p-id="2693" fill="#666"></path></svg>

src/App.vue

@@ -30,7 +30,7 @@
      -->
     <router-view
       ref="mainpage"
-      :class="{'workspace-bigbody': $route.path.indexOf('/workspace') >=0}"
+      :class="{setMarginTop, 'workspace-bigbody': $route.path.indexOf('/workspace') >=0}"
       id="bigbody"
       class="mt-48"
     ></router-view>
@@ -38,6 +38,7 @@
 </template>
 <script>
 // import Header from "@/views/components_web/head/head.vue";
+import system from "@/services/system";
 export default {
   components: {
     // Header,
@@ -53,6 +54,7 @@ export default {
       searchName: "",
       isShowOutWorkSpace: false,
       outWorkSpace: false,
+      isClient: system.isClient,
     };
   },
   created: function () {
@@ -67,6 +69,11 @@ export default {
       this.header_show = false;
     }
   },
+  computed: {
+    setMarginTop() {
+      return this.isClient ? 'mt-60' : 'mt-40';
+    }
+  },
   mounted: function () {
     // 监听滚动事件
     window.addEventListener("scroll", this.handleScroll, true);
@@ -166,4 +173,13 @@ jmnode {
 .workspace-bigbody {
   overflow: hidden !important;
 }
+</style>
+
+<style lang="scss" scoped>
+  .mt-40 {
+    margin: 40px 0 0 0;
+  }
+  .mt-60 {
+    margin: 60px 0 0 0;
+  }
 </style>

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

@@ -1,5 +1,23 @@
 <template>
   <div class="app-header" :class="{ white: theme === 'white' || isWindowScrollIng , black: theme === 'black', 'black-bg-color': isWindowScrollIng && theme === 'black' }">
+    <div class="app-header-top" v-if="isClient && isShowTopBar">
+      <div class="top-left">
+        <div class="dot"></div>
+        <div class="state" :class="{white: theme === 'white'}">在线</div>
+      </div>
+      <div class="top-right">
+        <div class="min"  @click.stop="shrinkBrowserWindow">
+          <img src="/static/img/窗口缩小.svg" alt="" class="min-icon"/>
+        </div>
+        <div class="max"  @click.stop="enlargeBrowserWindow">
+          <div v-if="!isMaxWindowNow" class="unmax-icon" ></div>
+          <img v-else src="/static/img/缩放窗口.svg" alt="" class="to-max-icon">
+        </div>
+        <div class="close"  @click.stop="closeBrowserWindow">
+          <img src="/static/img/窗口关闭.svg" alt="" class="close-icon"/>
+        </div>
+      </div>
+    </div>
     <div class="app-header-content" >
       <div class="app-header-content-left">
         <slot name="left">
@@ -7,19 +25,20 @@
           <span class="back_title" @click="navBack()" v-show="backBtnTitle">{{backBtnTitle}}</span>
         </slot>
       </div>
+      <div class="app-header-center">
+        <slot name="center">{{title}}</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';
+import system from '@/services/system';
 export default {
   components: {
     UserCenter,
@@ -37,10 +56,14 @@ export default {
     title: String,
     // 右侧
     showUserCenter: Boolean,
+    // 是否展示头部带有状态的导航栏
+    isShowTopBar: Boolean,
   },
   data() {
     return {
       isWindowScrollIng: false,
+      isClient: system.isClient,
+      isMaxWindowNow: true,
     };
   },
   mounted: function () {
@@ -48,6 +71,20 @@ export default {
     window.addEventListener("scroll", this.handleScroll.bind(this), true);
   },
   methods: {
+    shrinkBrowserWindow() {
+      system.shrinkBrowserWindow();
+    },
+    enlargeBrowserWindow() {
+      this.isMaxWindowNow = !this.isMaxWindowNow;
+      if(!this.isMaxWindowNow) {
+        system.unmaxBrowserWindow();
+      } else {
+         system.enlargeBrowserWindow();
+      }
+    },
+    closeBrowserWindow() {
+      system.closeBrowserWindow();
+    },
     navBack() {
       if(this.onBackBtnClick) {
         this.onBackBtnClick();
@@ -77,52 +114,111 @@ export default {
   line-height: $v;
 }
 .black {
-  color: #fff;
+  color: #fff !important;
 }
 .white {
   background-color: rgba(252, 252, 252, 1);
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
-  
+}
+.app-header div {
+  box-sizing: border-box;
 }
 .app-header {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 2;
-  @include setOnelineHeight($app-header-height);
+  /* @include setOnelineHeight($app-header-height); */
+  &-top {
+    display: flex;
+    justify-content: space-between;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 68px 0 45px;
+    .top-left, .top-right {
+      display: flex;
+      align-items: center;
+    }
+    .top-left .dot {
+      width: 8px;
+      height: 8px;
+      border-radius:50%;
+      background-color: green;
+    }
+    .top-left .state {
+      color: rgba(0, 0, 0, 0.56);
+      font-size: 11px;
+      font-family: PingFangSC-Regular;
+      margin: 0 0 0 11px;
+    }
 
+    .top-right .min, .top-right .max, .top-right .close {
+      position: relative;
+      top: 4px;
+      width: 18px;
+      height: 18px;
+      margin: 0 0 0 20px;
+      cursor: pointer;
+    }
+    .top-right .min-icon, .close-icon {
+      width: 100%;
+    }
+    .top-right .max {
+      position: relative;
+      .unmax-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 13px;
+        border: 2px solid #999B9D;
+        height: 10px;
+      }
+      .to-max-icon {
+        width: 100%;
+      }
+    }
+
+
+  }
   &-content {
-    box-sizing: border-box;
     display: flex;
     justify-content: space-between;
-    height: 100%;
+    position: relative;
+    /* height: 100%; */
+    height: 40px;
     width: 100%;
     padding: 0 64px;
     font-size: $font-level-7;
     &-right {
+      display: flex;
+      align-items: center;
       > span, > div {
-        margin-left: 18px;
+        margin-left: 12px;
       }
     }
-    
+    &-left {
+      line-height: 40px;
+    }
+
   }
   &-center {
     position: absolute;
-    top: 0;
     left: 50%;
     transform: translateX(-50%);
+    line-height: 40px;
     font-size: $font-level-6;
-    @include setOnelineHeight($app-header-height);
+    /* @include setOnelineHeight($app-header-height); */
   }
 }
 .app-header-back-btn {
   position: absolute;
   left: 36px;
-  top: 0;
-  bottom: 0;
+  top: 50%;
+  transform: translate(0, -50%);
   margin: auto 0;
 }
 .black-bg-color {
   background-color:#32323c;
 }
-</style>
+</style>

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

@@ -1,16 +1,5 @@
 <template>
   <div class="app-header" :class="{ white: theme === 'white' || isWindowScrollIng , black: theme === 'black', 'black-bg-color': isWindowScrollIng && theme === 'black' }">
-    <div class="app-header-top">
-      <div class="top-left">
-        <div class="dot"></div>
-        <div class="state">在线</div>
-      </div>
-      <div class="top-right">
-        <div class="min"/>
-        <div class="max"/>
-        <div class="close"/>
-      </div>
-    </div>
     <div class="app-header-content" >
       <div class="app-header-content-left">
         <slot name="left">
@@ -18,14 +7,14 @@
           <span class="back_title" @click="navBack()" v-show="backBtnTitle">{{backBtnTitle}}</span>
         </slot>
       </div>
-      <div class="app-header-center">
-        <slot name="center">{{title}}</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>
 
@@ -48,10 +37,6 @@ export default {
     title: String,
     // 右侧
     showUserCenter: Boolean,
-    // 是否是客户端
-    isClient: Boolean,
-    // 是否展示头部带有状态的导航栏
-    isShowTopBar: Boolean,
   },
   data() {
     return {
@@ -97,93 +82,47 @@ export default {
 .white {
   background-color: rgba(252, 252, 252, 1);
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
-}
-.app-header div {
-  box-sizing: border-box;
+  
 }
 .app-header {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 2;
-  /* @include setOnelineHeight($app-header-height); */
-  &-top {
-    display: flex;
-    justify-content: space-between;
-    height: 20px;
-    line-height: 20px;
-    padding: 0 64px 0 45px;
-    .top-left, .top-right {
-      display: flex;
-      align-items: center;
-    }
-    .top-left .dot {
-      width: 8px;
-      height: 8px;
-      border-radius:50%;
-      background-color: green;
-    }
-    .top-left .state {
-      color: rgba(0, 0, 0, 0.56);
-      font-size: 11px;
-      font-family: PingFangSC-Regular;
-      margin: 0 0 0 11px;
-    }
-
-    .top-right .min, .top-right .max, .top-right .close {
-      width: 20px;
-      height: 20px;
-      margin: 0 0 0 18px;
-    }
-    .top-right .min {
-      background-color: gold;
-    }
-    .top-right .max {
-      background-color: green;
-    }
-    .top-right .close {
-      background-color: red;
-    }
+  @include setOnelineHeight($app-header-height);
 
-  }
   &-content {
+    box-sizing: border-box;
     display: flex;
     justify-content: space-between;
-    position: relative;
-    /* height: 100%; */
-    height: 40px;
+    height: 100%;
     width: 100%;
     padding: 0 64px;
     font-size: $font-level-7;
     &-right {
-      display: flex;
-      align-items: center;
       > span, > div {
         margin-left: 18px;
       }
     }
-    &-left {
-      line-height: 40px;
-    }
-
+    
   }
   &-center {
     position: absolute;
+    top: 0;
     left: 50%;
     transform: translateX(-50%);
-    line-height: 40px;
     font-size: $font-level-6;
-    /* @include setOnelineHeight($app-header-height); */
+    @include setOnelineHeight($app-header-height);
   }
 }
 .app-header-back-btn {
   position: absolute;
   left: 36px;
-  top: 50%;
-  transform: translate(0, -50%);
+  top: 0;
+  bottom: 0;
   margin: auto 0;
 }
 .black-bg-color {
   background-color:#32323c;
 }
-</style>
+</style>

src/services/system.js

@@ -49,6 +49,23 @@ const system = {
   init: safeCall(() => {
     console.log('客户端 electron API 检测:', global.electron);
   }),
+  // 缩小 放大 关闭操作
+ shrinkBrowserWindow: safeCall(async () => {
+    const { ipcRenderer } = global.electron;
+    await ipcRenderer.invoke('shrink-browser-window');
+  }),
+  enlargeBrowserWindow: safeCall(async () => {
+    const { ipcRenderer } = global.electron;
+    await ipcRenderer.invoke('enlarge-browser-window');
+  }),
+  unmaxBrowserWindow: safeCall(async () => {
+    const { ipcRenderer } = global.electron;
+    await ipcRenderer.invoke('unmax-browser-window');
+  }),
+  closeBrowserWindow: safeCall(async () => {
+    const { ipcRenderer } = global.electron;
+    await ipcRenderer.invoke('close-browser-window');
+  }),
   // 保存客户端配置
   initClientConfig: safeCall((path, errorHandler = identity) => {
     const config = io('initClientConfig');

src/views/main_web/index/index.vue

@@ -17,7 +17,10 @@
 </style>
 <template>
   <div id="app" v-cloak>
-    <app-header :title="showCenterTitle" :showUserCenter="true" id="proj-list-page">
+    <app-header :title="showCenterTitle" 
+                :showUserCenter="true" id="proj-list-page"
+                :isShowTopBar="true"
+    >
       <template #left>
         {{currentPlatform.orgName}}
       </template>

src/views/main_web/workspace/components/workLine.vue

@@ -3,14 +3,14 @@
 
 <template>
   <div v-if="listUserFolders.length > 0">
-    <div
+    <!-- <div
       :class="
         isShowRightManager == true
           ? 'AnimatedRightIn flex_right_pain'
           : 'flex_right_pain'
       "
     >
-      <!-- 新申请 -->
+
       <div class="flex_right_pain_body_box">
         <div class="flex_right_pain_head">
           <div class="EC_col_12">
@@ -67,7 +67,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
     <div class="backwork pt-10" v-show="isShowworklink" v-if="false">
       <div class="warpbianju">
         <div class="fl">
@@ -296,9 +296,6 @@ export default {
       const x1 = this.nowFolderEl.offsetLeft;
       const x2 =  this.allFolderWrapEl.clientWidth/2 - this.nowFolderEl.clientWidth/2;
       this.moveX = x1-x2;
-      console.log('offsetLeft', x1);
-      console.log('totalWidth', this.allFolderWrapEl.clientWidth);
-      console.log('x2', x2);
     }
   },
   mounted() {
@@ -480,7 +477,6 @@ export default {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    max-height: 54px;
   }
   .worklinkBtngroup button {
     flex-shrink: 0;
@@ -534,4 +530,6 @@ export default {
     text-overflow:ellipsis;
     white-space: nowrap;
   }
+
+
 </style>

src/views/main_web/workspace/workspace.new.vue

@@ -1,8 +1,9 @@
 <template>
   <div v-cloak>
     <app-header
-      :title="showTitle"
       backBtnTitle="退出"
+      :title="showTitle"
+      :isShowTopBar="true"
       :showUserCenter="true"
       class="app-header-style"
       :class="{'set-bg': isShowSearchPage}"
@@ -22,6 +23,22 @@
         @finishGetExchangeNodes="finishGetExchangeNodes"
       />
       </template> -->
+      <template #center>
+        <!-- 工作链 -->
+        <WorkLine class="my-workline"
+          :class="{'adjust-workline-pos': isClient}"
+          :isShowlink="showWorkline"
+          :listUserFolders="nodeFolders"
+          :nowFolderIndex="nowFolderIndex"
+          :nowFolderName="nowFolderName"
+          @goFolderAndBack="goFolderAndBack"
+          @previousFolder="previousFolder"
+          @showWorklinkPage="showWorklinkPage"
+          @nowFolderClick="nowFolderClick"
+          @hideWorklinkPage="hideWorklinkPage"
+          @finishGetExchangeNodes="finishGetExchangeNodes"
+        />
+      </template>
       <template #right>
          <search-bar  v-if="isShowSearchBar" class="proj-search-bar"
             placeholder="请输入要搜索的文件名"
@@ -99,19 +116,6 @@
       >
       </app-header>
       <div class="listfilewarp mt-0">
-        <!-- 工作链 -->
-        <WorkLine class="my-workline"
-          :isShowlink="showWorkline"
-          :listUserFolders="nodeFolders"
-          :nowFolderIndex="nowFolderIndex"
-          :nowFolderName="nowFolderName"
-          @goFolderAndBack="goFolderAndBack"
-          @previousFolder="previousFolder"
-          @showWorklinkPage="showWorklinkPage"
-          @nowFolderClick="nowFolderClick"
-          @hideWorklinkPage="hideWorklinkPage"
-          @finishGetExchangeNodes="finishGetExchangeNodes"
-        />
         <div class="layout_content2" v-show="!showWorkline" v-loading="loading">
           <section
             id="workspace"
@@ -126,7 +130,7 @@
                     class="section_item section_item_aside_fl"
                   >
                     <span
-                      class="yiyun_text-title-workspace mr-20 ml-8" 
+                      class="yiyun_text-title-workspace ml-4" 
                     >
                       <el-breadcrumb class="folder_breadcrumb" separator-class="el-icon-arrow-right">
                         <el-breadcrumb-item @click.native="clickBreadcrumb(-1, 0)">工作文件</el-breadcrumb-item>
@@ -1975,4 +1979,9 @@ export default {
   .my-workline {
     text-align: center;
   }
+
+  .adjust-workline-pos {
+    position: relative;
+    top: -12px;
+  }
 </style>

src/views/platform_center/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="platform">
-    <app-header theme="black" :showBackBtn="true" backBtnTitle="返回登入" />
+    <app-header theme="black" :showBackBtn="true" backBtnTitle="返回登入" :isShowTopBar="true"/>
     <div class="platform_section">
       <div class="platform_title">链接到</div>
       <div class="platform_list" >