From 479f7b22a732aa96221e69b1bbbcd882c144e6c1 Mon Sep 17 00:00:00 2001 From: chenxing Date: Tue, 13 Oct 2026 21:02:41 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E8=AF=BE=E8=A1=A8=E5=B0=8F=E7=BB=84?= =?UTF-8?q?=E4=BB=B6):=20=E4=B8=89=E9=A1=B9=E4=BF=AE=E5=A4=8D=E2=80=94?= =?UTF-8?q?=E2=80=94header=20=E6=98=BE=E7=A4=BA=E3=80=8C=E5=B9=B4=E7=BA=A7?= =?UTF-8?q?+=E7=8F=AD=E7=BA=A7=E3=80=8D=E3=80=81body=20=E5=8E=BB=E7=8F=AD?= =?UTF-8?q?=E7=BA=A7=E8=A1=8C=E3=80=81=E7=A9=BA=E6=80=81=E6=94=B9=E5=86=85?= =?UTF-8?q?=E8=81=94=20SVG=E3=80=81=E8=A1=A8=E6=A0=BC=E6=8D=A2=E7=A7=81?= =?UTF-8?q?=E6=9C=89=E7=B1=BB=E5=90=8D=E5=8E=BB=E6=8E=89=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E7=AB=96=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - header 与下拉项显示 gradeName + className（「高一 1班」） - body 单元格只显示科目，不再重复班级 - 空态由「CSS 背景图 + 空 div」改为模板内联 SVG + 「暂无课表数据」 - 表格类名 my-table → tt：避开全局 componets/_my_table.scss 带进的 #c7c7c7 竖线与 th #fafafa 灰底 - 表头去灰底并加 1px 分隔线(#e9edf1)，行间横线加深 #eef1f4，表头字色 #344449 --- src/components/widgets/SyllabusWidget.vue | 104 ++++++++++++++-------- 1 file changed, 69 insertions(+), 35 deletions(-) diff --git a/src/components/widgets/SyllabusWidget.vue b/src/components/widgets/SyllabusWidget.vue index e2b5d36..f8ddb4a 100644 --- a/src/components/widgets/SyllabusWidget.vue +++ b/src/components/widgets/SyllabusWidget.vue @@ -9,12 +9,12 @@ animated /> - @@ -75,7 +88,7 @@ const WEEK_NAMES = ["周一", "周二", "周三", "周四", "周五", "周六", const refRoot = ref(null); const loading = ref(true); -/** oapi data[]：每项一个班级（classId/className/timetable.slots…） */ +/** oapi data[]：每项一个班级（classId/className/gradeName/timetable.slots…） */ const classes = ref([]); const clsIdx = ref(0); const ddOpen = ref(false); @@ -83,14 +96,14 @@ let observer: ResizeObserver | null = null; const currentClass = computed(() => classes.value[clsIdx.value] || {}); -/** 节次行：按 slotNo 升序（R2：按接口实际返回渲染） */ +/** 节次行：按 slotNo 升序（按接口实际返回渲染） */ const slots = computed(() => { const list = currentClass.value && currentClass.value.timetable && currentClass.value.timetable.slots; if (!Array.isArray(list)) return []; return [...list].sort((a, b) => ((a && a.slotNo) || 0) - ((b && b.slotNo) || 0)); }); -/** 星期列：恒 周一~周五；周六/周日有课才追加（R3） */ +/** 星期列：恒 周一~周五；周六/周日有课才追加 */ const dayCols = computed(() => { const cols = [0, 1, 2, 3, 4]; if (slots.value.some(slot => subjectOf(slot, 5))) cols.push(5); @@ -98,6 +111,14 @@ const dayCols = computed(() => { return cols.map(index => ({ index, name: WEEK_NAMES[index] })); }); +/** 班级展示名 = 年级 + 班级（如「高一 1班」）；无年级时退化为班级名 */ +function classLabel(cls: any): string { + if (!cls) return ""; + const grade = cls.gradeName ? String(cls.gradeName) : ""; + const name = cls.className ? String(cls.className) : ""; + return grade ? `${grade} ${name}` : name; +} + function subjectOf(slot: any, index: number): string { const arr = slot && slot.subjects; if (!Array.isArray(arr) || !arr[index]) return ""; @@ -212,46 +233,59 @@ function reportHeight() { } /* ---------- 课表 ---------- */ +/* ⚠️ 表格类名必须用私有名（tt）：用 my-table 会命中全局 componets/_my_table.scss， + 带进 #c7c7c7 竖线与 th 灰底 ⇒「竖线明显 / 表头与卡头糊成一片 / 横线被压得看不见」 */ .table-wrap { - padding: 0 15px; + padding: 2px 15px 12px; } -.my-table { +.tt { width: 100%; border-collapse: collapse; + table-layout: fixed; + th { height: 44px; font-size: 13px; font-weight: 700; - color: #6e7c87; + color: #344449; text-align: center; + border: 0; + border-bottom: 1px solid #e9edf1; + } + th:first-child, + td:first-child { + width: 46px; } td { height: 52px; - border-top: 1px solid #f2f4f6; + border-bottom: 1px solid #eef1f4; padding: 4px 2px; text-align: center; font-size: 13px; vertical-align: middle; } + tr:last-child td { + border-bottom: 0; + } td.sec { color: #6e7c87; font-weight: 700; } - .cla { - color: #344449; - line-height: 1.35; - } - .sub { - color: #98a2b0; - line-height: 1.35; - font-size: 12px; - } } -/* 空态：沿用原版 no-data-box.svg（插画 + 转曲「暂无数据」文案）。 - 原版规则为 background-size:100px 100px（会压扁），此处取 100px auto 保比例。 */ -.no-data-box { - min-height: 130px; - background: url("../../assets/image/no-data-box.svg") no-repeat 50% 50%; - background-size: 100px auto; + +/* ---------- 空态（模板内联 SVG，不依赖外部图片 / CSS 背景） ---------- */ +.wg-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + min-height: 132px; + padding: 16px 0 20px; + + .txt { + font-size: 12px; + color: #98a2b0; + } }