rm-rf/uniapp/components/dev/dev.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年8月14日 06:57:50
	 */
	import {
		ref
	} from 'vue'
	import {
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const clicks = ref(0);
	const env = ref(process.env.NODE_ENV)
	const last_click_time = ref(0);
	const magicButtonClick = () => {
		const current_time = new Date().getTime();
		if (current_time - last_click_time.value <= 1000) {
			clicks.value++;
		} else {
			clicks.value = 1;
		}
		last_click_time.value = current_time;
		if (clicks.value === 10) {
			magic_popup_ref.value.open()
			clicks.value = 0;
		}
	}
	const quitDevClick = () => {
		quit_popup_ref.value.open()
	}
	const magic_popup_ref = ref(null)
	const magicPopupRef = (e) => {
		magic_popup_ref.value = e
	}
	const quit_popup_ref = ref(null)
	const quitPopupRef = (e) => {
		quit_popup_ref.value = e
	}

	const magicConfirmClick = () => {
		uni.setStorageSync(dev_status_key, '1')
		uni.reLaunch({
			url: '/pages/main/index/index'
		})
	}

	const quitConfirmClick = () => {
		uni.setStorageSync(dev_status_key, '0')
		uni.reLaunch({
			url: '/pages/main/index/index'
		})
	}
	const dev_status_key = 'DEV_STATUS'
	const dev_status = ref(2)
	const checkDevStatus = () => {
		const status = uni.getStorageSync(dev_status_key)
		dev_status.value = Number(!!status ? status : '0')
	}
	const devStatusChangeClick = () => {
		dev_status.value = dev_status.value === 1 ? 2 : 1
	}

	const jumpTo = (url) => {
		uni.navigateTo({
			url
		})
	}

	onShow(() => {
		checkDevStatus()
	})
</script>
<template>
	<view class="dev_wrapper">
		<uni-popup :ref="magicPopupRef" type="dialog">
			<uni-popup-dialog type="error" cancelText="取消" confirmText="重启" title="提示" content="点击重启进入开发者模式"
				@confirm="magicConfirmClick()"></uni-popup-dialog>
		</uni-popup>

		<uni-popup :ref="quitPopupRef" type="dialog">
			<uni-popup-dialog type="error" cancelText="取消" confirmText="确定" title="提示" content="点击确认退出开发者模式"
				@confirm="quitConfirmClick()"></uni-popup-dialog>
		</uni-popup>

		<view v-if="Number(dev_status) === 0" @click="magicButtonClick()" class="dev_magic_button_wrapper" :style="{
			background: env === 'development' ? '#000000' : '#00000000'
		}">
		</view>
		<view v-else class="dev_box_wrapper" :style="{
			width: Number(dev_status) === 1  ? '80rpx' : '730rpx',
			height:  Number(dev_status) === 1  ? '80rpx' : '400rpx',
		}">
			<view @click="devStatusChangeClick()" class="dev_button_wrapper">
				<uni-icons v-if="Number(dev_status) === 1" type="tune" size="40rpx"></uni-icons>
				<uni-icons v-else type="closeempty" size="40rpx"></uni-icons>
			</view>

			<view v-if="Number(dev_status) === 2" class="dev_panel_wrapper">
				<view @click="jumpTo('/pages/dev/example/example?name=yo')" class="dev_button_item_wrapper">示例</view>
				<view @click="jumpTo('/pages/dev/proxy/proxy')" class="dev_button_item_wrapper">代理设置</view>
				<view @click="quitDevClick()" class="dev_button_item_wrapper">退出开发者模式</view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.dev_panel_wrapper {
		height: calc(100% - 100rpx);
		overflow-y: auto;
	}

	.dev_button_item_wrapper {
		width: 600rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin: 15rpx auto;
		background: #f9f9f9;
		font-size: 26rpx;
		font-weight: bold;
		border-radius: 6rpx;
	}

	.dev_wrapper {
		position: relative;
		z-index: 10;
	}

	.dev_button_wrapper {
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.dev_box_wrapper {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		bottom: 10rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 10rpx;
		/* #endif */
		left: 10rpx;
		width: 80rpx;
		height: 80rpx;
		background: #ffffff;
		border-radius: 10rpx;
		text-align: center;
		transition: all 0.5s ease-in-out;
		overflow: hidden;
	}

	.dev_magic_button_wrapper {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		bottom: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 0;
		/* #endif */
		left: 0;
		width: 30rpx;
		height: 30rpx;
	}
</style>