style: 💄 (settings)优化设置页面布局和样式

- 将底部按钮放入footer插槽中,保留原有的样式

#ICWDUU
This commit is contained in:
zimo493
2025-09-04 16:23:40 +08:00
parent 3208edbb18
commit 6cce9581fb

View File

@@ -107,9 +107,7 @@
</div> </div>
<!-- 操作按钮区域 - 固定到底部 --> <!-- 操作按钮区域 - 固定到底部 -->
<div class="action-footer"> <template #footer>
<div class="action-divider"></div>
<div class="action-card">
<div class="action-buttons"> <div class="action-buttons">
<el-tooltip <el-tooltip
content="复制配置将生成当前设置的代码,覆盖 src/settings.ts 下的 defaultSettings 变量" content="复制配置将生成当前设置的代码,覆盖 src/settings.ts 下的 defaultSettings 变量"
@@ -120,7 +118,6 @@
size="default" size="default"
:icon="copyIcon" :icon="copyIcon"
:loading="copyLoading" :loading="copyLoading"
class="action-btn"
@click="handleCopySettings" @click="handleCopySettings"
> >
{{ copyLoading ? "复制中..." : t("settings.copyConfig") }} {{ copyLoading ? "复制中..." : t("settings.copyConfig") }}
@@ -132,15 +129,13 @@
size="default" size="default"
:icon="resetIcon" :icon="resetIcon"
:loading="resetLoading" :loading="resetLoading"
class="action-btn"
@click="handleResetSettings" @click="handleResetSettings"
> >
{{ resetLoading ? "重置中..." : t("settings.resetConfig") }} {{ resetLoading ? "重置中..." : t("settings.resetConfig") }}
</el-button> </el-button>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </template>
</div>
</el-drawer> </el-drawer>
</template> </template>
@@ -326,37 +321,14 @@ const handleCloseDrawer = () => {
.settings-content { .settings-content {
height: calc(100vh - 120px); /* 减去头部和底部按钮的高度 */ height: calc(100vh - 120px); /* 减去头部和底部按钮的高度 */
padding: 20px; padding: 20px;
padding-bottom: 20px;
overflow-y: auto; overflow-y: auto;
} }
/* 底部操作区域样式 */ /* 底部操作区域样式 */
.action-footer { .action-buttons {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
padding: 0;
background: var(--el-bg-color);
border-top: 1px solid var(--el-border-color-light);
.action-divider {
display: none; /* 移除重复的分割线 */
}
.action-card {
padding: 16px 20px;
margin: 0;
background: var(--el-fill-color-extra-light);
border: none;
border-radius: 0;
.action-buttons {
display: flex; display: flex;
gap: 12px;
.action-btn { & > .el-button {
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
border-radius: 8px; border-radius: 8px;
@@ -367,8 +339,6 @@ const handleCloseDrawer = () => {
transform: translateY(-2px); transform: translateY(-2px);
} }
} }
}
}
} }
/* 主题切换器优化 */ /* 主题切换器优化 */