【新春创造营】马年乡音送福 - 春节方言祝福转换器
项目简介
马年乡音送福 是一款纯前端实现的春节方言祝福转换器应用。它将传统的普通话春节祝福转换为全国各地的方言谐音版本，让祝福语瞬间充满"家乡味"。
核心亮点
-
6种主流方言：东北话、四川话、广东话（粤语）、上海话、河南话、陕西话 -
方言发音模拟：通过 Web Audio API 生成各地方言特色的音效 -
轻量无依赖：纯 HTML/CSS/JS 单文件，零外部依赖 -
地域文化科普：每种方言都配有实用词汇介绍 -
一键复制：支持快速复制分享，适配移动端和电脑端
使用到的 iFlow CLI 功能
在项目开发过程中，主要使用了以下 iFlow CLI 功能：
1. run_shell_command 命令
-
创建项目目录结构
-
文件验证和列表查看
2. write_file 功能
-
单文件应用的完整代码编写
-
实现 HTML/CSS/JS 一体化开发
页面预览
首页布局
┌─────────────────────────────────────────┐
│ 🐴 马年乡音送福 🐴 │
│ 春节方言祝福转换器 - 让祝福更有家乡味 │
├─────────────────────────────────────────┤
│ 🌍 选择方言 │ 🎯 祝福类型 │
│ ┌─────────┐ │ ┌─────────────────┐ │
│ │ 东北话 ▼│ │ 拜年 财运 平安 │ │
│ └─────────┘ │ 团圆 事业 │
│ └─────────────────┘ │
│ ✏️ 自定义祝福语（1-20字） │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ 🎉 转换为方言祝福 [按钮] │
│ │
│ [结果展示区] │
│ ┌─────────────────────────────┐ │
│ │ 🔊 播放 📋 复制 │ │
│ │ │ │
│ │ 新年快乐儿 │ │
│ │ （xīn nián kuài lè er） │ │
│ │ │ │
│ │ 原文：新年快乐 │ │
│ └─────────────────────────────┘ │
│ │
│ 📚 方言小科普 │
│ ┌─────────────────────────────┐ │
│ │ 东北话：东北地区通用方言... │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────────┘
方言选择展示
支持六种方言一键切换：
| 方言 | 特色标签 | 典型祝福 |
|------|---------|---------|
| 
四川话 | 巴适得板 | 新年快落 |
| 
东北话 | 贼啦好 | 新年快乐儿 |
| 
广东话 | 利是逗来 | 新年快乐 |
| 
上海话 | 阿拉侬 | 新年快乐 |
| 
河南话 | 中 | 新年可快乐 |
| 
陕西话 | 美滴很 | 新年快乐 |
设计特色
1. 地域色彩区分
每种方言都有独特的视觉风格：
-
东北话 - 蓝白色调 + 雪花图标
-
四川话 - 粉色调 + 熊猫元素
-
广东话 - 橙色调 + 繁体书法字体
-
上海话 - 绿色调 + 现代都市风格
-
河南话 - 金色调 + 古都元素
-
陕西话 - 棕色调 + 西北风情
2. 交互体验
-
流畅的 CSS 动画效果
-
按钮悬停反馈
-
Toast 提示系统
-
响应式布局适配
实现过程
第一步：项目架构设计
采用单文件 HTML 结构，将 CSS、JS、HTML 整合在一个文件中：
马年乡音送福/
└── index.html （完整应用）
第二步：方言数据设计
构建方言祝福映射数组：
const dialects = {
dongbei: {
name: '东北话',
blessings: {
newyear: [
{ original: '新年快乐', dialect: '新年快乐儿', pronunciation: '（xīn nián kuài lè er）' },
// ...
]
}
}
// ...其他方言
};
第三步：核心功能实现
-
方言切换系统 - 下拉选择 + 预设按钮双模式
-
祝福转换引擎 - 根据方言和类型匹配祝福语
-
音效播放 - Web Audio API 生成方言特色音效
-
剪贴板复制 - navigator.clipboard.writeText() 实现
第四步：UI 美化
-
春节红金配色方案
-
悬浮装饰元素（
） -
地域特色视觉区分
-
移动端响应式适配
使用指南
基础操作
-
选择方言 - 从下拉菜单或按钮选择目标方言
-
选择类型 - 拜年/财运/平安/团圆/事业五选一
-
输入祝福 - 可选自定义 1-20 字祝福语
-
点击转换 - 生成方言版本祝福
-
播放/复制 - 播放音效或一键复制
效果展示
东北话示例：
> 原文：万事如意
> 方言：万事顺遂儿
> 读音：（wàn shì shùn suì er）
四川话示例：
> 原文：恭喜发财
> 方言：恭喜发财
> 读音：（gōng xǐ fā cái）
技术要点总结
| 技术点 | 应用场景 |
|--------|---------|
| CSS Flex/Grid | 页面布局 |
| CSS Animation | 悬浮动效 |
| Web Audio API | 音效生成 |
| Clipboard API | 一键复制 |
| 响应式设计 | 移动适配 |
| 方言数据映射 | 祝福转换 |
体验链接
项目特色总结
马年乡音送福是一款兼具文化传承和创意互动的小应用。它：
展现中国方言文化的丰富多彩
提供便捷的祝福语转换工具
带有趣味性和传播性的互动设计
轻量级、无依赖、易于分享
适合春节期间的社交祝福场景
马年乡音送福 - 让祝福跨越千里，温暖人心
项目介绍
多方言支持：支持东北话、四川话、广东话（粤语）、上海话、河南话、陕西话
自定义输入：用户可输入 1-20 字的自定义祝福语
一键复制：方便分享到社交媒体
更新日志