From 24ba0d069c8e8d72001d91eb9759bf166739b190 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Mon, 3 Aug 2026 14:16:03 +0800
Subject: [PATCH] feat: show new training modules on student home

---
 src/views/student/index.vue                   | 956 ++++++------------
 .../student-home-new-modules.static.test.cjs  |  17 +
 2 files changed, 324 insertions(+), 649 deletions(-)
 create mode 100644 tests/student-home-new-modules.static.test.cjs

diff --git a/src/views/student/index.vue b/src/views/student/index.vue
index 66f632a..ec9c353 100644
--- a/src/views/student/index.vue
+++ b/src/views/student/index.vue
@@ -1,692 +1,350 @@
-<!--
- * @Author: qinzhenpen qzp1807@126.com
- * @Date: 2025-03-03 14:13:35
- * @LastEditors: qinzhenpen qzp1807@126.com
- * @LastEditTime: 2025-05-16 17:43:18
- * @FilePath: \financial-big-data\src\components\Ai\index.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
 <template>
-  <div class="index app-container">
-    <el-card>
+  <div class="student-home app-container">
+    <el-alert
+      v-if="loadError"
+      class="load-error"
+      type="error"
+      :title="loadError"
+      :closable="false"
+      show-icon
+    />
+
+    <el-card class="dashboard-card score-card" v-loading="loading">
       <template #header>
         <div class="card-header">
-          <span>我的成绩</span>
+          <span>我的实训成绩</span>
+          <small>按当前教学班发布的实训模块统计</small>
         </div>
       </template>
-      <div class="Achievement Achievement1">
-        <div class="left">
-          <div>
-            <div class="AchievementChart" ref="AchievementChartRefs" style="width: 40rem; min-width: none; min-height: 300px"></div>
-          </div>
-          <div class="gradeDetails">
-            <div class="detalis-item">
-              <!-- <img src="../assets/images/旗帜.webp" alt="" /> -->
-              <label>成绩：</label>
-              <span>{{ scoreInfo.totalScore || 0 }}分</span>
-            </div>
-            <div class="detalis-item">
-              <!-- <img src="../assets/images/旗帜.webp" alt="" /> -->
-              <label>排名：</label>
-              <span>{{ scoreInfo.stuRank || "--" }}</span>
-            </div>
+
+      <div v-if="!loadError" class="score-layout">
+        <section class="score-visual" aria-label="模块成绩分布">
+          <div ref="scoreChartRef" class="score-chart"></div>
+          <div class="score-summary">
+            <span class="summary-label">综合成绩</span>
+            <strong>{{ formatScore(report.totalScore) }}</strong>
+            <span class="summary-unit">分</span>
+            <span class="rank-copy">当前排名：--</span>
           </div>
-        </div>
-        <div class="right">
-          <el-table :data="tableData" stripe border style="width: 45rem">
-            <el-table-column type="index" label="序号" align="center" />
-            <el-table-column prop="model" label="项目" align="center" />
-            <el-table-column prop="scoce" label="成绩占比" align="center">
-              <template #default="scope">{{ scope.row.scoce }}%</template>
+        </section>
+
+        <section class="score-table-wrap" aria-label="模块成绩明细">
+          <el-table :data="participatingModules" stripe border class="score-table" empty-text="暂无已发布的实训模块">
+            <el-table-column type="index" label="序号" width="64" align="center" />
+            <el-table-column prop="moduleName" label="实训模块" min-width="210" />
+            <el-table-column label="成绩占比" width="116" align="center">
+              <template #default="scope">{{ formatWeight(scope.row.weight) }}</template>
             </el-table-column>
-            <el-table-column prop="address" label="成绩" align="center">
-              <template #default="scope">
-                {{ scope.row.address || 0 }}
-              </template>
+            <el-table-column label="模块得分" width="110" align="center">
+              <template #default="scope">{{ formatScore(scope.row.score) }}</template>
+            </el-table-column>
+            <el-table-column label="完成进度" width="138" align="center">
+              <template #default="scope">{{ progressText(scope.row) }}</template>
             </el-table-column>
           </el-table>
-        </div>
+        </section>
       </div>
     </el-card>
-    <el-card style="margin-top: 10px">
+
+    <el-card class="dashboard-card progress-card" v-loading="loading">
       <template #header>
         <div class="card-header">
-          <span>我的成绩</span>
+          <span>实训进度概览</span>
+          <small>完成任务越多，模块进度越靠前</small>
         </div>
       </template>
-      <div class="Achievement">
-        <div class="left">
-          <div class="chartMain">
-            <div id="echart3" style="width: 45vw; height: 36.14vh"></div>
+
+      <div v-if="!loadError" class="progress-layout">
+        <section class="learning-time" aria-label="有效学习时间">
+          <div class="time-orbit">
+            <div class="time-value">{{ studyHours }}</div>
+            <div class="time-unit">HRS</div>
           </div>
-        </div>
-        <div class="right">
-          <div class="timeContent">
-            <div class="activeTime">
-              <div class="ring">
-                <div class="ringIn">
-                  <div class="ringText">
-                    <div style="text-align: center; padding-top: 15px">
-                      <div>
-                        {{ totalTime || "0" }}
-                      </div>
-                      <div class="line"></div>
-                      <div>HRS</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="profile">
-                <div class="num"></div>
-                <div class="text">有效时间</div>
-                <div class="text">有效学习时间的投入概况</div>
-              </div>
-            </div>
-            <div class="detail">
-              <div id="echart2" style="width: 11.979vw; height: 21.296vh"></div>
-              <div class="timeList">
-                <div class="listItem">
-                  <img src="@/assets/images/x1.png" alt="" />
-                  <span>市场需求挖掘</span>
-                  <span>{{ statistic.marketResearchTime || "0" }}分钟</span>
-                </div>
-                <div class="listItem">
-                  <img src="@/assets/images/x2.png" alt="" />
-                  <span>产品规划</span>
-                  <span>{{ statistic.productPlanningTime || "0" }}分钟</span>
-                </div>
-                <div class="listItem">
-                  <img src="@/assets/images/x3.png" alt="" />
-                  <span>产品投放测试</span>
-                  <span>{{ statistic.productLaunchTestTime || "0" }}分钟</span>
-                </div>
-
-                <div class="listItem">
-                  <img src="@/assets/images/x4.png" alt="" />
-                  <span>供应渠道管理</span>
-                  <span>{{ statistic.supplyChannelTime || "0" }}分钟</span>
-                </div>
-                <div class="listItem">
-                  <img src="@/assets/images/x5.png" alt="" />
-                  <span>产品评估与考核</span>
-                  <span>{{ statistic.productEvaluationTime || "0" }} 分钟</span>
-                </div>
-              </div>
+          <strong>有效学习时间</strong>
+          <span>累计投入 {{ totalStudyMinutes }} 分钟</span>
+        </section>
+
+        <section class="progress-chart-wrap" aria-label="模块任务完成情况">
+          <div ref="progressChartRef" class="progress-chart"></div>
+        </section>
+
+        <section class="module-progress-list" aria-label="模块实训进度列表">
+          <article v-for="(module, index) in participatingModules" :key="module.moduleName" class="module-progress-item">
+            <div class="module-progress-head">
+              <span class="module-color" :style="{ backgroundColor: moduleColor(index) }"></span>
+              <strong>{{ module.moduleName }}</strong>
+              <span>{{ progressText(module) }}</span>
             </div>
-          </div>
-        </div>
+            <el-progress
+              :percentage="progressPercent(module)"
+              :stroke-width="8"
+              :show-text="false"
+              :color="moduleColor(index)"
+            />
+          </article>
+        </section>
       </div>
     </el-card>
   </div>
 </template>
+
 <script setup>
-import useUserStore from "@/store/modules/user";
-const userStore = useUserStore();
 import * as echarts from "echarts";
+import useUserStore from "@/store/modules/user";
 import * as indexApi from "@/api/index";
-const AchievementChartRefs = ref(null);
-const statistic = ref({});
-const currentTeachingClassId = ref("");
-const scoreTrend = ref([
-  {
-    title: "我",
-    scores: [0, 0, 0, 0, 0],
-    times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
-  },
-  {
-    title: "第一名",
-    scores: [0, 0, 0, 0, 0],
-    times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
-  },
-  {
-    title: "最后一名",
-    scores: [0, 0, 0, 0, 0],
-    times: ["2025-05-09", "2025-05-10", "2025-05-11", "2025-05-12", "2025-05-13"],
-  },
-]);
-const list = ref([]);
-const tableData = ref([
-  {
-    date: "2016-05-03",
-    model: "市场需求挖掘",
-    address: "20",
-    scoce: "20",
-    key: "oneScore",
-    key1: "oneWeight",
-  },
-  {
-    date: "2016-05-02",
-    model: "产品规划",
-    address: "20",
-    scoce: "20",
-    key: "twoScore",
-    key1: "twoWeight",
-  },
-  {
-    date: "2016-05-04",
-    model: "产品投放测试",
-    scoce: "20",
-    address: "20",
-    key: "threeScore",
-    key1: "threeWeight",
-  },
-  {
-    date: "2016-05-01",
-    model: "供应渠道管理",
-    address: "20",
-    scoce: "20",
-    key: "fourScore",
-    key1: "fourWeight",
-  },
-  {
-    date: "2016-05-01",
-    model: "产品评估与考核",
-    address: "20",
-    scoce: "15",
-    key: "fiveScore",
-    key1: "fiveWeight",
-  },
-]);
-const corList = ["#795ef3", "#419af2", "#f7b844", "red", "pink"];
-const scoreInfo = ref({});
-const timeKey = ref({
-  marketResearchTime: 0,
-  productPlanningTime: 0,
-  productLaunchTestTime: 0,
-  supplyChannelTime: 0,
-  productEvaluationTime: 0,
-});
-// 时间总和
-const totalTime = computed(() => {
-  let time = 0;
-  for (let key in timeKey.value) {
-    time += timeKey.value[key];
-  }
-  return time;
-});
-const getgrade = () => {
-  let myChart = echarts.init(AchievementChartRefs.value);
-  let option;
-  option = {
-    legend: {
-      orient: "vertical",
-      right: 30,
-      top: "40%",
-      bottom: 20,
-    },
-    series: [
-      {
-        name: "Access From",
-        type: "pie",
-        radius: "80%",
-        center: ["35%", "50%"],
-        data: list.value,
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: "rgba(0, 0, 0, 0.5)",
-          },
-        },
-      },
-    ],
-  };
-  option && myChart.setOption(option);
-  // 添加窗口大小变化监听
-  const handleResize = () => {
-    myChart.resize();
-  };
-  window.addEventListener("resize", handleResize);
-  // 在组件卸载时移除监听（Vue 3 示例）
-  onUnmounted(() => {
-    window.removeEventListener("resize", handleResize);
-    myChart.dispose(); // 清理图表实例
-  });
+
+const userStore = useUserStore();
+const scoreChartRef = ref(null);
+const progressChartRef = ref(null);
+const report = ref({ totalScore: 0, modules: [] });
+const studyTime = ref({});
+const loading = ref(true);
+const loadError = ref("");
+
+const MODULE_COLORS = ["#6958e7", "#3698ee", "#ffb83e", "#ff6f4a", "#45b982", "#39b8ce"];
+
+let scoreChart;
+let progressChart;
+
+const participatingModules = computed(() =>
+  (report.value.modules || []).filter((module) => module && module.participating !== false)
+);
+
+const totalStudyMinutes = computed(() =>
+  Object.values(studyTime.value || {}).reduce((total, value) => total + (Number(value) || 0), 0)
+);
+
+const studyHours = computed(() => (totalStudyMinutes.value / 60).toFixed(1));
+
+const formatScore = (value) => Number(value || 0).toFixed(2).replace(/\.00$/, "");
+const formatWeight = (weight) => `${(Number(weight || 0) * 100).toFixed(0)}%`;
+const moduleColor = (index) => MODULE_COLORS[index % MODULE_COLORS.length];
+const progressPercent = (module) => {
+  const total = Number(module.totalTaskCount) || 0;
+  const completed = Number(module.completedTaskCount) || 0;
+  return total > 0 ? Math.min(100, Math.round((completed / total) * 100)) : 0;
 };
-const echart3Init = () => {
-  var chartDom = document.getElementById("echart3");
-  var myChart = echarts.init(chartDom);
-  console.log(userStore.userInfo, "userStore.userInfo");
-  var option;
-  option = {
-    // title: {
-    //     text: "Stacked Area Chart"
-    // },
-    tooltip: {
-      trigger: "axis",
-      axisPointer: {
-        type: "cross",
-        label: {
-          backgroundColor: "#6a7985",
-        },
-      },
-    },
-    legend: {
-      data: ["第一名", "我的成绩", "最后一名"],
-      top: 10,
-    },
+const progressText = (module) => `${Number(module.completedTaskCount) || 0}/${Number(module.totalTaskCount) || 0}`;
 
-    grid: {
-      left: "3%",
-      right: "4%",
-      bottom: "3%",
-      containLabel: true,
-    },
-    xAxis: [
-      {
-        type: "category",
-        boundaryGap: false,
-        data: scoreTrend.value[0].times,
-        // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
-      },
-    ],
-    yAxis: [
-      {
-        type: "value",
-      },
-    ],
-    series: [
-      {
-        name: "最后一名",
-        type: "line",
-        // stack: "Total",
-        areaStyle: {
-          color: {
-            type: "linear",
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: "rgba(66,209,216,0.6)", // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: "rgba(255,255,255,0)", // 100% 处的颜色
-              },
-            ],
-            global: false, // 缺省为 false
-          },
-        },
-        lineStyle: {
-          color: "#42D1D8",
-        },
-        itemStyle: {
-          color: "#42D1D8",
-        },
-        emphasis: {
-          focus: "series",
-        },
-        data: scoreTrend.value[2].scores,
-        // data: [120, 132, 101, 134, 90, 230, 210]
-      },
-      {
-        name: "我的成绩",
-        type: "line",
-        // stack: "Total",
-        areaStyle: {
-          color: {
-            type: "linear",
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: "rgba(133,64,251,0.6)", // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: "rgba(255,255,255,0)", // 100% 处的颜色
-              },
-            ],
-            global: false, // 缺省为 false
-          },
-        },
-        lineStyle: {
-          color: "#8540FB",
-        },
-        itemStyle: {
-          color: "#8540FB",
-        },
-        emphasis: {
-          focus: "series",
-        },
-        data: scoreTrend.value[0].scores,
-        // data: [220, 182, 191, 234, 290, 330, 310]
-      },
-      {
-        name: "第一名",
-        type: "line",
-        // stack: "Total",
-        areaStyle: {
-          color: {
-            type: "linear",
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: "rgba(255,185,0,0.6)", // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: "rgba(255,255,255,0)", // 100% 处的颜色
-              },
-            ],
-            global: false, // 缺省为 false
-          },
-        },
-        lineStyle: {
-          color: "#FFB900",
-        },
-        itemStyle: {
-          color: "#FFB900",
-        },
-        emphasis: {
-          focus: "series",
-        },
-        data: scoreTrend.value[1].scores,
-        // data: [220, 182, 191, 234, 290, 330, 310]
-      },
-    ],
-  };
-  option && myChart.setOption(option);
-  // 添加窗口大小变化监听
-  const handleResize = () => {
-    myChart.resize();
-  };
-  window.addEventListener("resize", handleResize);
-  // 在组件卸载时移除监听（Vue 3 示例）
-  onUnmounted(() => {
-    window.removeEventListener("resize", handleResize);
-    myChart.dispose(); // 清理图表实例
-  });
+const renderScoreChart = () => {
+  if (!scoreChartRef.value) return;
+  scoreChart = scoreChart || echarts.init(scoreChartRef.value);
+  scoreChart.setOption({
+    tooltip: { trigger: "item", valueFormatter: (value) => `${formatScore(value)} 分` },
+    legend: { orient: "vertical", right: 8, top: "middle", itemWidth: 12, itemHeight: 12 },
+    series: [{
+      name: "模块得分",
+      type: "pie",
+      radius: ["42%", "72%"],
+      center: ["34%", "50%"],
+      avoidLabelOverlap: true,
+      label: { formatter: "{b}" },
+      data: participatingModules.value.map((module, index) => ({
+        name: module.moduleName,
+        value: Number(module.score) || 0,
+        itemStyle: { color: moduleColor(index) }
+      }))
+    }]
+  }, true);
 };
-const echart2Init = () => {
-  var chartDom = document.getElementById("echart2");
-  var myChart = echarts.init(chartDom);
-  var option;
-  option = {
-    title: {
-      text: "时间占比",
-      left: "center",
-      top: "center",
-      textStyle: {
-        fontSize: 14,
-        fontWeight: "normal",
-      },
-    },
-    tooltip: {
-      trigger: "item",
-    },
-    legend: {
-      top: "5%",
-      left: "center",
-      show: false,
+
+const renderProgressChart = () => {
+  if (!progressChartRef.value) return;
+  progressChart = progressChart || echarts.init(progressChartRef.value);
+  const modules = participatingModules.value;
+  progressChart.setOption({
+    tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+    legend: { top: 0, data: ["已完成", "待完成"] },
+    grid: { left: 24, right: 24, top: 40, bottom: 22, containLabel: true },
+    xAxis: { type: "value", minInterval: 1 },
+    yAxis: {
+      type: "category",
+      inverse: true,
+      axisLabel: { width: 132, overflow: "truncate" },
+      data: modules.map((module) => module.moduleName)
     },
     series: [
       {
-        name: "时间占比",
-        type: "pie",
-        radius: ["40%", "70%"],
-        avoidLabelOverlap: false,
-        label: {
-          show: false,
-          position: "center",
-        },
-        emphasis: {
-          // label: {
-          //     show: true,
-          //     formatter: '时间占比'
-          //     // fontSize: 40,
-          //     // fontWeight: "bold"
-          // }
-        },
-        labelLine: {
-          show: false,
-        },
-        data: [
-          { value: 0, name: "收益与风险" },
-          { value: 0, name: "现值和价值评估" },
-          { value: 0, name: "投资决策" },
-          { value: 0, name: "融资决策" },
-          { value: 0, name: "营运资本管理" },
-          { value: 0, name: "财务分析及估值" },
-          { value: 0, name: "财务预警及风险管理" },
-        ],
+        name: "已完成",
+        type: "bar",
+        stack: "tasks",
+        barMaxWidth: 18,
+        itemStyle: { color: "#3e9cf4", borderRadius: [9, 0, 0, 9] },
+        data: modules.map((module) => Number(module.completedTaskCount) || 0)
       },
-    ],
-  };
-  option && myChart.setOption(option);
-};
-const loadCurrentTeachingClassId = async () => {
-  const res = await indexApi.getCurrentTeachingClass({ userId: userStore.userInfo.userId });
-  currentTeachingClassId.value = res?.data?.schoolClassId || "";
-  return currentTeachingClassId.value;
+      {
+        name: "待完成",
+        type: "bar",
+        stack: "tasks",
+        barMaxWidth: 18,
+        itemStyle: { color: "#e8eef8", borderRadius: [0, 9, 9, 0] },
+        data: modules.map((module) => Math.max(0, (Number(module.totalTaskCount) || 0) - (Number(module.completedTaskCount) || 0)))
+      }
+    ]
+  }, true);
 };
-const getScoreTrend = async () => {
-  const classId = currentTeachingClassId.value || (await loadCurrentTeachingClassId());
-  if (!classId) return;
-  indexApi
-    .getRouters({
-      userId: userStore.userInfo.userId,
-      classId,
-      schoolId: userStore.userInfo.schoolId,
-    })
-    .then((res) => {
-      if(!res.data) return;
-      scoreTrend.value = res.data;
-      echart3Init();
-    });
+
+const renderCharts = () => {
+  renderScoreChart();
+  renderProgressChart();
 };
-// 查询学生权重
-const getwight = async () => {
-  const classId = currentTeachingClassId.value || (await loadCurrentTeachingClassId());
-  if (!classId) return;
-  indexApi
-    .getStuWeightScore({
-      userId: userStore.userInfo.userId,
-      classId,
-      schoolId: userStore.userInfo.schoolId,
-    })
-    .then((res) => {
-      if (!res.data) return;
-      scoreInfo.value = res.data ;
-      tableData.value.forEach((item) => {
-        item.scoce = res.data[item.key1] * 100;
-        item.address = res.data[item.key];
-      });
-      list.value = tableData.value.map((item, index) => ({
-        name: item.model,
-        value: [item.address],
-        itemStyle: { color: corList[index] },
-      }));
-      console.log(list.value, "list");
-      getgrade();
-    });
+
+const resizeCharts = () => {
+  scoreChart?.resize();
+  progressChart?.resize();
 };
-// 查看学习时间
-const getStudyTime = () => {
-  indexApi
-    .getStudyTime({
-      userId: userStore.userInfo.userId,
-    })
-    .then((res) => {
-      if (!res.data) return;
-      statistic.value = res.data;
-      Object.keys(res.data).forEach((key) => {
-        if (key in timeKey.value) {
-          timeKey.value[key] = res.data[key];
-        }
-      });
-    });
+
+const loadDashboard = async () => {
+  loading.value = true;
+  loadError.value = "";
+  const [reportResult, timeResult] = await Promise.allSettled([
+    indexApi.getCurrentExperimentReport(),
+    indexApi.getStudyTime({ userId: userStore.userInfo.userId })
+  ]);
+
+  if (reportResult.status !== "fulfilled") {
+    loadError.value = "新版实训报告加载失败，请刷新页面后重试。";
+    loading.value = false;
+    return;
+  }
+
+  report.value = reportResult.value?.data || { totalScore: 0, modules: [] };
+  studyTime.value = timeResult.status === "fulfilled" ? (timeResult.value?.data || {}) : {};
+  loading.value = false;
+  await nextTick();
+  renderCharts();
 };
 
 onMounted(() => {
-  getwight();
-  getScoreTrend();
-  getStudyTime();
-  echart2Init();
-  console.log(userStore.userInfo, "54455445");
+  window.addEventListener("resize", resizeCharts);
+  loadDashboard();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", resizeCharts);
+  scoreChart?.dispose();
+  progressChart?.dispose();
 });
 </script>
+
 <style lang="scss" scoped>
-.app-container {
-  background: #fff;
+.student-home {
+  min-height: calc(100vh - 70px);
+  background: #f5f8fd;
+  padding: 20px;
 }
-.index {
-  height: calc(100vh - 70px);
-  // padding: 20px 40px;
-  .Achievement {
-    display: flex;
-    .left {
-      display: flex;
-      flex: 1;
-      .AchievementChart {
-        border-right: 2px dashed #e4e7ed;
-      }
-      .gradeDetails {
-        padding-left: 20px;
-        .detalis-item {
-          label {
-            display: inline-block;
-            width: 3rem !important;
-            margin-left: 0.8rem;
-          }
-          span {
-            font-family: Source Han Sans CN;
-            font-weight: 400;
-            color: #3c38b8;
-          }
-          margin-bottom: 1rem;
-        }
-      }
-    }
-    .right {
-      padding-top: 20px;
-      // float: right;
-      .timeContent {
-        display: flex;
-        align-items: center;
-        .detail {
-          display: flex;
-          align-items: center;
-          margin-top: 15px;
-          height: 31vh;
-          border-radius: 10px;
-          border: 1px solid #3c38b8;
-          margin-left: 10px;
-          padding: 10px;
-          .listItem {
-            width: 13vw;
-            display: flex;
-            align-items: center;
-            margin-right: 30px;
-            position: relative;
-            span {
-              margin-top: -10px;
-            }
-            span:nth-of-type(2) {
-              position: absolute;
-              right: 0;
-              color: #3c38b8;
-              font-weight: bold;
-              font-size: 16px;
-            }
-          }
-        }
-      }
-      .activeTime {
-        width: 160px;
-        min-width: 160px;
-        // width: 8.333vw;
-        height: 240px;
-        background: url("@/assets/images/有效时间.png");
-        background-size: 160px 240px;
-        margin-top: 15px;
-        padding-top: 20px;
-        .ring {
-          margin: 0 auto;
-          width: 100px;
-          height: 100px;
-          background: #b2d6fb;
-          border-radius: 50%;
-          padding-top: 4px;
-          .ringIn {
-            width: 92px;
-            height: 92px;
-            background: #64acf8;
-            border-radius: 50%;
-            margin-left: 4px;
-            padding-top: 7px;
-            .ringText {
-              width: 78px;
-              height: 78px;
-              background: #fff;
-              border-radius: 50%;
-              margin-left: 7px;
-              font-weight: bold;
-              font-size: 17px;
-              color: #3c38b8;
-              .line {
-                width: 50px;
-                height: 1px;
-                border-bottom: 1px solid #4568ee;
-                margin: 0 auto;
-                margin-bottom: 3px;
-                margin-top: 3px;
-              }
-            }
-          }
-        }
-        .profile {
-          text-align: center;
-          margin-top: 10px;
-          margin: 0px 5px;
-          .num {
-            font-weight: bold;
-            font-size: 35px;
-            color: #ffeec0;
-            height: 35px;
-          }
-          .text {
-            color: #fff;
-            line-height: 23px;
-          }
-        }
-      }
-    }
-  }
-  .Achievement1 {
-    display: flex;
-    .left {
-      display: flex;
-      .AchievementChart {
-        border-right: 2px dashed #e4e7ed;
-      }
-      .gradeDetails {
-        padding-left: 20px;
-        .detalis-item {
-          label {
-            display: inline-block;
-            width: 3rem !important;
-            margin-left: 0.8rem;
-          }
-          span {
-            font-family: Source Han Sans CN;
-            font-weight: 400;
-            color: #3c38b8;
-          }
-          margin-bottom: 1rem;
-        }
-      }
-    }
-  }
+
+.load-error { margin-bottom: 14px; }
+
+.dashboard-card {
+  margin-bottom: 16px;
+  border: 0;
+  box-shadow: 0 10px 30px rgba(37, 77, 135, 0.08);
+
+  :deep(.el-card__header) { padding: 17px 20px; }
+}
+
+.card-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+
+  span { color: #1d2b4a; font-size: 18px; font-weight: 700; }
+  small { color: #8a98af; font-size: 13px; }
+}
+
+.score-layout { display: grid; grid-template-columns: minmax(400px, 0.9fr) minmax(540px, 1.3fr); min-height: 330px; }
+
+.score-visual {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  border-right: 1px dashed #d8e2f1;
+}
+
+.score-chart { width: 100%; min-height: 330px; }
+
+.score-summary {
+  position: absolute;
+  left: 28px;
+  top: 26px;
+  display: flex;
+  flex-direction: column;
+  color: #72809a;
+
+  strong { color: #5645d5; font-size: 34px; line-height: 1.1; }
+  .summary-unit { color: #5645d5; font-weight: 600; }
+  .rank-copy { margin-top: 18px; font-size: 13px; }
+}
+
+.summary-label { margin-bottom: 4px; font-size: 13px; }
+.score-table-wrap { display: flex; align-items: center; min-width: 0; padding: 8px 0 8px 24px; }
+.score-table { width: 100%; }
+
+.progress-layout { display: grid; grid-template-columns: 190px minmax(370px, 1fr) minmax(320px, 0.9fr); gap: 24px; align-items: stretch; }
+
+.learning-time {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 270px;
+  color: #fff;
+  border-radius: 14px;
+  background: linear-gradient(150deg, #5fa9fa 0%, #387ee2 100%);
+  box-shadow: 0 14px 24px rgba(57, 126, 226, 0.24);
+
+  strong { margin-top: 18px; font-size: 17px; }
+  span { margin-top: 7px; font-size: 13px; opacity: 0.88; }
+}
+
+.time-orbit {
+  display: grid;
+  place-content: center;
+  width: 108px;
+  height: 108px;
+  text-align: center;
+  border: 4px solid rgba(255, 255, 255, 0.4);
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.16);
+}
+
+.time-value { font-size: 25px; font-weight: 800; line-height: 1; }
+.time-unit { margin-top: 5px; font-size: 13px; letter-spacing: 0.08em; }
+.progress-chart-wrap { min-width: 0; }
+.progress-chart { min-height: 270px; width: 100%; }
+
+.module-progress-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 14px;
+  min-width: 0;
+  padding: 8px 4px;
+}
+
+.module-progress-item { min-width: 0; }
+.module-progress-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: #6f7b91; font-size: 13px; }
+.module-progress-head strong { flex: 1; overflow: hidden; color: #273858; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
+.module-color { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
+
+@media (max-width: 1320px) {
+  .score-layout { grid-template-columns: 1fr; }
+  .score-visual { border-right: 0; border-bottom: 1px dashed #d8e2f1; }
+  .score-table-wrap { padding: 20px 0 0; }
+  .progress-layout { grid-template-columns: 180px 1fr; }
+  .module-progress-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 760px) {
+  .student-home { padding: 12px; }
+  .card-header { align-items: flex-start; flex-direction: column; }
+  .score-visual { min-height: 290px; }
+  .score-chart { min-height: 290px; }
+  .score-summary { left: 18px; top: 18px; }
+  .progress-layout { grid-template-columns: 1fr; }
+  .learning-time { min-height: 210px; }
+  .module-progress-list { grid-column: auto; grid-template-columns: 1fr; }
 }
 </style>
diff --git a/tests/student-home-new-modules.static.test.cjs b/tests/student-home-new-modules.static.test.cjs
new file mode 100644
index 0000000..553c3c1
--- /dev/null
+++ b/tests/student-home-new-modules.static.test.cjs
@@ -0,0 +1,17 @@
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+const root = path.resolve(__dirname, '..');
+const page = fs.readFileSync(path.join(root, 'src/views/student/index.vue'), 'utf8');
+
+assert(/getCurrentExperimentReport/.test(page));
+assert(/participatingModules/.test(page));
+assert(/completedTaskCount/.test(page));
+assert(/totalTaskCount/.test(page));
+assert(/moduleName/.test(page));
+assert(!/getStuWeightScore\(/.test(page));
+assert(!/getRouters\(/.test(page));
+assert(!/市场需求挖掘|产品投放测试|供应渠道管理|产品评估与考核/.test(page));
+
+console.log('student home new module static checks passed');