feat(sidebar): add volume control

This commit is contained in:
AkiChase 2024-04-18 16:05:34 +08:00
parent 3f50553ced
commit 86594363f5

View File

@ -5,11 +5,13 @@ import {
LogoAndroid, LogoAndroid,
SettingsOutline, SettingsOutline,
ReturnDownBackOutline, ReturnDownBackOutline,
VolumeHighOutline,
VolumeLowOutline,
StopOutline, StopOutline,
ListOutline, ListOutline,
} from "@vicons/ionicons5"; } from "@vicons/ionicons5";
import { Keyboard24Regular } from "@vicons/fluent"; import { Keyboard24Regular } from "@vicons/fluent";
import { NIcon } from "naive-ui"; import { NIcon, useMessage } from "naive-ui";
import { useGlobalStore } from "../store/global"; import { useGlobalStore } from "../store/global";
import { sendInjectKeycode } from "../frontcommand/controlMsg"; import { sendInjectKeycode } from "../frontcommand/controlMsg";
import { import {
@ -21,6 +23,7 @@ import {
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const store = useGlobalStore(); const store = useGlobalStore();
const message = useMessage();
function nav(name: string) { function nav(name: string) {
router.replace({ name }); router.replace({ name });
@ -49,6 +52,8 @@ async function sendKeyCodeToDevice(code: AndroidKeycode) {
repeat: 0, repeat: 0,
metastate: AndroidMetastate.AMETA_NONE, metastate: AndroidMetastate.AMETA_NONE,
}); });
} else {
message.error("未连接设备");
} }
} }
</script> </script>
@ -83,6 +88,16 @@ async function sendKeyCodeToDevice(code: AndroidKeycode) {
</div> </div>
<div class="nav"> <div class="nav">
<div @click="sendKeyCodeToDevice(AndroidKeycode.AKEYCODE_VOLUME_UP)">
<NIcon>
<VolumeHighOutline />
</NIcon>
</div>
<div @click="sendKeyCodeToDevice(AndroidKeycode.AKEYCODE_VOLUME_DOWN)">
<NIcon>
<VolumeLowOutline />
</NIcon>
</div>
<div @click="sendKeyCodeToDevice(AndroidKeycode.AKEYCODE_BACK)"> <div @click="sendKeyCodeToDevice(AndroidKeycode.AKEYCODE_BACK)">
<NIcon> <NIcon>
<ReturnDownBackOutline /> <ReturnDownBackOutline />
@ -173,16 +188,14 @@ async function sendKeyCodeToDevice(code: AndroidKeycode) {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.NIcon { cursor: pointer;
cursor: pointer; transition: transform 0.3s ease;
transition: transform 0.3s ease;
}
.NIcon:hover { &:hover {
color: var(--primary-hover-color); color: var(--primary-hover-color);
transform: scale(1.1); transform: scale(1.1);
} }
.NIcon:active { &:active {
color: var(--primary-pressed-color); color: var(--primary-pressed-color);
transform: scale(0.9); transform: scale(0.9);
} }