style: 解决启动时部分行分隔符报 warning 的问题

来自 @woodlxl(小鹿)
This commit is contained in:
2023-06-28 22:49:58 +08:00
parent 9376d6fd5f
commit 39b0b9a48e
29 changed files with 659 additions and 302 deletions

View File

@@ -61,7 +61,9 @@
<a-table-column title="登录行为" data-index="description" />
<a-table-column title="登录状态" align="center">
<template #cell="{ record }">
<a-tag v-if="record.status === 1" color="green"><span class="circle pass" />成功</a-tag>
<a-tag v-if="record.status === 1" color="green"
><span class="circle pass" />成功</a-tag
>
<a-tooltip v-else :content="record.errorMsg">
<a-tag color="red" style="cursor: pointer">
<span class="circle fail" />失败
@@ -88,7 +90,9 @@
} from '@/api/monitor/log';
const { proxy } = getCurrentInstance() as any;
const { SuccessFailureStatusEnum } = proxy.useDict('SuccessFailureStatusEnum');
const { SuccessFailureStatusEnum } = proxy.useDict(
'SuccessFailureStatusEnum'
);
const loginLogList = ref<LoginLogRecord[]>([]);
const total = ref(0);

View File

@@ -72,7 +72,9 @@
<a-table-column title="所属模块" data-index="module" />
<a-table-column title="操作状态" align="center">
<template #cell="{ record }">
<a-tag v-if="record.status === 1" color="green"><span class="circle pass" />成功</a-tag>
<a-tag v-if="record.status === 1" color="green"
><span class="circle pass" />成功</a-tag
>
<a-tooltip v-else :content="record.errorMsg">
<a-tag color="red" style="cursor: pointer">
<span class="circle fail" />失败
@@ -98,7 +100,9 @@
} from '@/api/monitor/log';
const { proxy } = getCurrentInstance() as any;
const { SuccessFailureStatusEnum } = proxy.useDict('SuccessFailureStatusEnum');
const { SuccessFailureStatusEnum } = proxy.useDict(
'SuccessFailureStatusEnum'
);
const operationLogList = ref<OperationLogRecord[]>([]);
const total = ref(0);

View File

@@ -50,15 +50,27 @@
</a-table-column>
<a-table-column title="状态码" align="center">
<template #cell="{ record }">
<a-tag v-if="record.statusCode >= 400" color="red">{{ record.statusCode }}</a-tag>
<a-tag v-else-if="record.statusCode === 200" color="green">{{ record.statusCode }}</a-tag>
<a-tag v-if="record.statusCode >= 400" color="red">{{
record.statusCode
}}</a-tag>
<a-tag v-else-if="record.statusCode === 200" color="green">{{
record.statusCode
}}</a-tag>
<a-tag v-else color="orange">{{ record.statusCode }}</a-tag>
</template>
</a-table-column>
<a-table-column title="请求方式" align="center" data-index="requestMethod" />
<a-table-column
title="请求方式"
align="center"
data-index="requestMethod"
/>
<a-table-column title="请求 URI">
<template #cell="{ record }">
<span :title="decodeURIComponent(record.requestUrl)">{{ record.requestUrl.match(/(\w+):\/\/([^/:]+)(:\d*)?([^#|\?|\n]*)(\?.*)?/)[4] }}</span>
<span :title="decodeURIComponent(record.requestUrl)">{{
record.requestUrl.match(
/(\w+):\/\/([^/:]+)(:\d*)?([^#|\?|\n]*)(\?.*)?/
)[4]
}}</span>
</template>
</a-table-column>
<a-table-column title="客户端 IP" data-index="clientIp" />
@@ -66,18 +78,33 @@
<a-table-column title="浏览器" data-index="browser" />
<a-table-column title="请求耗时">
<template #cell="{ record }">
<a-tag v-if="record.elapsedTime > 500" color="red">{{ record.elapsedTime }} ms</a-tag>
<a-tag v-else-if="record.elapsedTime > 200" color="orange">{{ record.elapsedTime }} ms</a-tag>
<a-tag v-if="record.elapsedTime > 500" color="red"
>{{ record.elapsedTime }} ms</a-tag
>
<a-tag v-else-if="record.elapsedTime > 200" color="orange"
>{{ record.elapsedTime }} ms</a-tag
>
<a-tag v-else color="green">{{ record.elapsedTime }} ms</a-tag>
</template>
</a-table-column>
<a-table-column title="创建时间" data-index="createTime" />
<a-table-column title="操作" align="center">
<template #cell="{ record }">
<a-button type="text" size="small" title="查看详情" @click="toDetail(record.id)">
<a-button
type="text"
size="small"
title="查看详情"
@click="toDetail(record.id)"
>
<template #icon><icon-eye /></template>详情
</a-button>
<a-button v-if="record.exceptionDetail" type="text" size="small" title="查看异常详情" @click="toExceptionDetail(record)">
<a-button
v-if="record.exceptionDetail"
type="text"
size="small"
title="查看异常详情"
@click="toExceptionDetail(record)"
>
<template #icon><icon-bug /></template>异常
</a-button>
</template>
@@ -126,7 +153,9 @@
<a-tag v-else-if="systemLog.elapsedTime > 200" color="orange">
{{ systemLog.elapsedTime }} ms
</a-tag>
<a-tag v-else color="green">{{ systemLog.elapsedTime }} ms</a-tag>
<a-tag v-else color="green"
>{{ systemLog.elapsedTime }} ms</a-tag
>
</span>
</a-descriptions-item>
<a-descriptions-item label="创建时间">
@@ -136,14 +165,23 @@
<span v-else>{{ systemLog.createTime }}</span>
</a-descriptions-item>
</a-descriptions>
<a-descriptions title="协议信息" :column="2" bordered style="margin-top: 25px">
<a-descriptions
title="协议信息"
:column="2"
bordered
style="margin-top: 25px"
>
<a-descriptions-item label="状态码">
<a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :rows="1" />
</a-skeleton>
<span v-else>
<a-tag v-if="systemLog.statusCode >= 400" color="red">{{ systemLog.statusCode }}</a-tag>
<a-tag v-else-if="systemLog.statusCode === 200" color="green">{{ systemLog.statusCode }}</a-tag>
<a-tag v-if="systemLog.statusCode >= 400" color="red">{{
systemLog.statusCode
}}</a-tag>
<a-tag v-else-if="systemLog.statusCode === 200" color="green">{{
systemLog.statusCode
}}</a-tag>
<a-tag v-else color="orange">{{ systemLog.statusCode }}</a-tag>
</span>
</a-descriptions-item>
@@ -168,7 +206,8 @@
v-if="systemLog.responseBody"
:path="'res'"
:data="JSON.parse(systemLog.responseBody)"
:show-length="true" />
:show-length="true"
/>
<span v-else></span>
</a-space>
</a-descriptions-item>
@@ -181,7 +220,8 @@
v-if="systemLog.responseHeaders"
:path="'res'"
:data="JSON.parse(systemLog.responseHeaders)"
:show-length="true" />
:show-length="true"
/>
<span v-else></span>
</a-space>
</a-descriptions-item>
@@ -194,7 +234,8 @@
v-if="systemLog.requestBody"
:path="'res'"
:data="JSON.parse(systemLog.requestBody)"
:show-length="true" />
:show-length="true"
/>
<span v-else></span>
</a-space>
</a-descriptions-item>
@@ -206,7 +247,8 @@
<VueJsonPretty
v-if="systemLog.requestHeaders"
:data="JSON.parse(systemLog.requestHeaders)"
:show-length="true" />
:show-length="true"
/>
<span v-else></span>
</a-space>
</a-descriptions-item>

View File

@@ -12,7 +12,7 @@
v-model="queryParams.nickname"
placeholder="输入用户昵称搜索"
allow-clear
style="width: 150px;"
style="width: 150px"
@press-enter="handleQuery"
/>
</a-form-item>
@@ -59,22 +59,34 @@
</a-table-column>
<a-table-column title="用户昵称">
<template #cell="{ record }">
{{ record.nickname }}{{record.username}}
{{ record.nickname }}{{ record.username }}
</template>
</a-table-column>
<a-table-column title="登录 IP" data-index="clientIp" />
<a-table-column title="登录地点" data-index="location" />
<a-table-column title="浏览器" data-index="browser" />
<a-table-column title="登录时间" data-index="loginTime" />
<a-table-column v-if="checkPermission(['monitor:online:user:delete'])" title="操作" align="center">
<a-table-column
v-if="checkPermission(['monitor:online:user:delete'])"
title="操作"
align="center"
>
<template #cell="{ record }">
<a-popconfirm content="确定要强退该用户吗?" type="warning" @ok="handleKickout(record.token)">
<a-popconfirm
content="确定要强退该用户吗?"
type="warning"
@ok="handleKickout(record.token)"
>
<a-button
v-permission="['monitor:online:user:delete']"
type="text"
size="small"
:disabled="currentToken === record.token"
:title="currentToken === record.token ? '不能强退当前登录用户' : '强退'"
:title="
currentToken === record.token
? '不能强退当前登录用户'
: '强退'
"
>
<template #icon><icon-delete /></template>强退
</a-button>
@@ -124,12 +136,14 @@
*/
const getList = (params: OnlineUserParam = { ...queryParams.value }) => {
loading.value = true;
listOnlineUser(params).then((res) => {
onlineUserList.value = res.data.list;
total.value = res.data.total;
}).finally(() => {
loading.value = false;
});
listOnlineUser(params)
.then((res) => {
onlineUserList.value = res.data.list;
total.value = res.data.total;
})
.finally(() => {
loading.value = false;
});
};
getList();