2026-04-29-23-02-56 - 部署logo到public目录+修复favicon 404

2026-04-29 23:05:10 +08:00
parent a4fb655841
commit 4ec917efe7
8 changed files with 118 additions and 2 deletions
--- a/index.html
+++ b/index.html
@@ -2,8 +2,9 @@
 <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>语义分割系统 SegServer</title>
  </head>
  <body>
    <div id="root"></div>
--- a/logo_square.png
+++ b/logo_square.png
--- a/public/logo.png
+++ b/public/logo.png
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -20,7 +20,7 @@ export function Sidebar({ activeModule, setActiveModule }: SidebarProps) {
  return (
    <aside className="w-16 flex flex-col items-center py-6 bg-[#0d0d0d] border-r border-white/10 z-50 gap-8">
      <div className="w-10 h-10 rounded-lg overflow-hidden flex items-center justify-center bg-white">
-        <img src="/Logo.png" alt="Logo" className="w-full h-full object-cover" />
+        <img src="/logo.png" alt="Logo" className="w-full h-full object-cover" />
      </div>
      <nav className="flex flex-col gap-6 w-full px-2">
        {navItems.map((item) => {
--- a/工程分析/实现方案-2026-04-29-23-02-56.md
+++ b/工程分析/实现方案-2026-04-29-23-02-56.md
@@ -0,0 +1,31 @@
+# 实现方案 - 2026-04-29-23-02-56
+
+## 对应需求
+- 需求分析文档: `需求分析-2026-04-29-23-02-56.md`
+
+## 方案概述
+创建 Vite `public/` 目录，将 logo 放入其中使其可通过根路径访问；更新 Sidebar 引用路径；在 index.html 添加 favicon 声明。
+
+## 修改文件清单
+
+### 文件 1: 创建 `public/` 目录并放入 logo
+- **操作**: `mkdir public && cp logo_square.png public/logo.png`
+- **说明**: Vite 自动将 `public/` 下文件暴露到根 URL
+
+### 文件 2: `src/components/Sidebar.tsx`（修改）
+- **修改类型**: 修正引用路径
+- **修改内容**: `/Logo.png` → `/logo.png`
+
+### 文件 3: `index.html`（修改）
+- **修改类型**: 添加 favicon link
+- **修改内容**: 在 `<head>` 中添加 `<link rel="icon" type="image/png" href="/logo.png" />`
+
+## 新增依赖
+无
+
+## 兼容性分析
+- Vite 原生支持 public 目录，无需配置
+- 回滚策略: 删除 public/ 目录，恢复 Sidebar 路径
+
+## 预估工作量
+- 5 分钟
--- a/工程分析/测试方案-2026-04-29-23-02-56.md
+++ b/工程分析/测试方案-2026-04-29-23-02-56.md
@@ -0,0 +1,28 @@
+# 测试方案 - 2026-04-29-23-02-56
+
+## 对应实现方案
+- 实现方案文档: `实现方案-2026-04-29-23-02-56.md`
+
+## 测试范围
+- logo 文件可访问性
+- favicon 404 消除
+
+## 测试用例
+
+### 用例 1: Logo 文件可访问
+- **前置条件**: public/ 目录已创建
+- **操作步骤**: `curl -s -o /dev/null -w "%{http_code}" http://192.168.3.11:3000/logo.png`
+- **预期结果**: HTTP 200
+- **通过标准**: 返回 200
+
+### 用例 2: Favicon 不再 404
+- **前置条件**: index.html 已添加 favicon link
+- **操作步骤**: 浏览器 DevTools Network 面板观察 favicon 请求
+- **预期结果**: favicon 请求返回 200（或不再请求 .ico）
+- **通过标准**: 无红色 404 报错
+
+## 回归测试
+- [ ] Sidebar 样式未被破坏
+
+## 测试环境
+- Chrome DevTools
--- a/工程分析/经验记录.md
+++ b/工程分析/经验记录.md
@@ -172,4 +172,28 @@ AI 助手运行的容器/环境与项目实际开发环境分离，后者才装

 ---

+## 2026-04-29-23-02-56 — Logo 部署 + Favicon 404
+
+### A. 具体问题
+1. `Sidebar.tsx` 引用 `/Logo.png` 但文件不存在，logo 无法显示
+2. 浏览器控制台报 `favicon.ico 404`
+
+### B. 产生原因
+1. `logo_square.png` 位于项目根目录，但 Vite 不会自动将根目录文件暴露为静态资源
+2. 前端代码引用路径为 `/Logo.png`（首字母大写），与实际文件名 `logo_square.png` 不匹配
+3. `index.html` 无 favicon 声明，浏览器默认请求 `/favicon.ico`
+
+### C. 解决方案
+1. 创建 `public/` 目录（Vite 原生支持，自动暴露到根 URL）
+2. 将 `logo_square.png` 复制为 `public/logo.png`
+3. `Sidebar.tsx` 引用路径改为 `/logo.png`
+4. `index.html` 添加 `<link rel="icon" type="image/png" href="/logo.png" />`
+
+### D. 后续如何避免问题
+1. 静态资源（图片、字体、favicon）统一放入 `public/` 目录
+2. 资源文件名与代码引用严格保持大小写一致
+3. 每个项目初始化时都配置好 favicon，避免浏览器自动请求不存在的 .ico
+
+---
+
 > 新增经验请追加到文件末尾，保持时间倒序或正序均可，但需确保每条经验包含完整的 A/B/C/D 四段。
--- a/工程分析/需求分析-2026-04-29-23-02-56.md
+++ b/工程分析/需求分析-2026-04-29-23-02-56.md
@@ -0,0 +1,32 @@
+# 需求分析 - 2026-04-29-23-02-56
+
+## 需求来源
+- 提出时间: 2026-04-29-23-02-56
+- 需求类型: 缺陷修复 + 资源部署
+
+## 原始需求描述
+1. 将 @logo_square.png 移动到特定位置，作为系统 logo
+2. 解决 `Failed to load resource: the server responded with a status of 404 (Not Found) 3000/favicon.ico:1`
+
+## 需求拆解
+
+### 需求 1: 部署 logo 静态资源
+- **详细描述**: logo_square.png 位于项目根目录，但前端 Sidebar.tsx 引用的是 `/Logo.png`，且 Vite 项目缺少 `public/` 目录导致静态文件无法暴露到根路径
+- **优先级**: P0-阻塞
+- **影响范围**: `public/` 目录创建、`Sidebar.tsx`
+- **验收标准**: 浏览器可正常加载 logo，Sidebar 正确显示
+
+### 需求 2: 修复 favicon 404
+- **详细描述**: index.html 无 favicon 声明，浏览器默认请求 `/favicon.ico` 返回 404
+- **优先级**: P0-阻塞
+- **影响范围**: `index.html`
+- **验收标准**: 浏览器不再报 favicon.ico 404
+
+## 约束条件
+- 不修改 logo 图片本身
+- 保持现有 UI 样式
+
+## 风险评估
+| 风险点 | 影响 | 缓解措施 |
+|--------|------|----------|
+| 缓存导致 logo 仍不显示 | 低 | 强制刷新浏览器 |