feat(desktop): implement phase 2 native capabilities

frontend/src/views/ProfileSettings.vue

@@ -10,19 +10,9 @@
             <div class="avatar-name">{{ form.full_name || TEXT.modules.profile.title }}</div>
             <div class="avatar-email">{{ form.email }}</div>
           </div>
-          <el-upload
-            class="avatar-uploader"
-            :show-file-list="false"
-            accept="image/png,image/jpeg,image/gif,image/webp"
-            action="/api/v1/auth/me/avatar"
-            name="file"
-            :headers="uploadHeaders"
-            :before-upload="beforeAvatarUpload"
-            :on-success="onAvatarUploaded"
-            :on-error="onAvatarError"
-          >
-            <el-button :icon="Upload" class="upload-button">{{ TEXT.modules.profile.uploadAvatar }}</el-button>
-          </el-upload>
+          <el-button :icon="Upload" class="upload-button avatar-uploader" @click="selectAndUploadAvatar">
+            {{ TEXT.modules.profile.uploadAvatar }}
+          </el-button>
         </div>
       </aside>
 
@@ -74,6 +64,27 @@
             </el-form-item>
           </section>
 
+          <section class="form-section form-section--desktop">
+            <div class="section-heading">
+              <span class="section-kicker">Desktop</span>
+              <h4>客户端与通知</h4>
+            </div>
+            <el-form-item v-if="isDesktop" label="系统通知">
+              <el-switch
+                v-model="desktopNotificationsEnabled"
+                :loading="desktopNotificationLoading"
+                @change="onDesktopNotificationChange"
+              />
+              <span class="desktop-setting-hint">仅推送不含项目详情的文件更新提示</span>
+            </el-form-item>
+            <el-form-item label="客户端信息">
+              <div class="client-metadata">
+                <code>{{ clientMetadataText }}</code>
+                <el-button size="small" @click="copyClientMetadata">复制</el-button>
+              </div>
+            </el-form-item>
+          </section>
+
           <div class="actions">
             <el-button type="primary" :loading="submitting" @click="onSubmit">{{ TEXT.common.actions.save }}</el-button>
           </div>
@@ -85,12 +96,22 @@
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from "vue";
-import type { FormInstance, FormRules, UploadRawFile } from "element-plus";
+import type { FormInstance, FormRules } from "element-plus";
 import { ElMessage } from "element-plus";
 import { Close, Upload } from "@element-plus/icons-vue";
-import { updateProfile, fetchMe } from "../api/auth";
+import { updateProfile, fetchMe, uploadAvatar } from "../api/auth";
+import {
+  getDesktopNotificationSubscription,
+  setDesktopNotificationSubscription,
+} from "../api/desktopNotifications";
 import { useAuthStore } from "../store/auth";
-import { getToken } from "../utils/auth";
+import {
+  getAppMetadata,
+  isTauriRuntime,
+  pickFiles,
+  requestNotificationPermission,
+} from "../runtime";
+import { triggerDesktopNotificationPoll } from "../session/desktopNotificationManager";
 import { TEXT, requiredMessage } from "../locales";
 
 const emit = defineEmits<{
@@ -99,6 +120,16 @@ const emit = defineEmits<{
   saved: [];
 }>();
 const auth = useAuthStore();
+const isDesktop = isTauriRuntime();
+const clientMetadata = getAppMetadata();
+const clientMetadataText = [
+  `${clientMetadata.clientType} ${clientMetadata.version}`,
+  clientMetadata.platform,
+  clientMetadata.channel,
+  clientMetadata.commit,
+].join(" · ");
+const desktopNotificationsEnabled = ref(false);
+const desktopNotificationLoading = ref(false);
 const formRef = ref<FormInstance>();
 const submitting = ref(false);
 const form = reactive({
@@ -114,9 +145,6 @@ const savedProfile = ref({
   clinical_department: "",
 });
 const avatarPreview = ref<string | undefined>();
-const uploadHeaders = computed<Record<string, string>>(() => ({
-  Authorization: `Bearer ${getToken() || ""}`,
-}));
 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 hasUnsavedChanges = computed(
@@ -180,6 +208,41 @@ const loadProfile = async () => {
   avatarPreview.value = data.avatar_url || undefined;
 };
 
+const loadDesktopNotificationSubscription = async () => {
+  if (!isDesktop) return;
+  const { data } = await getDesktopNotificationSubscription();
+  desktopNotificationsEnabled.value = data.enabled;
+};
+
+const onDesktopNotificationChange = async (value: string | number | boolean) => {
+  if (!isDesktop || desktopNotificationLoading.value) return;
+  desktopNotificationLoading.value = true;
+  try {
+    const enable = Boolean(value);
+    if (enable) {
+      const permission = await requestNotificationPermission();
+      if (permission !== "granted") {
+        desktopNotificationsEnabled.value = false;
+        ElMessage.warning("系统通知权限未开启，请在系统设置中允许 CTMS 通知");
+        return;
+      }
+    }
+    const { data } = await setDesktopNotificationSubscription(enable);
+    desktopNotificationsEnabled.value = data.enabled;
+    if (data.enabled) triggerDesktopNotificationPoll();
+  } catch (error: any) {
+    desktopNotificationsEnabled.value = !Boolean(value);
+    ElMessage.error(error?.response?.data?.detail || "通知设置保存失败");
+  } finally {
+    desktopNotificationLoading.value = false;
+  }
+};
+
+const copyClientMetadata = async () => {
+  await navigator.clipboard.writeText(clientMetadataText);
+  ElMessage.success("客户端信息已复制");
+};
+
 const onSubmit = async () => {
   if (!formRef.value) return;
   await formRef.value.validate(async (valid) => {
@@ -211,24 +274,31 @@ const onSubmit = async () => {
   });
 };
 
-const onAvatarUploaded = async () => {
-  await auth.fetchMe();
-  avatarPreview.value = auth.user?.avatar_url || undefined;
-  ElMessage.success(TEXT.modules.profile.avatarUpdated);
-};
-
-const beforeAvatarUpload = (file: UploadRawFile) => {
-  if (avatarAcceptedTypes.has(file.type)) return true;
-  ElMessage.error(TEXT.modules.profile.avatarTypeInvalid);
-  return false;
-};
-
-const onAvatarError = (err: any) => {
-  ElMessage.error(err?.response?.data?.message || TEXT.modules.profile.avatarUploadFailed);
+const selectAndUploadAvatar = async () => {
+  const [file] = await pickFiles({
+    multiple: false,
+    accept: ["png", "jpg", "jpeg", "gif", "webp"],
+    title: TEXT.modules.profile.uploadAvatar,
+  });
+  if (!file) return;
+  const extensionAllowed = /\.(png|jpe?g|gif|webp)$/i.test(file.name);
+  if (!avatarAcceptedTypes.has(file.type) && !extensionAllowed) {
+    ElMessage.error(TEXT.modules.profile.avatarTypeInvalid);
+    return;
+  }
+  try {
+    await uploadAvatar(file);
+    await auth.fetchMe();
+    avatarPreview.value = auth.user?.avatar_url || undefined;
+    ElMessage.success(TEXT.modules.profile.avatarUpdated);
+  } catch (err: any) {
+    ElMessage.error(err?.response?.data?.message || TEXT.modules.profile.avatarUploadFailed);
+  }
 };
 
 onMounted(() => {
   loadProfile();
+  loadDesktopNotificationSubscription().catch(() => {});
 });
 
 watch(hasUnsavedChanges, (dirty) => emit("dirty-change", dirty), { immediate: true });
@@ -343,6 +413,31 @@ watch(hasUnsavedChanges, (dirty) => emit("dirty-change", dirty), { immediate: tr
   border-top: 1px solid #e5ebf2;
 }
 
+.form-section--desktop {
+  margin-top: 26px;
+  padding-top: 28px;
+  border-top: 1px solid #e5ebf2;
+}
+
+.desktop-setting-hint {
+  margin-left: 12px;
+  color: #7f92ad;
+  font-size: 12px;
+}
+
+.client-metadata {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.client-metadata code {
+  overflow-wrap: anywhere;
+  color: #40566f;
+  font-size: 12px;
+}
+
 .section-heading {
   margin-bottom: 18px;
   padding-left: 112px;