From c2c3147b78853a67122bd72cba48d29e2d2044e8 Mon Sep 17 00:00:00 2001
From: Jacky <me@jackyu.cn>
Date: Sat, 19 Oct 2024 10:57:44 +0800
Subject: [PATCH] feat(site-editor): added alert if nginx is not running #425

---
 .../components/NginxControl/NginxControl.vue  | 23 +++++++++++--------
 app/src/pinia/moudule/global.ts               | 12 ++++++++++
 app/src/routes/index.ts                       | 12 +++++-----
 .../views/certificate/CertificateEditor.vue   |  4 ++--
 app/src/views/certificate/RenewCert.vue       |  2 +-
 .../views/certificate/WildcardCertificate.vue |  4 ++--
 .../DomainAdd.vue => site/SiteAdd.vue}        |  8 +++----
 .../DomainEdit.vue => site/SiteEdit.vue}      |  8 +++----
 .../DomainList.vue => site/SiteList.vue}      |  4 ++--
 app/src/views/{domain => site}/cert/Cert.vue  |  6 ++---
 .../views/{domain => site}/cert/CertInfo.vue  |  0
 .../views/{domain => site}/cert/IssueCert.vue |  2 +-
 .../cert/components/AutoCertStepOne.vue       |  2 +-
 .../cert/components/ChangeCert/ChangeCert.vue |  0
 .../cert/components/DNSChallenge.vue          |  0
 .../cert/components/ObtainCert.vue            |  4 ++--
 .../cert/components/ObtainCertLive.vue        |  0
 .../{domain => site}/components/Deploy.vue    |  0
 .../components/RightSettings.vue              |  2 +-
 .../components/SiteDuplicate.vue              |  0
 .../ngx_conf/LocationEditor.vue               |  0
 .../{domain => site}/ngx_conf/LogEntry.vue    |  0
 .../views/site/ngx_conf/NginxStatusAlert.vue  | 21 +++++++++++++++++
 .../ngx_conf/NgxConfigEditor.vue              |  8 +++++--
 .../{domain => site}/ngx_conf/NgxServer.vue   | 10 ++++----
 .../{domain => site}/ngx_conf/NgxUpstream.vue |  2 +-
 .../config_template/ConfigTemplate.vue        |  6 ++---
 .../ngx_conf/config_template/TemplateForm.vue |  2 +-
 .../config_template/TemplateFormItem.vue      |  0
 .../ngx_conf/directive/DirectiveAdd.vue       |  0
 .../ngx_conf/directive/DirectiveEditor.vue    |  2 +-
 .../directive/DirectiveEditorItem.vue         |  0
 .../views/{domain => site}/ngx_conf/index.ts  |  0
 app/src/views/stream/StreamEdit.vue           |  2 +-
 app/src/views/{pty => terminal}/Terminal.vue  |  0
 35 files changed, 93 insertions(+), 53 deletions(-)
 create mode 100644 app/src/pinia/moudule/global.ts
 rename app/src/views/{domain/DomainAdd.vue => site/SiteAdd.vue} (93%)
 rename app/src/views/{domain/DomainEdit.vue => site/SiteEdit.vue} (96%)
 rename app/src/views/{domain/DomainList.vue => site/SiteList.vue} (97%)
 rename app/src/views/{domain => site}/cert/Cert.vue (88%)
 rename app/src/views/{domain => site}/cert/CertInfo.vue (100%)
 rename app/src/views/{domain => site}/cert/IssueCert.vue (95%)
 rename app/src/views/{domain => site}/cert/components/AutoCertStepOne.vue (98%)
 rename app/src/views/{domain => site}/cert/components/ChangeCert/ChangeCert.vue (100%)
 rename app/src/views/{domain => site}/cert/components/DNSChallenge.vue (100%)
 rename app/src/views/{domain => site}/cert/components/ObtainCert.vue (97%)
 rename app/src/views/{domain => site}/cert/components/ObtainCertLive.vue (100%)
 rename app/src/views/{domain => site}/components/Deploy.vue (100%)
 rename app/src/views/{domain => site}/components/RightSettings.vue (98%)
 rename app/src/views/{domain => site}/components/SiteDuplicate.vue (100%)
 rename app/src/views/{domain => site}/ngx_conf/LocationEditor.vue (100%)
 rename app/src/views/{domain => site}/ngx_conf/LogEntry.vue (100%)
 create mode 100644 app/src/views/site/ngx_conf/NginxStatusAlert.vue
 rename app/src/views/{domain => site}/ngx_conf/NgxConfigEditor.vue (96%)
 rename app/src/views/{domain => site}/ngx_conf/NgxServer.vue (92%)
 rename app/src/views/{domain => site}/ngx_conf/NgxUpstream.vue (98%)
 rename app/src/views/{domain => site}/ngx_conf/config_template/ConfigTemplate.vue (93%)
 rename app/src/views/{domain => site}/ngx_conf/config_template/TemplateForm.vue (80%)
 rename app/src/views/{domain => site}/ngx_conf/config_template/TemplateFormItem.vue (100%)
 rename app/src/views/{domain => site}/ngx_conf/directive/DirectiveAdd.vue (100%)
 rename app/src/views/{domain => site}/ngx_conf/directive/DirectiveEditor.vue (92%)
 rename app/src/views/{domain => site}/ngx_conf/directive/DirectiveEditorItem.vue (100%)
 rename app/src/views/{domain => site}/ngx_conf/index.ts (100%)
 rename app/src/views/{pty => terminal}/Terminal.vue (100%)

diff --git a/app/src/components/NginxControl/NginxControl.vue b/app/src/components/NginxControl/NginxControl.vue
index 9166ff0f..15355b34 100644
--- a/app/src/components/NginxControl/NginxControl.vue
+++ b/app/src/components/NginxControl/NginxControl.vue
@@ -4,9 +4,12 @@ import { ReloadOutlined } from '@ant-design/icons-vue'
 import ngx from '@/api/ngx'
 import { logLevel } from '@/views/config/constants'
 import { NginxStatus } from '@/constants'
+import { useGlobalStore } from '@/pinia/moudule/global'
 
-const status = ref(0)
-async function get_status() {
+const global = useGlobalStore()
+const { nginxStatus: status } = storeToRefs(global)
+
+async function getStatus() {
   const r = await ngx.status()
   if (r?.running === true)
     status.value = NginxStatus.Running
@@ -16,7 +19,7 @@ async function get_status() {
   return r
 }
 
-function reload_nginx() {
+function reloadNginx() {
   status.value = NginxStatus.Reloading
   ngx.reload().then(r => {
     if (r.level < logLevel.Warn)
@@ -27,14 +30,14 @@ function reload_nginx() {
       message.error(r.message)
   }).catch(e => {
     message.error(`${$gettext('Server error')} ${e?.message}`)
-  }).finally(() => get_status())
+  }).finally(() => getStatus())
 }
 
-async function restart_nginx() {
+async function restartNginx() {
   status.value = NginxStatus.Restarting
   await ngx.restart()
 
-  get_status().then(r => {
+  getStatus().then(r => {
     if (r.level < logLevel.Warn)
       message.success($gettext('Nginx restarted successfully'))
     else if (r.level === logLevel.Warn)
@@ -50,7 +53,7 @@ const visible = ref(false)
 
 watch(visible, v => {
   if (v)
-    get_status()
+    getStatus()
 })
 </script>
 
@@ -58,7 +61,7 @@ watch(visible, v => {
   <APopover
     v-model:open="visible"
     placement="bottomRight"
-    @confirm="reload_nginx"
+    @confirm="reloadNginx"
   >
     <template #content>
       <div class="content-wrapper">
@@ -88,14 +91,14 @@ watch(visible, v => {
         <AButton
           size="small"
           type="link"
-          @click="restart_nginx"
+          @click="restartNginx"
         >
           {{ $gettext('Restart') }}
         </AButton>
         <AButton
           size="small"
           type="link"
-          @click="reload_nginx"
+          @click="reloadNginx"
         >
           {{ $gettext('Reload') }}
         </AButton>
diff --git a/app/src/pinia/moudule/global.ts b/app/src/pinia/moudule/global.ts
new file mode 100644
index 00000000..01a4083a
--- /dev/null
+++ b/app/src/pinia/moudule/global.ts
@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+import type { NginxStatus } from '@/constants'
+
+export const useGlobalStore = defineStore('global', () => {
+  const nginxStatus:
+  Ref<NginxStatus.Reloading | NginxStatus.Restarting | NginxStatus.Running | NginxStatus.Stopped>
+      = ref(0)
+
+  return {
+    nginxStatus,
+  }
+})
diff --git a/app/src/routes/index.ts b/app/src/routes/index.ts
index 2ed6112a..702f8473 100644
--- a/app/src/routes/index.ts
+++ b/app/src/routes/index.ts
@@ -41,25 +41,25 @@ export const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: 'domain',
+        path: 'sites',
         name: 'Manage Sites',
         component: () => import('@/layouts/BaseRouterView.vue'),
         meta: {
           name: () => $gettext('Manage Sites'),
           icon: CloudOutlined,
         },
-        redirect: '/domain/list',
+        redirect: '/sites/list',
         children: [{
           path: 'list',
           name: 'Sites List',
-          component: () => import('@/views/domain/DomainList.vue'),
+          component: () => import('@/views/site/SiteList.vue'),
           meta: {
             name: () => $gettext('Sites List'),
           },
         }, {
           path: 'add',
           name: 'Add Site',
-          component: () => import('@/views/domain/DomainAdd.vue'),
+          component: () => import('@/views/site/SiteAdd.vue'),
           meta: {
             name: () => $gettext('Add Site'),
             lastRouteName: 'Sites List',
@@ -67,7 +67,7 @@ export const routes: RouteRecordRaw[] = [
         }, {
           path: ':name',
           name: 'Edit Site',
-          component: () => import('@/views/domain/DomainEdit.vue'),
+          component: () => import('@/views/site/SiteEdit.vue'),
           meta: {
             name: () => $gettext('Edit Site'),
             hiddenInSidebar: true,
@@ -183,7 +183,7 @@ export const routes: RouteRecordRaw[] = [
       {
         path: 'terminal',
         name: 'Terminal',
-        component: () => import('@/views/pty/Terminal.vue'),
+        component: () => import('@/views/terminal/Terminal.vue'),
         meta: {
           name: () => $gettext('Terminal'),
           icon: CodeOutlined,
diff --git a/app/src/views/certificate/CertificateEditor.vue b/app/src/views/certificate/CertificateEditor.vue
index bdb7e190..ca392105 100644
--- a/app/src/views/certificate/CertificateEditor.vue
+++ b/app/src/views/certificate/CertificateEditor.vue
@@ -2,8 +2,8 @@
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { AutoCertState } from '@/constants'
-import CertInfo from '@/views/domain/cert/CertInfo.vue'
-import AutoCertStepOne from '@/views/domain/cert/components/AutoCertStepOne.vue'
+import CertInfo from '@/views/site/cert/CertInfo.vue'
+import AutoCertStepOne from '@/views/site/cert/components/AutoCertStepOne.vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 import type { Cert } from '@/api/cert'
 import cert from '@/api/cert'
diff --git a/app/src/views/certificate/RenewCert.vue b/app/src/views/certificate/RenewCert.vue
index a58292a8..81c120e7 100644
--- a/app/src/views/certificate/RenewCert.vue
+++ b/app/src/views/certificate/RenewCert.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import ObtainCertLive from '@/views/domain/cert/components/ObtainCertLive.vue'
+import ObtainCertLive from '@/views/site/cert/components/ObtainCertLive.vue'
 import type { AutoCertOptions } from '@/api/auto_cert'
 
 const props = defineProps<{
diff --git a/app/src/views/certificate/WildcardCertificate.vue b/app/src/views/certificate/WildcardCertificate.vue
index 2dd7f49d..468efe7d 100644
--- a/app/src/views/certificate/WildcardCertificate.vue
+++ b/app/src/views/certificate/WildcardCertificate.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import ObtainCertLive from '@/views/domain/cert/components/ObtainCertLive.vue'
+import ObtainCertLive from '@/views/site/cert/components/ObtainCertLive.vue'
 import type { AutoCertOptions } from '@/api/auto_cert'
-import AutoCertStepOne from '@/views/domain/cert/components/AutoCertStepOne.vue'
+import AutoCertStepOne from '@/views/site/cert/components/AutoCertStepOne.vue'
 
 const emit = defineEmits<{
   issued: [void]
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/site/SiteAdd.vue
similarity index 93%
rename from app/src/views/domain/DomainAdd.vue
rename to app/src/views/site/SiteAdd.vue
index ce1fbc2c..99f75f1a 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/site/SiteAdd.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.vue'
-import LocationEditor from '@/views/domain/ngx_conf/LocationEditor.vue'
-import NgxConfigEditor from '@/views/domain/ngx_conf/NgxConfigEditor.vue'
+import DirectiveEditor from '@/views/site/ngx_conf/directive/DirectiveEditor.vue'
+import LocationEditor from '@/views/site/ngx_conf/LocationEditor.vue'
+import NgxConfigEditor from '@/views/site/ngx_conf/NgxConfigEditor.vue'
 import domain from '@/api/domain'
 import type { NgxConfig } from '@/api/ngx'
 import ngx from '@/api/ngx'
@@ -51,7 +51,7 @@ async function save() {
 const router = useRouter()
 
 function goto_modify() {
-  router.push(`/domain/${ngx_config.name}`)
+  router.push(`/sites/${ngx_config.name}`)
 }
 
 function create_another() {
diff --git a/app/src/views/domain/DomainEdit.vue b/app/src/views/site/SiteEdit.vue
similarity index 96%
rename from app/src/views/domain/DomainEdit.vue
rename to app/src/views/site/SiteEdit.vue
index aac41245..5b91f524 100644
--- a/app/src/views/domain/DomainEdit.vue
+++ b/app/src/views/site/SiteEdit.vue
@@ -3,13 +3,13 @@ import { message } from 'ant-design-vue'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 
-import NgxConfigEditor from '@/views/domain/ngx_conf/NgxConfigEditor.vue'
+import NgxConfigEditor from '@/views/site/ngx_conf/NgxConfigEditor.vue'
 import type { Site } from '@/api/domain'
 import domain from '@/api/domain'
 import type { NgxConfig } from '@/api/ngx'
 import ngx from '@/api/ngx'
 import config from '@/api/config'
-import RightSettings from '@/views/domain/components/RightSettings.vue'
+import RightSettings from '@/views/site/components/RightSettings.vue'
 import type { CertificateInfo } from '@/api/cert'
 import type { ChatComplicationMessage } from '@/api/openai'
 import type { CheckedType } from '@/types'
@@ -137,7 +137,7 @@ const save = async () => {
   }).then(r => {
     handle_response(r)
     router.push({
-      path: `/domain/${filename.value}`,
+      path: `/sites/${filename.value}`,
       query: route.query,
     })
     message.success($gettext('Saved successfully'))
@@ -249,7 +249,7 @@ provide('data', data)
 
     <FooterToolBar>
       <ASpace>
-        <AButton @click="$router.push('/domain/list')">
+        <AButton @click="$router.push('/sites/list')">
           {{ $gettext('Back') }}
         </AButton>
         <AButton
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/site/SiteList.vue
similarity index 97%
rename from app/src/views/domain/DomainList.vue
rename to app/src/views/site/SiteList.vue
index 1290e139..d50a0d79 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/site/SiteList.vue
@@ -5,7 +5,7 @@ import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTabl
 import { datetime } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
 import domain from '@/api/domain'
 import { input } from '@/components/StdDesign/StdDataEntry'
-import SiteDuplicate from '@/views/domain/components/SiteDuplicate.vue'
+import SiteDuplicate from '@/views/site/components/SiteDuplicate.vue'
 import InspectConfig from '@/views/config/InspectConfig.vue'
 import type { Column, JSXElements } from '@/components/StdDesign/types'
 
@@ -110,7 +110,7 @@ watch(route, () => {
       disable-delete
       disable-view
       @click-edit="r => $router.push({
-        path: `/domain/${r}`,
+        path: `/sites/${r}`,
       })"
     >
       <template #actions="{ record }">
diff --git a/app/src/views/domain/cert/Cert.vue b/app/src/views/site/cert/Cert.vue
similarity index 88%
rename from app/src/views/domain/cert/Cert.vue
rename to app/src/views/site/cert/Cert.vue
index a503b36e..453b8789 100644
--- a/app/src/views/domain/cert/Cert.vue
+++ b/app/src/views/site/cert/Cert.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import CertInfo from '@/views/domain/cert/CertInfo.vue'
-import IssueCert from '@/views/domain/cert/IssueCert.vue'
-import ChangeCert from '@/views/domain/cert/components/ChangeCert/ChangeCert.vue'
+import CertInfo from '@/views/site/cert/CertInfo.vue'
+import IssueCert from '@/views/site/cert/IssueCert.vue'
+import ChangeCert from '@/views/site/cert/components/ChangeCert/ChangeCert.vue'
 import type { Cert, CertificateInfo } from '@/api/cert'
 
 const props = defineProps<{
diff --git a/app/src/views/domain/cert/CertInfo.vue b/app/src/views/site/cert/CertInfo.vue
similarity index 100%
rename from app/src/views/domain/cert/CertInfo.vue
rename to app/src/views/site/cert/CertInfo.vue
diff --git a/app/src/views/domain/cert/IssueCert.vue b/app/src/views/site/cert/IssueCert.vue
similarity index 95%
rename from app/src/views/domain/cert/IssueCert.vue
rename to app/src/views/site/cert/IssueCert.vue
index 1e8cecf8..0694f99b 100644
--- a/app/src/views/domain/cert/IssueCert.vue
+++ b/app/src/views/site/cert/IssueCert.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ObtainCert from '@/views/domain/cert/components/ObtainCert.vue'
+import ObtainCert from '@/views/site/cert/components/ObtainCert.vue'
 import type { NgxDirective } from '@/api/ngx'
 
 defineProps<{
diff --git a/app/src/views/domain/cert/components/AutoCertStepOne.vue b/app/src/views/site/cert/components/AutoCertStepOne.vue
similarity index 98%
rename from app/src/views/domain/cert/components/AutoCertStepOne.vue
rename to app/src/views/site/cert/components/AutoCertStepOne.vue
index ecf6c07a..5a6d1f3e 100644
--- a/app/src/views/domain/cert/components/AutoCertStepOne.vue
+++ b/app/src/views/site/cert/components/AutoCertStepOne.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { $gettext } from '../../../../gettext'
 import type { AutoCertOptions } from '@/api/auto_cert'
-import DNSChallenge from '@/views/domain/cert/components/DNSChallenge.vue'
+import DNSChallenge from '@/views/site/cert/components/DNSChallenge.vue'
 import ACMEUserSelector from '@/views/certificate/ACMEUserSelector.vue'
 import { PrivateKeyTypeList } from '@/constants'
 
diff --git a/app/src/views/domain/cert/components/ChangeCert/ChangeCert.vue b/app/src/views/site/cert/components/ChangeCert/ChangeCert.vue
similarity index 100%
rename from app/src/views/domain/cert/components/ChangeCert/ChangeCert.vue
rename to app/src/views/site/cert/components/ChangeCert/ChangeCert.vue
diff --git a/app/src/views/domain/cert/components/DNSChallenge.vue b/app/src/views/site/cert/components/DNSChallenge.vue
similarity index 100%
rename from app/src/views/domain/cert/components/DNSChallenge.vue
rename to app/src/views/site/cert/components/DNSChallenge.vue
diff --git a/app/src/views/domain/cert/components/ObtainCert.vue b/app/src/views/site/cert/components/ObtainCert.vue
similarity index 97%
rename from app/src/views/domain/cert/components/ObtainCert.vue
rename to app/src/views/site/cert/components/ObtainCert.vue
index b827dabe..086dbee8 100644
--- a/app/src/views/domain/cert/components/ObtainCert.vue
+++ b/app/src/views/site/cert/components/ObtainCert.vue
@@ -2,10 +2,10 @@
 import { Modal, message } from 'ant-design-vue'
 import type { ComputedRef, Ref } from 'vue'
 import domain from '@/api/domain'
-import AutoCertStepOne from '@/views/domain/cert/components/AutoCertStepOne.vue'
+import AutoCertStepOne from '@/views/site/cert/components/AutoCertStepOne.vue'
 import type { NgxConfig, NgxDirective } from '@/api/ngx'
 import type { AutoCertOptions } from '@/api/auto_cert'
-import ObtainCertLive from '@/views/domain/cert/components/ObtainCertLive.vue'
+import ObtainCertLive from '@/views/site/cert/components/ObtainCertLive.vue'
 import type { CertificateResult } from '@/api/cert'
 import type { PrivateKeyType } from '@/constants'
 
diff --git a/app/src/views/domain/cert/components/ObtainCertLive.vue b/app/src/views/site/cert/components/ObtainCertLive.vue
similarity index 100%
rename from app/src/views/domain/cert/components/ObtainCertLive.vue
rename to app/src/views/site/cert/components/ObtainCertLive.vue
diff --git a/app/src/views/domain/components/Deploy.vue b/app/src/views/site/components/Deploy.vue
similarity index 100%
rename from app/src/views/domain/components/Deploy.vue
rename to app/src/views/site/components/Deploy.vue
diff --git a/app/src/views/domain/components/RightSettings.vue b/app/src/views/site/components/RightSettings.vue
similarity index 98%
rename from app/src/views/domain/components/RightSettings.vue
rename to app/src/views/site/components/RightSettings.vue
index e398390a..75dfb963 100644
--- a/app/src/views/domain/components/RightSettings.vue
+++ b/app/src/views/site/components/RightSettings.vue
@@ -5,7 +5,7 @@ import type { Site } from '@/api/domain'
 import domain from '@/api/domain'
 import ChatGPT from '@/components/ChatGPT/ChatGPT.vue'
 import { formatDateTime } from '@/lib/helper'
-import Deploy from '@/views/domain/components/Deploy.vue'
+import Deploy from '@/views/site/components/Deploy.vue'
 import { useSettingsStore } from '@/pinia'
 import type { ChatComplicationMessage } from '@/api/openai'
 import type { CheckedType } from '@/types'
diff --git a/app/src/views/domain/components/SiteDuplicate.vue b/app/src/views/site/components/SiteDuplicate.vue
similarity index 100%
rename from app/src/views/domain/components/SiteDuplicate.vue
rename to app/src/views/site/components/SiteDuplicate.vue
diff --git a/app/src/views/domain/ngx_conf/LocationEditor.vue b/app/src/views/site/ngx_conf/LocationEditor.vue
similarity index 100%
rename from app/src/views/domain/ngx_conf/LocationEditor.vue
rename to app/src/views/site/ngx_conf/LocationEditor.vue
diff --git a/app/src/views/domain/ngx_conf/LogEntry.vue b/app/src/views/site/ngx_conf/LogEntry.vue
similarity index 100%
rename from app/src/views/domain/ngx_conf/LogEntry.vue
rename to app/src/views/site/ngx_conf/LogEntry.vue
diff --git a/app/src/views/site/ngx_conf/NginxStatusAlert.vue b/app/src/views/site/ngx_conf/NginxStatusAlert.vue
new file mode 100644
index 00000000..f9618728
--- /dev/null
+++ b/app/src/views/site/ngx_conf/NginxStatusAlert.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useGlobalStore } from '@/pinia/moudule/global'
+import { NginxStatus } from '@/constants'
+
+const global = useGlobalStore()
+const { nginxStatus: status } = storeToRefs(global)
+</script>
+
+<template>
+  <AAlert
+    v-if="status !== NginxStatus.Running"
+    class="mb-4"
+    type="warning"
+    show-icon
+    :message="$gettext('Nginx is not running')"
+  />
+</template>
+
+<style scoped lang="less">
+
+</style>
diff --git a/app/src/views/domain/ngx_conf/NgxConfigEditor.vue b/app/src/views/site/ngx_conf/NgxConfigEditor.vue
similarity index 96%
rename from app/src/views/domain/ngx_conf/NgxConfigEditor.vue
rename to app/src/views/site/ngx_conf/NgxConfigEditor.vue
index 946369ae..78bbb179 100644
--- a/app/src/views/domain/ngx_conf/NgxConfigEditor.vue
+++ b/app/src/views/site/ngx_conf/NgxConfigEditor.vue
@@ -5,9 +5,10 @@ import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 import template from '@/api/template'
 import type { NgxConfig, NgxDirective } from '@/api/ngx'
 import type { CertificateInfo } from '@/api/cert'
-import NgxServer from '@/views/domain/ngx_conf/NgxServer.vue'
-import NgxUpstream from '@/views/domain/ngx_conf/NgxUpstream.vue'
+import NgxServer from '@/views/site/ngx_conf/NgxServer.vue'
+import NgxUpstream from '@/views/site/ngx_conf/NgxUpstream.vue'
 import type { CheckedType } from '@/types'
+import NginxStatusAlert from '@/views/site/ngx_conf/NginxStatusAlert.vue'
 
 const props = withDefaults(defineProps<{
   autoCert?: boolean
@@ -175,6 +176,9 @@ const activeKey = ref(['3'])
 <template>
   <div>
     <ContextHolder />
+
+    <NginxStatusAlert />
+
     <AFormItem
       v-if="!support_ssl && context === 'http'"
       :label="$gettext('Enable TLS')"
diff --git a/app/src/views/domain/ngx_conf/NgxServer.vue b/app/src/views/site/ngx_conf/NgxServer.vue
similarity index 92%
rename from app/src/views/domain/ngx_conf/NgxServer.vue
rename to app/src/views/site/ngx_conf/NgxServer.vue
index 1636f02e..1040881f 100644
--- a/app/src/views/domain/ngx_conf/NgxServer.vue
+++ b/app/src/views/site/ngx_conf/NgxServer.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import { Modal } from 'ant-design-vue'
-import LogEntry from '@/views/domain/ngx_conf/LogEntry.vue'
-import ConfigTemplate from '@/views/domain/ngx_conf/config_template/ConfigTemplate.vue'
-import LocationEditor from '@/views/domain/ngx_conf/LocationEditor.vue'
-import Cert from '@/views/domain/cert/Cert.vue'
-import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.vue'
+import LogEntry from '@/views/site/ngx_conf/LogEntry.vue'
+import ConfigTemplate from '@/views/site/ngx_conf/config_template/ConfigTemplate.vue'
+import LocationEditor from '@/views/site/ngx_conf/LocationEditor.vue'
+import Cert from '@/views/site/cert/Cert.vue'
+import DirectiveEditor from '@/views/site/ngx_conf/directive/DirectiveEditor.vue'
 import type { NgxConfig, NgxDirective } from '@/api/ngx'
 import type { CertificateInfo } from '@/api/cert'
 
diff --git a/app/src/views/domain/ngx_conf/NgxUpstream.vue b/app/src/views/site/ngx_conf/NgxUpstream.vue
similarity index 98%
rename from app/src/views/domain/ngx_conf/NgxUpstream.vue
rename to app/src/views/site/ngx_conf/NgxUpstream.vue
index 0ba15bd7..cb9a350c 100644
--- a/app/src/views/domain/ngx_conf/NgxUpstream.vue
+++ b/app/src/views/site/ngx_conf/NgxUpstream.vue
@@ -3,7 +3,7 @@ import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import { Modal } from 'ant-design-vue'
 import _ from 'lodash'
 import type { NgxConfig, NgxDirective } from '@/api/ngx'
-import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.vue'
+import DirectiveEditor from '@/views/site/ngx_conf/directive/DirectiveEditor.vue'
 import type { UpstreamStatus } from '@/api/upstream'
 import upstream from '@/api/upstream'
 
diff --git a/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue b/app/src/views/site/ngx_conf/config_template/ConfigTemplate.vue
similarity index 93%
rename from app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue
rename to app/src/views/site/ngx_conf/config_template/ConfigTemplate.vue
index 47d28362..9556037d 100644
--- a/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue
+++ b/app/src/views/site/ngx_conf/config_template/ConfigTemplate.vue
@@ -5,10 +5,10 @@ import type { Template } from '@/api/template'
 import template from '@/api/template'
 import { useSettingsStore } from '@/pinia'
 
-import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.vue'
-import LocationEditor from '@/views/domain/ngx_conf/LocationEditor.vue'
+import DirectiveEditor from '@/views/site/ngx_conf/directive/DirectiveEditor.vue'
+import LocationEditor from '@/views/site/ngx_conf/LocationEditor.vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
-import TemplateForm from '@/views/domain/ngx_conf/config_template/TemplateForm.vue'
+import TemplateForm from '@/views/site/ngx_conf/config_template/TemplateForm.vue'
 import type { NgxConfig } from '@/api/ngx'
 
 const props = defineProps<{
diff --git a/app/src/views/domain/ngx_conf/config_template/TemplateForm.vue b/app/src/views/site/ngx_conf/config_template/TemplateForm.vue
similarity index 80%
rename from app/src/views/domain/ngx_conf/config_template/TemplateForm.vue
rename to app/src/views/site/ngx_conf/config_template/TemplateForm.vue
index c118c40c..910f724e 100644
--- a/app/src/views/domain/ngx_conf/config_template/TemplateForm.vue
+++ b/app/src/views/site/ngx_conf/config_template/TemplateForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TemplateFormItem from '@/views/domain/ngx_conf/config_template/TemplateFormItem.vue'
+import TemplateFormItem from '@/views/site/ngx_conf/config_template/TemplateFormItem.vue'
 import type { Variable } from '@/api/template'
 
 const data = defineModel<Record<string, Variable>>({
diff --git a/app/src/views/domain/ngx_conf/config_template/TemplateFormItem.vue b/app/src/views/site/ngx_conf/config_template/TemplateFormItem.vue
similarity index 100%
rename from app/src/views/domain/ngx_conf/config_template/TemplateFormItem.vue
rename to app/src/views/site/ngx_conf/config_template/TemplateFormItem.vue
diff --git a/app/src/views/domain/ngx_conf/directive/DirectiveAdd.vue b/app/src/views/site/ngx_conf/directive/DirectiveAdd.vue
similarity index 100%
rename from app/src/views/domain/ngx_conf/directive/DirectiveAdd.vue
rename to app/src/views/site/ngx_conf/directive/DirectiveAdd.vue
diff --git a/app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue b/app/src/views/site/ngx_conf/directive/DirectiveEditor.vue
similarity index 92%
rename from app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
rename to app/src/views/site/ngx_conf/directive/DirectiveEditor.vue
index a875eb67..2f763571 100644
--- a/app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
+++ b/app/src/views/site/ngx_conf/directive/DirectiveEditor.vue
@@ -2,7 +2,7 @@
 import Draggable from 'vuedraggable'
 import type { ComputedRef } from 'vue'
 import DirectiveAdd from './DirectiveAdd.vue'
-import DirectiveEditorItem from '@/views/domain/ngx_conf/directive/DirectiveEditorItem.vue'
+import DirectiveEditorItem from '@/views/site/ngx_conf/directive/DirectiveEditorItem.vue'
 import type { NgxDirective } from '@/api/ngx'
 
 defineProps<{
diff --git a/app/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue b/app/src/views/site/ngx_conf/directive/DirectiveEditorItem.vue
similarity index 100%
rename from app/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue
rename to app/src/views/site/ngx_conf/directive/DirectiveEditorItem.vue
diff --git a/app/src/views/domain/ngx_conf/index.ts b/app/src/views/site/ngx_conf/index.ts
similarity index 100%
rename from app/src/views/domain/ngx_conf/index.ts
rename to app/src/views/site/ngx_conf/index.ts
diff --git a/app/src/views/stream/StreamEdit.vue b/app/src/views/stream/StreamEdit.vue
index e7f184c0..cad7afa3 100644
--- a/app/src/views/stream/StreamEdit.vue
+++ b/app/src/views/stream/StreamEdit.vue
@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 
-import NgxConfigEditor from '@/views/domain/ngx_conf/NgxConfigEditor.vue'
+import NgxConfigEditor from '@/views/site/ngx_conf/NgxConfigEditor.vue'
 import type { NgxConfig } from '@/api/ngx'
 import ngx from '@/api/ngx'
 import config from '@/api/config'
diff --git a/app/src/views/pty/Terminal.vue b/app/src/views/terminal/Terminal.vue
similarity index 100%
rename from app/src/views/pty/Terminal.vue
rename to app/src/views/terminal/Terminal.vue