feature：增加主页管理

Author: xieyumc

db.sqlite3

@@ -1,18 +1,21 @@
+# jyy_slide_web/asgi.py
+
 import os
 import django
 from channels.routing import ProtocolTypeRouter, URLRouter
 from channels.auth import AuthMiddlewareStack
-from django.core.asgi import get_asgi_application
-from slideapp import routing
 
 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'jyy_slide_web.settings')
 django.setup()
 
+from slideapp.routing import websocket_urlpatterns
+from django.core.asgi import get_asgi_application
+
 application = ProtocolTypeRouter({
-    "http": get_asgi_application(),
-    "websocket": AuthMiddlewareStack(
+    'http': get_asgi_application(),
+    'websocket': AuthMiddlewareStack(
         URLRouter(
-            routing.websocket_urlpatterns
+            websocket_urlpatterns
         )
     ),
 })

jyy_slide_web/asgi.py

@@ -1,22 +1,67 @@
+# slideapp/consumers.py
+
 from channels.generic.websocket import AsyncWebsocketConsumer
 import json
 import tempfile
 import os
 import shutil
 from .src.converter import converter
-from django.conf import settings  # 导入 settings
+from django.conf import settings
+from .models import Slide
+from asgiref.sync import sync_to_async
 
 class SlideConsumer(AsyncWebsocketConsumer):
     async def connect(self):
+        # 获取 URL 中的 slide_id 参数
+        self.slide_id = self.scope['url_route']['kwargs'].get('slide_id')
         await self.accept()
 
     async def disconnect(self, close_code):
         pass
 
     async def receive(self, text_data):
         data = json.loads(text_data)
-        markdown_content = data['markdown']
+        action = data.get('action')
+
+        if action == 'load':
+            # 加载指定的 PPT 内容
+            content = await self.get_slide_content()
+            await self.send(text_data=json.dumps({
+                'action': 'load',
+                'content': content
+            }))
+        elif action == 'save':
+            # 保存当前的 PPT 内容
+            markdown_content = data['markdown']
+            await self.save_slide_content(markdown_content)
+
+            # 继续处理转换和预览
+            html_content = await self.convert_markdown_to_html(markdown_content)
+            await self.send(text_data=json.dumps({
+                'action': 'preview',
+                'html': html_content
+            }))
+        elif action == 'preview':
+            # 仅生成预览，不保存
+            markdown_content = data['markdown']
+            html_content = await self.convert_markdown_to_html(markdown_content)
+            await self.send(text_data=json.dumps({
+                'action': 'preview',
+                'html': html_content
+            }))
+
+    @sync_to_async
+    def get_slide_content(self):
+        slide = Slide.objects.get(id=self.slide_id)
+        return slide.content
 
+    @sync_to_async
+    def save_slide_content(self, content):
+        slide = Slide.objects.get(id=self.slide_id)
+        slide.content = content
+        slide.save()
+
+    async def convert_markdown_to_html(self, markdown_content):
         # 创建临时目录
         with tempfile.TemporaryDirectory() as temp_dir:
             # 创建临时 Markdown 文件
@@ -46,7 +91,4 @@ async def receive(self, text_data):
                 for filename in os.listdir(source_img_dir):
                     shutil.copy(os.path.join(source_img_dir, filename), dest_img_dir)
 
-            # 发送 HTML 内容回前端
-            await self.send(text_data=json.dumps({
-                'html': html_content
-            }))
+            return html_content

slideapp/consumers.py

@@ -0,0 +1,24 @@
+# Generated by Django 5.1 on 2024-09-29 06:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Slide',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(default='未命名幻灯片', max_length=200)),
+                ('content', models.TextField(blank=True)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+            ],
+        ),
+    ]

slideapp/migrations/0001_initial.py

@@ -1,3 +1,9 @@
+# slideapp/models.py
+
 from django.db import models
 
-# Create your models here.
+class Slide(models.Model):
+    title = models.CharField(max_length=200, default='未命名幻灯片')
+    content = models.TextField(blank=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)

slideapp/models.py

@@ -1,6 +1,8 @@
+# slideapp/routing.py
+
 from django.urls import re_path
 from . import consumers
 
 websocket_urlpatterns = [
-    re_path(r'^ws/slide/$', consumers.SlideConsumer.as_asgi()),
+    re_path(r'ws/slide/(?P<slide_id>\d+)/$', consumers.SlideConsumer.as_asgi()),
 ]

slideapp/routing.py

@@ -0,0 +1,222 @@
+<!-- templates/edit_slide.html -->
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>{{ slide.title }}</title>
+    <style>
+        body {
+            display: flex;
+            height: 100vh;
+            margin: 0;
+        }
+
+        #editor {
+            width: 50%;
+            height: 100%;
+        }
+
+        #preview {
+            width: 50%;
+            height: 100%;
+        }
+
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+
+        #toolbar {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+        }
+
+        #toolbar button {
+            margin-right: 10px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 工具栏，包含返回主页的按钮 -->
+    <div id="toolbar">
+        <button onclick="location.href='{% url 'index' %}'">返回主页</button>
+    </div>
+
+    <textarea id="editor"></textarea>
+    <div id="preview">
+        <iframe id="preview-iframe"></iframe>
+    </div>
+
+    <!-- 引入必要的 JavaScript 库，例如 jQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <!-- 与 WebSocket 进行通信的脚本 -->
+    <script>
+        var slideId = {{ slide.id }};
+        var socket = new WebSocket('ws://' + window.location.host + '/ws/slide/' + slideId + '/');
+        var currentIndices = {h: 0, v: 0, f: undefined};
+        var editor = document.getElementById('editor');
+
+        socket.onopen = function (e) {
+            console.log('WebSocket 连接已打开');
+            // 加载幻灯片内容
+            socket.send(JSON.stringify({
+                'action': 'load'
+            }));
+        };
+
+        socket.onmessage = function (e) {
+            var data = JSON.parse(e.data);
+            var action = data['action'];
+
+            if (action === 'load') {
+                // 加载内容到编辑器
+                editor.value = data['content'];
+                // 初始加载时更新预览
+                sendPreview();
+            } else if (action === 'preview') {
+                var html_content = data['html'];
+
+                var iframe = document.getElementById('preview-iframe');
+
+                // 获取当前幻灯片的索引
+                if (iframe.contentWindow && iframe.contentWindow.Reveal && iframe.contentWindow.Reveal.getIndices) {
+                    currentIndices = iframe.contentWindow.Reveal.getIndices();
+                }
+
+                // 更新预览 iframe 的内容
+                iframe.contentDocument.open();
+                iframe.contentDocument.write(html_content);
+                iframe.contentDocument.close();
+
+                // 等待 iframe 加载完成后，恢复幻灯片位置
+                iframe.onload = function () {
+                    function restoreSlide() {
+                        if (iframe.contentWindow.Reveal && iframe.contentWindow.Reveal.isReady()) {
+                            iframe.contentWindow.Reveal.slide(currentIndices.h, currentIndices.v, currentIndices.f);
+
+                            // 当幻灯片变化时，更新 currentIndices
+                            iframe.contentWindow.Reveal.on('slidechanged', function (event) {
+                                currentIndices = iframe.contentWindow.Reveal.getIndices();
+                            });
+                        } else {
+                            setTimeout(restoreSlide, 50);
+                        }
+                    }
+
+                    restoreSlide();
+                };
+            }
+        };
+
+        socket.onclose = function (e) {
+            console.log('WebSocket 连接已关闭');
+        };
+
+        // 监听编辑器内容的变化，实时预览
+        $('#editor').on('input', function () {
+            sendPreview();
+        });
+
+        function sendPreview() {
+            var markdown = $('#editor').val();
+            socket.send(JSON.stringify({
+                'action': 'preview',
+                'markdown': markdown
+            }));
+        }
+
+        // 自动保存功能，每分钟保存一次
+        setInterval(function () {
+            saveSlide();
+        }, 60000); // 60000 毫秒，即 1 分钟
+
+        // 手动保存函数
+        function saveSlide() {
+            var markdown = $('#editor').val();
+            socket.send(JSON.stringify({
+                'action': 'save',
+                'markdown': markdown
+            }));
+            console.log('幻灯片已保存');
+        }
+
+        // 在页面关闭或刷新时，保存内容
+        window.addEventListener('beforeunload', function (e) {
+            saveSlide();
+        });
+
+        // 图片上传的代码，与之前相同
+        // 获取 CSRF token 的函数
+        function getCookie(name) {
+            // ...（保持不变）
+        }
+        var csrftoken = getCookie('csrftoken');
+
+        // 监听粘贴事件
+        editor.addEventListener('paste', function (e) {
+            var items = (e.clipboardData || e.originalEvent.clipboardData).items;
+            for (var i = 0; i < items.length; i++) {
+                if (items[i].type.indexOf('image') !== -1) {
+                    var file = items[i].getAsFile();
+                    uploadImage(file);
+                    e.preventDefault();
+                }
+            }
+        });
+
+        // 监听拖放事件
+        editor.addEventListener('drop', function (e) {
+            e.preventDefault();
+            var files = e.dataTransfer.files;
+            for (var i = 0; i < files.length; i++) {
+                if (files[i].type.indexOf('image') !== -1) {
+                    uploadImage(files[i]);
+                }
+            }
+        });
+
+        function uploadImage(file) {
+            var formData = new FormData();
+            formData.append('image', file);
+
+            // 使用 AJAX 发送图片数据
+            var xhr = new XMLHttpRequest();
+            xhr.open('POST', '/upload_image/', true);
+
+            xhr.onload = function () {
+                if (xhr.status === 200) {
+                    var response = JSON.parse(xhr.responseText);
+                    if (response.url) {
+                        insertImageMarkdown(response.url);
+                    } else {
+                        alert('上传失败');
+                    }
+                } else {
+                    alert('上传失败');
+                }
+            };
+
+            xhr.setRequestHeader('X-CSRFToken', csrftoken);
+            xhr.send(formData);
+        }
+
+        function insertImageMarkdown(url) {
+            var markdownImage = '![](' + url + ')';
+
+            // 获取光标位置并插入文本
+            var startPos = editor.selectionStart;
+            var endPos = editor.selectionEnd;
+            var value = editor.value;
+
+            editor.value = value.substring(0, startPos) + markdownImage + value.substring(endPos);
+            editor.selectionStart = editor.selectionEnd = startPos + markdownImage.length;
+
+            // 触发输入事件，更新预览
+            editor.dispatchEvent(new Event('input'));
+        }
+    </script>
+</body>
+</html>