shuguang/easynode
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 修复移动端软键盘弹起UI问题

Browse Source
This commit is contained in:
chaos-zhu 2024-10-21 21:11:42 +08:00
parent c8898e6acb
commit 6273a9498e
10 changed files with 37 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/index.html
View File

@ -13,6 +13,8 @@
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script> -->
</body>
</html>

56
web/src/components/float-menu/index.vue
View File

@ -17,18 +17,6 @@
:modal="false"
modal-class="keyboard_drawer"
>
<el-divider content-position="left">组合键</el-divider>
<ul class="keyboard">
<li
v-for="item in keyGroup"
:key="item.key"
class="key"
@click="handleClickKey(item)"
>
<div>{{ item.key }}</div>
</li>
</ul>
<el-divider content-position="left">功能键</el-divider>
<ul class="keyboard">
<li
v-for="item in keys"
@ -40,6 +28,8 @@
{{ item.key }}
</div>
</li>
<li class="key placeholder" />
<li class="key placeholder" />
</ul>
</el-drawer>
</div>
@ -73,6 +63,14 @@ let showMenu = computed({
const { LONG_PRESS, SINGLE_PRESS } = virtualKeyType
const keys = ref([
{ key: 'Ctrl+C', ascii: null, type: SINGLE_PRESS, ansi: '\x03' },
{ key: 'Ctrl+A', ascii: null, type: SINGLE_PRESS, ansi: '\x01' },
{ key: 'Ctrl+E', ascii: null, type: SINGLE_PRESS, ansi: '\x05' },
{ key: 'Ctrl+L', ascii: null, type: SINGLE_PRESS, ansi: '\x0C' },
{ key: 'Ctrl+R', ascii: null, type: SINGLE_PRESS, ansi: '\x12' },
{ key: ':wq', ascii: null, type: SINGLE_PRESS, ansi: ':wq\r' },
{ key: ':q!', ascii: null, type: SINGLE_PRESS, ansi: ':q!\r' },
{ key: 'dd', ascii: null, type: SINGLE_PRESS, ansi: 'dd\r' },
{ key: 'Esc', ascii: 27, type: SINGLE_PRESS, ansi: '\x1B' },
{ key: 'Tab', ascii: 9, type: SINGLE_PRESS, ansi: '\x09' },
{ key: 'Ctrl', ascii: null, type: LONG_PRESS, ansi: '' },
@ -101,17 +99,6 @@ const keys = ref([
{ key: 'PageDown', ascii: 34, type: SINGLE_PRESS, ansi: '\x1B[6~' },
])
const keyGroup = ref([
{ key: 'Ctrl+C', ascii: null, type: SINGLE_PRESS, ansi: '\x03' },
{ key: 'Ctrl+A', ascii: null, type: SINGLE_PRESS, ansi: '\x01' },
{ key: 'Ctrl+E', ascii: null, type: SINGLE_PRESS, ansi: '\x05' },
{ key: 'Ctrl+L', ascii: null, type: SINGLE_PRESS, ansi: '\x0C' },
{ key: 'Ctrl+R', ascii: null, type: SINGLE_PRESS, ansi: '\x12' },
{ key: ':wq', ascii: null, type: SINGLE_PRESS, ansi: ':wq\r' },
{ key: ':q!', ascii: null, type: SINGLE_PRESS, ansi: ':q!\r' },
{ key: 'dd', ascii: null, type: SINGLE_PRESS, ansi: 'dd\r' },
])
const handleClickKey = (key) => {
emit('click-key', key)
}
@ -203,6 +190,13 @@ onMounted(() => {
y.value = window.innerHeight - radius * 2
styleObject.value.top = `${ y.value }px`
styleObject.value.left = `${ x.value }px`
window.addEventListener('resize', () => {
x.value = window.innerWidth - radius * 2
y.value = window.innerHeight - radius * 2
styleObject.value.top = `${ y.value }px`
styleObject.value.left = `${ x.value }px`
})
})
</script>
@ -218,31 +212,35 @@ onMounted(() => {
}
.keyboard_drawer {
height: 25vh;
height: 150px;
.el-drawer {
height: 100%!important;
.el-drawer__header {
margin-bottom: 10px;
}
.el-drawer__body {
padding: 0 20px;
padding: 10px 15px;
}
}
.keyboard {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
.key.placeholder {
opacity: 0;
}
.key {
width: 80px;
width: 76px;
min-height: 15px;
font-size: 12px;
box-sizing: border-box;
padding: 10px;
padding: 8px;
text-align: center;
margin-right: 12px;
margin-right: 8px;
margin-bottom: 6px;
border: 1px solid #ccc;
min-height: 15px;
}
.long_press {
.active {

2
web/src/components/top-bar.vue
View File

@ -103,7 +103,7 @@ const handleCollapse = () => {
}
const handleLogout = () => {
$store.clearJwtToken()
$store.removeJwtToken()
$message({ type: 'success', message: '已安全退出', center: true })
$router.push('/login')
}

2
web/src/composables/useMobileWidth.js
View File

@ -6,8 +6,6 @@ export default function useMobileWidth(maxWidth = 968) {
isMobileScreen.value = window.innerWidth < maxWidth
}
onMounted(() => {
console.log('window.innerWidth: ', window.innerWidth)
console.log('window.innerWidth: ', window.innerWidth)
window.addEventListener('resize', updateScreenWidth)
})

6
web/src/store/index.js
View File

@ -58,9 +58,9 @@ const useStore = defineStore({
async setTitle(title) {
this.$patch({ title })
},
async clearJwtToken() {
localStorage.clear('token')
sessionStorage.clear('token')
async removeJwtToken() {
localStorage.removeItem('token')
sessionStorage.removeItem('token')
this.$patch({ token: null })
},
async getMainData() {

4
web/src/views/index.vue
View File

@ -46,10 +46,10 @@ onBeforeMount(async () => {
height: 100vh;
.main_container {
flex: 1;
height: 100vh;
height: 100%;
overflow: auto;
.router_box {
min-height: calc(100vh - 60px - 20px);
height: calc(100% - 60px - 20px);
background-color: #fff;
border-radius: 6px;
margin: 10px;

1
web/src/views/server/components/host-form.vue
View File

@ -194,6 +194,7 @@
<el-date-picker
v-model="hostForm.expired"
type="date"
:editable="false"
style="width: 100%;"
value-format="x"
placeholder="实例到期时间"

3
web/src/views/server/components/host-table.vue
View File

@ -42,9 +42,6 @@
<el-descriptions-item v-show="row.consoleUrl" label="服务商控制台" width="20%">
<span class="link" @click="handleToConsole(row)">服务商控制台</span>
</el-descriptions-item>
<el-descriptions-item label="客户端端口" width="20%">
<span>{{ row.clientPort }}</span>
</el-descriptions-item>
</el-descriptions>
<div v-else class="no_client_data">
客户端监控服务未安装或连接失败，无法获取实例监控数据。<span class="link" @click="handleOnekey(row)">去安装</span>

4
web/src/views/terminal/components/terminal.vue
View File

@ -101,12 +101,8 @@
/>
</el-tooltip>
</div>
<!-- <el-icon class="full_icon">
<FullScreen class="icon" @click="handleFullScreen" />
</el-icon> -->
</div>
</div>
<el-drawer
v-if="isMobileScreen"
v-model="showMobileInfoSideDialog"

2
web/src/views/terminal/index.vue
View File

@ -121,7 +121,7 @@ onActivated(async () => {
<style lang="scss" scoped>
.terminal_container {
height: calc(100vh - 60px - 20px);
height: calc(100% - 60px - 20px);
overflow: auto;
.terminal_link_tips {
width: 735px;