增加功能

[Shui2007]

1.点击课表特定位置向下展开显示本周所有课程
2.课上小窗显示当前时间 科目 下节科目 如：15:30 语文 下节:数学 （不需要课上计时。老师说会分散注意力）
谢谢大佬

[ziqianou]

好的，以下是针对您提出的两个功能需求的实现方案：

1. 点击课表特定位置向下展开显示本周所有课程：

• 方案一： 在 index.html 文件中，为 classContainer 添加 click 事件监听器，并根据点击的位置判断是否展开显示所有课程。

classContainer.addEventListener('click', (event) => {
  // 判断点击的位置是否在课程区域内
  const isClassArea = event.target.classList.contains('class');
  if (!isClassArea) return;

  // 获取当前点击的课程索引
  const classIndex = Array.from(classContainer.children).indexOf(event.target);

  // 展开显示所有课程
  if (isClassHidden) {
    showFullSchedule(classIndex);
  } else {
    hideFullSchedule();
  }
});

function showFullSchedule(classIndex) {
  // 隐藏主课程容器
  classContainer.style.display = 'none';

  // 显示所有课程列表
  const scheduleList = document.getElementById('scheduleList');
  scheduleList.style.display = 'block';

  // 滚动到当前课程的位置
  scheduleList.scrollTop = classIndex * scheduleList.children[0].offsetHeight;
}

function hideFullSchedule() {
  // 显示主课程容器
  classContainer.style.display = 'block';

  // 隐藏所有课程列表
  const scheduleList = document.getElementById('scheduleList');
  scheduleList.style.display = 'none';
}

• 方案二： 使用 Electron 的 dialog 模块弹出一个小窗口，显示本周所有课程。

const { dialog } = require('electron');

classContainer.addEventListener('click', (event) => {
  // 判断点击的位置是否在课程区域内
  const isClassArea = event.target.classList.contains('class');
  if (!isClassArea) return;

  // 显示所有课程的对话框
  dialog.showMessageBox(win, {
    title: '本周课程',
    message: getFullScheduleHtml(),
  });
});

function getFullScheduleHtml() {
  // 获取本周所有课程数据
  const scheduleData = getScheduleData();
  const scheduleArray = scheduleData.scheduleArray;

  // 生成 HTML 代码
  let html = '<ul>';
  for (let i = 0; i < scheduleArray.length; i++) {
    html += `<li>${scheduleArray[i]}</li>`;
  }
  html += '</ul>';

  return html;
}

2. 课上小窗显示当前时间、科目、下节科目：

• 方案一： 在 index.html 文件中，添加一个 miniCountdown 元素，并使用 setInterval 定时更新其内容。

const miniCountdown = document.getElementById('miniCountdown');

setInterval(() => {
  const now = new Date();
  const currentTime = now.toLocaleTimeString();
  const currentClass = scheduleData.currentHighlight.fullName;
  const nextClass = scheduleData.scheduleArray[scheduleData.currentHighlight.index + 1];

  miniCountdown.innerHTML = `<div class="currentClass">${currentClass}</div><div class="countdown" style="margin-left:5px">${currentTime}</div><div class="nextClass">下节:${nextClass}</div>`;
}, 1000);

• 方案二： 使用 Electron 的 BrowserWindow 模块创建一个新的窗口，显示当前时间、科目、下节科目。

const { BrowserWindow } = require('electron');

let miniWindow;

function showMiniWindow() {
  if (miniWindow) return;

  miniWindow = new BrowserWindow({
    width: 300,
    height: 100,
    frame: false,
    alwaysOnTop: true,
  });

  miniWindow.loadFile('miniWindow.html');

  setInterval(() => {
    const now = new Date();
    const currentTime = now.toLocaleTimeString();
    const currentClass = scheduleData.currentHighlight.fullName;
    const nextClass = scheduleData.scheduleArray[scheduleData.currentHighlight.index + 1];

    miniWindow.webContents.send('updateMiniWindow', {
      currentTime,
      currentClass,
      nextClass,
    });
  }, 1000);
}

const { BrowserWindow, ipcMain } = require('electron');

let miniWindow;

function showMiniWindow() {
  if (miniWindow) return;

  miniWindow = new BrowserWindow({
    width: 300,
    height: 100,
    frame: false,
    alwaysOnTop: true,
  });

  miniWindow.loadFile('miniWindow.html');

  setInterval(() => {
    const now = new Date();
    const currentTime = now.toLocaleTimeString();
    const currentClass = scheduleData.currentHighlight.fullName;
    const nextClass = scheduleData.scheduleArray[scheduleData.currentHighlight.index + 1];

    miniWindow.webContents.send('updateMiniWindow', {
      currentTime,
      currentClass,
      nextClass,
    });
  }, 1000);
}

ipcMain.on('hideMiniWindow', () => {
  if (!miniWindow) return;

  miniWindow.close();
  miniWindow = null;
});