feat(pages): add web development services page

This commit introduces a new page at `/webDev` to display web development services and pricing plans.

To support this, a new reusable composable `useLocalizedCollection` has been created to simplify fetching localized content from Nuxt
Content. The index page has been refactored to use this new composable.

- Adds `webDev.vue` page and corresponding `webDev.yml` content files for EN and ZH.
- Defines a Zod schema in `content.config.ts` for the new content type.
- Updates the navigation link to point to the new page.
This commit is contained in:
xiaomai
2025-11-06 09:02:50 +08:00
parent 31a4103f9b
commit 8cc04b7f59
7 changed files with 339 additions and 41 deletions

View File

@@ -0,0 +1,66 @@
// /composables/useLocalizedCollection.ts
import type { Collections } from "@nuxt/content";
export type UseLocalizedOptions = {
/** 默认 locale -> suffix 映射 */
localeMap?: Record<string, string>;
/** 回退 locale 的 suffix例如 'en' */
fallbackSuffix?: string;
/** 当找不到内容时是否抛错,默认 true */
throwOnMissing?: boolean;
/** useAsyncData 的 key 前缀(默认等于 baseName */
keyPrefix?: string;
};
function asCollectionKey(key: string) {
return key as keyof Collections;
}
/**
* 带类型安全的多语言内容加载器
* @example
* const { data: page } = await useLocalizedCollection('index')
*/
export function useLocalizedCollection<
B extends string, // 基础名称
>(baseName: B, opts: UseLocalizedOptions = {}) {
const { locale } = useI18n();
const localeMap = opts.localeMap ?? { en: "en", "zh-CN": "zh" };
const fallbackSuffix = opts.fallbackSuffix ?? "en";
const keyPrefix = opts.keyPrefix ?? baseName;
const throwOnMissing = opts.throwOnMissing ?? true;
// 🔥 自动推断对应集合类型
type LocalizedKey = keyof {
[K in keyof Collections as K extends `${B}_${string}` ? K : never]: any;
};
type Schema = Collections[LocalizedKey];
return useAsyncData<Schema | null>(
`${keyPrefix}-${locale.value}`,
async () => {
const suffix =
localeMap[locale.value] ?? locale.value.split("-")[0] ?? "en";
const key = asCollectionKey(`${baseName}_${suffix}`);
let content = (await queryCollection(key).first()) as Schema | null;
if (!content && suffix !== fallbackSuffix) {
const fallbackKey = asCollectionKey(`${baseName}_${fallbackSuffix}`);
content = (await queryCollection(fallbackKey).first()) as Schema | null;
}
return content;
},
{ watch: [locale] }
).then((res) => {
if (throwOnMissing && res && !res.data?.value) {
throw createError({
statusCode: 404,
statusMessage: `Page not found: ${baseName} for locale ${locale.value}`,
fatal: true,
});
}
return res;
});
}