caner
/
termcap


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<template>
  <n-config-provider preflight-style-disabled inline-theme-disabled>
    <div class="box">
      <Head v-model:show-add="showAdd" v-model:list="tabs" :select-tab="selectKey" @on-change="onChange" />
      <div class="box-content">
        <component :is="currentCom.sshCom" />
      </div>
    </div>
    <!-- 弹窗 -->
    <n-modal v-model:show="showAdd">
      <Add @call-back="addBack" />
    </n-modal>
  </n-config-provider>
</template>
<script setup lang='ts'>
import {
  defineAsyncComponent, onMounted, ref, shallowRef
} from 'vue'
import Head from '@/components/head.vue'
import Add from '@/components/add.vue'
import { FormData } from '@/components/edit.vue'

// TODO 每个tab都会存储相应组件用户操作过的数据
const showAdd = ref(false)
const tabs = shallowRef([
  {
    label: 'Home',
    icon: 'home',
    size: 14,
    sshCom: defineAsyncComponent(() => import('@/components/ssh.vue')),
    sftpCom: undefined
  }
] as FormData[])
const selectKey = ref(0)
const currentCom = shallowRef(tabs.value[selectKey.value])

function addBack(params: FormData) {
  tabs.value.push({
    ...params,
    icon: 'cmd',
    size: 13,
    sshCom: defineAsyncComponent(() => import('@/components/ssh.vue')),
    sftpCom: undefined
  })
  selectKey.value = tabs.value.length - 1
  currentCom.value = tabs.value[selectKey.value]
  showAdd.value = false
}

function onChange(params: { id: number, type: string }) {
  const { id, type } = params
  if (type === 'del' && id !== 0) tabs.value.splice(id, 1)
  selectKey.value = type === 'change' ? id : id - 1
  currentCom.value = tabs.value[selectKey.value]
}

onMounted(() => {
  window.$electron.send('close-loading')
})
</script>
<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;

  &-content {
    height: calc(100% - 38px);
    width: 100%;
    border-top: solid 3px white;
  }
}
</style>