直した

package.json

@@ -23,5 +23,8 @@
         "sass-loader": "^7.1.0",
         "vue": "^2.5.21",
         "vue-template-compiler": "^2.5.21"
+    },
+    "dependencies": {
+        "js-cookie": "^2.2.0"
     }
 }

resources/assets/js/components/cli.vue

@@ -1,134 +1,82 @@
 <template>
   <div>
-    <span class="regText">
+    <div class="regText" v-for="(res, i) in result" :key="`res-${i}`">
+      {{ res.text }}
+      <br v-if="res.text" />
       <span class="regBold">
-        {{ user }}@{{ host }}:<span class="pathText">{{ pwd }}</span>
+        {{ res.username }}@{{ res.hostname }}:<span class="pathText">{{ res.path }}</span>
       </span>$
-      <span v-for="(l, i) in line" :key="`l-${i}`">
+      <input
-        <input
+        :key="i"
-          :key="i"
+        :password="res.password"
-          :autofocus="l.active"
+        :autofocus="res.active"
-          :disabled="!l.active"
+        :disabled="!res.active"
-          spellcheck="false"
+        spellcheck="false"
-          type="text"
+        type="text"
-          class="inputField"
+        class="inputField"
-          v-model="l.command"
+        v-model="res.command"
-          @keyup.enter="exec(l.command, i)"
+        @keyup.enter="exec(res.command, i)"
-        />
+      />
-        <br />
+      <br />
-      </span>
+    </div>
-      <span v-for="(res, d) in result" :key="`res-${d}`">
-        <br />
-        {{ res.text }}
-        <span v-if="res.field">
-          <span v-if="res.password">
-            <input
-              :key="d"
-              password="password"
-              :autofocus="res.active"
-              :disabled="!res.active"
-              spellcheck="false"
-              type="text"
-              class="inputField"
-              v-model="res.command"
-              @keyup.enter="execContinue(res.command, d)"
-            />
-          </span>
-          <span v-else>
-            <input
-              :key="d"
-              spellcheck="false"
-              :autofocus="res.active"
-              :disabled="!res.active"
-              type="text"
-              class="inputField"
-              v-model="res.command"
-              @keyup.enter="execContinue(res.command, d)"
-            />
-          </span>
-          <br />
-        </span>
-      </span>
-    </span>
   </div>
 </template>
 
 <script>
+  import Cookies from 'js-cookie';
+
   export default {
     data: function () {
       return {
-        user: 'user',
+        user: Cookies.get('username'),
-        host: '076server',
+        host: 'onaro.jp',
         pwd: '/',
-        line: [{
+        result: []
-          active: true,
-          username: this.user,
-          hostname: this.host,
-          path: this.pwd,
-          command: ''
-        }],
-        result: [],
-        group: []
       }
     },
     created: function () {
-      this.line = [];
+      this.result = [];
-      this.line.push({
+      this.user = Cookies.get('username');
-        active: true,
+      this.host = 'onaro.jp';
+      this.pwd = '/';
+
+      this.result.push({
         username: this.user,
         hostname: this.host,
         path: this.pwd,
+        active: true,
+        text: '',
+        field: false,
+        password: false,
         command: ''
       });
     },
     methods: {
       exec(text, key) {
         var arg = text.split(' ');
+        this.result[key].active = false;
 
-        this.line[key].active = false;
+        if (arg[0] === 'ls') this.ls(this.result[key].path);
-        if (arg[0] === 'sudo') this.isSudo();
-        else this.execContinue(text, key);
-      },
-      isSudo() {
-        this.result.push({
-          active: true,
-          text: 'パスワード: ',
-          field: true,
-          password: true,
-          command: ''
-        });
-      },
-      execContinue(text, key) {
-        var arg = text.split(' ');
-
-        if (arg[0] === 'ls') this.ls(this.line[key].path);
         else if (arg[0] === 'cd') this.cd(arg[1]);
         else if (arg[0] === 'clear') this.clear();
         else this.result.push({
+          username: this.user,
+          hostname: this.host,
+          path: this.pwd,
           active: true,
           text: arg[0] + ': コマンドは見つかれません。',
           field: false,
           password: false,
           command: ''
         });
-
-        this.line.push({
-          active: true,
-          username: this.user,
-          hostname: this.host,
-          path: this.pwd,
-          command: ''
-        });
-
-        this.group.push([
-          this.line,
-          this.result
-        ]);
       },
       ls(pwd) {
         var neopwd = pwd.replace('/', 'sl');
         axios.get('/api/rpc/bash/ls/' + neopwd).then(res => {
           this.result.push({
+            username: this.user,
+            hostname: this.host,
+            path: this.pwd,
             active: true,
             text: res.data,
             field: false,
@@ -140,6 +88,9 @@
       cd(pwd) {
         if (pwd === '/fuck' || pwd === 'fuck') {
           this.result.push({
+            username: this.user,
+            hostname: this.host,
+            path: this.pwd,
             active: true,
             text: 'bash: cd: ' + pwd + ': このファイルまたはフォルダがありません。',
             field: false,
@@ -153,7 +104,6 @@
         this.pwd = pwd;
       },
       clear() {
-        this.line = [];
         this.result = [];
       }
     }