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

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;
   }