feat: Update database connection and error display settings

- Changed database connection credentials in footer.php for improved security.
- Disabled error display in ajax.inc.php to prevent sensitive information exposure.
- Added comprehensive design documentation for the news flow application.
- Implemented a modernized index.php layout with responsive design and enhanced user experience.
- Developed main.js for dynamic news loading, including infinite scroll and date filtering functionalities.
- Structured interaction.md to detail core interactive features of the application.
- Organized outline.md to clarify project structure and core functionalities.
- Populated mock-data.json with realistic news data for testing and development purposes.

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, '<br />');
+                    }
+                });
+                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 = `
+            <h2 class="text-lg font-semibold text-gray-900 title-font">
+                ${this.formatDisplayDate(date)}
+            </h2>
+            <div class="w-16 h-0.5 bg-blue-500 mt-2"></div>
+        `;
+        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 = `
+            <div class="flex items-start justify-between">
+                <div class="flex-1">
+                    <h3 class="text-base font-medium text-gray-900 title-font mb-2 hover:text-blue-600 transition-colors duration-200"
+                        onclick="toggleNewsContent('${newsId}')">
+                        ${news.news_title}
+                    </h3>
+                    <div class="flex items-center space-x-4 text-sm text-gray-500">
+                        <span class="flex items-center">
+                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
+                            </svg>
+                            ${this.formatDisplayDate(news.news_days)}
+                        </span>
+                        <span class="flex items-center">
+                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
+                            </svg>
+                            ${news.daily_sub_id + 1}
+                        </span>
+                    </div>
+                </div>
+                <div class="flex-shrink-0 ml-4">
+                    <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200" 
+                         id="arrow-${newsId}" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                    </svg>
+                </div>
+            </div>
+            <div id="content-${newsId}" class="news-content mt-4">
+                <div class="prose prose-sm max-w-none text-gray-700 body-font">
+                    <p>${news.news_improve}</p>
+                </div>
+            </div>
+        `;
+        
+        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 = `
+            <div class="flex items-center">
+                <svg class="w-5 h-5 text-red-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                </svg>
+                <span class="text-red-700">${message}</span>
+            </div>
+        `;
+        
+        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();
+});