.

README.md

@@ -77,6 +77,9 @@ $ pnpm ... # install/preinstall scripts trigger during project setup
 │   │   ├── i18n # manage locale/translation strings for backend
 │   │   ├── log # define loggers for backend
 │   │   └── utils # helper functions
+│   ├── service # service module, business layer
+│   │   ├── service.go # initialize provided services
+│   │   └── settings.go # functions about configure application
 │   ├── tray # tray module, presentations & services layer
 │   │   ├── icons # tray icons
 │   │   ├── menus # tray menus
@@ -91,18 +94,21 @@ $ pnpm ... # install/preinstall scripts trigger during project setup
 │       │   ├── docs # auto-generated, try script `docs:build`
 │       │   ├── swagger # auto-generated, try script `swag:docs`
 │       │   ├── static.go # manage static sources
-│       │   └── ... # other static sources
+│       │   └── ...
 │       ├── air.go # special function for air to run web service individually
 │       ├── router.go # entry point of swaggo docs generator, manage routes for API
 │       └── web.go # web service
 ├── build # sources to use during wails build process
 │   ├── bin # auto-generated, try script `wails:dev` or `wails:build`
-│   └── ... # wails related sources
+│   └── ...
 ├── diagrams # diagrams about 4+1 view model
 ├── docs # vitepress documentation
 ├── frontend # sources related to frontend code, workplace managed by PNPM
 │   ├── packages # frontend components, icons, etc.
-│   └── ... # wails frontend related sources
+│   ├── src # wails frontend sources
+│   │   ├── vite-env.d.ts # put go struct associated types into namespace app
+│   │   └── ...
+│   └── ...
 ├── main.go # wails main application, presentations & services layer
 ├── wails_life_cycle.go # wails life cycle
 ├── wails.json # wails CLI config

backend/model/my_option.go

@@ -8,6 +8,10 @@ type MyOption struct {
 	Value string ``              // Option value associated with name
 }
 
+func (mo *MyOption) Load() *gorm.DB {
+	return db.Where(mo).Find(mo)
+}
+
 func (mo *MyOption) Update(newValue string) *gorm.DB {
 	return db.Model(mo).Where(mo).Updates(MyOption{
 		Value: newValue,

backend/service/service.go

@@ -0,0 +1,19 @@
+package service
+
+var (
+	instance *service
+)
+
+type service struct {
+	Settings *settings
+}
+
+func init() {
+	instance = &service{
+		Settings: &settings{},
+	}
+}
+
+func Settings() *settings {
+	return instance.Settings
+}

backend/service/settings.go

@@ -0,0 +1,54 @@
+package service
+
+import (
+	"my-app/backend/app"
+	"my-app/backend/model"
+)
+
+type settings struct{}
+
+func (s *settings) SaveOption(name string, value string) error {
+	option := model.MyOption{
+		Name: name,
+	}
+	result := option.Update(value)
+	if result.Error == nil {
+		switch name {
+		case app.CfgDisplayLanguage:
+			app.App().Config().DisplayLanguage = value
+		case app.CfgColorTheme:
+			app.App().Config().ColorTheme = value
+		case app.CfgLogPath:
+			app.App().Config().LogPath = value
+		case app.CfgWebPortHttp:
+			app.App().Config().Web.PortHttp = value
+		case app.CfgWebPortHttps:
+			app.App().Config().Web.PortHttps = value
+		case app.CfgWebDirCerts:
+			app.App().Config().Web.DirCerts = value
+		}
+	}
+	return result.Error
+}
+
+func (s *settings) GetOption(name string) string {
+	switch name {
+	case app.CfgDisplayLanguage:
+		return app.App().Config().DisplayLanguage
+	case app.CfgColorTheme:
+		return app.App().Config().ColorTheme
+	case app.CfgLogPath:
+		return app.App().Config().LogPath
+	case app.CfgWebPortHttp:
+		return app.App().Config().Web.PortHttp
+	case app.CfgWebPortHttps:
+		return app.App().Config().Web.PortHttps
+	case app.CfgWebDirCerts:
+		return app.App().Config().Web.DirCerts
+	}
+	return ""
+}
+
+func (s *settings) GetOptions() *app.Config {
+	return app.App().Config()
+}

backend/tray/listeners.go

@@ -4,7 +4,7 @@ import (
 	"fmt"
 	"my-app/backend/app"
 	"my-app/backend/pkg/i18n"
-	"my-app/backend/services"
+	"my-app/backend/service"
 	"my-app/backend/tray/menus"
 	"my-app/backend/web"
 
@@ -63,12 +63,11 @@ func (t *tray) displayLanguageListener() menus.DisplayLanguageListener {
 			t.colorTheme.SetLocale()
 			t.quit.SetLocale()
 
-			if err := services.SaveDisplayLanguageOption(locale.Lang.Code); err != nil {
+			if err := service.Settings().SaveOption(app.CfgDisplayLanguage, locale.Lang.Code); err != nil {
 				app.App().TrayLog().Fatalf("failed to update language option: %+v\n", err)
 			}
 
 			return true, func() {
-				app.App().Config().DisplayLanguage = lang
 				t.refreshTooltip()
 			}
 		},
@@ -88,14 +87,12 @@ func (t *tray) colorThemeListener() menus.ColorThemeListener {
 			}
 			runtime.EventsEmit(t.wailsCtx, "onColorThemeChanged", theme)
 
-			if err := services.SaveColorThemeOption(theme); err != nil {
+			if err := service.Settings().SaveOption(app.CfgColorTheme, theme); err != nil {
 				app.App().TrayLog().Fatalf("failed to update theme option: %+v\n", err)
 			}
 
 			return true, func() {
-				app.App().Config().ColorTheme = theme
 				t.refreshTooltip()
-				runtime.Show(t.wailsCtx)
 			}
 		},
 	}

diagrams/package.drawio

@@ -161,6 +161,16 @@
                         <mxPoint x="20" y="50" as="offset"/>
                     </mxGeometry>
                 </mxCell>
+                <mxCell id="81" value="service" style="shape=folder;fontStyle=1;tabWidth=80;tabHeight=30;tabPosition=left;html=1;boundedLbl=1;fontSize=14;" vertex="1" parent="1">
+                    <mxGeometry x="330" y="700" width="150" height="80" as="geometry"/>
+                </mxCell>
+                <mxCell id="82" value="&amp;lt;&amp;lt;import&amp;gt;&amp;gt;" style="html=1;endArrow=open;endSize=12;dashed=1;verticalAlign=bottom;jumpStyle=none;fontSize=14;" edge="1" parent="1" source="81" target="34">
+                    <mxGeometry x="-0.0909" width="160" relative="1" as="geometry">
+                        <mxPoint x="340" y="590" as="sourcePoint"/>
+                        <mxPoint x="340" y="660" as="targetPoint"/>
+                        <mxPoint x="1" as="offset"/>
+                    </mxGeometry>
+                </mxCell>
             </root>
         </mxGraphModel>
     </diagram>

frontend/packages/components/form/index.ts

@@ -0,0 +1,15 @@
+import type { App } from "vue";
+import Form from "./src/form.vue";
+import FormItem from "./src/form-item.vue";
+import FormGroup from "./src/form-group.vue";
+
+Form.install = (app: App) => {
+  app.component(Form.name, Form);
+  app.component(FormItem.name, FormItem);
+  app.component(FormGroup.name, FormGroup);
+};
+
+export default Form;
+export const MyForm = Form;
+export const MyFormItem = FormItem;
+export const MyFormGroup = FormGroup;

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

@@ -0,0 +1,57 @@
+<template>
+  <fieldset class="my-form-group" :style="style">
+    <legend class="my-form-group__legend">{{ props.legend }}</legend>
+    <slot></slot>
+  </fieldset>
+</template>
+
+<script setup lang="ts" name="MyFormGroup">
+import { computed, inject, StyleValue, withDefaults } from "vue";
+import { Size, SizeRef } from "../../types";
+
+const props = withDefaults(
+  defineProps<{
+    legend?: string;
+    size?: Size;
+    labelWidth?: string;
+  }>(),
+  {}
+);
+const formSize = inject<SizeRef>("my-form-size");
+
+const style = computed<StyleValue>(() => {
+  const size = props.size || formSize?.value;
+  let width = "--my-border-width";
+  let radius = "--my-border-radius";
+  let space = "--my-space";
+  switch (size) {
+    case "large":
+      width += "-lg";
+      radius += "-lg";
+      space += "-lg";
+      break;
+    case "small":
+      width += "-sm";
+      radius += "-sm";
+      space += "-sm";
+  }
+  return {
+    borderWidth: `var(${width})`,
+    borderRadius: `var(${radius})`,
+    padding: `var(${space}) calc(0.4em + var(${space})) calc(0.275em + var(${space}))`,
+    margin: `0 var(${width}) var(${space})`,
+  };
+});
+</script>
+
+<style lang="scss">
+.my-form-group {
+  border-style: solid;
+  border-color: var(--my-color-border-lighter);
+
+  &__legend {
+    font-size: var(--my-font-size-xs);
+    color: var(--my-color-text-secondary);
+  }
+}
+</style>

frontend/packages/components/form/src/form-item.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="my-form-item">
+    <label
+      class="my-form-item__label"
+      v-if="props.label"
+      :for="props.for"
+      :style="labelStyle"
+      >{{ props.label }}</label
+    >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="MyFormItem">
+import { computed, StyleValue, withDefaults } from "vue";
+import { LabelPosition } from "../../types";
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    for?: string;
+    labelPosition?: LabelPosition;
+    labelWidth?: string;
+  }>(),
+  {}
+);
+
+const labelStyle = computed<StyleValue>(() => {
+  const width = props.labelWidth;
+  return {
+    width,
+  };
+});
+</script>
+
+<style lang="scss">
+.my-form-item {
+  &:not(:last-child) {
+    margin-bottom: 0.5em;
+  }
+
+  &__label {
+    display: inline-block;
+  }
+}
+</style>

frontend/packages/components/form/src/form.vue

@@ -0,0 +1,32 @@
+<template>
+  <form class="my-form">
+    <slot></slot>
+  </form>
+</template>
+
+<script setup lang="ts" name="MyForm">
+import { onUpdated, provide, ref, withDefaults } from "vue";
+import { LabelPosition, LabelPositionRef, Size, SizeRef } from "../../types";
+
+const props = withDefaults(
+  defineProps<{
+    size?: Size;
+    labelPosition?: LabelPosition;
+    labelWidth?: string;
+  }>(),
+  {
+    size: "default",
+    labelPosition: "left",
+    labelWidth: "auto",
+  }
+);
+
+const formSize = ref<Size>(props.size);
+const formLabelPosition = ref<LabelPosition>(props.labelPosition);
+provide<SizeRef>("my-form-size", formSize);
+provide<LabelPositionRef>("my-form-label-position", formLabelPosition);
+onUpdated(() => {
+  formSize.value = props.size;
+  formLabelPosition.value = props.labelPosition;
+});
+</script>

frontend/packages/components/index.ts

@@ -2,3 +2,4 @@ export * from "./icon";
 export * from "./container";
 export * from "./link";
 export * from "./menu";
+export * from "./form";

frontend/packages/components/link/src/link.vue

@@ -28,15 +28,16 @@ const props = withDefaults(
     type: "default",
     underline: true,
     disabled: false,
-    href: "",
   }
 );
 const emit = defineEmits<{
   (event: "click", e: MouseEvent): void;
 }>();
 
 const href = computed(() => {
-  return props.disabled || !props.href ? undefined : props.href;
+  if (!props.disabled) {
+    return props.href || undefined;
+  }
 });
 
 const handleClick = (e: MouseEvent) => {