feat(components): 修改 SectionItem 组件支持 SVG 图标显示

主要变更：
- 将图标从 IconFont 组件改为 image 标签
- 支持本地 SVG 资源和远程 URL
- 添加默认的"文案"图标
- 优化 icon prop，支持可选传值
- 更新 onboarding 页面使用新组件

技术细节：
- 使用 import 导入本地 SVG 资源
- 通过 computed 属性判断本地/远程图标
- 保持原有背景色和圆角样式不变

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1769844240265" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5808" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M261.6 718.7h192.7c13.4 0 24.8 9.8 27.1 23.2 2.7 16 15.7 23.6 28.4 23 12.2 0.6 24.7-6.5 28.1-21.5 3.4-14.9 14.6-24.7 26.5-24.7h192.7c45.6 0 82.6-37.7 82.6-84.1V251.9c0-46.4-37-84.1-82.6-84.1H564.4c-21 0-39.8 8.7-54.2 22.5-15.2-14.4-35.1-22.5-55.9-22.5H261.6c-45.6 0-82.6 37.7-82.6 84.1v382.7c0 46.5 37 84.1 82.6 84.1z m275.3-500.3l220.2 5.5c15.2 0 27.5 12.6 27.5 28v382.7c0 15.5-12.3 28-27.5 28l-220.2-5.5c-9.3 0-18.3 1.7-26.7 4.8V243.8c3.1-14.9 14.3-25.4 26.7-25.4z m-302.8 33.5c0-15.5 12.3-28 27.5-28l221.1 0.3c12.9 0 23.7 9 26.7 21.1v422.2c-8.6-3-17.6-4.5-26.7-4.5l-221.1-0.3c-15.2 0-27.5-12.6-27.5-28V251.9z" p-id="5809" fill="#1296db"></path><path d="M893 308c-15.2 0-27.5 12.6-27.5 28v392.4c0 15.5-12.3 28-27.5 28H645.3c-29.5 0-56.8 16-71.5 42H443.3c-14.8-26-42-42-71.5-42H179c-15.2 0-27.5-12.6-27.5-28V336c0-15.5-12.3-28-27.5-28s-27.5 12.6-27.5 28v392.4c0 46.4 37 84.1 82.6 84.1h192.7c12.6 0 23.6 8.7 26.7 21 3.1 12.4 14.1 21.1 26.7 21.1h166.9c12.6 0 23.5-8.7 26.7-21.1 3.1-12.4 14.1-21 26.6-21H838c45.6 0 82.6-37.7 82.6-84.1V336c0-15.5-12.4-28-27.6-28z" p-id="5810" fill="#1296db"></path><path d="M302.9 442.5h97.3c15.2 0 27.5 7.1 27.5-8.4s-12.3-28-27.5-28h-97.3c-15.2 0-27.5 12.6-27.5 28 0 15.5 12.3 8.4 27.5 8.4zM302.9 339.5h97.3c15.2 0 27.5-2 27.5-17.5s-12.3-14-27.5-14h-97.3c-15.2 0-27.5-1.5-27.5 14s12.3 17.5 27.5 17.5z" p-id="5811" fill="#1296db"></path></svg>
\ No newline at end of file

+<!--
+ * @Date: 2026-01-30 20:12:45
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2026-01-31 15:21:37
+ * @FilePath: /manulife-weapp/src/components/SectionItem.vue
+ * @Description: 展示项目组件，包含图标、标题、副标题和右侧箭头
+-->
 <template>
 <template>
   <view class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleClick">
   <view class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleClick">
     <view class="flex items-center">
     <view class="flex items-center">
       <view class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
       <view class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
-        <IconFont :name="icon" class="text-blue-600" size="32" />
+        <image
+          :src="iconUrl"
+          class="w-[48rpx] h-[48rpx]"
+          mode="aspectFit"
+        />
       </view>
       </view>
       <view class="flex flex-col">
       <view class="flex flex-col">
         <text class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ title }}</text>
         <text class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ title }}</text>
         <text class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ subtitle }}</text>
         <text class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ subtitle }}</text>
       </view>
       </view>
     </view>
     </view>
-    <IconFont name="rectRight" class="text-gray-400" size="16" />
+    <IconFont name="rect-right" class="text-gray-400" size="16" />
   </view>
   </view>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import { computed } from 'vue'
 import IconFont from '@/components/IconFont.vue'
 import IconFont from '@/components/IconFont.vue'
+import defaultIcon from '@/assets/images/icon/文案.svg'
 
 
 /**
 /**
  * Section Item Component
  * Section Item Component
  * @description 单个展示项目组件，包含图标、标题、副标题和右侧箭头
  * @description 单个展示项目组件，包含图标、标题、副标题和右侧箭头
+ * @example
+ * <SectionItem
+ *   title="产品资料"
+ *   subtitle="查看全部产品资料"
+ * />
+ * <!-- 默认使用文案图标 -->
+ *
+ * <SectionItem
+ *   :icon="remoteIconUrl"
+ *   title="远程图标"
+ *   subtitle="从接口获取的图标"
+ * />
  */
  */
-defineProps({
+const props = defineProps({
   /**
   /**
-   * 图标名称（对应 IconFont 组件的 name）
-   * @example 'Edit', 'Check', 'Order'
+   * 图标
+   * - 不传或传空字符串：使用默认的"文案"图标
+   * - 传远程 URL（http/https 开头）：使用远程图片
+   * @example undefined, '', 'https://example.com/icon.png'
    */
    */
   icon: {
   icon: {
     type: String,
     type: String,
-    required: true
+    default: ''
   },
   },
   /**
   /**
    * 标题
    * 标题
@@ -52,6 +79,21 @@ defineProps({
   }
   }
 })
 })
 
 
+/**
+ * 计算图标 URL
+ * @description 判断是远程 URL 还是使用默认图标
+ * @returns {string} 图标的完整路径
+ */
+const iconUrl = computed(() => {
+  // 如果是远程 URL（http/https 开头），直接返回
+  if (props.icon && (props.icon.startsWith('http://') || props.icon.startsWith('https://'))) {
+    return props.icon
+  }
+
+  // 否则使用默认的本地 SVG 图标
+  return defaultIcon
+})
+
 const emit = defineEmits(['click'])
 const emit = defineEmits(['click'])
 
 
 /**
 /**

@@ -34,17 +34,17 @@ const sections = shallowRef([
     title: '入职前',
     title: '入职前',
     items: [
     items: [
       {
       {
-        icon: 'edit',
+        icon: '',
         title: '考试报名',
         title: '考试报名',
         subtitle: '报名参加代理人资格考试'
         subtitle: '报名参加代理人资格考试'
       },
       },
       {
       {
-        icon: 'find',
+        icon: '',
         title: '面试结果查询',
         title: '面试结果查询',
         subtitle: '查看面试状态和结果'
         subtitle: '查看面试状态和结果'
       },
       },
       {
       {
-        icon: 'order',
+        icon: '',
         title: '入职材料提交',
         title: '入职材料提交',
         subtitle: '上传入职所需证件和资料'
         subtitle: '上传入职所需证件和资料'
       }
       }
@@ -54,17 +54,17 @@ const sections = shallowRef([
     title: '入职中',
     title: '入职中',
     items: [
     items: [
       {
       {
-        icon: 'clock',
+        icon: '',
         title: '各个进度时间线表格',
         title: '各个进度时间线表格',
         subtitle: '查看入职流程关键节点'
         subtitle: '查看入职流程关键节点'
       },
       },
       {
       {
-        icon: 'checklist',
+        icon: '',
         title: '待办事项清单',
         title: '待办事项清单',
         subtitle: '你需要完成的任务列表'
         subtitle: '你需要完成的任务列表'
       },
       },
       {
       {
-        icon: 'check',
+        icon: '',
         title: '签署合同',
         title: '签署合同',
         subtitle: '电子合同在线签署'
         subtitle: '电子合同在线签署'
       }
       }
@@ -74,17 +74,17 @@ const sections = shallowRef([
     title: '入职后',
     title: '入职后',
     items: [
     items: [
       {
       {
-        icon: 'star',
+        icon: '',
         title: '新人培训',
         title: '新人培训',
         subtitle: '参加新人岗前培训课程'
         subtitle: '参加新人岗前培训课程'
       },
       },
       {
       {
-        icon: 'top',
+        icon: '',
         title: '业绩目标设定',
         title: '业绩目标设定',
         subtitle: '制定首月业绩目标'
         subtitle: '制定首月业绩目标'
       },
       },
       {
       {
-        icon: 'playCircleFill',
+        icon: '',
         title: '团队介绍',
         title: '团队介绍',
         subtitle: '了解你的团队和主管'
         subtitle: '了解你的团队和主管'
       }
       }