feat: 忘记密码/修改密码 + 设置页结构重组 + barrel cleanup + LoginPage 版本统一

新增： - ForgotPasswordModal — 手机号+短信验证码重置密码 (AuthAPI.resetPassword) - ChangePasswordModal — 当前密码验证后修改密码 (AuthAPI.changePassword) - useSmsCooldown Hook — 通用短信发送冷却逻辑，供注册/忘记密码复用 - PasswordSetting — 设置页账号安全区块，双选项：修改密码 / 短信验证码重置修改： - LoginForm \"忘记密码?\" 链接接入 ForgotPasswordModal（替换 TODO） - LoginPage 移除 edition 业务版本 UI 区分，登录/注册 Tab 全局统一 - 设置页 Section 组件移入 blocks/ 子目录（git mv 保留历史） - auth.ts sendSms URL 修正: /sms/send → /send-sms 清理： - settings/index.ts 移除 4 个未使用 re-export，精简为仅 SettingsPage - navbar/index.ts 移除未使用 re-export，精简为仅 NavBar 文档： - WORKLOG.md 新增 2026-06-08 工作日志 - ARCHITECTURE.md / PROJECT.md 更新设置页目录结构与新组件 - TODO.md 忘记密码流程标记已完成 + 短信人机验证列入后期优化
2026-06-08 11:57:35 +08:00
parent 952a723448
commit 7032d1c3f2
22 changed files with 1089 additions and 515 deletions
--- a/.codegraph/daemon.pid
+++ b/.codegraph/daemon.pid
@@ -1,6 +1,6 @@
 {
-  "pid": 384720,
+  "pid": 568932,
  "version": "0.9.9",
  "socketPath": "\\\\.\\pipe\\codegraph-aef859f0205bacea",
-  "startedAt": 1780763058452
+  "startedAt": 1780880691721
 }
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -1,6 +1,6 @@
 # 船长 · HeiXiu — 前端架构文档

-> 最后更新：2026-06-07
+> 最后更新：2026-06-08

 ## 目录结构

@@ -17,12 +17,21 @@ src/
 │   ├── use-theme.ts      # 主题切换
 │   └── use-updater.ts    # 版本更新
 ├── pages/                # 页面
-│   └── login/            # 登录/注册
-│       ├── index.tsx     # LoginPage — Modal 弹层
-│       ├── components/   # LoginForm / RegisterForm / FormField
-│       ├── config/       # 字段配置 / 校验规则
-│       ├── hooks/        # use-auth-state（记住账号偏好）
-│       └── types.ts      # LoginFormValues / RegisterFormValues
+│   ├── login/            # 登录/注册/忘记密码/修改密码
+│   │   ├── index.tsx     # LoginPage — Modal 弹层
+│   │   ├── components/   # LoginForm / RegisterForm / ForgotPasswordModal / ChangePasswordModal / FormField
+│   │   ├── config/       # 字段配置 / 校验规则
+│   │   ├── hooks/        # use-auth-state / use-sms-cooldown
+│   │   └── types.ts      # LoginFormValues / RegisterFormValues / FieldConfig
+│   └── settings/         # 设置面板（主题 / 存储 / 账号安全 / 系统信息 / 更新）
+│       ├── SettingsPage.tsx  # 设置 Modal 主页面
+│       ├── index.ts          # barrel export
+│       └── blocks/           # 设置子区块组件
+│           ├── ThemeSetting.tsx
+│           ├── StoragePathSetting.tsx
+│           ├── SystemInfoSetting.tsx
+│           ├── UpdateSetting.tsx
+│           └── PasswordSetting.tsx
 ├── services/             # HTTP 层 + API 模块
 │   ├── request.ts        # Axios 封装（通用 HTTP 层，不知晓 auth）
 │   ├── auth-token.ts     # Token 生命周期（refresh_token 存取 + 401 刷新回调）
--- a/PROJECT.md
+++ b/PROJECT.md
@@ -79,7 +79,7 @@
 │ ├── pages/ # 页面组件
 │ │ ├── home/ # 首页仪表盘
 │ │ ├── login/ # 登录 / 注册页
-│   │   └── settings/        # 设置面板（主题 / 存储 / 更新）
+│ │ └── settings/ # 设置面板（主题 / 存储 / 账号安全 / 系统信息 / 更新）
 │ ├── router/index.tsx # HashRouter 路由配置
 │ ├── services/ # HTTP 请求封装
 │ │ ├── request.ts # Axios 封装 + 拦截器 + Token 刷新
@@ -262,20 +262,22 @@
 ```

 | 模块                | 位置                                            | 职责                                       |
-|------|------|------|
+|-------------------|-----------------------------------------------|------------------------------------------|
 | `HeiXiuProvider`  | `electron/main/updater.ts`                    | 自定义 Provider，调用自有 API，无更新返回 APP_VERSION  |
 | `checkForUpdates` | `electron/main/updater.ts`                    | 预检版本 → 无更新直发 IPC / 有更新交 electron-updater |
 | `downloadUpdate`  | `electron/main/updater.ts`                    | 用户确认后触发下载（从 checkForUpdates 分离）          |
 | `netRequest`      | `electron/main/net-request.ts`                | Electron net.request 的 axios 风格封装        |
 | `useUpdater`      | `src/hooks/use-updater.ts`                    | 渲染进程更新状态 Hook（单例 IPC 监听）                 |
-| `UpdateSetting` | `src/pages/settings/UpdateSetting.tsx` | 设置页更新区块（含"查看详情"弹窗） |
+| `UpdateSetting`   | `src/pages/settings/blocks/UpdateSetting.tsx` | 设置页更新区块（含"查看详情"弹窗）                       |
 | `server.py`       | `test-server/server.py`                       | 本地测试服务器，扫描 release/ 目录，语义版本排序            |

 ## 增量更新（差分下载）

 - `package.json` 配置 `"differentialPackage": true`，electron-builder 打包时自动生成 `.exe.blockmap` 文件
- 自定义 Provider 模式：`HeiXiuNsisUpdater extends NsisUpdater` / `HeiXiuMacUpdater extends MacUpdater` / `HeiXiuAppImageUpdater extends AppImageUpdater`
- 三平台 Updater 均覆盖 `getUpdateInfoAndProvider()` 注入 `HeiXiuProvider`（自定义 API 版本检查），差分下载由 electron-updater 父类原生处理
+- 自定义 Provider 模式：`HeiXiuNsisUpdater extends NsisUpdater` / `HeiXiuMacUpdater extends MacUpdater` /
+  `HeiXiuAppImageUpdater extends AppImageUpdater`
+- 三平台 Updater 均覆盖 `getUpdateInfoAndProvider()` 注入 `HeiXiuProvider`（自定义 API 版本检查），差分下载由
+  electron-updater 父类原生处理
 - blockmap 文件流程：
    - `scripts/generate-update-info.mjs` — 扫描 blockmap 文件，写 `blockmap.url` + `blockmap.size` 到 `update-info.json`
    - `scripts/upload-oss.mjs` — 安装包 + blockmap 文件一并上传 OSS（支持 Node.js 直传和 ossutil 两种模式）
@@ -294,7 +296,7 @@
 ```

 | 文件                 | 何时生效                | 进 git | 用途                 |
-|------|---------|:------:|------|
+|--------------------|---------------------|:-----:|--------------------|
 | `.env.development` | `npm run dev`       |   ✅   | 本地开发（API → 测试服务器）  |
 | `.env.production`  | `npm run build:xxx` |   ❌   | 构建时参考（API → 生产服务器） |
 | `.env.local`       | 始终（后加载）             |   ❌   | 个人特殊配置（打包后连本地测试）   |
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 ## 技术栈

 | 层  | 技术                             |
-| ---- | ------------------------------ |
+|----|--------------------------------|
 | 框架 | Electron 42                    |
 | 前端 | React 19 + TypeScript + Vite 8 |
 | UI | Ant Design 6 + Tailwind CSS 4  |
@@ -68,7 +68,7 @@ node build.mjs --win --personal --clean --build
 ```

 | 操作          | 说明                                                      |
-| ----------- | -------------------------------------------------------------- |
+|-------------|---------------------------------------------------------|
 | `--build`   | 构建（默认：tsc + vite + electron-builder + update-info.json） |
 | `--clean`   | 构建前清理 release/ dist/ dist-electron/                     |
 | `--sign`    | 代码签名（需配合 `--cert` 或 `CSC_LINK` 环境变量）                    |
@@ -144,7 +144,7 @@ ele-heixiu/
 主进程加载顺序：`.env.{mode}` → `.env.local` → OS 环境变量 → 代码默认值。

 | 变量                      | 默认值                                                    | 用途            |
-| ----------------------- | ------------------------------------------------------ | --------------- |
+|-------------------------|--------------------------------------------------------|---------------|
 | `UPDATE_API_URL`        | `https://www.heixiu.com`                               | 版本检查 API      |
 | `UPDATE_API_KEY`        | —                                                      | 发布 API 鉴权     |
 | `UPDATE_DOWNLOAD_BASE`  | `https://heixiu.oss-cn-hangzhou.aliyuncs.com/releases` | OSS 下载基地址     |
@@ -163,7 +163,7 @@ ele-heixiu/
 ## 相关文档

 | 文档                                               | 面向    | 内容                    |
-|------|------|------|
+|--------------------------------------------------|-------|-----------------------|
 | [PROJECT.md](./PROJECT.md)                       | 开发者   | 技术架构、更新系统、环境变量架构、测试流程 |
 | [UpdateA.md](./UpdateA.md)                       | 前端发版  | 构建命令、发版流程、代码签名        |
 | [test-server/README.md](./test-server/README.md) | 后端程序员 | API 规格、数据库表结构、实现清单    |
--- a/TODO.md
+++ b/TODO.md
@@ -1,6 +1,6 @@
 # TODO — 船长·HeiXiu 待办与优化清单

-> 最后更新：2026-06-07
+> 最后更新：2026-06-08

 ---

@@ -17,12 +17,10 @@
 - [ ] 合规素材库页面（`/compliance-assets`）
 - [ ] 项目管理页面（`/projects`，企业版）
 - [ ] 账户/会员/充值/消费记录/订单明细页面
- [ ] 忘记密码流程
 - [ ] 各页面暗色主题适配

 ### 导航栏

- [ ] 移除调试用的 `console.log`
 - [ ] 导航配置中的 `action: 'external'` 统一管理（白名单校验）
 - [ ] 未登录点击需登录项 → 登录成功后自动跳转到目标页

@@ -62,11 +60,9 @@
 ## ⚠️ 已知技术债务

 | 问题              | 说明                                                                                                                   | 影响             |
-|-----------------|---------------------------------------|------------------|
+|-----------------|----------------------------------------------------------------------------------------------------------------------|----------------|
 | localStorage 依赖 | 所有持久化数据依赖 localStorage                                                                                               | 清理浏览器数据会丢失所有配置 |
 | IPC 监听器         | useUpdater 已改为单例，其他 IPC hook 可能也有类似问题                                                                                | 长期运行可能内存泄漏     |
-| ~~主题切换状态重置~~      | ✅ 已修复 — 根因：设置页 `navigate('/settings')` 导致路由 `/*` 仅匹配 index，HomePage 被卸载重挂载。修复：SettingsPage 改为事件总线驱动的 Modal 居中叠加，不走路由 | ~~用户体验差~~ |
-| ~~三栏布局拖拽溢出~~      | ✅ 已修复 — 拖拽分隔条增加最大宽度约束（`maxLeft = containerWidth - 36 - 300 - rightWidth`）+ 视口缩小 ResizeObserver 自动收窄 | ~~布局可用性~~ |
 | `test.py`       | 仓库根目录残留测试文件                                                                                                          | 无实际作用，应清理      |
 | `null` 文件       | 仓库根目录名为 null 的文件                                                                                                     | 构建产物或误操作残留     |

@@ -76,5 +72,6 @@

 1. **合规素材库页面**（功能待完善 — 按 QT 原版设计，以 Modal/Drawer 叠加而非路由跳转实现）
 2. **各页面 nav 导航补齐**（后续页面优先使用叠加模式，遵循 QT 多窗口模型 → 见 WORKLOG 2026-06-07）
-3. **leftWidth / rightWidth / taskPage 加 localStorage 持久化**（UX 优化：刷新页面后保持用户偏好）
-4. **轮播图关闭按钮状态优化**（当前为 session 级别 useState，可考虑加 localStorage 记录关闭时间戳，超过 N 天再显示）
+3. **leftWidth / rightWidth / taskPage 加 localStorage 持久化**（UX 优化：刷新页面后保持用户偏好；已通过路由去路由化解决组件卸载问题，但 localStorage 持久层仍未实现）
+4. **轮播图关闭按钮 localStorage 持久化**（关闭按钮已实现，待做：localStorage 记录关闭时间戳，超过 N 天再显示）
+5. **短信发送接入人机验证**（后期优化，需后端配合：`sendSms` 接口增加 `captcha_token` 参数 + 前端滑块/图形验证组件。当前仅靠 60s 冷却按钮 + 后端限流，桌面端 ASAR 可解包 + DevTools 网络面板 + 代理抓包均能直接暴露 API，纯前端限制对脚本攻击无效）
--- a/src/components/navbar/AnnouncementDrawer.tsx
+++ b/src/components/navbar/AnnouncementDrawer.tsx
@@ -3,13 +3,13 @@
 // 数据来源：GET /api/v1/announcements
 // ============================================================

-import { useEffect, useState, useCallback } from 'react';
-import { Drawer, Card, Typography, Empty, Tag, Spin, Modal, Tooltip } from 'antd';
-import { NotificationOutlined } from '@ant-design/icons';
+import {useEffect, useState, useCallback} from 'react';
+import {Drawer, Card, Typography, Empty, Tag, Spin, Modal, Tooltip} from 'antd';
+import {NotificationOutlined} from '@ant-design/icons';

-import { fetchAnnouncements, type Announcement } from '@/services/modules';
+import {fetchAnnouncements, type Announcement, AnnouncementListResponse} from '@/services/modules';

-const { Text, Paragraph } = Typography;
+const {Text, Paragraph} = Typography;

 // ---------- 辅助 ----------

@@ -51,7 +51,7 @@ interface AnnouncementDrawerProps {
    onClose: () => void;
 }

-export function AnnouncementDrawer({ open, onClose }: AnnouncementDrawerProps) {
+export function AnnouncementDrawer({open, onClose}: AnnouncementDrawerProps) {
    const [list, setList] = useState<Announcement[]>([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
@@ -64,9 +64,8 @@ export function AnnouncementDrawer({ open, onClose }: AnnouncementDrawerProps) {
        setLoading(true);
        setError(null);
        try {
-         const data = await fetchAnnouncements();
-         // 仅展示有效公告
-         setList(data.filter((item) => item.is_active));
+            const data: AnnouncementListResponse = await fetchAnnouncements();
+            setList(data.filter((item: Announcement) => item.is_active));
        } catch (err) {
            setError((err as Error).message || '加载公告失败');
            setList([]);
@@ -96,7 +95,7 @@ export function AnnouncementDrawer({ open, onClose }: AnnouncementDrawerProps) {
                size={380}
                open={open}
                onClose={onClose}
-            styles={{ body: { padding: 0 } }}
+                styles={{body: {padding: 0}}}
            >
                {loading ? (
                    <div className="flex items-center justify-center h-64">
@@ -112,7 +111,7 @@ export function AnnouncementDrawer({ open, onClose }: AnnouncementDrawerProps) {
                    </div>
                ) : (
                    <div className="flex flex-col gap-3 p-3">
-                  {list.map((item) => (
+                        {list.map((item:Announcement) => (
                            <Tooltip
                                key={item.id}
                                title={
@@ -144,7 +143,7 @@ export function AnnouncementDrawer({ open, onClose }: AnnouncementDrawerProps) {
                                    <Paragraph
                                        className="mb-2! text-xs"
                                        type="secondary"
-                              ellipsis={{ rows: 2 }}
+                                        ellipsis={{rows: 2}}
                                    >
                                        {item.content}
                                    </Paragraph>
--- a/src/components/navbar/NavBar.tsx
+++ b/src/components/navbar/NavBar.tsx
@@ -7,30 +7,30 @@
 //   - 登录/注册 与 退出登录 仍按登录状态互斥显示
 // ============================================================

-import { useState, useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { App } from 'antd';
+import {useState, useCallback, useMemo} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {App} from 'antd';

-import { useAppContext } from '@/contexts/app-context';
-import { useTheme } from '@/hooks/use-theme';
-import { emit, EVENTS } from '@/utils/event-bus.ts';
-import { NavItem } from './NavItem';
-import { AnnouncementDrawer } from './AnnouncementDrawer';
-import { personalLeft, personalRight, enterpriseLeft, enterpriseRight } from './nav-config';
-import type { NavItemConfig } from './types';
+import {useAppContext} from '@/contexts/app-context';
+import {useTheme} from '@/hooks/use-theme';
+import {emit, EVENTS} from '@/utils/event-bus.ts';
+import {NavItem} from './NavItem';
+import {AnnouncementDrawer} from './AnnouncementDrawer';
+import {personalLeft, personalRight, enterpriseLeft, enterpriseRight} from './nav-config';
+import type {NavItemConfig} from './types';

 const NAVBAR_HEIGHT = 56;

 export function NavBar() {
-   const { platform, edition, isLoggedIn, logout } = useAppContext();
-   const { isDark } = useTheme();
-   const { message } = App.useApp();
+    const {platform, edition, isLoggedIn, logout} = useAppContext();
+    const {isDark} = useTheme();
+    const {message} = App.useApp();
    const navigate = useNavigate();

    const [drawerOpen, setDrawerOpen] = useState(false);

    // 根据版本选择导航项
-   const { leftItems, rightItems } = useMemo(() => {
+    const {leftItems, rightItems} = useMemo(() => {
        const isEnterprise = edition === 'enterprise';
        return {
            leftItems: isEnterprise ? enterpriseLeft : personalLeft,
@@ -50,7 +50,7 @@ export function NavBar() {
            }),
        [leftItems, isLoggedIn],
    );
-   const visibleRight = useMemo(
+    const visibleRight: NavItemConfig[] = useMemo(
        () =>
            rightItems.filter((item) => {
                if (item.requireGuest && isLoggedIn) return false;
--- a/src/components/navbar/index.ts
+++ b/src/components/navbar/index.ts
@@ -1,3 +1 @@
 export { NavBar } from './NavBar';
-export { AnnouncementDrawer } from './AnnouncementDrawer';
-export type { NavItemConfig, NavBarConfig, NavAction } from './types';
--- a/src/pages/login/components/ChangePasswordModal.tsx
+++ b/src/pages/login/components/ChangePasswordModal.tsx
@@ -0,0 +1,199 @@
+// ============================================================
+// ChangePasswordModal — 修改密码弹窗（已登录用户）
+//
+// 场景：已登录用户通过旧密码验证后设置新密码
+// 复用：可在设置页"修改密码"入口使用，也可在其他位置独立调用
+//
+// API：
+//   - AuthAPI.changePassword({ current_password, new_password })
+// ============================================================
+
+import { useState, useCallback } from 'react';
+import { Modal, Input, Button, Typography, App } from 'antd';
+import { LockOutlined, KeyOutlined, SafetyOutlined } from '@ant-design/icons';
+
+import { useTheme } from '@/hooks/use-theme.ts';
+import { AuthAPI } from '@/services/modules';
+import { validatePassword, validateConfirmPassword } from '../config/validators';
+
+const { Text, Title } = Typography;
+
+interface ChangePasswordModalProps {
+   open: boolean;
+   onClose: () => void;
+}
+
+export function ChangePasswordModal({ open, onClose }: ChangePasswordModalProps) {
+   const { isDark } = useTheme();
+   const { message } = App.useApp();
+
+   // ---- 表单字段 ----
+   const [currentPassword, setCurrentPassword] = useState('');
+   const [newPassword, setNewPassword] = useState('');
+   const [confirmPassword, setConfirmPassword] = useState('');
+
+   // ---- 错误信息 ----
+   const [errors, setErrors] = useState<Record<string, string>>({});
+
+   // ---- 提交状态 ----
+   const [submitting, setSubmitting] = useState(false);
+
+   // ---- 清除单个字段错误 ----
+   const clearError = useCallback((name: string) => {
+      setErrors((p) => {
+         if (!(name in p)) return p;
+         const n = { ...p };
+         delete n[name];
+         return n;
+      });
+   }, []);
+
+   // ---- 提交 ----
+   const handleSubmit = useCallback(async () => {
+      const newErrors: Record<string, string> = {};
+
+      if (!currentPassword) {
+         newErrors.currentPassword = '请输入当前密码';
+      }
+      const pwdErr = validatePassword(newPassword);
+      if (pwdErr) newErrors.newPassword = pwdErr;
+      const confirmErr = validateConfirmPassword(confirmPassword, newPassword);
+      if (confirmErr) newErrors.confirmPassword = confirmErr;
+
+      if (Object.keys(newErrors).length > 0) {
+         setErrors(newErrors);
+         return;
+      }
+
+      setErrors({});
+      setSubmitting(true);
+      try {
+         await AuthAPI.changePassword({
+            current_password: currentPassword,
+            new_password: newPassword,
+         });
+         message.success('密码修改成功');
+         // 重置表单
+         setCurrentPassword('');
+         setNewPassword('');
+         setConfirmPassword('');
+         onClose();
+      } catch (err) {
+         message.error((err as Error).message || '密码修改失败');
+      } finally {
+         setSubmitting(false);
+      }
+   }, [currentPassword, newPassword, confirmPassword, onClose, message]);
+
+   // ---- 关闭时重置错误 ----
+   const handleClose = useCallback(() => {
+      setErrors({});
+      onClose();
+   }, [onClose]);
+
+   return (
+      <Modal
+         open={open}
+         onCancel={handleClose}
+         footer={null}
+         width={440}
+         centered
+         destroyOnHidden={true}
+         mask={{ closable: false }}
+         styles={{
+            body: {
+               padding: '24px 32px 16px',
+               background: isDark ? '#1A1730' : '#FFFFFF',
+            },
+         }}
+      >
+         {/* 标题 */}
+         <div className="text-center mb-5">
+            <Title level={5} className="!mb-1 gradient-primary-text">
+               修改密码
+            </Title>
+            <Text type="secondary" className="text-xs">
+               请输入当前密码并设置新密码
+            </Text>
+         </div>
+
+         {/* 表单 */}
+         <div className="space-y-4">
+            {/* 当前密码 */}
+            <div>
+               <Input.Password
+                  size="large"
+                  prefix={<SafetyOutlined className="opacity-40" />}
+                  placeholder="当前密码"
+                  value={currentPassword}
+                  onChange={(e) => {
+                     setCurrentPassword(e.target.value);
+                     clearError('currentPassword');
+                  }}
+                  status={errors.currentPassword ? 'error' : undefined}
+                  allowClear
+               />
+               {errors.currentPassword && (
+                  <Text type="danger" className="text-xs ml-1">
+                     {errors.currentPassword}
+                  </Text>
+               )}
+            </div>
+
+            {/* 新密码 */}
+            <div>
+               <Input.Password
+                  size="large"
+                  prefix={<LockOutlined className="opacity-40" />}
+                  placeholder="新密码（6~128位）"
+                  value={newPassword}
+                  onChange={(e) => {
+                     setNewPassword(e.target.value);
+                     clearError('newPassword');
+                  }}
+                  status={errors.newPassword ? 'error' : undefined}
+                  allowClear
+               />
+               {errors.newPassword && (
+                  <Text type="danger" className="text-xs ml-1">
+                     {errors.newPassword}
+                  </Text>
+               )}
+            </div>
+
+            {/* 确认新密码 */}
+            <div>
+               <Input.Password
+                  size="large"
+                  prefix={<KeyOutlined className="opacity-40" />}
+                  placeholder="请再次输入新密码"
+                  value={confirmPassword}
+                  onChange={(e) => {
+                     setConfirmPassword(e.target.value);
+                     clearError('confirmPassword');
+                  }}
+                  status={errors.confirmPassword ? 'error' : undefined}
+                  allowClear
+               />
+               {errors.confirmPassword && (
+                  <Text type="danger" className="text-xs ml-1">
+                     {errors.confirmPassword}
+                  </Text>
+               )}
+            </div>
+
+            {/* 提交按钮 */}
+            <Button
+               type="primary"
+               block
+               size="large"
+               loading={submitting}
+               onClick={handleSubmit}
+               className="h-11! text-base! font-medium! mt-2!"
+            >
+               确认修改
+            </Button>
+         </div>
+      </Modal>
+   );
+}
--- a/src/pages/login/components/ForgotPasswordModal.tsx
+++ b/src/pages/login/components/ForgotPasswordModal.tsx
@@ -0,0 +1,265 @@
+// ============================================================
+// ForgotPasswordModal — 忘记密码弹窗
+//
+// 场景：未登录用户通过手机号 + 短信验证码重置密码
+// 复用：可在登录页"忘记密码?"入口使用，也可在其他位置独立调用
+//
+// API：
+//   - AuthAPI.sendSms({ phone })         发送短信验证码
+//   - AuthAPI.resetPassword({ phone, sms_code, new_password })  重置密码
+// ============================================================
+
+import { useState, useCallback } from 'react';
+import { Modal, Input, Button, Typography, App } from 'antd';
+import {
+   PhoneOutlined,
+   SafetyCertificateOutlined,
+   LockOutlined,
+   KeyOutlined,
+} from '@ant-design/icons';
+
+import { useTheme } from '@/hooks/use-theme.ts';
+import { AuthAPI } from '@/services/modules';
+import {
+   validatePhone,
+   validateSmsCode,
+   validatePassword,
+   validateConfirmPassword,
+} from '../config/validators';
+import { useSmsCooldown } from '../hooks/use-sms-cooldown';
+
+const { Text, Title } = Typography;
+
+interface ForgotPasswordModalProps {
+   open: boolean;
+   onClose: () => void;
+}
+
+export function ForgotPasswordModal({ open, onClose }: ForgotPasswordModalProps) {
+   const { isDark } = useTheme();
+   const { message } = App.useApp();
+
+   // ---- 表单字段 ----
+   const [phone, setPhone] = useState('');
+   const [smsCode, setSmsCode] = useState('');
+   const [newPassword, setNewPassword] = useState('');
+   const [confirmPassword, setConfirmPassword] = useState('');
+
+   // ---- 错误信息 ----
+   const [errors, setErrors] = useState<Record<string, string>>({});
+
+   // ---- 提交状态 ----
+   const [submitting, setSubmitting] = useState(false);
+
+   // ---- 短信冷却 ----
+   const { cooldown, secondsLeft, startCooldown } = useSmsCooldown(60);
+
+   // ---- 清除单个字段错误 ----
+   const clearError = useCallback((name: string) => {
+      setErrors((p) => {
+         if (!(name in p)) return p;
+         const n = { ...p };
+         delete n[name];
+         return n;
+      });
+   }, []);
+
+   // ---- 发送验证码 ----
+   const handleSendSms = useCallback(() => {
+      const err = validatePhone(phone);
+      if (err) {
+         setErrors((p) => ({ ...p, phone: err }));
+         return;
+      }
+      clearError('phone');
+      startCooldown();
+      AuthAPI.sendSms({ phone })
+         .then(() => message.success('验证码已发送'))
+         .catch((e) => message.error((e as Error).message || '验证码发送失败'));
+   }, [phone, startCooldown, clearError, message]);
+
+   // ---- 提交重置 ----
+   const handleSubmit = useCallback(async () => {
+      // 逐字段校验
+      const newErrors: Record<string, string> = {};
+      const phoneErr = validatePhone(phone);
+      if (phoneErr) newErrors.phone = phoneErr;
+      const smsErr = validateSmsCode(smsCode);
+      if (smsErr) newErrors.smsCode = smsErr;
+      const pwdErr = validatePassword(newPassword);
+      if (pwdErr) newErrors.newPassword = pwdErr;
+      const confirmErr = validateConfirmPassword(confirmPassword, newPassword);
+      if (confirmErr) newErrors.confirmPassword = confirmErr;
+
+      if (Object.keys(newErrors).length > 0) {
+         setErrors(newErrors);
+         return;
+      }
+
+      setErrors({});
+      setSubmitting(true);
+      try {
+         await AuthAPI.resetPassword({
+            phone,
+            sms_code: smsCode,
+            new_password: newPassword,
+         });
+         message.success('密码重置成功，请使用新密码登录');
+         // 重置表单状态
+         setPhone('');
+         setSmsCode('');
+         setNewPassword('');
+         setConfirmPassword('');
+         onClose();
+      } catch (err) {
+         message.error((err as Error).message || '密码重置失败');
+      } finally {
+         setSubmitting(false);
+      }
+   }, [phone, smsCode, newPassword, confirmPassword, onClose, message]);
+
+   // ---- 关闭时重置 ----
+   const handleClose = useCallback(() => {
+      setErrors({});
+      onClose();
+   }, [onClose]);
+
+   return (
+      <Modal
+         open={open}
+         onCancel={handleClose}
+         footer={null}
+         width={440}
+         centered
+         destroyOnHidden={true}
+         mask={{ closable: false }}
+         styles={{
+            body: {
+               padding: '24px 32px 16px',
+               background: isDark ? '#1A1730' : '#FFFFFF',
+            },
+         }}
+      >
+         {/* 标题 */}
+         <div className="text-center mb-5">
+            <Title level={5} className="!mb-1 gradient-primary-text">
+               重置密码
+            </Title>
+            <Text type="secondary" className="text-xs">
+               通过手机短信验证码重置您的密码
+            </Text>
+         </div>
+
+         {/* 表单 */}
+         <div className="space-y-4">
+            {/* 手机号 */}
+            <div>
+               <Input
+                  size="large"
+                  prefix={<PhoneOutlined className="opacity-40" />}
+                  placeholder="请输入手机号"
+                  value={phone}
+                  onChange={(e) => {
+                     setPhone(e.target.value);
+                     clearError('phone');
+                  }}
+                  status={errors.phone ? 'error' : undefined}
+                  allowClear
+               />
+               {errors.phone && (
+                  <Text type="danger" className="text-xs ml-1">
+                     {errors.phone}
+                  </Text>
+               )}
+            </div>
+
+            {/* 短信验证码 */}
+            <div>
+               <div className="flex gap-2">
+                  <Input
+                     size="large"
+                     prefix={<SafetyCertificateOutlined className="opacity-40" />}
+                     placeholder="请输入验证码"
+                     value={smsCode}
+                     onChange={(e) => {
+                        setSmsCode(e.target.value);
+                        clearError('smsCode');
+                     }}
+                     status={errors.smsCode ? 'error' : undefined}
+                     className="flex-1"
+                     allowClear
+                  />
+                  <Button
+                     size="large"
+                     type="primary"
+                     disabled={cooldown}
+                     onClick={handleSendSms}
+                     className="text-xs! shrink-0 px-3!"
+                  >
+                     {cooldown ? `${secondsLeft}s` : '发送验证码'}
+                  </Button>
+               </div>
+               {errors.smsCode && (
+                  <Text type="danger" className="text-xs ml-1">
+                     {errors.smsCode}
+                  </Text>
+               )}
+            </div>
+
+            {/* 新密码 */}
+            <div>
+               <Input.Password
+                  size="large"
+                  prefix={<LockOutlined className="opacity-40" />}
+                  placeholder="新密码（6~128位）"
+                  value={newPassword}
+                  onChange={(e) => {
+                     setNewPassword(e.target.value);
+                     clearError('newPassword');
+                  }}
+                  status={errors.newPassword ? 'error' : undefined}
+                  allowClear
+               />
+               {errors.newPassword && (
+                  <Text type="danger" className="text-xs ml-1">
+                     {errors.newPassword}
+                  </Text>
+               )}
+            </div>
+
+            {/* 确认新密码 */}
+            <div>
+               <Input.Password
+                  size="large"
+                  prefix={<KeyOutlined className="opacity-40" />}
+                  placeholder="请再次输入新密码"
+                  value={confirmPassword}
+                  onChange={(e) => {
+                     setConfirmPassword(e.target.value);
+                     clearError('confirmPassword');
+                  }}
+                  status={errors.confirmPassword ? 'error' : undefined}
+                  allowClear
+               />
+               {errors.confirmPassword && (
+                  <Text type="danger" className="text-xs ml-1">
+                     {errors.confirmPassword}
+                  </Text>
+               )}
+            </div>
+
+            {/* 提交按钮 */}
+            <Button
+               type="primary"
+               block
+               size="large"
+               loading={submitting}
+               onClick={handleSubmit}
+               className="h-11! text-base! font-medium! mt-2!"
+            >
+               重置密码
+            </Button>
+         </div>
+      </Modal>
+   );
+}
--- a/src/pages/login/components/LoginForm.tsx
+++ b/src/pages/login/components/LoginForm.tsx
@@ -22,6 +22,7 @@ interface LoginFormProps {
   onSubmit: (values: LoginFormValues) => void;
   onRememberChange: (checked: boolean) => void;
   onAutoLoginChange: (checked: boolean) => void;
+   onForgotPassword?: () => void;
 }

 export function LoginForm({
@@ -33,6 +34,7 @@ export function LoginForm({
   onSubmit,
   onRememberChange,
   onAutoLoginChange,
+   onForgotPassword,
 }: LoginFormProps) {
   const [username, setUsername] = useState(initialUsername || '');
   const [password, setPassword] = useState(initialPassword || '');
@@ -147,12 +149,7 @@ export function LoginForm({
                     自动登录
                  </Checkbox>
               </div>
-               <a
-                  className="text-xs"
-                  onClick={() => {
-                     /* TODO: 忘记密码流程 */
-                  }}
-               >
+               <a className="text-xs" onClick={() => onForgotPassword?.()}>
                  忘记密码?
               </a>
            </div>
--- a/src/pages/login/hooks/use-sms-cooldown.ts
+++ b/src/pages/login/hooks/use-sms-cooldown.ts
@@ -0,0 +1,57 @@
+// ============================================================
+// useSmsCooldown — 短信验证码发送冷却 Hook
+//
+// 从 RegisterForm 提取，供所有需要短信验证码的场景复用：
+//   - 注册（RegisterForm）
+//   - 忘记密码（ForgotPasswordModal）
+// ============================================================
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+export interface SmsCooldownState {
+   /** 是否在冷却中 */
+   cooldown: boolean;
+   /** 冷却剩余秒数 */
+   secondsLeft: number;
+   /** 开始冷却 */
+   startCooldown: () => void;
+}
+
+export function useSmsCooldown(cooldownSeconds: number = 60): SmsCooldownState {
+   const [cooldown, setCooldown] = useState(false);
+   const [secondsLeft, setSecondsLeft] = useState(0);
+   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+   const startCooldown = useCallback(() => {
+      // 清理之前的计时器（防止重复点击导致多个计时器叠加）
+      if (timerRef.current) {
+         clearInterval(timerRef.current);
+      }
+      setCooldown(true);
+      setSecondsLeft(cooldownSeconds);
+      timerRef.current = setInterval(() => {
+         setSecondsLeft((prev) => {
+            if (prev <= 1) {
+               if (timerRef.current) {
+                  clearInterval(timerRef.current);
+                  timerRef.current = null;
+               }
+               setCooldown(false);
+               return 0;
+            }
+            return prev - 1;
+         });
+      }, 1000);
+   }, [cooldownSeconds]);
+
+   // 组件卸载时清理计时器
+   useEffect(() => {
+      return () => {
+         if (timerRef.current) {
+            clearInterval(timerRef.current);
+         }
+      };
+   }, []);
+
+   return { cooldown, secondsLeft, startCooldown };
+}
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -14,8 +14,9 @@ import { useAppContext } from '@/contexts/app-context.ts';
 import { useTheme } from '@/hooks/use-theme.ts';
 import { LoginForm } from './components/LoginForm';
 import { RegisterForm } from './components/RegisterForm';
+import { ForgotPasswordModal } from './components/ForgotPasswordModal';
 import { useAuthState } from './hooks/use-auth-state';
-import {AuthAPI, LoginResponseBody} from '@/services/modules';
+import { AuthAPI, LoginResponseBody } from '@/services/modules';
 import { getDeviceId } from '@/utils/device';
 import type { LoginFormValues, RegisterFormValues } from './types';

@@ -27,13 +28,13 @@ interface LoginPageProps {
 }

 export function LoginPage({ open, onClose }: LoginPageProps) {
-   const { edition, login } = useAppContext();
+   const { login } = useAppContext();
   const { isDark } = useTheme();
   const { message } = App.useApp();

-   const isEnterprise = edition === 'enterprise';
   const [activeTab, setActiveTab] = useState<string>('login');
   const [submitting, setSubmitting] = useState(false);
+   const [forgotOpen, setForgotOpen] = useState(false);

   const authState = useAuthState();

@@ -43,7 +44,7 @@ export function LoginPage({ open, onClose }: LoginPageProps) {
      async (values: LoginFormValues) => {
         setSubmitting(true);
         try {
-            const auth:LoginResponseBody = await AuthAPI.login({
+            const auth: LoginResponseBody = await AuthAPI.login({
               username: values.username,
               password: values.password,
               device_id: getDeviceId(),
@@ -117,6 +118,7 @@ export function LoginPage({ open, onClose }: LoginPageProps) {
         onSubmit={handleLogin}
         onRememberChange={authState.handleRememberChange}
         onAutoLoginChange={authState.handleAutoLoginChange}
+         onForgotPassword={() => setForgotOpen(true)}
      />
   );

@@ -125,6 +127,7 @@ export function LoginPage({ open, onClose }: LoginPageProps) {
   );

   return (
+      <>
         <Modal
            open={open}
            onCancel={onClose}
@@ -148,14 +151,10 @@ export function LoginPage({ open, onClose }: LoginPageProps) {
                  船长 · HeiXiu
               </Text>
               <Text type="secondary" className="text-xs">
-               {isEnterprise ? '企业版 — 员工账号登录' : '个人版'}
+                  欢迎使用船长·HeiXiu
               </Text>
            </div>

-         {/* 个人版 Tab | 企业版仅登录 */}
-         {isEnterprise ? (
-            loginTab
-         ) : (
            <Tabs
               activeKey={activeTab}
               onChange={setActiveTab}
@@ -166,7 +165,10 @@ export function LoginPage({ open, onClose }: LoginPageProps) {
                  { key: 'register', label: '注册', children: registerTab },
               ]}
            />
-         )}
         </Modal>
+
+         {/* 忘记密码弹窗 */}
+         <ForgotPasswordModal open={forgotOpen} onClose={() => setForgotOpen(false)} />
+      </>
   );
 }
--- a/src/pages/settings/SettingsPage.tsx
+++ b/src/pages/settings/SettingsPage.tsx
@@ -13,10 +13,11 @@
 import { Modal } from 'antd';
 import { SettingOutlined } from '@ant-design/icons';
 import { useAppContext } from '@/contexts/app-context';
-import { ThemeSetting } from './ThemeSetting';
-import { StoragePathSetting } from './StoragePathSetting';
-import { SystemInfoSetting } from './SystemInfoSetting';
-import { UpdateSetting } from './UpdateSetting';
+import { ThemeSetting } from './blocks/ThemeSetting';
+import { StoragePathSetting } from './blocks/StoragePathSetting';
+import { SystemInfoSetting } from './blocks/SystemInfoSetting';
+import { UpdateSetting } from './blocks/UpdateSetting';
+import { PasswordSetting } from './blocks/PasswordSetting';

 interface SettingsPageProps {
   open: boolean;
@@ -47,6 +48,7 @@ export function SettingsPage({ open, onClose }: SettingsPageProps) {
            <ThemeSetting />
            <StoragePathSetting edition={edition} />
            <SystemInfoSetting />
+            <PasswordSetting />
            <UpdateSetting />
         </div>
      </Modal>
--- a/src/pages/settings/blocks/PasswordSetting.tsx
+++ b/src/pages/settings/blocks/PasswordSetting.tsx
@@ -0,0 +1,52 @@
+// ============================================================
+// PasswordSetting — 账号安全区块（密码操作入口）
+//
+// 提供两种密码操作，用户自选：
+//   1. 修改密码 — 通过当前密码验证后设置新密码
+//   2. 忘记密码 — 通过手机短信验证码重置密码
+// ============================================================
+
+import { useState } from 'react';
+import { Card, Button, Typography } from 'antd';
+import { LockOutlined, PhoneOutlined } from '@ant-design/icons';
+
+import { ChangePasswordModal } from '@/pages/login/components/ChangePasswordModal';
+import { ForgotPasswordModal } from '@/pages/login/components/ForgotPasswordModal';
+
+const { Text } = Typography;
+
+export function PasswordSetting() {
+   const [changePwdOpen, setChangePwdOpen] = useState(false);
+   const [forgotPwdOpen, setForgotPwdOpen] = useState(false);
+
+   return (
+      <>
+         <Card size="small" title="账号安全" className="rounded-md!">
+            <div className="flex flex-col gap-3">
+               {/* 修改密码：通过旧密码 */}
+               <div className="flex items-center justify-between">
+                  <Text type="secondary" className="text-sm">
+                     通过当前密码修改
+                  </Text>
+                  <Button icon={<LockOutlined />} onClick={() => setChangePwdOpen(true)}>
+                     修改密码
+                  </Button>
+               </div>
+
+               {/* 忘记密码：通过手机验证码重置 */}
+               <div className="flex items-center justify-between">
+                  <Text type="secondary" className="text-sm">
+                     忘记密码？通过手机验证码重置
+                  </Text>
+                  <Button icon={<PhoneOutlined />} onClick={() => setForgotPwdOpen(true)}>
+                     短信验证码重置
+                  </Button>
+               </div>
+            </div>
+         </Card>
+
+         <ChangePasswordModal open={changePwdOpen} onClose={() => setChangePwdOpen(false)} />
+         <ForgotPasswordModal open={forgotPwdOpen} onClose={() => setForgotPwdOpen(false)} />
+      </>
+   );
+}
--- a/src/pages/settings/blocks/StoragePathSetting.tsx
+++ b/src/pages/settings/blocks/StoragePathSetting.tsx
@@ -159,8 +159,14 @@ function PathRow({
 }

 export function StoragePathSetting({ edition }: StoragePathSettingProps) {
-   const { outputPath, teamRepoPath, setOutputPath, setTeamRepoPath, clearOutputPath, clearTeamRepoPath } =
-      useSettings();
+   const {
+      outputPath,
+      teamRepoPath,
+      setOutputPath,
+      setTeamRepoPath,
+      clearOutputPath,
+      clearTeamRepoPath,
+   } = useSettings();

   const isEnterprise = edition === 'enterprise';

--- a/src/pages/settings/blocks/SystemInfoSetting.tsx
+++ b/src/pages/settings/blocks/SystemInfoSetting.tsx
--- a/src/pages/settings/blocks/ThemeSetting.tsx
+++ b/src/pages/settings/blocks/ThemeSetting.tsx
--- a/src/pages/settings/blocks/UpdateSetting.tsx
+++ b/src/pages/settings/blocks/UpdateSetting.tsx
@@ -65,15 +65,8 @@ function renderChangelog(markdown: string) {
 }

 export function UpdateSetting() {
-   const {
-      status,
-      info,
-      progress,
-      error,
-      checkForUpdates,
-      downloadUpdate,
-      installUpdate,
-   } = useUpdater();
+   const { status, info, progress, error, checkForUpdates, downloadUpdate, installUpdate } =
+      useUpdater();

   const [detailOpen, setDetailOpen] = useState(false);

@@ -210,15 +203,15 @@ export function UpdateSetting() {
            title={`更新详情 — v${info?.version || ''}`}
            open={detailOpen}
            onCancel={() => setDetailOpen(false)}
-            footer={
-               <Button onClick={() => setDetailOpen(false)}>关闭</Button>
-            }
+            footer={<Button onClick={() => setDetailOpen(false)}>关闭</Button>}
            width={520}
         >
            <div className="max-h-96 overflow-y-auto py-2">
-               {info?.releaseNotes
-                  ? renderChangelog(info.releaseNotes)
-                  : <Text type="secondary">暂无更新详情</Text>}
+               {info?.releaseNotes ? (
+                  renderChangelog(info.releaseNotes)
+               ) : (
+                  <Text type="secondary">暂无更新详情</Text>
+               )}
            </div>
         </Modal>
      </Card>
--- a/src/pages/settings/index.ts
+++ b/src/pages/settings/index.ts
@@ -3,7 +3,3 @@
 // ============================================================

 export { SettingsPage } from './SettingsPage';
-export { ThemeSetting } from './ThemeSetting';
-export { StoragePathSetting } from './StoragePathSetting';
-export { SystemInfoSetting } from './SystemInfoSetting';
-export { UpdateSetting } from './UpdateSetting';
--- a/src/services/modules/auth.ts
+++ b/src/services/modules/auth.ts
@@ -8,7 +8,7 @@ import {post, get} from '../request';
 const AuthUrlObj = {
    login: '/api/v1/auth/login',
    register: '/api/v1/auth/register',
-    sendSms: '/api/v1/auth/sms/send',
+    sendSms: '/api/v1/auth/send-sms',
    refreshToken: '/api/v1/auth/refresh',
    userInfo: '/api/v1/auth/me',
    changePassword: '/api/v1/auth/change-password',
--- a/src/services/modules/models.ts
+++ b/src/services/modules/models.ts
@@ -11,14 +11,14 @@ const ModelsUrlObj = {
 // ---------- 类型 ----------

 /** 模型类别 */
-export type ModelCategory = 'img2img' | 'txt2img' | 'img2video' | 'txt2audio';
+export type ModelCategory = 'image_to_image' | 'text_to_image' | 'image_to_video' | 'text_to_audio';

 /** 模型类别中文映射 */
 export const MODEL_CATEGORY_LABELS: Record<ModelCategory, string> = {
-    img2img: '图生图',
-    txt2img: '文生图',
-    img2video: '图生视频',
-    txt2audio: '文生音频',
+    image_to_image: '图生图',
+    text_to_image: '文生图',
+    image_to_video: '图生视频',
+    text_to_audio: '文生音频',
 };

 /**