模版编辑

app/Admin/Controllers/DistAppearanceTemplateController.php

@@ -9,8 +9,10 @@ use Dcat\Admin\Show;
 use Dcat\Admin\Http\Controllers\AdminController;
 use Dcat\Admin\Layout\Content;
 use Dcat\Admin\Admin;
-use App\Admin\Forms\monacoLeft;
+use App\Admin\Forms\AceLeft;
+use App\Admin\Forms\AceRight;
 use Illuminate\Http\Request;
+use Illuminate\Support\Str;
 
 
 class DistAppearanceTemplateController extends AdminController
@@ -19,7 +21,8 @@ class DistAppearanceTemplateController extends AdminController
     /*
      * monaco editor 编辑代码
      */
-    public function monaco(Content $content,Request $request) {
+    public function ace(Content $content,Request $request) {
+        $content->view('admin.pages-custom.ace_content');
         if ($request->isMethod('post')) {
             if($request->get('act') == 'tree') {
                 //获取代码树形结构
@@ -35,10 +38,20 @@ class DistAppearanceTemplateController extends AdminController
                 $template_id = $request->get('template_id');
                 $content = $request->get('content');
                 return DistAppearanceTemplate::saveContent($template_id, $content);
+            } elseif ($request->get('act') == 'aceRight') {
+                //右侧代码编辑器
+                $distId = $request->get('dist_id');
+                $appearanceId = $request->get('appearance_id');
+                $templateId = $request->get('template_id');
+                return new AceRight($distId,$appearanceId,$templateId);
             }
         }
-        $leftForm = new monacoLeft();
-        return $content->body(admin_view('admin.pages-custom.monaco',['leftForm'=>$leftForm]));
+
+        $leftForm = new AceLeft();
+        //
+        return $content
+            ->header('Template Editor')
+            ->body(admin_view('admin.pages-custom.ace',['leftForm'=>$leftForm]));
     }
 
     /*
@@ -91,6 +104,7 @@ class DistAppearanceTemplateController extends AdminController
 
 
 
+
 //
 //    /**
 //     * page index

app/Admin/Forms/monacoLeft.php → app/Admin/Forms/AceLeft.php

@@ -7,12 +7,10 @@ use Symfony\Component\HttpFoundation\Response;
 use Dcat\Admin\Widgets\Form;
 use App\Admin\Repositories\DistAppearance;
 
-class monacoLeft extends Form
+class AceLeft extends Form
 {
     public function form()
     {
-        // 定义表单字段
-        //$this->text('name', '姓名')->width(12,12)->setLabelClass('d-flex');
         //主题选择
         $this->select('appearance_id','Select Appearance')
             ->options(DistAppearance::selectOptions())
@@ -26,17 +24,13 @@ class monacoLeft extends Form
             ->placeholder('Select Distributor')
             ->from(DistDistributorTable::make())
             ->help('If empty, use the original template.');
-        $this->divider();
         $this->disableSubmitButton();
         $this->disableResetButton();
-        $this->method('GET');
     }
 
     // 处理表单提交请求
     public function handle(array $input)
     {
-        // dump($input);
-
         return $this->response()->success('Processed successfully.')->refresh();
     }
 

app/Admin/Forms/AceRight.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Admin\Forms;
+
+use App\Admin\Renderable\DistDistributorTable;
+use App\Admin\Repositories\DistAppearance;
+use Dcat\Admin\Widgets\Form;
+use App\Admin\Repositories\DistAppearanceVariable;
+
+class AceRight extends Form
+{
+    public $distId;
+    public $appearanceId;
+    public $templateId;
+    public function __construct($distId,$appearanceId,$templateId)
+    {
+        $this->distId = empty($distId) ? 0 : $distId;
+        $this->appearanceId = empty($appearanceId) ? 0 : $appearanceId;
+        $this->templateId = empty($templateId) ? 0 : $templateId;
+        parent::__construct();
+    }
+
+    /*
+     * 表单设置
+     */
+    public function form()
+    {
+        $variableRow = DistAppearanceVariable::getVariableRow($this->distId,$this->appearanceId,$this->templateId);
+        if ($variableRow) {
+
+        } else {
+           $this->disableSubmitButton();
+        }
+        $this->disableResetButton();
+    }
+
+    // 处理表单提交请求
+    public function handle(array $input)
+    {
+        return $this->response()->success('Processed successfully.')->refresh();
+    }
+
+    /**
+     * 返回表单数据，如不需要可以删除此方法
+     *
+     * @return array
+     */
+    public function default()
+    {
+        return [];
+    }
+
+}

app/Admin/Repositories/DistAppearanceVariable.php

@@ -15,5 +15,15 @@ class DistAppearanceVariable extends EloquentRepository
     protected $eloquentClass = Model::class;
 
 
+    public static function getVariableRow($distId,$appearanceId,$templateId)
+    {
+        $model = new Model();
+        $variable = $model->where('dist_id',$distId)->where('appearance_id',$appearanceId)->where('template_id',$templateId)->first();
+        if($variable){
+            return $variable;
+        }else{
+            return '';
+        }
+    }
 
 }

app/Admin/routes.php

@@ -35,7 +35,7 @@ Route::group([
     //外观管理
     $router->resource('dist-appearance', 'DistAppearanceController');
     //模板管理
-    $router->any('dist-template/monaco', [DistAppearanceTemplateController::class, 'monaco']);
+    $router->any('dist-template/ace', [DistAppearanceTemplateController::class, 'ace']);
     //模板变量
     $router->resource('dist-template-var', 'DistAppearanceVariableController');
 });

resources/views/admin/pages-custom/monaco.blade.php → resources/views/admin/pages-custom/ace.blade.php

@@ -4,25 +4,24 @@
     }
     .left-panel {
         background-color: #fff; /* 左侧面板的背景色 */
-        height: 89vh; /* 高度占满 */
+        height: 100vh; /* 高度占满 */
     }
-    .right-panel {
+    .main-panel {
         background-color: #e9ecef; /* 右侧面板的背景色 */
-        height: 86vh; /* 高度占满 */
+        height: 97vh; /* 高度占满 */
     }
     .right-panel-header {
         background-color: #fff;
     }
     .card-body {
-        max-height: 60vh; /* 设置最大高度 */
+        max-height: 100vh; /* 设置最大高度 */
         overflow-y: auto; /* 启用垂直滚动条 */
         border-radius: 4px; /* 圆角 */
     }
 
     #editor {
-        height: 600px; /* 设置编辑器的高度 */
-        width: 800px; /* 设置编辑器的宽度 */
-        background-color: #fff;
+
+        background-color: #1e1e1e;
     }
 
     .submenu {
@@ -43,13 +42,15 @@
             <div class="card-body"></div>
             <!-- 代码树 end-->
         </div>
-        <div class="col-10 right-panel"> <!-- 右侧80% -->
+        <div class="col-8 main-panel"> <!-- 右侧80% -->
             <div class="right-panel-header">
                 <button type="button" class="btn btn-primary btn-sm" id="save-btn">保存</button>
             </div>
             <div class="right-panel-content" id="editor" style="width: 100%; height: 100%;"></div>
             <input type="hidden" name="template_id"  id="template_id" />
         </div>
+        <div class="col-2 right-panel">
+        </div>
     </div>
 </div>
 
@@ -61,7 +62,7 @@
     // 设置语言
     editor.getSession().setMode("ace/mode/html");
     // 设置主题
-    editor.setTheme("ace/theme/tomorrow");
+    editor.setTheme("ace/theme/monokai");
     editor.setAutoScrollEditorIntoView(true);
     // 其他配置
     editor.setOptions({
@@ -73,8 +74,9 @@
         var actionclick = function() {
             $('.file-action').click(function() {
                 var id = $(this).attr('file_id');
+                //编辑代码
                 $.ajax({
-                    url: '/prime-control/dist-template/monaco',
+                    url: '/prime-control/dist-template/ace',
                     type: 'POST',
                     data: {
                         act:'content',
@@ -85,13 +87,27 @@
                         editor.setValue(response);
                     }
                 });
+                //显示右边变量列表
+                $.ajax({
+                    url: '/prime-control/dist-template/ace',
+                    type: 'POST',
+                    data: {
+                        act:'aceRight',
+                        template_id: id,
+                        dist_id: $('input[name="dist_id"]').val(),
+                        appearance_id: $('select[name="appearance_id"]').val()
+                    },
+                    success: function(response) {
+                        $("#variables-list").html(response);
+                    }
+                });
             });
         }
         var postData = function () {
             var appearance_id = $('select[name="appearance_id"]').val();
             var dist_id = $('input[name="dist_id"]').val();
             $.ajax({
-                url: '/prime-control/dist-template/monaco',
+                url: '/prime-control/dist-template/ace',
                 type: 'POST',
                 data: {
                     act:'tree',
@@ -118,7 +134,7 @@
                 return false;
             }
             $.ajax({
-                url: '/prime-control/dist-template/monaco',
+                url: '/prime-control/dist-template/ace',
                 type: 'POST',
                 data: {
                     act:'save',

resources/views/admin/pages-custom/ace_content.blade.php

@@ -0,0 +1,58 @@
+@section('content-header')
+    <section class="content-header breadcrumbs-top">
+        @if($header || $description)
+            <h1 class=" float-left">
+                <span class="text-capitalize">{!! $header !!}</span>
+                <small>{!! $description !!}</small>
+            </h1>
+        @elseif($breadcrumb || config('admin.enable_default_breadcrumb'))
+            <div>&nbsp;</div>
+        @endif
+
+        @include('admin::partials.breadcrumb')
+
+    </section>
+@endsection
+
+@section('content')
+    @include('admin::partials.alerts')
+    @include('admin::partials.exception')
+
+    {!! $content !!}
+
+    @include('admin::partials.toastr')
+@endsection
+
+@section('app')
+    {!! Dcat\Admin\Admin::asset()->styleToHtml() !!}
+
+    <div class="content-header">
+        @yield('content-header')
+    </div>
+
+    <div class="content-body" id="app">
+        {{-- 页面埋点--}}
+        {!! admin_section(Dcat\Admin\Admin::SECTION['APP_INNER_BEFORE']) !!}
+
+        @yield('content')
+
+        {{-- 页面埋点--}}
+        {!! admin_section(Dcat\Admin\Admin::SECTION['APP_INNER_AFTER']) !!}
+    </div>
+
+    {!! Dcat\Admin\Admin::asset()->scriptToHtml() !!}
+    <div class="extra-html">{!! Dcat\Admin\Admin::html() !!}</div>
+@endsection
+
+@if(! request()->pjax())
+    @include('admin.pages-custom.ace_page')
+@else
+    <title>{{ Dcat\Admin\Admin::title() }} @if($header) | {{ $header }}@endif</title>
+
+    <script>Dcat.wait()</script>
+
+    {!! Dcat\Admin\Admin::asset()->cssToHtml() !!}
+    {!! Dcat\Admin\Admin::asset()->jsToHtml() !!}
+
+    @yield('app')
+@endif

resources/views/admin/pages-custom/ace_page.blade.php

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
+    {{-- 默认使用谷歌浏览器内核--}}
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
+    <title>@if(! empty($header)){{ $header }} | @endif {{ Dcat\Admin\Admin::title() }}</title>
+
+    @if(! config('admin.disable_no_referrer_meta'))
+        <meta name="referrer" content="no-referrer"/>
+    @endif
+
+    @if(! empty($favicon = Dcat\Admin\Admin::favicon()))
+        <link rel="shortcut icon" href="{{ $favicon }}">
+    @endif
+
+    {!! admin_section(Dcat\Admin\Admin::SECTION['HEAD']) !!}
+
+    {!! Dcat\Admin\Admin::asset()->headerJsToHtml() !!}
+
+    {!! Dcat\Admin\Admin::asset()->cssToHtml() !!}
+</head>
+
+<body
+    class="dcat-admin-body sidebar-mini layout-fixed {{ $configData['body_class']}} {{ $configData['sidebar_class'] }}
+        {{ $configData['navbar_class'] === 'fixed-top' ? 'navbar-fixed-top' : '' }} " >
+<script>
+    var Dcat = CreateDcat({!! Dcat\Admin\Admin::jsVariables() !!});
+</script>
+
+{!! admin_section(Dcat\Admin\Admin::SECTION['BODY_INNER_BEFORE']) !!}
+
+<div class="container-fluid">
+    @yield('app')
+</div>
+
+{!! admin_section(Dcat\Admin\Admin::SECTION['BODY_INNER_AFTER']) !!}
+
+{!! Dcat\Admin\Admin::asset()->jsToHtml() !!}
+
+<script>
+    Dcat.ready(function () {
+        var clipboard = new ClipboardJS('.copy');
+        clipboard.on('success', function(e) {
+            e.clearSelection();
+            layer.msg('已复制');
+        });
+        clipboard.on('error', function(e) {
+            e.clearSelection();
+            layer.msg('复制内容失败');
+        });
+        /**
+         * 全屏
+         */
+        $('body').on('click', '[data-check-screen]', function () {
+            var check = $(this).attr('data-check-screen');
+            if (check == 'full') {
+                openFullscreen();
+                $(this).attr('data-check-screen', 'exit');
+                $(this).html('<i class="feather icon-minimize"</i>');
+            } else {
+                closeFullscreen();
+                $(this).attr('data-check-screen', 'full');
+                $(this).html('<i class="feather icon-maximize"></i>');
+            }
+        });
+        // 进入全屏
+        function openFullscreen() {
+            var elem = document.documentElement;
+            if (elem.requestFullscreen) {
+                elem.requestFullscreen();
+            } else if (elem.mozRequestFullScreen) { /* Firefox */
+                elem.mozRequestFullScreen();
+            } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+                elem.webkitRequestFullscreen();
+            } else if (elem.msRequestFullscreen) { /* IE/Edge */
+                elem.msRequestFullscreen();
+            }
+        }
+        // 退出全屏
+        function closeFullscreen() {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.mozCancelFullScreen) { /* Firefox */
+                document.mozCancelFullScreen();
+            } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+                document.webkitExitFullscreen();
+            } else if (document.msExitFullscreen) { /* IE/Edge */
+                document.msExitFullscreen();
+            }
+        }
+    })
+    Dcat.boot();
+</script>
+
+</body>
+
+</html>