diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index f8014b66..9ddf4a64 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -87,6 +87,8 @@ declare module 'vue' {
     MyselfInfoDialog: typeof import('./src/components/MyselfInfoDialog.vue')['default']
     NewCardList: typeof import('./src/components/NewCardList/index.vue')['default']
     NodeSimpleChart: typeof import('./src/components/NodeSimpleChart.vue')['default']
+    NoPreview: typeof import('./src/components/NoPreview.vue')['default']
+    NoPreviewCard: typeof import('./src/components/NoPreviewCard.vue')['default']
     Params: typeof import('./src/components/NewCardList/params.vue')['default']
     PlaceHolderCard: typeof import('./src/components/PlaceHolderCard.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/frontend/src/components/CardError.vue b/frontend/src/components/CardError.vue
index f8552bb4..3190287a 100644
--- a/frontend/src/components/CardError.vue
+++ b/frontend/src/components/CardError.vue
@@ -18,7 +18,11 @@ defineProps<{
     <template #body>
       <div class="flex justify-center align-center h-100">
         <div class="">
-          <a-typography-paragraph v-if="containerState.showNewCardDialog" :level="5">
+          <a-typography-paragraph
+            v-if="containerState.showNewCardDialog"
+            :level="5"
+            style="max-width: 320px; margin: auto; text-align: center"
+          >
             <ExclamationCircleOutlined />
             {{ t("TXT_CODE_450481c5") }}
           </a-typography-paragraph>
diff --git a/frontend/src/components/NoPreviewCard.vue b/frontend/src/components/NoPreviewCard.vue
new file mode 100644
index 00000000..01019a0e
--- /dev/null
+++ b/frontend/src/components/NoPreviewCard.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import { t } from "@/lang/i18n";
+import type { LayoutCard } from "../types/index";
+
+defineProps<{
+  card: LayoutCard;
+}>();
+</script>
+
+<template>
+  <CardPanel>
+    <template #title>{{ card.title }}</template>
+    <template #body>
+      <div class="flex justify-center align-center h-100">
+        <a-typography-paragraph style="max-width: 320px; margin: auto; text-align: center">
+          <ExclamationCircleOutlined />
+          {{ t("此卡片无法在设计模式下预览。") }}
+        </a-typography-paragraph>
+      </div>
+    </template>
+  </CardPanel>
+</template>
diff --git a/frontend/src/hooks/useTerminal.ts b/frontend/src/hooks/useTerminal.ts
index acc46eab..9c1115b8 100644
--- a/frontend/src/hooks/useTerminal.ts
+++ b/frontend/src/hooks/useTerminal.ts
@@ -198,7 +198,8 @@ export function useTerminal() {
     clearInterval(statusQueryTask);
     events.removeAllListeners();
 
-    socket?.close();
+    socket?.disconnect();
+    socket?.removeAllListeners();
   });
 
   const isStopped = computed(() =>
diff --git a/frontend/src/widgets/instance/Terminal.vue b/frontend/src/widgets/instance/Terminal.vue
index a8338f00..126321b1 100644
--- a/frontend/src/widgets/instance/Terminal.vue
+++ b/frontend/src/widgets/instance/Terminal.vue
@@ -31,16 +31,13 @@ import { CloseOutlined } from "@ant-design/icons-vue";
 import { GLOBAL_INSTANCE_NAME } from "../../config/const";
 import { INSTANCE_STATUS_TEXT } from "../../hooks/useInstance";
 import { message } from "ant-design-vue";
-import { reportError } from "@/tools/validator";
 import connectErrorImage from "@/assets/daemon_connection_error.png";
-import { useLayoutContainerStore } from "@/stores/useLayoutContainerStore";
 import { Terminal } from "xterm";
 
 const props = defineProps<{
   card: LayoutCard;
 }>();
 
-const { containerState } = useLayoutContainerStore();
 const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
 const {
   execute,
@@ -58,7 +55,8 @@ const instanceId = getMetaOrRouteValue("instanceId");
 const daemonId = getMetaOrRouteValue("daemonId");
 const viewType = getMetaOrRouteValue("viewType", false);
 
-const terminalDomId = computed(() => `terminal-window-${getRandomId()}`);
+const innerTerminalType = viewType === "inner";
+const terminalDomId = `terminal-window-${getRandomId()}`;
 
 const commandInputValue = ref("");
 const socketError = ref<Error>();
@@ -156,7 +154,7 @@ const handleSendCommand = () => {
 };
 
 const initTerminal = async () => {
-  const dom = document.getElementById(terminalDomId.value);
+  const dom = document.getElementById(terminalDomId);
   if (dom) {
     const term = initTerminalWindow(dom);
     try {
@@ -193,7 +191,7 @@ events.on("error", (error: Error) => {
 let term: Terminal | null = null;
 
 const clearTerminal = () => {
-  term && term.clear();
+  term?.clear();
 };
 
 onMounted(async () => {
@@ -206,11 +204,11 @@ onMounted(async () => {
     }
     term = await initTerminal();
   } catch (error) {
-    throw new Error(t("TXT_CODE_9885543f"));
+    console.error(error);
+    throw error;
+    // throw new Error(t("TXT_CODE_9885543f"));
   }
 });
-
-const innerTerminalType = viewType === "inner";
 </script>
 
 <template>
@@ -290,7 +288,7 @@ const innerTerminalType = viewType === "inner";
       </BetweenMenus>
     </div>
     <a-spin :spinning="!isConnect" :tip="t('TXT_CODE_686c9ca9')">
-      <div v-if="!containerState.isDesignMode" class="console-wrapper">
+      <div class="console-wrapper">
         <div class="terminal-button-group position-absolute-right position-absolute-top">
           <ul>
             <li @click="clearTerminal()">
@@ -320,9 +318,6 @@ const innerTerminalType = viewType === "inner";
           </a-input>
         </div>
       </div>
-      <div v-else>
-        <a-skeleton :paragraph="{ rows: 8 }" />
-      </div>
     </a-spin>
   </div>
 
@@ -359,7 +354,7 @@ const innerTerminalType = viewType === "inner";
       </a-dropdown>
     </template>
     <template #body>
-      <div v-if="!containerState.isDesignMode" class="console-wrapper">
+      <div class="console-wrapper">
         <div class="terminal-wrapper">
           <div class="terminal-container">
             <div :id="terminalDomId"></div>
@@ -377,9 +372,6 @@ const innerTerminalType = viewType === "inner";
           </a-input>
         </div>
       </div>
-      <div v-else>
-        <a-skeleton :paragraph="{ rows: 8 }" />
-      </div>
     </template>
   </CardPanel>
 </template>
@@ -453,7 +445,7 @@ const innerTerminalType = viewType === "inner";
     padding: 8px;
     border-radius: 6px;
     overflow-x: auto !important;
-    overflow-y: hidden;
+    // overflow-y: auto !important;
     display: flex;
     flex-direction: column;
     .terminal-container {