ECNUPrettier

Make ECNU Website Great Again !
换行
// ==UserScript==
// @name         ECNUPrettier
// @namespace    http://santonin.top/
// @version      1.1.1
// @description  Make ECNU Website Great Again !
// @author       Santonin
// @match        https://applicationnewjw.ecnu.edu.cn/eams/home.action*
// @match        https://applicationnewjw.ecnu.edu.cn/eams/myPlanCompl.action*
// @require      https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @license      GPL-3.0-or-later; https://www.gnu.org/licenses/gpl-3.0.txt
// ==/UserScript==

let tableData = [];

/** 重新累加计算每个非叶子节点的 leafNum */
function accLeafNum(result) {
  function computeLeafNum(node) {
    if (!node.children) return;
    if (node.isLeaf) {
      if (!node.isFold) node.leafNum = node.children.length;
      else node.leafNum = 1;
      return;
    }
    node.leafNum = 0;
    for (const child of node.children) {
      computeLeafNum(child);
      node.leafNum += child.leafNum || 1;
    }
  }

  for (const node of result) {
    computeLeafNum(node);
  }
  return result;
}

/** 表格数据整型 */
function foldItems(items) {
  const result = [];
  let lastKind1 = null;
  let lastKind2 = null;

  // 第一步：构建树结构
  for (const item of items) {
    if (item.kind === 1) {
      result.push(item);
      lastKind1 = item;
      lastKind2 = null;
    } else if (item.kind === 2) {
      if (lastKind1) {
        lastKind1.children.push(item);
        lastKind2 = item;
      }
    } else if (item.kind === 3) {
      if (lastKind2) {
        lastKind2.children.push(item);
      }
    }
  }

  // 第二步：补全空 children（加一个 null 子节点）
  function ensureNonEmptyChildren(node) {
    if (!node.children) return;
    if (node.children.length === 0) {
      node.children = [{ isFake: true }];
      node.isLeaf = true;
      node.isFold = false;
    } else {
      if (node.children[0].kind === undefined) {
        node.isLeaf = true;
        node.isFold = false;
      } else {
        node.isLeaf = false;
      }
      for (const child of node.children) {
        if (child) ensureNonEmptyChildren(child);
      }
    }
  }

  for (const node of result) {
    ensureNonEmptyChildren(node);
  }

  // 第三步：自底向上累加 leafNum
  return accLeafNum(result);
}

/** 表格渲染函数 */
function renderTable(data, isExportMode = false) {
  const $table = $('<table>').css({
    width: '100%',
    borderCollapse: 'collapse',
    margin: '10px 0px',
    border: '1px solid #ccc',
    lineHeight: '20px',
    fontSize: '14px',
  });

  const thStyle = { border: '1px solid #ccc', padding: '4px 8px' };
  const tdStyle = { border: '1px solid #ccc', padding: '4px 8px' };

  const $thead = $('<thead>').append(
    $('<tr>')
      .css({ backgroundColor: '#F6F6F6' })
      .append(
        $('<th>').text('1').css(thStyle).css({ width: '11%' }),
        $('<th>').text('2').css(thStyle).css({ width: '9%' }),
        $('<th>').text('3').css(thStyle).css({ width: '22%' }),
        $('<th>').text('代码').css(thStyle).css({ width: '13%' }),
        $('<th>').text('名称').css(thStyle).css({ width: '24%' }),
        $('<th>').text('学分').css(thStyle).css({ width: '4%' }),
        $('<th>').text('成绩').css(thStyle).css({ width: '5%' }),
        $('<th>').text('通过否').css(thStyle).css({ width: '6%' }),
        $('<th>').text('备注').css(thStyle).css({ width: '6%' })
      )
  );

  const $tbody = $('<tbody>');

  function renderCreditUI({ finishedCredit, credit }) {
    const colors = [
      ['#E3FCD1', '#55CB00'],
      ['#D1EFFC', '#0C92CD'],
      ['#FEE6E3', '#F1604D'],
    ];
    const colorFlag = finishedCredit - credit >= 0 ? 0 : 2;
    return $('<div>')
      .css({
        borderRadius: '999px',
        background: colors[colorFlag][0],
        color: colors[colorFlag][1],
        fontWeight: 600,
        padding: '2px 8px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      })
      .append(
        $('<p>')
          .css({ margin: 0, fontSize: '12px', whiteSpace: 'nowrap' })
          .text(`${finishedCredit} / ${credit}`)
      );
  }

  function renderKind(data) {
    const content = $('<div>')
      .css({
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '8px',
      })
      .append($('<p>').css({ margin: 0, fontSize: '14px' }).text(data.name))
      .append(renderCreditUI(data));
    return $('<div>')
      .css({
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      })
      .append(content);
  }

  function renderLeafHeader(data) {
    const content = $('<div>')
      .css({
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        gap: '8px',
      })
      .append($('<p>').css({ margin: 0, fontSize: '14px' }).text(data.name))
      .append(renderCreditUI(data));

    const res = $('<div>');
    res.css({
      width: '100%',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    });

    const btn = $('<button>');
    btn.text(data.isFold ? '展开' : '收纳');
    btn.css({
      border: 'none',
      cursor: 'pointer',
      height: '24px',
    });
    btn.click(() => {
      data.isFold = !data.isFold;
      rerender();
    });
    if (isExportMode) return res.append(content);
    else return res.append(content).append(btn);
  }

  function renderHeader(kind, isLeaf = false) {
    if (isLeaf)
      return $('<td>')
        .html(renderLeafHeader(kind))
        .css(tdStyle)
        .attr('rowspan', kind.leafNum);
    else
      return $('<td>')
        .html(renderKind(kind))
        .css(tdStyle)
        .attr('rowspan', kind.leafNum);
  }

  function renderFakeChild(row, child) {
    const isFake = Boolean(child.children[0].isFake);
    $tbody.append(
      row.append(
        $('<td>')
          .html(`${isFake ? 0 : child.children.length} 门课程`)
          .css({ ...tdStyle, textAlign: 'center' })
          .attr('colspan', 6)
      )
    );
  }

  function renderTd(row, item) {
    const {
      courseSequence,
      courseCode,
      courseName,
      credit,
      finishedCredit,
      score,
      isPass,
      remark,
    } = item;

    $tbody.append(
      row.append(
        $('<td>')
          .css(tdStyle)
          .html(courseCode ?? ''),
        $('<td>')
          .css({
            ...tdStyle,
            color: isPass === '是' ? '' : 'red',
          })
          .html(courseName ?? ''),
        $('<td>')
          .css(tdStyle)
          .html(credit ?? ''),
        $('<td>')
          .css(tdStyle)
          .html(score ?? ''),
        $('<td>')
          .css(tdStyle)
          .html(isPass ?? ''),
        $('<td>')
          .css(tdStyle)
          .html(remark ?? '')
      )
    );
  }

  function addRows(items, $tbody) {
    items.forEach((kind1, index1) => {
      kind1.children.forEach((kind2, index2) => {
        if (kind2.children.length && kind2.children[0].kind === 3) {
          // 有 kind3
          kind2.children.forEach((kind3, index3) => {
            if (kind3.isFold) {
              let row = $('<tr>');
              if (index2 === 0) {
                row.append(renderHeader(kind1));
              }
              if (index3 === 0) {
                row.append(renderHeader(kind2));
              }
              row.append(renderHeader(kind3, true));

              // const isFake = Boolean(kind3.children[0].isFake);
              // $tbody.append(
              //   row.append(
              //     $('<td>')
              //       .html(`${isFake ? 0 : kind3.children.length}门课程`)
              //       .css(tdStyle)
              //       .attr('colspan', 6)
              //   )
              // );
              renderFakeChild(row, kind3);
            } else
              kind3.children.forEach((item, index4) => {
                let row = $('<tr>');
                if (index4 === 0) {
                  if (index2 === 0) {
                    row.append(renderHeader(kind1));
                  }
                  if (index3 === 0) {
                    row.append(renderHeader(kind2));
                  }
                  row.append(renderHeader(kind3, true));
                }
                renderTd(row, item);
              });
          });
        } else {
          // 没有 kind3
          if (kind2.isFold) {
            let row = $('<tr>');
            if (index2 === 0) {
              // 如果这是渲染 kind1 的第一行，需要额外渲染左侧表头
              row.append(renderHeader(kind1));
            }
            // 如果这是渲染 kind2 的第一行，需要额外渲染左侧表头
            row.append(renderHeader(kind2, true).attr('colspan', 2));

            // const isFake = Boolean(kind2.children[0].isFake);
            // $tbody.append(
            //   row.append(
            //     $('<td>')
            //       .html(`${isFake ? 0 : kind2.children.length}门课程`)
            //       .css(tdStyle)
            //       .attr('colspan', 6)
            //   )
            // );
            renderFakeChild(row, kind2);
          } else
            kind2.children.forEach((item, index3) => {
              let row = $('<tr>');
              if (index3 === 0) {
                if (index2 === 0) {
                  row.append(renderHeader(kind1));
                }
                row.append(renderHeader(kind2, true).attr('colspan', 2));
              }
              renderTd(row, item);
            });
        }
      });
    });
  }

  addRows(data, $tbody);

  $table.append($thead).append($tbody);

  return $('<div>')
    .css({
      width: '100%',
      maxHeight: '100%',
      overflowY: 'auto',
    })
    .attr('id', 'pretty-table-container')
    .append($table);
}

let $modal = null;
let $overlay = null;
/** 重渲染弹窗内的表格和关闭按钮 */
function rerender() {
  tableData = accLeafNum(tableData);
  console.log(tableData);

  // 记录当前滚动高度，并清空表格的容器
  const tableContainer = $('#pretty-table-container');
  const scrollTop = $('#pretty-table-container').scrollTop();
  tableContainer.empty();

  // 重新渲染表格，并滚动至原位置
  tableContainer.append(renderTable(tableData));
  tableContainer.scrollTop(scrollTop);
}

/** 关闭弹窗事件 */
function closeModal() {
  if ($overlay) {
    $overlay.remove();
    $('body > *:not(#custom-overlay)').css('filter', 'none');
  }
}

function goThroughLeaf(node, fn) {
  if (!node.children) return;
  if (node.isLeaf) {
    fn(node);
  } else {
    for (const child of node.children) {
      goThroughLeaf(child, fn);
    }
  }
}

/** 全部展开事件 */
function allUnfold() {
  for (const node of tableData) {
    goThroughLeaf(node, (node) => {
      node.isFold = false;
    });
  }
  rerender();
}
/** 全部收纳事件 */
function allFold() {
  for (const node of tableData) {
    goThroughLeaf(node, (node) => {
      node.isFold = true;
    });
  }
  rerender();
}

/** 展示表格弹窗 */
function showOverlayWithTable(tableData) {
  // 模糊背景
  $('body > *:not(#custom-overlay)').css('filter', 'blur(4px)');

  // 遮罩层
  $overlay = $('<div id="custom-overlay">').css({
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'rgba(0, 0, 0, 0.3)',
    zIndex: 9999,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  });

  // 弹窗容器
  $modal = $('<div>').css({
    background: '#fff',
    padding: '40px 20px 20px',
    borderRadius: '8px',
    boxShadow: '0 0 10px rgba(0,0,0,0.3)',
    height: '90vh',
    width: '1200px',
    minWidth: '800px',
    position: 'relative',
  });

  // 关闭按钮
  const $closeBtn = $('<button>关闭</button>');
  $closeBtn.css({
    position: 'absolute',
    top: '12px',
    right: '12px',
    cursor: 'pointer',
  });
  $closeBtn.click(closeModal);

  // 全部展开
  const $allUnfold = $('<button>全部展开</button>');
  $allUnfold.css({
    position: 'absolute',
    top: '12px',
    left: '12px',
    cursor: 'pointer',
  });
  $allUnfold.click(allUnfold);

  // 全部收纳
  const $allFold = $('<button>全部收纳</button>');
  $allFold.css({
    position: 'absolute',
    top: '12px',
    left: '96px',
    cursor: 'pointer',
  });
  $allFold.click(allFold);

  // 导出图片
  const $exportIMG = $('<button>导出图片</button>');
  $exportIMG.css({
    position: 'absolute',
    top: '12px',
    left: '180px',
    cursor: 'pointer',
  });
  $exportIMG.click(exportToImage);

  // 导出pdf
  const $exportExcel = $('<button>导出Excel</button>');
  $exportExcel.css({
    position: 'absolute',
    top: '12px',
    left: '264px',
    cursor: 'pointer',
  });
  $exportExcel.click(exportToExcel);

  $modal
    .append($closeBtn)
    .append($allUnfold)
    .append($allFold)
    .append($exportIMG)
    .append($exportExcel)
    .append(renderTable(tableData));

  $overlay.append($modal);
  $('body').append($overlay);
}

const kindOne = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
const kindTwo = [
  '(一)',
  '(二)',
  '(三)',
  '(四)',
  '(五)',
  '(六)',
  '(七)',
  '(八)',
  '(九)',
  '(十)',
];

function mainPrettier() {
  const $chartView = $('#chartView');
  if ($chartView) {
    $('#chartView table tbody tr').each(function () {
      // 读取表格行
      const rowData = [];
      $(this)
        .find('td')
        .each(function () {
          rowData.push($(this).text().trim());
        });
      // 整型数据
      if (rowData.length === 8) {
        // 是具体的课程条目
        if (tableData.length) {
          const last = tableData.at(-1);
          last.leafNum++;
          last.children.push({
            courseSequence: rowData[0],
            courseCode: rowData[1],
            courseName: rowData[2],
            credit: rowData[3],
            finishedCredit: rowData[4],
            score: rowData[5],
            isPass: rowData[6],
            remark: rowData[7],
          });
        }
      } else if (rowData.length === 6) {
        // 是课程所属门类
        let kind = 0;
        if (kindOne.some((prefix) => rowData[0].startsWith(prefix))) {
          kind = 1;
        } else if (kindTwo.some((prefix) => rowData[0].startsWith(prefix))) {
          kind = 2;
        } else {
          kind = 3;
        }

        if (kind !== 0) {
          tableData.push({
            kind: kind,
            leafNum: 0,
            name: rowData[0].replace('(所有子项均应满足要求)', ''),
            credit: rowData[1],
            finishedCredit: rowData[2],
            children: [],
          });
        }
      } else {
        console.error('未知的表格行！ Unknown table row !');
      }
    });

    tableData = foldItems(tableData);
    console.log(tableData);

    showOverlayWithTable(tableData);
    return true;
  } else {
    return false;
  }
}

/**
 * 根据当前时间和文件类型生成唯一的文件名
 * @param {string} fileType - 文件类型，'excel' | 'image'
 * @returns {string} 生成的文件名，格式为：[前缀]_[YYYYMMDD_HHMMSS].[扩展名]
 */
function generateFilename(fileType) {
  // 获取当前时间
  const now = new Date();

  // 格式化日期时间为 YYYYMMDD_HHMMSS
  const formattedDateTime = [
    now.getFullYear(),
    String(now.getMonth() + 1).padStart(2, '0'),
    String(now.getDate()).padStart(2, '0'),
    '_',
    String(now.getHours()).padStart(2, '0'),
    String(now.getMinutes()).padStart(2, '0'),
    String(now.getSeconds()).padStart(2, '0'),
  ].join('');

  // 定义文件类型映射表
  const fileTypeMap = {
    excel: { extension: 'xlsx' },
    image: { extension: 'png' },
  };

  // 获取文件类型配置，默认为csv
  const { extension } = fileTypeMap[fileType] || fileTypeMap.csv;

  // 返回生成的文件名
  return `计划完成情况_${formattedDateTime}.${extension}`;
}

// 导出为图片
function exportToImage() {
  // 创建临时容器
  const tempContainer = $('<div>');
  tempContainer.css({
    position: 'fixed',
    top: '-9999px',
    left: '-9999px',
    width: 'auto',
    padding: '20px',
    backgroundColor: 'white',
    boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
    borderRadius: '8px',
  });

  // 克隆表格并添加到临时容器
  const clonedTable = renderTable(tableData, true);
  tempContainer.append(clonedTable);
  $('body').append(tempContainer);

  // 使用html2canvas渲染表格为图片
  html2canvas(clonedTable[0], {
    scale: 2,
    useCORS: true,
    logging: false,
  }).then((canvas) => {
    // 转换为图片URL并下载
    const imgData = canvas.toDataURL('image/png');
    const test = 'test';
    const $link = $('<a>').attr({
      download: generateFilename('image'),
      href: imgData,
    });
    $link[0].click();

    // 移除临时容器
    tempContainer.remove();
  });
}

// 导出为Excel
function exportToExcel() {
  const table = renderTable(tableData, true);
  const wb = XLSX.utils.table_to_book(table[0], { sheet: 'Sheet1' });
  XLSX.writeFile(wb, generateFilename('excel'));
}

// 下载文件
function downloadFile(content, filename, contentType) {
  const a = document.createElement('a');
  const file = new Blob([content], { type: contentType });
  a.href = URL.createObjectURL(file);
  a.download = filename;
  a.click();
  URL.revokeObjectURL(a.href);
}

(function () {
  ('use strict');

  $(document).ready(function () {
    console.log("I'm Santonin");
    const myBtn = $('<div>');
    myBtn.text('Prettified Table').css({
      position: 'fixed',
      bottom: '20px',
      right: '20px',
      boxShadow: '4px 4px 12px rgba(0, 0, 0, 0.2)',
      borderRadius: '999px',
      height: '40px',
      padding: '0px 12px',
      backgroundColor: 'white',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      userSelect: 'none',
      cursor: 'pointer',
    });
    myBtn.click(() => {
      if (tableData.length) {
        showOverlayWithTable(tableData);
        return;
      }
      const res = mainPrettier();
      if (!res) {
        console.log('当前页面没有chartView');
      }
    });
    $('body').append(myBtn);
  });
})();
欢迎访问Greasy Fork镜像
