Task 7.7 完成报告：实现响应式卡片视图

任务概述

实现商品列表的响应式卡片视图，当屏幕宽度小于768px时，将表格视图切换为卡片视图。

实现内容

1. 屏幕宽度检测

添加了 @HostListener 监听窗口大小变化
实现了 checkScreenSize() 方法检测屏幕宽度
设置断点为 768px（MOBILE_BREAKPOINT）
添加了 isMobileView 状态变量

2. 卡片布局组件

在 HTML 模板中添加了完整的卡片视图结构：

卡片头部：包含复选框和状态徽章
卡片内容：
- 商品图片（100x100px）
- 商品信息（标题、ID）
- 商品详情（价格、库存、销量、创建时间）
卡片操作区：编辑、上架/下架、删除按钮

3. 响应式切换逻辑

使用 *ngIf="!isMobileView" 控制表格视图显示
使用 *ngIf="isMobileView" 控制卡片视图显示
在组件初始化时检测屏幕大小
监听窗口大小变化事件自动切换视图

4. 卡片样式实现

添加了完整的卡片样式：

卡片容器：垂直布局，16px间距
卡片头部：横向布局，包含边框分隔
卡片内容：横向布局，图片+信息
卡片详情：纵向布局，标签+值对齐
卡片操作：横向布局，按钮均分
状态徽章：保持与表格视图一致的颜色方案
价格显示：使用 DIN 字体，红色高亮

技术实现

TypeScript 改动

// 添加 HostListener 导入
import { Component, OnInit, HostListener } from '@angular/core';

// 添加响应式状态
isMobileView = false;
private readonly MOBILE_BREAKPOINT = 768;

// 添加屏幕检测方法
@HostListener('window:resize', ['$event'])
onResize(event?: Event): void {
  this.checkScreenSize();
}

private checkScreenSize(): void {
  this.isMobileView = window.innerWidth < this.MOBILE_BREAKPOINT;
}

// 在 ngOnInit 中调用
ngOnInit(): void {
  this.checkScreenSize();
  this.loadProducts();
}

HTML 改动

为表格容器添加 *ngIf="!isMobileView" 条件
添加新的卡片容器 *ngIf="isMobileView"
卡片视图复用现有的方法和数据绑定

SCSS 改动

添加了 .card-container 及其子元素的完整样式：

响应式布局
卡片阴影和边框
图片样式
文字排版
按钮布局
状态徽章样式

验证结果

编译测试

✅ 编译成功，无错误

功能验证

✅ 屏幕宽度 >= 768px：显示表格视图
✅ 屏幕宽度 < 768px：显示卡片视图
✅ 窗口大小变化时自动切换视图
✅ 卡片显示所有必要信息
✅ 卡片操作按钮功能正常
✅ 空状态在卡片视图中正常显示

符合需求

Requirements 19.4

✅ WHEN screen width is less than 768px, THE Merchant Portal SHALL convert data tables to card list view

实现内容：

✅ 检测屏幕宽度（<768px）
✅ 实现卡片布局组件
✅ 渲染商品卡片（图片+信息+操作按钮）
✅ 实现卡片样式

文件修改清单

src/app/pages/products/product-list/product-list.component.ts
- 添加 HostListener 导入
- 添加响应式状态变量
- 添加屏幕检测方法
src/app/pages/products/product-list/product-list.component.html
- 为表格添加条件渲染
- 添加卡片视图结构
src/app/pages/products/product-list/product-list.component.scss
- 添加卡片容器样式
- 添加卡片元素样式

总结

成功实现了商品列表的响应式卡片视图功能。当屏幕宽度小于768px时，系统会自动将表格视图切换为更适合移动设备的卡片视图。卡片视图保留了所有必要的商品信息和操作功能，提供了良好的移动端用户体验。

任务完成时间：2025-12-12

TASK_7.7_COMPLETION.md 3.7 KB 永久連結 文件歷史 原始文件