1+ ---
2+ export interface Props {
3+ content: string ;
4+ }
5+
6+ const = Astro .props ;
7+
8+ // 如果没有内容，不渲染组件
9+ if (! content || content .trim () === ' '
10+ return null ;
11+ }
12+ ---
13+
14+ { content && (
15+ <div class = " ai-summary"
16+ <div class = " ai-title"
17+ <div class = " ai-title-left"
18+ <i >🤖</i >
19+ <span class = " ai-title-text" span >
20+ </div >
21+ <div class = " ai-tag" div >
22+ </div >
23+ <div class = " ai-explanation" data-content = { content } ></div >
24+ </div >
25+ )}
26+
27+ <script >
28+ // 检查当前页面路径是否包含 "posts"
29+ function isPostsPage() {
30+ return window.location.pathname.includes('/posts/');
31+ }
32+
33+ // 全局函数，用于初始化AI打字效果
34+ function initAITyping() {
35+ // 只在包含 "posts" 的页面才执行AI总结功能
36+ if (!isPostsPage()) {
37+ return;
38+ }
39+
40+ // 查找所有AI摘要容器
41+ const aiSummaryContainers = document.querySelectorAll('.ai-summary');
42+
43+ aiSummaryContainers.forEach(container => {
44+ const textElement = container.querySelector('.ai-explanation');
45+
46+ if (!textElement) {
47+ return;
48+ }
49+
50+ // 检查是否已经初始化过
51+ if (textElement.hasAttribute('data-initialized')) {
52+ return;
53+ }
54+
55+ const content = textElement.getAttribute('data-content');
56+ if (!content) {
57+ return;
58+ }
59+
60+ // 标记为已初始化
61+ textElement.setAttribute('data-initialized', 'true');
62+
63+ // 清空文本内容，准备打字效果
64+ textElement.textContent = '';
65+ textElement.classList.remove('typing-complete');
66+
67+ let index = 0;
68+ const typeSpeed = 30; // 打字速度（毫秒）
69+
70+ function typeWriter() {
71+ if (index < content.length) {
72+ textElement.textContent += content.charAt(index);
73+ index++;
74+ setTimeout(typeWriter, typeSpeed);
75+ } else {
76+ // 打字完成后隐藏光标（通过CSS控制）
77+ textElement.classList.add('typing-complete');
78+ }
79+ }
80+
81+ // 延迟开始打字效果
82+ setTimeout(typeWriter, 800);
83+ });
84+ }
85+
86+ // 页面加载完成时初始化
87+ function handlePageLoad() {
88+ setTimeout(initAITyping, 100);
89+ }
90+
91+ // 监听页面导航事件（适用于Astro的客户端路由）
92+ function setupNavigationListeners() {
93+ // DOMContentLoaded事件
94+ if (document.readyState === 'loading') {
95+ document.addEventListener('DOMContentLoaded', handlePageLoad);
96+ } else {
97+ handlePageLoad();
98+ }
99+
100+ // 监听Astro的页面导航事件
101+ document.addEventListener('astro:page-load', handlePageLoad);
102+
103+ // 监听浏览器的popstate事件（后退/前进按钮）
104+ window.addEventListener('popstate', handlePageLoad);
105+
106+ // 监听pushstate和replacestate事件
107+ const originalPushState = history.pushState;
108+ const originalReplaceState = history.replaceState;
109+
110+ history.pushState = function() {
111+ originalPushState.apply(history, arguments);
112+ setTimeout(handlePageLoad, 100);
113+ };
114+
115+ history.replaceState = function() {
116+ originalReplaceState.apply(history, arguments);
117+ setTimeout(handlePageLoad, 100);
118+ };
119+ }
120+
121+ // 立即设置监听器
122+ setupNavigationListeners();
123+ </script >
0 commit comments