feat: 工具>主机终端操作服务器命令支持redis

src/components/TerminalRedis/index.vue

@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { FitAddon } from '@xterm/addon-fit';
+import { Terminal } from '@xterm/xterm';
+import '@xterm/xterm/css/xterm.css';
+import { RESULT_CODE_ERROR } from '@/constants/result-constants';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+const ws = new WS();
+const emit = defineEmits(['connect', 'close', 'message']);
+const props = defineProps({
+  /**终端ID，必传 */
+  id: {
+    type: String,
+    required: true,
+  },
+  /**连接主机ID，必传 */
+  hostId: {
+    type: String,
+    required: true,
+  },
+  /**初始发送命令 */
+  initCmd: {
+    type: [String, Boolean],
+    default: false,
+  },
+});
+
+/**终端输入DOM节点实例对象 */
+const terminalDom = ref<HTMLElement | undefined>(undefined);
+
+/**终端输入实例对象 */
+const terminal = ref<any>(null);
+
+/**终端输入命令 */
+const terminalCmd = ref<string>('');
+
+/**终端输入渲染 */
+function handleRanderXterm(container: HTMLElement | undefined) {
+  if (!container) return;
+  const xterm = new Terminal({
+    lineHeight: 1.2,
+    fontSize: 12,
+    fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
+    theme: {
+      background: '#000000',
+    },
+    cursorBlink: true, // 光标闪烁
+    cursorStyle: 'block',
+    scrollback: 1000,
+    scrollSensitivity: 15,
+    tabStopWidth: 4,
+    disableStdin: false, // 禁止输入
+  });
+  // 挂载
+  xterm.open(container);
+  // 自适应尺寸
+  const fitAddon = new FitAddon();
+  xterm.loadAddon(fitAddon);
+  // 终端输入字符按键监听
+  xterm.onKey(({ key, domEvent }) => {
+    // console.log(key, domEvent);
+    // 单键输入
+    switch (domEvent.key) {
+      case 'Enter':
+        const cmdStr = terminalCmd.value.trim();
+        // 发送文本
+        terminal.value.scrollToBottom();
+        terminal.value.writeln('\r\n');
+        ws.send({
+          requestId: `redis_${props.hostId}`,
+          type: 'redis',
+          data: `${cmdStr}\r\n`,
+        });
+        terminalCmd.value = '';
+
+        // 退出登录
+        if ('quit' === cmdStr) {
+          setTimeout(() => {
+            ws.close();
+          }, 1000);
+        }
+        break;
+      case 'Backspace':
+        // 处理退格键，删除最后一个字符
+        xterm.write('\b \b');
+        break;
+      default:
+        xterm.write(key);
+        terminalCmd.value += key;
+        return;
+    }
+  });
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(entries => {
+    fitAddon.fit();
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+
+  terminal.value = xterm;
+}
+
+/**连接打开后回调 */
+function wsOpen(ev: any) {
+  // console.info('wsOpen', ev);
+  nextTick(() => {
+    handleRanderXterm(terminalDom.value);
+
+    // 连接事件
+    emit('connect', {
+      timeStamp: ev.timeStamp,
+      cols: terminal.value.cols,
+      rows: terminal.value.rows,
+      hostId: props.hostId,
+      id: props.id,
+    });
+    // 初始发送命令
+    if (typeof props.initCmd === 'string') {
+      ws.send({
+        requestId: `redis_${props.hostId}`,
+        type: 'redis',
+        data: `${props.initCmd}\r\n`,
+      });
+    }
+  });
+}
+
+/**连接错误后回调 */
+function wsError(ev: any) {
+  console.error('wsError', ev);
+  if (terminal.value != null) {
+    let message = 'disconnected';
+    terminal.value.write(`\x1b[31m${message}\x1b[m\r\n`);
+  } else if (terminalDom.value) {
+    terminalDom.value.style.background = '#000';
+    terminalDom.value.style.color = '#ff4d4f';
+    terminalDom.value.style.height = '60%';
+    terminalDom.value.innerText = 'disconnected';
+  }
+}
+
+/**连接关闭后回调 */
+function wsClose(code: number) {
+  // console.warn('wsClose', code);
+  if (terminal.value != null) {
+    let message = 'disconnected';
+    terminal.value.write(`\x1b[31m${message}\x1b[m\r\n`);
+  }
+  // 关闭事件
+  emit('close', {
+    code: code,
+    hostId: props.hostId,
+    id: props.id,
+  });
+}
+
+/**接收消息后回调 */
+function wsMessage(res: Record<string, any>) {
+  emit('message', res);
+  // console.log('wsMessage', res);
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+  if (!requestId) return;
+  if (data.indexOf('is empty') > 0) return;
+  if (terminal.value != null) {
+    // terminal.value.write(data.trim().replace(/\n/g, "\r\n"));
+    // 是否n结尾
+    if (/[\r\n]$/.test(data)) {
+      terminal.value.writeln(data.trim().replace(/\n/g, '\r\n'));
+    } else {
+      terminal.value.write(data.replace(/\n/g, '\r\n'));
+    }
+  }
+}
+
+onMounted(() => {
+  if (props.hostId) {
+    // 建立链接
+    const options: OptionsType = {
+      url: '/ws/redis',
+      params: {
+        hostId: props.hostId,
+      },
+      onmessage: wsMessage,
+      onerror: wsError,
+      onopen: wsOpen,
+      onclose: wsClose,
+    };
+    ws.connect(options);
+  }
+});
+
+onBeforeUnmount(() => {
+  ws.close();
+});
+
+// 给组件设置属性 ref="xxxTerminal"
+// setup内使用 const xxxTerminal = ref();
+defineExpose({
+  /**发送方法 */
+  send: (data: string) => {
+    ws.send({
+      requestId: `redis_${props.hostId}`,
+      type: 'redis',
+      data: `${data}\r\n`,
+    });
+  },
+});
+</script>
+
+<template>
+  <div class="terminal">
+    <div ref="terminalDom" :id="id" class="terminal"></div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.terminal {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/TerminalSSH/index.vue

@@ -126,7 +126,7 @@ function handleRanderXterm(container: HTMLElement | undefined) {
     // console.log('尺寸', cols, rows);
     ws.send({
       requestId: `ssh_resize_${props.hostId}`,
-      type: 'ssh_resize',
+      type: 'resize',
       data: { cols, rows },
     });
   });

src/components/TerminalTelnet/index.vue

@@ -160,7 +160,7 @@ function handleRanderXterm(container: HTMLElement | undefined) {
     // console.log('尺寸', cols, rows);
     ws.send({
       requestId: `telnet_resize_${props.hostId}`,
-      type: 'telnet_resize',
+      type: 'resize',
       data: { cols, rows },
     });
   });

src/components/TerminalText/index.vue

@@ -1,97 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import { FitAddon } from '@xterm/addon-fit';
-import { Terminal } from '@xterm/xterm';
-import '@xterm/xterm/css/xterm.css';
-const emit = defineEmits(['update:value']);
-const props = defineProps({
-  /**终端ID，必传 */
-  id: {
-    type: String,
-    required: true,
-  },
-  /**窗口单行字符数 */
-  cols: {
-    type: Number,
-    default: 80,
-  },
-  /**窗口行数 */
-  rows: {
-    type: Number,
-    default: 40,
-  },
-  /**信息 */
-  value: {
-    type: String,
-    default: '',
-  },
-});
-
-/**终端输入DOM节点实例对象 */
-const terminalDom = ref<HTMLElement | undefined>(undefined);
-
-/**终端输入实例对象 */
-const terminal = ref<any>(null);
-
-/**终端输入渲染 */
-function handleRanderXterm(container: HTMLElement | undefined) {
-  if (!container) return;
-  const xterm = new Terminal({
-    cols: props.cols,
-    rows: props.rows,
-    lineHeight: 1.2,
-    fontSize: 12,
-    fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
-    theme: {
-      background: '#000000',
-    },
-    cursorBlink: false, // 光标闪烁
-    cursorStyle: 'block',
-    scrollback: 1000,
-    scrollSensitivity: 15,
-    tabStopWidth: 4,
-    disableStdin: true, // 禁止输入
-  });
-  // 挂载
-  xterm.open(container);
-  // 自适应尺寸
-  const fitAddon = new FitAddon();
-  xterm.loadAddon(fitAddon);
-
-  // 创建 ResizeObserver 实例
-  var observer = new ResizeObserver(entries => {
-    fitAddon.fit();
-  });
-  // 监听元素大小变化
-  observer.observe(container);
-
-  terminal.value = xterm;
-}
-
-onMounted(() => {
-  nextTick(() => {
-    handleRanderXterm(terminalDom.value);
-    // 初始发送命令
-    if (typeof props.value === 'string') {
-      terminal.value.write(props.value);
-    }
-  });
-});
-
-onBeforeUnmount(() => {
-  if (terminal.value != null) {
-    terminal.value.dispose();
-  }
-});
-</script>
-
-<template>
-  <div ref="terminalDom" :id="id" class="terminal"></div>
-</template>
-
-<style lang="css" scoped>
-.terminal {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/ne/neHost/components/EditModal.vue

@@ -0,0 +1,503 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, watch } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, message } from 'ant-design-vue/es';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useDictStore from '@/store/modules/dict';
+const { getDict } = useDictStore();
+import {
+  addNeHost,
+  getNeHost,
+  testNeHost,
+  updateNeHost,
+} from '@/api/ne/neHost';
+const { t } = useI18n();
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  /**记录ID */
+  editId: {
+    type: String,
+    default: '',
+  },
+  /**分组可选网元 */
+  neGroup: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**字典数据 */
+let dict: {
+  /**主机类型 */
+  neHostType: DictType[];
+  /**分组 */
+  neHostGroupId: DictType[];
+  /**认证模式 */
+  neHostAuthMode: DictType[];
+} = reactive({
+  neHostType: [],
+  neHostGroupId: [],
+  neHostAuthMode: [],
+});
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  openByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByEdit: false,
+  title: '信息',
+  from: {
+    hostId: undefined,
+    hostType: 'ssh',
+    groupId: '0',
+    title: '',
+    addr: '',
+    port: 22,
+    user: '',
+    authMode: '0',
+    password: '',
+    privateKey: '',
+    passPhrase: '',
+    remark: '',
+  },
+  confirmLoading: false,
+  uploadFiles: [],
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    title: [
+      {
+        required: true,
+        min: 1,
+        max: 50,
+        message: t('views.ne.neHost.titlePlease'),
+      },
+    ],
+    addr: [
+      {
+        required: true,
+        min: 1,
+        max: 128,
+        message: t('views.ne.neHost.addrPlease'),
+      },
+    ],
+    port: [
+      {
+        required: true,
+        message: t('views.ne.neHost.portPlease'),
+      },
+    ],
+    user: [
+      {
+        required: true,
+        min: 1,
+        max: 50,
+        message: t('views.ne.neHost.userPlease'),
+      },
+    ],
+    password: [
+      {
+        required: true,
+        min: 1,
+        max: 128,
+        message: t('views.ne.neHost.passwordPlease'),
+      },
+    ],
+    privateKey: [
+      {
+        required: true,
+        min: 1,
+        max: 3000,
+        message: t('views.ne.neHost.privateKeyPlease'),
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  if (modalState.confirmLoading) return;
+  const form = toRaw(modalState.from);
+  const validateArr = ['title', 'addr', 'port', 'user'];
+  if (form.authMode === '0') {
+    validateArr.push('password');
+  } else {
+    validateArr.push('privateKey');
+  }
+  modalStateFrom
+    .validate(validateArr)
+    .then(() => {
+      modalState.confirmLoading = true;
+      const neHost = form.hostId ? updateNeHost(form) : addNeHost(form);
+      const hide = message.loading(t('common.loading'), 0);
+      neHost
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 2,
+            });
+            // 返回无引用信息
+            emit('ok', JSON.parse(JSON.stringify(form)));
+            fnModalCancel();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          modalState.confirmLoading = false;
+          hide();
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  modalState.confirmLoading = false;
+  modalStateFrom.resetFields();
+  emit('cancel');
+  emit('update:open', false);
+}
+
+/**
+ * 对话框弹出显示为 ID编辑
+ * @param id id
+ */
+function fnModalVisibleById(id: string) {
+  if (modalState.confirmLoading) return;
+  const hide = message.loading(t('common.loading'), 0);
+  modalState.confirmLoading = true;
+  getNeHost(id)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && res.data) {
+        modalState.from = Object.assign(modalState.from, res.data);
+        modalState.title = t('views.ne.neHost.editTitle');
+        modalState.openByEdit = true;
+      } else {
+        message.error(t('common.getInfoFail'), 2);
+      }
+    })
+    .finally(() => {
+      modalState.confirmLoading = false;
+      hide();
+    });
+}
+
+/**
+ * 对话框弹出测试连接
+ */
+function fnModalTest() {
+  if (modalState.confirmLoading) return;
+  const form = toRaw(modalState.from);
+  const validateArr = ['title', 'addr', 'port', 'user'];
+  if (form.authMode === '0') {
+    validateArr.push('password');
+  }
+  if (form.authMode === '1') {
+    validateArr.push('privateKey');
+  }
+  modalStateFrom
+    .validate(validateArr)
+    .then(() => {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      testNeHost(form)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('views.ne.neHost.testOk'),
+              duration: 2,
+            });
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          modalState.confirmLoading = false;
+          hide();
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.open,
+  val => {
+    if (val) {
+      if (props.editId) {
+        fnModalVisibleById(props.editId);
+      } else {
+        modalStateFrom.resetFields();
+        modalState.title = t('views.ne.neHost.addTitle');
+        modalState.openByEdit = true;
+      }
+    }
+  }
+);
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('ne_host_type'),
+    getDict('ne_host_groupId'),
+    getDict('ne_host_authMode'),
+  ]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.neHostType = resArr[0].value;
+    }
+    if (resArr[1].status === 'fulfilled') {
+      if (props.neGroup) {
+        dict.neHostGroupId = resArr[1].value.filter(item => item.value !== '1');
+      } else {
+        dict.neHostGroupId = resArr[1].value;
+      }
+    }
+    if (resArr[2].status === 'fulfilled') {
+      dict.neHostAuthMode = resArr[2].value;
+    }
+  });
+});
+</script>
+
+<template>
+  <ProModal
+    :drag="true"
+    :width="800"
+    :destroyOnClose="true"
+    :keyboard="false"
+    :mask-closable="false"
+    :open="modalState.openByEdit"
+    :title="modalState.title"
+    :confirm-loading="modalState.confirmLoading"
+    @ok="fnModalOk"
+    @cancel="fnModalCancel"
+  >
+    <a-form
+      name="modalStateFromByEdit"
+      layout="horizontal"
+      :label-col="{ span: 6 }"
+      :label-wrap="true"
+    >
+      <a-row>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item :label="t('views.ne.neHost.hostType')" name="hostType">
+            <a-select
+              v-model:value="modalState.from.hostType"
+              default-value="ssh"
+              :options="dict.neHostType"
+              :disabled="!!modalState.from.hostId"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item :label="t('views.ne.neHost.groupId')" name="groupId">
+            <a-select
+              v-model:value="modalState.from.groupId"
+              default-value="0"
+              :options="dict.neHostGroupId"
+              :disabled="!!modalState.from.hostId"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item
+        :label="t('views.ne.neHost.title')"
+        name="title"
+        v-bind="modalStateFrom.validateInfos.title"
+        :label-col="{ span: 3 }"
+        :label-wrap="true"
+      >
+        <a-input
+          v-model:value="modalState.from.title"
+          allow-clear
+          :maxlength="50"
+          :placeholder="t('common.inputPlease')"
+        >
+        </a-input>
+      </a-form-item>
+
+      <a-row>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.ne.neHost.addr')"
+            name="addr"
+            v-bind="modalStateFrom.validateInfos.addr"
+          >
+            <a-input
+              v-model:value="modalState.from.addr"
+              allow-clear
+              :maxlength="128"
+              :placeholder="t('common.inputPlease')"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.ne.neHost.port')"
+            name="port"
+            v-bind="modalStateFrom.validateInfos.port"
+          >
+            <a-input-number
+              v-model:value="modalState.from.port"
+              :min="10"
+              :max="65535"
+              :step="1"
+              :maxlength="5"
+              style="width: 100%"
+            ></a-input-number>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.ne.neHost.user')"
+            name="user"
+            v-bind="modalStateFrom.validateInfos.user"
+          >
+            <a-input
+              v-model:value="modalState.from.user"
+              allow-clear
+              :maxlength="32"
+              :placeholder="t('common.inputPlease')"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item :label="t('views.ne.neHost.authMode')" name="authMode">
+            <a-select
+              v-model:value="modalState.from.authMode"
+              default-value="0"
+              :options="dict.neHostAuthMode"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item
+        v-if="modalState.from.authMode === '0'"
+        :label="t('views.ne.neHost.password')"
+        name="password"
+        v-bind="modalStateFrom.validateInfos.password"
+        :label-col="{ span: 3 }"
+        :label-wrap="true"
+      >
+        <a-input-password
+          v-model:value="modalState.from.password"
+          :maxlength="128"
+          :placeholder="t('common.inputPlease')"
+        >
+        </a-input-password>
+      </a-form-item>
+
+      <template v-if="modalState.from.authMode === '1'">
+        <a-form-item
+          :label="t('views.ne.neHost.privateKey')"
+          name="privateKey"
+          v-bind="modalStateFrom.validateInfos.privateKey"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
+          <a-textarea
+            v-model:value="modalState.from.privateKey"
+            :auto-size="{ minRows: 4, maxRows: 6 }"
+            :maxlength="3000"
+            :show-count="true"
+            :placeholder="t('views.ne.neHost.privateKeyPlease')"
+          />
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.ne.neHost.passPhrase')"
+          name="passPhrase"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
+          <a-input-password
+            v-model:value="modalState.from.passPhrase"
+            :maxlength="128"
+            :placeholder="t('common.inputPlease')"
+          >
+          </a-input-password>
+        </a-form-item>
+      </template>
+
+      <a-form-item
+        :label="t('common.remark')"
+        name="remark"
+        :label-col="{ span: 3 }"
+        :label-wrap="true"
+      >
+        <a-textarea
+          v-model:value="modalState.from.remark"
+          :auto-size="{ minRows: 1, maxRows: 6 }"
+          :maxlength="450"
+          :show-count="true"
+          :placeholder="t('common.inputPlease')"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label="t('views.ne.neHost.test')"
+        name="test"
+        :label-col="{ span: 3 }"
+        :label-wrap="true"
+      >
+        <a-button
+          type="primary"
+          shape="round"
+          @click="fnModalTest"
+          :loading="modalState.confirmLoading"
+        >
+          <template #icon><LinkOutlined /></template>
+        </a-button>
+      </a-form-item>
+    </a-form>
+  </ProModal>
+</template>
+
+<style lang="less" scoped></style>

src/views/ne/neHost/index.vue

@@ -1,25 +1,20 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw } from 'vue';
+import { reactive, onMounted, toRaw, defineAsyncComponent } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { ProModal } from 'antdv-pro-modal';
 import { SizeType } from 'ant-design-vue/es/config-provider';
 import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import { ColumnsType } from 'ant-design-vue/es/table';
-import { Form, Modal, message } from 'ant-design-vue/es';
+import { Modal, message } from 'ant-design-vue/es';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import {
-  addNeHost,
-  delNeHost,
-  getNeHost,
-  listNeHost,
-  testNeHost,
-  updateNeHost,
-} from '@/api/ne/neHost';
+import { delNeHost, listNeHost } from '@/api/ne/neHost';
 import useDictStore from '@/store/modules/dict';
 import useI18n from '@/hooks/useI18n';
 const { getDict } = useDictStore();
 const { t } = useI18n();
+const EditModal = defineAsyncComponent(
+  () => import('./components/EditModal.vue')
+);
 
 /**字典数据 */
 let dict: {
@@ -40,7 +35,7 @@ let queryParams = reactive({
   /**主机类型 */
   hostType: undefined,
   /**分组 */
-  groupId: undefined,
+  groupId: '1',
   /**名称 */
   title: '',
   /**当前页数 */
@@ -53,7 +48,7 @@ let queryParams = reactive({
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
     hostType: undefined,
-    groupId: undefined,
+    groupId: '1',
     title: '',
     pageNum: 1,
     pageSize: 20,
@@ -213,10 +208,8 @@ function fnGetList(pageNum?: number) {
 type ModalStateType = {
   /**新增框或修改框是否显示 */
   openByEdit: boolean;
-  /**标题 */
-  title: string;
-  /**表单数据 */
-  from: Record<string, any>;
+  /**记录ID */
+  hostId: string;
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
@@ -224,103 +217,21 @@ type ModalStateType = {
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
   openByEdit: false,
-  title: '信息',
-  from: {
-    hostId: undefined,
-    hostType: 'ssh',
-    groupId: '0',
-    title: '',
-    addr: '',
-    port: 22,
-    user: '',
-    authMode: '0',
-    password: '',
-    privateKey: '',
-    passPhrase: '',
-    remark: '',
-  },
+  hostId: '',
   confirmLoading: false,
 });
 
-/**对话框内表单属性和校验规则 */
-const modalStateFrom = Form.useForm(
-  modalState.from,
-  reactive({
-    title: [
-      {
-        required: true,
-        min: 1,
-        max: 50,
-        message: t('views.ne.neHost.titlePlease'),
-      },
-    ],
-    addr: [
-      {
-        required: true,
-        min: 1,
-        max: 128,
-        message: t('views.ne.neHost.addrPlease'),
-      },
-    ],
-    port: [
-      {
-        required: true,
-        message: t('views.ne.neHost.portPlease'),
-      },
-    ],
-    user: [
-      {
-        required: true,
-        min: 1,
-        max: 50,
-        message: t('views.ne.neHost.userPlease'),
-      },
-    ],
-    password: [
-      {
-        required: true,
-        min: 1,
-        max: 128,
-        message: t('views.ne.neHost.passwordPlease'),
-      },
-    ],
-    privateKey: [
-      {
-        required: true,
-        min: 1,
-        max: 3000,
-        message: t('views.ne.neHost.privateKeyPlease'),
-      },
-    ],
-  })
-);
-
 /**
  * 对话框弹出显示为 新增或者修改
  * @param roleId 角色编号ID, 不传为新增
  */
-function fnModalVisibleByEdit(roleId?: string | number) {
+function fnModalVisibleByEdit(roleId?: string) {
   if (!roleId) {
-    modalStateFrom.resetFields();
-    modalState.title = t('views.ne.neHost.addTitle');
-    modalState.openByEdit = true;
+    modalState.hostId = '';
   } else {
-    if (modalState.confirmLoading) return;
-    const hide = message.loading(t('common.loading'), 0);
-    modalState.confirmLoading = true;
-    // 查询角色详细同时根据角色ID查询菜单下拉树结构
-    getNeHost(roleId).then(res => {
-      modalState.confirmLoading = false;
-      hide();
-      if (res.code === RESULT_CODE_SUCCESS && res.data) {
-        modalState.from = Object.assign(modalState.from, res.data);
-        modalState.title = t('views.ne.neHost.editTitle');
-        modalState.openByEdit = true;
-      } else {
-        message.error(t('common.getInfoFail'), 2);
-      }
-    });
+    modalState.hostId = roleId;
   }
+  modalState.openByEdit = true;
 }
 
 /**
@@ -328,44 +239,8 @@ function fnModalVisibleByEdit(roleId?: string | number) {
  * 进行表达规则校验
  */
 function fnModalOk() {
-  if (modalState.confirmLoading) return;
-  const form = toRaw(modalState.from);
-  const validateArr = ['title', 'addr', 'port', 'user'];
-  if (form.authMode === '0') {
-    validateArr.push('password');
-  } else {
-    validateArr.push('privateKey');
-  }
-  modalStateFrom
-    .validate(validateArr)
-    .then(() => {
-      modalState.confirmLoading = true;
-      const neHost = form.hostId ? updateNeHost(form) : addNeHost(form);
-      const hide = message.loading(t('common.loading'), 0);
-      neHost
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('common.operateOk'),
-              duration: 2,
-            });
-            fnModalCancel();
-            fnGetList(1);
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 2,
-            });
-          }
-        })
-        .finally(() => {
-          modalState.confirmLoading = false;
-          hide();
-        });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
+  // 获取列表数据
+  fnGetList();
 }
 
 /**
@@ -374,7 +249,7 @@ function fnModalOk() {
  */
 function fnModalCancel() {
   modalState.openByEdit = false;
-  modalStateFrom.resetFields();
+  modalState.hostId = '';
 }
 
 /**
@@ -406,48 +281,6 @@ function fnRecordDelete(hostId: string) {
   });
 }
 
-/**
- * 对话框弹出测试连接
- */
-function fnModalTest() {
-  if (modalState.confirmLoading) return;
-  const form = toRaw(modalState.from);
-  const validateArr = ['title', 'addr', 'port', 'user'];
-  if (form.authMode === '0') {
-    validateArr.push('password');
-  }
-  if (form.authMode === '1') {
-    validateArr.push('privateKey');
-  }
-  modalStateFrom
-    .validate(validateArr)
-    .then(() => {
-      modalState.confirmLoading = true;
-      const hide = message.loading(t('common.loading'), 0);
-      testNeHost(form)
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('views.ne.neHost.testOk'),
-              duration: 2,
-            });
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 2,
-            });
-          }
-        })
-        .finally(() => {
-          modalState.confirmLoading = false;
-          hide();
-        });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
-}
-
 onMounted(() => {
   // 初始字典数据
   Promise.allSettled([
@@ -532,10 +365,10 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+        <!-- <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
           <template #icon><PlusOutlined /></template>
           {{ t('common.addText') }}
-        </a-button>
+        </a-button> -->
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -612,7 +445,7 @@ onMounted(() => {
                   <template #icon><FormOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip>
+              <!-- <a-tooltip>
                 <template #title>{{ t('common.deleteText') }}</template>
                 <a-button
                   type="link"
@@ -620,218 +453,19 @@ onMounted(() => {
                 >
                   <template #icon><DeleteOutlined /></template>
                 </a-button>
-              </a-tooltip>
+              </a-tooltip> -->
             </a-space>
           </template>
         </template>
       </a-table>
 
       <!-- 新增框或修改框 -->
-      <ProModal
-        :drag="true"
-        :width="800"
-        :destroyOnClose="true"
-        :keyboard="false"
-        :mask-closable="false"
-        :open="modalState.openByEdit"
-        :title="modalState.title"
-        :confirm-loading="modalState.confirmLoading"
+      <EditModal
+        v-model:open="modalState.openByEdit"
+        :edit-id="modalState.hostId"
         @ok="fnModalOk"
         @cancel="fnModalCancel"
-      >
-        <a-form
-          name="modalStateFromByEdit"
-          layout="horizontal"
-          :label-col="{ span: 6 }"
-          :label-wrap="true"
-        >
-          <a-row>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.ne.neHost.hostType')"
-                name="hostType"
-              >
-                <a-select
-                  v-model:value="modalState.from.hostType"
-                  default-value="ssh"
-                  :options="dict.neHostType"
-                >
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.groupId')" name="groupId">
-                <a-select
-                  v-model:value="modalState.from.groupId"
-                  default-value="0"
-                  :options="dict.neHostGroupId"
-                >
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-
-          <a-form-item
-            :label="t('views.ne.neHost.title')"
-            name="title"
-            v-bind="modalStateFrom.validateInfos.title"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
-          >
-            <a-input
-              v-model:value="modalState.from.title"
-              allow-clear
-              :maxlength="50"
-              :placeholder="t('common.inputPlease')"
-            >
-            </a-input>
-          </a-form-item>
-
-          <a-row>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.ne.neHost.addr')"
-                name="addr"
-                v-bind="modalStateFrom.validateInfos.addr"
-              >
-                <a-input
-                  v-model:value="modalState.from.addr"
-                  allow-clear
-                  :maxlength="128"
-                  :placeholder="t('common.inputPlease')"
-                >
-                </a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.ne.neHost.port')"
-                name="port"
-                v-bind="modalStateFrom.validateInfos.port"
-              >
-                <a-input-number
-                  v-model:value="modalState.from.port"
-                  :min="10"
-                  :max="65535"
-                  :step="1"
-                  :maxlength="5"
-                  style="width: 100%"
-                ></a-input-number>
-              </a-form-item>
-            </a-col>
-          </a-row>
-
-          <a-row>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.ne.neHost.user')"
-                name="user"
-                v-bind="modalStateFrom.validateInfos.user"
-              >
-                <a-input
-                  v-model:value="modalState.from.user"
-                  allow-clear
-                  :maxlength="32"
-                  :placeholder="t('common.inputPlease')"
-                >
-                </a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.ne.neHost.authMode')"
-                name="authMode"
-              >
-                <a-select
-                  v-model:value="modalState.from.authMode"
-                  default-value="0"
-                  :options="dict.neHostAuthMode"
-                >
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-
-          <a-form-item
-            v-if="modalState.from.authMode === '0'"
-            :label="t('views.ne.neHost.password')"
-            name="password"
-            v-bind="modalStateFrom.validateInfos.password"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
-          >
-            <a-input-password
-              v-model:value="modalState.from.password"
-              :maxlength="128"
-              :placeholder="t('common.inputPlease')"
-            >
-            </a-input-password>
-          </a-form-item>
-
-          <template v-if="modalState.from.authMode === '1'">
-            <a-form-item
-              :label="t('views.ne.neHost.privateKey')"
-              name="privateKey"
-              v-bind="modalStateFrom.validateInfos.privateKey"
-              :label-col="{ span: 3 }"
-              :label-wrap="true"
-            >
-              <a-textarea
-                v-model:value="modalState.from.privateKey"
-                :auto-size="{ minRows: 4, maxRows: 6 }"
-                :maxlength="3000"
-                :show-count="true"
-                :placeholder="t('views.ne.neHost.privateKeyPlease')"
-              />
-            </a-form-item>
-
-            <a-form-item
-              :label="t('views.ne.neHost.passPhrase')"
-              name="passPhrase"
-              :label-col="{ span: 3 }"
-              :label-wrap="true"
-            >
-              <a-input-password
-                v-model:value="modalState.from.passPhrase"
-                :maxlength="128"
-                :placeholder="t('common.inputPlease')"
-              >
-              </a-input-password>
-            </a-form-item>
-          </template>
-
-          <a-form-item
-            :label="t('common.remark')"
-            name="remark"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
-          >
-            <a-textarea
-              v-model:value="modalState.from.remark"
-              :auto-size="{ minRows: 1, maxRows: 6 }"
-              :maxlength="450"
-              :show-count="true"
-              :placeholder="t('common.inputPlease')"
-            />
-          </a-form-item>
-
-          <a-form-item
-            :label="t('views.ne.neHost.test')"
-            name="test"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
-          >
-            <a-button
-              type="primary"
-              shape="round"
-              @click="fnModalTest"
-              :loading="modalState.confirmLoading"
-            >
-              <template #icon><LinkOutlined /></template>
-            </a-button>
-          </a-form-item>
-        </a-form>
-      </ProModal>
+      ></EditModal>
     </a-card>
   </PageContainer>
 </template>

src/views/tool/terminal/components/hostList.vue

@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, defineAsyncComponent } from 'vue';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { Modal, message } from 'ant-design-vue/es';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { delNeHost, listNeHost } from '@/api/ne/neHost';
+import useDictStore from '@/store/modules/dict';
+import useI18n from '@/hooks/useI18n';
+const { getDict } = useDictStore();
+const { t } = useI18n();
+const EditModal = defineAsyncComponent(
+  () => import('@/views/ne/neHost/components/EditModal.vue')
+);
+const emit = defineEmits(['modal','link']);
+
+/**字典数据 */
+let dict: {
+  /**主机类型 */
+  neHostType: DictType[];
+  /**分组 */
+  neHostGroupId: DictType[];
+  /**认证模式 */
+  neHostAuthMode: DictType[];
+} = reactive({
+  neHostType: [],
+  neHostGroupId: [],
+  neHostAuthMode: [],
+});
+
+/**查询参数 */
+let queryParams = reactive({
+  /**主机类型 */
+  hostType: undefined,
+  /**分组 */
+  groupId: undefined,
+  /**名称 */
+  title: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 10,
+  sortField: 'createTime',
+  sortOrder: 'desc',
+});
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**记录数据 */
+  data: object[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  data: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('common.rowId'),
+    dataIndex: 'hostId',
+    align: 'center',
+    width: 50,
+  },
+  {
+    title: t('views.ne.neHost.hostType'),
+    dataIndex: 'hostType',
+    key: 'hostType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.neHost.groupId'),
+    dataIndex: 'groupId',
+    key: 'groupId',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.neHost.title'),
+    dataIndex: 'title',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.neHost.addr'),
+    dataIndex: 'addr',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.neHost.port'),
+    dataIndex: 'port',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('common.operate'),
+    key: 'hostId',
+    align: 'left',
+  },
+];
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 10,
+  /**默认的每页条数 */
+  defaultPageSize: 10,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**查询信息列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listNeHost(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  openByEdit: boolean;
+  /**记录ID */
+  hostId: string;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByEdit: false,
+  hostId: '',
+  confirmLoading: false,
+});
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param roleId 角色编号ID, 不传为新增
+ */
+function fnModalVisibleByEdit(roleId?: string) {
+  emit('modal');
+  if (!roleId) {
+    modalState.hostId = '';
+  } else {
+    modalState.hostId = roleId;
+  }
+  modalState.openByEdit = true;
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  // 获取列表数据
+  fnGetList();
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  modalState.hostId = '';
+}
+
+/**
+ * 网元主机删除
+ * @param hostId 网元主机编号ID
+ */
+function fnRecordDelete(hostId: string) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.ne.neHost.delTip', { num: hostId }),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      delNeHost(hostId).then(res => {
+        hide();
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('common.operateOk'),
+            duration: 2,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**
+ * 网元主机连接
+ * @param hostId 网元主机编号ID
+ */
+function fnRecordLink(host: Record<string, any>) {
+  emit('link', JSON.parse(JSON.stringify(host)));
+}
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('ne_host_type'),
+    getDict('ne_host_groupId'),
+    getDict('ne_host_authMode'),
+  ]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.neHostType = resArr[0].value;
+    }
+    if (resArr[1].status === 'fulfilled') {
+      dict.neHostGroupId = resArr[1].value;
+    }
+    if (resArr[2].status === 'fulfilled') {
+      dict.neHostAuthMode = resArr[2].value;
+    }
+  });
+  // 获取列表数据
+  fnGetList();
+});
+</script>
+
+<template>
+  <a-card :bordered="false" :body-style="{ padding: '0px' }" size="small">
+    <!-- 插槽-卡片左侧侧 -->
+    <template #title>
+      <a-space :size="8" align="center">
+        <a-button
+          type="primary"
+          size="small"
+          @click.prevent="fnModalVisibleByEdit()"
+        >
+          <template #icon><PlusOutlined /></template>
+          {{ t('common.addText') }}
+        </a-button>
+        <a-button type="text" size="small" @click.prevent="fnGetList()">
+          <template #icon><ReloadOutlined /></template>
+          {{ t('common.reloadText') }}
+        </a-button>
+      </a-space>
+    </template>
+
+    <!-- 插槽-卡片右侧 -->
+    <template #extra> </template>
+
+    <!-- 表格列表 -->
+    <a-table
+      class="table"
+      row-key="hostId"
+      :columns="tableColumns"
+      :loading="tableState.loading"
+      :data-source="tableState.data"
+      :size="tableState.size"
+      :pagination="tablePagination"
+      :scroll="{ x: tableColumns.length * 120 }"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'groupId'">
+          <DictTag :options="dict.neHostGroupId" :value="record.groupId" />
+        </template>
+        <template v-if="column.key === 'hostType'">
+          <DictTag :options="dict.neHostType" :value="record.hostType" />
+        </template>
+        <template v-if="column.key === 'hostId'">
+          <a-space :size="8" align="center">
+            <a-tooltip>
+              <template #title> Link to host </template>
+              <a-button type="link" @click.prevent="fnRecordLink(record)">
+                <template #icon><CodeOutlined /></template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip>
+              <template #title>{{ t('common.editText') }}</template>
+              <a-button
+                type="link"
+                @click.prevent="fnModalVisibleByEdit(record.hostId)"
+              >
+                <template #icon><FormOutlined /></template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip v-if="record.groupId !== '1'">
+              <template #title>{{ t('common.deleteText') }}</template>
+              <a-button
+                type="link"
+                @click.prevent="fnRecordDelete(record.hostId)"
+              >
+                <template #icon><DeleteOutlined /></template>
+              </a-button>
+            </a-tooltip>
+          </a-space>
+        </template>
+      </template>
+    </a-table>
+
+    <!-- 新增框或修改框 -->
+    <EditModal
+      v-model:open="modalState.openByEdit"
+      :edit-id="modalState.hostId"
+      :ne-group="true"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    ></EditModal>
+  </a-card>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>

src/views/tool/terminal/index.vue

@@ -1,16 +1,29 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
 import { Modal } from 'ant-design-vue/es';
-import TerminalSSH from '@/components/TerminalSSH/index.vue';
-import TerminalTelnet from '@/components/TerminalTelnet/index.vue';
-import { reactive, toRaw } from 'vue';
+import { useFullscreen } from '@vueuse/core';
+import { defineAsyncComponent, reactive, ref, toRaw } from 'vue';
 import { parseDuration } from '@/utils/date-utils';
 import { listNeHost } from '@/api/ne/neHost';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { useRouter } from 'vue-router';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const router = useRouter();
+const TerminalSSH = defineAsyncComponent(
+  () => import('@/components/TerminalSSH/index.vue')
+);
+const TerminalTelnet = defineAsyncComponent(
+  () => import('@/components/TerminalTelnet/index.vue')
+);
+const TerminalRedis = defineAsyncComponent(
+  () => import('@/components/TerminalRedis/index.vue')
+);
+const HostList = defineAsyncComponent(
+  () => import('./components/hostList.vue')
+);
+
+// 全屏
+const terminalCard = ref<HTMLElement | null>(null);
+const { isFullscreen, toggle } = useFullscreen(terminalCard);
 
 /**主机对象信息状态类型 */
 type HostStateType = {
@@ -146,10 +159,6 @@ function fnTerminalClose(data: Record<string, any>) {
  * @param key 菜单key
  */
 function fnTabMenu(key: string | number) {
-  // 跳转主机创建
-  if (key === 'new') {
-    router.push({ name: 'NeHost_2135' });
-  }
   // 刷新当前
   if (key === 'reload') {
     const tabIndex = tabState.panes.findIndex(
@@ -206,6 +215,8 @@ function fnTabMenu(key: string | number) {
  * @param id 标签的key
  */
 function fnTabClose(id: string) {
+  if (isFullscreen.value) toggle();
+
   // 获取当前项下标
   const tabIndex = tabState.panes.findIndex(tab => tab.id === id);
   if (tabIndex === -1) return;
@@ -213,7 +224,7 @@ function fnTabClose(id: string) {
   Modal.confirm({
     title: t('common.tipTitle'),
     content: t('views.tool.terminal.closeTip', {
-      num: `${item.host.hostType} - ${item.host.title}`,
+      num: `${item.host.hostType.toUpperCase()} - ${item.host.title}`,
     }),
     onOk() {
       tabState.panes.splice(tabIndex, 1);
@@ -226,7 +237,12 @@ function fnTabClose(id: string) {
 
 <template>
   <PageContainer>
-    <a-card :bordered="false" size="small" :body-style="{ padding: '12px' }">
+    <a-card
+      :bordered="false"
+      size="small"
+      :body-style="{ padding: '12px' }"
+      ref="terminalCard"
+    >
       <a-tabs
         class="terminal-tabs"
         hide-add
@@ -241,7 +257,7 @@ function fnTabClose(id: string) {
         <a-tab-pane
           v-for="pane in tabState.panes"
           :key="pane.id"
-          :closable="tabState.panes.length > 1"
+          :closable="pane.id !== '0'"
         >
           <template #tab>
             <a-badge
@@ -273,84 +289,45 @@ function fnTabClose(id: string) {
             >
             </TerminalTelnet>
 
+            <!-- 非开始页的redis主机 -->
+            <TerminalRedis
+              v-if="pane.id !== '0' && pane.host.hostType === 'redis'"
+              :id="pane.id"
+              :hostId="pane.host.hostId"
+              @connect="fnTerminalConnect"
+              @close="fnTerminalClose"
+            >
+            </TerminalRedis>
+
             <!-- 开始页 -->
             <div v-if="pane.id === '0'">
-              <!-- 提示选择主机 -->
-              <a-result
-                :title="t('views.tool.terminal.hostSelectTitle')"
-                v-show="tabState.activeKey === '0' && !hostState.show"
-              >
-                <template #extra>
-                  <a-button
-                    key="hostState"
-                    type="primary"
-                    @click="fnSelectHost()"
-                  >
-                    {{ t('views.tool.terminal.hostSelectShow') }}
-                  </a-button>
-                </template>
-              </a-result>
-
               <!-- 主机列表 -->
-              <a-list
-                v-show="tabState.activeKey === '0' && hostState.show"
-                :header="t('views.tool.terminal.hostSelectHeader')"
-                :grid="{ gutter: 16, column: 4, lg: 4, md: 2, xs: 1 }"
-                :data-source="hostState.data"
-                row-key="hostId"
-              >
-                <!-- 插槽-加载更多 -->
-                <template #loadMore>
-                  <div style="text-align: center">
-                    <a-button
-                      @click="fnGetHostList()"
-                      :loading="hostState.loading"
-                    >
-                      {{
-                        t('views.tool.terminal.hostSelectMore', {
-                          num: hostState.total - hostState.data.length,
-                        })
-                      }}
-                    </a-button>
-                  </div>
-                </template>
-                <!-- 插槽-渲染项 -->
-                <template #renderItem="{ item }">
-                  <a-list-item>
-                    <a-card size="small" :title="item.title">
-                      <template #extra>
-                        <a-button
-                          type="primary"
-                          shape="round"
-                          size="small"
-                          @click="fnConnectHost(item)"
-                        >
-                          <template #icon><LinkOutlined /></template>
-                          {{ item.hostType.toUpperCase() }}
-                        </a-button>
-                      </template>
-                      <div>{{ `${item.addr}:${item.port}` }}</div>
-                    </a-card>
-                  </a-list-item>
-                </template>
-              </a-list>
+              <HostList
+                v-show="tabState.activeKey === '0'"
+                @modal="() => (isFullscreen ? toggle() : null)"
+                @link="fnConnectHost"
+              ></HostList>
             </div>
           </div>
         </a-tab-pane>
 
         <template #rightExtra>
           <a-space :size="8" align="center">
-            <a-tooltip placement="topRight" v-if="false">
+            <a-tooltip placement="topRight">
               <template #title>
-                {{ t('views.tool.terminal.new') }}
+                {{ t('loayouts.rightContent.fullscreen') }}
               </template>
               <a-button
                 type="default"
                 shape="circle"
                 size="small"
-                @click="fnTabMenu('new')"
+                style="color: inherit"
+                @click="toggle"
               >
-                <template #icon><PlusOutlined /></template>
+                <template #icon>
+                  <FullscreenExitOutlined v-if="isFullscreen" />
+                  <FullscreenOutlined v-else />
+                </template>
               </a-button>
             </a-tooltip>
             <!-- 非开始页的更多操作 -->