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> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script> -->
</body> </body>
</html> </html>

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

@ -17,18 +17,6 @@
:modal="false" :modal="false"
modal-class="keyboard_drawer" 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"> <ul class="keyboard">
<li <li
v-for="item in keys" v-for="item in keys"
@ -40,6 +28,8 @@
{{ item.key }} {{ item.key }}
</div> </div>
</li> </li>
<li class="key placeholder" />
<li class="key placeholder" />
</ul> </ul>
</el-drawer> </el-drawer>
</div> </div>
@ -73,6 +63,14 @@ let showMenu = computed({
const { LONG_PRESS, SINGLE_PRESS } = virtualKeyType const { LONG_PRESS, SINGLE_PRESS } = virtualKeyType
const keys = ref([ 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: 'Esc', ascii: 27, type: SINGLE_PRESS, ansi: '\x1B' },
{ key: 'Tab', ascii: 9, type: SINGLE_PRESS, ansi: '\x09' }, { key: 'Tab', ascii: 9, type: SINGLE_PRESS, ansi: '\x09' },
{ key: 'Ctrl', ascii: null, type: LONG_PRESS, ansi: '' }, { 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~' }, { 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) => { const handleClickKey = (key) => {
emit('click-key', key) emit('click-key', key)
} }
@ -203,6 +190,13 @@ onMounted(() => {
y.value = window.innerHeight - radius * 2 y.value = window.innerHeight - radius * 2
styleObject.value.top = `${ y.value }px` styleObject.value.top = `${ y.value }px`
styleObject.value.left = `${ x.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> </script>
@ -218,31 +212,35 @@ onMounted(() => {
} }
.keyboard_drawer { .keyboard_drawer {
height: 25vh; height: 150px;
.el-drawer { .el-drawer {
height: 100%!important; height: 100%!important;
.el-drawer__header { .el-drawer__header {
margin-bottom: 10px; margin-bottom: 10px;
} }
.el-drawer__body { .el-drawer__body {
padding: 0 20px; padding: 10px 15px;
} }
} }
.keyboard { .keyboard {
list-style: none; list-style: none;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around;
padding: 0; padding: 0;
.key.placeholder {
opacity: 0;
}
.key { .key {
width: 80px; width: 76px;
min-height: 15px;
font-size: 12px; font-size: 12px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 8px;
text-align: center; text-align: center;
margin-right: 12px; margin-right: 8px;
margin-bottom: 6px; margin-bottom: 6px;
border: 1px solid #ccc; border: 1px solid #ccc;
min-height: 15px;
} }
.long_press { .long_press {
.active { .active {

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

@ -103,7 +103,7 @@ const handleCollapse = () => {
} }
const handleLogout = () => { const handleLogout = () => {
$store.clearJwtToken() $store.removeJwtToken()
$message({ type: 'success', message: '已安全退出', center: true }) $message({ type: 'success', message: '已安全退出', center: true })
$router.push('/login') $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 isMobileScreen.value = window.innerWidth < maxWidth
} }
onMounted(() => { onMounted(() => {
console.log('window.innerWidth: ', window.innerWidth)
console.log('window.innerWidth: ', window.innerWidth)
window.addEventListener('resize', updateScreenWidth) window.addEventListener('resize', updateScreenWidth)
}) })

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

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

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

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

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

@ -194,6 +194,7 @@
<el-date-picker <el-date-picker
v-model="hostForm.expired" v-model="hostForm.expired"
type="date" type="date"
:editable="false"
style="width: 100%;" style="width: 100%;"
value-format="x" value-format="x"
placeholder="实例到期时间" 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%"> <el-descriptions-item v-show="row.consoleUrl" label="服务商控制台" width="20%">
<span class="link" @click="handleToConsole(row)">服务商控制台</span> <span class="link" @click="handleToConsole(row)">服务商控制台</span>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="客户端端口" width="20%">
<span>{{ row.clientPort }}</span>
</el-descriptions-item>
</el-descriptions> </el-descriptions>
<div v-else class="no_client_data"> <div v-else class="no_client_data">
客户端监控服务未安装或连接失败，无法获取实例监控数据。<span class="link" @click="handleOnekey(row)">去安装</span> 客户端监控服务未安装或连接失败，无法获取实例监控数据。<span class="link" @click="handleOnekey(row)">去安装</span>

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

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

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

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