优化了qq微信切换

apps/frontend/src/components/tencent/TencentAuthCard.vue

@@ -23,6 +23,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
+  closeSession: []
   createSession: [loginType: TencentLoginType]
   openQrPreview: []
   qrImageLoad: [event: Event]
@@ -110,23 +111,33 @@ const emit = defineEmits<{
         <el-button
           :loading="props.sessionLoading"
           class="primary-action"
-          round
           size="large"
           type="primary"
           @click="emit('createSession', props.loginType)"
         >
           {{ props.hasSession ? '重新生成二维码' : props.initButtonLabel }}
         </el-button>
-        <el-button
-          :disabled="!props.hasSession"
-          :loading="props.sessionLoading"
-          class="secondary-action"
-          round
-          size="large"
-          @click="emit('reloadSession')"
-        >
-          刷新后端页面
-        </el-button>
+
+        <div class="secondary-actions">
+          <el-button
+            :disabled="!props.hasSession"
+            :loading="props.sessionLoading"
+            class="secondary-action"
+            size="large"
+            @click="emit('reloadSession')"
+          >
+            刷新后端页面
+          </el-button>
+          <el-button
+            :disabled="!props.hasSession"
+            :loading="props.sessionLoading"
+            class="tertiary-action"
+            size="large"
+            @click="emit('closeSession')"
+          >
+            关闭当前会话
+          </el-button>
+        </div>
       </div>
     </div>
   </section>
@@ -334,30 +345,78 @@ const emit = defineEmits<{
 
 .action-row {
   margin-top: 16px;
-  display: grid;
-  grid-template-columns: minmax(0, 1.45fr) minmax(132px, 0.95fr);
-  gap: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .primary-action :deep(span) {
   font-weight: 700;
+  letter-spacing: 0.01em;
 }
 
 .action-row :deep(.el-button) {
   width: 100%;
   min-width: 0;
   margin: 0;
+  height: 52px;
+  border-radius: 18px;
 }
 
 .action-row :deep(.el-button > span) {
   white-space: nowrap;
 }
 
+.secondary-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
 .primary-action,
-.secondary-action {
+.secondary-action,
+.tertiary-action {
   min-width: 0;
 }
 
+.action-row :deep(.primary-action.el-button) {
+  box-shadow: 0 16px 30px rgba(91, 143, 240, 0.24);
+}
+
+.action-row :deep(.primary-action.el-button:not(.is-disabled)) {
+  background: linear-gradient(135deg, #6da9fb 0%, #4f85eb 100%);
+  border-color: transparent;
+}
+
+.action-row :deep(.secondary-action.el-button),
+.action-row :deep(.tertiary-action.el-button) {
+  background: rgba(248, 251, 255, 0.98);
+  border: 1px solid #d9e4f2;
+  color: #4a5e79;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.action-row :deep(.secondary-action.el-button:hover),
+.action-row :deep(.secondary-action.el-button:focus-visible) {
+  border-color: #9dc0f6;
+  color: #2859b8;
+  background: #f3f8ff;
+}
+
+.action-row :deep(.tertiary-action.el-button:hover),
+.action-row :deep(.tertiary-action.el-button:focus-visible) {
+  border-color: #efb4b4;
+  color: #b43c3c;
+  background: #fff6f6;
+}
+
+.action-row :deep(.secondary-action.el-button.is-disabled),
+.action-row :deep(.tertiary-action.el-button.is-disabled) {
+  background: #f8fafc;
+  border-color: #e5ebf3;
+  color: #9aa8bc;
+}
+
 @media (max-width: 760px) {
   .auth-card {
     padding: 18px;
@@ -372,13 +431,7 @@ const emit = defineEmits<{
     font-size: 15px;
   }
 
-  .session-strip,
-  .action-row {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .action-row {
+  .secondary-actions {
     grid-template-columns: 1fr;
   }