mirror of
https://github.com/viarotel-org/escrcpy.git
synced 2024-11-24 07:30:15 +01:00
fix: 💄 Optimize wireless connection user interface
This commit is contained in:
viarotel
parent
d72202b311
commit
50ae7426c0
1
.npmrc
1
.npmrc
@ -1,5 +1,6 @@
|
||||
registry=https://registry.npmmirror.com/
|
||||
shamefully-hoist=true
|
||||
virtual-store-dir-max-length=70
|
||||
|
||||
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
|
||||
ELECTRON_CUSTOM_DIR="{{ version }}"
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
"electron-store": "^9.0.0",
|
||||
"electron-updater": "^6.1.8",
|
||||
"element-plus": "^2.7.2",
|
||||
"eslint": "^9.2.0",
|
||||
"eslint": "^8.57.0",
|
||||
"fix-path": "^4.0.0",
|
||||
"fs-extra": "^11.2.0",
|
||||
"hono": "^4.3.2",
|
||||
|
||||
@ -8,143 +8,147 @@
|
||||
destroy-on-close
|
||||
@closed="onClosed"
|
||||
>
|
||||
<ele-form-row
|
||||
ref="formRef"
|
||||
:model="model"
|
||||
:rules="rules"
|
||||
label-width="180px"
|
||||
class="!pr-24 !pt-4"
|
||||
>
|
||||
<ele-form-item-col
|
||||
:label="$t('device.task.type')"
|
||||
:span="24"
|
||||
prop="taskType"
|
||||
<div class="pr-24 pt-4">
|
||||
<ele-form-row
|
||||
ref="formRef"
|
||||
:model="model"
|
||||
:rules="rules"
|
||||
label-width="180px"
|
||||
class=""
|
||||
>
|
||||
<el-select
|
||||
v-model="model.taskType"
|
||||
:placeholder="$t('common.select.please')"
|
||||
clearable
|
||||
filterable
|
||||
@change="onTaskChange"
|
||||
<ele-form-item-col
|
||||
:label="$t('device.task.type')"
|
||||
:span="24"
|
||||
prop="taskType"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in taskModel"
|
||||
:key="item.value"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
<el-select
|
||||
v-model="model.taskType"
|
||||
:placeholder="$t('common.select.please')"
|
||||
clearable
|
||||
filterable
|
||||
@change="onTaskChange"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</ele-form-item-col>
|
||||
<ele-form-item-col
|
||||
:label="$t('device.task.frequency')"
|
||||
:span="24"
|
||||
prop="timerType"
|
||||
>
|
||||
<el-radio-group v-model="model.timerType">
|
||||
<el-radio
|
||||
v-for="(item, index) of timerModel"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ $t(item.label) }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</ele-form-item-col>
|
||||
|
||||
<ele-form-item-col
|
||||
v-if="['timeout'].includes(model.timerType)"
|
||||
:label="$t('device.task.timeout')"
|
||||
:span="24"
|
||||
prop="timeout"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="model.timeout"
|
||||
type="datetime"
|
||||
placeholder="0000-00-00 00:00:00"
|
||||
clearable
|
||||
v-bind="{ disabledDate, defaultTime }"
|
||||
></el-date-picker>
|
||||
</ele-form-item-col>
|
||||
|
||||
<ele-form-item-col
|
||||
v-if="['interval'].includes(model.timerType)"
|
||||
:label="$t('device.task.interval')"
|
||||
:span="24"
|
||||
prop="interval"
|
||||
>
|
||||
<el-input
|
||||
v-model="model.interval"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
clearable
|
||||
>
|
||||
<template #append>
|
||||
<el-select
|
||||
v-model="model.intervalType"
|
||||
:placeholder="$t('common.select.please')"
|
||||
filterable
|
||||
class="!w-36"
|
||||
<el-option
|
||||
v-for="item in taskModel"
|
||||
:key="item.value"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) of intervalModel"
|
||||
:key="index"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</ele-form-item-col>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</ele-form-item-col>
|
||||
<ele-form-item-col
|
||||
:label="$t('device.task.frequency')"
|
||||
:span="24"
|
||||
prop="timerType"
|
||||
>
|
||||
<el-radio-group v-model="model.timerType">
|
||||
<el-radio
|
||||
v-for="(item, index) of timerModel"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ $t(item.label) }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</ele-form-item-col>
|
||||
|
||||
<ele-form-item-col
|
||||
v-if="['install'].includes(model.taskType)"
|
||||
:label="$t('device.task.extra.app')"
|
||||
:span="24"
|
||||
prop="extra"
|
||||
>
|
||||
<InputPath
|
||||
v-model="model.extra"
|
||||
:placeholder="$t('device.control.install.placeholder')"
|
||||
:data="{
|
||||
properties: ['openFile', 'multiSelections'],
|
||||
filters: [
|
||||
{
|
||||
name: $t('device.control.install.placeholder'),
|
||||
extensions: ['apk'],
|
||||
},
|
||||
],
|
||||
}"
|
||||
/>
|
||||
</ele-form-item-col>
|
||||
<ele-form-item-col
|
||||
v-if="['timeout'].includes(model.timerType)"
|
||||
:label="$t('device.task.timeout')"
|
||||
:span="24"
|
||||
prop="timeout"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="model.timeout"
|
||||
type="datetime"
|
||||
placeholder="0000-00-00 00:00:00"
|
||||
clearable
|
||||
v-bind="{ disabledDate, defaultTime }"
|
||||
></el-date-picker>
|
||||
</ele-form-item-col>
|
||||
|
||||
<ele-form-item-col
|
||||
v-if="['shell'].includes(model.taskType)"
|
||||
:label="$t('device.task.extra.shell')"
|
||||
:span="24"
|
||||
prop="extra"
|
||||
>
|
||||
<InputPath
|
||||
v-model="model.extra"
|
||||
:placeholder="$t('device.control.shell.select')"
|
||||
:data="{
|
||||
properties: ['openFile'],
|
||||
filters: [
|
||||
{
|
||||
name: $t('device.control.shell.select'),
|
||||
extensions: ['sh'],
|
||||
},
|
||||
],
|
||||
}"
|
||||
/>
|
||||
</ele-form-item-col>
|
||||
<ele-form-item-col
|
||||
v-if="['interval'].includes(model.timerType)"
|
||||
:label="$t('device.task.interval')"
|
||||
:span="24"
|
||||
prop="interval"
|
||||
>
|
||||
<el-input
|
||||
v-model="model.interval"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
clearable
|
||||
>
|
||||
<template #append>
|
||||
<el-select
|
||||
v-model="model.intervalType"
|
||||
:placeholder="$t('common.select.please')"
|
||||
filterable
|
||||
class="!w-36"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) of intervalModel"
|
||||
:key="index"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</ele-form-item-col>
|
||||
|
||||
<ele-form-item-col :span="24" label="">
|
||||
<div class="text-red-200 hover:text-red-500 transition-colors">
|
||||
{{ $t('device.task.tips') }}
|
||||
</div>
|
||||
</ele-form-item-col>
|
||||
</ele-form-row>
|
||||
<ele-form-item-col
|
||||
v-if="['install'].includes(model.taskType)"
|
||||
:label="$t('device.task.extra.app')"
|
||||
:span="24"
|
||||
prop="extra"
|
||||
>
|
||||
<InputPath
|
||||
v-model="model.extra"
|
||||
:placeholder="$t('device.control.install.placeholder')"
|
||||
:data="{
|
||||
properties: ['openFile', 'multiSelections'],
|
||||
filters: [
|
||||
{
|
||||
name: $t('device.control.install.placeholder'),
|
||||
extensions: ['apk'],
|
||||
},
|
||||
],
|
||||
}"
|
||||
/>
|
||||
</ele-form-item-col>
|
||||
|
||||
<ele-form-item-col
|
||||
v-if="['shell'].includes(model.taskType)"
|
||||
:label="$t('device.task.extra.shell')"
|
||||
:span="24"
|
||||
prop="extra"
|
||||
>
|
||||
<InputPath
|
||||
v-model="model.extra"
|
||||
:placeholder="$t('device.control.shell.select')"
|
||||
:data="{
|
||||
properties: ['openFile'],
|
||||
filters: [
|
||||
{
|
||||
name: $t('device.control.shell.select'),
|
||||
extensions: ['sh'],
|
||||
},
|
||||
],
|
||||
}"
|
||||
/>
|
||||
</ele-form-item-col>
|
||||
|
||||
<ele-form-item-col :span="24" label="">
|
||||
<div
|
||||
class="text-red-200 dark:text-red-900 !hover:text-red-500 transition-colors"
|
||||
>
|
||||
{{ $t('device.task.tips') }}
|
||||
</div>
|
||||
</ele-form-item-col>
|
||||
</ele-form-row>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="close">
|
||||
|
||||
@ -2,72 +2,85 @@
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="$t('device.wireless.pair')"
|
||||
width="600"
|
||||
width="80%"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<div class="text-red-500 text-sm pb-8 pl-4">
|
||||
{{ $t("device.wireless.pair.tips") }}
|
||||
<div class="pt-4 pr-24">
|
||||
<el-form ref="elForm" :model="formData" label-width="160px" class="">
|
||||
<el-form-item
|
||||
:label="$t('device.wireless.pair.address')"
|
||||
prop="host"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('device.wireless.pair.address.message'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.host"
|
||||
:placeholder="$t('common.input.placeholder')"
|
||||
class=""
|
||||
clearable
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('device.wireless.pair.port')"
|
||||
prop="port"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('device.wireless.pair.port.message'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
v-model.number="formData.port"
|
||||
type="number"
|
||||
:placeholder="$t('common.input.placeholder')"
|
||||
:min="0"
|
||||
clearable
|
||||
class=""
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('device.wireless.pair.code')"
|
||||
prop="pair"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('device.wireless.pair.code.message'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.pair"
|
||||
:placeholder="$t('common.input.placeholder')"
|
||||
clearable
|
||||
class=""
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="">
|
||||
<div
|
||||
class="text-red-200 dark:text-red-900 !hover:text-red-500 transition-colors"
|
||||
>
|
||||
{{ $t('device.wireless.pair.tips') }}
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-form ref="elForm" :model="formData" label-width="100px">
|
||||
<el-form-item
|
||||
:label="$t('device.wireless.pair.address')"
|
||||
prop="host"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('device.wireless.pair.address.message'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.host"
|
||||
:placeholder="$t('common.input.placeholder')"
|
||||
class=""
|
||||
clearable
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('device.wireless.pair.port')"
|
||||
prop="port"
|
||||
:rules="[
|
||||
{ required: true, message: $t('device.wireless.pair.port.message') },
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
v-model.number="formData.port"
|
||||
type="number"
|
||||
:placeholder="$t('common.input.placeholder')"
|
||||
:min="0"
|
||||
clearable
|
||||
class=""
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('device.wireless.pair.code')"
|
||||
prop="pair"
|
||||
:rules="[
|
||||
{ required: true, message: $t('device.wireless.pair.code.message') },
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.pair"
|
||||
:placeholder="$t('common.input.placeholder')"
|
||||
clearable
|
||||
class=""
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">
|
||||
{{ $t("common.cancel") }}
|
||||
{{ $t('common.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">
|
||||
{{ $t("common.confirm") }}
|
||||
{{ $t('common.confirm') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
@ -251,17 +251,24 @@ export default {
|
||||
async handleError(message) {
|
||||
try {
|
||||
await this.$confirm(
|
||||
`
|
||||
<div class="pb-4 text-sm text-red-500">${this.$t(
|
||||
'device.wireless.connect.error.detail',
|
||||
)}：${message}</div>
|
||||
<div>${this.$t('device.wireless.connect.error.reasons[0]')}：</div>
|
||||
<div>1. ${this.$t('device.wireless.connect.error.reasons[1]')} </div>
|
||||
<div>2. ${this.$t('device.wireless.connect.error.reasons[2]')} </div>
|
||||
<div>3. ${this.$t('device.wireless.connect.error.reasons[3]')} </div>
|
||||
<div>4. ${this.$t('device.wireless.connect.error.reasons[4]')} </div>
|
||||
<div>5. ${this.$t('device.wireless.connect.error.reasons[5]')} </div>
|
||||
`,
|
||||
`<div class="pt-4 pl-4">
|
||||
<div class="text-sm text-red-500 pb-4">${this.$t(
|
||||
'device.wireless.connect.error.detail',
|
||||
)}：${message}</div>
|
||||
<div>${this.$t('device.wireless.connect.error.reasons[0]')}：</div>
|
||||
<div>1. ${this.$t(
|
||||
'device.wireless.connect.error.reasons[1]',
|
||||
)} </div>
|
||||
<div>2. ${this.$t(
|
||||
'device.wireless.connect.error.reasons[2]',
|
||||
)} </div>
|
||||
<div>3. ${this.$t(
|
||||
'device.wireless.connect.error.reasons[3]',
|
||||
)} </div>
|
||||
<div>4. ${this.$t(
|
||||
'device.wireless.connect.error.reasons[4]',
|
||||
)} </div>
|
||||
</div>`,
|
||||
this.$t('device.wireless.connect.error.title'),
|
||||
{
|
||||
dangerouslyUseHTMLString: true,
|
||||
|
||||
@ -30,7 +30,30 @@
|
||||
:label="$t('device.task.type')"
|
||||
align="center"
|
||||
>
|
||||
{{ $t(getDictLabel(taskModel, row.taskType)) }}
|
||||
<div class="h-full flex items-center justify-center">
|
||||
<el-dropdown :key="row.id" trigger="hover" :disabled="!row.extra">
|
||||
<span
|
||||
:class="
|
||||
row.extra
|
||||
? 'text-primary hover:underline'
|
||||
: 'text-[var(--el-table-text-color)]'
|
||||
"
|
||||
>
|
||||
{{ $t(getDictLabel(taskModel, row.taskType)) }}
|
||||
</span>
|
||||
|
||||
<template v-if="row.extra" #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(item, index) of row.extra.split(',')"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
|
||||
Loading…
Reference in New Issue
Block a user