Add files via upload

This commit is contained in:
Cola-Echo
2025-12-23 15:20:30 +08:00
committed by GitHub
parent 1fe6d34355
commit 3824a441f6
6 changed files with 75 additions and 464 deletions

View File

@@ -677,10 +677,6 @@ function handleFuncItemClick(func) {
showTransferPage();
}
return;
case 'time':
hideFuncPanel();
showTimePicker();
return;
case 'listen':
hideFuncPanel();
// 群聊不支持一起听
@@ -758,194 +754,5 @@ export function initFuncPanel() {
// 初始化音乐面板事件
initMusicEvents();
initMusicShareListener();
initTimePickerEvents();
initListenTogether();
}
// ============ 时间选择器相关 ============
// 存储选择的时间null 表示使用当前时间)
let selectedTime = null;
let timePickerInited = false;
// 时间选择器当前选中的值
let pickerValues = {
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
day: new Date().getDate(),
hour: new Date().getHours(),
minute: new Date().getMinutes(),
second: new Date().getSeconds()
};
// 获取选择的时间(供 chat.js 使用)
export function getSelectedTime() {
return selectedTime;
}
// 清除选择的时间
export function clearSelectedTime() {
selectedTime = null;
updateTimeIndicator();
}
// 显示时间选择器
function showTimePicker() {
const picker = document.getElementById('wechat-time-picker');
if (!picker) return;
// 初始化为当前时间
const now = new Date();
pickerValues = {
year: now.getFullYear(),
month: now.getMonth() + 1,
day: now.getDate(),
hour: now.getHours(),
minute: now.getMinutes(),
second: now.getSeconds()
};
renderTimePickerColumns();
updateTimePickerDisplay();
picker.classList.remove('hidden');
}
// 隐藏时间选择器
function hideTimePicker() {
const picker = document.getElementById('wechat-time-picker');
picker?.classList.add('hidden');
}
// 渲染时间选择器列
function renderTimePickerColumns() {
const currentYear = new Date().getFullYear();
// 年份前后5年
renderPickerColumn('year', currentYear - 5, currentYear + 5, pickerValues.year, '年');
// 月份1-12
renderPickerColumn('month', 1, 12, pickerValues.month, '月');
// 日期:根据年月动态计算
const daysInMonth = new Date(pickerValues.year, pickerValues.month, 0).getDate();
renderPickerColumn('day', 1, daysInMonth, pickerValues.day, '日');
// 小时0-23
renderPickerColumn('hour', 0, 23, pickerValues.hour, '时');
// 分钟0-59
renderPickerColumn('minute', 0, 59, pickerValues.minute, '分');
// 秒0-59
renderPickerColumn('second', 0, 59, pickerValues.second, '秒');
}
// 渲染单个列
function renderPickerColumn(type, min, max, selected, suffix) {
const container = document.getElementById(`wechat-time-picker-${type}`);
if (!container) return;
let html = '';
for (let i = min; i <= max; i++) {
const value = type === 'year' ? i : i.toString().padStart(2, '0');
const isSelected = i === selected;
html += `<div class="wechat-time-picker-item${isSelected ? ' selected' : ''}" data-value="${i}">${value}${suffix}</div>`;
}
container.innerHTML = html;
// 滚动到选中项
setTimeout(() => {
const selectedItem = container.querySelector('.selected');
if (selectedItem) {
container.scrollTop = selectedItem.offsetTop - container.offsetHeight / 2 + selectedItem.offsetHeight / 2;
}
}, 0);
}
// 更新显示的时间
function updateTimePickerDisplay() {
const display = document.getElementById('wechat-time-picker-display');
if (!display) return;
const { year, month, day, hour, minute, second } = pickerValues;
display.textContent = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
}
// 更新输入框旁的时间指示器
function updateTimeIndicator() {
let indicator = document.getElementById('wechat-time-indicator');
if (!selectedTime) {
indicator?.remove();
return;
}
if (!indicator) {
const inputArea = document.querySelector('.wechat-chat-input-area');
if (!inputArea) return;
indicator = document.createElement('div');
indicator.id = 'wechat-time-indicator';
indicator.className = 'wechat-time-indicator';
inputArea.insertBefore(indicator, inputArea.firstChild);
}
const date = new Date(selectedTime);
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours().toString().padStart(2, '0');
const minute = date.getMinutes().toString().padStart(2, '0');
indicator.innerHTML = `
<span class="wechat-time-indicator-text">${month}${day}${hour}:${minute}</span>
<button class="wechat-time-indicator-clear" id="wechat-time-indicator-clear">✕</button>
`;
// 绑定清除按钮
document.getElementById('wechat-time-indicator-clear')?.addEventListener('click', (e) => {
e.stopPropagation();
clearSelectedTime();
});
}
// 初始化时间选择器事件
function initTimePickerEvents() {
if (timePickerInited) return;
timePickerInited = true;
// 监听列项点击
document.addEventListener('click', (e) => {
const item = e.target.closest('.wechat-time-picker-item');
if (!item) return;
const column = item.closest('.wechat-time-picker-column');
if (!column) return;
const type = column.dataset.type;
const value = parseInt(item.dataset.value);
// 更新选中值
pickerValues[type] = value;
// 更新选中样式
column.querySelectorAll('.wechat-time-picker-item').forEach(el => {
el.classList.toggle('selected', parseInt(el.dataset.value) === value);
});
// 如果改变了年或月,需要重新渲染日期列
if (type === 'year' || type === 'month') {
const daysInMonth = new Date(pickerValues.year, pickerValues.month, 0).getDate();
if (pickerValues.day > daysInMonth) {
pickerValues.day = daysInMonth;
}
renderPickerColumn('day', 1, daysInMonth, pickerValues.day, '日');
}
updateTimePickerDisplay();
});
// 确认按钮
document.getElementById('wechat-time-picker-confirm')?.addEventListener('click', () => {
const { year, month, day, hour, minute, second } = pickerValues;
selectedTime = new Date(year, month - 1, day, hour, minute, second).getTime();
hideTimePicker();
updateTimeIndicator();
showToast('已设置发送时间', '⏰');
});
}