feat: 添加悬浮弹窗能力

src/components/Citation/CitationMark.js

@@ -0,0 +1,140 @@
+// src/components/Citation/CitationMark.js
+import React, { useState } from 'react';
+import { Popover, Typography, Space, Divider } from 'antd';
+import { FileTextOutlined, UserOutlined, CalendarOutlined } from '@ant-design/icons';
+
+const { Text } = Typography;
+
+/**
+ * 引用标记组件 - 显示上标引用【1】【2】【3】
+ * 支持悬浮（桌面）和点击（移动）两种交互方式
+ *
+ * @param {Object} props
+ * @param {number} props.citationId - 引用 ID（1, 2, 3...）
+ * @param {Object} props.citation - 引用数据对象
+ * @param {string} props.citation.author - 作者
+ * @param {string} props.citation.report_title - 报告标题
+ * @param {string} props.citation.declare_date - 发布日期
+ * @param {string} props.citation.sentences - 摘要片段
+ */
+const CitationMark = ({ citationId, citation }) => {
+    const [popoverVisible, setPopoverVisible] = useState(false);
+
+    // 如果没有引用数据，不渲染
+    if (!citation) {
+        return null;
+    }
+
+    // 引用卡片内容
+    const citationContent = (
+        <div style={{ maxWidth: 350, padding: '8px 4px' }}>
+            {/* 作者 */}
+            <Space align="start" style={{ marginBottom: 8 }}>
+                <UserOutlined style={{ color: '#1890ff', marginTop: 4 }} />
+                <div>
+                    <Text type="secondary" style={{ fontSize: 12 }}>作者</Text>
+                    <br />
+                    <Text strong style={{ fontSize: 13 }}>{citation.author}</Text>
+                </div>
+            </Space>
+
+            <Divider style={{ margin: '8px 0' }} />
+
+            {/* 报告标题 */}
+            <Space align="start" style={{ marginBottom: 8 }}>
+                <FileTextOutlined style={{ color: '#52c41a', marginTop: 4 }} />
+                <div>
+                    <Text type="secondary" style={{ fontSize: 12 }}>报告标题</Text>
+                    <br />
+                    <Text strong style={{ fontSize: 13 }}>{citation.report_title}</Text>
+                </div>
+            </Space>
+
+            <Divider style={{ margin: '8px 0' }} />
+
+            {/* 发布日期 */}
+            <Space align="start" style={{ marginBottom: 8 }}>
+                <CalendarOutlined style={{ color: '#faad14', marginTop: 4 }} />
+                <div>
+                    <Text type="secondary" style={{ fontSize: 12 }}>发布日期</Text>
+                    <br />
+                    <Text style={{ fontSize: 13 }}>{citation.declare_date}</Text>
+                </div>
+            </Space>
+
+            <Divider style={{ margin: '8px 0' }} />
+
+            {/* 摘要片段 */}
+            <div>
+                <Text type="secondary" style={{ fontSize: 12, display: 'block', marginBottom: 4 }}>
+                    摘要片段
+                </Text>
+                <Text
+                    style={{
+                        fontSize: 13,
+                        lineHeight: 1.6,
+                        display: 'block',
+                        color: '#595959'
+                    }}
+                >
+                    {citation.sentences}
+                </Text>
+            </div>
+        </div>
+    );
+
+    // 检测是否为移动设备
+    const isMobile = () => {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+            navigator.userAgent
+        );
+    };
+
+    // 移动端：仅点击触发
+    // 桌面端：悬浮 + 点击都触发
+    const triggerType = isMobile() ? 'click' : ['hover', 'click'];
+
+    return (
+        <Popover
+            content={citationContent}
+            title={`引用来源 [${citationId}]`}
+            trigger={triggerType}
+            placement="top"
+            overlayInnerStyle={{ maxWidth: 380 }}
+            open={popoverVisible}
+            onOpenChange={setPopoverVisible}
+        >
+            <sup
+                style={{
+                    display: 'inline-block',
+                    color: '#1890ff',
+                    fontWeight: 'bold',
+                    cursor: 'pointer',
+                    padding: '0 2px',
+                    fontSize: '0.85em',
+                    userSelect: 'none',
+                    transition: 'all 0.2s',
+                }}
+                onMouseEnter={(e) => {
+                    if (!isMobile()) {
+                        e.target.style.color = '#40a9ff';
+                        e.target.style.textDecoration = 'underline';
+                    }
+                }}
+                onMouseLeave={(e) => {
+                    if (!isMobile()) {
+                        e.target.style.color = '#1890ff';
+                        e.target.style.textDecoration = 'none';
+                    }
+                }}
+                onClick={() => {
+                    setPopoverVisible(!popoverVisible);
+                }}
+            >
+                【{citationId}】
+            </sup>
+        </Popover>
+    );
+};
+
+export default CitationMark;