xuans/Smail
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(security): 彻底去除下方多余说明板块并强化顶部新增按钮实心主题色
Some checks are pending
Security Checks / security (push) Waiting to run
Details

Browse Source
This commit is contained in:
smail 2026-09-13 23:49:57 +08:00
parent 133ffdc542
commit 0f8093c7f1
2 changed files with 36 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.css
View File

@ -58,8 +58,28 @@
gap: 10px;
}
.btn-primary-action {
font-weight: 600;
/* 核心主要操作按钮：高对比度实心显色，杜绝半透明或虚化 */
.btn-primary-action,
.btn-primary-action.el-button--primary {
background-color: var(--pm-primary-color) !important;
border-color: var(--pm-primary-color) !important;
color: #ffffff !important;
font-weight: 600 !important;
opacity: 1 !important;
box-shadow: 0 2px 6px rgba(0, 113, 227, 0.25);
transition: all 0.2s ease;
}
.btn-primary-action.el-button--primary:hover {
background-color: var(--pm-primary-hover, #0077ed) !important;
border-color: var(--pm-primary-hover, #0077ed) !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 113, 227, 0.35);
}
.btn-primary-action.el-button--primary:active {
transform: translateY(0);
}
/* 卡片内容区域 */
@ -253,6 +273,10 @@
color: var(--pm-text-primary);
}
.btn-card-copy {
font-weight: 600;
}
.proto-fields {
display: flex;
flex-direction: column;
@ -287,67 +311,6 @@
font-weight: 700;
}
/* 模块 3：配置提示与常见问题卡片 */
.instructions-card {
background: var(--pm-bg-secondary);
}
.instructions-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.instruct-item {
display: flex;
gap: 12px;
padding: 12px 14px;
background: var(--pm-bg-primary);
border: 1px solid var(--pm-border-color);
border-radius: var(--pm-radius-sm);
}
.instruct-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: color-mix(in srgb, var(--pm-primary-color) 16%, var(--pm-bg-secondary));
color: var(--pm-primary-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
}
.instruct-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.instruct-title {
font-size: 13px;
font-weight: 700;
color: var(--pm-text-primary);
}
.instruct-desc {
font-size: 12px;
line-height: 1.5;
color: var(--pm-text-secondary);
}
.instruct-desc code {
padding: 1px 4px;
border-radius: 3px;
background: color-mix(in srgb, var(--pm-primary-color) 10%, var(--pm-bg-secondary));
color: var(--pm-primary-color);
font-family: monospace;
}
/* 弹窗通用紧凑样式 */
.compact-dialog .dialog-tip {
margin: 0 0 14px;
@ -363,8 +326,7 @@
}
@media (max-width: 960px) {
.proto-grid,
.instructions-content {
.proto-grid {
grid-template-columns: 1fr;
}
.card-header-bar {

47
frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="third-party-authorization" v-loading="loading">
<section class="authorization-section">
<!-- 模块 1：客户端与专属授权码管理卡片 -->
<!-- 客户端与专属授权码管理卡片 -->
<div class="panel-card client-control-card">
<div class="card-header-bar">
<div class="header-left">
@ -122,15 +122,16 @@
<el-button
type="primary"
size="default"
class="btn-primary-action"
@click="openCreateDialog"
>
立即新增客户端
+ 立即新增客户端
</el-button>
</div>
</div>
</div>
<!-- 模块 2：通用客户端配置参数卡片 -->
<!-- 通用客户端配置参数卡片 -->
<div class="panel-card proto-guide-card">
<div class="card-header-bar">
<div class="header-left">
@ -151,6 +152,7 @@
type="primary"
link
size="small"
class="btn-card-copy"
@click="copyText(`imap.${currentDomain || 'solit.cn'}:993`, 'IMAP 参数')"
>
复制
@ -184,6 +186,7 @@
type="primary"
link
size="small"
class="btn-card-copy"
@click="copyText(`pop.${currentDomain || 'solit.cn'}:995`, 'POP3 参数')"
>
复制
@ -217,6 +220,7 @@
type="primary"
link
size="small"
class="btn-card-copy"
@click="copyText(`smtp.${currentDomain || 'solit.cn'}:465`, 'SMTP 参数')"
>
复制
@ -240,41 +244,6 @@
</div>
</div>
</div>
<!-- 模块 3：客户端使用与排错说明卡片（充实页面、解决大面积留白） -->
<div class="panel-card instructions-card">
<div class="card-header-bar">
<div class="header-left">
<span class="main-title">配置提示与常见问题</span>
</div>
</div>
<div class="instructions-content">
<div class="instruct-item">
<span class="instruct-num">1</span>
<div class="instruct-body">
<div class="instruct-title">一机一码隔离保护</div>
<div class="instruct-desc">建议手机、办公电脑与备用客户端分别创建专属授权码。若设备遗失或更换，仅需在上方撤销对应客户端，其他设备与主密码完全不受影响。</div>
</div>
</div>
<div class="instruct-item">
<span class="instruct-num">2</span>
<div class="instruct-body">
<div class="instruct-title">登录用户名规范</div>
<div class="instruct-desc">第三方客户端的“账户名称/用户名”一栏可直接填写账号名（如 <code>xuans</code>）或完整邮箱（如 <code>xuans@{{ currentDomain || 'solit.cn' }}</code>），密码填写生成的专属授权码。</div>
</div>
</div>
<div class="instruct-item">
<span class="instruct-num">3</span>
<div class="instruct-body">
<div class="instruct-title">证书信任与安全握手</div>
<div class="instruct-desc">当前邮件系统所有协议均强制启用安全加密连接。如使用第三方邮件软件出现证书提示，请确认服务器域名解析是否正确指向当前邮件服务器。</div>
</div>
</div>
</div>
</div>
</section>
<!-- 新增客户端弹窗 -->
@ -309,6 +278,7 @@
<el-button
type="primary"
size="default"
class="btn-primary-action"
:loading="createLoading"
:disabled="!newClientName.trim()"
@click="submitCreateClient"
@ -351,6 +321,7 @@
<el-button
type="primary"
size="default"
class="btn-primary-action"
:loading="verifyLoading"
:disabled="!verifyPassword.trim()"
@click="submitVerifyAndReveal"