优化后台功能

resources/views/admin/partials/markdown-editor.blade.php

@@ -7,42 +7,58 @@
 @endphp
 
 <div class="editor-shell">
-    <div class="editor-card">
-        <div class="editor-card-head">
-            <span>
-                {{ $label ?? '正文内容' }}
-                @if($isRequired)
-                    <span class="required-star">*</span>
-                @endif
-            </span>
-            <button class="btn btn-sm btn-outline-primary js-md-upload-advanced-btn" type="button" data-editor-target="{{ $inputName }}">
-                <i class="bi bi-image me-1"></i>上传图片
-            </button>
+    <div class="editor-card js-md-shell">
+        <div class="editor-card-head editor-card-head-split">
+            <div class="editor-card-head-main">
+                <span>
+                    {{ $label ?? '正文内容' }}
+                    @if($isRequired)
+                        <span class="required-star">*</span>
+                    @endif
+                </span>
+                <div class="editor-tab-switch" role="tablist" aria-label="编辑区域切换">
+                    <button class="editor-tab-btn js-md-tab-btn is-active" type="button" data-tab="edit" aria-selected="true">编辑</button>
+                    <button class="editor-tab-btn js-md-tab-btn" type="button" data-tab="preview" aria-selected="false">预览</button>
+                </div>
+            </div>
+            <div class="editor-card-head-actions">
+                <button class="btn btn-sm btn-outline-secondary js-md-fullscreen-btn" type="button" aria-label="切换全屏编辑">
+                    <i class="bi bi-arrows-fullscreen me-1"></i>全屏
+                </button>
+                <button class="btn btn-sm btn-outline-primary js-md-upload-advanced-btn" type="button" data-editor-target="{{ $inputName }}">
+                    <i class="bi bi-image me-1"></i>上传图片
+                </button>
+            </div>
         </div>
-        <div class="p-2">
-            <textarea
-                class="form-control js-md-editor-modern"
-                name="{{ $inputName }}"
-                rows="{{ $editorRows }}"
-                data-preview-target="#{{ $previewElementId }}"
-                placeholder="{{ $placeholder ?? '支持 Markdown 语法，建议使用标题和列表组织内容。' }}"
-                @if($isRequired) required @endif
-                @if(!empty($minlength)) minlength="{{ (int) $minlength }}" @endif
-            >{{ $inputValue }}</textarea>
 
-            @if(!empty($hint))
-                <div class="form-hint">{{ $hint }}</div>
-            @endif
-        </div>
-    </div>
+        <div class="editor-panels">
+            <div class="editor-panel is-active" data-panel="edit">
+                <div class="p-2">
+                    <textarea
+                        class="form-control js-md-editor-modern"
+                        name="{{ $inputName }}"
+                        rows="{{ $editorRows }}"
+                        data-preview-target="#{{ $previewElementId }}"
+                        placeholder="{{ $placeholder ?? '支持 Markdown 语法，建议使用标题和列表组织内容。' }}"
+                        @if($isRequired) required @endif
+                        @if(!empty($minlength)) minlength="{{ (int) $minlength }}" @endif
+                    >{{ $inputValue }}</textarea>
 
-    <div class="preview-card">
-        <div class="preview-card-head">
-            <span>实时预览</span>
-            <span class="text-muted">自动渲染</span>
-        </div>
-        <div class="preview-content js-md-preview" id="{{ $previewElementId }}">
-            <div class="preview-placeholder">在左侧输入 Markdown 内容，这里会实时显示预览。</div>
+                    @if(!empty($hint))
+                        <div class="form-hint">{{ $hint }}</div>
+                    @endif
+                </div>
+            </div>
+
+            <div class="editor-panel" data-panel="preview">
+                <div class="preview-card-head">
+                    <span>实时预览</span>
+                    <span class="text-muted">自动渲染</span>
+                </div>
+                <div class="preview-content js-md-preview" id="{{ $previewElementId }}">
+                    <div class="preview-placeholder">在左侧输入 Markdown 内容，这里会实时显示预览。</div>
+                </div>
+            </div>
         </div>
     </div>
 </div>

resources/views/admin/partials/modern-form-head.blade.php

@@ -1,4 +1,5 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<link rel="stylesheet" href="{{ asset('vendor/font-awesome/css/font-awesome.min.css') }}">
+<link rel="stylesheet" href="{{ asset('vendor/easymde/easymde.min.css') }}">
 <style>
     .required-star { color: #ef4444; margin-left: .2rem; }
     .required-tip { font-size: .86rem; color: #64748b; margin-bottom: .9rem; }
@@ -11,13 +12,17 @@
     .field-required .form-label { font-weight: 600; }
 
     .editor-shell {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-        gap: .85rem;
-        align-items: start;
+        display: block;
+        position: relative;
     }
-    .editor-card,
-    .preview-card { border: 1px solid #d8e2f2; border-radius: .75rem; background: #fff; overflow: hidden; }
+
+    .editor-card {
+        border: 1px solid #d8e2f2;
+        border-radius: .75rem;
+        background: #fff;
+        overflow: hidden;
+    }
+
     .editor-card-head,
     .preview-card-head {
         display: flex;
@@ -30,14 +35,77 @@
         font-size: .82rem;
         font-weight: 600;
     }
+
+    .editor-card-head-split {
+        gap: .65rem;
+        align-items: flex-start;
+        flex-wrap: wrap;
+    }
+
+    .editor-card-head-main {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: .58rem;
+    }
+
+    .editor-card-head-actions {
+        display: flex;
+        align-items: center;
+        gap: .44rem;
+        margin-left: auto;
+    }
+
+    .editor-tab-switch {
+        display: inline-flex;
+        align-items: center;
+        border: 1px solid #d5deee;
+        border-radius: 999px;
+        background: #fff;
+        overflow: hidden;
+    }
+
+    .editor-tab-btn {
+        border: 0;
+        background: transparent;
+        color: #64748b;
+        font-size: .76rem;
+        font-weight: 600;
+        padding: .24rem .7rem;
+        transition: .16s ease;
+    }
+
+    .editor-tab-btn:hover {
+        color: #1e40af;
+        background: #eef4ff;
+    }
+
+    .editor-tab-btn.is-active {
+        color: #1d4ed8;
+        background: #e8f0ff;
+    }
+
+    .editor-panels {
+        position: relative;
+    }
+
+    .editor-panel {
+        display: none;
+    }
+
+    .editor-panel.is-active {
+        display: block;
+    }
+
     .preview-content {
-        min-height: 360px;
-        max-height: 700px;
+        min-height: 420px;
+        max-height: 760px;
         overflow: auto;
         padding: .9rem .95rem;
         color: #1e293b;
         line-height: 1.68;
     }
+
     .preview-placeholder { color: #94a3b8; font-size: .86rem; }
 
     .advanced-panel {
@@ -46,12 +114,14 @@
         padding: .8rem .9rem;
         background: #fcfdff;
     }
+
     .advanced-panel > summary {
         cursor: pointer;
         list-style: none;
         font-weight: 600;
         color: #334155;
     }
+
     .advanced-panel > summary::-webkit-details-marker { display: none; }
 
     .editor-sticky-actions {
@@ -71,19 +141,180 @@
     }
 
     .EasyMDEContainer .CodeMirror {
-        min-height: 340px;
+        min-height: 470px;
         border: 0;
         font-size: .9rem;
     }
+
     .EasyMDEContainer .editor-toolbar {
         border: 0;
         border-bottom: 1px solid #e2e8f0;
         opacity: 1;
     }
 
+    /* Reset bootstrap class collision (e.g. EasyMDE "table" button vs .table) */
+    .EasyMDEContainer .editor-toolbar button {
+        width: auto !important;
+        margin: 0 !important;
+        margin-bottom: 0 !important;
+        min-width: 30px;
+        vertical-align: middle;
+    }
+
+    .EasyMDEContainer .editor-toolbar a,
+    .EasyMDEContainer .editor-toolbar button {
+        border: 1px solid transparent;
+        border-radius: .4rem;
+        color: #334155;
+    }
+
+    .EasyMDEContainer .editor-toolbar a:hover,
+    .EasyMDEContainer .editor-toolbar a.active,
+    .EasyMDEContainer .editor-toolbar button:hover,
+    .EasyMDEContainer .editor-toolbar button.active {
+        border-color: #d7e2f5;
+        background: #eef4ff;
+    }
+
+    /* EasyMDE toolbar fallback: show readable symbols even if Font Awesome glyph font fails */
+    .EasyMDEContainer .editor-toolbar a[class*="fa-"]::before,
+    .EasyMDEContainer .editor-toolbar button[class*="fa-"]::before {
+        font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif !important;
+        font-weight: 700;
+        font-size: .72rem;
+        line-height: 1;
+    }
+
+    .EasyMDEContainer .editor-toolbar a.fa-bold::before,
+    .EasyMDEContainer .editor-toolbar button.fa-bold::before { content: "B"; }
+    .EasyMDEContainer .editor-toolbar a.fa-italic::before,
+    .EasyMDEContainer .editor-toolbar button.fa-italic::before { content: "I"; font-style: italic; }
+    .EasyMDEContainer .editor-toolbar a.fa-header::before,
+    .EasyMDEContainer .editor-toolbar button.fa-header::before { content: "H"; }
+    .EasyMDEContainer .editor-toolbar a.fa-quote-left::before,
+    .EasyMDEContainer .editor-toolbar button.fa-quote-left::before { content: "\""; }
+    .EasyMDEContainer .editor-toolbar a.fa-list-ul::before,
+    .EasyMDEContainer .editor-toolbar button.fa-list-ul::before { content: "UL"; font-size: .62rem; }
+    .EasyMDEContainer .editor-toolbar a.fa-list-ol::before,
+    .EasyMDEContainer .editor-toolbar button.fa-list-ol::before { content: "OL"; font-size: .62rem; }
+    .EasyMDEContainer .editor-toolbar a.fa-link::before,
+    .EasyMDEContainer .editor-toolbar button.fa-link::before { content: "Link"; font-size: .6rem; }
+    .EasyMDEContainer .editor-toolbar a.fa-picture-o::before,
+    .EasyMDEContainer .editor-toolbar button.fa-picture-o::before { content: "Img"; font-size: .6rem; }
+    .EasyMDEContainer .editor-toolbar a.fa-table::before,
+    .EasyMDEContainer .editor-toolbar button.fa-table::before { content: "Tbl"; font-size: .6rem; }
+    .EasyMDEContainer .editor-toolbar a.fa-question-circle::before,
+    .EasyMDEContainer .editor-toolbar button.fa-question-circle::before { content: "?"; }
+
+    body.editor-fullscreen-open {
+        overflow: hidden;
+    }
+
+    .editor-shell.is-fullscreen {
+        position: fixed;
+        inset: 12px;
+        z-index: 1500;
+    }
+
+    .editor-shell.is-fullscreen::before {
+        content: "";
+        position: fixed;
+        inset: 0;
+        background: rgba(15, 23, 42, .32);
+        z-index: -1;
+    }
+
+    .editor-shell.is-fullscreen .editor-card {
+        height: calc(100vh - 24px);
+        border-radius: .85rem;
+        box-shadow: 0 20px 48px rgba(15, 23, 42, .25);
+        display: flex;
+        flex-direction: column;
+    }
+
+    .editor-shell.is-fullscreen .editor-tab-switch {
+        display: none;
+    }
+
+    .editor-shell.is-fullscreen .editor-panels {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        flex: 1;
+        min-height: 0;
+    }
+
+    .editor-shell.is-fullscreen .editor-panel {
+        display: block !important;
+        min-height: 0;
+        overflow: hidden;
+    }
+
+    .editor-shell.is-fullscreen .editor-panel[data-panel="preview"] {
+        border-left: 1px solid #e2e8f0;
+    }
+
+    .editor-shell.is-fullscreen .editor-panel[data-panel="edit"] > .p-2 {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .editor-shell.is-fullscreen .editor-panel[data-panel="edit"] .form-hint {
+        margin-top: .5rem;
+    }
+
+    .editor-shell.is-fullscreen .editor-panel[data-panel="edit"] .EasyMDEContainer {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .editor-shell.is-fullscreen .editor-panel[data-panel="edit"] .EasyMDEContainer .CodeMirror {
+        flex: 1;
+        min-height: 0;
+        height: auto;
+    }
+
+    .editor-shell.is-fullscreen .preview-card-head {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+    }
+
+    .editor-shell.is-fullscreen .preview-content {
+        height: calc(100vh - 136px);
+        max-height: none;
+        min-height: 0;
+    }
+
     @media (max-width: 991px) {
-        .editor-shell { grid-template-columns: 1fr; }
-        .preview-content { min-height: 240px; }
+        .editor-card-head-actions {
+            width: 100%;
+            justify-content: flex-end;
+            margin-left: 0;
+        }
+
+        .preview-content {
+            min-height: 280px;
+        }
+
+        .EasyMDEContainer .CodeMirror {
+            min-height: 360px;
+        }
+
+        .editor-shell.is-fullscreen .editor-panels {
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr 1fr;
+        }
+
+        .editor-shell.is-fullscreen .editor-panel[data-panel="preview"] {
+            border-left: 0;
+            border-top: 1px solid #e2e8f0;
+        }
+
+        .editor-shell.is-fullscreen .preview-content {
+            height: auto;
+        }
     }
 </style>
-

resources/views/admin/partials/modern-form-scripts.blade.php

@@ -1,4 +1,4 @@
-<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<script src="{{ asset('vendor/easymde/easymde.min.js') }}"></script>
 <script>
     (function () {
         const previewEndpoint = '{{ route('admin.markdown.preview') }}';
@@ -33,11 +33,11 @@
 
             const markdown = editor.value();
             if (!markdown || markdown.trim() === '') {
-                previewElement.innerHTML = '<div class="preview-placeholder">在左侧输入 Markdown 内容，这里会实时显示预览。</div>';
+                previewElement.innerHTML = '<div class="preview-placeholder">Input Markdown on the left. Preview renders here.</div>';
                 return;
             }
 
-            previewElement.innerHTML = '<div class="text-muted">预览生成中...</div>';
+            previewElement.innerHTML = '<div class="text-muted">Generating preview...</div>';
 
             try {
                 const response = await fetch(previewEndpoint, {
@@ -61,9 +61,9 @@
 
                 previewElement.innerHTML = payload.html && payload.html.trim() !== ''
                     ? payload.html
-                    : '<div class="preview-placeholder">暂无可预览内容。</div>';
+                    : '<div class="preview-placeholder">No preview content.</div>';
             } catch (_) {
-                previewElement.innerHTML = '<div class="text-danger">预览失败，请稍后重试。</div>';
+                previewElement.innerHTML = '<div class="text-danger">Preview failed. Please retry.</div>';
             }
         }, 320);
 
@@ -101,6 +101,89 @@
             return `\n![${alt}](${payload.url})\n`;
         };
 
+        const syncBodyFullscreenClass = () => {
+            const hasFullscreen = document.querySelector('.editor-shell.is-fullscreen') !== null;
+            document.body.classList.toggle('editor-fullscreen-open', hasFullscreen);
+        };
+
+        const refreshEditorLayout = (editor) => {
+            if (!editor || !editor.codemirror) {
+                return;
+            }
+
+            window.requestAnimationFrame(() => {
+                editor.codemirror.refresh();
+            });
+        };
+
+        const updateFullscreenButton = (button, isFullscreen) => {
+            if (!(button instanceof HTMLButtonElement)) {
+                return;
+            }
+
+            button.innerHTML = isFullscreen
+                ? '<i class="bi bi-fullscreen-exit me-1"></i>Exit Fullscreen'
+                : '<i class="bi bi-arrows-fullscreen me-1"></i>Fullscreen';
+        };
+
+        const initShellControls = (textarea, editor, previewElement) => {
+            const shell = textarea.closest('.editor-shell');
+            if (!(shell instanceof HTMLElement) || shell.dataset.initialized === 'true') {
+                return;
+            }
+
+            const tabButtons = Array.from(shell.querySelectorAll('.js-md-tab-btn'));
+            const panels = Array.from(shell.querySelectorAll('.editor-panel'));
+            const fullscreenButton = shell.querySelector('.js-md-fullscreen-btn');
+
+            const activateTab = (tab) => {
+                tabButtons.forEach((button) => {
+                    const active = button.getAttribute('data-tab') === tab;
+                    button.classList.toggle('is-active', active);
+                    button.setAttribute('aria-selected', active ? 'true' : 'false');
+                });
+
+                panels.forEach((panel) => {
+                    const active = panel.getAttribute('data-panel') === tab;
+                    panel.classList.toggle('is-active', active);
+                });
+
+                if (tab === 'preview') {
+                    renderPreview(editor, previewElement);
+                }
+
+                refreshEditorLayout(editor);
+            };
+
+            tabButtons.forEach((button) => {
+                button.addEventListener('click', () => {
+                    activateTab(button.getAttribute('data-tab') || 'edit');
+                });
+            });
+
+            if (fullscreenButton instanceof HTMLButtonElement) {
+                fullscreenButton.addEventListener('click', () => {
+                    const willEnterFullscreen = !shell.classList.contains('is-fullscreen');
+
+                    document.querySelectorAll('.editor-shell.is-fullscreen').forEach((openedShell) => {
+                        if (openedShell !== shell) {
+                            openedShell.classList.remove('is-fullscreen');
+                            const button = openedShell.querySelector('.js-md-fullscreen-btn');
+                            updateFullscreenButton(button, false);
+                        }
+                    });
+
+                    shell.classList.toggle('is-fullscreen', willEnterFullscreen);
+                    updateFullscreenButton(fullscreenButton, willEnterFullscreen);
+                    syncBodyFullscreenClass();
+                    refreshEditorLayout(editor);
+                });
+            }
+
+            shell.dataset.initialized = 'true';
+            activateTab('edit');
+        };
+
         const initEditor = (textarea) => {
             if (!(textarea instanceof HTMLTextAreaElement) || instances.has(textarea.name)) {
                 return;
@@ -112,7 +195,7 @@
                 autoDownloadFontAwesome: false,
                 forceSync: true,
                 status: ['lines', 'words'],
-                placeholder: textarea.placeholder || '请输入 Markdown 内容',
+                placeholder: textarea.placeholder || 'Write Markdown here',
                 toolbar: [
                     'bold',
                     'italic',
@@ -126,10 +209,6 @@
                     'image',
                     'table',
                     '|',
-                    'preview',
-                    'side-by-side',
-                    'fullscreen',
-                    '|',
                     'guide',
                 ],
             });
@@ -142,6 +221,7 @@
             });
 
             renderPreview(easyMde, previewElement);
+            initShellControls(textarea, easyMde, previewElement);
             instances.set(textarea.name, easyMde);
         };
 
@@ -166,13 +246,13 @@
 
                         const originHtml = button.innerHTML;
                         button.disabled = true;
-                        button.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>上传中...';
+                        button.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Uploading...';
 
                         try {
                             const payload = await uploadImage(file);
                             editor.codemirror.replaceSelection(markdownForImage(payload, file.name || 'image'));
                         } catch (_) {
-                            alert('图片上传失败，请稍后重试');
+                            alert('Image upload failed. Please retry.');
                         } finally {
                             button.disabled = false;
                             button.innerHTML = originHtml;
@@ -215,6 +295,21 @@
             }
         };
 
+        document.addEventListener('keydown', (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+
+            document.querySelectorAll('.editor-shell.is-fullscreen').forEach((shell) => {
+                shell.classList.remove('is-fullscreen');
+                const button = shell.querySelector('.js-md-fullscreen-btn');
+                updateFullscreenButton(button, false);
+            });
+
+            syncBodyFullscreenClass();
+            instances.forEach((editor) => refreshEditorLayout(editor));
+        });
+
         document.querySelectorAll('textarea.js-md-editor-modern').forEach(initEditor);
         connectUploadButtons();
         initSlugAutoFill();