From e82ab043cfc5d58f6cfd33e8b20056f8f433ea04 Mon Sep 17 00:00:00 2001
From: unitwk <unitwk@outlook.com>
Date: Sat, 2 Sep 2023 22:37:49 +0800
Subject: [PATCH] Refactor: terminal page

---
 frontend/src/config/index.ts               |  5 +-
 frontend/src/config/originLayoutConfig.ts  |  5 +-
 frontend/src/hooks/useCardOperation.ts     |  6 +-
 frontend/src/hooks/useOverviewInfo.ts      |  3 +-
 frontend/src/widgets/instance/Terminal.vue | 70 ++++++++++++++++++++--
 5 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/frontend/src/config/index.ts b/frontend/src/config/index.ts
index d57f83ba..7281fbfb 100644
--- a/frontend/src/config/index.ts
+++ b/frontend/src/config/index.ts
@@ -100,13 +100,16 @@ export function getLayoutCardPool() {
       id: getRandomId(),
       type: "Terminal",
       title: "实例控制台",
+
       width: 6,
       description: "用于显示和交互某个实例的控制台。",
       height: LayoutCardHeight.BIG,
       category: NEW_CARD_TYPE.INSTANCE,
 
       // 新增卡片时被要求填写的参数
-      meta: {},
+      meta: {
+        viewType: "card"
+      },
       params: [
         {
           field: "instanceId",
diff --git a/frontend/src/config/originLayoutConfig.ts b/frontend/src/config/originLayoutConfig.ts
index dfd468e1..edfd3eff 100644
--- a/frontend/src/config/originLayoutConfig.ts
+++ b/frontend/src/config/originLayoutConfig.ts
@@ -141,13 +141,16 @@ export const ORIGIN_LAYOUT_CONFIG: PageLayoutConfig[] = [
     items: [
       {
         id: getRandomId(),
-        meta: {},
+        meta: {
+          viewType: "inner"
+        },
         type: "Terminal",
         title: t("控制台"),
         width: 12,
         height: LayoutCardHeight.BIG,
         disableDelete: true
       },
+
       {
         id: getRandomId(),
         meta: {},
diff --git a/frontend/src/hooks/useCardOperation.ts b/frontend/src/hooks/useCardOperation.ts
index cd868d15..12618bff 100644
--- a/frontend/src/hooks/useCardOperation.ts
+++ b/frontend/src/hooks/useCardOperation.ts
@@ -13,7 +13,7 @@ export function useCardOperation() {
     LayoutCardHeight.BIG,
     LayoutCardHeight.MEDIUM,
     LayoutCardHeight.SMALL,
-    LayoutCardHeight.MINI,
+    LayoutCardHeight.MINI
   ];
 
   const addCardHeight = (id: string) => {
@@ -39,7 +39,7 @@ export function useCardOperation() {
 
   const reduceCardWidth = (id: string) => {
     const card = getCardById("", id);
-    if (card && card.width > 2) card.width -= 1;
+    if (card && card.width > 1) card.width -= 1;
   };
 
   const editCardName = (id: string, newName: string) => {
@@ -53,6 +53,6 @@ export function useCardOperation() {
     reduceCardWidth,
     reduceCardHeight,
     addCardHeight,
-    editCardName,
+    editCardName
   };
 }
diff --git a/frontend/src/hooks/useOverviewInfo.ts b/frontend/src/hooks/useOverviewInfo.ts
index e85c5bc1..a4bf81e7 100644
--- a/frontend/src/hooks/useOverviewInfo.ts
+++ b/frontend/src/hooks/useOverviewInfo.ts
@@ -51,6 +51,7 @@ export function useOverviewInfo() {
 
   return {
     ...result,
-    state: result.state as Ref<ComputedOverviewResponse | undefined>
+    state: result.state as Ref<ComputedOverviewResponse | undefined>,
+    execute: null
   };
 }
diff --git a/frontend/src/widgets/instance/Terminal.vue b/frontend/src/widgets/instance/Terminal.vue
index 7f0859c4..af780d99 100644
--- a/frontend/src/widgets/instance/Terminal.vue
+++ b/frontend/src/widgets/instance/Terminal.vue
@@ -4,6 +4,7 @@ import { t } from "@/lang/i18n";
 import type { LayoutCard } from "@/types";
 import {
   CloudDownloadOutlined,
+  CloudServerOutlined,
   CodeOutlined,
   DownOutlined,
   PauseCircleOutlined,
@@ -24,17 +25,18 @@ const props = defineProps<{
 }>();
 
 const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
-const { execute, initTerminalWindow, sendCommand } = useTerminal();
+const { execute, initTerminalWindow, sendCommand, state: instanceInfo } = useTerminal();
 
 const instanceId = getMetaOrRouteValue("instanceId");
 const daemonId = getMetaOrRouteValue("daemonId");
+const viewType = getMetaOrRouteValue("viewType");
 const terminalDomId = computed(() => `terminal-window-${getRandomId()}`);
 const commandInputValue = ref("");
 
 const quickOperations = computed(() =>
   arrayFilter([
     {
-      title: t("开启程序"),
+      title: t("开启"),
       icon: PlayCircleOutlined,
       click: () => {
         openInstance().execute({
@@ -47,7 +49,7 @@ const quickOperations = computed(() =>
       props: {}
     },
     {
-      title: t("关闭程序"),
+      title: t("关闭"),
       icon: PauseCircleOutlined,
       click: () => {
         stopInstance().execute({
@@ -110,10 +112,65 @@ onMounted(async () => {
   }
   initTerminal();
 });
+
+const innerTerminalType = viewType === "inner";
 </script>
 
 <template>
-  <CardPanel class="containerWrapper" style="height: 100%">
+  <!-- Terminal Page View -->
+  <div v-if="innerTerminalType">
+    <div class="mb-24">
+      <BetweenMenus>
+        <template #left>
+          <a-typography-title class="mb-0" :level="4">
+            <CloudServerOutlined />
+            <span class="ml-8">{{ t("实例") }} {{ instanceInfo?.config.nickname }} </span>
+          </a-typography-title>
+        </template>
+        <template #right>
+          <a-dropdown>
+            <template #overlay>
+              <a-menu>
+                <a-menu-item
+                  v-for="item in [...quickOperations, ...instanceOperations]"
+                  :key="item.title"
+                  @click="item.click"
+                >
+                  <component :is="item.icon" />
+                  {{ item.title }}
+                </a-menu-item>
+              </a-menu>
+            </template>
+            <a-button type="primary">
+              {{ t("操作") }}
+              <DownOutlined />
+            </a-button>
+          </a-dropdown>
+        </template>
+      </BetweenMenus>
+    </div>
+    <div class="console-wrapper">
+      <div class="terminal-wrapper">
+        <div class="terminal-container">
+          <div :id="terminalDomId"></div>
+        </div>
+      </div>
+      <div class="command-input">
+        <a-input
+          v-model:value="commandInputValue"
+          :placeholder="t('在这里输入命令按回车键发送')"
+          @press-enter="handleSendCommand"
+        >
+          <template #prefix>
+            <CodeOutlined style="font-size: 18px" />
+          </template>
+        </a-input>
+      </div>
+    </div>
+  </div>
+
+  <!-- Other Page View -->
+  <CardPanel v-else class="containerWrapper" style="height: 100%">
     <template #title>{{ card.title }}</template>
     <template #operator>
       <span
@@ -164,12 +221,15 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 .console-wrapper {
+  position: relative;
+  overflow: hidden;
+
   .terminal-wrapper {
     position: relative;
     overflow: hidden;
     height: 100%;
     background-color: #1e1e1e;
-    padding: 4px;
+    padding: 8px;
     border-radius: 6px;
     overflow-x: auto !important;
     overflow-y: hidden;