feat: Add quick jump to website directory button (#9973)

Refs https://github.com/1Panel-dev/1Panel/issues/3945

agent/app/dto/response/app.go

@@ -66,6 +66,7 @@ type AppInstalledCheck struct {
 	InstallPath   string    `json:"installPath"`
 	HttpPort      int       `json:"httpPort"`
 	HttpsPort     int       `json:"httpsPort"`
+	WebsiteDir    string    `json:"websiteDir"`
 }
 
 type AppDetailDTO struct {

agent/app/service/app_install.go

@@ -164,6 +164,11 @@ func (a *AppInstallService) CheckExist(req request.AppInstalledInfo) (*response.
 	res.HttpPort = appInstall.HttpPort
 	res.HttpsPort = appInstall.HttpsPort
 
+	if appInstall.App.Key == "openresty" {
+		websiteDir, _ := settingRepo.GetValueByKey("WEBSITE_DIR")
+		res.WebsiteDir = websiteDir
+	}
+
 	return res, nil
 }
 

frontend/src/api/interface/app.ts

@@ -202,6 +202,7 @@ export namespace App {
         installPath: string;
         httpPort: number;
         httpsPort: number;
+        websiteDir: string;
     }
 
     export interface DatabaseConnInfo {

frontend/src/components/app-status/index.vue

@@ -46,9 +46,7 @@
                         type="primary"
                         @click="setting"
                         link
-                        :disabled="
-                            data.status === 'Installing' || (data.status !== 'Running' && data.app === 'OpenResty')
-                        "
+                        :disabled="data.status === 'Installing'"
                     >
                         {{ $t('commons.button.set') }}
                     </el-button>

frontend/src/components/table-search/index.vue

@@ -7,6 +7,7 @@
                 @clear="search()"
                 suffix-icon="Search"
                 @change="search()"
+                :disabled="props.disabled"
                 :placeholder="props.placeholder || $t('commons.button.search')"
             ></el-input>
         </div>
@@ -21,6 +22,10 @@ const emit = defineEmits(['search', 'update:searchName']);
 const searchInfo = ref();
 const props = defineProps({
     placeholder: String,
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const search = () => {

frontend/src/lang/modules/en.ts

@@ -2522,6 +2522,7 @@ const message = {
         browserCacheTimeHelper:
             'The time static resources are cached locally in the browser, reducing redundant requests. Users will use the local cache directly before it expires when refreshing the page.',
         donotLinkeDB: 'Do Not Link Database',
+        toWebsiteDir: 'Enter Website Directory',
     },
     php: {
         short_open_tag: 'Short tag support',

frontend/src/lang/modules/ja.ts

@@ -2437,6 +2437,7 @@ const message = {
         browserCacheTimeHelper:
             '静的リソースがブラウザのローカルにキャッシュされる時間、冗長なリクエストを減らします。有効期限前にユーザーがページをリフレッシュすると、ローカルキャッシュが直接使用されます。',
         donotLinkeDB: 'データベースをリンクしない',
+        toWebsiteDir: 'ウェブサイトディレクトリに入る',
     },
     php: {
         short_open_tag: '短いタグサポート',

frontend/src/lang/modules/ko.ts

@@ -2395,6 +2395,7 @@ const message = {
         browserCacheTimeHelper:
             '정적 리소스가 브라우저 로컬에 캐시되는 시간, 중복 요청을 줄입니다. 유효기간 전에 사용자가 페이지를 새로 고치면 로컬 캐시가 직접 사용됩니다.',
         donotLinkeDB: '데이터베이스 연결하지 않기',
+        toWebsiteDir: '웹사이트 디렉토리로 이동',
     },
     php: {
         short_open_tag: '짧은 태그 지원',

frontend/src/lang/modules/ms.ts

@@ -2494,6 +2494,7 @@ const message = {
         browserCacheTimeHelper:
             'Masa sumber statik di-cache secara tempatan di pelayar, mengurangkan permintaan berulang. Pengguna akan menggunakan cache tempatan secara langsung sebelum tamat tempoh semasa menyegarkan halaman.',
         donotLinkeDB: 'Jangan Sambungkan Pangkalan Data',
+        toWebsiteDir: 'Masuk ke Direktori Laman Web',
     },
     php: {
         short_open_tag: 'Sokongan tag pendek',

frontend/src/lang/modules/pt-br.ts

@@ -2494,6 +2494,7 @@ const message = {
         browserCacheTimeHelper:
             'O tempo que os recursos estáticos são armazenados em cache localmente no navegador, reduzindo requisições redundantes. Os usuários usarão o cache local diretamente antes de expirar ao atualizar a página.',
         donotLinkeDB: 'Não Vincular Banco de Dados',
+        toWebsiteDir: 'Entrar no Diretório do Site',
     },
     php: {
         short_open_tag: 'Suporte para short tags',

frontend/src/lang/modules/ru.ts

@@ -2491,6 +2491,7 @@ const message = {
         browserCacheTimeHelper:
             'Время, в течение которого статические ресурсы кешируются локально в браузере, уменьшая повторные запросы. Пользователи будут использовать локальный кеш напрямую, если срок его действия не истек при обновлении страницы.',
         donotLinkeDB: 'Не связывать с базой данных',
+        toWebsiteDir: 'Перейти в каталог сайта',
     },
     php: {
         short_open_tag: 'Поддержка коротких тегов',

frontend/src/lang/modules/tr.ts

@@ -2553,6 +2553,7 @@ const message = {
         browserCacheTimeHelper:
             'Statik kaynakların tarayıcıda yerel olarak önbelleğe alındığı süre, tekrarlayan istekleri azaltır. Kullanıcılar süre dolmadan önce sayfayı yenilediğinde yerel önbelleği doğrudan kullanır.',
         donotLinkeDB: 'Veritabanına Bağlanma',
+        toWebsiteDir: 'Web Sitesi Dizinine Gir',
     },
     php: {
         short_open_tag: 'Kısa etiket desteği',

frontend/src/lang/modules/zh-Hant.ts

@@ -2352,6 +2352,7 @@ const message = {
         browserCacheTime: '瀏覽器緩存時間',
         browserCacheTimeHelper: '靜態資源在瀏覽器本地緩存的時間，減少重複請求。到期前用戶刷新頁面會直接使用本地緩存。',
         donotLinkeDB: '不關聯數據庫',
+        toWebsiteDir: '進入網站目錄',
     },
     php: {
         short_open_tag: '短標簽支持',

frontend/src/lang/modules/zh.ts

@@ -2341,6 +2341,7 @@ const message = {
         browserCacheTime: '浏览器缓存时间',
         browserCacheTimeHelper: '静态资源在浏览器本地缓存的时间，减少重复请求。到期前用户刷新页面会直接使用本地缓存。',
         donotLinkeDB: '不关联数据库',
+        toWebsiteDir: '进入网站目录',
     },
     php: {
         short_open_tag: '短标签支持',

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

@@ -107,11 +107,8 @@
                                                                         type="primary"
                                                                         link
                                                                         @click="routerToFileWithPath(installed.path)"
-                                                                    >
-                                                                        <el-icon>
-                                                                            <FolderOpened />
-                                                                        </el-icon>
-                                                                    </el-button>
+                                                                        icon="FolderOpened"
+                                                                    ></el-button>
                                                                 </el-tooltip>
                                                             </span>
                                                             <span class="ml-1">

frontend/src/views/website/website/index.vue

@@ -19,21 +19,21 @@
                 ></AppStatus>
             </template>
             <template v-if="!openNginxConfig && nginxIsExist" #leftToolBar>
-                <el-button type="primary" @click="openCreate" :disabled="nginxStatus != 'Running'">
+                <el-button type="primary" @click="openCreate" :disabled="disabledConfig">
                     {{ $t('website.create') }}
                 </el-button>
-                <el-button type="primary" plain @click="openGroup" :disabled="nginxStatus != 'Running'">
+                <el-button type="primary" plain @click="openGroup" :disabled="disabledConfig">
                     {{ $t('commons.table.group') }}
                 </el-button>
-                <el-button type="primary" plain @click="openDefault" :disabled="nginxStatus != 'Running'">
+                <el-button type="primary" plain @click="openDefault" :disabled="disabledConfig">
                     {{ $t('website.defaultServer') }}
                 </el-button>
-                <el-button type="primary" plain @click="openDefaultHtml" :disabled="nginxStatus != 'Running'">
+                <el-button type="primary" plain @click="openDefaultHtml" :disabled="disabledConfig">
                     {{ $t('website.defaultHtml') }}
                 </el-button>
             </template>
             <template v-if="!openNginxConfig && nginxIsExist" #rightToolBar>
-                <el-select class="p-w-200" v-model="req.type" @change="search()" :disabled="nginxStatus != 'Running'">
+                <el-select class="p-w-200" v-model="req.type" @change="search()" :disabled="disabledConfig">
                     <template #prefix>{{ $t('commons.table.type') }}</template>
                     <el-option :label="$t('commons.table.all')" :value="''"></el-option>
                     <el-option
@@ -43,12 +43,7 @@
                         :key="item.value"
                     ></el-option>
                 </el-select>
-                <el-select
-                    v-model="req.websiteGroupId"
-                    @change="search()"
-                    class="p-w-200"
-                    :disabled="nginxStatus != 'Running'"
-                >
+                <el-select v-model="req.websiteGroupId" @change="search()" class="p-w-200" :disabled="disabledConfig">
                     <template #prefix>{{ $t('commons.table.group') }}</template>
                     <el-option :label="$t('commons.table.all')" :value="0"></el-option>
                     <div v-for="item in groups" :key="item.id">
@@ -60,8 +55,8 @@
                         <el-option v-else :label="item.name" :value="item.id" />
                     </div>
                 </el-select>
-                <TableSearch @search="search()" v-model:searchName="req.name" />
-                <TableRefresh @search="search()" />
+                <TableSearch @search="search()" v-model:searchName="req.name" :disabled="disabledConfig" />
+                <TableRefresh @search="search()" :disabled="disabledConfig" />
                 <fu-table-column-select
                     :columns="columns"
                     trigger="hover"
@@ -76,7 +71,7 @@
                     :data="data"
                     @sort-change="changeSort"
                     @search="search()"
-                    :class="{ mask: nginxStatus != 'Running' }"
+                    :class="{ mask: disabledConfig }"
                     :heightDiff="310"
                     :columns="columns"
                     @cell-mouse-enter="showFavorite"
@@ -270,8 +265,13 @@
                         fix
                     />
                 </ComplexTable>
-                <el-card width="30%" v-if="nginxStatus != 'Running' && maskShow" class="mask-prompt">
-                    <span v-if="nginxIsExist">{{ $t('commons.service.serviceNotStarted', ['OpenResty']) }}</span>
+                <el-card width="30%" v-if="disabledConfig && maskShow" class="mask-prompt">
+                    <span v-if="nginxIsExist">
+                        {{ $t('commons.service.serviceNotStarted', ['OpenResty']) }}
+                        <el-button type="primary" link @click="routerToFileWithPath(websiteDir)" icon="FolderOpened">
+                            {{ $t('website.toWebsiteDir') }}
+                        </el-button>
+                    </span>
                     <span v-else>
                         {{ $t('app.checkInstalledWarn', ['OpenResty']) }}
                         <el-button @click="goRouter('openresty')" link icon="Position" type="primary">
@@ -355,6 +355,7 @@ const dataRef = ref();
 const domains = ref<Website.Domain[]>([]);
 const columns = ref([]);
 const hoveredRowIndex = ref(-1);
+const websiteDir = ref();
 
 const paginationConfig = reactive({
     cacheSizeKey: 'website-page-size',
@@ -392,6 +393,10 @@ const favoriteWebsite = (row: Website.Website) => {
     updateWebsitConfig(row);
 };
 
+const disabledConfig = computed(() => {
+    return nginxStatus.value != 'Running';
+});
+
 const changeSort = ({ prop, order }) => {
     if (order) {
         switch (prop) {
@@ -585,6 +590,7 @@ const checkExist = (data: App.CheckInstalled) => {
     containerName.value = data.containerName;
     nginxStatus.value = data.status;
     installPath.value = data.installPath;
+    websiteDir.value = data.websiteDir;
 };
 
 const checkDate = (date: Date) => {

frontend/src/views/website/website/nginx/index.vue

@@ -12,7 +12,12 @@
             <el-button type="primary" :plain="activeName !== '2'" @click="changeTab('2')">
                 {{ $t('nginx.configResource') }}
             </el-button>
-            <el-button type="primary" :plain="activeName !== '3'" @click="changeTab('3')">
+            <el-button
+                type="primary"
+                :plain="activeName !== '3'"
+                @click="changeTab('3')"
+                :disabled="status != 'Running'"
+            >
                 {{ $t('website.nginxPer') }}
             </el-button>
             <el-button
@@ -26,7 +31,12 @@
             <el-button type="primary" :plain="activeName !== '5'" @click="changeTab('5')">
                 {{ $t('runtime.module') }}
             </el-button>
-            <el-button type="primary" :plain="activeName !== '6'" @click="changeTab('6')">
+            <el-button
+                type="primary"
+                :plain="activeName !== '6'"
+                @click="changeTab('6')"
+                :disabled="status != 'Running'"
+            >
                 {{ $t('website.other') }}
             </el-button>
         </template>