refactor(页面布局): 重构页面布局和样式
- 移除未使用的HTML文件和冗余代码 - 调整侧边栏位置和样式 - 优化标签云组件交互和性能 - 更新播放器控件样式和功能 - 改进预览弹窗的背景透明度 - 添加favicon图标
This commit is contained in:
DESKTOP-RQ919RC\Pc
343
static/js/song-request-station.js
Normal file
343
static/js/song-request-station.js
Normal file
@@ -0,0 +1,343 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
|
||||
const search = createApp({
|
||||
setup() {
|
||||
// 标签数据
|
||||
let tags = ref([]);
|
||||
let tagsFill = ref([]);
|
||||
|
||||
// 获取容器
|
||||
const containerFill = ref(null);
|
||||
const container = ref(null);
|
||||
|
||||
// 计算容器尺寸
|
||||
const getContainerDimensions = () => {
|
||||
const containerWidth = container.value.offsetWidth;
|
||||
const containerHeight = container.value.offsetHeight;
|
||||
return { containerWidth, containerHeight };
|
||||
};
|
||||
|
||||
// 初始创建标签
|
||||
const init = () => {
|
||||
fetch("./static/js/music.json")
|
||||
.then((response) => {
|
||||
if (!response.ok) throw new Error(`请求失败：${response.status}`);
|
||||
|
||||
// 将响应解析为 JSON 格式
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
// 成功获取 JSON 数据，后续处理（如使用 tags 数组）
|
||||
console.log("读取到的 JSON 数据：", data);
|
||||
// data.data.length = 1
|
||||
let tagsData = data.data || []; // 提取 tags 数组
|
||||
console.log("tagsData", tagsData);
|
||||
|
||||
const { containerWidth, containerHeight } = getContainerDimensions();
|
||||
|
||||
const redCount = Math.min(5, tagsData.length);
|
||||
const redIndexes = [];
|
||||
while (redIndexes.length < redCount) {
|
||||
const randomIdx = Math.floor(Math.random() * tagsData.length);
|
||||
if (!redIndexes.includes(randomIdx)) redIndexes.push(randomIdx);
|
||||
}
|
||||
|
||||
tagsData.forEach((item, index) => {
|
||||
item["type"] = getRandomOutcome();
|
||||
if (redIndexes.includes(index)) item["isred"] = 1;
|
||||
});
|
||||
|
||||
tags.value = tagsData;
|
||||
|
||||
const fillLength = tags.value.length * 1.5;
|
||||
let tagAll = [];
|
||||
for (let i = 0; i < fillLength; i++) {
|
||||
tagAll.push({
|
||||
type: Math.floor(Math.random() * 5) + 1,
|
||||
});
|
||||
}
|
||||
|
||||
tagsFill.value = tagAll;
|
||||
|
||||
nextTick(() => {
|
||||
tagCloud({
|
||||
selector: "#bubbleContainerFill", // 元素选择器，id 或 class
|
||||
radius: [containerWidth / 2, containerHeight / 2], // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60]
|
||||
mspeed: "normal", // 滚动最大速度, 取值: slow, normal(默认), fast
|
||||
ispeed: "slow", // 滚动初速度, 取值: slow, normal(默认), fast
|
||||
direction: 45, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
|
||||
keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
|
||||
multicolour: false, // 彩色字体，颜色随机，取值：true(默认),false
|
||||
});
|
||||
|
||||
tagCloud({
|
||||
selector: "#bubbleContainer", // 元素选择器，id 或 class
|
||||
radius: [containerWidth / 2, containerHeight / 2],
|
||||
mspeed: "normal",
|
||||
ispeed: "normal",
|
||||
direction: 135,
|
||||
keep: false,
|
||||
multicolour: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 生成单次随机结果的函数
|
||||
const getRandomOutcome = () => {
|
||||
const random = Math.random(); // 生成0-1之间的随机数
|
||||
let cumulativeProbability = 0;
|
||||
const outcomes = [0.1, 0.2, 0.3, 0.4];
|
||||
|
||||
for (const outcome of outcomes) {
|
||||
cumulativeProbability += outcome;
|
||||
if (random < cumulativeProbability) {
|
||||
return outcomes.indexOf(outcome) + 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
|
||||
// 添加进度更新事件监听器
|
||||
if (audioPlayer.value) {
|
||||
volume.value = audioPlayer.value.volume * 100;
|
||||
audioPlayer.value.addEventListener("timeupdate", getProgress);
|
||||
audioPlayer.value.addEventListener("loadedmetadata", getProgress);
|
||||
}
|
||||
});
|
||||
|
||||
// 组件卸载时清理事件监听器
|
||||
onUnmounted(() => {
|
||||
audioPlayer?.value?.removeEventListener("timeupdate", getProgress);
|
||||
audioPlayer?.value?.removeEventListener("loadedmetadata", getProgress);
|
||||
});
|
||||
|
||||
const handleMouseleave = (e) => {
|
||||
e.target.style.animationPlayState = "running";
|
||||
};
|
||||
|
||||
const handleMouseenter = (e) => {
|
||||
e.target.style.animationPlayState = "paused";
|
||||
};
|
||||
|
||||
const audioPlayer = ref(null);
|
||||
|
||||
const clickSongs = (songs) => {
|
||||
console.log("songs", songs.length);
|
||||
const randomIndex = Math.floor(Math.random() * songs.length);
|
||||
const item = songs[randomIndex];
|
||||
console.log("随机选择的 item:", item);
|
||||
manageAudio(item);
|
||||
};
|
||||
|
||||
// 管理音频播放
|
||||
const manageAudio = (item) => {
|
||||
const audio = audioPlayer.value;
|
||||
closeAll();
|
||||
setTimeout(() => {
|
||||
if (audio?.src != item.path) audio.src = item.path;
|
||||
|
||||
// audio.src = "https://app.gter.net/image/miniApp/mp3/1.mp3";
|
||||
audio.play().then(() => {
|
||||
playData.value = { ...item, state: true };
|
||||
});
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// 重新播放
|
||||
const rePlay = () => {
|
||||
if (!playData.value) return;
|
||||
const item = playData.value;
|
||||
manageAudio(item);
|
||||
};
|
||||
|
||||
// 播放 组件数据
|
||||
let playData = ref(null);
|
||||
|
||||
// 响应式数据：音量值、是否静音
|
||||
let volume = ref(100);
|
||||
|
||||
// 计算并设置音量百分比
|
||||
const setVolumePercentage = (percentage) => {
|
||||
const volumePercent = Math.max(0, Math.min(100, percentage));
|
||||
volume.value = Math.abs(~~volumePercent);
|
||||
|
||||
// 设置音频元素的音量（范围是0-1）
|
||||
if (audioPlayer.value) audioPlayer.value.volume = volume.value / 100;
|
||||
};
|
||||
|
||||
// 处理音量进度条点击
|
||||
const handleVolumeClick = (event) => {
|
||||
// 获取进度条元素
|
||||
const progressBar = event.currentTarget;
|
||||
const rect = progressBar.getBoundingClientRect();
|
||||
|
||||
const clickPosition = rect.bottom - event.clientY;
|
||||
const percentage = (clickPosition / rect.height) * 100;
|
||||
|
||||
setVolumePercentage(percentage);
|
||||
};
|
||||
|
||||
let volumeShow = ref(false);
|
||||
// 处理音量进度条拖拽
|
||||
let isDragging = false;
|
||||
|
||||
const startDrag = (event) => {
|
||||
isDragging = true;
|
||||
handleVolumeDrag(event);
|
||||
// 添加事件监听器
|
||||
document.addEventListener("mousemove", handleVolumeDrag);
|
||||
document.addEventListener("mouseup", stopDrag);
|
||||
};
|
||||
|
||||
const handleVolumeDrag = (event) => {
|
||||
if (!isDragging) return;
|
||||
|
||||
// 获取音量进度条元素
|
||||
const progressBar = document.querySelector(".sound-control .progress");
|
||||
if (!progressBar) return;
|
||||
|
||||
const rect = progressBar.getBoundingClientRect();
|
||||
|
||||
// 计算拖拽位置相对于进度条的比例
|
||||
let dragPosition = rect.bottom - event.clientY;
|
||||
// 限制在进度条范围内
|
||||
dragPosition = Math.max(0, Math.min(dragPosition, rect.height));
|
||||
|
||||
const percentage = (dragPosition / rect.height) * 100;
|
||||
setVolumePercentage(percentage);
|
||||
};
|
||||
|
||||
const stopDrag = () => {
|
||||
isDragging = false;
|
||||
document.removeEventListener("mousemove", handleVolumeDrag);
|
||||
document.removeEventListener("mouseup", stopDrag);
|
||||
};
|
||||
|
||||
const handleVolumeShow = () => (volumeShow.value = true);
|
||||
|
||||
const handleVolumeHide = () => (volumeShow.value = false);
|
||||
|
||||
onUnmounted(() => {
|
||||
// 确保移除所有拖拽相关事件
|
||||
document.removeEventListener("mousemove", handleVolumeDrag);
|
||||
document.removeEventListener("mouseup", stopDrag);
|
||||
document.removeEventListener("mousemove", handleBarDragBottomDrag);
|
||||
document.removeEventListener("mouseup", stopBarDragBottom);
|
||||
});
|
||||
|
||||
const progress = ref(0); // 播放进度百分比
|
||||
// 响应式变量存储当前播放时间和总时长
|
||||
const currentTimeFormatted = ref("00:00");
|
||||
const durationFormatted = ref("00:00");
|
||||
|
||||
// 格式化时间函数：将秒数转换为 MM:SS 格式
|
||||
const formatTime = (seconds) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
// 更新进度的函数
|
||||
const getProgress = () => {
|
||||
if (!audioPlayer.value) return;
|
||||
const currentTime = audioPlayer.value.currentTime || 0;
|
||||
const duration = audioPlayer.value.duration || 0;
|
||||
const p = duration > 0 ? (currentTime / duration) * 100 : 0;
|
||||
|
||||
progress.value = p;
|
||||
// 更新时间显示
|
||||
currentTimeFormatted.value = formatTime(currentTime);
|
||||
durationFormatted.value = formatTime(duration);
|
||||
|
||||
console.log("p", p);
|
||||
};
|
||||
|
||||
// 快进 和 后退 10秒
|
||||
const fastForward = (type = "fast") => {
|
||||
if (!audioPlayer.value) return;
|
||||
const src = playData.value?.playurl || "";
|
||||
const area = playData.value?.area || "";
|
||||
|
||||
if (audioPlayer.value.src != src) {
|
||||
manageAudio(src, area);
|
||||
return;
|
||||
}
|
||||
|
||||
let currentTime = audioPlayer.value.currentTime || 0;
|
||||
const duration = audioPlayer.value.duration || 0;
|
||||
let newTime = 0;
|
||||
if (type == "fast") newTime = Math.min(currentTime + 10, duration);
|
||||
else newTime = Math.max(currentTime - 10, 0);
|
||||
audioPlayer.value.currentTime = newTime;
|
||||
getProgress();
|
||||
};
|
||||
|
||||
// 关闭所有播放
|
||||
const closeAll = () => {
|
||||
audioPlayer.value.pause();
|
||||
|
||||
playData.value && (playData.value.state = false);
|
||||
};
|
||||
|
||||
// 处理音量进度条拖拽
|
||||
let isBarBottomDragging = false;
|
||||
|
||||
const startBarDragBottom = (event) => {
|
||||
isBarBottomDragging = true;
|
||||
handleBarDragBottomDrag(event);
|
||||
// 添加事件监听器
|
||||
document.addEventListener("mousemove", handleBarDragBottomDrag);
|
||||
document.addEventListener("mouseup", stopBarDragBottom);
|
||||
};
|
||||
|
||||
const stopBarDragBottom = () => {
|
||||
isBarBottomDragging = false;
|
||||
document.removeEventListener("mousemove", handleBarDragBottomDrag);
|
||||
document.removeEventListener("mouseup", stopBarDragBottom);
|
||||
};
|
||||
|
||||
// 直接点击进度条 跳转
|
||||
const handleBarDragBottomClick = (event) => {
|
||||
// 获取进度条元素
|
||||
const progressBar = event.currentTarget;
|
||||
const rect = progressBar.getBoundingClientRect();
|
||||
const clickPosition = event.clientX - rect.left;
|
||||
const percentage = clickPosition / rect.width;
|
||||
|
||||
// 限制百分比在0-100之间
|
||||
const clampedPercentage = Math.max(0, Math.min(100, percentage));
|
||||
updatePlay(clampedPercentage);
|
||||
};
|
||||
|
||||
const handleBarDragBottomDrag = (event) => {
|
||||
if (!isBarBottomDragging) return;
|
||||
|
||||
// 获取音量进度条元素
|
||||
const progressBar = document.querySelector(".bottom-play .middle .progress-bar");
|
||||
if (!progressBar) return;
|
||||
|
||||
const rect = progressBar.getBoundingClientRect();
|
||||
|
||||
// 计算拖拽位置相对于进度条的比例
|
||||
let dragPosition = event.clientX - rect.left;
|
||||
// 限制在进度条范围内
|
||||
dragPosition = Math.max(0, Math.min(dragPosition, rect.width));
|
||||
|
||||
const percentage = dragPosition / rect.width;
|
||||
updatePlay(percentage);
|
||||
};
|
||||
|
||||
const updatePlay = (percentage) => {
|
||||
if (!audioPlayer.value) return;
|
||||
const duration = audioPlayer.value.duration || 0;
|
||||
let newTime = duration * percentage;
|
||||
newTime = Math.max(0, Math.min(duration, newTime));
|
||||
audioPlayer.value.currentTime = newTime;
|
||||
getProgress();
|
||||
};
|
||||
|
||||
return { handleBarDragBottomClick, closeAll, fastForward, progress, durationFormatted, currentTimeFormatted, rePlay, handleVolumeHide, handleVolumeShow, stopDrag, handleVolumeDrag, startDrag, volumeShow, handleVolumeClick, setVolumePercentage, volume, audioPlayer, playData, handleMouseleave, handleMouseenter, clickSongs, tags, tagsFill, containerFill, container };
|
||||
},
|
||||
}).mount("#song-request-station");
|
||||
Reference in New Issue
Block a user