.

backend/services/settings.go

@@ -0,0 +1,22 @@
+package services
+
+import (
+	"my-app/backend/app"
+	"my-app/backend/model"
+)
+
+func SaveColorThemeOption(theme string) error {
+	option := model.MyOption{
+		Name: app.CfgColorTheme,
+	}
+	result := option.Update(theme)
+	return result.Error
+}
+
+func SaveDisplayLanguageOption(lang string) error {
+	option := model.MyOption{
+		Name: app.CfgDisplayLanguage,
+	}
+	result := option.Update(lang)
+	return result.Error
+}

backend/tray/listeners.go

@@ -3,8 +3,8 @@ package tray
 import (
 	"fmt"
 	"my-app/backend/app"
-	"my-app/backend/model"
 	"my-app/backend/pkg/i18n"
+	"my-app/backend/services"
 	"my-app/backend/tray/menus"
 	"my-app/backend/web"
 
@@ -63,12 +63,8 @@ func (t *tray) displayLanguageListener() menus.DisplayLanguageListener {
 			t.colorTheme.SetLocale()
 			t.quit.SetLocale()
 
-			option := model.MyOption{
-				Name: app.CfgDisplayLanguage,
-			}
-			result := option.Update(locale.Lang.Code)
-			if result.Error != nil {
-				app.App().TrayLog().Fatalf("failed to update language option: %+v\n", result.Error)
+			if err := services.SaveDisplayLanguageOption(locale.Lang.Code); err != nil {
+				app.App().TrayLog().Fatalf("failed to update language option: %+v\n", err)
 			}
 
 			return true, func() {
@@ -92,12 +88,8 @@ func (t *tray) colorThemeListener() menus.ColorThemeListener {
 			}
 			runtime.EventsEmit(t.wailsCtx, "onColorThemeChanged", theme)
 
-			option := model.MyOption{
-				Name: app.CfgColorTheme,
-			}
-			result := option.Update(theme)
-			if result.Error != nil {
-				app.App().TrayLog().Fatalf("failed to update theme option: %+v\n", result.Error)
+			if err := services.SaveColorThemeOption(theme); err != nil {
+				app.App().TrayLog().Fatalf("failed to update theme option: %+v\n", err)
 			}
 
 			return true, func() {

frontend/packages/components/menu/src/menu-group.vue

@@ -26,13 +26,13 @@ const menuSize = inject<SizeRef>("my-menu-size") || ref(props.size);
 
 const style = computed<StyleValue>(() => {
   const size = props.size || menuSize.value;
-  let marginBottom = 0.6;
+  let marginBottom = 1;
   switch (size) {
     case "large":
-      marginBottom += 0.3;
+      marginBottom += 0.5;
       break;
     case "small":
-      marginBottom -= 0.3;
+      marginBottom -= 0.5;
   }
   return {
     marginBottom: marginBottom + "em",
@@ -41,16 +41,16 @@ const style = computed<StyleValue>(() => {
 
 const titleStyle = computed<StyleValue>(() => {
   const size = props.size || menuSize.value;
-  let lineHeight = 2.6;
+  let marginBottom = 0.5;
   switch (size) {
     case "large":
-      lineHeight += 0.3;
+      marginBottom += 0.2;
       break;
     case "small":
-      lineHeight -= 0.3;
+      marginBottom -= 0.2;
   }
   return {
-    lineHeight,
+    marginBottom: marginBottom + "em",
   };
 });
 </script>
@@ -62,6 +62,7 @@ const titleStyle = computed<StyleValue>(() => {
 
   &__title {
     font-size: var(--my-font-size-xs);
+    line-height: var(--my-line-height-sm);
     color: var(--my-color-text-secondary);
   }
 

frontend/src/App.vue

@@ -22,7 +22,7 @@ EventsOn("onColorThemeChanged", (theme: string) => {
       <Sidebar></Sidebar>
     </my-aside>
     <my-main class="app-main">
-      <router-view></router-view>
+      <router-view class="app-main-inner"></router-view>
     </my-main>
   </my-container>
 </template>
@@ -33,6 +33,9 @@ EventsOn("onColorThemeChanged", (theme: string) => {
   border-top: var(--my-border-width) solid var(--my-color-border-extra-light);
   &-main {
     padding: 2em;
+    &-inner {
+      margin: 0 auto;
+    }
   }
 }
 </style>

frontend/src/router/index.ts

@@ -1,21 +1,24 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 import Test from "@/views/Test.vue";
+import Home from "@/views/Home.vue";
+import Settings from "@/views/Settings.vue";
+import About from "@/views/About.vue";
 
 export const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
     name: "Home",
-    component: Test,
+    component: Home,
   },
   {
     path: "/settings",
     name: "Settings",
-    component: Test,
+    component: Settings,
   },
   {
     path: "/about",
     name: "About",
-    component: Test,
+    component: About,
   },
   {
     path: "/test",

frontend/src/views/About.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useColorTheme } from "../store/color-theme";
+import { EventsOn } from "../../wailsjs/runtime";
+
+const { t, locale } = useI18n();
+const colorTheme = useColorTheme();
+</script>
+
+<template>
+  <my-container class="about"> </my-container>
+</template>
+
+<style lang="scss" scoped>
+.about {
+}
+</style>

frontend/src/views/Home.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useColorTheme } from "../store/color-theme";
+import { EventsOn } from "../../wailsjs/runtime";
+
+const { t, locale } = useI18n();
+const colorTheme = useColorTheme();
+</script>
+
+<template>
+  <my-container class="home"> </my-container>
+</template>
+
+<style lang="scss" scoped>
+.home {
+}
+</style>

frontend/src/views/Settings.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useColorTheme } from "../store/color-theme";
+import { EventsOn } from "../../wailsjs/runtime";
+
+const { t, locale } = useI18n();
+const colorTheme = useColorTheme();
+</script>
+
+<template>
+  <my-container class="settings">
+    <my-main>
+      <h2>{{ t("menu.main.settings") }}</h2>
+    </my-main>
+  </my-container>
+</template>
+
+<style lang="scss" scoped>
+.settings {
+  max-width: 800px;
+}
+</style>