Upload 4 files

app/templates/article.html

@@ -1,612 +1,612 @@
-{% extends "base.html" %}
-
-{% block title %}{{ article.title }} - Wisdom Hub{% endblock %}
-
-{% block extra_css %}
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
-<style>
-    /* 文章容器样式 */
-    .article-container {
-        max-width: 900px;
-        margin: 0 auto;
-        background: white;
-        border-radius: 20px;
-        box-shadow: 0 2px 12px rgba(99, 145, 197, 0.08);
-        border: 2px solid var(--light-blue);
-        padding: 2.5rem;
-    }
-
-    /* 文章头部样式 */
-    .article-header {
-        margin-bottom: 2.5rem;
-        padding-bottom: 1.5rem;
-        border-bottom: 1px solid var(--light-blue);
-    }
-
-    .article-title {
-        font-size: 2.5rem;
-        font-weight: 700;
-        color: var(--text-dark);
-        line-height: 1.3;
-        margin-bottom: 1rem;
-        background: linear-gradient(135deg, var(--primary-blue), var(--soft-purple));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }
-
-    .article-meta {
-        display: flex;
-        align-items: center;
-        gap: 1.5rem;
-        color: #64748B;
-    }
-
-    .meta-item {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-
-    .meta-item i {
-        color: var(--primary-blue);
-    }
-
-    /* AI 摘要样式 */
-    .article-summary {
-        background: var(--warm-cream);
-        border-radius: 16px;
-        padding: 1.5rem;
-        margin: 2rem 0;
-        position: relative;
-    }
-
-    .summary-label {
-        position: absolute;
-        top: -12px;
-        left: 16px;
-        background: var(--primary-blue);
-        color: white;
-        padding: 0.25rem 1rem;
-        border-radius: 20px;
-        font-size: 0.875rem;
-        font-weight: 500;
-    }
-
-    /* 文章内容样式 */
-    .article-content {
-        line-height: 1.8;
-        color: var(--text-dark);
-    }
-
-    .markdown-body {
-        font-size: 1.1rem;
-    }
-
-    .markdown-body h1,
-    .markdown-body h2,
-    .markdown-body h3 {
-        color: var(--primary-blue);
-        margin-top: 2em;
-        margin-bottom: 1em;
-        font-weight: 600;
-    }
-
-    .markdown-body p {
-        margin-bottom: 1.5em;
-    }
-
-    .markdown-body a {
-        color: var(--primary-blue);
-        text-decoration: none;
-        border-bottom: 1px dashed var(--light-blue);
-        transition: all 0.3s;
-    }
-
-    .markdown-body a:hover {
-        border-bottom-style: solid;
-        color: var(--soft-purple);
-    }
-
-    .markdown-body code {
-        background: #F8FAFC;
-        padding: 0.2em 0.4em;
-        border-radius: 4px;
-        font-size: 0.9em;
-        color: var(--primary-blue);
-    }
-
-    .markdown-body pre {
-        background: #F8FAFC;
-        border-radius: 12px;
-        padding: 1rem;
-        overflow-x: auto;
-        border: 1px solid var(--light-blue);
-    }
-
-    .markdown-body pre code {
-        background: none;
-        padding: 0;
-        color: inherit;
-    }
-
-    .markdown-body blockquote {
-        border-left: 4px solid var(--light-blue);
-        padding: 0.5rem 0 0.5rem 1rem;
-        margin: 1.5rem 0;
-        color: #64748B;
-        background: #F8FAFC;
-    }
-
-    .markdown-body img {
-        max-width: 100%;
-        border-radius: 12px;
-        margin: 1.5rem 0;
-    }
-
-    /* AI 聊天窗口样式 */
-    .chat-toggle {
-        position: fixed;
-        right: 2rem;
-        bottom: 2rem;
-        width: 56px;
-        height: 56px;
-        border-radius: 28px;
-        background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
-        color: white;
-        border: none;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 1.5rem;
-        box-shadow: 0 4px 12px rgba(99, 145, 197, 0.2);
-        transition: all 0.3s;
-        z-index: 998;
-    }
-
-    .chat-toggle:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(99, 145, 197, 0.3);
-    }
-
-    .chat-window {
-        position: fixed;
-        right: 2rem;
-        bottom: 2rem;
-        width: 380px;
-        height: 600px;
-        background: white;
-        border-radius: 20px;
-        box-shadow: 0 4px 20px rgba(99, 145, 197, 0.15);
-        display: flex;
-        flex-direction: column;
-        transform: scale(0);
-        opacity: 0;
-        transform-origin: bottom right;
-        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-        z-index: 999;
-        border: 1px solid var(--light-blue);
-    }
-
-    .chat-window.active {
-        transform: scale(1);
-        opacity: 1;
-    }
-
-    .chat-header {
-        padding: 1.25rem;
-        background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
-        color: white;
-        border-radius: 20px 20px 0 0;
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-    }
-
-    .chat-title {
-        font-weight: 600;
-        flex: 1;
-    }
-
-    .chat-close {
-        background: none;
-        border: none;
-        color: white;
-        cursor: pointer;
-        width: 32px;
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 16px;
-        transition: all 0.3s;
-    }
-
-    .chat-close:hover {
-        background: rgba(255, 255, 255, 0.2);
-    }
-
-    .chat-messages {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        width: 100%;
-    }
-
-    .chat-message {
-        max-width: 85%;
-        padding: 1rem;
-        border-radius: 16px;
-        line-height: 1.3;
-        animation: messageSlide 0.3s ease;
-        word-wrap: break-word;
-        overflow-wrap: break-word;
-        width: fit-content;
-    }
-    
-    .chat-message p {
-        margin: 0;
-        white-space: pre-wrap;
-    }
-    
-    .chat-message img,
-    .chat-message pre,
-    .chat-message code {
-        max-width: 100%;
-        overflow-x: hidden;
-    }
-    .chat-message.user {
-        background: var(--primary-blue);
-        color: white;
-        margin-left: auto;
-    }
-
-    .chat-message.assistant {
-        background: #7b85b8;
-        color: white;
-        margin-right: auto;
-    }
-
-    .chat-input-container {
-        padding: 1.25rem;
-        border-top: 1px solid var(--light-blue);
-    }
-
-    .chat-input-wrapper {
-        display: flex;
-        gap: 0.75rem;
-        align-items: flex-end;
-    }
-
-    .chat-input {
-        flex: 1;
-        min-height: 44px;
-        max-height: 120px;
-        padding: 0.75rem 1rem;
-        border: 2px solid var(--light-blue);
-        border-radius: 12px;
-        resize: none;
-        font-size: 1rem;
-        line-height: 1.5;
-        transition: all 0.3s;
-    }
-
-    .chat-input:focus {
-        outline: none;
-        border-color: var(--primary-blue);
-        box-shadow: 0 0 0 3px rgba(99, 145, 197, 0.1);
-    }
-
-    .chat-send {
-        background: var(--primary-blue);
-        color: white;
-        width: 44px;
-        height: 44px;
-        border: none;
-        border-radius: 12px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.3s;
-    }
-
-    .chat-send:hover {
-        background: var(--light-blue);
-        transform: translateY(-2px);
-    }
-
-    /* 动画 */
-    @keyframes messageSlide {
-        from {
-            opacity: 0;
-            transform: translateY(10px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    /* 响应式设计 */
-    @media (max-width: 768px) {
-        .article-container {
-            padding: 1.5rem;
-            border-radius: 12px;
-        }
-
-        .article-title {
-            font-size: 2rem;
-        }
-
-        .chat-window {
-            right: 1rem;
-            bottom: 1rem;
-            left: 1rem;
-            width: auto;
-            height: 500px;
-        }
-
-        .chat-toggle {
-            right: 1rem;
-            bottom: 1rem;
-        }
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<!-- 文章内容 -->
-<article class="article-container">
-    <header class="article-header">
-        <h1 class="article-title">{{ article.title }}</h1>
-        <div class="article-meta">
-            <div class="meta-item">
-                <i class="fas fa-calendar"></i>
-                <span>{{ article.created_at.strftime('%Y-%m-%d') }}</span>
-            </div>
-        </div>
-    </header>
-
-    {% if article.summary %}
-    <div class="article-summary">
-        <span class="summary-label">AI 摘要</span>
-        <p>{{ article.summary }}</p>
-    </div>
-    {% endif %}
-
-    <div class="article-content markdown-body">
-        {{ article.content|markdown }}
-    </div>
-</article>
-
-<!-- AI 聊天窗口 -->
-<button class="chat-toggle" id="chatToggle">
-    <i class="fas fa-robot"></i>
-</button>
-
-<div class="chat-window" id="chatWindow">
-    <div class="chat-header">
-        <i class="fas fa-robot"></i>
-        <span class="chat-title">AI 智能助手</span>
-        <button class="chat-close" id="chatClose">
-            <i class="fas fa-times"></i>
-        </button>
-    </div>
-    <div class="chat-messages" id="chatMessages"></div>
-        <div class="chat-input-wrapper">
-            <textarea 
-                id="chatInput" 
-                class="chat-input" 
-                placeholder="输入您的问题..."
-                rows="1"
-            ></textarea>
-            <button class="chat-send" onclick="sendMessage()">
-                <i class="fas fa-paper-plane"></i>
-            </button>
-        </div>
-</div>
-{% endblock %}
-
-{% block extra_js %}
-<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-<script>
-    // 初始化文章��下文
-    window.articleContext = {
-        title: {{ article.title|tojson|safe }},
-        content: {{ article.content|tojson|safe }}
-    };
-
-    // 配置Marked
-    marked.setOptions({
-        breaks: true,
-        gfm: true
-    });
-
-    // 聊天窗口控制
-    const chatToggle = document.getElementById('chatToggle');
-    const chatWindow = document.getElementById('chatWindow');
-    const chatClose = document.getElementById('chatClose');
-    const chatInput = document.getElementById('chatInput');
-    const chatMessages = document.getElementById('chatMessages');
-
-    // 模型上下文
-    const modelContext = `这是一篇关于"${window.articleContext.title}"的文章。文章内容：\n\n${window.articleContext.content}\n\n请基于以上文章内容来回答用户的问题。`;
-
-    // 欢迎消息
-    const welcomeMessage = `您好！我是这篇《${window.articleContext.title}》的AI助手。我已经仔细阅读了全文，可以解答您关于文章内容的任何问题，也提供更深入的讨论和见解，从而帮助您更好地理解文章要点
-让我们开始对话吧！`;
-    // 初始化消息数组
-    let messages = [{
-        role: 'system',
-        content: modelContext
-    }];
-
-    // 初始化聊天
-    function initializeChat() {
-        displayMessage('assistant', welcomeMessage);
-    }
-
-    // 切换聊天窗口
-    function toggleChat() {
-        chatWindow.classList.toggle('active');
-        if (chatWindow.classList.contains('active')) {
-            chatToggle.style.display = 'none';
-            chatInput.focus();
-            if (chatMessages.children.length === 0) {
-                initializeChat();
-            }
-        } else {
-            chatToggle.style.display = 'flex';
-        }
-    }
-
-    chatToggle.addEventListener('click', toggleChat);
-    chatClose.addEventListener('click', toggleChat);
-
-    // 自动调整文本框高度
-    chatInput.addEventListener('input', function() {
-        this.style.height = 'auto';
-        this.style.height = Math.min(this.scrollHeight, 120) + 'px';
-    });
-
-    // 发送消息
-    async function sendMessage() {
-        const messageText = chatInput.value.trim();
-        if (!messageText) return;
-
-        const userMessage = {
-            role: 'user',
-            content: messageText
-        };
-
-        // 重置输入框
-        chatInput.value = '';
-        chatInput.style.height = 'auto';
-
-        // 显示用户消息
-        displayMessage('user', messageText);
-
-        try {
-            const currentMessages = [...messages, userMessage];
-            
-            const response = await fetch('/api/chat', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ messages: currentMessages })
-            });
-
-            if (response.ok) {
-                const data = await response.json();
-                
-                // 更新消息历史
-                messages.push(userMessage);
-                messages.push({
-                    role: 'assistant',
-                    content: data.response
-                });
-                
-                // 显示AI响应
-                displayMessage('assistant', data.response);
-            } else {
-                throw new Error('Network response was not ok');
-            }
-        } catch (error) {
-            console.error('Error:', error);
-            displayMessage('assistant', '抱歉，发生了错误，请稍后再试。');
-        }
-    }
-
-    // 显示消息
-    function displayMessage(role, content) {
-        const messageDiv = document.createElement('div');
-        messageDiv.className = `chat-message ${role}`;
-        
-        // 使用marked渲染Markdown内容
-        messageDiv.innerHTML = marked.parse(content);
-        
-        chatMessages.appendChild(messageDiv);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-    }
-
-    // 回车发送消息
-    chatInput.addEventListener('keypress', function(event) {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            sendMessage();
-        }
-    });
-
-    // 聊天窗口拖动功能
-    let isDragging = false;
-    let currentX;
-    let currentY;
-    let initialX;
-    let initialY;
-    let xOffset = 0;
-    let yOffset = 0;
-
-    chatWindow.addEventListener('mousedown', dragStart);
-    document.addEventListener('mousemove', drag);
-    document.addEventListener('mouseup', dragEnd);
-
-    function dragStart(e) {
-        if (e.target.closest('.chat-header') && !e.target.closest('.chat-close')) {
-            initialX = e.clientX - xOffset;
-            initialY = e.clientY - yOffset;
-            isDragging = true;
-            chatWindow.style.cursor = 'grabbing';
-        }
-    }
-
-    function drag(e) {
-        if (isDragging) {
-            e.preventDefault();
-            currentX = e.clientX - initialX;
-            currentY = e.clientY - initialY;
-            xOffset = currentX;
-            yOffset = currentY;
-            
-            // 确保窗口不会超出视口边界
-            const rect = chatWindow.getBoundingClientRect();
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-            
-            // 限制X轴移动
-            if (rect.left < 0) {
-                currentX -= rect.left;
-            }
-            if (rect.right > viewportWidth) {
-                currentX -= (rect.right - viewportWidth);
-            }
-            
-            // 限制Y轴移动
-            if (rect.top < 0) {
-                currentY -= rect.top;
-            }
-            if (rect.bottom > viewportHeight) {
-                currentY -= (rect.bottom - viewportHeight);
-            }
-            
-            setTranslate(currentX, currentY, chatWindow);
-        }
-    }
-
-    function dragEnd() {
-        initialX = currentX;
-        initialY = currentY;
-        isDragging = false;
-        chatWindow.style.cursor = 'default';
-    }
-
-    function setTranslate(xPos, yPos, el) {
-        el.style.transform = `translate(${xPos}px, ${yPos}px)`;
-    }
-</script>
+{% extends "base.html" %}
+
+{% block title %}{{ article.title }} - 个人博客{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+<style>
+    /* 文章容器样式 */
+    .article-container {
+        max-width: 900px;
+        margin: 0 auto;
+        background: white;
+        border-radius: 20px;
+        box-shadow: 0 2px 12px rgba(99, 145, 197, 0.08);
+        border: 2px solid var(--light-blue);
+        padding: 2.5rem;
+    }
+
+    /* 文章头部样式 */
+    .article-header {
+        margin-bottom: 2.5rem;
+        padding-bottom: 1.5rem;
+        border-bottom: 1px solid var(--light-blue);
+    }
+
+    .article-title {
+        font-size: 2.5rem;
+        font-weight: 700;
+        color: var(--text-dark);
+        line-height: 1.3;
+        margin-bottom: 1rem;
+        background: linear-gradient(135deg, var(--primary-blue), var(--soft-purple));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .article-meta {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        color: #64748B;
+    }
+
+    .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .meta-item i {
+        color: var(--primary-blue);
+    }
+
+    /* AI 摘要样式 */
+    .article-summary {
+        background: var(--warm-cream);
+        border-radius: 16px;
+        padding: 1.5rem;
+        margin: 2rem 0;
+        position: relative;
+    }
+
+    .summary-label {
+        position: absolute;
+        top: -12px;
+        left: 16px;
+        background: var(--primary-blue);
+        color: white;
+        padding: 0.25rem 1rem;
+        border-radius: 20px;
+        font-size: 0.875rem;
+        font-weight: 500;
+    }
+
+    /* 文章内容样式 */
+    .article-content {
+        line-height: 1.8;
+        color: var(--text-dark);
+    }
+
+    .markdown-body {
+        font-size: 1.1rem;
+    }
+
+    .markdown-body h1,
+    .markdown-body h2,
+    .markdown-body h3 {
+        color: var(--primary-blue);
+        margin-top: 2em;
+        margin-bottom: 1em;
+        font-weight: 600;
+    }
+
+    .markdown-body p {
+        margin-bottom: 1.5em;
+    }
+
+    .markdown-body a {
+        color: var(--primary-blue);
+        text-decoration: none;
+        border-bottom: 1px dashed var(--light-blue);
+        transition: all 0.3s;
+    }
+
+    .markdown-body a:hover {
+        border-bottom-style: solid;
+        color: var(--soft-purple);
+    }
+
+    .markdown-body code {
+        background: #F8FAFC;
+        padding: 0.2em 0.4em;
+        border-radius: 4px;
+        font-size: 0.9em;
+        color: var(--primary-blue);
+    }
+
+    .markdown-body pre {
+        background: #F8FAFC;
+        border-radius: 12px;
+        padding: 1rem;
+        overflow-x: auto;
+        border: 1px solid var(--light-blue);
+    }
+
+    .markdown-body pre code {
+        background: none;
+        padding: 0;
+        color: inherit;
+    }
+
+    .markdown-body blockquote {
+        border-left: 4px solid var(--light-blue);
+        padding: 0.5rem 0 0.5rem 1rem;
+        margin: 1.5rem 0;
+        color: #64748B;
+        background: #F8FAFC;
+    }
+
+    .markdown-body img {
+        max-width: 100%;
+        border-radius: 12px;
+        margin: 1.5rem 0;
+    }
+
+    /* AI 聊天窗口样式 */
+    .chat-toggle {
+        position: fixed;
+        right: 2rem;
+        bottom: 2rem;
+        width: 56px;
+        height: 56px;
+        border-radius: 28px;
+        background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
+        color: white;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+        box-shadow: 0 4px 12px rgba(99, 145, 197, 0.2);
+        transition: all 0.3s;
+        z-index: 998;
+    }
+
+    .chat-toggle:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(99, 145, 197, 0.3);
+    }
+
+    .chat-window {
+        position: fixed;
+        right: 2rem;
+        bottom: 2rem;
+        width: 380px;
+        height: 600px;
+        background: white;
+        border-radius: 20px;
+        box-shadow: 0 4px 20px rgba(99, 145, 197, 0.15);
+        display: flex;
+        flex-direction: column;
+        transform: scale(0);
+        opacity: 0;
+        transform-origin: bottom right;
+        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        z-index: 999;
+        border: 1px solid var(--light-blue);
+    }
+
+    .chat-window.active {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    .chat-header {
+        padding: 1.25rem;
+        background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
+        color: white;
+        border-radius: 20px 20px 0 0;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .chat-title {
+        font-weight: 600;
+        flex: 1;
+    }
+
+    .chat-close {
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 16px;
+        transition: all 0.3s;
+    }
+
+    .chat-close:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+
+    .chat-messages {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        width: 100%;
+    }
+
+    .chat-message {
+        max-width: 85%;
+        padding: 1rem;
+        border-radius: 16px;
+        line-height: 1.3;
+        animation: messageSlide 0.3s ease;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        width: fit-content;
+    }
+    
+    .chat-message p {
+        margin: 0;
+        white-space: pre-wrap;
+    }
+    
+    .chat-message img,
+    .chat-message pre,
+    .chat-message code {
+        max-width: 100%;
+        overflow-x: hidden;
+    }
+    .chat-message.user {
+        background: var(--primary-blue);
+        color: white;
+        margin-left: auto;
+    }
+
+    .chat-message.assistant {
+        background: #7b85b8;
+        color: white;
+        margin-right: auto;
+    }
+
+    .chat-input-container {
+        padding: 1.25rem;
+        border-top: 1px solid var(--light-blue);
+    }
+
+    .chat-input-wrapper {
+        display: flex;
+        gap: 0.75rem;
+        align-items: flex-end;
+    }
+
+    .chat-input {
+        flex: 1;
+        min-height: 44px;
+        max-height: 120px;
+        padding: 0.75rem 1rem;
+        border: 2px solid var(--light-blue);
+        border-radius: 12px;
+        resize: none;
+        font-size: 1rem;
+        line-height: 1.5;
+        transition: all 0.3s;
+    }
+
+    .chat-input:focus {
+        outline: none;
+        border-color: var(--primary-blue);
+        box-shadow: 0 0 0 3px rgba(99, 145, 197, 0.1);
+    }
+
+    .chat-send {
+        background: var(--primary-blue);
+        color: white;
+        width: 44px;
+        height: 44px;
+        border: none;
+        border-radius: 12px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+    }
+
+    .chat-send:hover {
+        background: var(--light-blue);
+        transform: translateY(-2px);
+    }
+
+    /* 动画 */
+    @keyframes messageSlide {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    /* 响应式设计 */
+    @media (max-width: 768px) {
+        .article-container {
+            padding: 1.5rem;
+            border-radius: 12px;
+        }
+
+        .article-title {
+            font-size: 2rem;
+        }
+
+        .chat-window {
+            right: 1rem;
+            bottom: 1rem;
+            left: 1rem;
+            width: auto;
+            height: 500px;
+        }
+
+        .chat-toggle {
+            right: 1rem;
+            bottom: 1rem;
+        }
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<!-- 文章内容 -->
+<article class="article-container">
+    <header class="article-header">
+        <h1 class="article-title">{{ article.title }}</h1>
+        <div class="article-meta">
+            <div class="meta-item">
+                <i class="fas fa-calendar"></i>
+                <span>{{ article.created_at.strftime('%Y-%m-%d') }}</span>
+            </div>
+        </div>
+    </header>
+
+    {% if article.summary %}
+    <div class="article-summary">
+        <span class="summary-label">AI 摘要</span>
+        <p>{{ article.summary }}</p>
+    </div>
+    {% endif %}
+
+    <div class="article-content markdown-body">
+        {{ article.content|markdown }}
+    </div>
+</article>
+
+<!-- AI 聊天窗口 -->
+<button class="chat-toggle" id="chatToggle">
+    <i class="fas fa-robot"></i>
+</button>
+
+<div class="chat-window" id="chatWindow">
+    <div class="chat-header">
+        <i class="fas fa-robot"></i>
+        <span class="chat-title">AI 智能助手</span>
+        <button class="chat-close" id="chatClose">
+            <i class="fas fa-times"></i>
+        </button>
+    </div>
+    <div class="chat-messages" id="chatMessages"></div>
+        <div class="chat-input-wrapper">
+            <textarea 
+                id="chatInput" 
+                class="chat-input" 
+                placeholder="输入您的问题..."
+                rows="1"
+            ></textarea>
+            <button class="chat-send" onclick="sendMessage()">
+                <i class="fas fa-paper-plane"></i>
+            </button>
+        </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script>
+    // 初始化文章上下文
+    window.articleContext = {
+        title: {{ article.title|tojson|safe }},
+        content: {{ article.content|tojson|safe }}
+    };
+
+    // 配置Marked
+    marked.setOptions({
+        breaks: true,
+        gfm: true
+    });
+
+    // 聊天窗口控制
+    const chatToggle = document.getElementById('chatToggle');
+    const chatWindow = document.getElementById('chatWindow');
+    const chatClose = document.getElementById('chatClose');
+    const chatInput = document.getElementById('chatInput');
+    const chatMessages = document.getElementById('chatMessages');
+
+    // 模型上下文
+    const modelContext = `这是一篇关于"${window.articleContext.title}"的文章。文章内容：\n\n${window.articleContext.content}\n\n请基于以上文章内容来回答用户的问题。`;
+
+    // 欢迎消息
+    const welcomeMessage = `您好！我是这篇《${window.articleContext.title}》的AI助手。我已经仔细阅读了全文，可以解答您关于文章内容的任何问题，也提供更深入的讨论和见解，从而帮助您更好地理解文章要点
+让我们开始对话吧！`;
+    // 初始化消息数组
+    let messages = [{
+        role: 'system',
+        content: modelContext
+    }];
+
+    // 初始化聊天
+    function initializeChat() {
+        displayMessage('assistant', welcomeMessage);
+    }
+
+    // 切换聊天窗口
+    function toggleChat() {
+        chatWindow.classList.toggle('active');
+        if (chatWindow.classList.contains('active')) {
+            chatToggle.style.display = 'none';
+            chatInput.focus();
+            if (chatMessages.children.length === 0) {
+                initializeChat();
+            }
+        } else {
+            chatToggle.style.display = 'flex';
+        }
+    }
+
+    chatToggle.addEventListener('click', toggleChat);
+    chatClose.addEventListener('click', toggleChat);
+
+    // 自动调整文本框高度
+    chatInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+    });
+
+    // 发送消息
+    async function sendMessage() {
+        const messageText = chatInput.value.trim();
+        if (!messageText) return;
+
+        const userMessage = {
+            role: 'user',
+            content: messageText
+        };
+
+        // 重置输入框
+        chatInput.value = '';
+        chatInput.style.height = 'auto';
+
+        // 显示用户消息
+        displayMessage('user', messageText);
+
+        try {
+            const currentMessages = [...messages, userMessage];
+            
+            const response = await fetch('/api/chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ messages: currentMessages })
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                
+                // 更新消息历史
+                messages.push(userMessage);
+                messages.push({
+                    role: 'assistant',
+                    content: data.response
+                });
+                
+                // 显示AI响应
+                displayMessage('assistant', data.response);
+            } else {
+                throw new Error('Network response was not ok');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            displayMessage('assistant', '抱歉，发生了错误，请稍后再试。');
+        }
+    }
+
+    // 显示消息
+    function displayMessage(role, content) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `chat-message ${role}`;
+        
+        // 使用marked渲染Markdown内容
+        messageDiv.innerHTML = marked.parse(content);
+        
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+    // 回车发送消息
+    chatInput.addEventListener('keypress', function(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            sendMessage();
+        }
+    });
+
+    // 聊天窗口拖动功能
+    let isDragging = false;
+    let currentX;
+    let currentY;
+    let initialX;
+    let initialY;
+    let xOffset = 0;
+    let yOffset = 0;
+
+    chatWindow.addEventListener('mousedown', dragStart);
+    document.addEventListener('mousemove', drag);
+    document.addEventListener('mouseup', dragEnd);
+
+    function dragStart(e) {
+        if (e.target.closest('.chat-header') && !e.target.closest('.chat-close')) {
+            initialX = e.clientX - xOffset;
+            initialY = e.clientY - yOffset;
+            isDragging = true;
+            chatWindow.style.cursor = 'grabbing';
+        }
+    }
+
+    function drag(e) {
+        if (isDragging) {
+            e.preventDefault();
+            currentX = e.clientX - initialX;
+            currentY = e.clientY - initialY;
+            xOffset = currentX;
+            yOffset = currentY;
+            
+            // 确保窗口不会超出视口边界
+            const rect = chatWindow.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            
+            // 限制X轴移动
+            if (rect.left < 0) {
+                currentX -= rect.left;
+            }
+            if (rect.right > viewportWidth) {
+                currentX -= (rect.right - viewportWidth);
+            }
+            
+            // 限制Y轴移动
+            if (rect.top < 0) {
+                currentY -= rect.top;
+            }
+            if (rect.bottom > viewportHeight) {
+                currentY -= (rect.bottom - viewportHeight);
+            }
+            
+            setTranslate(currentX, currentY, chatWindow);
+        }
+    }
+
+    function dragEnd() {
+        initialX = currentX;
+        initialY = currentY;
+        isDragging = false;
+        chatWindow.style.cursor = 'default';
+    }
+
+    function setTranslate(xPos, yPos, el) {
+        el.style.transform = `translate(${xPos}px, ${yPos}px)`;
+    }
+</script>
 {% endblock %}

app/templates/base.html

@@ -313,7 +313,7 @@
             <div class="sidebar-header">
                 <a href="{{ url_for('main.index') }}" class="logo">
                     <i class="fas fa-feather"></i>
-                    <span>个人博客</span>
+                    <span>Wisdom Hub</span>
                 </a>
             </div>
 

app/templates/editor.html

@@ -1,212 +1,212 @@
-{% extends "base.html" %}
-
-{% block title %}{% if article %}编辑文章{% else %}新建文章{% endif %} - Wisdom Hub{% endblock %}
-
-{% block content %}
-<div class="editor-container" style="
-    max-width: 1400px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    height: calc(100vh - 8rem);
-    padding: 0 1rem;
-">
-    <!-- 标题区域 -->
-    <div class="editor-header" style="
-        background: white;
-        border-radius: 8px;
-        padding: 1.25rem;
-        border: 1px solid #B3CFEF;
-    ">
-        <input type="text" id="titleInput" placeholder="请输入文章标题..." value="{{ article.title if article else '' }}" style="
-            width: 100%;
-            font-size: 1.5rem;
-            border: none;
-            outline: none;
-            color: #2C3E50;
-        ">
-    </div>
-
-    <!-- 工具栏 -->
-    <div class="editor-toolbar" style="
-        background: white;
-        border-radius: 8px;
-        padding: 0.5rem;
-        display: flex;
-        gap: 0.25rem;
-        flex-wrap: wrap;
-        border: 1px solid #B3CFEF;
-    "></div>
-
-    <!-- 编辑器主体 -->
-    <div class="editor-main" style="
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 1rem;
-        flex: 1;
-        min-height: 0;
-    ">
-        <!-- 编辑区域 -->
-        <textarea id="contentInput" placeholder="开始写作..." style="
-            background: white;
-            border-radius: 8px;
-            padding: 1.25rem;
-            border: 1px solid #B3CFEF;
-            font-family: 'Monaco', 'Consolas', monospace;
-            font-size: 0.9375rem;
-            line-height: 1.6;
-            color: #2C3E50;
-            resize: none;
-            outline: none;
-        ">{{ article.content if article else '' }}</textarea>
-
-        <!-- 预览区域 -->
-        <div id="preview" class="markdown-preview" style="
-            background: white;
-            border-radius: 8px;
-            padding: 1.25rem;
-            border: 1px solid #B3CFEF;
-            overflow-y: auto;
-            color: #2C3E50;
-        "></div>
-    </div>
-
-    <!-- 底部工具栏 -->
-    <div class="editor-footer" style="
-        background: white;
-        border-radius: 8px;
-        padding: 0.75rem 1.25rem;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border: 1px solid #B3CFEF;
-    ">
-        <div class="word-count" style="
-            color: #6391C5;
-            font-size: 0.875rem;
-        "></div>
-        
-        <button class="save-button" style="
-            padding: 0.5rem 1rem;
-            background: #6391C5;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            font-size: 0.875rem;
-            cursor: pointer;
-            transition: background-color 0.2s;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        ">
-            <i class="fas fa-save" style="font-size: 0.875rem;"></i>
-            保存文章
-        </button>
-    </div>
-</div>
-
-<!-- 图片上传输入框 -->
-<input type="file" id="imageInput" style="display: none" accept="image/*">
-
-<style>
-/* 工具栏按钮基础样式 */
-.toolbar-button {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    color: #6391C5;
-    background: none;
-    cursor: pointer;
-    transition: all 0.2s;
-    font-size: 0.9375rem;
-}
-
-.toolbar-button:hover {
-    background: #f8fafc;
-    border-color: #B3CFEF;
-}
-
-/* 预览区域样式优化 */
-.markdown-preview h1,
-.markdown-preview h2,
-.markdown-preview h3 {
-    margin-top: 1.5em;
-    margin-bottom: 1em;
-    color: #2C3E50;
-}
-
-.markdown-preview code {
-    background: #f8fafc;
-    padding: 0.2em 0.4em;
-    border-radius: 4px;
-    font-size: 0.9em;
-    color: #6391C5;
-}
-
-.markdown-preview pre {
-    background: #f8fafc;
-    padding: 1rem;
-    border-radius: 4px;
-    border: 1px solid #B3CFEF;
-    overflow-x: auto;
-}
-
-.markdown-preview pre code {
-    background: none;
-    padding: 0;
-    border-radius: 0;
-}
-
-.markdown-preview blockquote {
-    border-left: 4px solid #B3CFEF;
-    margin: 1em 0;
-    padding-left: 1em;
-    color: #64748b;
-}
-
-.markdown-preview img {
-    max-width: 100%;
-    border-radius: 4px;
-}
-</style>
-
-<script>
-// 编辑区域焦点效果
-document.getElementById('contentInput').addEventListener('focus', function() {
-    this.style.borderColor = '#6391C5';
-});
-
-document.getElementById('contentInput').addEventListener('blur', function() {
-    this.style.borderColor = '#B3CFEF';
-});
-
-// 标题输入框焦点效果
-document.getElementById('titleInput').addEventListener('focus', function() {
-    this.style.borderColor = '#6391C5';
-});
-
-document.getElementById('titleInput').addEventListener('blur', function() {
-    this.style.borderColor = '#B3CFEF';
-});
-
-// 保存按钮悬停效果
-document.querySelector('.save-button').addEventListener('mouseenter', function() {
-    this.style.background = '#5682b6';
-});
-
-document.querySelector('.save-button').addEventListener('mouseleave', function() {
-    this.style.background = '#6391C5';
-});
-</script>
-{% endblock %}
-
-{% block extra_js %}
-<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-<script src="{{ url_for('static', filename='js/editor.js') }}"></script>
+{% extends "base.html" %}
+
+{% block title %}{% if article %}编辑文章{% else %}新建文章{% endif %} - 个人博客{% endblock %}
+
+{% block content %}
+<div class="editor-container" style="
+    max-width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: calc(100vh - 8rem);
+    padding: 0 1rem;
+">
+    <!-- 标题区域 -->
+    <div class="editor-header" style="
+        background: white;
+        border-radius: 8px;
+        padding: 1.25rem;
+        border: 1px solid #B3CFEF;
+    ">
+        <input type="text" id="titleInput" placeholder="请输入文章标题..." value="{{ article.title if article else '' }}" style="
+            width: 100%;
+            font-size: 1.5rem;
+            border: none;
+            outline: none;
+            color: #2C3E50;
+        ">
+    </div>
+
+    <!-- 工具栏 -->
+    <div class="editor-toolbar" style="
+        background: white;
+        border-radius: 8px;
+        padding: 0.5rem;
+        display: flex;
+        gap: 0.25rem;
+        flex-wrap: wrap;
+        border: 1px solid #B3CFEF;
+    "></div>
+
+    <!-- 编辑器主体 -->
+    <div class="editor-main" style="
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+        flex: 1;
+        min-height: 0;
+    ">
+        <!-- 编辑区域 -->
+        <textarea id="contentInput" placeholder="开始写作..." style="
+            background: white;
+            border-radius: 8px;
+            padding: 1.25rem;
+            border: 1px solid #B3CFEF;
+            font-family: 'Monaco', 'Consolas', monospace;
+            font-size: 0.9375rem;
+            line-height: 1.6;
+            color: #2C3E50;
+            resize: none;
+            outline: none;
+        ">{{ article.content if article else '' }}</textarea>
+
+        <!-- 预览区域 -->
+        <div id="preview" class="markdown-preview" style="
+            background: white;
+            border-radius: 8px;
+            padding: 1.25rem;
+            border: 1px solid #B3CFEF;
+            overflow-y: auto;
+            color: #2C3E50;
+        "></div>
+    </div>
+
+    <!-- 底部工具栏 -->
+    <div class="editor-footer" style="
+        background: white;
+        border-radius: 8px;
+        padding: 0.75rem 1.25rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border: 1px solid #B3CFEF;
+    ">
+        <div class="word-count" style="
+            color: #6391C5;
+            font-size: 0.875rem;
+        "></div>
+        
+        <button class="save-button" style="
+            padding: 0.5rem 1rem;
+            background: #6391C5;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            font-size: 0.875rem;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        ">
+            <i class="fas fa-save" style="font-size: 0.875rem;"></i>
+            保存文章
+        </button>
+    </div>
+</div>
+
+<!-- 图片上传输入框 -->
+<input type="file" id="imageInput" style="display: none" accept="image/*">
+
+<style>
+/* 工具栏按钮基础样式 */
+.toolbar-button {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    color: #6391C5;
+    background: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.9375rem;
+}
+
+.toolbar-button:hover {
+    background: #f8fafc;
+    border-color: #B3CFEF;
+}
+
+/* 预览区域样式优化 */
+.markdown-preview h1,
+.markdown-preview h2,
+.markdown-preview h3 {
+    margin-top: 1.5em;
+    margin-bottom: 1em;
+    color: #2C3E50;
+}
+
+.markdown-preview code {
+    background: #f8fafc;
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-size: 0.9em;
+    color: #6391C5;
+}
+
+.markdown-preview pre {
+    background: #f8fafc;
+    padding: 1rem;
+    border-radius: 4px;
+    border: 1px solid #B3CFEF;
+    overflow-x: auto;
+}
+
+.markdown-preview pre code {
+    background: none;
+    padding: 0;
+    border-radius: 0;
+}
+
+.markdown-preview blockquote {
+    border-left: 4px solid #B3CFEF;
+    margin: 1em 0;
+    padding-left: 1em;
+    color: #64748b;
+}
+
+.markdown-preview img {
+    max-width: 100%;
+    border-radius: 4px;
+}
+</style>
+
+<script>
+// 编辑区域焦点效果
+document.getElementById('contentInput').addEventListener('focus', function() {
+    this.style.borderColor = '#6391C5';
+});
+
+document.getElementById('contentInput').addEventListener('blur', function() {
+    this.style.borderColor = '#B3CFEF';
+});
+
+// 标题输入框焦点效果
+document.getElementById('titleInput').addEventListener('focus', function() {
+    this.style.borderColor = '#6391C5';
+});
+
+document.getElementById('titleInput').addEventListener('blur', function() {
+    this.style.borderColor = '#B3CFEF';
+});
+
+// 保存按钮悬停效果
+document.querySelector('.save-button').addEventListener('mouseenter', function() {
+    this.style.background = '#5682b6';
+});
+
+document.querySelector('.save-button').addEventListener('mouseleave', function() {
+    this.style.background = '#6391C5';
+});
+</script>
+{% endblock %}
+
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+<script src="{{ url_for('static', filename='js/editor.js') }}"></script>
 {% endblock %}

app/templates/index.html

@@ -1,352 +1,352 @@
-{% extends "base.html" %}
-
-{% block title %}首页 - Wisdom Hub{% endblock %}
-
-{% block content %}
-<!-- 搜索区域 -->
-<section class="search-container">
-    <div class="search-wrapper">
-        <input 
-            type="text" 
-            class="search-input" 
-            placeholder="搜索文章..."
-            id="searchInput"
-        >
-        <i class="fas fa-search search-icon"></i>
-        <button class="search-reset" id="searchReset" style="display: none;">
-            <i class="fas fa-times"></i>
-        </button>
-    </div>
-</section>
-
-<!-- 文章列表 -->
-<section class="articles-section">
-    <div class="section-header">
-        <h1 class="section-title">所有文章</h1>
-        <div class="view-controls">
-            <button class="view-btn" data-view="list">
-                <i class="fas fa-list"></i>
-                列表视图
-            </button>
-            <button class="view-btn active" data-view="grid">
-                <i class="fas fa-th-large"></i>
-                卡片视图
-            </button>
-        </div>
-    </div>
-
-    <div class="articles-container grid-view" id="articlesContainer">
-        {% for article in articles %}
-        <article class="article-card">
-            <div class="article-icon">
-                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                    <polyline points="14 2 14 8 20 8"></polyline>
-                    <line x1="16" y1="13" x2="8" y2="13"></line>
-                    <line x1="16" y1="17" x2="8" y2="17"></line>
-                    <line x1="10" y1="9" x2="8" y2="9"></line>
-                </svg>
-            </div>
-            <div class="article-content">
-                <h2 class="article-title">
-                    <a href="{{ url_for('main.article', slug=article.slug) }}">
-                        {{ article.title }}
-                    </a>
-                </h2>
-                {% if article.summary %}
-                <div class="article-summary">
-                    {{ article.summary }}
-                </div>
-                {% endif %}
-                <div class="article-meta">
-                    <span class="meta-date">
-                        <i class="fas fa-calendar"></i>
-                        {{ article.created_at.strftime('%Y-%m-%d') }}
-                    </span>
-                </div>
-            </div>
-        </article>
-        {% endfor %}
-    </div>
-</section>
-
-<style>
-    .search-container {
-        margin-bottom: 2rem;
-    }
-
-    .search-wrapper {
-        position: relative;
-        max-width: 800px;
-        margin: 0 auto;
-    }
-
-    .search-input {
-        width: 100%;
-        padding: 1rem 1.25rem 1rem 3rem;
-        border: 2px solid var(--light-blue);
-        border-radius: 12px;
-        background: white;
-        font-size: 1rem;
-        transition: all 0.3s ease;
-        color: var(--text-dark);
-        padding-right: 3rem;
-    }
-
-    .search-input:focus {
-        outline: none;
-        border-color: var(--primary-blue);
-        box-shadow: 0 0 0 4px rgba(99, 145, 197, 0.1);
-    }
-
-    .search-icon {
-        position: absolute;
-        left: 1.25rem;
-        top: 50%;
-        transform: translateY(-50%);
-        color: var(--primary-blue);
-    }
-
-    .search-reset {
-        position: absolute;
-        right: 1rem;
-        top: 50%;
-        transform: translateY(-50%);
-        background: none;
-        border: none;
-        color: var(--primary-blue);
-        cursor: pointer;
-        padding: 0.5rem;
-        border-radius: 50%;
-        transition: all 0.3s ease;
-    }
-
-    .search-reset:hover {
-        background: rgba(99, 145, 197, 0.1);
-    }
-
-    .section-header {
-        margin-bottom: 2rem;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .section-title {
-        font-size: 1.75rem;
-        color: var(--text-dark);
-        font-weight: 600;
-    }
-
-    .view-controls {
-        display: flex;
-        gap: 0.5rem;
-        background: white;
-        padding: 0.25rem;
-        border-radius: 8px;
-        border: 1px solid var(--light-blue);
-    }
-
-    .view-btn {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 1rem;
-        border: none;
-        background: none;
-        border-radius: 6px;
-        color: var(--text-dark);
-        cursor: pointer;
-        transition: all 0.3s ease;
-    }
-
-    .view-btn.active {
-        background: var(--primary-blue);
-        color: white;
-    }
-
-    .view-btn i {
-        font-size: 1rem;
-    }
-
-    /* 列表视图样式 */
-    .articles-container.list-view {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .list-view .article-card {
-        background: white;
-        border-radius: 12px;
-        border: 1px solid var(--light-blue);
-        padding: 1.5rem;
-        display: flex;
-        gap: 1.5rem;
-        transition: all 0.3s ease;
-    }
-
-    /* 网格视图样式 */
-    .articles-container.grid-view {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        gap: 1.5rem;
-    }
-
-    .grid-view .article-card {
-        background: white;
-        border-radius: 12px;
-        border: 1px solid var(--light-blue);
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        transition: all 0.3s ease;
-    }
-
-    .grid-view .article-icon {
-        align-self: flex-start;
-    }
-
-    .article-card:hover {
-        border-color: var(--primary-blue);
-        box-shadow: 0 4px 12px rgba(99, 145, 197, 0.1);
-        transform: translateY(-2px);
-    }
-
-    .article-icon {
-        color: var(--primary-blue);
-        flex-shrink: 0;
-    }
-
-    .article-content {
-        flex: 1;
-    }
-
-    .article-title {
-        font-size: 1.25rem;
-        font-weight: 600;
-        margin-bottom: 0.75rem;
-        line-height: 1.4;
-    }
-
-    .article-title a {
-        color: var(--text-dark);
-        text-decoration: none;
-        transition: color 0.3s ease;
-    }
-
-    .article-title a:hover {
-        color: var(--primary-blue);
-    }
-
-    .article-summary {
-        color: #64748B;
-        margin-bottom: 1rem;
-        line-height: 1.6;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-
-    .article-meta {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        color: #94A3B8;
-        font-size: 0.875rem;
-    }
-
-    .meta-date {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-
-    .meta-date i {
-        color: var(--primary-blue);
-    }
-
-    @media (max-width: 640px) {
-        .article-card {
-            padding: 1rem;
-        }
-        
-        .article-summary {
-            -webkit-line-clamp: 3;
-        }
-        
-        .articles-container.grid-view {
-            grid-template-columns: 1fr;
-        }
-        
-        .section-header {
-            flex-direction: column;
-            gap: 1rem;
-            align-items: flex-start;
-        }
-    }
-</style>
-
-<script>
-    const searchInput = document.getElementById('searchInput');
-    const searchReset = document.getElementById('searchReset');
-    const articlesContainer = document.getElementById('articlesContainer');
-    const viewButtons = document.querySelectorAll('.view-btn');
-    let allArticles = [...document.querySelectorAll('.article-card')];
-
-    function debounce(func, wait) {
-        let timeout;
-        return function executedFunction(...args) {
-            const later = () => {
-                clearTimeout(timeout);
-                func(...args);
-            };
-            clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
-        };
-    }
-
-    function filterArticles(query) {
-        query = query.toLowerCase().trim();
-        searchReset.style.display = query ? 'block' : 'none';
-        
-        allArticles.forEach(article => {
-            const title = article.querySelector('.article-title').textContent.toLowerCase();
-            const summary = article.querySelector('.article-summary')?.textContent.toLowerCase() || '';
-            
-            if (title.includes(query) || summary.includes(query) || query === '') {
-                article.style.display = '';
-            } else {
-                article.style.display = 'none';
-            }
-        });
-    }
-
-    // 视图切换
-    viewButtons.forEach(button => {
-        button.addEventListener('click', () => {
-            viewButtons.forEach(btn => btn.classList.remove('active'));
-            button.classList.add('active');
-            
-            const viewType = button.dataset.view;
-            articlesContainer.className = `articles-container ${viewType}-view`;
-        });
-    });
-
-    // 搜索功能
-    const debouncedFilter = debounce(filterArticles, 300);
-
-    searchInput.addEventListener('input', (e) => {
-        debouncedFilter(e.target.value);
-    });
-
-    // 重置搜索
-    searchReset.addEventListener('click', () => {
-        searchInput.value = '';
-        filterArticles('');
-        searchInput.focus();
-    });
-</script>
+{% extends "base.html" %}
+
+{% block title %}首页 - 个人博客{% endblock %}
+
+{% block content %}
+<!-- 搜索区域 -->
+<section class="search-container">
+    <div class="search-wrapper">
+        <input 
+            type="text" 
+            class="search-input" 
+            placeholder="搜索文章..."
+            id="searchInput"
+        >
+        <i class="fas fa-search search-icon"></i>
+        <button class="search-reset" id="searchReset" style="display: none;">
+            <i class="fas fa-times"></i>
+        </button>
+    </div>
+</section>
+
+<!-- 文章列表 -->
+<section class="articles-section">
+    <div class="section-header">
+        <h1 class="section-title">所有文章</h1>
+        <div class="view-controls">
+            <button class="view-btn" data-view="list">
+                <i class="fas fa-list"></i>
+                列表视图
+            </button>
+            <button class="view-btn active" data-view="grid">
+                <i class="fas fa-th-large"></i>
+                卡片视图
+            </button>
+        </div>
+    </div>
+
+    <div class="articles-container grid-view" id="articlesContainer">
+        {% for article in articles %}
+        <article class="article-card">
+            <div class="article-icon">
+                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                    <line x1="16" y1="17" x2="8" y2="17"></line>
+                    <line x1="10" y1="9" x2="8" y2="9"></line>
+                </svg>
+            </div>
+            <div class="article-content">
+                <h2 class="article-title">
+                    <a href="{{ url_for('main.article', slug=article.slug) }}">
+                        {{ article.title }}
+                    </a>
+                </h2>
+                {% if article.summary %}
+                <div class="article-summary">
+                    {{ article.summary }}
+                </div>
+                {% endif %}
+                <div class="article-meta">
+                    <span class="meta-date">
+                        <i class="fas fa-calendar"></i>
+                        {{ article.created_at.strftime('%Y-%m-%d') }}
+                    </span>
+                </div>
+            </div>
+        </article>
+        {% endfor %}
+    </div>
+</section>
+
+<style>
+    .search-container {
+        margin-bottom: 2rem;
+    }
+
+    .search-wrapper {
+        position: relative;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+
+    .search-input {
+        width: 100%;
+        padding: 1rem 1.25rem 1rem 3rem;
+        border: 2px solid var(--light-blue);
+        border-radius: 12px;
+        background: white;
+        font-size: 1rem;
+        transition: all 0.3s ease;
+        color: var(--text-dark);
+        padding-right: 3rem;
+    }
+
+    .search-input:focus {
+        outline: none;
+        border-color: var(--primary-blue);
+        box-shadow: 0 0 0 4px rgba(99, 145, 197, 0.1);
+    }
+
+    .search-icon {
+        position: absolute;
+        left: 1.25rem;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--primary-blue);
+    }
+
+    .search-reset {
+        position: absolute;
+        right: 1rem;
+        top: 50%;
+        transform: translateY(-50%);
+        background: none;
+        border: none;
+        color: var(--primary-blue);
+        cursor: pointer;
+        padding: 0.5rem;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+    }
+
+    .search-reset:hover {
+        background: rgba(99, 145, 197, 0.1);
+    }
+
+    .section-header {
+        margin-bottom: 2rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .section-title {
+        font-size: 1.75rem;
+        color: var(--text-dark);
+        font-weight: 600;
+    }
+
+    .view-controls {
+        display: flex;
+        gap: 0.5rem;
+        background: white;
+        padding: 0.25rem;
+        border-radius: 8px;
+        border: 1px solid var(--light-blue);
+    }
+
+    .view-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        border: none;
+        background: none;
+        border-radius: 6px;
+        color: var(--text-dark);
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .view-btn.active {
+        background: var(--primary-blue);
+        color: white;
+    }
+
+    .view-btn i {
+        font-size: 1rem;
+    }
+
+    /* 列表视图样式 */
+    .articles-container.list-view {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .list-view .article-card {
+        background: white;
+        border-radius: 12px;
+        border: 1px solid var(--light-blue);
+        padding: 1.5rem;
+        display: flex;
+        gap: 1.5rem;
+        transition: all 0.3s ease;
+    }
+
+    /* 网格视图样式 */
+    .articles-container.grid-view {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .grid-view .article-card {
+        background: white;
+        border-radius: 12px;
+        border: 1px solid var(--light-blue);
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        transition: all 0.3s ease;
+    }
+
+    .grid-view .article-icon {
+        align-self: flex-start;
+    }
+
+    .article-card:hover {
+        border-color: var(--primary-blue);
+        box-shadow: 0 4px 12px rgba(99, 145, 197, 0.1);
+        transform: translateY(-2px);
+    }
+
+    .article-icon {
+        color: var(--primary-blue);
+        flex-shrink: 0;
+    }
+
+    .article-content {
+        flex: 1;
+    }
+
+    .article-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-bottom: 0.75rem;
+        line-height: 1.4;
+    }
+
+    .article-title a {
+        color: var(--text-dark);
+        text-decoration: none;
+        transition: color 0.3s ease;
+    }
+
+    .article-title a:hover {
+        color: var(--primary-blue);
+    }
+
+    .article-summary {
+        color: #64748B;
+        margin-bottom: 1rem;
+        line-height: 1.6;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .article-meta {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        color: #94A3B8;
+        font-size: 0.875rem;
+    }
+
+    .meta-date {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .meta-date i {
+        color: var(--primary-blue);
+    }
+
+    @media (max-width: 640px) {
+        .article-card {
+            padding: 1rem;
+        }
+        
+        .article-summary {
+            -webkit-line-clamp: 3;
+        }
+        
+        .articles-container.grid-view {
+            grid-template-columns: 1fr;
+        }
+        
+        .section-header {
+            flex-direction: column;
+            gap: 1rem;
+            align-items: flex-start;
+        }
+    }
+</style>
+
+<script>
+    const searchInput = document.getElementById('searchInput');
+    const searchReset = document.getElementById('searchReset');
+    const articlesContainer = document.getElementById('articlesContainer');
+    const viewButtons = document.querySelectorAll('.view-btn');
+    let allArticles = [...document.querySelectorAll('.article-card')];
+
+    function debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+
+    function filterArticles(query) {
+        query = query.toLowerCase().trim();
+        searchReset.style.display = query ? 'block' : 'none';
+        
+        allArticles.forEach(article => {
+            const title = article.querySelector('.article-title').textContent.toLowerCase();
+            const summary = article.querySelector('.article-summary')?.textContent.toLowerCase() || '';
+            
+            if (title.includes(query) || summary.includes(query) || query === '') {
+                article.style.display = '';
+            } else {
+                article.style.display = 'none';
+            }
+        });
+    }
+
+    // 视图切换
+    viewButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            viewButtons.forEach(btn => btn.classList.remove('active'));
+            button.classList.add('active');
+            
+            const viewType = button.dataset.view;
+            articlesContainer.className = `articles-container ${viewType}-view`;
+        });
+    });
+
+    // 搜索功能
+    const debouncedFilter = debounce(filterArticles, 300);
+
+    searchInput.addEventListener('input', (e) => {
+        debouncedFilter(e.target.value);
+    });
+
+    // 重置搜索
+    searchReset.addEventListener('click', () => {
+        searchInput.value = '';
+        filterArticles('');
+        searchInput.focus();
+    });
+</script>
 {% endblock %}