feat: add SystemSettingsLayout layout component

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/components/base/menu/RoutesMenu.tsx

@@ -54,7 +54,7 @@ const VRoutesMenu = defineComponent({
                   icon: () => renderIcon(item.icon),
                 }}
                 onSelect={handleSelect}
-                active={route.path === item.path}
+                active={openIds.value.includes(item.path)}
               />
             )}
           </>

src/layouts/BasicLayout.vue

@@ -31,7 +31,8 @@
       </div>
     </aside>
     <main class="content w-full overflow-y-auto mb-safe pb-12 md:pb-0">
-      <RouterView />
+      <slot v-if="$slots.default" />
+      <RouterView v-else />
     </main>
 
     <!--bottom nav bar-->

src/layouts/SystemSettingsLayout.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { BasicLayout } from "@/layouts";
+import { VPageHeader } from "@/components/base/header";
+import { VButton } from "@/components/base/button";
+import { VTabbar } from "@/components/base/tabs";
+import { IconSettings } from "@/core/icons";
+import { onMounted, ref } from "vue";
+import { useRouter, RouterView, useRoute } from "vue-router";
+
+const SettingTabs = [
+  {
+    id: "general",
+    label: "基本设置",
+    routeName: "GeneralSettings",
+  },
+  {
+    id: "notification",
+    label: "通知设置",
+    routeName: "NotificationSettings",
+  },
+];
+
+const activeTab = ref();
+
+const { name: currentRouteName } = useRoute();
+const router = useRouter();
+
+// set default active tab
+onMounted(() => {
+  const tab = SettingTabs.find((tab) => tab.routeName === currentRouteName);
+  activeTab.value = tab ? tab.id : SettingTabs[0].id;
+});
+
+const handleTabChange = (id: string) => {
+  const tab = SettingTabs.find((tab) => tab.id === id);
+  if (tab) {
+    router.push({ name: tab.routeName });
+  }
+};
+</script>
+<template>
+  <BasicLayout>
+    <VPageHeader title="设置">
+      <template #icon>
+        <IconSettings class="self-center mr-2" />
+      </template>
+      <template #actions>
+        <VButton type="secondary">安装</VButton>
+      </template>
+    </VPageHeader>
+
+    <div class="p-4">
+      <VTabbar
+        v-model:active-id="activeTab"
+        :items="SettingTabs"
+        @change="handleTabChange"
+        type="outline"
+      ></VTabbar>
+
+      <div>
+        <RouterView></RouterView>
+      </div>
+    </div>
+  </BasicLayout>
+</template>

src/layouts/index.ts

@@ -1,2 +1,3 @@
 export { default as BlankLayout } from "./BlankLayout.vue";
 export { default as BasicLayout } from "./BasicLayout.vue";
+export { default as SystemSettingsLayout } from "./SystemSettingsLayout.vue";

src/router/menus.config.ts

@@ -96,7 +96,7 @@ export const menus: MenuGroupType[] = [
       },
       {
         name: "设置",
-        path: "/settings",
+        path: "/settings/general",
         icon: IconSettings,
       },
     ],

src/router/routes.config.ts

@@ -1,5 +1,5 @@
 import type { RouteRecordRaw } from "vue-router";
-import { BasicLayout, BlankLayout } from "@/layouts";
+import { BasicLayout, BlankLayout, SystemSettingsLayout } from "@/layouts";
 
 import Dashboard from "../views/dashboard/Dashboard.vue";
 
@@ -18,7 +18,8 @@ import Visual from "../views/interface/visual/Visual.vue";
 import PluginList from "../views/system/plugins/PluginList.vue";
 import UserList from "../views/system/users/UserList.vue";
 import Profile from "../views/system/users/Profile.vue";
-import Settings from "../views/system/settings/Settings.vue";
+import GeneralSettings from "../views/system/settings/GeneralSettings.vue";
+import NotificationSettings from "../views/system/settings/NotificationSettings.vue";
 
 export const routes: Array<RouteRecordRaw> = [
   {
@@ -167,12 +168,18 @@ export const routes: Array<RouteRecordRaw> = [
   },
   {
     path: "/settings",
-    component: BasicLayout,
+    component: SystemSettingsLayout,
+    redirect: "/settings/general",
     children: [
       {
-        path: "",
-        name: "Settings",
-        component: Settings,
+        path: "general",
+        name: "GeneralSettings",
+        component: GeneralSettings,
+      },
+      {
+        path: "notification",
+        name: "NotificationSettings",
+        component: NotificationSettings,
       },
     ],
   },

src/views/system/settings/GeneralSettings.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { VInput } from "@/components/base/input";
+import { VButton } from "@/components/base/button";
+</script>
+<template>
+  <form class="space-y-8 divide-y divide-gray-200">
+    <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+      <div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
+        <div
+          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+        >
+          <label
+            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+          >
+            站点地址
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <div class="max-w-lg flex shadow-sm">
+              <VInput modelValue="https://halo.run" />
+            </div>
+          </div>
+        </div>
+        <div
+          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+        >
+          <label
+            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+          >
+            站点标题
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <div class="max-w-lg flex shadow-sm">
+              <VInput modelValue="Halo" />
+            </div>
+          </div>
+        </div>
+        <div
+          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+        >
+          <label
+            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+          >
+            站点副标题
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <div class="max-w-lg flex shadow-sm">
+              <VInput modelValue="开源的现代化 CMS 应用" />
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+        >
+          <label
+            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+          >
+            Logo
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <div class="max-w-lg flex shadow-sm">
+              <VInput modelValue="https://halo.run/logo" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="pt-5">
+      <div class="flex justify-start">
+        <VButton type="secondary"> 保存</VButton>
+      </div>
+    </div>
+  </form>
+</template>

src/views/system/settings/NotificationSettings.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { VInput } from "@/components/base/input";
+import { VButton } from "@/components/base/button";
+</script>
+<template>
+  <form class="space-y-8 divide-y divide-gray-200">
+    <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+      <div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
+        <div
+          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+        >
+          <label
+            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+          >
+            站点地址
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <div class="max-w-lg flex shadow-sm">
+              <VInput modelValue="https://halo.run" />
+            </div>
+          </div>
+        </div>
+        <div
+          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+        >
+          <label
+            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+          >
+            站点标题
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <div class="max-w-lg flex shadow-sm">
+              <VInput modelValue="Halo" />
+            </div>
+          </div>
+        </div>
+        <div
+          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+        >
+          <label
+            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+          >
+            站点副标题
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <div class="max-w-lg flex shadow-sm">
+              <VInput modelValue="开源的现代化 CMS 应用" />
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+        >
+          <label
+            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+          >
+            Logo
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <div class="max-w-lg flex shadow-sm">
+              <VInput modelValue="https://halo.run/logo" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="pt-5">
+      <div class="flex justify-start">
+        <VButton type="secondary"> 保存</VButton>
+      </div>
+    </div>
+  </form>
+</template>

src/views/system/settings/Settings.vue

@@ -1 +0,0 @@
-<template>Settings</template>