diff --git a/app/composables/whatsappMsgSender.ts b/app/composables/whatsappMsgSender.ts new file mode 100644 index 0000000..f462ed8 --- /dev/null +++ b/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 +); diff --git a/app/config/web-dev-services.ts b/app/config/web-dev-services.ts index da82e80..24ada80 100644 --- a/app/config/web-dev-services.ts +++ b/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, - price: string, - description: string, - features: string[] + plan: PricingPlanProps ): string { - const featureList = features.slice(0, 3).join("、"); // 只展示前3个主要功能 - return `您好!我对您的【${service}】服务中的【${plan}】方案感兴趣。 + const featureList = plan.features?.slice(0, 3).join("、"); + return `您好!我对您的【${service}】服务中的【${plan.title}】方案感兴趣。 方案详情: -💰 价格:${price} -📋 描述:${description} +💰 价格:${plan.price} +📋 描述:${plan.description} ✨ 主要功能:${featureList}${ - features.length > 3 ? `等${features.length}项功能` : "" + plan.features?.length ?? 0 > 3 ? `等${plan.features?.length}项功能` : "" } 请提供更多详细信息,谢谢!`; } -function sendWhatsAppMessage(message: string) { - const text = encodeURIComponent(message); - const url = `https://api.whatsapp.com/send?phone=+601157753558&text=${text}`; - window.open(url, "_blank"); +// --- 通用创建函数 --- +function createPlan(service: string, plan: PricingPlanProps): PricingPlanProps { + return { + ...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: "预约报价", - onClick: () => - sendWhatsAppMessage( - generateWhatsAppMessage( - "Landing Page", - "标准版 Landing Page", - "RM1,499 起", - "为品牌与创业项目打造高转化页面", - [ - "多区块结构(4-6 屏)", - "品牌定制风格与配色", - "轻量动画与动效展示", - "SEO 优化 + 加载性能优化", - "整合追踪代码(GA / Pixel)", - ] - ) - ), - }, + button: { label: "预约报价" }, }, { - title: "高级定制 Landing Page", + title: "高级定制", description: "为成熟品牌提供全面视觉与营销升级方案。", price: "RM2,999 起", features: [ @@ -119,34 +91,13 @@ export const services: Service[] = [ "A/B 测试与转化优化", "营销工具整合(邮件、统计、CRM)", "多语言 / 动态内容支持", - "后续维护与性能报告", - "含首年域名与服务器部署", ], - button: { - label: "预约定制方案", - onClick: () => - sendWhatsAppMessage( - generateWhatsAppMessage( - "Landing Page", - "高级定制 Landing Page", - "RM2,999 起", - "为成熟品牌提供全面视觉与营销升级方案", - [ - "专属视觉设计与交互体验", - "完整品牌风格系统", - "A/B 测试与转化优化", - "营销工具整合(邮件、统计、CRM)", - "多语言 / 动态内容支持", - ] - ) - ), - }, + button: { label: "预约定制方案" }, }, ], - }, + }), - // --- 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: "预约标准方案", - onClick: () => - sendWhatsAppMessage( - generateWhatsAppMessage( - "Official Website", - "标准官网", - "RM8,999 起", - "适合品牌升级与内容扩展型企业", - [ - "约 8-12 个页面(案例、博客、团队等)", - "品牌定制风格 + UI/UX 优化", - "内容撰写协助(与客户协作)", - "轻量 CMS 后台管理系统", - "进阶 SEO 优化与性能加速", - ] - ) - ), - }, + button: { label: "预约标准方案" }, }, { - title: "企业定制官网", + title: "企业定制", description: "专属视觉、功能与交互体验整合。", price: "RM15,000 起", features: [ @@ -230,33 +137,13 @@ export const services: Service[] = [ "多语言支持 / 客户登录模块", "API / 第三方系统整合", "增强安全与自动备份机制", - "1 年内维护与监测支持", ], - button: { - label: "预约企业方案", - onClick: () => - sendWhatsAppMessage( - generateWhatsAppMessage( - "Official Website", - "企业定制官网", - "RM15,000 起", - "专属视觉、功能与交互体验整合", - [ - "完全定制 UI / 动效设计", - "多语言支持 / 客户登录模块", - "API / 第三方系统整合", - "增强安全与自动备份机制", - "1 年内维护与监测支持", - ] - ) - ), - }, + button: { label: "预约企业方案" }, }, ], - }, + }), - // --- 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: { - label: "提交需求", - onClick: () => - sendWhatsAppMessage( - generateWhatsAppMessage( - "Web 工具 / 内部系统", - "自动化工具开发", - "RM3,000 起", - "简化工作流程,提升效率的内部工具", - [ - "定制化前端逻辑与交互", - "数据处理 / 报表系统", - "轻量 API 与后端支持", - "导出功能(Excel / CSV / PDF)", - "可部署于 Web 或本地运行", - ] - ) - ), - }, + button: { label: "提交需求" }, }, { title: "Web App 项目", description: "打造实用、可持续扩展的轻量 Web 应用。", price: "RM5,000 起", + highlight: true, features: [ "完整 SPA 结构(Vue / Nuxt)", - "前后端整合(Node / Supabase / Firebase)", "用户系统 / 登录 / 权限控制", "API 整合与动态数据展示", - "上线部署 + 基础文档说明", ], - highlight: true, - button: { - label: "预约开发", - onClick: () => - sendWhatsAppMessage( - generateWhatsAppMessage( - "Web 工具 / 内部系统", - "Web App 项目", - "RM5,000 起", - "打造实用、可持续扩展的轻量 Web 应用", - [ - "完整 SPA 结构(Vue / Nuxt)", - "前后端整合(Node / Supabase / Firebase)", - "用户系统 / 登录 / 权限控制", - "API 整合与动态数据展示", - "上线部署 + 基础文档说明", - ] - ) - ), - }, + button: { label: "预约开发" }, }, { title: "企业系统方案", @@ -332,95 +180,40 @@ export const services: Service[] = [ "多模块架构(CMS / ERP / Dashboard)", "API、数据库与外部服务整合", "专属后端与数据安全机制", - "持续技术支持与扩展维护", ], - button: { - label: "申请合作", - onClick: () => - sendWhatsAppMessage( - generateWhatsAppMessage( - "Web 工具 / 内部系统", - "企业系统方案", - "RM20,000+", - "大型模块化系统或跨平台整合项目", - [ - "多模块架构(CMS / ERP / Dashboard)", - "API、数据库与外部服务整合", - "专属后端与数据安全机制", - "持续技术支持与扩展维护", - ] - ) - ), - }, + button: { label: "申请合作" }, }, ], - }, + }), - // --- 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: "预约展示开发", - onClick: () => - sendWhatsAppMessage( - generateWhatsAppMessage( - "游戏展示 / 交互项目", - "游戏展示页", - "RM1,999 起", - "专为游戏作品打造的宣传与展示网站", - [ - "游戏介绍与截图展示区", - "视频 / 预告片嵌入", - "下载按钮 / 平台链接(Steam / itch.io)", - "交互式 Canvas 动画或 WebGL 特效", - ] - ) - ), - }, + button: { label: "预约展示开发" }, }, { - title: "互动式 Web Demo", + title: "互动式 Demo", description: "用于作品集、游戏原型或活动宣传。", price: "RM3,999 起", features: [ "玩家交互逻辑(Canvas / WebGL / Three.js)", "音效与动画系统整合", "数据记录或排行榜系统", - "嵌入至官网或独立部署", ], - button: { - label: "提交项目需求", - onClick: () => - sendWhatsAppMessage( - generateWhatsAppMessage( - "游戏展示 / 交互项目", - "互动式 Web Demo", - "RM3,999 起", - "用于作品集、游戏原型或活动宣传", - [ - "玩家交互逻辑(Canvas / WebGL / Three.js)", - "音效与动画系统整合", - "数据记录或排行榜系统", - "嵌入至官网或独立部署", - ] - ) - ), - }, + button: { label: "提交项目需求" }, }, { title: "完整游戏项目", @@ -431,28 +224,12 @@ export const services: Service[] = [ "完整引擎与关卡系统", "发布至多平台(Web / 桌面 / 移动)", ], - button: { - label: "咨询游戏项目", - onClick: () => - sendWhatsAppMessage( - generateWhatsAppMessage( - "游戏展示 / 交互项目", - "完整游戏项目", - "价格面议", - "定制游戏系统开发与跨平台发布", - [ - "多人协作开发", - "完整引擎与关卡系统", - "发布至多平台(Web / 桌面 / 移动)", - ] - ) - ), - }, + button: { label: "咨询游戏项目" }, }, ], - }, + }), ]; // --- 全局备注 --- export const note = - "所有方案均含基础域名与服务器部署(首年)。后续若工作室服务器负载过高,将协助迁移至更稳定的第三方服务器。"; + "所有方案均含基础域名与服务器部署(首年)。若服务器负载过高,将协助迁移至更稳定的第三方环境。";