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

优化客户端协议卡片两行标题与参数布局
Some checks are pending
Security Checks / security (push) Waiting to run
Details

Browse Source
This commit is contained in:
smail 2026-09-26 22:22:02 +08:00
parent e248b12c80
commit b788e6df9d
2 changed files with 52 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -233,12 +233,13 @@
/* 通用协议指引网格 */
.proto-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
gap: 12px;
}
.proto-card {
padding: 14px 16px;
min-width: 0;
padding: 12px;
background: var(--pm-bg-primary);
border: 1px solid var(--pm-border-color);
border-radius: var(--pm-radius-sm);
@ -265,6 +266,17 @@
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.proto-title {
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
line-height: 1.4;
white-space: nowrap;
}
.proto-name {
@ -273,7 +285,15 @@
color: var(--pm-text-primary);
}
.proto-service {
font-size: 13px;
font-weight: 600;
color: var(--pm-text-primary);
}
.btn-card-copy {
flex-shrink: 0;
padding-inline: 0;
font-weight: 600;
}
@ -284,11 +304,12 @@
}
.field-item {
display: flex;
align-items: center;
justify-content: space-between;
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: baseline;
font-size: 13px;
gap: 8px;
line-height: 1.5;
}
.field-k {
@ -297,9 +318,11 @@
}
.field-v {
min-width: 0;
color: var(--pm-text-primary);
text-align: right;
word-break: break-all;
word-break: normal;
overflow-wrap: anywhere;
}
.font-mono {
@ -326,9 +349,6 @@
}
@media (max-width: 960px) {
.proto-grid {
grid-template-columns: 1fr;
}
.card-header-bar {
flex-direction: column;
align-items: stretch;
@ -344,4 +364,4 @@
.banner-right {
margin-left: 0;
}
}
}

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

@ -145,7 +145,10 @@
<div class="proto-card">
<div class="proto-header">
<div class="proto-name-badge">
<span class="proto-name">IMAP 收信服务</span>
<div class="proto-title">
<span class="proto-name">IMAP</span>
<span class="proto-service">收信服务</span>
</div>
<el-tag size="small" type="primary" effect="light">SSL / TLS</el-tag>
</div>
<el-button
@ -161,15 +164,15 @@
<div class="proto-fields">
<div class="field-item">
<span class="field-k">服务器地址：</span>
<span class="field-k">服务器</span>
<span class="field-v font-mono">imap.{{ currentDomain || 'solit.cn' }}</span>
</div>
<div class="field-item">
<span class="field-k">服务端口：</span>
<span class="field-k">端口</span>
<span class="field-v font-mono highlight">993</span>
</div>
<div class="field-item">
<span class="field-k">加密方式：</span>
<span class="field-k">加密</span>
<span class="field-v">SSL / TLS 隐式加密</span>
</div>
</div>
@ -179,7 +182,10 @@
<div class="proto-card">
<div class="proto-header">
<div class="proto-name-badge">
<span class="proto-name">POP3 收信服务</span>
<div class="proto-title">
<span class="proto-name">POP3</span>
<span class="proto-service">收信服务</span>
</div>
<el-tag size="small" type="primary" effect="light">SSL / TLS</el-tag>
</div>
<el-button
@ -195,15 +201,15 @@
<div class="proto-fields">
<div class="field-item">
<span class="field-k">服务器地址：</span>
<span class="field-k">服务器</span>
<span class="field-v font-mono">pop.{{ currentDomain || 'solit.cn' }}</span>
</div>
<div class="field-item">
<span class="field-k">服务端口：</span>
<span class="field-k">端口</span>
<span class="field-v font-mono highlight">995</span>
</div>
<div class="field-item">
<span class="field-k">加密方式：</span>
<span class="field-k">加密</span>
<span class="field-v">SSL / TLS 隐式加密</span>
</div>
</div>
@ -213,7 +219,10 @@
<div class="proto-card">
<div class="proto-header">
<div class="proto-name-badge">
<span class="proto-name">SMTP 发信服务</span>
<div class="proto-title">
<span class="proto-name">SMTP</span>
<span class="proto-service">发信服务</span>
</div>
<el-tag size="small" type="primary" effect="light">SSL / STARTTLS</el-tag>
</div>
<el-button
@ -229,15 +238,15 @@
<div class="proto-fields">
<div class="field-item">
<span class="field-k">服务器地址：</span>
<span class="field-k">服务器</span>
<span class="field-v font-mono">smtp.{{ currentDomain || 'solit.cn' }}</span>
</div>
<div class="field-item">
<span class="field-k">服务端口：</span>
<span class="field-k">端口</span>
<span class="field-v font-mono highlight">465 (SSL) / 587</span>
</div>
<div class="field-item">
<span class="field-k">加密方式：</span>
<span class="field-k">加密</span>
<span class="field-v">SSL 隐式加密 / STARTTLS</span>
</div>
</div>