style: 统一页面按钮样式与尺寸

This commit is contained in:
2026-08-01 19:06:41 +08:00
parent a87fdba4cc
commit 297320446c
8 changed files with 40 additions and 44 deletions
+21
View File
@@ -35,6 +35,27 @@ a:hover {
box-shadow: var(--shadow-soft); box-shadow: var(--shadow-soft);
} }
/* 按钮操作区统一规范:窄屏下操作按钮纵向全宽 */
.action-row .el-button,
.edit-actions .el-button,
.fragment-edit-actions .el-button {
margin: 0;
}
@media (max-width: 768px) {
.action-row,
.edit-actions,
.fragment-edit-actions {
flex-direction: column;
}
.action-row .el-button,
.edit-actions .el-button,
.fragment-edit-actions .el-button {
width: 100%;
}
}
.fade-up-enter-active, .fade-up-enter-active,
.fade-up-leave-active { .fade-up-leave-active {
transition: opacity 0.22s ease, transform 0.22s ease; transition: opacity 0.22s ease, transform 0.22s ease;
+4 -2
View File
@@ -66,7 +66,7 @@ onMounted(() => {
<section class="review-page"> <section class="review-page">
<div class="table-toolbar"> <div class="table-toolbar">
<span class="toolbar-placeholder"></span> <span class="toolbar-placeholder"></span>
<el-button type="success" plain size="small" :loading="loading" @click="loadTasks">刷新</el-button> <el-button type="success" plain :loading="loading" @click="loadTasks">刷新</el-button>
</div> </div>
<div class="summary-grid"> <div class="summary-grid">
@@ -99,6 +99,7 @@ onMounted(() => {
<el-button <el-button
text text
type="success" type="success"
size="small"
:loading="openingTaskNum === row.taskNum" :loading="openingTaskNum === row.taskNum"
@click.stop="openTaskReview(row)" @click.stop="openTaskReview(row)"
> >
@@ -106,7 +107,8 @@ onMounted(() => {
</el-button> </el-button>
<el-button <el-button
text text
type="primary" type="success"
size="small"
@click.stop="router.push(`/review/recall/${row.taskNum}`)" @click.stop="router.push(`/review/recall/${row.taskNum}`)"
> >
回忆复习 回忆复习
+2 -2
View File
@@ -252,8 +252,8 @@ watch(
placeholder="请输入学习内容" placeholder="请输入学习内容"
/> />
<div class="edit-actions"> <div class="edit-actions">
<el-button @click="cancelEdit">取消</el-button> <el-button size="small" @click="cancelEdit">取消</el-button>
<el-button type="success" :loading="saving" @click="saveEdit">保存</el-button> <el-button type="success" size="small" :loading="saving" @click="saveEdit">保存</el-button>
</div> </div>
</div> </div>
<!-- 只读模式 --> <!-- 只读模式 -->
+1 -8
View File
@@ -374,7 +374,6 @@ onMounted(() => {
<section class="recall-page"> <section class="recall-page">
<!-- 顶部操作栏 --> <!-- 顶部操作栏 -->
<div class="page-header"> <div class="page-header">
<el-button size="small" @click="router.back()"> 返回</el-button>
<h2>回忆复习</h2> <h2>回忆复习</h2>
<el-button size="small" @click="loadHistory" v-if="!showHistory"> <el-button size="small" @click="loadHistory" v-if="!showHistory">
历史记录 历史记录
@@ -478,18 +477,16 @@ onMounted(() => {
<div class="panel-actions"> <div class="panel-actions">
<el-button <el-button
v-if="hasCompared" v-if="hasCompared"
size="small"
type="success" type="success"
@click="resetComparison" @click="resetComparison"
> >
返回完整导图 返回完整导图
</el-button> </el-button>
<el-button size="small" @click="standardExpanded = !standardExpanded"> <el-button @click="standardExpanded = !standardExpanded">
{{ standardExpanded ? "折叠" : "展开" }} {{ standardExpanded ? "折叠" : "展开" }}
</el-button> </el-button>
<el-button <el-button
v-if="standardExpanded" v-if="standardExpanded"
size="small"
type="warning" type="warning"
:loading="regenerating" :loading="regenerating"
@click="handleRegenerate" @click="handleRegenerate"
@@ -498,7 +495,6 @@ onMounted(() => {
</el-button> </el-button>
<el-button <el-button
v-if="standardExpanded && !editingStandard" v-if="standardExpanded && !editingStandard"
size="small"
type="primary" type="primary"
@click="startEditStandard" @click="startEditStandard"
> >
@@ -612,9 +608,6 @@ onMounted(() => {
.surface-card { .surface-card {
padding: 20px 22px; padding: 20px 22px;
background: #fff;
border-radius: 8px;
border: 1px solid var(--border-soft, #e0e0e0);
} }
.surface-card h3 { .surface-card h3 {
+3 -14
View File
@@ -663,6 +663,7 @@ onUnmounted(() => {
<el-button <el-button
text text
size="small" size="small"
type="primary"
@click="expectationContent = expectationSaved; expectationDialogVisible = true" @click="expectationContent = expectationSaved; expectationDialogVisible = true"
> >
修改 修改
@@ -749,12 +750,12 @@ onUnmounted(() => {
/> />
<div class="fragment-edit-actions"> <div class="fragment-edit-actions">
<el-button size="small" @click="cancelEditFragment">取消</el-button> <el-button size="small" @click="cancelEditFragment">取消</el-button>
<el-button size="small" type="primary" :loading="savingFragment" @click="saveEditFragment(fragment.id)">保存</el-button> <el-button size="small" type="success" :loading="savingFragment" @click="saveEditFragment(fragment.id)">保存</el-button>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<span class="fragment-content">{{ fragment.content }}</span> <span class="fragment-content">{{ fragment.content }}</span>
<el-button size="small" @click="startEditFragment(fragment)">编辑</el-button> <el-button text type="primary" size="small" @click="startEditFragment(fragment)">编辑</el-button>
</template> </template>
</div> </div>
</article> </article>
@@ -1104,10 +1105,6 @@ onUnmounted(() => {
gap: 8px; gap: 8px;
} }
.action-row .el-button {
margin: 0;
}
.fragments-card { .fragments-card {
padding: 20px; padding: 20px;
} }
@@ -1172,14 +1169,6 @@ onUnmounted(() => {
.info-grid { .info-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.action-row {
flex-direction: column;
}
.action-row .el-button {
width: 100%;
}
} }
/* ---- 历史学习记录 ---- */ /* ---- 历史学习记录 ---- */
+5 -5
View File
@@ -457,12 +457,12 @@ onMounted(() => {
<aside class="surface-card action-card"> <aside class="surface-card action-card">
<div class="block-title">常用操作</div> <div class="block-title">常用操作</div>
<el-button size="large" @click="fetchTasks" :loading="loading">刷新列表</el-button> <el-button @click="fetchTasks" :loading="loading">刷新列表</el-button>
<el-button type="success" size="large" @click="startTask">开始任务</el-button> <el-button type="success" size="large" @click="startTask">开始任务</el-button>
<el-button size="large" @click="addTask">添加任务</el-button> <el-button @click="addTask">添加任务</el-button>
<el-button size="large" @click="changeTask">更新任务</el-button> <el-button @click="changeTask">更新任务</el-button>
<el-button size="large" @click="openWeightsDialog">权重配置</el-button> <el-button @click="openWeightsDialog">权重配置</el-button>
<el-button type="danger" size="large" @click="removeTask">删除任务</el-button> <el-button type="danger" @click="removeTask">删除任务</el-button>
</aside> </aside>
</main> </main>
</div> </div>
+1 -10
View File
@@ -410,7 +410,7 @@ async function previewMaterial() {
<div class="group" v-if="isUpdateMode" v-loading="applicationLoading"> <div class="group" v-if="isUpdateMode" v-loading="applicationLoading">
<div class="application-header"> <div class="application-header">
<h3>应用场景</h3> <h3>应用场景</h3>
<el-button type="primary" @click="openApplicationDialog()">添加应用场景</el-button> <el-button type="success" @click="openApplicationDialog()">添加应用场景</el-button>
</div> </div>
<div class="application-list" v-if="applications.length > 0"> <div class="application-list" v-if="applications.length > 0">
<div class="application-item" v-for="item in applications" :key="item.id"> <div class="application-item" v-for="item in applications" :key="item.id">
@@ -608,15 +608,6 @@ async function previewMaterial() {
padding: 16px; padding: 16px;
} }
.action-row {
flex-direction: column;
}
.action-row .el-button {
width: 100%;
margin: 0;
}
.application-main { .application-main {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
+3 -3
View File
@@ -216,11 +216,11 @@ onMounted(() => {
</div> </div>
</template> </template>
<template #footer> <template #footer>
<el-button v-if="!recallCard.revealed" type="success" @click="revealRecallContent"> <el-button v-if="!recallCard.revealed" type="success" plain @click="revealRecallContent">
回忆好了展开对照 回忆好了展开对照
</el-button> </el-button>
<el-button v-else type="success" @click="openRecallDetail">进入详情页</el-button> <el-button v-else type="success" plain @click="openRecallDetail">进入详情页</el-button>
<el-button type="success" plain @click="goToRecallFromCard">前往回忆复习</el-button> <el-button type="success" @click="goToRecallFromCard">前往回忆复习</el-button>
<el-button @click="recallCard.visible = false">关闭</el-button> <el-button @click="recallCard.visible = false">关闭</el-button>
</template> </template>
</el-dialog> </el-dialog>