boschchina-wechat-crm/pages/test/debug.vue

<template>
	<view class="test-container">
		<text class="title">调试工具</text>
		
		<!-- 缓存信息展示 -->
		<view class="section">
			<text class="section-title">当前缓存状态</text>
			<view class="info-card">
				<view class="info-row">
					<text class="label">是否登录:</text>
					<text class="value" :class="{ success: isLogined, error: !isLogined }">
						{{ isLogined ? '已登录' : '未登录' }}
					</text>
				</view>
				<view class="info-row">
					<text class="label">Token:</text>
					<text class="value token">{{ tokenDisplay }}</text>
				</view>
				<view class="info-row">
					<text class="label">用户信息:</text>
					<text class="value">{{ userInfoDisplay }}</text>
				</view>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="section">
			<text class="section-title">操作</text>
			
			<button class="action-btn" @click="simulateLogin">模拟登录</button>
			<button class="action-btn warn" @click="clearCache">清除缓存</button>
			<button class="action-btn" @click="refreshStatus">刷新状态</button>
			<button class="action-btn" @click="gotoSplash">跳转到启动页</button>
			<button class="action-btn" @click="gotoLogin">跳转到登录页</button>
			<button class="action-btn" @click="gotoHome">跳转到首页</button>
		</view>
		
		<!-- 日志区域 -->
		<view class="section">
			<text class="section-title">操作日志</text>
			<scroll-view scroll-y class="log-box">
				<view v-for="(log, index) in logs" :key="index" class="log-item">
					<text class="log-time">{{ log.time }}</text>
					<text class="log-text">{{ log.text }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getUserInfo, getToken, isLogin, saveUserInfo, clearUserInfo } from '@/utils/userCache.js'

const logs = ref([])

const isLogined = ref(false)
const tokenDisplay = ref('无')
const userInfoDisplay = ref('无')

// 刷新状态
const refreshStatus = () => {
	isLogined.value = isLogin()
	const token = getToken()
	tokenDisplay.value = token ? token.substring(0, 20) + '...' : '无'
	
	const userInfo = getUserInfo()
	if (userInfo) {
		userInfoDisplay.value = JSON.stringify(userInfo)
	} else {
		userInfoDisplay.value = '无'
	}
	
	addLog('状态已刷新')
}

// 添加日志
const addLog = (text) => {
	const now = new Date()
	const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
	logs.value.unshift({ time, text })
	
	// 只保留最近 20 条
	if (logs.value.length > 20) {
		logs.value.pop()
	}
}

// 模拟登录
const simulateLogin = () => {
	const mockUserInfo = {
		id: 'test_user_001',
		nickname: '测试用户',
		phone: '13800138000',
		avatar: ''
	}
	const mockToken = 'mock_token_' + Date.now()
	
	const success = saveUserInfo(mockUserInfo, mockToken)
	if (success) {
		addLog('模拟登录成功')
		refreshStatus()
		
		uni.showToast({
			title: '模拟登录成功',
			icon: 'success'
		})
	} else {
		addLog('模拟登录失败')
	}
}

// 清除缓存
const clearCache = () => {
	uni.showModal({
		title: '提示',
		content: '确定要清除缓存吗？',
		success: (res) => {
			if (res.confirm) {
				clearUserInfo()
				addLog('缓存已清除')
				refreshStatus()
				
				uni.showToast({
					title: '已清除',
					icon: 'success'
				})
			}
		}
	})
}

// 跳转
const gotoSplash = () => {
	addLog('跳转到启动页')
	uni.reLaunch({
		url: '/pages/splash/splash'
	})
}

const gotoLogin = () => {
	addLog('跳转到登录页')
	uni.navigateTo({
		url: '/pages/login/login'
	})
}

const gotoHome = () => {
	addLog('跳转到首页')
	uni.navigateTo({
		url: '/pages/index/index'
	})
}

onMounted(() => {
	addLog('调试工具已加载')
	refreshStatus()
})
</script>

<style lang="scss" scoped>
.test-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 40rpx;
}

.title {
	font-size: 40rpx;
	font-weight: 600;
	color: #333;
	display: block;
	text-align: center;
	margin-bottom: 40rpx;
}

.section {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	
	.section-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 24rpx;
	}
}

.info-card {
	background-color: #f9f9f9;
	border-radius: 12rpx;
	padding: 24rpx;
	
	.info-row {
		display: flex;
		margin-bottom: 16rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.label {
			font-size: 26rpx;
			color: #666;
			width: 160rpx;
			flex-shrink: 0;
		}
		
		.value {
			font-size: 26rpx;
			color: #333;
			flex: 1;
			word-break: break-all;
			
			&.success {
				color: #52c41a;
			}
			
			&.error {
				color: #ff4d4f;
			}
			
			&.token {
				font-family: monospace;
				background-color: #f0f0f0;
				padding: 4rpx 12rpx;
				border-radius: 8rpx;
			}
		}
	}
}

.action-btn {
	width: 100%;
	height: 80rpx;
	background-color: #1890ff;
	color: #ffffff;
	font-size: 28rpx;
	border-radius: 12rpx;
	margin-bottom: 16rpx;
	border: none;
	
	&::after {
		border: none;
	}
	
	&.warn {
		background-color: #ff4d4f;
	}
}

.log-box {
	height: 400rpx;
	background-color: #1e1e1e;
	border-radius: 12rpx;
	padding: 20rpx;
	
	.log-item {
		display: flex;
		margin-bottom: 12rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.log-time {
			font-size: 22rpx;
			color: #888;
			font-family: monospace;
			margin-right: 16rpx;
		}
		
		.log-text {
			font-size: 24rpx;
			color: #fff;
			flex: 1;
		}
	}
}
</style>