: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) { @media screen and (max-width: 968px) {
.login_box {
width: 86vw!important;
}
.view_container { .view_container {
.aside_container { .aside_container {
display: none; display: none;

View File

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

View File

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