Upload 4 files

app/templates/article.html

@@ -0,0 +1,612 @@
+{% 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

@@ -0,0 +1,400 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}个人博客{% endblock %}</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <style>
+        :root {
+            --primary-blue: #6391C5;
+            --light-blue: #B3CFEF;
+            --warm-cream: #FEEEDA;
+            --soft-purple: #C5CDFD;
+            --text-dark: #2C3E50;
+            --bg-light: #F8FAFC;
+            --sidebar-width: 280px;
+            --header-height: 70px;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            line-height: 1.6;
+            color: var(--text-dark);
+            background-color: var(--bg-light);
+            min-height: 100vh;
+        }
+
+        /* 布局容器 */
+        .app-container {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        /* 侧边栏样式 */
+        .sidebar {
+            width: var(--sidebar-width);
+            height: 100vh;
+            position: fixed;
+            left: 0;
+            top: 0;
+            background: white;
+            border-right: 2px solid rgba(99, 145, 197, 0.1);
+            display: flex;
+            flex-direction: column;
+            transition: transform 0.3s ease;
+            z-index: 100;
+        }
+
+        .sidebar-header {
+            padding: 2rem;
+            border-bottom: 2px solid rgba(99, 145, 197, 0.1);
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            text-decoration: none;
+            color: var(--primary-blue);
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .logo i {
+            font-size: 2rem;
+            background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            transition: transform 0.3s ease;
+        }
+
+        .logo:hover i {
+            transform: rotate(-10deg);
+        }
+
+        .sidebar-content {
+            flex: 1;
+            padding: 2rem 1rem;
+            overflow-y: auto;
+        }
+
+        .nav-group {
+            margin-bottom: 2rem;
+        }
+
+        .nav-group-title {
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: #64748B;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            padding: 0 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .nav-links {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .nav-link {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            padding: 0.875rem 1rem;
+            color: var(--text-dark);
+            text-decoration: none;
+            border-radius: 12px;
+            transition: all 0.3s ease;
+            font-weight: 500;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .nav-link::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .nav-link:hover {
+            background: linear-gradient(to right, rgba(99, 145, 197, 0.1), transparent);
+        }
+
+        .nav-link:hover::before {
+            opacity: 1;
+        }
+
+        .nav-link i {
+            font-size: 1.25rem;
+            color: var(--primary-blue);
+            transition: transform 0.3s ease;
+        }
+
+        .nav-link:hover i {
+            transform: translateX(4px);
+        }
+
+        .nav-link span {
+            font-size: 1.0625rem;
+        }
+
+        .sidebar-footer {
+            padding: 1.5rem;
+            border-top: 2px solid rgba(99, 145, 197, 0.1);
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        /* 顶部栏样式 */
+        .top-header {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: var(--header-height);
+            background: white;
+            border-bottom: 2px solid rgba(99, 145, 197, 0.1);
+            padding: 0 1.5rem;
+            z-index: 99;
+        }
+
+        .header-content {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .header-nav {
+            display: flex;
+            align-items: center;
+            gap: 1.5rem;
+        }
+
+        .menu-toggle {
+            display: none;
+            background: none;
+            border: none;
+            color: var(--primary-blue);
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0.5rem;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+
+        .menu-toggle:hover {
+            background: rgba(99, 145, 197, 0.1);
+        }
+
+        /* 主内容区域 */
+        .main-content {
+            flex: 1;
+            margin-left: var(--sidebar-width);
+            padding: 2rem;
+            position: relative;
+            min-height: 100vh;
+        }
+
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .sidebar {
+                transform: translateX(-100%);
+            }
+
+            .sidebar.active {
+                transform: translateX(0);
+            }
+
+            .top-header {
+                display: block;
+            }
+
+            .menu-toggle {
+                display: block;
+            }
+
+            .main-content {
+                margin-left: 0;
+                margin-top: var(--header-height);
+                padding: 1.5rem;
+            }
+        }
+
+        /* 遮罩层 */
+        .overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(4px);
+            z-index: 98;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .overlay.active {
+            display: block;
+            opacity: 1;
+        }
+
+        /* 滚动条美化 */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--light-blue);
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--primary-blue);
+        }
+    </style>
+    {% block extra_css %}{% endblock %}
+</head>
+<body>
+    <div class="app-container">
+        <!-- 顶部栏（移动端） -->
+        <header class="top-header">
+            <div class="header-content">
+                <button class="menu-toggle" id="menuToggle">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <a href="{{ url_for('main.index') }}" class="logo">
+                    <i class="fas fa-feather"></i>
+                    <span>博客</span>
+                </a>
+                <nav class="header-nav">
+                    <a href="{{ url_for('main.index') }}" class="nav-link">
+                        <i class="fas fa-home"></i>
+                        <span>首页</span>
+                    </a>
+                    {% if session.get('logged_in') %}
+                    <a href="{{ url_for('admin.dashboard') }}" class="nav-link">
+                        <i class="fas fa-cog"></i>
+                        <span>管理</span>
+                    </a>
+                    {% endif %}
+                </nav>
+            </div>
+        </header>
+
+        <!-- 遮罩层 -->
+        <div class="overlay" id="overlay"></div>
+
+        <!-- 侧边栏 -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <a href="{{ url_for('main.index') }}" class="logo">
+                    <i class="fas fa-feather"></i>
+                    <span>个人博客</span>
+                </a>
+            </div>
+
+            <div class="sidebar-content">
+                <nav class="nav-group">
+                    <h3 class="nav-group-title">导航</h3>
+                    <div class="nav-links">
+                        <a href="{{ url_for('main.index') }}" class="nav-link">
+                            <i class="fas fa-home"></i>
+                            <span>首页</span>
+                        </a>
+                        {% if session.get('logged_in') %}
+                        <a href="{{ url_for('admin.dashboard') }}" class="nav-link">
+                            <i class="fas fa-cog"></i>
+                            <span>管理中心</span>
+                        </a>
+                        {% endif %}
+                    </div>
+                </nav>
+                
+                {% if session.get('logged_in') %}
+                <nav class="nav-group">
+                    <h3 class="nav-group-title">内容管理</h3>
+                    <div class="nav-links">
+                        <a href="{{ url_for('admin.editor') }}" class="nav-link">
+                            <i class="fas fa-edit"></i>
+                            <span>写文章</span>
+                        </a>
+                    </div>
+                </nav>
+                {% endif %}
+            </div>
+
+            <div class="sidebar-footer">
+                {% if session.get('logged_in') %}
+                <form action="{{ url_for('admin.login') }}" method="POST" style="width: 100%;">
+                    <button type="submit" class="nav-link" style="width: 100%; text-align: left; background: none; border: none; cursor: pointer;">
+                        <i class="fas fa-sign-out-alt"></i>
+                        <span>退出登录</span>
+                    </button>
+                </form>
+                {% else %}
+                <a href="{{ url_for('admin.login') }}" class="nav-link">
+                    <i class="fas fa-sign-in-alt"></i>
+                    <span>登录</span>
+                </a>
+                {% endif %}
+            </div>
+        </aside>
+
+        <!-- 主内容区域 -->
+        <main class="main-content">
+            {% block content %}{% endblock %}
+        </main>
+    </div>
+
+    <script>
+        // 移动端菜单控制
+        const menuToggle = document.getElementById('menuToggle');
+        const sidebar = document.getElementById('sidebar');
+        const overlay = document.getElementById('overlay');
+
+        function toggleMenu() {
+            sidebar.classList.toggle('active');
+            overlay.classList.toggle('active');
+            document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
+        }
+
+        menuToggle.addEventListener('click', toggleMenu);
+        overlay.addEventListener('click', toggleMenu);
+
+        // 监听窗口大小变化，自动处理侧边栏状态
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768 && sidebar.classList.contains('active')) {
+                sidebar.classList.remove('active');
+                overlay.classList.remove('active');
+                document.body.style.overflow = '';
+            }
+        });
+    </script>
+
+    {% block extra_js %}{% endblock %}
+</body>
+</html>

app/templates/editor.html

@@ -0,0 +1,212 @@
+{% 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

@@ -0,0 +1,352 @@
+{% 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 %}