Update components/ai/WorkAssistantPanel.tsx

components/ai/WorkAssistantPanel.tsx

@@ -1,7 +1,7 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { AIChatMessage, User } from '../../types';
-import { Bot, Send, Sparkles, Loader2, Image as ImageIcon, X, Trash2, Brain, ChevronDown, ChevronRight, Copy, Check } from 'lucide-react';
+import { Bot, Send, Sparkles, Loader2, Image as ImageIcon, X, Trash2, Brain, ChevronDown, ChevronRight, Copy, Check, FileText, Plus } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { compressImage } from '../../utils/mediaHelpers';
@@ -11,47 +11,55 @@ interface WorkAssistantPanelProps {
     currentUser: User | null;
 }
 
-// Pre-defined Roles
+// Optimized Roles based on user's requirements
 const ROLES = [
     { 
         id: 'editor', 
-        name: '公众号小编', 
+        name: '公众号图文精修', 
         icon: '📝', 
-        prompt: `你是一位专业的微信公众号小编。
-请根据用户提供的图片和描述撰写一篇图文并茂的文章。
-1. 风格：生动活泼、有感染力，适当使用 Emoji。
-2. 标题：提供3个吸引人的标题供选择。
-3. 图片排版：在文章中合适的位置插入图片占位符。格式必须为：**[图片N]** (例如：**[图片1]**, **[图片2]**)。请根据图片内容逻辑安排顺序，并标注是哪张图片。
-4. 结构：包含开头引导、正文内容、结尾互动。`
+        description: '自动优化文稿并插入图片占位符',
+        prompt: `你是一位拥有10年经验的学校公众号主编。你的任务是根据用户提供的草稿（或活动描述）以及上传的图片数量，重写并排版一篇高质量的公众号推文。
+
+### 核心任务
+1. **文案润色**：将文字修改为优雅、生动、富有教育情怀的风格（参考：初冬暖阳，万物含情）。
+2. **标题生成**：提供3个吸引人的标题。
+3. **图片排版（关键）**：
+   - 用户上传了 {{IMAGE_COUNT}} 张图片。
+   - 你必须将这 {{IMAGE_COUNT}} 张图片全部分配到文章的合适位置。
+   - **格式要求**：请在段落结束后，使用 **（图Start-图End）** 或 **（图N）** 的格式插入占位符。
+   - **智能分组**：不要一张张插入。请根据段落内容将相关图片分组。例如：
+     - 描写校园环境时，插入 （图1-图5）
+     - 描写大课间活动时，插入 （图6-图10）
+     - 描写讲座时，插入 （图11-图12）
+   - 请确保图片编号从1开始连续编号，不要遗漏，也不要超出用户上传的总数。
+
+### 输出风格示例
+...（正文内容）...
+...细致观摩校园文化建设的匠心设计。（图1-图5）
+
+...尽显校园的蓬勃生机。...让校长们在行走中感受优质校园的育人底蕴。（图6-图10）
+...`
     },
     { 
         id: 'host', 
-        name: '活动主持/策划', 
+        name: '活动主持/致辞', 
         icon: '🎤', 
+        description: '生成正式的活动主持词',
         prompt: `你是一位经验丰富的学校活动策划和主持人。
 协助老师撰写活动流程、主持稿或致辞。
 1. 风格：庄重、大气或热情（根据活动性质调整）。
-2. 内容：逻辑清晰，环节紧凑。
-3. 格式：标明【环节名称】、【时长预估】、【具体话术】。` 
-    },
-    { 
-        id: 'writer', 
-        name: '文案润色专家', 
-        icon: '✍️', 
-        prompt: `你是一位资深的文字编辑。
-请帮助老师优化、润色草稿或口语化的文字。
-1. 目标：使文字更加通顺、优雅、符合书面语规范。
-2. 修正：纠正错别字和语病。
-3. 提升：优化修辞，增强表现力，但保持原意不变。` 
+2. 内容：逻辑清晰，环节紧凑，串词自然过渡。
+3. 格式：标明【环节名称】、【具体话术】。` 
     },
     { 
         id: 'promoter', 
-        name: '宣传文案/朋友圈', 
+        name: '朋友圈/短文案', 
         icon: '📢', 
+        description: '生成短小精悍的宣传语',
         prompt: `你是一位擅长社交媒体传播的文案。
 请为学校活动撰写短小精悍的宣传语，适用于朋友圈、班级群或海报。
 1. 长度：200字以内。
-2. 重点：突出亮点，号召行动。
+2. 重点：突出亮点，号召行动，适当使用Emoji增加亲和力。
 3. 格式：分行排版，便于手机阅读。` 
     }
 ];
@@ -122,23 +130,23 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                 text: '', 
                 thought: '', 
                 timestamp: Date.now(),
-                images: base64Images // Pass images to AI message for rendering placeholders locally if needed, but actually we use user's images
+                // Pass user images to AI message so it can render the placeholders using the source images
+                images: base64Images 
             };
 
             setMessages(prev => [...prev, newUserMsg, newAiMsg]);
             
-            // Default expand thinking
             if (enableThinking) {
                 setIsThinkingExpanded(prev => ({ ...prev, [newAiMsgId]: true }));
             }
 
-            // Build history context (Simplified: just role context + recent messages)
-            const historyContext = messages.slice(-5).map(m => ({ role: m.role, text: m.text }));
+            // Inject Image Count into System Prompt
+            const dynamicSystemPrompt = selectedRole.prompt.replace('{{IMAGE_COUNT}}', String(base64Images.length));
 
             // Custom prompt logic for image indexing
             let finalPrompt = currentText;
             if (base64Images.length > 0) {
-                finalPrompt += `\n\n(附带了 ${base64Images.length} 张图片。在文章中插入时请使用 **[图片1]**, **[图片2]** 等占位符来对应第1、第2张图)`;
+                finalPrompt += `\n\n[系统提示] 用户上传了 ${base64Images.length} 张图片。请务必在文章中合理位置插入 （图1-图X） 格式的占位符。`;
             }
 
             const response = await fetch('/api/ai/chat', {
@@ -152,10 +160,10 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                 body: JSON.stringify({ 
                     text: finalPrompt, 
                     images: base64Images, 
-                    history: historyContext,
+                    history: [], // Work assistant usually doesn't need long history context to keep focus sharp
                     enableThinking,
-                    overrideSystemPrompt: selectedRole.prompt, // Inject specific role prompt
-                    disableAudio: true // No TTS for work assistant
+                    overrideSystemPrompt: dynamicSystemPrompt, 
+                    disableAudio: true 
                 })
             });
 
@@ -188,7 +196,6 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                                 aiThoughtAccumulated += data.content;
                                 setMessages(prev => prev.map(m => m.id === newAiMsgId ? { ...m, thought: aiThoughtAccumulated } : m));
                             } else if (data.type === 'text') {
-                                // Once text starts, collapse thinking
                                 if (aiTextAccumulated === '' && aiThoughtAccumulated !== '') {
                                     setIsThinkingExpanded(prev => ({ ...prev, [newAiMsgId]: false }));
                                 }
@@ -209,31 +216,69 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
         }
     };
 
-    // Custom Renderer for [图片N]
+    /**
+     * Advanced Text Renderer
+     * Detects (图N) or (图N-图M) patterns and renders image grids
+     */
     const renderContent = (text: string, sourceImages: string[] | undefined) => {
-        // Split by image placeholders: **[图片N]** or [图片N]
-        const parts = text.split(/(\*\*\[图片\d+\]\*\*|\[图片\d+\])/g);
-        
+        if (!sourceImages || sourceImages.length === 0) {
+            return <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>;
+        }
+
+        // Regex to catch: （图1） or （图1-图3） or (图1) ...
+        const splitRegex = /(（?图\d+(?:-图\d+)?）?)/g;
+        const parts = text.split(splitRegex);
+
         return (
             <div>
                 {parts.map((part, idx) => {
-                    const match = part.match(/\d+/);
-                    if ((part.startsWith('[图片') || part.startsWith('**[图片')) && match && sourceImages) {
-                        const imgIndex = parseInt(match[0]) - 1;
+                    // Check if part matches image placeholder pattern
+                    const rangeMatch = part.match(/图(\d+)-图(\d+)/); // Range: 图1-图5
+                    const singleMatch = part.match(/图(\d+)/); // Single: 图1
+
+                    if (rangeMatch) {
+                        const start = parseInt(rangeMatch[1]);
+                        const end = parseInt(rangeMatch[2]);
+                        const imagesToShow: string[] = [];
+                        
+                        for (let i = start; i <= end; i++) {
+                            if (sourceImages[i-1]) imagesToShow.push(sourceImages[i-1]);
+                        }
+
+                        if (imagesToShow.length > 0) {
+                            return (
+                                <div key={idx} className="my-4 bg-gray-50 p-2 rounded-lg border border-gray-100">
+                                    <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+                                        {imagesToShow.map((img, i) => (
+                                            <div key={i} className="relative aspect-[4/3] group">
+                                                <img src={`data:image/jpeg;base64,${img}`} className="w-full h-full object-cover rounded-md cursor-pointer hover:opacity-90 transition-opacity" title={`图 ${start+i}`}/>
+                                                <div className="absolute bottom-1 right-1 bg-black/60 text-white text-[10px] px-1.5 rounded">图 {start+i}</div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                    <div className="text-center text-xs text-gray-400 mt-2 font-mono">{part}</div>
+                                </div>
+                            );
+                        }
+                    } else if (singleMatch && !part.includes('-')) {
+                        // Single Image
+                        const imgIndex = parseInt(singleMatch[1]) - 1;
                         if (sourceImages[imgIndex]) {
                             return (
-                                <div key={idx} className="my-4">
+                                <div key={idx} className="my-4 flex flex-col items-center">
                                     <img 
                                         src={`data:image/jpeg;base64,${sourceImages[imgIndex]}`} 
-                                        className="max-w-full md:max-w-md rounded-lg shadow-sm border border-gray-200" 
+                                        className="max-w-full md:max-w-sm rounded-lg shadow-sm border border-gray-200" 
                                         alt={`Image ${imgIndex + 1}`} 
                                     />
-                                    <div className="text-center text-xs text-gray-400 mt-1">图 {imgIndex + 1}</div>
+                                    <div className="text-center text-xs text-gray-400 mt-1 font-mono">{part}</div>
                                 </div>
                             );
                         }
                     }
-                    return <ReactMarkdown key={idx} remarkPlugins={[remarkGfm]} components={{p: ({node, ...props}) => <p className="mb-2 last:mb-0" {...props}/>}}>{part}</ReactMarkdown>;
+
+                    // Standard text
+                    return <ReactMarkdown key={idx} remarkPlugins={[remarkGfm]} components={{p: ({node, ...props}) => <p className="mb-2 last:mb-0 inline" {...props}/>}}>{part}</ReactMarkdown>;
                 })}
             </div>
         );
@@ -246,21 +291,24 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
             {/* Toolbar */}
             <div className="bg-white px-6 py-3 border-b border-gray-200 flex flex-wrap gap-4 items-center justify-between shadow-sm shrink-0 z-20">
                 <div className="flex items-center gap-2">
-                    <span className="text-sm font-bold text-gray-700">工作场景:</span>
+                    <span className="text-sm font-bold text-gray-700">工作模式:</span>
                     <div className="relative group">
                         <button className="flex items-center gap-2 px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-lg text-sm font-bold border border-indigo-100 hover:bg-indigo-100 transition-colors">
                             <span>{selectedRole.icon} {selectedRole.name}</span>
                             <ChevronDown size={14}/>
                         </button>
-                        <div className="absolute top-full left-0 mt-1 w-56 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden hidden group-hover:block z-50">
+                        <div className="absolute top-full left-0 mt-1 w-64 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden hidden group-hover:block z-50">
                             {ROLES.map(role => (
                                 <button 
                                     key={role.id}
                                     onClick={() => setSelectedRole(role)}
-                                    className={`w-full text-left px-4 py-3 text-sm hover:bg-indigo-50 flex items-center gap-2 ${selectedRole.id === role.id ? 'bg-indigo-50 text-indigo-700 font-bold' : 'text-gray-700'}`}
+                                    className={`w-full text-left px-4 py-3 hover:bg-indigo-50 flex items-start gap-3 border-b border-gray-50 last:border-0 ${selectedRole.id === role.id ? 'bg-indigo-50' : ''}`}
                                 >
-                                    <span>{role.icon}</span>
-                                    <span>{role.name}</span>
+                                    <div className="text-xl mt-0.5">{role.icon}</div>
+                                    <div>
+                                        <div className={`text-sm font-bold ${selectedRole.id === role.id ? 'text-indigo-700' : 'text-gray-800'}`}>{role.name}</div>
+                                        <div className="text-xs text-gray-500 mt-0.5">{role.description}</div>
+                                    </div>
                                 </button>
                             ))}
                         </div>
@@ -268,7 +316,7 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                 </div>
 
                 <div className="flex items-center gap-4">
-                    <div className="flex items-center gap-2" title="仅支持部分高级模型 (如 Doubao Pro, Gemini Flash)">
+                    <div className="flex items-center gap-2" title="开启后AI会进行更深入的逻辑推演">
                         <span className="text-sm text-gray-600 font-medium flex items-center gap-1">
                             <Brain size={16} className={enableThinking ? "text-purple-600" : "text-gray-400"}/> 深度思考
                         </span>
@@ -277,7 +325,7 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                             <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-purple-600"></div>
                         </label>
                     </div>
-                    <button onClick={() => setMessages([])} className="text-gray-400 hover:text-red-500 p-2 rounded-full hover:bg-red-50 transition-colors">
+                    <button onClick={() => setMessages([])} className="text-gray-400 hover:text-red-500 p-2 rounded-full hover:bg-red-50 transition-colors" title="清空对话">
                         <Trash2 size={18}/>
                     </button>
                 </div>
@@ -287,32 +335,35 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
             <div className="flex-1 overflow-y-auto p-6 space-y-6 custom-scrollbar">
                 {messages.length === 0 && (
                     <div className="flex flex-col items-center justify-center h-full text-gray-400 opacity-60">
-                        <Bot size={48} className="mb-4"/>
-                        <p className="text-lg font-bold">我是你的{selectedRole.name}</p>
-                        <p className="text-sm">上传图片或输入要求，开始工作吧</p>
+                        <FileText size={48} className="mb-4 text-indigo-300"/>
+                        <p className="text-lg font-bold text-gray-600">我是你的{selectedRole.name}助理</p>
+                        <p className="text-sm mt-2 max-w-md text-center">
+                            请上传活动照片（支持批量）并输入简单的活动描述。<br/>
+                            我会为你生成图文并茂的文章，并自动排版图片位置。
+                        </p>
                     </div>
                 )}
                 
                 {messages.map((msg, index) => {
-                    // Find the user message immediately preceding this AI message to get source images for placeholders
-                    let sourceImages: string[] = [];
-                    if (msg.role === 'model') {
-                        // Look back for the connected user message (usually index - 1)
+                    // Logic to retrieve images from the AI message itself (passed during creation) 
+                    // OR from the preceding user message if it's a model response
+                    let sourceImages: string[] = msg.images || [];
+                    
+                    if (msg.role === 'model' && (!sourceImages || sourceImages.length === 0)) {
+                        // Fallback: look at previous user message
                         const prevMsg = messages[index - 1];
                         if (prevMsg && prevMsg.role === 'user' && prevMsg.images) {
                             sourceImages = prevMsg.images;
                         }
-                    } else if (msg.role === 'user' && msg.images) {
-                        sourceImages = msg.images;
                     }
 
                     return (
-                        <div key={msg.id} className={`flex gap-4 ${msg.role === 'user' ? 'flex-row-reverse' : ''} max-w-4xl mx-auto w-full`}>
+                        <div key={msg.id} className={`flex gap-4 ${msg.role === 'user' ? 'flex-row-reverse' : ''} max-w-5xl mx-auto w-full`}>
                             <div className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 shadow-sm ${msg.role === 'model' ? 'bg-white border border-indigo-100 text-indigo-600' : 'bg-blue-600 text-white'}`}>
                                 {msg.role === 'model' ? <Sparkles size={20}/> : <span className="font-bold text-xs">ME</span>}
                             </div>
                             
-                            <div className={`flex flex-col gap-2 max-w-[85%] ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
+                            <div className={`flex flex-col gap-2 max-w-[90%] ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
                                 {msg.role === 'model' && msg.thought && (
                                     <div className="w-full bg-purple-50 rounded-xl border border-purple-100 overflow-hidden mb-2">
                                         <button 
@@ -330,10 +381,10 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                                     </div>
                                 )}
 
-                                <div className={`p-4 rounded-2xl shadow-sm text-sm overflow-hidden relative group ${msg.role === 'user' ? 'bg-blue-600 text-white rounded-tr-none' : 'bg-white text-gray-800 border border-gray-100 rounded-tl-none'}`}>
-                                    {/* User Image Preview Grid */}
+                                <div className={`p-5 rounded-2xl shadow-sm text-sm overflow-hidden relative group w-full ${msg.role === 'user' ? 'bg-blue-600 text-white rounded-tr-none' : 'bg-white text-gray-800 border border-gray-100 rounded-tl-none'}`}>
+                                    {/* User Image Preview Grid (Only for user messages) */}
                                     {msg.role === 'user' && sourceImages.length > 0 && (
-                                        <div className="grid grid-cols-3 gap-2 mb-3">
+                                        <div className="grid grid-cols-4 gap-2 mb-3">
                                             {sourceImages.map((img, i) => (
                                                 <div key={i} className="relative aspect-square">
                                                     <img src={`data:image/jpeg;base64,${img}`} className="w-full h-full object-cover rounded-lg border border-white/20" />
@@ -353,7 +404,7 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                                         <button 
                                             onClick={() => handleCopy(msg.text || '')} 
                                             className="absolute top-2 right-2 p-1.5 text-gray-400 hover:text-blue-600 bg-white/80 backdrop-blur rounded-lg opacity-0 group-hover:opacity-100 transition-all shadow-sm border border-gray-100"
-                                            title="复制内容"
+                                            title="复制纯文本"
                                         >
                                             <Copy size={14}/>
                                         </button>
@@ -363,6 +414,14 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                         </div>
                     );
                 })}
+                {isProcessing && (
+                    <div className="flex justify-center py-4">
+                        <div className="bg-white px-4 py-2 rounded-full shadow-sm border border-indigo-100 flex items-center gap-2 text-indigo-600 text-sm animate-pulse">
+                            <Bot size={16}/>
+                            <span>正在撰写文案并排版图片...</span>
+                        </div>
+                    </div>
+                )}
                 <div ref={messagesEndRef} />
             </div>
 
@@ -371,28 +430,32 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                 <div className="max-w-4xl mx-auto flex flex-col gap-3">
                     {/* Image Preview */}
                     {selectedImages.length > 0 && (
-                        <div className="flex gap-2 overflow-x-auto pb-2 px-1">
+                        <div className="flex gap-2 overflow-x-auto pb-2 px-1 custom-scrollbar">
                             {selectedImages.map((file, idx) => (
                                 <div key={idx} className="relative w-16 h-16 shrink-0 group rounded-lg overflow-hidden border border-gray-200 shadow-sm">
                                     <img src={URL.createObjectURL(file)} className="w-full h-full object-cover" />
-                                    <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                                        <button onClick={() => setSelectedImages(prev => prev.filter((_, i) => i !== idx))} className="text-white hover:text-red-400"><X size={16}/></button>
+                                    <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer" onClick={() => setSelectedImages(prev => prev.filter((_, i) => i !== idx))}>
+                                        <X size={16} className="text-white"/>
                                     </div>
                                     <div className="absolute bottom-0 right-0 bg-blue-600 text-white text-[9px] px-1 rounded-tl">图{idx+1}</div>
                                 </div>
                             ))}
+                            <div className="w-16 h-16 shrink-0 rounded-lg border-2 border-dashed border-gray-300 flex flex-col items-center justify-center text-gray-400 cursor-pointer hover:border-indigo-400 hover:text-indigo-500 transition-colors" onClick={() => fileInputRef.current?.click()}>
+                                <Plus size={20}/>
+                                <span className="text-[9px]">添加</span>
+                            </div>
                         </div>
                     )}
 
-                    <div className="flex gap-2 items-end bg-gray-50 p-2 rounded-2xl border border-gray-200 focus-within:ring-2 focus-within:ring-indigo-100 focus-within:border-indigo-300 transition-all">
-                        <button onClick={() => fileInputRef.current?.click()} className="p-3 text-gray-500 hover:bg-white hover:text-indigo-600 rounded-xl transition-colors shrink-0" title="上传图片">
+                    <div className="flex gap-2 items-end bg-gray-50 p-2 rounded-2xl border border-gray-200 focus-within:ring-2 focus-within:ring-indigo-100 focus-within:border-indigo-300 transition-all shadow-inner">
+                        <button onClick={() => fileInputRef.current?.click()} className={`p-3 rounded-xl transition-colors shrink-0 ${selectedImages.length > 0 ? 'text-indigo-600 bg-indigo-50' : 'text-gray-500 hover:bg-white hover:text-indigo-600'}`} title="上传图片">
                             <ImageIcon size={22}/>
                         </button>
                         <input type="file" multiple accept="image/*" ref={fileInputRef} className="hidden" onChange={handleImageSelect} onClick={(e) => (e.currentTarget.value = '')} />
 
                         <textarea 
                             className="flex-1 bg-transparent border-none outline-none text-sm resize-none max-h-32 py-3 px-2"
-                            placeholder={`给${selectedRole.name}下达指令... (支持 Shift+Enter 换行)`}
+                            placeholder={selectedRole.id === 'editor' ? "请粘贴草稿文字或输入活动描述..." : `给${selectedRole.name}下达指令...`}
                             rows={1}
                             value={textInput}
                             onChange={e => setTextInput(e.target.value)}
@@ -407,8 +470,9 @@ export const WorkAssistantPanel: React.FC<WorkAssistantPanelProps> = ({ currentU
                             {isProcessing ? <Loader2 className="animate-spin" size={20}/> : <Send size={20}/>}
                         </button>
                     </div>
-                    <div className="text-center text-xs text-gray-400">
-                        * AI 生成内容仅供参考，请人工审核后使用
+                    <div className="flex justify-between text-xs text-gray-400 px-1">
+                        <span>* 支持 Shift+Enter 换行</span>
+                        <span>AI 生成内容仅供参考</span>
                     </div>
                 </div>
             </div>