fix: 终极布局修复 - 表格内部滚动,操作列固定右侧,总宽约1000px

This commit is contained in:
lt
2026-04-27 11:14:48 +08:00
parent 678314682e
commit be091287b8
+13 -13
View File
@@ -89,7 +89,7 @@
</div>
</div>
</div>
<div v-if="currentPage === 'topics'" style="max-width: 100vw; overflow-x: auto;">
<div v-if="currentPage === 'topics'" class="relative" style="width: 100%; overflow: hidden;">
<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">
<el-button type="primary" size="small" @click="refreshAll">🔄 批量刷新</el-button>
@@ -107,17 +107,17 @@
<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-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="ID" width="60" fixed></el-table-column>
<el-table-column prop="title" label="标题" min-width="200"></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="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="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="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="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="140"><template #default="scope">{{ formatDate(scope.row.updated_at) }}</template></el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<el-table-column prop="id" label="ID" width="50" fixed></el-table-column>
<el-table-column prop="title" label="标题" min-width="150"></el-table-column>
<el-table-column prop="field" label="领域" width="80"></el-table-column>
<el-table-column prop="priority_score" label="优先级" width="60"><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="80"><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="80"><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="120"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column>
<el-table-column prop="generated_at" label="创作时间" width="120"><template #default="scope">{{ scope.row.generated_at ? formatDate(scope.row.generated_at) : '-' }}</template></el-table-column>
<el-table-column prop="published_at" label="发布时间" width="120"><template #default="scope">{{ scope.row.published_at ? formatDate(scope.row.published_at) : '-' }}</template></el-table-column>
<el-table-column prop="updated_at" label="更新时间" width="120"><template #default="scope">{{ formatDate(scope.row.updated_at) }}</template></el-table-column>
<el-table-column label="操作" width="180" fixed="right">
<template #default="scope">
<div class="flex gap-1 flex-wrap">
<el-button size="small" @click="openPreview(scope.row)" type="primary">预览</el-button>
@@ -148,7 +148,7 @@
<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>
<el-table :data="users" stripe v-loading="loadingUsers">
<el-table-column prop="id" label="ID" width="60"></el-table-column>
<el-table-column prop="id" label="ID" width="50"></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="created_at" label="创建时间" width="180"><template #default="scope">{{ formatDate(scope.row.created_at) }}</template></el-table-column>