Feat: add icon btn

frontend/components.d.ts

@@ -42,7 +42,9 @@ declare module 'vue' {
     BetweenMenus: typeof import('./src/components/BetweenMenus.vue')['default']
     CardOperator: typeof import('./src/components/CardOperator.vue')['default']
     CardPanel: typeof import('./src/components/CardPanel.vue')['default']
+    copy: typeof import('./src/components/ActionButton copy.vue')['default']
     DataStatistic: typeof import('./src/components/DataStatistic.vue')['default']
+    IconBtn: typeof import('./src/components/IconBtn.vue')['default']
     InnerCard: typeof import('./src/components/InnerCard.vue')['default']
     InputDialogProvider: typeof import('./src/components/InputDialogProvider.vue')['default']
     LayoutCard: typeof import('./src/components/LayoutCard.vue')['default']

frontend/src/components/IconBtn.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { FunctionalComponent } from "vue";
+
+defineProps<{
+  icon: FunctionalComponent;
+  title: string;
+  placement?: string;
+}>();
+</script>
+
+<template>
+  <span class="btn">
+    <a-tooltip :placement="placement ? placement : 'top'">
+      <template #title>
+        <span>{{ title }}</span>
+      </template>
+      <component :is="icon"></component>
+    </a-tooltip>
+  </span>
+</template>
+
+<style scoped lang="scss">
+.btn {
+  padding: 6px 8px;
+  border: 1px solid rgb(0, 0, 0, 0);
+
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.4s;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: var(--color-gray-2);
+    border: 1px solid var(--color-gray-8);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
+  }
+}
+</style>

frontend/src/hooks/useTerminal.ts

@@ -116,17 +116,19 @@ export function useTerminal() {
       disableStdin: false,
       cursorStyle: "underline",
       cursorBlink: true,
-      fontSize: isPhone.value ? 10 : 13,
+      fontSize: 14,
       theme: {
         background: "#1e1e1e"
       },
       allowProposedApi: true,
-      rendererType: "canvas"
+      rendererType: "canvas",
+      rows: 40,
+      cols: 160
     });
     const fitAddon = new FitAddon();
-    term.loadAddon(fitAddon);
+    // term.loadAddon(fitAddon);
     term.open(element);
-    fitAddon.fit();
+    // fitAddon.fit();
     termFitAddon.value = fitAddon;
 
     term.onData((data) => {
@@ -145,21 +147,20 @@ export function useTerminal() {
   };
 
   events.on("stdout", (v: StdoutData) => {
-    // console.debug("stdout:", v.text);
     terminal.value?.write(v.text);
   });
 
-  const handleTerminalSizeChange = () => {
-    termFitAddon.value?.fit();
-  };
+  // const handleTerminalSizeChange = () => {
+  //   termFitAddon.value?.fit();
+  // };
 
   onMounted(() => {
-    window.addEventListener("resize", handleTerminalSizeChange);
+    // window.addEventListener("resize", handleTerminalSizeChange);
   });
 
   onUnmounted(() => {
     events.removeAllListeners();
-    window.removeEventListener("resize", handleTerminalSizeChange);
+    // window.removeEventListener("resize", handleTerminalSizeChange);
     socket.close();
   });
 

frontend/src/widgets/instance/Terminal.vue

@@ -2,14 +2,15 @@
 import CardPanel from "@/components/CardPanel.vue";
 import { t } from "@/lang/i18n";
 import type { LayoutCard } from "@/types";
-import { DownOutlined, PlaySquareOutlined } from "@ant-design/icons-vue";
+import { CodeOutlined, DownOutlined, PlaySquareOutlined } from "@ant-design/icons-vue";
 import { arrayFilter } from "../../tools/array";
 import { useRoute } from "vue-router";
 import { useTerminal } from "../../hooks/useTerminal";
-import { onMounted, computed } from "vue";
+import { onMounted, computed, ref } from "vue";
 import type { InstanceDetail } from "../../types/index";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
 import { getRandomId } from "../../tools/randId";
+import IconBtn from "@/components/IconBtn.vue";
 
 const props = defineProps<{
   card: LayoutCard;
@@ -20,6 +21,7 @@ const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
 const instanceId = getMetaOrRouteValue<string>("instanceId");
 const daemonId = getMetaOrRouteValue<string>("daemonId");
 const terminalDomId = computed(() => `terminal-window-${getRandomId()}`);
+const commandInputValue = ref("");
 
 const quickOperations = arrayFilter([
   // {
@@ -84,15 +86,15 @@ onMounted(async () => {
   <CardPanel class="containerWrapper" style="height: 100%">
     <template #title>{{ card.title }}</template>
     <template #operator>
-      <a-button
+      <span
         v-for="item in quickOperations"
         :key="item.title"
         size="default"
         class="mr-8"
         v-bind="item.props"
       >
-        {{ item.title }}
-      </a-button>
+        <IconBtn :icon="item.icon" :title="item.title"></IconBtn>
+      </span>
       <a-dropdown>
         <template #overlay>
           <a-menu>
@@ -102,26 +104,26 @@ onMounted(async () => {
             </a-menu-item>
           </a-menu>
         </template>
-        <a-button size="default" type="primary">
-          操作
-          <DownOutlined />
-        </a-button>
+        <span size="default" type="primary">
+          <IconBtn :icon="DownOutlined" :title="t('操作')"></IconBtn>
+        </span>
       </a-dropdown>
     </template>
     <template #body>
+      <div class="console-wrapper">
         <div class="terminal-wrapper">
           <div class="terminal-container">
             <div :id="terminalDomId"></div>
           </div>
         </div>
-      <!-- <p>控制台区域（TODO）</p>
-
-      <p>实例ID: {{ instanceId }}</p>
-      <p>守护进程ID: {{ daemonId }}</p>
-
-      <p>
-        {{ state }}
-      </p> -->
+        <div class="command-input">
+          <a-input v-model:value="commandInputValue" :placeholder="t('在这里输入命令按回车键发送')">
+            <template #prefix>
+              <CodeOutlined style="font-size: 18px" />
+            </template>
+          </a-input>
+        </div>
+      </div>
     </template>
   </CardPanel>
 </template>
@@ -129,17 +131,28 @@ onMounted(async () => {
 <style lang="scss">
 @import "../../assets/xterm.scss";
 
-.terminal-wrapper {
+.console-wrapper {
+  .terminal-wrapper {
     position: relative;
     overflow: hidden;
     height: 100%;
     background-color: #1e1e1e;
     padding: 4px;
-  border-radius: 4px;
+    border-radius: 6px;
     overflow-x: auto !important;
     overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
     .terminal-container {
       min-width: 680px;
+      height: 100%;
+    }
+
+    margin-bottom: 12px;
+  }
+
+  .command-input {
+    position: relative;
   }
 }
 </style>