feat(ui): implement dynamic dropdown navigation and refactor project cards

Replaced the static navigation with a dynamic, internationalized dropdown menu powered by a new `useNavLinks` composable. The navigation items are now sourced from i18n files. The featured project cards on the homepage have been refactored to use the `<UPageCard>` component, and the content schema is updated with `spotlight` and `highlight` options for enhanced display.
2025-11-06 00:17:34 +08:00
parent 78bc2c34a0
commit 31a4103f9b
10 changed files with 276 additions and 108 deletions
--- a/app/composables/NavLinks.ts
+++ b/app/composables/NavLinks.ts
@@ -0,0 +1,85 @@
+// composables/useNavLinks.ts
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+export const useNavLinks = () => {
+  const { t } = useI18n();
+
+  const navLinks = computed<NavigationMenuItem[]>(() => [
+    {
+      label: t("common.header.services.label"),
+      icon: "mdi:briefcase-outline",
+      children: [
+        {
+          label: t("common.header.services.children.webDev.label"),
+          description: t("common.header.services.children.webDev.description"),
+          icon: "mdi:web",
+        },
+        {
+          label: t("common.header.services.children.softwareDev.label"),
+          description: t(
+            "common.header.services.children.softwareDev.description"
+          ),
+          icon: "mdi:tools",
+        },
+        {
+          label: t("common.header.services.children.eventVisual.label"),
+          description: t(
+            "common.header.services.children.eventVisual.description"
+          ),
+          icon: "mdi:monitor-dashboard",
+        },
+        {
+          label: t("common.header.services.children.lab.label"),
+          description: t("common.header.services.children.lab.description"),
+          icon: "mdi:test-tube-off",
+        },
+      ],
+    },
+    {
+      label: t("common.header.projects.label"),
+      icon: "mdi:lightbulb-group-outline",
+      children: [
+        {
+          label: t("common.header.projects.children.commercialWebsite.label"),
+          description: t(
+            "common.header.projects.children.commercialWebsite.description"
+          ),
+          icon: "mdi:web",
+        },
+        {
+          label: t("common.header.projects.children.gameDev.label"),
+          description: t("common.header.projects.children.gameDev.description"),
+          icon: "mdi:gamepad-variant-outline",
+        },
+        {
+          label: t("common.header.projects.children.tools.label"),
+          description: t("common.header.projects.children.tools.description"),
+          icon: "mdi:tools",
+        },
+        {
+          label: t("common.header.projects.children.special.label"),
+          description: t("common.header.projects.children.special.description"),
+          icon: "mdi:star",
+        },
+      ],
+    },
+    {
+      label: t("common.header.insights.label"),
+      icon: "mdi:brain",
+      children: [
+        {
+          label: t("common.header.insights.children.xiaomaiBlog.label"),
+          description: t(
+            "common.header.insights.children.xiaomaiBlog.description"
+          ),
+          icon: "mdi:pencil-outline",
+          to: "https://xiaomai.tootaio.com/",
+          type: "link",
+          target: "_blank",
+        },
+      ],
+    },
+  ]);
+
+  return navLinks;
+};