ui(web): 对齐 #138 风格——用 Lucide/矢量图标替换表情与占位，增强空态/警告显示（ComparisonChart/Competition/AITraders/ConfigModal）

web/src/components/AITradersPage.tsx

@@ -7,7 +7,7 @@ import { t, type Language } from '../i18n/translations';
 import { getExchangeIcon } from './ExchangeIcons';
 import { getModelIcon } from './ModelIcons';
 import { TraderConfigModal } from './TraderConfigModal';
-import { Bot, Brain, Landmark, BarChart3, Trash2, Plus, Users } from 'lucide-react';
+import { Bot, Brain, Landmark, BarChart3, Trash2, Plus, Users, AlertTriangle } from 'lucide-react';
 
 // 获取友好的AI模型名称
 function getModelDisplayName(modelId: string): string {
@@ -1427,7 +1427,7 @@ function ExchangeConfigModal({
 
               <div className="p-4 rounded" style={{ background: 'rgba(240, 185, 11, 0.1)', border: '1px solid rgba(240, 185, 11, 0.2)' }}>
                 <div className="text-sm font-semibold mb-2" style={{ color: '#F0B90B' }}>
-                  ⚠️ {t('securityWarning', language)}
+                  <span className="inline-flex items-center gap-1"><AlertTriangle className="w-4 h-4" /> {t('securityWarning', language)}</span>
                 </div>
                 <div className="text-xs space-y-1" style={{ color: '#848E9C' }}>
                   <div>{t('exchangeConfigWarning1', language)}</div>

web/src/components/ComparisonChart.tsx

@@ -16,6 +16,7 @@ import type { CompetitionTraderData } from '../types';
 import { getTraderColor } from '../utils/traderColors';
 import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
+import { BarChart3 } from 'lucide-react';
 
 interface ComparisonChartProps {
   traders: CompetitionTraderData[];
@@ -136,7 +137,7 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
   if (combinedData.length === 0) {
     return (
       <div className="text-center py-16" style={{ color: '#848E9C' }}>
-        <div className="text-6xl mb-4 opacity-50">📊</div>
+        <BarChart3 className="w-12 h-12 mx-auto mb-4 opacity-60" />
         <div className="text-lg font-semibold mb-2">{t('noHistoricalData', language)}</div>
         <div className="text-sm">{t('dataWillAppear', language)}</div>
       </div>

web/src/components/CompetitionPage.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Trophy, Medal } from 'lucide-react';
 import useSWR from 'swr';
 import { api } from '../lib/api';
 import type { CompetitionData } from '../types';
@@ -74,11 +75,8 @@ export function CompetitionPage() {
       {/* Competition Header - 精简版 */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
-          <div className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl" style={{
+          <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'rgba(240, 185, 11, 0.15)', border: '1px solid rgba(240,185,11,0.3)' }}>
-            background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)',
+            <Trophy className="w-6 h-6" style={{ color: '#F0B90B' }} />
-            boxShadow: '0 4px 14px rgba(240, 185, 11, 0.4)'
-          }}>
-            🏆
           </div>
           <div>
             <h1 className="text-2xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
@@ -145,8 +143,8 @@ export function CompetitionPage() {
                   <div className="flex items-center justify-between">
                     {/* Rank & Name */}
                     <div className="flex items-center gap-3">
-                      <div className="text-2xl w-6">
+                      <div className="w-6 flex items-center justify-center">
-                        {index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉'}
+                        <Medal className="w-5 h-5" style={{ color: index === 0 ? '#F0B90B' : index === 1 ? '#C0C0C0' : '#CD7F32' }} />
                       </div>
                       <div>
                         <div className="font-bold text-sm" style={{ color: '#EAECEF' }}>{trader.trader_name}</div>

web/src/components/TraderConfigModal.tsx

@@ -453,7 +453,7 @@ export function TraderConfigModal({
                   className="w-4 h-4"
                 />
                 <label className="text-sm text-[#EAECEF]">覆盖默认提示词</label>
-                <span className="text-xs text-[#F0B90B]">⚠️ 启用后将完全替换默认策略</span>
+                <span className="text-xs text-[#F0B90B] inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" x2="12" y1="9" y2="13"/><line x1="12" x2="12.01" y1="17" y2="17"/></svg> 启用后将完全替换默认策略</span>
               </div>
               <div>
                 <label className="text-sm text-[#EAECEF] block mb-2">

web/src/components/landing/HowItWorksSection.tsx

@@ -56,8 +56,8 @@ export default function HowItWorksSection() {
           viewport={{ once: true }}
           whileHover={{ scale: 1.02 }}
         >
-          <div className='w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0' style={{ background: 'rgba(246, 70, 93, 0.2)' }}>
+          <div className='w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0' style={{ background: 'rgba(246, 70, 93, 0.2)', color: '#F6465D' }}>
-            <span className='text-xl'>⚠️</span>
+            <svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/><line x1='12' x2='12' y1='9' y2='13'/><line x1='12' x2='12.01' y1='17' y2='17'/></svg>
           </div>
           <div>
             <div className='font-semibold mb-2' style={{ color: '#F6465D' }}>
@@ -72,4 +72,3 @@ export default function HowItWorksSection() {
     </AnimatedSection>
   )
 }
-