修改实验页面设计

web/src/views/ExperimentsView.vue

@@ -713,7 +713,69 @@ onMounted(async () => {
           </div>
         </header>
         <div class="project-group-projects">
+          <el-table v-if="!isStudent" :data="group.projects" class="project-table" size="small">
+            <el-table-column width="46" align="center">
+              <template #default="{ row }">
+                <el-checkbox
+                  v-if="row.status === 'Draft'"
+                  :model-value="selectedProjectIds.includes(row.id)"
+                  @change="toggleProjectSelection(row.id, $event)"
+                  aria-label="选择实验项目"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="实验项目" min-width="220">
+              <template #default="{ row }">
+                <div class="table-project-name">
+                  <b>{{ row.code }} · {{ row.name }}</b>
+                  <small v-if="row.description">{{ row.description }}</small>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="实验课次 / 场次" min-width="280">
+              <template #default="{ row }">
+                <div v-if="row.arrangementMode === 'Centralized' && row.scheduleEntry" class="table-schedule">
+                  <b>第 {{ row.scheduleEntry.projectWeek ?? `${row.scheduleEntry.startWeek}–${row.scheduleEntry.endWeek}` }} 周 · 星期 {{ row.scheduleEntry.dayOfWeek }} · 第 {{ row.scheduleEntry.startPeriod }}–{{ row.scheduleEntry.startPeriod + row.scheduleEntry.periodCount - 1 }} 节</b>
+                  <small>{{ row.scheduleEntry.campusName }} · {{ row.scheduleEntry.buildingName }} {{ row.scheduleEntry.classroomName }}</small>
+                </div>
+                <div v-else-if="row.sessions.length" class="table-schedule">
+                  <b>{{ row.sessions.length }} 个开放场次</b>
+                  <small>{{ row.sessions.map((session: any) => formatSessionTime(session)).join('；') }}</small>
+                </div>
+                <span v-else class="table-muted">尚未安排</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="方式" width="100" align="center">
+              <template #default="{ row }"><el-tag :type="row.arrangementMode === 'Centralized' ? 'primary' : 'success'" effect="plain">{{ modeMeta[row.arrangementMode].label }}</el-tag></template>
+            </el-table-column>
+            <el-table-column label="状态" width="88" align="center">
+              <template #default="{ row }"><el-tag :type="row.status === 'Published' ? 'success' : row.status === 'Closed' ? 'info' : 'warning'">{{ statusLabels[row.status] }}</el-tag></template>
+            </el-table-column>
+            <el-table-column label="操作" width="244" fixed="right" align="right">
+              <template #default="{ row }">
+                <template v-if="row.status === 'Draft'">
+                  <el-button size="small" text @click="openEditProject(row)">编辑</el-button>
+                  <el-button size="small" text type="danger" @click="deleteProject(row)">删除</el-button>
+                  <el-button
+                    size="small"
+                    type="primary"
+                    :disabled="row.arrangementMode === 'Centralized' ? !row.scheduleEntry : !row.sessions.some((item: any) => item.status !== 'Cancelled')"
+                    @click="publishProject(row)"
+                  >发布</el-button>
+                </template>
+                <el-button v-else-if="row.status === 'Published'" size="small" text @click="closeProject(row)">关闭项目</el-button>
+                <el-button
+                  v-if="row.status !== 'Closed' && row.arrangementMode === 'SelfScheduled'"
+                  size="small"
+                  text
+                  type="primary"
+                  @click="openSession(row)"
+                >安排场次</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
       <article
+        v-else
         v-for="project in group.projects"
         :key="project.id"
         class="project-card"
@@ -1306,6 +1368,14 @@ onMounted(async () => {
 .project-group-task { display: grid; justify-items: end; gap: 3px; color: #5c7481; font-size: 11px; text-align: right; }
 .project-group-task b { color: #365364; font-size: 12px; }
 .project-group-projects { display: grid; gap: 0; padding: 0; }
+.project-table { --el-table-border-color: #dce5ea; --el-table-header-bg-color: #f7fafb; --el-table-row-hover-bg-color: #f6fafb; width: 100%; }
+.project-table :deep(th.el-table__cell) { padding: 8px 0; color: #617986; font-size: 11px; font-weight: 650; }
+.project-table :deep(td.el-table__cell) { padding: 9px 0; vertical-align: top; }
+.table-project-name, .table-schedule { display: grid; gap: 4px; min-width: 0; }
+.table-project-name b { color: var(--lab-ink); font-size: 13px; }
+.table-project-name small, .table-schedule small { overflow: hidden; color: #667f8d; font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
+.table-schedule b { color: #365364; font-size: 12px; font-weight: 600; }
+.table-muted { color: #8b9aa4; font-size: 12px; }
 .project-card {
   overflow: hidden;
   border: 0;