2026-05-04-03-08-20 更新系统标题和logo并部署4000端口

2026-05-04 03:12:53 +08:00
parent 2017348cf1
commit a6f3836460
8 changed files with 273 additions and 10 deletions
--- a/WebSite/index.html
+++ b/WebSite/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Google AI Studio App</title>
+    <title>模型逆向系统</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
-
--- a/WebSite/public/logo.png
+++ b/WebSite/public/logo.png
--- a/WebSite/src/components/Login.tsx
+++ b/WebSite/src/components/Login.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { motion } from 'motion/react';
-import { Layout, Lock, User, CheckCircle2 } from 'lucide-react';
+import { Lock, User } from 'lucide-react';

 interface LoginProps {
  onLogin: () => void;
@@ -28,12 +28,16 @@ export default function Login({ onLogin }: LoginProps) {
        className="w-full max-w-md"
      >
        <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="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-2xl mb-4 backdrop-blur-sm">
-              <Layout size={32} />
+          <div className="bg-slate-950 p-8 text-white text-center">
+            <div className="inline-flex items-center justify-center w-24 h-24 mb-4">
+              <img
+                src="/logo.png"
+                alt="模型逆向系统"
+                className="h-full w-full object-contain"
+              />
            </div>
-            <h1 className="text-xl font-bold leading-tight px-4">基于模型逆向体素化及DICOM分割标注系统</h1>
-            <p className="text-blue-100 mt-2 font-medium">模型逆向系统</p>
+            <h1 className="text-2xl font-bold leading-tight px-4">模型逆向系统</h1>
+            <p className="text-slate-300 mt-2 font-medium">基于模型逆向体素化及DICOM分割标注系统</p>
          </div>
          
          <form onSubmit={handleSubmit} className="p-8 space-y-6">
--- a/WebSite/src/components/Sidebar.tsx
+++ b/WebSite/src/components/Sidebar.tsx
@@ -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"
    >
      <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">
-          <Box size={24} />
+        <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 overflow-hidden">
+          <img
+            src="/logo.png"
+            alt="模型逆向系统"
+            className="h-full w-full object-contain"
+          />
        </div>
        {!collapsed && (
          <motion.div
--- a/工程分析/实现方案-2026-05-04-03-08-20.md
+++ b/工程分析/实现方案-2026-05-04-03-08-20.md
@@ -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`。
--- a/工程分析/测试方案-2026-05-04-03-08-20.md
+++ b/工程分析/测试方案-2026-05-04-03-08-20.md
@@ -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`。
--- a/工程分析/经验记录.md
+++ b/工程分析/经验记录.md
@@ -73,3 +73,39 @@ C. 解决问题方案
 D. 后续如何避免问题

 需要保留长时间运行的开发服务时，优先使用 `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，并把实际访问地址写入测试方案执行结果。
--- a/工程分析/需求分析-2026-05-04-03-08-20.md
+++ b/工程分析/需求分析-2026-05-04-03-08-20.md
@@ -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`。