开始新的组件架构

app/model/Post.php

@@ -4,8 +4,11 @@ declare(strict_types=1);
 
 namespace app\model;
 
+use Parsedown;
+use ScssPhp\ScssPhp\Compiler;
 use think\facade\App;
 use think\facade\Cache;
+use think\facade\Env;
 use think\facade\Request;
 use think\facade\View;
 use think\Model;
@@ -164,6 +167,60 @@ class Post extends Model
         return View::fetch($file_path);
     }
 
+    public function getComponentsAttr()
+    {
+        if (empty($this->getData('tpl_name'))) {
+            return [];
+        }
+
+        $tpl_name = $this->getData('tpl_name');
+
+        $components_type_path = App::getRootPath() . '/source/components/' . $tpl_name;
+
+        if (!is_dir($components_type_path)) {
+            return [];
+        }
+
+
+        $cache_key = 'cache_components_data_' . $tpl_name;
+
+        $list_components_data = Cache::get($cache_key);
+
+        if (!is_null($list_components_data) && !Env::get('APP_DEBUG')) {
+            return $list_components_data;
+        }
+
+        $list_components = scandir($components_type_path);
+
+
+
+        $list_components_data = [];
+
+
+        $scss_compiler = new Compiler();
+
+        $markdown_parser = new Parsedown();
+
+        foreach ($list_components as  $components_name) {
+            if ($components_name == '.' || $components_name == '..') {
+                continue;
+            }
+            $components_path = $components_type_path . '/' . $components_name;
+
+            $list_components_data[$components_name]['title'] = file_get_contents($components_path . '/_title.txt');
+            $list_components_data[$components_name]['html'] = file_get_contents($components_path . '/_index.html');
+            $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');
+            $list_components_data[$components_name]['desc'] = $markdown_parser->text($list_components_data[$components_name]['markdown']);
+        }
+
+        Cache::set($cache_key, $list_components_data, 60);
+
+        return $list_components_data;
+    }
+
+
     public static function quickSelect($clear = false)
     {
         $cacke_key = 'post_list';

composer.json

@@ -25,7 +25,9 @@
         "topthink/think-migration": "^3.0",
         "topthink/think-helper": "^3.1",
         "topthink/think-captcha": "^3.0",
-        "topthink/think-multi-app": "^1.0"
+        "topthink/think-multi-app": "^1.0",
+        "scssphp/scssphp": "^1.11",
+        "erusev/parsedown": "^1.7"
     },
     "require-dev": {
         "symfony/var-dumper": "^4.2"

source/components/_index.scss

@@ -0,0 +1 @@
+@import './list/ul-music-list/index'

source/components/list/ul-music-list/_index.html

@@ -0,0 +1,16 @@
+<div class="ul-music-list">
+    <div class="item">
+        <div class="image">
+
+        </div>
+        <div class="number">
+            11
+        </div>
+        <div class="title">
+
+        </div>
+        <div class="author">
+
+        </div>
+    </div>
+</div>

source/components/list/ul-music-list/_index.md

@@ -0,0 +1,2 @@
+
+适合音乐列表的样式

source/components/list/ul-music-list/_index.scss

@@ -0,0 +1,7 @@
+.ul-music-list {
+    padding-left: 15px;
+
+    .item {
+        padding: 6px
+    }
+}

source/components/list/ul-music-list/_title.txt

@@ -0,0 +1 @@
+音乐列表

source/scss/layui-ul.scss

@@ -9,6 +9,8 @@
 @import './footer/index';
 @import './desciptions/index';
 @import './header/_index';
+@import '../components/index';
+
 
 /* 链接导航开始 */
 .ul-link-select {

view/index/index/index.html

@@ -66,6 +66,39 @@
                     </div>
                     <div class="demo-page">
                         {$model_post->demo_page|raw}
+
+                        {volist name='model_post->components' id='vo'}
+                        <fieldset class="layui-elem-field layui-field-title no-parser">
+                            <legend>{$vo.title}</legend>
+                            <div class="layui-field-box">
+                                <div class="desc">
+                                    {$vo.desc|raw}
+                                </div>
+                                <div class="preview">{$vo.html|raw}</div>
+                                <div class="code">
+                                    <div class="layui-tab layui-tab-card">
+                                        <ul class="layui-tab-title">
+                                            <li class="layui-this">HTML</li>
+                                            <li>SCSS</li>
+                                            <li>CSS</li>
+                                        </ul>
+                                        <div class="layui-tab-content" style="padding:0">
+                                            <div class="layui-tab-item layui-show">
+                                                <pre class="layui-code" style="margin: 0;">{$vo.html}</pre>
+                                            </div>
+                                            <div class="layui-tab-item ">
+                                                {$vo.scss|raw}
+                                            </div>
+                                            <div class="layui-tab-item">
+                                                {$vo.css|raw}
+
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </fieldset>
+                        {/volist}
                     </div>
 
 
@@ -73,7 +106,7 @@
 
                 <div class="ul-padding-md">
                     <div id="gitee-container">
-                        <fieldset class="layui-elem-field layui-field-title">
+                        <fieldset class="layui-elem-field layui-field-title ">
                             <legend>开源信息</legend>
                             <div class="layui-field-box">
                                 <script src='https://gitee.com/ulthon/layui-ul/widget_preview' async defer></script>
@@ -125,6 +158,9 @@
     <script>
 
         $('.main-content h2,.main-content>.demo-page>fieldset').each(function (index, elem) {
+            if ($(elem).hasClass('no-parser')) {
+                return;
+            }
             if ($(elem).find('.demo-js-src').length == 0) {
                 $(elem).children('.layui-field-box')
                     .addClass('demo-js-src')