up

.workbuddy/memory/2026-04-23.md

@@ -1,75 +1,31 @@
-# 2026-04-23 工作记录
+# 2026-04-23 工作日志
-
-## 分析 OPS2 流程管理平台架构
-
-完成了对项目前后端完整运行逻辑的分析：
-
-- **项目性质**：内部流程管理平台，前后端同源部署（后端 Gin serve 前端 dist）
-- **后端**：Go 1.24 + Gin + GORM，支持 SQLite/MySQL/PostgreSQL 三选一
-- **前端**：Vue 3 + Vite + Pinia + Tailwind CSS，Hash History 路由
-- **认证**：自实现 Cookie Token（非 JWT），存于数据库，支持"记住我"滚动续期
-- **数据库**：13 张表，涵盖用户体系（4张）、认证日志（2张）、文件（1张）、日程（2张）、采购（5张，含软删除+操作日志双保险）
-- **核心功能**：日程日历（FullCalendar，公开可访问）+ 采购流程管理（完整状态流转）+ 用户系统
-- **权限设计**：基于用户组（schedule_admin / purchase_admin），内存缓存管理员 ID 列表
-- **文件系统**：SHA256 内容寻址，自动去重存储
-- **API 协议**：统一 `{ userCookieValue, data }` 请求体，统一 `{ err_code, err_msg, return }` 响应体
-
-## 新增 work_order 工单模块
-
-完整实现了工单模块，文件清单：
-
-**后端（backend/my_work/routers/）**
-- `apiWorkOrder.go`：4张表（TabWorkOrder / TabWorkOrderFileBind / TabWorkOrderCommit / TabWorkOrderLog）+ 7个接口（add/update/list/get/commit/delete/count）+ work_order_admin 用户组
-- `api.go`：注册 `/api/work_order/*` 路由
-- `main.go`：注册 `ApiWorkOrderInit()`
-
-**前端（frontend/ops_vue_js/src/）**
-- `api/work_order.js`：API 封装
-- `views/work_order/WorkOrderList.vue`：工单列表页（分页+状态筛选）
-- `views/work_order/AddEditWorkOrder.vue`：新增/编辑页（图片上传 useDropzone）
-- `views/work_order/ShowWorkOrder.vue`：详情页（进度时间线+新增进度表单）
-- `router/index.js`：注册4条路由（list/add/edit/:id/show/:id）
-- `components/AppHeader.vue`：导航菜单添加"工单"入口
-- `i18n/zh-CN.json` & `i18n/en.json`：添加 work_order 翻译节和 appname.work_order
-
-**工单状态枚举**：pending/checked/parts_ordered/repaired/returned/unrepairable
-
-**commit 图片支持**：
-- 后端：新增 `TabWorkOrderCommitFileBind` 表（commit_id/work_order_id/file_id），commit 接口接收 `photos` 数组，get 接口返回每条 commit 的 photos
-- 前端：ShowWorkOrder.vue 新增进度表单底部加了 useDropzone 组件，每条进度时间线下方展示关联图片
-- API：`commit(id, status, comment, photos)` 函数签名新增 photos 参数
-
-**工单关联采购订单**：
-- 后端：新增 `TabWorkOrderPurchaseOrderBind` 表（work_order_id/commit_id/purchase_order_id），支持多对多关联
-- commit 接口新增 `purchaseOrderIds` 参数（[]uint）
-- get 接口每条 commit 返回 `purchaseOrders` 数组（包含 id/title/status）
-- 新增 `/search_purchase_orders` 接口：空搜索返回最新5条，支持 ID 精确匹配和标题/备注模糊匹配
-- 前端：状态选 `parts_ordered` 时显示采购订单搜索框（防抖300ms），输入框获取焦点自动搜索
-- 时间线每条 commit 下方展示关联的采购订单链接（点击跳转到采购详情页）
-
-## 今日功能迭代
-
-**ConfirmDialog 组件 v-model 修复**：
-- 组件使用 `v-if="modelValue"` 控制弹窗显示，但外部只用了 `v-if` 控制组件存在，没有传入 `modelValue` prop
-- 修复：在所有使用 ConfirmDialog 的地方改用 `v-model="xxx"` 绑定
-- 涉及文件：ShowWorkOrder.vue、AddEditWorkOrder.vue、ShowOrder.vue
-
-**ShowWorkOrder.vue 进度删除功能**：
-- 新增删除按钮（新样式：带边框和背景色的文字按钮）
-- 每条 commit 加边框和背景色，便于区分
-- 最新状态不显示删除按钮
-- 权限判断：工单创建者 OR 进度创建者 OR 管理员
-- 删除后前端直接移除该 commit，保持滚动位置
-
-**useDropzone v-model 问题修复**：
-- useDropzone 组件没有实现 v-model，是通过 `return_files()` 方法暴露文件
-- 修复：添加 `ref="commitDropzoneRef"`，通过 `commitDropzoneRef.value?.return_files()` 获取文件
-- 只筛选 `is_upload === true` 的文件获取 hash
-
-**采购订单状态记录删除功能**：
-- 后端：apiPurchase.go 新增 `/delete_commit` 接口，权限判断同工单
-- 前端：ShowOrder.vue 新增删除按钮，样式和逻辑同工单页面
-- 新增翻译：purchase.confirm_delete_commit
 
+## warehouse 模块前端开发
 
+### 今日完成
+- `apiWarehouse.go` 重写，参照 `apiWorkOrder.go` 模式
+  - 修复 4 处图片绑定查询 `hash` 未使用的问题
+  - 清理 6 处重复的 `AuthenticationAuthority` 调用
+- 容器列表页 (`WarehouseContainerList.vue`) — 根容器列表 + 统计卡片
+- 容器详情页 (`WarehouseContainerDetail.vue`) — 子容器/物品 Tab + 新增子容器弹窗
+- 新增物品独立页 (`WarehouseAddItem.vue`) + 路由注册
+  - 路由: `/warehouse/container/:id/add-item`
+  - 物品 Tab 按钮从弹窗改为跳转独立页面
+  - 使用 `useDropzone` 组件上传图片
+- 物品详情页 (`WarehouseItemDetail.vue`) — 物品信息 + 移动历史/关联工单 Tab
+- 物品列表总览 (`WarehouseItemList.vue`)
+  - 路由: `/warehouse/items`，侧边栏入口「物品总览」
+  - 统计卡片（总数/已入库/未入库）
+  - 表格：名称/序列号/数量/位置/创建时间 + 跳转详情/删除
+- 补充 i18n key（中/英双语）
 
+### 踩坑
+- 后端 `TabWarehouseItem.SerialNumber` JSON 字段名为 `serial_number`（小写），前端须对应
+- `useDropzone` 组件通过 `dropzoneRef.value.return_files()` 获取已上传文件的 hash 数组
+- `RouterLink` 在此项目为全局组件，无需 import
+- `watch` 需要显式 import：`import { ref, reactive, computed, onMounted, watch } from 'vue'`
+- **项目没有 daisyUI**，所有样式均用纯 Tailwind CSS v4 实现
+  - 不用 `btn`、`tabs`、`tab`、`input-bordered`、`table`、`modal`、`join`、`form-control`、`badge`、`card` 等 daisyUI 类
+  - 用 Tailwind 自定义样式：`rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card`
+  - 加载动画用自定义 SVG spinner，不用 `loading loading-spinner`
+  - 弹窗用 `<dialog>` + Tailwind 固定定位，不用 daisyUI `modal`

backend/my_work/main.go

@@ -71,6 +71,7 @@ func main() {
 	routers.ApiScheduleInit()
 	routers.ApiPurchaseInit()
 	routers.ApiWorkOrderInit()
+	routers.ApiWarehouseInit()
 
 	//创建必要目录
 	for _, path := range models.ConfigsFile.Pahts {

backend/my_work/models/warehouse.go

@@ -0,0 +1,3 @@
+package models
+
+// 仓库模块所有结构定义在 routers/apiWarehouse.go

backend/my_work/routers/api.go

@@ -56,6 +56,7 @@ func ApiRoot(r *gin.RouterGroup) {
 	ApiPurchase(r.Group("/purchase"))
 	ApiSchedule(r.Group("/schedule"))
 	ApiWorkOrder(r.Group("/work_order"))
+	ApiWarehouse(r.Group("/warehouse"))
 	r.GET("/", func(ctx *gin.Context) {
 		ReturnJson(ctx, "apiOK", gin.H{
 			"isOpsApiRoot": true,

backend/my_work/routers/apiWarehouse.go

@@ -0,0 +1,830 @@
+package routers
+
+import (
+	"encoding/json"
+	"ops/models"
+	"strconv"
+	"time"
+
+	"github.com/gin-gonic/gin"
+)
+
+// ---------- 数据表结构 ----------
+
+type TabWarehouseContainer struct {
+	ID         uint   `gorm:"primaryKey"`
+	Title      string `gorm:"size:255;not null;comment:容器名"`
+	Remark     string `gorm:"type:text;comment:描述"`
+	CreatedAt  string `gorm:"size:20;comment:创建日期"`
+	CreatorID  uint   `gorm:"not null;index;comment:创建者id"`
+	ParentID   *uint  `gorm:"index;comment:父容器id，nil=顶级"`
+	ItemCount  int    `gorm:"default:0;comment:直接子物品数量"`
+	ChildCount int    `gorm:"default:0;comment:子容器数量"`
+}
+
+type TabWarehouseItem struct {
+	ID           uint   `gorm:"primaryKey"`
+	Name         string `gorm:"size:255;not null;comment:物品名"`
+	SerialNumber string `gorm:"size:255;comment:序列号"`
+	Remark       string `gorm:"type:text;comment:描述"`
+	Quantity     int    `gorm:"default:1;comment:数量"`
+	CreatedAt    string `gorm:"size:20;comment:创建日期"`
+	CreatorID    uint   `gorm:"not null;index;comment:创建者id"`
+	ContainerID  *uint  `gorm:"index;comment:所属容器id，nil=未入库"`
+}
+
+type TabWarehouseContainerFileBind struct {
+	ID          uint      `gorm:"primaryKey"`
+	ContainerID uint      `gorm:"not null;index;comment:关联容器id"`
+	FileID      uint      `gorm:"not null;comment:关联文件id"`
+	CreatorID   uint      `gorm:"not null;comment:上传人id"`
+	CreatedAt   time.Time `gorm:"type:datetime;autoCreateTime"`
+}
+
+type TabWarehouseItemFileBind struct {
+	ID        uint      `gorm:"primaryKey"`
+	ItemID    uint      `gorm:"not null;index;comment:关联物品id"`
+	FileID    uint      `gorm:"not null;comment:关联文件id"`
+	CreatorID uint      `gorm:"not null;comment:上传人id"`
+	CreatedAt time.Time `gorm:"type:datetime;autoCreateTime"`
+}
+
+type TabWarehouseItemCommit struct {
+	ID           uint      `gorm:"primaryKey"`
+	ItemID       uint      `gorm:"not null;index;comment:关联物品id"`
+	UserID       uint      `gorm:"not null;comment:操作人id"`
+	OldContainer *uint    `gorm:"index;comment:原容器id"`
+	NewContainer *uint    `gorm:"index;comment:新容器id"`
+	Remark       string    `gorm:"type:text;comment:备注"`
+	IP           string    `gorm:"size:50;comment:操作IP"`
+	CreatedAt    time.Time `gorm:"type:datetime;autoCreateTime"`
+}
+
+type TabWarehouseLog struct {
+	ID         uint      `gorm:"primaryKey"`
+	EntityType string    `gorm:"size:50;not null;index;comment:操作对象类型"`
+	EntityID   uint      `gorm:"not null;index;comment:操作对象id"`
+	UserID     uint      `gorm:"not null;index;comment:操作人id"`
+	ActionType string    `gorm:"size:50;not null;comment:操作类型: create update delete move query"`
+	OldContent string    `gorm:"type:text;comment:修改前内容(JSON)"`
+	NewContent string    `gorm:"type:text;comment:修改后内容(JSON)"`
+	IP         string    `gorm:"size:50;comment:操作IP"`
+	Remark     string    `gorm:"size:500;comment:备注"`
+	CreatedAt  time.Time `gorm:"type:datetime;autoCreateTime"`
+}
+
+type TabWarehouseItemWorkOrderBind struct {
+	ID          uint      `gorm:"primaryKey"`
+	ItemID      uint      `gorm:"not null;index;comment:关联物品id"`
+	WorkOrderID uint      `gorm:"not null;index;comment:关联工单id"`
+	Remark      string    `gorm:"size:500;comment:备注"`
+	CreatorID   uint      `gorm:"not null;comment:绑定人id"`
+	CreatedAt   time.Time `gorm:"type:datetime;autoCreateTime"`
+}
+
+// ---------- 初始化 ----------
+
+func ApiWarehouseInit() {
+	models.DB.AutoMigrate(
+		&TabWarehouseContainer{},
+		&TabWarehouseItem{},
+		&TabWarehouseContainerFileBind{},
+		&TabWarehouseItemFileBind{},
+		&TabWarehouseItemCommit{},
+		&TabWarehouseLog{},
+		&TabWarehouseItemWorkOrderBind{},
+	)
+}
+
+// ---------- 路由注册 ----------
+
+func ApiWarehouse(r *gin.RouterGroup) {
+
+	// 新增容器
+	r.POST("/add_container", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type FromAdd struct {
+			Title    string `json:"title"`
+			Remark   string `json:"remark"`
+			ParentID *uint  `json:"parent_id"`
+			Photos   []string `json:"photos"`
+		}
+		var from FromAdd
+		if err := decodeJSON(data, &from); err != nil || from.Title == "" {
+			ReturnJson(ctx, "jsonErr", nil)
+			return
+		}
+
+		// 校验图片哈希
+		for _, hash := range from.Photos {
+			if models.IsContainsSpecialChar(hash) {
+				ReturnJson(ctx, "photo_hash_invalid", nil)
+				return
+			}
+		}
+
+		// 检查嵌套层级不超过5层
+		if from.ParentID != nil {
+			var parent TabWarehouseContainer
+			if err := models.DB.First(&parent, *from.ParentID).Error; err != nil {
+				ReturnJson(ctx, "parent_not_found", nil)
+				return
+			}
+			depth := 0
+			curID := *from.ParentID
+			for depth < 100 {
+				var c TabWarehouseContainer
+				if err := models.DB.First(&c, curID).Error; err != nil {
+					break
+				}
+				if c.ParentID == nil {
+					break
+				}
+				curID = *c.ParentID
+				depth++
+			}
+			if depth >= 4 { // 新容器将落在第5层
+				ReturnJson(ctx, "max_depth_exceeded", nil)
+				return
+			}
+		}
+
+		c := TabWarehouseContainer{
+			Title:     from.Title,
+			Remark:    from.Remark,
+			CreatedAt: strconv.FormatInt(time.Now().Unix(), 10),
+			CreatorID: user.ID,
+			ParentID: from.ParentID,
+		}
+		models.DB.Create(&c)
+
+		// 绑定图片
+		for _, hash := range from.Photos {
+			var findFile TabFileInfo_
+			if models.DB.Where(&TabFileInfo_{Sha256: hash, Type: "image"}).First(&findFile).Error == nil {
+				models.DB.Create(&TabWarehouseContainerFileBind{
+					ContainerID: c.ID,
+					FileID:     findFile.ID,
+					CreatorID:  user.ID,
+				})
+			}
+		}
+
+		// 父容器的 ChildCount +1
+		if from.ParentID != nil {
+			models.DB.Model(&TabWarehouseContainer{}).Where("id = ?", *from.ParentID).Update("child_count", models.DB.Raw("child_count + 1"))
+		}
+
+		// 写操作日志
+		newContent, _ := json.Marshal(from)
+		models.DB.Create(&TabWarehouseLog{
+			EntityType: "container",
+			EntityID:   c.ID,
+			UserID:     user.ID,
+			ActionType: "create",
+			NewContent: string(newContent),
+			IP:         ctx.ClientIP(),
+		})
+
+		ReturnJson(ctx, "apiOK", gin.H{"id": c.ID})
+	})
+
+	// 编辑容器
+	r.POST("/update_container", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type FromUpdate struct {
+			ID       uint    `json:"id"`
+			Title    string  `json:"title"`
+			Remark   string  `json:"remark"`
+			Photos   []string `json:"photos"`
+		}
+		var from FromUpdate
+		if err := decodeJSON(data, &from); err != nil || from.ID == 0 || from.Title == "" {
+			ReturnJson(ctx, "jsonErr", nil)
+			return
+		}
+
+		// 校验图片哈希
+		for _, hash := range from.Photos {
+			if models.IsContainsSpecialChar(hash) {
+				ReturnJson(ctx, "photo_hash_invalid", nil)
+				return
+			}
+		}
+
+		var c TabWarehouseContainer
+		if err := models.DB.Where("id = ?", from.ID).First(&c).Error; err != nil {
+			ReturnJson(ctx, "container_not_found", nil)
+			return
+		}
+
+		oldContent, _ := json.Marshal(c)
+		models.DB.Model(&c).Updates(map[string]interface{}{
+			"title":  from.Title,
+			"remark": from.Remark,
+		})
+
+		// 重建图片绑定
+		models.DB.Where("container_id = ?", from.ID).Delete(&TabWarehouseContainerFileBind{})
+		for _, hash := range from.Photos {
+			var findFile TabFileInfo_
+			if models.DB.Where(&TabFileInfo_{Sha256: hash, Type: "image"}).First(&findFile).Error == nil {
+				models.DB.Create(&TabWarehouseContainerFileBind{
+					ContainerID: from.ID,
+					FileID:      findFile.ID,
+					CreatorID:   user.ID,
+				})
+			}
+		}
+
+		newContent, _ := json.Marshal(from)
+		models.DB.Create(&TabWarehouseLog{
+			EntityType: "container",
+			EntityID:   from.ID,
+			UserID:     user.ID,
+			ActionType: "update",
+			OldContent: string(oldContent),
+			NewContent: string(newContent),
+			IP:         ctx.ClientIP(),
+		})
+
+		ReturnJson(ctx, "apiOK", nil)
+	})
+
+	// 删除容器
+	r.POST("/delete_container", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type FromDelete struct {
+			ID uint `json:"id"`
+		}
+		var from FromDelete
+		if err := decodeJSON(data, &from); err != nil || from.ID == 0 {
+			ReturnJson(ctx, "jsonErr", nil)
+			return
+		}
+
+		var c TabWarehouseContainer
+		if err := models.DB.Where("id = ?", from.ID).First(&c).Error; err != nil {
+			ReturnJson(ctx, "container_not_found", nil)
+			return
+		}
+
+		// 检查是否有子容器或物品
+		if c.ChildCount > 0 || c.ItemCount > 0 {
+			ReturnJson(ctx, "container_not_empty", nil)
+			return
+		}
+
+		models.DB.Where("container_id = ?", from.ID).Delete(&TabWarehouseContainerFileBind{})
+
+		// 父容器 ChildCount -1
+		if c.ParentID != nil {
+			models.DB.Model(&TabWarehouseContainer{}).Where("id = ?", *c.ParentID).Update("child_count", models.DB.Raw("child_count - 1"))
+		}
+
+		oldContent, _ := json.Marshal(c)
+		models.DB.Create(&TabWarehouseLog{
+			EntityType: "container",
+			EntityID:   from.ID,
+			UserID:     user.ID,
+			ActionType: "delete",
+			OldContent: string(oldContent),
+			IP:         ctx.ClientIP(),
+		})
+
+		models.DB.Delete(&c)
+
+		ReturnJson(ctx, "apiOK", nil)
+	})
+
+	// 获取容器列表
+	r.POST("/list_container", func(ctx *gin.Context) {
+		isAuth, _, data := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type FromList struct {
+			Search  string `json:"search"`
+			ParentID *uint `json:"parent_id"`
+			Entries int    `json:"entries"`
+			Page    int    `json:"page"`
+		}
+		var from FromList
+		if err := decodeJSON(data, &from); err != nil {
+			ReturnJson(ctx, "jsonErr", nil)
+			return
+		}
+		if from.Entries <= 0 || from.Entries > 300 {
+			from.Entries = 10
+		}
+		if from.Page <= 0 {
+			from.Page = 1
+		}
+
+		var count int64
+		query := models.DB.Model(&TabWarehouseContainer{})
+		if from.Search != "" {
+			query = query.Where("title LIKE ?", "%"+from.Search+"%")
+		}
+		if from.ParentID != nil {
+			query = query.Where("parent_id = ?", *from.ParentID)
+		} else {
+			query = query.Where("parent_id IS NULL")
+		}
+		query.Count(&count)
+
+		var containers []TabWarehouseContainer
+		query.Order("created_at DESC").
+			Offset(from.Entries * (from.Page - 1)).
+			Limit(from.Entries).
+			Find(&containers)
+
+		ReturnJson(ctx, "apiOK", gin.H{
+			"all_count":   count,
+			"containers": containers,
+		})
+	})
+
+	// 获取容器详情
+	r.POST("/get_container", func(ctx *gin.Context) {
+		isAuth, _, data := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type FromGet struct {
+			ID uint `json:"id"`
+		}
+		var from FromGet
+		if err := decodeJSON(data, &from); err != nil || from.ID == 0 {
+			ReturnJson(ctx, "jsonErr", nil)
+			return
+		}
+
+		var c TabWarehouseContainer
+		if err := models.DB.Where("id = ?", from.ID).First(&c).Error; err != nil {
+			ReturnJson(ctx, "container_not_found", nil)
+			return
+		}
+
+		// 关联图片
+		var binds []TabWarehouseContainerFileBind
+		models.DB.Where("container_id = ?", from.ID).Find(&binds)
+		var fileIDs []uint
+		for _, b := range binds {
+			fileIDs = append(fileIDs, b.FileID)
+		}
+		var files []TabFileInfo_
+		if len(fileIDs) > 0 {
+			models.DB.Where("id IN ?", fileIDs).Find(&files)
+		}
+
+		ReturnJson(ctx, "apiOK", gin.H{
+			"container": c,
+			"photos":    files,
+		})
+	})
+
+	// 新增物品
+	r.POST("/add_item", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type FromAdd struct {
+			Name         string  `json:"name"`
+			SerialNumber string  `json:"serial_number"`
+			Remark       string  `json:"remark"`
+			Quantity     int     `json:"quantity"`
+			ContainerID  *uint   `json:"container_id"`
+			Photos       []string `json:"photos"`
+		}
+		var from FromAdd
+		if err := decodeJSON(data, &from); err != nil || from.Name == "" {
+			ReturnJson(ctx, "jsonErr", nil)
+			return
+		}
+
+		// 校验图片哈希
+		for _, hash := range from.Photos {
+			if models.IsContainsSpecialChar(hash) {
+				ReturnJson(ctx, "photo_hash_invalid", nil)
+				return
+			}
+		}
+
+		quantity := from.Quantity
+		if quantity <= 0 {
+			quantity = 1
+		}
+
+		item := TabWarehouseItem{
+			Name:         from.Name,
+			SerialNumber: from.SerialNumber,
+			Remark:       from.Remark,
+			Quantity:     quantity,
+			CreatedAt:    strconv.FormatInt(time.Now().Unix(), 10),
+			CreatorID:    user.ID,
+			ContainerID:  from.ContainerID,
+		}
+		models.DB.Create(&item)
+
+		// 绑定图片
+		for _, hash := range from.Photos {
+			var findFile TabFileInfo_
+			if models.DB.Where(&TabFileInfo_{Sha256: hash, Type: "image"}).First(&findFile).Error == nil {
+				models.DB.Create(&TabWarehouseItemFileBind{
+					ItemID:    item.ID,
+					FileID:    findFile.ID,
+					CreatorID: user.ID,
+				})
+			}
+		}
+
+		// 所属容器的 ItemCount +1
+		if from.ContainerID != nil {
+			models.DB.Model(&TabWarehouseContainer{}).Where("id = ?", *from.ContainerID).Update("item_count", models.DB.Raw("item_count + 1"))
+		}
+
+		// 写操作日志
+		newContent, _ := json.Marshal(from)
+		models.DB.Create(&TabWarehouseLog{
+			EntityType: "item",
+			EntityID:   item.ID,
+			UserID:     user.ID,
+			ActionType: "create",
+			NewContent: string(newContent),
+			IP:         ctx.ClientIP(),
+		})
+
+		ReturnJson(ctx, "apiOK", gin.H{"id": item.ID})
+	})
+
+	// 编辑物品
+	r.POST("/update_item", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type FromUpdate struct {
+			ID           uint    `json:"id"`
+			Name         string  `json:"name"`
+			SerialNumber string  `json:"serial_number"`
+			Remark       string  `json:"remark"`
+			Quantity     int     `json:"quantity"`
+			Photos       []string `json:"photos"`
+		}
+		var from FromUpdate
+		if err := decodeJSON(data, &from); err != nil || from.ID == 0 || from.Name == "" {
+			ReturnJson(ctx, "jsonErr", nil)
+			return
+		}
+
+		// 校验图片哈希
+		for _, hash := range from.Photos {
+			if models.IsContainsSpecialChar(hash) {
+				ReturnJson(ctx, "photo_hash_invalid", nil)
+				return
+			}
+		}
+
+		var item TabWarehouseItem
+		if err := models.DB.Where("id = ?", from.ID).First(&item).Error; err != nil {
+			ReturnJson(ctx, "item_not_found", nil)
+			return
+		}
+
+		oldContent, _ := json.Marshal(item)
+		models.DB.Model(&item).Updates(map[string]interface{}{
+			"name":          from.Name,
+			"serial_number": from.SerialNumber,
+			"remark":        from.Remark,
+			"quantity":      from.Quantity,
+		})
+
+		// 重建图片绑定
+		models.DB.Where("item_id = ?", from.ID).Delete(&TabWarehouseItemFileBind{})
+		for _, hash := range from.Photos {
+			var findFile TabFileInfo_
+			if models.DB.Where(&TabFileInfo_{Sha256: hash, Type: "image"}).First(&findFile).Error == nil {
+				models.DB.Create(&TabWarehouseItemFileBind{
+					ItemID:    from.ID,
+					FileID:    findFile.ID,
+					CreatorID: user.ID,
+				})
+			}
+		}
+
+		newContent, _ := json.Marshal(from)
+		models.DB.Create(&TabWarehouseLog{
+			EntityType: "item",
+			EntityID:   from.ID,
+			UserID:     user.ID,
+			ActionType: "update",
+			OldContent: string(oldContent),
+			NewContent: string(newContent),
+			IP:         ctx.ClientIP(),
+		})
+
+		ReturnJson(ctx, "apiOK", nil)
+	})
+
+	// 删除物品
+	r.POST("/delete_item", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type FromDelete struct {
+			ID uint `json:"id"`
+		}
+		var from FromDelete
+		if err := decodeJSON(data, &from); err != nil || from.ID == 0 {
+			ReturnJson(ctx, "jsonErr", nil)
+			return
+		}
+
+		var item TabWarehouseItem
+		if err := models.DB.Where("id = ?", from.ID).First(&item).Error; err != nil {
+			ReturnJson(ctx, "item_not_found", nil)
+			return
+		}
+
+		// 所属容器 ItemCount -1
+		if item.ContainerID != nil {
+			models.DB.Model(&TabWarehouseContainer{}).Where("id = ?", *item.ContainerID).Update("item_count", models.DB.Raw("item_count - 1"))
+		}
+
+		// 删除关联
+		models.DB.Where("item_id = ?", from.ID).Delete(&TabWarehouseItemFileBind{})
+		models.DB.Where("item_id = ?", from.ID).Delete(&TabWarehouseItemCommit{})
+		models.DB.Where("item_id = ?", from.ID).Delete(&TabWarehouseItemWorkOrderBind{})
+
+		oldContent, _ := json.Marshal(item)
+		models.DB.Create(&TabWarehouseLog{
+			EntityType: "item",
+			EntityID:   from.ID,
+			UserID:     user.ID,
+			ActionType: "delete",
+			OldContent: string(oldContent),
+			IP:         ctx.ClientIP(),
+		})
+
+		models.DB.Delete(&item)
+
+		ReturnJson(ctx, "apiOK", nil)
+	})
+
+	// 获取物品列表
+	r.POST("/list_item", func(ctx *gin.Context) {
+		isAuth, _, data := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type FromList struct {
+			Search      string `json:"search"`
+			ContainerID *uint  `json:"container_id"`
+			Entries     int    `json:"entries"`
+			Page        int    `json:"page"`
+		}
+		var from FromList
+		if err := decodeJSON(data, &from); err != nil {
+			ReturnJson(ctx, "jsonErr", nil)
+			return
+		}
+		if from.Entries <= 0 || from.Entries > 300 {
+			from.Entries = 10
+		}
+		if from.Page <= 0 {
+			from.Page = 1
+		}
+
+		var count int64
+		query := models.DB.Model(&TabWarehouseItem{})
+		if from.Search != "" {
+			query = query.Where("name LIKE ? OR serial_number LIKE ? OR remark LIKE ?",
+				"%"+from.Search+"%", "%"+from.Search+"%", "%"+from.Search+"%")
+		}
+		if from.ContainerID != nil {
+			query = query.Where("container_id = ?", *from.ContainerID)
+		}
+		query.Count(&count)
+
+		var items []TabWarehouseItem
+		query.Order("created_at DESC").
+			Offset(from.Entries * (from.Page - 1)).
+			Limit(from.Entries).
+			Find(&items)
+
+		ReturnJson(ctx, "apiOK", gin.H{
+			"all_count": count,
+			"items":     items,
+		})
+	})
+
+	// 获取物品详情
+	r.POST("/get_item", func(ctx *gin.Context) {
+		isAuth, _, data := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type FromGet struct {
+			ID uint `json:"id"`
+		}
+		var from FromGet
+		if err := decodeJSON(data, &from); err != nil || from.ID == 0 {
+			ReturnJson(ctx, "jsonErr", nil)
+			return
+		}
+
+		var item TabWarehouseItem
+		if err := models.DB.Where("id = ?", from.ID).First(&item).Error; err != nil {
+			ReturnJson(ctx, "item_not_found", nil)
+			return
+		}
+
+		// 关联图片
+		var binds []TabWarehouseItemFileBind
+		models.DB.Where("item_id = ?", from.ID).Find(&binds)
+		var fileIDs []uint
+		for _, b := range binds {
+			fileIDs = append(fileIDs, b.FileID)
+		}
+		var files []TabFileInfo_
+		if len(fileIDs) > 0 {
+			models.DB.Where("id IN ?", fileIDs).Find(&files)
+		}
+
+		// 移动历史
+		var commits []TabWarehouseItemCommit
+		models.DB.Where("item_id = ?", from.ID).Order("created_at DESC").Find(&commits)
+
+		// 关联工单
+		var woBinds []TabWarehouseItemWorkOrderBind
+		models.DB.Where("item_id = ?", from.ID).Find(&woBinds)
+
+		type WOInfo struct {
+			ID     uint   `json:"id"`
+			Title  string `json:"title"`
+			Status string `json:"status"`
+		}
+		var workOrders []WOInfo
+		for _, b := range woBinds {
+			var wo TabWorkOrder
+			if models.DB.Where("id = ?", b.WorkOrderID).First(&wo).Error == nil {
+				workOrders = append(workOrders, WOInfo{ID: wo.ID, Title: wo.Title, Status: wo.CurrentStatus})
+			}
+		}
+
+		ReturnJson(ctx, "apiOK", gin.H{
+			"item":        item,
+			"photos":      files,
+			"commits":     commits,
+			"work_orders": workOrders,
+		})
+	})
+
+	// 移动物品到其他容器
+	r.POST("/move_item", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type FromMove struct {
+			ItemID       uint    `json:"item_id"`
+			NewContainer *uint   `json:"new_container"`
+			Remark       string  `json:"remark"`
+		}
+		var from FromMove
+		if err := decodeJSON(data, &from); err != nil || from.ItemID == 0 {
+			ReturnJson(ctx, "jsonErr", nil)
+			return
+		}
+
+		var item TabWarehouseItem
+		if err := models.DB.Where("id = ?", from.ItemID).First(&item).Error; err != nil {
+			ReturnJson(ctx, "item_not_found", nil)
+			return
+		}
+
+		oldContainer := item.ContainerID
+
+		// 同一容器无需操作
+		if ptrEqUint(oldContainer, from.NewContainer) {
+			ReturnJson(ctx, "apiOK", nil)
+			return
+		}
+
+		// 旧容器 ItemCount -1
+		if oldContainer != nil {
+			models.DB.Model(&TabWarehouseContainer{}).Where("id = ?", *oldContainer).Update("item_count", models.DB.Raw("item_count - 1"))
+		}
+
+		// 新容器 ItemCount +1
+		if from.NewContainer != nil {
+			models.DB.Model(&TabWarehouseContainer{}).Where("id = ?", *from.NewContainer).Update("item_count", models.DB.Raw("item_count + 1"))
+		}
+
+		// 更新物品容器
+		item.ContainerID = from.NewContainer
+		models.DB.Save(&item)
+
+		// 记录移动日志
+		models.DB.Create(&TabWarehouseItemCommit{
+			ItemID:       from.ItemID,
+			UserID:       user.ID,
+			OldContainer: oldContainer,
+			NewContainer: from.NewContainer,
+			Remark:       from.Remark,
+			IP:           ctx.ClientIP(),
+		})
+
+		// 写通用操作日志
+		models.DB.Create(&TabWarehouseLog{
+			EntityType: "item",
+			EntityID:   from.ItemID,
+			UserID:     user.ID,
+			ActionType: "move",
+			OldContent: ptrStrUint(oldContainer),
+			NewContent: ptrStrUint(from.NewContainer),
+			IP:         ctx.ClientIP(),
+			Remark:     from.Remark,
+		})
+
+		ReturnJson(ctx, "apiOK", nil)
+	})
+
+	// 获取仓库统计
+	r.POST("/count", func(ctx *gin.Context) {
+		isAuth, _, _ := AuthenticationAuthority(ctx)
+		if !isAuth {
+			ReturnJson(ctx, "userCookieError", nil)
+			return
+		}
+
+		type WCount struct {
+			ContainerTotal int64 `json:"container_total"`
+			ItemTotal      int64 `json:"item_total"`
+			UnstoredItems  int64 `json:"unstored_items"`
+		}
+		var count WCount
+		models.DB.Model(&TabWarehouseContainer{}).Count(&count.ContainerTotal)
+		models.DB.Model(&TabWarehouseItem{}).Count(&count.ItemTotal)
+		models.DB.Model(&TabWarehouseItem{}).Where("container_id IS NULL").Count(&count.UnstoredItems)
+
+		ReturnJson(ctx, "apiOK", gin.H{
+			"container_total": count.ContainerTotal,
+			"item_total":      count.ItemTotal,
+			"unstored_items":   count.UnstoredItems,
+		})
+	})
+}
+
+// ---------- 辅助函数 ----------
+
+func ptrEqUint(a, b *uint) bool {
+	if a == nil && b == nil {
+		return true
+	}
+	if a == nil || b == nil {
+		return false
+	}
+	return *a == *b
+}
+
+func ptrStrUint(p *uint) string {
+	if p == nil {
+		return "nil"
+	}
+	return strconv.FormatUint(uint64(*p), 10)
+}

frontend/ops_vue_js/src/api/warehouse.js

@@ -0,0 +1,68 @@
+import { api } from './index'
+
+export const warehouseApi = {
+  /** 获取容器列表 */
+  getContainers(params = {}) {
+    return api.post('/warehouse/list_container', params)
+  },
+
+  /** 获取容器详情（含图片） */
+  getContainer(id) {
+    return api.post('/warehouse/get_container', { id })
+  },
+
+  /** 新增容器 */
+  addContainer(data) {
+    return api.post('/warehouse/add_container', data)
+  },
+
+  /** 编辑容器 */
+  updateContainer(data) {
+    return api.post('/warehouse/update_container', data)
+  },
+
+  /** 删除容器 */
+  deleteContainer(id) {
+    return api.post('/warehouse/delete_container', { id })
+  },
+
+  /** 获取仓库统计 */
+  getCount() {
+    return api.post('/warehouse/count', {})
+  },
+
+  /** 获取物品列表 */
+  getItems(params = {}) {
+    return api.post('/warehouse/list_item', params)
+  },
+
+  /** 新增物品 */
+  addItem(data) {
+    return api.post('/warehouse/add_item', data)
+  },
+
+  /** 获取物品详情 */
+  getItem(id) {
+    return api.post('/warehouse/get_item', { id })
+  },
+
+  /** 编辑物品 */
+  updateItem(data) {
+    return api.post('/warehouse/update_item', data)
+  },
+
+  /** 删除物品 */
+  deleteItem(id) {
+    return api.post('/warehouse/delete_item', { id })
+  },
+
+  /** 移动物品 */
+  moveItem(data) {
+    return api.post('/warehouse/move_item', data)
+  },
+
+  /** 获取容器列表（用于移动目标选择） */
+  getContainers(params = {}) {
+    return api.post('/warehouse/list_container', params)
+  },
+}

frontend/ops_vue_js/src/components/AppHeader.vue

@@ -51,7 +51,8 @@ const navItems = computed(() => [
   { label: t("appname.schedule"), to: "/schedule" },
   { label: t("appname.purchase"), to: "/purchase" },
   { label: t("appname.work_order"), to: "/work_order" },
-  // { label: t("appname.warehouse"), to: "/warehouse" },
+  { label: t("appname.warehouse"), to: "/warehouse/container" },
+  { label: t("appname.warehouse_items"), to: "/warehouse/item" },
 ]);
 </script>
 

frontend/ops_vue_js/src/i18n/en.json

@@ -23,6 +23,7 @@
     "schedule": "Schedule",
     "purchase": "Purchase",
     "warehouse": "Warehouse",
+    "warehouse_items": "Items Overview",
     "work_order": "Work Order"
   },
   "tagadder": {
@@ -151,6 +152,64 @@
     "submit": "Submit",
     "save_changes": "Save Changes"
   },
+  "warehouse": {
+    "container_list": "Container List",
+    "container_detail": "Container Detail",
+    "item_list": "Item List",
+    "add_container": "Add Container",
+    "edit_container": "Edit Container",
+    "container_name": "Container Name",
+    "title_placeholder": "Enter container name",
+    "remark": "Remark",
+    "remark_placeholder": "Enter remark (optional)",
+    "created_at": "Created At",
+    "created_by": "Created By",
+    "child_containers": "Sub-Containers",
+    "items": "Items",
+    "actions": "Actions",
+    "view_items": "View",
+    "edit": "Edit",
+    "delete": "Delete",
+    "search_placeholder": "Search",
+    "no_containers": "No containers found",
+    "no_items": "No items found",
+    "container_count": "Containers",
+    "item_count": "Items",
+    "unstored_items": "Unstored",
+    "title_required": "Container name is required",
+    "delete_confirm_title": "Delete Container",
+    "delete_confirm_msg": "Are you sure you want to delete \"{name}\"? This cannot be undone.",
+    "cannot_delete_nonempty": "Cannot delete a container that has items or sub-containers",
+    "confirm_delete": "Are you sure you want to delete this container? This action cannot be undone.",
+    "add_item": "Add Item",
+    "edit_item": "Edit Item",
+    "item_name": "Item Name",
+    "item_name_placeholder": "Enter item name",
+    "serial_number": "Serial Number",
+    "serial_number_placeholder": "Enter serial number (optional)",
+    "quantity": "Quantity",
+    "item_name_required": "Item name is required",
+    "back_to_list": "Back to List",
+    "root": "Warehouse",
+    "item_detail": "Item Detail",
+    "edit_item": "Edit Item",
+    "move_item": "Move Item",
+    "move_history": "Move History",
+    "work_orders": "Work Orders",
+    "no_move_history": "No move history",
+    "no_work_orders": "No related work orders",
+    "current_location": "Current Location",
+    "target_container": "Target Container",
+    "search_container": "Search container...",
+    "confirm_move": "Confirm Move",
+    "move_remark_placeholder": "Move remark (optional)",
+    "location": "Location",
+    "delete_item_title": "Delete Item",
+    "delete_item_msg": "Are you sure you want to delete item \"{name}\"? This action cannot be undone.",
+    "items_in_containers": "Stored",
+    "total_items": "{count} items",
+    "search_item_placeholder": "Search by name or serial number"
+  },
   "purchase_addorder": {
     "add_order": "Add Order",
     "edit_order": "Edit Order",

frontend/ops_vue_js/src/i18n/zh-CN.json

@@ -23,6 +23,7 @@
     "schedule": "日程",
     "purchase": "采购",
     "warehouse": "仓库",
+    "warehouse_items": "物品总览",
     "work_order": "工单"
   },
   "tagadder": {
@@ -151,6 +152,64 @@
     "submit": "提交",
     "save_changes": "保存修改"
   },
+  "warehouse": {
+    "container_list": "容器列表",
+    "container_detail": "容器详情",
+    "item_list": "物品列表",
+    "add_container": "新增容器",
+    "edit_container": "编辑容器",
+    "container_name": "容器名称",
+    "title_placeholder": "输入容器名称",
+    "remark": "备注",
+    "remark_placeholder": "输入备注（可选）",
+    "created_at": "创建日期",
+    "created_by": "创建人",
+    "child_containers": "子容器",
+    "items": "物品",
+    "actions": "操作",
+    "view_items": "查看",
+    "edit": "编辑",
+    "delete": "删除",
+    "search_placeholder": "搜索",
+    "no_containers": "暂无容器",
+    "no_items": "暂无物品",
+    "container_count": "容器数",
+    "item_count": "物品数",
+    "unstored_items": "未入库",
+    "title_required": "容器名称不能为空",
+    "delete_confirm_title": "删除容器",
+    "delete_confirm_msg": "确定要删除容器「{name}」吗？此操作不可撤销。",
+    "cannot_delete_nonempty": "容器内含有物品或子容器，无法删除",
+    "confirm_delete": "确定要删除此容器吗？此操作不可撤销。",
+    "add_item": "新增物品",
+    "edit_item": "编辑物品",
+    "item_name": "物品名称",
+    "item_name_placeholder": "输入物品名称",
+    "serial_number": "序列号",
+    "serial_number_placeholder": "输入序列号（可选）",
+    "quantity": "数量",
+    "item_name_required": "物品名称不能为空",
+    "back_to_list": "返回列表",
+    "root": "仓库",
+    "item_detail": "物品详情",
+    "edit_item": "编辑物品",
+    "move_item": "移动物品",
+    "move_history": "移动历史",
+    "work_orders": "关联工单",
+    "no_move_history": "暂无移动记录",
+    "no_work_orders": "暂无关联工单",
+    "current_location": "当前位置",
+    "target_container": "目标容器",
+    "search_container": "搜索容器...",
+    "confirm_move": "确认移动",
+    "move_remark_placeholder": "输入移动备注（可选）",
+    "location": "位置",
+    "delete_item_title": "删除物品",
+    "delete_item_msg": "确定要删除物品「{name}」吗？此操作不可撤销。",
+    "items_in_containers": "已入库",
+    "total_items": "共 {count} 条",
+    "search_item_placeholder": "搜索物品名称或序列号"
+  },
   "purchase_addorder": {
     "add_order": "添加订单",
     "edit_order": "编辑订单",

frontend/ops_vue_js/src/router/index.js

@@ -75,9 +75,29 @@ const router = createRouter({
           component: () => import('@/views/work_order/ShowWorkOrder.vue'),
         },
         {
-          path: 'warehouse',
+          path: 'warehouse/container',
           name: 'warehouse',
-          component: () => import('@/views/WarehouseView.vue'),
+          component: () => import('@/views/warehouse/WarehouseContainerList.vue'),
+        },
+        {
+          path: 'warehouse/container/:id',
+          name: 'warehouse-container-detail',
+          component: () => import('@/views/warehouse/WarehouseContainerDetail.vue'),
+        },
+        {
+          path: 'warehouse/container/:id/add-item',
+          name: 'warehouse-add-item',
+          component: () => import('@/views/warehouse/WarehouseAddItem.vue'),
+        },
+        {
+          path: 'warehouse/item',
+          name: 'warehouse-item-list',
+          component: () => import('@/views/warehouse/WarehouseItemList.vue'),
+        },
+        {
+          path: 'warehouse/item/:id',
+          name: 'warehouse-item-detail',
+          component: () => import('@/views/warehouse/WarehouseItemDetail.vue'),
         },
         {
           path: 'admin',
@@ -140,7 +160,7 @@ router.beforeEach((to) => {
   const userStore = useUserStore()
 
   // 不需要登录的页面
-  const publicPages = ['/', '/login', '/register', '/forgot_password', '/schedule','/warehouse', '/404']
+  const publicPages = ['/', '/login', '/register', '/forgot_password', '/schedule', '/warehouse/container', '/warehouse/item', '/404']
   if (publicPages.includes(to.path)) return true
 
   // 未登录 → 跳转登录

frontend/ops_vue_js/src/views/warehouse/WarehouseAddItem.vue

@@ -0,0 +1,206 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useToastStore } from '@/stores/toast'
+import { usePageTitle } from '@/composables/usePageTitle'
+import { warehouseApi } from '@/api/warehouse'
+import useDropzone from '@/components/useDropzone.vue'
+
+usePageTitle('warehouse.add_item')
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const toast = useToastStore()
+
+const containerId = ref(parseInt(route.params.id))
+
+const form = reactive({
+  name: '',
+  serial_number: '',
+  remark: '',
+  quantity: 1,
+})
+
+const submitting = ref(false)
+const loadingContainer = ref(true)
+const containerName = ref('')
+
+const dropzoneRef = ref(null)
+
+function getPhotoHashes() {
+  return dropzoneRef.value?.return_files().map((f) => f.hash) ?? []
+}
+
+onMounted(async () => {
+  try {
+    const { errCode, data } = await warehouseApi.getContainer(containerId.value)
+    if (errCode === 0 && data?.container) {
+      containerName.value = data.container.Title
+    }
+  } catch {
+    // 找不到容器时仍允许提交
+  } finally {
+    loadingContainer.value = false
+  }
+})
+
+async function submit() {
+  if (!form.name.trim()) {
+    toast.error(t('warehouse.item_name_required'))
+    return
+  }
+
+  // 等待图片上传完成
+  await new Promise((r) => setTimeout(r, 200))
+  const hashes = getPhotoHashes()
+
+  submitting.value = true
+  try {
+    const { errCode } = await warehouseApi.addItem({
+      container_id: containerId.value,
+      name: form.name.trim(),
+      serial_number: form.serial_number.trim(),
+      remark: form.remark.trim(),
+      quantity: form.quantity > 0 ? form.quantity : 1,
+      photos: hashes,
+    })
+    if (errCode === 0) {
+      toast.success(t('message.save_success'))
+      router.push(`/warehouse/container/${containerId.value}`)
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    toast.error(t('message.server_error'))
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="p-4 max-w-2xl mx-auto space-y-4">
+
+    <!-- 面包屑 -->
+    <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+      <RouterLink to="/warehouse/container" class="text-blue-500 hover:underline">
+        {{ t('warehouse.container_list') }}
+      </RouterLink>
+      <span>/</span>
+      <RouterLink
+        v-if="containerName"
+        :to="`/warehouse/container/${containerId}`"
+        class="text-blue-500 hover:underline"
+      >
+        {{ containerName }}
+      </RouterLink>
+      <svg v-if="loadingContainer" class="h-3.5 w-3.5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+      </svg>
+      <span v-else>/</span>
+      <span class="text-gray-700 dark:text-gray-200">{{ t('warehouse.add_item') }}</span>
+    </div>
+
+    <!-- 表单卡片 -->
+    <div class="rounded-xl border border-gray-200 bg-white px-5 py-5 shadow dark:border-dk-muted dark:bg-dk-card">
+      <h2 class="mb-5 text-base font-semibold text-gray-900 dark:text-white">
+        {{ t('warehouse.add_item') }}
+        <span v-if="containerName" class="ml-2 text-sm font-normal text-gray-500">
+          → {{ containerName }}
+        </span>
+      </h2>
+
+      <div class="space-y-4">
+
+        <!-- 物品名称 -->
+        <div>
+          <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            {{ t('warehouse.item_name') }} *
+          </label>
+          <input
+            v-model="form.name"
+            type="text"
+            :placeholder="t('warehouse.item_name_placeholder')"
+            class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            @keyup.enter="submit"
+          />
+        </div>
+
+        <!-- 序列号 -->
+        <div>
+          <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            {{ t('warehouse.serial_number') }}
+          </label>
+          <input
+            v-model="form.serial_number"
+            type="text"
+            :placeholder="t('warehouse.serial_number_placeholder')"
+            class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+          />
+        </div>
+
+        <!-- 数量 -->
+        <div>
+          <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            {{ t('warehouse.quantity') }}
+          </label>
+          <input
+            v-model.number="form.quantity"
+            type="number"
+            min="1"
+            class="w-28 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+          />
+        </div>
+
+        <!-- 备注 -->
+        <div>
+          <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            {{ t('warehouse.remark') }}
+          </label>
+          <textarea
+            v-model="form.remark"
+            :placeholder="t('warehouse.remark_placeholder')"
+            rows="3"
+            class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+          ></textarea>
+        </div>
+
+        <!-- 图片上传 -->
+        <div>
+          <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            {{ t('purchase_addorder.upload_photos') }}
+          </label>
+          <useDropzone
+            ref="dropzoneRef"
+            uploadURL="/api/files/upload/image"
+            :max-files="9"
+          />
+        </div>
+
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="mt-6 flex justify-end gap-2">
+        <button
+          class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
+          @click="router.push(`/warehouse/container/${containerId}`)"
+        >
+          {{ t('message.cancel') }}
+        </button>
+        <button
+          class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+          :disabled="submitting"
+          @click="submit"
+        >
+          <svg v-if="submitting" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+          </svg>
+          {{ t('message.save') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

frontend/ops_vue_js/src/views/warehouse/WarehouseContainerDetail.vue

@@ -0,0 +1,723 @@
+<script setup>
+import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useToastStore } from '@/stores/toast'
+import { usePageTitle } from '@/composables/usePageTitle'
+import { useUsersStore } from '@/stores/users'
+import { warehouseApi } from '@/api/warehouse'
+import ConfirmDialog from '@/components/ConfirmDialog.vue'
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconFolder,
+  IconPackage,
+  IconPlus,
+  IconEdit,
+  IconTrash,
+  IconSearch,
+} from '@tabler/icons-vue'
+
+usePageTitle('warehouse.container_detail')
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const toast = useToastStore()
+const usersStore = useUsersStore()
+
+const containerId = computed(() => parseInt(route.params.id))
+
+// ── 容器详情 ──
+const container = ref(null)
+const photos = ref([])
+const loadingDetail = ref(true)
+const notFound = ref(false)
+
+// ── 子容器列表 ──
+const subContainers = ref([])
+const subTotal = ref(0)
+const subPage = ref(1)
+const subPageSize = ref(10)
+const subSearch = ref('')
+const loadingSub = ref(false)
+
+const subTotalPages = computed(() => Math.ceil(subTotal.value / subPageSize.value) || 1)
+
+function subPageRange() {
+  const total = subTotalPages.value
+  const cur = subPage.value
+  let start = Math.max(1, cur - 2)
+  let end = Math.min(cur + 4, total)
+  if (end - start < 4) start = Math.max(1, end - 4)
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i)
+}
+
+// ── 物品列表 ──
+const items = ref([])
+const itemTotal = ref(0)
+const itemPage = ref(1)
+const itemPageSize = ref(10)
+const itemSearch = ref('')
+const loadingItems = ref(false)
+
+const itemTotalPages = computed(() => Math.ceil(itemTotal.value / itemPageSize.value) || 1)
+
+function itemPageRange() {
+  const total = itemTotalPages.value
+  const cur = itemPage.value
+  let start = Math.max(1, cur - 2)
+  let end = Math.min(cur + 4, total)
+  if (end - start < 4) start = Math.max(1, end - 4)
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i)
+}
+
+// ── Tab ──
+const activeTab = ref('sub_containers')
+
+// ── 新增子容器弹窗 ──
+const showAddSub = ref(false)
+const addSubForm = reactive({ title: '', remark: '' })
+const submittingSub = ref(false)
+
+// ── 编辑容器弹窗 ──
+const showEdit = ref(false)
+const editForm = reactive({ title: '', remark: '' })
+const submittingEdit = ref(false)
+
+// ── 删除确认 ──
+const showDeleteConfirm = ref(false)
+const deletingName = ref('')
+const deleting = ref(false)
+
+// ── 时间格式化 ──
+function fmtTs(ts) {
+  if (!ts) return '—'
+  const d = new Date(parseInt(ts) * 1000)
+  return d.toLocaleString()
+}
+
+// ── 拉取容器详情 ──
+async function fetchContainer() {
+  loadingDetail.value = true
+  notFound.value = false
+  try {
+    const { errCode, data } = await warehouseApi.getContainer(containerId.value)
+    if (errCode === 0 && data) {
+      container.value = data.container
+      photos.value = data.photos ?? []
+    } else {
+      notFound.value = true
+    }
+  } catch {
+    notFound.value = true
+  } finally {
+    loadingDetail.value = false
+  }
+}
+
+// ── 拉取子容器 ──
+async function fetchSubContainers() {
+  loadingSub.value = true
+  try {
+    const { errCode, data } = await warehouseApi.getContainers({
+      search: subSearch.value,
+      parent_id: containerId.value,
+      entries: subPageSize.value,
+      page: subPage.value,
+    })
+    if (errCode === 0) {
+      subContainers.value = data.containers ?? []
+      subTotal.value = data.all_count ?? 0
+    }
+  } catch {
+    // 拦截器已处理
+  } finally {
+    loadingSub.value = false
+  }
+}
+
+// ── 拉取物品 ──
+async function fetchItems() {
+  loadingItems.value = true
+  try {
+    const { errCode, data } = await warehouseApi.getItems({
+      search: itemSearch.value,
+      container_id: containerId.value,
+      entries: itemPageSize.value,
+      page: itemPage.value,
+    })
+    if (errCode === 0) {
+      items.value = data.items ?? []
+      itemTotal.value = data.all_count ?? 0
+    }
+  } catch {
+    // 拦截器已处理
+  } finally {
+    loadingItems.value = false
+  }
+}
+
+// ── 切 tab 时加载对应数据 ──
+watch(activeTab, (tab) => {
+  if (tab === 'sub_containers') fetchSubContainers()
+  else fetchItems()
+})
+
+// ── 新增子容器 ──
+async function submitAddSub() {
+  if (!addSubForm.title.trim()) {
+    toast.error(t('warehouse.title_required'))
+    return
+  }
+  submittingSub.value = true
+  try {
+    const { errCode } = await warehouseApi.addContainer({
+      parent_id: containerId.value,
+      title: addSubForm.title.trim(),
+      remark: addSubForm.remark.trim(),
+    })
+    if (errCode === 0) {
+      toast.success(t('message.save_success'))
+      showAddSub.value = false
+      Object.assign(addSubForm, { title: '', remark: '' })
+      fetchSubContainers()
+      fetchContainer()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    toast.error(t('message.server_error'))
+  } finally {
+    submittingSub.value = false
+  }
+}
+
+// ── 编辑容器 ──
+function openEdit() {
+  editForm.title = container.value?.Title ?? ''
+  editForm.remark = container.value?.Remark ?? ''
+  showEdit.value = true
+}
+
+async function submitEdit() {
+  if (!editForm.title.trim()) {
+    toast.error(t('warehouse.title_required'))
+    return
+  }
+  submittingEdit.value = true
+  try {
+    const { errCode } = await warehouseApi.updateContainer({
+      id: containerId.value,
+      title: editForm.title.trim(),
+      remark: editForm.remark.trim(),
+    })
+    if (errCode === 0) {
+      toast.success(t('message.save_success'))
+      showEdit.value = false
+      fetchContainer()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    toast.error(t('message.server_error'))
+  } finally {
+    submittingEdit.value = false
+  }
+}
+
+// ── 删除容器 ──
+function confirmDelete() {
+  deletingName.value = container.value?.Title ?? ''
+  showDeleteConfirm.value = true
+}
+
+async function doDelete() {
+  deleting.value = true
+  try {
+    const { errCode } = await warehouseApi.deleteContainer(containerId.value)
+    if (errCode === 0) {
+      toast.success(t('message.delete_ok'))
+      showDeleteConfirm.value = false
+      if (container.value.ParentID) {
+        router.push(`/warehouse/container/${container.value.ParentID}`)
+      } else {
+        router.push('/warehouse/container')
+      }
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    toast.error(t('message.server_error'))
+  } finally {
+    deleting.value = false
+  }
+}
+
+// ── 初始化 ──
+onMounted(async () => {
+  await fetchContainer()
+  if (activeTab.value === 'sub_containers') {
+    fetchSubContainers()
+  }
+})
+</script>
+
+<template>
+  <div class="p-4 max-w-5xl mx-auto space-y-4">
+
+    <!-- 加载 -->
+    <div v-if="loadingDetail" class="flex justify-center py-16">
+      <svg class="h-6 w-6 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+      </svg>
+    </div>
+
+    <!-- 未找到 -->
+    <div v-else-if="notFound" class="flex flex-col items-center justify-center py-16 text-gray-400">
+      <p>{{ t('message.not_found') }}</p>
+      <button
+        class="mt-2 text-sm text-blue-500 hover:underline"
+        @click="router.push('/warehouse/container')"
+      >
+        {{ t('warehouse.back_to_list') }}
+      </button>
+    </div>
+
+    <template v-else-if="container">
+
+      <!-- 面包屑 + 操作栏 -->
+      <div class="flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2 text-sm">
+          <RouterLink to="/warehouse/container" class="text-blue-500 hover:underline">
+            {{ t('warehouse.container_list') }}
+          </RouterLink>
+          <span class="text-gray-400">/</span>
+          <span class="font-medium text-gray-900 dark:text-white">{{ container.Title }}</span>
+        </div>
+        <div class="flex gap-2">
+          <button
+            class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:bg-dk-base dark:text-white dark:hover:bg-dk-muted"
+            @click="openEdit"
+          >
+            <IconEdit :size="14" />
+            {{ t('warehouse.edit') }}
+          </button>
+          <button
+            v-if="container.ChildCount === 0 && container.ItemCount === 0"
+            class="inline-flex items-center gap-1.5 rounded-lg border border-red-300 bg-white px-3 py-1.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:border-red-900 dark:bg-dk-base dark:text-red-400 dark:hover:bg-red-900/20"
+            @click="confirmDelete"
+          >
+            <IconTrash :size="14" />
+            {{ t('warehouse.delete') }}
+          </button>
+        </div>
+      </div>
+
+      <!-- 容器信息卡片 -->
+      <div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
+        <div class="flex items-center gap-2 mb-2">
+          <IconFolder class="text-blue-500 flex-shrink-0" :size="20" />
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ container.Title }}</h2>
+        </div>
+
+        <!-- 图片 -->
+        <div v-if="photos.length" class="flex gap-2 flex-wrap mb-3">
+          <a
+            v-for="photo in photos"
+            :key="photo.ID"
+            :href="`/api/files/get/${photo.Sha256}`"
+            target="_blank"
+          >
+            <img
+              :src="`/api/files/get/${photo.Sha256}`"
+              class="w-16 h-16 object-cover rounded border border-gray-200 dark:border-dk-muted"
+              :alt="photo.Name"
+            />
+          </a>
+        </div>
+
+        <!-- 备注 -->
+        <p
+          v-if="container.Remark"
+          class="text-sm text-gray-500 dark:text-gray-400 whitespace-pre-wrap mb-3"
+        >
+          {{ container.Remark }}
+        </p>
+
+        <!-- 元信息 -->
+        <div class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-gray-400 dark:text-gray-500">
+          <span>{{ t('warehouse.created_by') }}: {{ usersStore.getUsernameFromUserID(container.CreatorID) }}</span>
+          <span>{{ t('warehouse.created_at') }}: {{ fmtTs(container.CreatedAt) }}</span>
+          <span>{{ t('warehouse.child_containers') }}: {{ container.ChildCount }}</span>
+          <span>{{ t('warehouse.items') }}: {{ container.ItemCount }}</span>
+        </div>
+      </div>
+
+      <!-- Tab 切换 -->
+      <div class="flex gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-dk-muted dark:bg-dk-base w-fit">
+        <button
+          class="px-4 py-1.5 text-sm rounded-md font-medium transition-colors"
+          :class="activeTab === 'sub_containers'
+            ? 'bg-white text-gray-900 shadow-sm dark:bg-dk-card dark:text-white'
+            : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
+          @click="activeTab = 'sub_containers'"
+        >
+          {{ t('warehouse.child_containers') }} ({{ container.ChildCount }})
+        </button>
+        <button
+          class="px-4 py-1.5 text-sm rounded-md font-medium transition-colors"
+          :class="activeTab === 'items'
+            ? 'bg-white text-gray-900 shadow-sm dark:bg-dk-card dark:text-white'
+            : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
+          @click="activeTab = 'items'"
+        >
+          {{ t('warehouse.items') }} ({{ container.ItemCount }})
+        </button>
+      </div>
+
+      <!-- 子容器列表 -->
+      <div v-if="activeTab === 'sub_containers'" class="rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card">
+        <!-- 工具栏 -->
+        <div class="flex items-center gap-2 px-5 py-3 border-b border-gray-100 dark:border-dk-muted">
+          <div class="relative flex-1 max-w-xs">
+            <IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="15" />
+            <input
+              v-model="subSearch"
+              type="text"
+              :placeholder="t('warehouse.search_placeholder')"
+              class="w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+              @keyup.enter="subPage = 1; fetchSubContainers()"
+            />
+          </div>
+          <button
+            class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            @click="showAddSub = true"
+          >
+            <IconPlus :size="15" />
+            {{ t('warehouse.add_container') }}
+          </button>
+        </div>
+
+        <!-- 表格 -->
+        <div class="overflow-x-auto">
+          <table class="w-full text-left text-sm text-gray-900 dark:text-white">
+            <thead>
+              <tr class="border-b border-gray-200 bg-gray-50 text-gray-500 dark:border-dk-muted dark:bg-dk-base dark:text-gray-400">
+                <th class="px-5 py-3 font-medium">{{ t('warehouse.container_name') }}</th>
+                <th class="px-5 py-3 font-medium w-24 text-center">{{ t('warehouse.child_containers') }}</th>
+                <th class="px-5 py-3 font-medium w-24 text-center">{{ t('warehouse.items') }}</th>
+                <th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.created_at') }}</th>
+                <th class="px-5 py-3 font-medium w-24 text-right">{{ t('warehouse.actions') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="loadingSub">
+                <td colspan="5" class="px-5 py-8 text-center">
+                  <svg class="mx-auto h-5 w-5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+                  </svg>
+                </td>
+              </tr>
+              <tr v-else-if="subContainers.length === 0">
+                <td colspan="5" class="px-5 py-8 text-center text-gray-400 dark:text-gray-500">
+                  {{ t('warehouse.no_containers') }}
+                </td>
+              </tr>
+              <tr
+                v-else
+                v-for="c in subContainers"
+                :key="c.ID"
+                class="border-b border-gray-100 cursor-pointer transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
+                @click="router.push(`/warehouse/container/${c.ID}`)"
+              >
+                <td class="px-5 py-3">
+                  <div class="flex items-center gap-2">
+                    <IconFolder class="text-blue-500 flex-shrink-0" :size="16" />
+                    <span class="font-medium max-w-xs truncate">{{ c.Title }}</span>
+                  </div>
+                </td>
+                <td class="px-5 py-3 text-center">
+                  <span class="inline-flex items-center gap-1 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">
+                    {{ c.ChildCount }}
+                  </span>
+                </td>
+                <td class="px-5 py-3 text-center">
+                  <span class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/40 dark:text-green-400">
+                    {{ c.ItemCount }}
+                  </span>
+                </td>
+                <td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ fmtTs(c.CreatedAt) }}</td>
+                <td class="px-5 py-3 text-right">
+                  <button
+                    class="text-xs text-blue-500 hover:underline"
+                    @click.stop="router.push(`/warehouse/container/${c.ID}`)"
+                  >
+                    {{ t('warehouse.view_items') }}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- 分页 -->
+        <div v-if="subTotalPages > 1" class="flex items-center justify-center gap-1 px-5 py-3 border-t border-gray-100 dark:border-dk-muted">
+          <button
+            class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
+            :disabled="subPage <= 1"
+            @click="subPage--; fetchSubContainers()"
+          >
+            <IconChevronLeft :size="15" />
+          </button>
+          <button
+            v-for="p in subPageRange()"
+            :key="p"
+            class="flex items-center justify-center w-7 h-7 rounded text-sm"
+            :class="p === subPage
+              ? 'bg-blue-600 text-white font-medium'
+              : 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted'"
+            @click="subPage = p; fetchSubContainers()"
+          >
+            {{ p }}
+          </button>
+          <button
+            class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
+            :disabled="subPage >= subTotalPages"
+            @click="subPage++; fetchSubContainers()"
+          >
+            <IconChevronRight :size="15" />
+          </button>
+        </div>
+      </div>
+
+      <!-- 物品列表 -->
+      <div v-if="activeTab === 'items'" class="rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card">
+        <!-- 工具栏 -->
+        <div class="flex items-center gap-2 px-5 py-3 border-b border-gray-100 dark:border-dk-muted">
+          <div class="relative flex-1 max-w-xs">
+            <IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="15" />
+            <input
+              v-model="itemSearch"
+              type="text"
+              :placeholder="t('warehouse.search_placeholder')"
+              class="w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+              @keyup.enter="itemPage = 1; fetchItems()"
+            />
+          </div>
+          <button
+            class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            @click="router.push(`/warehouse/container/${containerId}/add-item`)"
+          >
+            <IconPlus :size="15" />
+            {{ t('warehouse.add_item') }}
+          </button>
+        </div>
+
+        <!-- 表格 -->
+        <div class="overflow-x-auto">
+          <table class="w-full text-left text-sm text-gray-900 dark:text-white">
+            <thead>
+              <tr class="border-b border-gray-200 bg-gray-50 text-gray-500 dark:border-dk-muted dark:bg-dk-base dark:text-gray-400">
+                <th class="px-5 py-3 font-medium">{{ t('warehouse.item_name') }}</th>
+                <th class="px-5 py-3 font-medium">{{ t('warehouse.serial_number') }}</th>
+                <th class="px-5 py-3 font-medium w-20 text-center">{{ t('warehouse.quantity') }}</th>
+                <th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.created_at') }}</th>
+                <th class="px-5 py-3 font-medium w-20 text-right">{{ t('warehouse.actions') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="loadingItems">
+                <td colspan="5" class="px-5 py-8 text-center">
+                  <svg class="mx-auto h-5 w-5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+                  </svg>
+                </td>
+              </tr>
+              <tr v-else-if="items.length === 0">
+                <td colspan="5" class="px-5 py-8 text-center text-gray-400 dark:text-gray-500">
+                  {{ t('warehouse.no_items') }}
+                </td>
+              </tr>
+              <tr
+                v-else
+                v-for="item in items"
+                :key="item.ID"
+                class="border-b border-gray-100 cursor-pointer transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
+                @click="router.push(`/warehouse/item/${item.ID}`)"
+              >
+                <td class="px-5 py-3">
+                  <div class="flex items-center gap-2">
+                    <IconPackage class="text-green-500 flex-shrink-0" :size="16" />
+                    <span class="font-medium max-w-xs truncate">{{ item.Name }}</span>
+                  </div>
+                </td>
+                <td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[140px] truncate">{{ item.serial_number || '—' }}</td>
+                <td class="px-5 py-3 text-center text-sm">{{ item.Quantity }}</td>
+                <td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ fmtTs(item.CreatedAt) }}</td>
+                <td class="px-5 py-3 text-right">
+                  <button
+                    class="text-xs text-blue-500 hover:underline"
+                    @click.stop="router.push(`/warehouse/item/${item.ID}`)"
+                  >
+                    {{ t('warehouse.view_items') }}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- 分页 -->
+        <div v-if="itemTotalPages > 1" class="flex items-center justify-center gap-1 px-5 py-3 border-t border-gray-100 dark:border-dk-muted">
+          <button
+            class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
+            :disabled="itemPage <= 1"
+            @click="itemPage--; fetchItems()"
+          >
+            <IconChevronLeft :size="15" />
+          </button>
+          <button
+            v-for="p in itemPageRange()"
+            :key="p"
+            class="flex items-center justify-center w-7 h-7 rounded text-sm"
+            :class="p === itemPage
+              ? 'bg-blue-600 text-white font-medium'
+              : 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted'"
+            @click="itemPage = p; fetchItems()"
+          >
+            {{ p }}
+          </button>
+          <button
+            class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
+            :disabled="itemPage >= itemTotalPages"
+            @click="itemPage++; fetchItems()"
+          >
+            <IconChevronRight :size="15" />
+          </button>
+        </div>
+      </div>
+
+    </template>
+  </div>
+
+  <!-- 新增子容器弹窗 -->
+  <Transition name="fade">
+    <div
+      v-if="showAddSub"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      @click.self="showAddSub = false"
+    >
+      <div class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-5 shadow-xl dark:border-dk-muted dark:bg-dk-card">
+        <h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">{{ t('warehouse.add_container') }}</h3>
+        <div class="space-y-3">
+          <div>
+            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.container_name') }} *</label>
+            <input
+              v-model="addSubForm.title"
+              type="text"
+              :placeholder="t('warehouse.title_placeholder')"
+              class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+              @keyup.enter="submitAddSub"
+            />
+          </div>
+          <div>
+            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.remark') }}</label>
+            <textarea
+              v-model="addSubForm.remark"
+              :placeholder="t('warehouse.remark_placeholder')"
+              rows="3"
+              class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            ></textarea>
+          </div>
+        </div>
+        <div class="mt-4 flex justify-end gap-2">
+          <button
+            class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
+            @click="showAddSub = false"
+          >
+            {{ t('message.cancel') }}
+          </button>
+          <button
+            class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+            :disabled="submittingSub"
+            @click="submitAddSub"
+          >
+            <svg v-if="submittingSub" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+            </svg>
+            {{ t('message.save') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+
+  <!-- 编辑容器弹窗 -->
+  <Transition name="fade">
+    <div
+      v-if="showEdit"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      @click.self="showEdit = false"
+    >
+      <div class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-5 shadow-xl dark:border-dk-muted dark:bg-dk-card">
+        <h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">{{ t('warehouse.edit_container') }}</h3>
+        <div class="space-y-3">
+          <div>
+            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.container_name') }} *</label>
+            <input
+              v-model="editForm.title"
+              type="text"
+              :placeholder="t('warehouse.title_placeholder')"
+              class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+              @keyup.enter="submitEdit"
+            />
+          </div>
+          <div>
+            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.remark') }}</label>
+            <textarea
+              v-model="editForm.remark"
+              :placeholder="t('warehouse.remark_placeholder')"
+              rows="3"
+              class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            ></textarea>
+          </div>
+        </div>
+        <div class="mt-4 flex justify-end gap-2">
+          <button
+            class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
+            @click="showEdit = false"
+          >
+            {{ t('message.cancel') }}
+          </button>
+          <button
+            class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+            :disabled="submittingEdit"
+            @click="submitEdit"
+          >
+            <svg v-if="submittingEdit" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+            </svg>
+            {{ t('message.save') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+
+  <!-- 删除确认 -->
+  <ConfirmDialog
+    v-model="showDeleteConfirm"
+    :title="t('warehouse.delete_confirm_title')"
+    :message="t('warehouse.delete_confirm_msg', { name: deletingName })"
+    :confirm-text="t('warehouse.delete')"
+    :cancel-text="t('message.cancel')"
+    danger
+    :confirm-loading="deleting"
+    @confirm="doDelete"
+  />
+</template>

frontend/ops_vue_js/src/views/warehouse/WarehouseContainerList.vue

@@ -0,0 +1,498 @@
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useToastStore } from '@/stores/toast'
+import { usePageTitle } from '@/composables/usePageTitle'
+import { warehouseApi } from '@/api/warehouse'
+import ConfirmDialog from '@/components/ConfirmDialog.vue'
+import {
+  IconPlus,
+  IconChevronLeft,
+  IconChevronRight,
+  IconFolder,
+  IconFolders,
+  IconPackage,
+  IconSearch,
+  IconTrash,
+  IconEdit,
+} from '@tabler/icons-vue'
+
+usePageTitle('warehouse.container_list')
+const { t, locale } = useI18n()
+const router = useRouter()
+const toast = useToastStore()
+
+// ── 状态 ──
+const containers = ref([])
+const totalCount = ref(0)
+const pageSize = ref(10)
+const currentPage = ref(1)
+const loading = ref(false)
+const search = ref('')
+
+// 新增/编辑弹窗
+const showForm = ref(false)
+const formTitle = ref('')
+const editingId = ref(null)
+const form = reactive({
+  title: '',
+  remark: '',
+  photos: [],
+})
+const submitting = ref(false)
+
+// 删除确认
+const showDeleteConfirm = ref(false)
+const deletingId = ref(null)
+const deletingName = ref('')
+
+// 统计
+const stats = reactive({ container_total: 0, item_total: 0, unstored_items: 0 })
+
+// ── 分页 ──
+const totalPages = computed(() => Math.ceil(totalCount.value / pageSize.value) || 1)
+
+const pageRange = computed(() => {
+  const total = totalPages.value
+  const cur = currentPage.value
+  let start = Math.max(1, cur - 2)
+  let end = Math.min(cur + 4, total)
+  if (end - start < 4) start = Math.max(1, end - 4)
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i)
+})
+
+// ── 拉取列表 ──
+async function fetchContainers() {
+  loading.value = true
+  try {
+    const { errCode, data } = await warehouseApi.getContainers({
+      search: search.value,
+      entries: pageSize.value,
+      page: currentPage.value,
+    })
+    if (errCode === 0) {
+      containers.value = data.containers ?? []
+      totalCount.value = data.all_count ?? 0
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    // 拦截器已处理
+  } finally {
+    loading.value = false
+  }
+}
+
+// ── 拉取统计 ──
+async function fetchStats() {
+  try {
+    const { errCode, data } = await warehouseApi.getCount()
+    if (errCode === 0) {
+      stats.container_total = data.container_total ?? 0
+      stats.item_total = data.item_total ?? 0
+      stats.unstored_items = data.unstored_items ?? 0
+    }
+  } catch {
+    // 静默
+  }
+}
+
+// ── 翻页 ──
+function goToPage(page) {
+  if (page < 1 || page > totalPages.value) return
+  currentPage.value = page
+  fetchContainers()
+}
+
+function handlePageSizeInput(e) {
+  let val = parseInt(e.target.value) || 10
+  if (val > 300) val = 300
+  if (val < 1) val = 1
+  pageSize.value = val
+  currentPage.value = 1
+  fetchContainers()
+}
+
+function handleSearch() {
+  currentPage.value = 1
+  fetchContainers()
+}
+
+// ── 跳转到子容器 ──
+function jumpToContainer(id) {
+  router.push(`/warehouse/container/${id}`)
+}
+
+// ── 打开新增 ──
+function openAdd() {
+  formTitle.value = t('warehouse.add_container')
+  editingId.value = null
+  form.title = ''
+  form.remark = ''
+  form.photos = []
+  showForm.value = true
+}
+
+// ── 打开编辑 ──
+async function openEdit(id, e) {
+  e.stopPropagation()
+  try {
+    const { errCode, data } = await warehouseApi.getContainer(id)
+    if (errCode === 0) {
+      formTitle.value = t('warehouse.edit_container')
+      editingId.value = id
+      form.title = data.container.title ?? ''
+      form.remark = data.container.remark ?? ''
+      form.photos = (data.photos ?? []).map((p) => p.sha256 ?? '')
+      showForm.value = true
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    // 拦截器已处理
+  }
+}
+
+// ── 提交表单 ──
+async function submitForm() {
+  if (!form.title.trim()) {
+    toast.warning(t('warehouse.title_required'))
+    return
+  }
+  submitting.value = true
+  try {
+    const payload = { title: form.title.trim(), remark: form.remark, photos: form.photos }
+    const { errCode } = editingId.value
+      ? await warehouseApi.updateContainer({ id: editingId.value, ...payload })
+      : await warehouseApi.addContainer(payload)
+    if (errCode === 0) {
+      showForm.value = false
+      toast.success(t('message.save_success'))
+      fetchContainers()
+      fetchStats()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    // 拦截器已处理
+  } finally {
+    submitting.value = false
+  }
+}
+
+// ── 删除确认 ──
+function confirmDelete(id, title, e) {
+  e.stopPropagation()
+  deletingId.value = id
+  deletingName.value = title
+  showDeleteConfirm.value = true
+}
+
+async function doDelete() {
+  try {
+    const { errCode } = await warehouseApi.deleteContainer(deletingId.value)
+    if (errCode === 0) {
+      toast.success(t('message.delete_ok'))
+      showDeleteConfirm.value = false
+      fetchContainers()
+      fetchStats()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    // 拦截器已处理
+  }
+}
+
+// ── 格式化时间 ──
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  const ts = parseInt(dateStr) * 1000
+  if (isNaN(ts)) return ''
+  return new Intl.DateTimeFormat(locale.value, {
+    year: 'numeric', month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit', hour12: false,
+  }).format(new Date(ts))
+}
+
+onMounted(() => {
+  fetchContainers()
+  fetchStats()
+})
+</script>
+
+<template>
+  <div class="mx-auto max-w-6xl px-6 py-6">
+
+    <!-- 统计卡片 -->
+    <div class="mb-6 grid grid-cols-3 gap-4">
+      <div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
+        <div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
+          <IconFolders :size="18" />
+          <span class="text-sm">{{ t('warehouse.container_count') }}</span>
+        </div>
+        <div class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ stats.container_total }}</div>
+      </div>
+      <div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
+        <div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
+          <IconPackage :size="18" />
+          <span class="text-sm">{{ t('warehouse.item_count') }}</span>
+        </div>
+        <div class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ stats.item_total }}</div>
+      </div>
+      <div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
+        <div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
+          <IconPackage :size="18" />
+          <span class="text-sm">{{ t('warehouse.unstored_items') }}</span>
+        </div>
+        <div class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ stats.unstored_items }}</div>
+      </div>
+    </div>
+
+    <!-- 主列表卡片 -->
+    <div class="rounded-xl border border-gray-200 bg-white shadow-lg dark:border-dk-muted dark:bg-dk-card">
+
+      <!-- Header -->
+      <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4 dark:border-dk-muted">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('warehouse.container_list') }}</h3>
+        <button
+          @click="openAdd"
+          class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+        >
+          <IconPlus :size="16" />
+          {{ t('warehouse.add_container') }}
+        </button>
+      </div>
+
+      <!-- 搜索栏 -->
+      <div class="flex items-center gap-3 border-b border-gray-100 px-6 py-3 dark:border-dk-muted">
+        <div class="relative flex-1 max-w-xs">
+          <IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="16" />
+          <input
+            v-model="search"
+            type="text"
+            :placeholder="t('warehouse.search_placeholder')"
+            class="w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            @keyup.enter="handleSearch"
+          />
+        </div>
+        <button
+          @click="handleSearch"
+          class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
+        >
+          {{ t('purchase.search') }}
+        </button>
+      </div>
+
+      <!-- 表格 -->
+      <div class="overflow-x-auto">
+        <table class="w-full text-left text-sm text-gray-900">
+          <thead>
+            <tr class="border-b border-gray-200 bg-gray-50 text-gray-500 dark:border-dk-muted dark:bg-dk-base dark:text-gray-400">
+              <th class="px-6 py-3 font-medium w-16">ID</th>
+              <th class="px-6 py-3 font-medium">{{ t('warehouse.container_name') }}</th>
+              <th class="px-6 py-3 font-medium">{{ t('warehouse.remark') }}</th>
+              <th class="px-6 py-3 font-medium w-24 text-center">{{ t('warehouse.child_containers') }}</th>
+              <th class="px-6 py-3 font-medium w-24 text-center">{{ t('warehouse.items') }}</th>
+              <th class="px-6 py-3 font-medium whitespace-nowrap w-44">{{ t('warehouse.created_at') }}</th>
+              <th class="px-6 py-3 font-medium w-28 text-right">{{ t('warehouse.actions') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- 加载中 -->
+            <tr v-if="loading">
+              <td colspan="7" class="px-6 py-8 text-center text-gray-400">
+                <svg class="mx-auto mb-2 h-5 w-5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+                </svg>
+                {{ t('message.loading') }}
+              </td>
+            </tr>
+            <!-- 空状态 -->
+            <tr v-else-if="containers.length === 0">
+              <td colspan="7" class="px-6 py-8 text-center text-gray-400 dark:text-gray-500">
+                {{ t('warehouse.no_containers') }}
+              </td>
+            </tr>
+            <!-- 列表 -->
+            <tr
+              v-else
+              v-for="c in containers"
+              :key="c.ID"
+              class="border-b border-gray-100 cursor-pointer transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
+              @click="jumpToContainer(c.ID)"
+            >
+              <td class="px-6 py-3 text-gray-500 dark:text-gray-400">{{ c.ID }}</td>
+              <td class="px-6 py-3">
+                <div class="flex items-center gap-2">
+                  <IconFolder class="text-blue-500 flex-shrink-0" :size="18" />
+                  <span class="font-medium text-gray-900 dark:text-white max-w-xs truncate">{{ c.Title }}</span>
+                </div>
+              </td>
+              <td class="px-6 py-3 text-gray-500 dark:text-gray-400 max-w-xs truncate">{{ c.Remark || '—' }}</td>
+              <td class="px-6 py-3 text-center">
+                <span
+                  class="inline-flex items-center gap-1 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-400"
+                >
+                  <IconFolders :size="12" />
+                  {{ c.ChildCount }}
+                </span>
+              </td>
+              <td class="px-6 py-3 text-center">
+                <span
+                  class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/40 dark:text-green-400"
+                >
+                  <IconPackage :size="12" />
+                  {{ c.ItemCount }}
+                </span>
+              </td>
+              <td class="px-6 py-3 whitespace-nowrap text-gray-500 dark:text-gray-400">{{ formatDate(c.CreatedAt) }}</td>
+              <td class="px-6 py-3 text-right" @click.stop>
+                <div class="flex items-center justify-end gap-1">
+                  <button
+                    v-if="c.ChildCount === 0 && c.ItemCount === 0"
+                    class="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-red-500 dark:hover:bg-dk-muted"
+                    :title="t('warehouse.delete')"
+                    @click="confirmDelete(c.ID, c.Title, $event)"
+                  >
+                    <IconTrash :size="15" />
+                  </button>
+                  <button
+                    class="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-blue-500 dark:hover:bg-dk-muted"
+                    :title="t('warehouse.edit')"
+                    @click="openEdit(c.ID, $event)"
+                  >
+                    <IconEdit :size="15" />
+                  </button>
+                  <button
+                    class="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-blue-500 dark:hover:bg-dk-muted"
+                    :title="t('warehouse.view_items')"
+                    @click="jumpToContainer(c.ID)"
+                  >
+                    <IconChevronRight :size="15" />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="flex flex-col items-center gap-3 border-t border-gray-100 px-6 py-4 sm:flex-row sm:justify-between dark:border-dk-muted">
+        <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+          <span>共 {{ totalCount }} 条</span>
+          <span>每页</span>
+          <input
+            type="number"
+            :value="pageSize"
+            min="1"
+            max="300"
+            class="w-14 rounded border border-gray-300 px-1.5 py-0.5 text-center text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            @change="handlePageSizeInput"
+          />
+          <span>条</span>
+        </div>
+        <div class="flex items-center gap-1">
+          <button
+            @click="goToPage(1)"
+            :disabled="currentPage === 1"
+            class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted"
+          >
+            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5"/></svg>
+          </button>
+          <button
+            @click="goToPage(currentPage - 1)"
+            :disabled="currentPage === 1"
+            class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted"
+          >
+            <IconChevronLeft :size="16" />
+          </button>
+          <button
+            v-for="p in pageRange"
+            :key="p"
+            @click="goToPage(p)"
+            :class="['rounded px-2.5 py-1 text-sm', p === currentPage ? 'bg-blue-600 text-white' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted']"
+          >{{ p }}</button>
+          <button
+            @click="goToPage(currentPage + 1)"
+            :disabled="currentPage === totalPages"
+            class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted"
+          >
+            <IconChevronRight :size="16" />
+          </button>
+          <button
+            @click="goToPage(totalPages)"
+            :disabled="currentPage === totalPages"
+            class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted"
+          >
+            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 新增/编辑弹窗 -->
+  <Teleport to="body">
+    <div
+      v-if="showForm"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4"
+      @click.self="showForm = false"
+    >
+      <div class="w-full max-w-lg rounded-xl bg-white p-6 shadow-xl dark:bg-dk-card">
+        <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">{{ formTitle }}</h3>
+        <div class="space-y-4">
+          <div>
+            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              {{ t('warehouse.container_name') }} <span class="text-red-500">*</span>
+            </label>
+            <input
+              v-model="form.title"
+              type="text"
+              :placeholder="t('warehouse.title_placeholder')"
+              class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            />
+          </div>
+          <div>
+            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.remark') }}</label>
+            <textarea
+              v-model="form.remark"
+              rows="3"
+              :placeholder="t('warehouse.remark_placeholder')"
+              class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white resize-none"
+            ></textarea>
+          </div>
+        </div>
+        <div class="mt-5 flex justify-end gap-2">
+          <button
+            @click="showForm = false"
+            class="rounded-lg border border-gray-300 px-4 py-2 text-sm dark:border-dk-muted dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
+          >
+            {{ t('message.cancel') }}
+          </button>
+          <button
+            @click="submitForm"
+            :disabled="submitting"
+            class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-60"
+          >
+            {{ submitting ? t('message.submitting') : t('message.submit') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+  <!-- 删除确认 -->
+  <ConfirmDialog
+    v-model="showDeleteConfirm"
+    :title="t('warehouse.delete_confirm_title')"
+    :message="t('warehouse.delete_confirm_msg', { name: deletingName })"
+    :confirm-text="t('warehouse.delete')"
+    :cancel-text="t('message.cancel')"
+    danger
+    @confirm="doDelete"
+  />
+</template>

frontend/ops_vue_js/src/views/warehouse/WarehouseItemDetail.vue

@@ -0,0 +1,656 @@
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useToastStore } from '@/stores/toast'
+import { usePageTitle } from '@/composables/usePageTitle'
+import { useUsersStore } from '@/stores/users'
+import { warehouseApi } from '@/api/warehouse'
+import ConfirmDialog from '@/components/ConfirmDialog.vue'
+import {
+  IconPackage,
+  IconEdit,
+  IconTrash,
+  IconArrowRight,
+  IconSearch,
+} from '@tabler/icons-vue'
+
+usePageTitle('warehouse.item_detail')
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const toast = useToastStore()
+const usersStore = useUsersStore()
+
+const itemId = computed(() => parseInt(route.params.id))
+
+// ── 物品详情 ──
+const item = ref(null)
+const photos = ref([])
+const commits = ref([])
+const workOrders = ref([])
+const loadingDetail = ref(true)
+const notFound = ref(false)
+
+// ── 容器名缓存 ──
+const containerNames = reactive({})
+
+// ── Tab ──
+const activeTab = ref('history')
+
+// ── 编辑弹窗 ──
+const showEdit = ref(false)
+const editForm = reactive({
+  name: '',
+  serial_number: '',
+  remark: '',
+  quantity: 1,
+})
+const submittingEdit = ref(false)
+
+// ── 移动弹窗 ──
+const showMove = ref(false)
+const moveTarget = ref(null)
+const moveRemark = ref('')
+const submittingMove = ref(false)
+
+// 移动目标下拉
+const targetContainers = ref([])
+const targetSearch = ref('')
+const targetLoading = ref(false)
+const showTargetDropdown = ref(false)
+
+// ── 删除确认 ──
+const showDeleteConfirm = ref(false)
+
+// ── 工单状态颜色 ──
+const statusColorMap = {
+  pending: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-400',
+  checked: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
+  parts_ordered: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400',
+  repaired: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400',
+  returned: 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
+  unrepairable: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
+}
+
+function getStatusClass(status) {
+  return statusColorMap[status] || 'bg-gray-100 text-gray-600'
+}
+
+function getStatusLabel(status) {
+  return t(`work_order.status_${status}`) || status
+}
+
+// ── 时间格式化 ──
+function fmtTs(ts) {
+  if (!ts) return '—'
+  const d = new Date(parseInt(ts) * 1000)
+  return d.toLocaleString()
+}
+
+// ── 拉取物品详情 ──
+async function fetchItem() {
+  loadingDetail.value = true
+  notFound.value = false
+  try {
+    const { errCode, data } = await warehouseApi.getItem(itemId.value)
+    if (errCode === 0 && data) {
+      item.value = data.item
+      photos.value = data.photos ?? []
+      commits.value = data.commits ?? []
+      workOrders.value = data.work_orders ?? []
+      loadContainerNames()
+    } else {
+      notFound.value = true
+    }
+  } catch {
+    notFound.value = true
+  } finally {
+    loadingDetail.value = false
+  }
+}
+
+// ── 加载容器名 ──
+async function loadContainerNames() {
+  const ids = new Set()
+  for (const c of commits.value) {
+    if (c.OldContainer) ids.add(c.OldContainer)
+    if (c.NewContainer) ids.add(c.NewContainer)
+  }
+  if (item.value?.ContainerID) ids.add(item.value.ContainerID)
+  if (ids.size === 0) return
+
+  try {
+    const allContainers = []
+    let page = 1
+    let hasMore = true
+    while (hasMore) {
+      const { errCode, data } = await warehouseApi.getContainers({ entries: 300, page })
+      if (errCode === 0) {
+        allContainers.push(...(data.containers ?? []))
+        hasMore = (data.containers ?? []).length === 300
+        page++
+      } else {
+        break
+      }
+    }
+    for (const c of allContainers) {
+      if (ids.has(c.ID)) {
+        containerNames[c.ID] = c.Title
+      }
+    }
+  } catch {
+    // ignore
+  }
+}
+
+// ── 获取容器显示名 ──
+function getContainerName(id) {
+  if (!id) return t('warehouse.unstored')
+  return containerNames[id] || `#${id}`
+}
+
+// ── 编辑 ──
+function openEdit() {
+  editForm.name = item.value?.Name ?? ''
+  editForm.serial_number = item.value?.SerialNumber ?? ''
+  editForm.remark = item.value?.Remark ?? ''
+  editForm.quantity = item.value?.Quantity ?? 1
+  showEdit.value = true
+}
+
+async function submitEdit() {
+  if (!editForm.name.trim()) {
+    toast.error(t('warehouse.item_name_required'))
+    return
+  }
+  submittingEdit.value = true
+  try {
+    const { errCode } = await warehouseApi.updateItem({
+      id: itemId.value,
+      name: editForm.name.trim(),
+      serial_number: editForm.serial_number.trim(),
+      remark: editForm.remark.trim(),
+      quantity: editForm.quantity > 0 ? editForm.quantity : 1,
+    })
+    if (errCode === 0) {
+      toast.success(t('message.save_success'))
+      showEdit.value = false
+      fetchItem()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    toast.error(t('message.server_error'))
+  } finally {
+    submittingEdit.value = false
+  }
+}
+
+// ── 移动 ──
+async function openMove() {
+  moveTarget.value = item.value?.ContainerID ?? null
+  moveRemark.value = ''
+  targetSearch.value = ''
+  targetContainers.value = []
+  showTargetDropdown.value = false
+  showMove.value = true
+}
+
+async function loadTargetContainers(search = '') {
+  targetLoading.value = true
+  try {
+    const { errCode, data } = await warehouseApi.getContainers({
+      search,
+      entries: 50,
+      page: 1,
+    })
+    if (errCode === 0) {
+      targetContainers.value = (data.containers ?? []).filter(
+        (c) => c.ID !== itemId.value && c.ID !== item.value?.ContainerID
+      )
+    }
+  } catch {
+    targetContainers.value = []
+  } finally {
+    targetLoading.value = false
+  }
+}
+
+function selectTarget(id, title) {
+  moveTarget.value = id
+  targetSearch.value = title
+  showTargetDropdown.value = false
+}
+
+async function submitMove() {
+  if (moveTarget.value === item.value?.ContainerID) {
+    showMove.value = false
+    return
+  }
+  submittingMove.value = true
+  try {
+    const { errCode } = await warehouseApi.moveItem({
+      item_id: itemId.value,
+      new_container: moveTarget.value,
+      remark: moveRemark.value.trim(),
+    })
+    if (errCode === 0) {
+      toast.success(t('message.save_success'))
+      showMove.value = false
+      fetchItem()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    toast.error(t('message.server_error'))
+  } finally {
+    submittingMove.value = false
+  }
+}
+
+// ── 删除 ──
+async function doDelete() {
+  try {
+    const { errCode } = await warehouseApi.deleteItem(itemId.value)
+    if (errCode === 0) {
+      toast.success(t('message.delete_ok'))
+      showDeleteConfirm.value = false
+      const cid = item.value?.ContainerID
+      if (cid) {
+        router.push(`/warehouse/container/${cid}`)
+      } else {
+        router.push('/warehouse/item')
+      }
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    toast.error(t('message.server_error'))
+  }
+}
+
+// ── 初始化 ──
+onMounted(() => {
+  fetchItem()
+})
+</script>
+
+<template>
+  <div class="p-4 max-w-5xl mx-auto space-y-4">
+
+    <!-- 加载 -->
+    <div v-if="loadingDetail" class="flex justify-center py-16">
+      <svg class="h-6 w-6 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+      </svg>
+    </div>
+
+    <!-- 未找到 -->
+    <div v-else-if="notFound" class="flex flex-col items-center justify-center py-16 text-gray-400">
+      <p>{{ t('message.not_found') }}</p>
+      <button class="mt-2 text-sm text-blue-500 hover:underline" @click="router.push('/warehouse/item')">
+        {{ t('warehouse.back_to_list') }}
+      </button>
+    </div>
+
+    <template v-else-if="item">
+
+      <!-- 面包屑 + 操作栏 -->
+      <div class="flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2 text-sm">
+          <RouterLink to="/warehouse/item" class="text-blue-500 hover:underline">
+            {{ t('warehouse.item_list') }}
+          </RouterLink>
+          <span class="text-gray-400">/</span>
+          <span class="font-medium text-gray-900 dark:text-white">{{ item.Name }}</span>
+        </div>
+        <div class="flex gap-2">
+          <button
+            class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:bg-dk-base dark:text-white dark:hover:bg-dk-muted"
+            @click="openMove"
+          >
+            <IconArrowRight :size="14" />
+            {{ t('warehouse.move_item') }}
+          </button>
+          <button
+            class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:bg-dk-base dark:text-white dark:hover:bg-dk-muted"
+            @click="openEdit"
+          >
+            <IconEdit :size="14" />
+            {{ t('warehouse.edit') }}
+          </button>
+          <button
+            class="inline-flex items-center gap-1.5 rounded-lg border border-red-300 bg-white px-3 py-1.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:border-red-900 dark:bg-dk-base dark:text-red-400 dark:hover:bg-red-900/20"
+            @click="showDeleteConfirm = true"
+          >
+            <IconTrash :size="14" />
+            {{ t('warehouse.delete') }}
+          </button>
+        </div>
+      </div>
+
+      <!-- 物品信息卡 -->
+      <div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
+        <div class="flex items-start gap-4 mb-3">
+          <div class="flex-shrink-0 mt-1">
+            <IconPackage :size="32" class="text-blue-500" />
+          </div>
+          <div class="flex-1 min-w-0">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ item.Name }}</h2>
+            <div class="flex flex-wrap gap-x-6 gap-y-1 mt-1 text-sm text-gray-500">
+              <span v-if="item.SerialNumber">{{ t('warehouse.serial_number') }}: {{ item.SerialNumber }}</span>
+              <span>{{ t('warehouse.quantity') }}: {{ item.Quantity }}</span>
+              <span>{{ t('warehouse.location') }}:
+                <RouterLink
+                  v-if="item.ContainerID"
+                  :to="`/warehouse/container/${item.ContainerID}`"
+                  class="text-blue-500 hover:underline ml-1"
+                >
+                  {{ containerNames[item.ContainerID] || `#${item.ContainerID}` }}
+                </RouterLink>
+                <span v-else class="text-orange-500 ml-1">{{ t('warehouse.unstored') }}</span>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 图片 -->
+        <div v-if="photos.length" class="flex gap-2 flex-wrap mb-3">
+          <a
+            v-for="photo in photos"
+            :key="photo.ID"
+            :href="`/api/files/get/${photo.Sha256}`"
+            target="_blank"
+          >
+            <img
+              :src="`/api/files/get/${photo.Sha256}`"
+              class="w-16 h-16 object-cover rounded border border-gray-200 dark:border-dk-muted"
+              :alt="photo.Name"
+            />
+          </a>
+        </div>
+
+        <!-- 备注 -->
+        <p
+          v-if="item.Remark"
+          class="text-sm text-gray-500 dark:text-gray-400 whitespace-pre-wrap mb-3"
+        >
+          {{ item.Remark }}
+        </p>
+
+        <!-- 元信息 -->
+        <div class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-gray-400 dark:text-gray-500">
+          <span>{{ t('warehouse.created_by') }}: {{ usersStore.getUsernameFromUserID(item.CreatorID) }}</span>
+          <span>{{ t('warehouse.created_at') }}: {{ fmtTs(item.CreatedAt) }}</span>
+        </div>
+      </div>
+
+      <!-- Tab 切换 -->
+      <div class="flex gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-dk-muted dark:bg-dk-base w-fit">
+        <button
+          class="px-4 py-1.5 text-sm rounded-md font-medium transition-colors"
+          :class="activeTab === 'history'
+            ? 'bg-white text-gray-900 shadow-sm dark:bg-dk-card dark:text-white'
+            : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
+          @click="activeTab = 'history'"
+        >
+          {{ t('warehouse.move_history') }} ({{ commits.length }})
+        </button>
+        <button
+          class="px-4 py-1.5 text-sm rounded-md font-medium transition-colors"
+          :class="activeTab === 'work_orders'
+            ? 'bg-white text-gray-900 shadow-sm dark:bg-dk-card dark:text-white'
+            : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
+          @click="activeTab = 'work_orders'"
+        >
+          {{ t('warehouse.work_orders') }} ({{ workOrders.length }})
+        </button>
+      </div>
+
+      <!-- 移动历史 -->
+      <div v-if="activeTab === 'history'">
+        <div v-if="commits.length === 0" class="rounded-xl border border-gray-200 bg-white px-5 py-8 text-center text-sm text-gray-400 dark:border-dk-muted dark:bg-dk-card">
+          {{ t('warehouse.no_move_history') }}
+        </div>
+        <div v-else class="space-y-2">
+          <div
+            v-for="commit in commits"
+            :key="commit.ID"
+            class="rounded-xl border border-gray-200 bg-white px-4 py-3 flex items-center gap-3 dark:border-dk-muted dark:bg-dk-card"
+          >
+            <!-- 操作人头像 -->
+            <div class="flex-shrink-0">
+              <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-400">
+                {{ usersStore.getUsernameFromUserID(commit.UserID)?.slice(0, 1) || '?' }}
+              </div>
+            </div>
+            <!-- 路径 -->
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2 flex-wrap text-xs text-gray-400">
+                <span>{{ usersStore.getUsernameFromUserID(commit.UserID) }}</span>
+                <span>{{ fmtTs(commit.CreatedAt) }}</span>
+              </div>
+              <div class="flex items-center gap-1.5 mt-0.5 flex-wrap text-sm font-medium text-gray-700 dark:text-gray-200">
+                <span>{{ getContainerName(commit.OldContainer) }}</span>
+                <IconArrowRight :size="13" class="text-blue-500 flex-shrink-0" />
+                <span>{{ getContainerName(commit.NewContainer) }}</span>
+              </div>
+              <p v-if="commit.Remark" class="text-xs text-gray-400 mt-0.5">{{ commit.Remark }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 关联工单 -->
+      <div v-if="activeTab === 'work_orders'">
+        <div v-if="workOrders.length === 0" class="rounded-xl border border-gray-200 bg-white px-5 py-8 text-center text-sm text-gray-400 dark:border-dk-muted dark:bg-dk-card">
+          {{ t('warehouse.no_work_orders') }}
+        </div>
+        <div v-else class="space-y-2">
+          <RouterLink
+            v-for="wo in workOrders"
+            :key="wo.id"
+            :to="`/work_order/show/${wo.id}`"
+            class="rounded-xl border border-gray-200 bg-white px-4 py-3 flex items-center justify-between gap-3 hover:shadow transition-shadow dark:border-dk-muted dark:bg-dk-card dark:hover:shadow-none"
+          >
+            <div class="flex items-center gap-3 min-w-0">
+              <IconPackage :size="16" class="text-blue-500 flex-shrink-0" />
+              <span class="font-medium text-sm text-gray-900 truncate dark:text-white">{{ wo.title }}</span>
+            </div>
+            <span
+              class="flex-shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium"
+              :class="getStatusClass(wo.status)"
+            >
+              {{ getStatusLabel(wo.status) }}
+            </span>
+          </RouterLink>
+        </div>
+      </div>
+
+    </template>
+  </div>
+
+  <!-- 编辑弹窗 -->
+  <Transition name="fade">
+    <div
+      v-if="showEdit"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      @click.self="showEdit = false"
+    >
+        <div class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-5 shadow-xl dark:border-dk-muted dark:bg-dk-card">
+          <h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">{{ t('warehouse.edit_item') }}</h3>
+          <div class="space-y-3">
+            <div>
+              <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.item_name') }} *</label>
+              <input
+                v-model="editForm.name"
+                type="text"
+                :placeholder="t('warehouse.item_name_placeholder')"
+                class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+                @keyup.enter="submitEdit"
+              />
+            </div>
+            <div>
+              <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.serial_number') }}</label>
+              <input
+                v-model="editForm.serial_number"
+                type="text"
+                :placeholder="t('warehouse.serial_number_placeholder')"
+                class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+              />
+            </div>
+            <div>
+              <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.quantity') }}</label>
+              <input
+                v-model.number="editForm.quantity"
+                type="number"
+                min="1"
+                class="w-28 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+              />
+            </div>
+            <div>
+              <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.remark') }}</label>
+              <textarea
+                v-model="editForm.remark"
+                :placeholder="t('warehouse.remark_placeholder')"
+                rows="3"
+                class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+              ></textarea>
+            </div>
+          </div>
+          <div class="mt-4 flex justify-end gap-2">
+            <button
+              class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
+              @click="showEdit = false"
+            >
+              {{ t('message.cancel') }}
+            </button>
+            <button
+              class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+              :disabled="submittingEdit"
+              @click="submitEdit"
+            >
+              <svg v-if="submittingEdit" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+              </svg>
+              {{ t('message.save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+  <!-- 移动弹窗 -->
+  <Transition name="fade">
+    <div
+      v-if="showMove"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      @click.self="showMove = false"
+    >
+      <div class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-5 shadow-xl dark:border-dk-muted dark:bg-dk-card">
+        <h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">{{ t('warehouse.move_item') }}</h3>
+        <div class="space-y-3">
+          <div class="text-sm text-gray-500">
+            {{ t('warehouse.current_location') }}:
+            <span class="font-medium text-gray-700 dark:text-gray-300">
+              <RouterLink
+                v-if="item?.ContainerID"
+                :to="`/warehouse/container/${item.ContainerID}`"
+                class="text-blue-500 hover:underline"
+              >
+                {{ containerNames[item.ContainerID] || `#${item.ContainerID}` }}
+              </RouterLink>
+              <span v-else class="text-orange-500">{{ t('warehouse.unstored') }}</span>
+            </span>
+          </div>
+          <div>
+            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.target_container') }}</label>
+            <div class="relative">
+              <IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="15" />
+              <input
+                v-model="targetSearch"
+                type="text"
+                :placeholder="t('warehouse.search_container')"
+                class="w-full rounded-lg border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+                @focus="loadTargetContainers(''); showTargetDropdown = true"
+                @input="loadTargetContainers(targetSearch); showTargetDropdown = true"
+              />
+              <div
+                v-if="showTargetDropdown && (targetContainers.length > 0 || targetLoading)"
+                class="absolute z-10 mt-1 w-full rounded-lg border border-gray-200 bg-white shadow-lg dark:border-dk-muted dark:bg-dk-card max-h-60 overflow-y-auto"
+              >
+                <div v-if="targetLoading" class="px-3 py-2 text-xs text-gray-400">
+                  <svg class="inline h-3.5 w-3.5 animate-spin mr-1" viewBox="0 0 24 24" fill="none">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+                  </svg>
+                  {{ t('message.loading') }}
+                </div>
+                <button
+                  class="flex w-full items-center gap-2 px-3 py-2 text-sm text-left text-orange-500 hover:bg-gray-50 dark:text-orange-400 dark:hover:bg-dk-muted"
+                  @click="selectTarget(null, t('warehouse.unstored')); showTargetDropdown = false"
+                >
+                  {{ t('warehouse.unstored') }}
+                </button>
+                <button
+                  v-for="c in targetContainers"
+                  :key="c.ID"
+                  class="flex w-full items-center gap-2 px-3 py-2 text-sm text-left hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-dk-muted"
+                  @click="selectTarget(c.ID, c.Title); showTargetDropdown = false"
+                >
+                  <IconPackage :size="13" class="text-blue-500 flex-shrink-0" />
+                  {{ c.Title }}
+                </button>
+              </div>
+            </div>
+            <div class="mt-1 text-xs">
+              <span v-if="moveTarget === null" class="text-orange-500">→ {{ t('warehouse.unstored') }}</span>
+              <span v-else-if="moveTarget" class="text-blue-500">→ {{ containerNames[moveTarget] || `#${moveTarget}` }}</span>
+            </div>
+          </div>
+          <div>
+            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.remark') }}</label>
+            <textarea
+              v-model="moveRemark"
+              :placeholder="t('warehouse.move_remark_placeholder')"
+              rows="2"
+              class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            ></textarea>
+          </div>
+        </div>
+        <div class="mt-4 flex justify-end gap-2">
+          <button
+            class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
+            @click="showMove = false"
+          >
+            {{ t('message.cancel') }}
+          </button>
+          <button
+            class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+            :disabled="submittingMove"
+            @click="submitMove"
+          >
+            <svg v-if="submittingMove" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+            </svg>
+            {{ t('warehouse.confirm_move') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+
+  <!-- 删除确认 -->
+  <ConfirmDialog
+    v-model="showDeleteConfirm"
+    :title="t('warehouse.delete_item_title')"
+    :message="t('warehouse.delete_item_msg', { name: item?.Name })"
+    danger
+    @confirm="doDelete"
+  />
+
+</template>

frontend/ops_vue_js/src/views/warehouse/WarehouseItemList.vue

@@ -0,0 +1,353 @@
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useToastStore } from '@/stores/toast'
+import { usePageTitle } from '@/composables/usePageTitle'
+import { warehouseApi } from '@/api/warehouse'
+import ConfirmDialog from '@/components/ConfirmDialog.vue'
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconPackage,
+  IconSearch,
+  IconTrash,
+  IconArrowRight,
+} from '@tabler/icons-vue'
+
+usePageTitle('warehouse.item_list')
+const { t, locale } = useI18n()
+const router = useRouter()
+const toast = useToastStore()
+
+// ── 状态 ──
+const items = ref([])
+const totalCount = ref(0)
+const pageSize = ref(10)
+const currentPage = ref(1)
+const search = ref('')
+const loading = ref(false)
+
+// 容器名映射表
+const containerMap = ref({})
+const allContainerCount = ref(0)
+
+const isEn = computed(() => locale.value === 'en')
+
+// ── 统计数据 ──
+const stats = reactive({
+  total: 0,
+  inContainer: 0,
+  unstored: 0,
+})
+
+// ── 分页信息 ──
+const totalPages = computed(() => Math.ceil(totalCount.value / pageSize.value) || 1)
+
+function getContainerTitle(cid) {
+  if (cid == null) return `<span class="text-gray-400">${t('warehouse.unstored_items')}</span>`
+  return containerMap.value[cid] || `#${cid}`
+}
+
+// ── 获取容器名映射 ──
+async function fetchContainerMap() {
+  try {
+    const { errCode, data } = await warehouseApi.getContainers({ entries: 500, page: 1 })
+    if (errCode === 0 && data) {
+      allContainerCount.value = data.all_count || 0
+      const map = {}
+      for (const c of (data.containers || [])) {
+        map[c.id] = c.title
+      }
+      for (const c of (data.containers || [])) {
+        if (c.child_count > 0) {
+          await fetchChildContainers(c.id, map)
+        }
+      }
+      containerMap.value = map
+    }
+  } catch {
+    // ignore
+  }
+}
+
+async function fetchChildContainers(parentId, map) {
+  try {
+    const { errCode, data } = await warehouseApi.getContainers({ entries: 500, page: 1, parent_id: parentId })
+    if (errCode === 0 && data) {
+      for (const c of (data.containers || [])) {
+        map[c.id] = c.title
+      }
+    }
+  } catch {
+    // ignore
+  }
+}
+
+// ── 获取物品列表 ──
+async function fetchItems() {
+  loading.value = true
+  try {
+    const { errCode, data } = await warehouseApi.getItems({
+      search: search.value.trim(),
+      entries: pageSize.value,
+      page: currentPage.value,
+    })
+    if (errCode === 0 && data) {
+      items.value = data.items || []
+      totalCount.value = data.all_count || 0
+      stats.total = data.all_count || 0
+      stats.inContainer = items.value.filter(i => i.container_id != null).length
+      stats.unstored = items.value.filter(i => i.container_id == null).length
+    }
+  } catch {
+    toast.error(t('message.server_error'))
+  } finally {
+    loading.value = false
+  }
+}
+
+// ── 搜索 ──
+let searchTimer = null
+function onSearchInput() {
+  clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    currentPage.value = 1
+    fetchItems()
+  }, 400)
+}
+
+// ── 分页 ──
+function prevPage() {
+  if (currentPage.value > 1) {
+    currentPage.value--
+    fetchItems()
+  }
+}
+function nextPage() {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++
+    fetchItems()
+  }
+}
+function goPage(p) {
+  if (p >= 1 && p <= totalPages.value && p !== currentPage.value) {
+    currentPage.value = p
+    fetchItems()
+  }
+}
+
+const pageNumbers = computed(() => {
+  const total = totalPages.value
+  const cur = currentPage.value
+  if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1)
+  const pages = []
+  if (cur <= 3) {
+    pages.push(1, 2, 3, 4, '...', total)
+  } else if (cur >= total - 2) {
+    pages.push(1, '...', total - 3, total - 2, total - 1, total)
+  } else {
+    pages.push(1, '...', cur - 1, cur, cur + 1, '...', total)
+  }
+  return pages
+})
+
+// ── 跳转物品详情 ──
+function goToDetail(item) {
+  router.push(`/warehouse/item/${item.id}`)
+}
+
+// ── 删除 ──
+const deleteTarget = ref(null)
+const confirmDelete = ref(false)
+const deletingItem = ref(false)
+
+function askDelete(item) {
+  deleteTarget.value = item
+  confirmDelete.value = true
+}
+
+async function doDeleteItem() {
+  if (!deleteTarget.value) return
+  deletingItem.value = true
+  try {
+    const { errCode } = await warehouseApi.deleteItem(deleteTarget.value.id)
+    if (errCode === 0) {
+      toast.success(t('message.delete_success'))
+      confirmDelete.value = false
+      deleteTarget.value = null
+      fetchItems()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    toast.error(t('message.server_error'))
+  } finally {
+    deletingItem.value = false
+  }
+}
+
+// ── 工具函数 ──
+function formatDate(dateStr) {
+  if (!dateStr) return '—'
+  try {
+    const d = new Date(dateStr)
+    return d.toLocaleDateString(isEn.value ? 'en-US' : 'zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
+  } catch {
+    return dateStr
+  }
+}
+
+onMounted(() => {
+  fetchContainerMap().then(fetchItems)
+})
+</script>
+
+<template>
+  <div class="p-4 max-w-6xl mx-auto space-y-4">
+
+    <!-- 统计卡片 -->
+    <div class="grid grid-cols-3 gap-3">
+      <div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
+        <div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
+          <IconPackage :size="18" />
+          <span class="text-sm">{{ t('warehouse.item_count') }}</span>
+        </div>
+        <div class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ stats.total }}</div>
+      </div>
+      <div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
+        <div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
+          <IconArrowRight :size="18" />
+          <span class="text-sm">{{ t('warehouse.items_in_containers') }}</span>
+        </div>
+        <div class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ stats.inContainer }}</div>
+      </div>
+      <div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
+        <div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
+          <IconPackage :size="18" />
+          <span class="text-sm">{{ t('warehouse.unstored_items') }}</span>
+        </div>
+        <div class="mt-1 text-2xl font-bold text-orange-600 dark:text-orange-400">{{ stats.unstored }}</div>
+      </div>
+    </div>
+
+    <!-- 搜索栏 -->
+    <div class="rounded-xl border border-gray-200 bg-white px-4 py-3 flex items-center gap-3 dark:border-dk-muted dark:bg-dk-card">
+      <IconSearch :size="18" class="text-gray-400 flex-shrink-0" />
+      <input
+        v-model="search"
+        class="flex-1 bg-transparent outline-none text-sm text-gray-900 dark:text-white"
+        :placeholder="t('warehouse.search_item_placeholder')"
+        @input="onSearchInput"
+      />
+    </div>
+
+    <!-- 表格卡片 -->
+    <div class="rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card">
+      <!-- 加载 -->
+      <div v-if="loading" class="flex justify-center py-12">
+        <svg class="h-6 w-6 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+        </svg>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else-if="items.length === 0" class="flex flex-col items-center justify-center py-16 text-gray-400">
+        <IconPackage :size="40" class="mb-3 opacity-30" />
+        <span class="text-sm">{{ t('warehouse.no_items') }}</span>
+      </div>
+
+      <!-- 表格 -->
+      <div v-else class="overflow-x-auto">
+        <table class="w-full text-left text-sm text-gray-900 dark:text-white">
+          <thead>
+            <tr class="border-b border-gray-200 bg-gray-50 text-gray-500 dark:border-dk-muted dark:bg-dk-base dark:text-gray-400">
+              <th class="px-5 py-3 font-medium">{{ t('warehouse.item_name') }}</th>
+              <th class="px-5 py-3 font-medium">{{ t('warehouse.serial_number') }}</th>
+              <th class="px-5 py-3 font-medium w-20 text-center">{{ t('warehouse.quantity') }}</th>
+              <th class="px-5 py-3 font-medium">{{ t('warehouse.location') }}</th>
+              <th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.created_at') }}</th>
+              <th class="px-5 py-3 font-medium w-16 text-right">{{ t('warehouse.actions') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="item in items"
+              :key="item.id"
+              class="border-b border-gray-100 cursor-pointer transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
+              @click="goToDetail(item)"
+            >
+              <td class="px-5 py-3 font-medium max-w-[200px] truncate">{{ item.name }}</td>
+              <td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[160px] truncate">{{ item.serial_number || '—' }}</td>
+              <td class="px-5 py-3 text-center text-sm">{{ item.quantity }}</td>
+              <td class="px-5 py-3">
+                <span v-if="item.container_id != null" class="inline-flex items-center gap-1 text-blue-600 text-sm">
+                  <IconArrowRight :size="13" />
+                  <span class="truncate max-w-[140px]">{{ getContainerTitle(item.container_id) }}</span>
+                </span>
+                <span v-else class="inline-flex items-center gap-1 text-xs text-orange-500">
+                  {{ t('warehouse.unstored_items') }}
+                </span>
+              </td>
+              <td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ formatDate(item.created_at) }}</td>
+              <td class="px-5 py-3 text-right" @click.stop>
+                <button
+                  class="inline-flex items-center justify-center w-7 h-7 rounded text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
+                  @click="askDelete(item)"
+                >
+                  <IconTrash :size="14" />
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="totalPages > 1" class="flex items-center justify-between px-5 py-3 border-t border-gray-100 dark:border-dk-muted">
+        <div class="text-xs text-gray-400 dark:text-gray-500">
+          {{ t('warehouse.total_items', { count: totalCount }) }}
+        </div>
+        <div class="flex items-center gap-1">
+          <button
+            class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
+            :disabled="currentPage === 1"
+            @click="prevPage"
+          >
+            <IconChevronLeft :size="15" />
+          </button>
+          <template v-for="p in pageNumbers" :key="p">
+            <span v-if="p === '...'" class="px-1 text-gray-400 text-sm">…</span>
+            <button
+              v-else
+              class="flex items-center justify-center w-7 h-7 rounded text-sm"
+              :class="p === currentPage
+                ? 'bg-blue-600 text-white font-medium'
+                : 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted'"
+              @click="goPage(p)"
+            >
+              {{ p }}
+            </button>
+          </template>
+          <button
+            class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
+            :disabled="currentPage === totalPages"
+            @click="nextPage"
+          >
+            <IconChevronRight :size="15" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 删除确认 -->
+  <ConfirmDialog
+    v-model="confirmDelete"
+    :title="t('warehouse.delete_item_title')"
+    :message="t('warehouse.delete_item_msg', { name: deleteTarget?.name })"
+    :confirm-loading="deletingItem"
+    @confirm="doDeleteItem"
+  />
+</template>