Astro博客建立课程表页面

function parseDateFromYmd(ymd: string): Date | null {
  const parts = ymd.split("-").map((part) => Number(part));
  if (parts.length !== 3 || parts.some((part) => !Number.isFinite(part))) {
    return null;
  }
  const [year, month, day] = parts;
  return new Date(year, month - 1, day);
}

export function resolveCurrentWeek(
  startDateText: string,
  maxWeek: number,
  now: Date = new Date(),
): number {
  const startDate = parseDateFromYmd(startDateText);
  if (!startDate) {
    return 1;
  }

  const msPerDay = 24 * 60 * 60 * 1000;
  const diffDays = Math.floor((now.getTime() - startDate.getTime()) / msPerDay);
  const week = Math.floor(diffDays / 7) + 1;

  if (week < 1) return 1;
  if (week > maxWeek) return 1;
  return week;
}

export function buildTimetableViewModel(
  data: ParsedTimetableData,
  selectedWeek: number,
): TimetableViewModel {
  const maxWeek = Math.max(1, data.meta.maxWeek || 1);
  const week = Math.min(Math.max(1, selectedWeek), maxWeek);
  
  // 转换节次时间
  const nodeRows = toNodeRows(data);
  
  // 转换星期列
  const dayColumns = toDayColumns(data);

  // 构建课程查找表
  const courseMap = new Map(
    data.courseDefinitions.map((course) => [course.id, course]),
  );

  // 按星期分组课程
  const coursesByDay: Record<number, TimetableCourseView[]> = {};
  for (const column of dayColumns) {
    coursesByDay[column.day] = [];
  }

  // 筛选当前周的课程
  for (const arrangement of data.arrangements) {
    // 检查星期是否有效
    if (arrangement.day < 1 || arrangement.day > 7) continue;
    
    // 检查当前周是否在课程范围内
    if (week < arrangement.startWeek || week > arrangement.endWeek) continue;
    
    // 检查该星期是否在显示范围内
    if (!(arrangement.day in coursesByDay)) continue;

    const courseDef = courseMap.get(arrangement.id);
    const courseName = courseDef?.courseName ?? `课程 #${arrangement.id}`;
    const color = buildCourseColor(courseName, arrangement.id);
    
    coursesByDay[arrangement.day].push(
      toCourseView(arrangement, courseName, color, nodeRows),
    );
  }

  // 对每天的课程按节次排序
  for (const day of Object.keys(coursesByDay)) {
    coursesByDay[Number(day)].sort(
      (a, b) => a.startNode - b.startNode,
    );
  }

  return {
    tableName: data.meta.tableName || "课表",
    maxWeek,
    currentWeek: week,
    weeks: Array.from({ length: maxWeek }, (_, index) => index + 1),
    dayColumns,
    nodeRows,
    coursesByDay,
  };
}

---
import fs from "node:fs";
import path from "node:path";
import type { TimetableViewModel } from "@/types/timetable";
import TimetablePageContent from "@components/timetable/TimetablePageContent.astro";
import MainGridLayout from "@layouts/MainGridLayout.astro";
import {
  buildTimetableViewModel,
  resolveCurrentWeek,
} from "@utils/timetable-normalizer";
import { parseTimetableFile } from "@utils/timetable-parser-server";

const filePath = "src/data/timetable/大三下.json";
const absoluteFilePath = path.join(process.cwd(), filePath);

let viewModel: TimetableViewModel | null = null;
let loadError = "";
let isCurrentWeek = false;
let baselineText = "";

try {
  baselineText = fs.readFileSync(absoluteFilePath, "utf-8");
  const parsedData = parseTimetableFile(filePath);
  const currentWeek = resolveCurrentWeek(
    parsedData.meta.startDate,
    parsedData.meta.maxWeek,
  );
  viewModel = buildTimetableViewModel(parsedData, currentWeek);
  isCurrentWeek = viewModel.currentWeek === currentWeek;
} catch (error) {
  loadError = error instanceof Error ? error.message : "课表数据加载失败";
}
---

<MainGridLayout title={viewModel ? `课表 - 第${viewModel.currentWeek}周` : "课表"}>
  {viewModel ? (
    <TimetablePageContent
      viewModel={viewModel}
      isCurrentWeek={isCurrentWeek}
      baselineText={baselineText}
    />
  ) : (
    <div class="card-base p-6 md:p-8">
      <div class="text-red-500">课表加载失败：{loadError}</div>
    </div>
  )}
</MainGridLayout>

---
// ... 导入语句与首页相同

const weekParam = Number(Astro.params.week);

try {
  baselineText = fs.readFileSync(absoluteFilePath, "utf-8");
  const parsedData = parseTimetableFile(filePath);
  const currentWeek = resolveCurrentWeek(
    parsedData.meta.startDate,
    parsedData.meta.maxWeek,
  );
  
  // 使用 URL 参数中的周次，如果无效则使用当前周
  const selectedWeek =
    Number.isFinite(weekParam) && weekParam >= 1
      ? Math.floor(weekParam)
      : currentWeek;
      
  viewModel = buildTimetableViewModel(parsedData, selectedWeek);
  isCurrentWeek = viewModel.currentWeek === currentWeek;
} catch (error) {
  // ... 错误处理
}

// 生成所有周次的静态路径
export function getStaticPaths() {
  const parsedData = parseTimetableFile("src/data/timetable/大三下.json");
  const maxWeek = Math.max(1, parsedData.meta.maxWeek || 1);
  return Array.from({ length: maxWeek }, (_, index) => ({
    params: {
      week: String(index + 1),
    },
  }));
}
---

---
import type { TimetableViewModel } from "@/types/timetable";
import LiveTimetableStatus from "@components/timetable/LiveTimetableStatus.astro";
import TimetableDayList from "@components/timetable/TimetableDayList.astro";
import TimetableGrid from "@components/timetable/TimetableGrid.astro";
import { Icon } from "astro-icon/components";

interface Props {
  viewModel: TimetableViewModel;
  isCurrentWeek?: boolean;
  baselineText: string;
}

const { viewModel, isCurrentWeek = false, baselineText } = Astro.props;

const liveStatusPayload = {
  coursesByDay: viewModel.coursesByDay,
};
---

<div class="card-base p-6 md:p-8">
  <!-- 页面头部 -->
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold">{viewModel.tableName}</h1>
    <span class="text-sm text-white/60">共 {viewModel.maxWeek} 周</span>
  </div>

  <!-- 周次导航 -->
  <div class="flex items-center gap-3 mb-5">
    <a
      href={`/timetable/${Math.max(1, viewModel.currentWeek - 1)}/`}
      class="btn-regular h-9 w-9 rounded-lg flex items-center justify-center"
      class:list={[{ "opacity-50": viewModel.currentWeek <= 1 }]}
    >
      <Icon name="lucide:chevron-left" class="text-lg" />
    </a>
    <span class="min-w-[4.5rem] text-center font-medium">
      第 {viewModel.currentWeek} 周
    </span>
    <a
      href={`/timetable/${Math.min(viewModel.maxWeek, viewModel.currentWeek + 1)}/`}
      class="btn-regular h-9 w-9 rounded-lg flex items-center justify-center"
      class:list={[{ "opacity-50": viewModel.currentWeek >= viewModel.maxWeek }]}
    >
      <Icon name="lucide:chevron-right" class="text-lg" />
    </a>
    {isCurrentWeek && (
      <span class="rounded-lg border border-emerald-400/30 
                   bg-emerald-500/10 px-2.5 py-1 text-sm 
                   font-medium text-emerald-200">
        当前周
      </span>
    )}
  </div>

  <!-- 实时状态 -->
  <LiveTimetableStatus payload={liveStatusPayload} class="mb-4" />

  <!-- 桌面端网格 -->
  <TimetableGrid viewModel={viewModel} />
  
  <!-- 移动端列表 -->
  <TimetableDayList viewModel={viewModel} />
</div>

---
import type { TimetableCourseView } from "@/types/timetable";
import TimetableCourseCard from "@components/timetable/TimetableCourseCard.astro";

interface Props {
  viewModel: TimetableViewModel;
}

const { viewModel } = Astro.props;

// 计算需要显示的星期
const dayIndexes = viewModel.dayColumns.map((day) => day.day);
const dayCount = viewModel.dayColumns.length;

// 构建课程查找表，key 格式为 "星期-节次"
const courseMapByDayAndNode = new Map<string, TimetableCourseView[]>();

for (const day of dayIndexes) {
  for (const course of viewModel.coursesByDay[day] ?? []) {
    // 将课程按节次分组（每2节一组）
    const pairStartNode =
      course.startNode % 2 === 1 ? course.startNode : course.startNode - 1;
    const key = `${day}-${Math.max(1, pairStartNode)}`;
    const list = courseMapByDayAndNode.get(key) ?? [];
    list.push(course);
    courseMapByDayAndNode.set(key, list);
  }
}
---

<div class="hidden md:block card-base w-full overflow-hidden" 
     style={`--day-count: ${dayCount}`}>
  <!-- 表头 -->
  <div class="timetable-header-grid border-b border-white/10">
    <div class="px-3 py-2 text-xs border-r border-white/10">节次</div>
    {viewModel.dayColumns.map((day) => (
      <div class="px-3 py-2 text-sm font-semibold border-r last:border-r-0 
                  border-white/10">
        {day.label}
      </div>
    ))}
  </div>

  <!-- 课程行 -->
  {viewModel.nodeRows
    .filter((row) => row.node % 2 === 1)  // 只显示奇数节次（成对显示）
    .map((row) => (
      <div class="timetable-row-grid border-b last:border-b-0 border-white/10">
        <!-- 节次信息 -->
        <div class="px-3 py-3 border-r border-white/10">
          <p class="text-xs font-medium">
            第 {row.node}-{Math.min(row.node + 1, viewModel.nodeRows.length)} 节
          </p>
          <p class="text-[11px] text-white/80 mt-1">
            {row.startTime} - {下一节结束时间}
          </p>
        </div>
        
        <!-- 每天的课程 -->
        {viewModel.dayColumns.map((day) => {
          const key = `${day.day}-${row.node}`;
          const courses = courseMapByDayAndNode.get(key) ?? [];
          return (
            <div class="px-2 py-2 border-r last:border-r-0 border-white/10 
                        align-top min-h-[88px]">
              {courses.length > 0 ? (
                <div class="space-y-2">
                  {courses.map((course) => (
                    <TimetableCourseCard course={course} compact={true} />
                  ))}
                </div>
              ) : (
                <div class="h-full flex items-center justify-center 
                            text-[11px] text-white/60">—</div>
              )}
            </div>
          );
        })}
      </div>
    ))}
</div>

<style>
  .timetable-header-grid,
  .timetable-row-grid {
    display: grid;
    grid-template-columns: 120px repeat(var(--day-count), minmax(180px, 1fr));
  }
</style>

---
import type { TimetableCourseView } from "@/types/timetable";

interface Props {
  course: TimetableCourseView;
  compact?: boolean;  // 是否紧凑模式（用于网格）
  showTime?: boolean; // 是否显示时间（用于列表）
}

const { course, compact = false, showTime = false } = Astro.props;
const borderColor = course.color || "#6b7280";
---

<article 
  class:list={["course-card rounded-lg", compact ? "p-2.5" : "p-3"]}
  style={`--course-color: ${borderColor}`}
>
  <div class="flex items-start justify-between gap-2">
    <h3 class:list={["font-semibold text-white leading-tight", 
                     compact ? "text-xs" : "text-sm"]}>
      {course.courseName}
    </h3>
    <span class="text-[10px] text-white/80 whitespace-nowrap">
      {course.startWeek}-{course.endWeek}周
    </span>
  </div>
  
  {showTime && (
    <p class:list={["text-white/80 mt-1", compact ? "text-[11px]" : "text-xs"]}>
      时间：{course.timeText}
    </p>
  )}
  
  <p class:list={["text-white/80", showTime ? "mt-0.5" : "mt-1", 
                  compact ? "text-[11px]" : "text-xs"]}>
    教室：{course.room}
  </p>
  
  <p class:list={["text-white/80 mt-0.5", compact ? "text-[11px]" : "text-xs"]}>
    教师：{course.teacher}
  </p>
</article>

<style>
  .course-card {
    border-left: 4px solid var(--course-color);
    background: color-mix(in oklab, var(--card-bg) 82%, var(--course-color) 18%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--course-color) 38%, transparent);
  }
</style>

<!-- 桌面端网格 -->
<TimetableGrid viewModel={viewModel} />

<!-- 移动端列表 -->
<TimetableDayList viewModel={viewModel} />

<!-- TimetableGrid.astro -->
<div class="hidden md:block">...</div>

<!-- TimetableDayList.astro -->
<div class="md:hidden">...</div>

function hashText(input: string): number {
  let hash = 0;
  for (let i = 0; i < input.length; i += 1) {
    hash = (hash * 31 + input.charCodeAt(i)) | 0;
  }
  return Math.abs(hash);
}

function buildCourseColor(courseName: string, courseId: number): string {
  const seed = hashText(`${courseName}-${courseId}`);
  const hue = seed % 360;
  return `hsl(${hue} 78% 68%)`;
}

// 新增课程的草稿数据
type NewCourseDraft = {
  courseName: string;
  teacher: string;
  room: string;
  day: number;
  startNode: number;
  startWeek: number;
  endWeek: number;
};

// 课程卡片显示项
type ArrangementCardItem = {
  arrangementIndex: number;
  title: string;
  teacher: string;
  room: string;
  nodeText: string;
  weekText: string;
  color: string;
};

// 按星期分组的卡片
type ArrangementCardGroup = {
  day: number;
  label: string;
  items: ArrangementCardItem[];
};

<div class="grid gap-3 md:grid-cols-2">
  {#each arrangementCards as dayGroup}
    <div class="rounded-lg border border-[var(--line-divider)]/80 p-3">
      <div class="mb-2 text-sm font-medium">{dayGroup.label}</div>
      {#if dayGroup.items.length === 0}
        <p class="text-xs text-white/70">本日暂无课程</p>
      {:else}
        <div class="flex flex-col gap-2">
          {#each dayGroup.items as item}
            <button
              class={selectedArrangementRef === item.arrangementIndex 
                ? "选中样式" 
                : "默认样式"}
              on:click={() => selectArrangement(item.arrangementIndex)}
            >
              <div style={`color:${item.color}`}>{item.title}</div>
              <div>{item.nodeText} · {item.weekText}</div>
              <div>{item.teacher} / {item.room}</div>
            </button>
          {/each}
        </div>
      {/if}
    </div>
  {/each}
</div>

function validateDraft(data: ParsedTimetableData): string {
  for (let index = 0; index < data.arrangements.length; index += 1) {
    const arrangement = data.arrangements[index];
    
    // 验证星期范围
    if (arrangement.day < 1 || arrangement.day > 7) {
      return `第 ${index + 1} 条课程安排的星期超出范围（1-7）`;
    }
    
    // 验证节次范围
    if (arrangement.startNode < 1 || arrangement.startNode > maxNode) {
      return `第 ${index + 1} 条课程安排的起始节次超出范围`;
    }
    
    // 验证周次逻辑
    if (arrangement.startWeek > arrangement.endWeek) {
      return `第 ${index + 1} 条课程安排的起止周非法`;
    }
    
    // 验证课程名不能为空
    const courseDef = data.courseDefinitions.find(c => c.id === arrangement.id);
    if (!courseDef || !courseDef.courseName?.trim()) {
      return `第 ${index + 1} 条课程安排关联课程名为空`;
    }
  }
  return "";
}

function exportJson() {
  const error = validateDraft(draftParsed);
  if (error) {
    validationError = error;
    return;
  }

  const text = serializeTimetableDataToFileText(draftParsed);
  const blob = new Blob([text], { type: "application/json;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  
  // 创建临时链接并触发下载
  const link = document.createElement("a");
  link.href = url;
  link.download = `${baselineParsed.meta.tableName || "timetable"}.json`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

---
import TimetableVisualEditor from "@components/timetable/TimetableVisualEditor.svelte";
---

<!-- 在适当位置插入编辑器 -->
<TimetableVisualEditor 
  viewModel={viewModel} 
  baselineText={baselineText} 
  client:load 
/>