v1.7

.air.toml

@@ -13,7 +13,7 @@ bin = "tmp/main"
 # Customize binary.
 full_bin = "APP_ENV=dev APP_USER=air ./tmp/main"
 # Watch these filename extensions.
-include_ext = ["go", "tpl", "tmpl", "html"]
+include_ext = ["go", "tpl", "tmpl", "html", "conf"]
 # Ignore these filename extensions or directories.
 exclude_dir = ["assets", "tmp", "vendor", "frontend/node_modules", "upload"]
 # Watch these directories if you specified.

README-zh_CN.md

@@ -91,12 +91,16 @@ Nginx 网络管理界面，由  [0xJacky](https://jackyu.cn/) 与 [Hintay](https
 我们欢迎您将项目翻译成任何语言。
 
 ### 构建基于
-
-- [The Go Programming Language](https://go.dev/)
+- [The Go Programming Language](https://go.dev)
 - [Gin Web Framework](https://gin-gonic.com)
-- [GORM](http://gorm.io/index.html)
-- [Vue 2](https://vuejs.org)
-- [vue-gettext](https://github.com/Polyconseil/vue-gettext)
+- [GORM](http://gorm.io)
+- [Vue 3](https://v3.vuejs.org)
+- [Vite](https://vitejs.dev)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Ant Design Vue](https://antdv.com)
+- [vue3-gettext](https://github.com/jshmrtn/vue3-gettext)
+- [vue3-ace-editor](https://github.com/CarterLi/vue3-ace-editor)
+- [Gonginx](https://github.com/tufanbarisyildirim/gonginx)
 
 ## 入门指南
 

README-zh_TW.md

@@ -93,12 +93,16 @@ Nginx 網路管理介面，由  [0xJacky](https://jackyu.cn/) 與 [Hintay](https
 我們歡迎您將專案翻譯成任何語言。
 
 ### 構建基於
-
-- [The Go Programming Language](https://go.dev/)
+- [The Go Programming Language](https://go.dev)
 - [Gin Web Framework](https://gin-gonic.com)
-- [GORM](http://gorm.io/index.html)
-- [Vue 2](https://vuejs.org)
-- [vue-gettext](https://github.com/Polyconseil/vue-gettext)
+- [GORM](http://gorm.io)
+- [Vue 3](https://v3.vuejs.org)
+- [Vite](https://vitejs.dev)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Ant Design Vue](https://antdv.com)
+- [vue3-gettext](https://github.com/jshmrtn/vue3-gettext)
+- [vue3-ace-editor](https://github.com/CarterLi/vue3-ace-editor)
+- [Gonginx](https://github.com/tufanbarisyildirim/gonginx)
 
 ## 入門指南
 

README.md

@@ -99,6 +99,7 @@ We welcome translations into any language.
 - [Ant Design Vue](https://antdv.com)
 - [vue3-gettext](https://github.com/jshmrtn/vue3-gettext)
 - [vue3-ace-editor](https://github.com/CarterLi/vue3-ace-editor)
+- [Gonginx](https://github.com/tufanbarisyildirim/gonginx)
 
 ## Getting Started
 

frontend/components.d.ts

@@ -27,6 +27,8 @@ declare module '@vue/runtime-core' {
     ALayoutFooter: typeof import('ant-design-vue/es')['LayoutFooter']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
+    AList: typeof import('ant-design-vue/es')['List']
+    AListItem: typeof import('ant-design-vue/es')['ListItem']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
@@ -65,8 +67,5 @@ declare module '@vue/runtime-core' {
     StdDataEntryComponentsStdPassword: typeof import('./src/components/StdDataEntry/components/StdPassword.vue')['default']
     StdDataEntryComponentsStdSelect: typeof import('./src/components/StdDataEntry/components/StdSelect.vue')['default']
     StdDataEntryComponentsStdSelector: typeof import('./src/components/StdDataEntry/components/StdSelector.vue')['default']
-    StdDataEntryCompontentsStdPassword: typeof import('./src/components/StdDataEntry/compontents/StdPassword.vue')['default']
-    StdDataEntryCompontentsStdSelect: typeof import('./src/components/StdDataEntry/compontents/StdSelect.vue')['default']
-    StdDataEntryCompontentsStdSelector: typeof import('./src/components/StdDataEntry/compontents/StdSelector.vue')['default']
   }
 }

frontend/package.json

@@ -1,7 +1,7 @@
 {
     "name": "nginx-ui-frontend-next",
     "private": true,
-    "version": "1.6.8",
+    "version": "1.7.0",
     "type": "commonjs",
     "scripts": {
         "dev": "vite",
@@ -39,7 +39,7 @@
         "less": "^4.1.3",
         "typescript": "^4.6.4",
         "unplugin-vue-components": "^0.22.9",
-        "vite": "^3.2.3",
+        "vite": "^4.0.3",
         "vite-plugin-html": "^3.2.0",
         "vue-tsc": "^1.0.9"
     }

frontend/src/App.vue

@@ -5,17 +5,22 @@ import {useSettingsStore} from '@/pinia'
 import {dark_mode} from '@/lib/theme'
 
 let media = window.matchMedia('(prefers-color-scheme: dark)')
+
 const callback = (media: { matches: any; }) => {
     const settings = useSettingsStore()
-    if (media.matches) {
-        dark_mode(true)
-        settings.set_theme('dark')
-    } else {
-        dark_mode(false)
-        settings.set_theme('default')
+    if (settings.preference_theme === 'auto') {
+        if (media.matches) {
+            dark_mode(true)
+            settings.set_theme('dark')
+        } else {
+            dark_mode(false)
+            settings.set_theme('auto')
+        }
     }
 }
+
 callback(media)
+
 if (typeof media.addEventListener === 'function') {
     media.addEventListener('change', callback)
 } else if (typeof media.addListener === 'function') {

frontend/src/api/cert.ts

@@ -0,0 +1,5 @@
+import Curd from '@/api/curd'
+
+const cert = new Curd('/cert')
+
+export default cert

frontend/src/api/domain.ts

@@ -13,13 +13,13 @@ class Domain extends Curd {
     get_template() {
         return http.get('template')
     }
-    
+
     add_auto_cert(domain: string) {
-        return http.post('cert/' + domain)
+        return http.post('auto_cert/' + domain)
     }
 
     remove_auto_cert(domain: string) {
-        return http.delete('cert/' + domain)
+        return http.delete('auto_cert/' + domain)
     }
 }
 

frontend/src/api/ngx.ts

@@ -7,6 +7,10 @@ const ngx = {
 
     tokenize_config(content: string) {
         return http.post('/ngx/tokenize_config', {content})
+    },
+
+    format_code(content: string) {
+        return http.post('/ngx/format_code', {content})
     }
 }
 

frontend/src/api/settings.ts

@@ -0,0 +1,12 @@
+import http from '@/lib/http'
+
+const settings = {
+    get() {
+        return http.get('/settings')
+    },
+    save(data: any) {
+        return http.post('/settings', data)
+    }
+}
+
+export default settings

frontend/src/api/template.ts

@@ -0,0 +1,25 @@
+import Curd from '@/api/curd'
+import http from '@/lib/http'
+
+class Template extends Curd {
+    get_config_list() {
+        return http.get('template/configs')
+    }
+
+    get_block_list() {
+        return http.get('template/blocks')
+    }
+
+    get_config(name: string) {
+        return http.get('template/config/' + name)
+    }
+
+    get_block(name: string) {
+        return http.get('template/block/' + name)
+    }
+
+}
+
+const template = new Template('/template')
+
+export default template

frontend/src/components/CodeEditor/CodeEditor.vue

@@ -4,16 +4,13 @@ import 'ace-builds/src-noconflict/mode-nginx'
 import 'ace-builds/src-noconflict/theme-monokai'
 import {computed} from 'vue'
 
-const props = defineProps<{
-    content: string
-    defaultHeight?: string
-}>()
+const props = defineProps(['content', 'defaultHeight'])
 
 const emit = defineEmits(['update:content'])
 
 const value = computed({
     get() {
-        return props.content
+        return props.content ?? ''
     },
     set(value) {
         emit('update:content', value)
@@ -27,7 +24,7 @@ const value = computed({
         lang="nginx"
         theme="monokai"
         :style="{
-            minHeight: props.defaultHeight || '100vh'
+            minHeight: defaultHeight || '100vh'
         }"/>
 </template>
 

frontend/src/components/FooterToolbar/FooterToolBar.vue

@@ -26,6 +26,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.dark {
+    .ant-pro-footer-toolbar {
+        background: rgba(24, 24, 24, 0.62);
+        border-top: unset;
+    }
+}
+
 .ant-pro-footer-toolbar {
     position: fixed;
     width: 100%;
@@ -36,10 +43,6 @@ export default {
     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
     background: #ffffff8c;
     border-top: 1px solid #e8e8e8;
-    @media (prefers-color-scheme: dark) {
-        background: rgba(24, 24, 24, 0.62);
-        border-top: unset;
-    }
     padding: 0 24px;
     z-index: 9;
 

frontend/src/components/Logo/Logo.vue

@@ -10,6 +10,14 @@ import logo from '@/assets/img/logo.png'</script>
 </template>
 
 <style lang="less" scoped>
+.dark {
+    .logo {
+        background-color: transparent;
+        -webkit-box-shadow: 1px 1px 0 0 #404040;
+        box-shadow: 1px 1px 0 0 #404040;
+    }
+}
+
 .logo {
     padding: 8px 25px;
     -webkit-box-shadow: 1px 1px 0 0 #e8e8e8;
@@ -20,11 +28,6 @@ import logo from '@/assets/img/logo.png'</script>
     overflow: hidden;
     display: inline-block;
     background-color: #ffffff;
-    @media (prefers-color-scheme: dark) {
-        background-color: transparent;
-        -webkit-box-shadow: 1px 1px 0 0 #404040;
-        box-shadow: 1px 1px 0 0 #404040;
-    }
 
     img {
         height: 46px;

frontend/src/components/PageHeader/PageHeader.vue

@@ -40,18 +40,21 @@ watch(() => route.name, () => {
 </template>
 
 <style lang="less" scoped>
-.page-header {
-    background: #fff;
-    padding: 16px 32px 0;
-    border-bottom: 1px solid #e8e8e8;
-    @media (prefers-color-scheme: dark) {
+.dark {
+    .page-header {
         background: #28292c !important;
         border-bottom: unset;
+
         h1 {
             color: #fafafa;
         }
     }
+}
 
+.page-header {
+    background: #fff;
+    padding: 16px 32px 0;
+    border-bottom: 1px solid #e8e8e8;
 
     .breadcrumb {
         margin-bottom: 16px;

frontend/src/components/SetLanguage/SetLanguage.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import gettext from '@/gettext'
 
-
 import {ref, watch} from 'vue'
 
 import {useSettingsStore} from '@/pinia'

frontend/src/components/StdDataEntry/components/StdSelector.vue

@@ -79,35 +79,36 @@ const _selectedKey = computed({
                 {{ M_value }}
             </div>
             <a-modal
-                    :mask="false"
-                    :visible="visible"
-                    :cancel-text="$gettext('Cancel')"
-                    :ok-text="$gettext('OK')"
-                    :title="$gettext('Selector')"
-                    @cancel="visible=false"
-                    @ok="ok()"
-                    :width="800"
-                    destroyOnClose
+                :mask="false"
+                :visible="visible"
+                :cancel-text="$gettext('Cancel')"
+                :ok-text="$gettext('OK')"
+                :title="$gettext('Selector')"
+                @cancel="visible=false"
+                @ok="ok()"
+                :width="800"
+                destroyOnClose
             >
                 {{ description }}
                 <std-table
-                        :api="api"
-                        :columns="columns"
-                        :data_key="data_key"
-                        :disable_search="disable_search"
-                        :pithy="true"
-                        :get_params="get_params"
-                        :selectionType="selectionType"
-                        :disable_query_params="true"
-                        @onSelected="onSelect"
-                        @onSelectedRecord="onSelectedRecord"
+                    :api="api"
+                    :columns="columns"
+                    :data_key="data_key"
+                    :disable_search="disable_search"
+                    :pithy="true"
+                    :get_params="get_params"
+                    :selectionType="selectionType"
+                    :disable_query_params="true"
+                    @onSelected="onSelect"
+                    @onSelectedRecord="onSelectedRecord"
                 />
             </a-modal>
         </div>
     </div>
 </template>
 
 <style lang="less" scoped>
+.dark .std-selector-container
 .std-selector-container {
     height: 39.9px;
     display: flex;
@@ -132,15 +133,9 @@ const _selectedKey = computed({
         cursor: pointer;
         min-width: 180px;
 
-        @media (prefers-color-scheme: dark) {
-            background-color: #1e1f20;
-            border: 1px solid #666666;
-            color: rgba(255, 255, 255, 0.99);
-        }
-
         .value {
 
         }
     }
 }
-</style>
+</style>