开始新的组件架构

This commit is contained in:
2022-10-21 17:02:53 +08:00
parent c56be80fed
commit 68d95268e7
9 changed files with 126 additions and 2 deletions

View File

@@ -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';

View File

@@ -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"

View File

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

View File

@@ -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>

View File

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

View File

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

View File

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

View File

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

View File

@@ -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>
@@ -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')