fix: 大幅缩减表格列宽度,启用 fixed 布局,防止超出视口

This commit is contained in:
lt
2026-04-27 11:11:09 +08:00
parent 08e5df6ab7
commit 678314682e
+10 -10
View File
@@ -89,7 +89,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="currentPage === 'topics'"> <div v-if="currentPage === 'topics'" style="max-width: 100vw; overflow-x: auto;">
<div class="flex justify-between items-center mb-6"><h2 class="text-2xl font-bold text-gray-800">📋 选题管理</h2></div> <div class="flex justify-between items-center mb-6"><h2 class="text-2xl font-bold text-gray-800">📋 选题管理</h2></div>
<div class="card mb-6"><div class="flex flex-wrap gap-2 items-center"> <div class="card mb-6"><div class="flex flex-wrap gap-2 items-center">
<el-button type="primary" size="small" @click="refreshAll">🔄 批量刷新</el-button> <el-button type="primary" size="small" @click="refreshAll">🔄 批量刷新</el-button>
@@ -107,17 +107,17 @@
<div class="card"> <div class="card">
<el-table :data="filteredTopics" style="width: 100%; max-width: 100%;"> stripe v-loading="loadingTable" :row-key="topic => topic.id" @selection-change="selectedTopicIds = $event"> <el-table :data="filteredTopics" style="width: 100%; max-width: 100%;"> stripe v-loading="loadingTable" :row-key="topic => topic.id" @selection-change="selectedTopicIds = $event">
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="ID" width="80" fixed></el-table-column> <el-table-column prop="id" label="ID" width="60" fixed></el-table-column>
<el-table-column prop="title" label="标题" min-width="300"></el-table-column> <el-table-column prop="title" label="标题" min-width="200"></el-table-column>
<el-table-column prop="field" label="领域" width="120"></el-table-column> <el-table-column prop="field" label="领域" width="100"></el-table-column>
<el-table-column prop="priority_score" label="优先级" width="80"><template #default="scope"><el-tag :type="getPriorityType(scope.row.priority_score)" size="small">{{ scope.row.priority_score }}</el-tag></template></el-table-column> <el-table-column prop="priority_score" label="优先级" width="80"><template #default="scope"><el-tag :type="getPriorityType(scope.row.priority_score)" size="small">{{ scope.row.priority_score }}</el-tag></template></el-table-column>
<el-table-column prop="status" label="状态" width="100"><template #default="scope"><span class="status-badge"><span class="status-dot" :class="getStatusClass(scope.row.status)"></span>{{ scope.row.status }}</span></template></el-table-column> <el-table-column prop="status" label="状态" width="100"><template #default="scope"><span class="status-badge"><span class="status-dot" :class="getStatusClass(scope.row.status)"></span>{{ scope.row.status }}</span></template></el-table-column>
<el-table-column prop="compliance_score" label="合规分" width="100"><template #default="scope"><el-progress :percentage="scope.row.compliance_score || 0" :format="() => scope.row.compliance_score || '-'" :stroke-width="15"></el-progress></template></el-table-column> <el-table-column prop="compliance_score" label="合规分" width="100"><template #default="scope"><el-progress :percentage="scope.row.compliance_score || 0" :format="() => scope.row.compliance_score || '-'" :stroke-width="15"></el-progress></template></el-table-column>
<el-table-column prop="created_at" label="创建时间" width="160"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column> <el-table-column prop="created_at" label="创建时间" width="140"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column>
<el-table-column prop="generated_at" label="创作时间" width="160"><template #default="scope">{{ scope.row.generated_at ? formatDate(scope.row.generated_at) : '-' }}</template></el-table-column> <el-table-column prop="generated_at" label="创作时间" width="140"><template #default="scope">{{ scope.row.generated_at ? formatDate(scope.row.generated_at) : '-' }}</template></el-table-column>
<el-table-column prop="published_at" label="发布时间" width="160"><template #default="scope">{{ scope.row.published_at ? formatDate(scope.row.published_at) : '-' }}</template></el-table-column> <el-table-column prop="published_at" label="发布时间" width="140"><template #default="scope">{{ scope.row.published_at ? formatDate(scope.row.published_at) : '-' }}</template></el-table-column>
<el-table-column prop="updated_at" label="更新时间" width="160"><template #default="scope">{{ formatDate(scope.row.updated_at) }}</template></el-table-column> <el-table-column prop="updated_at" label="更新时间" width="140"><template #default="scope">{{ formatDate(scope.row.updated_at) }}</template></el-table-column>
<el-table-column label="操作" width="220" fixed="right"> <el-table-column label="操作" width="200" fixed="right">
<template #default="scope"> <template #default="scope">
<div class="flex gap-1 flex-wrap"> <div class="flex gap-1 flex-wrap">
<el-button size="small" @click="openPreview(scope.row)" type="primary">预览</el-button> <el-button size="small" @click="openPreview(scope.row)" type="primary">预览</el-button>
@@ -148,7 +148,7 @@
<div class="card"> <div class="card">
<div class="flex justify-between items-center mb-4"><h3 class="text-lg font-bold">用户列表</h3><el-button type="primary" @click="openCreateUserModal">+ 新建用户</el-button></div> <div class="flex justify-between items-center mb-4"><h3 class="text-lg font-bold">用户列表</h3><el-button type="primary" @click="openCreateUserModal">+ 新建用户</el-button></div>
<el-table :data="users" stripe v-loading="loadingUsers"> <el-table :data="users" stripe v-loading="loadingUsers">
<el-table-column prop="id" label="ID" width="80"></el-table-column> <el-table-column prop="id" label="ID" width="60"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column> <el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="role" label="角色" width="100"><template #default="scope"><el-tag :type="scope.row.role === 'admin' ? 'danger' : 'info'">{{ scope.row.role }}</el-tag></template></el-table-column> <el-table-column prop="role" label="角色" width="100"><template #default="scope"><el-tag :type="scope.row.role === 'admin' ? 'danger' : 'info'">{{ scope.row.role }}</el-tag></template></el-table-column>
<el-table-column prop="created_at" label="创建时间" width="180"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column> <el-table-column prop="created_at" label="创建时间" width="180"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column>