另注：

里面引用的图片需要自行存储至对应地址，页面跳转部分请确保已经存在对应页面

小程序组件可以访问以下网址：介绍 - Vant Weapp

.js文件：

Page({
  /**
   * 页面的初始数据
   * 用于定义页面中需要绑定的响应式数据
   */
  data: {
    // 页面数据可以在这里定义
    // 例如：userInfo: null, bannerList: [] 等
  },

  /**
   * 生命周期函数——监听页面加载
   * 页面初次加载时触发，一个页面只会调用一次
   * 适合在这里发起网络请求、获取页面参数等初始化操作
   * @param {Object} options - 页面跳转时传递的路径参数
   */
  onLoad: function(options) {
    // 页面加载时的逻辑
    console.log('页面加载完成');
  },

  /**
   * 生命周期函数——监听页面显示
   * 每次页面出现在屏幕上时都会触发（包括首次显示和从后台切回前台）
   * 适合在这里刷新页面数据或重新获取最新状态
   */
  onShow: function() {
    // 页面显示时的逻辑
    console.log('页面显示');
  },

  /**
   * 跳转到图像识别页面
   * 触发后先显示提示框，然后通过导航跳转到图像识别功能页
   */
  navigateToImageRecognition: function() {
    // 显示一个轻提示，告知用户即将进入对应功能
    wx.showToast({
      title: '进入图像识别',
      icon: 'success',   // 提示图标：成功样式
      duration: 1000     // 提示显示时长（毫秒）
    });
    
    // 保留当前页面，跳转到应用内的指定页面（不能跳转到 tabBar 页面）
    wx.navigateTo({
       url: '/pages/imagerecognition/imagerecognition'  // 图像识别页面路径
    });
  },

  /**
   * 跳转到语音识别页面
   * 触发后先显示提示框，然后通过导航跳转到语音识别功能页
   */
  navigateToSpeechRecognition: function() {
    wx.showToast({
      title: '进入语音识别',
      icon: 'success',
      duration: 1000
    });
    
    wx.navigateTo({
       url: '/pages/speechrecognition/speechrecognition'  // 语音识别页面路径
    });
  },

  /**
   * 跳转到文字识别页面
   * 触发后先显示提示框，然后通过导航跳转到文字/字符识别功能页
   */
  navigateToTextRecognition: function() {
    wx.showToast({
      title: '进入文字识别',
      icon: 'success',
      duration: 1000
    });
    
    wx.navigateTo({
       url: '/pages/characterrecognition/characterrecognition'  // 文字识别页面路径
    });
  },

  /**
   * 跳转到其他功能页面
   * 用于扩展更多工具或功能入口
   */
  navigateToOtherFunctions: function() {
    wx.showToast({
      title: '进入其他功能',
      icon: 'success',
      duration: 1000
    });
    
     wx.navigateTo({
       url: '/pages/other-functions/other-functions'  // 其他功能页面路径
    });
  },

  /**
   * 用户点击右上角分享时的自定义分享内容
   * 配置后，小程序右上角菜单中的“转发”按钮会使用这里定义的标题、路径和图片
   * @returns {Object} 分享配置对象
   */
  onShareAppMessage: function() {
    return {
      title: '智能识别工具',           // 分享标题（显示在聊天会话中）
      path: '/pages/index/index',      // 分享路径（点击后进入的页面）
      imageUrl: '/picture/首页.png'    // 分享卡片图片（本地或网络图片路径）
    };
  }
});

.json文件

{
  // ==================== 使用组件配置 ====================
  /**
   * usingComponents: 声明页面或组件需要引用的自定义组件
   * 键名：组件在模板中使用的标签名
   * 键值：组件对应的代码路径（相对路径或 npm 包路径）
   */
  "usingComponents": {
    // "van-button": 表示可以在 wxml 中使用 <van-button> 标签
    // "@vant/weapp/button/index": 引用 Vant Weapp 组件库中的 Button 按钮组件
    // @vant/weapp 是 npm 安装的 Vant 小程序组件库
    "van-button": "@vant/weapp/button/index"
  },

  // ==================== 导航栏配置 ====================
  /**
   * navigationBarTitleText: 导航栏标题文字
   * 显示在小程序页面顶部的导航栏中间位置
   */
  "navigationBarTitleText": "智能识别工具",

  /**
   * navigationBarBackgroundColor: 导航栏背景颜色
   * 接受十六进制颜色值（需带 # 号）
   * "#6495ED" 是一种柔和的矢车菊蓝色（CornflowerBlue）
   */
  "navigationBarBackgroundColor": "#6495ED",

  /**
   * navigationBarTextStyle: 导航栏标题颜色
   * 可选值： "white"（白色） 或 "black"（黑色）
   * 由于背景色是蓝色系，设置为白色可保证文字清晰可读
   */
  "navigationBarTextStyle": "white",

  // ==================== 页面背景配置 ====================
  /**
   * backgroundColor: 窗口背景色
   * 当页面内容未铺满屏幕时，下拉露出的背景颜色
   * 也影响某些下拉刷新动画的背景区域
   * "#ecf0f1" 是一种浅灰蓝色（冷色调，视觉舒适）
   */
  "backgroundColor": "#ecf0f1",

  /**
   * backgroundTextStyle: 下拉背景字体、loading 图的样式
   * 可选值： "dark"（深色文字/图标） 或 "light"（浅色文字/图标）
   * "dark" 适合浅色背景（如本配置中的 #ecf0f1），使下拉提示文字清晰可见
   */
  "backgroundTextStyle": "dark"
}

.wxml文件

<!-- 
  页面根容器
  使用 class="container" 用于样式控制，通常设置 padding、背景色等
-->
<view class="container">
  
  <!-- ==================== 顶部标题区域 ==================== -->
  <!-- 
    头部区域：包含主标题和副标题
    使用 flex 或 text-align 居中显示
  -->
  <view class="header">
    <!-- 主标题：显示应用名称 -->
    <text class="title">智能识别工具</text>
    <!-- 副标题：提示用户选择功能 -->
    <text class="subtitle">选择您需要的功能</text>
  </view>

  <!-- ==================== 功能模块网格区域 ==================== -->
  <!-- 
    网格容器：使用 CSS Grid 或 Flex 布局实现 2x2 或自适应网格
    展示四个功能入口卡片
  -->
  <view class="grid-container">
    
    <!-- 图像识别功能卡片 -->
    <!-- 
      grid-item：每个功能项的容器样式
      bindtap="navigateToImageRecognition"：绑定点击事件
      点击后跳转到图像识别页面（对应 JS 中的 navigateToImageRecognition 方法）
    -->
    <view class="grid-item" bindtap="navigateToImageRecognition">
      <!-- 图标容器：用于包裹图标图片，可控制圆角、背景、内边距等 -->
      <view class="icon-container">
        <!-- 
          image：显示功能图标
          src="/picture/首页.png"：图标路径（从项目根目录开始的绝对路径）
          mode="aspectFit"：图片缩放模式，保持宽高比完整显示图片
        -->
        <image class="icon" src="/picture/首页.png" mode="aspectFit"></image>
      </view>
      <!-- 功能标题：显示功能名称 -->
      <text class="grid-title">图像识别</text>
      <!-- 功能描述：简要说明功能用途 -->
      <text class="grid-desc">智能识别图片内容</text>
    </view>

    <!-- 语音识别功能卡片 -->
    <!-- 点击后跳转到语音识别页面 -->
    <view class="grid-item" bindtap="navigateToSpeechRecognition">
      <view class="icon-container">
        <!-- 图标：使用"我的"图标代表语音/音频相关功能 -->
        <image class="icon" src="/picture/我的.png" mode="aspectFit"></image>
      </view>
      <text class="grid-title">语音识别</text>
      <text class="grid-desc">语音转文字识别</text>
    </view>

    <!-- 文字识别功能卡片 -->
    <!-- 点击后跳转到文字识别页面 -->
    <view class="grid-item" bindtap="navigateToTextRecognition">
      <view class="icon-container">
        <!-- 图标：使用"新建日程"图标代表文字/文档相关功能 -->
        <image class="icon" src="/picture/新建日程.png" mode="aspectFit"></image>
      </view>
      <text class="grid-title">文字识别</text>
      <text class="grid-desc">文字提取</text>
    </view>

    <!-- 其他功能卡片 -->
    <!-- 点击后跳转到其他功能页面 -->
    <view class="grid-item" bindtap="navigateToOtherFunctions">
      <view class="icon-container">
        <!-- 图标：使用"月视图"图标代表更多/扩展功能 -->
        <image class="icon" src="/picture/月视图（2）.png" mode="aspectFit"></image>
      </view>
      <text class="grid-title">其他功能</text>
      <text class="grid-desc">更多实用工具</text>
    </view>
    
  </view>

  <!-- ==================== 底部说明区域 ==================== -->
  <!-- 
    底部区域：显示提示文字，引导用户操作
    通常固定在网格下方或页面底部
  -->
  <view class="footer">
    <!-- 提示文字：告诉用户如何开始使用 -->
    <text class="footer-text">选择上方功能开始使用</text>
  </view>
  
</view>

.wxss文件

.container {
  padding: 20rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 头部样式 */
.header {
  text-align: center;
  margin: 40rpx 0 60rpx 0;
  padding: 30rpx;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 20rpx;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* 网格容器 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30rpx;
  margin: 0 20rpx;
}

/* 网格项 */
.grid-item {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  text-align: center;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280rpx;
}

.grid-item:active {
  transform: translateY(5rpx);
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
}

/* 图标容器 */
.icon-container {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}

.icon {
  width: 60rpx;
  height: 60rpx;
}

/* 网格文字 */
.grid-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 15rpx;
  display: block;
}

.grid-desc {
  font-size: 24rpx;
  color: #7f8c8d;
  display: block;
}

/* 底部样式 */
.footer {
  text-align: center;
  margin-top: 80rpx;
  padding: 40rpx;
}

.footer-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.7);
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .grid-container {
    grid-template-columns: 1fr;
    gap: 20rpx;
  }
  
  .grid-item {
    min-height: 240rpx;
    padding: 30rpx 20rpx;
  }
}
请不要改变原代码，帮我添加详细注释

最终实现效果：