用户资料/重置密码/用户管理

app/components/AdminLoginGate.vue

@@ -70,6 +70,12 @@ async function submit() {
       secret.value = ''
       await resetVerification()
       toast.add({ title: t('auth.loginSuccess'), color: 'success' })
+    } else if (result.needsPasswordReset) {
+      await resetVerification()
+      await router.push({
+        path: '/reset-password',
+        query: { username: result.resetUsername ?? username.value.trim() }
+      })
     } else {
       await resetVerification()
       toast.add({

app/components/AppShell.vue

@@ -18,6 +18,7 @@ const navItems = computed(() => {
     { label: t('nav.fileLibrary'), to: '/file-library', icon: 'i-lucide-folder-open' }
   ]
   if (isAdmin.value) {
+    items.push({ label: t('nav.users'), to: '/users', icon: 'i-lucide-users' })
     items.push({ label: t('nav.storage'), to: '/storage', icon: 'i-lucide-hard-drive' })
   }
   items.push({ label: t('nav.settings'), to: '/settings', icon: 'i-lucide-settings' })
@@ -47,6 +48,11 @@ function isHostActive(to: string) {
 }
 
 const accountMenuItems = computed<DropdownMenuItem[]>(() => [
+  {
+    label: t('profile.title'),
+    icon: 'i-lucide-user-round',
+    to: '/account/profile'
+  },
   {
     label: t('nav.changePassword'),
     icon: 'i-lucide-key-round',

app/composables/useAuth.ts

@@ -143,11 +143,19 @@ export function useAuth() {
     credentials: { username: string, password: string }
       | { secret: string },
     verification: LoginVerificationPayload
-  ): Promise<{ ok: boolean, needsMigration?: boolean, error?: string }> {
+  ): Promise<{
+    ok: boolean
+    needsMigration?: boolean
+    needsPasswordReset?: boolean
+    resetUsername?: string
+    error?: string
+  }> {
     try {
       const result = await $fetch<{
         success: boolean
         needsMigration?: boolean
+        requiresPasswordReset?: boolean
+        username?: string
         user?: AuthUser
       }>('/api/auth/login', {
         method: 'POST',
@@ -160,6 +168,13 @@ export function useAuth() {
       if (result.needsMigration) {
         return { ok: true, needsMigration: true }
       }
+      if (result.requiresPasswordReset) {
+        return {
+          ok: false,
+          needsPasswordReset: true,
+          resetUsername: result.username
+        }
+      }
       if (result.user) {
         user.value = result.user
       }

app/pages/account/profile.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const { isChecking, isAuthenticated, user, checkSession, fetchStatus, handleAuthError } = useAuth()
+const toast = useToast()
+const { t } = useI18n()
+
+const username = ref('')
+const saving = ref(false)
+
+watch(user, (value) => {
+  if (value) username.value = value.username
+}, { immediate: true })
+
+async function save() {
+  if (saving.value) return
+  saving.value = true
+  try {
+    const data = await $fetch<{ user: { username: string } }>('/api/user/profile', {
+      method: 'PATCH',
+      credentials: 'include',
+      body: { username: username.value.trim() }
+    })
+    await checkSession()
+    toast.add({ title: t('profile.saved'), color: 'success' })
+    username.value = data.user.username
+  } catch (error: unknown) {
+    handleAuthError(error)
+    const message = (error as { data?: { message?: string } })?.data?.message
+    toast.add({ title: message ?? t('profile.saveFailed'), color: 'error' })
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(async () => {
+  const status = await fetchStatus()
+  if (!status.initialized && !status.legacyMode) {
+    await navigateTo('/setup')
+    return
+  }
+  await checkSession()
+})
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div
+      v-if="isChecking"
+      class="flex min-h-screen items-center justify-center"
+    >
+      <UIcon
+        name="i-lucide-loader-circle"
+        class="size-8 animate-spin text-muted"
+      />
+    </div>
+
+    <AdminLoginGate v-else-if="!isAuthenticated" />
+
+    <AppShell v-else>
+      <div class="mx-auto max-w-md space-y-4">
+        <div>
+          <h1 class="text-2xl font-semibold tracking-tight">
+            {{ t('profile.title') }}
+          </h1>
+          <p class="text-sm text-muted">
+            {{ t('profile.subtitle') }}
+          </p>
+        </div>
+
+        <form
+          class="space-y-3 rounded-xl border border-default bg-elevated p-5"
+          @submit.prevent="save"
+        >
+          <label class="block text-sm font-medium">
+            {{ t('profile.username') }}
+          </label>
+          <UInput
+            v-model="username"
+            class="w-full"
+            :placeholder="t('profile.username')"
+          />
+          <p class="text-xs text-muted">
+            {{ t('profile.usernameHint') }}
+          </p>
+          <UButton
+            type="submit"
+            :loading="saving"
+            :label="t('common.save')"
+          />
+        </form>
+      </div>
+    </AppShell>
+  </div>
+</template>

app/pages/reset-password.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const { t } = useI18n()
+const { checkSession } = useAuth()
+
+const username = ref(String(route.query.username ?? ''))
+const password = ref('')
+const confirm = ref('')
+const loading = ref(false)
+
+async function submit() {
+  if (loading.value) return
+  if (password.value.length < 6) {
+    toast.add({ title: t('reset.tooShort'), color: 'warning' })
+    return
+  }
+  if (password.value !== confirm.value) {
+    toast.add({ title: t('reset.mismatch'), color: 'warning' })
+    return
+  }
+
+  loading.value = true
+  try {
+    await $fetch('/api/auth/reset-password', {
+      method: 'POST',
+      credentials: 'include',
+      body: { username: username.value.trim(), password: password.value }
+    })
+    await checkSession()
+    toast.add({ title: t('reset.success'), color: 'success' })
+    await router.replace('/')
+  } catch (error: unknown) {
+    toast.add({
+      title: error instanceof Error ? error.message : t('reset.failed'),
+      color: 'error'
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="flex min-h-screen items-center justify-center p-4">
+    <form
+      class="w-full max-w-sm space-y-4 rounded-xl border border-default bg-elevated p-6"
+      @submit.prevent="submit"
+    >
+      <div>
+        <h1 class="text-xl font-semibold tracking-tight">
+          {{ t('reset.title') }}
+        </h1>
+        <p class="mt-1 text-sm text-muted">
+          {{ t('reset.subtitle') }}
+        </p>
+      </div>
+
+      <UInput
+        v-model="username"
+        :placeholder="t('auth.username')"
+        class="w-full"
+      />
+      <UInput
+        v-model="password"
+        type="password"
+        :placeholder="t('reset.newPassword')"
+        class="w-full"
+      />
+      <UInput
+        v-model="confirm"
+        type="password"
+        :placeholder="t('reset.confirmPassword')"
+        class="w-full"
+      />
+
+      <UButton
+        type="submit"
+        block
+        :loading="loading"
+        :label="t('reset.submit')"
+      />
+    </form>
+  </div>
+</template>

app/pages/users.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+interface AdminUser {
+  id: number
+  username: string
+  role: 'admin' | 'user'
+  created_at: string
+  password_reset: number
+}
+
+const { isChecking, isAuthenticated, isAdmin, checkSession, fetchStatus, handleAuthError } = useAuth()
+const toast = useToast()
+const { t } = useI18n()
+
+const users = ref<AdminUser[]>([])
+const loading = ref(false)
+
+async function loadUsers() {
+  if (!isAdmin.value) return
+  loading.value = true
+  try {
+    const data = await $fetch<{ users: AdminUser[] }>('/api/admin/users', {
+      credentials: 'include'
+    })
+    users.value = data.users
+  } catch (error: unknown) {
+    handleAuthError(error)
+    if (isAuthenticated.value) {
+      toast.add({ title: t('users.loadFailed'), color: 'error' })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function clearPassword(user: AdminUser) {
+  try {
+    await $fetch(`/api/admin/users/${user.id}/clear-password`, {
+      method: 'POST',
+      credentials: 'include'
+    })
+    toast.add({ title: t('users.passwordCleared', { name: user.username }), color: 'success' })
+    await loadUsers()
+  } catch (error: unknown) {
+    handleAuthError(error)
+    toast.add({ title: t('users.clearFailed'), color: 'error' })
+  }
+}
+
+function formatDate(value: string) {
+  try {
+    return new Date(value).toLocaleString()
+  } catch {
+    return value
+  }
+}
+
+onMounted(async () => {
+  const status = await fetchStatus()
+  if (!status.initialized && !status.legacyMode) {
+    await navigateTo('/setup')
+    return
+  }
+  await checkSession()
+  if (isAuthenticated.value && isAdmin.value) {
+    await loadUsers()
+  }
+})
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div
+      v-if="isChecking"
+      class="flex min-h-screen items-center justify-center"
+    >
+      <div class="flex flex-col items-center gap-3 text-muted">
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="size-8 animate-spin"
+        />
+        <p class="text-sm">
+          {{ t('common.loadingSession') }}
+        </p>
+      </div>
+    </div>
+
+    <AdminLoginGate v-else-if="!isAuthenticated" />
+
+    <AppShell v-else>
+      <div class="flex items-start justify-between gap-3">
+        <div class="min-w-0">
+          <h1 class="text-2xl font-semibold tracking-tight">
+            {{ t('users.title') }}
+          </h1>
+          <p class="text-sm text-muted">
+            {{ t('users.subtitle') }}
+          </p>
+        </div>
+        <UButton
+          icon="i-lucide-refresh-cw"
+          variant="ghost"
+          color="neutral"
+          size="sm"
+          :aria-label="t('common.refresh')"
+          :loading="loading"
+          @click="loadUsers"
+        />
+      </div>
+
+      <UAlert
+        v-if="!isAdmin"
+        color="warning"
+        variant="subtle"
+        :title="t('users.adminOnly')"
+      />
+
+      <ul
+        v-else
+        class="rounded-xl border border-default"
+      >
+        <li
+          v-for="user in users"
+          :key="user.id"
+          class="flex flex-wrap items-center gap-3 border-b border-default px-4 py-3 last:border-0"
+        >
+          <div class="min-w-0 flex-1">
+            <p class="flex items-center gap-2 text-sm font-medium text-highlighted">
+              <span class="truncate">{{ user.username }}</span>
+              <UBadge
+                :color="user.role === 'admin' ? 'primary' : 'neutral'"
+                variant="subtle"
+                size="xs"
+              >
+                {{ user.role === 'admin' ? t('users.roleAdmin') : t('users.roleUser') }}
+              </UBadge>
+            </p>
+            <p class="mt-0.5 text-xs text-muted">
+              {{ formatDate(user.created_at) }}
+            </p>
+          </div>
+
+          <UBadge
+            v-if="user.password_reset === 1"
+            color="warning"
+            variant="subtle"
+            size="sm"
+          >
+            {{ t('users.resetPending') }}
+          </UBadge>
+          <UButton
+            v-else
+            variant="outline"
+            color="warning"
+            size="sm"
+            :label="t('users.clearPassword')"
+            @click="clearPassword(user)"
+          />
+        </li>
+      </ul>
+    </AppShell>
+  </div>
+</template>