✨ 优化移动端兼容UI
This commit is contained in:
chaos-zhu
parent
846c19ceb3
commit
e9a567c3fe
@ -33,6 +33,7 @@
|
||||
"codemirror": "^6.0.1",
|
||||
"crypto-js": "^4.2.0",
|
||||
"csv-parse": "^5.5.6",
|
||||
"dayjs": "^1.11.13",
|
||||
"element-plus": "^2.7.6",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"pinia": "^2.1.7",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { io } from 'socket.io-client'
|
||||
import { defineStore, acceptHMRUpdate } from 'pinia'
|
||||
import dayjs from 'dayjs'
|
||||
import $api from '@/api'
|
||||
import config from '@/config'
|
||||
import { isHttps } from '@/utils'
|
||||
@ -72,6 +73,7 @@ const useStore = defineStore({
|
||||
async getHostList() {
|
||||
let { data: newHostList } = await $api.getHostList()
|
||||
newHostList = newHostList.map(newHostObj => {
|
||||
newHostObj.expired = dayjs(newHostObj.expired).format('YYYY-MM-DD')
|
||||
const oldHostObj = this.hostList.find(({ id }) => id === newHostObj.id)
|
||||
return oldHostObj ? Object.assign({}, { ...oldHostObj }, { ...newHostObj }) : newHostObj
|
||||
})
|
||||
|
||||
@ -36,9 +36,15 @@
|
||||
<el-descriptions-item label="位置" width="20%">
|
||||
{{ row.monitorData?.ipInfo.country || '--' }} {{ row.monitorData?.ipInfo.regionName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-show="row.consoleUrl" label="其他" width="20%">
|
||||
<el-descriptions-item v-show="row.expired" label="到期时间" width="20%">
|
||||
<span>{{ row.expired }}</span>
|
||||
</el-descriptions-item>
|
||||
<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>
|
||||
@ -79,18 +85,48 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column property="isConfig" label="登录配置" /> -->
|
||||
<el-table-column label="操作" fixed="right" width="260px">
|
||||
<el-table-column label="操作" fixed="right" :width="isMobileScreen ? 'auto' : '260px'">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip
|
||||
:disabled="row.isConfig"
|
||||
effect="dark"
|
||||
content="请先配置ssh连接信息"
|
||||
placement="left"
|
||||
>
|
||||
<el-button type="success" :disabled="!row.isConfig" @click="handleSSH(row)">连接终端</el-button>
|
||||
</el-tooltip>
|
||||
<el-button type="primary" @click="handleUpdate(row)">配置</el-button>
|
||||
<el-button type="danger" @click="handleRemoveHost(row)">删除</el-button>
|
||||
<el-dropdown v-if="isMobileScreen" trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
操作
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-tooltip
|
||||
:disabled="row.isConfig"
|
||||
effect="dark"
|
||||
content="请先配置ssh连接信息"
|
||||
placement="left"
|
||||
>
|
||||
<el-button type="success" :disabled="!row.isConfig" @click="handleSSH(row)">连接</el-button>
|
||||
</el-tooltip>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button type="primary" @click="handleUpdate(row)">配置</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button type="danger" @click="handleRemoveHost(row)">删除</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<template v-else>
|
||||
<el-tooltip
|
||||
:disabled="row.isConfig"
|
||||
effect="dark"
|
||||
content="请先配置ssh连接信息"
|
||||
placement="left"
|
||||
>
|
||||
<el-button type="success" :disabled="!row.isConfig" @click="handleSSH(row)">连接</el-button>
|
||||
</el-tooltip>
|
||||
<el-button type="primary" @click="handleUpdate(row)">配置</el-button>
|
||||
<el-button type="danger" @click="handleRemoveHost(row)">删除</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -100,6 +136,8 @@
|
||||
<script setup>
|
||||
import { ref, computed, getCurrentInstance, nextTick } from 'vue'
|
||||
import { Download, Upload } from '@element-plus/icons-vue'
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import useMobileWidth from '@/composables/useMobileWidth'
|
||||
|
||||
const { proxy: { $message, $messageBox, $api, $router, $tools } } = getCurrentInstance()
|
||||
|
||||
@ -112,6 +150,7 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['update-list', 'update-host', 'select-change',])
|
||||
|
||||
const { isMobileScreen } = useMobileWidth()
|
||||
let tableRef = ref(null)
|
||||
|
||||
let hosts = computed(() => {
|
||||
|
||||
@ -2029,6 +2029,11 @@ date-format@^4.0.14:
|
||||
resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.14.tgz#7a8e584434fb169a521c8b7aa481f355810d9400"
|
||||
integrity sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==
|
||||
|
||||
dayjs@^1.11.13:
|
||||
version "1.11.13"
|
||||
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
|
||||
integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
|
||||
|
||||
dayjs@^1.11.3:
|
||||
version "1.11.11"
|
||||
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user