feat(工具箱): 添加“保持亮屏”工具
This commit is contained in:
@@ -195,8 +195,19 @@ export const toolList = [
|
|||||||
{
|
{
|
||||||
id: 'other-tools',
|
id: 'other-tools',
|
||||||
title: '其他',
|
title: '其他',
|
||||||
enabled: false,
|
enabled: true,
|
||||||
items: [
|
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',
|
id: 'open-new-window',
|
||||||
component: 'Other/OpenNewWindow',
|
component: 'Other/OpenNewWindow',
|
||||||
|
@@ -4,6 +4,36 @@ import {
|
|||||||
description as appDesc,
|
description as appDesc,
|
||||||
} from '@package-json';
|
} 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 更新页面标题
|
* @description 更新页面标题
|
||||||
* @param {string} title
|
* @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