diff --git a/.kiro/specs/sample-remark-tooltip/design.md b/.kiro/specs/sample-remark-tooltip/design.md
new file mode 100644
index 0000000..8f4772d
--- /dev/null
+++ b/.kiro/specs/sample-remark-tooltip/design.md
@@ -0,0 +1,173 @@
+# Design Document
+
+## Overview
+
+本设计文档描述了在样品管理列表中添加备注列并实现 tooltip 功能的技术方案。该功能将利用 Element UI 的 el-table-column 组件的 show-overflow-tooltip 属性，实现当备注内容超出列宽时自动显示省略号，并在鼠标悬停时通过 tooltip 展示完整内容。
+
+## Architecture
+
+该功能是一个纯前端实现，不涉及后端 API 修改。主要修改点在样品管理页面的 Vue 组件中。
+
+### 组件层次结构
+
+```
+WarehouseSample (Vue Component)
+  └── el-table
+      ├── el-table-column (入库单号)
+      ├── el-table-column (样品型号)
+      ├── el-table-column (样品SN号)
+      ├── el-table-column (硬件版本号)
+      ├── el-table-column (外测状态)
+      ├── el-table-column (计划测试项)
+      ├── el-table-column (测试截止日期)
+      ├── el-table-column (状态)
+      ├── el-table-column (备注) ← 新增
+      └── el-table-column (操作)
+```
+
+## Components and Interfaces
+
+### 修改的组件
+
+**文件路径**: `ruoyi-fastapi-frontend/src/views/warehouse/sample/index.vue`
+
+#### 新增表格列
+
+在 `<el-table>` 组件中，在状态列和操作列之间添加备注列：
+
+```vue
+<el-table-column 
+  label="备注" 
+  align="center" 
+  prop="remark" 
+  :show-overflow-tooltip="true"
+  width="150"
+/>
+```
+
+### Element UI 组件属性说明
+
+- **label**: 列标题，显示为"备注"
+- **align**: 对齐方式，设置为"center"居中对齐
+- **prop**: 绑定的数据字段，对应 sampleList 中每个对象的 remark 属性
+- **show-overflow-tooltip**: Element UI 内置属性，当内容超出时自动显示 tooltip
+- **width**: 列宽度，设置为 150px 以平衡显示空间和表格整体布局
+
+## Data Models
+
+### 样品数据模型
+
+样品列表数据已包含 remark 字段，无需修改数据结构：
+
+```javascript
+{
+  sampleId: Number,
+  receiptNo: String,
+  sampleModel: String,
+  sampleSn: String,
+  hardwareVersion: String,
+  externalStatus: String,
+  testItems: String,
+  testDeadline: String,
+  status: String,
+  remark: String  // 备注字段，已存在于后端返回数据中
+}
+```
+
+## Correctness Properties
+
+*A property is a characteristic or behavior that should hold true across all valid executions of a system-essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
+
+### Property 1: 备注列渲染完整性
+
+*For any* 样品列表数据，当页面渲染完成后，表格中应该存在一个 label 为"备注"的列，且该列位于状态列之后、操作列之前
+
+**Validates: Requirements 1.1, 1.2**
+
+### Property 2: Tooltip 显示条件
+
+*For any* 备注单元格，当且仅当备注内容的实际渲染宽度超过列宽度时，鼠标悬停应触发 tooltip 显示
+
+**Validates: Requirements 2.1, 2.2, 2.4**
+
+### Property 3: 空备注处理
+
+*For any* 样品数据，如果 remark 字段为 null、undefined 或空字符串，则对应单元格应显示为空白，且不触发 tooltip
+
+**Validates: Requirements 1.3**
+
+### Property 4: 样式一致性
+
+*For any* 备注列单元格，其字体、字号、颜色和对齐方式应与同一行其他文本列（如样品型号、样品SN号）保持一致
+
+**Validates: Requirements 3.1, 3.2, 3.3**
+
+## Error Handling
+
+### 数据缺失处理
+
+- 当 API 返回的样品数据中不包含 remark 字段时，Vue 会将其视为 undefined，单元格显示为空白
+- Element UI 的 show-overflow-tooltip 会自动处理 null/undefined 值，不会报错
+
+### 浏览器兼容性
+
+- Element UI 的 tooltip 功能基于 Popper.js，支持主流浏览器（Chrome, Firefox, Safari, Edge）
+- 在不支持的旧版浏览器中，tooltip 可能不显示，但不会影响基本的文本显示功能
+
+## Testing Strategy
+
+### 单元测试
+
+由于这是一个简单的 UI 展示功能，主要依赖 Element UI 的内置功能，不需要编写复杂的单元测试。可以通过以下方式验证：
+
+1. **备注列存在性测试**: 检查渲染后的 DOM 中是否存在包含"备注"文本的表头
+2. **数据绑定测试**: 验证备注列是否正确显示 sampleList 中的 remark 数据
+3. **空值处理测试**: 验证当 remark 为空时，单元格是否正确显示为空白
+
+### 手动测试场景
+
+1. **正常显示测试**
+   - 准备包含不同长度备注的样品数据
+   - 验证短备注完整显示，长备注显示省略号
+   - 验证鼠标悬停时 tooltip 正确显示完整内容
+
+2. **边界情况测试**
+   - 测试备注为空字符串的情况
+   - 测试备注为 null 的情况
+   - 测试备注恰好等于列宽的情况
+
+3. **响应式测试**
+   - 调整浏览器窗口大小
+   - 验证备注列宽度和 tooltip 行为是否正常
+
+4. **交互测试**
+   - 快速移动鼠标经过多个备注单元格
+   - 验证 tooltip 显示和隐藏的流畅性
+   - 验证 tooltip 不会遮挡操作按钮
+
+### 测试库选择
+
+对于这个简单的 UI 功能，不需要引入 property-based testing 库。主要通过手动测试和简单的 Vue Test Utils 单元测试即可验证功能正确性。
+
+## Implementation Notes
+
+### 实现步骤
+
+1. 在 `ruoyi-fastapi-frontend/src/views/warehouse/sample/index.vue` 文件中定位到 `<el-table>` 组件
+2. 在状态列（`<el-table-column label="状态" ...>`）之后添加新的备注列
+3. 配置备注列的属性：label、align、prop、show-overflow-tooltip、width
+4. 保存文件并测试功能
+
+### 注意事项
+
+- 列宽度设置为 150px 是一个建议值，可以根据实际显示效果调整
+- show-overflow-tooltip 属性会自动处理文本溢出和 tooltip 显示，无需额外编写 JavaScript 代码
+- 如果需要自定义 tooltip 的样式或行为，可以使用 Element UI 的 tooltip 组件手动实现
+
+### 可选优化
+
+如果未来需要更高级的功能，可以考虑：
+
+1. **自定义 tooltip 内容**: 使用 scoped slot 自定义 tooltip 的显示格式
+2. **可配置列宽**: 允许用户拖拽调整备注列宽度
+3. **备注编辑**: 在 tooltip 中添加快速编辑按钮
diff --git a/.kiro/specs/sample-remark-tooltip/requirements.md b/.kiro/specs/sample-remark-tooltip/requirements.md
new file mode 100644
index 0000000..a15da22
--- /dev/null
+++ b/.kiro/specs/sample-remark-tooltip/requirements.md
@@ -0,0 +1,49 @@
+# Requirements Document
+
+## Introduction
+
+本文档定义了样品管理库中备注字段显示功能的需求。该功能旨在在样品列表表格中添加备注列，当备注内容较长导致空间不足时，通过鼠标悬停提示（tooltip）的方式完整显示备注信息，提升用户体验。
+
+## Glossary
+
+- **样品管理系统（Sample Management System）**: 用于管理入库样品信息的系统模块
+- **备注列（Remark Column）**: 表格中用于显示样品备注信息的列
+- **Tooltip**: 鼠标悬停提示，当鼠标悬停在元素上时显示的浮动提示框
+- **表格组件（Table Component）**: Element UI 的 el-table 组件
+- **溢出省略（Overflow Ellipsis）**: 当文本内容超出容器宽度时，使用省略号（...）表示被截断的内容
+
+## Requirements
+
+### Requirement 1
+
+**User Story:** 作为样品管理员，我希望在样品列表中看到备注信息，以便快速了解每个样品的额外说明。
+
+#### Acceptance Criteria
+
+1. WHEN 用户访问样品管理页面 THEN 样品管理系统 SHALL 在表格中显示备注列
+2. WHEN 备注列被渲染 THEN 样品管理系统 SHALL 将备注列放置在状态列和操作列之间
+3. WHEN 备注内容为空 THEN 样品管理系统 SHALL 在该单元格中显示空白或占位符
+4. WHEN 表格加载完成 THEN 样品管理系统 SHALL 确保备注列的宽度适配表格布局
+
+### Requirement 2
+
+**User Story:** 作为样品管理员，当备注内容较长时，我希望能够通过鼠标悬停查看完整内容，以便在有限的空间内获取完整信息。
+
+#### Acceptance Criteria
+
+1. WHEN 备注内容超出列宽度 THEN 样品管理系统 SHALL 使用省略号截断显示的文本
+2. WHEN 用户将鼠标悬停在被截断的备注单元格上 THEN 样品管理系统 SHALL 显示包含完整备注内容的 tooltip
+3. WHEN 用户移开鼠标 THEN 样品管理系统 SHALL 隐藏 tooltip
+4. WHEN 备注内容未超出列宽度 THEN 样品管理系统 SHALL 完整显示备注内容且不显示 tooltip
+5. WHEN tooltip 显示时 THEN 样品管理系统 SHALL 确保 tooltip 内容可读且不遮挡重要界面元素
+
+### Requirement 3
+
+**User Story:** 作为样品管理员，我希望备注列的显示样式与其他列保持一致，以便获得统一的视觉体验。
+
+#### Acceptance Criteria
+
+1. WHEN 备注列被渲染 THEN 样品管理系统 SHALL 使用与其他列相同的字体、字号和颜色
+2. WHEN 备注列被渲染 THEN 样品管理系统 SHALL 使用居中对齐方式
+3. WHEN 表格数据更新 THEN 样品管理系统 SHALL 保持备注列的样式一致性
+4. WHEN 用户调整浏览器窗口大小 THEN 样品管理系统 SHALL 保持备注列的响应式布局
diff --git a/.kiro/specs/sample-remark-tooltip/tasks.md b/.kiro/specs/sample-remark-tooltip/tasks.md
new file mode 100644
index 0000000..ce0d1d8
--- /dev/null
+++ b/.kiro/specs/sample-remark-tooltip/tasks.md
@@ -0,0 +1,19 @@
+# Implementation Plan
+
+- [-] 1. 在样品管理页面添加备注列
+
+  - 在 `ruoyi-fastapi-frontend/src/views/warehouse/sample/index.vue` 文件的 `<el-table>` 组件中添加备注列
+  - 将备注列放置在状态列和操作列之间
+  - 配置列属性：label="备注", align="center", prop="remark", show-overflow-tooltip="true", width="150"
+  - _Requirements: 1.1, 1.2, 1.4, 2.1, 2.2, 2.3, 3.1, 3.2_
+
+
+
+- [ ] 1.1 手动测试备注列显示功能
+  - 测试备注列是否正确显示在表格中
+  - 测试短备注内容是否完整显示
+  - 测试长备注内容是否显示省略号
+  - 测试鼠标悬停时 tooltip 是否正确显示完整内容
+  - 测试空备注是否显示为空白
+  - 测试样式是否与其他列保持一致
+  - _Requirements: 1.1, 1.2, 1.3, 2.1, 2.2, 2.3, 2.4, 2.5, 3.1, 3.2, 3.3, 3.4_
diff --git a/ruoyi-fastapi-frontend/src/views/warehouse/sample/index.vue b/ruoyi-fastapi-frontend/src/views/warehouse/sample/index.vue
index 2199184..319a8dc 100644
--- a/ruoyi-fastapi-frontend/src/views/warehouse/sample/index.vue
+++ b/ruoyi-fastapi-frontend/src/views/warehouse/sample/index.vue
@@ -99,6 +99,7 @@
           <el-tag v-else-if="scope.row.status === '3'" type="danger">已退回</el-tag>
         </template>
       </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" width="150"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
         <template slot-scope="scope">
           <el-button
diff --git a/前端错误排查指南.md b/前端错误排查指南.md
new file mode 100644
index 0000000..e8bea46
--- /dev/null
+++ b/前端错误排查指南.md
@@ -0,0 +1,313 @@
+# 前端错误排查指南
+
+## 当前错误分析
+
+您遇到的错误包括：
+
+### 1. 404错误 - 头像图片找不到
+```
+GET http://123.56.98.4:8080/dev-api/profile/avatar/2025/08/01/avatar_20250801085429A353.png 404
+```
+
+**原因**：用户头像文件不存在或路径错误
+
+**影响**：不影响功能，只是头像显示不出来
+
+**解决方案**：
+- 这是正常现象，如果用户没有上传头像或头像文件被删除
+- 可以忽略此错误，或者重新上传头像
+
+### 2. WebSocket连接失败
+```
+GET http://172.17.164.32:8080/sockjs-node/info?t=... net::ERR_CONNECTION_TIMED_OUT
+[WDS] Disconnected!
+```
+
+**原因**：Webpack开发服务器的热重载(HMR)连接失败
+
+**影响**：热重载功能不可用，需要手动刷新页面才能看到代码更改
+
+**解决方案**：
+1. 检查防火墙设置
+2. 检查网络连接
+3. 重启开发服务器
+4. 如果不需要热重载，可以忽略此错误
+
+### 3. ChunkLoadError - JavaScript代码块加载失败 ⚠️
+```
+ChunkLoadError: Loading chunk 0 failed.(timeout: http://123.56.98.4:8080/static/js/0.js)
+```
+
+**原因**：
+- 浏览器缓存问题
+- 网络连接问题
+- 构建文件损坏
+- 代理配置问题
+
+**影响**：页面无法正常加载，功能不可用
+
+**这是主要问题，需要解决！**
+
+## 解决方案
+
+### 方案1：清除缓存并重新构建（推荐）⭐
+
+```bash
+# 1. 停止前端服务 (Ctrl+C)
+
+# 2. 进入前端目录
+cd ruoyi-fastapi-frontend
+
+# 3. 清除缓存和构建文件
+rm -rf node_modules
+rm -rf dist
+rm -rf .cache
+
+# Windows用户使用：
+# rmdir /s /q node_modules
+# rmdir /s /q dist
+# rmdir /s /q .cache
+
+# 4. 重新安装依赖
+npm install
+
+# 5. 重新启动开发服务器
+npm run dev
+```
+
+### 方案2：强制刷新浏览器
+
+1. **清空缓存并硬性重新加载**
+   - 打开浏览器开发者工具（F12）
+   - 右键点击刷新按钮
+   - 选择"清空缓存并硬性重新加载"
+
+2. **清除浏览器缓存**
+   - 按 `Ctrl + Shift + Delete`
+   - 选择"缓存的图片和文件"
+   - 点击"清除数据"
+
+3. **强制刷新**
+   - 按 `Ctrl + F5`（Windows）
+   - 或 `Cmd + Shift + R`（Mac）
+
+### 方案3：检查网络和代理配置
+
+#### 检查后端服务是否运行
+
+```bash
+# 检查后端是否在9099端口运行
+curl http://127.0.0.1:9099
+
+# 或者在浏览器访问
+http://127.0.0.1:9099
+```
+
+#### 检查代理配置
+
+确保 `vue.config.js` 中的代理配置正确：
+
+```javascript
+proxy: {
+  [process.env.VUE_APP_BASE_API]: {
+    target: `http://127.0.0.1:9099`,  // 确保这是正确的后端地址
+    changeOrigin: true,
+    pathRewrite: {
+      ['^' + process.env.VUE_APP_BASE_API]: ''
+    }
+  }
+}
+```
+
+### 方案4：重启开发服务器
+
+```bash
+# 1. 停止当前服务 (Ctrl+C)
+
+# 2. 等待几秒
+
+# 3. 重新启动
+npm run dev
+```
+
+### 方案5：使用无缓存模式启动浏览器
+
+#### Chrome/Edge
+```bash
+# Windows
+chrome.exe --disable-cache --disable-application-cache
+
+# Mac
+open -a "Google Chrome" --args --disable-cache
+```
+
+#### Firefox
+```bash
+# 在地址栏输入
+about:config
+
+# 搜索并设置
+browser.cache.disk.enable = false
+browser.cache.memory.enable = false
+```
+
+## 预防措施
+
+### 1. 定期清理缓存
+
+```bash
+# 每周执行一次
+cd ruoyi-fastapi-frontend
+rm -rf node_modules/.cache
+rm -rf dist
+```
+
+### 2. 使用版本控制
+
+确保代码在Git中有备份：
+
+```bash
+git status
+git add .
+git commit -m "添加批量添加样品功能"
+```
+
+### 3. 检查依赖版本
+
+```bash
+# 检查过时的依赖
+npm outdated
+
+# 更新依赖（谨慎操作）
+npm update
+```
+
+### 4. 使用稳定的网络环境
+
+- 避免使用不稳定的WiFi
+- 使用有线网络
+- 检查防火墙设置
+
+## 验证修复
+
+修复后，请验证以下功能：
+
+### 1. 基本功能
+- ✅ 页面能正常加载
+- ✅ 登录功能正常
+- ✅ 菜单导航正常
+
+### 2. 入库单功能
+- ✅ 入库单列表能正常显示
+- ✅ 新增入库单对话框能打开
+- ✅ 批量添加样品功能可用
+
+### 3. 对话框功能
+- ✅ 点击对话框外部不会关闭
+- ✅ 点击关闭按钮能正常关闭
+- ✅ 点击取消按钮能正常关闭
+
+## 常见问题FAQ
+
+### Q1: 为什么会出现ChunkLoadError？
+
+**A**: 主要原因：
+1. 浏览器缓存了旧版本的代码
+2. 网络连接不稳定
+3. 构建文件损坏
+4. 代理配置错误
+
+### Q2: 清除缓存会丢失数据吗？
+
+**A**: 不会。清除的是：
+- 浏览器缓存（临时文件）
+- node_modules（可重新安装）
+- 构建文件（可重新生成）
+
+不会影响：
+- 数据库数据
+- 源代码文件
+- 配置文件
+
+### Q3: 为什么WebSocket连接失败？
+
+**A**: 可能原因：
+1. 防火墙阻止了连接
+2. 网络配置问题
+3. 开发服务器配置问题
+
+**影响**：只影响热重载功能，不影响应用本身
+
+### Q4: 404错误需要处理吗？
+
+**A**: 取决于具体情况：
+- 头像404：可以忽略，或重新上传头像
+- API 404：需要检查后端服务和路由配置
+- 静态资源404：需要检查文件路径
+
+### Q5: 如何避免这些问题？
+
+**A**: 最佳实践：
+1. 定期清理缓存
+2. 使用稳定的网络
+3. 及时更新依赖
+4. 使用版本控制
+5. 做好代码备份
+
+## 紧急恢复
+
+如果以上方法都不行，可以尝试：
+
+### 1. 重新克隆项目
+
+```bash
+# 备份当前修改
+git stash
+
+# 重新克隆
+git clone <repository-url>
+cd <project-name>
+
+# 恢复修改
+git stash pop
+
+# 安装依赖
+npm install
+
+# 启动
+npm run dev
+```
+
+### 2. 使用生产构建
+
+```bash
+# 构建生产版本
+npm run build:prod
+
+# 使用静态服务器运行
+npx serve -s dist
+```
+
+### 3. 联系技术支持
+
+如果问题持续存在，请提供：
+- 完整的错误日志
+- 浏览器版本
+- Node.js版本
+- 操作系统版本
+- 网络环境信息
+
+## 总结
+
+当前遇到的错误主要是：
+1. ❌ **ChunkLoadError** - 需要立即解决
+2. ⚠️ **WebSocket连接失败** - 可以暂时忽略
+3. ℹ️ **头像404** - 不影响功能
+
+**推荐操作顺序**：
+1. 清除浏览器缓存并强制刷新
+2. 如果不行，重新构建项目
+3. 如果还不行，检查网络和代理配置
+4. 最后考虑重新克隆项目
+
+**重要提示**：这些错误与我们添加的"批量添加样品"功能无关，是前端开发环境的常见问题。