template-10586/app/pages/index.vue

<template>
  <div>
    <section class="relative overflow-hidden bg-gradient-to-b from-gray-950 to-gray-900 text-white">
      <div class="pointer-events-none absolute left-1/2 top-[-140px] h-[420px] w-[900px] -translate-x-1/2 rounded-full bg-green-500/20 blur-3xl" />
      <div class="mx-auto max-w-screen-xl px-4 py-16 sm:py-24 relative">
        <a-tag color="orange" class="mb-6">v3.0 版本发布</a-tag>

        <a-typography-title :level="1" class="!text-white !mb-4">
          软件开发平台：SaaS + 私有化 + 模板/插件生态
        </a-typography-title>
        <a-typography-paragraph class="!text-gray-300 !text-lg !mb-8">
          面向企业官网、电商、小程序等业务场景，提供多租户架构与模块化能力；客户下单后自动创建租户、初始化模块与基础数据，实现“支付即开通”。
        </a-typography-paragraph>

        <a-space size="middle" wrap>
          <a-button type="primary" size="large" @click="navigateTo('/contact')">预约演示</a-button>
          <a-button size="large" @click="navigateTo('/flow')">查看开通流程</a-button>
          <a-button size="large" @click="navigateTo('/deploy')">私有化部署</a-button>
        </a-space>

        <a-row class="mt-10" :gutter="[16, 16]">
          <a-col :xs="12" :md="6">
            <a-statistic title="平台定位" value="SaaS" />
          </a-col>
          <a-col :xs="12" :md="6">
            <a-statistic title="交付模式" value="私有化" />
          </a-col>
          <a-col :xs="12" :md="6">
            <a-statistic title="能力" value="模板/插件" />
          </a-col>
          <a-col :xs="12" :md="6">
            <a-statistic title="开通" value="自动化" />
          </a-col>
        </a-row>
      </div>
    </section>

    <section class="mx-auto max-w-screen-xl px-4 py-14">
      <a-typography-title :level="2" class="!mb-2">核心能力</a-typography-title>
      <a-typography-paragraph class="!text-gray-500 !mb-8">
        用一套平台能力，覆盖产品售卖、交付开通、运营升级与生态变现。
      </a-typography-paragraph>

      <a-row :gutter="[16, 16]">
        <a-col v-for="item in capabilities" :key="item.title" :xs="24" :md="12" :lg="8">
          <a-card :title="item.title">
            <template #extra>
              <a-tag color="green">{{ item.badge }}</a-tag>
            </template>
            <a-typography-paragraph class="!mb-0 !text-gray-600">
              {{ item.desc }}
            </a-typography-paragraph>
          </a-card>
        </a-col>
      </a-row>
    </section>

    <section class="bg-gray-50">
      <div class="mx-auto max-w-screen-xl px-4 py-14">
        <a-row :gutter="[24, 24]">
          <a-col :xs="24" :lg="12">
            <a-typography-title :level="2" class="!mb-2">支付即开通</a-typography-title>
            <a-typography-paragraph class="!text-gray-600 !mb-6">
              客户选择产品并支付后，平台自动完成：创建租户、初始化模块、写入默认配置与基础数据、生成管理员账号并交付访问入口。
            </a-typography-paragraph>
            <a-button type="primary" @click="navigateTo('/flow')">查看全流程</a-button>
          </a-col>
          <a-col :xs="24" :lg="12">
            <a-card>
              <a-steps direction="vertical" :current="-1" size="small">
                <a-step title="选择产品/套餐" description="支持产品矩阵、模板/插件加购、增值项" />
                <a-step title="下单支付" description="支付成功触发开通任务编排" />
                <a-step title="创建租户" description="租户隔离、域名/应用信息绑定、管理员生成" />
                <a-step title="模块初始化" description="按所购产品加载模块与菜单权限，写入基础数据/示例数据" />
                <a-step title="交付上线" description="SaaS 直接可用；私有化交付镜像/部署文档/验收清单" />
              </a-steps>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </section>

    <section class="mx-auto max-w-screen-xl px-4 py-14">
      <a-typography-title :level="2" class="!mb-2">模板与插件生态</a-typography-title>
      <a-typography-paragraph class="!text-gray-500 !mb-8">
        通过模板加速交付，通过插件扩展能力；支持购买、授权、更新与版本管理。
      </a-typography-paragraph>

      <a-tabs>
        <a-tab-pane key="template" tab="模板">
          <a-row :gutter="[16, 16]">
            <a-col :xs="24" :md="12">
              <a-card title="行业模板">
                <a-typography-paragraph class="!mb-0 !text-gray-600">
                  按行业/场景提供成套页面与配置，支持一键套用、二次编辑与多版本管理。
                </a-typography-paragraph>
              </a-card>
            </a-col>
            <a-col :xs="24" :md="12">
              <a-card title="交付标准化">
                <a-typography-paragraph class="!mb-0 !text-gray-600">
                  模板与初始化脚本配套，让“开通后的默认站点”可直接验收。
                </a-typography-paragraph>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="plugin" tab="插件">
          <a-row :gutter="[16, 16]">
            <a-col :xs="24" :md="12">
              <a-card title="能力扩展">
                <a-typography-paragraph class="!mb-0 !text-gray-600">
                  支付、会员、营销、工单、数据统计等能力按需加购，随买随用。
                </a-typography-paragraph>
              </a-card>
            </a-col>
            <a-col :xs="24" :md="12">
              <a-card title="升级与授权">
                <a-typography-paragraph class="!mb-0 !text-gray-600">
                  支持版本升级、授权校验、到期续费与灰度发布。
                </a-typography-paragraph>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>

      <div class="mt-6">
        <a-button @click="navigateTo('/market')">了解模板/插件市场</a-button>
      </div>
    </section>

    <section class="bg-gray-950 text-white">
      <div class="mx-auto max-w-screen-xl px-4 py-12 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <div class="text-xl font-semibold">想快速搭建并交付一个可运营的产品？</div>
          <div class="mt-1 text-gray-300">预约演示，我们将按你的业务场景给出方案与报价。</div>
        </div>
        <a-space>
          <a-button size="large" @click="navigateTo('/products')">看产品矩阵</a-button>
          <a-button type="primary" size="large" @click="navigateTo('/contact')">马上联系</a-button>
        </a-space>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { usePageSeo } from '@/composables/usePageSeo'

usePageSeo({
  title: '软件开发平台 - SaaS / 私有化部署 / 模板&插件生态',
  description:
    '面向企业官网、电商、小程序等业务场景的 SaaS 开发平台，支持私有化部署与模板/插件购买；客户下单支付后自动创建租户并完成模块与数据初始化。'
})

const capabilities = [
  {
    title: 'SaaS 多租户平台',
    badge: '核心',
    desc: '租户隔离、组织与权限体系、配置中心与审计能力，为多业务线统一底座。'
  },
  {
    title: '私有化部署',
    badge: '可选',
    desc: '支持本地/专有云部署，提供部署文档、验收清单与升级策略，满足安全合规。'
  },
  {
    title: '模板市场',
    badge: '生态',
    desc: '行业模板一键套用，默认配置与初始化脚本配套，交付更标准、上线更快。'
  },
  {
    title: '插件市场',
    badge: '扩展',
    desc: '支付、会员、营销、工单等能力按需加购；支持授权、更新与版本管理。'
  },
  {
    title: '自动开通链路',
    badge: '交付',
    desc: '选品支付后自动创建租户、初始化模块/菜单/基础数据，并交付访问入口。'
  },
  {
    title: '模块化与可扩展',
    badge: '开发',
    desc: '支持按模块组合产品能力，插件化扩展点让二开与生态合作更高效。'
  }
]
</script>