feat: 终端新增收起按钮

src/renderer/components/SvgIcon.vue

@@ -22,6 +22,7 @@ export default defineComponent({
       download: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="download" class="svg-inline--fa fa-download fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg>',
       presentation: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="presentation" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-presentation fa-w-18 fa-9x"><path fill="currentColor" d="M560 0H16C7.16 0 0 7.16 0 16v32c0 8.84 7.16 16 16 16h16v256c0 17.67 14.33 32 32 32h192v34.75l-75.31 75.31c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L288 445.25l62.06 62.06c6.25 6.25 16.38 6.25 22.63 0l22.62-22.62c6.25-6.25 6.25-16.38 0-22.63L320 386.75V352h192c17.67 0 32-14.33 32-32V64h16c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16zm-80 288H96V64h384v224z" class=""></path></svg>',
       clipboard: '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="clipboard" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-clipboard fa-w-12"><path fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" class=""></path></svg>',
+      'chevron-down': '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-chevron-down fa-w-14"><path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z" class=""></path></svg>',
     }
 
     const html = ref(icons[props.name!])

src/renderer/components/Xterm.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="xterm">
+    <div class="hide" @click="$emit('hide')">
+      <SvgIcon style="width: 20px; height: 20px" name="chevron-down" />
+    </div>
     <div ref="refXterm" style="height: 100%"></div>
   </div>
 </template>
@@ -17,12 +20,15 @@ import { registerAction, removeAction } from '@fe/context/action'
 import { getLogger } from '@fe/utils'
 import { getColorScheme } from '@fe/context/theme'
 import { OneHalfLight, OneHalfDark } from 'xterm-theme'
+import SvgIcon from './SvgIcon.vue'
+
 import 'xterm/css/xterm.css'
 
 const logger = getLogger('component-x-term')
 
 export default defineComponent({
   name: 'xterm',
+  components: { SvgIcon },
   setup () {
     const bus = useBus()
     const store = useStore()
@@ -195,4 +201,34 @@ export default defineComponent({
   width: 100%;
   height: 100%;
 }
+
+.hide {
+  position: absolute;
+  top: -6px;
+  right: 1px;
+  z-index: 10;
+  background: var(--g-color-90);
+  border-bottom-left-radius: var(--g-border-radius);
+  border-bottom-right-radius: var(--g-border-radius);
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transform: scaleY(0.6);
+  border: 8px solid transparent;
+  box-sizing: border-box;
+  color: var(--g-color-20);
+  opacity: 0;
+  transition: opacity .2s;
+}
+
+.xterm:hover .hide {
+  opacity: 1;
+}
+
+.hide:hover {
+  background: var(--g-color-70);
+}
 </style>

src/renderer/views/Main.vue

@@ -10,7 +10,7 @@
       <Tree />
     </template>
     <template v-slot:terminal>
-      <Xterm />
+      <Xterm @hide="hideXterm" />
     </template>
     <template v-slot:editor>
       <FileTabs />
@@ -28,6 +28,7 @@
 <script lang="ts">
 import { defineComponent, onMounted } from 'vue'
 import startup from '@fe/context/startup'
+import { getActionHandler } from '@fe/context/action'
 import { FLAG_DISABLE_XTERM } from '@fe/support/global-args'
 import Layout from '@fe/components/Layout.vue'
 import TitleBar from '@fe/components/TitleBar.vue'
@@ -64,7 +65,11 @@ export default defineComponent({
       'flag-disable-xterm': FLAG_DISABLE_XTERM
     }
 
-    return { classes }
+    function hideXterm () {
+      getActionHandler('layout.toggle-xterm')(false)
+    }
+
+    return { classes, hideXterm }
   }
 })
 </script>