feat: add SVG graphics for grammar and polish features in FeaturesSection

2026-07-03 14:07:11 +02:00 · 2025-03-05 16:52:54 +08:00
parent ded201844e
commit b63480928e
3 changed files with 143 additions and 2 deletions
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="300" height="200" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 背景 -->
+  <rect width="300" height="200" rx="10" fill="#FFFFFF" />
+  
+  <!-- 顶部区域 -->
+  <g transform="translate(15, 15)">
+    <!-- AI标识 -->
+    <rect x="0" y="0" width="24" height="16" rx="3" fill="#EF4444"/>
+    <text x="12" y="11" font-family="Arial" font-size="8" font-weight="bold" fill="white" text-anchor="middle">AI</text>
+    
+    <!-- 标题 -->
+    <text x="30" y="11" font-family="Arial" font-size="10" font-weight="bold" fill="#333333">语法检查</text>
+    
+    <!-- 警告图标和问题数量 -->
+    <g transform="translate(120, 0)">
+      <circle cx="8" cy="8" r="8" fill="#FEF2F2" />
+      <text x="8" y="11" font-family="Arial" font-size="8" font-weight="bold" fill="#EF4444" text-anchor="middle">!</text>
+      <text x="22" y="11" font-family="Arial" font-size="8" font-weight="bold" fill="#EF4444">发现 2 个问题</text>
+    </g>
+  </g>
+  
+  <!-- 副标题 -->
+  <text x="15" y="40" font-family="Arial" font-size="8" fill="#666666">AI已检测到以下语法和拼写问题</text>
+  
+  <!-- 中间区域 - 语法检查结果 -->
+  <rect x="15" y="45" width="270" height="140" rx="6" fill="white" stroke="#E5E7EB" stroke-width="1" />
+  
+  <!-- 问题1 -->
+  <g transform="translate(25, 60)">
+    <!-- 警告图标 -->
+    <circle cx="6" cy="6" r="6" fill="#FEF2F2" />
+    <text x="6" y="9" font-family="Arial" font-size="7" font-weight="bold" fill="#EF4444" text-anchor="middle">!</text>
+    
+    <!-- 问题描述 -->
+    <text x="18" y="9" font-family="Arial" font-size="8" fill="#111827">应为"前端框架"，用词错误</text>
+    
+    <!-- 定位按钮 -->
+    <rect x="170" y="0" width="20" height="12" rx="2" fill="#F3F4F6" />
+    <text x="180" y="9" font-family="Arial" font-size="7" fill="#374151" text-anchor="middle">定位</text>
+  </g>
+  
+  
+  <!-- 建议修改1 -->
+  <g transform="translate(25, 90)">
+    <text x="18" y="0" font-family="Arial" font-size="7" fill="#6B7280">建议修改：</text>
+    <rect x="18" y="5" width="230" height="14" rx="2" fill="#F0FDF4" opacity="0.5" />
+    <text x="23" y="15" font-family="Arial" font-size="7" fill="#111827"><tspan fill="#16A34A">前端</tspan></text>
+  </g>
+  
+  <!-- 分隔线 -->
+  <line x1="25" y1="120" x2="275" y2="120" stroke="#F3F4F6" stroke-width="1" />
+  
+  <!-- 问题2 -->
+  <g transform="translate(25, 130)">
+    <!-- 警告图标 -->
+    <circle cx="6" cy="6" r="6" fill="#FEF2F2" />
+    <text x="6" y="9" font-family="Arial" font-size="7" font-weight="bold" fill="#EF4444" text-anchor="middle">!</text>
+    
+    <!-- 问题描述 -->
+    <text x="18" y="9" font-family="Arial" font-size="8" fill="#111827">应为"工程化工具"，错别字</text>
+    
+    <!-- 定位按钮 -->
+    <rect x="170" y="0" width="20" height="12" rx="2" fill="#F3F4F6" />
+    <text x="180" y="9" font-family="Arial" font-size="7" fill="#374151" text-anchor="middle">定位</text>
+  </g>
+  
+  
+  <!-- 建议修改2 -->
+  <g transform="translate(25, 160)">
+    <text x="18" y="0" font-family="Arial" font-size="7" fill="#6B7280">建议修改：</text>
+    <rect x="18" y="5" width="230" height="14" rx="2" fill="#F0FDF4" opacity="0.5" />
+    <text x="23" y="15" font-family="Arial" font-size="7" fill="#111827"><tspan fill="#16A34A">工程化</tspan></text>
+  </g>
+  
+</svg>
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="300" height="200" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 背景 -->
+  <rect width="300" height="200" rx="10" fill="#FFFFFF" />
+  
+  <!-- 顶部区域 -->
+  <g transform="translate(15, 15)">
+    <!-- AI标识 -->
+    <rect x="0" y="0" width="24" height="16" rx="3" fill="#3B82F6"/>
+    <text x="12" y="11" font-family="Arial" font-size="8" font-weight="bold" fill="white" text-anchor="middle">AI</text>
+    
+    <!-- 标题 -->
+    <text x="30" y="11" font-family="Arial" font-size="10" font-weight="bold" fill="#333333">智能润色</text>
+  </g>
+  
+  <!-- 副标题 -->
+  <text x="15" y="40" font-family="Arial" font-size="8" fill="#666666">AI已为您优化内容，提升表达力和专业度</text>
+  
+  <!-- 内容区域 -->
+  <g transform="translate(15, 50)">
+    <!-- 左侧：原始内容 -->
+    <g>
+      <text x="0" y="10" font-family="Arial" font-size="8" font-weight="bold" fill="#666666">• 原始内容</text>
+      
+      <rect x="0" y="15" width="125" height="110" rx="4" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="1"/>
+      
+      <!-- 原始内容文本 -->
+      <foreignObject x="5" y="20" width="115" height="100">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: Arial; font-size: 7px; color: #64748B; line-height: 1.5;">
+          <div style="margin-bottom: 5px;">我负责了一个前端监控项目。这个项目使用了Vue和Element UI。它可以监控错误和性能。我还加了一些第三方的工具。</div>
+          <div style="margin-bottom: 5px;">项目特点：</div>
+          <div>• 可以看到错误日志</div>
+          <div>• 有图表展示</div>
+          <div>• 支持报警功能</div>
+          <div>• 可以和其他系统集成</div>
+        </div>
+      </foreignObject>
+    </g>
+    
+    <!-- 中间箭头 -->
+    <g transform="translate(130, 60)">
+      <path d="M0 10H20" stroke="#3B82F6" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M15 5L20 10L15 15" stroke="#3B82F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    
+    <!-- 右侧：润色后内容 -->
+    <g transform="translate(155, 0)">
+      <text x="0" y="10" font-family="Arial" font-size="8" font-weight="bold" fill="#3B82F6">• 润色后的内容</text>
+      
+      <rect x="0" y="15" width="125" height="110" rx="4" fill="#EFF6FF" stroke="#BFDBFE" stroke-width="1"/>
+      
+      <!-- 润色后内容文本 -->
+      <foreignObject x="5" y="20" width="115" height="100">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: Arial; font-size: 7px; color: #1D4ED8; line-height: 1.5;">
+          <div style="margin-bottom: 5px;"><b>主导开发企业级前端监控解决方案</b>，基于Vue框架与Element UI组件库构建，实现了全面的错误追踪与性能分析功能，并成功整合多种第三方工具提升系统能力。</div>
+          <div style="margin-bottom: 5px;"><b>核心成果：</b></div>
+          <div>• <b>构建完整错误日志系统</b>，支持详细追踪与分析</div>
+          <div>• <b>设计直观数据可视化</b>，提供实时监控面板</div>
+          <div>• <b>实现智能告警机制</b>，支持多渠道通知</div>
+          <div>• <b>开发灵活API接口</b>，无缝对接企业现有系统</div>
+        </div>
+      </foreignObject>
+    </g>
+  </g>
+</svg>
@@ -13,11 +13,11 @@ const features = [
    items: [
      {
        title: "features.ai.item1",
-        image: "/features/polish.png",
+        image: "/features/svg/polish.svg",
      },
      {
        title: "features.ai.item2",
-        image: "/features/grammar.png",
+        image: "/features/svg/grammar.svg",
      },
    ],
  },