Refactored nginx configuration editor

Author: 0xJacky

frontend/src/api/domain.js

@@ -27,8 +27,8 @@ const domain = {
         return http.post(base_url + '/' + name + '/disable')
     },
 
-    get_template(name) {
-        return http.get('template/' + name)
+    get_template() {
+        return http.get('template')
     },
 
     cert_info(domain) {

frontend/src/api/index.js

@@ -5,6 +5,7 @@ import user from './user'
 import install from './install'
 import analytic from './analytic'
 import settings from './settings'
+import ngx from './ngx'
 
 export default {
     domain,
@@ -13,5 +14,6 @@ export default {
     user,
     install,
     analytic,
-    settings
+    settings,
+    ngx
 }

frontend/src/api/ngx.js

@@ -0,0 +1,13 @@
+import http from '@/lib/http'
+
+const ngx = {
+    build_config(ngxConfig) {
+        return http.post('/ngx/build_config', ngxConfig)
+    },
+
+    tokenize_config(content) {
+        return http.post('/ngx/tokenize_config', {content})
+    }
+}
+
+export default ngx

frontend/src/components/StdDataDisplay/StdTable.vue

@@ -72,15 +72,15 @@
                         :okText="ok_text"
                         :title="restore_title_text"
                         @confirm="restore(record[rowKey])">
-                        <a href="javascript:;">{{restore_action_text}}</a>
+                        <a href="javascript:;">{{ restore_action_text }}</a>
                     </a-popconfirm>
                     <a-popconfirm
                         v-else
                         :cancelText="cancel_text"
                         :okText="ok_text"
                         :title="destroy_title_text"
                         @confirm="destroy(record[rowKey])">
-                        <a href="javascript:;">{{destroy_action_text}}</a>
+                        <a href="javascript:;">{{ destroy_action_text }}</a>
                     </a-popconfirm>
                 </template>
             </div>
@@ -93,6 +93,7 @@
 import StdPagination from './StdPagination'
 import moment from 'moment'
 import StdDataEntry from '@/components/StdDataEntry/StdDataEntry'
+import $gettext, {$interpolate} from '@/lib/translate/gettext'
 
 export default {
     name: 'StdTable',
@@ -230,10 +231,10 @@ export default {
         destroy(id) {
             this.api.destroy(id).then(() => {
                 this.get_list()
-                this.$message.success('删除 ID: ' + id + ' 成功')
+                this.$message.success($interpolate($gettext('Delete ID: %{id}'), {id: id}))
             }).catch(e => {
                 console.log(e)
-                this.$message.error(e?.message ?? '系统错误')
+                this.$message.error(e?.message ?? $gettext('Server error'))
             })
         },
         get_list(page_num = null) {

frontend/src/components/VueItextarea/VueItextarea.vue

@@ -1,5 +1,5 @@
 <template>
-    <editor v-model="current_value" @init="editorInit" lang="nginx" theme="monokai" width="100%" height="1000"></editor>
+    <editor v-model="current_value" @init="editorInit" lang="nginx" theme="monokai" width="100%" :height="defaultTextHeight"></editor>
 </template>
 <style lang="less">
 .cm-s-monokai {
@@ -20,6 +20,10 @@ export default {
     },
     props: {
         value: {},
+        defaultTextHeight: {
+            type: Number,
+            default: 1000
+        }
     },
     model: {
         prop: 'value',
@@ -36,16 +40,6 @@ export default {
     data() {
         return {
             current_value: this.value ?? '',
-            cmOptions: {
-                tabSize: 4,
-                mode: 'text/x-nginx-conf',
-                theme: 'monokai',
-                lineNumbers: true,
-                line: true,
-                highlightDifferences: true,
-                defaultTextHeight: 1000,
-                // more CodeMirror options...
-            }
         }
     },
     methods: {

frontend/src/layouts/BaseLayout.vue

@@ -57,7 +57,6 @@ export default {
     data() {
         return {
             collapsed: this.collapse(),
-            zh_CN,
             clientWidth: document.body.clientWidth,
         }
     },