Merge pull request #442 from 0xJacky/enhance/ota

Enhance/ota

Author: 0xJacky

api/system/router.go

@@ -13,5 +13,8 @@ func InitPublicRouter(r *gin.RouterGroup) {
 func InitPrivateRouter(r *gin.RouterGroup) {
 	r.GET("upgrade/release", GetRelease)
 	r.GET("upgrade/current", GetCurrentVersion)
+}
+
+func InitWebSocketRouter(r *gin.RouterGroup) {
 	r.GET("upgrade/perform", PerformCoreUpgrade)
 }

api/system/upgrade.go

@@ -139,9 +139,8 @@ func PerformCoreUpgrade(c *gin.Context) {
 		return
 	}
 
-	_ = os.Remove(u.ExPath)
 	// bye, overseer will restart nginx-ui
-	err = u.PerformCoreUpgrade(u.ExPath, tarName)
+	err = u.PerformCoreUpgrade(tarName)
 	if err != nil {
 		_ = ws.WriteJSON(CoreUpgradeResp{
 			Status:  UpgradeStatusError,

app/README.md

@@ -21,3 +21,47 @@ manual `h(...)` calls), you can enable Volar's Take Over mode by following these
 2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
 
 You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+**Note:** The default target of the api proxy is `http://localhost:9000`,
+if you need to change this, create the `.env` file in root directory and set your target in it.
+
+```env
+VITE_PROXY_TARGET=http://localhost:9001
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+**Note:** The default port of the dev server is `3002`,
+if you need to change this, create the `.env` file in root directory and set your port in it.
+
+```env
+VITE_PORT=3456
+```
+
+### Code Style Check
+
+```sh
+pnpm lint
+```
+
+### Type Check
+
+```sh
+pnpm typecheck
+```
+
+### Compile and Minify for Production
+
+```sh
+pnpm build
+```

app/components.d.ts

@@ -54,6 +54,7 @@ declare module 'vue' {
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASpace: typeof import('ant-design-vue/es')['Space']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
     AStatistic: typeof import('ant-design-vue/es')['Statistic']
     AStep: typeof import('ant-design-vue/es')['Step']
     ASteps: typeof import('ant-design-vue/es')['Steps']

app/src/App.vue

@@ -12,6 +12,8 @@ import { useSettingsStore } from '@/pinia'
 import gettext from '@/gettext'
 import loadTranslations from '@/api/translations'
 
+const route = useRoute()
+
 const media = window.matchMedia('(prefers-color-scheme: dark)')
 
 const callback = () => {
@@ -51,7 +53,7 @@ const lang = computed(() => {
 const settings = useSettingsStore()
 const is_theme_dark = computed(() => settings.theme === 'dark')
 
-loadTranslations()
+loadTranslations(route)
 </script>
 
 <template>

app/src/api/translations.ts

@@ -1,8 +1,7 @@
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router'
 import gettext from '@/gettext'
 
-export default async function loadTranslations() {
-  const route = useRoute()
-
+export default async function loadTranslations(route: RouteLocationNormalizedLoadedGeneric) {
   if (gettext.current !== 'en') {
     await fetch(`${import.meta.env.VITE_API_ROOT}/translation/${gettext.current}`).then(async r => {
       gettext.translations[gettext.current] = await r.json()
@@ -12,7 +11,7 @@ export default async function loadTranslations() {
       document.title = `${route.meta.name?.()} | Nginx UI`
   }
 
-  watch(route, () => {
+  watch(() => route, () => {
     if (route?.meta?.name)
       document.title = `${route.meta.name?.()} | Nginx UI`
   })

app/src/components/ChatGPT/ChatGPT.vue

@@ -143,7 +143,6 @@ async function send() {
     messages.value = []
 
   if (messages.value.length === 0) {
-    console.log(current.value)
     messages.value.push({
       role: 'user',
       content: `${props.content}\n\nCurrent Language Code: ${current.value}`,

app/src/components/SetLanguage/SetLanguage.vue

@@ -21,7 +21,7 @@ const current = computed({
 const languageAvailable = gettext.available
 
 watch(current, v => {
-  loadTranslations()
+  loadTranslations(route)
   settings.set_language(v)
   gettext.current = v
 

app/src/components/StdDesign/StdDataDisplay/StdCurd.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T=any">
 import { message } from 'ant-design-vue'
 import type { ComputedRef } from 'vue'
 import type { StdTableProps } from './StdTable.vue'
@@ -7,7 +7,7 @@ import StdDataEntry from '@/components/StdDesign/StdDataEntry'
 import type { Column } from '@/components/StdDesign/types'
 import StdCurdDetail from '@/components/StdDesign/StdDataDisplay/StdCurdDetail.vue'
 
-export interface StdCurdProps {
+export interface StdCurdProps<T> extends StdTableProps<T> {
   cardTitleKey?: string
   modalMaxWidth?: string | number
   modalMask?: boolean
@@ -16,28 +16,28 @@ export interface StdCurdProps {
 
   disableAdd?: boolean
   onClickAdd?: () => void
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onClickEdit?: (id: number | string, record: any, index: number) => void
+
+  onClickEdit?: (id: number | string, record: T, index: number) => void
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   beforeSave?: (data: any) => Promise<void>
 }
 
-const props = defineProps<StdTableProps & StdCurdProps>()
-const route = useRoute()
-const router = useRouter()
+const props = defineProps<StdTableProps<T> & StdCurdProps<T>>()
 const visible = ref(false)
-const update = ref(0)
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const data: any = reactive({ id: null })
 const modifyMode = ref(true)
 const editMode = ref<string>()
+const shouldRefetchList = ref(false)
 
 provide('data', data)
 provide('editMode', editMode)
+provide('shouldRefetchList', shouldRefetchList)
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const error: any = reactive({})
 const selected = ref([])
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function onSelect(keys: any) {
   selected.value = keys
@@ -49,19 +49,35 @@ const editableColumns = computed(() => {
   })
 }) as ComputedRef<Column[]>
 
-function add() {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function add(preset: any = undefined) {
+  if (props.onClickAdd)
+    return
   Object.keys(data).forEach(v => {
     delete data[v]
   })
 
+  if (preset)
+    Object.assign(data, preset)
+
   clear_error()
   visible.value = true
   editMode.value = 'create'
   modifyMode.value = true
 }
+
 const table = ref()
 
-const selectedRowKeys = ref([])
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const selectedRowKeys = defineModel<any[]>('selectedRowKeys', {
+  default: () => [],
+})
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const selectedRows = defineModel<any[]>('selectedRows', {
+  type: Array,
+  default: () => [],
+})
 
 const getParams = reactive({
   trash: false,
@@ -91,13 +107,14 @@ function clear_error() {
 }
 
 const stdEntryRef = ref()
+
 async function ok() {
   const { formRef } = stdEntryRef.value
 
   clear_error()
   try {
     await formRef.validateFields()
-    await props?.beforeSave?.(data)
+    props?.beforeSave?.(data)
     props
       .api!.save(data.id, { ...data, ...props.overwriteParams }, { params: { ...props.overwriteParams } })
       .then(r => {
@@ -111,37 +128,26 @@ async function ok() {
         Object.assign(error, e.errors)
       })
   }
-  catch { }
+  catch {
+    message.error($gettext('Please fill in the required fields'))
+  }
 }
 
 function cancel() {
   visible.value = false
 
   clear_error()
-}
 
-watch(visible, v => {
-  if (!v) {
-    router.push({
-      query: {
-        ...route.query,
-        [`open.${props.rowKey || 'id'}`]: undefined,
-      },
-    })
+  if (shouldRefetchList.value) {
+    get_list()
+    shouldRefetchList.value = false
   }
-})
-
-watch(modifyMode, v => {
-  router.push({
-    query: {
-      ...route.query,
-      modify_mode: v.toString(),
-    },
-  })
-})
+}
 
 function edit(id: number | string) {
-  get(id, true).then(() => {
+  if (props.onClickEdit)
+    return
+  get(id).then(() => {
     visible.value = true
     modifyMode.value = true
     editMode.value = 'modify'
@@ -151,15 +157,15 @@ function edit(id: number | string) {
 }
 
 function view(id: number | string) {
-  get(id, false).then(() => {
+  get(id).then(() => {
     visible.value = true
     modifyMode.value = false
   }).catch(e => {
     message.error($gettext(e?.message ?? 'Server error'), 5)
   })
 }
 
-async function get(id: number | string, _modifyMode: boolean) {
+async function get(id: number | string) {
   return props
     .api!.get(id, { ...props.overwriteParams })
     .then(async r => {
@@ -168,32 +174,14 @@ async function get(id: number | string, _modifyMode: boolean) {
       })
       data.id = null
       Object.assign(data, r)
-      if (!props.disabledModify) {
-        await router.push({
-          query: {
-            ...route.query,
-            [`open.${props.rowKey || 'id'}`]: id,
-            modify_mode: _modifyMode.toString(),
-          },
-        })
-      }
     })
 }
 
-onMounted(async () => {
-  const id = route.query[`open.${props.rowKey || 'id'}`] as string
-  const _modifyMode = (route.query.modify_mode as string) === 'true'
-  if (id && !props.disabledModify && _modifyMode)
-    edit(id)
-
-  if (id && !props.disabledView && !_modifyMode)
-    view(id)
-})
-
 const modalTitle = computed(() => {
   return data.id ? modifyMode.value ? $gettext('Modify') : $gettext('View Details') : $gettext('Add')
 })
 
+const localOverwriteParams = reactive(props.overwriteParams ?? {})
 </script>
 
 <template>
@@ -209,7 +197,7 @@ const modalTitle = computed(() => {
         <ASpace>
           <slot name="beforeAdd" />
           <a
-            v-if="!disableAdd"
+            v-if="!disableAdd && !getParams.trash"
             @click="add"
           >{{ $gettext('Add') }}</a>
           <slot name="extra" />
@@ -224,19 +212,20 @@ const modalTitle = computed(() => {
               v-else
               @click="getParams.trash = false"
             >
-              {{ $gettext('List') }}
+              {{ $gettext('Back to list') }}
             </a>
           </template>
         </ASpace>
       </template>
 
       <StdTable
         ref="table"
-        :key="update"
         v-model:selected-row-keys="selectedRowKeys"
+        v-model:selected-rows="selectedRows"
         v-bind="{
           ...props,
           getParams,
+          overwriteParams: localOverwriteParams,
         }"
         @click-edit="edit"
         @click-view="view"
@@ -269,7 +258,7 @@ const modalTitle = computed(() => {
       @ok="ok"
     >
       <div
-        v-if="!disabledModify && !disabledView"
+        v-if="!disableModify && !disableView && editMode === 'modify'"
         class="m-2 flex justify-end"
       >
         <ASwitch
@@ -294,7 +283,7 @@ const modalTitle = computed(() => {
           ref="stdEntryRef"
           :data-list="editableColumns"
           :data-source="data"
-          :error="error"
+          :errors="error"
         />
 
         <slot