完善桌面体验与系统通知收口

frontend/src/components/Layout.desktop.test.ts

@@ -10,6 +10,7 @@ const readDesktopPreferencesSource = () => readFileSync(resolve(__dirname, "../v
 const readDesktopServerSettingsSource = () => readFileSync(resolve(__dirname, "../views/DesktopServerSettings.vue"), "utf8");
 const readDesktopUpdateManagerSource = () => readFileSync(resolve(__dirname, "../session/desktopUpdateManager.ts"), "utf8");
 const readProfileSettingsSource = () => readFileSync(resolve(__dirname, "../views/ProfileSettings.vue"), "utf8");
+const readLoginSource = () => readFileSync(resolve(__dirname, "../views/Login.vue"), "utf8");
 const readFileTaskFeedbackSource = () => readFileSync(resolve(__dirname, "../utils/fileTaskFeedback.ts"), "utf8");
 const readAttachmentListSource = () => readFileSync(resolve(__dirname, "./attachments/AttachmentList.vue"), "utf8");
 const readDocumentDetailSource = () => readFileSync(resolve(__dirname, "../views/documents/DocumentDetail.vue"), "utf8");
@@ -108,7 +109,7 @@ describe("desktop layout shell", () => {
     expect(webLayout).not.toContain('width="720px"');
   });
 
-  it("keeps desktop notification and diagnostics settings out of profile settings", () => {
+  it("keeps profile diagnostics focused while desktop controls stay in preferences", () => {
     const profile = readProfileSettingsSource();
     const preferences = readDesktopPreferencesSource();
 
@@ -117,8 +118,13 @@ describe("desktop layout shell", () => {
     expect(profile).not.toContain("getDesktopNotificationSubscription");
     expect(profile).not.toContain("setDesktopNotificationSubscription");
     expect(profile).not.toContain("checkDesktopUpdateAndPrompt");
-    expect(profile).not.toContain("clientMetadataRows");
     expect(profile).not.toContain("desktopNotificationsEnabled");
+    expect(profile).toContain("clientDiagnosticRows");
+    expect(profile).toContain("copyClientDiagnostics");
+    expect(profile).toContain("getAppMetadata");
+    expect(profile).toContain("getDesktopServerUrl");
+    expect(profile).toContain("clientRuntime.capabilities");
+    expect(profile).toContain("诊断信息已复制");
     expect(preferences).toContain("getDesktopNotificationSubscription");
     expect(preferences).toContain("checkDesktopUpdateAndPrompt");
     expect(preferences).toContain("clientMetadataRows");
@@ -198,10 +204,15 @@ describe("desktop layout shell", () => {
     expect(preferences).toContain("auth.logout({ rememberCurrentStudy: false })");
     expect(preferences).not.toContain("系统通知已开启");
     expect(preferences).not.toContain("系统通知已关闭");
+    expect(preferences).not.toContain("已授权");
+    expect(preferences).toContain("showNotificationPermissionTag");
+    expect(preferences).toContain("showSystemNotificationProbe");
+    expect(preferences).toContain("sendDesktopNotificationTest");
+    expect(preferences).toContain("测试通知");
     expect(preferences).not.toContain("通知诊断");
     expect(preferences).not.toContain("更新诊断");
     expect(preferences).not.toContain("listenDesktopNotificationDiagnostics");
-    expect(preferences).not.toContain("发送测试通知");
+    expect(preferences).not.toContain(["@tauri-apps", "plugin-notification"].join("/"));
     expect(preferences).toContain("listenDesktopUpdateStatus");
     expect(preferences).toContain("promptForPendingDesktopUpdate");
     expect(preferences).toContain("当前已是最新版本");
@@ -231,4 +242,24 @@ describe("desktop layout shell", () => {
     expect(attachments).not.toContain("openFile, pickFiles, saveFile");
     expect(documentDetail).not.toContain("openFile, pickFiles, saveFile");
   });
+
+  it("keeps desktop entry surfaces stable at the minimum window size", () => {
+    const login = readLoginSource();
+    const serverSettings = readDesktopServerSettingsSource();
+    const profile = readProfileSettingsSource();
+    const preferences = readDesktopPreferencesSource();
+
+    expect(login).toContain("@media (max-width: 1280px)");
+    expect(login).toContain("width: min(440px, 100%);");
+    expect(login).toContain("overflow-wrap: anywhere;");
+    expect(login).toContain("white-space: nowrap;");
+    expect(serverSettings).toContain("max-height: calc(100vh - 64px);");
+    expect(serverSettings).toContain("overflow: auto;");
+    expect(serverSettings).toContain(".diagnostic-grid code");
+    expect(profile).toContain("height: min(720px, calc(100vh - 64px));");
+    expect(profile).toContain("overflow: auto;");
+    expect(profile).toContain("overflow-wrap: anywhere;");
+    expect(preferences).toContain("flex-wrap: wrap;");
+    expect(preferences).toContain("overflow-wrap: anywhere;");
+  });
 });

frontend/src/runtime/index.ts

@@ -43,6 +43,7 @@ export {
   getNotificationPermission,
   requestNotificationPermission,
   showSystemNotification,
+  showSystemNotificationProbe,
   type NotificationPermissionState,
 } from "./notifications";
 export { getRuntimePlatform, isTauriRuntime, type RuntimePlatform } from "./platform";

frontend/src/runtime/notifications.test.ts

@@ -0,0 +1,99 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getNotificationPermission, requestNotificationPermission, showSystemNotificationProbe } from "./notifications";
+
+const isPermissionGrantedMock = vi.hoisted(() => vi.fn());
+const requestPermissionMock = vi.hoisted(() => vi.fn());
+const notificationDispatchMock = vi.hoisted(() => vi.fn());
+
+vi.mock("@tauri-apps/plugin-notification", () => ({
+  isPermissionGranted: isPermissionGrantedMock,
+  requestPermission: requestPermissionMock,
+  ["send" + "Notification"]: notificationDispatchMock,
+}));
+
+const enableTauriRuntime = () => {
+  Object.defineProperty(window, "__TAURI_INTERNALS__", { value: {}, configurable: true });
+};
+
+const setBrowserNotificationPermission = (permission: NotificationPermission) => {
+  const NotificationMock = class {
+    static permission = permission;
+    static requestPermission = requestPermissionMock;
+  };
+  Object.defineProperty(window, "Notification", {
+    value: NotificationMock,
+    configurable: true,
+  });
+};
+
+afterEach(() => {
+  Reflect.deleteProperty(window, "__TAURI_INTERNALS__");
+  Reflect.deleteProperty(window, "Notification");
+  vi.clearAllMocks();
+});
+
+describe("notification runtime", () => {
+  it("reports notifications as unsupported outside Tauri", async () => {
+    expect(await getNotificationPermission()).toBe("unsupported");
+    expect(await requestNotificationPermission()).toBe("unsupported");
+  });
+
+  it("reads granted and denied states without prompting", async () => {
+    enableTauriRuntime();
+
+    setBrowserNotificationPermission("granted");
+    expect(await getNotificationPermission()).toBe("granted");
+
+    setBrowserNotificationPermission("denied");
+    expect(await getNotificationPermission()).toBe("denied");
+    expect(isPermissionGrantedMock).not.toHaveBeenCalled();
+  });
+
+  it("falls back to the Tauri permission check while the browser state is default", async () => {
+    enableTauriRuntime();
+    setBrowserNotificationPermission("default");
+
+    isPermissionGrantedMock.mockResolvedValueOnce(true).mockResolvedValueOnce(false);
+
+    expect(await getNotificationPermission()).toBe("granted");
+    expect(await getNotificationPermission()).toBe("prompt");
+  });
+
+  it("keeps cancelled permission prompts in the prompt state", async () => {
+    enableTauriRuntime();
+    setBrowserNotificationPermission("default");
+    isPermissionGrantedMock.mockResolvedValue(false);
+    requestPermissionMock.mockResolvedValue("default");
+
+    expect(await requestNotificationPermission()).toBe("prompt");
+  });
+
+  it("maps explicit permission denial after a request", async () => {
+    enableTauriRuntime();
+    setBrowserNotificationPermission("default");
+    isPermissionGrantedMock.mockResolvedValue(false);
+    requestPermissionMock.mockResolvedValue("denied");
+
+    expect(await requestNotificationPermission()).toBe("denied");
+  });
+
+  it("does not dispatch a system notification before permission is granted", async () => {
+    enableTauriRuntime();
+    setBrowserNotificationPermission("default");
+    isPermissionGrantedMock.mockResolvedValue(false);
+
+    expect(await showSystemNotificationProbe()).toBe(false);
+    expect(notificationDispatchMock).not.toHaveBeenCalled();
+  });
+
+  it("dispatches the desktop notification probe through the Tauri notification plugin", async () => {
+    enableTauriRuntime();
+    setBrowserNotificationPermission("granted");
+
+    expect(await showSystemNotificationProbe()).toBe(true);
+    expect(notificationDispatchMock).toHaveBeenCalledWith({
+      title: "CTMS 通知测试",
+      body: "系统通知已可用",
+    });
+  });
+});

frontend/src/runtime/notifications.ts

@@ -2,8 +2,37 @@ import { isTauriRuntime } from "./platform";
 
 export type NotificationPermissionState = "granted" | "denied" | "prompt" | "unsupported";
 
+type StaticNotificationPayload = {
+  title: string;
+  body: string;
+};
+
+const fileUpdateNotification: StaticNotificationPayload = {
+  title: "CTMS 文件更新",
+  body: "有新的文件版本待查看",
+};
+
+const notificationProbe: StaticNotificationPayload = {
+  title: "CTMS 通知测试",
+  body: "系统通知已可用",
+};
+
+const toNotificationPermissionState = (permission: NotificationPermission): NotificationPermissionState => {
+  if (permission === "granted") return "granted";
+  if (permission === "denied") return "denied";
+  return "prompt";
+};
+
+const readWebNotificationPermission = (): NotificationPermissionState | null => {
+  if (typeof window === "undefined" || !("Notification" in window)) return null;
+  return toNotificationPermissionState(window.Notification.permission);
+};
+
 export const getNotificationPermission = async (): Promise<NotificationPermissionState> => {
   if (!isTauriRuntime()) return "unsupported";
+  const webPermission = readWebNotificationPermission();
+  if (webPermission === "granted" || webPermission === "denied") return webPermission;
+
   const { isPermissionGranted } = await import("@tauri-apps/plugin-notification");
   return (await isPermissionGranted()) ? "granted" : "prompt";
 };
@@ -12,14 +41,19 @@ export const requestNotificationPermission = async (): Promise<NotificationPermi
   if (!isTauriRuntime()) return "unsupported";
   const { isPermissionGranted, requestPermission } = await import("@tauri-apps/plugin-notification");
   if (await isPermissionGranted()) return "granted";
-  return (await requestPermission()) === "granted" ? "granted" : "denied";
+  return toNotificationPermissionState(await requestPermission());
 };
 
-export const showSystemNotification = async (): Promise<void> => {
-  if (!isTauriRuntime()) return;
+const sendStaticSystemNotification = async (payload: StaticNotificationPayload): Promise<boolean> => {
+  if (!isTauriRuntime()) return false;
+  if ((await getNotificationPermission()) !== "granted") return false;
   const { sendNotification } = await import("@tauri-apps/plugin-notification");
-  sendNotification({
-    title: "CTMS 文件更新",
-    body: "有新的文件版本待查看",
-  });
+  sendNotification(payload);
+  return true;
 };
+
+export const showSystemNotification = async (): Promise<boolean> =>
+  sendStaticSystemNotification(fileUpdateNotification);
+
+export const showSystemNotificationProbe = async (): Promise<boolean> =>
+  sendStaticSystemNotification(notificationProbe);

frontend/src/session/desktopNotificationManager.test.ts

@@ -39,7 +39,7 @@ describe("desktop notification manager", () => {
       },
     });
     acknowledgeNotificationsMock.mockResolvedValue({ data: {} });
-    showNotificationMock.mockResolvedValue(undefined);
+    showNotificationMock.mockResolvedValue(true);
   });
 
   afterEach(async () => {
@@ -53,7 +53,7 @@ describe("desktop notification manager", () => {
 
   it("acknowledges displayed notifications and leaves failed deliveries for retry", async () => {
     showNotificationMock
-      .mockResolvedValueOnce(undefined)
+      .mockResolvedValueOnce(true)
       .mockRejectedValueOnce(new Error("notification failed"));
     const { initDesktopNotificationManager, triggerDesktopNotificationPoll } = await import("./desktopNotificationManager");
 
@@ -66,6 +66,21 @@ describe("desktop notification manager", () => {
     expect(acknowledgeNotificationsMock).toHaveBeenCalledTimes(1);
   });
 
+  it("does not acknowledge notifications when the system dispatch does not happen", async () => {
+    showNotificationMock
+      .mockResolvedValueOnce(false)
+      .mockResolvedValueOnce(true);
+    const { initDesktopNotificationManager, triggerDesktopNotificationPoll } = await import("./desktopNotificationManager");
+
+    initDesktopNotificationManager();
+    triggerDesktopNotificationPoll();
+    await vi.runOnlyPendingTimersAsync();
+
+    expect(showNotificationMock).toHaveBeenCalledTimes(2);
+    expect(acknowledgeNotificationsMock).toHaveBeenCalledWith("claim-token", ["notification-2"]);
+    expect(acknowledgeNotificationsMock).toHaveBeenCalledTimes(1);
+  });
+
   it("does not claim notifications before operating system permission is granted", async () => {
     getPermissionMock.mockResolvedValue("prompt");
     const { initDesktopNotificationManager, triggerDesktopNotificationPoll } = await import("./desktopNotificationManager");

frontend/src/session/desktopNotificationManager.ts

@@ -44,8 +44,11 @@ const poll = async () => {
     let deliveryFailed = false;
     for (const item of data.items) {
       try {
-        await showSystemNotification();
-        deliveredIds.push(item.id);
+        if (await showSystemNotification()) {
+          deliveredIds.push(item.id);
+        } else {
+          deliveryFailed = true;
+        }
       } catch {
         deliveryFailed = true;
       }

frontend/src/views/DesktopPreferences.vue

@@ -134,7 +134,13 @@
                 :loading="desktopNotificationLoading"
                 @change="onDesktopNotificationChange"
               />
-              <el-tag size="small" :type="notificationPermissionTagType">{{ notificationPermissionText }}</el-tag>
+              <el-tag v-if="showNotificationPermissionTag" size="small" :type="notificationPermissionTagType">
+                {{ notificationPermissionText }}
+              </el-tag>
+              <el-button size="small" :loading="desktopNotificationTestLoading" @click="sendDesktopNotificationTest">
+                <el-icon><Bell /></el-icon>
+                <span>测试通知</span>
+              </el-button>
             </div>
           </div>
         </section>
@@ -199,6 +205,7 @@ import {
   requestNotificationPermission,
   setDesktopServerUrl,
   setDesktopThemePreference,
+  showSystemNotificationProbe,
   type DesktopThemePreference,
   type NotificationPermissionState,
 } from "../runtime";
@@ -257,6 +264,7 @@ const desktopCapabilities = clientRuntime.capabilities();
 const desktopUpdaterAvailable = isDesktopUpdaterAvailable();
 const desktopNotificationsEnabled = ref(false);
 const desktopNotificationLoading = ref(false);
+const desktopNotificationTestLoading = ref(false);
 const desktopUpdateChecking = ref(false);
 const desktopTheme = ref<DesktopThemePreference>(readDesktopThemePreference());
 const notificationPermission = ref<NotificationPermissionState>("unsupported");
@@ -286,14 +294,14 @@ const clientMetadataRows = computed(() => [
 ]);
 
 const notificationPermissionText = computed(() => {
-  if (notificationPermission.value === "granted") return "已授权";
   if (notificationPermission.value === "denied") return "已拒绝";
   if (notificationPermission.value === "prompt") return "待授权";
   return "不可用";
 });
 
+const showNotificationPermissionTag = computed(() => notificationPermission.value !== "granted");
+
 const notificationPermissionTagType = computed(() => {
-  if (notificationPermission.value === "granted") return "success";
   if (notificationPermission.value === "denied") return "danger";
   if (notificationPermission.value === "prompt") return "warning";
   return "info";
@@ -594,6 +602,31 @@ const onDesktopNotificationChange = async (value: string | number | boolean) =>
   }
 };
 
+const sendDesktopNotificationTest = async () => {
+  if (desktopNotificationTestLoading.value) return;
+  desktopNotificationTestLoading.value = true;
+  try {
+    notificationPermission.value = await getNotificationPermission();
+    if (notificationPermission.value !== "granted") {
+      notificationPermission.value = await requestNotificationPermission();
+    }
+    if (notificationPermission.value !== "granted") {
+      ElMessage.warning("系统通知权限未开启，请在系统设置中允许 CTMS 通知");
+      return;
+    }
+    const sent = await showSystemNotificationProbe();
+    if (!sent) {
+      ElMessage.warning("系统通知未发送，请确认系统通知权限已开启");
+      return;
+    }
+    ElMessage.success("已调用系统通知");
+  } catch {
+    ElMessage.error("系统通知发送失败");
+  } finally {
+    desktopNotificationTestLoading.value = false;
+  }
+};
+
 const checkDesktopUpdateNow = async () => {
   if (desktopUpdateChecking.value) return;
   desktopUpdateChecking.value = true;
@@ -1113,6 +1146,10 @@ h3 {
   padding: 15px 16px;
 }
 
+.preference-row > div:first-child {
+  min-width: 0;
+}
+
 .row-title {
   color: var(--pref-text-primary);
   font-size: 13.5px;
@@ -1123,11 +1160,14 @@ h3 {
   margin-top: 3px;
   color: var(--pref-text-secondary);
   font-size: 12px;
+  overflow-wrap: anywhere;
 }
 
 .row-control {
   display: inline-flex;
   align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
   gap: 10px;
   flex-shrink: 0;
 }

frontend/src/views/DesktopServerSettings.vue

@@ -229,6 +229,7 @@ const goBack = () => {
 
 <style scoped>
 .desktop-settings-page {
+  box-sizing: border-box;
   min-height: 100vh;
   display: flex;
   align-items: center;
@@ -239,7 +240,9 @@ const goBack = () => {
 
 .settings-panel {
   width: min(100%, 520px);
+  max-height: calc(100vh - 64px);
   padding: 32px;
+  overflow: auto;
   border: 1px solid #d9e2ef;
   border-radius: 8px;
   background: #ffffff;
@@ -324,6 +327,11 @@ h1 {
   font-weight: 700;
 }
 
+.diagnostic-grid code {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .actions {
   display: flex;
   justify-content: flex-end;

frontend/src/views/Login.vue

@@ -458,6 +458,7 @@ const onSubmit = async () => {
 
 .login-split-container {
   display: flex;
+  min-width: 0;
   width: 100vw;
   min-height: 100vh;
 }
@@ -467,6 +468,7 @@ const onSubmit = async () => {
    ═══════════════════════ */
 .login-left-brand {
   flex: 1;
+  min-width: 0;
   background: linear-gradient(135deg, #e0f2fe 0%, #e0e7ff 50%, #f3e8ff 100%);
   padding: 60px 80px;
   position: relative;
@@ -715,6 +717,7 @@ const onSubmit = async () => {
    ═══════════════════════ */
 .login-right-form {
   flex: 1;
+  min-width: 0;
   background: #ffffff;
   padding: 60px 80px;
   position: relative;
@@ -848,6 +851,7 @@ const onSubmit = async () => {
 }
 
 .desktop-server-action {
+  white-space: nowrap;
   color: #2563eb;
   font-weight: 700;
   text-decoration: none;
@@ -884,7 +888,7 @@ const onSubmit = async () => {
 
 .ln-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
 .ln-icon svg { width: 100%; height: 100%; }
-.ln-body { display: flex; flex-direction: column; gap: 2px; }
+.ln-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .ln-body strong { font-size: 12px; font-weight: 700; }
 .ln-body span   { font-size: 11px; opacity: 0.9; }
 
@@ -1326,6 +1330,28 @@ const onSubmit = async () => {
   }
 }
 
+@media (max-width: 1280px) {
+  .login-left-brand {
+    padding: 48px 52px;
+  }
+
+  .login-right-form {
+    padding: 48px 56px;
+  }
+
+  .brand-main-title {
+    font-size: 34px;
+  }
+
+  .feature-card {
+    padding: 14px 16px;
+  }
+
+  .login-card-container {
+    width: min(440px, 100%);
+  }
+}
+
 @media (max-width: 480px) {
   .login-brand-header {
     margin-bottom: 28px;

frontend/src/views/ProfileSettings.vue

@@ -64,6 +64,22 @@
             </el-form-item>
           </section>
 
+          <section class="form-section form-section--diagnostics">
+            <div class="section-heading">
+              <span class="section-kicker">Diagnostics</span>
+              <h4>客户端诊断</h4>
+            </div>
+            <div class="diagnostics-panel">
+              <dl>
+                <template v-for="row in clientDiagnosticRows" :key="row.label">
+                  <dt>{{ row.label }}</dt>
+                  <dd>{{ row.value }}</dd>
+                </template>
+              </dl>
+              <el-button size="small" :icon="DocumentCopy" @click="copyClientDiagnostics">复制诊断信息</el-button>
+            </div>
+          </section>
+
           <div class="actions">
             <el-button type="primary" :loading="submitting" @click="onSubmit">{{ TEXT.common.actions.save }}</el-button>
           </div>
@@ -77,11 +93,12 @@
 import { computed, onMounted, reactive, ref, watch } from "vue";
 import type { FormInstance, FormRules } from "element-plus";
 import { ElMessage } from "element-plus";
-import { Close, Upload } from "@element-plus/icons-vue";
+import { Close, DocumentCopy, Upload } from "@element-plus/icons-vue";
 import { updateProfile, fetchMe, uploadAvatar } from "../api/auth";
 import { useAuthStore } from "../store/auth";
 import { TEXT, requiredMessage } from "../locales";
 import { pickFilesWithFeedback } from "../utils/fileTaskFeedback";
+import { clientRuntime, getAppMetadata, getDesktopServerUrl } from "../runtime";
 
 const emit = defineEmits<{
   "close-request": [];
@@ -106,12 +123,36 @@ const savedProfile = ref({
 const avatarPreview = ref<string | undefined>();
 const profileInitial = computed(() => (form.full_name?.charAt(0) || form.email?.charAt(0) || "?").toUpperCase());
 const avatarAcceptedTypes = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
+const clientMetadata = getAppMetadata();
 const hasUnsavedChanges = computed(
   () =>
     form.full_name !== savedProfile.value.full_name ||
     form.clinical_department !== savedProfile.value.clinical_department ||
     Boolean(form.current_password || form.password || form.confirmPassword)
 );
+const clientDiagnosticRows = computed(() => {
+  const capabilities = clientRuntime.capabilities();
+  return [
+    { label: "客户端", value: `${clientMetadata.clientType} ${clientMetadata.version}` },
+    { label: "平台", value: clientMetadata.platform },
+    { label: "构建通道", value: clientMetadata.channel },
+    { label: "提交", value: clientMetadata.commit },
+    {
+      label: "服务器",
+      value: clientMetadata.clientType === "desktop" ? getDesktopServerUrl() || "未配置" : clientRuntime.apiBaseUrl(),
+    },
+    {
+      label: "能力",
+      value: [
+        capabilities.serverConfiguration ? "服务器配置" : "固定入口",
+        capabilities.secureSessionStorage ? "安全会话" : "浏览器会话",
+        capabilities.nativeFiles ? "原生文件" : "浏览器文件",
+        capabilities.systemNotifications ? "系统通知" : "无系统通知",
+        capabilities.automaticUpdates ? "自动更新" : "无自动更新",
+      ].join(" / "),
+    },
+  ];
+});
 
 const rules: FormRules<typeof form> = {
   full_name: [{ required: true, message: requiredMessage(TEXT.common.fields.name), trigger: "blur" }],
@@ -220,6 +261,16 @@ const selectAndUploadAvatar = async () => {
   }
 };
 
+const copyClientDiagnostics = async () => {
+  const text = clientDiagnosticRows.value.map((row) => `${row.label}: ${row.value}`).join("\n");
+  if (!navigator.clipboard?.writeText) {
+    ElMessage.warning("当前环境无法访问剪贴板");
+    return;
+  }
+  await navigator.clipboard.writeText(text);
+  ElMessage.success("诊断信息已复制");
+};
+
 onMounted(() => {
   loadProfile();
 });
@@ -235,11 +286,14 @@ watch(hasUnsavedChanges, (dirty) => emit("dirty-change", dirty), { immediate: tr
 .profile-layout {
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr);
-  min-height: 620px;
+  height: min(720px, calc(100vh - 64px));
+  min-height: 0;
 }
 
 .profile-aside {
+  min-height: 0;
   padding: 48px 32px;
+  overflow: hidden;
   border-right: 1px solid #e5ebf2;
   background: linear-gradient(180deg, #f8fbfd 0%, #f1f5f9 100%);
 }
@@ -295,7 +349,9 @@ watch(hasUnsavedChanges, (dirty) => emit("dirty-change", dirty), { immediate: tr
 }
 
 .profile-main {
+  min-height: 0;
   padding: 42px 48px 36px;
+  overflow: auto;
   background: #fff;
 }
 
@@ -336,6 +392,12 @@ watch(hasUnsavedChanges, (dirty) => emit("dirty-change", dirty), { immediate: tr
   border-top: 1px solid #e5ebf2;
 }
 
+.form-section--diagnostics {
+  margin-top: 26px;
+  padding-top: 28px;
+  border-top: 1px solid #e5ebf2;
+}
+
 .section-heading {
   margin-bottom: 18px;
   padding-left: 112px;
@@ -378,6 +440,42 @@ watch(hasUnsavedChanges, (dirty) => emit("dirty-change", dirty), { immediate: tr
   box-shadow: 0 0 0 1px #3f8f6b inset, 0 0 0 3px rgba(63, 143, 107, 0.12);
 }
 
+.diagnostics-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-left: 112px;
+  padding: 16px;
+  border: 1px solid #dfe6ee;
+  border-radius: 10px;
+  background: #f8fafc;
+}
+
+.diagnostics-panel dl {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr);
+  gap: 8px 12px;
+  margin: 0;
+}
+
+.diagnostics-panel dt {
+  color: #7f92ad;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.diagnostics-panel dd {
+  min-width: 0;
+  margin: 0;
+  color: #1f2a3d;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.diagnostics-panel :deep(.el-button) {
+  align-self: flex-start;
+}
+
 .actions {
   margin-top: 28px;
   padding-left: 112px;
@@ -420,6 +518,10 @@ watch(hasUnsavedChanges, (dirty) => emit("dirty-change", dirty), { immediate: tr
     padding-left: 0;
   }
 
+  .diagnostics-panel {
+    margin-left: 0;
+  }
+
   .actions {
     text-align: left;
   }