feat(admin): 修改密码页 + 首次登录强制改密；自绘标题栏与管理面板 Electron 窗口

web/src/admin/App.vue

@@ -21,6 +21,7 @@ const isDesktopShell = typeof window !== 'undefined' && Boolean(window.desktopSh
   display: contents;
 }
 .is-desktop-shell {
+  --desktop-titlebar-h: 50px;
   display: flex;
   flex-direction: column;
   height: 100dvh;
@@ -40,4 +41,8 @@ const isDesktopShell = typeof window !== 'undefined' && Boolean(window.desktopSh
 .is-desktop-shell .admin-root-body :deep(.login-page) {
   min-height: 100%;
 }
+/* 窄窗时 AdminLayout 把侧栏切成 fixed 全屏抽屉，得让它从标题栏下方开始 */
+.is-desktop-shell .admin-root-body :deep(.mx-sidebar) {
+  top: var(--desktop-titlebar-h);
+}
 </style>

web/src/admin/api/client.ts

@@ -154,6 +154,14 @@ export const adminApi = {
       },
     ),
 
+  changePassword: (currentPassword: string, newPassword: string): Promise<{ relogin: boolean }> =>
+    call(
+      () => client.auth.changePassword(currentPassword, newPassword),
+      () => {
+        throw new ApiError('INTERNAL', '示例数据模式下无法修改密码', 0)
+      },
+    ),
+
   health: (): Promise<HealthInfo> =>
     call(
       () => client.health(),

web/src/admin/api/mock.ts

@@ -715,6 +715,7 @@ class MockDb {
       username,
       displayName: username === '' ? '示例用户' : username,
       role: 'admin',
+      mustChangePassword: false,
       lastLoginAt: null,
     }
   }

web/src/admin/components/DesktopTitleBar.vue

@@ -74,7 +74,7 @@ function handleDoubleClick(event: MouseEvent): void {
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  height: 50px;
+  height: var(--desktop-titlebar-h, 50px);
   flex: 0 0 auto;
   padding: 0 8px 0 16px;
   border-bottom: 1px solid var(--mx-divider);

web/src/admin/layouts/AdminLayout.vue

@@ -47,7 +47,10 @@ const NAV: NavGroup[] = [
       { name: 'logs', label: '日志', icon: 'logs' },
     ],
   },
-  { section: '系统', items: [{ name: 'system', label: '系统设置', icon: 'system' }] },
+  { section: '系统', items: [
+    { name: 'system', label: '系统设置', icon: 'system' },
+    { name: 'password', label: '修改密码', icon: 'lock' },
+  ] },
 ]
 
 const route = useRoute()
@@ -87,9 +90,13 @@ async function logout(): Promise<void> {
   void router.push({ name: 'dashboard' })
 }
 
-onMounted(() => {
-  void auth.load()
+onMounted(async () => {
+  await auth.load()
   void data.load()
+  // 首次登录（或密码被管理员重置）必须先改密码
+  if (auth.user?.mustChangePassword && route.name !== 'password') {
+    void router.push({ name: 'password' })
+  }
 })
 </script>
 

web/src/admin/pages/ChangePasswordPage.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import MxIcon from '../components/MxIcon.vue'
+import PageHeader from '../components/PageHeader.vue'
+import { adminApi } from '../api/client'
+import { useAuthStore } from '../stores/auth'
+import { useToastStore } from '../stores/toast'
+
+const auth = useAuthStore()
+const toast = useToastStore()
+const router = useRouter()
+
+const current = ref('')
+const next = ref('')
+const confirm = ref('')
+const submitting = ref(false)
+const error = ref<string | null>(null)
+
+// 首次登录（mustChangePassword）时强制走这一页，改完必须重新登录
+const forced = computed(() => auth.user?.mustChangePassword === true)
+const tooShort = computed(() => next.value.length > 0 && next.value.length < 8)
+const mismatch = computed(() => confirm.value.length > 0 && next.value !== confirm.value)
+const canSubmit = computed(
+  () =>
+    current.value.length > 0 &&
+    next.value.length >= 8 &&
+    next.value === confirm.value &&
+    !submitting.value,
+)
+
+async function submit(): Promise<void> {
+  if (!canSubmit.value) return
+  submitting.value = true
+  error.value = null
+  try {
+    await adminApi.changePassword(current.value, next.value)
+    toast.success('密码已修改，请用新密码重新登录')
+    // 服务端已作废全部会话，本地状态必须清掉，否则界面还以为是登录态
+    await auth.logout()
+    await router.push({ name: 'login' })
+  } catch (caught) {
+    error.value = caught instanceof Error ? caught.message : '修改失败'
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="password-page">
+    <PageHeader title="修改密码" subtitle="修改成功后需要重新登录" />
+
+    <div v-if="forced" class="mx-card forced-card">
+      <div class="mx-card-body forced-body">
+        <MxIcon name="lock" :size="18" />
+        <div>
+          <strong>首次登录必须修改密码</strong>
+          <p>默认管理员密码是随机生成的，请设置自己的密码后再继续使用。</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="mx-card form-card">
+      <div class="mx-card-body">
+        <form class="password-form" @submit.prevent="submit">
+          <label class="mx-label" for="cur">原密码</label>
+          <input
+            id="cur"
+            v-model="current"
+            class="mx-input"
+            type="password"
+            autocomplete="current-password"
+            placeholder="当前使用的密码"
+          />
+
+          <label class="mx-label" for="new">新密码</label>
+          <input
+            id="new"
+            v-model="next"
+            class="mx-input"
+            type="password"
+            autocomplete="new-password"
+            placeholder="至少 8 位"
+          />
+          <p v-if="tooShort" class="hint error">新密码至少 8 位</p>
+
+          <label class="mx-label" for="confirm">确认新密码</label>
+          <input
+            id="confirm"
+            v-model="confirm"
+            class="mx-input"
+            type="password"
+            autocomplete="new-password"
+            placeholder="再输入一次"
+          />
+          <p v-if="mismatch" class="hint error">两次输入不一致</p>
+
+          <p v-if="error" class="hint error">{{ error }}</p>
+
+          <button class="mx-btn mx-btn-primary submit" type="submit" :disabled="!canSubmit">
+            <MxIcon name="check" :size="16" />
+            {{ submitting ? '提交中…' : '修改密码' }}
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.password-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 560px;
+}
+.forced-card {
+  border-color: var(--mx-amber, #fbbf24);
+}
+.forced-body {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  color: var(--mx-amber, #fbbf24);
+}
+.forced-body p {
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--mx-t2);
+}
+.password-form {
+  display: flex;
+  flex-direction: column;
+}
+.password-form .mx-label:not(:first-child) {
+  margin-top: 16px;
+}
+.hint {
+  margin-top: 6px;
+  font-size: 12px;
+}
+.hint.error {
+  color: var(--mx-error, #f12522);
+}
+.submit {
+  margin-top: 22px;
+  align-self: flex-start;
+}
+</style>

web/src/admin/pages/LoginPage.vue

@@ -26,7 +26,8 @@ async function submit(): Promise<void> {
   }
   toast.success(`欢迎回来，${auth.displayName}`)
   await data.load()
-  void router.push({ name: 'entry' })
+  // 首次登录强制改密，改完才放行到业务页面
+  void router.push({ name: auth.user?.mustChangePassword ? 'password' : 'entry' })
 }
 
 function asGuest(): void {

web/src/admin/router.ts

@@ -88,6 +88,12 @@ const routes: RouteRecordRaw[] = [
         component: () => import('./pages/PlaceholderPage.vue'),
         meta: { title: '系统', note: '用户管理 / 备份恢复 / 赛事信息' },
       },
+      {
+        path: 'password',
+        name: 'password',
+        component: () => import('./pages/ChangePasswordPage.vue'),
+        meta: { title: '修改密码' },
+      },
     ],
   },
   { path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } },

web/src/shared/api.ts

@@ -115,6 +115,7 @@ export interface CrudApi<T, Input> {
 
 export interface AuthApi {
   login(username: string, password: string): Promise<CurrentUser>
+  changePassword(currentPassword: string, newPassword: string): Promise<{ relogin: boolean }>
   logout(): Promise<void>
   me(): Promise<CurrentUser>
 }
@@ -349,6 +350,11 @@ export class ApiClient {
     this.auth = {
       login: (username, password) =>
         http.request<CurrentUser>('/auth/login', { method: 'POST', body: { username, password } }),
+      changePassword: (currentPassword, newPassword) =>
+        http.request<{ relogin: boolean }>('/auth/password', {
+          method: 'POST',
+          body: { currentPassword, newPassword },
+        }),
       logout: () => http.requestVoid('/auth/logout', { method: 'POST' }),
       me: () => http.request<CurrentUser>('/auth/me'),
     }

web/src/shared/types.ts

@@ -383,6 +383,8 @@ export interface CurrentUser {
   username: string
   displayName: string
   role: string
+  /** 首次登录或管理员重置密码后为 true，前端应强制引导改密 */
+  mustChangePassword: boolean
   lastLoginAt: string | null
 }