# 实现方案

时间戳：2026-05-04-03-08-20

## 修改目标

将系统品牌标识统一为用户提供的 logo，并把浏览器 title 改为“模型逆向系统”；完成后部署到 `http://192.168.3.11:4000/`。

## 涉及路径

- `WebSite/index.html`
- `WebSite/src/components/Login.tsx`
- `WebSite/src/components/Sidebar.tsx`
- `WebSite/public/logo.png` 或等效 logo 资源路径
- `工程分析/经验记录.md`

## 技术路线

1. 确认 logo 资源可被项目读取。
   - 优先将用户提供的 logo 存为 `WebSite/public/logo.png`。
   - 前端通过 `/logo.png` 引用该资源。
2. 修改浏览器标题。
   - 将 `WebSite/index.html` 中 `<title>` 改为 `模型逆向系统`。
3. 修改 favicon。
   - 在 `WebSite/index.html` 中增加或更新 `<link rel="icon" href="/logo.png" />`。
4. 修改登录页。
   - 将 `Login.tsx` 顶部的 lucide `Layout` 图标替换为 `<img src="/logo.png" alt="模型逆向系统" />`。
   - 标题显示为 `模型逆向系统`，保留或简化副标题以避免视觉重复。
5. 修改左侧栏。
   - 将 `Sidebar.tsx` 左上角的蓝色方块 `Box` 图标替换为 `<img src="/logo.png" alt="模型逆向系统" />`。
   - 保持左侧栏文字标题为 `模型逆向系统`。
6. 构建验证。
   - 执行 `npm run build`。
7. 部署到 4000。
   - 检查 `4000` 端口占用。
   - 使用 `tmux` 会话托管 Vite 服务：
     - `node ./node_modules/vite/bin/vite.js --host 0.0.0.0 --port 4000 --strictPort`
   - 若原 `revoxelseg-dicom` 会话仍在 `3001`，优先关闭旧会话后使用同名会话部署到 `4000`。
8. 验证访问。
   - `curl -I http://127.0.0.1:4000/`
   - `curl -I http://192.168.3.11:4000/`

## 预计文件变更

- 新增 `WebSite/public/logo.png`。
- 修改 `WebSite/index.html`。
- 修改 `WebSite/src/components/Login.tsx`。
- 修改 `WebSite/src/components/Sidebar.tsx`。
- 更新 `工程分析/测试方案-2026-05-04-03-08-20.md` 执行结果。
- 更新 `工程分析/经验记录.md`。

## 兼容性与回滚方案

- favicon 和 logo 统一引用 `/logo.png`，便于后续替换资源。
- 若 logo 文件不可用，可先不提交代码修改，等待用户提供本地图片文件。
- 若 `4000` 端口不可用，记录占用进程并等待用户决定是否停止占用服务或改端口。
- 回滚时恢复 `index.html`、`Login.tsx`、`Sidebar.tsx`，并停止 `4000` 对应 tmux 会话。

## 人工审核状态

已确认并执行。

确认记录：

- 用户已回复 `确认执行`。
- 附件 logo 已在环境中确认，对应文件为 `/tmp/logo_check.png`，已复制为 `WebSite/public/logo.png`。