diff --git a/html/footer.php b/html/footer.php index 4f53dab..d1bdf45 100644 --- a/html/footer.php +++ b/html/footer.php @@ -13,7 +13,7 @@ 1024px +- **布局适配**：不同屏幕尺寸下的最佳布局展示 +- **触摸优化**：移动端更大的点击区域和手势支持 + +### 微交互细节 +- **阴影效果**：卡片悬停时的微妙阴影提升 +- **颜色渐变**：按钮和链接的状态过渡 +- **图标使用**：简洁的线性图标，增强视觉引导 +- **状态反馈**：清晰的视觉状态变化，提升用户体验 \ No newline at end of file diff --git a/news/index.php b/news/index.php new file mode 100644 index 0000000..5ecc541 --- /dev/null +++ b/news/index.php @@ -0,0 +1,190 @@ + + + + + + 新闻联播 - 实时资讯 + + + + + + + +
+
+
+
+
+ + + +
+

新闻联播-新闻流

+
+
+ 实时资讯更新 +
+
+
+
+ + +
+ +
+
+
+ + + 至 + +
+ +
+
+ + +
+ +
+ + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/news/interaction.md b/news/interaction.md new file mode 100644 index 0000000..60b8f3f --- /dev/null +++ b/news/interaction.md @@ -0,0 +1,61 @@ +# 新闻流应用交互设计 + +## 核心交互功能 + +### 1. 新闻展示与展开 +- **初始状态**：显示新闻标题和日期，内容区域收起 +- **点击交互**：用户点击标题时，平滑展开显示完整新闻内容 +- **收起功能**：再次点击可收起内容，保持界面整洁 +- **视觉反馈**：展开/收起时有流畅的动画效果 + +### 2. 日期排序与分组 +- **默认排序**：按日期倒序排列（最新在前） +- **日期分组**：同一天的新闻在视觉上分组显示 +- **日期标识**：每个日期组有清晰的日期标题 +- **时间格式**：友好的日期显示格式（如"今天"、"昨天"、具体日期） + +### 3. 无限滚动加载 +- **触发机制**：用户滚动到页面底部时自动触发 +- **加载逻辑**：基于当前最早日期往前加载前一天的新闻 +- **加载状态**：显示加载指示器，避免重复请求 +- **错误处理**：加载失败时显示友好提示 + +### 4. 初始参数处理 +- **日期范围**：支持通过URL参数传递start_date和end_date +- **默认值**：如无参数，使用当前日期作为end_date，往前7天作为start_date +- **参数验证**：确保日期格式正确且在合理范围内 + +## 用户体验流程 + +### 首次访问 +1. 页面加载，显示初始日期范围内的新闻 +2. 新闻按日期倒序排列，内容收起 +3. 用户可以浏览标题，点击感兴趣的内容查看详情 + +### 浏览过程 +1. 用户向下滚动查看更多新闻 +2. 到达底部时自动加载前一天的新闻 +3. 新加载的内容追加到列表末尾 +4. 保持流畅的浏览体验 + +### 内容查看 +1. 点击新闻标题展开内容 +2. 内容区域平滑展开，显示完整文本 +3. 可以滚动阅读，再次点击收起 + +## 交互细节 + +### 视觉反馈 +- 悬停效果：鼠标悬停在标题上时显示视觉反馈 +- 加载动画：数据加载时显示优雅的加载指示器 +- 状态变化：展开/收起状态有清晰的视觉区分 + +### 响应式设计 +- 移动端优化：确保在小屏幕设备上良好显示 +- 触摸友好：按钮和交互区域足够大，便于触摸操作 +- 滚动流畅：优化滚动性能，避免卡顿 + +### 性能考虑 +- 懒加载：只加载可视区域附近的内容 +- 防抖处理：滚动事件添加防抖，避免频繁触发 +- 内存管理：及时清理不需要的DOM元素和事件监听器 \ No newline at end of file diff --git a/news/main.js b/news/main.js new file mode 100644 index 0000000..9a31843 --- /dev/null +++ b/news/main.js @@ -0,0 +1,498 @@ +class NewsApp { + constructor() { + this.newsContainer = document.getElementById('newsContainer'); + this.loadingIndicator = document.getElementById('loadingIndicator'); + this.endOfContent = document.getElementById('endOfContent'); + this.startDateInput = document.getElementById('startDate'); + this.endDateInput = document.getElementById('endDate'); + this.refreshBtn = document.getElementById('refreshBtn'); + + this.currentStartDate = null; + this.currentEndDate = null; + this.isLoading = false; + this.hasMoreNews = true; + this.allNews = new Map(); // 用于存储所有新闻数据 + + this.init(); + } + + init() { + this.setupEventListeners(); + this.initializeDates(); + this.loadInitialNews(); + this.setupInfiniteScroll(); + } + + setupEventListeners() { + // 刷新按钮点击事件 + this.refreshBtn.addEventListener('click', () => { + this.refreshNews(); + }); + + // 日期输入变化事件 + this.startDateInput.addEventListener('change', () => { + this.updateDateRange(); + }); + + this.endDateInput.addEventListener('change', () => { + this.updateDateRange(); + }); + } + + initializeDates() { + const today = new Date(); + const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000); + + // 设置默认日期范围（最近一周） + this.currentEndDate = this.formatDate(today); + this.currentStartDate = this.formatDate(weekAgo); + + this.startDateInput.value = this.currentStartDate; + this.endDateInput.value = this.currentEndDate; + } + + formatDate(date) { + return date.toISOString().split('T')[0]; + } + + updateDateRange() { + const newStartDate = this.startDateInput.value; + const newEndDate = this.endDateInput.value; + + if (newStartDate && newEndDate) { + if (new Date(newStartDate) > new Date(newEndDate)) { + alert('开始日期不能晚于结束日期'); + return; + } + + this.currentStartDate = newStartDate; + this.currentEndDate = newEndDate; + this.refreshNews(); + } + } + + async loadInitialNews() { + this.showLoading(true); + try { + const newsData = await this.fetchNews(this.currentStartDate, this.currentEndDate); + this.renderNews(newsData); + this.hasMoreNews = newsData.length > 0; + } catch (error) { + console.error('加载新闻失败:', error); + this.showError('加载新闻失败，请稍后重试'); + } finally { + this.showLoading(false); + } + } + + async refreshNews() { + this.allNews.clear(); + this.newsContainer.innerHTML = ''; + this.hasMoreNews = true; + this.endOfContent.classList.add('hidden'); + + await this.loadInitialNews(); + } + + async fetchNews(startDate, endDate) { + // 显示加载状态 + this.showLoading(true); + + try { + // 构建API URL - 请替换为您的实际API地址 + const apiUrl = `https://api.doorcome.cn/api/xwlbNews/?start_date=${startDate}&end_date=${endDate}`; + + console.log('Fetching news from:', apiUrl); // 调试日志 + + const response = await fetch(apiUrl, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + } + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const result = await response.json(); + console.log('API Response:', result); // 调试日志 + + // 根据您的API返回格式调整 + // 常见格式示例： + // 1. { "data": { "news": [...] } } + // 2. { "news": [...] } + // 3. [...] // 直接是数组 + + if (result.data && result.data.news) { + result.data.news.forEach(item => { + if (item.news_improve) { + item.news_improve = item.news_improve.replace(/\n/g, '
'); + } + }); + return result.data.news; + } else if (result.news) { + return result.news; + } else if (Array.isArray(result)) { + return result; + } else { + console.error('无法识别的API返回格式:', result); + return []; + } + + } catch (error) { + console.error('API调用失败:', error); + this.showError('网络请求失败，请检查网络连接'); + throw error; + } finally { + this.showLoading(false); + } + } + + renderNews(newsData) { + // 按日期分组并排序 + const groupedNews = this.groupNewsByDate(newsData); + + groupedNews.forEach((dayNews, date) => { + // 如果该日期的新闻已经渲染过，则跳过 + if (this.allNews.has(date)) { + return; + } + + this.allNews.set(date, dayNews); + + // 创建日期分组 + const dateGroup = this.createDateGroup(date, dayNews); + this.newsContainer.appendChild(dateGroup); + + // 添加淡入动画 + anime({ + targets: dateGroup, + opacity: [0, 1], + translateY: [20, 0], + duration: 600, + easing: 'easeOutQuart' + }); + }); + } + + groupNewsByDate(newsData) { + const grouped = new Map(); + + // 按日期分组 + newsData.forEach(news => { + const date = news.news_days; + if (!grouped.has(date)) { + grouped.set(date, []); + } + grouped.get(date).push(news); + }); + + // 按日期倒序排列 + const sortedGrouped = new Map(); + const sortedDates = Array.from(grouped.keys()).sort((a, b) => new Date(b) - new Date(a)); + + sortedDates.forEach(date => { + // 同一天的新闻按daily_sub_id排序 + const dayNews = grouped.get(date).sort((a, b) => a.daily_sub_id - b.daily_sub_id); + sortedGrouped.set(date, dayNews); + }); + + return sortedGrouped; + } + + createDateGroup(date, dayNews) { + const dateGroup = document.createElement('div'); + dateGroup.className = 'mb-8'; + + // 日期标题 + const dateHeader = document.createElement('div'); + dateHeader.className = 'mb-4'; + dateHeader.innerHTML = ` +

+ ${this.formatDisplayDate(date)} +

+
+ `; + dateGroup.appendChild(dateHeader); + + // 新闻列表 + const newsList = document.createElement('div'); + newsList.className = 'space-y-3'; + + dayNews.forEach((news, index) => { + const newsItem = this.createNewsItem(news, index); + newsList.appendChild(newsItem); + }); + + dateGroup.appendChild(newsList); + return dateGroup; + } + + createNewsItem(news, index) { + const newsItem = document.createElement('div'); + newsItem.className = 'news-card bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer'; + + const newsId = `news-${news.news_days}-${news.daily_sub_id}`; + + newsItem.innerHTML = ` +
+
+

+ ${news.news_title} +

+
+ + + + + ${this.formatDisplayDate(news.news_days)} + + + + + + ${news.daily_sub_id + 1} + +
+
+
+ + + +
+
+
+
+

${news.news_improve}

+
+
+ `; + + return newsItem; + } + + formatDisplayDate(dateStr) { + const date = new Date(dateStr); + const today = new Date(); + const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000); + + if (dateStr === this.formatDate(today)) { + return '今天'; + } else if (dateStr === this.formatDate(yesterday)) { + return '昨天'; + } else { + return date.toLocaleDateString('zh-CN', { + year: 'numeric', + month: 'long', + day: 'numeric', + weekday: 'long' + }); + } + } +/* + setupInfiniteScroll() { + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting && !this.isLoading && this.hasMoreNews) { + this.loadMoreNews(); + } + }); + }, { + rootMargin: '100px' + }); + + // 观察加载指示器 + observer.observe(this.loadingIndicator); + }*/ + + setupInfiniteScroll() { + const options = { + root: null, // 使用视口作为根 + rootMargin: '100px', // 提前100px开始加载 + threshold: 0.1 // 元素10%可见时触发 + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting && !this.isLoading && this.hasMoreNews) { + console.log('触发滚动加载'); // 调试日志 + this.loadMoreNews(); + } + }); + }, options); + + // 创建一个触发元素，确保它始终在页面底部 + const triggerElement = document.createElement('div'); + triggerElement.id = 'scrollTrigger'; + triggerElement.style.height = '1px'; + triggerElement.style.marginTop = '100px'; + document.body.appendChild(triggerElement); + + // 观察触发元素 + observer.observe(triggerElement); + + // 同时观察加载指示器 + observer.observe(this.loadingIndicator); +} +/* + async loadMoreNews() { + if (this.isLoading || !this.hasMoreNews) return; + + this.showLoading(true); + + try { + // 找到当前最早的日期 + const earliestDate = this.getEarliestDate(); + if (!earliestDate) { + this.hasMoreNews = false; + return; + } + + // 计算前一天的日期 + const prevDate = new Date(earliestDate); + prevDate.setDate(prevDate.getDate() - 1); + const prevDateStr = this.formatDate(prevDate); + + // 加载前一天的新闻 + const moreNews = await this.fetchNews(prevDateStr, prevDateStr); + + if (moreNews.length === 0) { + this.hasMoreNews = false; + this.endOfContent.classList.remove('hidden'); + } else { + this.renderNews(moreNews); + } + } catch (error) { + console.error('加载更多新闻失败:', error); + this.showError('加载更多新闻失败，请稍后重试'); + } finally { + this.showLoading(false); + } + } + */ + +async loadMoreNews() { + if (this.isLoading || !this.hasMoreNews) { + console.log('跳过加载：isLoading=', this.isLoading, 'hasMoreNews=', this.hasMoreNews); + return; + } + + console.log('开始加载更多新闻...'); + this.showLoading(true); + + try { + // 找到当前最早的日期 + const earliestDate = this.getEarliestDate(); + if (!earliestDate) { + console.log('没有找到最早日期'); + this.hasMoreNews = false; + return; + } + + // 计算前一天的日期 + const prevDate = new Date(earliestDate); + prevDate.setDate(prevDate.getDate() - 1); + const prevDateStr = this.formatDate(prevDate); + + console.log('加载日期:', prevDateStr); + + // 加载前一天的新闻 + const moreNews = await this.fetchNews(prevDateStr, prevDateStr); + + console.log('加载到新闻数量:', moreNews.length); + + if (moreNews.length === 0) { + this.hasMoreNews = false; + this.endOfContent.classList.remove('hidden'); + console.log('没有更多新闻了'); + } else { + this.renderNews(moreNews); + this.hasMoreNews = true; + } + } catch (error) { + console.error('加载更多新闻失败:', error); + this.showError('加载更多新闻失败，请稍后重试'); + } finally { + this.showLoading(false); + } +} + getEarliestDate() { + const dates = Array.from(this.allNews.keys()); + if (dates.length === 0) return null; + + return dates.sort((a, b) => new Date(a) - new Date(b))[0]; + } +/* + showLoading(show) { + this.isLoading = show; + if (show) { + this.loadingIndicator.classList.remove('hidden'); + } else { + this.loadingIndicator.classList.add('hidden'); + } + } + */ + showLoading(show) { + this.isLoading = show; + if (show) { + this.loadingIndicator.classList.remove('hidden'); + // 确保加载指示器可见 + this.loadingIndicator.style.display = 'flex'; + } else { + this.loadingIndicator.classList.add('hidden'); + this.loadingIndicator.style.display = 'none'; + } +} + + showError(message) { + const errorDiv = document.createElement('div'); + errorDiv.className = 'bg-red-50 border border-red-200 rounded-lg p-4 mb-4'; + errorDiv.innerHTML = ` +
+ + + + ${message} +
+ `; + + this.newsContainer.insertBefore(errorDiv, this.newsContainer.firstChild); + + // 3秒后自动移除错误提示 + setTimeout(() => { + if (errorDiv.parentNode) { + errorDiv.parentNode.removeChild(errorDiv); + } + }, 3000); + } + + delay(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); + } +} + +// 全局函数：切换新闻内容显示/隐藏 +window.toggleNewsContent = function(newsId) { + const contentElement = document.getElementById(`content-${newsId}`); + const arrowElement = document.getElementById(`arrow-${newsId}`); + + if (contentElement && arrowElement) { + const isExpanded = contentElement.classList.contains('expanded'); + + if (isExpanded) { + contentElement.classList.remove('expanded'); + arrowElement.style.transform = 'rotate(0deg)'; + } else { + contentElement.classList.add('expanded'); + arrowElement.style.transform = 'rotate(180deg)'; + } + } +}; + +// 初始化应用 +document.addEventListener('DOMContentLoaded', () => { + new NewsApp(); +}); \ No newline at end of file diff --git a/news/outline.md b/news/outline.md new file mode 100644 index 0000000..95e92ea --- /dev/null +++ b/news/outline.md @@ -0,0 +1,46 @@ +# 新闻流前端应用项目结构 + +## 项目概述 +创建一个现代化的新闻流阅读器，支持新闻标题展示、内容展开、按日期排序和无限滚动加载功能。 + +## 文件结构 +``` +/mnt/okcomputer/output/ +├── index.html # 主页面 +├── main.js # 主要JavaScript逻辑 +├── resources/ # 资源文件夹 +│ └── mock-data.json # 模拟API数据 +└── README.md # 项目说明 +``` + +## 核心功能模块 + +### 1. 主页面 (index.html) +- 响应式布局设计 +- 新闻列表容器 +- 加载状态指示器 +- 导航栏和页脚 + +### 2. JavaScript逻辑 (main.js) +- 新闻数据获取和渲染 +- 点击展开/收起功能 +- 无限滚动加载机制 +- 日期排序和格式化 +- 加载状态管理 + +### 3. 模拟数据 (mock-data.json) +- 符合API格式的测试数据 +- 包含多条新闻记录 +- 不同日期的新闻内容 + +## 技术栈 +- HTML5 + CSS3 + JavaScript (ES6+) +- Tailwind CSS (通过CDN) +- 现代浏览器API (Intersection Observer) + +## 设计特色 +- 简洁现代的界面设计 +- 流畅的动画效果 +- 响应式布局 +- 优雅的色彩搭配 +- 直观的用户交互 \ No newline at end of file diff --git a/news/resources/mock-data.json b/news/resources/mock-data.json new file mode 100644 index 0000000..f4d94fa --- /dev/null +++ b/news/resources/mock-data.json @@ -0,0 +1,102 @@ +{ + "status": "success", + "data": { + "news": [ + { + "news_days": "2024-10-13", + "daily_sub_id": 0, + "news_title": "科技创新推动经济发展新模式", + "news_improve": "近日，相关部门发布最新数据显示，我国科技创新能力持续提升，多项技术指标达到国际先进水平。专家分析认为，这得益于长期的技术积累和持续的研发投入，为经济社会发展注入了强劲动力。科技创新不仅推动了传统产业的转型升级，也催生了新兴产业的发展壮大。" + }, + { + "news_days": "2024-10-13", + "daily_sub_id": 1, + "news_title": "环保政策实施效果显著提升", + "news_improve": "根据最新统计报告，环保政策的实施取得了显著成效。空气质量改善、水质提升、绿化覆盖率增加等指标均呈现积极变化，表明生态文明建设正在稳步推进。各地政府积极响应国家号召，加大环保投入，推动绿色发展理念深入人心。" + }, + { + "news_days": "2024-10-13", + "daily_sub_id": 2, + "news_title": "教育改革深化促进学生全面发展", + "news_improve": "教育领域的改革不断深化，新的教学模式和评价体系逐步建立。学生的综合素质得到全面提升，创新能力和实践能力的培养受到更多重视，为未来发展奠定了坚实基础。教育公平性也得到进一步保障，城乡教育差距持续缩小。" + }, + { + "news_days": "2024-10-12", + "daily_sub_id": 0, + "news_title": "医疗卫生服务水平持续改善", + "news_improve": "医疗卫生服务体系持续完善，基层医疗服务能力显著增强。新的医疗技术和设备的应用，使得诊疗水平不断提高，人民群众的健康获得感明显增强。医疗保障覆盖面进一步扩大，看病难、看病贵问题得到有效缓解。" + }, + { + "news_days": "2024-10-12", + "daily_sub_id": 1, + "news_title": "文化传承与创新并重发展", + "news_improve": "文化传承与创新工作取得新进展，传统文化保护力度加大，同时新兴文化业态蓬勃发展。这种双轮驱动的发展模式，为文化繁荣注入了新的活力。文化产业成为经济增长的新亮点，文化软实力不断提升。" + }, + { + "news_days": "2024-10-11", + "daily_sub_id": 0, + "news_title": "基础设施建设稳步推进", + "news_improve": "基础设施建设保持稳步推进态势，交通、能源、通信等领域的重大项目相继完工。这些项目的建成投用，为区域协调发展和城乡一体化提供了有力支撑。现代化基础设施网络的完善，为经济社会发展奠定了坚实基础。" + }, + { + "news_days": "2024-10-11", + "daily_sub_id": 1, + "news_title": "国际合作交流日益频繁", + "news_improve": "国际交流合作日益频繁，多边合作机制不断完善。在贸易、投资、科技、文化等领域的合作不断深化，为我国参与全球治理积累了宝贵经验。开放合作的姿态赢得了国际社会的广泛认可和赞誉。" + }, + { + "news_days": "2024-10-10", + "daily_sub_id": 0, + "news_title": "数字经济蓬勃发展态势良好", + "news_improve": "数字经济发展势头良好，新技术、新业态、新模式不断涌现。传统产业数字化转型加速，新兴产业集群效应显现，为经济高质量发展提供了新动能。数字技术与实体经济深度融合，创新活力持续迸发。" + }, + { + "news_days": "2024-10-10", + "daily_sub_id": 1, + "news_title": "乡村振兴战略深入实施", + "news_improve": "乡村振兴战略深入实施，农业农村现代化水平不断提升。产业发展、基础设施建设、公共服务改善等方面都取得了积极进展，农民生活水平显著提高。城乡融合发展体制机制不断完善，乡村面貌焕然一新。" + }, + { + "news_days": "2024-10-09", + "daily_sub_id": 0, + "news_title": "城市治理现代化水平提升", + "news_improve": "城市治理现代化水平持续提升，智慧城市建设成效显著。城市管理更加精细化、智能化，市民的生活品质和满意度不断提高。科技创新在城市管理中的应用日益广泛，治理效能显著增强。" + }, + { + "news_days": "2024-10-09", + "daily_sub_id": 1, + "news_title": "科技创新成果转化率提高", + "news_improve": "科技创新成果转化率持续提高，产学研合作更加紧密。一批重大科技成果成功转化为现实生产力，为产业发展提供了强有力的技术支撑。创新生态体系不断完善，科技成果转化机制更加顺畅。" + }, + { + "news_days": "2024-10-08", + "daily_sub_id": 0, + "news_title": "绿色发展理念深入人心", + "news_improve": "绿色发展理念深入人心，生态文明建设成效显著。清洁能源使用比例不断提升，节能减排效果明显，环境质量持续改善。绿色生产方式和生活方式得到广泛推广，可持续发展能力不断增强。" + }, + { + "news_days": "2024-10-08", + "daily_sub_id": 1, + "news_title": "公共服务体系不断完善", + "news_improve": "公共服务体系不断完善，服务质量和效率显著提升。教育、医疗、养老、文化等公共服务资源配置更加合理，覆盖范围不断扩大。人民群众的获得感、幸福感、安全感不断增强。" + }, + { + "news_days": "2024-10-07", + "daily_sub_id": 0, + "news_title": "社会治理创新实践丰富", + "news_improve": "社会治理创新实践丰富多样，基层治理能力持续增强。多元主体参与的社会治理格局逐步形成，治理方式更加科学化、精细化。社会矛盾预防和化解机制不断完善，社会和谐稳定局面持续巩固。" + }, + { + "news_days": "2024-10-07", + "daily_sub_id": 1, + "news_title": "开放型经济新体制构建", + "news_improve": "开放型经济新体制构建取得重要进展，贸易投资自由化便利化水平不断提升。营商环境持续优化，外资吸引力显著增强。国际合作平台作用充分发挥，为我国经济发展注入了新的活力。" + } + ] + }, + "meta": { + "total": 15, + "start_date": "2024-10-07", + "end_date": "2024-10-13" + } +} \ No newline at end of file