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

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