feat: add terminal icon for installed App (#9331)

* feat: add terminal icon for installed App

* refactor: 应用卡片打开容器终端，适配多个容器情况

frontend/src/views/app-store/installed/index.vue

@@ -131,6 +131,25 @@
                                                                     </el-button>
                                                                 </el-tooltip>
                                                             </span>
+                                                            <span class="ml-1">
+                                                                <el-tooltip
+                                                                    v-if="mode !== 'upgrade'"
+                                                                    effect="dark"
+                                                                    :content="$t('menu.terminal')"
+                                                                    placement="top"
+                                                                >
+                                                                    <el-button
+                                                                        type="primary"
+                                                                        link
+                                                                        @click="openTerminal(installed)"
+                                                                        :disabled="installed.status !== 'Running'"
+                                                                    >
+                                                                        <el-icon>
+                                                                            <SvgIcon iconName="p-terminal2" />
+                                                                        </el-icon>
+                                                                    </el-button>
+                                                                </el-tooltip>
+                                                            </span>
                                                             <span class="ml-1" v-if="mode === 'installed'">
                                                                 <el-tooltip
                                                                     effect="dark"
@@ -385,6 +404,7 @@
     <PortJumpDialog ref="dialogPortJumpRef" />
     <AppIgnore ref="ignoreRef" @close="search" />
     <ComposeLogs ref="composeLogRef" />
+    <TerminalDialog ref="dialogTerminalRef" />
     <TaskLog ref="taskLogRef" @close="search" />
     <Detail ref="detailRef" />
     <IgnoreApp ref="ignoreAppRef" @close="search" />
@@ -404,6 +424,7 @@ import AppParams from './detail/index.vue';
 import AppUpgrade from './upgrade/index.vue';
 import AppIgnore from './ignore/index.vue';
 import ComposeLogs from '@/components/log/compose/index.vue';
+import TerminalDialog from '@/views/container/container/terminal/index.vue';
 import { App } from '@/api/interface/app';
 import Status from '@/components/status/index.vue';
 import { getAge, jumpToPath, toLink } from '@/utils/util';
@@ -415,6 +436,7 @@ import Detail from '@/views/app-store/detail/index.vue';
 import IgnoreApp from '@/views/app-store/installed/ignore/create/index.vue';
 import { getAgentSettingByKey } from '@/api/modules/setting';
 import Tags from '@/views/app-store/components/tag.vue';
+import SvgIcon from '@/components/svg-icon/svg-icon.vue';
 
 const data = ref<any>();
 const loading = ref(false);
@@ -442,6 +464,7 @@ const upgradeRef = ref();
 const ignoreRef = ref();
 const dialogPortJumpRef = ref();
 const composeLogRef = ref();
+const dialogTerminalRef = ref();
 const taskLogRef = ref();
 const searchReq = reactive({
     page: 1,
@@ -700,6 +723,11 @@ const openLog = (row: any) => {
     }
 };
 
+const openTerminal = (row: any) => {
+    const title = i18n.global.t('app.app') + ' ' + row.name;
+    dialogTerminalRef.value!.acceptParams({ containerID: row.container, title: title });
+};
+
 const getConfig = async () => {
     try {
         const res = await getAgentSettingByKey('SystemIP');
@@ -778,4 +806,9 @@ onUnmounted(() => {
         margin-left: 0;
     }
 }
+.svg-icon {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+}
 </style>

frontend/src/views/container/compose/detail/index.vue

@@ -298,7 +298,8 @@ const onMonitor = (row: any) => {
 
 const dialogTerminalRef = ref();
 const onTerminal = (row: any) => {
-    dialogTerminalRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
+    const title = i18n.global.t('menu.container') + ' ' + row.name;
+    dialogTerminalRef.value!.acceptParams({ containerID: row.containerID, title: title });
 };
 
 const buttons = [

frontend/src/views/container/container/index.vue

@@ -614,7 +614,8 @@ const onMonitor = (row: any) => {
 
 const dialogTerminalRef = ref();
 const onTerminal = (row: any) => {
-    dialogTerminalRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
+    const title = i18n.global.t('menu.container') + ' ' + row.name;
+    dialogTerminalRef.value!.acceptParams({ containerID: row.containerID, title: title });
 };
 
 const onInspect = async (id: string) => {

frontend/src/views/container/container/terminal/index.vue

@@ -9,6 +9,11 @@
     >
         <template #content>
             <el-form ref="formRef" :model="form" label-position="top">
+                <el-form-item :label="$t('menu.container')" prop="containerID" v-if="form.containerIDList.length > 1">
+                    <el-select placeholder="container" clearable v-model="form.containerID">
+                        <el-option v-for="item in form.containerIDList" :key="item" :label="item" :value="item" />
+                    </el-select>
+                </el-form-item>
                 <el-form-item :label="$t('commons.table.user')" prop="user">
                     <el-input placeholder="root" clearable v-model="form.user" />
                 </el-form-item>
@@ -67,18 +72,20 @@ const form = reactive({
     command: '',
     user: '',
     containerID: '',
+    containerIDList: [],
 });
 const formRef = ref();
 const terminalRef = ref<InstanceType<typeof Terminal> | null>(null);
 
 interface DialogProps {
     containerID: string;
-    container: string;
+    title: string;
 }
 const acceptParams = async (params: DialogProps): Promise<void> => {
     terminalVisible.value = true;
-    form.containerID = params.containerID;
+    form.containerIDList = params.containerID.split(',');
-    title.value = params.container;
+    form.containerID = form.containerIDList[0];
+    title.value = params.title;
     form.isCustom = false;
     form.user = '';
     form.command = '/bin/sh';