From b788e6df9d213fa3a288c18b8e003a6e51ee6a7d Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Sat, 26 Sep 2026 22:22:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AE=A2=E6=88=B7=E7=AB=AF?=
 =?UTF-8?q?=E5=8D=8F=E8=AE=AE=E5=8D=A1=E7=89=87=E4=B8=A4=E8=A1=8C=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E4=B8=8E=E5=8F=82=E6=95=B0=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ThirdPartyAuthorization.css               | 42 ++++++++++++++-----
 .../ThirdPartyAuthorization.vue               | 33 +++++++++------
 2 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.css b/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.css
index 2cfe7af..510f9a7 100644
--- a/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.css
+++ b/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.css
@@ -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;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.vue b/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.vue
index 95668fa..f4e68cc 100644
--- a/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.vue
+++ b/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.vue
@@ -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>