ロリ端末はもう凄くなったね！！

app/Http/Controllers/BashController.php

@@ -8,14 +8,67 @@ use Illuminate\Support\Facades\Log;
 
 class BashController extends Controller {
   public function exec (Request $r) { // /api/rpc/bash/exec
-    if ($r->arg[0] == 'ls') {
+    if (strlen($r->args) == 0) return '';
-      return $this->ls($r->arg[2], $r->arg[1]);
+    $args = explode(' ', $r->args);
+    if ($args[0] == 'ls') {
+      return $this->ls($args);
+    }
+    else if ($args[0] == 'cat') {
+      return $this->cat($args);
     }
 
-    return ;
+    return '不明なコマンドです。: '.$args[0];
   }
 
-  public function ls($pwd='', $opt='') {
+  public function ls ($args) {
-    return 'page        forum       user';
+    $opt = '';
+    $pwd = '';
+
+    for ($i = 1; $i < count($args); $i++) {
+      if (mb_substr($args[$i], 0, 1, 'utf-8')) $opt = $args[$i];
+    }
+
+    if (strpos($opt, 'l') !== false) {
+      $ps = null;
+      $pg = null;
+
+      if (strpos($opt, 't') !== false) {
+        $pg = DB::table('blg_content')->select('publish_date')->where('isPost', 0)->orderBy('title', 'asc')->first();
+        $ps = DB::table('blg_content')->select('publish_date')->where('isPost', 1)->orderBy('title', 'asc')->first();
+      }
+      else {
+        $pg = DB::table('blg_content')->select('publish_date')->where('isPost', 0)->orderBy('publish_date', 'desc')->first();
+        $ps = DB::table('blg_content')->select('publish_date')->where('isPost', 1)->orderBy('publish_date', 'desc')->first();
+      }
+
+      return "合計 2<br />
+drwxr-xr-x  2 suwako suwako  ".(strpos($opt, 'h') !== false ? '4.0K' : '4096')."  ".date('m', $ps->publish_date)."月 ".date('d', $ps->publish_date)." ".date('H:i', $ps->publish_date)."  post<br />
+drwxr-xr-x  2 suwako suwako  ".(strpos($opt, 'h') !== false ? '4.0K' : '4096')."  ".date('m', $pg->publish_date)."月 ".date('d', $pg->publish_date)." ".date('H:i', $pg->publish_date)."  page";
+    }
+
+    return 'post page';
+  }
+
+  public function cat ($args) {
+    if (isset($args[1])) {
+      $cat = explode('/', $args[1]);
+      $txt = null;
+      $mode = 0;
+      $slug = '';
+
+      for ($i = 1; $i < count($cat); $i++) {
+        if (strpos($cat[$i], 'post') !== false) $mode = 1;
+        $slug = $cat[$i];
+      }
+
+      $txt = DB::table('blg_content')->select('title', 'message')->where('slug', $slug)->where('isPost', $mode)->first();
+
+      if ($txt) {
+      return "＞＞".$txt->title."＜＜<br /><br />
+".$txt->message;
+      }
+    }
+
+    return '';
   }
 }

resources/js/components/bash.vue

@@ -2,6 +2,7 @@
   <span>
     <a href="#" @click="show = true"><img src="/img/bash/app_icon.webp" width="50" height="50" alt="ロリ端末" /></a>
     <span v-if="show">
+      <label :for="`konsoleinput-${output.length-1}`">
       <vue-draggable-resizable style="border: 0px solid #232629;" :drag-handle="'.drag-handle'" class-name-handle="resize-handle" class="konsoleuser" :x="-50" :y="-100" :z="99999999">
         <div style="width: 100%; position: relative;">
           <div class="drag-handle-left"></div>
@@ -12,14 +13,22 @@
         </div>
         <div class="konsole_left"></div>
         <div style="padding: 5px;">
-          ロリコマンドラインですね〜♡<br />
+          <div v-for="(o, i) in output" :key="`output-${i}`">
-          shiken@technicalsuwako.jp:/$ <span style="font-stretch: condensed;">█</span>
+            <div v-html="o"></div>
+            <div class="row">
+              <div class="col-auto" style="padding-right: 6px;">shiken@technicalsuwako.jp:/$</div>
+              <div class="col" style="padding-left: 0px;">
+                <input :ref="`konsoleinput-${i}`" :id="`konsoleinput-${i}`" class="konsole_input" type="text" :disabled="i !== output.length-1" v-model="cmd[i]" @keyup.enter="exec(i)" />
+              </div>
+            </div>
+          </div>
         </div>
         <div class="konsole_right"></div>
         <div class="konsole_bottom_left"></div>
         <div class="konsole_bottom"></div>
         <div class="konsole_bottom_right"></div>
       </vue-draggable-resizable>
+      </label>
     </span>
   </span>
 </template>
@@ -33,6 +42,8 @@
   export default {
     data: function () {
       return {
+        cmd: [''],
+        output: ['ロリコマンドラインですね〜♡'],
         show: false,
         width: 0,
         height: 0,
@@ -50,6 +61,12 @@
       onDrag: function (x, y) {
         this.x = x
         this.y = y
+      },
+      exec (i) {
+        axios.post('/api/rpc/bash/exec', { args: this.cmd[i] }).then(res => {
+          this.output.push(res.data);
+          this.cmd.push('');
+        });
       }
     }
   }
@@ -145,8 +162,8 @@
     right: 0;
   }
 
-  .konsoleuser { background: url('/img/bash/user_bg.png') repeat; }
+  .konsoleuser { background: url('/img/bash/user_bg.png') repeat; cursor: text; }
-  .konsoleroot { background: url('/img/bash/root_bg.png') repeat; }
+  .konsoleroot { background: url('/img/bash/root_bg.png') repeat; cursor: text; }
 
   .vdr {
     background-size: cover;
@@ -199,4 +216,14 @@
     right: 0;
     bottom: 0;
   }
+
+  .konsole_input, .konsole_input:focus, .konsole_input:disabled {
+    width: 100%;
+    background: transparent;
+    border-color: transparent;
+    outline: none;
+    caret-color: #fcfcfc;
+    color: #fcfcfc;
+    line-height: 14px;
+  }
 </style>

resources/sass/app.scss

@@ -19,6 +19,13 @@
     background-color: #232629;
   }
 
+  .indexborder {
+    border: 2px solid #3daee9;
+    box-shadow: 0px 0px 7px 3px #1d99f3;
+    padding: 8px;
+    background-color: #31363b;
+  }
+
   .logo-img {
     border: 2px solid #3daee9;
     box-shadow: 0 0 7px 3px #1d99f3;
@@ -60,9 +67,7 @@
   /// @param  {Integer} $stroke - Stroke width
   /// @param  {Color}   $color  - Stroke color
   /// @return {Style}           - text-shadow
-  @mixin stroke($stroke, $color) {
+  @mixin stroke($stroke, $color) { text-shadow: stroke($stroke, $color); }
-    text-shadow: stroke($stroke, $color);
-  }
 
   @keyframes sitenamehover {
     0%   { text-shadow: stroke(4, #1d99f3); }
@@ -82,61 +87,37 @@
     text-shadow: stroke(4, #1d99f3);
   }
 
-  .logo-c:hover {
+  .logo-c:hover { animation: sitenamehover 2s linear infinite; }
-    animation: sitenamehover 2s linear infinite;
+  @media (max-width : 1200px) { .logo-c { font-size: 32px; } }
-  }
+  @media (max-width : 968px) { .logo-c { font-size: 20px; } }
-
+  @media (max-width : 525px) { .logo-br, .nomobile { display: none; } }
-  @media (max-width : 1200px) {
-    .logo-c { font-size: 32px; }
-  }
-
-  @media (max-width : 968px) {
-    .logo-c     { font-size: 20px; }
-  }
-
-  @media (max-width : 525px) {
-    .logo-br, .nomobile { display: none; }
-  }
 
   .sidemenu {
     border: 2px solid #3daee9;
     box-shadow: 0 0 7px 3px #1d99f3;
   }
 
-  a {
+  a { color: #1d99f3; }
-    color: #1d99f3;
+  a:hover { color: #3daee9; }
-  }
-  a:hover {
-    color: #3daee9;
-  }
   .bg-dark {
-    background: radial-gradient(farthest-corner at 50% 85%,
+    background: radial-gradient(farthest-corner at 50% 85%, #3498db 0%, #232629 100%);
-      #3498db 0%, #232629 100%);
     border: 2px solid #3daee9;
     box-shadow: 0 0 7px 3px #1d99f3;
   }
-  .navbar {
+  .navbar { padding: 0px; }
-    padding: 0px;
+  .navbar-toggler { border: 0px solid transparent; }
-  }
-  .navbar-toggler {
-    border: 0px solid transparent;
-  }
   .navbar-nav .dropdown-menu {
     background-color: #31363b;
     color: #fcfcfc;
     border: 2px solid #3daee9;
     box-shadow: 0 0 7px 3px #1d99f3;
   }
-  .dropdown-item {
+  .dropdown-item { color: #fcfcfc; }
-    color: #fcfcfc;
-  }
   .dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus {
     color: #fcfcfc;
     background-color: #3daee9;
   }
-  .navbar-brand {
+  .navbar-brand { padding: 5px; }
-    padding: 5px;
-  }
   .navbar-brand, .nav-item {
     transition: background 0.3s, color 0.3s;
     border-radius: 2px;
@@ -184,34 +165,18 @@
     background-color: #31363b;
     text-align: left;
   }
-  .commentloop {
+
-    padding: 10px 4px 40px 4px;
+  .commentloop { padding: 10px 4px 40px 4px; }
-  }
   .commentloop > .name { color: #11d116; }
   .modal-header, .modal-body, .modal-footer { color: #fcfcfc; }
-  .modal-header {
+  .modal-header { background: linear-gradient(to bottom, #1d99f3 0%, #6ec0fb 34%, #3daee9 100%); }
-    background: linear-gradient(
-      to bottom,
-      #1d99f3 0%,
-      #6ec0fb 34%,
-      #3daee9 100%
-    );
-  }
   .modal-body { background-color: #4d4d4d; }
   .modal-footer { background-color: #31363b; }
-  .form-control, .form-control:focus {
+  .form-control, .form-control:focus { background-color: #232629; color: #fcfcfc; }
-    background-color: #232629;
+  .form-control { border: 1px solid #34495e; }
-    color: #fcfcfc;
+  .form-control:focus { border: 1px solid #3daee9; }
-  }
+  .form-control:disabled, .form-control[readonly] { background-color: #232629; }
-  .form-control {
+
-    border: 1px solid #34495e;
-  }
-  .form-control:focus {
-    border: 1px solid #3daee9;
-  }
-  .form-control:disabled, .form-control[readonly] {
-    background-color: #232629;
-  }
   .custom-control-input:checked ~ .custom-control-label::before,
   .custom-radio .custom-control-input:checked ~ .custom-control-label::before,
   .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before

resources/views/pages/site/index.blade.php

@@ -2,7 +2,7 @@
 
 @section('content')
 
-<div style="border: 2px solid #3daee9; box-shadow: 0px 0px 7px 3px #1d99f3; padding: 8px; background-color: #31363b;">
+<div class="indexborder">
   @foreach ($res as $k => $r)
   <div class="within {{ ($r->public_status !== 0 ? ' wny' : '') }}" style="margin: {{ ($k == 0 ? 0 : 16) }}px auto {{ ($k == count($res)-1 ? 0 : 16) }}px">
     <div class="bar {{ ($r->public_status !== 0 ? ' bny' : '') }}">

routes/api/bash.php

@@ -1,4 +1,4 @@
 <?php
 
 // コマンド
-Route::get('/api/rpc/bash/exec', 'BashController@exec');
+Route::post('/api/rpc/bash/exec', 'BashController@exec');