feat: 添加主题管理功能，更新系统设置页面，优化用户体验

src/views/system-settings/theme.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { ThemeMode } from "@/composables/useTheme";
+import { useIonRouter } from "@ionic/vue";
+
+const { t } = useI18n();
+const { theme } = useTheme();
+
+const themes: { value: ThemeMode; label: string }[] = [
+  { value: "light", label: t("settings.themeLight") },
+  { value: "dark", label: t("settings.themeDark") },
+  { value: "auto", label: t("settings.themeAuto") },
+];
+
+function handleThemeChange(event: CustomEvent) {
+  const themeMode = event.detail.value as ThemeMode;
+  theme.value = themeMode;
+}
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ui-toolbar">
+        <ion-back-button slot="start" />
+        <ion-title>{{ t("settings.theme") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true" class="ion-padding">
+      <ion-list lines="full">
+        <ion-radio-group :value="theme" @ion-change="handleThemeChange">
+          <ion-item v-for="item in themes" :key="item.value">
+            <ion-radio :value="item.value">
+              <div class="theme-item">
+                <div class="font-semibold">
+                  {{ item.label }}
+                </div>
+              </div>
+            </ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped>
+@reference "tailwindcss";
+
+.theme-item {
+  @apply py-1;
+}
+
+ion-radio {
+  width: 100%;
+}
+</style>