feat: 容器编排列表增加编排目录并支持跳转 (#6565)

Refs #3579

Author: john1298308460

frontend/src/lang/modules/en.ts

@@ -777,6 +777,7 @@ const message = {
         apps: 'Apps',
         local: 'Local',
         createCompose: 'Create',
+        composeDirectory: 'Compose Directory',
         template: 'Template',
         composeTemplate: 'Compose template',
         createComposeTemplate: 'Create',

frontend/src/lang/modules/tw.ts

@@ -746,6 +746,7 @@ const message = {
         apps: '應用商店',
         local: '本地',
         createCompose: '創建編排',
+        composeDirectory: '編排目錄',
         template: '模版',
         composeTemplate: '編排模版',
         createComposeTemplate: '創建編排模版',

frontend/src/lang/modules/zh.ts

@@ -748,6 +748,7 @@ const message = {
         apps: '应用商店',
         local: '本地',
         createCompose: '创建编排',
+        composeDirectory: '编排目录',
         template: '模版',
         composeTemplate: '编排模版',
         createComposeTemplate: '创建编排模版',

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

@@ -10,20 +10,6 @@
         </el-card>
 
         <LayoutContent v-if="!isOnDetail" :title="$t('container.compose')" :class="{ mask: dockerStatus != 'Running' }">
-            <template #prompt>
-                <el-alert type="info" :closable="false">
-                    <template #title>
-                        <span class="flx-align-center">
-                            <span>{{ $t('container.composeHelper', [baseDir]) }}</span>
-                            <el-button type="primary" link @click="toFolder">
-                                <el-icon>
-                                    <FolderOpened />
-                                </el-icon>
-                            </el-button>
-                        </span>
-                    </template>
-                </el-alert>
-            </template>
             <template #toolbar>
                 <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
                     <div class="flex flex-wrap gap-3">
@@ -65,6 +51,15 @@
                             <span v-if="row.createdBy === '1Panel'">1Panel</span>
                         </template>
                     </el-table-column>
+                    <el-table-column :label="$t('container.composeDirectory')" min-width="80" fix>
+                        <template #default="{ row }">
+                            <el-button type="primary" link @click="toComposeFolder(row)">
+                                <el-icon>
+                                    <FolderOpened />
+                                </el-icon>
+                            </el-button>
+                        </template>
+                    </el-table-column>
                     <el-table-column :label="$t('container.containerStatus')" min-width="80" fix>
                         <template #default="scope">
                             <div>
@@ -137,8 +132,8 @@ const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });
 };
 
-const toFolder = async () => {
-    router.push({ path: '/hosts/files', query: { path: baseDir.value + '/docker/compose' } });
+const toComposeFolder = async (row: Container.ComposeInfo) => {
+    router.push({ path: '/hosts/files', query: { path: baseDir.value + '/docker/compose/' + row.name } });
 };
 
 const loadPath = async () => {