diff --git a/app/command/make/Component.php b/app/command/make/Component.php new file mode 100644 index 0000000..2a3a1bb --- /dev/null +++ b/app/command/make/Component.php @@ -0,0 +1,103 @@ +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'); + } +} diff --git a/app/command/make/component/tpl/_index.env b/app/command/make/component/tpl/_index.env new file mode 100644 index 0000000..076824a --- /dev/null +++ b/app/command/make/component/tpl/_index.env @@ -0,0 +1,5 @@ +title={$component_title} + +padding=0 +margin=0 +gray=0 \ No newline at end of file diff --git a/app/command/make/component/tpl/_index.html b/app/command/make/component/tpl/_index.html new file mode 100644 index 0000000..cbdc20a --- /dev/null +++ b/app/command/make/component/tpl/_index.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/app/command/make/component/tpl/_index.md b/app/command/make/component/tpl/_index.md new file mode 100644 index 0000000..e69de29 diff --git a/app/command/make/component/tpl/_index.scss b/app/command/make/component/tpl/_index.scss new file mode 100644 index 0000000..a319492 --- /dev/null +++ b/app/command/make/component/tpl/_index.scss @@ -0,0 +1,3 @@ +.{$component} { + +} \ No newline at end of file diff --git a/config/console.php b/config/console.php index 8e555c3..c6a8870 100644 --- a/config/console.php +++ b/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 ], ]; diff --git a/demo/pc/list.html b/demo/pc/list.html index 9a8d9f7..25146c9 100644 --- a/demo/pc/list.html +++ b/demo/pc/list.html @@ -494,53 +494,4 @@ - - -
- 订单列表-简约卡片 -
-
-
-
-
奥宏商店
-
处理中
- -
-
-
-
- -
-
-
商品名称商品名称商品名称商品名称商品名称商品名称
-
-
- 500ml -
-
- 数量×2 -
-
-
- ¥1300.00 -
-
-
-
- -
- -
-
\ No newline at end of file diff --git a/source/components/_index.scss b/source/components/_index.scss index 98f28a7..0a327da 100644 --- a/source/components/_index.scss +++ b/source/components/_index.scss @@ -1 +1,2 @@ -@import './list/ul-music-list/index' \ No newline at end of file +@import './list/ul-music-list/index'; +@import './list/ul-order-list-simple-card/index'; \ No newline at end of file diff --git a/source/components/list/ul-order-list-simple-card/_index.env b/source/components/list/ul-order-list-simple-card/_index.env new file mode 100644 index 0000000..7e7b5a3 --- /dev/null +++ b/source/components/list/ul-order-list-simple-card/_index.env @@ -0,0 +1,4 @@ +title=订单列表-简约卡片 +padding=1 +margin=0 +gray=1 \ No newline at end of file diff --git a/source/components/list/ul-order-list-simple-card/_index.html b/source/components/list/ul-order-list-simple-card/_index.html new file mode 100644 index 0000000..7c07159 --- /dev/null +++ b/source/components/list/ul-order-list-simple-card/_index.html @@ -0,0 +1,43 @@ +
+
+
+
奥宏商店
+
处理中
+ +
+
+
+
+ +
+
+
商品名称商品名称商品名称商品名称商品名称商品名称
+
+
+ 500ml +
+
+ 数量×2 +
+
+
+ ¥1300.00 +
+
+
+
+ +
+ +
\ No newline at end of file diff --git a/source/components/list/ul-order-list-simple-card/_index.md b/source/components/list/ul-order-list-simple-card/_index.md new file mode 100644 index 0000000..e69de29 diff --git a/source/components/list/ul-order-list-simple-card/_index.scss b/source/components/list/ul-order-list-simple-card/_index.scss new file mode 100644 index 0000000..ab7c089 --- /dev/null +++ b/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; + } +} \ No newline at end of file