[frontend-next] bug fix

Author: 0xJacky

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/public/vite.svg

@@ -1,36 +1,29 @@
+<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/StdPagination.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/components/StdDataDisplay/StdTable.vue

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

frontend/src/dark.less

@@ -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/main.ts

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

frontend/src/style.less

@@ -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>