refactor(config): simplify service definitions with factory functions

Refactored the service configuration to reduce code duplication and separate data from logic.

- Created a shared `useWhatsappMsgSender` composable to handle WhatsApp URL generation and opening.
- Introduced `createService` and `createPlan` helper functions to programmatically add button actions.
- This eliminates the need to manually define `onClick` handlers for every pricing plan, making the service data purely declarative and easier to maintain.

app/composables/whatsappMsgSender.ts

@@ -0,0 +1,18 @@
+import { createSharedComposable } from "@vueuse/core";
+
+const _useWhatsappMsgSender = () => {
+  // --- WhatsApp 自动消息逻辑 ---
+  const sendMessage = (message: string) => {
+    const text = encodeURIComponent(message);
+    const url = `https://api.whatsapp.com/send?phone=+601157753558&text=${text}`;
+    window.open(url, "_blank");
+  };
+
+  return {
+    sendMessage,
+  };
+};
+
+export const useWhatsappMsgSender = createSharedComposable(
+  _useWhatsappMsgSender
+);

app/config/web-dev-services.ts

@@ -4,42 +4,53 @@ interface Service extends TabsItem {
   plans: PricingPlanProps[];
 }
 
-// WhatsApp 消息生成函数
+const { sendMessage } = useWhatsappMsgSender();
+
 function generateWhatsAppMessage(
   service: string,
-  plan: string,
+  plan: PricingPlanProps
-  price: string,
-  description: string,
-  features: string[]
 ): string {
-  const featureList = features.slice(0, 3).join("、"); // 只展示前3个主要功能
+  const featureList = plan.features?.slice(0, 3).join("、");
-  return `您好！我对您的【${service}】服务中的【${plan}】方案感兴趣。
+  return `您好！我对您的【${service}】服务中的【${plan.title}】方案感兴趣。
 
 方案详情：
-💰 价格：${price}
+💰 价格：${plan.price}
-📋 描述：${description}
+📋 描述：${plan.description}
 ✨ 主要功能：${featureList}${
-    features.length > 3 ? `等${features.length}项功能` : ""
+    plan.features?.length ?? 0 > 3 ? `等${plan.features?.length}项功能` : ""
   }
 
 请提供更多详细信息，谢谢！`;
 }
 
-function sendWhatsAppMessage(message: string) {
+// --- 通用创建函数 ---
-  const text = encodeURIComponent(message);
+function createPlan(service: string, plan: PricingPlanProps): PricingPlanProps {
-  const url = `https://api.whatsapp.com/send?phone=+601157753558&text=${text}`;
+  return {
-  window.open(url, "_blank");
+    ...plan,
+    button: {
+      label: plan.button?.label || "立即咨询",
+      onClick: () => sendMessage(generateWhatsAppMessage(service, plan)),
+    },
+  };
 }
 
+function createService(service: Service): Service {
+  const serviceName = service.label ? service.label : "网页网站开发";
+  return {
+    ...service,
+    plans: service.plans.map((p) => createPlan(serviceName, p)),
+  };
+}
+
+// --- 数据配置（纯数据） ---
 export const services: Service[] = [
-  // --- Landing Page ---
+  createService({
-  {
     id: "landing-page",
     label: "Landing Page",
     icon: "lucide:mouse-pointer-click",
     plans: [
       {
-        title: "基础版 Landing Page",
+        title: "基础版",
         description: "适合个人、小型商家，快速上线单页展示网站。",
         price: "RM499 起",
         tagline: "含域名与服务器",
@@ -51,33 +62,14 @@ export const services: Service[] = [
           "Google Analytics 整合",
           "1 次免费修改",
           "7 日内交付",
-          "提供基础托管与域名配置",
         ],
-        button: {
-          label: "立即咨询",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "Landing Page",
-                "基础版 Landing Page",
-                "RM499 起",
-                "适合个人、小型商家，快速上线单页展示网站",
-                [
-                  "单页面结构（1-3 屏）",
-                  "响应式设计（手机 / 平板 / 桌面）",
-                  "基本图文排版",
-                  "联系表单或 WhatsApp 按钮",
-                  "Google Analytics 整合",
-                ]
-              )
-            ),
-        },
       },
       {
-        title: "标准版 Landing Page",
+        title: "标准版",
         description: "为品牌与创业项目打造高转化页面。",
         price: "RM1,499 起",
         tagline: "含域名与服务器",
+        highlight: true,
         features: [
           "多区块结构（4-6 屏）",
           "品牌定制风格与配色",
@@ -86,31 +78,11 @@ export const services: Service[] = [
           "整合追踪代码（GA / Pixel）",
           "2 次免费修改",
           "14 日内交付",
-          "域名与服务器配置完成交付",
         ],
-        highlight: true,
+        button: { label: "预约报价" },
-        button: {
-          label: "预约报价",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "Landing Page",
-                "标准版 Landing Page",
-                "RM1,499 起",
-                "为品牌与创业项目打造高转化页面",
-                [
-                  "多区块结构（4-6 屏）",
-                  "品牌定制风格与配色",
-                  "轻量动画与动效展示",
-                  "SEO 优化 + 加载性能优化",
-                  "整合追踪代码（GA / Pixel）",
-                ]
-              )
-            ),
-        },
       },
       {
-        title: "高级定制 Landing Page",
+        title: "高级定制",
         description: "为成熟品牌提供全面视觉与营销升级方案。",
         price: "RM2,999 起",
         features: [
@@ -119,34 +91,13 @@ export const services: Service[] = [
           "A/B 测试与转化优化",
           "营销工具整合（邮件、统计、CRM）",
           "多语言 / 动态内容支持",
-          "后续维护与性能报告",
-          "含首年域名与服务器部署",
         ],
-        button: {
+        button: { label: "预约定制方案" },
-          label: "预约定制方案",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "Landing Page",
-                "高级定制 Landing Page",
-                "RM2,999 起",
-                "为成熟品牌提供全面视觉与营销升级方案",
-                [
-                  "专属视觉设计与交互体验",
-                  "完整品牌风格系统",
-                  "A/B 测试与转化优化",
-                  "营销工具整合（邮件、统计、CRM）",
-                  "多语言 / 动态内容支持",
-                ]
-              )
-            ),
-        },
       },
     ],
-  },
+  }),
 
-  // --- Official Website ---
+  createService({
-  {
     id: "official-web",
     label: "Official Website",
     icon: "lucide:globe",
@@ -161,68 +112,24 @@ export const services: Service[] = [
           "响应式设计（桌面 / 平板 / 手机）",
           "基础 SEO 设置",
           "联系表单 + 地图 + 社交媒体链接",
-          "客户提供内容素材",
-          "1 次免费修改",
-          "基础性能优化",
-          "7-14 日交付周期",
         ],
-        button: {
-          label: "获取报价",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "Official Website",
-                "基础官网",
-                "RM4,999 起",
-                "为中小型企业建立专业在线形象",
-                [
-                  "最多 5 个页面（首页、关于、服务、联系等）",
-                  "响应式设计（桌面 / 平板 / 手机）",
-                  "基础 SEO 设置",
-                  "联系表单 + 地图 + 社交媒体链接",
-                  "客户提供内容素材",
-                ]
-              )
-            ),
-        },
       },
       {
         title: "标准官网",
         description: "适合品牌升级与内容扩展型企业。",
         price: "RM8,999 起",
         tagline: "含域名与服务器",
+        highlight: true,
         features: [
           "约 8-12 个页面（案例、博客、团队等）",
           "品牌定制风格 + UI/UX 优化",
-          "内容撰写协助（与客户协作）",
           "轻量 CMS 后台管理系统",
           "进阶 SEO 优化与性能加速",
-          "2 次免费修改",
-          "交付后 3 个月维护支持",
         ],
-        highlight: true,
+        button: { label: "预约标准方案" },
-        button: {
-          label: "预约标准方案",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "Official Website",
-                "标准官网",
-                "RM8,999 起",
-                "适合品牌升级与内容扩展型企业",
-                [
-                  "约 8-12 个页面（案例、博客、团队等）",
-                  "品牌定制风格 + UI/UX 优化",
-                  "内容撰写协助（与客户协作）",
-                  "轻量 CMS 后台管理系统",
-                  "进阶 SEO 优化与性能加速",
-                ]
-              )
-            ),
-        },
       },
       {
-        title: "企业定制官网",
+        title: "企业定制",
         description: "专属视觉、功能与交互体验整合。",
         price: "RM15,000 起",
         features: [
@@ -230,33 +137,13 @@ export const services: Service[] = [
           "多语言支持 / 客户登录模块",
           "API / 第三方系统整合",
           "增强安全与自动备份机制",
-          "1 年内维护与监测支持",
         ],
-        button: {
+        button: { label: "预约企业方案" },
-          label: "预约企业方案",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "Official Website",
-                "企业定制官网",
-                "RM15,000 起",
-                "专属视觉、功能与交互体验整合",
-                [
-                  "完全定制 UI / 动效设计",
-                  "多语言支持 / 客户登录模块",
-                  "API / 第三方系统整合",
-                  "增强安全与自动备份机制",
-                  "1 年内维护与监测支持",
-                ]
-              )
-            ),
-        },
       },
     ],
-  },
+  }),
 
-  // --- Web App / Tools ---
+  createService({
-  {
     id: "web-tools",
     label: "Web 工具 / 内部系统",
     icon: "lucide:cpu",
@@ -270,59 +157,20 @@ export const services: Service[] = [
           "数据处理 / 报表系统",
           "轻量 API 与后端支持",
           "导出功能（Excel / CSV / PDF）",
-          "可部署于 Web 或本地运行",
         ],
-        button: {
+        button: { label: "提交需求" },
-          label: "提交需求",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "Web 工具 / 内部系统",
-                "自动化工具开发",
-                "RM3,000 起",
-                "简化工作流程，提升效率的内部工具",
-                [
-                  "定制化前端逻辑与交互",
-                  "数据处理 / 报表系统",
-                  "轻量 API 与后端支持",
-                  "导出功能（Excel / CSV / PDF）",
-                  "可部署于 Web 或本地运行",
-                ]
-              )
-            ),
-        },
       },
       {
         title: "Web App 项目",
         description: "打造实用、可持续扩展的轻量 Web 应用。",
         price: "RM5,000 起",
+        highlight: true,
         features: [
           "完整 SPA 结构（Vue / Nuxt）",
-          "前后端整合（Node / Supabase / Firebase）",
           "用户系统 / 登录 / 权限控制",
           "API 整合与动态数据展示",
-          "上线部署 + 基础文档说明",
         ],
-        highlight: true,
+        button: { label: "预约开发" },
-        button: {
-          label: "预约开发",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "Web 工具 / 内部系统",
-                "Web App 项目",
-                "RM5,000 起",
-                "打造实用、可持续扩展的轻量 Web 应用",
-                [
-                  "完整 SPA 结构（Vue / Nuxt）",
-                  "前后端整合（Node / Supabase / Firebase）",
-                  "用户系统 / 登录 / 权限控制",
-                  "API 整合与动态数据展示",
-                  "上线部署 + 基础文档说明",
-                ]
-              )
-            ),
-        },
       },
       {
         title: "企业系统方案",
@@ -332,95 +180,40 @@ export const services: Service[] = [
           "多模块架构（CMS / ERP / Dashboard）",
           "API、数据库与外部服务整合",
           "专属后端与数据安全机制",
-          "持续技术支持与扩展维护",
         ],
-        button: {
+        button: { label: "申请合作" },
-          label: "申请合作",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "Web 工具 / 内部系统",
-                "企业系统方案",
-                "RM20,000+",
-                "大型模块化系统或跨平台整合项目",
-                [
-                  "多模块架构（CMS / ERP / Dashboard）",
-                  "API、数据库与外部服务整合",
-                  "专属后端与数据安全机制",
-                  "持续技术支持与扩展维护",
-                ]
-              )
-            ),
-        },
       },
     ],
-  },
+  }),
 
-  // --- Game / Interactive ---
+  createService({
-  {
     id: "game-dev",
     label: "游戏展示 / 交互项目",
     icon: "lucide:gamepad-2",
     plans: [
       {
-        title: "游戏展示页",
+        title: "展示页",
         description: "专为游戏作品打造的宣传与展示网站。",
         price: "RM1,999 起",
         tagline: "含域名与服务器",
+        highlight: true,
         features: [
           "游戏介绍与截图展示区",
           "视频 / 预告片嵌入",
-          "下载按钮 / 平台链接（Steam / itch.io）",
           "交互式 Canvas 动画或 WebGL 特效",
         ],
-        highlight: true,
+        button: { label: "预约展示开发" },
-        button: {
-          label: "预约展示开发",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "游戏展示 / 交互项目",
-                "游戏展示页",
-                "RM1,999 起",
-                "专为游戏作品打造的宣传与展示网站",
-                [
-                  "游戏介绍与截图展示区",
-                  "视频 / 预告片嵌入",
-                  "下载按钮 / 平台链接（Steam / itch.io）",
-                  "交互式 Canvas 动画或 WebGL 特效",
-                ]
-              )
-            ),
-        },
       },
       {
-        title: "互动式 Web Demo",
+        title: "互动式 Demo",
         description: "用于作品集、游戏原型或活动宣传。",
         price: "RM3,999 起",
         features: [
           "玩家交互逻辑（Canvas / WebGL / Three.js）",
           "音效与动画系统整合",
           "数据记录或排行榜系统",
-          "嵌入至官网或独立部署",
         ],
-        button: {
+        button: { label: "提交项目需求" },
-          label: "提交项目需求",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "游戏展示 / 交互项目",
-                "互动式 Web Demo",
-                "RM3,999 起",
-                "用于作品集、游戏原型或活动宣传",
-                [
-                  "玩家交互逻辑（Canvas / WebGL / Three.js）",
-                  "音效与动画系统整合",
-                  "数据记录或排行榜系统",
-                  "嵌入至官网或独立部署",
-                ]
-              )
-            ),
-        },
       },
       {
         title: "完整游戏项目",
@@ -431,28 +224,12 @@ export const services: Service[] = [
           "完整引擎与关卡系统",
           "发布至多平台（Web / 桌面 / 移动）",
         ],
-        button: {
+        button: { label: "咨询游戏项目" },
-          label: "咨询游戏项目",
-          onClick: () =>
-            sendWhatsAppMessage(
-              generateWhatsAppMessage(
-                "游戏展示 / 交互项目",
-                "完整游戏项目",
-                "价格面议",
-                "定制游戏系统开发与跨平台发布",
-                [
-                  "多人协作开发",
-                  "完整引擎与关卡系统",
-                  "发布至多平台（Web / 桌面 / 移动）",
-                ]
-              )
-            ),
-        },
       },
     ],
-  },
+  }),
 ];
 
 // --- 全局备注 ---
 export const note =
-  "所有方案均含基础域名与服务器部署（首年）。后续若工作室服务器负载过高，将协助迁移至更稳定的第三方服务器。";
+  "所有方案均含基础域名与服务器部署（首年）。若服务器负载过高，将协助迁移至更稳定的第三方环境。";