2026-05-04-03-08-20 更新系统标题和logo并部署4000端口
This commit is contained in:
@@ -2,12 +2,12 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/png" href="/logo.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>My Google AI Studio App</title>
|
<title>模型逆向系统</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
BIN
WebSite/public/logo.png
Normal file
BIN
WebSite/public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
@@ -1,6 +1,6 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { motion } from 'motion/react';
|
import { motion } from 'motion/react';
|
||||||
import { Layout, Lock, User, CheckCircle2 } from 'lucide-react';
|
import { Lock, User } from 'lucide-react';
|
||||||
|
|
||||||
interface LoginProps {
|
interface LoginProps {
|
||||||
onLogin: () => void;
|
onLogin: () => void;
|
||||||
@@ -28,12 +28,16 @@ export default function Login({ onLogin }: LoginProps) {
|
|||||||
className="w-full max-w-md"
|
className="w-full max-w-md"
|
||||||
>
|
>
|
||||||
<div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-neutral-200">
|
<div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-neutral-200">
|
||||||
<div className="bg-blue-600 p-8 text-white text-center">
|
<div className="bg-slate-950 p-8 text-white text-center">
|
||||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-2xl mb-4 backdrop-blur-sm">
|
<div className="inline-flex items-center justify-center w-24 h-24 mb-4">
|
||||||
<Layout size={32} />
|
<img
|
||||||
|
src="/logo.png"
|
||||||
|
alt="模型逆向系统"
|
||||||
|
className="h-full w-full object-contain"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-xl font-bold leading-tight px-4">基于模型逆向体素化及DICOM分割标注系统</h1>
|
<h1 className="text-2xl font-bold leading-tight px-4">模型逆向系统</h1>
|
||||||
<p className="text-blue-100 mt-2 font-medium">模型逆向系统</p>
|
<p className="text-slate-300 mt-2 font-medium">基于模型逆向体素化及DICOM分割标注系统</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="p-8 space-y-6">
|
<form onSubmit={handleSubmit} className="p-8 space-y-6">
|
||||||
|
|||||||
@@ -41,8 +41,12 @@ export default function Sidebar({
|
|||||||
className="h-screen bg-slate-900 text-slate-300 flex flex-col relative z-20 transition-all duration-300 shadow-2xl"
|
className="h-screen bg-slate-900 text-slate-300 flex flex-col relative z-20 transition-all duration-300 shadow-2xl"
|
||||||
>
|
>
|
||||||
<div className="p-6 flex items-center gap-3 overflow-hidden">
|
<div className="p-6 flex items-center gap-3 overflow-hidden">
|
||||||
<div className="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center text-white shrink-0">
|
<div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 overflow-hidden">
|
||||||
<Box size={24} />
|
<img
|
||||||
|
src="/logo.png"
|
||||||
|
alt="模型逆向系统"
|
||||||
|
className="h-full w-full object-contain"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
{!collapsed && (
|
{!collapsed && (
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|||||||
66
工程分析/实现方案-2026-05-04-03-08-20.md
Normal file
66
工程分析/实现方案-2026-05-04-03-08-20.md
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
# 实现方案
|
||||||
|
|
||||||
|
时间戳：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`。
|
||||||
102
工程分析/测试方案-2026-05-04-03-08-20.md
Normal file
102
工程分析/测试方案-2026-05-04-03-08-20.md
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
# 测试方案
|
||||||
|
|
||||||
|
时间戳：2026-05-04-03-08-20
|
||||||
|
|
||||||
|
## 测试目标
|
||||||
|
|
||||||
|
验证 title、favicon、登录页 logo、左侧栏 logo 修改生效，并确认项目部署到 `http://192.168.3.11:4000/`。
|
||||||
|
|
||||||
|
## 静态检查
|
||||||
|
|
||||||
|
- 检查 `WebSite/public/logo.png` 是否存在。
|
||||||
|
- 检查 `WebSite/index.html`：
|
||||||
|
- `<title>` 为 `模型逆向系统`。
|
||||||
|
- favicon 指向 `/logo.png`。
|
||||||
|
- 检查 `WebSite/src/components/Login.tsx`：
|
||||||
|
- 登录页顶部使用 `/logo.png`。
|
||||||
|
- 登录页主标题为 `模型逆向系统`。
|
||||||
|
- 检查 `WebSite/src/components/Sidebar.tsx`：
|
||||||
|
- 左上角使用 `/logo.png`。
|
||||||
|
- 左上角文字为 `模型逆向系统`。
|
||||||
|
|
||||||
|
## 构建验证
|
||||||
|
|
||||||
|
在 `WebSite/` 下执行：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
预期结果：
|
||||||
|
|
||||||
|
- Vite 构建成功。
|
||||||
|
- 不出现 TypeScript 编译错误。
|
||||||
|
|
||||||
|
## 部署验证
|
||||||
|
|
||||||
|
执行端口检查：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ss -ltnp | rg ':4000\b' || true
|
||||||
|
```
|
||||||
|
|
||||||
|
使用 `tmux` 启动服务：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
tmux new-session -d -s revoxelseg-dicom 'cd /home/wkmgc/Desktop/ReVoxelSeg_DICOM/WebSite && node ./node_modules/vite/bin/vite.js --host 0.0.0.0 --port 4000 --strictPort'
|
||||||
|
```
|
||||||
|
|
||||||
|
验证 HTTP 响应：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -I http://127.0.0.1:4000/
|
||||||
|
curl -I http://192.168.3.11:4000/
|
||||||
|
```
|
||||||
|
|
||||||
|
预期结果：
|
||||||
|
|
||||||
|
- 两个地址均返回 `HTTP/1.1 200 OK`。
|
||||||
|
|
||||||
|
## 页面验证
|
||||||
|
|
||||||
|
- 打开 `http://192.168.3.11:4000/`。
|
||||||
|
- 浏览器标签标题显示 `模型逆向系统`。
|
||||||
|
- 标签页图标显示用户提供的 logo。
|
||||||
|
- 登录页顶部显示用户提供的 logo。
|
||||||
|
- 登录后左上角显示用户提供的 logo。
|
||||||
|
- 折叠侧边栏后 logo 不变形、不溢出。
|
||||||
|
|
||||||
|
## 回归风险
|
||||||
|
|
||||||
|
- logo 图片尺寸较大时可能影响布局，需要通过固定容器尺寸和 `object-contain` 控制。
|
||||||
|
- favicon 可能受浏览器缓存影响，需要强制刷新或无痕窗口验证。
|
||||||
|
- 端口切换可能导致旧 `3001` 地址不再访问当前项目。
|
||||||
|
|
||||||
|
## 人工审核状态
|
||||||
|
|
||||||
|
已确认并执行。
|
||||||
|
|
||||||
|
确认记录：
|
||||||
|
|
||||||
|
- 用户已回复 `确认执行`。
|
||||||
|
|
||||||
|
## 执行结果
|
||||||
|
|
||||||
|
- `WebSite/public/logo.png` 已创建，图片为用户提供的 logo，格式为 PNG RGBA，尺寸 `429 x 429`。
|
||||||
|
- `WebSite/index.html` 已更新：
|
||||||
|
- favicon 指向 `/logo.png`。
|
||||||
|
- title 为 `模型逆向系统`。
|
||||||
|
- `WebSite/src/components/Login.tsx` 已更新：
|
||||||
|
- 登录页顶部使用 `/logo.png`。
|
||||||
|
- 登录页主标题为 `模型逆向系统`。
|
||||||
|
- `WebSite/src/components/Sidebar.tsx` 已更新：
|
||||||
|
- 左上角使用 `/logo.png`。
|
||||||
|
- 左上角文字保持为 `模型逆向系统`。
|
||||||
|
- `npm run build` 执行成功。
|
||||||
|
- `npm run lint` 执行成功。
|
||||||
|
- Vite 构建仍有大 chunk 警告，当前不影响本次 logo/title 修改。
|
||||||
|
- 已关闭旧的 `revoxelseg-dicom` 部署会话，并使用同名 `tmux` 会话部署到 `4000`。
|
||||||
|
- `curl -I http://127.0.0.1:4000/` 返回 `HTTP/1.1 200 OK`。
|
||||||
|
- `curl -I http://192.168.3.11:4000/` 返回 `HTTP/1.1 200 OK`。
|
||||||
|
- `curl -I http://127.0.0.1:4000/logo.png` 返回 `HTTP/1.1 200 OK` 且 `Content-Type: image/png`。
|
||||||
|
- 当前监听端口确认：`0.0.0.0:4000`。
|
||||||
36
工程分析/经验记录.md
36
工程分析/经验记录.md
@@ -73,3 +73,39 @@ C. 解决问题方案
|
|||||||
D. 后续如何避免问题
|
D. 后续如何避免问题
|
||||||
|
|
||||||
需要保留长时间运行的开发服务时，优先使用 `tmux` 会话托管，并用 `tmux capture-pane -pt <session>` 查看启动日志，用 `curl` 验证 HTTP 响应。
|
需要保留长时间运行的开发服务时，优先使用 `tmux` 会话托管，并用 `tmux capture-pane -pt <session>` 查看启动日志，用 `curl` 验证 HTTP 响应。
|
||||||
|
|
||||||
|
## 2026-05-04-03-08-20 附件 logo 落盘与静态资源引用
|
||||||
|
|
||||||
|
A. 具体问题
|
||||||
|
|
||||||
|
用户要求将 title 图标、登录页 logo 和左上角 logo 都替换为对话中提供的图片，需要把附件图片变为前端可稳定访问的静态资源。
|
||||||
|
|
||||||
|
B. 产生问题原因
|
||||||
|
|
||||||
|
前端组件不能直接引用对话附件，必须先将图片保存到项目静态资源目录，再通过固定 URL 引用。
|
||||||
|
|
||||||
|
C. 解决问题方案
|
||||||
|
|
||||||
|
确认 `/tmp/logo_check.png` 与用户提供的 logo 一致后，将其复制到 `WebSite/public/logo.png`。`index.html` favicon、登录页和侧边栏统一通过 `/logo.png` 引用。
|
||||||
|
|
||||||
|
D. 后续如何避免问题
|
||||||
|
|
||||||
|
后续涉及用户上传图片替换项目资源时，先在本地确认附件是否已落盘；优先放入 `WebSite/public/` 并使用根路径引用，避免组件间重复存放资源。
|
||||||
|
|
||||||
|
## 2026-05-04-03-08-20 指定端口重新部署
|
||||||
|
|
||||||
|
A. 具体问题
|
||||||
|
|
||||||
|
用户要求将项目部署到 `http://192.168.3.11:4000/`，需要从原先 `3001` 端口切换到 `4000`。
|
||||||
|
|
||||||
|
B. 产生问题原因
|
||||||
|
|
||||||
|
项目早前使用 `tmux` 会话 `revoxelseg-dicom` 托管在 `3001`，本次需求指定了新的访问端口。
|
||||||
|
|
||||||
|
C. 解决问题方案
|
||||||
|
|
||||||
|
先检查 `4000` 端口是否空闲，然后关闭旧 `revoxelseg-dicom` 会话，使用同名 `tmux` 会话启动 Vite：`node ./node_modules/vite/bin/vite.js --host 0.0.0.0 --port 4000 --strictPort`。随后用本机地址和内网地址分别验证 HTTP 200。
|
||||||
|
|
||||||
|
D. 后续如何避免问题
|
||||||
|
|
||||||
|
每次调整部署端口前先检查端口占用和现有 `tmux` 会话；部署后同时验证 `127.0.0.1` 与目标内网 IP，并把实际访问地址写入测试方案执行结果。
|
||||||
|
|||||||
51
工程分析/需求分析-2026-05-04-03-08-20.md
Normal file
51
工程分析/需求分析-2026-05-04-03-08-20.md
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
# 需求分析
|
||||||
|
|
||||||
|
时间戳：2026-05-04-03-08-20
|
||||||
|
|
||||||
|
## 原始需求摘要
|
||||||
|
|
||||||
|
用户要求将项目的 title 图标、登录界面 logo、左上角 logo 均替换为用户提供的医疗风格彩色 logo；浏览器标题改为“模型逆向系统”；并将项目部署到 `http://192.168.3.11:4000/`。
|
||||||
|
|
||||||
|
## 业务目标
|
||||||
|
|
||||||
|
- 统一系统品牌视觉。
|
||||||
|
- 让浏览器标签页标题和 favicon 与“模型逆向系统”一致。
|
||||||
|
- 登录页顶部标识改为用户提供的 logo。
|
||||||
|
- 系统左上角侧边栏标识改为用户提供的 logo。
|
||||||
|
- 使用指定地址和端口完成重新部署。
|
||||||
|
|
||||||
|
## 输入与输出
|
||||||
|
|
||||||
|
输入：
|
||||||
|
|
||||||
|
- 用户提供的 logo 图片。
|
||||||
|
- 目标标题：“模型逆向系统”。
|
||||||
|
- 目标部署地址：`http://192.168.3.11:4000/`。
|
||||||
|
|
||||||
|
输出：
|
||||||
|
|
||||||
|
- `WebSite/index.html` 中 title 更新。
|
||||||
|
- `WebSite/index.html` 中 favicon 指向新 logo。
|
||||||
|
- 登录页使用新 logo。
|
||||||
|
- 左侧栏顶部使用新 logo。
|
||||||
|
- 本地开发服务或部署服务运行在 `0.0.0.0:4000`，可通过 `http://192.168.3.11:4000/` 访问。
|
||||||
|
|
||||||
|
## 影响范围
|
||||||
|
|
||||||
|
- `WebSite/index.html`
|
||||||
|
- `WebSite/src/components/Login.tsx`
|
||||||
|
- `WebSite/src/components/Sidebar.tsx`
|
||||||
|
- 可能新增 `WebSite/public/` 下的 logo 资源文件。
|
||||||
|
- 可能调整运行端口和现有 `tmux` 部署会话。
|
||||||
|
|
||||||
|
## 风险点
|
||||||
|
|
||||||
|
- 当前对话中的 logo 图片可能未自动落盘为本地文件；如无法直接读取附件，需要用户提供图片文件路径，或由用户将图片保存到指定路径。
|
||||||
|
- `4000` 端口可能已被其他服务占用，执行前需要检查。
|
||||||
|
- 当前项目已在 `3001` 端口通过 `tmux` 会话 `revoxelseg-dicom` 部署，切换到 `4000` 时需要重启该会话或新建会话。
|
||||||
|
- favicon 使用 PNG 时浏览器可能缓存旧图标，验证时可能需要强制刷新。
|
||||||
|
|
||||||
|
## 待确认问题
|
||||||
|
|
||||||
|
- 若当前附件无法在文件系统中读取，是否允许用户将 logo 保存为 `WebSite/public/logo.png` 后再继续。
|
||||||
|
- 是否需要保留 `3001` 旧服务，还是将 `revoxelseg-dicom` 会话切换到 `4000`。
|
||||||
Reference in New Issue
Block a user