基本完成命令生成；

app/command/make/Component.php

@@ -0,0 +1,103 @@
+<?php
+
+declare(strict_types=1);
+
+namespace app\command\make;
+
+use think\console\Command;
+use think\console\Input;
+use think\console\input\Argument;
+use think\console\input\Option;
+use think\console\Output;
+use think\facade\App;
+use think\facade\View;
+
+class Component extends Command
+{
+    protected function configure()
+    {
+        // 指令配置
+        $this->setName('make:component')
+
+            ->addArgument('tpl', Argument::REQUIRED, '组件类型')
+            ->addArgument('component', Argument::REQUIRED, '组件文件名')
+            ->addArgument('component-title', Argument::OPTIONAL, '组件名称')
+            ->addOption('force', 'f', Option::VALUE_NONE, '强制覆盖')
+            ->setDescription('the make:component command');
+    }
+
+    protected function execute(Input $input, Output $output)
+    {
+        // 指令输出
+        $output->writeln('make:component');
+
+        $tpl = $input->getArgument('tpl');
+        $component = $input->getArgument('component');
+        $component_title = $input->getArgument('component-title') ?: $component;
+
+        $component_title;
+
+        $component_tpl_dir = App::getRootPath() . '/source/components/';
+        $target_dir = $component_tpl_dir . $tpl . '/' . $component;
+
+        if (is_dir($target_dir)) {
+            if (!$input->hasOption('force')) {
+                $output->error('目标组件已存在:' . $target_dir);
+                $output->error('如需覆盖请添加参数 -f');
+                return false;
+            }
+        } else {
+            mkdir($target_dir, 0777, true);
+        }
+
+
+        $assign_data = [
+            'component' => $component,
+            'component_title' => $component_title
+        ];
+
+        $files = [
+            '_index.env',
+            '_index.html',
+            '_index.md',
+            '_index.scss',
+        ];
+
+        foreach ($files as  $file_name) {
+
+            $file_content = View::fetch(__DIR__ . '/component/tpl/' . $file_name, $assign_data);
+
+            $file_path = $target_dir . '/' . $file_name;
+
+            file_put_contents($file_path, $file_content);
+
+            $output->info('创建：' . $file_path);
+        }
+
+        $output->info('创建完成');
+
+
+        $dir_tpl =  scandir($component_tpl_dir);
+
+        $index_scss = '';
+
+        foreach ($dir_tpl as  $dir_name) {
+            if ($dir_name == '.' || $dir_name == '..') {
+                continue;
+            }
+
+            $list_component = scandir($component_tpl_dir . '/' . $dir_name);
+
+            foreach ($list_component as  $component_name) {
+
+                if ($component_name == '.' || $component_name == '..') {
+                    continue;
+                }
+
+                $index_scss .= "@import './{$dir_name}/{$component_name}/index';";
+            }
+        }
+
+        file_put_contents(App::getRootPath() . '/source/components/_index.scss');
+    }
+}

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

@@ -0,0 +1,5 @@
+title={$component_title}
+
+padding=0
+margin=0
+gray=0

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

@@ -0,0 +1,3 @@
+<div class="{$component}">
+
+</div>

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

@@ -0,0 +1,3 @@
+.{$component} {
+
+}

config/console.php

@@ -3,6 +3,7 @@
 // | 控制台配置
 // +----------------------------------------------------------------------
 
+use app\command\make\Component;
 use app\command\make\View;
 use app\command\ScanDemo;
 
@@ -11,6 +12,7 @@ return [
     'commands' => [
         'app\command\ResetPassword',
         View::class,
-        ScanDemo::class
+        ScanDemo::class,
+        Component::class
     ],
 ];

demo/pc/list.html

@@ -494,53 +494,4 @@
             </div>
         </div>
     </div>
-</fieldset>
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>订单列表-简约卡片</legend>
-    <div class="layui-field-box">
-        <div class="ul-order-list-simple-card ul-bg-gray ul-padding-md">
-            <div class="item" data-repeat="3">
-                <div class="item-header">
-                    <div class="item-header-title"> <i class="layui-icon layui-icon-home"></i> 奥宏商店</div>
-                    <div class="item-header-status">处理中</div>
-
-                </div>
-                <div class="item-body">
-                    <div class="item-body-item">
-                        <div class="item-image" style="background-image: url('/static/images/view.jpg');">
-
-                        </div>
-                        <div class="item-info">
-                            <div class="ul-info-title">商品名称商品名称商品名称商品名称商品名称商品名称</div>
-                            <div class="ul-info-value">
-                                <div class="ul-info-value-item">
-                                    500ml
-                                </div>
-                                <div class="ul-info-value-item">
-                                    数量×2
-                                </div>
-                            </div>
-                            <div class="ul-info-money">
-                                ￥1300.00
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="item-footer">
-                    <div class="item-footer-item">
-                        2022年4月4日11:31:24
-                    </div>
-                    <div class="item-footer-item">
-                        <div class="">
-
-                            <div class="layui-btn layui-btn-sm layui-btn-primary">取消</div>
-                            <div class="layui-btn layui-btn-sm layui-btn-normal">评价</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </div>
 </fieldset>

source/components/_index.scss

@@ -1 +1,2 @@
-@import './list/ul-music-list/index'
+@import './list/ul-music-list/index';
+@import './list/ul-order-list-simple-card/index';

source/components/list/ul-order-list-simple-card/_index.env

@@ -0,0 +1,4 @@
+title=订单列表-简约卡片
+padding=1
+margin=0
+gray=1

source/components/list/ul-order-list-simple-card/_index.html

@@ -0,0 +1,43 @@
+<div class="ul-order-list-simple-card">
+    <div class="item" v-for="i in 3">
+        <div class="item-header">
+            <div class="item-header-title"> <i class="layui-icon layui-icon-home"></i> 奥宏商店</div>
+            <div class="item-header-status">处理中</div>
+
+        </div>
+        <div class="item-body">
+            <div class="item-body-item">
+                <div class="item-image" style="background-image: url('/static/images/view.jpg');">
+
+                </div>
+                <div class="item-info">
+                    <div class="ul-info-title">商品名称商品名称商品名称商品名称商品名称商品名称</div>
+                    <div class="ul-info-value">
+                        <div class="ul-info-value-item">
+                            500ml
+                        </div>
+                        <div class="ul-info-value-item">
+                            数量×2
+                        </div>
+                    </div>
+                    <div class="ul-info-money">
+                        ￥1300.00
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="item-footer">
+            <div class="item-footer-item">
+                2022年4月4日11:31:24
+            </div>
+            <div class="item-footer-item">
+                <div class="">
+
+                    <div class="layui-btn layui-btn-sm layui-btn-primary">取消</div>
+                    <div class="layui-btn layui-btn-sm layui-btn-normal">评价</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>

source/components/list/ul-order-list-simple-card/_index.scss

@@ -0,0 +1,86 @@
+.ul-order-list-simple-card {
+    .item {
+        box-shadow   : 0 0 3px #ddd;
+        border-radius: 2px;
+        padding      : 15px;
+        margin-bottom: 15px;
+        background-color: #fff;
+    }
+
+    .item-header {
+        display        : flex;
+        align-items    : center;
+        justify-content: space-between;
+        font-size      : 13px;
+        margin-bottom  : 5px;
+
+        .item-header-status {
+            color: #1E9FFF;
+        }
+    }
+
+    .item-body {
+        margin-top    : 10px;
+        padding-bottom: 10px;
+
+        .item-body-item {
+            display        : flex;
+            align-items    : center;
+            justify-content: space-between;
+            padding        : 5px 0;
+
+            .item-image {
+                width              : 90px;
+                height             : 90px;
+                background-size    : cover;
+                background-position: center;
+                box-shadow         : 0 0 2px #999;
+
+            }
+
+            .item-info {
+                width      : calc(100% - 90px - 15px);
+                margin-left: 15px;
+                height     : 90px;
+                position   : relative;
+
+                .ul-info-title {
+                    font-weight       : 500;
+                    font-size         : 15px;
+                    margin-bottom     : 5px;
+                    text-overflow     : -o-ellipsis-lastline;
+                    overflow          : hidden;
+                    text-overflow     : ellipsis;
+                    display           : -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                }
+
+                .ul-info-value {
+                    display        : flex;
+                    align-items    : center;
+                    justify-content: space-between;
+                    color          : #999;
+                    font-size      : 14px;
+                }
+
+                .ul-info-money {
+                    position   : absolute;
+                    bottom     : 0;
+                    left       : 0;
+                    font-size  : 15px;
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+
+    .item-footer {
+        padding-top    : 15px;
+        margin-top     : 5px;
+        border-top     : 1px solid #eee;
+        display        : flex;
+        align-items    : center;
+        justify-content: space-between;
+    }
+}