Refactored install and 404 pages

frontend/.env.development

@@ -1,2 +1 @@
 VITE_API_ROOT = /api
-VITE_API_WSS_ROOT = wss://nginx.jackyu.cn/api

frontend/.env.production

@@ -1,2 +1 @@
-VUE_APP_API_ROOT = /api
-VUE_APP_API_WSS_ROOT = /api
+VITE_API_ROOT = /api

frontend/frontend.go

@@ -4,5 +4,5 @@ import (
 	"embed"
 )
 
-//go:embed dist
+//go:embed dist/* dist/*/*
 var DistFS embed.FS

frontend/src/api/index.ts

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

frontend/src/components/StdDataDisplay/StdPagination.vue

@@ -1,36 +1,28 @@
+<script setup lang="ts">
+import {useGettext} from 'vue3-gettext'
+
+const {pagination, size} = defineProps(['pagination', 'size'])
+const emit = defineEmits(['changePage'])
+const {$gettext} = useGettext()
+
+function changePage(num: number) {
+    emit('changePage', num)
+}
+</script>
+
 <template>
-    <div v-if="Object.keys(pagination).length !== 0">
+    <div v-if="pagination.total>pagination.per_page">
         <a-pagination
             :current="pagination.current_page"
-            :hideOnSinglePage="true"
             :pageSize="pagination.per_page"
             :size="size"
             :total="pagination.total"
-            :show-total="(total, range) => `当前显示${range[0]}-${range[1]}条数据，共${total}条数据`"
             class="pagination"
             @change="changePage"
         />
-        <div class="clear"></div>
     </div>
 </template>
 
-<script>
-export default {
-    name: 'StdPagination',
-    props: {
-        pagination: Object,
-        size: {
-            default: ''
-        }
-    },
-    methods: {
-        changePage(num) {
-            return this.$emit('changePage', num)
-        }
-    }
-}
-</script>
-
 <style lang="less">
 .ant-pagination-total-text {
     @media (max-width: 450px) {

frontend/src/components/StdDataDisplay/StdTable.vue

@@ -5,7 +5,7 @@ const {$gettext, interpolate} = gettext
 
 import StdDataEntry from '@/components/StdDataEntry'
 import StdPagination from './StdPagination.vue'
-import {nextTick, reactive, ref} from 'vue'
+import {nextTick, reactive, ref, watch} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import {message} from 'ant-design-vue'
 
@@ -61,9 +61,9 @@ const props = defineProps({
 })
 
 
-const data_source = reactive([])
+const data_source = ref([])
 const loading = ref(true)
-const pagination = ({
+const pagination = reactive({
     total: 1,
     per_page: 10,
     current_page: 1,
@@ -80,7 +80,6 @@ const rowSelection = reactive({})
 const searchColumns = getSearchColumns()
 const pithyColumns = getPithyColumns()
 
-
 get_list()
 
 defineExpose({
@@ -102,7 +101,7 @@ function get_list(page_num = null) {
         params['page'] = page_num
     }
     props.api!.get_list(params).then((r: any) => {
-        Object.assign(data_source, r.data)
+        data_source.value = r.data
 
         if (r.pagination !== undefined) {
             Object.assign(pagination, r.pagination)
@@ -161,10 +160,17 @@ function onSelect(record: any) {
 const router = useRouter()
 
 const reset_search = async () => {
-    params = reactive({})
+    Object.keys(params).forEach(v => {
+        delete params[v]
+    })
     router.push({query: {}}).catch(() => {
     })
 }
+
+watch(params, () => {
+    router.push({query: params})
+    get_list()
+})
 </script>
 
 <template>
@@ -212,7 +218,6 @@ const reset_search = async () => {
                     </template>
                 </template>
             </template>
-
         </a-table>
         <std-pagination :pagination="pagination" @changePage="get_list"/>
     </div>

frontend/src/dark.less

@@ -1 +1,5 @@
 @import "ant-design-vue/dist/antd.dark";
+
+.directive-editor-extra {
+    background-color: rgba(0, 0, 0, 0.84) !important;
+}

frontend/src/lib/http/index.ts

@@ -2,15 +2,12 @@ import axios, {AxiosRequestConfig} from 'axios'
 import {useUserStore} from '@/pinia'
 import {storeToRefs} from 'pinia'
 
+import router from '@/routes'
+
 const user = useUserStore()
 
 const {token} = storeToRefs(user)
 
-declare module 'axios' {
-    export interface AxiosResponse<T = any> extends Promise<T> {
-    }
-}
-
 let instance = axios.create({
     baseURL: import.meta.env.VITE_API_ROOT,
     timeout: 50000,
@@ -38,7 +35,6 @@ instance.interceptors.request.use(
     }
 )
 
-
 instance.interceptors.response.use(
     response => {
         return Promise.resolve(response.data)
@@ -47,6 +43,8 @@ instance.interceptors.response.use(
         switch (error.response.status) {
             case 401:
             case 403:
+                user.logout()
+                await router.push('/login')
                 break
         }
         return Promise.reject(error.response.data)

frontend/src/main.ts

@@ -3,7 +3,7 @@ import {createPinia} from 'pinia'
 import gettext from './gettext'
 import App from './App.vue'
 import router from './routes'
-import 'ant-design-vue/dist/antd.less'
+//import 'ant-design-vue/dist/antd.less'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import {useSettingsStore} from '@/pinia'
 

frontend/src/routes/index.ts

@@ -100,7 +100,7 @@ export const routes = [
     {
         path: '/install',
         name: () => $gettext('Install'),
-        // component: () => import('@/views/other/Install.vue'),
+        component: () => import('@/views/other/Install.vue'),
         meta: {noAuth: true}
     },
     {
@@ -110,16 +110,10 @@ export const routes = [
         meta: {noAuth: true}
     },
     {
-        path: '/404',
-        name: () => $gettext('404 Not Found'),
-        component: () => import('@/views/other/Error.vue'),
-        meta: {noAuth: true, status_code: 404, error: 'Not Found'}
-    },
-    {
-        path: '/*',
+        path: '/:pathMatch(.*)*',
         name: () => $gettext('Not Found'),
-        redirect: '/404',
-        meta: {noAuth: true}
+        component: () => import('@/views/other/Error.vue'),
+        meta: {noAuth: true, status_code: 404, error: () => $gettext('Not Found')}
     }
 ]
 
@@ -130,25 +124,8 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-
     // @ts-ignore
-    document.title = to.name() + ' | Nginx UI'
-
-    if (import.meta.env.MODE === 'production') {
-        // axios.get('/version.json?' + Date.now()).then(r => {
-        //     if (!(process.env.VUE_APP_VERSION === r.data.version
-        //         && Number(process.env.VUE_APP_BUILD_ID) === r.data.build_id)) {
-        //         Vue.prototype.$info({
-        //             title: $gettext('System message'),
-        //             content: $gettext('Detected version update, this page will refresh.'),
-        //             onOk() {
-        //                 location.reload()
-        //             },
-        //             okText: $gettext('OK')
-        //         })
-        //     }
-        // })
-    }
+    document.title = to.name?.() + ' | Nginx UI'
 
     const user = useUserStore()
     const {is_login} = user

frontend/src/style.less

@@ -1,3 +1 @@
-@import "ant-design-vue/dist/antd.variable";
-
-@border-radius-base: 4px;
+@import 'ant-design-vue/dist/antd.less';

frontend/src/views/domain/cert/Cert.vue

@@ -1,44 +1,42 @@
+<script setup lang="ts">
+import CertInfo from '@/views/domain/cert/CertInfo.vue'
+import IssueCert from '@/views/domain/cert/IssueCert.vue'
+import {computed, ref} from 'vue'
+
+const {directivesMap, current_server_directives, enabled} = defineProps<{
+    directivesMap: any
+    current_server_directives: Array<any>
+    enabled: boolean
+}>()
+
+const info = ref(null)
+
+interface Info {
+    get(): void
+}
+
+function callback() {
+    const t: Info | null = info.value
+    t!.get()
+}
+
+const name = computed(() => {
+    return directivesMap['server_name'][0].params.trim()
+})
+</script>
+
 <template>
     <div>
         <cert-info ref="info" :domain="name" v-if="name"/>
         <issue-cert
             :current_server_directives="current_server_directives"
             :directives-map="directivesMap"
-            v-model="auto_cert"
+            v-model:enabled="enabled"
             @callback="callback"
         />
     </div>
 </template>
 
-<script>
-import CertInfo from '@/views/domain/cert/CertInfo'
-import IssueCert from '@/views/domain/cert/IssueCert'
-
-export default {
-    name: 'Cert',
-    components: {IssueCert, CertInfo},
-    props: {
-        directivesMap: Object,
-        current_server_directives: Array,
-        auto_cert: Boolean
-    },
-    model: {
-        prop: 'auto_cert',
-        event: 'change_auto_cert'
-    },
-    methods: {
-        callback() {
-            this.$refs.info.get()
-        }
-    },
-    computed: {
-        name() {
-            return this.directivesMap['server_name'][0].params.trim()
-        }
-    }
-}
-</script>
-
 <style scoped>
 
 </style>

frontend/src/views/domain/cert/CertInfo.vue

@@ -19,6 +19,10 @@ function get() {
         ok.value = false
     })
 }
+
+defineExpose({
+    get
+})
 </script>
 
 <template>