feat(工具箱): 添加“保持亮屏”工具
This commit is contained in:
@@ -195,8 +195,19 @@ export const toolList = [
|
||||
{
|
||||
id: 'other-tools',
|
||||
title: '其他',
|
||||
enabled: false,
|
||||
enabled: true,
|
||||
items: [
|
||||
{
|
||||
id: 'keep-screen-on',
|
||||
component: 'Other/KeepScreenOn',
|
||||
title: '保持亮屏',
|
||||
iconClass: 'mdi mdi-monitor',
|
||||
desc: '保持屏幕开启,不息屏,不休眠',
|
||||
createdAt: '2024-10-13',
|
||||
updatedAt: '2024-10-13',
|
||||
version: '1',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'open-new-window',
|
||||
component: 'Other/OpenNewWindow',
|
||||
|
@@ -4,6 +4,36 @@ import {
|
||||
description as appDesc,
|
||||
} from '@package-json';
|
||||
|
||||
/** 将十六进制颜色值转为灰度值 */
|
||||
export function colorHexToGrayLevel(hex = '') {
|
||||
|
||||
let rgb = colorHexToRgb(hex);
|
||||
|
||||
return Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
|
||||
|
||||
}
|
||||
|
||||
/** 将十六进制颜色值转为 RGB */
|
||||
export function colorHexToRgb(hex = '') {
|
||||
|
||||
// 去除可能存在的 '#' 字符
|
||||
hex = hex.replace('#', '');
|
||||
|
||||
// 检查十六进制颜色值的长度,并根据长度决定如何处理
|
||||
if (hex.length === 3) {
|
||||
// 如果是简写形式,如 #FFF,需要将其转换为完整形式 #FFFFFF
|
||||
hex = hex.split('').map(char => char + char).join('');
|
||||
}
|
||||
|
||||
// 分别解析出红色、绿色和蓝色的值
|
||||
let r = parseInt(hex.slice(0, 2), 16);
|
||||
let g = parseInt(hex.slice(2, 4), 16);
|
||||
let b = parseInt(hex.slice(4, 6), 16);
|
||||
|
||||
return { r, g, b };
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 更新页面标题
|
||||
* @param {string} title
|
||||
|
221
src/views/ToolboxView/Other/KeepScreenOn.vue
Normal file
221
src/views/ToolboxView/Other/KeepScreenOn.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div
|
||||
ref="selfRef"
|
||||
class="tool-detail-page"
|
||||
:class="{
|
||||
'is-dark-color': isDarkColor,
|
||||
'is-faded': isFaded,
|
||||
'is-on': wakeLock.isActive.value,
|
||||
}"
|
||||
:style="{
|
||||
'--bg-color': bgColor,
|
||||
}"
|
||||
@click="isFaded = false"
|
||||
>
|
||||
<div class="controls">
|
||||
|
||||
<div class="title">开关 / Switch</div>
|
||||
|
||||
<n-switch
|
||||
:value="wakeLock.isActive.value"
|
||||
size="medium"
|
||||
:round="false"
|
||||
@update:value="handleToggleWakeLock"
|
||||
>
|
||||
<template #checked>开启</template>
|
||||
<template #unchecked>关闭</template>
|
||||
</n-switch>
|
||||
|
||||
<div class="title">背景颜色 / Background Color</div>
|
||||
|
||||
<n-color-picker
|
||||
v-model:value="bgColor"
|
||||
size="medium"
|
||||
:modes="['hex']"
|
||||
:show-preview="true"
|
||||
:swatches="[
|
||||
'#000000',
|
||||
'#252525',
|
||||
'#505050',
|
||||
'#808080',
|
||||
'#FFFFFF',
|
||||
]"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-show="fullscreen.isSupported"
|
||||
class="title"
|
||||
>切换全屏 / Toggle Fullscreen</div>
|
||||
|
||||
<n-switch
|
||||
v-show="fullscreen.isSupported"
|
||||
size="medium"
|
||||
:round="false"
|
||||
:value="fullscreen.isFullscreen.value"
|
||||
@update:value="handleToggleFullscreen"
|
||||
>
|
||||
<template #checked>开启</template>
|
||||
<template #unchecked>关闭</template>
|
||||
</n-switch>
|
||||
|
||||
<div class="title">隐藏界面 / Hide UI</div>
|
||||
|
||||
<n-switch
|
||||
v-model:value="isFaded"
|
||||
size="medium"
|
||||
:round="false"
|
||||
@click.stop
|
||||
>
|
||||
<template #checked>隐藏</template>
|
||||
<template #unchecked>显示</template>
|
||||
</n-switch>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
NColorPicker, NSwitch,
|
||||
} from 'naive-ui';
|
||||
|
||||
import {
|
||||
computed, ref, onBeforeUnmount,
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
useFullscreen, useWakeLock,
|
||||
} from '@vueuse/core';
|
||||
|
||||
import {
|
||||
$message,
|
||||
} from '@/assets/js/naive-ui';
|
||||
|
||||
import {
|
||||
colorHexToGrayLevel,
|
||||
} from '@/assets/js/utils';
|
||||
|
||||
/** 背景颜色 */
|
||||
const bgColor = ref('#505050');
|
||||
|
||||
/** 是否为深色 */
|
||||
const isDarkColor = computed(() => {
|
||||
|
||||
let color = bgColor.value;
|
||||
let level = colorHexToGrayLevel(color);
|
||||
|
||||
return level < 192;
|
||||
|
||||
});
|
||||
|
||||
/** 是否隐藏内容 */
|
||||
const isFaded = ref(false);
|
||||
|
||||
/**
|
||||
* @desc 自身元素 ref
|
||||
* @type {VueRef<HTMLElement>}
|
||||
*/
|
||||
const selfRef = ref(null);
|
||||
|
||||
/** 全屏控制 */
|
||||
const fullscreen = useFullscreen(selfRef, {
|
||||
autoExit: true,
|
||||
});
|
||||
|
||||
/** 唤醒锁 */
|
||||
const wakeLock = useWakeLock();
|
||||
|
||||
/** 处理切换全屏 */
|
||||
function handleToggleFullscreen() {
|
||||
fullscreen.toggle().then(() => {
|
||||
if (fullscreen.isFullscreen.value) {
|
||||
$message.success('进入全屏');
|
||||
} else {
|
||||
$message.success('退出全屏');
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error('切换全屏失败:',);
|
||||
console.error(error);
|
||||
$message.error('切换全屏失败');
|
||||
});
|
||||
}
|
||||
|
||||
/** 处理切换唤醒锁 */
|
||||
function handleToggleWakeLock(isActive = false) {
|
||||
|
||||
if (!wakeLock.isSupported) {
|
||||
$message.warning('当前浏览器不支持该功能');
|
||||
return Promise.resolve(false);
|
||||
}
|
||||
|
||||
if (isActive) {
|
||||
return wakeLock.request('screen').then(() => {
|
||||
$message.success('开启');
|
||||
}).catch((error) => {
|
||||
console.error('请求唤醒锁失败:',);
|
||||
console.error(error);
|
||||
$message.error('请求唤醒锁失败');
|
||||
});
|
||||
} else {
|
||||
return wakeLock.release().then(() => {
|
||||
$message.success('关闭');
|
||||
}).catch((error) => {
|
||||
console.error('释放唤醒锁失败:',);
|
||||
console.error(error);
|
||||
$message.error('释放唤醒锁失败');
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (wakeLock.isActive.value) {
|
||||
handleToggleWakeLock(false);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tool-detail-page {
|
||||
display: flex;
|
||||
background-color: inherit;
|
||||
transition: all 0.25s;
|
||||
user-select: none;
|
||||
|
||||
&.is-faded > * {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.is-on {
|
||||
background-color: var(--bg-color);
|
||||
|
||||
&.is-dark-color {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: auto;
|
||||
padding-bottom: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 48px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
:deep(.n-color-picker) {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
:deep(.n-color-picker-trigger__value) {
|
||||
color: transparent !important;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user