优化后台功能

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>