ソースを参照

コマンドライン

model
テクニカル諏訪子 2年前
コミット
1eb40503f5
  1. 238
      resources/assets/js/components/bash/cli-bckp.vue
  2. 128
      resources/assets/js/components/bash/cli-old.vue
  3. 279
      resources/assets/js/components/bash/cli.vue
  4. 146
      resources/assets/sass/app.scss
  5. 20
      resources/views/layouts/bash.blade.php
  6. 71
      resources/views/layouts/site.blade.php
  7. 4
      resources/views/pages/bash/cli.blade.php

238
resources/assets/js/components/bash/cli-bckp.vue

@ -0,0 +1,238 @@
<template>
<span>
<img src="/assets/img/bash/app_icon.png" width="50" @click="openterm = true" />
<vue-resizable
class="resizable"
ref="resizableComponent"
:dragSelector="dragSelector"
:active="handlers"
:fit-parent="fit"
:max-width="maxW | checkEmpty"
:max-height="maxH | checkEmpty"
:min-width="minW | checkEmpty"
:min-height="minH | checkEmpty"
:width="width"
:height="height"
:top="top"
:left="left"
v-show="openterm"
fit-parent
@mount="eHandler"
@resize:move="eHandler"
@resize:start="eHandler"
@resize:end="eHandler"
@drag:move="eHandler"
@drag:start="eHandler"
@drag:end="eHandler"
>
<div class="konsole" id="dragger">
<div class="draggerheader">
<div class="konsole_top_left"></div>
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
<div class="konsole_top_min"></div>
<div class="konsole_top_max"></div>
<div class="konsole_top_right" @click="openterm = false"></div>
</div>
<div class="konsole_left"></div>
<div class="konsoleuser">
ロリコマンドラインですね<br />
shiken@technicalsuwako.jp:/$ <span style="font-stretch: condensed;"></span>
</div>
<div class="konsole_right"></div>
<div class="konsole_bottom_left"></div>
<div class="konsole_bottom"></div>
<div class="konsole_bottom_right"></div>
</div>
</vue-resizable>
</span>
</template>
<script>
import VueResizable from 'vue-resizable';
export default {
components: { VueResizable },
data: function () {
const tW = 600;
const tH = 300;
return {
openterm: false,
handlers: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
left: `calc(50% - ${tW / 2}px)`,
top: `calc(50% - ${tH / 2}px)`,
height: tH,
width: tW,
maxW: 600,
maxH: 300,
minW: 600,
minH: 300,
fit: true,
event: "",
dragSelector: ".draggerheader"
}
},
created: function () {
},
methods: {
eHandler (data) {
console.log(data);
this.width = data.width;
this.height = data.height;
this.left = data.left;
this.top = data.top;
this.event = data.eventName;
}
},
filters: {
checkEmpty (value) {
return typeof value !== "number" ? 0 : value;
}
}
}
</script>
<style scoped>
#dragger {
position: absolute;
z-index: 9;
}
#draggerheader {
cursor: move;
z-index: 10;
}
.konsole {
width: 600px;
height: 300px;
margin: auto;
color: #fcfcfc;
}
.konsole_top_left {
height: 30px;
width: 30px;
background: url('/assets/img/bash/top_left.png') no-repeat;
position: absolute;
top: 0;
left: 0;
}
.konsole_top {
height: 30px;
background: url('/assets/img/bash/top_bg.png') repeat-x;
position: absolute;
top: 0;
left: 30px;
width: 496px;
padding-top: 7px;
padding-right: 30px;
text-align: center;
font-weight: bold;
}
.konsole_top_right {
height: 30px;
width: 28px;
background: url('/assets/img/bash/top_right.png') no-repeat;
position: absolute;
top: 0;
right: 0;
}
.konsole_top_right:hover {
background: url('/assets/img/bash/top_right_hover.png') no-repeat;
cursor: default;
}
.konsole_top_max {
height: 30px;
width: 23px;
background: url('/assets/img/bash/top_max.png') no-repeat;
position: absolute;
top: 0;
right: 28px;
}
.konsole_top_max:hover {
background: url('/assets/img/bash/top_max_hover.png') no-repeat;
cursor: default;
}
.konsole_top_min {
height: 30px;
width: 23px;
background: url('/assets/img/bash/top_min.png') no-repeat;
position: absolute;
top: 0;
right: 51px;
}
.konsole_top_min:hover {
background: url('/assets/img/bash/top_min_hover.png') no-repeat;
cursor: default;
}
.konsole_left {
width: 2px;
background: url('/assets/img/bash/left_bg.png') repeat-y;
position: absolute;
top: 30px;
left: 0;
height: 267px;
}
.konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
.konsoleroot { background: url('/assets/img/bash/root_bg.png') repeat; }
.konsoleuser, .konsoleroot {
background-size: cover;
backdrop-filter: blur(17px);
font-family: "Lucida Console", Monospace, "DejaVu Sans Mono", "Courier New", MiscFixed;
font-size: 12px;
color: #fcfcfc;
overflow: auto;
position: absolute;
top: 30px;
left: 2px;
height: 268px;
width: 596px;
padding: 5px;
}
.konsole_right {
width: 2px;
background: url('/assets/img/bash/right_bg.png') repeat-y;
position: absolute;
height: 267px;
top: 30px;
right: 0;
}
.konsole_bottom_left {
width: 3px;
height: 3px;
background: url('/assets/img/bash/bottom_left.png') no-repeat;
position: absolute;
bottom: 0;
left: 0;
}
.konsole_bottom {
height: 2px;
background: url('/assets/img/bash/bottom_bg.png') repeat-x;
position: absolute;
bottom: 0;
left: 2px;
width: 595px;
}
.konsole_bottom_right {
height: 3px;
width: 3px;
background: url('/assets/img/bash/bottom_right.png') no-repeat;
position: absolute;
right: 0;
bottom: 0;
}
</style>

128
resources/assets/js/components/bash/cli-old.vue

@ -0,0 +1,128 @@
<template>
<div>
<div class="regText" v-for="(res, i) in result" :key="`res-${i}`">
{{ res.text }}
<br v-if="res.text" />
<span class="regBold">
{{ res.username }}@{{ res.hostname }}:<span class="pathText">{{ res.path }}</span>
</span>$
<input
:key="i"
:password="res.password"
:autofocus="res.active"
:disabled="!res.active"
spellcheck="false"
type="text"
class="inputField"
v-model="res.command"
@keyup.enter="exec(res.command, i)"
/>
<br />
</div>
</div>
</template>
<script>
import Cookies from 'js-cookie';
export default {
data: function () {
return {
user: Cookies.get('username'),
host: '076.ne.jp',
pwd: '/',
result: []
}
},
created: function () {
this.result = [];
this.user = Cookies.get('username');
this.host = '076.ne.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;
if (arg[0] === 'ls') this.ls(this.result[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: ''
});
},
ls(pwd) {
var neopwd = pwd.replace('/', 'sl');
axios.get('/api/rpc/bash/exec', { arg: ['ls', '', ''] }).then(res => {
this.result.push({
username: this.user,
hostname: this.host,
path: this.pwd,
active: true,
text: res.data,
field: false,
password: false,
command: ''
})
})
},
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,
password: false,
command: ''
});
return false;
}
if (!pwd.startsWith('/')) pwd = '/' + pwd;
this.pwd = pwd;
},
clear() { this.result = []; }
}
}
</script>
<style scoped>
.inputField {
background-color: #31363b;
color: #2ecc71;
border-width: 0px;
font-family: monospace;
font-size: large;
width: 500px;
outline: none;
}
.regBold { font-weight: bold; }
.regText { color: #2ecc71; }
.pathText { color: #3498db; }
h1, h2 { font-weight: normal; }
ul { list-style-type: none; padding: 0; }
li { display: inline-block; margin: 0 10px; }
a { color: #1cdc9a; }
</style>

279
resources/assets/js/components/bash/cli.vue

@ -1,128 +1,179 @@
<template>
<div>
<div class="regText" v-for="(res, i) in result" :key="`res-${i}`">
{{ res.text }}
<br v-if="res.text" />
<span class="regBold">
{{ res.username }}@{{ res.hostname }}:<span class="pathText">{{ res.path }}</span>
</span>$
<input
:key="i"
:password="res.password"
:autofocus="res.active"
:disabled="!res.active"
spellcheck="false"
type="text"
class="inputField"
v-model="res.command"
@keyup.enter="exec(res.command, i)"
/>
<br />
<span>
<img src="/assets/img/bash/app_icon.png" width="50" @click="openterm = true" />
<div class="konsole" id="dragger">
<div class="draggerheader">
<div class="konsole_top_left"></div>
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
<div class="konsole_top_min"></div>
<div class="konsole_top_max"></div>
<div class="konsole_top_right" @click="openterm = false"></div>
</div>
<div class="konsole_left"></div>
<div class="konsoleuser">
ロリコマンドラインですね<br />
shiken@technicalsuwako.jp:/$ <span style="font-stretch: condensed;"></span>
</div>
<div class="konsole_right"></div>
<div class="konsole_bottom_left"></div>
<div class="konsole_bottom"></div>
<div class="konsole_bottom_right"></div>
</div>
</div>
</span>
</template>
<script>
import Cookies from 'js-cookie';
export default {
data: function () {
return {
user: Cookies.get('username'),
host: '076.ne.jp',
pwd: '/',
result: []
openterm: false
}
},
created: function () {
this.result = [];
this.user = Cookies.get('username');
this.host = '076.ne.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;
if (arg[0] === 'ls') this.ls(this.result[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: ''
});
},
ls(pwd) {
var neopwd = pwd.replace('/', 'sl');
axios.get('/api/rpc/bash/exec', { arg: ['ls', '', ''] }).then(res => {
this.result.push({
username: this.user,
hostname: this.host,
path: this.pwd,
active: true,
text: res.data,
field: false,
password: false,
command: ''
})
})
},
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,
password: false,
command: ''
});
return false;
}
if (!pwd.startsWith('/')) pwd = '/' + pwd;
this.pwd = pwd;
},
clear() { this.result = []; }
}
}
</script>
<style scoped>
.inputField {
background-color: #31363b;
color: #2ecc71;
border-width: 0px;
font-family: monospace;
font-size: large;
width: 500px;
outline: none;
}
.regBold { font-weight: bold; }
.regText { color: #2ecc71; }
.pathText { color: #3498db; }
h1, h2 { font-weight: normal; }
ul { list-style-type: none; padding: 0; }
li { display: inline-block; margin: 0 10px; }
a { color: #1cdc9a; }
</style>
#dragger {
position: absolute;
z-index: 9;
}
#draggerheader {
cursor: move;
z-index: 10;
}
.konsole {
width: 600px;
height: 300px;
margin: auto;
color: #fcfcfc;
}
.konsole_top_left {
height: 30px;
width: 30px;
background: url('/assets/img/bash/top_left.png') no-repeat;
position: absolute;
top: 0;
left: 0;
}
.konsole_top {
height: 30px;
background: url('/assets/img/bash/top_bg.png') repeat-x;
position: absolute;
top: 0;
left: 30px;
width: 496px;
padding-top: 7px;
padding-right: 30px;
text-align: center;
font-weight: bold;
}
.konsole_top_right {
height: 30px;
width: 28px;
background: url('/assets/img/bash/top_right.png') no-repeat;
position: absolute;
top: 0;
right: 0;
}
.konsole_top_right:hover {
background: url('/assets/img/bash/top_right_hover.png') no-repeat;
cursor: default;
}
.konsole_top_max {
height: 30px;
width: 23px;
background: url('/assets/img/bash/top_max.png') no-repeat;
position: absolute;
top: 0;
right: 28px;
}
.konsole_top_max:hover {
background: url('/assets/img/bash/top_max_hover.png') no-repeat;
cursor: default;
}
.konsole_top_min {
height: 30px;
width: 23px;
background: url('/assets/img/bash/top_min.png') no-repeat;
position: absolute;
top: 0;
right: 51px;
}
.konsole_top_min:hover {
background: url('/assets/img/bash/top_min_hover.png') no-repeat;
cursor: default;
}
.konsole_left {
width: 2px;
background: url('/assets/img/bash/left_bg.png') repeat-y;
position: absolute;
top: 30px;
left: 0;
height: 267px;
}
.konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
.konsoleroot { background: url('/assets/img/bash/root_bg.png') repeat; }
.konsoleuser, .konsoleroot {
background-size: cover;
backdrop-filter: blur(17px);
font-family: "Lucida Console", Monospace, "DejaVu Sans Mono", "Courier New", MiscFixed;
font-size: 12px;
color: #fcfcfc;
overflow: auto;
position: absolute;
top: 30px;
left: 2px;
height: 268px;
width: 596px;
padding: 5px;
}
.konsole_right {
width: 2px;
background: url('/assets/img/bash/right_bg.png') repeat-y;
position: absolute;
height: 267px;
top: 30px;
right: 0;
}
.konsole_bottom_left {
width: 3px;
height: 3px;
background: url('/assets/img/bash/bottom_left.png') no-repeat;
position: absolute;
bottom: 0;
left: 0;
}
.konsole_bottom {
height: 2px;
background: url('/assets/img/bash/bottom_bg.png') repeat-x;
position: absolute;
bottom: 0;
left: 2px;
width: 595px;
}
.konsole_bottom_right {
height: 3px;
width: 3px;
background: url('/assets/img/bash/bottom_right.png') no-repeat;
position: absolute;
right: 0;
bottom: 0;
}
</style>

146
resources/assets/sass/app.scss vendored

@ -43,6 +43,152 @@
right: 16px;
}
#dragger {
position: absolute;
z-index: 9;
}
#draggerheader {
cursor: move;
z-index: 10;
}
.konsole {
display: none;
width: 600px;
height: 358px;
margin: auto;
color: #fcfcfc;
}
.konsole_top_left {
height: 30px;
width: 30px;
background: url('/assets/img/bash/top_left.png') no-repeat;
position: absolute;
top: 0;
left: 0;
}
.konsole_top {
height: 30px;
background: url('/assets/img/bash/top_bg.png') repeat-x;
position: absolute;
top: 0;
left: 30px;
width: 496px;
padding-top: 7px;
padding-right: 30px;
text-align: center;
font-weight: bold;
cursor: move;
}
.konsole_top_right {
height: 30px;
width: 28px;
background: url('/assets/img/bash/top_right.png') no-repeat;
position: absolute;
top: 0;
right: 0;
}
.konsole_top_right:hover {
background: url('/assets/img/bash/top_right_hover.png') no-repeat;
cursor: default;
}
.konsole_top_max {
height: 30px;
width: 23px;
background: url('/assets/img/bash/top_max.png') no-repeat;
position: absolute;
top: 0;
right: 28px;
}
.konsole_top_max:hover {
background: url('/assets/img/bash/top_max_hover.png') no-repeat;
cursor: default;
}
.konsole_top_min {
height: 30px;
width: 23px;
background: url('/assets/img/bash/top_min.png') no-repeat;
position: absolute;
top: 0;
right: 51px;
}
.konsole_top_min:hover {
background: url('/assets/img/bash/top_min_hover.png') no-repeat;
cursor: default;
}
.konsole_left {
width: 2px;
background: url('/assets/img/bash/left_bg.png') repeat-y;
position: absolute;
top: 30px;
left: 0;
height: 325px;
}
.konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
.konsoleroot { background: url('/assets/img/bash/root_bg.png') repeat; }
.konsoleuser, .konsoleroot {
background-size: cover;
backdrop-filter: blur(17px);
font-family: "Lucida Console", Monospace, "DejaVu Sans Mono", "Courier New", MiscFixed;
font-size: 12px;
color: #fcfcfc;
overflow: auto;
position: absolute;
top: 30px;
left: 2px;
height: 326px;
width: 596px;
padding: 5px;
}
.konsole_right {
width: 2px;
background: url('/assets/img/bash/right_bg.png') repeat-y;
position: absolute;
height: 325px;
top: 30px;
right: 0;
}
.konsole_bottom_left {
width: 3px;
height: 3px;
background: url('/assets/img/bash/bottom_left.png') no-repeat;
position: absolute;
bottom: 0;
left: 0;
}
.konsole_bottom {
height: 2px;
background: url('/assets/img/bash/bottom_bg.png') repeat-x;
position: absolute;
bottom: 0;
left: 2px;
width: 595px;
}
.konsole_bottom_right {
height: 3px;
width: 3px;
background: url('/assets/img/bash/bottom_right.png') no-repeat;
position: absolute;
right: 0;
bottom: 0;
}
/// Stroke font-character
/// @param {Integer} $stroke - Stroke width
/// @param {Color} $color - Stroke color

20
resources/views/layouts/bash.blade.php

@ -28,7 +28,7 @@
.konsole {
width: 600px;
height: 300px;
height: 358px;
margin: auto;
color: #fcfcfc;
}
@ -103,7 +103,7 @@
position: absolute;
top: 30px;
left: 0;
height: 267px;
height: 325px;
}
.konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
@ -120,7 +120,7 @@
position: absolute;
top: 30px;
left: 2px;
height: 258px;
height: 316px;
width: 586px;
padding: 5px;
}
@ -129,7 +129,7 @@
width: 2px;
background: url('/assets/img/bash/right_bg.png') repeat-y;
position: absolute;
height: 267px;
height: 325px;
top: 30px;
right: 0;
}
@ -211,6 +211,18 @@
document.onmousemove = null;
}
}
function showdiv (id) {
if (showdiv.div) showdiv.div.style.display = 'none';
showdiv.div = document.getElementById(id);
showdiv.div.style.display = 'block';
}
function hidediv (id) {
if (showdiv.div) showdiv.div.style.display = 'block';
showdiv.div = document.getElementById(id);
showdiv.div.style.display = 'none';
}
</script>
</body>
</html>

71
resources/views/layouts/site.blade.php

@ -88,6 +88,31 @@
</div>
</div>
</div>
<div class="row">
<div class="col-md" style="padding-bottom: 32px;">
<div class="within">
<a href="#" onclick="showdiv('dragger');"><img src="/assets/img/bash/app_icon.png" width="50" /></a>
</div>
<div class="konsole" id="dragger">
<div class="draggerheader">
<div class="konsole_top_left"></div>
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
<div class="konsole_top_min"></div>
<div class="konsole_top_max"></div>
<div class="konsole_top_right" onclick="hidediv('dragger');"></div>
</div>
<div class="konsole_left"></div>
<div class="konsoleuser">
ロリコマンドラインですね〜♡<br />
shiken@technicalsuwako.jp:/$ <span style="font-stretch: condensed;"></span>
</div>
<div class="konsole_right"></div>
<div class="konsole_bottom_left"></div>
<div class="konsole_bottom"></div>
<div class="konsole_bottom_right"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3" style="padding-bottom: 32px;">
<div class="nav flex-column nav-pills sidemenu">
@ -111,5 +136,51 @@
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script>
dragElement(document.getElementById("dragger"));
function dragElement (elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
else elmnt.onmousedown = dragMouseDown;
function dragMouseDown (e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag (e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement () {
document.onmouseup = null;
document.onmousemove = null;
}
}
function showdiv (id) {
if (showdiv.div) showdiv.div.style.display = 'none';
showdiv.div = document.getElementById(id);
showdiv.div.style.display = 'block';
}
function hidediv (id) {
if (showdiv.div) showdiv.div.style.display = 'block';
showdiv.div = document.getElementById(id);
showdiv.div.style.display = 'none';
}
</script>
</body>
</html>

4
resources/views/pages/bash/cli.blade.php

@ -2,7 +2,7 @@
@section('content')
<a href="#"><img src="/assets/img/bash/app_icon.png" width="50" /></a>
<a href="#" onclick="showdiv('dragger');"><img src="/assets/img/bash/app_icon.png" width="50" /></a>
<div class="konsole" id="dragger">
<div id="draggerheader">
@ -10,7 +10,7 @@
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
<div class="konsole_top_min"></div>
<div class="konsole_top_max"></div>
<div class="konsole_top_right"></div>
<div class="konsole_top_right" onclick="hidediv('dragger');"></div>
</div>
<div class="konsole_left"></div>
<div class="konsoleuser">

読み込み中…
キャンセル
保存