新增宫格导航组件；增加innermargin设置（手机滚动条间隙）；增加tp模板渲染；

app/command/make/component/tpl/_index.env

@@ -4,3 +4,4 @@ padding=0
 margin=0
 gray=0
 mobile=0
+inner_margin=0

app/command/make/component/tpl/_index.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+
+];

app/model/Post.php

@@ -4,6 +4,7 @@ declare(strict_types=1);
 
 namespace app\model;
 
+use MallardDuck\HtmlFormatter\Formatter;
 use Parsedown;
 use ScssPhp\ScssPhp\Compiler;
 use think\Env as ThinkEnv;
@@ -20,6 +21,7 @@ use think\model\concern\SoftDelete;
  */
 class Post extends Model
 {
+    use SoftDelete;
     //
 
     public static $stausNameList = [
@@ -27,8 +29,6 @@ class Post extends Model
         1 => '发布'
     ];
 
-    use SoftDelete;
-
     protected $defaultSoftDelete = 0;
 
     public function category()
@@ -214,8 +214,21 @@ class Post extends Model
 
             $env_info->load($components_path . '/_index.env');
 
+            $php_path = $components_path . '/_index.php';
+
+            $components_data = [];
+
+            if(file_exists($php_path)) {
+                $components_data = require($php_path);
+            }
+
+            $html_content = View::display(file_get_contents($components_path . '/_index.html'), $components_data);
+
+            $formatter = new Formatter();
+            $html_content = $formatter->beautify($html_content);
+
             $list_components_data[$components_name]['config'] = $env_info->get();
-            $list_components_data[$components_name]['html'] = file_get_contents($components_path . '/_index.html');
+            $list_components_data[$components_name]['html'] = $html_content;
             $list_components_data[$components_name]['scss'] = file_get_contents($components_path . '/_index.scss');
             $list_components_data[$components_name]['css'] = $scss_compiler->compileString($list_components_data[$components_name]['scss'])->getCss();
             $list_components_data[$components_name]['markdown'] = file_get_contents($components_path . '/_index.md');

composer.json

@@ -28,7 +28,8 @@
         "topthink/think-multi-app": "^1.0",
         "scssphp/scssphp": "^1.11",
         "erusev/parsedown": "^1.7",
-        "topthink/think-filesystem": "^2.0"
+        "topthink/think-filesystem": "^2.0",
+        "mallardduck/html-formatter": "^1.0"
     },
     "require-dev": {
         "symfony/var-dumper": "^4.2"

public/cdn/layui-ul.css

@@ -1478,6 +1478,105 @@
   font-size: clac(20px);
 }
 
+.ul-nav-grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.ul-nav-grid .item {
+  flex: 0 0 33.3333333333%;
+  text-align: center;
+  margin-bottom: 12px;
+}
+.ul-nav-grid .item .icon {
+  text-align: center;
+}
+.ul-nav-grid .item .main {
+  display: inline-block;
+  padding: 6px;
+}
+.ul-nav-grid.colord .item.red .icon {
+  color: #FF6961;
+}
+.ul-nav-grid.colord .item.orange .icon {
+  color: #FFA07A;
+}
+.ul-nav-grid.colord .item.yellow .icon {
+  color: #FF69B4;
+}
+.ul-nav-grid.colord .item.green .icon {
+  color: #2ECC71;
+}
+.ul-nav-grid.colord .item.bluegreen .icon {
+  color: #1ABC9C;
+}
+.ul-nav-grid.colord .item.blue .icon {
+  color: #3498DB;
+}
+.ul-nav-grid.colord .item.purple .icon {
+  color: #AF7AC5;
+}
+.ul-nav-grid.colord-bg .item.red .icon {
+  color: #fff;
+}
+.ul-nav-grid.colord-bg .item.red .icon .main {
+  background-color: #FF6961;
+  border-radius: 50%;
+}
+.ul-nav-grid.colord-bg .item.orange .icon {
+  color: #fff;
+}
+.ul-nav-grid.colord-bg .item.orange .icon .main {
+  background-color: #FFA07A;
+  border-radius: 50%;
+}
+.ul-nav-grid.colord-bg .item.yellow .icon {
+  color: #fff;
+}
+.ul-nav-grid.colord-bg .item.yellow .icon .main {
+  background-color: #FF69B4;
+  border-radius: 50%;
+}
+.ul-nav-grid.colord-bg .item.green .icon {
+  color: #fff;
+}
+.ul-nav-grid.colord-bg .item.green .icon .main {
+  background-color: #2ECC71;
+  border-radius: 50%;
+}
+.ul-nav-grid.colord-bg .item.bluegreen .icon {
+  color: #fff;
+}
+.ul-nav-grid.colord-bg .item.bluegreen .icon .main {
+  background-color: #1ABC9C;
+  border-radius: 50%;
+}
+.ul-nav-grid.colord-bg .item.blue .icon {
+  color: #fff;
+}
+.ul-nav-grid.colord-bg .item.blue .icon .main {
+  background-color: #3498DB;
+  border-radius: 50%;
+}
+.ul-nav-grid.colord-bg .item.purple .icon {
+  color: #fff;
+}
+.ul-nav-grid.colord-bg .item.purple .icon .main {
+  background-color: #AF7AC5;
+  border-radius: 50%;
+}
+.ul-nav-grid.box {
+  background-color: #eee;
+  padding: 0.5px;
+}
+.ul-nav-grid.box .item {
+  flex: 0 0 calc(33.3333333333% - 1px - 24px);
+  margin: 0.5px;
+  background-color: #fff;
+  padding: 12px;
+}
+
 .ul-nav-info__item {
   display: flex;
   align-items: center;

source/components/_index.scss

@@ -14,4 +14,5 @@
 @import './list/ul-photo-list-b/index';
 @import './list/ul-site-group/index';
 @import './logo/ul-logo/index';
+@import './nav/ul-nav-grid/index';
 @import './nav/ul-nav-info/index';

source/components/nav/ul-nav-grid/_index.env

@@ -0,0 +1,6 @@
+title=宫格导航
+padding=1
+margin=0
+gray=0
+mobile=1
+inner_margin=1

source/components/nav/ul-nav-grid/_index.html

@@ -0,0 +1,75 @@
+<div class="ul-group-title">
+    基本
+</div>
+<div class="ul-nav-grid colord">
+    <div class="item red">
+        <div class="icon">
+            <div class="main">
+                <i class="layui-icon layui-icon-home"></i>
+            </div>
+        </div>
+        <div class="title">首页</div>
+    </div>
+</div>
+<div class="ul-group-title">
+    图标颜色
+</div>
+<div class="ul-nav-grid colord">
+    {for start='0' end='12'}
+    <div class="item {$colors[$i%7]}">
+        <div class="icon">
+            <div class="main">
+                <i class="layui-icon layui-icon-home"></i>
+            </div>
+        </div>
+        <div class="title">首页</div>
+    </div>
+    {/for}
+</div>
+<div class="ul-group-title">
+    图标背景
+</div>
+<div class="ul-nav-grid colord-bg">
+    {for start='0' end='12'}
+    <div class="item {$colors[$i%7]}">
+        <div class="icon">
+            <div class="main">
+                <i class="layui-icon layui-icon-home"></i>
+            </div>
+
+        </div>
+        <div class="title">首页</div>
+    </div>
+    {/for}
+</div>
+<div class="ul-group-title">
+    宫格边框+背景色
+</div>
+<div class="ul-nav-grid colord-bg box">
+    {for start='0' end='12'}
+    <div class="item {$colors[$i%7]}">
+        <div class="icon">
+            <div class="main">
+                <i class="layui-icon layui-icon-home"></i>
+            </div>
+
+        </div>
+        <div class="title">首页</div>
+    </div>
+    {/for}
+</div>
+<div class="ul-group-title">
+    宫格边框+图片
+</div>
+<div class="ul-nav-grid">
+    {for start='0' end='4'}
+    <div class="item {$colors[$i%7]}">
+        <div class="icon">
+            <div class="main">
+                <img style="width: 26px;height: 26px;" src="/static/images/view.jpg">
+            </div>
+        </div>
+        <div class="title">首页</div>
+    </div>
+    {/for}
+</div>

source/components/nav/ul-nav-grid/_index.php

@@ -0,0 +1,13 @@
+<?php
+
+return [
+    'colors'=>[
+        'red',
+        'orange',
+        'yellow',
+        'green',
+        'bluegreen',
+        'blue',
+        'purple',
+    ]
+];

source/components/nav/ul-nav-grid/_index.scss

@@ -0,0 +1,77 @@
+.ul-nav-grid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    .item {
+        flex: 0 0 calc(100% / 3);
+        text-align: center;
+        margin-bottom: 12px;
+
+        .icon {
+            text-align: center;
+        }
+
+        .main {
+            display: inline-block;
+            padding: 6px;
+        }
+    }
+
+    // 将背景颜色值定义成变量
+
+    $colors:('red': #FF6961,
+        'orange': #FFA07A,
+        'yellow': #FF69B4,
+        'green': #2ECC71,
+        'bluegreen': #1ABC9C,
+        'blue': #3498DB,
+        'purple': #AF7AC5,
+    );
+
+
+
+    &.colord {
+
+        @each $colorKey,
+        $color in $colors {
+            .item.#{$colorKey} {
+                .icon {
+                    color: $color;
+                }
+            }
+
+        }
+
+    }
+
+    &.colord-bg {
+
+        @each $colorKey,
+        $color in $colors {
+            .item.#{$colorKey} {
+                .icon {
+                    color: #fff;
+
+                    .main {
+                        background-color: $color;
+                        border-radius: 50%;
+                    }
+                }
+            }
+        }
+    }
+
+    &.box {
+        background-color: #eee;
+        padding: 0.5px;
+
+        .item {
+            flex: 0 0 calc(100% / 3 - 1px - 24px);
+            margin: 0.5px;
+            background-color: #fff;
+            padding: 12px;
+        }
+    }
+}

view/index/index/index.html

@@ -74,7 +74,7 @@
                                 <div class="desc">
                                     {$vo.desc|raw}
                                 </div>
-                                <div class="component-item" style="margin-top: 10px;" data-margin="{$vo.config.MARGIN|default='0'}" data-padding="{$vo.config.PADDING|default='0'}" data-gray="{$vo.config.GRAY|default='0'}" data-mobile="{$vo.config.MOBILE|default='0'}">
+                                <div class="component-item" style="margin-top: 10px;" data-margin="{$vo.config.MARGIN|default='0'}" data-padding="{$vo.config.PADDING|default='0'}" data-gray="{$vo.config.GRAY|default='0'}" data-mobile="{$vo.config.MOBILE|default='0'}" data-inner-margin="{$vo.config.INNER_MARGIN|default='0'}">
                                     <div class="">
                                         <span>预览效果</span>
                                         <div class="layui-btn-group" style="margin-left: 10px;">
@@ -284,6 +284,7 @@
                         padding: $(elem).data('padding'),
                         gray: $(elem).data('gray'),
                         mobile: $(elem).data('mobile'),
+                        innerMargin: $(elem).data('inner-margin'),
 
                     }
                 },
@@ -296,6 +297,12 @@
                         iframe.contentDocument ||
                         iframe.contentWindow.document;
 
+                    var innerMarginStyle = '';
+
+                    if (this.innerMargin == 1) {
+                        innerMarginStyle = 'margin-right:15px';
+                    }
+
                     var iframeHtml = '<!DOCTYPE html>' +
                         '<html lang="en">' +
                         '<head>' +
@@ -309,7 +316,7 @@
                         '<link rel="stylesheet" href="/cdn/layui-ul.css">' +
                         '<link rel="stylesheet" href="/cdn/layui-ul-mb.css">' +
                         '</head>' +
-                        '<body>' +
+                        '<body style="'+innerMarginStyle+'">' +
                         html +
                         '</body>' +
                         '</html>'