You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
2.6 KiB
Vue
137 lines
2.6 KiB
Vue
<template>
|
|
<view class="page-container bg-white">
|
|
<view class="top-bar">
|
|
<tn-button
|
|
width="90px"
|
|
height="32px"
|
|
:plain="true"
|
|
text-color="#0099ff"
|
|
@click="goBack"
|
|
>
|
|
<uni-icons
|
|
type="arrow-left"
|
|
size="18"
|
|
color="#0099ff"
|
|
style="margin-right: 5px"
|
|
></uni-icons
|
|
>返回
|
|
</tn-button>
|
|
<text class="title">运行日志</text>
|
|
<tn-button
|
|
width="90px"
|
|
height="32px"
|
|
:plain="true"
|
|
text-color="#fa541c"
|
|
@click="handleClear"
|
|
>
|
|
清空日志
|
|
</tn-button>
|
|
</view>
|
|
|
|
<scroll-view
|
|
class="log-scroll"
|
|
scroll-y
|
|
:scroll-into-view="scrollIntoView"
|
|
scroll-with-animation
|
|
>
|
|
<text v-if="!logText" class="log-empty">暂无日志</text>
|
|
<text v-else class="log-text" selectable>{{ logText }}</text>
|
|
<view id="log-bottom" class="log-bottom"></view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { clearLogs, getLogsText } from '@/utils/appLog.js'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import { nextTick, ref } from 'vue'
|
|
|
|
const logText = ref('')
|
|
const scrollIntoView = ref('')
|
|
|
|
const refreshLogs = async () => {
|
|
logText.value = getLogsText()
|
|
scrollIntoView.value = ''
|
|
await nextTick()
|
|
scrollIntoView.value = 'log-bottom'
|
|
}
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack({
|
|
fail: () => {
|
|
uni.navigateTo({ url: '/pages/index/index' })
|
|
},
|
|
})
|
|
}
|
|
|
|
const handleClear = () => {
|
|
uni.showModal({
|
|
title: '清空日志',
|
|
content: '确认清空全部运行日志吗？',
|
|
success: (res) => {
|
|
if (!res.confirm) return
|
|
clearLogs()
|
|
refreshLogs()
|
|
uni.showToast({ title: '已清空', icon: 'none' })
|
|
},
|
|
})
|
|
}
|
|
|
|
onShow(() => {
|
|
refreshLogs()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-container {
|
|
min-height: var(--pad-h);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
.top-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: calc(6 * var(--pad-vh)) 20px 10px;
|
|
background: #fff;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #111827;
|
|
}
|
|
|
|
.log-scroll {
|
|
flex: 1;
|
|
height: 0;
|
|
margin: 12px;
|
|
padding: 12px;
|
|
background: #111827;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.log-text {
|
|
display: block;
|
|
color: #d1fae5;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
font-family: Consolas, Monaco, monospace;
|
|
}
|
|
|
|
.log-empty {
|
|
color: #9ca3af;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.log-bottom {
|
|
height: 1px;
|
|
}
|
|
</style>
|