feat(web): add password setup page, change password, and settings tabs

- First-time visitors see a password setup page instead of open access
- Password persisted to SQLite (env var DBX_PASSWORD takes priority)
- Add change password in settings dialog (Security tab, web only)
- Split settings dialog into Editor and Security tabs
- Argon2 hashing for all password storage

src/components/auth/LoginPage.vue

@@ -1,20 +1,36 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Lock, Loader2 } from "lucide-vue-next";
+import { Lock, Loader2, ShieldCheck } from "lucide-vue-next";
+
+const props = withDefaults(
+  defineProps<{
+    setupMode?: boolean;
+  }>(),
+  { setupMode: false },
+);
 
 const emit = defineEmits<{ authenticated: [] }>();
+const { t } = useI18n();
 
 const password = ref("");
+const confirmPassword = ref("");
 const error = ref("");
 const loading = ref(false);
 
-async function login() {
+async function submit() {
+  if (props.setupMode && password.value !== confirmPassword.value) {
+    error.value = t("auth.passwordMismatch");
+    return;
+  }
+
   loading.value = true;
   error.value = "";
   try {
-    const res = await fetch("/api/auth/login", {
+    const url = props.setupMode ? "/api/auth/setup" : "/api/auth/login";
+    const res = await fetch(url, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ password: password.value }),
@@ -23,10 +39,10 @@ async function login() {
       emit("authenticated");
     } else {
       const text = await res.text();
-      error.value = text || "密码错误";
+      error.value = text || t("auth.loginFailed");
     }
   } catch (e: any) {
-    error.value = e?.message || "连接失败";
+    error.value = e?.message || t("auth.connectFailed");
   } finally {
     loading.value = false;
   }
@@ -42,26 +58,46 @@ async function login() {
         <img src="/logo.png" alt="DBX" class="w-20 h-20 rounded-2xl shadow-lg shadow-blue-500/20" />
         <div class="text-center">
           <h1 class="text-2xl font-bold tracking-tight">DBX</h1>
-          <p class="text-sm text-muted-foreground mt-1">数据库管理工具</p>
+          <p class="text-sm text-muted-foreground mt-1">
+            {{ setupMode ? t("auth.setupDescription") : t("auth.loginDescription") }}
+          </p>
         </div>
       </div>
 
-      <form class="space-y-4" @submit.prevent="login" autocomplete="off">
+      <form class="space-y-4" @submit.prevent="submit" autocomplete="off">
+        <div v-if="setupMode" class="flex items-center justify-center gap-2 text-sm text-muted-foreground">
+          <ShieldCheck class="w-4 h-4" />
+          <span>{{ t("auth.setupTitle") }}</span>
+        </div>
         <div class="relative">
           <Lock class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
           <Input
             v-model="password"
             type="password"
-            placeholder="请输入访问密码"
+            :placeholder="setupMode ? t('auth.newPassword') : t('auth.enterPassword')"
             class="pl-10 h-11"
             autocomplete="off"
             autofocus
           />
         </div>
+        <div v-if="setupMode" class="relative">
+          <Lock class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            v-model="confirmPassword"
+            type="password"
+            :placeholder="t('auth.confirmPassword')"
+            class="pl-10 h-11"
+            autocomplete="off"
+          />
+        </div>
         <p v-if="error" class="text-sm text-destructive text-center">{{ error }}</p>
-        <Button type="submit" class="w-full h-11 text-sm font-medium" :disabled="loading || !password">
+        <Button
+          type="submit"
+          class="w-full h-11 text-sm font-medium"
+          :disabled="loading || !password || (setupMode && !confirmPassword)"
+        >
           <Loader2 v-if="loading" class="w-4 h-4 animate-spin mr-2" />
-          {{ loading ? "登录中..." : "登录" }}
+          {{ loading ? t("auth.processing") : setupMode ? t("auth.setPassword") : t("auth.login") }}
         </Button>
       </form>