fix: 统一管理后台 401 与加载失败处理

web/src/views/SettingsView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
+import type { FormInst, FormRules } from "naive-ui";
 import {
+  NAlert,
   NButton,
   NDescriptions,
   NDescriptionsItem,
@@ -15,29 +17,65 @@ import {
 } from "naive-ui";
 import PageHeader from "@/components/PageHeader.vue";
 import HelpTip from "@/components/HelpTip.vue";
+import LoadFailed from "@/components/LoadFailed.vue";
 import { changePassword, getSettings, type RuntimeSettings } from "@/api/admin";
+import { ApiError } from "@/api/http";
 import { message } from "@/utils/notify";
 
 const loading = ref(true);
+const loadError = ref("");
 const settings = ref<RuntimeSettings | null>(null);
 const pwd = reactive({ old_password: "", new_password: "", confirm: "" });
 const pwdLoading = ref(false);
+const pwdError = ref("");
+const formRef = ref<FormInst | null>(null);
 
-onMounted(async () => {
+const rules: FormRules = {
+  new_password: [
+    {
+      validator(_, value: string) {
+        if (Array.from(value || "").length < 12) {
+          return new Error("新密码至少 12 个字符");
+        }
+        return true;
+      },
+      trigger: ["blur", "input"],
+    },
+  ],
+  confirm: [
+    {
+      validator() {
+        if (pwd.new_password !== pwd.confirm) {
+          return new Error("两次输入的新密码不一致");
+        }
+        return true;
+      },
+      trigger: ["blur", "input"],
+    },
+  ],
+};
+
+async function load() {
+  loading.value = true;
+  loadError.value = "";
   try {
     settings.value = await getSettings();
+  } catch (e) {
+    loadError.value = e instanceof Error ? e.message : "加载失败";
   } finally {
     loading.value = false;
   }
+}
+
+onMounted(() => {
+  void load();
 });
 
 async function submitPassword() {
-  if (pwd.new_password.length < 12) {
-    message.error("新密码至少 12 位");
-    return;
-  }
-  if (pwd.new_password !== pwd.confirm) {
-    message.error("两次输入的新密码不一致");
+  pwdError.value = "";
+  try {
+    await formRef.value?.validate();
+  } catch {
     return;
   }
   pwdLoading.value = true;
@@ -47,6 +85,8 @@ async function submitPassword() {
     pwd.old_password = "";
     pwd.new_password = "";
     pwd.confirm = "";
+  } catch (e) {
+    pwdError.value = e instanceof ApiError ? e.message : e instanceof Error ? e.message : "修改失败";
   } finally {
     pwdLoading.value = false;
   }
@@ -59,18 +99,26 @@ async function submitPassword() {
     <div class="page-body">
       <n-tabs type="line" animated>
         <n-tab-pane name="password" tab="管理员密码">
-          <n-form label-placement="left" label-width="100" :show-feedback="false" style="max-width: 480px">
-            <n-form-item label="原密码">
+          <n-alert v-if="pwdError" type="error" style="margin-bottom: 12px; max-width: 480px" :title="pwdError" />
+          <n-form
+            ref="formRef"
+            :model="pwd"
+            :rules="rules"
+            label-placement="left"
+            label-width="100"
+            style="max-width: 480px"
+          >
+            <n-form-item label="原密码" path="old_password">
               <n-input v-model:value="pwd.old_password" type="password" show-password-on="click" />
             </n-form-item>
-            <n-form-item>
+            <n-form-item path="new_password">
               <template #label>
                 新密码
-                <HelpTip>至少 12 位，且不能以 nst_ 开头（与端登录密码规则一致的安全要求）。</HelpTip>
+                <HelpTip>按字符数计至少 12 位。后端不检查 nst_ 前缀（那是端登录密码规则）。</HelpTip>
               </template>
               <n-input v-model:value="pwd.new_password" type="password" show-password-on="click" />
             </n-form-item>
-            <n-form-item label="确认新密码">
+            <n-form-item label="确认新密码" path="confirm">
               <n-input v-model:value="pwd.confirm" type="password" show-password-on="click" />
             </n-form-item>
             <n-space>
@@ -80,7 +128,8 @@ async function submitPassword() {
         </n-tab-pane>
         <n-tab-pane name="settings" tab="运行参数（只读）">
           <n-spin :show="loading">
-            <template v-if="settings">
+            <LoadFailed v-if="loadError && !settings" :description="loadError" @retry="load" />
+            <template v-else-if="settings">
               <n-descriptions label-placement="left" :column="2" bordered size="small" style="margin-bottom: 16px">
                 <n-descriptions-item label="listen">{{ settings.listen }}</n-descriptions-item>
                 <n-descriptions-item label="admin_listen">{{ settings.admin_listen || "（空，与端共用）" }}</n-descriptions-item>