可视化编辑

app/Distributor/Controllers/VisualEditorController.php

@@ -30,7 +30,15 @@ class VisualEditorController extends Controller
         //菜单
         $siteMenu = SiteMenu::showAllSelectOptions();
         //
-        return view('distributor.pages-custom.visual-editor',['html'=>$html,'siteMenu'=>json_encode($siteMenu),'mid'=>$mid]);
+        $publish = admin_trans_label('publish');
+        $visualEdit = admin_trans_label('visual_edit');
+        return view('distributor.pages-custom.visual-editor',[
+            'html'=>$html,
+            'siteMenu'=>json_encode($siteMenu),
+            'mid'=>$mid,
+            'publish' => $publish,
+            'visualEdit' => $visualEdit,
+        ]);
     }
 
     /*
@@ -106,7 +114,7 @@ class VisualEditorController extends Controller
         //把form去掉
         $pattern = '/<form[^>]*>(.*?)<\/form>/is';
         $html = preg_replace($pattern, '$1', $html);
-        
+
         return $html;
     }
 

app/Distributor/Repositories/SiteMenu.php

@@ -47,7 +47,7 @@ class SiteMenu extends EloquentRepository
         }
 
         $topSelectOptions =  Model::class::selectOptions(function ($query) {
-            $query =  $query->where('dist_id', getDistributorId())->orderBy('order', 'asc');
+            $query =  $query->where('menu_location',0)->where('dist_id', getDistributorId())->orderBy('order', 'asc');
             return $query;
         });
 
@@ -59,7 +59,7 @@ class SiteMenu extends EloquentRepository
         $selectOptions = [];
         foreach ($topSelectOptions as $key => $value) {
             if ($key == 0) {
-                $selectOptions[] = ['id'=>-1,'title'=>'顶部菜单','url'=>''];
+                $selectOptions[] = ['id'=>-1,'title'=>admin_trans_label('top_menu'),'url'=>''];
             } else {
                 $url = $siteDomain == '' ? $arrayMenu[$key]['uri'] : $siteDomain.$arrayMenu[$key]['uri'];
                 $selectOptions[] = ['id'=>$key,'title'=>$value,'url'=>$url];
@@ -68,7 +68,7 @@ class SiteMenu extends EloquentRepository
 
         foreach ($bottomSelectOptions as $key => $value) {
             if ($key == 0) {
-                $selectOptions[] = ['id'=>-2,'title'=>'底部菜单','url'=>''];
+                $selectOptions[] = ['id'=>-2,'title'=>admin_trans_label('bottom_menu'),'url'=>''];
             } else {
                 $url = $siteDomain == '' ? $arrayMenu[$key]['uri'] : $siteDomain.$arrayMenu[$key]['uri'];
                 $selectOptions[] = ['id'=>$key,'title'=>$value,'url'=>$url];

lang/en/global.php

@@ -187,6 +187,8 @@ return [
         'distributor_create_success' => 'Create successfully, please configure the distributor site!',
         'attribute_name'        => 'Attribute Name',
         'visual_edit'           => 'Visual Edit',
+        'top_menu'              => 'Top Menu',
+        'bottom_menu'           => 'Bottom Menu',
     ],
     'options' => [
         //

lang/zh_CN/global.php

@@ -194,6 +194,8 @@ return [
         'distributor_create_success' => '创建成功，请配置分销商站点!',
         'attribute_name'        => '属性名称',
         'visual_edit'           => '可视化编辑',
+        'top_menu'              => '顶部菜单',
+        'bottom_menu'           => '底部菜单',
     ],
     'options' => [
         //

public/vendor/grapes/grapes.init.js

@@ -123,7 +123,7 @@ const myNewComponentTypes = (editor) => {
 const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
 // 创建 GrapesJS 编辑器实例
 const editor = grapesjs.init({
-    container: '#gjs', // 指定编辑器容器的 DOM 元素
+    container: '#mtb_visual_editor', // 指定编辑器容器的 DOM 元素
     fromElement: true, // 从 DOM 元素中加载初始内容
     height: '100%', // 设置编辑器的高度
     width: '100%', // 设置宽度自适应
@@ -326,13 +326,16 @@ editor.on('load', () => {
     customSelect = document.querySelector('.custom-select');
     // 创建 sendButton 按钮
     const sendButton = document.createElement('button');
-    sendButton.textContent = 'publish'; // 按钮文本
+    sendButton.textContent = publishBtnName; // 按钮文本
     sendButton.classList.add('send-button');
     sendButton.classList.add('layui-btn');
     sendButton.classList.add('layui-btn-radius');
     sendButton.classList.add('layui-btn-radius');
     sendButton.style = 'margin-left:10px;height:25px;line-height:25px;padding:0 10px;vertical-align:unset;'; // 添加样式（可选）
     customSelect.insertAdjacentElement('afterend', sendButton);
+
+    //关闭loading
+    layer.close(loadIndex);
 });
 
 //更新时调用接口保存数据
@@ -360,15 +363,18 @@ editor.on('update', () => {
     });
 });
 
-// 上传图片时触发
-var layer = layui.layer;
-var loadIndex = null;
+// 上传图片时触发loading效果
 editor.on('asset:upload:start', () => {
     loadIndex = layer.load(0, {shade: [0.5, '#000']});
 });
 
-// The upload is ended (completed or not)
 editor.on('asset:upload:end', () => {
     layer.close(loadIndex);
 });
 
+// 图片懒加载
+layui.use('flow', function(){
+    var flow = layui.flow;
+    //当你执行这样一个方法时，即对页面中的全部带有 lay-src 的 img 元素开启了懒加载（当然你也可以指定相关 img）
+    flow.lazyimg();
+});

public/vendor/grapes/style.css

@@ -0,0 +1,61 @@
+body, html {
+    height: 100%;
+    margin: 0;
+}
+.gjs-mdl-dialog {
+    background-color: white;
+    color: #333;
+}
+.gjs-cv-canvas-bg {
+    width: 100%;
+}
+
+.gjs-pn-options {
+    right: unset;
+    left: 33%;
+}
+.gjs-pn-buttons {
+    text-align: right;
+    display:block;
+}
+
+/* 美化下拉选择框 */
+.custom-select {
+    margin-left: 10px;
+    padding: 3px 16px; /* 增加内边距，为下拉内容留出空位 */
+    font-size: 14px; /* 字体大小 */
+    color: #444; /* 字体颜色 */
+    background-color: #fff; /* 背景颜色 */
+    border: 1px solid #ddd; /* 边框 */
+    border-radius: 4px; /* 圆角 */
+    outline: none; /* 去掉聚焦时的默认边框 */
+    cursor: pointer; /* 鼠标指针样式 */
+    transition: all 0.3s ease; /* 过渡效果 */
+    appearance: none; /* 移除默认的下拉箭头 */
+    position: relative; /* 为下拉箭头定位 */
+    width:200px;
+}
+
+/* 悬停效果 */
+.custom-select:hover {
+    background-color: #f8f8f8; /* 悬停时的背景颜色 */
+    border-color: #ccc; /* 悬停时的边框颜色 */
+}
+
+/* 聚焦效果 */
+.custom-select:focus {
+    border-color: #ccc; /* 聚焦时的边框颜色 */
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); /* 聚焦时的阴影 */
+}
+
+/* 下拉箭头样式 */
+.custom-select::after {
+    content: '\f0d7'; /* FontAwesome 下拉箭头图标 */
+    font-family: 'FontAwesome';
+    position: absolute;
+    right: 8px; /* 调整箭头位置，使其与右边距对齐 */
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none; /* 防止点击事件 */
+    color: #444; /* 下拉箭头颜色 */
+}

resources/views/distributor/pages-custom/visual-editor.blade.php

@@ -3,91 +3,27 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>Editor</title>
+    <title>{!! $visualEdit !!}</title>
     <meta name="csrf-token" content="{{ csrf_token() }}">
-    <link rel="stylesheet" href="/vendor/grapes/grapes.min.css">
-    <script src="/vendor/grapes/grapes.min.js"></script>
-    <script src="/vendor/grapes/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" href="/vendor/grapes/grapes.min.css" rel="stylesheet">
     <link href="/vendor/grapes/layui/css/layui.css" rel="stylesheet">
+    <link rel="stylesheet" href="/vendor/grapes/style.css" rel="stylesheet">
+    <script src="/vendor/grapes/grapes.min.js"></script>
+    <script src="/vendor/grapes/jquery.min.js"></script>
     <script src="/vendor/grapes/layui/layui.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/font-awesome.min.css">
-    <style>
-        body, html {
-            height: 100%;
-            margin: 0;
-        }
-        .gjs-mdl-dialog {
-            background-color: white;
-            color: #333;
-        }
-        .gjs-cv-canvas-bg {
-            width: 100%;
-        }
-        /*.gjs-pn-views-container {*/
-        /*    display: none;*/
-        /*}*/
-        /*.gjs-pn-views {*/
-        /*    border: none;*/
-        /*}*/
-
-        .gjs-pn-options {
-            right: unset;
-            left: 33%;
-        }
-        .gjs-pn-buttons {
-            text-align: right;
-            display:block;
-        }
-
-        /* 美化下拉选择框 */
-        .custom-select {
-            margin-left: 10px;
-            padding: 3px 16px; /* 增加内边距，为下拉内容留出空位 */
-            font-size: 14px; /* 字体大小 */
-            color: #444; /* 字体颜色 */
-            background-color: #fff; /* 背景颜色 */
-            border: 1px solid #ddd; /* 边框 */
-            border-radius: 4px; /* 圆角 */
-            outline: none; /* 去掉聚焦时的默认边框 */
-            cursor: pointer; /* 鼠标指针样式 */
-            transition: all 0.3s ease; /* 过渡效果 */
-            appearance: none; /* 移除默认的下拉箭头 */
-            position: relative; /* 为下拉箭头定位 */
-        }
-
-        /* 悬停效果 */
-        .custom-select:hover {
-            background-color: #f8f8f8; /* 悬停时的背景颜色 */
-            border-color: #ccc; /* 悬停时的边框颜色 */
-        }
-
-        /* 聚焦效果 */
-        .custom-select:focus {
-            border-color: #ccc; /* 聚焦时的边框颜色 */
-            box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); /* 聚焦时的阴影 */
-        }
-
-        /* 下拉箭头样式 */
-        .custom-select::after {
-            content: '\f0d7'; /* FontAwesome 下拉箭头图标 */
-            font-family: 'FontAwesome';
-            position: absolute;
-            right: 8px; /* 调整箭头位置，使其与右边距对齐 */
-            top: 50%;
-            transform: translateY(-50%);
-            pointer-events: none; /* 防止点击事件 */
-            color: #444; /* 下拉箭头颜色 */
-        }
 
-    </style>
+    <script>
+        var layer = layui.layer;
+        var loadIndex = null;
+        loadIndex = layer.load(0, {shade: [0.9, '#000']});
+    </script>
 </head>
 <body>
-<div id="gjs">
-    {!!$html!!}
-</div>
+<div id="mtb_visual_editor">{!!$html!!}</div>
 <script>
     var siteMenu = {!!$siteMenu!!};
     var mid= {!!$mid!!};
+    var publishBtnName = "{!!$publish!!}";
 </script>
 <script src="/vendor/grapes/grapes.init.js"></script>
 </body>