| {% extends "base.html" %} |
| {% block title %}DRM | 后台管理{% endblock %} |
| {% block head %} |
| <link rel="stylesheet" href="{{ url_for('static', filename='v020.css') }}"> |
| {% endblock %} |
| {% block body %} |
| <main class="admin-layout admin-layout-v2" data-admin-page="{{ admin_page }}"> |
| <section class="admin-hero card-surface"> |
| <div> |
| <p class="section-kicker">后台管理</p> |
| {% if admin_page == "schedule" %} |
| <h1>时间表设置</h1> |
| <p class="admin-copy">通过拖拽上课块和课间块，重新安排整套节次时间。保存后首页与周课表会自动同步。</p> |
| {% elif admin_page == "lists" %} |
| <h1>清单管理</h1> |
| <p class="admin-copy">统一维护首页的 todolist 分类，删除或新建会即时反映到主页与拖拽池。</p> |
| {% else %} |
| <h1>课程管理</h1> |
| <p class="admin-copy">左侧新增或编辑课程，右侧用竖直列表快速检查全周课程配置。</p> |
| {% endif %} |
| </div> |
|
|
| <div class="action-group"> |
| <a class="ghost-link" href="{{ url_for('index') }}">返回主页</a> |
| </div> |
|
|
| <nav class="admin-page-nav" aria-label="后台分页"> |
| <a class="admin-page-tab {% if admin_page == 'schedule' %}is-active{% endif %}" href="{{ url_for('admin_schedule') }}">时间表设置</a> |
| <a class="admin-page-tab {% if admin_page == 'lists' %}is-active{% endif %}" href="{{ url_for('admin_lists') }}">清单管理</a> |
| <a class="admin-page-tab {% if admin_page == 'courses' %}is-active{% endif %}" href="{{ url_for('admin_courses') }}">课程管理</a> |
| </nav> |
| </section> |
|
|
| {% if admin_page == "schedule" %} |
| <section class="admin-section"> |
| <div class="admin-grid admin-grid-tight admin-schedule-grid"> |
| <article class="admin-card schedule-form-card"> |
| <div class="admin-card-head"> |
| <div> |
| <p class="column-label">Basic Settings</p> |
| <h2>基础参数</h2> |
| </div> |
| </div> |
|
|
| <form id="scheduleSettingsForm" class="modal-form compact"> |
| <label> |
| <span>学期开始日期</span> |
| <input id="semesterStartInput" name="semester_start" type="date" value="{{ schedule_settings.semester_start }}"> |
| </label> |
| <label> |
| <span>课表显示开始</span> |
| <input id="dayStartInput" name="day_start" type="time" value="{{ schedule_settings.day_start }}"> |
| </label> |
| <label> |
| <span>课表显示结束</span> |
| <input id="dayEndInput" name="day_end" type="time" value="{{ schedule_settings.day_end }}"> |
| </label> |
| <label> |
| <span>默认任务时长（分钟）</span> |
| <input id="defaultDurationInput" name="default_task_duration_minutes" type="number" min="30" max="240" step="15" value="{{ schedule_settings.default_task_duration_minutes }}"> |
| </label> |
| <div class="form-actions"> |
| <button class="secondary-button" id="resetTimelineButton" type="button">恢复默认节次</button> |
| <button class="primary-button" type="submit">保存时间表设置</button> |
| </div> |
| </form> |
| </article> |
|
|
| <article class="admin-card schedule-editor-card"> |
| <div class="admin-card-head"> |
| <div> |
| <p class="column-label">Timeline Editor</p> |
| <h2>拖拽块到时间轴上重新排布节次</h2> |
| </div> |
| <span class="task-count" id="scheduleSegmentCount">0 段</span> |
| </div> |
|
|
| <div class="schedule-palette" id="schedulePalette"> |
| <div class="schedule-palette-card class" draggable="true" data-palette-kind="class"> |
| <strong>上课块</strong> |
| <span>拖到时间轴末尾追加一节课</span> |
| </div> |
| <div class="schedule-palette-card break" draggable="true" data-palette-kind="break"> |
| <strong>课间块</strong> |
| <span>拖到时间轴末尾追加一段休息</span> |
| </div> |
| </div> |
|
|
| <p class="admin-card-copy">规则：时间段不能重叠，上课后必须是课间，课间后必须是上课。支持拖入新块、删除节次、调整时长。</p> |
|
|
| <div class="schedule-editor-shell"> |
| <div class="schedule-editor-axis" id="scheduleEditorAxis"></div> |
| <div class="schedule-editor-track" id="scheduleEditorTrack"> |
| <div class="schedule-editor-dropzone" id="scheduleEditorDropzone">将上课块或课间块拖到这里，追加到时间表末尾</div> |
| </div> |
| </div> |
| </article> |
| </div> |
| </section> |
| {% elif admin_page == "lists" %} |
| <section class="admin-section"> |
| <div class="admin-grid admin-grid-tight admin-lists-grid"> |
| <article class="admin-card create-card list-create-card"> |
| <div class="create-icon">+</div> |
| <h2>新建一个清单</h2> |
| <p class="admin-card-copy">清单会直接同步到首页与第二页的拖拽池。</p> |
| <form id="createCategoryForm" class="modal-form compact"> |
| <label> |
| <span>分类名称</span> |
| <input id="newCategoryName" name="name" type="text" maxlength="20" placeholder="例如：项目推进"> |
| </label> |
| <button class="primary-button" type="submit">立即创建</button> |
| </form> |
| </article> |
|
|
| <section class="admin-stack list-management-stack" id="adminGrid"> |
| {% for category in categories %} |
| <article class="admin-card admin-row-card list-row-card" data-category-id="{{ category.id }}"> |
| <div class="admin-row-main"> |
| <div> |
| <p class="column-label">Category</p> |
| <h2>{{ category.name }}</h2> |
| <p class="admin-card-copy">删除分类会同时移除其下全部任务，请谨慎操作。</p> |
| </div> |
| <div class="admin-row-side"> |
| <span class="task-count">{{ category.tasks|length }} 项任务</span> |
| <button class="danger-button" type="button" data-delete-category="{{ category.id }}">删除此清单</button> |
| </div> |
| </div> |
| </article> |
| {% endfor %} |
| </section> |
| </div> |
| </section> |
| {% else %} |
| <section class="admin-section"> |
| <div class="admin-grid admin-grid-tight course-management-grid"> |
| <article class="admin-card course-editor-card"> |
| <div class="admin-card-head"> |
| <div> |
| <p class="column-label">Course Editor</p> |
| <h2 id="courseEditorHeading">新增课程</h2> |
| </div> |
| </div> |
| <p class="admin-card-copy">课程时间按“第几节到第几节”输入，系统会根据当前时间表自动换算为具体时间。</p> |
|
|
| <form class="modal-form compact" id="courseForm"> |
| <input id="courseIdInput" name="course_id" type="hidden"> |
| <label> |
| <span>课程名称</span> |
| <input id="courseTitleInput" name="title" type="text" maxlength="40" placeholder="例如：高等数学"> |
| </label> |
| <label> |
| <span>上课地点</span> |
| <input id="courseLocationInput" name="location" type="text" maxlength="40" placeholder="例如：教学楼 A302"> |
| </label> |
| <label> |
| <span>星期几</span> |
| <select id="courseWeekdayInput" name="day_of_week"> |
| <option value="1">星期一</option> |
| <option value="2">星期二</option> |
| <option value="3">星期三</option> |
| <option value="4">星期四</option> |
| <option value="5">星期五</option> |
| <option value="6">星期六</option> |
| <option value="7">星期日</option> |
| </select> |
| </label> |
| <div class="split-fields"> |
| <label> |
| <span>开始节次</span> |
| <select id="courseStartPeriodInput" name="start_period"></select> |
| </label> |
| <label> |
| <span>结束节次</span> |
| <select id="courseEndPeriodInput" name="end_period"></select> |
| </label> |
| </div> |
| <div class="split-fields"> |
| <label> |
| <span>开始周数</span> |
| <input id="courseStartWeekInput" name="start_week" type="number" min="1" max="30" value="1"> |
| </label> |
| <label> |
| <span>结束周数</span> |
| <input id="courseEndWeekInput" name="end_week" type="number" min="1" max="30" value="16"> |
| </label> |
| </div> |
| <label> |
| <span>单双周</span> |
| <select id="courseWeekPatternInput" name="week_pattern"> |
| <option value="all">每周</option> |
| <option value="odd">单周</option> |
| <option value="even">双周</option> |
| </select> |
| </label> |
| <div class="form-actions"> |
| <button class="secondary-button" id="resetCourseEditorButton" type="button">清空表单</button> |
| <button class="primary-button" type="submit">保存课程</button> |
| </div> |
| </form> |
| </article> |
|
|
| <section class="admin-stack course-list" id="courseGrid"> |
| {% if courses %} |
| {% for course in courses %} |
| <article class="admin-card admin-row-card course-card" data-course-id="{{ course.id }}"> |
| <div class="admin-card-head course-row-head"> |
| <div> |
| <p class="column-label">Course</p> |
| <h2>{{ course.title }}</h2> |
| </div> |
| <div class="course-row-actions"> |
| <span class="task-count">周{{ ["一","二","三","四","五","六","日"][course.day_of_week - 1] }}</span> |
| <button class="secondary-button" type="button" data-edit-course="{{ course.id }}">编辑课程</button> |
| <button class="danger-button" type="button" data-delete-course="{{ course.id }}">删除课程</button> |
| </div> |
| </div> |
| <p class="admin-card-copy">{{ course.start_time }} - {{ course.end_time }} · 第 {{ course.start_week }}-{{ course.end_week }} 周 · {% if course.week_pattern == "odd" %}单周{% elif course.week_pattern == "even" %}双周{% else %}每周{% endif %}</p> |
| <p class="admin-card-copy">{{ course.location if course.location else "未填写地点" }}</p> |
| </article> |
| {% endfor %} |
| {% else %} |
| <article class="admin-card empty-admin-card"> |
| <h2>还没有固定课程</h2> |
| <p class="admin-card-copy">在左侧填写课程信息并保存后，周课表会自动按周显示。</p> |
| </article> |
| {% endif %} |
| </section> |
| </div> |
| </section> |
| {% endif %} |
|
|
| <div class="toast-stack" id="toastStack"></div> |
| </main> |
| {% endblock %} |
| {% block scripts %} |
| <script> |
| window.__ADMIN_BOOTSTRAP__ = { |
| adminPage: {{ admin_page|tojson }}, |
| courses: {{ courses|tojson }}, |
| categories: {{ categories|tojson }}, |
| scheduleSettings: {{ schedule_settings|tojson }}, |
| defaultTimeSlots: {{ default_time_slots|tojson }}, |
| }; |
| </script> |
| <script src="{{ url_for('static', filename='admin-v020.js') }}"></script> |
| {% endblock %} |
|
|
