初始版本

app/pages/products.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="mx-auto max-w-screen-xl px-4 py-12">
+    <a-typography-title :level="1" class="!mb-2">产品矩阵</a-typography-title>
+    <a-typography-paragraph class="!text-gray-600 !mb-8">
+      面向不同业务场景的可售卖产品，支持套餐化售卖、支付即开通、模板/插件加购与私有化交付。
+    </a-typography-paragraph>
+
+    <a-row :gutter="[16, 16]">
+      <a-col v-for="p in products" :key="p.title" :xs="24" :md="12" :lg="8">
+        <a-card :title="p.title">
+          <template #extra>
+            <a-tag v-if="p.recommend" color="green">推荐</a-tag>
+          </template>
+          <a-typography-paragraph class="!text-gray-600">
+            {{ p.desc }}
+          </a-typography-paragraph>
+          <div class="flex flex-wrap gap-2">
+            <a-tag v-for="t in p.tags" :key="t">{{ t }}</a-tag>
+          </div>
+          <div class="mt-5 flex justify-between items-center">
+            <a-tag color="green">{{ p.domain }}</a-tag>
+            <a-button type="primary" @click="go(p.adminUrl)">立即开通</a-button>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-card class="mt-10" :bordered="false" style="background: #f0f5ff">
+      <a-row :gutter="[16, 16]" align="middle">
+        <a-col :xs="24" :md="16">
+          <a-typography-title :level="3" class="!mb-1">需要上架你的专属产品？</a-typography-title>
+          <a-typography-paragraph class="!mb-0 !text-gray-600">
+            我们可基于平台能力为你定制产品组合、套餐定价、开通初始化与交付流程。
+          </a-typography-paragraph>
+        </a-col>
+        <a-col :xs="24" :md="8" class="flex md:justify-end">
+          <a-button type="primary" size="large" @click="go('/contact')">马上联系</a-button>
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePageSeo } from '@/composables/usePageSeo'
+import { productMatrix } from '@/config/products'
+
+usePageSeo({
+  title: '产品矩阵 - 套餐售卖 / 支付即开通 / 模板&插件加购',
+  description: '企业官网、电商、小程序等产品矩阵，支持套餐化售卖、支付即开通、模板/插件加购与私有化交付。',
+  path: '/products'
+})
+
+const go = (url?: string) => {
+  if (!url) return
+  if (/^https?:\/\//i.test(url)) {
+    if (import.meta.client) window.open(url, '_blank', 'noopener,noreferrer')
+    return
+  }
+  return navigateTo(url)
+}
+
+const products = productMatrix
+</script>