:fix: 修复移动端alt按键映射

This commit is contained in:
chaos-zhu 2024-10-20 21:34:36 +08:00
parent fc42e1b29a
commit 846c19ceb3
3 changed files with 33 additions and 28 deletions

View File

@ -32,6 +32,9 @@
@media screen and (max-width: 968px) {
.login_box {
width: 86vw!important;
}
.view_container {
.aside_container {
display: none;

View File

@ -13,9 +13,10 @@
:model="loginForm"
:rules="rules"
:hide-required-asterisk="true"
:show-message="false"
label-suffix=""
label-width="90px"
:show-message="false"
label-position="top"
>
<el-form-item prop="loginName" label="用户名">
<el-input
@ -44,20 +45,10 @@
<el-input v-model.trim="loginForm.pwd" />
</el-form-item>
<el-form-item prop="jwtExpires" label="有效期">
<el-radio-group v-model="isSession" class="login-indate">
<el-radio :value="true">一次性会话</el-radio>
<el-radio :value="false">自定义(小时)</el-radio>
<el-input-number
v-model="loginForm.jwtExpires"
:disabled="isSession"
placeholder="单位:小时"
class="input"
:min="1"
:max="72"
value-on-clear="min"
size="small"
controls-position="right"
/>
<el-radio-group v-model="expireTime" class="login-indate">
<el-radio :value="expireEnum.ONE_SESSION">一次性会话</el-radio>
<el-radio :value="expireEnum.CURRENT_DAY">当天有效</el-radio>
<el-radio :value="expireEnum.THREE_DAY">三天有效</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
@ -85,14 +76,19 @@ import { RSAEncrypt } from '@utils/index.js'
// const router = useRouter()
const { proxy: { $store, $api, $message, $messageBox, $router } } = getCurrentInstance()
const expireEnum = reactive({
ONE_SESSION: 'one_session',
CURRENT_DAY: 'current_day',
THREE_DAY: 'three_day'
})
const expireTime = ref(expireEnum.ONE_SESSION)
const loginFormRefs = ref(null)
const isSession = ref(true)
const notKey = ref(false)
const loading = ref(false)
const loginForm = reactive({
loginName: '',
pwd: '',
jwtExpires: 8
jwtExpires: 1
})
const rules = reactive({
loginName: { required: true, message: '需输入用户名', trigger: 'change' },
@ -102,9 +98,16 @@ const rules = reactive({
const handleLogin = () => {
loginFormRefs.value.validate().then(() => {
let { jwtExpires, loginName, pwd } = loginForm
jwtExpires = isSession.value ? '12h' : `${ jwtExpires }h`
if (!isSession.value) {
localStorage.setItem('jwtExpires', jwtExpires)
switch (expireTime.value) {
case expireEnum.ONE_SESSION:
jwtExpires = '1h' // token1
break
case expireEnum.CURRENT_DAY:
jwtExpires = `${ Math.floor((new Date().setHours(24,0,0,0) - Date.now()) / 1000) }s`
break
case expireEnum.THREE_DAY:
jwtExpires = '3d'
break
}
const ciphertext = RSAEncrypt(pwd)
if (ciphertext === -1) return $message.error({ message: '公钥加载失败', center: true })
@ -112,7 +115,7 @@ const handleLogin = () => {
$api.login({ loginName, ciphertext, jwtExpires })
.then(({ data, msg }) => {
const { token } = data
$store.setJwtToken(token, isSession.value)
$store.setJwtToken(token, expireEnum.ONE_SESSION === expireTime.value)
$store.setUser(loginName)
$message.success({ message: msg || 'success', center: true })
if (loginName === 'admin' && pwd === 'admin') {
@ -156,7 +159,7 @@ onMounted(async () => {
.login_box {
margin-top: -80px;
width: 500px;
width: 450px;
min-height: 250px;
padding: 20px;
border-radius: 6px;
@ -182,7 +185,7 @@ onMounted(async () => {
.login-indate {
display: flex;
flex-wrap: nowrap;
// flex-wrap: nowrap;
.input {
margin-left: -25px;

View File

@ -334,18 +334,17 @@ function extractLastCdPath(text) {
}
const onData = () => {
// term.value.off('data', listenerInput)
term.value.onData((key) => {
// console.log('key: ', key)
// if (key === '\x03') console.log('Ctrl + C detected')
console.log('key: ', key)
if (socketConnected.value === false) return
if (isLongPressCtrl.value || isLongPressAlt.value) {
const keyCode = key.toUpperCase().charCodeAt(0)
console.log('keyCode: ', keyCode)
const ansiCode = keyCode - 64
// console.log('ansiCode:', ansiCode)
console.log('ansiCode:', ansiCode)
if (ansiCode >= 1 && ansiCode <= 26) {
const controlChar = String.fromCharCode(ansiCode)
socket.value.emit('input', controlChar)
socket.value.emit('input', isLongPressCtrl.value ? controlChar : `\x1b${ key }`)
}
emit('reset-long-press')
return