feat: add custom about dialog

backend/services/preferences_service.go

@@ -85,7 +85,7 @@ func (p *preferencesService) GetFontList() (resp types.JSResp) {
 	return
 }
 
-func (p *preferencesService) SetClientVersion(ver string) {
+func (p *preferencesService) SetAppVersion(ver string) {
 	if !strings.HasPrefix(ver, "v") {
 		p.clientVersion = "v" + ver
 	} else {
@@ -93,6 +93,14 @@ func (p *preferencesService) SetClientVersion(ver string) {
 	}
 }
 
+func (p *preferencesService) GetAppVersion() (resp types.JSResp) {
+	resp.Success = true
+	resp.Data = map[string]any{
+		"version": p.clientVersion,
+	}
+	return
+}
+
 type latestRelease struct {
 	Name    string `json:"name"`
 	TagName string `json:"tag_name"`

frontend/src/App.vue

@@ -19,6 +19,7 @@ import { darkTheme } from 'naive-ui'
 import KeyFilterDialog from './components/dialogs/KeyFilterDialog.vue'
 import { WindowSetDarkTheme, WindowSetLightTheme } from 'wailsjs/runtime/runtime.js'
 import { themeOverrides } from '@/utils/theme.js'
+import AboutDialog from '@/components/dialogs/AboutDialog.vue'
 
 hljs.registerLanguage('json', json)
 hljs.registerLanguage('plaintext', plaintext)
@@ -57,9 +58,9 @@ watch(
     <n-config-provider
         :hljs="hljs"
         :inline-theme-disabled="true"
+        :locale="prefStore.themeLocale"
         :theme="prefStore.isDark ? darkTheme : undefined"
         :theme-overrides="themeOverrides"
-        :locale="prefStore.themeLocale"
         class="fill-height">
         <n-dialog-provider>
             <app-content :loading="initializing" />
@@ -74,6 +75,7 @@ watch(
             <delete-key-dialog />
             <set-ttl-dialog />
             <preferences-dialog />
+            <about-dialog />
         </n-dialog-provider>
     </n-config-provider>
 </template>

frontend/src/AppContent.vue

@@ -13,7 +13,7 @@ import useConnectionStore from './stores/connections.js'
 import ContentLogPane from './components/content/ContentLogPane.vue'
 import ContentValueTab from '@/components/content/ContentValueTab.vue'
 import ToolbarControlWidget from '@/components/common/ToolbarControlWidget.vue'
-import { WindowToggleMaximise } from 'wailsjs/runtime/runtime.js'
+import { WindowIsFullscreen, WindowToggleMaximise } from 'wailsjs/runtime/runtime.js'
 import { isMacOS } from '@/utils/platform.js'
 import iconUrl from '@/assets/images/icon.png'
 
@@ -81,8 +81,7 @@ watch(
     <n-spin
         :show="props.loading"
         :theme-overrides="{ opacitySpinning: 0 }"
-        style="border-radius: 10px"
-        :style="{ backgroundColor: themeVars.bodyColor }">
+        :style="{ backgroundColor: themeVars.bodyColor, borderRadius: WindowIsFullscreen() ? '0' : '10px' }">
         <div
             id="app-content-wrapper"
             class="flex-box-v"
@@ -139,7 +138,7 @@ watch(
                 style="--wails-draggable: none"
                 class="flex-box-h flex-item-expand">
                 <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
-                <!-- browser page-->
+                <!-- browser page -->
                 <div v-show="tabStore.nav === 'browser'" :class="{ dragging }" class="flex-box-h flex-item-expand">
                     <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
                         <browser-pane

frontend/src/components/dialogs/AboutDialog.vue

@@ -0,0 +1,64 @@
+<script setup>
+import iconUrl from '@/assets/images/icon.png'
+import useDialog from 'stores/dialog.js'
+import { useThemeVars } from 'naive-ui'
+import { BrowserOpenURL } from 'wailsjs/runtime/runtime.js'
+import { GetAppVersion } from 'wailsjs/go/services/preferencesService.js'
+import { ref, onMounted } from 'vue'
+
+const themeVars = useThemeVars()
+const dialogStore = useDialog()
+const version = ref('')
+
+onMounted(() => {
+    GetAppVersion().then(({ data }) => {
+        version.value = data.version
+    })
+})
+
+const onOpenSource = () => {
+    BrowserOpenURL('https://github.com/tiny-craft/tiny-rdm')
+}
+
+const onOpenWebsite = () => {
+    BrowserOpenURL('https://redis.tinycraft.cc/')
+}
+</script>
+
+<template>
+    <n-modal v-model:show="dialogStore.aboutDialogVisible" :show-icon="false" preset="dialog" transform-origin="center">
+        <n-space vertical align="center" :wrap-item="false" :wrap="false" :size="10">
+            <n-avatar :size="120" color="#0000" :src="iconUrl"></n-avatar>
+            <div class="about-app-title">Tiny RDM</div>
+            <n-text>{{ version }}</n-text>
+            <n-space align="center" :wrap-item="false" :wrap="false" :size="5">
+                <n-text class="about-link" @click="onOpenSource">{{ $t('dialogue.about.source') }}</n-text>
+                <n-divider vertical />
+                <n-text class="about-link" @click="onOpenWebsite">{{ $t('dialogue.about.website') }}</n-text>
+            </n-space>
+            <div class="about-copyright" :style="{ color: themeVars.textColor3 }">
+                Copyright © 2023 Tinycraft.cc All rights reserved
+            </div>
+        </n-space>
+    </n-modal>
+</template>
+
+<style scoped lang="scss">
+.about-app-title {
+    font-weight: bold;
+    font-size: 18px;
+    margin: 5px;
+}
+
+.about-link {
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.about-copyright {
+    font-size: 12px;
+}
+</style>

frontend/src/components/sidebar/NavMenu.vue

@@ -73,6 +73,14 @@ const preferencesOptions = computed(() => {
             label: i18n.t('menu.check_update'),
             key: 'update',
         },
+        {
+            type: 'divider',
+            key: 'd1',
+        },
+        {
+            label: i18n.t('menu.about'),
+            key: 'about',
+        },
     ]
 })
 
@@ -90,6 +98,9 @@ const onSelectPreferenceMenu = (key) => {
         case 'update':
             preferencesStore.checkForUpdate(true)
             break
+        case 'about':
+            dialogStore.openAboutDialog()
+            break
     }
 }
 

frontend/src/langs/en.json

@@ -181,6 +181,10 @@
       "download_now": "Download",
       "later": "Later",
       "skip": "Skip This Update"
+    },
+    "about": {
+      "source": "Source Code",
+      "website": "Official Website"
     }
   },
   "menu": {
@@ -190,7 +194,8 @@
     "close": "Close",
     "preferences": "Preferences",
     "help": "Help",
-    "check_update": "Check for Updates..."
+    "check_update": "Check for Updates...",
+    "about": "About"
   },
   "log": {
     "launch_log": "Launch Log",

frontend/src/langs/zh-cn.json

@@ -182,6 +182,10 @@
       "download_now": "立即下载",
       "later": "稍后提醒我",
       "skip": "忽略本次更新"
+    },
+    "about": {
+      "source": "源码地址",
+      "website": "官方网站"
     }
   },
   "menu": {
@@ -191,7 +195,8 @@
     "close": "关闭",
     "preferences": "偏好设置",
     "help": "帮助",
-    "check_update": "检查更新..."
+    "check_update": "检查更新...",
+    "about": "关于"
   },
   "log": {
     "launch_log": "运行日志",

frontend/src/main.js

@@ -1,5 +1,5 @@
 import { createPinia } from 'pinia'
-import { createApp } from 'vue'
+import { createApp, nextTick } from 'vue'
 import App from './App.vue'
 import './styles/style.scss'
 import dayjs from 'dayjs'
@@ -24,15 +24,16 @@ async function setupApp() {
     await setupDiscreteApi()
     app.config.errorHandler = (err, instance, info) => {
         // TODO: add "send error message to author" later
+        nextTick().then(() => {
             try {
                 const content = err.toString()
-            $notification.error({
+                $notification.error(content, {
                     title: i18n.global.t('common.error'),
-                content,
-                // meta: err.stack,
+                    meta: 'Please see console output for more detail',
                 })
                 console.error(err)
             } catch (e) {}
+        })
     }
     app.config.warnHandler = (message) => {
         console.warn(message)

frontend/src/stores/dialog.js

@@ -66,6 +66,7 @@ const useDialogStore = defineStore('dialog', {
         ttlDialogVisible: false,
 
         preferencesDialogVisible: false,
+        aboutDialogVisible: false,
     }),
     actions: {
         openNewDialog() {
@@ -211,6 +212,13 @@ const useDialogStore = defineStore('dialog', {
         closePreferencesDialog() {
             this.preferencesDialogVisible = false
         },
+
+        openAboutDialog() {
+            this.aboutDialogVisible = true
+        },
+        closeAboutDialog() {
+            this.aboutDialogVisible = false
+        },
     },
 })
 

main.go

@@ -27,13 +27,14 @@ func main() {
 	app := NewApp()
 	connSvc := services.Connection()
 	prefSvc := services.Preferences()
-	prefSvc.SetClientVersion(version)
+	prefSvc.SetAppVersion(version)
 
 	// menu
 	appMenu := menu.NewMenu()
 	if runtime.GOOS == "darwin" {
 		appMenu.Append(menu.AppMenu())
 		appMenu.Append(menu.EditMenu())
+		appMenu.Append(menu.WindowMenu())
 	}
 
 	// Create application with options