diff --git a/app/model/Post.php b/app/model/Post.php
index 070bc75..64bf654 100644
--- a/app/model/Post.php
+++ b/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';
diff --git a/composer.json b/composer.json
index 1d4fadc..c86af82 100644
--- a/composer.json
+++ b/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"
diff --git a/source/components/_index.scss b/source/components/_index.scss
new file mode 100644
index 0000000..98f28a7
--- /dev/null
+++ b/source/components/_index.scss
@@ -0,0 +1 @@
+@import './list/ul-music-list/index'
\ No newline at end of file
diff --git a/source/components/list/ul-music-list/_index.html b/source/components/list/ul-music-list/_index.html
new file mode 100644
index 0000000..5dc2439
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/source/components/list/ul-music-list/_index.md b/source/components/list/ul-music-list/_index.md
new file mode 100644
index 0000000..cafa7de
--- /dev/null
+++ b/source/components/list/ul-music-list/_index.md
@@ -0,0 +1,2 @@
+
+适合音乐列表的样式
\ No newline at end of file
diff --git a/source/components/list/ul-music-list/_index.scss b/source/components/list/ul-music-list/_index.scss
new file mode 100644
index 0000000..07efc8d
--- /dev/null
+++ b/source/components/list/ul-music-list/_index.scss
@@ -0,0 +1,7 @@
+.ul-music-list {
+    padding-left: 15px;
+
+    .item {
+        padding: 6px
+    }
+}
\ No newline at end of file
diff --git a/source/components/list/ul-music-list/_title.txt b/source/components/list/ul-music-list/_title.txt
new file mode 100644
index 0000000..96aa4a8
--- /dev/null
+++ b/source/components/list/ul-music-list/_title.txt
@@ -0,0 +1 @@
+音乐列表
\ No newline at end of file
diff --git a/source/scss/layui-ul.scss b/source/scss/layui-ul.scss
index 3fb0cd9..43f65e1 100644
--- a/source/scss/layui-ul.scss
+++ b/source/scss/layui-ul.scss
@@ -9,6 +9,8 @@
 @import './footer/index';
 @import './desciptions/index';
 @import './header/_index';
+@import '../components/index';
+
 
 /* 链接导航开始 */
 .ul-link-select {
diff --git a/view/index/index/index.html b/view/index/index/index.html
index ff1deee..582264f 100644
--- a/view/index/index/index.html
+++ b/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')