Skip to content

Commit

Permalink
close #683
Browse files Browse the repository at this point in the history
  • Loading branch information
zhanghengxin committed Nov 21, 2022
1 parent 5ac6159 commit 0b9d134
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 46 deletions.
2 changes: 1 addition & 1 deletion .env.dev
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// .env.dev
NODE_ENV=dev
VUE_APP_DEV_IP=192.168.2.119
VUE_APP_DEV_IP=192.168.2.118
VUE_APP_DEV_PORT=80

2 changes: 1 addition & 1 deletion src/components/Apps/AppTerminalPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default {
data() {
return {
isLoading: false,
wsUrl: `ws://${this.$baseURL}/v1/container/${this.appid}/terminal?token=${this.$store.state.access_token}`,
wsUrl: `${this.$wsProtocol}//${this.$baseURL}/v1/container/${this.appid}/terminal?token=${this.$store.state.access_token}`,
logData: "",
timer: "",
}
Expand Down
29 changes: 19 additions & 10 deletions src/components/logsAndTerminal/TerminalCard.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<template>
<fullscreen class="fullScreen pl-2 pt-2 pb-2" :class="[{'mt-5':!fullscreen},isVaild?'fdark-bg':'flight-bg']" :fullscreen.sync="fullscreen" :teleport="true" :page-only="true" @change="onWindowResize">
<fullscreen class="fullScreen pl-2 pt-2 pb-2" :class="[{'mt-5':!fullscreen},isVaild?'fdark-bg':'flight-bg']"
:fullscreen.sync="fullscreen" :teleport="true" :page-only="true" @change="onWindowResize">
<a class="fullscreen-button" @click="toggleFullScreen" v-if="isVaild">
<b-icon :icon="buttonIcon"></b-icon>
</a>
<div id="terminal" class="is-flex is-align-items-center is-justify-content-center">
<div class="card card-shadow mb-6" v-if="!isVaild">
<div class="card-content">
<div class="content">
<b-notification auto-close type="is-danger" v-model="notificationShow" aria-close-label="Close notification" role="alert" :closable="false">
<b-notification auto-close type="is-danger" v-model="notificationShow" aria-close-label="Close notification"
role="alert" :closable="false">
{{ $t(message) }}
</b-notification>
<b-field :label="$t('Username')">
Expand All @@ -23,7 +25,10 @@
<b-input type="number" v-model="sshPort" name="port"></b-input>
</b-field>
<div class="buttons mt-5">
<b-button type="is-primary" rounded expanded @click="checkLogin" :loading="isConnecting">{{ $t('Connect') }}</b-button>
<b-button type="is-primary" rounded expanded @click="checkLogin" :loading="isConnecting">{{
$t('Connect')
}}
</b-button>
</div>
</div>
</div>
Expand All @@ -37,9 +42,9 @@
<script>
import qs from 'qs'
import 'xterm/css/xterm.css'
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { AttachAddon } from 'xterm-addon-attach'
import {Terminal} from 'xterm'
import {FitAddon} from 'xterm-addon-fit'
import {AttachAddon} from 'xterm-addon-attach'
const fitAddon = new FitAddon();
export default {
Expand Down Expand Up @@ -106,7 +111,7 @@ export default {
this.isConnecting = false
this.isVaild = true
postData.token = this.$store.state.access_token
this.wsUrl = `ws://${this.$baseURL}/v1/sys/wsssh?${qs.stringify(postData)}`
this.wsUrl = `${this.$wsProtocol}//${this.$baseURL}/v1/sys/wsssh?${qs.stringify(postData)}`
this.initSocket();
} catch (error) {
this.notificationShow = true
Expand All @@ -124,7 +129,7 @@ export default {
fontSize: 14,
cursorStyle: 'underline', //光标样式
cursorBlink: true, //光标闪烁
theme: { background: '#1E1E1E' },
theme: {background: '#1E1E1E'},
rows: parseInt(this.rows), //行数
cols: parseInt(this.cols), // 不指定行数,自动回车后光标从下一行开始
});
Expand Down Expand Up @@ -208,30 +213,34 @@ export default {
}
</script>

<style lang="scss" scoped >
<style lang="scss" scoped>
#terminal {
width: 100%;
height: 100%;
min-height: 35rem;
.card {
.card-content {
padding: 2.5rem;
width: 25rem;
}
&.card-shadow {
box-shadow: 0px 40px 80px rgba(115, 120, 128, 0.25) !important;
border-radius: 8px;
}
}
}
.xterm {
width: 100%;
&.fullheight {
height: 100%;
}
&.sheight {
height: 35rem;
}
}
</style>
</style>
71 changes: 37 additions & 34 deletions src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @Date: 2021-09-22 14:24:43
* @LastEditors: Jerryk [email protected]
* @LastEditTime: 2022-08-16 15:08:41
* @Description:
* @Description:
* @FilePath: \CasaOS-UI\src\main.js
*/
import 'intersection-observer'
Expand All @@ -19,49 +19,52 @@ import Vue2TouchEvents from 'vue2-touch-events'
import VueTour from 'vue-tour'
import VueSocialSharing from 'vue-social-sharing'
import VueSocketIOExt from 'vue-socket.io-extended';
const io = require("socket.io-client");
// Import Styles
import '@/assets/scss/app.scss'
import 'vue-tour/dist/vue-tour.css'
import VAnimateCss from 'v-animate-css';

const io = require("socket.io-client");

api.sys.getSocketPort().then(res => {
const protocol = document.location.protocol
const wsPort = res.data.data
const devIp = process.env.VUE_APP_DEV_IP
const devPort = process.env.VUE_APP_DEV_PORT
const localhost = document.location.host
const localhostName = document.location.hostname
const baseIp = process.env.NODE_ENV === "dev" ? `${devIp}` : `${localhostName}`
const baseURL = process.env.NODE_ENV === "dev" ? `${devIp}:${devPort}` : `${localhost}`
const wsURL = `ws://${baseIp}:${wsPort}`
const protocol = document.location.protocol
const wsProtocol = protocol === 'https:' ? 'wss:' : 'ws:'
const wsPort = res.data.data
const devIp = process.env.VUE_APP_DEV_IP
const devPort = process.env.VUE_APP_DEV_PORT
const localhost = document.location.host
const localhostName = document.location.hostname
const baseIp = process.env.NODE_ENV === "dev" ? `${devIp}` : `${localhostName}`
const baseURL = process.env.NODE_ENV === "dev" ? `${devIp}:${devPort}` : `${localhost}`
const wsURL = `${wsProtocol}//${baseIp}:${wsPort}`

const socket = io(wsURL, {
transports: ['websocket', 'polling']
});
const socket = io(wsURL, {
transports: ['websocket', 'polling']
});

Vue.use(Buefy)
Vue.use(VueFullscreen)
Vue.use(VAnimateCss)
Vue.use(Vue2TouchEvents)
Vue.use(VueTour)
Vue.use(VueSocketIOExt, socket);
Vue.use(VueSocialSharing);
Vue.use(Buefy)
Vue.use(VueFullscreen)
Vue.use(VAnimateCss)
Vue.use(Vue2TouchEvents)
Vue.use(VueTour)
Vue.use(VueSocketIOExt, socket);
Vue.use(VueSocialSharing);

Vue.config.productionTip = false
Vue.prototype.$api = api;
Vue.prototype.$baseIp = baseIp;
Vue.prototype.$baseURL = baseURL;
Vue.prototype.$protocol = protocol;
Vue.config.productionTip = false
Vue.prototype.$api = api;
Vue.prototype.$baseIp = baseIp;
Vue.prototype.$baseURL = baseURL;
Vue.prototype.$protocol = protocol;
Vue.prototype.$wsProtocol = wsProtocol;

// Create an EventBus
Vue.prototype.$EventBus = new Vue();
new Vue({
router,
i18n,
store,
render: h => h(App)
}).$mount('#app')
// Create an EventBus
Vue.prototype.$EventBus = new Vue();
new Vue({
router,
i18n,
store,
render: h => h(App)
}).$mount('#app')

})

Expand Down

0 comments on commit 0b9d134

Please sign in to comment.