评论者：{comment.author.username}
+评论内容：
+{comment.body}
+
+
+
+
+ """.strip()
+
+ # 发送邮件
+ msg = EmailMultiAlternatives(
+ subject,
+ text_content,
+ settings.DEFAULT_FROM_EMAIL,
+ [comment.article.author.email]
+ )
+ msg.attach_alternative(html_content, "text/html")
+ msg.send(fail_silently=True)
+
+ logger.info(f"已向文章作者 {comment.article.author.username} 发送评论通知")
+
+ @classmethod
+ def _notify_parent_comment_author(cls, comment, site_url):
+ """通知被回复的评论作者"""
+ # 不要通知自己
+ if comment.author == comment.parent_comment.author:
+ return
+
+ # 如果父评论作者就是文章作者，已经通知过了
+ if comment.parent_comment.author == comment.article.author:
+ return
+
+ subject = f'{comment.author.username} 回复了您的评论'
+ article_url = site_url + comment.article.get_absolute_url()
+
+ text_content = f"""
+您好 {comment.parent_comment.author.username}，
+
+{comment.author.username} 回复了您在文章《{comment.article.title}》中的评论：
+
+您的评论：
+{comment.parent_comment.body}
+
+回复内容：
+{comment.body}
+
+查看回复：{article_url}#div-comment-{comment.id}
+
+---
+此邮件由系统自动发送，请勿回复。
+ """.strip()
+
+ html_content = f"""
+
+
+
+
+
+
+
+
+
+ 新评论通知
+您好 {comment.article.author.username}，
+您的文章《{comment.article.title}》收到了新评论：
+
+
+
+
+
+
+
+
+ """.strip()
+
+ msg = EmailMultiAlternatives(
+ subject,
+ text_content,
+ settings.DEFAULT_FROM_EMAIL,
+ [comment.parent_comment.author.email]
+ )
+ msg.attach_alternative(html_content, "text/html")
+ msg.send(fail_silently=True)
+
+ logger.info(f"已向评论者 {comment.parent_comment.author.username} 发送回复通知")
+
+ @classmethod
+ def _notify_admin_for_review(cls, comment, site_url):
+ """通知管理员审核评论"""
+ # 获取所有管理员邮箱
+ from django.contrib.auth import get_user_model
+ User = get_user_model()
+ admin_emails = list(User.objects.filter(
+ is_staff=True,
+ is_active=True,
+ email__isnull=False
+ ).exclude(email='').values_list('email', flat=True))
+
+ if not admin_emails:
+ return
+
+ subject = f'新评论待审核 - {comment.article.title}'
+ article_url = site_url + comment.article.get_absolute_url()
+ admin_url = site_url + '/admin/comments/comment/'
+
+ text_content = f"""
+管理员您好，
+
+有新评论需要审核：
+
+文章：《{comment.article.title}》
+评论者：{comment.author.username}
+评论时间：{comment.creation_time.strftime('%Y-%m-%d %H:%M:%S')}
+评论内容：
+{comment.body}
+
+审核评论：{admin_url}{comment.id}/change/
+查看文章：{article_url}
+
+---
+此邮件由系统自动发送，请勿回复。
+ """.strip()
+
+ html_content = f"""
+
+
+
+
+
+
+
+
+
+ 评论回复通知
+您好 {comment.parent_comment.author.username}，
+{comment.author.username} 回复了您在文章《{comment.article.title}》中的评论：
+
+
+ 您的评论：
+{comment.parent_comment.body}
+
+
+
+
+ 回复内容：
+{comment.body}
+
+
+
+
+ """.strip()
+
+ msg = EmailMultiAlternatives(
+ subject,
+ text_content,
+ settings.DEFAULT_FROM_EMAIL,
+ admin_emails
+ )
+ msg.attach_alternative(html_content, "text/html")
+ msg.send(fail_silently=True)
+
+ logger.info(f"已向 {len(admin_emails)} 位管理员发送审核通知")
diff --git a/src/djangoblog/admin_site.py b/src/djangoblog/admin_site.py
index f120405..8574b36 100644
--- a/src/djangoblog/admin_site.py
+++ b/src/djangoblog/admin_site.py
@@ -40,6 +40,7 @@ class DjangoBlogAdminSite(AdminSite):
admin_site = DjangoBlogAdminSite(name='admin')
+# Blog 核心模型
admin_site.register(Article, ArticlelAdmin)
admin_site.register(Category, CategoryAdmin)
admin_site.register(Tag, TagAdmin)
@@ -47,6 +48,25 @@ admin_site.register(Links, LinksAdmin)
admin_site.register(SideBar, SideBarAdmin)
admin_site.register(BlogSettings, BlogSettingsAdmin)
+# Blog 新功能模型
+from blog.models_version import ArticleVersion
+from blog.models_draft import ArticleDraft
+from blog.models_social import UserFollow, ArticleFavorite, ArticleLike
+from blog.models_media import MediaFile, MediaFolder, MediaFileFolder
+from blog.admin_version import ArticleVersionAdmin
+from blog.admin_draft import ArticleDraftAdmin
+from blog.admin_social import UserFollowAdmin, ArticleFavoriteAdmin, ArticleLikeAdmin
+from blog.admin_media import MediaFileAdmin, MediaFolderAdmin, MediaFileFolderAdmin
+
+admin_site.register(ArticleVersion, ArticleVersionAdmin)
+admin_site.register(ArticleDraft, ArticleDraftAdmin)
+admin_site.register(UserFollow, UserFollowAdmin)
+admin_site.register(ArticleFavorite, ArticleFavoriteAdmin)
+admin_site.register(ArticleLike, ArticleLikeAdmin)
+admin_site.register(MediaFile, MediaFileAdmin)
+admin_site.register(MediaFolder, MediaFolderAdmin)
+admin_site.register(MediaFileFolder, MediaFileFolderAdmin)
+
admin_site.register(commands, CommandsAdmin)
admin_site.register(EmailSendLog, EmailSendLogAdmin)
diff --git a/src/djangoblog/settings.py b/src/djangoblog/settings.py
index c9dc4c6..dec93b1 100644
--- a/src/djangoblog/settings.py
+++ b/src/djangoblog/settings.py
@@ -105,7 +105,6 @@ WSGI_APPLICATION = 'djangoblog.wsgi.application'
# Database
# https://docs.djangoproject.com/en/1.10/ref/settings/#databases
-
if os.environ.get('DJANGO_DB', 'mysql') == 'sqlite':
DATABASES = {
'default': {
diff --git a/src/static/blog/css/dark-mode-fixes.css b/src/static/blog/css/dark-mode-fixes.css
new file mode 100644
index 0000000..f573713
--- /dev/null
+++ b/src/static/blog/css/dark-mode-fixes.css
@@ -0,0 +1,457 @@
+/* 深色模式修复 - 覆盖 style.css 中的硬编码白色背景 */
+
+/* 覆盖所有白色背景为使用CSS变量 */
+[data-theme="dark"] .site-header,
+[data-theme="dark"] #masthead {
+ background-color: var(--nav-bg) !important;
+ color: var(--nav-text) !important;
+}
+
+[data-theme="dark"] .site-content,
+[data-theme="dark"] #content {
+ background-color: var(--bg-primary) !important;
+}
+
+[data-theme="dark"] .widget-area,
+[data-theme="dark"] #secondary {
+ background-color: var(--sidebar-bg) !important;
+}
+
+[data-theme="dark"] .entry-content,
+[data-theme="dark"] .entry-summary,
+[data-theme="dark"] .page-content,
+[data-theme="dark"] article {
+ background-color: var(--article-bg) !important;
+ color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .site {
+ background-color: var(--bg-primary) !important;
+}
+
+[data-theme="dark"] body {
+ background-color: var(--bg-primary) !important;
+ color: var(--text-primary) !important;
+}
+
+/* 修复所有白色背景的元素 */
+[data-theme="dark"] *[style*="background: #fff"],
+[data-theme="dark"] *[style*="background-color: #fff"],
+[data-theme="dark"] *[style*="background: white"],
+[data-theme="dark"] *[style*="background-color: white"] {
+ background-color: var(--bg-primary) !important;
+}
+
+/* 修复所有白色文字的元素（排除按钮和链接） */
+[data-theme="dark"] *[style*="color: #fff"]:not(.btn):not(a),
+[data-theme="dark"] *[style*="color: white"]:not(.btn):not(a) {
+ color: var(--text-primary) !important;
+}
+
+/* 评论区修复 */
+[data-theme="dark"] #comments,
+[data-theme="dark"] .comment-list,
+[data-theme="dark"] .comment,
+[data-theme="dark"] .comment-body,
+[data-theme="dark"] .comment-content {
+ background-color: var(--comment-bg) !important;
+ color: var(--text-primary) !important;
+ border-color: var(--comment-border) !important;
+}
+
+/* 导航菜单修复 */
+[data-theme="dark"] .nav-menu,
+[data-theme="dark"] .main-navigation,
+[data-theme="dark"] #site-navigation {
+ background-color: var(--nav-bg) !important;
+}
+
+[data-theme="dark"] .nav-menu li,
+[data-theme="dark"] .main-navigation li {
+ background-color: transparent !important;
+}
+
+[data-theme="dark"] .nav-menu a,
+[data-theme="dark"] .main-navigation a {
+ color: var(--nav-text) !important;
+}
+
+[data-theme="dark"] .nav-menu a:hover,
+[data-theme="dark"] .main-navigation a:hover {
+ background-color: var(--nav-hover-bg) !important;
+ color: var(--link-hover) !important;
+}
+
+/* Widget 修复 */
+[data-theme="dark"] .widget {
+ background-color: var(--sidebar-bg) !important;
+ color: var(--text-primary) !important;
+ border-color: var(--sidebar-border) !important;
+}
+
+[data-theme="dark"] .widget-title {
+ color: var(--text-primary) !important;
+ border-color: var(--border-primary) !important;
+}
+
+[data-theme="dark"] .widget ul,
+[data-theme="dark"] .widget ol {
+ background-color: transparent !important;
+}
+
+[data-theme="dark"] .widget a {
+ color: var(--link-color) !important;
+}
+
+/* 文章列表修复 */
+[data-theme="dark"] .hentry,
+[data-theme="dark"] .post,
+[data-theme="dark"] .page {
+ background-color: var(--card-bg) !important;
+ color: var(--text-primary) !important;
+ border-color: var(--card-border) !important;
+}
+
+[data-theme="dark"] .entry-header {
+ background-color: transparent !important;
+}
+
+[data-theme="dark"] .entry-title a {
+ color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .entry-title a:hover {
+ color: var(--link-hover) !important;
+}
+
+[data-theme="dark"] .entry-meta,
+[data-theme="dark"] .entry-footer {
+ color: var(--text-secondary) !important;
+ background-color: transparent !important;
+}
+
+/* 搜索框修复 */
+[data-theme="dark"] #searchform,
+[data-theme="dark"] .search-form {
+ background-color: var(--input-bg) !important;
+}
+
+[data-theme="dark"] #s,
+[data-theme="dark"] .search-field {
+ background-color: var(--input-bg) !important;
+ color: var(--input-text) !important;
+ border-color: var(--input-border) !important;
+}
+
+/* 分页修复 */
+[data-theme="dark"] .pagination,
+[data-theme="dark"] .page-links,
+[data-theme="dark"] .nav-links {
+ background-color: transparent !important;
+}
+
+[data-theme="dark"] .pagination a,
+[data-theme="dark"] .page-links a,
+[data-theme="dark"] .nav-links a {
+ background-color: var(--card-bg) !important;
+ color: var(--link-color) !important;
+ border-color: var(--border-primary) !important;
+}
+
+[data-theme="dark"] .pagination a:hover,
+[data-theme="dark"] .page-links a:hover,
+[data-theme="dark"] .nav-links a:hover {
+ background-color: var(--bg-hover) !important;
+}
+
+[data-theme="dark"] .pagination .current,
+[data-theme="dark"] .page-links > .current {
+ background-color: var(--accent-primary) !important;
+ color: var(--text-inverse) !important;
+}
+
+/* 面包屑导航修复 */
+[data-theme="dark"] .breadcrumbs,
+[data-theme="dark"] .breadcrumb {
+ background-color: var(--bg-secondary) !important;
+ color: var(--text-secondary) !important;
+}
+
+/* 侧边栏小工具特定修复 */
+[data-theme="dark"] #calendar_wrap {
+ background-color: var(--card-bg) !important;
+}
+
+[data-theme="dark"] #calendar_wrap table,
+[data-theme="dark"] #calendar_wrap th,
+[data-theme="dark"] #calendar_wrap td {
+ background-color: transparent !important;
+ color: var(--text-primary) !important;
+ border-color: var(--border-primary) !important;
+}
+
+/* 标签云修复 */
+[data-theme="dark"] .tagcloud a,
+[data-theme="dark"] .wp_widget_tag_cloud a {
+ background-color: var(--bg-tertiary) !important;
+ color: var(--text-primary) !important;
+ border-color: var(--border-primary) !important;
+}
+
+[data-theme="dark"] .tagcloud a:hover,
+[data-theme="dark"] .wp_widget_tag_cloud a:hover {
+ background-color: var(--bg-hover) !important;
+ color: var(--link-hover) !important;
+}
+
+/* 最近评论修复 */
+[data-theme="dark"] .recentcomments {
+ background-color: transparent !important;
+ color: var(--text-primary) !important;
+}
+
+/* RSS 链接修复 */
+[data-theme="dark"] .rss-date,
+[data-theme="dark"] .rssSummary {
+ color: var(--text-secondary) !important;
+}
+
+/* 存档页面修复 */
+[data-theme="dark"] .archive-meta,
+[data-theme="dark"] .page-header {
+ background-color: var(--bg-secondary) !important;
+ color: var(--text-primary) !important;
+ border-color: var(--border-primary) !important;
+}
+
+/* 404 页面修复 */
+[data-theme="dark"] .error404 .widget {
+ background-color: var(--card-bg) !important;
+}
+
+/* 图片说明修复 */
+[data-theme="dark"] .wp-caption,
+[data-theme="dark"] .gallery-caption {
+ background-color: var(--bg-secondary) !important;
+ color: var(--text-secondary) !important;
+}
+
+[data-theme="dark"] .wp-caption-text {
+ color: var(--text-secondary) !important;
+}
+
+/* 嵌入内容修复 */
+[data-theme="dark"] embed,
+[data-theme="dark"] iframe,
+[data-theme="dark"] object {
+ border-color: var(--border-primary) !important;
+}
+
+/* 按钮修复 - 确保按钮上的白色文字不被改变 */
+[data-theme="dark"] .btn,
+[data-theme="dark"] button,
+[data-theme="dark"] input[type="submit"],
+[data-theme="dark"] input[type="button"],
+[data-theme="dark"] .comment-reply-link {
+ color: inherit;
+}
+
+[data-theme="dark"] .btn-primary,
+[data-theme="dark"] .btn-success,
+[data-theme="dark"] .btn-info,
+[data-theme="dark"] .btn-warning,
+[data-theme="dark"] .btn-danger {
+ color: var(--text-inverse) !important;
+}
+
+/* Sticky post 修复 */
+[data-theme="dark"] .sticky {
+ background-color: var(--bg-secondary) !important;
+ border-color: var(--accent-primary) !important;
+}
+
+/* 引用文字修复 */
+[data-theme="dark"] cite {
+ color: var(--text-secondary) !important;
+}
+
+/* 列表修复 */
+[data-theme="dark"] ul,
+[data-theme="dark"] ol,
+[data-theme="dark"] dl {
+ color: var(--text-primary) !important;
+}
+
+/* 定义列表修复 */
+[data-theme="dark"] dt {
+ color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] dd {
+ color: var(--text-secondary) !important;
+}
+
+/* 强调文本修复 */
+[data-theme="dark"] strong,
+[data-theme="dark"] b {
+ color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] em,
+[data-theme="dark"] i {
+ color: var(--text-primary) !important;
+}
+
+/* 删除线修复 */
+[data-theme="dark"] del,
+[data-theme="dark"] s {
+ color: var(--text-tertiary) !important;
+}
+
+/* 下划线修复 */
+[data-theme="dark"] ins,
+[data-theme="dark"] u {
+ color: var(--text-primary) !important;
+ background-color: var(--bg-tertiary) !important;
+}
+
+/* 小号文字修复 */
+[data-theme="dark"] small {
+ color: var(--text-secondary) !important;
+}
+
+/* 标记文字修复 */
+[data-theme="dark"] mark {
+ background-color: var(--bg-tertiary) !important;
+ color: var(--text-primary) !important;
+}
+
+/* Pygments 代码高亮修复 */
+[data-theme="dark"] .highlight,
+[data-theme="dark"] .codehilite {
+ background-color: var(--code-block-bg) !important;
+}
+
+[data-theme="dark"] .highlight pre,
+[data-theme="dark"] .codehilite pre {
+ background-color: transparent !important;
+}
+
+/* 站点标题和描述修复 */
+[data-theme="dark"] .site-title,
+[data-theme="dark"] .site-description {
+ color: var(--nav-text) !important;
+}
+
+[data-theme="dark"] .site-title a {
+ color: var(--nav-text) !important;
+}
+
+[data-theme="dark"] .site-title a:hover {
+ color: var(--link-hover) !important;
+}
+
+/* 页面容器修复 */
+[data-theme="dark"] #page,
+[data-theme="dark"] .site,
+[data-theme="dark"] #main,
+[data-theme="dark"] .wrapper {
+ background-color: var(--bg-primary) !important;
+}
+
+/* 修复特定的警告框背景 */
+[data-theme="dark"] *[style*="background: #fff9c0"],
+[data-theme="dark"] *[style*="background-color: #fff9c0"] {
+ background-color: rgba(255, 249, 192, 0.2) !important;
+ color: var(--text-primary) !important;
+}
+
+/* 修复特定的警告框背景 */
+[data-theme="dark"] *[style*="background: #fff3cd"],
+[data-theme="dark"] *[style*="background-color: #fff3cd"] {
+ background-color: rgba(255, 243, 205, 0.2) !important;
+ color: var(--text-primary) !important;
+}
+
+/* 补充：文章卡片内部元素修复 */
+[data-theme="dark"] .post-thumbnail,
+[data-theme="dark"] .entry-thumbnail {
+ background-color: transparent !important;
+}
+
+/* 补充：作者信息框修复 */
+[data-theme="dark"] .author-info,
+[data-theme="dark"] .author-bio {
+ background-color: var(--bg-secondary) !important;
+ color: var(--text-primary) !important;
+ border-color: var(--border-primary) !important;
+}
+
+/* 补充：相关文章修复 */
+[data-theme="dark"] .related-posts,
+[data-theme="dark"] .related-articles {
+ background-color: var(--bg-secondary) !important;
+}
+
+/* 补充：分类和标签显示修复 */
+[data-theme="dark"] .cat-links,
+[data-theme="dark"] .tags-links {
+ color: var(--text-secondary) !important;
+}
+
+[data-theme="dark"] .cat-links a,
+[data-theme="dark"] .tags-links a {
+ color: var(--link-color) !important;
+ background-color: var(--bg-tertiary) !important;
+}
+
+/* 补充：阅读更多链接修复 */
+[data-theme="dark"] .more-link {
+ color: var(--link-color) !important;
+}
+
+[data-theme="dark"] .more-link:hover {
+ color: var(--link-hover) !important;
+}
+
+/* 补充：表单元素标签修复 */
+[data-theme="dark"] label {
+ color: var(--text-primary) !important;
+}
+
+/* 补充：占位符修复 */
+[data-theme="dark"] ::placeholder {
+ color: var(--input-placeholder) !important;
+ opacity: 1;
+}
+
+[data-theme="dark"] :-ms-input-placeholder {
+ color: var(--input-placeholder) !important;
+}
+
+[data-theme="dark"] ::-ms-input-placeholder {
+ color: var(--input-placeholder) !important;
+}
+
+/* 补充：选中文本修复 */
+[data-theme="dark"] ::selection {
+ background-color: var(--accent-primary) !important;
+ color: var(--text-inverse) !important;
+}
+
+[data-theme="dark"] ::-moz-selection {
+ background-color: var(--accent-primary) !important;
+ color: var(--text-inverse) !important;
+}
+
+/* 修复 hfeed 类容器 */
+[data-theme="dark"] .hfeed {
+ background-color: var(--bg-primary) !important;
+}
+
+/* 修复所有可能的白色背景覆盖 */
+[data-theme="dark"] .site-header,
+[data-theme="dark"] .site-content,
+[data-theme="dark"] .site-footer {
+ background-color: transparent !important;
+}
diff --git a/src/static/blog/css/media-picker.css b/src/static/blog/css/media-picker.css
new file mode 100644
index 0000000..14877bc
--- /dev/null
+++ b/src/static/blog/css/media-picker.css
@@ -0,0 +1,296 @@
+/* 多媒体选择器样式 */
+
+.media-picker-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10000;
+}
+
+.media-picker-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+}
+
+.media-picker-container {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 90%;
+ max-width: 1000px;
+ height: 80%;
+ max-height: 700px;
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+ display: flex;
+ flex-direction: column;
+}
+
+.media-picker-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px;
+ border-bottom: 1px solid #e0e0e0;
+}
+
+.media-picker-header h3 {
+ margin: 0;
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.media-picker-close {
+ background: none;
+ border: none;
+ font-size: 28px;
+ cursor: pointer;
+ color: #666;
+ padding: 0;
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+}
+
+.media-picker-close:hover {
+ color: #333;
+}
+
+.media-picker-toolbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px 20px;
+ border-bottom: 1px solid #e0e0e0;
+}
+
+.media-picker-search input {
+ padding: 8px 15px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ width: 250px;
+ font-size: 14px;
+}
+
+.btn-upload {
+ display: inline-block;
+ padding: 8px 20px;
+ background: #4CAF50;
+ color: white;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background 0.3s;
+}
+
+.btn-upload:hover {
+ background: #45a049;
+}
+
+.media-picker-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 20px;
+}
+
+.media-files-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 15px;
+}
+
+.media-file-item {
+ border: 2px solid #e0e0e0;
+ border-radius: 8px;
+ padding: 10px;
+ cursor: pointer;
+ transition: all 0.3s;
+ position: relative;
+ background: white;
+}
+
+.media-file-item:hover {
+ border-color: #4CAF50;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.media-file-item.selected {
+ border-color: #4CAF50;
+ background: #f1f8f4;
+}
+
+.media-file-preview {
+ width: 100%;
+ height: 120px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #f5f5f5;
+ border-radius: 4px;
+ overflow: hidden;
+ margin-bottom: 8px;
+}
+
+.media-file-preview img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: cover;
+}
+
+.file-icon {
+ font-size: 48px;
+}
+
+.media-file-info {
+ text-align: center;
+}
+
+.media-file-name {
+ font-size: 13px;
+ font-weight: 500;
+ color: #333;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 4px;
+}
+
+.media-file-meta {
+ font-size: 12px;
+ color: #999;
+}
+
+.media-file-check {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 24px;
+ height: 24px;
+ background: #4CAF50;
+ border-radius: 50%;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-weight: bold;
+}
+
+.media-file-item.selected .media-file-check {
+ display: flex;
+}
+
+.media-picker-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px 20px;
+ border-top: 1px solid #e0e0e0;
+}
+
+.media-picker-pagination {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.media-picker-pagination button {
+ padding: 6px 15px;
+ border: 1px solid #ddd;
+ background: white;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+}
+
+.media-picker-pagination button:hover:not(:disabled) {
+ background: #f5f5f5;
+}
+
+.media-picker-pagination button:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.media-picker-actions {
+ display: flex;
+ gap: 10px;
+}
+
+.btn-cancel, .btn-select {
+ padding: 8px 20px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background 0.3s;
+}
+
+.btn-cancel {
+ background: #f0f0f0;
+ color: #333;
+}
+
+.btn-cancel:hover {
+ background: #e0e0e0;
+}
+
+.btn-select {
+ background: #4CAF50;
+ color: white;
+}
+
+.btn-select:hover:not(:disabled) {
+ background: #45a049;
+}
+
+.btn-select:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.loading, .error, .empty {
+ grid-column: 1 / -1;
+ text-align: center;
+ padding: 40px;
+ color: #999;
+ font-size: 14px;
+}
+
+.error {
+ color: #F44336;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+ .media-picker-container {
+ width: 95%;
+ height: 90%;
+ }
+
+ .media-files-grid {
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+ gap: 10px;
+ }
+
+ .media-file-preview {
+ height: 80px;
+ }
+
+ .media-picker-toolbar {
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .media-picker-search input {
+ width: 100%;
+ }
+}
diff --git a/src/static/blog/css/responsive.css b/src/static/blog/css/responsive.css
new file mode 100644
index 0000000..9192b45
--- /dev/null
+++ b/src/static/blog/css/responsive.css
@@ -0,0 +1,750 @@
+/* 响应式布局优化
+ * 提供完整的移动端、平板和桌面端适配
+ * 基于Bootstrap断点扩展
+ */
+
+/* ==================== 断点定义 ==================== */
+
+/*
+xs: <576px (超小屏 - 手机竖屏)
+sm: ≥576px (小屏 - 手机横屏)
+md: ≥768px (中屏 - 平板竖屏)
+lg: ≥992px (大屏 - 平板横屏/小笔记本)
+xl: ≥1200px (超大屏 - 桌面)
+xxl: ≥1400px (超超大屏 - 大桌面)
+*/
+
+/* ==================== 基础布局 ==================== */
+
+/* 容器最大宽度 */
+.container {
+ width: 100%;
+ padding-right: 15px;
+ padding-left: 15px;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+@media (min-width: 576px) {
+ .container {
+ max-width: 540px;
+ }
+}
+
+@media (min-width: 768px) {
+ .container {
+ max-width: 720px;
+ }
+}
+
+@media (min-width: 992px) {
+ .container {
+ max-width: 960px;
+ }
+}
+
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1140px;
+ }
+}
+
+@media (min-width: 1400px) {
+ .container {
+ max-width: 1320px;
+ }
+}
+
+/* 流式容器 */
+.container-fluid {
+ width: 100%;
+ padding-right: 15px;
+ padding-left: 15px;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+/* ==================== 导航栏 ==================== */
+
+.navbar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 15px;
+}
+
+.navbar-brand {
+ font-size: 1.25rem;
+ white-space: nowrap;
+}
+
+.navbar-toggler {
+ display: none;
+ padding: 0.25rem 0.75rem;
+ font-size: 1.25rem;
+ border: 1px solid var(--border-primary, #e0e0e0);
+ border-radius: 0.25rem;
+ background: transparent;
+ cursor: pointer;
+}
+
+.navbar-collapse {
+ flex-grow: 1;
+ align-items: center;
+}
+
+.navbar-nav {
+ display: flex;
+ flex-direction: row;
+ list-style: none;
+ padding-left: 0;
+ margin-bottom: 0;
+}
+
+.nav-item {
+ margin: 0 10px;
+}
+
+/* 移动端导航 */
+@media (max-width: 991px) {
+ .navbar-toggler {
+ display: block;
+ }
+
+ .navbar-collapse {
+ display: none;
+ width: 100%;
+ }
+
+ .navbar-collapse.show {
+ display: block;
+ }
+
+ .navbar-nav {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .nav-item {
+ margin: 5px 0;
+ width: 100%;
+ }
+
+ .nav-link {
+ display: block;
+ padding: 10px 15px;
+ }
+}
+
+/* ==================== 文章列表 ==================== */
+
+.article-list {
+ display: grid;
+ gap: 20px;
+ grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+ .article-list.grid-2 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 992px) {
+ .article-list.grid-3 {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+/* 文章卡片 */
+.article-card {
+ display: flex;
+ flex-direction: column;
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.article-card-img {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+}
+
+@media (max-width: 767px) {
+ .article-card-img {
+ height: 150px;
+ }
+}
+
+.article-card-body {
+ padding: 15px;
+}
+
+.article-card-title {
+ font-size: 1.25rem;
+ margin-bottom: 10px;
+}
+
+@media (max-width: 575px) {
+ .article-card-title {
+ font-size: 1.1rem;
+ }
+}
+
+/* ==================== 侧边栏布局 ==================== */
+
+.main-content-wrapper {
+ display: grid;
+ gap: 30px;
+ grid-template-columns: 1fr;
+}
+
+@media (min-width: 992px) {
+ .main-content-wrapper.with-sidebar {
+ grid-template-columns: 1fr 300px;
+ }
+
+ .main-content-wrapper.sidebar-left {
+ grid-template-columns: 300px 1fr;
+ }
+}
+
+.sidebar {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+/* 移动端侧边栏 */
+@media (max-width: 991px) {
+ .sidebar {
+ order: -1; /* 移到内容上方 */
+ }
+
+ .sidebar-widget {
+ margin-bottom: 20px;
+ }
+}
+
+/* ==================== 表格响应式 ==================== */
+
+.table-responsive {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 767px) {
+ table {
+ font-size: 0.875rem;
+ }
+
+ table th,
+ table td {
+ padding: 8px 4px;
+ }
+
+ /* 隐藏不太重要的列 */
+ table .hide-mobile {
+ display: none;
+ }
+}
+
+/* ==================== 表单 ==================== */
+
+.form-group {
+ margin-bottom: 15px;
+}
+
+.form-control {
+ display: block;
+ width: 100%;
+ padding: 8px 12px;
+ font-size: 1rem;
+ line-height: 1.5;
+ border: 1px solid var(--input-border, #d0d0d0);
+ border-radius: 4px;
+}
+
+@media (max-width: 575px) {
+ .form-control {
+ font-size: 16px; /* 防止iOS自动缩放 */
+ }
+}
+
+/* 按钮组响应式 */
+.btn-group {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+@media (max-width: 575px) {
+ .btn-group {
+ flex-direction: column;
+ }
+
+ .btn-group .btn {
+ width: 100%;
+ }
+}
+
+/* ==================== 图片响应式 ==================== */
+
+img {
+ max-width: 100%;
+ height: auto;
+}
+
+.img-responsive {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
+
+/* 图片网格 */
+.image-grid {
+ display: grid;
+ gap: 15px;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+@media (max-width: 767px) {
+ .image-grid {
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 10px;
+ }
+}
+
+@media (max-width: 575px) {
+ .image-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+/* ==================== 文字排版 ==================== */
+
+/* 标题大小 */
+h1 {
+ font-size: 2.5rem;
+}
+
+h2 {
+ font-size: 2rem;
+}
+
+h3 {
+ font-size: 1.75rem;
+}
+
+h4 {
+ font-size: 1.5rem;
+}
+
+h5 {
+ font-size: 1.25rem;
+}
+
+h6 {
+ font-size: 1rem;
+}
+
+@media (max-width: 767px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ h2 {
+ font-size: 1.75rem;
+ }
+
+ h3 {
+ font-size: 1.5rem;
+ }
+
+ h4 {
+ font-size: 1.25rem;
+ }
+}
+
+@media (max-width: 575px) {
+ h1 {
+ font-size: 1.75rem;
+ }
+
+ h2 {
+ font-size: 1.5rem;
+ }
+
+ h3 {
+ font-size: 1.25rem;
+ }
+}
+
+/* 段落间距 */
+p {
+ margin-bottom: 1rem;
+ line-height: 1.6;
+}
+
+@media (max-width: 575px) {
+ p {
+ line-height: 1.7;
+ }
+}
+
+/* ==================== 间距工具类 ==================== */
+
+/* 移动端减少间距 */
+@media (max-width: 767px) {
+ .mt-md-5 {
+ margin-top: 3rem !important;
+ }
+
+ .mb-md-5 {
+ margin-bottom: 3rem !important;
+ }
+
+ .p-md-5 {
+ padding: 2rem !important;
+ }
+}
+
+@media (max-width: 575px) {
+ .mt-sm-4 {
+ margin-top: 1.5rem !important;
+ }
+
+ .mb-sm-4 {
+ margin-bottom: 1.5rem !important;
+ }
+
+ .p-sm-4 {
+ padding: 1rem !important;
+ }
+}
+
+/* ==================== 显示/隐藏工具类 ==================== */
+
+/* 移动端隐藏 */
+@media (max-width: 575px) {
+ .hide-xs {
+ display: none !important;
+ }
+}
+
+@media (max-width: 767px) {
+ .hide-sm {
+ display: none !important;
+ }
+}
+
+@media (max-width: 991px) {
+ .hide-md {
+ display: none !important;
+ }
+}
+
+/* 移动端显示 */
+.show-xs {
+ display: none !important;
+}
+
+@media (max-width: 575px) {
+ .show-xs {
+ display: block !important;
+ }
+}
+
+.show-sm {
+ display: none !important;
+}
+
+@media (max-width: 767px) {
+ .show-sm {
+ display: block !important;
+ }
+}
+
+/* ==================== 评论区 ==================== */
+
+.comment-list {
+ list-style: none;
+ padding-left: 0;
+}
+
+.comment-item {
+ padding: 15px;
+ margin-bottom: 15px;
+ border-radius: 8px;
+}
+
+.comment-reply {
+ margin-left: 40px;
+}
+
+@media (max-width: 575px) {
+ .comment-reply {
+ margin-left: 20px;
+ }
+
+ .comment-item {
+ padding: 10px;
+ }
+}
+
+/* ==================== 分页 ==================== */
+
+.pagination {
+ display: flex;
+ justify-content: center;
+ list-style: none;
+ padding: 0;
+ gap: 5px;
+}
+
+.pagination li {
+ display: inline-block;
+}
+
+.pagination a,
+.pagination span {
+ display: block;
+ padding: 8px 12px;
+ border: 1px solid var(--border-primary, #e0e0e0);
+ border-radius: 4px;
+}
+
+@media (max-width: 575px) {
+ .pagination a,
+ .pagination span {
+ padding: 6px 8px;
+ font-size: 0.875rem;
+ }
+
+ .pagination .page-text {
+ display: none; /* 隐藏"上一页"/"下一页"文字，只显示箭头 */
+ }
+}
+
+/* ==================== 模态框 ==================== */
+
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1000;
+}
+
+.modal-dialog {
+ position: relative;
+ margin: 30px auto;
+ max-width: 500px;
+ padding: 0 15px;
+}
+
+@media (min-width: 576px) {
+ .modal-dialog {
+ max-width: 500px;
+ }
+}
+
+@media (min-width: 992px) {
+ .modal-dialog.modal-lg {
+ max-width: 800px;
+ }
+}
+
+@media (max-width: 575px) {
+ .modal-dialog {
+ margin: 10px auto;
+ max-width: 100%;
+ }
+
+ .modal-content {
+ border-radius: 0;
+ }
+}
+
+/* ==================== 搜索框 ==================== */
+
+.search-form {
+ display: flex;
+ gap: 10px;
+}
+
+@media (max-width: 575px) {
+ .search-form {
+ flex-direction: column;
+ }
+
+ .search-form input {
+ width: 100%;
+ }
+
+ .search-form button {
+ width: 100%;
+ }
+}
+
+/* ==================== 标签云 ==================== */
+
+.tag-cloud {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.tag {
+ display: inline-block;
+ padding: 4px 10px;
+ border-radius: 15px;
+ font-size: 0.875rem;
+}
+
+@media (max-width: 575px) {
+ .tag {
+ font-size: 0.75rem;
+ padding: 3px 8px;
+ }
+}
+
+/* ==================== 面包屑 ==================== */
+
+.breadcrumb {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ padding: 10px 15px;
+ margin-bottom: 1rem;
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+ content: "/";
+ padding: 0 8px;
+}
+
+@media (max-width: 575px) {
+ .breadcrumb {
+ font-size: 0.875rem;
+ padding: 8px 10px;
+ }
+
+ .breadcrumb-item + .breadcrumb-item::before {
+ padding: 0 4px;
+ }
+}
+
+/* ==================== 卡片 ==================== */
+
+.card {
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.card-header {
+ padding: 15px;
+ border-bottom: 1px solid var(--border-primary, #e0e0e0);
+}
+
+.card-body {
+ padding: 15px;
+}
+
+.card-footer {
+ padding: 15px;
+ border-top: 1px solid var(--border-primary, #e0e0e0);
+}
+
+@media (max-width: 575px) {
+ .card-header,
+ .card-body,
+ .card-footer {
+ padding: 10px;
+ }
+}
+
+/* ==================== 页脚 ==================== */
+
+footer {
+ padding: 40px 0 20px;
+}
+
+.footer-content {
+ display: grid;
+ gap: 30px;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+@media (max-width: 767px) {
+ footer {
+ padding: 30px 0 15px;
+ }
+
+ .footer-content {
+ grid-template-columns: 1fr;
+ gap: 20px;
+ text-align: center;
+ }
+}
+
+/* ==================== 触摸优化 ==================== */
+
+/* 增大移动端可点击区域 */
+@media (max-width: 767px) {
+ a,
+ button,
+ .clickable {
+ min-height: 44px;
+ min-width: 44px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .nav-link,
+ .btn {
+ padding: 12px 20px;
+ }
+}
+
+/* ==================== 性能优化 ==================== */
+
+/* GPU加速 */
+.transform-gpu {
+ transform: translateZ(0);
+ backface-visibility: hidden;
+ perspective: 1000px;
+}
+
+/* 减少重绘 */
+img,
+video {
+ will-change: transform;
+}
+
+/* ==================== 打印样式 ==================== */
+
+@media print {
+ .no-print,
+ .navbar,
+ .sidebar,
+ .comments,
+ footer {
+ display: none !important;
+ }
+
+ .container {
+ max-width: 100%;
+ }
+
+ a {
+ text-decoration: underline;
+ }
+
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+}
diff --git a/src/static/blog/css/theme.css b/src/static/blog/css/theme.css
new file mode 100644
index 0000000..25eb971
--- /dev/null
+++ b/src/static/blog/css/theme.css
@@ -0,0 +1,876 @@
+/* 深色主题支持
+ * 提供浅色/深色主题切换功能
+ * 支持系统主题自动检测
+ * 优化版本：完整的元素覆盖、流畅的动画、防止FOUC
+ */
+
+/* ==================== CSS变量定义 ==================== */
+
+/* 浅色主题（默认） */
+:root {
+ /* 主要颜色 */
+ --bg-primary: #ffffff;
+ --bg-secondary: #f8f9fa;
+ --bg-tertiary: #e9ecef;
+ --bg-hover: #f0f0f0;
+ --bg-active: #e0e0e0;
+
+ /* 文字颜色 */
+ --text-primary: #212529;
+ --text-secondary: #6c757d;
+ --text-tertiary: #adb5bd;
+ --text-inverse: #ffffff;
+ --text-muted: #868e96;
+
+ /* 边框颜色 */
+ --border-primary: #dee2e6;
+ --border-secondary: #ced4da;
+ --border-focus: #4CAF50;
+
+ /* 强调色 */
+ --accent-primary: #4CAF50;
+ --accent-secondary: #2196F3;
+ --accent-warning: #FF9800;
+ --accent-danger: #F44336;
+ --accent-info: #00BCD4;
+ --accent-success: #4CAF50;
+
+ /* 阴影 */
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+ --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
+ --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.18);
+
+ /* 卡片 */
+ --card-bg: #ffffff;
+ --card-border: #dee2e6;
+
+ /* 代码块 */
+ --code-bg: #f8f9fa;
+ --code-text: #e83e8c;
+ --code-block-bg: #2d2d2d;
+ --code-block-text: #f8f8f2;
+
+ /* 输入框 */
+ --input-bg: #ffffff;
+ --input-border: #ced4da;
+ --input-text: #495057;
+ --input-placeholder: #6c757d;
+ --input-disabled-bg: #e9ecef;
+
+ /* 导航栏 */
+ --nav-bg: #ffffff;
+ --nav-text: #495057;
+ --nav-hover-bg: #f8f9fa;
+ --nav-border: #dee2e6;
+
+ /* 侧边栏 */
+ --sidebar-bg: #f8f9fa;
+ --sidebar-border: #dee2e6;
+
+ /* 页脚 */
+ --footer-bg: #2c3e50;
+ --footer-text: #ecf0f1;
+
+ /* 链接 */
+ --link-color: #2196F3;
+ --link-hover: #1976D2;
+ --link-visited: #9C27B0;
+
+ /* 文章内容 */
+ --article-bg: #ffffff;
+ --article-border: #dee2e6;
+
+ /* 评论区 */
+ --comment-bg: #ffffff;
+ --comment-border: #dee2e6;
+ --comment-author-bg: #e7f3ff;
+
+ /* 其他 */
+ --overlay-bg: rgba(0, 0, 0, 0.5);
+ --scrollbar-bg: #f1f3f5;
+ --scrollbar-thumb: #adb5bd;
+ --scrollbar-thumb-hover: #868e96;
+
+ /* 图片 */
+ --img-opacity: 1;
+ --img-brightness: 1;
+}
+
+/* 深色主题 */
+[data-theme="dark"] {
+ /* 主要颜色 */
+ --bg-primary: #121212;
+ --bg-secondary: #1e1e1e;
+ --bg-tertiary: #2d2d2d;
+ --bg-hover: #252525;
+ --bg-active: #333333;
+
+ /* 文字颜色 */
+ --text-primary: #e4e6eb;
+ --text-secondary: #b0b3b8;
+ --text-tertiary: #8a8d91;
+ --text-inverse: #121212;
+ --text-muted: #9ca3af;
+
+ /* 边框颜色 */
+ --border-primary: #3a3a3a;
+ --border-secondary: #4a4a4a;
+ --border-focus: #66BB6A;
+
+ /* 强调色 */
+ --accent-primary: #66BB6A;
+ --accent-secondary: #42A5F5;
+ --accent-warning: #FFA726;
+ --accent-danger: #EF5350;
+ --accent-info: #26C6DA;
+ --accent-success: #66BB6A;
+
+ /* 阴影 */
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
+ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
+ --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
+ --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.7);
+
+ /* 卡片 */
+ --card-bg: #1e1e1e;
+ --card-border: #3a3a3a;
+
+ /* 代码块 */
+ --code-bg: #2d2d2d;
+ --code-text: #ff79c6;
+ --code-block-bg: #1a1a1a;
+ --code-block-text: #e6e6e6;
+
+ /* 输入框 */
+ --input-bg: #2d2d2d;
+ --input-border: #4a4a4a;
+ --input-text: #e4e6eb;
+ --input-placeholder: #8a8d91;
+ --input-disabled-bg: #252525;
+
+ /* 导航栏 */
+ --nav-bg: #1e1e1e;
+ --nav-text: #e4e6eb;
+ --nav-hover-bg: #252525;
+ --nav-border: #3a3a3a;
+
+ /* 侧边栏 */
+ --sidebar-bg: #1e1e1e;
+ --sidebar-border: #3a3a3a;
+
+ /* 页脚 */
+ --footer-bg: #1a1a1a;
+ --footer-text: #b0b3b8;
+
+ /* 链接 */
+ --link-color: #58a6ff;
+ --link-hover: #79c0ff;
+ --link-visited: #bc8cff;
+
+ /* 文章内容 */
+ --article-bg: #1e1e1e;
+ --article-border: #3a3a3a;
+
+ /* 评论区 */
+ --comment-bg: #1e1e1e;
+ --comment-border: #3a3a3a;
+ --comment-author-bg: #1a3a52;
+
+ /* 其他 */
+ --overlay-bg: rgba(0, 0, 0, 0.75);
+ --scrollbar-bg: #1e1e1e;
+ --scrollbar-thumb: #4a4a4a;
+ --scrollbar-thumb-hover: #5a5a5a;
+
+ /* 图片 */
+ --img-opacity: 0.85;
+ --img-brightness: 0.9;
+}
+
+/* ==================== 过渡动画 ==================== */
+
+/* 平滑过渡 - 应用于根元素 */
+html.theme-transitioning,
+html.theme-transitioning *,
+html.theme-transitioning *::before,
+html.theme-transitioning *::after {
+ transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+ color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+ border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+ box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+/* ==================== 基础样式应用 ==================== */
+
+html {
+ color-scheme: light;
+}
+
+[data-theme="dark"] {
+ color-scheme: dark;
+}
+
+body {
+ background-color: var(--bg-primary);
+ color: var(--text-primary);
+}
+
+/* 链接 */
+a {
+ color: var(--link-color);
+ transition: color 0.2s ease;
+}
+
+a:hover {
+ color: var(--link-hover);
+}
+
+a:visited {
+ color: var(--link-visited);
+}
+
+/* ==================== 布局元素 ==================== */
+
+/* 容器 */
+.container,
+.container-fluid {
+ background-color: var(--bg-primary);
+}
+
+/* 行和列 */
+.row {
+ color: var(--text-primary);
+}
+
+/* ==================== 卡片组件 ==================== */
+
+.card,
+.article-card,
+.comment-card,
+.panel,
+.panel-default,
+.well {
+ background-color: var(--card-bg);
+ border-color: var(--card-border);
+ box-shadow: var(--shadow-sm);
+ color: var(--text-primary);
+}
+
+.card:hover,
+.article-card:hover {
+ box-shadow: var(--shadow-md);
+}
+
+.card-header,
+.card-footer,
+.panel-heading,
+.panel-footer {
+ background-color: var(--bg-secondary);
+ border-color: var(--border-primary);
+ color: var(--text-primary);
+}
+
+.card-body,
+.panel-body {
+ background-color: var(--card-bg);
+ color: var(--text-primary);
+}
+
+/* ==================== 代码样式 ==================== */
+
+code {
+ background-color: var(--code-bg);
+ color: var(--code-text);
+ padding: 2px 6px;
+ border-radius: 4px;
+}
+
+pre {
+ background-color: var(--code-block-bg);
+ color: var(--code-block-text);
+ padding: 16px;
+ border-radius: 6px;
+ overflow-x: auto;
+ border: 1px solid var(--border-primary);
+}
+
+pre code {
+ background-color: transparent;
+ color: inherit;
+ padding: 0;
+}
+
+/* ==================== 表单元素 ==================== */
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="url"],
+input[type="tel"],
+input[type="date"],
+textarea,
+select,
+.form-control {
+ background-color: var(--input-bg);
+ border-color: var(--input-border);
+ color: var(--input-text);
+ transition: all 0.2s ease;
+}
+
+input::placeholder,
+textarea::placeholder {
+ color: var(--input-placeholder);
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+.form-control:focus {
+ border-color: var(--border-focus);
+ outline: none;
+ box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+}
+
+input:disabled,
+textarea:disabled,
+select:disabled,
+.form-control:disabled {
+ background-color: var(--input-disabled-bg);
+ color: var(--text-tertiary);
+ cursor: not-allowed;
+}
+
+/* ==================== 按钮 ==================== */
+
+.btn {
+ transition: all 0.2s ease;
+}
+
+.btn-primary {
+ background-color: var(--accent-primary);
+ border-color: var(--accent-primary);
+ color: var(--text-inverse);
+}
+
+.btn-primary:hover {
+ opacity: 0.9;
+}
+
+.btn-secondary {
+ background-color: var(--accent-secondary);
+ border-color: var(--accent-secondary);
+ color: var(--text-inverse);
+}
+
+.btn-default,
+.btn-outline {
+ background-color: var(--bg-secondary);
+ border-color: var(--border-primary);
+ color: var(--text-primary);
+}
+
+.btn-default:hover,
+.btn-outline:hover {
+ background-color: var(--bg-hover);
+}
+
+/* ==================== 导航栏 ==================== */
+
+.navbar,
+.nav,
+nav,
+header {
+ background-color: var(--nav-bg);
+ color: var(--nav-text);
+ border-color: var(--nav-border);
+}
+
+.nav-link,
+.navbar-nav a,
+.menu-item a {
+ color: var(--nav-text);
+ transition: background-color 0.2s ease;
+}
+
+.nav-link:hover,
+.navbar-nav a:hover,
+.menu-item a:hover {
+ background-color: var(--nav-hover-bg);
+ color: var(--link-hover);
+}
+
+.navbar-brand {
+ color: var(--nav-text) !important;
+}
+
+/* ==================== 侧边栏 ==================== */
+
+.sidebar,
+.widget,
+aside {
+ background-color: var(--sidebar-bg);
+ border-color: var(--sidebar-border);
+ color: var(--text-primary);
+}
+
+.sidebar-title,
+.widget-title {
+ color: var(--text-primary);
+ border-bottom-color: var(--border-primary);
+}
+
+/* ==================== 页脚 ==================== */
+
+footer,
+.footer,
+#footer {
+ background-color: var(--footer-bg);
+ color: var(--footer-text);
+}
+
+footer a,
+.footer a {
+ color: var(--footer-text);
+ opacity: 0.8;
+}
+
+footer a:hover,
+.footer a:hover {
+ opacity: 1;
+}
+
+/* ==================== 文章内容 ==================== */
+
+.article,
+.entry-content,
+.post-content,
+article {
+ background-color: var(--article-bg);
+ color: var(--text-primary);
+}
+
+.entry-title,
+.post-title,
+h1, h2, h3, h4, h5, h6 {
+ color: var(--text-primary);
+}
+
+.entry-meta,
+.post-meta {
+ color: var(--text-secondary);
+}
+
+/* ==================== 评论区 ==================== */
+
+.comment,
+.comment-body {
+ background-color: var(--comment-bg);
+ border-color: var(--comment-border);
+ color: var(--text-primary);
+}
+
+.comment-author {
+ color: var(--text-primary);
+ background-color: var(--comment-author-bg);
+}
+
+.comment-reply-link {
+ color: var(--link-color);
+}
+
+/* ==================== 边框和分隔线 ==================== */
+
+.border,
+hr {
+ border-color: var(--border-primary);
+}
+
+/* ==================== 表格 ==================== */
+
+table {
+ border-color: var(--border-primary);
+ color: var(--text-primary);
+}
+
+table th {
+ background-color: var(--bg-secondary);
+ color: var(--text-primary);
+ border-color: var(--border-primary);
+}
+
+table td {
+ border-color: var(--border-primary);
+ background-color: var(--bg-primary);
+}
+
+table tr:hover td {
+ background-color: var(--bg-hover);
+}
+
+/* ==================== 引用 ==================== */
+
+blockquote {
+ border-left: 4px solid var(--accent-primary);
+ background-color: var(--bg-secondary);
+ color: var(--text-secondary);
+ padding: 12px 20px;
+ margin: 16px 0;
+}
+
+/* ==================== 标签和徽章 ==================== */
+
+.tag,
+.badge,
+.label {
+ background-color: var(--bg-tertiary);
+ color: var(--text-primary);
+ border: 1px solid var(--border-primary);
+}
+
+/* ==================== 提示框 ==================== */
+
+.alert {
+ border-color: var(--border-primary);
+}
+
+.alert-success {
+ background-color: rgba(76, 175, 80, 0.1);
+ border-color: var(--accent-success);
+ color: var(--accent-success);
+}
+
+.alert-info {
+ background-color: rgba(33, 150, 243, 0.1);
+ border-color: var(--accent-info);
+ color: var(--accent-info);
+}
+
+.alert-warning {
+ background-color: rgba(255, 152, 0, 0.1);
+ border-color: var(--accent-warning);
+ color: var(--accent-warning);
+}
+
+.alert-danger {
+ background-color: rgba(244, 67, 54, 0.1);
+ border-color: var(--accent-danger);
+ color: var(--accent-danger);
+}
+
+/* ==================== 模态框 ==================== */
+
+.modal-content {
+ background-color: var(--card-bg);
+ color: var(--text-primary);
+}
+
+.modal-header,
+.modal-footer {
+ background-color: var(--bg-secondary);
+ border-color: var(--border-primary);
+}
+
+/* ==================== 下拉菜单 ==================== */
+
+.dropdown-menu {
+ background-color: var(--card-bg);
+ border-color: var(--border-primary);
+ box-shadow: var(--shadow-md);
+}
+
+.dropdown-item {
+ color: var(--text-primary);
+}
+
+.dropdown-item:hover {
+ background-color: var(--bg-hover);
+}
+
+/* ==================== 分页 ==================== */
+
+.pagination .page-link {
+ background-color: var(--card-bg);
+ border-color: var(--border-primary);
+ color: var(--link-color);
+}
+
+.pagination .page-link:hover {
+ background-color: var(--bg-hover);
+}
+
+.pagination .page-item.active .page-link {
+ background-color: var(--accent-primary);
+ border-color: var(--accent-primary);
+}
+
+/* ==================== 面包屑 ==================== */
+
+.breadcrumb {
+ background-color: var(--bg-secondary);
+ color: var(--text-secondary);
+}
+
+.breadcrumb-item.active {
+ color: var(--text-primary);
+}
+
+/* ==================== 滚动条 ==================== */
+
+::-webkit-scrollbar {
+ width: 12px;
+ height: 12px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--scrollbar-bg);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-thumb);
+ border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--scrollbar-thumb-hover);
+}
+
+/* Firefox 滚动条 */
+* {
+ scrollbar-width: thin;
+ scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
+}
+
+/* ==================== 图片优化 ==================== */
+
+[data-theme="dark"] img:not([src*=".svg"]) {
+ opacity: var(--img-opacity);
+ filter: brightness(var(--img-brightness));
+ transition: opacity 0.3s ease, filter 0.3s ease;
+}
+
+[data-theme="dark"] img:hover {
+ opacity: 1;
+ filter: brightness(1);
+}
+
+/* SVG 图标在深色模式下的处理 */
+[data-theme="dark"] svg {
+ filter: invert(0.9) hue-rotate(180deg);
+}
+
+[data-theme="dark"] .logo svg,
+[data-theme="dark"] .icon svg {
+ filter: none;
+}
+
+/* ==================== 主题切换按钮 ==================== */
+
+.theme-toggle {
+ position: fixed;
+ bottom: 30px;
+ right: 30px;
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
+ color: var(--text-inverse);
+ border: none;
+ box-shadow: var(--shadow-lg);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ overflow: hidden;
+}
+
+.theme-toggle::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.theme-toggle:hover {
+ transform: scale(1.1) rotate(15deg);
+ box-shadow: var(--shadow-xl);
+}
+
+.theme-toggle:hover::before {
+ opacity: 1;
+}
+
+.theme-toggle:active,
+.theme-toggle-clicked {
+ transform: scale(0.95) rotate(-15deg);
+}
+
+/* 主题切换图标 */
+.theme-toggle .icon-sun,
+.theme-toggle .icon-moon {
+ position: absolute;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-toggle .icon-sun {
+ opacity: 0;
+ transform: rotate(-90deg) scale(0.5);
+}
+
+.theme-toggle .icon-moon {
+ opacity: 1;
+ transform: rotate(0deg) scale(1);
+}
+
+[data-theme="dark"] .theme-toggle .icon-sun {
+ opacity: 1;
+ transform: rotate(0deg) scale(1);
+}
+
+[data-theme="dark"] .theme-toggle .icon-moon {
+ opacity: 0;
+ transform: rotate(90deg) scale(0.5);
+}
+
+/* 按钮上的光晕效果 */
+@keyframes pulse {
+ 0%, 100% {
+ box-shadow: var(--shadow-lg), 0 0 0 0 rgba(76, 175, 80, 0.7);
+ }
+ 50% {
+ box-shadow: var(--shadow-lg), 0 0 0 10px rgba(76, 175, 80, 0);
+ }
+}
+
+.theme-toggle-clicked {
+ animation: pulse 0.6s ease-out;
+}
+
+/* Auto模式特殊标识 */
+.theme-toggle.theme-auto::after {
+ content: 'A';
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ width: 16px;
+ height: 16px;
+ background: rgba(255, 255, 255, 0.9);
+ color: var(--accent-primary);
+ border-radius: 50%;
+ font-size: 10px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+/* Auto模式下按钮有渐变边框效果 */
+.theme-toggle.theme-auto {
+ box-shadow: var(--shadow-lg), 0 0 0 2px rgba(255, 215, 0, 0.6);
+}
+
+/* Auto模式下的动画 */
+@keyframes autoGlow {
+ 0%, 100% {
+ box-shadow: var(--shadow-lg), 0 0 0 2px rgba(255, 215, 0, 0.4);
+ }
+ 50% {
+ box-shadow: var(--shadow-lg), 0 0 0 2px rgba(255, 215, 0, 0.8);
+ }
+}
+
+.theme-toggle.theme-auto {
+ animation: autoGlow 2s ease-in-out infinite;
+}
+
+/* ==================== 响应式 ==================== */
+
+@media (max-width: 768px) {
+ .theme-toggle {
+ bottom: 20px;
+ right: 20px;
+ width: 50px;
+ height: 50px;
+ }
+}
+
+@media (max-width: 480px) {
+ .theme-toggle {
+ bottom: 16px;
+ right: 16px;
+ width: 46px;
+ height: 46px;
+ }
+}
+
+/* ==================== 打印样式 ==================== */
+
+@media print {
+ [data-theme="dark"] {
+ /* 打印时强制使用浅色主题 */
+ color-scheme: light;
+ --bg-primary: #ffffff;
+ --text-primary: #000000;
+ --card-bg: #ffffff;
+ }
+
+ .theme-toggle {
+ display: none !important;
+ }
+
+ [data-theme="dark"] img {
+ opacity: 1;
+ filter: none;
+ }
+}
+
+/* ==================== 辅助类 ==================== */
+
+.bg-primary { background-color: var(--bg-primary); }
+.bg-secondary { background-color: var(--bg-secondary); }
+.bg-tertiary { background-color: var(--bg-tertiary); }
+
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-tertiary { color: var(--text-tertiary); }
+.text-muted { color: var(--text-muted); }
+
+.border-primary { border-color: var(--border-primary); }
+
+/* ==================== 可访问性 ==================== */
+
+/* 减少动画（用户偏好） */
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+
+ .theme-toggle {
+ transition: none;
+ }
+}
+
+/* 高对比度模式 */
+@media (prefers-contrast: high) {
+ :root {
+ --border-primary: #000000;
+ --text-primary: #000000;
+ }
+
+ [data-theme="dark"] {
+ --border-primary: #ffffff;
+ --text-primary: #ffffff;
+ }
+}
diff --git a/src/static/blog/js/article-draft-autosave.js b/src/static/blog/js/article-draft-autosave.js
new file mode 100644
index 0000000..a60bccb
--- /dev/null
+++ b/src/static/blog/js/article-draft-autosave.js
@@ -0,0 +1,321 @@
+/**
+ * 文章草稿自动保存功能
+ * 定时自动保存编辑中的文章，防止内容丢失
+ */
+
+(function() {
+ 'use strict';
+
+ // 配置
+ const CONFIG = {
+ AUTO_SAVE_INTERVAL: 30000, // 自动保存间隔（30秒）
+ MIN_CONTENT_LENGTH: 10, // 触发自动保存的最小内容长度
+ SESSION_STORAGE_KEY: 'article_draft_session_id',
+ LAST_CONTENT_KEY: 'article_draft_last_content'
+ };
+
+ // 生成唯一的会话ID
+ function generateSessionId() {
+ return 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+ }
+
+ // 获取或创建会话ID
+ function getSessionId() {
+ let sessionId = sessionStorage.getItem(CONFIG.SESSION_STORAGE_KEY);
+ if (!sessionId) {
+ sessionId = generateSessionId();
+ sessionStorage.setItem(CONFIG.SESSION_STORAGE_KEY, sessionId);
+ }
+ return sessionId;
+ }
+
+ // 获取CSRF Token
+ function getCookie(name) {
+ let cookieValue = null;
+ if (document.cookie && document.cookie !== '') {
+ const cookies = document.cookie.split(';');
+ for (let i = 0; i < cookies.length; i++) {
+ const cookie = cookies[i].trim();
+ if (cookie.substring(0, name.length + 1) === (name + '=')) {
+ cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+ break;
+ }
+ }
+ }
+ return cookieValue;
+ }
+
+ // 文章草稿自动保存类
+ class ArticleDraftAutoSave {
+ constructor(options) {
+ this.options = Object.assign({
+ titleSelector: '#id_title',
+ bodySelector: '#id_body',
+ categorySelector: '#id_category',
+ tagsSelector: '#id_tags',
+ statusSelector: '#id_status',
+ commentStatusSelector: '#id_comment_status',
+ typeSelector: '#id_type',
+ articleIdInput: '#article_id',
+ saveApiUrl: '/api/draft/save/',
+ getDraftApiUrl: '/api/draft/get/',
+ statusElement: '#draft-save-status'
+ }, options);
+
+ this.sessionId = getSessionId();
+ this.saveTimer = null;
+ this.lastContent = '';
+ this.isInit = false;
+
+ this.init();
+ }
+
+ init() {
+ if (this.isInit) return;
+ this.isInit = true;
+
+ // 检查是否在文章编辑页面
+ const titleElement = document.querySelector(this.options.titleSelector);
+ const bodyElement = document.querySelector(this.options.bodySelector);
+
+ if (!titleElement || !bodyElement) {
+ console.log('未找到文章编辑器元素，自动保存功能未启动');
+ return;
+ }
+
+ console.log('文章草稿自动保存功能已启动');
+
+ // 检查是否有未保存的草稿
+ this.checkExistingDraft();
+
+ // 启动自动保存
+ this.startAutoSave();
+
+ // 监听页面离开事件
+ this.setupBeforeUnloadHandler();
+
+ // 创建状态显示元素
+ this.createStatusElement();
+ }
+
+ // 检查是否有未保存的草稿
+ checkExistingDraft() {
+ const articleId = this.getArticleId();
+ const url = `${this.options.getDraftApiUrl}?${articleId ? 'article_id=' + articleId : 'session_id=' + this.sessionId}`;
+
+ fetch(url, {
+ method: 'GET',
+ credentials: 'same-origin'
+ })
+ .then(response => response.json())
+ .then(data => {
+ if (data.success && data.draft) {
+ this.showDraftRestorePrompt(data.draft);
+ }
+ })
+ .catch(error => {
+ console.error('检查草稿失败:', error);
+ });
+ }
+
+ // 显示草稿恢复提示
+ showDraftRestorePrompt(draft) {
+ const message = `发现未保存的草稿（最后更新: ${draft.last_update}），是否恢复？`;
+ if (confirm(message)) {
+ this.restoreDraft(draft);
+ }
+ }
+
+ // 恢复草稿
+ restoreDraft(draft) {
+ const titleElement = document.querySelector(this.options.titleSelector);
+ const bodyElement = document.querySelector(this.options.bodySelector);
+ const categoryElement = document.querySelector(this.options.categorySelector);
+
+ if (titleElement) titleElement.value = draft.title || '';
+ if (bodyElement) bodyElement.value = draft.body || '';
+ if (categoryElement && draft.category_id) {
+ categoryElement.value = draft.category_id;
+ }
+
+ this.showStatus('草稿已恢复', 'success');
+ }
+
+ // 启动自动保存
+ startAutoSave() {
+ this.saveTimer = setInterval(() => {
+ this.autoSave();
+ }, CONFIG.AUTO_SAVE_INTERVAL);
+
+ console.log(`自动保存已启动，间隔: ${CONFIG.AUTO_SAVE_INTERVAL / 1000}秒`);
+ }
+
+ // 停止自动保存
+ stopAutoSave() {
+ if (this.saveTimer) {
+ clearInterval(this.saveTimer);
+ this.saveTimer = null;
+ console.log('自动保存已停止');
+ }
+ }
+
+ // 执行自动保存
+ autoSave() {
+ const titleElement = document.querySelector(this.options.titleSelector);
+ const bodyElement = document.querySelector(this.options.bodySelector);
+
+ if (!titleElement || !bodyElement) return;
+
+ const title = titleElement.value || '';
+ const body = bodyElement.value || '';
+ const currentContent = title + body;
+
+ // 检查内容是否有变化且长度足够
+ if (currentContent === this.lastContent || currentContent.length < CONFIG.MIN_CONTENT_LENGTH) {
+ return;
+ }
+
+ this.saveDraft();
+ }
+
+ // 保存草稿
+ saveDraft() {
+ const titleElement = document.querySelector(this.options.titleSelector);
+ const bodyElement = document.querySelector(this.options.bodySelector);
+ const categoryElement = document.querySelector(this.options.categorySelector);
+ const tagsElement = document.querySelector(this.options.tagsSelector);
+
+ if (!titleElement || !bodyElement) return;
+
+ const title = titleElement.value || '';
+ const body = bodyElement.value || '';
+ const category_id = categoryElement ? categoryElement.value : null;
+ const article_id = this.getArticleId();
+
+ // 获取标签
+ let tags = [];
+ if (tagsElement) {
+ const selectedOptions = tagsElement.selectedOptions;
+ for (let i = 0; i < selectedOptions.length; i++) {
+ tags.push(parseInt(selectedOptions[i].value));
+ }
+ }
+
+ const data = {
+ title: title,
+ body: body,
+ category_id: category_id ? parseInt(category_id) : null,
+ tags: tags,
+ article_id: article_id ? parseInt(article_id) : null,
+ session_id: this.sessionId,
+ status: 'd',
+ comment_status: 'o',
+ type: 'a'
+ };
+
+ this.showStatus('正在保存...', 'info');
+
+ fetch(this.options.saveApiUrl, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-CSRFToken': getCookie('csrftoken')
+ },
+ credentials: 'same-origin',
+ body: JSON.stringify(data)
+ })
+ .then(response => response.json())
+ .then(data => {
+ if (data.success) {
+ this.lastContent = title + body;
+ this.showStatus(`已自动保存 (${data.last_update})`, 'success');
+ console.log('草稿已保存:', data);
+ } else {
+ this.showStatus('保存失败', 'error');
+ console.error('保存草稿失败:', data.message);
+ }
+ })
+ .catch(error => {
+ this.showStatus('保存失败', 'error');
+ console.error('保存草稿失败:', error);
+ });
+ }
+
+ // 获取文章ID
+ getArticleId() {
+ const articleIdInput = document.querySelector(this.options.articleIdInput);
+ if (articleIdInput) {
+ return articleIdInput.value;
+ }
+
+ // 尝试从URL获取
+ const match = window.location.pathname.match(/\/article\/\d+\/\d+\/\d+\/(\d+)\.html/);
+ if (match) {
+ return match[1];
+ }
+
+ return null;
+ }
+
+ // 创建状态显示元素
+ createStatusElement() {
+ let statusElement = document.querySelector(this.options.statusElement);
+ if (!statusElement) {
+ statusElement = document.createElement('div');
+ statusElement.id = this.options.statusElement.replace('#', '');
+ statusElement.style.cssText = 'position: fixed; bottom: 20px; right: 20px; padding: 10px 20px; ' +
+ 'background: #f0f0f0; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); ' +
+ 'font-size: 14px; z-index: 9999; display: none;';
+ document.body.appendChild(statusElement);
+ }
+ }
+
+ // 显示状态
+ showStatus(message, type) {
+ const statusElement = document.querySelector(this.options.statusElement);
+ if (!statusElement) return;
+
+ const colors = {
+ 'info': '#2196F3',
+ 'success': '#4CAF50',
+ 'error': '#F44336'
+ };
+
+ statusElement.textContent = message;
+ statusElement.style.background = colors[type] || '#f0f0f0';
+ statusElement.style.color = type === 'info' ? '#333' : '#fff';
+ statusElement.style.display = 'block';
+
+ setTimeout(() => {
+ statusElement.style.display = 'none';
+ }, 3000);
+ }
+
+ // 设置页面离开前的警告
+ setupBeforeUnloadHandler() {
+ window.addEventListener('beforeunload', (e) => {
+ const titleElement = document.querySelector(this.options.titleSelector);
+ const bodyElement = document.querySelector(this.options.bodySelector);
+
+ if (titleElement && bodyElement) {
+ const content = titleElement.value + bodyElement.value;
+ if (content.length > CONFIG.MIN_CONTENT_LENGTH && content !== this.lastContent) {
+ e.preventDefault();
+ e.returnValue = '您有未保存的更改，确定要离开吗？';
+ return e.returnValue;
+ }
+ }
+ });
+ }
+ }
+
+ // 自动初始化
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', function() {
+ window.articleDraftAutoSave = new ArticleDraftAutoSave();
+ });
+ } else {
+ window.articleDraftAutoSave = new ArticleDraftAutoSave();
+ }
+
+})();
diff --git a/src/static/blog/js/media-picker.js b/src/static/blog/js/media-picker.js
new file mode 100644
index 0000000..d08b460
--- /dev/null
+++ b/src/static/blog/js/media-picker.js
@@ -0,0 +1,375 @@
+/**
+ * 多媒体管理系统 - 图片选择器
+ * 提供图片上传、选择和管理功能
+ */
+
+(function() {
+ 'use strict';
+
+ // 获取CSRF Token
+ function getCookie(name) {
+ let cookieValue = null;
+ if (document.cookie && document.cookie !== '') {
+ const cookies = document.cookie.split(';');
+ for (let i = 0; i < cookies.length; i++) {
+ const cookie = cookies[i].trim();
+ if (cookie.substring(0, name.length + 1) === (name + '=')) {
+ cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+ break;
+ }
+ }
+ }
+ return cookieValue;
+ }
+
+ // 图片选择器类
+ class MediaPicker {
+ constructor(options = {}) {
+ this.options = {
+ multiple: false, // 是否允许多选
+ fileType: 'image', // 文件类型：image/file/all
+ onSelect: null, // 选择回调
+ maxSize: 10, // 最大文件大小（MB）
+ ...options
+ };
+
+ this.csrfToken = getCookie('csrftoken');
+ this.selectedFiles = [];
+ this.currentPage = 1;
+ this.totalPages = 1;
+
+ this.init();
+ }
+
+ init() {
+ this.createModal();
+ this.loadFiles();
+ }
+
+ createModal() {
+ // 创建模态框HTML
+ const modalHTML = `
+
+ `;
+
+ // 添加到body
+ document.body.insertAdjacentHTML('beforeend', modalHTML);
+
+ // 绑定事件
+ this.bindEvents();
+ }
+
+ getAcceptTypes() {
+ if (this.options.fileType === 'image') {
+ return 'image/*';
+ } else if (this.options.fileType === 'file') {
+ return '*/*';
+ }
+ return '*/*';
+ }
+
+ bindEvents() {
+ const modal = document.getElementById('media-picker-modal');
+
+ // 关闭按钮
+ modal.querySelector('.media-picker-close').addEventListener('click', () => {
+ this.close();
+ });
+
+ // 点击遮罩关闭
+ modal.querySelector('.media-picker-overlay').addEventListener('click', () => {
+ this.close();
+ });
+
+ // 取消按钮
+ modal.querySelector('#btn-cancel').addEventListener('click', () => {
+ this.close();
+ });
+
+ // 选择按钮
+ modal.querySelector('#btn-select').addEventListener('click', () => {
+ this.selectFiles();
+ });
+
+ // 文件上传
+ modal.querySelector('#media-file-input').addEventListener('change', (e) => {
+ this.uploadFiles(e.target.files);
+ });
+
+ // 搜索
+ let searchTimeout;
+ modal.querySelector('#media-search-input').addEventListener('input', (e) => {
+ clearTimeout(searchTimeout);
+ searchTimeout = setTimeout(() => {
+ this.currentPage = 1;
+ this.loadFiles(e.target.value);
+ }, 500);
+ });
+
+ // 分页
+ modal.querySelector('#prev-page').addEventListener('click', () => {
+ if (this.currentPage > 1) {
+ this.currentPage--;
+ this.loadFiles();
+ }
+ });
+
+ modal.querySelector('#next-page').addEventListener('click', () => {
+ if (this.currentPage < this.totalPages) {
+ this.currentPage++;
+ this.loadFiles();
+ }
+ });
+ }
+
+ async loadFiles(search = '') {
+ const grid = document.getElementById('media-files-grid');
+ grid.innerHTML = '
+
+ 新评论待审核
+管理员您好，
+有新评论需要审核：
+
+
+
+
+ 文章：《{comment.article.title}》
+评论者：{comment.author.username}
+评论时间：{comment.creation_time.strftime('%Y-%m-%d %H:%M:%S')}
+评论内容：
+{comment.body}
+加载中...
';
+
+ try {
+ const params = new URLSearchParams({
+ page: this.currentPage,
+ page_size: 20
+ });
+
+ if (this.options.fileType !== 'all') {
+ params.append('file_type', this.options.fileType);
+ }
+
+ if (search) {
+ params.append('search', search);
+ }
+
+ const response = await fetch(`/blog/api/media/list/?${params}`);
+ const data = await response.json();
+
+ if (data.success) {
+ this.displayFiles(data.files);
+ this.totalPages = data.total_pages;
+ this.updatePagination();
+ } else {
+ grid.innerHTML = '加载失败
';
+ }
+ } catch (error) {
+ console.error('加载文件列表失败:', error);
+ grid.innerHTML = '加载失败
';
+ }
+ }
+
+ displayFiles(files) {
+ const grid = document.getElementById('media-files-grid');
+
+ if (files.length === 0) {
+ grid.innerHTML = '暂无文件
';
+ return;
+ }
+
+ grid.innerHTML = files.map(file => {
+ const isSelected = this.selectedFiles.some(f => f.id === file.id);
+ return `
+
+
+ `;
+ }).join('');
+
+ // 绑定点击事件
+ grid.querySelectorAll('.media-file-item').forEach(item => {
+ item.addEventListener('click', () => {
+ const fileId = parseInt(item.dataset.fileId);
+ const file = files.find(f => f.id === fileId);
+ this.toggleFileSelection(file, item);
+ });
+ });
+ }
+
+ toggleFileSelection(file, element) {
+ const index = this.selectedFiles.findIndex(f => f.id === file.id);
+
+ if (index > -1) {
+ // 取消选择
+ this.selectedFiles.splice(index, 1);
+ element.classList.remove('selected');
+ } else {
+ // 选择
+ if (!this.options.multiple) {
+ // 单选模式，清除之前的选择
+ this.selectedFiles = [file];
+ document.querySelectorAll('.media-file-item.selected').forEach(el => {
+ el.classList.remove('selected');
+ });
+ element.classList.add('selected');
+ } else {
+ // 多选模式
+ this.selectedFiles.push(file);
+ element.classList.add('selected');
+ }
+ }
+
+ // 更新选择按钮状态
+ const btnSelect = document.getElementById('btn-select');
+ btnSelect.disabled = this.selectedFiles.length === 0;
+ }
+
+ async uploadFiles(files) {
+ if (!files || files.length === 0) return;
+
+ const maxSize = this.options.maxSize * 1024 * 1024;
+
+ for (let file of files) {
+ if (file.size > maxSize) {
+ alert(`文件 ${file.name} 超过大小限制（${this.options.maxSize}MB）`);
+ continue;
+ }
+
+ await this.uploadSingleFile(file);
+ }
+
+ // 重新加载文件列表
+ this.loadFiles();
+
+ // 清空文件输入
+ document.getElementById('media-file-input').value = '';
+ }
+
+ async uploadSingleFile(file) {
+ const formData = new FormData();
+ formData.append('file', file);
+ formData.append('is_public', 'true');
+
+ try {
+ const response = await fetch('/blog/api/media/upload/', {
+ method: 'POST',
+ headers: {
+ 'X-CSRFToken': this.csrfToken
+ },
+ credentials: 'same-origin',
+ body: formData
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ this.showMessage('上传成功', 'success');
+ } else {
+ this.showMessage(data.message || '上传失败', 'error');
+ }
+ } catch (error) {
+ console.error('上传失败:', error);
+ this.showMessage('上传失败', 'error');
+ }
+ }
+
+ selectFiles() {
+ if (this.options.onSelect && typeof this.options.onSelect === 'function') {
+ this.options.onSelect(this.selectedFiles);
+ }
+ this.close();
+ }
+
+ updatePagination() {
+ const prevBtn = document.getElementById('prev-page');
+ const nextBtn = document.getElementById('next-page');
+ const pageInfo = document.getElementById('page-info');
+
+ prevBtn.disabled = this.currentPage === 1;
+ nextBtn.disabled = this.currentPage >= this.totalPages;
+ pageInfo.textContent = `第 ${this.currentPage} / ${this.totalPages} 页`;
+ }
+
+ showMessage(message, type) {
+ // 简单的消息提示
+ const messageDiv = document.createElement('div');
+ messageDiv.className = `media-message media-message-${type}`;
+ messageDiv.textContent = message;
+ messageDiv.style.cssText = `
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ padding: 15px 20px;
+ background: ${type === 'success' ? '#4CAF50' : '#F44336'};
+ color: white;
+ border-radius: 5px;
+ z-index: 10001;
+ `;
+
+ document.body.appendChild(messageDiv);
+
+ setTimeout(() => {
+ messageDiv.remove();
+ }, 3000);
+ }
+
+ open() {
+ const modal = document.getElementById('media-picker-modal');
+ modal.style.display = 'block';
+ this.selectedFiles = [];
+ this.currentPage = 1;
+ this.loadFiles();
+ }
+
+ close() {
+ const modal = document.getElementById('media-picker-modal');
+ modal.style.display = 'none';
+ this.selectedFiles = [];
+ }
+ }
+
+ // 导出到全局
+ window.MediaPicker = MediaPicker;
+
+})();
diff --git a/src/static/blog/js/social-features.js b/src/static/blog/js/social-features.js
new file mode 100644
index 0000000..ed94d0b
--- /dev/null
+++ b/src/static/blog/js/social-features.js
@@ -0,0 +1,330 @@
+/**
+ * 用户关注和文章收藏功能
+ * 提供关注/取消关注、收藏/取消收藏的前端交互
+ */
+
+(function() {
+ 'use strict';
+
+ // 获取CSRF Token
+ function getCookie(name) {
+ let cookieValue = null;
+ if (document.cookie && document.cookie !== '') {
+ const cookies = document.cookie.split(';');
+ for (let i = 0; i < cookies.length; i++) {
+ const cookie = cookies[i].trim();
+ if (cookie.substring(0, name.length + 1) === (name + '=')) {
+ cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+ break;
+ }
+ }
+ }
+ return cookieValue;
+ }
+
+ // 社交功能类
+ class SocialFeatures {
+ constructor() {
+ this.csrfToken = getCookie('csrftoken');
+ this.init();
+ }
+
+ init() {
+ // 绑定关注按钮
+ this.bindFollowButtons();
+ // 绑定收藏按钮
+ this.bindFavoriteButtons();
+ // 绑定点赞按钮
+ this.bindLikeButtons();
+ }
+
+ // ==================== 关注功能 ====================
+
+ bindFollowButtons() {
+ const followButtons = document.querySelectorAll('.btn-follow');
+ followButtons.forEach(button => {
+ button.addEventListener('click', (e) => {
+ e.preventDefault();
+ const userId = button.dataset.userId;
+ const isFollowing = button.dataset.following === 'true';
+
+ if (isFollowing) {
+ this.unfollowUser(userId, button);
+ } else {
+ this.followUser(userId, button);
+ }
+ });
+ });
+ }
+
+ followUser(userId, button) {
+ fetch('/blog/api/follow/', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-CSRFToken': this.csrfToken
+ },
+ credentials: 'same-origin',
+ body: JSON.stringify({ user_id: userId })
+ })
+ .then(response => response.json())
+ .then(data => {
+ if (data.success) {
+ button.textContent = '已关注';
+ button.dataset.following = 'true';
+ button.classList.remove('btn-primary');
+ button.classList.add('btn-secondary');
+ this.showMessage(data.message, 'success');
+ this.updateFollowCount(data.following_count);
+ } else {
+ this.showMessage(data.message, 'error');
+ }
+ })
+ .catch(error => {
+ console.error('关注失败:', error);
+ this.showMessage('关注失败，请重试', 'error');
+ });
+ }
+
+ unfollowUser(userId, button) {
+ fetch('/blog/api/unfollow/', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-CSRFToken': this.csrfToken
+ },
+ credentials: 'same-origin',
+ body: JSON.stringify({ user_id: userId })
+ })
+ .then(response => response.json())
+ .then(data => {
+ if (data.success) {
+ button.textContent = '关注';
+ button.dataset.following = 'false';
+ button.classList.remove('btn-secondary');
+ button.classList.add('btn-primary');
+ this.showMessage(data.message, 'success');
+ this.updateFollowCount(data.following_count);
+ } else {
+ this.showMessage(data.message, 'error');
+ }
+ })
+ .catch(error => {
+ console.error('取消关注失败:', error);
+ this.showMessage('取消关注失败，请重试', 'error');
+ });
+ }
+
+ updateFollowCount(count) {
+ const countElement = document.querySelector('#following-count');
+ if (countElement) {
+ countElement.textContent = count;
+ }
+ }
+
+ // ==================== 收藏功能 ====================
+
+ bindFavoriteButtons() {
+ const favoriteButtons = document.querySelectorAll('.btn-favorite');
+ favoriteButtons.forEach(button => {
+ button.addEventListener('click', (e) => {
+ e.preventDefault();
+ const articleId = button.dataset.articleId;
+ const isFavorited = button.dataset.favorited === 'true';
+
+ if (isFavorited) {
+ this.unfavoriteArticle(articleId, button);
+ } else {
+ this.favoriteArticle(articleId, button);
+ }
+ });
+ });
+ }
+
+ favoriteArticle(articleId, button) {
+ fetch('/blog/api/favorite/', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-CSRFToken': this.csrfToken
+ },
+ credentials: 'same-origin',
+ body: JSON.stringify({ article_id: articleId })
+ })
+ .then(response => response.json())
+ .then(data => {
+ if (data.success) {
+ button.innerHTML = '★ 已收藏';
+ button.dataset.favorited = 'true';
+ button.classList.add('favorited');
+ this.showMessage(data.message, 'success');
+ this.updateFavoriteCount(data.favorite_count);
+ } else {
+ this.showMessage(data.message, 'error');
+ }
+ })
+ .catch(error => {
+ console.error('收藏失败:', error);
+ this.showMessage('收藏失败，请重试', 'error');
+ });
+ }
+
+ unfavoriteArticle(articleId, button) {
+ fetch('/blog/api/unfavorite/', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-CSRFToken': this.csrfToken
+ },
+ credentials: 'same-origin',
+ body: JSON.stringify({ article_id: articleId })
+ })
+ .then(response => response.json())
+ .then(data => {
+ if (data.success) {
+ button.innerHTML = '☆ 收藏';
+ button.dataset.favorited = 'false';
+ button.classList.remove('favorited');
+ this.showMessage(data.message, 'success');
+ this.updateFavoriteCount(data.favorite_count);
+ } else {
+ this.showMessage(data.message, 'error');
+ }
+ })
+ .catch(error => {
+ console.error('取消收藏失败:', error);
+ this.showMessage('取消收藏失败，请重试', 'error');
+ });
+ }
+
+ updateFavoriteCount(count) {
+ const countElement = document.querySelector('#favorite-count');
+ if (countElement) {
+ countElement.textContent = count;
+ }
+ }
+
+ // ==================== 点赞功能 ====================
+
+ bindLikeButtons() {
+ const likeButtons = document.querySelectorAll('.btn-like');
+ likeButtons.forEach(button => {
+ button.addEventListener('click', (e) => {
+ e.preventDefault();
+ const articleId = button.dataset.articleId;
+ const isLiked = button.dataset.liked === 'true';
+
+ if (isLiked) {
+ this.unlikeArticle(articleId, button);
+ } else {
+ this.likeArticle(articleId, button);
+ }
+ });
+ });
+ }
+
+ likeArticle(articleId, button) {
+ fetch('/blog/api/like/', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-CSRFToken': this.csrfToken
+ },
+ credentials: 'same-origin',
+ body: JSON.stringify({ article_id: articleId })
+ })
+ .then(response => response.json())
+ .then(data => {
+ if (data.success) {
+ button.innerHTML = '👍 ' + data.like_count;
+ button.dataset.liked = 'true';
+ button.classList.add('liked');
+ this.showMessage(data.message, 'success');
+ this.updateLikeCount(data.like_count, button);
+ } else {
+ this.showMessage(data.message, 'error');
+ }
+ })
+ .catch(error => {
+ console.error('点赞失败:', error);
+ this.showMessage('点赞失败，请重试', 'error');
+ });
+ }
+
+ unlikeArticle(articleId, button) {
+ fetch('/blog/api/unlike/', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-CSRFToken': this.csrfToken
+ },
+ credentials: 'same-origin',
+ body: JSON.stringify({ article_id: articleId })
+ })
+ .then(response => response.json())
+ .then(data => {
+ if (data.success) {
+ button.innerHTML = '👍 ' + data.like_count;
+ button.dataset.liked = 'false';
+ button.classList.remove('liked');
+ this.showMessage(data.message, 'success');
+ this.updateLikeCount(data.like_count, button);
+ } else {
+ this.showMessage(data.message, 'error');
+ }
+ })
+ .catch(error => {
+ console.error('取消点赞失败:', error);
+ this.showMessage('取消点赞失败，请重试', 'error');
+ });
+ }
+
+ updateLikeCount(count, button) {
+ // 更新按钮显示的点赞数
+ const countSpan = button.querySelector('.like-count');
+ if (countSpan) {
+ countSpan.textContent = count;
+ }
+ }
+
+ // ==================== 工具方法 ====================
+
+ showMessage(message, type) {
+ // 创建或获取消息提示元素
+ let messageBox = document.querySelector('#social-message');
+ if (!messageBox) {
+ messageBox = document.createElement('div');
+ messageBox.id = 'social-message';
+ messageBox.style.cssText = 'position: fixed; top: 20px; right: 20px; padding: 15px 20px; ' +
+ 'border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); ' +
+ 'font-size: 14px; z-index: 9999; display: none;';
+ document.body.appendChild(messageBox);
+ }
+
+ const colors = {
+ 'success': '#4CAF50',
+ 'error': '#F44336',
+ 'info': '#2196F3'
+ };
+
+ messageBox.textContent = message;
+ messageBox.style.background = colors[type] || '#f0f0f0';
+ messageBox.style.color = '#fff';
+ messageBox.style.display = 'block';
+
+ setTimeout(() => {
+ messageBox.style.display = 'none';
+ }, 3000);
+ }
+ }
+
+ // 自动初始化
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', function() {
+ window.socialFeatures = new SocialFeatures();
+ });
+ } else {
+ window.socialFeatures = new SocialFeatures();
+ }
+
+})();
diff --git a/src/static/blog/js/theme-toggle.js b/src/static/blog/js/theme-toggle.js
new file mode 100644
index 0000000..d040ed9
--- /dev/null
+++ b/src/static/blog/js/theme-toggle.js
@@ -0,0 +1,321 @@
+/**
+ * 深色主题切换功能
+ * 支持自动检测系统主题、手动切换、本地存储
+ * 优化版本：防止FOUC、更好的动画、完整的适配
+ */
+
+(function() {
+ 'use strict';
+
+ // 主题管理器类
+ class ThemeManager {
+ constructor() {
+ this.THEME_KEY = 'blog-theme';
+ this.THEMES = {
+ LIGHT: 'light',
+ DARK: 'dark',
+ AUTO: 'auto'
+ };
+
+ this.currentTheme = null;
+ this.systemTheme = null;
+ this.isInitialized = false;
+
+ this.init();
+ }
+
+ init() {
+ if (this.isInitialized) return;
+ this.isInitialized = true;
+
+ // 检测系统主题偏好
+ this.detectSystemTheme();
+
+ // 加载保存的主题
+ this.loadTheme();
+
+ // 立即应用主题（无动画，防止闪烁）
+ this.applyTheme(false);
+
+ // 等待DOM加载完成后创建按钮
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ this.createToggleButton();
+ this.watchSystemTheme();
+ });
+ } else {
+ this.createToggleButton();
+ this.watchSystemTheme();
+ }
+ }
+
+ /**
+ * 检测系统主题偏好
+ */
+ detectSystemTheme() {
+ if (window.matchMedia) {
+ const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ this.systemTheme = isDark ? this.THEMES.DARK : this.THEMES.LIGHT;
+ } else {
+ this.systemTheme = this.THEMES.LIGHT;
+ }
+ }
+
+ /**
+ * 监听系统主题变化
+ */
+ watchSystemTheme() {
+ if (window.matchMedia) {
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+ const handleChange = (e) => {
+ this.systemTheme = e.matches ? this.THEMES.DARK : this.THEMES.LIGHT;
+
+ // 如果当前是自动模式，更新主题
+ const savedTheme = localStorage.getItem(this.THEME_KEY);
+ if (!savedTheme || savedTheme === this.THEMES.AUTO) {
+ this.applyTheme(true);
+ }
+ };
+
+ // 使用新的addEventListener方法（如果支持）
+ if (mediaQuery.addEventListener) {
+ mediaQuery.addEventListener('change', handleChange);
+ } else if (mediaQuery.addListener) {
+ // 兼容旧版浏览器
+ mediaQuery.addListener(handleChange);
+ }
+ }
+ }
+
+ /**
+ * 从本地存储加载主题
+ */
+ loadTheme() {
+ const savedTheme = localStorage.getItem(this.THEME_KEY);
+
+ if (savedTheme && Object.values(this.THEMES).includes(savedTheme)) {
+ this.currentTheme = savedTheme;
+ } else {
+ // 默认使用系统主题
+ this.currentTheme = this.THEMES.AUTO;
+ }
+ }
+
+ /**
+ * 保存主题到本地存储
+ */
+ saveTheme(theme) {
+ localStorage.setItem(this.THEME_KEY, theme);
+ this.currentTheme = theme;
+ }
+
+ /**
+ * 获取实际应用的主题
+ */
+ getEffectiveTheme() {
+ if (this.currentTheme === this.THEMES.AUTO) {
+ return this.systemTheme;
+ }
+ return this.currentTheme;
+ }
+
+ /**
+ * 应用主题
+ */
+ applyTheme(animate = false) {
+ const effectiveTheme = this.getEffectiveTheme();
+ const root = document.documentElement;
+
+ // 添加过渡类
+ if (animate) {
+ root.classList.add('theme-transitioning');
+ }
+
+ // 设置主题
+ if (effectiveTheme === this.THEMES.DARK) {
+ root.setAttribute('data-theme', 'dark');
+ root.style.colorScheme = 'dark'; // 提示浏览器使用深色滚动条等
+ } else {
+ root.removeAttribute('data-theme');
+ root.style.colorScheme = 'light';
+ }
+
+ // 更新切换按钮
+ this.updateToggleButton();
+
+ // 移除过渡类
+ if (animate) {
+ setTimeout(() => {
+ root.classList.remove('theme-transitioning');
+ }, 400);
+ }
+
+ // 触发自定义事件
+ window.dispatchEvent(new CustomEvent('themeChanged', {
+ detail: {
+ theme: effectiveTheme,
+ isDark: effectiveTheme === this.THEMES.DARK
+ }
+ }));
+ }
+
+ /**
+ * 切换主题（三态循环）
+ */
+ toggle() {
+ // 三态循环：light -> dark -> auto -> light
+ if (this.currentTheme === this.THEMES.LIGHT) {
+ this.saveTheme(this.THEMES.DARK);
+ } else if (this.currentTheme === this.THEMES.DARK) {
+ this.saveTheme(this.THEMES.AUTO);
+ } else {
+ this.saveTheme(this.THEMES.LIGHT);
+ }
+
+ this.applyTheme(true);
+ }
+
+ /**
+ * 设置特定主题
+ */
+ setTheme(theme) {
+ if (!Object.values(this.THEMES).includes(theme)) {
+ console.error('Invalid theme:', theme);
+ return;
+ }
+
+ this.saveTheme(theme);
+ this.applyTheme(true);
+ }
+
+ /**
+ * 创建主题切换按钮
+ */
+ createToggleButton() {
+ // 检查是否已存在按钮
+ if (document.querySelector('.theme-toggle')) {
+ return;
+ }
+
+ const button = document.createElement('button');
+ button.className = 'theme-toggle';
+ button.setAttribute('aria-label', '切换主题');
+ button.setAttribute('title', '切换深色/浅色主题');
+ button.type = 'button';
+
+ // 添加图标（使用SVG图标代替emoji，更清晰）
+ button.innerHTML = `
+
+
+ `;
+
+ // 绑定点击事件
+ button.addEventListener('click', (e) => {
+ e.preventDefault();
+ this.toggle();
+
+ // 添加点击动画
+ button.classList.add('theme-toggle-clicked');
+ setTimeout(() => {
+ button.classList.remove('theme-toggle-clicked');
+ }, 400);
+ });
+
+ // 添加键盘支持
+ button.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ this.toggle();
+ }
+ });
+
+ // 添加到页面
+ document.body.appendChild(button);
+ }
+
+ /**
+ * 更新切换按钮状态
+ */
+ updateToggleButton() {
+ const button = document.querySelector('.theme-toggle');
+ if (!button) return;
+
+ const effectiveTheme = this.getEffectiveTheme();
+ let titleText = '';
+ let ariaLabel = '';
+
+ // 根据当前主题设置提示文本
+ if (this.currentTheme === this.THEMES.LIGHT) {
+ titleText = '当前：浅色主题\n点击切换到：深色主题';
+ ariaLabel = '切换到深色主题';
+ } else if (this.currentTheme === this.THEMES.DARK) {
+ titleText = '当前：深色主题\n点击切换到：自动跟随系统';
+ ariaLabel = '切换到自动跟随系统';
+ } else {
+ // AUTO 模式
+ const systemModeText = this.systemTheme === this.THEMES.DARK ? '深色' : '浅色';
+ titleText = `当前：自动跟随系统（${systemModeText}）\n点击切换到：浅色主题`;
+ ariaLabel = '切换到浅色主题';
+ }
+
+ button.setAttribute('title', titleText);
+ button.setAttribute('aria-label', ariaLabel);
+
+ // 添加当前模式类名
+ button.classList.remove('theme-light', 'theme-dark', 'theme-auto');
+ if (this.currentTheme === this.THEMES.AUTO) {
+ button.classList.add('theme-auto');
+ } else if (this.currentTheme === this.THEMES.DARK) {
+ button.classList.add('theme-dark');
+ } else {
+ button.classList.add('theme-light');
+ }
+ }
+
+ /**
+ * 获取当前主题
+ */
+ getCurrentTheme() {
+ return this.currentTheme;
+ }
+
+ /**
+ * 获取实际主题（考虑auto模式）
+ */
+ getActualTheme() {
+ return this.getEffectiveTheme();
+ }
+ }
+
+ // 创建全局实例
+ const themeManager = new ThemeManager();
+
+ // 暴露到全局
+ window.themeManager = themeManager;
+
+ // 提供便捷方法
+ window.toggleTheme = () => themeManager.toggle();
+ window.setTheme = (theme) => themeManager.setTheme(theme);
+ window.getTheme = () => themeManager.getCurrentTheme();
+
+ // 监听主题变化事件（供其他脚本使用）
+ // 使用示例：
+ // window.addEventListener('themeChanged', (e) => {
+ // console.log('Theme changed to:', e.detail.theme);
+ // console.log('Is dark:', e.detail.isDark);
+ // });
+
+})();
diff --git a/src/templates/admin/blog/articleversion/compare.html b/src/templates/admin/blog/articleversion/compare.html
new file mode 100644
index 0000000..ee28835
--- /dev/null
+++ b/src/templates/admin/blog/articleversion/compare.html
@@ -0,0 +1,340 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static %}
+
+{% block extrastyle %}
+{{ block.super }}
+
+{% endblock %}
+
+{% block breadcrumbs %}
+
+{% endblock %}
+
+{% block content %}
+
+ ${file.file_type === 'image'
+ ? `
`
+ : ''}
+
+
+
+
+ ${file.original_filename}
+
+
+
+ ✓
+
+
+
+{% endblock %}
diff --git a/src/templates/admin/blog/articleversion/restore_confirmation.html b/src/templates/admin/blog/articleversion/restore_confirmation.html
new file mode 100644
index 0000000..ae75696
--- /dev/null
+++ b/src/templates/admin/blog/articleversion/restore_confirmation.html
@@ -0,0 +1,199 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static %}
+
+{% block extrastyle %}
+{{ block.super }}
+
+{% endblock %}
+
+{% block breadcrumbs %}
+
+{% endblock %}
+
+{% block content %}
+版本对比
+ +
+
+
+ 📊 变更摘要
+-
+
- + 标题{% if diff.title_changed %} 已修改{% else %} 未变更{% endif %} + +
- + 正文{% if diff.body_changed %} 已修改{% else %} 未变更{% endif %} + +
- + 发布状态{% if diff.status_changed %} 已修改{% else %} 未变更{% endif %} + +
- + 分类{% if diff.category_changed %} 已修改{% else %} 未变更{% endif %} + +
+
+
+ 基本信息对比
+
+
+
+
+
+ 版本 v{{ version.version_number }}
+
+ 标题:
+ {% if diff.title_changed %}{{ version.title }} + {% else %}{{ version.title }}{% endif %} +
+ + {% if diff.title_changed %}{{ version.title }} + {% else %}{{ version.title }}{% endif %} +
+ 创建时间:
+ {{ version.creation_time|date:"Y-m-d H:i:s" }} +
+ + {{ version.creation_time|date:"Y-m-d H:i:s" }} +
+ 创建者:
+ {{ version.created_by|default:"系统" }} +
+ {% if version.change_summary %}
+ + {{ version.created_by|default:"系统" }} +
+ 变更说明:
+ {{ version.change_summary }} +
+ {% endif %}
+ + {{ version.change_summary }} +
+
+ 当前版本
+
+ 标题:
+ {% if diff.title_changed %}{{ current.title }} + {% else %}{{ current.title }}{% endif %} +
+ + {% if diff.title_changed %}{{ current.title }} + {% else %}{{ current.title }}{% endif %} +
+ 最后修改:
+ {{ current.last_mod_time|date:"Y-m-d H:i:s" }} +
+ + {{ current.last_mod_time|date:"Y-m-d H:i:s" }} +
+ 作者:
+ {{ current.author }} +
+ + {{ current.author }} +
+
+
+ 状态信息对比
+
+
+
+
+
+ 版本 v{{ version.version_number }}
+
+ 发布状态:
+ {% if diff.status_changed %} + {% endif %} + {% if version.status == 'p' %}已发布 + {% elif version.status == 'd' %}草稿 + {% else %}{{ version.status }} + {% endif %} + {% if diff.status_changed %}{% endif %} +
+ + {% if diff.status_changed %} + {% endif %} + {% if version.status == 'p' %}已发布 + {% elif version.status == 'd' %}草稿 + {% else %}{{ version.status }} + {% endif %} + {% if diff.status_changed %}{% endif %} +
+ 评论状态:
+ {% if version.comment_status == 'o' %}开放 + {% elif version.comment_status == 'c' %}关闭 + {% else %}{{ version.comment_status }} + {% endif %} +
+ + {% if version.comment_status == 'o' %}开放 + {% elif version.comment_status == 'c' %}关闭 + {% else %}{{ version.comment_status }} + {% endif %} +
+
+ 当前版本
+
+ 发布状态:
+ {% if diff.status_changed %} + {% endif %} + {% if current.status == 'p' %}已发布 + {% elif current.status == 'd' %}草稿 + {% else %}{{ current.status }} + {% endif %} + {% if diff.status_changed %}{% endif %} +
+ + {% if diff.status_changed %} + {% endif %} + {% if current.status == 'p' %}已发布 + {% elif current.status == 'd' %}草稿 + {% else %}{{ current.status }} + {% endif %} + {% if diff.status_changed %}{% endif %} +
+ 评论状态:
+ {% if current.comment_status == 'o' %}开放 + {% elif current.comment_status == 'c' %}关闭 + {% else %}{{ current.comment_status }} + {% endif %} +
+ + {% if current.comment_status == 'o' %}开放 + {% elif current.comment_status == 'c' %}关闭 + {% else %}{{ current.comment_status }} + {% endif %} +
+
+
+ {% if diff.body_changed and body_diff_html %}
+ 分类对比
+
+
+
+
+
+ 版本 v{{ version.version_number }}
+
+ {% if diff.category_changed %}{{ version.category_name }}
+ {% else %}{{ version.category_name }}{% endif %}
+
+
+
+ 当前版本
+
+ {% if diff.category_changed %}{{ current.category.name }}
+ {% else %}{{ current.category.name }}{% endif %}
+
+
+
+ {% endif %}
+
+
+正文内容详细对比
++ 🟨 黄色背景 = 修改的行 | 🟩 绿色背景 = 新增的行 | 🟥 红色背景 = 删除的行 +
+
+ {{ body_diff_html|safe }}
+
+
+
+{% endblock %}
diff --git a/src/templates/blog/tags/article_info.html b/src/templates/blog/tags/article_info.html
index 65b45fa..906707c 100644
--- a/src/templates/blog/tags/article_info.html
+++ b/src/templates/blog/tags/article_info.html
@@ -69,6 +69,151 @@
+
+ {% if not isindex %}
+ 恢复文章版本
+ +
+
+
+ ⚠️ 重要提示
+-
+
- 恢复版本会将文章内容替换为所选版本的内容 +
- 当前版本的内容会被自动保存到历史记录中 +
- 此操作可以撤销（通过恢复到其他版本） +
+
+
+ 版本信息
+ +
+
+
+ 版本号:
+ v{{ version.version_number }}
+
+ 标题:
+ {{ version.title }}
+
+ 创建时间:
+ {{ version.creation_time|date:"Y-m-d H:i:s" }}
+
+ 创建者:
+ {{ version.created_by|default:"系统" }}
+
+ 变更说明:
+ {{ version.change_summary|default:"无" }}
+
+ 分类:
+ {{ version.category_name }}
+
+ 状态:
+
+ {% if version.status == 'p' %}已发布
+ {% elif version.status == 'd' %}草稿
+ {% else %}{{ version.status }}
+ {% endif %}
+
+
+ 内容预览:
+
+
+ {{ version.body|truncatewords:200|safe }}
+
+
+
+
+
+当前版本信息
+ +
+
+ 标题:
+ {{ current.title }}
+
+ 最后修改:
+ {{ current.last_mod_time|date:"Y-m-d H:i:s" }}
+
+ 分类:
+ {{ current.category.name }}
+
+
+
+
+
+
+
+
+
+ {% endif %}
+
{% load_article_metas article user %}
diff --git a/src/templates/blog/tags/article_meta_info.html b/src/templates/blog/tags/article_meta_info.html
index ec8a0f9..392d15f 100644
--- a/src/templates/blog/tags/article_meta_info.html
+++ b/src/templates/blog/tags/article_meta_info.html
@@ -35,6 +35,13 @@
+ {% if user.is_authenticated and user != article.author %}
+
+ {% endif %}
@@ -54,4 +61,107 @@
+
+
diff --git a/src/templates/share_layout/base.html b/src/templates/share_layout/base.html
index bb17933..c55ec1a 100644
--- a/src/templates/share_layout/base.html
+++ b/src/templates/share_layout/base.html
@@ -15,6 +15,30 @@
+
+
+
@@ -54,12 +78,16 @@
+
{% block compress_css %}
{% endblock %}
{% plugin_compressed_css %}
{% endcompress %}
+
+
+
{% if GLOBAL_HEADER %}
{{ GLOBAL_HEADER|safe }}
{% endif %}
@@ -101,6 +129,7 @@
+
{% block compress_js %}
{% endblock %}
--
2.34.1